/* ============================================================
   XIAOYANG CHINESE — Design System
   Tone sáng, xanh dương làm chủ đạo, accent xanh sáng
   ============================================================ */

:root {
  /* Brand palette (từ logo #0A1880) */
  --navy-950: #050D33;
  --navy-900: #0A1656;
  --navy-800: #0D1F8A;
  --brand: #0E1E8C;            /* navy logo */
  --blue-600: #16339E;         /* xanh royal đậm theo logo - accent chính */
  --blue-500: #1E43BE;
  --blue-400: #5B7FE8;
  --blue-100: #DCE7FF;
  --blue-50: #EEF3FF;
  --sky-bg: #F5F8FF;
  --white: #FFFFFF;

  --text-900: #101828;
  --text-700: #344054;
  --text-500: #667085;
  --border: #E4EAF5;

  --gold: #C9A24A;             /* gold champagne premium */
  --gold-300: #F3E3B0;
  --gold-500: #DDB964;
  --gold-700: #A9812F;
  --gold-900: #8A6624;
  --red-seal: #C0392B;

  /* Typography */
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --pad-x: clamp(16px, 5vw, 96px);
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --shadow-md: 0 8px 24px rgba(13, 31, 138, .1);
  --shadow-blue: 0 10px 30px rgba(22, 51, 158, .35);
  --shadow-gold: 0 6px 14px rgba(138, 102, 36, .22), 0 14px 34px rgba(169, 129, 47, .26);
  /* Stack bóng đa lớp premium (độ sâu thực hơn, các lớp bay dần) */
  --shadow-premium: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(13, 31, 138, .06), 0 12px 28px rgba(13, 31, 138, .08), 0 24px 56px rgba(13, 31, 138, .10);
  --shadow-premium-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 8px 20px rgba(13, 31, 138, .08), 0 20px 44px rgba(13, 31, 138, .12), 0 36px 80px rgba(13, 31, 138, .16);
  --shadow-gold-premium: 0 1px 2px rgba(138, 102, 36, .10), 0 6px 16px rgba(169, 129, 47, .18), 0 14px 34px rgba(169, 129, 47, .24), 0 28px 60px rgba(169, 129, 47, .30);

  --header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Lớp hạt noise mỏng — bớt cảm giác phẳng, tăng chất liệu giấy (rất tinh tế) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
/* Nội dung chính nằm trên lớp noise */
body > * { position: relative; z-index: 1; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0; }
p { margin: 0; }
button { font-family: inherit; }

/* Cân bằng gãy dòng — heading không bị dòng cuối lẻoh, paragraph gãy đẹp hơn */
@supports (text-wrap: balance) {
  h1, h2, h3, h4 { text-wrap: balance; }
}
@supports (text-wrap: pretty) {
  p, li { text-wrap: pretty; }
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  padding-inline: var(--pad-x);   /* full màn hình, không giới hạn max-width */
}
.section { padding-block: clamp(56px, 8vw, 112px); }
.section--tint {
  background:
    radial-gradient(900px circle at 12% 8%,  rgba(22, 51, 158, .07), transparent 55%),
    radial-gradient(700px circle at 88% 92%, rgba(201, 162, 74, .08), transparent 55%),
    radial-gradient(1100px circle at 50% 50%, rgba(91, 127, 232, .05), transparent 60%),
    var(--sky-bg);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1), background .3s ease, color .3s ease, border-color .3s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: 0 0 auto; }

/* Nút chính — Zalo (nổi bật nhất) */
.btn--zalo {
  --mx: 0px;   /* magnetic offset X — set bởi JS, bám con trỏ */
  --my: 0px;   /* magnetic offset Y — set bởi JS, bám con trỏ */
  --lift: 0px; /* hover lift — hover: -2px, active: 1px */
  --press: 1;  /* press scale — active: .98 */
  background:
    linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,0) 42%),
    linear-gradient(135deg, var(--gold-500) 0%, var(--gold) 38%, var(--gold-700) 100%);
  color: var(--navy-950);
  border: 1px solid rgba(255, 246, 214, .55);
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 250, 230, .55);
  font-size: 17px;
  padding: 16px 32px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Compose: magnetic + hover-lift + press qua custom properties → không xung đột inline */
  transform: translate(var(--mx), var(--my)) translateY(var(--lift)) scale(var(--press));
  /* .18s = sweet spot: magnetic responsive, lift/press vẫn mượt */
  transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1), background .3s, color .3s, border-color .3s;
}
.btn--zalo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 252, 240, .5) 48%, rgba(255, 252, 240, .12) 54%, transparent 66%);
  translate: -120% 0;
  pointer-events: none;
}
/* Vệt vàng quét qua mỗi lần hover (replay) — keyframe thay transition để chạy lại mỗi lần */
@keyframes gold-sweep {
  from { translate: -120% 0; }
  to   { translate:  120% 0; }
}
.btn--zalo:hover {
  --lift: -2px;
  box-shadow: 0 8px 18px rgba(138, 102, 36, .28), 0 20px 44px rgba(169, 129, 47, .34), inset 0 1px 0 rgba(255, 250, 230, .6);
}
.btn--zalo:hover::before { animation: gold-sweep .9s cubic-bezier(.22, .61, .36, 1); }
/* 3D press depth — nhấn trôi xuống + scale nhỏ, bóng thu ngắn (compose với magnetic) */
.btn--zalo:active {
  --press: .98;
  --lift: 1px;
  box-shadow: 0 3px 8px rgba(138, 102, 36, .22), inset 0 1px 0 rgba(255, 250, 230, .5);
}
/* Lớp foil động — vân ánh sáng chạy chậm liên tục (rất tinh tế) */
.btn--zalo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 250, 230, 0) 40%, rgba(255, 250, 230, .22) 50%, rgba(255, 250, 230, 0) 60%, transparent 70%);
  background-size: 250% 100%;
  animation: foil 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes foil {
  0% { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}
/* Nút xanh chính (dùng chung, không kèm icon Zalo) — secondary, tạo phân cấp với nút Zalo vàng */
.btn--blue {
  background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,0) 42%), linear-gradient(135deg, var(--blue-600) 0%, var(--brand) 100%);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-blue), inset 0 1px 0 rgba(255,255,255,.18);
  font-weight: 700;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--blue:hover {
  box-shadow: 0 8px 18px rgba(22, 51, 158, .32), 0 20px 44px rgba(14, 30, 140, .40), inset 0 1px 0 rgba(255, 255, 255, .24);
  transform: translateY(-2px);
}

/* Nút phụ */
.btn--outline {
  background: var(--white);
  color: var(--brand);
  border-color: var(--blue-100);
}
.btn--outline:hover {
  border-color: var(--blue-600);
  color: var(--blue-600);
  transform: translateY(-2px);
}

/* CTA nhỏ trên header */
.btn--sm { padding: 10px 20px; font-size: 15px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* ===== Thanh chữ chạy (marquee) dưới header ===== */
.marquee {
  background: linear-gradient(90deg, var(--blue-600), var(--brand));
  color: #fff;
  overflow: hidden;
  position: relative;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-run 36s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding-block: 9px;
}
.marquee__item {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .003em;
}
.marquee__dot {
  color: var(--gold-500);
  padding: 0 22px;
  font-size: 9px;
  line-height: 1;
}
@keyframes marquee-run {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
}
.site-header__logo { flex-shrink: 0; }
.site-header__logo img { height: 44px; width: auto; max-width: none; }
.btn__label--short { display: none; }

.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 36px); }
.site-nav a {
  font-weight: 500;
  font-size: 15.5px;
  color: var(--text-700);
  padding: 8px 2px;
  position: relative;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 2px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--blue-600);
  transition: right .2s ease;
}
.site-nav a:hover { color: var(--blue-600); }
.site-nav a:hover::after, .site-nav a.is-active::after { right: 0; }
.site-nav a.is-active { color: var(--brand); font-weight: 600; }

.site-header__actions { display: flex; align-items: center; gap: 12px; }

/* Hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px; height: 44px;
  border-radius: 10px;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle:hover { background: var(--blue-50); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block;
  width: 22px; height: 2.5px;
  border-radius: 2px;
  background: var(--navy-900);
  position: relative;
  transition: transform .2s ease, opacity .2s ease;
  content: "";
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero (2 panel bo góc kiểu Prep) ---------- */
.hero {
  position: relative;
  background: var(--white);
  padding: clamp(8px, 1.2vw, 20px);
  padding-bottom: 0;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0;
  min-height: calc(100svh - var(--header-h) - clamp(8px, 1.2vw, 20px));
}
.hero__panel { border-radius: clamp(20px, 2vw, 32px); position: relative; overflow: hidden; }

/* Panel trái — nội dung */
.hero__panel--content {
  background: linear-gradient(165deg, #F2F6FF 0%, #E4EDFF 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 5vw, 104px);
}

.hero__eyebrow {
  color: var(--blue-600);
  font-weight: 700;
  font-size: clamp(12px, 1vw, 14.5px);
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: clamp(16px, 2vw, 28px);
}

/* Panel phải — ảnh full-bleed */
.hero__panel--visual {
  background: linear-gradient(180deg, var(--blue-600), var(--navy-800));
}
.hero__welcome {
  position: absolute;
  top: clamp(16px, 2vw, 28px);
  left: clamp(16px, 2vw, 28px);
  background: rgba(255, 255, 255, .95);
  color: var(--navy-900);
  font-weight: 700;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 999px 999px 999px 4px;
  box-shadow: var(--shadow-md);
}

/* Badge nổi trên ảnh hero */
.hero__badge {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .95);
  color: var(--navy-900);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.25;
  padding: 10px 16px;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: heroBadgeFloat 5s ease-in-out infinite;
}
.hero__badge strong { color: var(--blue-600); }
.hero__badge-star { color: var(--gold-500); font-size: 20px; line-height: 1; }
.hero__badge--hsk {
  top: clamp(72px, 9vw, 104px);
  right: clamp(16px, 2vw, 28px);
  background: linear-gradient(135deg, var(--gold-500), var(--gold-700));
  color: var(--navy-950);
  border-radius: 999px;
  animation-delay: .6s;
}
.hero__badge--rating {
  bottom: clamp(58px, 8vw, 92px);
  left: clamp(16px, 2vw, 28px);
  animation-delay: 1.5s;
}
.hero__badge--native {
  bottom: clamp(20px, 3vw, 32px);
  right: clamp(16px, 2vw, 28px);
  animation-delay: 2.3s;
}
@keyframes heroBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__badge { animation: none; }
}

