/* =========================================================================
   ĐIỆN LẠNH MINH PHÁT — 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 xám xanh nhạt (không phải #FFF), mực xanh đen (không phải #000).   */
  --nen:        #F5F7FA;   /* nền trang — xám xanh nhạt                     */
  --nen-sau:    #E8EDF3;   /* nền chìm — dải phụ, ô bảng lẻ                 */
  --the:        #FFFFFE;   /* mặt thẻ / card                                */
  --muc:        #111C27;   /* mực chính — xanh đen thép                     */
  --xam:        #55606D;   /* chữ phụ trên nền sáng — AA ≥ 4.5:1            */
  --xam-nhat:   #7B8794;   /* chỉ dùng cho chữ ≥ 19px hoặc icon             */
  --ke:         #D6DEE7;   /* đường kẻ 1px                                  */
  --ke-dam:     #B9C5D2;   /* kẻ đậm — viền bảng giá                        */

  /* ---------- MÀU NHẤN ---------------------------------------------------
     Xanh lạnh = màu nhấn DUY NHẤT (nút, giá, số liệu, hover).
     Cam công = màu phụ, CHỈ dùng cho badge "Có mặt trong 60 phút".         */
  --xanh:       #1565C0;   /* xanh lạnh — accent chính                      */
  --xanh-dam:   #0D47A1;   /* hover / nền tối                               */
  --xanh-sau:   #0A2E56;   /* nền dải tối, footer                           */
  --xanh-mo:    #E3EEFB;   /* nền chip / vùng nhấn nhạt                     */
  --cam:        #F07C1E;   /* cam công — CHỈ badge 60 phút                  */
  --cam-dam:    #A04E08;   /* cam cho CHỮ — AA ≥ 4.9:1 trên mọi nền sáng    */
  --cam-mo:     #FDF0E2;   /* nền badge cam                                 */

  /* ---------- MÀU TRÊN NỀN TỐI ------------------------------------------ */
  --tren-toi:   #F2F6FB;   /* chữ chính trên nền xanh sâu                   */
  --tren-toi-2: #AFC2D8;   /* chữ phụ trên nền xanh sâu — AA ≥ 4.5:1        */
  --ke-toi:     #1E4372;   /* kẻ trên nền xanh sâu                          */

  /* ---------- 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 đề. Roboto 400/500 → thân.
     IBM Plex Mono → nhãn, mã dịch vụ, ô giá trong bảng.                    */
  --display:  'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --than:     'Roboto', 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.62;    /* line-height thân — ≥1.5 cho dấu tiếng Việt    */
  --cao-display:  1.08;    /* line-height tiêu đề — ≥1.05                   */
  --giam-display: -.028em; /* letter-spacing âm cho tiêu đề                 */
  --tang-mono:    .12em;   /* letter-spacing dương cho nhãn mono            */

  /* ---------- HÌNH HỌC ---------------------------------------------------
     Hệ radius (b): 8px cho thẻ/ảnh, 0px cho bảng, 999px cho chip.
     Tuyệt đối không dùng 4px.                                              */
  --bo:       8px;
  --bo-bang:  0px;
  --bo-chip:  999px;

  /* ---------- KHOẢNG CÁCH ------------------------------------------------ */
  --khung:  1240px;                          /* 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: .72rem;   /* khe lưới nhỏ   */

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

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