/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  LAYER 0 — CSS VARIABLES & RESET                                     ║
   ║                                                                      ║
   ║  File: design-tokens.css                                             ║
   ║  Phiên bản: 4.0 — 30/5/2026                                          ║
   ║  Áp dụng: Mọi web-app dùng chung                                     ║
   ║                                                                      ║
   ║  HƯỚNG DẪN: KHÔNG sửa giá trị các biến. Mọi component khác phải       ║
   ║  dùng biến từ file này thay vì hardcode mã màu/spacing.              ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

:root {
  /* ── Màu nền ── */
  --bg:        #f0f4ff;
  --bg2:       #e4eaf8;
  --surface:   #ffffff;
  --surface2:  #f7f9ff;

  /* ── Màu thương hiệu WebApp ── */
  --navy:      #1a2f6e;   /* Xanh than chủ đạo */
  --navy2:     #243a85;   /* Xanh than gradient */
  --accent:    #e63946;   /* Đỏ nhấn (cảnh báo, lỗi) */
  --teal:      #0077b6;   /* Xanh ngọc (CTA phụ) */
  --teal2:     #00b4d8;   /* Xanh ngọc nhạt (gradient) */
  --gold:      #f4a261;   /* Vàng cam (cảnh báo nhẹ) */
  --green:     #06d6a0;   /* Xanh lá (thành công) */
  --green2:    #099268;   /* Xanh lá đậm (chữ trên nền nhạt) */

  /* ── Màu chữ & viền ── */
  --text:      #1a1f36;   /* Chữ chính */
  --text2:     #4a5568;   /* Chữ phụ */
  --text3:     #8a94a6;   /* Chữ mờ, placeholder */
  --border:    #d1d9f0;   /* Viền */
  --shadow:    rgba(26,47,110,0.12);

  /* ── Bo góc ── */
  --r:         14px;      /* Bo lớn (card, modal) */
  --rs:        8px;       /* Bo nhỏ (input, button) */

  /* ── Spacing nhất quán theo tầng ── */
  --sp-xs:     4px;
  --sp-sm:     8px;
  --sp-md:     14px;
  --sp-lg:     20px;
  --sp-xl:     28px;

  /* ── Breakpoints (tham chiếu trong JS nếu cần) ── */
  --bp-tablet: 1024px;
  --bp-mobile: 768px;
  --bp-small:  600px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Lexend', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Pattern nền lưới chéo + 2 quầng radial — không bắt buộc, có thể tắt */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at -10% 20%, rgba(0,119,182,.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 110% 80%, rgba(230,57,70,.08) 0%, transparent 60%),
    repeating-linear-gradient(45deg, transparent, transparent 28px,
      rgba(26,47,110,.025) 28px, rgba(26,47,110,.025) 29px);
}

/* Scrollbar — tinh tế, không lấn át nội dung */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #b0b8d0; }

/* Animation toàn cục dùng chung */
@keyframes blink   { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }
@keyframes scaleIn { from { transform: scale(.94); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0 } to { transform: translateX(0); opacity: 1 } }