/* =============================================================================
 * 4T REPORTING · BO PHAN DUNG CHUNG — ⛔ MOBILE-FIRST.
 * Nguon: COMPONENT-CONTRACT.md · DATA-VISUALIZATION-CONTRACT.md §5.
 * ============================================================================= */

/* --- THE (card) ----------------------------------------------------------- */
.the {
  background: var(--surface-raised);
  border-radius: 12px;                /* <=849: 12 · >=850: 16 */
  box-shadow: var(--shadow-card);
  padding: var(--space-5);            /* <=849: 20 · >=850: 24 */
  display: flex; flex-direction: column;
}
.the > :last-child { margin-bottom: 0; }
.the-tieu-de { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* --- THE KPI (DATA-VISUALIZATION §5.3) ------------------------------------
 * ⛔ Nhan KPI KHONG viet hoa toan bo. Chu hoa tieng Viet lam dau chong len nhau
 *   va mat gan het kha nang doc luot (`E-sac-mu` `O-nang-mu` `U-ngã-mu`).
 *   Day la khac biet CO CHU DICH so voi `.t4-kicker` cua WordPress.            */
.kpi-nhan    { font: 500 13px/20px var(--font-body); color: var(--text-muted); margin: 0 0 var(--space-1); }
.kpi-gia-tri { font-size: 24px; font-weight: 600; line-height: 32px; color: var(--text-primary); margin: 0; overflow-wrap: anywhere; }
.kpi-don-vi  { font: 500 14px/22px var(--font-body); color: var(--text-muted); margin-left: 2px; }
.kpi-so-sanh { font: 600 13px/20px var(--font-body); margin: var(--space-2) 0 0; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.kpi-ky      { font: 400 12px/18px var(--font-body); color: var(--text-muted); margin: 2px 0 0; }

/* --- CHI BAO TANG / GIAM (DATA-VISUALIZATION §5.4) ------------------------
 * ⛔ BA KENH CUNG LUC: mui ten + mau + chu. Thieu kenh nao cung la vi pham.
 * ⛔ TANG KHONG LUON LA TOT. Mau di theo Y NGHIA cua chi so, khong theo dau so:
 *   CPA tang la XAU. Lop `.tot` / `.xau` / `.trung-tinh` do MAY TINH KET LUAN tu
 *   `direction` cua chi so, ⛔ khong suy tu dau cua con so.                      */
.chi-bao::before { font-family: var(--font-body); margin-right: 2px; }
.chi-bao.len::before     { content: '\25B2'; }   /* ▲ */
.chi-bao.xuong::before   { content: '\25BC'; }   /* ▼ */
.chi-bao.ngang::before   { content: '\2014'; }   /* — */
.chi-bao.tot         { color: var(--chart-positive); }
.chi-bao.xau         { color: var(--chart-critical); }
.chi-bao.trung-tinh  { color: var(--chart-neutral); }

/* --- NUT ------------------------------------------------------------------ */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 0; border-radius: var(--radius-control);
  background: var(--action-primary-bg); color: var(--action-primary-text);
  /* ⭐ W4: TRA VE 14px/700 — co chu binh thuong cua mot cai nut.
   *   Tuong phan nay do MAU lo (`--action-primary-bg` = #A66426, trang = 4,70),
   *   ⛔ khong con do CO CHU lo. Xem khoi ⚠ ngay duoi. */
  font: 700 14px/20px var(--font-body); cursor: pointer; text-decoration: none;
}
/* ⚠⚠ NGUONG WCAG — SUA O WAVE 3 (W3-D). DOC HET TRUOC KHI DOI CO CHU O TREN.
 *
 * #FFF tren #AF6928 = 4.31:1. Ban cu cua tep nay viet: "dat 3:1 (chu lon/thanh
 * phan giao dien)" roi de co chu 14px/700 — DO LA LOI QUY TAC, khong phai lam
 * tron. WCAG 1.4.3: "chu lon" = >=24px thuong, HOAC >=18,66px (14pt) + bold.
 * 14px/700 KHONG phai chu lon ⇒ nguong cua no la 4,5:1 ⇒ 4,31 TRUOT AA.
 *
 * ⭐ Day chinh la loi Wave 2 da tra gia ben Learning: nut `--lon` mobile 18px
 *    bi coi la "chu lon" (nguong ma hoa nham thanh 18px) va truot suot ca mot
 *    dot trong khi bao cao noi da xu ly. Thieu 0,66px.
 *
 * ⛔ CACH SUA CUA WAVE 3 DA BI 4T BAC — ghi lai de khong ai lam lai:
 *   Wave 3 nang co chu len 19px/700 de roi vao nguong "chu lon" 3:1, giu
 *   nguyen nen 4,31. 4T goi dung ten no: LACH NGUONG, khong phai lam de doc
 *   hon. Nut 19px dam cung to bat thuong so voi mot cai nut.
 *
 * ⭐ CACH SUA HIEN HANH (W4) — doi MAU NEN, giu CO CHU binh thuong:
 *   `--action-primary-bg` = #A66426, trang tren no = 4,70:1 ⇒ DAT 4,5 cho chu
 *   THUONG o MOI co chu. Nut tro ve 14px/700, huy hieu ve 12px/700.
 *   ⛔ Mau THUONG HIEU #AF6928 KHONG doi — no chi thoi lam nen cho chu, van
 *      dung cho vien/net bieu do (nguong phi-chu 3:1).
 *   Khop token `--t4-hanh-dong-nen` ben Learning ⇒ hai san pham khong troi.
 *
 * Hai lop chan con lai giu nguyen:
 *   · hover/focus ha nen xuong #85501E (6,64:1).
 *   · ⛔ Khong mot dong chu chay nao cua Reporting dat tren nen camel.
 *
 * ⚠ Tuong phan nay nay do MAU giu, ⛔ khong phai do CO CHU giu — nen doi co
 *   chu o day KHONG con lam truot AA nua. Doi MAU nen thi phai TINH LAI.
 * Nguong dinh nghia MOT NOI: `qa/w3-d/nguong-wcag.mjs`.                       */
.nut:hover, .nut:focus { background: var(--action-primary-bg-hover); color: var(--action-primary-text); }
.nut-phu { background: transparent; color: var(--action-ghost-text); border: 1px solid var(--action-ghost-border); }
.nut-phu:hover, .nut-phu:focus { background: var(--state-info-bg); color: var(--action-ghost-text); }
/* ⛔ TRAN NUT — khai MOBILE-FIRST (luat nen = mobile, lop de = `min-width: 850px`).
   Khung <=849 nay rong toi 718px o kho 768 (truoc W3-D chi 352). Khong khoa lai
   thi `.nut-rong` ra 718px — mot vung cham phi ly, va dung lai loi G3 cua
   Learning (nut gian 639px o chinh kho 768 do). 352 = be rong khung dien thoai,
   van thua rong cho ngon cai.
   ⛔ KHONG viet `@media (max-width: ...)` o day de khoa: Reporting di MOT CHIEU
      (RESPONSIVE-CONTRACT §2) va `tools/verify-contracts.mjs` FAIL neu co mot
      truy van max-width. Tran duoc GO RA o >=850, khai cung selector cung do
      dac hieu — §5 doi moi thuoc tinh khac nhau giua hai kho phai khai HAI LAN. */
.nut-rong { width: 100%; max-width: 352px; }

/* --- CHIP / NHAN TRANG THAI ----------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border-radius: var(--radius-chip);
  font: 600 12px/20px var(--font-body); white-space: nowrap;
}
.chip-ok      { background: var(--state-success-bg); color: var(--state-success-text); }
.chip-canh-bao{ background: var(--state-warning-bg); color: var(--state-warning-text); }
.chip-loi     { background: var(--state-danger-bg);  color: var(--state-danger-text); }
.chip-tin     { background: var(--state-info-bg);    color: var(--state-info-text); }
.chip-nghi    { background: var(--surface-sunken);   color: var(--text-secondary); }

/* Huy hieu DEM (badge) — khac chip: badge dem, chip phan loai. */
.huy-hieu {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  background: var(--action-primary-bg); color: #FFF;   /* ⛔ khong #CF9156 (2.68) */
  /* ⭐ W4: TRA VE 12px/700. 12px KHONG phai chu lon ⇒ nguong 4,5:1 — va nay
     DAT that, vi nen la #A66426 (trang = 4,70), ⛔ khong phai vi chu to. */
  font: 700 12px/26px var(--font-numeric);
}

/* --- CANH BAO TRONG LUONG (alert) ---------------------------------------- */
.canh-bao {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4); border-radius: var(--radius-control);
  border-left: 4px solid currentColor;
  margin-bottom: var(--space-5);
}
.canh-bao > div { color: var(--text-primary); }
.canh-bao p:last-child { margin-bottom: 0; }
.canh-bao-tieu-de { font: 700 15px/24px var(--font-body); margin: 0 0 var(--space-1); }
.canh-bao.muc-loi      { background: var(--state-danger-bg);  color: var(--state-danger-text); }
.canh-bao.muc-canh-bao { background: var(--state-warning-bg); color: var(--state-warning-text); }
.canh-bao.muc-thong-tin{ background: var(--state-info-bg);    color: var(--state-info-text); }
.canh-bao.muc-chan     { background: var(--state-danger-bg);  color: var(--state-danger-text); }