/* Hõm trắng SVG giữa đáy hero (kiểu Prep) */
.hero__notch {
  --notch-w: clamp(66px, 6.5vw, 108px);   /* thu phóng theo màn hình */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--notch-w);
  height: calc(var(--notch-w) * .515);
  z-index: 4;
  pointer-events: none;
  bottom: calc(var(--notch-w) * -.2575);  /* một nửa nằm dưới hero */
}
.hero__notch svg { display: block; width: 100%; height: 100%; }

/* Nút cuộn tròn nằm trong hõm */
.hero__scroll {
  --btn-size: clamp(24px, 2.4vw, 40px);
  position: absolute;
  left: 50%;
  bottom: calc(var(--btn-size) / -2);   /* nút vắt ngang mép hero */
  transform: translateX(-50%);
  z-index: 5;
  width: var(--btn-size); height: var(--btn-size);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-950);
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  box-shadow: 0 3px 10px rgba(16, 24, 40, .2);
  transition: color .15s ease, box-shadow .15s ease;
}
.hero__scroll svg { width: 52%; height: 52%; transition: transform .2s ease; }
.hero__scroll:hover { color: var(--blue-600); box-shadow: 0 6px 16px rgba(22, 51, 158, .3); }
.hero__scroll:hover svg { transform: translateY(3px); }

.hero__title {
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy-900);
  margin-bottom: 20px;
}
.hero__title .accent {
  background: linear-gradient(100deg, var(--blue-600) 20%, #3D53B0 62%, var(--gold) 105%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}
.hero__title .accent svg {
  position: absolute;
  left: 0; right: 0;
  bottom: -.18em;
  width: 100%;
  height: .22em;
}

/* Tên trung tâm tiếng Trung — cách điệu premium */
.hero__cn {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 20px);
  font-family: "Noto Serif SC", serif;
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: .38em;
  text-indent: .38em; /* cân lại khoảng cuối */
  background: linear-gradient(100deg, var(--navy-800), var(--blue-600) 55%, var(--blue-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: clamp(18px, 2.2vw, 28px);
}
/* hai nét mảnh + chấm son hai bên */
.hero__cn::before,
.hero__cn::after {
  content: "";
  height: 1.5px;
  width: clamp(28px, 3.5vw, 56px);
  background: linear-gradient(90deg, transparent, var(--blue-400));
  flex: 0 0 auto;
}
.hero__cn::after {
  background: linear-gradient(90deg, var(--blue-400), transparent);
}

.hero__tagline {
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--text-700);
  max-width: 60ch;
  margin-bottom: 36px;
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

.hero__note {
  margin-top: 20px;
  font-size: 14.5px;
  color: var(--text-500);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ảnh giáo viên phủ kín panel phải */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

/* ---------- Stats strip: card bo góc kiểu Prep ---------- */
.stats {
  background: var(--white);
  padding-block: clamp(40px, 6vw, 96px);
}
.stats__card {
  background: var(--blue-50);
  border-radius: clamp(16px, 2vw, 28px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 2vw, 32px);
  padding: clamp(18px, 3vw, 44px) clamp(10px, 2vw, 32px);
}
.stat { text-align: center; min-width: 0; }
.stat__value {
  font-size: clamp(22px, 3.6vw, 54px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--blue-600);
  line-height: 1.15;
}
.stat__label {
  color: var(--text-700);
  font-size: clamp(11.5px, 1.2vw, 17px);
  font-weight: 500;
  margin-top: 4px;
}

/* ---------- Features (tabs + video, chung section với stats) ---------- */
.features { margin-top: clamp(44px, 6vw, 88px); }

.features__title {
  text-align: center;
  font-size: clamp(26px, 3.2vw, 46px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy-900);
  margin-bottom: clamp(28px, 4vw, 52px);
}
.accent-word {
  position: relative;
  display: inline-block;
  background: linear-gradient(100deg, var(--blue-600), var(--blue-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .12em;
}
.accent-word svg {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -.08em;
  width: 104%;
  height: .28em;
}

/* Tabs */
.tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 2px solid var(--border);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.tab {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: clamp(14.5px, 1.3vw, 18px);
  color: var(--text-500);
  padding: 14px 8px 16px;
  position: relative;
  transition: color .15s ease;
}
.tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  border-radius: 2px;
  background: transparent;
  transition: background .15s ease;
}
.tab:hover { color: var(--blue-600); }
.tab.is-active { color: var(--blue-600); }
.tab.is-active::after { background: var(--blue-600); }

/* Nội dung 2 cột: card trái + video phải */
.features__body {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.feature-card {
  background: var(--sky-bg);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 44px);
  box-shadow: var(--shadow-premium);
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-premium-hover);
}
.feature-card h3 {
  color: var(--brand);
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 800;
  margin-bottom: 16px;
}
.feature-card ul { margin: 0; padding-left: 20px; display: grid; gap: 12px; color: var(--text-700); }
.feature-card li::marker { color: var(--blue-600); }

/* Khung video kiểu cửa sổ trình duyệt */
.browser-frame__dots { display: flex; gap: 6px; margin-bottom: 10px; padding-left: 4px; }
.browser-frame__dots span { width: 10px; height: 10px; border-radius: 50%; }
.browser-frame__dots span:nth-child(1) { background: #FF5F57; }
.browser-frame__dots span:nth-child(2) { background: #FEBC2E; }
.browser-frame__dots span:nth-child(3) { background: #28C840; }
.browser-frame__screen {
  border: 3px solid var(--blue-100);
  background: var(--blue-50);
  border-radius: 20px;
  padding: 10px;
}
.browser-frame__screen iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
  background: #000;
}

/* ---------- Roadmap: thiết kế lộ trình cá nhân hóa ---------- */
.roadmap {
  background: var(--sky-bg);
  padding-block: clamp(56px, 8vw, 112px);
  overflow: hidden;
  position: relative;
}
.roadmap__hello {
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 600;
  color: var(--text-700);
  margin-bottom: 8px;
}
.roadmap__title {
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy-900);
  line-height: 1.25;
}

/* Bộ chọn kiểu Prep */
.pickers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 48px);
  margin-top: clamp(28px, 4vw, 48px);
}
.picker { display: flex; flex-direction: column; }
.picker h3 {
  text-align: center;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 700;
  color: var(--navy-900);
  margin-bottom: 14px;
}
.picker__list {
  background: linear-gradient(170deg, var(--navy-800), var(--brand));
  border-radius: 18px;
  padding: 8px;
  display: grid;
  gap: 4px;
  flex: 1 1 auto;   /* 3 card cao bằng nhau, hàng bên trong tự giãn đều */
}
/* Cụm từ không tách giữa chừng — nhãn dài tự ngắt dòng đúng chỗ trên mọi kích thước */
.picker__list .nobr { white-space: nowrap; }
/* Vế sau của nhãn dài: ưu tiên xuống dòng nguyên cụm; cột quá hẹp thì tự tách tiếp tại ranh giới cụm */
.picker__list .tail { display: inline-block; }
.picker__list button {
  appearance: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
  background: transparent;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.picker__list button:hover { background: rgba(255, 255, 255, .14); }
.picker__list button.is-selected {
  background: var(--white);
  color: var(--brand);
  box-shadow: 0 2px 8px rgba(5, 13, 51, .25);
}
/* Cột hẹp (tablet): thu chữ + padding để nhãn dài không tràn mép card */
@media (min-width: 769px) and (max-width: 1080px) {
  .picker__list { padding: 8px 6px; }
  .picker__list button { font-size: 14px; padding: 12px 10px; }
}

/* Trigger dropdown — chỉ hiện trên mobile */
.picker__trigger { display: none; }

/* Bottom sheet chọn đáp án (mobile) */
.sheet { position: fixed; inset: 0; z-index: 300; }
.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 13, 51, .55);
  animation: sheetFade .25s ease;
}
.sheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--white);
  border-radius: 24px 24px 0 0;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  animation: sheetUp .3s cubic-bezier(.22, .61, .36, 1);
  max-height: 82svh;
  overflow: auto;
}
.sheet__grip {
  display: block;
  width: 44px; height: 4px;
  border-radius: 999px;
  background: var(--border);
  margin: 0 auto 16px;
}
.sheet__title {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-900);
  margin-bottom: 18px;
}
.sheet__options { display: grid; gap: 12px; }
.sheet__options button {
  appearance: none;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text-900);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 15px 20px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all .15s ease;
}
.sheet__options button .radio {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--text-500);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.sheet__options button .radio::after {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: transparent;
}
.sheet__options button.is-selected {
  background: var(--blue-50);
  border-color: var(--blue-600);
  color: var(--blue-600);
}
.sheet__options button.is-selected .radio { border-color: var(--blue-600); }
.sheet__options button.is-selected .radio::after { background: var(--blue-600); }
.sheet__confirm {
  width: 100%;
  justify-content: center;
  margin-top: 20px;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }

