/* Bình Minh AI — giao diện tài khoản. Bộ màu theo BRAND.md v2.0.
   Mã màu CHỈ nằm trong khối :root dưới đây; mọi chỗ khác dùng var(--…).
   Tương phản: nền navy đậm → chữ trắng; nền sáng → chữ mực; nền cam/lá/dương → chữ mực. */

@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/tinh/phong/be-vietnam-pro-vietnamese-400-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/tinh/phong/be-vietnam-pro-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-display: swap; font-weight: 500;
  src: url(/tinh/phong/be-vietnam-pro-vietnamese-500-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-display: swap; font-weight: 500;
  src: url(/tinh/phong/be-vietnam-pro-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-display: swap; font-weight: 600;
  src: url(/tinh/phong/be-vietnam-pro-vietnamese-600-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-display: swap; font-weight: 600;
  src: url(/tinh/phong/be-vietnam-pro-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/tinh/phong/be-vietnam-pro-vietnamese-700-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/tinh/phong/be-vietnam-pro-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- khối khai báo biến màu (nơi DUY NHẤT có mã màu) ---------- */
:root {
  --bm-cam: #E88031;
  --bm-la: #7DC045;
  --bm-duong: #4898C9;
  --bm-navy: #104168;
  --bm-navy-dam: #071C31;
  --bm-trang: #FFFFFF;
  --bm-kem: #F7F9FC;
  --bm-muc: #101A28;
  --bm-xam: #5B6475;
  --bm-do: #C0392B;
  --bm-cam-dam: #A8541A;
  --bm-la-dam: #3D7A1E;
}

/* ---------- hai chủ đề: chỉ tham chiếu biến ---------- */
:root, [data-giaodien="navy"] {
  --nen: var(--bm-navy-dam);
  --the: var(--bm-navy);
  --chu: var(--bm-trang);
  --o-nen: var(--bm-navy-dam);
  --o-vien: color-mix(in srgb, var(--bm-trang) 45%, transparent);
  --duong-ke: color-mix(in srgb, var(--bm-trang) 18%, transparent);
  --vien-loi: var(--bm-do);
  --vien-tot: var(--bm-la);
  --chon-nen: var(--bm-trang);
  --chon-chu: var(--bm-navy-dam);
  color-scheme: dark;
}
[data-giaodien="sang"] {
  --nen: var(--bm-kem);
  --the: var(--bm-trang);
  --chu: var(--bm-muc);
  --o-nen: var(--bm-trang);
  --o-vien: var(--bm-xam);
  --duong-ke: color-mix(in srgb, var(--bm-muc) 14%, transparent);
  --vien-loi: var(--bm-do);
  --vien-tot: var(--bm-la-dam);
  --chon-nen: var(--bm-navy);
  --chon-chu: var(--bm-trang);
  color-scheme: light;
}

/* ---------- khung ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--nen);
  color: var(--chu);
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
[hidden] { display: none !important; }

.dau {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--duong-ke);
}
.ten-thuong-hieu {
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
  color: var(--chu); text-decoration: none;
}
.ten-thuong-hieu .cham { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--bm-cam); margin-right: 8px; vertical-align: 1px; }

.chon-giao-dien { display: flex; gap: 6px; }
.chon-giao-dien button {
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer;
  min-height: 32px; padding: 0 12px; border-radius: 999px;
  background: transparent; color: var(--chu); border: 1px solid var(--o-vien);
}
.chon-giao-dien button[aria-pressed="true"] { background: var(--chon-nen); color: var(--chon-chu); border-color: var(--chon-nen); }

main { flex: 1; display: flex; justify-content: center; padding: 32px 16px 48px; }
.the {
  width: 100%; max-width: 440px;
  background: var(--the); color: var(--chu);
  border: 1px solid var(--duong-ke); border-radius: 16px;
  padding: 28px 24px;
  align-self: flex-start;
}
.the.rong { max-width: 640px; }
h1 { font-size: 26px; line-height: 1.25; margin: 0 0 6px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 18px; margin: 0 0 12px; font-weight: 600; }
.phu-de { margin: 0 0 22px; font-size: 15px; }
.muc { padding: 22px 0 0; margin: 22px 0 0; border-top: 1px solid var(--duong-ke); }

.chan { padding: 18px 20px 26px; text-align: center; font-size: 13px; border-top: 1px solid var(--duong-ke); }

/* ---------- biểu mẫu ---------- */
form { display: grid; gap: 16px; }
.o label, .o .nhan { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.o .goi-y { display: block; font-size: 13px; margin-top: 6px; }
input[type="text"], input[type="tel"], input[type="email"], input[type="password"] {
  width: 100%; min-height: 46px; padding: 10px 14px;
  font: inherit; color: var(--chu); background: var(--o-nen);
  border: 1px solid var(--o-vien); border-radius: 10px;
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--bm-duong); outline-offset: 2px;
}
.dong-y { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.dong-y input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--bm-cam); flex: none; }

/* ---------- nút ---------- */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: 10px;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
}
.nut[disabled] { opacity: 0.6; cursor: progress; }
/* nút chính: nền cam → chữ mực. Mỗi màn chỉ một. */
.nut-chinh { background: var(--bm-cam); color: var(--bm-muc); width: 100%; }
.nut-phu { background: transparent; color: var(--chu); border-color: var(--o-vien); }
.nut-nguy { background: transparent; color: var(--chu); border-color: var(--vien-loi); }
.nut-nho { min-height: 36px; padding: 0 14px; font-size: 14px; }

a { color: var(--chu); text-decoration: underline; text-underline-offset: 3px; }
.lien-ket-phu { margin: 18px 0 0; font-size: 15px; text-align: center; }

/* ---------- thông báo + trạng thái ---------- */
.bao {
  padding: 12px 14px; border-radius: 10px; font-size: 15px;
  border: 1px solid var(--duong-ke); border-left-width: 4px;
}
.bao-loi { border-color: var(--vien-loi); }
.bao-tot { border-color: var(--vien-tot); }
.bao-thong-tin { border-color: var(--bm-duong); }
.dang-tai { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.xoay {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--duong-ke); border-top-color: var(--bm-cam);
  animation: xoay 0.8s linear infinite;
}
@keyframes xoay { to { transform: rotate(360deg); } }

/* ---------- tài khoản ---------- */
.bang-tt { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 15px; }
.bang-tt dt { font-weight: 600; }
.bang-tt dd { margin: 0; overflow-wrap: anywhere; }
.ds-phien { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ds-phien li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--duong-ke); border-radius: 10px; font-size: 14px;
}
.ds-phien .nhan-hien-tai { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--bm-la); color: var(--bm-muc); font-size: 12px; font-weight: 600; }
.hang-nut { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 480px) {
  .the { padding: 22px 16px; border-radius: 12px; }
  .bang-tt { grid-template-columns: 1fr; gap: 2px; }
  .bang-tt dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .xoay { animation: none; } }