/* --- TAB (COMPONENT §6) — ⛔ MOT bo duy nhat cho ca app ------------------- */
.thanh-tab {
  display: flex; gap: var(--space-1);
  overflow-x: auto;                    /* <=849: cuon ngang, ⛔ KHONG xuong dong */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: var(--space-6);
}
.the-tab {
  flex: none; padding: 10px var(--space-5);
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-muted); font: 600 15px/24px var(--font-body);
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.the-tab:hover { color: var(--text-primary); }
/* ⛔ Trang thai chon KHONG duoc chi la mau — gach chan 2px la kenh bat buoc. */
.the-tab[aria-selected='true'] { color: var(--brand-primary); border-bottom-color: var(--brand-accent); }
.the-tab[aria-disabled='true'] { color: #B9B2A4; cursor: not-allowed; }

/* --- BANG (COMPONENT §9) -------------------------------------------------- */
/* ⭐ <=849px: KHONG ep bang desktop xuong man nho. Moi hang thanh MOT THE xep doc.
 *   Ngu nghia bang duoc giu bang `role` khai tuong minh tren HTML — doi
 *   `display` khong duoc phep lam mat cau truc voi trinh doc man hinh. */
.bang-vo { width: 100%; }
.bang { width: 100%; border-collapse: collapse; font: 400 14px/22px var(--font-body); }
.bang caption { text-align: left; font: 500 13px/20px var(--font-body); color: var(--text-muted); padding-bottom: var(--space-2); }

.bang thead { display: none; }
.bang tbody tr {
  display: block; background: var(--surface-raised);
  border-radius: 12px; box-shadow: var(--shadow-card);
  padding: var(--space-4); margin-bottom: var(--space-3);
}
.bang tbody th, .bang tbody td {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: var(--space-1) 0; text-align: left; font-weight: 400;
}
.bang tbody th { font: 600 15px/24px var(--font-body); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-hairline); margin-bottom: var(--space-2); }
.bang tbody td::before {
  content: attr(data-nhan); color: var(--text-muted);
  font: 500 13px/20px var(--font-body); flex: none;
}
.bang tbody td.so { justify-content: space-between; }
.bang tfoot tr { display: block; background: var(--surface-sunken); border-radius: 12px; padding: var(--space-4); font-weight: 600; }
.bang tfoot th, .bang tfoot td { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) 0; text-align: left; }
.bang tfoot td::before { content: attr(data-nhan); color: var(--text-secondary); font: 500 13px/20px var(--font-body); }