.roadmap__hint {
  text-align: center;
  font-size: 14.5px;
  color: var(--text-500);
  margin-top: 20px;
}
.roadmap__hint a {
  color: var(--blue-600);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.roadmap__choose {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy-900);
  line-height: 1.3;
  margin-top: clamp(40px, 6vw, 72px);
}
.roadmap__choose span {
  background: linear-gradient(100deg, var(--blue-600), var(--blue-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Slider khóa học */
.course-slider {
  position: relative;
  margin-top: clamp(36px, 5vw, 64px);
}
.course-slider__viewport { overflow: hidden; padding-top: 60px; }
.course-slider__track {
  display: flex;
  gap: 16px;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.course-card {
  flex: 0 0 calc((100% - 64px) / 5);   /* 5 khóa / trang desktop */
  position: relative;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 20px 18px;
  cursor: pointer;
  box-shadow: var(--shadow-premium);
  transition: transform .4s ease, filter .4s ease, opacity .4s ease, border-color .4s ease, box-shadow .4s ease;
  transform-origin: center bottom;
}
.course-card:hover {
  box-shadow: var(--shadow-premium-hover);
}
.course-card__tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-600);
  background: var(--blue-50);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 10px;
}
.course-card h3 { font-size: 17px; font-weight: 800; color: var(--navy-900); margin-bottom: 8px; }
.course-card p { font-size: 13.5px; color: var(--text-500); line-height: 1.55; }
.course-card__meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-700);
}
.course-card__crown {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: linear-gradient(135deg, #FFE08A 0%, #FFC53D 45%, #FF9F0A 100%);
  color: #4A3200;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .7);
  box-shadow: 0 8px 24px rgba(255, 159, 10, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
  overflow: hidden;
}
/* vệt sáng quét qua badge */
.course-card__crown::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 36%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .75), transparent);
  animation: crownShine 2.6s ease-in-out infinite;
}
@keyframes crownShine {
  0% { left: -45%; }
  55%, 100% { left: 115%; }
}
/* Số thứ tự bước trong chuỗi lộ trình */
.course-card__step {
  position: absolute;
  top: -12px;
  right: -10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(22, 51, 158, .35);
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.course-card__step:empty { display: none; }
.course-card.is-step .course-card__step { transform: scale(1); }

/* Card thuộc chuỗi lộ trình — luôn rõ nét */
.course-card.is-step {
  transform: scale(.97);
  filter: none;
  opacity: 1;
  border-color: var(--blue-400);
}

/* Trạng thái theo khoảng cách tới card trung tâm */
.course-card.is-center {
  border-color: var(--blue-600);
  box-shadow: 0 16px 40px rgba(22, 51, 158, .18);
  z-index: 2;
}

/* Card "phù hợp nhất" — khung vàng premium, nâng nổi lên */
.course-card.is-center.is-best {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(135deg, #FFD76A 0%, #FF9F0A 45%, #FFC53D 75%, #FFE9B3 100%) border-box;
  box-shadow:
    0 18px 44px rgba(255, 159, 10, .26),
    0 8px 22px rgba(13, 31, 138, .1);
  transform: translateY(-4px);
}
.course-card.is-center.is-best .course-card__tag {
  color: #8A5A00;
  background: #FFF3D6;
}
.course-card.is-center.is-best .course-card__crown {
  transform: translateX(-50%) scale(1);
  animation: crownFloat 3s ease-in-out .4s infinite;
}
@keyframes crownFloat {
  0%, 100% { transform: translateX(-50%) scale(1) translateY(0); }
  50% { transform: translateX(-50%) scale(1.02) translateY(-3px); }
}
/* tia lấp lánh quanh badge */
.course-card.is-center.is-best::before,
.course-card.is-center.is-best::after {
  content: "✦";
  position: absolute;
  color: #FFC53D;
  text-shadow: 0 0 12px rgba(255, 197, 61, .9);
  pointer-events: none;
  animation: twinkle 1.8s ease-in-out infinite;
}
.course-card.is-center.is-best::before {
  top: -48px;
  left: calc(50% + 58px);
  font-size: 15px;
}
.course-card.is-center.is-best::after {
  top: -14px;
  left: calc(50% - 80px);
  font-size: 11px;
  animation-delay: .9s;
}
@keyframes twinkle {
  0%, 100% { opacity: .15; transform: scale(.6) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(35deg); }
}
.course-card.is-near { transform: scale(.9); filter: blur(1.2px); opacity: .75; }
.course-card.is-far { transform: scale(.8); filter: blur(2.5px); opacity: .55; }

.course-slider__arrow {
  position: absolute;
  top: 55%;
  z-index: 6;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--navy-900);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: color .15s ease, transform .15s ease;
}
.course-slider__arrow:hover { color: var(--blue-600); transform: scale(1.08); }
.course-slider__arrow--prev { left: -8px; }
.course-slider__arrow--next { right: -8px; }

/* ---------- Cảm nhận học viên (panel navy kiểu Prep) ---------- */
.testimonials {
  background: var(--white);
  padding-block: clamp(40px, 6vw, 88px);
}
.testimonials__panel {
  position: relative;
  overflow: hidden;
  border-radius: clamp(22px, 2.5vw, 36px);
  background: linear-gradient(150deg, var(--navy-800) 0%, var(--brand) 45%, var(--navy-900) 100%);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 72px);
  padding: clamp(28px, 4vw, 64px);
}
.testimonials__intro {
  align-self: center;
  position: relative;
  z-index: 2;
}
.testimonials__eyebrow {
  color: rgba(255, 255, 255, .85);
  font-weight: 600;
  font-size: clamp(15px, 1.3vw, 19px);
  margin-bottom: 10px;
}
.testimonials__intro h2 {
  color: #fff;
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}
.testimonials__sub {
  color: rgba(255, 255, 255, .82);
  font-size: clamp(15px, 1.25vw, 18px);
  max-width: 42ch;
  line-height: 1.7;
}
/* họa tiết kiến trúc Trung Hoa */
.testimonials__skyline {
  position: absolute;
  left: clamp(-20px, -1vw, 0px);
  bottom: -6px;
  width: min(620px, 62%);
  opacity: .22;
  pointer-events: none;
}

.testimonials__wall {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 24px);
  height: min(620px, 74vh);
  overflow: hidden;
  position: relative;
  z-index: 2;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent);
}
.testi-col { overflow: hidden; }
.testi-col__inner {
  display: grid;
  gap: clamp(14px, 2vw, 24px);
  animation: testiScroll linear infinite;
}
.testi-col--reverse .testi-col__inner { animation-direction: reverse; }
/* hover cột nào thì chỉ cột đó dừng */
.testi-col:hover .testi-col__inner { animation-play-state: paused; }
@keyframes testiScroll {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-50% - clamp(7px, 1vw, 12px))); }
}

.testi-card {
  background: var(--white);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(5, 13, 51, .18);
}
.testi-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.testi-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.testi-card__who { display: grid; line-height: 1.3; }
.testi-card__who strong { font-size: 16.5px; font-weight: 700; color: var(--blue-600); }
.testi-card__who small { font-size: 12.5px; color: var(--text-500); }
.testi-card__text { font-size: 14.5px; color: var(--text-700); line-height: 1.7; }
.testi-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.testi-card__score, .testi-card__likes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-900);
}

