/* ==========================================================================
   Scholish — Editorial Warm Clean, cấu trúc section theo Magoosh
   Luật gốc: 04_Resources/Design System — Marketing/Nam-Anh-Marketing-Design-System.md
   - Nền trang #F3EDE9, chữ mực #1B1624 (không bao giờ #000 cho text)
   - Đúng 1 crisp shadow 6px 6px 0 #000 mỗi trang (thẻ anchor)
   - CTA mint pill, text mực, KHÔNG shadow
   - Card 16px hairline; anchor 20px; active state đen đặc
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family: 'SVN-Recoleta'; src: url('../fonts/SVN-Recoleta SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'SVN-Recoleta'; src: url('../fonts/SVN-Recoleta Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/SVN-Gilroy Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/SVN-Gilroy Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/SVN-Gilroy Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/SVN-Gilroy SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'SVN-Gilroy'; src: url('../fonts/SVN-Gilroy Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --mint: #79D287;        --mint-soft: #B3E8BB;   --mint-hover: #6BC77A;
  --coral: #FD976D;       --coral-soft: #FDC7B1;
  --yellow: #FDD46B;      --yellow-soft: #FEE7A8;
  --sky: #5DCDF1;         --sky-soft: #BFE7F7;
  --lavender: #C9B1FB;    --lavender-soft: #E3D6FD;

  --bg-1: #FFFFFF; --bg-2: #F9F6F3; --bg-3: #F3EDE9; --bg-4: #ECE5E1;
  --fg-1: #1B1624; --fg-2: #54505B; --fg-3: #76737C; --fg-4: #8D8A91;

  --positive: #00D084; --destructive: #CF2E2E; --warning: #FF6900; --info: #0693E3;

  --hairline: rgba(27, 22, 36, 0.10);
  --rowline: rgba(27, 22, 36, 0.06);
  --rowhover: rgba(27, 22, 36, 0.03);
  --label: rgba(27, 22, 36, 0.45);

  --font-heading: 'SVN-Recoleta', Georgia, serif;
  --font-body: 'SVN-Gilroy', Arial, sans-serif;

  --fs-hero: clamp(2.75rem, 2.75rem + ((1vw - 0.2rem) * 3.4), 4.75rem);
  --fs-section: clamp(2rem, 2rem + ((1vw - 0.2rem) * 3.636), 4rem);
  --fs-sub: clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 2.045), 2.625rem);
  --fs-intro: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.455), 1.375rem);
  --fs-body: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.227), 1.125rem);

  --sp-section: clamp(2rem, 7.5vw, 6rem);
  --sp-hero: clamp(2rem, 7vw, 6.5rem);
  --sp-lg: clamp(1.25rem, 4vw, 3rem);
  --sp-md: clamp(1rem, 2.5vw, 2rem);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-1);
  background: var(--bg-3);
  font-feature-settings: "kern" on, "liga" on;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, .heading { font-family: var(--font-heading); font-weight: 600; line-height: 1.15; }

.container { max-width: 1200px; margin-inline: auto; padding-inline: var(--sp-lg); }
.container--narrow { max-width: 700px; margin-inline: auto; padding-inline: var(--sp-lg); }

.num { font-variant-numeric: tabular-nums; }

.microcaps {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--label);
}

/* Underline coral — chữ ký, 1–2 keyword/heading chính */
.u-coral {
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 4px;
  text-underline-offset: 7px;
  text-decoration-skip-ink: none;
}

/* Highlight vàng kiểu bút dạ — vai trò spotlight của Yellow */
.hl-yellow {
  background: linear-gradient(transparent 55%, var(--yellow-soft) 55%, var(--yellow-soft) 92%, transparent 92%);
  padding-inline: 2px;
}

.link-sky {
  color: var(--fg-1); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--sky);
  padding-bottom: 1px;
  transition: border-color 0.15s ease;
}
.link-sky:hover { border-bottom-color: var(--fg-1); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 9999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  background: var(--lavender); color: var(--fg-1);
}
.badge--soft { background: var(--lavender-soft); }
.badge--yellow { background: var(--yellow); }
.badge--mint-soft { background: var(--mint-soft); }
.badge--coral-soft { background: var(--coral-soft); }
.badge--sky-soft { background: var(--sky-soft); }

