/* =====================================================================
   design_tokens.css - Landing 20nam.safi.edu.vn
   Lễ kỷ niệm 20 năm thành lập Trường TC Tổng hợp Sài Gòn S.A.F.I (01/11/2026)
   Nhận diện: "Sải cánh vươn xa / Soar Beyond" (KV C5b CHỐT)
   Màu lấy mẫu pixel từ KV C5b gio-9h30-11h30 và thiệp số Zalo v2.
   Mục "(dẫn xuất)" là giá trị em tự suy ra từ màu mẫu, không có trên KV.
   Font: CHỈ font miễn phí Google Fonts (font bản quyền nội bộ không dùng trên web,
   KHÔNG đưa lên web công khai). Nên self-host woff2 (subset latin + vietnamese).
   ===================================================================== */

:root {
  /* ---------- 1. MÀU THƯƠNG HIỆU ---------- */
  /* Navy (nền KV góc trên trái, chữ thiệp) */
  --navy-950: #031448;   /* (dẫn xuất) nền footer, scrim đậm nhất */
  --navy-900: #041a5c;   /* (dẫn xuất) nền thẻ glass, chữ trên nền vàng */
  --navy-800: #062587;   /* mẫu KV (10,10): nền trên-trái */
  --navy-700: #0a39b1;   /* mẫu KV: trời góc trên-phải */
  --navy-ink: #0b1f5c;   /* mẫu thiệp: chữ navy trên nền kem */

  /* Xanh biển / trời */
  --blue-600: #1549a1;   /* mẫu KV: trời giữa-trái */
  --blue-500: #2c63c2;   /* mẫu KV: trời giữa */
  --blue-panel: #033a8b; /* mẫu KV: khung giờ/địa điểm (đầu gradient) */
  --blue-panel-2: #055398;/* mẫu KV: khung giờ/địa điểm (cuối gradient) */
  --sea-700: #0a6daa;    /* mẫu KV: biển sâu */
  --sea-500: #1d9bc4;    /* mẫu KV: biển giữa */
  --sea-300: #28bbce;    /* mẫu KV: biển sát chân trời (cyan) */
  --horizon: #8199ba;    /* mẫu KV: đường chân trời */

  /* Vàng kim / vàng đồng */
  --gold-100: #ffeca9;   /* mẫu KV: điểm sáng chữ vàng */
  --gold-200: #ffe08a;   /* mẫu KV: chữ script "Lễ kỷ niệm" (màu chủ đạo chữ vàng) */
  --gold-300: #ffd35c;   /* mẫu KV: huy hiệu icon (phần sáng) */
  --gold-400: #f8c751;   /* mẫu KV: icon vàng đậm hơn */
  --gold-500: #c9962b;   /* mẫu thiệp: đường kẻ vàng đồng */
  --bronze-700: #8a5a12; /* (dẫn xuất) chữ vàng đồng trên nền kem, AA 5.5:1 */
  --bronze-800: #7a4a0c; /* (dẫn xuất) nhãn "TRÂN TRỌNG KÍNH MỜI" kiểu thiệp, 7:1 */

  /* Kem (cánh buồm, nền thiệp) */
  --cream-50:  #fdf7e8;  /* mẫu thiệp: nền kem sáng */
  --cream-100: #fef1cf;  /* mẫu KV: cánh buồm */
  --cream-200: #f5eacc;  /* mẫu thiệp: nền kem đậm (đáy thiệp) */
  --cream-300: #e9e2bd;  /* mẫu KV: bóng cánh buồm */
  --cloud: #e4ebf9;      /* mẫu KV: mây */
  --white: #ffffff;

  /* Vai trò (semantic) */
  --bg-page: var(--navy-900);
  --bg-section-light: var(--cream-50);
  --text-on-dark: var(--white);
  --text-on-dark-muted: #c9d8f5;   /* 11.2:1 trên navy-900 */
  --text-accent-on-dark: var(--gold-200);
  --text-on-light: var(--navy-ink);
  --text-accent-on-light: var(--bronze-700);
  --text-on-gold: var(--navy-900);
  --focus-ring: #ffffff;           /* kèm outline-offset để thấy trên cả vàng và navy */
  --error: #ffb4a8;                /* (dẫn xuất) lỗi trên nền navy, 9:1 */

  /* ---------- 2. GRADIENT ---------- */
  /* Trời -> biển (nền hero khi chưa có video, và poster) */
  --grad-sky-sea: linear-gradient(180deg,
      #062587 0%, #0a39b1 22%, #2c63c2 48%, #8199ba 66%,
      #28bbce 70%, #0a6daa 100%);
  /* Nền navy sâu cho section tối */
  --grad-navy: linear-gradient(160deg, #031448 0%, #062587 55%, #0a39b1 100%);
  /* Nền khung giờ/địa điểm trên KV */
  --grad-panel: linear-gradient(135deg, #033a8b 0%, #055398 100%);
  /* Vàng kim cho chữ và nút (sáng -> đậm -> sáng, giống ánh kim chữ SẢI CÁNH VƯƠN XA) */
  --grad-gold: linear-gradient(180deg, #ffeca9 0%, #ffd35c 45%, #f8c751 70%, #ffe08a 100%);
  --grad-gold-text: linear-gradient(180deg, #fff3c4 0%, #ffe08a 40%, #ffd35c 100%);
  --grad-gold-line: linear-gradient(90deg, rgba(255,224,138,0) 0%, #ffe08a 20%, #c9962b 50%, #ffe08a 80%, rgba(255,224,138,0) 100%);
  /* (đã bỏ shimmer: trang không còn hiệu ứng chuyển động nền) */
  /* Kem cho section sáng (kiểu thiệp) */
  --grad-cream: linear-gradient(180deg, #fdf7e8 0%, #f5eacc 100%);
  /* Scrim bảo đảm tương phản chữ trên video (đậm bên trái, nhạt bên phải để lộ thuyền) */
  --scrim-hero: linear-gradient(90deg, rgba(3,20,72,.82) 0%, rgba(3,20,72,.55) 45%, rgba(3,20,72,0) 78%),
                linear-gradient(0deg, rgba(3,20,72,.7) 0%, rgba(3,20,72,0) 40%);
  --scrim-hero-mobile: linear-gradient(180deg, rgba(3,20,72,.78) 0%, rgba(3,20,72,.45) 38%, rgba(3,20,72,.1) 60%, rgba(3,20,72,.88) 100%);

  /* ---------- 3. GLOW / ĐỔ BÓNG ---------- */
  --glow-gold-sm: 0 0 12px rgba(255,224,138,.45);
  --glow-gold-md: 0 0 24px rgba(255,211,92,.45), 0 0 56px rgba(255,211,92,.2);
  --glow-gold-lg: 0 0 36px rgba(255,211,92,.55), 0 0 96px rgba(255,211,92,.28);
  --text-glow-gold: 0 0 18px rgba(255,211,92,.55), 0 2px 10px rgba(3,20,72,.55);
  --text-shadow-white: 0 2px 14px rgba(3,20,72,.6);
  --shadow-card: 0 12px 36px rgba(2,12,48,.45), inset 0 1px 0 rgba(255,255,255,.12);
  --shadow-card-hover: 0 18px 48px rgba(2,12,48,.55), 0 0 0 1px rgba(255,224,138,.5), var(--glow-gold-sm);
  --shadow-btn: 0 6px 20px rgba(255,211,92,.35), inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-light-card: 0 10px 30px rgba(11,31,92,.12);
  --inset-gold-edge: inset 0 0 0 1px rgba(255,224,138,.65);

  /* ---------- 4. BO GÓC ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;    /* thẻ chuẩn (khung giờ/địa điểm trên KV ~ 16-18px) */
  --radius-lg: 24px;    /* khối lớn, ô số */
  --radius-xl: 32px;
  --radius-pill: 999px; /* nút, chip */
  --radius-round: 50%;  /* avatar, icon tròn */

  /* ---------- 5. VIỀN ---------- */
  --border-gold: 1px solid rgba(255,224,138,.7);
  --border-gold-soft: 1px solid rgba(255,224,138,.35);
  --border-glass: 1px solid rgba(255,255,255,.18);
  --border-light: 1px solid rgba(201,150,43,.45);

  /* ---------- 6. KHOẢNG CÁCH (lưới 4/8) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;
  --gutter: 16px;                 /* lề trang mobile */
  --container: 1200px;            /* bề rộng nội dung desktop */
  --section-y: 64px;              /* khoảng đệm dọc mỗi khối (mobile) */

  /* ---------- 7. HỆ CHỮ ---------- */
  --font-display: "Plus Jakarta Sans", "Be Vietnam Pro", system-ui, sans-serif; /* tiêu đề đậm hình học */
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif; /* thân bài, UI */
  --font-script: "Dancing Script", "Great Vibes", cursive; /* */
  --font-mono-num: "Plus Jakarta Sans", ui-monospace, monospace; /* số đồng hồ, bật tabular-nums */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-xbold: 800;

  /* Thang cỡ chữ (mobile) - desktop ghi đè ở @media bên dưới */
  --fs-hero: 2rem;        /* 32 - "20 NĂM THÀNH LẬP" (vừa 1 dòng ở 390px) */
  --fs-slogan: 1.75rem;   /* 28 - "SẢI CÁNH VƯƠN XA" */
  --fs-script: 2.75rem;   /* 44 - "Lễ kỷ niệm" */
  --fs-h2: 1.75rem;       /* 28 */
  --fs-h3: 1.25rem;       /* 20 */
  --fs-lead: 1.125rem;    /* 18 */
  --fs-body: 1rem;        /* 16 */
  --fs-small: 0.875rem;   /* 14 */
  --fs-micro: 0.75rem;    /* 12 - chỉ cho chú thích, không dùng cho thông tin chính */
  --fs-countdown: 2.25rem;/* 36 - số trong ô đếm ngược */
  --fs-eyebrow: 0.8125rem;/* 13 - nhãn viết hoa, giãn chữ */

  --lh-tight: 1.1;        /* tiêu đề viết hoa (dấu tiếng Việt chồng cao, không đặt < 1.1) */
  --lh-heading: 1.2;
  --lh-script: 1.25;      /* chữ viết tay có dấu hỏi, ngã: cần ≥ 1.25 */
  --lh-body: 1.6;
  --lh-ui: 1.4;

  --ls-caps: 0.04em;      /* tiêu đề viết hoa */
  --ls-eyebrow: 0.18em;   /* nhãn nhỏ, ngày tháng (KV giãn rộng "1.11.2006") */
  --ls-date: 0.3em;       /* dòng ngày rộng như KV */

  /* ---------- 8. CHUYỂN ĐỘNG ---------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;

  /* ---------- 9. Z-INDEX / LAYOUT ---------- */
  --z-scrim: 1;
  --z-content: 2;
  --z-sparkle: 3;
  --z-header: 10;
  --header-h: 64px;
  --hit-min: 44px;         /* vùng chạm tối thiểu */
}

/* ---------- Desktop ≥ 768 / ≥ 1200 ---------- */
@media (min-width: 768px) {
  :root {
    --fs-hero: 3.5rem;       /* 56 */
    --fs-slogan: 2.75rem;    /* 44 */
    --fs-script: 4.5rem;     /* 72 */
    --fs-h2: 2.25rem;        /* 36 */
    --fs-h3: 1.5rem;         /* 24 */
    --fs-lead: 1.25rem;      /* 20 */
    --fs-countdown: 3.5rem;  /* 56 */
    --gutter: 32px;
    --section-y: 96px;
  }
}
@media (min-width: 1200px) {
  :root {
    --fs-hero: 4.5rem;       /* 72 (KV 1920px: ~76px) */
    --fs-slogan: 3.5rem;     /* 56 */
    --fs-script: 5.5rem;     /* 88 */
    --fs-countdown: 4.5rem;  /* 72 */
    --gutter: 48px;
    --section-y: 120px;
  }
}

/* ---------- Phong cách thẻ ---------- */
/* Glass navy: alpha >= .78 để chữ trắng >= 8.3:1 ngay cả khi video phía dưới trắng toàn phần.
   Đã tính: trắng 8.3, vàng #ffe08a 6.4, kem 7.8 (AA cần 4.5, AAA 7 cho chữ thân bài). */
.card-glass {
  background: rgba(4,26,92,.80);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border: var(--border-gold-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  color: var(--text-on-dark);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card-glass { background: rgba(4,26,92,.92); } /* không có blur thì tăng độ đặc */
}
/* Thẻ panel kiểu KV (khung giờ/địa điểm): gradient xanh + viền vàng */
.card-panel {
  background: var(--grad-panel);
  border: var(--border-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
/* Thẻ sáng kiểu thiệp, dùng cho section nền kem */
.card-cream {
  background: var(--cream-50);
  color: var(--text-on-light);
  border: var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-light-card);
}

/* ---------- Chữ ---------- */
.t-display { font-family: var(--font-display); font-weight: var(--fw-xbold); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--white); text-shadow: var(--text-shadow-white); }
.t-slogan  { font-family: var(--font-display); font-weight: var(--fw-xbold); font-size: var(--fs-slogan); line-height: var(--lh-tight); letter-spacing: var(--ls-caps); text-transform: uppercase;
             background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-200); filter: drop-shadow(0 2px 10px rgba(255,211,92,.35));
             /* BẮT BUỘC: background-clip:text chỉ tô trong hộp chữ; dấu hỏi/mũ của chữ hoa (Ả, Ấ, Ể) bị cắt nếu line-height thấp. Đệm trên rồi kéo lại bằng margin âm. */
             padding-block: .2em .08em; margin-block: -.2em -.08em; }
.t-script  { font-family: var(--font-script); font-weight: var(--fw-bold); font-size: var(--fs-script); line-height: var(--lh-script); color: var(--gold-200); text-shadow: var(--text-glow-gold); }
.t-eyebrow { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--gold-200); }
.t-h2      { font-family: var(--font-display); font-weight: var(--fw-xbold); font-size: var(--fs-h2); line-height: var(--lh-heading); }
.t-h3      { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-heading); }
.t-body    { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); }
.t-num     { font-family: var(--font-mono-num); font-weight: var(--fw-xbold); font-variant-numeric: tabular-nums; }

/* ---------- Nút ---------- */
.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--hit-min); padding: 0 var(--space-6); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: 1; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-soft); }
.btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.btn-primary { background: var(--grad-gold); color: var(--text-on-gold); border: 0; box-shadow: var(--shadow-btn); position: relative; overflow: hidden; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow-gold-md), var(--shadow-btn); }
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-secondary { background: rgba(4,26,92,.55); color: var(--white); border: var(--border-gold); }
.btn-secondary:hover { background: rgba(4,26,92,.8); box-shadow: var(--glow-gold-sm); }

/* ---------- Keyframes ---------- */
@keyframes tick     { 0% { transform: translateY(0); } 40% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
@keyframes flip-in  { from { transform: rotateX(-70deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } }

/* ---------- Tôn trọng giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  /* JS: bỏ lật số đếm ngược. Trang không còn nền động. */
}