/* ---------- Đội ngũ giáo viên (carousel tròn kiểu Prep) ---------- */
.teachers {
  background: var(--white);
  padding-block: clamp(56px, 8vw, 112px);
  overflow: hidden;
}
.teachers__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  margin-bottom: clamp(20px, 3vw, 40px);
}
.teachers__eyebrow {
  font-weight: 700;
  color: var(--navy-900);
  font-size: clamp(14px, 1.2vw, 17px);
  margin-bottom: 10px;
}
.teachers__title {
  font-size: clamp(28px, 3.4vw, 50px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy-900);
  line-height: 1.2;
}
.teachers__title span {
  background: linear-gradient(100deg, var(--blue-600), var(--blue-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.teachers__desc {
  color: var(--text-700);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.7;
}
.teachers__desc strong { color: var(--navy-900); }

/* ===== Đội ngũ: vòng tròn xoay vô hạn cạnh trái + thông tin bên phải ===== */
.orbit-panel {
  --R: clamp(190px, 22vw, 320px);       /* bán kính vòng tròn */
  --av: clamp(72px, 7.5vw, 104px);      /* cỡ avatar */
  display: grid;
  grid-template-columns: minmax(0, .44fr) minmax(0, .56fr);
  align-items: center;
  margin-top: clamp(32px, 4vw, 56px);
  min-height: calc(var(--R) * 2 + 90px);
  background:
    radial-gradient(90% 120% at 0% 50%, rgba(22, 51, 158, .10), transparent 60%),
    linear-gradient(135deg, #EEF3FF 0%, #FAFCFF 55%, #ECF2FF 100%);
  border: 1px solid var(--border);
  border-radius: clamp(22px, 2.5vw, 34px);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: relative;
}
.orbit-stage { position: relative; height: 100%; min-height: inherit; }
.orbit-ring {
  position: absolute;
  left: calc(var(--R) * -1);
  top: 50%;
  width: calc(var(--R) * 2);
  height: calc(var(--R) * 2);
  margin-top: calc(var(--R) * -1);
  border-radius: 50%;
  border: 1.5px dashed rgba(201, 162, 74, .55);
  /* --base: góc của người đang chọn (0° = phải; 90° = đáy, dùng cho mobile) */
  transform: rotate(calc(var(--rot, 0deg) + var(--base, 0deg)));
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
/* vòng guide phụ bên trong */
.orbit-ring::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 74, .22);
}
.orbit-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--av);
  height: var(--av);
  margin: calc(var(--av) / -2) 0 0 calc(var(--av) / -2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--blue-50);
  overflow: hidden;
  box-shadow: 0 0 0 3px var(--white), 0 8px 22px rgba(13, 31, 138, .18);
  /* đặt ở góc --a trên vòng, tự xoay ngược để luôn thẳng đứng */
  transform: rotate(var(--a)) translateX(var(--R)) rotate(calc((var(--a) + var(--rot, 0deg) + var(--base, 0deg)) * -1)) scale(var(--s, 1));
  transition: transform .8s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, filter .4s ease;
  filter: saturate(.7) opacity(.72);
}
.orbit-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* Avatar giáo viên đung đưa nhẹ, staggered qua nth-child — sống động hơn khi đứng yên */
.orbit-item img { animation: orbitFloat 5s ease-in-out infinite; }
.orbit-item:nth-child(odd) img { animation-delay: -2.5s; }
.orbit-item:nth-child(3n) img { animation-delay: -1.6s; }
@keyframes orbitFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.orbit-item:hover { filter: saturate(1) opacity(1); }
.orbit-item.is-active {
  --s: 1.5;
  z-index: 2;
  filter: none;
  cursor: zoom-in;
  box-shadow:
    0 0 0 3px var(--white),
    0 0 0 6px var(--gold),
    0 18px 44px rgba(138, 102, 36, .38);
}
.orbit-info { padding: clamp(24px, 3.5vw, 60px) clamp(24px, 4vw, 72px) clamp(24px, 3.5vw, 60px) clamp(18px, 2vw, 32px); }
.orbit-info__inner { animation: orbitSwap .5s cubic-bezier(.22, .61, .36, 1); }
@keyframes orbitSwap {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.orbit-info h3 {
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 800;
  color: var(--navy-900);
  margin: 12px 0 4px;
  line-height: 1.25;
}
.orbit-info__cn { font-family: "Noto Serif SC", serif; color: var(--blue-400); font-size: .72em; margin-left: 6px; }
.orbit-info__role { color: var(--blue-600); font-weight: 800; font-size: clamp(13.5px, 1.2vw, 16px); }
.orbit-info__brief {
  color: var(--text-700);
  font-size: clamp(13.5px, 1.15vw, 15.5px);
  line-height: 1.7;
  margin-top: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.orbit-info__actions {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  flex-wrap: wrap;
  margin-top: clamp(18px, 2.2vw, 28px);
}
.orbit-nav { display: inline-flex; align-items: center; gap: 10px; }
.orbit-nav span { color: var(--text-500); font-size: 13px; font-weight: 700; min-width: 38px; text-align: center; }
.orbit-nav button {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--navy-900);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.orbit-nav button:hover { border-color: var(--blue-600); color: var(--blue-600); box-shadow: 0 4px 14px rgba(22, 51, 158, .18); }

/* Section riêng cho orbit thông tin đầy đủ (trang Đội ngũ) */
.orbit-sec { margin-top: 14px; text-align: left; }
.orbit-sec h4 {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--navy-900);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 7px;
}
.orbit-sec ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
  color: var(--text-700);
  font-size: clamp(12.5px, 1.05vw, 14px);
  line-height: 1.6;
}
.orbit-sec li::marker { color: var(--blue-600); }
.orbit-panel--full .orbit-info h3 { font-size: clamp(20px, 2vw, 28px); }

@media (max-width: 768px) {
  .orbit-panel {
    --R: 138px;
    --av: 62px;
    --base: 90deg; /* người ở giữa nằm ở đáy vòng tròn, hướng xuống phần thông tin */
    grid-template-columns: 1fr;
    min-height: 0;
  }
  /* vòng xoay chuyển lên trên: nửa vòng ló ra từ mép trên panel */
  .orbit-stage { height: calc(var(--R) + var(--av) + 26px); }
  .orbit-ring {
    left: 50%;
    top: calc(var(--R) * -1);
    margin: 0 0 0 calc(var(--R) * -1);
  }
  .orbit-info { padding: 4px 22px 26px; text-align: center; }
  .orbit-info__actions { justify-content: center; }
  .orbit-info__brief { -webkit-line-clamp: 4; }
  .orbit-sec { text-align: left; }
}

/* ---------- FAQ ---------- */
.faq {
  background: var(--white);
  padding-block: clamp(56px, 8vw, 112px) clamp(24px, 4vw, 48px);
}
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 80px);
}
/* Cột intro: đẩy cụm mascot + nút CTA xuống đáy, mascot đứng tựa cạnh trên của nút */
.faq__intro { display: flex; flex-direction: column; }
.faq__dock { margin-top: auto; }
.faq__dock .btn--tint { position: relative; z-index: 2; }
.faq__intro h2 {
  font-size: clamp(28px, 3.4vw, 50px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy-900);
  line-height: 1.25;
  margin-bottom: 28px;
}
.faq__intro h2 span {
  background: linear-gradient(100deg, var(--blue-600), var(--blue-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.btn--tint {
  background: var(--blue-50);
  color: var(--blue-600);
  font-weight: 700;
}
.btn--tint:hover { background: var(--blue-100); transform: translateY(-2px); }

.faq__list { display: grid; gap: 16px; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.faq-item.is-open {
  border-color: var(--blue-100);
  box-shadow: 0 16px 40px rgba(13, 31, 138, .1);
}
.faq-item__q {
  appearance: none;
  background: none;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(15.5px, 1.3vw, 18px);
  font-weight: 700;
  color: var(--text-900);
  padding: 20px 24px;
}
.faq-item.is-open .faq-item__q { color: var(--blue-600); }
.faq-item__q:hover { color: var(--blue-600); }
/* icon +/− */
.faq-item__icon {
  position: relative;
  width: 18px; height: 18px;
  flex: 0 0 auto;
}
.faq-item__icon::before, .faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform .25s ease;
}
.faq-item__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq-item.is-open .faq-item__icon::after { transform: translateY(-50%) rotate(0deg); }
/* nội dung trượt mượt */
.faq-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.faq-item.is-open .faq-item__body { grid-template-rows: 1fr; }
.faq-item__content {
  overflow: hidden;
  padding-inline: 24px;
  color: var(--text-700);
  line-height: 1.7;
  font-size: 15px;
}
.faq-item__content p { margin-bottom: 14px; }
.faq-item.is-open .faq-item__content { padding-bottom: 10px; }
.faq-item__content strong { color: var(--navy-900); }
.faq-item__content a { color: var(--blue-600); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Blog: bài viết mới trên trang chủ ---------- */
.blog {
  background: var(--white);
  padding-block: clamp(56px, 8vw, 112px);
}

/* ---------- Liên hệ (panel navy + form kiểu Prep) ---------- */
.contact-cta {
  background: var(--white);
  padding-block: clamp(24px, 4vw, 64px) clamp(48px, 6vw, 96px);
}
.contact-cta__panel {
  position: relative;
  overflow: hidden;
  border-radius: clamp(22px, 2.5vw, 36px);
  background: linear-gradient(150deg, var(--navy-800) 0%, var(--brand) 45%, var(--navy-900) 100%);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 80px);
  padding: clamp(28px, 4vw, 64px);
}
.contact-cta__intro { position: relative; }
.contact-cta__intro h2 {
  color: #fff;
  font-size: clamp(30px, 3.6vw, 54px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}
.contact-cta__intro p {
  color: rgba(255, 255, 255, .85);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.7;
  max-width: 40ch;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ===== Mascot Xiaoyang — đứng sát mép dưới, ló lên khi cuộn, đung đưa tại chỗ ===== */
/* Wrapper: neo đáy khu vực + "ló lên" từ dưới mép khi cuộn tới */
.mascot {
  position: absolute;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateY(78px);
  transition: opacity .5s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
  will-change: transform, opacity;
}
.mascot.is-in { opacity: 1; transform: translateY(0); }
/* Ảnh bên trong: đung đưa tại chỗ — xoay quanh CHÂN nên không nhấc bổng, không lửng lơ */
.mascot__img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 12px 16px rgba(13, 31, 138, .22));
  animation: mascotIdle 4.6s ease-in-out infinite;
}
@keyframes mascotIdle {
  0%, 100% { transform: rotate(-1.9deg) translateY(var(--py, 0px)); }
  50%      { transform: rotate(1.9deg) translateY(var(--py, 0px)); }
}

/* Vị trí: đều neo bottom:0 của khu vực để chân chạm mép dưới */
.roadmap__mascot { right: clamp(4px, 3vw, 44px); width: clamp(72px, 8vw, 112px); z-index: 1; }

.faq { position: relative; overflow: hidden; }
.faq__mascot {
  /* đứng trong luồng layout, tựa lên cạnh trên nút CTA (đè 14px) */
  position: relative;
  display: block;
  width: clamp(96px, 11vw, 138px);
  margin-left: clamp(14px, 1.6vw, 30px);
  margin-bottom: -14px;
  z-index: 1;
}

.page-hero__mascot { right: clamp(6px, 5vw, 80px); width: clamp(86px, 10vw, 130px); }

.contact-cta__mascot { left: clamp(10px, 3vw, 44px); width: clamp(96px, 10vw, 140px); z-index: 1; }

/* Logo trắng: neo góc dưới–phải cột intro, cân với mascot ở góc trái */
.contact-cta__logo {
  position: absolute;
  right: clamp(8px, 2.5vw, 40px);
  bottom: 0;
  width: clamp(104px, 11vw, 148px);
  opacity: 1;
}

.brochure__head { position: relative; }
.about-head__mascot { right: clamp(0px, 2vw, 24px); width: clamp(78px, 8vw, 118px); z-index: 1; transform: translateY(30px); }
.about-head__mascot.is-in { transform: translateY(0); }

/* Chừa chỗ bên phải để chữ không đè lên mascot (màn hình rộng) */
@media (min-width: 861px) {
  .page-hero__crumb,
  .page-hero h1,
  .page-hero p:not(.page-hero__crumb) { padding-right: clamp(130px, 13vw, 190px); }
  .brochure__head { padding-right: clamp(110px, 11vw, 160px); }
}

@media (max-width: 860px) {
  .roadmap__mascot, .page-hero__mascot, .about-head__mascot, .faq__mascot, .contact-cta__mascot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mascot { opacity: 1; transform: translateY(0); transition: none; }
  .about-head__mascot { transform: translateY(0); }
  .mascot__img, .contact-cta__logo { animation: none; }
}

.contact-form { display: grid; gap: 16px; }
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form__field { display: grid; gap: 8px; min-width: 0; }
.contact-form__field span {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.contact-form__field input,
.contact-form__field textarea {
  font-family: inherit;
  font-size: 15.5px;
  color: var(--text-900);
  background: var(--white);
  border: 0;
  border-radius: 14px;
  padding: 14px 18px;
  width: 100%;
  resize: vertical;
}
.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder { color: var(--text-500); }
.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: 3px solid var(--blue-400);
}
.contact-form__field .select-wrap { position: relative; }
.contact-form__field[hidden] { display: none; }
.contact-form__field select {
  font-family: inherit;
  font-size: 15.5px;
  color: var(--text-900);
  background: var(--white);
  border: 0;
  border-radius: 14px;
  padding: 14px 44px 14px 18px;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.contact-form__field select:focus { outline: 3px solid var(--blue-400); }
.contact-form__field .select-wrap::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--text-500);
  border-bottom: 2px solid var(--text-500);
  transform: rotate(45deg);
  pointer-events: none;
}
.contact-form__note {
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  font-style: italic;
}
.contact-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.contact-form__success { color: #9FF7C0; font-size: 14.5px; font-weight: 600; }

/* Nút sáng trên nền navy */
.btn--light {
  background: var(--white);
  color: var(--brand);
  font-weight: 700;
}
.btn--light:hover {
  background: var(--blue-50);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(5, 13, 51, .35);
}

/* ---------- Journey: carousel cuộn ngang scroll-snap ---------- */
.journey {
  display: flex;
  align-items: stretch;
  gap: clamp(10px, 1.2vw, 18px);
  margin-top: clamp(44px, 5vw, 64px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 24px 8px 8px;        /* chừa chỗ cho crown badge tràn lên + focus ring */
  scrollbar-width: none;        /* Firefox: ẩn scrollbar */
}
.journey::-webkit-scrollbar { display: none; }  /* Chrome/Safari: ẩn scrollbar */
.journey::after {
  content: "";
  flex: 0 0 1px;                 /* sentinel tránh thẻ cuối dính sát mép */
}
.jcard {
  position: relative;
  flex: 0 0 280px;               /* cố định, KHÔNG shrink */
  min-width: 280px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 22px;
  padding: clamp(20px, 2vw, 28px);
  cursor: pointer;
  box-shadow: var(--shadow-premium);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.jcard:hover, .jcard:focus-visible {
  transform: translateY(-5px);
  border-color: var(--blue-400);
  box-shadow: var(--shadow-premium-hover);
  outline: none;
}
/* Khóa bắt đầu — khung vàng premium + vương miện */
.jcard--start {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(135deg, #FFD76A 0%, #FF9F0A 45%, #FFC53D 75%, #FFE9B3 100%) border-box;
  box-shadow: 0 18px 44px rgba(255, 159, 10, .22);
}
.jcard__crown {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: linear-gradient(135deg, #FFE08A 0%, #FFC53D 45%, #FF9F0A 100%);
  color: #4A3200;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .7);
  box-shadow: 0 8px 22px rgba(255, 159, 10, .4), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.jcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.jcard__no {
  font-size: 12px;
  font-weight: 800;
  color: var(--blue-600);
  background: var(--blue-100);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.jcard--start .jcard__no {
  color: #8A5A00;
  background: #FFF3D6;
}
.jcard h3 { font-size: clamp(17px, 1.5vw, 20px); font-weight: 800; color: var(--navy-900); margin-bottom: 8px; }
.jcard p {
  font-size: 14px;
  color: var(--text-700);
  line-height: 1.65;
  flex: 1;
  display: -webkit-box;         /* giới hạn 5 dòng — cân đối khoảng trắng giữa thẻ ngắn/dài */
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jcard__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
}
.jcard__meta i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--blue-400);
}
.jcard__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-600);
  white-space: nowrap;           /* KHÔNG tách "Xem chi tiết" thành nhiều dòng */
}
.jcard__more svg { transition: transform .15s ease; }
.jcard:hover .jcard__more svg { transform: translateX(4px); }

/* Mũi tên nối: chỉ trang trí, aria-hidden, không bấm được */
.jarrow {
  align-self: center;
  flex: 0 0 40px;
  min-width: 40px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--blue-100);
  color: var(--blue-600);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.journey__more {
  text-align: center;
  margin-top: clamp(24px, 3vw, 36px);
  font-size: 14.5px;
  color: var(--text-500);
}
.journey__more a { color: var(--blue-600); font-weight: 700; }
.journey__more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Thẻ đơn lẻ */
.journey--single .jcard { flex-basis: min(440px, 100%); min-width: min(440px, 100%); }
.journey--single .jarrow { display: none; }

/* Mobile: 1 thẻ/lượt — peek thẻ kế báo hiệu còn nội dung */
@media (max-width: 640px) {
  .journey { padding-bottom: 76px; }  /* tránh nút Zalo nổi che CTA của thẻ */
  .jcard { flex-basis: calc(100% - 48px); min-width: calc(100% - 48px); scroll-snap-align: center; }
  .jarrow { flex-basis: 28px; min-width: 28px; width: 28px; height: 28px; }
}
/* Tablet: 2 thẻ/lượt (thẻ ~280px → 2*280 + gap vừa khít 768px) */
@media (min-width: 641px) and (max-width: 900px) {
  .jcard { flex-basis: calc((100% - 56px) / 2); min-width: 280px; }
}

/* ---------- Page hero (trang con) ---------- */
.page-hero {
  background:
    radial-gradient(700px 320px at 90% 0%, rgba(22, 51, 158, .12), transparent 60%),
    linear-gradient(180deg, #FFFFFF, var(--sky-bg));
  padding-block: clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--border);
}
.page-hero__crumb {
  font-size: 14px;
  color: var(--text-500);
  margin-bottom: 14px;
}
.page-hero__crumb a:hover { color: var(--blue-600); }
.page-hero h1 {
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -.02em;
}
.page-hero p { margin-top: 14px; color: var(--text-700); max-width: 70ch; font-size: 17px; }

/* Placeholder khối nội dung chờ cập nhật */
.placeholder-card {
  border: 1.5px dashed var(--blue-100);
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 64px);
  text-align: center;
  color: var(--text-500);
}
.placeholder-card strong { color: var(--brand); }

/* ---------- Trang Về trung tâm ---------- */
.about-accent {
  background: linear-gradient(100deg, var(--blue-600), var(--blue-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.about-head { max-width: 76ch; margin-bottom: clamp(32px, 4vw, 56px); }
.about-title {
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy-900);
  line-height: 1.25;
  margin-bottom: 16px;
}
.about-sub { color: var(--text-700); font-size: clamp(15px, 1.3vw, 18.5px); line-height: 1.7; }
.about-sub strong { color: var(--navy-900); }

/* 4 điểm nổi bật đánh số */
.num-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.num-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.5vw, 32px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.num-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue-100);
  box-shadow: var(--shadow-md);
}
.num-card__no {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  color: var(--blue-600);
  background: var(--blue-50);
  border-radius: 10px;
  padding: 6px 12px;
  margin-bottom: 14px;
}
.num-card h3 { font-size: 18px; font-weight: 800; color: var(--navy-900); margin-bottom: 10px; }
.num-card p { color: var(--text-700); font-size: 14.5px; line-height: 1.65; }

/* Triết lý — panel navy */
.philo { padding-block: clamp(24px, 4vw, 56px); background: var(--white); }
.philo__panel {
  background: linear-gradient(150deg, var(--navy-800) 0%, var(--brand) 45%, var(--navy-900) 100%);
  border-radius: clamp(22px, 2.5vw, 36px);
  padding: clamp(32px, 5vw, 72px);
  text-align: center;
}
.philo__eyebrow {
  color: rgba(255, 255, 255, .8);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 16px;
}
.philo__quote {
  color: #fff;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -.01em;
}
.philo__cn {
  font-family: "Noto Serif SC", serif;
  color: var(--blue-400);
  letter-spacing: .35em;
  text-indent: .35em;
  font-size: clamp(13px, 1.2vw, 17px);
  margin-top: 12px;
}
.philo__lead {
  color: rgba(255, 255, 255, .85);
  max-width: 62ch;
  margin: 18px auto 0;
  font-size: clamp(14.5px, 1.2vw, 17.5px);
  line-height: 1.7;
}
.philo__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(28px, 4vw, 44px);
  text-align: left;
}
.philo__card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.5vw, 32px);
  backdrop-filter: blur(4px);
}
.philo__card h3 {
  color: #fff;
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 800;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.philo__card h3 span {
  font-family: "Noto Serif SC", serif;
  color: var(--blue-400);
  font-size: 1.3em;
}
.philo__card p { color: rgba(255, 255, 255, .85); font-size: 14.5px; line-height: 1.7; }

/* Tầm nhìn & Sứ mệnh */
.vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 32px);
  align-items: stretch;
}
.vision-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 44px);
}
.vision-card--tint { background: var(--sky-bg); border-color: var(--blue-100); }
.vision-card h2 {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  color: var(--navy-900);
  margin-bottom: 14px;
}
.vision-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--blue-600);
  margin: 20px 0 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.vision-card p { color: var(--text-700); line-height: 1.75; font-size: 15px; margin-bottom: 12px; }
