/* =============================================================================
 * 4T REPORTING · DESIGN TOKENS
 *
 * Nguon canonical: docs/4t-platform/design/DESIGN-TOKENS.md (cot "Ten canonical"
 * + cot "Gia tri"), ACCESSIBILITY-CONTRACT.md §2.5, DATA-VISUALIZATION-CONTRACT.md §3.
 *
 * ⛔ KHONG import mot dong CSS nao cua WordPress. CSS do dinh chat vao Flatsome
 *    (.row/.col dem 15px, #content.page-wrapper, .section-content) va mang theo
 *    hang tram luat chong-de khong lien quan gi toi thuong hieu.
 * ⛔ Goc la `:root`, KHONG `body.t4` — Reporting khong co doi thu CSS de thang,
 *    nen cung khong co `!important`.
 * ⛔ Cac so 1110 · 1090 · 548 · 541 · 382 la "so Figma + 30" de bu dem cot cua
 *    Flatsome. Chung khong ton tai trong Figma. Dung so Figma that.
 * ============================================================================= */

:root {
  /* --- Thuong hieu ------------------------------------------------------- */
  --brand-primary:        #155446;  /* dark moss */
  --brand-secondary:      #458763;  /* leaf */
  --brand-accent:         #CF9156;  /* camel */
  --brand-accent-hover:   #B77537;
  --brand-accent-strong:  #AF6928;

  /* --- Be mat ------------------------------------------------------------ */
  --surface-page:    #FCFBF6;
  --surface-raised:  #FFFFFF;
  --surface-sunken:  #EFE8DA;

  /* --- Chu --------------------------------------------------------------- */
  --text-primary:    #1F1F1F;  /* 15.91:1 tren surface-page */
  --text-secondary:  #3B3B3B;  /* 10.81:1 */
  --text-muted:      #5E5E5E;  /* 6.26:1  — ⭐ DUNG CAI NAY cho chu phu */
  --text-lede:       #252930;
  --text-on-brand:   #FFFFFF;

  /* ⛔ KHONG khai `--text-tertiary: #777777`.
   *    #777777 tren #FCFBF6 = 4.32:1 — TRUOT AA cho chu thuong.
   *    Hop dong chot: Reporting dung #5E5E5E (--text-muted). Cung vai tro, dat AA.
   *    Day cung la loi dat ten cua WordPress ma hop dong dan KHONG duoc lap lai:
   *    dat ten theo VAI TRO, khong theo mau. */

  /* --- Hanh dong ---------------------------------------------------------
   * ⛔ NUT CHINH KHONG DUOC dung `--brand-accent` (#CF9156) lam nen cho chu trang:
   *    #FFFFFF / #CF9156 = 2.68:1 — truot CA BA nguong, ke ca nguong de nhat 3:1.
   *    Day la khoan no nghiem trong nhat cua ca du an (ACCESSIBILITY §2.3).
   * ⭐ Reporting dung CACH A ngay tu dau: nen #AF6928, chu trang = 4.31:1 ✅
   *    #AF6928 DA la token (`--t4-camel-border`), khong them mau moi.
   * ⚠ #CF9156 VAN la mau thuong hieu — dung cho vien day footer, mang to co
   *   vien trong bieu do, nen trang tri. Chi KHONG lam nen cho chu trang.       */
  /* ⭐ W4: MAU HANH DONG DE DOC — tach khoi mau THUONG HIEU.
   *   `--brand-accent-strong` #AF6928 GIU NGUYEN: no la mau thuong hieu 4T,
   *   van dung cho vien/net bieu do (nguong phi-chu 3:1, dat thoai mai).
   *   Nhung LAM NEN CHO CHU thi #AF6928 + trang = 4,31 ⇒ TRUOT AA chu thuong.
   *   ⛔ Cach cu la nang chu 14px -> 19px de roi vao nguong "chu lon" 3:1.
   *      4T da bac: do la lach nguong, khong phai lam de doc hon.
   *   ⇒ Dung mot bien the TOI HON, cung sac (H=29), chi khac do sang:
   *      #A66426 + trang = 4,70:1  ✅ dat 4,5 cho chu THUONG o MOI co chu.
   *   Khop dung token ben Learning (`--t4-hanh-dong-nen`) de hai san pham
   *   khong troi khoi nhau. */
  --action-primary-bg:        #A66426;                     /* trang = 4,70:1 */
  --action-primary-bg-hover:  #85501E;                     /* trang = 6,64:1 */
  --action-primary-text:      #FFFFFF;
  --action-ghost-text:        var(--brand-primary);        /* 8.49:1 */
  --action-ghost-border:      var(--brand-primary);

  /* --- Duong ke, o nhap -------------------------------------------------- */
  --border-hairline:    rgba(31, 31, 31, 0.15);
  --border-field:       #E6E6E6;
  --border-field-warm:  #E3DED4;
  --field-bg:           #FCFBF8;
  --text-placeholder:   #8A8378;

  /* --- Trang thai (ACCESSIBILITY §2.5 — da tinh, deu dat AA) -------------- */
  --state-danger-text:   #A32218;  --state-danger-bg:   #FBE9E7;  /* 6.40 */
  --state-warning-text:  #8C5A2B;  --state-warning-bg:  #FBF0E4;  /* 5.17 */
  --state-success-text:  #2F6B4C;  --state-success-bg:  #E6F0EA;  /* 5.41 */
  --state-info-text:     #155446;  --state-info-bg:     #EEF6F1;  /* 7.99 */

  /* --- Chuoi du lieu (DATA-VISUALIZATION §3) ------------------------------
   * ⛔ BANG MAU THUONG HIEU KHONG DUNG LAM BANG MAU CHUOI DU LIEU.
   *    leaf #458763 · camel-border #AF6928 · gray-mid #777777 chenh nhau
   *    1.01–1.04:1 — in den trang la ba vet xam giong het nhau.
   * ⭐ Dung DUNG HAI chuoi phan biet bang mau: #155446 vs #CF9156 = 3.28:1.
   * ⛔ Tu chuoi thu BA tro di: BAT BUOC them kieu net (dashed/dotted) VA
   *    nhan truc tiep tren duong. Khong duoc chi doi mau.                      */
  --series-1: #155446;
  --series-2: #CF9156;
  --series-3: #458763;  /* ⛔ chi dung kem `stroke-dasharray` + nhan truc tiep */
  --series-4: #8C5A2B;  /* ⛔ chi dung kem `stroke-dasharray: 2 3` + nhan       */

  /* --- Phong chu --------------------------------------------------------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-logo:    'Poltawski Nowy', Georgia, serif;
  /* ⭐ Reporting la NUMBERS-FIRST. Phong so tabular la bat buoc cho moi con so
   *    xep cot — khong co no, cot don vi nhay theo tung dong.                  */
  --font-numeric: 'Lexend Deca', ui-monospace, system-ui, sans-serif;

  /* --- Khung, kich thuoc ------------------------------------------------- */
  --container-max:     1080px;   /* ⛔ KHONG 1110 */
  --container-mobile:  352px;    /* ⛔ KHONG 382  */

  /* --- BIEU DO (DATA-VISUALIZATION §6) -----------------------------------
   * ⚠ Bang mau CHUOI va bang mau DUONG KHAC NHAU, co chu dich:
   *   mang to co BIEN de cuu tuong phan, duong manh thi KHONG CO.
   *   ⇒ duong dung #AF6928 (4.16) chu KHONG #CF9156 (2.59).                  */
  --chart-series-1:        #155446;   /* nen 8.49 ✅ */
  --chart-series-2:        #CF9156;   /* nen 2.59 ⛔ ⇒ BAT BUOC co vien duoi  */
  --chart-series-2-stroke: #AF6928;   /* nen 4.16 ✅ — bien cuu series-2      */
  --chart-series-3:        #3D7E96;   /* ⛔ LECH BRAND co y · nen 4.38 ✅     */
  --chart-series-4:        #8C5A2B;   /* nen 5.61 ✅ */
  --chart-series-5:        #9AA79F;   /* CHI cho "Khac", ke soc · 2.41 ⛔     */

  --chart-line-1: #155446;
  --chart-line-2: #AF6928;            /* ⛔ KHONG #CF9156 cho duong */
  --chart-line-3: #3D7E96;
  --chart-line-4: #8C5A2B;

  --chart-positive: #2F6B4C;          /* 6.09 ✅ */
  --chart-warning:  #B77537;          /* 3.61 ✅ */
  --chart-critical: #A32218;          /* 7.24 ✅ */
  --chart-neutral:  #5E5E5E;          /* 6.26 ✅ — ⛔ KHONG #777777 (4.32) cho CHU */

  --chart-selected: #155446;
  --chart-inactive: #C9C2B4;
  --chart-dim-opacity: .35;

  --chart-grid:       #E3DED4;
  --chart-axis-line:  #D9D3C6;
  --chart-axis-label: #5E5E5E;        /* la CHU ⇒ phai dat AA: 6.26 ✅ */
  --chart-tooltip-bg: #252930;
  --chart-tooltip-fg: #FFFFFF;        /* 14.60 ✅ */
  --chart-legend-fg:  #1F1F1F;        /* 15.91 ✅ */

  /* Kieu net — KENH CHINH khi >= 3 chuoi, ⛔ khong phai kenh phu. */
  --chart-dash-1: none;
  --chart-dash-2: 6 4;
  --chart-dash-3: 2 3;
  --chart-dash-4: 10 3 2 3;

  /* Chieu cao khung bieu do — khung RONG cao DUNG bang khung that,
   * neu khong thi luc du lieu ve trang se nhay. */
  --chart-h:    220px;   /* <=849 */
  --chart-h-lg: 320px;   /* >=850 */

  /* --- Khung: MOBILE-FIRST ------------------------------------------------
   * ⛔ Reporting khai MOBILE-FIRST (@media min-width: 850px), nguoc chieu voi
   *   WordPress (desktop-first). RESPONSIVE-CONTRACT §2. Diem bat bien giua hai
   *   chieu: con so ranh gioi VAN la 849/850 — hai app gay o CUNG MOT diem.    */
  --container-mobile-max: 352px;      /* khung Figma 402 − le 25×2 */
  --gutter:     16px;                 /* khe luoi <=849 */
  --gutter-lg:  24px;                 /* khe luoi >=850 */
  --thanh-day:  70px;                 /* thanh dieu huong day, chi <=849 */
  --header-height:     76px;
  --header-height-sm:  60px;

  /* --- Bo goc ------------------------------------------------------------ */
  --radius-card:     16px;
  --radius-control:  8px;
  /* ⭐ 5px xuat hien 57 lan trong CSS WordPress — nhieu hon ca radius-card (24)
   *    va radius-control (24) — ma van dang go tay, khong co bien. Reporting
   *    khai no thanh bien NGAY TU DAU.                                         */
  --radius-field:    5px;
  --radius-chip:     4px;
  --radius-media:    10px;

  /* --- Bong -------------------------------------------------------------- */
  --shadow-card:    3px 3px 4px rgba(0, 0, 0, 0.25);
  --shadow-header:  0 2px 2px rgba(0, 0, 0, 0.25);

  /* --- Thang gian cach: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 60 · 100 ----
   * ⭐ Reporting KHONG CO Figma ⇒ bam thang nay 100%, khong ngoai le.
   *   (WordPress duoc phep co so le vi no bam khung Figma cua tung trang.)     */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-15: 60px; --space-25: 100px;
}