/* ⚠ Da DO duoc o kho 375: lien ket ten khach hang trong the chi cao 24px. O kho
 *   mobile moi hang la MOT THE va lien ket do la hanh dong chinh cua the ⇒ phai
 *   dat 44px. O kho >=850 no tro lai la chu trong mot o bang (ngoai le "inline"
 *   cua WCAG 2.5.8) va duoc tra ve inline de khong keo cao moi hang. */
.bang tbody th a { display: inline-flex; align-items: center; min-height: 44px; }

/* Thanh trong o — ⛔ LUON kem so, khong bao gio chi co thanh. */
.thanh-o { display: block; height: 6px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; margin-top: 4px; }
.thanh-o > i { display: block; height: 100%; background: var(--chart-series-1); }

/* --- KHUNG RONG / LOI (DATA-VISUALIZATION §5.7) ---------------------------
 * ⛔ Khung rong phai cao DUNG BANG bieu do that. Neu khong, luc du lieu ve trang
 *   se nhay — va nhay trang la cach nhanh nhat de nguoi dung mat dau cho doc. */
.khung-rong {
  min-height: var(--chart-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--surface-page);
  border: 1px dashed var(--border-field-warm);
  border-radius: var(--radius-card);
}
.khung-rong .bt { width: 40px; height: 40px; color: var(--chart-inactive); }
.khung-rong h2, .khung-rong h3 { margin: 0; font: 600 17px/26px var(--font-display); color: var(--brand-primary); }
.khung-rong p { margin: 0; font: 500 15px/25px var(--font-body); color: var(--text-muted); max-width: 46ch; }
.khung-rong.gon { min-height: 0; }

/* --- KHOI XUONG (skeleton) ------------------------------------------------
 * ⛔ Khoi xuong cao DUNG BANG noi dung that. ⛔ Khong spinner giua man hinh:
 *   skeleton cho biet CAI GI dang toi, spinner chi cho biet "dang cho". */