.vision-card ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 10px; color: var(--text-700); font-size: 15px; line-height: 1.65; }
.vision-card li::marker { color: var(--blue-600); }
.vision-card strong { color: var(--navy-900); }
.vision-card__note {
  border-left: 3px solid var(--blue-600);
  padding-left: 14px;
  font-style: italic;
  color: var(--text-500);
}

/* Trích dẫn tham khảo — heading trái, quote xếp dọc phải */
.refs__grid {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: start;
}
.refs__intro { position: sticky; top: calc(var(--header-h) + 24px); }
.refs__intro .about-sub { max-width: 40ch; }
.refs__list { display: grid; gap: clamp(16px, 2vw, 24px); }

.ref-card {
  margin: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ref-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-premium-hover); }
.ref-card__mark { color: var(--blue-100); display: block; margin-bottom: 14px; }
.ref-card p {
  color: var(--navy-900);
  line-height: 1.75;
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 500;
  font-style: italic;
  margin-bottom: 20px;
}
.ref-card__src {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--sky-bg);
  padding-top: 16px;
}
.ref-card__who { display: grid; gap: 3px; }
.ref-card__who strong { color: var(--navy-900); font-size: 14.5px; }
.ref-card__who small { color: var(--text-500); font-size: 13px; }
.ref-card__src a {
  flex: 0 0 auto;
  background: var(--blue-50);
  color: var(--blue-600);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.ref-card__src a:hover { background: var(--blue-100); transform: translateY(-1px); }

/* Brochure tuyển sinh (xem PDF dạng slide) */
.brochure__head { text-align: center; margin-inline: auto; }
.brochure__viewer {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  border-radius: clamp(16px, 2vw, 28px);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 24px 64px rgba(13, 31, 138, .18);
  aspect-ratio: 16 / 9;
}
.brochure__viewer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .25s ease;
}
.brochure__viewer img.is-fading { opacity: 0; }
.brochure__viewer .course-slider__arrow--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.brochure__viewer .course-slider__arrow--next { right: 16px; top: 50%; transform: translateY(-50%); }
.brochure__viewer .course-slider__arrow:hover { transform: translateY(-50%) scale(1.08); }
.brochure__counter {
  position: absolute;
  right: 18px;
  bottom: 14px;
  background: rgba(5, 13, 51, .65);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.brochure__thumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
  max-width: 1080px;
  margin: 18px auto 0;
  overflow-x: auto;
  padding: 6px 4px;
  scrollbar-width: none;
}
.brochure__thumbs::-webkit-scrollbar { display: none; }
.brochure__thumbs button {
  appearance: none;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  flex: 0 0 auto;
  width: clamp(72px, 8vw, 116px);
  aspect-ratio: 16 / 9;
  opacity: .65;
  transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.brochure__thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brochure__thumbs button:hover { opacity: 1; transform: translateY(-2px); }
.brochure__thumbs button.is-active {
  opacity: 1;
  border-color: var(--blue-600);
  box-shadow: 0 6px 16px rgba(22, 51, 158, .25);
}

.brochure__actions { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 36px); }

