/* =========================================================================
   GIA SƯ ĐÈN BÀN — tokens.css
   Toàn bộ giá trị thương hiệu nằm ở đây. Đổi file này = đổi cả website.
   Nạp TRƯỚC thẻ <style> nội tuyến trong index.html.

   Nguyên tắc hình thức: ĐƯỜNG KẺ MẢNH LÀM CHỦ ĐẠO, không phải bóng đổ.
   Khối vuông 0px. Chỉ chip mới bo tròn. Tương phản cao, ít màu.
   ========================================================================= */
:root{

  /* ---------- NỀN & MỰC --------------------------------------------------
     Nền giấy ngà rất nhạt (không phải #FFF), mực gần đen (không phải #000). */
  --nen:        #FCFCFB;   /* nền trang — giấy ngà                          */
  --nen-sau:    #F2F3F5;   /* nền chìm — dải phụ, hàng bảng lẻ, mặt thẻ     */
  --the:        #FFFFFE;   /* mặt thẻ nổi trên nền chìm                     */
  --muc:        #14161A;   /* mực chính — gần đen, hơi ngả lạnh             */
  --xam:        #52565E;   /* chữ phụ trên nền sáng — 8.0:1 trên --nen      */
  --xam-nhat:   #767B84;   /* CHỈ placeholder + icon, không cho chữ nhỏ     */

  /* ---------- ĐƯỜNG KẺ ---------------------------------------------------
     Bảng gia sư sống bằng đường kẻ; ba độ đậm là đủ cho cả trang.          */
  --ke:         #E2E3E6;   /* kẻ 1px mặc định                               */
  --ke-dam:     #C9CBD0;   /* kẻ viền bảng, viền ô nhập liệu                */
  --ke-muc:     #14161A;   /* kẻ mực — gạch chân tiêu đề mục                */

  /* ---------- MÀU NHẤN ---------------------------------------------------
     Xanh mực = màu nhấn DUY NHẤT (nút, link, số liệu, hàng bảng được chọn).
     Vàng đèn = màu phụ, CHỈ dùng cho dấu highlight kết quả lọc + chip.     */
  --xanh:       #2B4C8C;   /* xanh mực — accent chính; 7.6:1 trên --nen     */
  --xanh-dam:   #1E3866;   /* hover / nền dải tối nhạt                      */
  --xanh-sau:   #141F33;   /* nền dải tối, chân trang                       */
  --xanh-mo:    #EAEFF8;   /* nền chip xanh, nền hàng bảng được chọn        */
  --vang:       #D9A441;   /* vàng đèn — nền highlight, chấm slide đang chọn*/
  --vang-dam:   #7A5307;   /* vàng cho CHỮ — 6.4:1 trên nền sáng            */
  --vang-mo:    #FBF2DF;   /* nền chip vàng / nền ô được highlight          */

  /* ---------- MÀU TRÊN NỀN TỐI ------------------------------------------ */
  --tren-toi:   #F4F5F7;   /* chữ chính trên --xanh-sau — 15.4:1            */
  --tren-toi-2: #AEB6C4;   /* chữ phụ trên --xanh-sau — 7.4:1               */
  --ke-toi:     #2C3A52;   /* kẻ trên nền tối                               */

  /* ---------- CHỮ --------------------------------------------------------
     2 họ chữ + 1 mono. Cả ba đều có bộ dấu tiếng Việt đầy đủ.
     Be Vietnam Pro 700/800 → tiêu đề. Inter 400/500/600 → thân.
     IBM Plex Mono → mã gia sư, học phí, điểm số, nhãn.                     */
  --display:  'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --than:     'Inter', system-ui, -apple-system, sans-serif;
  --mono:     'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --co-than:      17px;    /* cỡ chữ thân                                   */
  --cao-than:     1.65;    /* line-height thân — ≥1.5 cho dấu tiếng Việt    */
  --cao-display:  1.09;    /* line-height tiêu đề — ≥1.05                   */
  --giam-display: -.03em;  /* letter-spacing âm cho tiêu đề                 */
  --tang-mono:    .12em;   /* letter-spacing dương cho nhãn mono            */

  /* ---------- HÌNH HỌC ---------------------------------------------------
     Hệ radius (a/c): 0px cho MỌI khối, 999px CHỈ cho chip.
     Tuyệt đối không dùng 4px, không dùng 8px.                              */
  --bo:       0px;
  --bo-chip:  999px;

  /* ---------- KHOẢNG CÁCH ------------------------------------------------ */
  --khung:  1260px;                          /* bề rộng nội dung tối đa     */
  --le:     clamp(1.15rem, 4vw, 2.5rem);     /* lề trái/phải                */
  --doc:      56px;                          /* padding dọc mục — base      */
  --doc-hep:  40px;                          /* padding dọc mục — tight     */

  --khe-1: 1.5rem;   /* khe lưới lớn   */
  --khe-2: 1rem;     /* khe lưới vừa   */
  --khe-3: .7rem;    /* khe lưới nhỏ   */

  /* ---------- CHUYỂN ĐỘNG ------------------------------------------------ */
  --nhip: cubic-bezier(.16, 1, .3, 1);

  /* ---------- BÓNG -------------------------------------------------------
     Dùng rất tiết chế — trang này dựa vào đường kẻ, không dựa vào bóng.    */
  --bong-1: 0 1px 2px rgba(20,22,26,.05);
  --bong-2: 0 2px 6px rgba(20,22,26,.07), 0 12px 28px rgba(20,22,26,.08);
}