/* =============================================================================
 * 4T REPORTING · VO — ⛔ MOBILE-FIRST.
 * ⭐ "Mo len la biet tien va ket qua dang the nao."
 *
 * ⭐ MOT <nav>, HAI bo cuc. Menu chi co DUNG 5 muc nen o kho mobile no thanh
 *   THANH DIEU HUONG DAY (5 o × 70,4px o kho 352) — khong can ngan keo, khong
 *   can JavaScript, khong can bay tieu diem. O kho >= 850 chinh <nav> do nam
 *   ngang trong header.
 *   ⛔ KHONG nhan doi menu ra hai khoi HTML: hai khoi la hai su that co the lech
 *     nhau, va bo test dem `.muc-menu` se dem ra 10 thay vi 5.
 * ============================================================================= */

.vo { min-height: 100vh; display: flex; flex-direction: column; }

/* --- Header --------------------------------------------------------------- */
.vo-header {
  height: var(--header-height-sm);            /* 60px */
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--surface-raised);
  box-shadow: var(--shadow-header);
  position: sticky; top: 0; z-index: 20;
}

/* ⛔ Khoa logo theo CHIEU CAO, khong theo be rong.
 *   Bai hoc da tra gia tren production: dat be rong theo % cot ra 205px o desktop
 *   va 201px o mobile — hai so khac nhau, ca hai deu sai. */
.vo-logo { height: 28px; width: auto; display: block; flex: none; }

/* Ten to chuc dang xem — ⭐ luon hien, ke ca kho hep: nguoi dung 4T co nhieu
 * khach hang, xem nham to chuc la loi to nhat ma giao dien nay co the gay ra. */
.vo-to-chuc {
  flex: 1; min-width: 0;
  font: 600 14px/20px var(--font-body); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vo-to-chuc .chu-nho { display: block; }

/* --- Dieu huong ----------------------------------------------------------- */
.vo-nav {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  background: var(--surface-raised);
  border-top: 1px solid var(--border-field-warm);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.vo-menu {
  display: flex; list-style: none; margin: 0; padding: 0;
}
.vo-menu > li { flex: 1 1 0; min-width: 0; }

.muc-menu {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; height: var(--thanh-day);                 /* 70px — vung bam 70×70 */
  padding: var(--space-1) 2px;
  color: var(--text-muted); text-decoration: none;
  font: 600 11px/14px var(--font-body); text-align: center;
  overflow: hidden;
}
.muc-menu .bt { width: 20px; height: 20px; display: block; }
.muc-menu[aria-current='page'] { color: var(--brand-primary); }

/* ⛔ Trang dang mo KHONG duoc phan biet CHI bang mau (WCAG 1.4.1).
 *   Vach 3px la kenh thu hai, va no la kenh chinh khi in den trang. */
.muc-menu[aria-current='page']::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 3px; border-radius: 0 0 2px 2px; background: var(--brand-accent);
}

/* Chua thanh day: chua noi dung khong bi thanh day che. */
.vo-noi-dung { flex: 1; width: 100%; padding-bottom: calc(var(--thanh-day) + var(--space-8)); }

/* --- Khung noi dung -------------------------------------------------------
 * <=849: CO BIET MAY TINH BANG (Wave 3 · W3-D) · >=850: 1080px
 *
 * ⛔ DOC TRUOC KHI DOI: RESPONSIVE-CONTRACT §3 chot 352px cho MOI kho <=849.
 *    So do dich tu Figma 402 va DUNG cho CSS cu cua WordPress. No SAI cho ma
 *    moi: o kho 768 no cho MOT COT 352px giua 416px le trong — hon nua man
 *    hinh bo khong. DO DUOC (49 phep do, qa/w3-d/do-7-kho.mjs), khong suy dien.
 *
 * Luat moi (RESPONSIVE-CONTRACT §3.1), chi ap cho Reporting va `.t4lms-*`:
 *      be rong = 100% − le 25×2, chan tren 720px.
 *
 * ⭐ KHONG them breakpoint. Mot `calc` thay ca dai 480–849; du an van co DUNG
 *    MOT breakpoint 849/850. Cong don da kiem:
 *        402 → 352   ✓ giu nguyen hop dong cu, khong phai do lai kho dien thoai
 *        375 → 325   ✓ (so cung 352 se TRAN o day)
 *        480 → 430   600 → 550   720 → 670
 *        768 → 718   (93,5% khung nhin — truoc la 45,8%)
 *        820 → 720   849 → 720   (cham tran)
 * ⛔ Tran 720 KHONG phai de "giong desktop": no giu do dai dong chu doc duoc.
 */
.khung {
  width: calc(100% - 50px);     /* 25px moi ben */
  max-width: 720px;
  margin-inline: auto;
  padding: var(--space-6) 0;
}

/* --- Luoi ----------------------------------------------------------------- */
/* ⛔ Mobile LUON mot cot, tru dai KPI (2×2). ⛔ Khong bao gio 3+ cot o <=849px. */
.luoi      { display: grid; grid-template-columns: 1fr; gap: var(--gutter); }
.luoi-kpi  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin-bottom: var(--space-6); }

