/* Giao diện chung Bình Minh AI — theo 4C. Không font ngoài, không inline style. */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url(/tinh/font/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-weight: 400; font-display: swap; src: url(/tinh/font/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-weight: 500; font-display: swap; src: url(/tinh/font/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-weight: 500; font-display: swap; src: url(/tinh/font/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-weight: 600; font-display: swap; src: url(/tinh/font/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-weight: 600; font-display: swap; src: url(/tinh/font/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-weight: 700; font-display: swap; src: url(/tinh/font/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-weight: 700; font-display: swap; src: url(/tinh/font/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; }

/* Bảng màu 4C. Tối là mặc định. */
:root, :root[data-theme="toi"] {
  --nen: #071C31; --the: #0E2E4D; --the-phu: #0A2540; --ke: #1B4770;
  --chu: #FFFFFF; --chu-phu: #8FA6BD; --chu-cam: #F0A15F; --loi: #FF8A8A; --tot: #6FD39A;
  --vien-nut: #FFFFFF; --nen-o: #0A2540; --vien-o: #8FA6BD;
  --cam: #E88031; --navy: #071C31;
  color-scheme: dark;
}
:root[data-theme="sang"] {
  --nen: #F7F9FC; --the: #FFFFFF; --the-phu: #EEF2F8; --ke: #DCE4EF;
  --chu: #101A28; --chu-phu: #5B6475; --chu-cam: #A8541A; --loi: #C0392B; --tot: #1E7D4A;
  --vien-nut: #071C31; --nen-o: #FFFFFF; --vien-o: #5B6475;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="may"] {
    --nen: #F7F9FC; --the: #FFFFFF; --the-phu: #EEF2F8; --ke: #DCE4EF;
    --chu: #101A28; --chu-phu: #5B6475; --chu-cam: #A8541A; --loi: #C0392B; --tot: #1E7D4A;
    --vien-nut: #071C31; --nen-o: #FFFFFF; --vien-o: #5B6475;
    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--nen); color: var(--chu);
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem; font-weight: 400; line-height: 1.5;
  overflow-wrap: anywhere;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; margin: 0 0 .75rem; }
h3 { font-size: 1.0625rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
p { margin: 0 0 .75rem; }
ul { margin: 0 0 .75rem; padding-left: 1.25rem; }
.dam { font-weight: 600; }
.chu-phu { color: var(--chu-phu); font-size: .875rem; }
.an-mat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dau-trang { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--ke); }
.thuong-hieu { display: inline-flex; align-items: center; gap: .5rem; color: var(--chu); text-decoration: none; font-weight: 700; font-size: 1.125rem; min-height: 2.75rem; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.icon-logo { width: 1.75rem; height: 1.75rem; color: var(--chu-cam); }
.than-trang { max-width: 60rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
.chan-trang { max-width: 60rem; margin: 0 auto; padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--ke); }

.the { background: var(--the); border: 1px solid var(--ke); border-radius: .75rem; padding: 1.25rem 1rem; margin: 0 0 1rem; }
.the-hep { max-width: 30rem; margin-left: auto; margin-right: auto; }
.the-nguy-hiem h2, .the-nguy-hiem h1 { color: var(--loi); }
.doc-dai { line-height: 1.7; max-width: 45rem; margin-left: auto; margin-right: auto; }

/* Liên kết: chữ cam + gạch chân, không viền. */
a.lien-ket, .doc-dai a, .chan-trang a { color: var(--chu-cam); text-decoration: underline; text-underline-offset: .15em; }

/* Nút: mọi button thật có viền 1,5px theo giao diện. */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .5rem 1rem; border: 1.5px solid var(--vien-nut); border-radius: .625rem;
  font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; text-align: center;
  background: transparent; color: var(--chu);
}
.nut-chinh { background: var(--cam); color: var(--navy); }
.nut-phu { background: transparent; color: var(--chu); }
.nut-nguy-hiem { background: transparent; color: var(--loi); }
.nut-rong { width: 100%; }
.nut-lon { font-size: 1.125rem; padding: .75rem 1.5rem; }
.nut[aria-disabled="true"], .nut:disabled { opacity: .6; cursor: not-allowed; pointer-events: none; }
.hang-nut { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: .75rem 0; }
.hang-nut form { margin: 0; }

/* Nút chọn nhóm (segmented): mục đang chọn tô nền cam, chữ navy. */
.nhom-chon { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .75rem; }
.nut-chon.dang-chon { background: var(--cam); color: var(--navy); }

/* Vòng focus cam 2px, nằm ngoài viền, cách 2px. Không bao giờ tắt. */
:focus-visible { outline: 2px solid var(--cam); outline-offset: 2px; }
a:focus-visible, .nut:focus-visible, .o-nhap:focus-visible, .o-chon:focus-visible { outline: 2px solid var(--cam); outline-offset: 2px; }

/* Ô nhập: nhãn trên ô, cỡ chữ ≥16px, cao ≥44px, viền 1px màu chữ phụ. */
.truong { margin: 0 0 1rem; }
.nhan { display: block; font-weight: 500; margin: 0 0 .375rem; }
.ghi-chu { color: var(--chu-phu); font-size: .875rem; margin: -.125rem 0 .375rem; }
.o-nhap {
  display: block; width: 100%; min-height: 2.75rem; padding: .5rem .75rem;
  font: inherit; font-size: 1rem; color: var(--chu); background: var(--nen-o);
  border: 1px solid var(--vien-o); border-radius: .5rem;
}
.o-nhap::placeholder { color: var(--chu-phu); opacity: 1; }
.o-nhap:read-only { background: var(--the-phu); }
.o-nhieu-dong { min-height: 6rem; resize: vertical; font-family: inherit; }
.o-loi { border-color: var(--loi); }
.loi-o { display: flex; gap: .375rem; align-items: flex-start; color: var(--loi); font-size: .875rem; margin: .375rem 0 0; }
.loi-o .icon { margin-top: .1rem; width: 1rem; height: 1rem; }
.khung-mat-khau { display: flex; gap: .5rem; align-items: stretch; }
.khung-mat-khau .o-nhap { flex: 1; min-width: 0; }
.nut-hien { display: none; flex: none; }
.co-js .nut-hien { display: inline-flex; }
.truong-chon { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; }
.truong-chon label { flex: 1; min-width: 0; padding: .625rem 0; }
.truong-chon .loi-o { flex-basis: 100%; }
.o-chon { width: 1.5rem; height: 1.5rem; margin: .625rem 0 0; accent-color: var(--cam); flex: none; }
.nhom-radio { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.dong-radio { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; }
.dong-radio input { width: 1.25rem; height: 1.25rem; accent-color: var(--cam); margin: 0; }
.hang-tim { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.hang-tim .truong { flex: 1; min-width: 12rem; margin: 0; }

/* Thông báo: luôn kèm icon + chữ, không dùng màu làm tín hiệu duy nhất. */
.thong-bao { display: flex; gap: .625rem; align-items: flex-start; padding: .75rem 1rem; border-radius: .625rem; border: 1px solid var(--ke); background: var(--the-phu); margin: 0 0 1rem; }
.thong-bao p { margin: 0; }
.thong-bao .icon { margin-top: .15rem; }
.thong-bao-loi { color: var(--loi); }
.thong-bao-tot { color: var(--tot); }
.thong-bao-canh { color: var(--chu-cam); }

.danh-sach-tt { margin: 0 0 1rem; }
.danh-sach-tt div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--ke); }
.danh-sach-tt dt { color: var(--chu-phu); }
.danh-sach-tt dd { margin: 0; text-align: right; font-weight: 500; }
.dong-cong-tac { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .625rem 0; border-bottom: 1px solid var(--ke); }
.dong-cong-tac p { margin: 0; }
.dong-cong-tac form { margin: 0; flex: none; }
.danh-sach-app, .danh-sach-don { list-style: none; padding: 0; margin: 0; }
.danh-sach-don li { padding: .5rem 0; border-bottom: 1px solid var(--ke); }
.danh-sach-don p { margin: 0; }
.dong-app { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; min-height: 2.75rem; color: var(--chu); text-decoration: none; border-bottom: 1px solid var(--ke); }
.dong-app > span:nth-child(2) { flex: 1; min-width: 0; }
.icon-app { width: 2.5rem; height: 2.5rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: .625rem; background: var(--the-phu); }
.nhan-trang-thai { display: inline-block; font-size: .75rem; font-weight: 600; padding: .125rem .5rem; border-radius: 999px; border: 1px solid var(--ke); color: var(--chu-cam); }
.gia-tri-mot-lan { font-size: 1.5rem; font-weight: 700; letter-spacing: .08em; padding: .75rem 1rem; background: var(--the-phu); border: 1px solid var(--ke); border-radius: .625rem; user-select: all; }

.gioi-thieu { text-align: center; padding: 2rem 0 1.5rem; }
.gioi-thieu h1 { font-size: 2rem; }
.cau-gioi-thieu { font-size: 1.125rem; color: var(--chu-phu); max-width: 32rem; margin: 0 auto 1.5rem; }

/* Menu quản trị */
.menu-qt ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.menu-qt a { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding: 0 .5rem; color: var(--chu); text-decoration: none; border-bottom: 2px solid transparent; }
.menu-qt a[aria-current="page"] { color: var(--chu-cam); border-bottom-color: var(--chu-cam); font-weight: 600; }

/* Bảng: màn rộng là bảng; điện thoại mỗi dòng thành một thẻ. Thân trang không cuộn ngang. */
.bang { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.bang th, .bang td { text-align: left; padding: .625rem .5rem; border-bottom: 1px solid var(--ke); vertical-align: top; }
.bang th { color: var(--chu-phu); font-weight: 500; font-size: .875rem; }
.bang td form { margin: 0; }
@media (max-width: 40em) {
  .bang thead { display: none; }
  .bang, .bang tbody, .bang tr, .bang td { display: block; width: 100%; }
  .bang tr { border: 1px solid var(--ke); border-radius: .75rem; padding: .5rem .75rem; margin: 0 0 .75rem; background: var(--the-phu); }
  .bang td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 0; padding: .375rem 0; text-align: right; }
  .bang td::before { content: attr(data-nhan); color: var(--chu-phu); font-weight: 500; text-align: left; }
  .dong-cong-tac { flex-wrap: wrap; }
}