/* ---------- Buttons (Marketing: KHÔNG shadow) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 32px; border-radius: 9999px;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.25;
  text-decoration: none; border: 2px solid var(--fg-1);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.btn--primary { background: var(--mint); color: var(--fg-1); }
.btn--primary:hover { background: var(--mint-hover); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(1px); }
.btn--secondary { background: transparent; color: var(--fg-1); border-width: 1.5px; }
.btn--secondary:hover { background: var(--fg-1); color: #FFFFFF; }
.btn--dark { background: var(--fg-1); color: #FFFFFF; border-color: var(--fg-1); }
.btn--dark:hover { background: #2A2433; }
.btn--sm { padding: 10px 22px; font-size: 15px; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-1);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
a.card { text-decoration: none; display: block; }
.card:hover { transform: translateY(-2px); border-color: rgba(27, 22, 36, 0.25); }

/* Anchor card — thẻ DUY NHẤT có shadow trên trang */
.card--anchor {
  background: var(--bg-1);
  border: 2px solid var(--fg-1);
  border-radius: 20px;
  box-shadow: 6px 6px 0 #000;
}
.card--anchor:hover { transform: none; border-color: var(--fg-1); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243, 237, 233, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bg-4);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; gap: 24px;
}
.nav__logo {
  font-family: var(--font-heading); font-weight: 700; font-size: 24px;
  text-decoration: none; color: var(--fg-1);
  display: inline-flex; flex-direction: column; line-height: 1;
}
.nav__logo .squiggle { margin-top: 4px; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a:not(.btn) {
  font-size: 16px; font-weight: 500; text-decoration: none; color: var(--fg-1);
  padding-bottom: 2px; border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.nav__links a:not(.btn):hover { border-bottom-color: var(--coral); }
.nav__links a.is-active { border-bottom-color: var(--coral); }
.nav__toggle {
  display: none; background: none; border: none; width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--fg-1); transition: transform 0.2s ease, opacity 0.2s ease; }

/* ---------- Hero (homepage — centered kiểu Magoosh) ---------- */
.hero-center { padding-block: var(--sp-hero) clamp(2rem, 5vw, 4rem); text-align: center; }
.hero-center__inner { max-width: 860px; margin-inline: auto; }
.hero-center h1 { font-size: var(--fs-hero); font-weight: 700; margin-block: 20px 18px; }
.hero-center .hero__intro {
  font-size: var(--fs-intro); color: var(--fg-2);
  max-width: 640px; margin-inline: auto; margin-bottom: 40px;
}

/* Exam picker — kiểu Magoosh */
.exam-picker {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 920px; margin-inline: auto; text-align: left;
}
.exam-pick { padding: 22px 24px; display: flex; align-items: center; gap: 16px; }
.exam-pick__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.exam-pick__dot--mint { background: var(--mint); }
.exam-pick__dot--sky { background: var(--sky); }
.exam-pick__dot--coral { background: var(--coral); }
.exam-pick strong { font-family: var(--font-heading); font-weight: 600; font-size: 21px; display: block; }
.exam-pick span.desc { font-size: 13.5px; color: var(--fg-3); display: block; margin-top: 2px; }
.exam-pick .arrow { margin-left: auto; color: var(--fg-3); font-size: 18px; transition: transform 0.15s ease; }
.exam-pick:hover .arrow { transform: translateX(3px); color: var(--fg-1); }

/* Rating strip — kiểu Magoosh */
.rating-strip {
  border-top: 1px solid var(--rowline); border-bottom: 1px solid var(--rowline);
  padding-block: 18px; text-align: center;
  font-size: 15px; color: var(--fg-2);
}
.rating-strip strong { font-weight: 700; color: var(--fg-1); }
.rating-strip .stars { color: var(--coral); letter-spacing: 2px; margin-right: 6px; }

/* Mission statement — centered, highlight vàng */
.mission-block { text-align: center; max-width: 780px; margin-inline: auto; }
.mission-block .microcaps { display: inline-flex; align-items: center; gap: 8px; }
.mission-block h2 {
  font-size: var(--fs-sub); line-height: 1.3; margin-top: 18px; font-weight: 600;
}

/* Stat cards — kiểu Magoosh */
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 980px; margin: clamp(2rem, 5vw, 3.5rem) auto 0; }
.stat-card { padding: 26px 28px; text-align: left; }
.stat-card .microcaps { display: block; margin-bottom: 10px; }
.stat-card .stat__value {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 2.875rem); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-card .stat__note { font-size: 13.5px; color: var(--fg-3); margin-top: 6px; }