/* ⚠ Bang mau tren la mot cam ket sang: ⛔ khong tu dong lat sang dark mode.
 *   Dao mau ma khong tinh lai 11 cap tuong phan o §2.5 la cach lam hong toan bo
 *   cong nghiem thu WCAG da lam. Dark mode la mot viec RIENG, co bang tinh rieng. */
:root { color-scheme: light; }

/* ⭐ LUAT CHUOI 3+ — khai bang LUAT CSS THAT, khong bang chu thich.
 *   Mot chu thich khong ngan duoc ai; mot luat thi co.
 *   Tu chuoi thu ba, mau KHONG con la kenh phan biet du: leaf · camel-border ·
 *   gray-mid chenh nhau 1.01–1.04:1 — in den trang la ba vet xam giong het nhau.
 *   ⇒ Kieu net la BAT BUOC, va nhan phai nam TRUC TIEP tren duong. */
.chuoi-3 { stroke: var(--series-3); stroke-dasharray: 6 4; }
.chuoi-4 { stroke: var(--series-4); stroke-dasharray: 2 3; }

/* ⛔ Ve chuoi 3+ ma khong co kieu net ⇒ tu lam no nhin thay duoc.
 *   Luat nay lam hong co y cach ve sai, de no bi phat hien luc dung, khong
 *   phai luc mot nguoi mu mau mo bao cao. */
[data-chuoi]:not(.chuoi-3):not(.chuoi-4):not(.chuoi-1):not(.chuoi-2) {
  stroke-dasharray: 1 6;
  opacity: .5;
}
.chuoi-1 { stroke: var(--series-1); }
.chuoi-2 { stroke: var(--series-2); }