/* ---------- Trang Khóa học ---------- */
.page-hero__link { color: var(--blue-600); font-weight: 700; }
.page-hero__link:hover { text-decoration: underline; text-underline-offset: 3px; }

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.course-item {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.2vw, 28px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.course-item:hover, .course-item:focus-visible {
  transform: translateY(-4px);
  border-color: var(--blue-100);
  box-shadow: var(--shadow-md);
  outline: none;
}
.course-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.badge-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #067647;
  background: #E7F8F0;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.badge-open span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #12B76A;
  box-shadow: 0 0 0 3px rgba(18, 183, 106, .2);
}
.badge-soon {
  font-size: 11.5px;
  font-weight: 700;
  color: #B54708;
  background: #FEF4E6;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.course-item h3 { font-size: 18px; font-weight: 800; color: var(--navy-900); margin-bottom: 8px; }
.course-item > p { color: var(--text-700); font-size: 14px; line-height: 1.65; flex: 1; }
.course-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-500);
}
.course-item__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.course-item__more {
  appearance: none;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-600);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}
.course-item__more svg { transition: transform .15s ease; }
.course-item:hover .course-item__more svg { transform: translateX(4px); }
.course-item__zalo {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-600);
  display: grid;
  place-items: center;
  transition: background .15s ease, color .15s ease;
}
.course-item__zalo:hover { background: var(--blue-600); color: #fff; }

/* Màn hình bé: course grid → slider lặp vô hạn */
.course-grid--slider {
  display: block;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.course-grid--slider .course-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: courseScroll linear infinite;
}
.course-grid--slider .course-item {
  width: min(80vw, 320px);
  flex: 0 0 auto;
}
.course-grid--slider .course-track:hover { animation-play-state: paused; }
@keyframes courseScroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 7px)); }
}
/* Slider trượt từng bước (không tự chạy liên tục) */
.course-grid--slider .course-track--step {
  animation: none;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.course-step-wrap { position: relative; }
.course-step-wrap .course-slider__arrow--prev { left: -14px; }
.course-step-wrap .course-slider__arrow--next { right: -14px; }
@media (max-width: 640px) {
  .course-step-wrap .course-slider__arrow { width: 36px; height: 36px; top: 48%; }
  .course-step-wrap .course-slider__arrow--prev { left: -4px; }
  .course-step-wrap .course-slider__arrow--next { right: -4px; }
}

/* Modal chi tiết khóa */
.cmodal { position: fixed; inset: 0; z-index: 400; }
.cmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 13, 51, .6);
  animation: sheetFade .25s ease;
}
.cmodal__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 32px));
  max-height: min(86svh, 860px);
  background: var(--white);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn .3s cubic-bezier(.22, .61, .36, 1);
}
@keyframes modalIn {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
.cmodal__close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-700);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.cmodal__close:hover { color: var(--blue-600); border-color: var(--blue-100); }
.cmodal__body {
  padding: clamp(24px, 3vw, 40px);
  overflow-y: auto;
}
.cmodal__body h3 { font-size: clamp(21px, 2vw, 27px); font-weight: 800; color: var(--navy-900); margin: 4px 0 8px; padding-right: 40px; }
.cmodal__desc { color: var(--text-700); font-size: 15px; line-height: 1.7; margin-bottom: 16px; }
.cmodal__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cmodal__chips span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
  background: var(--blue-50);
  border-radius: 999px;
  padding: 6px 14px;
}
.cmodal__section { margin-top: 20px; }
.cmodal__section h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy-900);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.cmodal__section ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text-700); font-size: 14.5px; line-height: 1.65; }
.cmodal__section li::marker { color: var(--blue-600); }
.cmodal__foot {
  padding: 14px clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--border);
  background: var(--sky-bg);
  display: flex;
  justify-content: center;
}
.cmodal__foot .btn { width: 100%; justify-content: center; }

@media (max-width: 640px) {
  .cmodal__panel {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-height: 88svh;
    border-radius: 24px 24px 0 0;
    animation: sheetUp .3s cubic-bezier(.22, .61, .36, 1);
  }
}

/* ---------- Trang Đội ngũ ---------- */
.teacher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.tcard {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.2vw, 28px);
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-premium);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tcard:hover, .tcard:focus-visible {
  transform: translateY(-5px);
  border-color: var(--blue-100);
  box-shadow: var(--shadow-premium-hover);
  outline: none;
}
.tcard__photo {
  width: clamp(120px, 10vw, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 0 0 4px var(--white), 0 0 0 7px rgba(201, 162, 74, .35);
}
.tcard:hover .tcard__photo { box-shadow: 0 0 0 4px var(--white), 0 0 0 7px var(--gold); }
.tcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.tcard h3 { font-size: 17.5px; font-weight: 800; color: var(--navy-900); margin-top: 12px; }
.tcard__role { color: var(--blue-600); font-size: 13.5px; font-weight: 700; margin-top: 4px; }
.tcard__brief { color: var(--text-500); font-size: 13.5px; line-height: 1.6; margin-top: 10px; flex: 1; }
.tcard .jcard__more { border-top: 0; padding-top: 0; margin-top: 14px; }

/* ===== Art gallery: poster giáo viên treo như tranh trong phòng trưng bày ===== */
.gallery-wall {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(22, 51, 158, .07), transparent 55%),
    linear-gradient(180deg, #FBFCFF 0%, #F2F6FF 100%);
  border-block: 1px solid var(--border);
}
.pcard {
  cursor: pointer;
  margin: 0;
  text-align: center;
  position: relative;
  padding-top: 34px; /* chỗ cho dây treo */
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.pcard:hover, .pcard:focus-visible { transform: translateY(-8px); outline: none; }
/* dây treo tranh */
.pcard::before, .pcard::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 1.5px;
  height: 34px;
  background: linear-gradient(180deg, rgba(13, 31, 138, .0), rgba(13, 31, 138, .35));
  z-index: 0;
}
.pcard::before { left: 32%; transform: rotate(14deg); transform-origin: bottom; }
.pcard::after { right: 32%; transform: rotate(-14deg); transform-origin: bottom; }
/* đinh treo */
.pcard .pcard__nail {
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #C9D6FF, var(--navy-800));
  box-shadow: 0 1px 3px rgba(13, 31, 138, .4);
  z-index: 1;
}
/* khung tranh: viền navy + lớp lót trắng (mat) */
.pcard__frame {
  position: relative;
  background: var(--white);
  padding: clamp(8px, 1vw, 14px);
  border: clamp(5px, .6vw, 8px) solid var(--navy-900);
  border-radius: 3px;
  box-shadow:
    0 16px 38px rgba(13, 31, 138, .18),
    inset 0 0 0 1px rgba(13, 31, 138, .12);
  transition: box-shadow .28s ease;
}
.pcard:hover .pcard__frame, .pcard:focus-visible .pcard__frame {
  box-shadow:
    0 26px 56px rgba(22, 51, 158, .28),
    inset 0 0 0 1px rgba(13, 31, 138, .12);
}
.pcard__frame img {
  width: 100%;
  display: block;
  aspect-ratio: 1051 / 1490;
  object-fit: cover;
}
/* ánh đèn rọi tranh */
.pcard__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, .22) 0%, transparent 34%);
}
/* nhãn tên kiểu bảo tàng */
.pcard__label {
  display: inline-grid;
  gap: 2px;
  margin-top: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue-600);
  border-radius: 8px;
  padding: 9px 20px 10px;
  box-shadow: 0 4px 14px rgba(13, 31, 138, .08);
}
.pcard__label strong { color: var(--navy-900); font-size: 15.5px; font-weight: 800; }
.pcard__label small { color: var(--blue-600); font-size: 12.5px; font-weight: 700; }
.pcard__label em { color: var(--text-500); font-size: 11.5px; font-style: normal; letter-spacing: .04em; }