/* ---------- Sections ---------- */
.section { padding-block: var(--sp-section); }
.section--white { background: var(--bg-1); }
.section--ivory { background: var(--bg-2); }
.section--dark { background: var(--fg-1); color: var(--bg-1); }
.section__head { max-width: 700px; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head h2 { font-size: var(--fs-section); margin-top: 14px; }
.section__head p { color: var(--fg-2); margin-top: 16px; font-size: var(--fs-intro); }
.section--dark .section__head p { color: #D4D2D8; }

/* ---------- Wall of love ---------- */
.wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wall .quote { padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.quote blockquote { font-size: 16px; color: var(--fg-1); line-height: 1.6; }
.quote blockquote b { font-weight: 600; background: linear-gradient(transparent 60%, var(--mint-soft) 60%, var(--mint-soft) 94%, transparent 94%); }
.quote__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote__avatar {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--fg-1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 16px; flex-shrink: 0;
}
.quote__avatar--lavender { background: var(--lavender-soft); }
.quote__avatar--mint { background: var(--mint-soft); }
.quote__avatar--yellow { background: var(--yellow-soft); }
.quote__avatar--sky { background: var(--sky-soft); }
.quote__avatar--coral { background: var(--coral-soft); }
.quote__name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.quote__result { font-size: 13px; color: var(--fg-3); }

/* ---------- High achievers: boarding pass "tấm vé đi du học" ---------- */
.pct-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--yellow); color: var(--fg-1);
  border: 1.5px solid var(--fg-1); border-radius: 9999px;
  padding: 6px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.passes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pass { display: grid; grid-template-columns: 1fr 128px; background: var(--bg-1); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; position: relative; }
.pass__main { padding: 22px 26px 24px; border-left: 6px solid var(--mint); }
.pass--sky .pass__main { border-left-color: var(--sky); }
.pass--coral .pass__main { border-left-color: var(--coral); }
.pass--yellow .pass__main { border-left-color: var(--yellow); }
.pass--lavender .pass__main { border-left-color: var(--lavender); }
.pass__route { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.pass__route svg { width: 30px; height: 10px; flex-shrink: 0; }
.pass__fields { display: flex; gap: clamp(1.25rem, 4vw, 2.75rem); margin-top: 14px; }
.pass__fields .microcaps { display: block; margin-bottom: 3px; }
.pass__fields strong { font-family: var(--font-heading); font-weight: 700; font-size: 21px; line-height: 1.2; }
.pass__scoreline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.pass__score { font-family: var(--font-heading); font-weight: 700; font-size: 54px; line-height: 1; font-variant-numeric: tabular-nums; }
.pass__note { font-size: 13.5px; color: var(--fg-2); max-width: 340px; margin-top: 12px; }
.pass__stub {
  border-left: 2px dashed var(--bg-4); padding: 18px 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg-2); text-align: center;
}
.pass__stub .pctl { font-family: var(--font-heading); font-weight: 700; font-size: 25px; font-variant-numeric: tabular-nums; line-height: 1; }
.pass__stub .microcaps { font-size: 9.5px; }
.pass__barcode { display: flex; gap: 2px; align-items: flex-end; height: 26px; }
.pass__barcode i { display: block; width: 2px; background: var(--fg-1); }
.pass::before, .pass::after {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  right: 128px; transform: translateX(50%);
  background: var(--bg-2); border: 1px solid var(--hairline);
}
.section--white .pass::before, .section--white .pass::after { background: var(--bg-1); }
.section--ivory .pass::before, .section--ivory .pass::after { background: var(--bg-2); }
.pass::before { top: -10px; }
.pass::after { bottom: -10px; }
@media (max-width: 900px) { .passes { grid-template-columns: 1fr; } }

/* Avatar ảnh thật trong quote */
.quote__avatar { overflow: hidden; }
.quote__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ---------- Marquee reviews (cuộn ngang, pause khi hover) ---------- */
.marquee-wrap { display: grid; gap: 20px; }
.marquee {
  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);
}
.marquee__track { display: flex; gap: 20px; width: max-content; padding-block: 4px; }
.marquee.is-ready .marquee__track { animation: marquee-scroll 210s linear infinite; }
.marquee--reverse.is-ready .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }

.mq-card { width: 390px; flex-shrink: 0; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.mq-card blockquote { font-size: 14.5px; line-height: 1.55; color: var(--fg-1); }
.mq-card .quote__who { margin-top: auto; }
.mq-card .quote__avatar { width: 40px; height: 40px; font-size: 15px; }
.mq-card .stars-sm { color: var(--coral); font-size: 12px; letter-spacing: 2px; }

/* Không JS hoặc reduced-motion: thành dải cuộn tay được */
.marquee:not(.is-ready) { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
@media (prefers-reduced-motion: reduce) {
  .marquee.is-ready .marquee__track { animation: none; }
  .marquee.is-ready { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 767px) { .mq-card { width: 300px; } }

/* ---------- Features (trio & grid 6) ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { padding: 28px; }
.feature svg { width: 48px; height: 48px; overflow: visible; margin-bottom: 18px; }
.feature h3 { font-size: 21px; line-height: 1.3; margin-bottom: 8px; }
.feature p { color: var(--fg-2); font-size: 15.5px; }

/* ---------- Compare (Scholish vs trung tâm thường) ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin-inline: auto; }
.compare__col { padding: 32px; border-radius: 16px; }
.compare__col--us { background: var(--bg-1); border: 2px solid var(--fg-1); }
.compare__col--them { background: var(--bg-1); border: 1px solid var(--hairline); }
.compare__col h3 { font-size: 22px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.compare__col ul { display: grid; gap: 14px; }
.compare__col li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.55; }
.compare__col--them li { color: var(--fg-3); }
.compare__icon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.compare__icon--yes { background: var(--mint-soft); border: 1.5px solid var(--fg-1); }
.compare__icon--no { background: var(--bg-4); border: 1.5px solid var(--fg-4); color: var(--fg-3); }

/* ---------- Quiz widget (anchor card trên trang khóa học) ---------- */
.quiz { padding: 28px; }
.quiz .microcaps { display: flex; justify-content: space-between; align-items: center; }
.quiz__q { font-size: 16.5px; font-weight: 500; line-height: 1.55; margin-block: 14px 18px; }
.quiz__opts { display: grid; gap: 10px; }
.quiz__opt {
  width: 100%; text-align: left; background: var(--bg-2);
  border: 1.5px solid var(--hairline); border-radius: 10px;
  padding: 12px 16px; font-size: 15.5px; font-weight: 500; color: var(--fg-1);
  transition: border-color 0.15s ease, background 0.15s ease;
  font-variant-numeric: tabular-nums;
}
.quiz__opt:hover { border-color: var(--fg-1); }
.quiz__opt.is-correct { background: var(--mint-soft); border-color: var(--fg-1); }
.quiz__opt.is-wrong { background: var(--coral-soft); border-color: var(--fg-1); }
.quiz__opt:disabled { cursor: default; }
.quiz__result { display: none; margin-top: 16px; font-size: 14.5px; color: var(--fg-2); line-height: 1.55; border-top: 1px solid var(--rowline); padding-top: 14px; }
.quiz__result.is-open { display: block; }
.quiz__result strong { color: var(--fg-1); }

/* ---------- Course hero ---------- */
.course-hero { padding-block: var(--sp-hero) var(--sp-section); }
.course-hero__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.course-hero h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); font-weight: 700; margin-block: 18px 20px; }
.course-hero .hero__intro { font-size: var(--fs-intro); color: var(--fg-2); margin-bottom: 32px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero__note { font-size: 14px; color: var(--fg-3); margin-top: 14px; }

/* ---------- Class info panel (không shadow) ---------- */
.class-panel { padding: 30px; }
.class-panel .row {
  display: flex; justify-content: space-between; gap: 12px;
  padding-block: 12px; border-bottom: 1px solid var(--rowline);
  font-size: 15px;
}
.class-panel .row:last-of-type { border-bottom: none; }
.class-panel .row strong { font-variant-numeric: tabular-nums; text-align: right; }
.class-panel .btn { width: 100%; margin-top: 18px; }

/* ---------- Syllabus ---------- */
.syllabus { max-width: 760px; }
.syllabus__row {
  display: flex; gap: 18px; align-items: baseline;
  padding: 15px 6px; border-bottom: 1px solid var(--rowline); font-size: 16px;
}
.syllabus__row:hover { background: var(--rowhover); }
.syllabus__row .microcaps { flex-shrink: 0; width: 84px; }
.syllabus__row strong { font-weight: 600; }
.syllabus__row span.desc { color: var(--fg-3); font-size: 14px; margin-left: auto; text-align: right; flex-shrink: 0; }

/* ---------- Benefit list ---------- */
.benefit-list { display: grid; gap: 16px; max-width: 760px; }
.benefit { display: flex; gap: 14px; align-items: flex-start; padding: 20px 24px; }
.benefit__check {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--mint-soft); border: 1.5px solid var(--fg-1);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; margin-top: 2px;
}
.benefit h3 { font-family: var(--font-body); font-size: 17px; font-weight: 700; line-height: 1.4; margin-bottom: 4px; }
.benefit p { color: var(--fg-2); font-size: 15px; }

/* ---------- Guarantee band (dark) ---------- */
.guarantee { text-align: center; max-width: 720px; margin-inline: auto; }
.guarantee h2 { font-size: var(--fs-section); color: var(--bg-1); }
.guarantee p { color: #D4D2D8; margin-block: 18px 30px; font-size: var(--fs-intro); }
.guarantee .btn--light { background: var(--bg-1); color: var(--fg-1); border-color: var(--bg-1); }
.guarantee .btn--light:hover { background: var(--bg-2); }
.section--dark .num-highlight {
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-section);
  color: var(--mint); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.dark-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; justify-content: center; }

/* ---------- FAQ ---------- */
.faq { max-width: 700px; margin-inline: auto; }
.faq__item { border-bottom: 1.5px solid var(--bg-4); }
.faq__q {
  width: 100%; background: none; border: none; text-align: left;
  font-family: var(--font-heading); font-weight: 600; font-size: 19px; line-height: 1.4;
  color: var(--fg-1); padding: 22px 44px 22px 0; position: relative;
}
.faq__q::after {
  content: '+'; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body); font-weight: 400; font-size: 26px;
  transition: transform 0.2s ease;
}
.faq__item.is-open .faq__q::after { transform: translateY(-50%) rotate(45deg); }
.faq__a { display: none; padding-bottom: 22px; color: var(--fg-2); font-size: 16px; max-width: 620px; }
.faq__item.is-open .faq__a { display: block; }