/* ⛔ Can hang bang grid + height:100%, KHONG bang min-height co dinh.
 *   Luat nen 11/09/2026: min-height chi dung cho MOT do dai chu; chu Viet dai hon
 *   du kien 25–30% la vo ngay. */
.luoi > *, .luoi-kpi > * { height: 100%; }

@media (min-width: 850px) {
  .vo-header { height: var(--header-height); padding: 0 var(--space-6); gap: var(--space-6); }
  .vo-logo { height: 35px; }

  /* ⚠ DA DO DUOC o dung kho 850: header tran 58px (scrollWidth 893 / clientWidth
   *   835). Hai luat duoi day la CACH CHUA, va ca hai deu can:
   *   1. `flex: 0 1 auto` — ten to chuc duoc phep CO LAI va cat bang dau ba cham.
   *      `flex: none` (ban dau) khien no day nav ra ngoai khung nhin.
   *   2. An icon trong menu ngang — icon la kenh phu cho THANH DAY (noi nhan chi
   *      11px); trong mot hang chu 15px no chi an 26px moi muc, ×5 = 130px, dung
   *      bang phan con thieu. ⛔ Icon khong bao gio la kenh duy nhat nen bo no o
   *      day khong mat thong tin nao. */
  .vo-to-chuc { flex: 0 1 auto; min-width: 0; order: 3; margin-left: auto; text-align: right; }
  .muc-menu .bt { display: none; }

  /* Cung mot <nav>, chuyen tu thanh day thanh hang ngang trong header. */
  .vo-nav { position: static; flex: 0 0 auto; border-top: 0; background: transparent; padding-bottom: 0; }
  .vo-menu { gap: var(--space-1); }
  .vo-menu > li { flex: none; }
  .muc-menu {
    flex-direction: row; gap: var(--space-2); height: auto;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-control);
    font: 600 15px/22px var(--font-body);
    color: var(--text-primary);
  }
  .muc-menu:hover { background: var(--surface-sunken); }
  .muc-menu[aria-current='page'] { background: var(--state-info-bg); color: var(--brand-primary); }
  .muc-menu[aria-current='page']::before { content: none; }

  .vo-noi-dung { padding-bottom: var(--space-10); }
  /* ⛔ `width` PHAI khai lai o day: luat nen mobile-first la `calc(100% - 50px)`,
   *    de tran la no ro sang desktop va khung 1080 bi thu 50px. RESPONSIVE
   *    CONTRACT §5 — moi thuoc tinh khac nhau giua hai kho deu khai HAI LAN. */
  .khung { width: 100%; max-width: var(--container-max); padding: var(--space-10) var(--space-6); }

  .luoi { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter-lg); }
  .luoi-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter-lg); }

  .cot-4  { grid-column: span 4; }
  .cot-6  { grid-column: span 6; }
  .cot-8  { grid-column: span 8; }
  .cot-12 { grid-column: span 12; }
}