/* ============================================================================
   00 — BIẾN GỐC
   Mọi màu, mọi cỡ chữ của cả bộ khung đều bắt nguồn từ đây. Đổi thương hiệu là
   đổi file này, không phải đi sửa từng chỗ.

   ⚠ THỨ TỰ FILE LÀ BẮT BUỘC. Các file nạp theo đúng số thứ tự trong tên, và
     `99-thang-chu.css` PHẢI nằm cuối cùng — xem đầu file đó để biết vì sao.
   ============================================================================ */

:root{
  /* --- Dấu hiệu thương hiệu -------------------------------------------------
     Đặt ảnh nền cho logo ở đây (data URI hoặc đường dẫn). Để trống thì ô logo
     trên thanh điều hướng chỉ là khoảng trắng — KHÔNG báo lỗi gì, nên nhớ đặt. */
  --logo:none;

  /* --- Màu: tầng 1 --------------------------------------------------------- */
  --ink:#14233A;          /* chữ chính */
  --ink-soft:#2A3B54;     /* chữ phụ, đậm hơn muted */
  --paper:#F5F7FA;        /* nền trang */
  --card:#FFFFFF;         /* nền thẻ, nền ô nhập */
  --line:#E2E6EC;         /* đường kẻ nhạt */
  --line-strong:#CDD4DE;  /* đường kẻ rõ, viền ô nhập */
  --accent:#2E5AAC;       /* màu nhấn */
  --accent-soft:#EAF0FB;
  --ok:#1F7A5C;           --ok-soft:#E7F3EE;
  --warn:#9F5D17;         --warn-soft:#FBF0E1;
  --err:#C0392B;          --err-soft:#FBEAE8;
  --muted:#636D7B;        /* chữ mờ, nhãn */

  /* --- Màu: tầng 2 ---------------------------------------------------------
     Gom các sắc độ hay dùng cho hộp trạng thái (chữ / viền / nền nhạt hơn nữa).
     Có tầng này thì đổi sang nền tối chỉ là đổi bảng màu, không phải rà từng luật. */
  --ok-ink:#127857;     --ok-line:#BCE0D2;     --ok-bg2:#F2FBF7;
  --warn-ink:#8A5214;   --warn-line:#E8C99B;   --warn-bg2:#FFF7E6;
  --err-ink:#B42318;    --err-line:#F0BDB8;    --err-bg2:#FDECEC;
  --accent-ink:#25508F; --accent-line:#BFD2F0; --accent-bg2:#EEF3FF;
  --soft:#F7F9FC;       --soft2:#EEF2F7;

  /* ⚠ Mảng VỐN ĐÃ TỐI ở giao diện sáng (thanh điều hướng, thông báo nổi, thanh
     trên của điện thoại) phải GIỮ TỐI ở cả hai giao diện. Đừng cho chúng mượn
     `--ink` làm nền: sang nền tối `--ink` hoá sáng, nền thành sáng mà chữ vẫn
     sáng ⇒ không đọc được. Tách biến riêng là hết chuyện. */
  --nav:#14233A;  --nav-chu:#C7D0DE;
  /* Màu chữ nằm TRÊN nền nhấn — nền tối thì nhấn sáng lên nên chữ phải đổi sang tối */
  --accent-on:#FFFFFF;

  /* --- Phông ---------------------------------------------------------------
     ⚠ `--mono` KHÔNG phải phông chữ đơn cách. Nó cùng một họ với `--sans`; vai
       trò của nó là nhãn viết hoa giãn chữ và các con số. Muốn số thẳng cột thì
       dùng `font-variant-numeric:tabular-nums` (đã đặt sẵn ở 01-nen-tang.css),
       đừng trông vào tên biến. */
  --mono:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --doc:"Calibri","Segoe UI",Arial,sans-serif;   /* riêng cho giấy tờ đem in */

  /* --- Cỡ chữ gốc ----------------------------------------------------------
     ⚠ Giá trị 14px này gần như KHÔNG BAO GIỜ ăn: 05-thich-ung.css phủ kín mọi
       trường hợp bằng `html:not(.compact)` / `html.compact` / `html.narrow` với
       độ ưu tiên cao hơn. Giữ ở đây làm mốc đọc hiểu và làm lưới an toàn. */
  --fs:14px;

  /* THANG 7 BẬC.
     ⚠ Phải là `calc(var(--fs)*k)`, KHÔNG được là `k em`. `em` tính theo thẻ CHA
       nên thẻ lồng nhau nhân dồn — cùng một dòng chữ có thể ra nhiều cỡ khác
       nhau tuỳ nó nằm sâu bao nhiêu tầng. */
  --t1:calc(var(--fs)*.82);   /* chú thích rất nhỏ  */
  --t2:calc(var(--fs)*.88);   /* nhãn, chữ phụ      */
  --t3:calc(var(--fs)*.94);   /* nút, ô nhập, bảng  */
  --t4:var(--fs);             /* chữ thân           */
  --t5:calc(var(--fs)*1.15);  /* tiêu đề thẻ        */
  --t6:calc(var(--fs)*1.45);  /* tiêu đề mục        */
  --t7:calc(var(--fs)*1.85);  /* tiêu đề trang      */

  /* --- Kích thước khung ---------------------------------------------------- */
  --cw:clamp(1400px, 90vw, 2400px); /* bề ngang tối đa của cột nội dung */
  --mobw:520px;                     /* bề ngang khung điện thoại khi xem thử trên màn rộng */
  --mtop-h:52px;                    /* chiều cao thanh trên của điện thoại */
  --pad-x:18px;                     /* lề ngang của nội dung */
}