/* Popup hồ sơ 2 cột: trái poster, phải thông tin */
.tmodal__split {
  display: grid;
  grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
  gap: clamp(18px, 2.5vw, 32px);
  align-items: start;
}
.tmodal__posterBtn {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(13, 31, 138, .16);
  position: sticky;
  top: 0;
}
.tmodal__posterBtn img { width: 100%; display: block; }
.tmodal__zoom {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(5, 13, 51, .7);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.tmodal__info .cmodal__section:first-of-type { margin-top: 16px; }

/* Lightbox ảnh gốc full */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(5, 13, 51, .88);
  display: grid;
  place-items: center;
  cursor: zoom-out;
  animation: sheetFade .2s ease;
  padding: 24px;
}
.lightbox img {
  max-width: min(96vw, 900px);
  max-height: 92svh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.lightbox__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .28); }
/* fix: thuộc tính hidden bị display:grid ghi đè → nút đóng không có tác dụng */
.lightbox[hidden] { display: none; }

/* Popup giáo viên trên mobile: giữ dạng chữ nhật 2 cột, không thành bottom sheet */
@media (max-width: 640px) {
  .cmodal--teacher .cmodal__panel {
    top: 50%;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100vw - 20px);
    max-height: 92svh;
    border-radius: 18px;
    animation: modalIn .3s cubic-bezier(.22, .61, .36, 1);
  }
  .cmodal--teacher .cmodal__body { padding: 16px 14px; }
  .cmodal--teacher .cmodal__foot { padding: 12px 14px; }
  .tmodal__split { grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); gap: 12px; }
  .tmodal__posterBtn { border-radius: 10px; }
  .tmodal__zoom { font-size: 10px; padding: 4px 9px; bottom: 6px; gap: 4px; }
  .tmodal__zoom svg { width: 11px; height: 11px; }
  .tmodal__info .cmodal__section:first-of-type { margin-top: 10px; }
  .cmodal--teacher .cmodal__body h3 { font-size: 16.5px; padding-right: 30px; }
  .cmodal--teacher .cmodal__section { margin-top: 12px; }
  .cmodal--teacher .cmodal__section h4 { font-size: 12.5px; margin-bottom: 6px; }
  .cmodal--teacher .cmodal__section ul { font-size: 12.5px; gap: 5px; padding-left: 16px; }
  .cmodal--teacher .course-card__tag { font-size: 10.5px; }
  .tmodal__role { font-size: 12.5px; }
}

/* ===== Trang Liên hệ: kênh liên hệ ===== */
/* Bento-style asymmetric grid: card Zalo (ccard--hot) làm hero tall span 2 dòng,
   2 card kia stack bên trái. DOM reading order được giữ nguyên (WCAG 1.3.2/2.4.3). */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: clamp(16px, 2vw, 28px);
}
@media (min-width: 900px) {
  .contact-cards {
    grid-template-columns: 1fr 1.35fr;
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: dense;
  }
  .contact-cards .ccard--hot {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-content: center;
    gap: 10px;
  }
  .contact-cards .ccard--hot .ccard__icon { width: 64px; height: 64px; }
  .contact-cards .ccard--hot .ccard__value { font-size: clamp(20px, 2vw, 26px); }
}
.ccard {
  display: grid;
  gap: 6px;
  justify-items: start;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.4vw, 32px);
  text-decoration: none;
  box-shadow: var(--shadow-premium);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ccard:hover {
  transform: translateY(-5px);
  border-color: var(--blue-100);
  box-shadow: var(--shadow-premium-hover);
}
.ccard__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--blue-50);
  color: var(--blue-600);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}
.ccard strong { color: var(--navy-900); font-size: 16.5px; font-weight: 800; }
.ccard__value { color: var(--blue-600); font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; }
.ccard small { color: var(--text-500); font-size: 13px; line-height: 1.5; }
.ccard--hot {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-500));
  border-color: transparent;
  box-shadow: var(--shadow-blue);
}
.ccard--hot .ccard__icon { background: rgba(255, 255, 255, .16); color: #fff; }
.ccard--hot strong, .ccard--hot .ccard__value { color: #fff; }
.ccard--hot small { color: rgba(255, 255, 255, .82); }
.ccard--hot:hover { box-shadow: 0 16px 40px rgba(22, 51, 158, .42); }

/* Khối cố vấn học thuật */
.advisor {
  display: grid;
  grid-template-columns: minmax(0, .38fr) minmax(0, .62fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: clamp(22px, 2.5vw, 32px);
  padding: clamp(24px, 3.5vw, 56px);
  box-shadow: var(--shadow-md);
}
.advisor__photo {
  aspect-ratio: 1;
  border-radius: clamp(18px, 2vw, 26px);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(13, 31, 138, .16);
}
.advisor__photo img { width: 100%; height: 100%; object-fit: cover; }
.advisor__eyebrow {
  color: var(--blue-600);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 10px;
}
.advisor__info h2 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  color: var(--navy-900);
  margin-bottom: 16px;
}
.advisor__info h2 span { font-family: "Noto Serif SC", serif; color: var(--blue-400); font-size: .75em; margin-left: 6px; }
.advisor__info ul { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 9px; color: var(--text-700); font-size: 14.5px; line-height: 1.65; }
.advisor__info li::marker { color: var(--blue-600); }
.advisor__quote {
  margin: 0 0 20px;
  border-left: 3px solid var(--blue-600);
  padding-left: 16px;
  font-style: italic;
  color: var(--text-500);
  font-size: 14.5px;
  line-height: 1.7;
}

/* Popup giáo viên (trong #cmodal) */
.tmodal__head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: 18px;
}
.tmodal__avatar {
  width: clamp(84px, 8vw, 110px);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px var(--white), 0 0 0 7px rgba(201, 162, 74, .35);
}
.tmodal__head h3 { margin: 8px 0 2px !important; padding-right: 0 !important; }
.tmodal__cn { font-family: "Noto Serif SC", serif; color: var(--blue-400); font-size: .8em; margin-left: 4px; }
.tmodal__role { color: var(--blue-600); font-weight: 700; font-size: 14px; }

@media (max-width: 768px) {
  .advisor { grid-template-columns: 1fr; }
  .advisor__photo { max-width: 320px; }
}

/* CTA banner cuối trang */
.cta-banner { background: var(--white); padding-block: clamp(24px, 4vw, 56px) clamp(48px, 6vw, 96px); }
.cta-banner__panel {
  background: linear-gradient(150deg, var(--navy-800) 0%, var(--brand) 45%, var(--navy-900) 100%);
  border-radius: clamp(22px, 2.5vw, 36px);
  padding: clamp(36px, 5vw, 72px);
  text-align: center;
}
.cta-banner__panel h2 {
  color: #fff;
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
  max-width: 24ch;
  margin: 0 auto 14px;
}
.cta-banner__panel p { color: rgba(255, 255, 255, .85); font-size: clamp(14.5px, 1.2vw, 17.5px); }
.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

/* ---------- Footer (tone sáng đồng bộ tổng thể) ---------- */
.site-footer {
  background: var(--sky-bg);
  border-top: 1px solid var(--border);
  color: var(--text-700);
  font-size: 15px;
  position: relative;
}
/* dải sáng gradient chảy nhẹ ở mép trên footer */
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-600), #7FA8FF, var(--brand), var(--blue-600));
  background-size: 240% 100%;
  animation: footerFlow 9s linear infinite;
}
@keyframes footerFlow { to { background-position: -240% 0; } }
.site-footer__cta { margin-top: 20px; }
.site-footer ul a { transition: color .15s ease, padding-left .2s ease; }
.site-footer ul a:hover { padding-left: 6px; }
.site-footer__slogan span[lang="zh"] { font-family: "Noto Serif SC", serif; color: var(--blue-600); }
.site-footer__main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 64px);
  padding-block: clamp(48px, 6vw, 80px);
}
.site-footer__brand img { width: 200px; margin-bottom: 18px; }
.site-footer__brand p { max-width: 36ch; line-height: 1.7; color: var(--text-500); }
.site-footer h4 {
  color: var(--navy-900);
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 18px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.site-footer a:hover { color: var(--blue-600); }
.site-footer__contact li { display: flex; gap: 10px; align-items: flex-start; color: var(--brand); }
.site-footer__bottom {
  border-top: 1px solid var(--border);
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-500);
}

