/* ==========================================================================
   Di Động Số 8 — tokens.css
   Lớp tuỳ biến thương hiệu. Sửa file này là đổi toàn bộ diện mạo trang.
   Được nạp TRƯỚC khối <style> trong index.html.
   ========================================================================== */

:root {
  /* --- Nền & mực --------------------------------------------------------- */
  --nen:          #F6F7F9;   /* nền trang — xám rất nhạt, cố ý không phải #FFF */
  --nen-sau:      #EBEEF2;   /* dải chìm: bảng so sánh, thu cũ, FAQ */
  --nen-vien:     #DDE2E9;   /* nền chip trung tính, nền ô bảng đầu cột */
  --the:          #FFFFFE;   /* mặt thẻ sản phẩm */
  --muc:          #0E1420;   /* chữ chính — cố ý không phải #000 */
  --muc-nhat:     #515C6C;   /* chữ phụ — AA 6.4:1 trên --nen */
  --muc-mo:       #6C7788;   /* CHỈ placeholder + icon trang trí, không cho chữ nhỏ */
  --ke:           #DFE4EA;   /* đường kẻ mảnh 1px — dùng rất nhiều */
  --ke-dam:       #C3CBD6;   /* viền bảng, viền ô nhập */

  /* --- Xanh dương: màu nhấn chính --------------------------------------- */
  --xanh:         #1348C4;   /* nút "Thêm vào giỏ", link, nhãn mono */
  --xanh-dam:     #0E37A0;   /* hover, chữ xanh cỡ nhỏ — AA 8.1:1 trên nền sáng */
  --xanh-sau:     #0A1E4D;   /* nền hero, dải số liệu, CTA cuối, footer */
  --xanh-mo:      #E4EBFA;   /* nền chip xanh, nền vùng nhấn nhạt */

  /* --- Đỏ khuyến mãi: màu phụ, nhiệm vụ hẹp ------------------------------ */
  --do:           #E02A20;   /* giá sale, badge -%, countdown */
  --do-chu:       #C0170F;   /* phiên bản đỏ dùng cho CHỮ — AA 5.1:1 */
  --do-mo:        #FDEAE8;   /* nền badge đỏ nhạt */

  /* --- Màu trên nền tối --------------------------------------------------- */
  --tren-toi:     #EEF3FB;   /* chữ chính trên --xanh-sau */
  --tren-toi-2:   #A9BCDC;   /* chữ phụ trên --xanh-sau — AA 7.2:1 */
  --ke-toi:       #1E3A72;   /* kẻ trên nền xanh sâu */

  /* --- Màu tiện ích ------------------------------------------------------- */
  --xanh-la:      #12805A;   /* trạng thái "còn hàng", tick bảo hành */
  --vang:         #F2A413;   /* CHỈ badge "TRẢ GÓP 0%" và sao đánh giá */
  --vang-chu:     #8A5A02;   /* vàng dùng cho chữ — AA 4.9:1 */

  /* --- Chữ ---------------------------------------------------------------- */
  --display:      'Be Vietnam Pro', system-ui, sans-serif;  /* 700/800 tiêu đề */
  --than:         'Roboto', system-ui, sans-serif;          /* 400/500/700 thân */
  --mono:         'IBM Plex Mono', ui-monospace, monospace; /* nhãn, mã SP, thông số */

  --co-than:      16px;
  --cao-than:     1.55;      /* ≥1.5 — dấu thanh tiếng Việt cần chỗ thở */
  --cao-display:  1.08;      /* ≥1.05 — tránh cắt Ầ / ỹ / ọ */
  --giam-display: -.025em;
  --tang-mono:    .11em;

  /* --- Hình khối (geometry b) --------------------------------------------- */
  --bo:           8px;       /* thẻ, ảnh, nút, ô nhập */
  --bo-chip:      999px;     /* chip, pill, widget nổi */
  --bo-bang:      0px;       /* bảng thông số — cố ý vuông góc */

  /* --- Nhịp khoảng cách ---------------------------------------------------- */
  --doc:          56px;      /* padding dọc mục — mức base */
  --doc-hep:      40px;      /* padding dọc mục — mức tight */
  --le:           clamp(1rem, 3.5vw, 2.25rem);
  --khung:        1280px;

  /* --- Chuyển động --------------------------------------------------------- */
  --nhip:         cubic-bezier(.16, 1, .3, 1);
}