.xuong { background: var(--surface-sunken); border-radius: var(--radius-chip); position: relative; overflow: hidden; }
.xuong-the { height: 118px; border-radius: 12px; }
.xuong-chu { height: 14px; margin-bottom: var(--space-2); }
.xuong-bieu-do { height: var(--chart-h); border-radius: var(--radius-card); }
.xuong::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--surface-page), transparent);
  transform: translateX(-100%);
  animation: quet 1.5s ease-in-out infinite;
}
@keyframes quet { to { transform: translateX(100%); } }
/* ⛔ prefers-reduced-motion: bo HAN quet, giu nen tinh. */
@media (prefers-reduced-motion: reduce) { .xuong::after { content: none; } }

/* --- HANG DOI CONG VIEC (man quan tri) ------------------------------------ */
.viec { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-hairline); }
.viec:last-child { border-bottom: 0; }
.viec-than { flex: 1; min-width: 0; }
.viec-ten { font: 600 15px/24px var(--font-body); margin: 0 0 2px; }
.viec-phu { font: 400 13px/20px var(--font-body); color: var(--text-muted); margin: 0; }
.viec .nut { flex: none; padding: var(--space-2) var(--space-4); }

/* --- Lien ket DUNG MOT MINH -------------------------------------------------
 * ⚠ Da DO duoc o kho 375: "Quen mat khau?" cao 18px va muc duong dan cao 15px —
 *   ca hai deu la lien ket dung mot minh, khong phai chu trong mot cau, nen
 *   nguong 44×44 ap dung. Lien ket NAM TRONG mot doan van thi khong ap (ngoai le
 *   "inline" cua WCAG 2.5.8) — do la ly do luat nay khong khai tren `a` tran. */
.lien-ket-doc { display: inline-flex; align-items: center; min-height: 44px; }
.duong-dan-muc a, .duong-dan-muc > span { display: inline-flex; align-items: center; min-height: 44px; }

/* --- Duong ke chia phan --------------------------------------------------- */
.ke { border: 0; border-top: 1px solid var(--border-hairline); margin: var(--space-8) 0; }

/* --- DETAIL ON DEMAND ----------------------------------------------------- */
.chi-tiet { border-top: 1px solid var(--border-hairline); padding-top: var(--space-5); margin-top: var(--space-6); }
.chi-tiet > summary { cursor: pointer; font: 600 15px/24px var(--font-body); color: var(--brand-primary); padding: var(--space-3) 0; min-height: 44px; display: flex; align-items: center; }
.rong { color: var(--text-muted); font-style: italic; }