/* ---------- Contact / footer ---------- */
.contact-panel { text-align: center; max-width: 560px; margin-inline: auto; }
.contact-panel h2 { font-size: var(--fs-section); }
.contact-panel p { color: var(--fg-2); margin-block: 18px 30px; font-size: var(--fs-intro); }
.contact-panel .hero__ctas { justify-content: center; }

.footer { background: var(--bg-2); border-top: 1px solid var(--bg-4); padding-block: 48px 32px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer__brand p { color: var(--fg-2); font-size: 15px; margin-top: 12px; max-width: 320px; }
.footer h4 { font-family: var(--font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--label); margin-bottom: 14px; }
.footer ul { display: grid; gap: 10px; }
.footer ul a { text-decoration: none; color: var(--fg-2); font-size: 15px; }
.footer ul a:hover { color: var(--fg-1); }
.footer__bottom { border-top: 1px solid var(--rowline); padding-top: 20px; font-size: 13px; color: var(--fg-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ---------- Entry animation ---------- */
.reveal { opacity: 0; transform: translateY(13px); transition: opacity 0.45s ease, transform 0.45s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Decor & micro-motion (§5: micro-decor có chủ đích — nhẹ, chậm, không nhiễu)
   ========================================================================== */

/* Nền giấy kẻ ô (graph paper) cho hero — gợi vở học tập */
.paper-bg { position: relative; }
.paper-bg::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(27, 22, 36, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 22, 36, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 85% at 50% 40%, #000 30%, transparent 78%);
}
.paper-bg > .container { position: relative; }

/* Doodle bay nhẹ */
.pos-rel { position: relative; overflow: hidden; }
.decor { position: absolute; inset: 0; pointer-events: none; }
.doodle {
  position: absolute; pointer-events: none;
  animation: floaty var(--dur, 8s) ease-in-out var(--delay, 0s) infinite;
  transform: rotate(var(--r, 0deg));
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-9px) rotate(calc(var(--r, 0deg) + 2deg)); }
}

/* Illustration Notioly (§10c) */
.notioly { pointer-events: none; user-select: none; }
.notioly--hero { position: absolute; top: 40%; width: clamp(120px, 13vw, 200px); opacity: 0.95; }
.notioly--hero.is-left { left: clamp(6px, 2vw, 44px); }
.notioly--hero.is-right { right: clamp(6px, 2vw, 44px); }
.notioly--inline { width: 150px; margin: 0 auto 14px; }

/* Squiggle logo tự vẽ khi tải trang */
.nav__logo .squiggle path {
  stroke-dasharray: 130; stroke-dashoffset: 130;
  animation: draw-squiggle 0.9s ease-out 0.25s forwards;
}
@keyframes draw-squiggle { to { stroke-dashoffset: 0; } }

/* Icon nghiêng nhẹ khi hover card */
.feature svg, .usp svg { transition: transform 0.2s ease; }
.feature:hover svg, .usp:hover svg { transform: rotate(-4deg) scale(1.06); }
.exam-pick__dot { transition: transform 0.2s ease; }
.exam-pick:hover .exam-pick__dot { transform: scale(1.35); }

/* Quiz: lắc khi sai, nảy khi đúng */
.quiz.anim-wrong { animation: quiz-shake 0.4s ease; }
.quiz.anim-right { animation: quiz-pop 0.35s ease; }
@keyframes quiz-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); }
}
@keyframes quiz-pop {
  0%, 100% { transform: scale(1); } 45% { transform: scale(1.02); }
}

/* Stars của rating strip hiện dần */
.rating-strip .stars { display: inline-block; }

@media (max-width: 1000px) { .notioly--hero { display: none; } }
@media (max-width: 900px) { .doodle { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .btn { transition: none; }
  .doodle { animation: none; }
  .nav__logo .squiggle path { animation: none; stroke-dashoffset: 0; }
  .quiz.anim-wrong, .quiz.anim-right { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .wall, .feature-grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .exam-picker { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 767px) {
  .nav__links {
    position: absolute; top: 76px; left: 0; right: 0;
    background: var(--bg-3); border-bottom: 1px solid var(--bg-4);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px 24px 20px; display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a:not(.btn) { padding: 12px 0; width: 100%; }
  .nav__links .btn { margin-top: 12px; }
  .nav__toggle { display: flex; }
  .nav.menu-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .wall, .feature-grid, .stat-cards, .compare { grid-template-columns: 1fr; }
  .course-hero__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .card--anchor { box-shadow: 4px 4px 0 #000; }
}