/* =============================================================================
 * QLSO — TOKEN CANONICAL + PRIMITIVE DUNG CHUNG
 *
 * Nguon: `.ai-team/design/design-system.json`
 *   sha256 5f078f07890a6cc274678d85b6c8e4714b2d56614bd8890eda1b4945aaeabcf5
 *
 * Ba huong nghe thuat da duoc Product Owner dong bang, KHONG tron vao nhau:
 *   --pa-*    QLSO ENTERPRISE CONTROL PLANE   (Platform Admin: navy / xanh so)
 *   --ta-*    CIVIC OS - BENTO OPERATIONS     (Tenant Admin: burgundy / xanh so)
 *   --mob-*   COMMUNITY LIVING                (Citizen/Staff: xanh la cong dong)
 *
 * Man hinh KHONG duoc hard-code gia tri mau. Guard token-bypass o Gate 3 kiem
 * GIA TRI CO HIEU LUC, khong phai so lan tham chieu `var()` — dem `var()` khong
 * bao gio phat hien duoc mot `#7A1E38` nam trong `fill` cua SVG.
 * ========================================================================== */

:root {
  /* ── Platform Admin — QLSO ENTERPRISE CONTROL PLANE ──────────────────── */
  --pa-control-plane: #0F2438;
  --pa-brand: #16324F;
  --pa-brand-hairline: #2A4A6E;
  --pa-on-dark: #FFFFFF;
  --pa-page: #F8FAFC;
  --pa-surface: #FFFFFF;
  --pa-surface-sunken: #F1F5F9;
  --pa-rail-item-hover: #17304A;
  --pa-rail-item-active: #1E3A5F;
  --pa-rail-hairline: #22405E;
  --pa-rail-ink: #F2F6FA;
  --pa-rail-ink-muted: #A9BED2;
  --pa-digital: #2563EB;
  --pa-digital-ink: #1D4FD8;
  --pa-digital-soft: #EAF1FE;
  --pa-digital-line: #C3D8FE;
  --pa-ink: #1B2430;
  --pa-ink-2: #3D4A5C;
  --pa-muted: #5A6B80;
  --pa-border: #D5DCE5;
  --pa-divider: #E4E9EF;
  --pa-separator-ink: #A6B2C1;
  --pa-digital-hover: #DBEAF1;

  /* ── Tenant Admin — CIVIC OS / BENTO OPERATIONS ──────────────────────── */
  --ta-civic: #7A1E38;
  --ta-civic-soft: #F7EDF0;
  --ta-civic-line: #E4C9D2;
  --ta-rail: #1C2333;
  --ta-rail-hover: #262F44;
  --ta-rail-active: #313C55;
  --ta-rail-hairline: #333D53;
  --ta-rail-ink: #F3F5F9;
  --ta-rail-ink-muted: #A7B1C6;
  --ta-gold-bar: #D6A93A;
  --ta-digital: #0E6F8E;
  --ta-digital-soft: #E7F2F6;
  --ta-digital-line: #BDD9E4;
  --ta-page: #F4F6FA;
  --ta-surface: #FFFFFF;
  --ta-surface-sunken: #EFF2F7;
  --ta-ink: #171B23;
  --ta-ink-2: #3A4353;
  --ta-muted: #5D6779;
  --ta-hairline: #DDE2EB;
  --ta-on-dark: #FFFFFF;
  --ta-separator-ink: #A6B2C1;   /* dau phan cach duong dan */

  /* ── Mobile — COMMUNITY LIVING ─────────────────────────────────────────
   * DOC TRUC TIEP tu artifact da duyet `mockup/mobile/MOB-NS-B-COMMUNITY-LIVING`
   * va `mockup/mobile/MOB-HOME-001` (rev-005), KHONG dung tri nho.
   *
   * Ban truoc cua tep nay dung mot bang mau xanh la tu nghi tren nen xam lanh.
   * Do la nguyen nhan goc cua troi thi giac: mot he mau bia ra thi moi man sinh
   * tu pattern deu mang sai DNA, va khong phep kiem tu dong nao bat duoc — chung
   * do cau truc, khong do "trong co giong ban da duyet khong".
   *
   * Nen mo: KEM AM (#FAF7F2) + CAT (#F3EDE4), khong phai xam.
   * Nhan dien: TEAL (#0F766E / #0B5D57), khong phai xanh la.
   * Diem nhan: VANG (#8A6D10 / #FAF0D6) — thu ban truoc khong he co. */
  --mob-page: #FAF7F2;
  --mob-surface: #FFFFFF;
  --mob-sand: #F3EDE4;
  --mob-hairline: #E7DFD3;
  --mob-line-strong: #D6CBB9;

  --mob-ink: #1E2A26;
  --mob-ink-2: #4C5B56;
  /* Ban da duyet dung #6A7771. Do duoc: 4.38:1 tren nen kem — DUOI nguong 4.5:1,
     nen chu phu se kho doc voi mot phan nguoi dung. Toi dam mot bac nho nhat con
     dat nguong tren CA BA nen (kem 5.14 · trang 5.49 · cat 4.72) va giu nguyen
     sac do — day la dieu chinh de doc duoc, khong phai doi huong thi giac. */
  --mob-muted: #5F6C66;

  --mob-community: #0F766E;
  --mob-community-deep: #0B5D57;
  --mob-community-soft: #DCEFEC;
  --mob-community-line: #B4D9D3;
  --mob-on-band: #C4E3DE;

  --mob-gold-ink: #8A6D10;
  --mob-gold-deep: #5E4A0B;
  --mob-gold-soft: #FAF0D6;
  --mob-gold-line: #E3CE92;

  /* Ban duyet dat #1B7F4B. Tren nen #E4F3EA cua chinh huy hieu trang thai,
     cap mau do chi dat 4.38:1 — duoi nguong 4.5:1, va no la mau CHU trong
     mot huy hieu 12.5px. Dam mot bac nho nhat con dat tren ca ba nen
     (huy hieu 4.92 · trang 5.64 · kem 5.28) va giu nguyen sac xanh la.
     Ngoai le tro nang, khong phai troi thi giac. */
  --mob-ok: #197646;      --mob-ok-soft: #E4F3EA;   --mob-ok-line: #B9DCC8;
  --mob-warn-ink: #8A5300; --mob-warn-soft: #FAEFDC; --mob-warn-line: #E4C48A;

  /* Khan cap tren mobile: palette semantic RIENG, khong dan xuat tu brand. */
  --mob-em-surface: #FDECEA;
  --mob-em-line: #D92D20;
  --mob-em-ink: #912018;
  --mob-em-ink-2: #7A2019;
  --mob-em-action: #D92D20;

  --mob-on-dark: #FFFFFF;

  /* Lop phu tren dai xanh: khong phai mau rieng ma la do sang cua chinh dai,
     nen phai la alpha tren nen — dat mau cung se lech khi dai doi sac. */
  --mob-band-wash: rgba(255, 255, 255, .16);
  --mob-band-line: rgba(255, 255, 255, .34);
  --mob-shadow-card: rgba(30, 42, 38, .06);

  /* Trang thai nhan cua nut khan cap. Toi hon --mob-em-action mot bac de nguoi
     dung thay phan hoi khi cham, van giu do tuong phan voi chu trang. */
  --mob-em-action-press: #C02318;
  --mob-em-wash: #FFF6F5;
  --mob-em-shadow: rgba(145, 32, 24, .26);

  /* Khoi bao mat (MOB-SEC-002) co nen toi RIENG — day la ngoai le shell da duoc
     ghi nhan, khong phai bang mau chung; giu token rieng de khong ai vo tinh
     dung nen toi nay cho man thuong. */
  --mob-sec-bg: #14201C;
  --mob-sec-ink: #F1EFEA;
  --mob-sec-ink-2: #C9D3CE;
  --mob-sec-muted: #9DAAA4;
  --mob-scrim: rgba(20, 32, 28, .58);

  /* Cac sac lay DUNG tu ban Visual Master COMMUNITY LIVING cho Trang chu.
     Do tuong phan trong dung ngu canh dung: 7.70 · 5.01 · 7.89 · 5.05 — deu
     dat, nen giu nguyen gia tri cua ban duyet, chi dat ten. */
  --mob-ok-ink: #155F39;            /* tieu de trang thai an toan, tren the trang */
  --mob-ok-ink-2: #5B7568;          /* dong phu cua trang thai an toan */
  --mob-community-deepest: #0A4F4A; /* chu tren nen teal-soft (hop buoc tiep theo) */
  --mob-community-soft-press: #CBE7E3;
  --mob-attrib: #616D67;            /* dong ghi nhan cuoi trang, tren nen kem */

  /* Bo goc cua COMMUNITY LIVING: 20 / 14 / 10 — mem hon han bo 14px cua Web. */
  --mob-r: 20px; --mob-r-s: 14px; --mob-r-xs: 10px;

  /* Thang chu rieng cua mobile (artifact da duyet). */
  --mob-t-hello: 18.5px; --mob-t-sect: 17px; --mob-t-lead: 17px;
  --mob-t-title: 16.5px; --mob-t-body: 15px; --mob-t-meta: 13.5px;
  --mob-t-micro: 12.5px;

  /* ── Ngu nghia trang thai ─────────────────────────────────────────────
   * Day la bang mau trang thai CUA HAI BE MAT WEB. Truoc do khuon pattern
   * dung chung goi thang cac ten nay, nen mot man mobile hien icon trang thai
   * mau xanh duong cua Platform Admin ngay giua ung dung mem cua cu dan — mau
   * do khong co trong ban thiet ke da duyet cua mobile.
   *
   * Nen tu day khuon pattern chi duoc goi bi danh `--s-*`. Bi danh mac dinh o
   * :root tro DUNG VE cac gia tri nay, nen Web khong doi mot pixel; be mat nao
   * co bang mau rieng thi ghi de trong pham vi cua chinh no. */
  --ok: #0F7B4F;      --ok-soft: #E7F5EE;     --ok-line: #B7DFCA;
  --warn: #8A5A00;    --warn-soft: #FCF3E3;   --warn-line: #EBD3A6;
  --danger: #B3261E;  --danger-soft: #FDECEA; --danger-line: #F2C4BF;
  --info: #1D4FD8;    --info-soft: #EAF1FE;   --info-line: #C3D8FE;

  --s-ok: var(--ok);         --s-ok-soft: var(--ok-soft);         --s-ok-line: var(--ok-line);
  --s-warn: var(--warn);     --s-warn-soft: var(--warn-soft);     --s-warn-line: var(--warn-line);
  --s-danger: var(--danger); --s-danger-soft: var(--danger-soft); --s-danger-line: var(--danger-line);
  --s-info: var(--info);     --s-info-soft: var(--info-soft);     --s-info-line: var(--info-line);

  /* ── Khan cap. Bat bien cau truc: 4 tin hieu dong thoi ────────────────
   * be mat SANG + vien 4px + icon SVG cuc bo + nhan tieng Viet.
   * `--em-surface` phai giu relative luminance >= 0.70 — mot nut khan cap
   * nen toi se an minh vao thanh dieu huong toi. */
  --em-surface: #FDECEA;
  --em-line: #D92D20;
  --em-ink: #8E1C15;
  --em-ring: 4px;
  --em-core-h: 56px;
  --em-target-h: 64px;

  /* ── Tieu diem — KHONG bao gio tat o bat ky be mat nao ───────────────── */
  --focus: #2563EB;
  --focus-on-dark: #8FB6FF;
  --focus-ring: 3px;
  --focus-offset: 2px;

  /* ── Bo goc. Bo 14px la chu ky Web; bo 20px la chu ky mobile. ────────── */
  --r-card: 14px;  --r-inner: 10px;  --r-btn: 11px;
  --r-item: 12px;  --r-brand: 13px;  --r-chip: 999px;
  --r-mob-card: 20px; --r-mob-inner: 14px;

  /* ── Do noi + lop phu. Tokenize vi day la GIA TRI THIET KE, va vi mot
   * `rgba()` hard-code loc qua moi phep dem `var()` y het mot hex. ───────── */
  --elev-card: 0 1px 2px rgba(15, 36, 56, .05);
  --elev-card-hover: 0 2px 8px rgba(15, 36, 56, .09);
  --elev-phone: 0 8px 30px rgba(22, 33, 27, .16);
  --elev-emergency: 0 4px 14px rgba(217, 45, 32, .22);
  --scrim-pa: rgba(15, 36, 56, .42);
  --scrim-ta: rgba(23, 27, 35, .48);
  --scrim-mob: rgba(22, 33, 27, .55);

  /* ── Nhip khoang cach ────────────────────────────────────────────────── */
  --gap: 13px; --gap-col: 16px;

  /* ── Thang chu. SAN WEB LA 11px — bac 10px da bi xoa khoi thang. ─────── */
  --t-page: 26px;  --w-page: 660;
  --t-stat: 23px;  --w-stat: 660;
  --t-sect: 16px;  --w-sect: 700;
  --t-body: 15px;  --w-body: 400;
  --t-meta: 13.5px;--w-meta: 500;
  --t-micro: 12px; --w-micro: 600;
  --t-floor: 11px; --w-floor: 650;

  /* ── Hinh hoc shell ──────────────────────────────────────────────────── */
  --pa-rail-w: 264px;
  --ta-rail-w: 72px;
  --ta-modnav-w: 216px;
  --ta-modnav-compact: 64px;
  --ta-ctx-panel-w: 328px;
  --mob-frame-w: 430px;
  --mob-header-h: 56px;
  --mob-tabbar-h: 60px;
}

