/* =========================================================
   MeTravel — static/css/tokens.css
   Bảng màu dùng chung (2026-10-18). Nạp TRƯỚC mọi file CSS khác ở MỌI trang
   (base.html, chon.html, plan, nhánh /vietnam). Các file CSS/template khác
   CHỈ dùng var(--mt-…), không viết mã màu cứng — trừ trắng thuần, lớp phủ
   trắng/đen trong suốt (bóng, lớp tối trên ảnh) và các ngoại lệ ghi ở cuối.

   Xanh primary là màu chính duy nhất (không gradient, không xanh thứ hai).
   Đỏ + gold là màu nhấn THEO MÙA (Giáng sinh) — gom ở khối "SEASONAL ACCENT"
   bên dưới; hết mùa chỉ sửa khối đó.

   Luật dùng màu:
   - Mỗi màn hình MỘT nút hành động chính: nền --mt-red, chữ trắng. Nút khác
     nền hoặc viền --mt-primary.
   - Tab/segmented đang chọn, nút gửi chat, nút +/−: --mt-primary.
   - Khung lớn nền primary (thẻ hero, "Bạn sẽ nhận được", khung chat): dải gold
     5px ở đáy = box-shadow: var(--mt-gold-bar). Không viền trái.
   - Gold KHÔNG làm chữ trên nền trắng (thiếu tương phản). Chữ/số tiền trên nền
     primary: --mt-gold-text.
   - Đỏ CHỈ cho: nút hành động chính, vượt ngân sách, lỗi.
   - "Lưu ý" (vừa đủ ngân sách, biến động giá, lịch trình hết hạn…): nền
     --mt-note-bg, chữ --mt-note-text — KHÔNG dùng đỏ.

   Tương phản: trắng trên #004D43 9,8:1; #004D43 trên --mt-primary-soft 8,3:1;
   trắng trên --mt-red 6,5:1; --mt-red trên trắng 6,5:1; --mt-gold-text trên
   #004D43 6,5:1; --mt-note-text trên --mt-note-bg 6,9:1; gold trên trắng chỉ 2,1:1.
   ========================================================= */

:root{
  /* ---- Màu chính ---- */
  --mt-primary: #004D43;        /* = nền thẻ hero "Du lịch tự túc nước ngoài" */
  --mt-primary-hover: #00453C;  /* đậm hơn primary ~10% */
  --mt-primary-soft: #E6EDEC;   /* 10% primary trên trắng: nền nhãn/chip (chữ --mt-primary) */
  --mt-on-primary: #FFFFFF;     /* chữ trên nền primary */
  --mt-on-primary-muted: #B9CCC7; /* chữ phụ trên nền primary (menu trái, mô tả nhỏ) */

  /* ---- Trung tính ---- */
  --mt-surface: #F1F5F4;        /* nền ô, bong bóng chat của bot */
  --mt-border: #D5DEDB;
  --mt-text: #12201D;
  --mt-muted: #55635F;
  --mt-page: #F6F7F3;           /* nền trang (giữ như cũ) */

  /* ---- Lưu ý (không phải lỗi) ---- */
  --mt-note-bg: #F7EDCB;
  --mt-note-text: #6B4A00;

  /* ===== SEASONAL ACCENT (Giáng sinh 2026) — hết mùa chỉ sửa khối này ===== */
  --mt-red: #B3261E;            /* nút hành động chính, vượt ngân sách, lỗi */
  --mt-red-hover: #8F1E18;
  --mt-gold: #D4AF37;           /* viền nhấn, thanh tiến độ, cột biểu đồ nổi bật */
  --mt-gold-text: #F0CF6E;      /* chữ/số tiền đặt trên nền primary */
  --mt-gold-bar: inset 0 -5px 0 var(--mt-gold); /* dải đáy khung lớn nền primary */
  /* ===== hết SEASONAL ACCENT ===== */

  /* ---- Tên cũ (2026-10-17), giữ để file chưa đổi vẫn chạy ---- */
  --mt-logo: var(--mt-primary);
  --mt-accent: var(--mt-primary);
  --mt-accent-ink: var(--mt-on-primary);
  --mt-accent-soft: var(--mt-primary-soft);
  --mt-text-on-dark: var(--mt-on-primary);
  --mt-frame: var(--mt-primary);
}

/* Số thẳng cột ở mọi trang; số tiền dùng .mt-money (không dùng Playfair). */
body{font-variant-numeric:tabular-nums}
.mt-money{
  font-family:'Be Vietnam Pro',system-ui,sans-serif;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.5px;
}

/* Nút hành động chính (một nút mỗi màn hình). Trang có class nút riêng thì
   đặt cùng màu bằng các biến trên. */
.mt-nut-chinh{background:var(--mt-red);color:var(--mt-on-primary)}
.mt-nut-chinh:hover{background:var(--mt-red-hover)}