/* =============================================================================
 * 4T REPORTING · NEN TANG — ⛔ MOBILE-FIRST.
 *
 * ⭐ Luat nen (RESPONSIVE-CONTRACT §2): Reporting khai mobile-first, moi lop de
 *   la `@media (min-width: 850px)`. WordPress di nguoc lai va GIU NGUYEN chieu
 *   cua no — 274 luat dang bam desktop-first, lat chieu la viet lai het.
 *   ⛔ Diem bat bien: con so ranh gioi VAN la 849/850 o CA HAI app.
 *
 * ⛔ Khong `!important` (tru `prefers-reduced-motion`) — khong co doi thu de thang.
 * ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.625;               /* 16/26 — ti le cua hop dong */
}

/* --- Thang chu: cap CO/GIAN DONG luon di doi, ⛔ khong tach ------------------
 * ⚠ Dau chong hai tang cua tieng Viet (`E-sac-mu` `O-nang-mu`) can gian dong cao
 *   hon chu Latin. Moi cap duoi day da tinh cho tieng Viet, ⛔ dung ha xuong 1.2.
 * ⚠ Thang nay THAP hon thang cua WordPress (h1 50/60) — co chu dich: Reporting la
 *   numbers-first, tieu de khong duoc lan at con so.                            */
h1, h2, h3 { font-family: var(--font-display); color: var(--brand-primary); margin: 0 0 var(--space-4); }
h1 { font: 500 28px/38px var(--font-display); }
h2 { font: 600 22px/31px var(--font-display); }
h3 { font: 500 18px/26px var(--font-display); }

p { margin: 0 0 var(--space-4); }
a { color: var(--brand-primary); }

.dan-de  { font: 400 16px/26px var(--font-body); color: var(--text-lede); }
.chu-nho { font: 500 12px/18px var(--font-body); color: var(--text-muted); }
.chu-phu { color: var(--text-muted); }

/* ⭐ MOI CON SO tren giao dien nay dung phong so voi `tabular-nums`.
 *   Khong co no, cot "Chi phi" nhay trai-phai theo tung dong va mat khong doc
 *   duoc bang — dung loi ma mot cong bao cao khong duoc phep mac. */
.so, td.so, th.so, .kpi-gia-tri {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
td.so, th.so { text-align: right; white-space: nowrap; }

/* Vung bam toi thieu 44×44 (ACCESSIBILITY §3). */
button, .nut, [role='button'], a.muc-menu, .the-tab { min-height: 44px; }

/* Vanh focus PHAI nhin thay duoc. */
:focus-visible {
  outline: 3px solid var(--brand-secondary);
  outline-offset: 2px;
  border-radius: var(--radius-field);
}

.bo-qua-toi-noi-dung {
  position: absolute; left: -9999px;
  background: var(--surface-raised); color: var(--text-primary);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-field);
}
.bo-qua-toi-noi-dung:focus { left: var(--space-4); top: var(--space-4); z-index: 100; }

/* An khoi MAT nhung KHONG an khoi trinh doc man hinh.
 * Day la thu cho phep moi bieu do co BAN TUONG DUONG BANG CHU. */
.an-thi-giac {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- >= 850px: chu to hon. ⛔ Khong dong toi mot luat nao cua kho mobile ----- */
@media (min-width: 850px) {
  h1 { font: 500 38px/48px var(--font-display); }
  h2 { font: 600 28px/38px var(--font-display); }
  h3 { font: 500 21px/29px var(--font-display); }
  .dan-de { font: 400 18px/30px var(--font-body); }
}