/* =========================================================================
   TRƯỜNG ĐÀO TẠO NGHIỆP VỤ BÁCH NGHỆ — 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.
   ========================================================================= */
:root{

  /* ---------- MÀU NỀN & MỰC ---------------------------------------------
     Nền giấy ngà ấm (không phải #FFF), mực nâu đen (không phải #000).      */
  --nen:        #F7F6F3;   /* nền trang — giấy ngà                          */
  --nen-sau:    #EDEBE5;   /* nền chìm — dải phụ, hàng bảng lẻ              */
  --the:        #FFFEFB;   /* mặt thẻ / card                                */
  --muc:        #1A1712;   /* mực chính — nâu đen                           */
  --xam:        #565049;   /* chữ phụ trên nền sáng — AA ≥ 7.3:1            */
  --xam-nhat:   #7E766B;   /* CHỈ placeholder và icon, không cho chữ nhỏ    */
  --ke:         #DCD8D0;   /* đường kẻ 1px                                  */
  --ke-dam:     #BFB8AC;   /* kẻ đậm — viền bảng học phí, viền ô nhập       */

  /* ---------- MÀU NHẤN ---------------------------------------------------
     Đỏ gạch = màu nhấn DUY NHẤT (nút Đăng ký học, giá ưu đãi, badge).
     Xanh đen = màu PHỤ có nhiệm vụ hẹp: nền dải tối, header bảng, footer.  */
  --gach:       #B23C2E;   /* đỏ gạch — accent chính                        */
  --gach-dam:   #8E2F23;   /* đỏ gạch cho CHỮ / hover — AA ≥ 6.2:1          */
  --gach-mo:    #FAEDEA;   /* nền chip đỏ, nền badge "Sắp khai giảng"       */
  --xanh:       #22303A;   /* xanh đen — nền dải tối, thead, chân trang     */
  --xanh-nhat:  #354856;   /* xanh đen nhạt — kẻ / nền hover trên nền tối   */
  --xanh-mo:    #E7ECEF;   /* nền chip xanh, nền ca học chưa chọn           */

  /* ---------- MÀU TRÊN NỀN TỐI ------------------------------------------ */
  --tren-toi:   #F5F3EE;   /* chữ chính trên nền xanh đen                   */
  --tren-toi-2: #B4C0C8;   /* chữ phụ trên nền xanh đen — AA ≥ 8.1:1        */
  --ke-toi:     #3C4E5B;   /* kẻ trên nền xanh đen                          */

  /* ---------- CHỮ --------------------------------------------------------
     2 họ chữ + 1 mono. Cả ba đều có bộ dấu tiếng Việt đầy đủ.
     Montserrat 800 → tiêu đề, wordmark. Be Vietnam Pro 400/500/600 → thân.
     Space Mono → mã khóa (BN-PC01), số buổi, giờ học, ô giá trong bảng.    */
  --display:  'Montserrat', system-ui, -apple-system, sans-serif;
  --than:     'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --mono:     'Space Mono', ui-monospace, 'SF Mono', monospace;

  --co-than:      17px;    /* cỡ chữ thân                                   */
  --cao-than:     1.60;    /* line-height thân — ≥1.5 cho dấu tiếng Việt    */
  --cao-display:  1.12;    /* line-height tiêu đề — ≥1.05 tránh cắt Ầ/ỹ/ọ   */
  --giam-display: -.024em; /* letter-spacing âm cho tiêu đề                 */
  --tang-mono:    .10em;   /* letter-spacing dương cho nhãn mono            */

  /* ---------- HÌNH HỌC ---------------------------------------------------
     Hệ radius (b): 8px cho thẻ/ảnh/ô nhập, 999px cho chip & nút.
     Bảng học phí cố ý vuông góc 0px. Tuyệt đối không dùng 4px.             */
  --bo:       8px;
  --bo-bang:  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: 1.05rem;  /* khe lưới vừa   */
  --khe-3: .7rem;    /* khe lưới nhỏ   */

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

  /* ---------- BÓNG ------------------------------------------------------- */
  --bong-1: 0 1px 2px rgba(26,23,18,.05), 0 2px 8px rgba(26,23,18,.05);
  --bong-2: 0 4px 10px rgba(26,23,18,.07), 0 14px 34px rgba(26,23,18,.09);
}