/* ---------- Zalo floating button ---------- */
.zalo-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 58px; height: 58px;
  border-radius: 50%;
  background:
    linear-gradient(160deg, rgba(255,255,255,.3), rgba(255,255,255,0) 45%),
    linear-gradient(135deg, var(--gold-500) 0%, var(--gold) 40%, var(--gold-700) 100%);
  color: var(--navy-950);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 246, 214, .55);
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 250, 230, .5);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
  overflow: hidden;
  isolation: isolate;
}
.zalo-float::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 252, 240, .55) 48%, transparent 64%);
  transform: translateX(-130%);
  animation: goldSheen 4.5s ease-in-out infinite;
}
.zalo-float:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 18px rgba(138, 102, 36, .3), 0 18px 40px rgba(169, 129, 47, .36), inset 0 1px 0 rgba(255, 250, 230, .55);
}
.zalo-float::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 162, 74, .5);
  animation: pulse 2.6s cubic-bezier(.22, .61, .36, 1) infinite;
}
@keyframes goldSheen {
  0%, 55% { transform: translateX(-130%); }
  75%, 100% { transform: translateX(130%); }
}
@keyframes pulse {
  0% { transform: scale(.9); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
/* Desktop: header đã có nút Zalo → ẩn nút nổi để không che CTA nội dung */
@media (min-width: 992px) {
  .zalo-float { display: none; }
}

/* ============================================================
   Motion — animation toàn site (mượt, premium, tôn trọng
   prefers-reduced-motion)
   ============================================================ */
html { scroll-behavior: smooth; }

/* --- Reveal khi cuộn tới (JS gắn class .rv / .in-view) --- */
.rv { opacity: 0; }
.rv.in-view {
  opacity: 1;
  animation: rvUp .75s cubic-bezier(.22, .61, .36, 1) backwards;
  animation-delay: var(--rvd, 0s);
}
.rv--zoom.in-view {
  animation-name: rvZoom;
  animation-duration: .9s;
}
@keyframes rvUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rvZoom {
  from { opacity: 0; transform: translateY(22px) scale(.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Hero trang chủ: vào trang theo nhịp so le --- */
.hero__welcome { animation: rvUp .7s cubic-bezier(.22, .61, .36, 1) .05s backwards; }
.hero__title   { animation: rvUp .7s cubic-bezier(.22, .61, .36, 1) .16s backwards; }
.hero__cn      { animation: rvUp .7s cubic-bezier(.22, .61, .36, 1) .27s backwards; }
.hero__tagline { animation: rvUp .7s cubic-bezier(.22, .61, .36, 1) .38s backwards; }
.hero__ctas    { animation: rvUp .7s cubic-bezier(.22, .61, .36, 1) .5s backwards; }
.hero__photo   { animation: heroPhoto 1s cubic-bezier(.22, .61, .36, 1) .3s backwards; }
@keyframes heroPhoto {
  from { opacity: 0; transform: translateX(36px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* --- Page hero các trang con: tiêu đề vào theo nhịp + blob trôi --- */
.page-hero { position: relative; overflow: hidden; }
.page-hero__crumb { animation: rvUp .6s cubic-bezier(.22, .61, .36, 1) backwards; }
.page-hero h1 { animation: rvUp .7s cubic-bezier(.22, .61, .36, 1) .1s backwards; }
.page-hero p:not(.page-hero__crumb) { animation: rvUp .7s cubic-bezier(.22, .61, .36, 1) .22s backwards; }
.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.page-hero::after {
  right: -90px; top: -70px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(22, 51, 158, .15), transparent 65%);
  animation: blobFloat 10s ease-in-out infinite alternate;
}
.page-hero::before {
  left: 8%; bottom: -140px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(127, 168, 255, .14), transparent 65%);
  animation: blobFloat 12s ease-in-out infinite alternate-reverse;
}
@keyframes blobFloat {
  to { transform: translate(-46px, 34px) scale(1.18); }
}

/* --- Nút: vệt sáng quét qua khi hover --- */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 42%;
  left: -70%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  pointer-events: none;
}
.btn:hover::before { animation: btnShine .75s ease; }
@keyframes btnShine { to { left: 140%; } }

/* --- Chip/tag & icon nhún nhẹ khi hover card --- */
.course-item:hover .course-card__tag,
.ccard:hover .ccard__icon { animation: chipPop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes chipPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* --- Header: đổ bóng mềm xuất hiện dần khi cuộn (đã có .is-scrolled) --- */
.site-header { transition: box-shadow .35s ease, background-color .35s ease; }

/* --- Avatar vòng xoay: viền glow thở nhẹ ở người đang chọn --- */
.orbit-item.is-active { animation: orbitGlow 3.2s ease-in-out infinite; }
@keyframes orbitGlow {
  0%, 100% { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--blue-600), 0 18px 44px rgba(22, 51, 158, .4); }
  50% { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--blue-600), 0 18px 60px rgba(22, 51, 158, .62); }
}

/* ============================================================
   Spotlight hover — vệt sáng radial theo con trỏ trên card (kiểu Stripe/Linear)
   ============================================================ */
.course-card, .feature-card, .jcard, .ccard, .ref-card { position: relative; }
.course-card::after, .feature-card::after, .jcard::after, .ccard::after, .ref-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(22, 51, 158, .08), transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 0;
}
.course-card:hover::after,
.feature-card:hover::after,
.jcard:hover::after,
.ccard:hover::after,
.ref-card:hover::after { opacity: 1; }
/* Nội dung card nằm trên lớp spotlight */
.course-card > *, .feature-card > *, .jcard > *, .ccard > *, .ref-card > * {
  position: relative;
  z-index: 1;
}

/* --- Giảm chuyển động theo cài đặt hệ điều hành --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .site-nav { display: none; }
  .site-nav.is-open {
    display: flex;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    padding: 8px var(--pad-x) 16px;
  }
  .site-nav.is-open a { padding: 14px 4px; border-bottom: 1px solid var(--sky-bg); font-size: 16px; }
  .site-nav.is-open a::after { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__actions .btn--outline { display: none; }
}

@media (max-width: 992px) {
  .hero__grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero__panel--content { min-height: 0; padding-block: clamp(40px, 8vw, 72px) clamp(56px, 10vw, 88px); }
  .hero__panel--visual { min-height: min(110vw, 620px); }
  .site-footer__main { grid-template-columns: 1fr 1fr; }
  .features__body { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .course-card { flex-basis: calc((100% - 32px) / 3); padding: 14px 12px; } /* 3 khóa / trang mobile */
  .course-card h3 { font-size: 14px; }
  .course-card p { font-size: 11.5px; }
  .course-card__meta { font-size: 10.5px; }
  .course-card__crown { font-size: 11px; padding: 5px 12px; top: -32px; }
  .course-slider__viewport { padding-top: 36px; }
  .course-slider__arrow { width: 36px; height: 36px; }
  /* Picker kiểu dropdown + bottom sheet trên mobile */
  .pickers { grid-template-columns: 1fr; gap: 14px; }
  .picker {
    background: linear-gradient(170deg, var(--navy-800), var(--brand));
    border-radius: 18px;
    padding: 18px 16px;
  }
  .picker h3 { color: #fff; margin-bottom: 12px; }
  .picker__list { display: none; }
  .picker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    appearance: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-900);
    background: var(--white);
    border: 0;
    border-radius: 999px;
    padding: 14px 20px;
    cursor: pointer;
  }
  .picker__trigger .picker__value { color: var(--text-500); }
  .picker__trigger.has-value .picker__value { color: var(--text-900); }
  .teachers__head { grid-template-columns: 1fr; }
  .testimonials__panel { grid-template-columns: 1fr; }
  .contact-cta__panel { grid-template-columns: 1fr; }
  .contact-cta__mascot, .contact-cta__logo { display: none; }
  .faq__grid { grid-template-columns: 1fr; }
  .philo__cards, .vision-grid, .refs__grid { grid-template-columns: 1fr; }
  .refs__intro { position: static; }
  .testimonials__wall { height: min(540px, 68vh); }
  .testimonials__skyline { width: min(420px, 80%); opacity: .14; }
}

@media (max-width: 560px) {
  /* Cảm nhận: chạy ngang 1 hàng trên mobile */
  .testimonials__wall {
    display: block;
    height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .testi-col:nth-child(2) { display: none; }
  .testi-col__inner {
    display: flex;
    width: max-content;
    gap: 14px;
    animation-name: testiScrollX;
  }
  .testi-card { width: min(76vw, 320px); flex: 0 0 auto; }
}
@keyframes testiScrollX {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 7px)); }
}

@media (max-width: 768px) {
  /* Ẩn ảnh hero trên mobile (giống Prep) */
  .hero__panel--visual { display: none; }

  /* FAQ mobile: heading → danh sách → nút đặt câu hỏi (giống Prep) */
  .faq__grid { display: flex; flex-direction: column; gap: 22px; }
  .faq__intro { display: contents; }
  .faq__intro h2 { order: -1; margin-bottom: 0; }
  .faq__list { order: 0; gap: 14px; }
  .faq__dock { order: 10; }
  .faq__intro .btn--tint {
    width: 100%;
    justify-content: center;
    padding-block: 16px;
  }
}

@media (max-width: 640px) {
  /* stats giữ 3 cột ngang trên mobile, card tự co lại */
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { justify-content: center; }
  .site-footer__main { grid-template-columns: 1fr; }
  .zalo-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .contact-form__row { grid-template-columns: 1fr; }
  .contact-form__actions { justify-content: stretch; }
  .contact-form__actions .btn { width: 100%; justify-content: center; }
}


/* ---------- Header mobile: logo giữ tỉ lệ, CTA gọn ---------- */
@media (max-width: 640px) {
  .site-header__inner { gap: 10px; }
  .site-header__actions { gap: 8px; }
  .site-header__logo img { height: 36px; }
  .site-header__actions .btn--zalo.btn--sm { padding: 9px 16px; font-size: 14px; }
  .site-header__actions .btn--zalo svg { width: 16px; height: 16px; }
  .site-header__actions .btn__label--full { display: none; }
  .site-header__actions .btn__label--short { display: inline; }
}
@media (max-width: 380px) {
  .site-header__logo img { height: 32px; }
}

/* ===== Blog: bài viết mới trên trang chủ ===== */
.blog__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(28px, 3vw, 40px);
}
.blog__eyebrow {
  font-weight: 700;
  color: var(--navy-900);
  font-size: clamp(14px, 1.2vw, 17px);
  margin-bottom: 10px;
}
.blog__title {
  font-size: clamp(28px, 3.4vw, 50px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy-900);
  line-height: 1.2;
}
.blog__desc {
  color: var(--text-700);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.7;
}
.blog__more { text-align: center; margin-top: 32px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding: 48px 0 64px; }
.blog-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.14); }
.blog-card__cover { width: 100%; height: 180px; object-fit: cover; }
.blog-card__body { padding: 20px; }
.blog-card__cat { color: var(--color-accent, #c96f0a); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.blog-card__title { font-size: 1.15rem; font-weight: 700; margin: 8px 0; line-height: 1.4; }
.blog-card__title a { color: inherit; text-decoration: none; }
.blog-card__title a:hover { color: var(--color-primary, #1d4ed8); }
.blog-card__excerpt { color: #555; font-size: .92rem; line-height: 1.6; }
.blog-card__date { color: #999; font-size: .8rem; margin-top: 12px; }