/* --- Vun vat -------------------------------------------------------------- */
.hang { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hang-cuoi { margin-left: auto; }
.duoi-bieu-do { font: 400 12px/18px var(--font-body); color: var(--text-muted); margin: var(--space-3) 0 0; }
.dau-trang { margin-bottom: var(--space-5); }
.dau-trang h1 { margin-bottom: var(--space-1); }

/* --- >= 850px ------------------------------------------------------------- */
@media (min-width: 850px) {
  .the { border-radius: var(--radius-card); padding: var(--space-6); }
  .kpi-gia-tri { font-size: 32px; line-height: 40px; }
  .kpi-nhan, .kpi-so-sanh { font-size: 14px; line-height: 22px; }

  .khung-rong { min-height: var(--chart-h-lg); }
  .xuong-bieu-do { height: var(--chart-h-lg); }

  /* Bang tro lai dang BANG that: co thead, ke ngang, khong ke doc. */
  .bang-vo { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bang thead { display: table-header-group; }
  .bang tbody tr { display: table-row; background: transparent; box-shadow: none; border-radius: 0; padding: 0; margin: 0; }
  .bang tbody tr:hover { background: rgba(69, 135, 99, .06); }
  .bang thead th {
    position: sticky; top: var(--header-height); z-index: 1;
    background: var(--surface-sunken); color: var(--text-primary);
    font: 600 14px/22px var(--font-body); text-align: left;
    padding: var(--space-3) var(--space-4); white-space: nowrap;
  }
  .bang thead th.so { text-align: right; }
  .bang tbody th, .bang tbody td {
    display: table-cell; padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-hairline); vertical-align: top;
    margin: 0; font: 400 14px/22px var(--font-body);
  }
  .bang tbody th { font-weight: 600; }
  /* ⚠ Da DO duoc o >=850: lien ket ten khach hang cao 17px — duoi ca nguong
   *   24×24 cua WCAG 2.5.8. `inline-block` + 24px chua duoc ma KHONG keo cao hang
   *   (o bang da cao 46px: dem 12+12 cong dong chu 22).
   * ⛔ Khong tra ve 44px o kho nay: 44px moi hang lam bang 10 khach hang cao them
   *   200px va mat kha nang doc luot — ma doc luot chinh la viec cua bang nay. */
  .bang tbody th a { display: inline-block; min-height: 24px; min-width: 24px; }
  .bang tbody td::before, .bang tfoot td::before { content: none; }
  .bang tfoot tr { display: table-row; background: transparent; border-radius: 0; padding: 0; }
  .bang tfoot th, .bang tfoot td { display: table-cell; background: var(--surface-sunken); font-weight: 600; padding: var(--space-3) var(--space-4); }
  /* Cot dau ghim khi cuon ngang. */
  .bang tbody th, .bang thead th:first-child { position: sticky; left: 0; background: var(--surface-page); }
  .bang thead th:first-child { background: var(--surface-sunken); z-index: 2; }
}

/* --- ICON — ⛔ MOT luoi 24×24 duy nhat. Ngon ngu 4T la FILL, khong STROKE. ---
 * ⛔ `flex: 0 0 auto` la BAT BUOC: khong co no, icon trong nut flex bi bop meo
 *   khi nhan tieng Viet dai (chu Viet dai hon chu Anh 25–30%). */
.bt { display: inline-block; vertical-align: middle; flex: 0 0 auto; fill: currentColor; }
.bt-xs { width: 14px; height: 14px; }
.bt-sm { width: 16px; height: 16px; }
.bt-md { width: 20px; height: 20px; }
.bt-lg { width: 24px; height: 24px; }
.bt-xl { width: 40px; height: 40px; }

/* --- O NHAP ---------------------------------------------------------------
 * ⛔ Nhan LIEN KET voi o bang for/id. ⛔ Khong dung placeholder thay nhan:
 *   placeholder bien mat ngay khi nguoi dung bat dau go, va nguoi dung nho lai
 *   "o nay hoi gi" thi khong con gi de doc.
 * ⛔ Loi KHONG duoc bao chi bang mau vien — phai co CHU. */
.o-nhap { margin-bottom: var(--space-5); }
.nhan-o { display: block; font: 500 14px/22px var(--font-body); color: var(--text-secondary); margin-bottom: var(--space-1); }
.o {
  display: block; width: 100%; min-height: 44px;
  padding: var(--space-3);
  border: 1px solid var(--border-field); border-radius: var(--radius-field);
  background: var(--field-bg); color: var(--text-primary);
  font: 400 16px/24px var(--font-body);   /* ⛔ >=16px: duoi 16px iOS tu phong to trang */
}
.o::placeholder { color: var(--text-placeholder); }
.o[aria-invalid='true'] { border-color: var(--state-danger-text); border-width: 2px; }
.o-nhap .chu-nho { display: block; margin-top: var(--space-1); }

/* ⭐ W3-D: the dang nhap la khoi HEP CO CHU DICH — ⛔ khong gian het khung
   nhin (bieu mau rong 718px la kho dung). Nhung 352px o kho 768 thi hep hon
   can. `calc` chung mot cong thuc voi `.khung`, chan tren 420 = dung con so
   desktop ⇒ mot be rong duy nhat tu 480 tro len, khong co buoc nhay o 850. */
.khung-hep { width: calc(100% - 50px); max-width: 420px; }
.vo-logo-to { height: 40px; margin-bottom: var(--space-6); }
@media (min-width: 850px) {
  .khung-hep { width: 100%; max-width: 420px; padding-left: 0; padding-right: 0; }
  /* Khung >=850 khong doi tu Wave 2 ⇒ nut rong tro lai het khung cua no. */
  .nut-rong { max-width: none; }
}

/* ⭐ [17/09/2026] Bang "Chi tieu theo tai khoan" — LOI DA DO tren anh chup: thead `sticky; top: var(--header-height)`
 *   nam trong `.bang-vo {overflow-x:auto}` ⇒ dinh THEO KHUNG CUON, lech xuong bang chieu cao header va
 *   DE MAT dong CID dau tien. Bang ngan ⇒ khong can ghim tieu de. Cot so can phai cho thang hang tieu de. */
.bang[data-chi-tieu-theo-tk] thead th { position: static; }
.bang[data-chi-tieu-theo-tk] tbody td.so { text-align: right; font-variant-numeric: tabular-nums; }
.bang[data-chi-tieu-theo-tk] tbody th { text-align: left; }