/* ══════════════ Reset + primitive dung chung ══════════════ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, "Noto Sans", Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Tieu diem nhin thay duoc la yeu cau a11y, khong phai tuy chon. */
:focus-visible {
  outline: var(--focus-ring) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-inner);
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Icon: LUON la <svg> cuc bo.
 * OFFLINE-01/02/03 ton tai vi mot glyph icon-font tu xa se BIEN MAT IM LANG khi
 * mat mang — khong loi, khong o vuong thay the, khong log — lam be mat khan cap
 * tut tu bon tin hieu xuong ba trong khi moi kiem tra tinh van PASS. */
.ic {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.ic-s { width: 15px; height: 15px; }
.ic-lg { width: 26px; height: 26px; }
.ic-xl { width: 34px; height: 34px; }

/* Man hinh khong hien PHAI that su an: `captureObservableState` loc theo
 * `offsetParent !== null`, nen `visibility:hidden` hay day ra ngoai viewport
 * se bi tinh nham la dang hien. */
[data-screen-id][hidden],
[data-screen-id].is-hidden { display: none !important; }

/* `hidden` PHAI that su an. Bay da gap that: mot luat tac gia `display:flex`
 * de len UA stylesheet cua thuoc tinh `hidden`, nen phan tu van render trong
 * khi `el.hidden === true`. Moi phep kiem doc thuoc tinh se bao PASS gia. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}