/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * genre: editorial · macrostructure: Swiss Academic Ledger · theme: NAVI Premium White R2
 */

:root {
  /* 1. Locked Brand & Editorial Surface Tokens (R3.2 Color Hierarchy: #142A4A · #C83E0B · #FFF4EC · #F3F7FC · #FFFFFF) */
  --navi-orange: #F05C22;
  --navi-orange-hover: #FF6B35;
  --navi-orange-ink: #B83B0A;
  --navi-orange-soft: #FFF4EC;
  --navi-orange-border: rgba(200, 62, 11, 0.24);
  --navi-orange-ring: rgba(200, 62, 11, 0.22);

  /* High-Contrast Orange CTA Tokens (White #FFFFFF text >= 4.5:1 WCAG AA: 5.06:1 default, 6.02:1 hover/focus, 7.29:1 active) */
  --navi-cta-bg: #C83E0B;
  --navi-cta-bg-hover: #B23508;
  --navi-cta-bg-active: #9A2D06;
  --navi-cta-text: #FFFFFF;

  --navi-navy: #142A4A;
  --navi-navy-mid: #1B365D;
  --navi-navy-soft: rgba(20, 42, 74, 0.06);

  --bg-page: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F3F7FC;
  --bg-cool: #F3F7FC;
  --bg-warm: #FFF4EC;
  --bg-muted: #EAF1FA;

  --ink-primary: #142A4A;
  --ink-secondary: #334155;
  --ink-muted: #475569;

  --border-hairline: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-ink: #142A4A;

  --status-ok: #0F766E;
  --status-ok-bg: #F0FDFA;
  --status-ok-border: #99F6E4;
  --status-err: #B91C1C;
  --status-err-bg: #FEF2F2;
  --status-err-border: #FECACA;

  /* 2. Typography (one family, Be Vietnam Pro).
     The three tokens are kept so existing rules resolve to the same family; see "TYPOGRAPHY SYSTEM" at the end. */
  --font-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: var(--font-sans);

  /* 3. Spacing Scale (4pt base, varied section rhythm) */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs:  0.5rem;   /* 8px */
  --space-sm:  0.75rem;  /* 12px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2.25rem;  /* 36px */
  --space-2xl: 3.5rem;   /* 56px */
  --space-3xl: 5.25rem;  /* 84px */
  --space-4xl: 7rem;     /* 112px */

  /* 4. Restraint Geometry & Whisper Depth (R3.4 Premium Clean Softer Radius & Elevation) */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --shadow-whisper: 0 2px 8px rgba(20, 42, 74, 0.045);
  --shadow-hover: 0 10px 28px -6px rgba(20, 42, 74, 0.08), 0 2px 6px -1px rgba(20, 42, 74, 0.04);
  --shadow-float: 0 16px 36px -8px rgba(20, 42, 74, 0.1), 0 4px 10px -2px rgba(20, 42, 74, 0.04);

  /* 5. Motion Canon (GPU-composited transform & opacity) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-micro: 140ms;
  --dur-hover: 180ms;
  --dur-ui: 280ms;
  --dur-reveal: 460ms;

  /* 6. Named Z-Index Scale */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-drawer: 300;
  --z-toolbar: 400;

  --container-max: 1240px;
}

/* Reset & Root Safety */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: clip;
  background-color: var(--bg-page);
  color: var(--ink-primary);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1.03rem;
  line-height: 1.68;
  color: var(--ink-primary);
  background-color: var(--bg-page);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
  body {
    font-size: 1.0625rem;
  }
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-out);
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

/* Instant Focus Ring for Keyboard Accessibility (0ms transition) */
:focus-visible {
  outline: 2px solid var(--navi-navy);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-md);
  z-index: var(--z-toolbar);
  background: var(--navi-navy);
  color: var(--bg-page);
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-sm);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 768px) {
  .container {
    padding-inline: 2rem;
  }
}

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

/* ==========================================================================
   MOTION & REVEAL SYSTEM (Progressive Enhancement via html.js-ready)
   ========================================================================== */
html.js-ready .hero-reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: heroEnter var(--dur-reveal) var(--ease-out) forwards;
  animation-delay: calc(var(--stagger, 0) * 75ms);
}

@keyframes heroEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.js-ready [data-reveal] {
  opacity: 1;
  transform: translateY(0);
}

html.js-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   TOP OFFICIAL CONTACT STRIP (Minimal Editorial Bar)
   ========================================================================== */
.demo-strip {
  background-color: var(--bg-page);
  border-bottom: 1px solid var(--border-hairline);
  font-size: 0.78rem;
  color: var(--ink-secondary);
  padding-block: 0.4rem;
}

.demo-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 1rem;
}

.demo-strip__left,
.demo-strip__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
}

.demo-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navi-navy);
  background: var(--bg-muted);
  border: 1px solid var(--border-hairline);
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-xs);
}

.demo-tag--accent {
  color: var(--navi-orange-ink);
  background: var(--navi-orange-soft);
  border-color: var(--navi-orange-border);
}

.top-contact-link {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.top-contact-link strong {
  color: var(--navi-navy);
  font-weight: 700;
}

.top-contact-link:hover,
.top-contact-link:focus-visible {
  color: var(--navi-orange-ink);
}

@media (max-width: 767px) {
  .demo-strip__left .demo-tag:not(.demo-tag--accent) {
    display: none;
  }
  .top-contact-link--email {
    display: none;
  }
}

/* ==========================================================================
   1. STICKY HEADER & NAVIGATION (Clean Editorial Masthead — Zero Clipping 320px..1920px)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-hairline);
  transition: box-shadow var(--dur-hover) var(--ease-out);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-whisper);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.25rem;
  gap: 0.5rem;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  min-width: 0;
}

.brand-mark__logo {
  height: 28px;
  width: auto;
}

.brand-mark__divider,
.brand-mark__title {
  display: none;
}

@media (min-width: 640px) and (max-width: 1039px), (min-width: 1360px) {
  .brand-mark__logo {
    height: 32px;
  }
  .brand-mark__divider {
    display: block;
    width: 1px;
    height: 20px;
    background-color: var(--border-strong);
  }
  .brand-mark__title {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--navi-navy);
    white-space: nowrap;
  }
}

.primary-nav {
  display: none;
  position: relative;
}

@media (min-width: 1040px) {
  .primary-nav {
    display: block;
  }
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  position: relative;
}

.primary-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.58rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-secondary);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  position: relative;
  transition: color var(--dur-hover) var(--ease-out);
}

@media (min-width: 1280px) {
  .primary-nav__link {
    padding: 0.48rem 0.72rem;
    font-size: 0.87rem;
  }
}

.primary-nav__link:hover {
  color: var(--navi-navy);
}

.primary-nav__link.is-active {
  color: var(--navi-navy);
  font-weight: 600;
}

.primary-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  bottom: 0.15rem;
  height: 2px;
  background-color: var(--navi-orange);
  border-radius: 2px;
  transform-origin: left center;
  animation: navUnderline var(--dur-ui) var(--ease-out) forwards;
}

@keyframes navUnderline {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.header-actions,
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.header-actions .header-actions__secondary,
.site-header__actions .btn--outline {
  display: none;
}

/* Prevent header clipping at 320px..389px (O-01) */
@media (max-width: 389px) {
  .header-actions .btn--primary,
  .site-header__actions .btn--primary {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1039px), (min-width: 1260px) {
  .header-actions .header-actions__secondary,
  .site-header__actions .btn--outline {
    display: inline-flex;
  }
}

/* Mobile Menu Button & Smooth Drawer */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navi-navy);
  background: var(--bg-page);
  transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}

.menu-toggle:hover {
  border-color: var(--navi-navy);
  background-color: var(--bg-subtle);
}

@media (min-width: 1040px) {
  .menu-toggle {
    display: none;
  }
}

.menu-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 16px;
}

.menu-toggle__bars span {
  display: block;
  height: 1.5px;
  width: 100%;
  background-color: var(--navi-navy);
  transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-hover) var(--ease-out);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

.mobile-drawer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  border-top: 1px solid transparent;
  background-color: var(--bg-page);
  transition:
    grid-template-rows var(--dur-ui) var(--ease-out),
    opacity var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    visibility var(--dur-ui) var(--ease-out);
}

.mobile-drawer[hidden] {
  display: none !important;
}

.mobile-drawer.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  border-top-color: var(--border-hairline);
}

.mobile-drawer__inner {
  overflow: hidden;
}

.mobile-drawer__content {
  padding: 1rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mobile-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-primary);
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--bg-muted);
}

.mobile-drawer__link:hover,
.mobile-drawer__link:focus-visible {
  background-color: var(--bg-subtle);
  color: var(--navi-orange-ink);
}

.mobile-drawer__cta {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

/* ==========================================================================
   BUTTON SYSTEM (8-State Micro-interaction Discipline + WCAG AA 5.06:1 White-on-Orange)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.65rem 1.25rem;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  user-select: none;
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    transform var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out);
}

.btn--lg {
  min-height: 50px;
  padding: 0.85rem 1.6rem;
  font-size: 0.98rem;
}

.btn--sm {
  min-height: 40px;
  padding: 0.48rem 0.95rem;
  font-size: 0.84rem;
}

.btn--primary {
  background-color: var(--navi-cta-bg);
  color: var(--navi-cta-text);
  font-weight: 700;
  border: 1.5px solid var(--navi-cta-bg);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--navi-cta-bg-hover);
  border-color: var(--navi-cta-bg-hover);
  color: var(--navi-cta-text);
  transform: translateY(-1.5px);
  box-shadow: var(--shadow-hover);
}

.btn--primary:active {
  background-color: var(--navi-cta-bg-active);
  border-color: var(--navi-cta-bg-active);
  color: var(--navi-cta-text);
  transform: translateY(0.5px);
  box-shadow: none;
}

.btn:disabled,
.btn[disabled],
.btn.is-disabled,
.btn[aria-disabled="true"] {
  background-color: #E2E8F0;
  color: #1E293B;
  border-color: #CBD5E1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  transition: none;
}

.btn--primary:disabled,
.btn--primary[disabled],
.btn--primary.is-disabled,
.btn--primary[aria-disabled="true"] {
  background-color: #9E4A2C;
  color: var(--navi-cta-text);
  border-color: #9E4A2C;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  transition: none;
}

.btn--navy {
  background-color: var(--navi-navy);
  color: var(--bg-page);
  border: 1px solid var(--navi-navy);
}

.btn--navy:hover {
  background-color: var(--navi-navy-mid);
  transform: translateY(-1.5px);
  box-shadow: var(--shadow-hover);
}

.btn--navy:active {
  transform: translateY(0.5px);
}

.btn--outline {
  background-color: var(--bg-page);
  color: var(--navi-navy);
  border: 1px solid var(--border-strong);
}

.btn--outline:hover {
  border-color: var(--navi-navy);
  background-color: var(--bg-subtle);
  transform: translateY(-1px);
}

.btn--outline:active {
  transform: translateY(0.5px);
}

.btn__arrow {
  display: inline-block;
  transition: transform var(--dur-hover) var(--ease-out);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* ==========================================================================
   SECTION RHYTHM & EDITORIAL HEADERS (No Pill Badges, Varied Spacing)
   ========================================================================== */
.section {
  scroll-margin-top: 4.5rem;
  background-color: var(--bg-page);
  border-bottom: 1px solid var(--border-hairline);
}

.section--spacious {
  padding-block: var(--space-2xl);
}

.section--compact {
  padding-block: var(--space-xl);
}

@media (min-width: 960px) {
  .section--spacious {
    padding-block: var(--space-3xl);
  }
  .section--compact {
    padding-block: var(--space-2xl);
  }
}

.section-head {
  margin-bottom: var(--space-xl);
  max-width: 46rem;
}

.section-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: end;
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-hairline);
}

@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2.5rem;
  }
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navi-orange-ink);
  margin-bottom: 0.65rem;
}

.section-kicker::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background-color: var(--navi-orange);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.6vw + 0.8rem, 2.6rem);
  font-weight: 800;
  font-style: normal;
  line-height: 1.22;
  letter-spacing: -0.022em;
  color: var(--navi-navy);
  text-wrap: balance;
}

.section-lead {
  margin-top: 0.8rem;
  font-size: clamp(1.02rem, 0.35vw + 0.92rem, 1.1rem);
  line-height: 1.68;
  color: var(--ink-secondary);
  max-width: 64ch;
}

.section-head--split .section-lead {
  margin-top: 0;
}

/* ==========================================================================
   CURATED EDITORIAL PHOTO FRAMES (R2.1 Photo Refinement — 4 Curated Slots)
   ========================================================================== */
.editorial-figure {
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-whisper);
  transition:
    border-color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-out);
}

.editorial-figure:hover {
  border-color: var(--navi-navy);
  box-shadow: var(--shadow-hover);
}

.editorial-figure--spaced {
  margin-top: 1.75rem;
}

.editorial-figure--bottom-spaced {
  margin-bottom: 2rem;
}

.editorial-figure__media {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-subtle);
  aspect-ratio: 16 / 10;
}

.editorial-figure__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--ease-out);
}

.editorial-figure:hover .editorial-figure__img {
  transform: scale(1.012);
}

.editorial-figure__caption {
  padding: 0.85rem 1.15rem;
  background-color: var(--bg-page);
  border-top: 1px solid var(--border-hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  font-size: 0.92rem;
  color: var(--ink-secondary);
  line-height: 1.5;
}

.editorial-figure__caption strong {
  color: var(--navi-navy);
  font-family: var(--font-display);
}

.editorial-figure__slot-tag {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--navi-orange-ink);
  background-color: var(--navi-orange-soft);
  border: 1px solid var(--navi-orange-border);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

/* ==========================================================================
   2. HERO SECTION (3-Second Impact, Asymmetric Swiss Editorial Split)
   ========================================================================== */
.hero {
  padding-top: 1.35rem;
  padding-bottom: var(--space-2xl);
  background-color: var(--bg-page);
  border-bottom: 1px solid var(--border-hairline);
}

@media (min-width: 960px) {
  .hero {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-3xl);
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 3rem;
    align-items: start;
  }
}

.hero__right-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.hero__overline {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.hero__overline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--navi-orange);
  flex-shrink: 0;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.08rem, 3.5vw + 0.8rem, 3.4rem);
  font-weight: 800;
  font-style: normal;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--navi-navy);
  text-wrap: balance;
}

.hero__title-accent {
  color: var(--navi-orange-ink);
  text-decoration: underline;
  text-decoration-color: var(--navi-orange);
  text-underline-offset: 6px;
  text-decoration-thickness: 2.5px;
}

.hero__subtitle {
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.2vw + 0.65rem, 1.3rem);
  font-weight: 700;
  line-height: 1.46;
  color: var(--navi-navy);
  max-width: 58ch;
}

.hero__desc {
  margin-top: 0.6rem;
  font-size: clamp(1rem, 0.35vw + 0.88rem, 1.08rem);
  line-height: 1.64;
  color: var(--ink-secondary);
  max-width: 60ch;
}

.hero__actions {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.hero__actions .btn {
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
}

@media (min-width: 480px) {
  .hero__actions .btn {
    width: auto;
  }
}

/* Architectural Key-Facts Strip (Replaces generic 4 mini-cards) */
.hero-ledger {
  margin-top: 1.85rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--border-hairline);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
}

@media (min-width: 640px) {
  .hero-ledger {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hero-ledger__item {
  padding-left: 0.75rem;
  border-left: 2px solid var(--border-hairline);
  transition: border-color var(--dur-hover) var(--ease-out);
}

.hero-ledger__item:hover {
  border-left-color: var(--navi-orange);
}

.hero-ledger__val {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--navi-navy);
  line-height: 1.3;
}

.hero-ledger__lbl {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.85rem;
  color: var(--ink-secondary);
  line-height: 1.42;
}

/* Hero Right: Interactive Curriculum Blueprint Panel */
.hero-blueprint {
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  box-shadow: var(--shadow-float);
  position: relative;
}

@media (min-width: 640px) {
  .hero-blueprint {
    padding: 1.55rem;
  }
}

.hero-blueprint__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border-hairline);
}

.hero-blueprint__title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--navi-navy);
  letter-spacing: -0.01em;
}

.hero-blueprint__meta {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--navi-orange-ink);
}

.hero-blueprint__hint {
  margin-top: 0.7rem;
  font-size: 0.86rem;
  color: var(--ink-secondary);
}

.hero-blueprint__pills {
  margin-top: 0.65rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.blueprint-pill {
  padding: 0.52rem 0.35rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xs);
  background-color: var(--bg-page);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-secondary);
  text-align: center;
  transition:
    border-color var(--dur-hover) var(--ease-out),
    background-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.blueprint-pill:hover {
  border-color: var(--navi-navy);
  color: var(--navi-navy);
}

.blueprint-pill.is-active {
  background-color: var(--navi-navy);
  border-color: var(--navi-navy);
  color: var(--bg-page);
}

.hero-blueprint__card {
  margin-top: 0.95rem;
  padding: 1.15rem;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  transition: opacity var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}

.hero-blueprint__card.is-switching {
  opacity: 0.45;
  transform: translateY(3px);
}

.hero-blueprint__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.hero-blueprint__code {
  font-family: var(--font-mono);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--navi-orange-ink);
}

.hero-blueprint__price {
  font-family: var(--font-mono);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--navi-navy);
  font-variant-numeric: tabular-nums;
}

.hero-blueprint__name {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navi-navy);
}

.hero-blueprint__for {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: var(--ink-secondary);
}

.hero-blueprint__summary {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-hairline);
  font-size: 0.9rem;
  color: var(--ink-secondary);
  line-height: 1.58;
}

.hero-blueprint__foot {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 0.75rem;
  font-size: 0.86rem;
}

.hero-blueprint__select-btn {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navi-cta-text);
  background-color: var(--navi-cta-bg);
  border: 1.5px solid var(--navi-cta-bg);
  border-radius: var(--radius-sm);
  padding: 0.48rem 0.9rem;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    transform var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out);
}

.hero-blueprint__select-btn:hover,
.hero-blueprint__select-btn:focus-visible {
  background-color: var(--navi-cta-bg-hover);
  border-color: var(--navi-cta-bg-hover);
  color: var(--navi-cta-text);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.hero-blueprint__select-btn:active {
  background-color: var(--navi-cta-bg-active);
  border-color: var(--navi-cta-bg-active);
  color: var(--navi-cta-text);
  transform: translateY(0.5px);
  box-shadow: none;
}

.hero-blueprint__select-btn:disabled,
.hero-blueprint__select-btn[disabled],
.hero-blueprint__select-btn.is-disabled,
.hero-blueprint__select-btn[aria-disabled="true"] {
  background-color: #9E4A2C;
  border-color: #9E4A2C;
  color: var(--navi-cta-text);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  transition: none;
}

/* ==========================================================================
   3. GIỚI THIỆU NAVI ONLINE (Asymmetric 5:7 Editorial Split Ledger)
   ========================================================================== */
.intro-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
}

@media (min-width: 960px) {
  .intro-split {
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
    gap: 3.5rem;
    align-items: start;
  }
}

.intro-manifesto__quote {
  margin-top: 1.25rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--navi-orange);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--navi-navy);
  line-height: 1.55;
}

.intro-audience {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-hairline);
}

.intro-audience__heading {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navi-navy);
  margin-bottom: 0.85rem;
}

.intro-audience__list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.intro-audience__item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 1rem;
  color: var(--ink-secondary);
  line-height: 1.62;
}

.intro-audience__bullet {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navi-orange-ink);
  flex-shrink: 0;
}

/* Right Ledger: 4 Model Pillars */
.pillar-ledger {
  border-top: 2px solid var(--navi-navy);
}

.pillar-row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--border-hairline);
  transition: background-color var(--dur-hover) var(--ease-out), padding-left var(--dur-hover) var(--ease-out);
}

.pillar-row:hover {
  background-color: var(--bg-subtle);
  padding-left: 0.5rem;
}

.pillar-row__num {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navi-orange-ink);
  padding-top: 0.15rem;
}

.pillar-row__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navi-navy);
  line-height: 1.35;
}

.pillar-row__desc {
  margin-top: 0.3rem;
  font-size: 0.98rem;
  color: var(--ink-secondary);
  line-height: 1.64;
}

/* ==========================================================================
   4. LỢI THẾ HỌC TRỰC TIẾP (2x3 Architectural Hairline Matrix — No Card Slop)
   ========================================================================== */
.advantage-matrix {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--border-strong);
  border-left: 1px solid var(--border-strong);
}

@media (min-width: 640px) {
  .advantage-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .advantage-matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.advantage-cell {
  padding: 1.75rem 1.6rem;
  background-color: var(--bg-page);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  transition: background-color var(--dur-hover) var(--ease-out);
}

.advantage-cell:hover {
  background-color: var(--bg-subtle);
}

.advantage-cell__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.advantage-cell__idx {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-muted);
  transition: color var(--dur-hover) var(--ease-out);
}

.advantage-cell:hover .advantage-cell__idx {
  color: var(--navi-orange-ink);
}

.advantage-cell__line {
  width: 24px;
  height: 2px;
  background-color: var(--border-strong);
  transition: width var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}

.advantage-cell:hover .advantage-cell__line {
  width: 36px;
  background-color: var(--navi-orange);
}

.advantage-cell__title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--navi-navy);
  line-height: 1.35;
  transition: transform var(--dur-hover) var(--ease-out);
}

.advantage-cell:hover .advantage-cell__title {
  transform: translateX(2px);
}

.advantage-cell__desc {
  margin-top: 0.5rem;
  font-size: 0.98rem;
  color: var(--ink-secondary);
  line-height: 1.65;
}

/* ==========================================================================
   5. LỘ TRÌNH HỌC (Visual Learning Journey + Parallel Fork Sau B1.2)
   ========================================================================== */
.journey-board {
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
}

@media (min-width: 768px) {
  .journey-board {
    padding: 2.25rem 2rem;
  }
}

.journey-board__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-hairline);
}

.journey-board__rule {
  font-size: 0.98rem;
  color: var(--ink-secondary);
}

.journey-board__rule strong {
  color: var(--navi-navy);
}

/* Main Spine A1.1 -> B1.2 with Animated Progress Track */
.journey-spine-wrap {
  margin-top: 1.75rem;
  position: relative;
}

.journey-track-line {
  display: none;
}

@media (min-width: 960px) {
  .journey-track-line {
    display: block;
    position: absolute;
    top: 26px;
    left: 6%;
    right: 6%;
    height: 2px;
    background-color: var(--border-hairline);
    z-index: 0;
  }

  .journey-track-line__fill {
    height: 100%;
    width: 100%;
    background-color: var(--navi-orange);
    transform-origin: left center;
    transform: scaleX(var(--journey-progress, 1));
    transition: transform 520ms var(--ease-out);
  }
}

.journey-spine {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .journey-spine {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .journey-spine {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.65rem;
  }
}

.journey-node {
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 1rem 0.9rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition:
    border-color var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out);
}

.journey-node:hover {
  border-color: var(--navi-navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-whisper);
}

.journey-node.is-active {
  border-color: var(--navi-orange);
  box-shadow: 0 0 0 1px var(--navi-orange);
}

.journey-node__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.journey-node__step {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-muted);
}

.journey-node__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--border-strong);
  transition: background-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}

.journey-node.is-passed .journey-node__dot,
.journey-node.is-active .journey-node__dot {
  background-color: var(--navi-orange);
}

.journey-node.is-active .journey-node__dot {
  transform: scale(1.3);
}

.journey-node__code {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navi-navy);
}

.journey-node__for {
  font-size: 0.86rem;
  color: var(--ink-secondary);
  line-height: 1.42;
}

.journey-node__fee {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid var(--bg-muted);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navi-orange-ink);
  font-variant-numeric: tabular-nums;
}

/* Parallel Fork After B1.2 ("Sau B1.2" -> Two parallel branches, zero arrow between Ôn thi B1 and B2) */
.journey-fork {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border-strong);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
}

@media (min-width: 860px) {
  .journey-fork {
    grid-template-columns: 185px 1fr 1fr;
    align-items: center;
  }
}

.journey-fork__label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navi-navy);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.journey-fork__sub {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-muted);
}

.journey-branch {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  transition: border-color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}

.journey-branch:hover {
  border-color: var(--navi-navy);
  transform: translateY(-2px);
}

.journey-branch.is-active {
  background-color: var(--bg-page);
  border-color: var(--navi-orange);
  box-shadow: 0 0 0 1px var(--navi-orange);
}

.journey-branch__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.journey-branch__code {
  font-family: var(--font-mono);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--navi-navy);
}

.journey-branch__badge {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-xs);
  background-color: var(--navi-orange-soft);
  color: var(--navi-orange-ink);
  border: 1px solid var(--navi-orange-border);
}

.journey-branch--b2 .journey-branch__badge {
  background-color: var(--navi-navy-soft);
  color: var(--navi-navy);
  border-color: var(--border-strong);
}

.journey-branch__desc {
  font-size: 0.94rem;
  color: var(--ink-secondary);
}

.journey-branch__price {
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--navi-navy);
}

/* Interactive Level Finder Bar inside Journey */
.level-finder {
  margin-top: 1.5rem;
  padding: 1.35rem;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}

.level-finder > * {
  min-width: 0;
}

@media (min-width: 960px) {
  .level-finder {
    grid-template-columns: 1.2fr 0.8fr;
  }
}

.level-finder__label {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--navi-navy);
  margin-bottom: 0.65rem;
}

.level-finder__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.level-chip {
  padding: 0.5rem 0.88rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-secondary);
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out);
}

.level-chip:hover {
  border-color: var(--navi-navy);
  color: var(--navi-navy);
}

.level-chip.is-active {
  background-color: var(--navi-navy);
  border-color: var(--navi-navy);
  color: var(--bg-page);
}

.level-finder__result {
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.level-finder__rec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.level-finder__rec-course {
  font-family: var(--font-mono);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--navi-orange-ink);
}

.level-finder__rec-fee {
  font-family: var(--font-mono);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--navi-navy);
}

.level-finder__rec-desc {
  font-size: 0.92rem;
  color: var(--ink-secondary);
}

/* ==========================================================================
   6. HỌC PHÍ 8 KHÓA (Scannable Editorial Ledger — Zero Horizontal Scroll)
   ========================================================================== */
.pricing-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.filter-tab {
  min-height: 42px;
  padding: 0.5rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-secondary);
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out);
}

.filter-tab:hover {
  border-color: var(--navi-navy);
  color: var(--navi-navy);
}

.filter-tab.is-active {
  background-color: var(--navi-navy);
  border-color: var(--navi-navy);
  color: var(--bg-page);
}

.pricing-ledger {
  border-top: 2px solid var(--navi-navy);
}

.pricing-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  padding: 1.35rem 1rem;
  background-color: var(--bg-page);
  border-bottom: 1px solid var(--border-hairline);
  position: relative;
  transition:
    background-color var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-out);
}

.pricing-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--navi-orange);
  transform: scaleY(0);
  transition: transform var(--dur-hover) var(--ease-out);
}

.pricing-row:hover {
  background-color: var(--bg-subtle);
}

.pricing-row:hover::before {
  transform: scaleY(1);
}

@media (min-width: 860px) {
  .pricing-row {
    grid-template-columns: 182px minmax(0, 1.35fr) minmax(0, 1fr) 185px 158px;
    align-items: center;
    gap: 1.25rem;
    padding: 1.28rem 1.25rem;
  }
}

.pricing-row[hidden] {
  display: none !important;
}

.pricing-row__code-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.pricing-row__code {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navi-navy);
  white-space: nowrap;
}

.pricing-row__tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.14rem 0.5rem;
  border-radius: var(--radius-xs);
  background-color: var(--bg-muted);
  color: var(--ink-secondary);
  white-space: nowrap;
}

.pricing-row__tag--optional {
  background-color: var(--navi-orange-soft);
  color: var(--navi-orange-ink);
}

.pricing-row__name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--navi-navy);
}

.pricing-row__desc {
  margin-top: 0.25rem;
  font-size: 0.94rem;
  color: var(--ink-secondary);
  line-height: 1.55;
}

.pricing-row__for {
  font-size: 0.94rem;
  color: var(--ink-secondary);
  line-height: 1.55;
}

.pricing-row__for strong {
  color: var(--ink-primary);
  font-weight: 600;
}

.pricing-row__fee {
  font-family: var(--font-mono);
  font-size: 1.26rem;
  font-weight: 700;
  color: var(--navi-navy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 860px) {
  .pricing-row__fee {
    text-align: right;
  }
  .pricing-row__action {
    text-align: right;
  }
}

.pricing-note-bar {
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.96rem;
  color: var(--ink-secondary);
}

/* ==========================================================================
   7. HAI GÓI COMBO LỘ TRÌNH (Architectural Side-by-Side Comparison)
   ========================================================================== */
.combo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 900px) {
  .combo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

.combo-panel {
  min-width: 0;
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.3rem;
  transition:
    border-color var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out);
}

@media (min-width: 640px) {
  .combo-panel {
    padding: 1.75rem;
    gap: 1.4rem;
  }
}

.combo-panel:hover {
  border-color: var(--navi-navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.combo-panel--featured {
  border-color: var(--navi-navy);
  border-width: 1.5px;
}

.combo-panel__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--border-hairline);
}

.combo-panel__kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navi-orange-ink);
}

.combo-panel__title {
  font-family: var(--font-display);
  margin-top: 0.25rem;
  font-size: 1.38rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--navi-navy);
}

.combo-panel__Save {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-xs);
  background-color: var(--navi-orange-soft);
  color: var(--navi-orange-ink);
  border: 1px solid var(--navi-orange-border);
  white-space: nowrap;
}

.combo-panel__pricing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.combo-panel__price {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 2.3vw + 0.65rem, 2.28rem);
  font-weight: 700;
  color: var(--navi-navy);
  font-variant-numeric: tabular-nums;
}

.combo-panel__single-sum {
  font-size: 0.92rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.combo-panel__courses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.combo-course-tag {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.24rem 0.6rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xs);
  background-color: var(--bg-subtle);
  color: var(--navi-navy);
}

.combo-stages {
  border-top: 1px solid var(--border-hairline);
  padding-top: 1rem;
}

.combo-stages__heading {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-bottom: 0.65rem;
}

.combo-stages__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.combo-stage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.58rem 0.8rem;
  background-color: var(--bg-subtle);
  border-radius: var(--radius-xs);
  font-size: 0.93rem;
}

.combo-stage-row--last {
  background-color: var(--navi-orange-soft);
  border: 1px solid var(--navi-orange-border);
}

.combo-stage-row__val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--navi-navy);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   8. LỊCH HỌC THEO NGUYỆN VỌNG & QUY TRÌNH 6 BƯỚC
   ========================================================================== */
.schedule-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 960px) {
  .schedule-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

.schedule-box {
  border-top: 2px solid var(--navi-navy);
  padding-top: 1.25rem;
}

.schedule-box__title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--navi-navy);
  margin-bottom: 0.35rem;
}

.schedule-box__sub {
  font-size: 0.96rem;
  color: var(--ink-secondary);
  margin-bottom: 1.15rem;
}

.schedule-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

@media (min-width: 520px) {
  .schedule-cards--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.schedule-item {
  padding: 1.05rem 1.15rem;
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}

.schedule-item:hover {
  border-color: var(--navi-navy);
  background-color: var(--bg-subtle);
}

.schedule-item__name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navi-navy);
  font-size: 1.04rem;
}

.schedule-item__meta {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--ink-secondary);
}

/* 6-Step Registration Process */
.steps-strip {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-hairline);
}

.steps-strip__title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--navi-navy);
  margin-bottom: 1.25rem;
}

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.step-item {
  padding: 1.2rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--bg-page);
  display: flex;
  gap: 0.85rem;
}

.step-item__num {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--navi-orange-ink);
  padding-top: 0.1rem;
}

.step-item__title {
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--navi-navy);
}

.step-item__desc {
  margin-top: 0.25rem;
  font-size: 0.94rem;
  color: var(--ink-secondary);
  line-height: 1.55;
}

/* ==========================================================================
   9. FAQ (Smooth CSS Grid Accordion — 0 Layout Shift)
   ========================================================================== */
.faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 960px) {
  .faq-layout {
    grid-template-columns: 270px 1fr;
    gap: 3rem;
    align-items: start;
  }
}

.faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

@media (min-width: 960px) {
  .faq-nav {
    flex-direction: column;
    position: sticky;
    top: 5.5rem;
  }
}

.faq-cat-btn {
  text-align: left;
  padding: 0.62rem 0.95rem;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-secondary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background-color: var(--bg-page);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out);
}

.faq-cat-btn:hover {
  border-color: var(--navi-navy);
  color: var(--navi-navy);
}

.faq-cat-btn.is-active {
  background-color: var(--navi-navy);
  border-color: var(--navi-navy);
  color: var(--bg-page);
  font-weight: 600;
}

.faq-list {
  border-top: 2px solid var(--navi-navy);
}

.faq-item {
  border-bottom: 1px solid var(--border-hairline);
  background-color: var(--bg-page);
}

.faq-item[hidden] {
  display: none !important;
}

.faq-trigger {
  width: 100%;
  padding: 1.25rem 0.5rem;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.42;
  color: var(--navi-navy);
  transition: color var(--dur-hover) var(--ease-out);
}

.faq-trigger:hover {
  color: var(--navi-orange-ink);
}

.faq-trigger__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navi-navy);
  transition:
    transform var(--dur-ui) var(--ease-out),
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out);
}

.faq-trigger[aria-expanded="true"] .faq-trigger__icon {
  transform: none;
  background-color: var(--navi-cta-bg);
  border-color: var(--navi-cta-bg);
  color: var(--navi-cta-text);
}

.faq-panel {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
}

html.js-ready .faq-panel {
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 340ms var(--ease-out),
    opacity 240ms var(--ease-out);
}

html.js-ready .faq-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-panel__inner {
  overflow: hidden;
}

.faq-panel__body {
  padding: 0 0.5rem 1.35rem;
  font-size: 1rem;
  color: var(--ink-secondary);
  line-height: 1.72;
  max-width: 68ch;
}

/* ==========================================================================
   10. TRANG ĐĂNG KÝ NGUYỆN VỌNG DEMO (Mobile-First 3-Stage Stepper & UTM)
   ========================================================================== */
.enroll-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
}

@media (min-width: 1024px) {
  .enroll-layout {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 3.25rem;
    align-items: start;
  }
}

.enroll-aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.aside-box {
  padding: 1.4rem;
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}

.aside-box__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navi-navy);
  margin-bottom: 0.75rem;
}

.aside-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.aside-checklist__item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--ink-secondary);
}

.aside-checklist__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navi-orange-ink);
}

.utm-inspector {
  padding: 1.25rem;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
}

.utm-inspector__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.utm-inspector__title {
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--navi-navy);
}

.utm-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.utm-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.25rem;
  border-bottom: 1px solid var(--border-hairline);
}

.utm-row__key {
  color: var(--ink-muted);
}

.utm-row__val {
  color: var(--navi-navy);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

.utm-presets {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.utm-preset-btn {
  padding: 0.38rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navi-navy);
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  transition: border-color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}

.utm-preset-btn:hover {
  border-color: var(--navi-orange);
  color: var(--navi-orange-ink);
}

/* Registration Form Card */
.form-shell {
  min-width: 0;
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  box-shadow: var(--shadow-float);
}

@media (min-width: 640px) {
  .form-shell {
    padding: 2.1rem;
  }
}

.form-shell__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border-hairline);
}

.form-shell__notice {
  font-size: 0.9rem;
  color: var(--ink-secondary);
}

.form-shell__notice strong {
  color: var(--navi-navy);
}

/* P1-02: Non-JS / Script Failure Form Notice (Hidden when html.js-ready is active) */
.noscript-form-warning {
  margin-bottom: 1.25rem;
  padding: 0.95rem 1.1rem;
  background-color: #FFF7ED;
  border: 1.5px solid var(--navi-orange-ink);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  line-height: 1.58;
  color: var(--navi-navy);
}

.noscript-form-warning strong {
  color: var(--navi-orange-ink);
}

html.js-ready .noscript-form-warning {
  display: none !important;
}

/* Live 3-Stage Stepper Progress Bar */
.form-stepper {
  margin-top: 1.15rem;
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
}

@media (min-width: 540px) {
  .form-stepper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
  }
}

.form-step-pill {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xs);
  background-color: var(--bg-subtle);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-muted);
  min-width: 0;
  transition:
    border-color var(--dur-ui) var(--ease-out),
    background-color var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out);
}

.form-step-pill.is-done {
  border-color: var(--navi-navy);
  background-color: var(--bg-page);
  color: var(--navi-navy);
}

.form-step-pill__idx {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--navi-orange-ink);
}

.form-stage {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-hairline);
}

.form-stage:last-of-type {
  border-bottom: none;
  margin-bottom: 1rem;
}

.form-stage__title {
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--navi-navy);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-stage__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--navi-orange-ink);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  margin-bottom: 1rem;
}

.field-group:last-child {
  margin-bottom: 0;
}

.field-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navi-navy);
}

.field-req {
  color: var(--navi-orange-ink);
}

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.95rem;
  font-size: 1.02rem; /* >=16px prevents iOS zoom */
  color: var(--ink-primary);
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--dur-hover) var(--ease-out),
    background-color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out);
}

.field-textarea {
  min-height: 96px;
  resize: vertical;
}

.field-input:hover,
.field-select:hover,
.field-textarea:hover {
  border-color: var(--navi-navy);
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--navi-navy);
  box-shadow: 0 0 0 3px var(--navi-orange-ring);
}

.field-input[aria-invalid="true"],
.field-select[aria-invalid="true"] {
  border-color: var(--status-err);
  background-color: var(--status-err-bg);
}

/* Radio Card Selector for Day & Shift */
.choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

@media (min-width: 540px) {
  .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.choice-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 0.95rem;
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    border-color var(--dur-hover) var(--ease-out),
    background-color var(--dur-hover) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.choice-card:hover {
  border-color: var(--navi-navy);
  background-color: var(--bg-subtle);
}

.choice-card:has(input:checked) {
  border-color: var(--navi-orange);
  background-color: var(--navi-orange-soft);
  box-shadow: 0 0 0 1px var(--navi-orange);
}

.choice-card input[type="radio"] {
  margin-top: 0.24rem;
  accent-color: var(--navi-orange);
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.choice-card__title {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--navi-navy);
}

.choice-card__sub {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-secondary);
}

.field-error {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--status-err);
  min-height: 1.1rem;
}

.field-error:empty {
  display: none;
}

/* P1-01: Mobile & Screen-Reader Form Validation Summary Banner */
.form-error-summary {
  margin-bottom: 1.1rem;
  padding: 0.95rem 1.1rem;
  background-color: var(--status-err-bg);
  border: 1.5px solid var(--status-err);
  border-radius: var(--radius-sm);
  color: var(--ink-primary);
}

.form-error-summary[hidden] {
  display: none !important;
}

.form-error-summary__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--status-err);
  margin-bottom: 0.45rem;
}

.form-error-summary__list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-left: 1.1rem;
  list-style: disc;
  font-size: 0.9rem;
  color: var(--ink-primary);
}

.form-error-summary__link {
  color: var(--status-err);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: left;
}

.form-error-summary__link:hover,
.form-error-summary__link:focus-visible {
  color: var(--navi-navy);
}

/* Consent Checkbox */
.consent-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.05rem;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.93rem;
  color: var(--ink-secondary);
}

.consent-card input[type="checkbox"] {
  margin-top: 0.22rem;
  width: 18px;
  height: 18px;
  accent-color: var(--navi-orange);
  flex-shrink: 0;
}

.form-actions {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.form-actions .btn--primary {
  flex: 1 1 220px;
}

/* Confirmation Box */
.confirm-panel {
  margin-top: 1.5rem;
  padding: 1.35rem;
  background-color: var(--status-ok-bg);
  border: 1px solid var(--status-ok-border);
  border-radius: var(--radius-md);
  animation: heroEnter var(--dur-ui) var(--ease-out) forwards;
}

.confirm-panel[hidden] {
  display: none !important;
}

.confirm-panel__title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--status-ok);
  margin-bottom: 0.45rem;
}

.confirm-panel__desc {
  font-size: 0.94rem;
  color: var(--ink-primary);
  line-height: 1.6;
}

.confirm-panel__json {
  margin-top: 0.9rem;
  padding: 0.85rem;
  background-color: var(--navi-navy);
  color: var(--bg-page);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Direct Consultation & Official Contact Channels (Website Information Release) */
.consult-channel-grid {
  margin-top: 1.15rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.consult-channel-card {
  padding: 1.25rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: var(--bg-page);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  transition:
    border-color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out);
}

.consult-channel-card > div {
  flex: 1 1 260px;
  min-width: 0;
}

.consult-channel-card:hover {
  border-color: var(--navi-navy);
  box-shadow: var(--shadow-whisper);
}

.consult-channel-card--primary {
  background-color: var(--navi-orange-soft);
  border-color: var(--navi-orange);
}

.consult-channel-card__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navi-orange-ink);
  margin-bottom: 0.2rem;
}

.consult-channel-card__title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--navi-navy);
}

.consult-channel-card__value {
  font-family: var(--font-mono);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--navi-navy);
  margin-top: 0.2rem;
  word-break: break-word;
}

.consult-channel-card__value--email {
  font-size: 1rem;
}

.consult-channel-card__desc {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--ink-secondary);
  line-height: 1.55;
}

.consult-summary-box {
  margin-top: 1.25rem;
  padding: 1.35rem;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}

.consult-summary-box__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-hairline);
}

.consult-summary-box__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navi-navy);
  margin: 0;
}

.consult-summary-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .consult-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.consult-summary-item {
  padding: 0.75rem 0.9rem;
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.consult-summary-item__lbl {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.consult-summary-item__val {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navi-navy);
}

.consult-template-box {
  margin-top: 1.15rem;
  padding: 1.1rem;
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.consult-template-box__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.consult-template-box__lbl {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--navi-navy);
}

.consult-template-box__pre {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--navi-navy);
  white-space: pre-wrap;
  word-break: break-word;
}

.consult-template-box__status {
  margin-top: 0.55rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--status-ok);
}

.consult-template-box__status.is-manual-fallback {
  color: var(--navi-orange-ink);
}

html:not(.js-ready) #copy-consult-template-btn {
  display: none;
}

@media (max-width: 520px) {
  .form-shell {
    padding: 1rem;
  }
  .consult-channel-card,
  .consult-summary-box,
  .consult-template-box {
    padding: 0.95rem;
  }
  .consult-channel-card .btn,
  .consult-summary-box .form-actions .btn,
  .consult-template-box .btn {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
    text-align: center;
    justify-content: center;
    padding-inline: 0.75rem;
    font-size: 0.88rem;
  }
}

@media (max-width: 389px) {
  .form-shell {
    padding: 0.85rem;
  }
  .consult-channel-card,
  .consult-summary-box,
  .consult-template-box {
    padding: 0.8rem;
  }
  .hero__actions .btn,
  .mobile-drawer__cta .btn,
  .consult-channel-card .btn,
  .consult-summary-box .form-actions .btn,
  .consult-template-box .btn {
    font-size: 0.78rem;
    padding-inline: 0.5rem;
    width: 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   11. FOOTER (Editorial Colophon — Ft1 Mast-headed)
   ========================================================================== */
.site-footer {
  background-color: var(--bg-page);
  border-top: 2px solid var(--navi-navy);
  padding-block: var(--space-2xl);
  font-size: 0.88rem;
  color: var(--ink-secondary);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-hairline);
}

@media (min-width: 860px) {
  .site-footer__grid {
    grid-template-columns: 1.3fr 0.85fr 0.85fr;
    gap: 3rem;
  }
}

.site-footer__brand-desc {
  margin-top: 0.75rem;
  max-width: 48ch;
  color: var(--ink-secondary);
}

.site-footer__heading {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navi-navy);
  margin-bottom: 0.75rem;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.site-footer__links a:hover {
  color: var(--navi-orange-ink);
}

.site-footer__bottom {
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

/* ==========================================================================
   REDUCED MOTION SUPPORT (Mandatory Accessibility Gate)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 120ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    transition-delay: 0ms !important;
  }
  html.js-ready .hero-reveal,
  html.js-ready [data-reveal] {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   TYPOGRAPHY SYSTEM — one family (Be Vietnam Pro)
   H1 900 · H2 800 · H3/card titles 700 · body 400 · nav 600 · buttons 700 · prices 800
   Uppercase only for short eyebrow labels (tracking 0.06–0.08em); numbers use tabular figures
   ========================================================================== */
h1,
h2,
h3,
h4,
.hero-blueprint__title {
  line-height: 1.22;
}

.hero__title {
  font-weight: 900;
}

.section-title,
.combo-panel__title,
.consult-channel-card__title {
  font-weight: 800;
}

.hero__overline,
.section-kicker {
  letter-spacing: 0.08em;
}

.demo-tag,
.journey-fork__label,
.combo-panel__kicker,
.consult-channel-card__kicker,
.site-footer__heading {
  letter-spacing: 0.06em;
}

/* Long headings and small tags read better in sentence case */
.intro-audience__heading,
.combo-stages__heading,
.consult-summary-item__lbl,
.pricing-row__tag,
.journey-branch__badge {
  text-transform: none;
  letter-spacing: 0;
}

.intro-audience__heading,
.combo-stages__heading {
  font-size: 0.92rem;
}

/* Former monospace data: same family, figures aligned */
.hero-blueprint__code,
.hero-blueprint__meta,
.blueprint-pill,
.journey-node__step,
.journey-node__code,
.journey-branch__code,
.pricing-row__code,
.level-finder__rec-course,
.combo-course-tag,
.pillar-row__num,
.advantage-cell__idx,
.step-item__num,
.aside-checklist__num,
.intro-audience__bullet,
.top-contact-link,
.consult-channel-card__value,
.combo-stage-row__val,
.schedule-item__meta {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
}

.hero-blueprint__price,
.journey-node__fee,
.journey-branch__price,
.level-finder__rec-fee,
.pricing-row__fee,
.combo-panel__price {
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
}

.combo-stage-row__val {
  font-weight: 600;
}

/* ==========================================================================
   R3.1 PHOTO CLUSTER (Lợi thế) + ENROLL PORTRAIT (Đăng ký) — same frame language as .editorial-figure
   ========================================================================== */
.photo-cluster {
  margin-top: var(--space-2xl);
}

.photo-cluster__title {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--navi-navy);
  margin-bottom: var(--space-md);
}

.photo-cluster__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .photo-cluster__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.photo-cluster__item {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-whisper);
  transition:
    border-color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out);
}

.photo-cluster__item:hover {
  border-color: var(--navi-navy);
  box-shadow: var(--shadow-hover);
}

.photo-cluster__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-hairline);
}

.photo-cluster__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.photo-cluster__caption {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1.05rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

.photo-cluster__caption strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navi-navy);
}

.enroll-portrait {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--bg-page);
  box-shadow: var(--shadow-whisper);
}

.enroll-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
}

@media (max-width: 1023px) {
  .enroll-portrait img {
    aspect-ratio: 16 / 10;
  }
}

.enroll-portrait figcaption {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-secondary);
  border-top: 1px solid var(--border-hairline);
}

/* ==========================================================================
   R3.2 VISUAL POLISH — COLOR HIERARCHY, HERO BALANCE & 3-GROUP ROADMAP
   Palette: Navy #142A4A · CTA Orange #C83E0B · Warm Cream #FFF4EC · Cool Blue #F3F7FC · White #FFFFFF
   Section Rhythm: Desktop 88–96px, Mobile 56–64px · Single-accent cards · Un-nested controls
   ========================================================================== */

/* 1. Section Spacing & Rhythmic Surface Alternation */
.section--spacious {
  padding-block: 3.75rem; /* 60px mobile (within 48–64px) */
}

@media (min-width: 960px) {
  .section--spacious {
    padding-block: 6rem; /* 96px desktop (within 80–104px) */
  }
}

.section-head {
  margin-bottom: 2.5rem;
}

.section-head--split {
  padding-bottom: 1.75rem;
  border-bottom: none;
}

/* Clear Surface Hierarchy Across Sections (#FFFFFF <-> #F3F7FC <-> #FFF4EC) */
#hero {
  background-color: var(--bg-page); /* #FFFFFF */
  padding-top: 2rem;
  padding-bottom: 3.75rem;
}

@media (min-width: 960px) {
  #hero {
    padding-top: 3.5rem;
    padding-bottom: 5.5rem;
  }
}

#gioi-thieu {
  background-color: var(--bg-cool); /* #F3F7FC */
}

#loi-the {
  background-color: var(--bg-page); /* #FFFFFF */
}

#lo-trinh {
  background-color: var(--bg-cool); /* #F3F7FC */
}

#hoc-phi {
  background-color: var(--bg-page); /* #FFFFFF */
}

#combo {
  background-color: var(--bg-warm); /* #FFF4EC */
}

#lich-hoc {
  background-color: var(--bg-cool); /* #F3F7FC */
}

#faq {
  background-color: var(--bg-page); /* #FFFFFF */
}

#dang-ky {
  background-color: var(--bg-cool); /* #F3F7FC */
}

/* 2. Hero Two-Column Balance & Single-Underline H1 + Horizontal Course Lookup Band */
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 3.5rem;
    align-items: center;
  }
}

.hero__title {
  font-size: clamp(1.88rem, 2.5vw + 0.6rem, 2.72rem);
  line-height: 1.22;
  letter-spacing: -0.022em;
  max-width: 24ch;
  text-wrap: pretty;
}

.hero__title-accent {
  color: var(--navi-navy);
  text-decoration: underline;
  text-decoration-color: var(--navi-cta-bg);
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
  white-space: nowrap;
}

.editorial-figure--hero {
  border-color: var(--border-hairline);
  box-shadow: var(--shadow-float);
}

.editorial-figure--hero .editorial-figure__media {
  aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
  .editorial-figure--hero .editorial-figure__media {
    aspect-ratio: 6 / 5;
  }
}

.editorial-figure__slot-tag,
.demo-tag {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  border: none;
  background-color: var(--bg-cool);
  color: var(--navi-navy);
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-xs);
}

.demo-tag--accent {
  background-color: var(--bg-warm);
  color: var(--navi-orange-ink);
}

/* Horizontal Course Lookup Band below Hero Split */
.hero-blueprint {
  margin-top: 2.5rem;
  background-color: var(--bg-warm);
  border: 1px solid rgba(200, 62, 11, 0.18);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.35rem;
  box-shadow: var(--shadow-whisper);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.35rem;
  align-items: center;
}

@media (min-width: 960px) {
  .hero-blueprint {
    margin-top: 3.25rem;
    padding: 1.85rem 2.25rem;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 2.5rem;
  }
}

.hero-blueprint__head {
  border-bottom: none;
  padding-bottom: 0.25rem;
}

.hero-blueprint__title {
  font-size: 1.15rem;
}

.hero-blueprint__hint {
  margin-top: 0.25rem;
  font-size: 0.92rem;
}

.hero-blueprint__pills {
  margin-top: 1rem;
  gap: 0.5rem;
}

.blueprint-pill {
  background-color: var(--bg-page);
  border-color: rgba(20, 42, 74, 0.14);
  color: var(--navi-navy);
  padding: 0.58rem 0.4rem;
  border-radius: var(--radius-sm);
}

.blueprint-pill.is-active {
  background-color: var(--navi-navy);
  border-color: var(--navi-navy);
  color: var(--bg-page);
}

.hero-blueprint__card {
  margin-top: 0;
  padding: 1.35rem 1.5rem;
  background-color: var(--bg-page);
  border: 1px solid rgba(20, 42, 74, 0.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-whisper);
}

.hero-blueprint__row {
  flex-wrap: wrap;
}

.hero-blueprint__code {
  white-space: nowrap;
}

.hero-blueprint__summary {
  border-top: none;
  padding-top: 0;
  margin-top: 0.45rem;
}

/* 3. Intro (#gioi-thieu) & Advantages (#loi-the) Breathing Room & Surface Separation */
.intro-audience {
  margin-top: 2rem;
  padding: 1.6rem 1.65rem;
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-whisper);
}

.intro-audience__list {
  gap: 0.95rem;
}

.pillar-ledger {
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-top: 3px solid var(--navi-navy);
  border-radius: var(--radius-lg);
  padding: 0.5rem 1.5rem;
  box-shadow: var(--shadow-whisper);
}

.pillar-row:last-child {
  border-bottom: none;
}

.advantage-matrix {
  border: none;
  gap: 1.25rem;
}

.advantage-cell {
  padding: 1.75rem 1.65rem;
  background-color: var(--bg-cool);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.advantage-cell:hover {
  background-color: var(--bg-page);
  border-color: var(--navi-navy);
  box-shadow: var(--shadow-hover);
}

.advantage-cell__line {
  display: none;
}

.photo-cluster {
  margin-top: 3rem;
  padding: 1.75rem;
  background-color: var(--bg-cool);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .photo-cluster {
    padding: 2.25rem;
  }
}

.photo-cluster__item {
  border-color: var(--border-hairline);
}

.photo-cluster__caption {
  padding: 1.05rem 1.25rem 1.2rem;
}

/* 4. Roadmap (#lo-trinh) — 3 Level Groups (A1 / A2 / B1 x 2 Courses) + Un-nested Level Finder */
.journey-board {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.journey-board__header {
  padding-bottom: 1rem;
  border-bottom: none;
}

.journey-spine-wrap {
  margin-top: 0.75rem;
}

.journey-track-line {
  display: none !important;
}

.journey-spine {
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 960px) {
  .journey-spine {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.journey-group {
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-top: 3px solid var(--navi-navy);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  box-shadow: var(--shadow-whisper);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .journey-group {
    padding: 1.5rem;
  }
}

.journey-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-hairline);
}

.journey-group__badge {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--navi-navy);
  background-color: var(--bg-cool);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  flex-shrink: 0;
}

.journey-group__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-secondary);
  text-align: right;
}

.journey-group__courses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  flex: 1;
}

@media (max-width: 359px) {
  .journey-group__courses {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Single-Color Discipline inside Course Cards */
.journey-node {
  background-color: var(--bg-cool);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 1.1rem 1rem;
  gap: 0.45rem;
}

.journey-node:hover {
  background-color: var(--bg-page);
  border-color: var(--navi-navy);
}

.journey-node.is-active {
  background-color: var(--bg-warm);
  border-color: var(--navi-cta-bg);
  box-shadow: 0 0 0 1px var(--navi-cta-bg);
}

.journey-node__step {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.journey-node__dot {
  background-color: var(--border-strong);
}

.journey-node.is-passed .journey-node__dot {
  background-color: var(--navi-navy);
}

.journey-node.is-active .journey-node__dot {
  background-color: var(--navi-cta-bg);
}

.journey-node__code {
  font-size: 1.28rem;
  color: var(--navi-navy);
}

.journey-node__fee {
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: none;
  font-size: 0.96rem;
  color: var(--navi-navy);
}

.journey-node.is-active .journey-node__fee {
  color: var(--navi-orange-ink);
}

/* Parallel Fork After B1.2 (Ôn thi B1 Tự chọn & B2 Tư vấn riêng) */
.journey-fork {
  margin-top: 1.5rem;
  padding: 1.35rem 1.5rem;
  border-top: none;
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-whisper);
  gap: 1.15rem;
}

.journey-branch {
  background-color: var(--bg-cool);
  border: 1px solid transparent;
  padding: 1.15rem 1.3rem;
}

.journey-branch:hover {
  background-color: var(--bg-page);
  border-color: var(--navi-navy);
}

.journey-branch.is-active {
  background-color: var(--bg-warm);
  border-color: var(--navi-cta-bg);
  box-shadow: 0 0 0 1px var(--navi-cta-bg);
}

.journey-branch__badge {
  background-color: var(--bg-page);
  color: var(--navi-navy);
  border: 1px solid var(--border-hairline);
}

/* Un-nested Level Finder Bar */
.level-finder {
  margin-top: 1.5rem;
  padding: 1.5rem 1.6rem;
  background-color: var(--bg-warm);
  border: 1px solid rgba(200, 62, 11, 0.2);
  border-radius: var(--radius-lg);
  gap: 1.5rem;
}

@media (min-width: 960px) {
  .level-finder {
    padding: 1.75rem 2rem;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 2.25rem;
  }
}

.level-chip {
  background-color: var(--bg-page);
  border-color: rgba(20, 42, 74, 0.14);
  color: var(--navi-navy);
  border-radius: var(--radius-sm);
  padding: 0.52rem 0.92rem;
}

.level-chip.is-active {
  background-color: var(--navi-navy);
  border-color: var(--navi-navy);
  color: var(--bg-page);
}

.level-finder__result {
  background-color: transparent;
  border: none;
  border-top: 1px solid rgba(200, 62, 11, 0.2);
  border-radius: 0;
  padding: 1.15rem 0 0;
  gap: 0.55rem;
}

.level-finder__rec-head {
  flex-wrap: wrap;
}

.level-finder__rec-course {
  white-space: normal;
  overflow-wrap: break-word;
}

@media (min-width: 960px) {
  .level-finder__result {
    border-top: none;
    border-left: 1px solid rgba(200, 62, 11, 0.2);
    padding: 0.25rem 0 0.25rem 2rem;
  }
}

/* 5. Pricing (#hoc-phi), Combo (#combo), Schedule (#lich-hoc), FAQ (#faq), Contact (#dang-ky) Card Breathing Room */
.pricing-ledger {
  border: 1px solid var(--border-hairline);
  border-top: 3px solid var(--navi-navy);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-whisper);
}

.pricing-row {
  padding: 1.4rem 1.35rem;
}

.pricing-note-bar {
  background-color: var(--bg-cool);
  border-color: transparent;
  border-radius: var(--radius-md);
  padding: 1.15rem 1.5rem;
}

.combo-panel {
  border-color: rgba(20, 42, 74, 0.12);
  box-shadow: var(--shadow-whisper);
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .combo-panel {
    padding: 2.1rem;
  }
}

.combo-panel--featured {
  border-color: var(--navi-navy);
  border-width: 2px;
}

.combo-panel__Save {
  background-color: var(--bg-cool);
  color: var(--navi-navy);
  border: none;
}

.combo-stage-row--last {
  background-color: var(--bg-cool);
  border: none;
}

.schedule-box {
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-top: 3px solid var(--navi-navy);
  border-radius: var(--radius-lg);
  padding: 1.65rem;
  box-shadow: var(--shadow-whisper);
}

.schedule-item {
  background-color: var(--bg-cool);
  border-color: transparent;
  padding: 1.1rem 1.25rem;
}

.schedule-item:hover {
  background-color: var(--bg-page);
  border-color: var(--navi-navy);
}

.steps-strip {
  border-top: none;
  padding-top: 1rem;
}

.step-item {
  padding: 1.4rem 1.35rem;
  border-color: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-whisper);
}

.faq-nav {
  background-color: var(--bg-cool);
  padding: 1rem;
  border-radius: var(--radius-lg);
}

.faq-cat-btn {
  border-color: transparent;
}

.faq-trigger {
  padding: 1.35rem 0.75rem;
}

.aside-box {
  padding: 1.6rem;
  border-color: var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-whisper);
}

.form-shell {
  border-color: var(--border-hairline);
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .form-shell {
    padding: 2.35rem;
  }
}

.consult-channel-card {
  padding: 1.4rem 1.5rem;
  border-width: 1px;
  border-color: var(--border-hairline);
}

.consult-channel-card--primary {
  background-color: var(--bg-warm);
  border-color: rgba(200, 62, 11, 0.28);
}

.consult-summary-box {
  padding: 1.5rem;
  background-color: var(--bg-cool);
  border: none;
  border-radius: var(--radius-lg);
}

.consult-summary-item {
  border-color: transparent;
}

.consult-template-box {
  border-color: var(--border-hairline);
}

/* ==========================================================================
   13. R3.3 LEAD INTAKE FORM (NETLIFY FORMS V1) & PRIVACY POLICY PAGE
   ========================================================================== */
.lead-form-card__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navi-orange-ink);
  margin-bottom: 0.25rem;
}

.lead-form-card__heading {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.5vw + 0.85rem, 1.48rem);
  font-weight: 800;
  color: var(--navi-navy);
  letter-spacing: -0.015em;
  margin: 0;
}

.lead-intake-form {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.form-shell,
.form-error-summary,
.confirm-panel,
.lead-error-panel,
.field-input,
.field-select,
.field-textarea,
.consent-card {
  scroll-margin-top: calc(var(--header-height) + 1.25rem);
}

.lead-intake-form[hidden] {
  display: none !important;
}

/* Honeypot Visually & Layout Hidden (Accessible to bots, invisible to users/AT) */
.lead-hp-wrap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.field-opt {
  font-weight: 500;
  font-size: 0.84rem;
  color: var(--ink-muted);
}

.field-hint {
  font-size: 0.82rem;
  color: var(--ink-muted);
  line-height: 1.45;
}

.field-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.field-counter {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.field-textarea[aria-invalid="true"] {
  border-color: var(--status-err);
  background-color: var(--status-err-bg);
}

.consent-card {
  background-color: var(--bg-cool);
  border: 1px solid rgba(20, 42, 74, 0.16);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  line-height: 1.6;
  color: var(--ink-primary);
  transition:
    border-color var(--dur-hover) var(--ease-out),
    background-color var(--dur-hover) var(--ease-out);
}

.consent-card:hover {
  border-color: var(--navi-navy);
}

.consent-card:has(input:checked) {
  background-color: var(--bg-warm);
  border-color: var(--navi-cta-bg);
}

.consent-card.is-invalid {
  border-color: var(--status-err);
  background-color: var(--status-err-bg);
}

.consent-card__link {
  color: var(--navi-navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent-card__link:hover,
.consent-card__link:focus-visible {
  color: var(--navi-orange-ink);
}

.lead-purpose-notice {
  margin-top: 0.25rem;
  padding: 0.9rem 1.05rem;
  background-color: var(--bg-cool);
  border-left: 3px solid var(--navi-navy);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  line-height: 1.62;
  color: var(--ink-secondary);
}

.lead-purpose-notice p {
  margin: 0;
}

.lead-purpose-notice strong {
  color: var(--navi-navy);
}

.lead-purpose-notice a {
  color: var(--navi-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lead-form-actions {
  margin-top: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
}

.lead-submit-note {
  font-size: 0.88rem;
  color: var(--ink-secondary);
}

.lead-submit-note strong {
  color: var(--navi-navy);
}

.lead-submit-btn__spinner {
  width: 16px;
  height: 16px;
  border: 2.2px solid rgba(255, 255, 255, 0.38);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  display: inline-block;
  animation: leadSpin 0.75s linear infinite;
}

.lead-submit-btn__spinner[hidden] {
  display: none !important;
}

@keyframes leadSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Confirmation & Error Panels */
.confirm-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.65rem;
}

.confirm-panel__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.26rem 0.65rem;
  border-radius: var(--radius-xs);
  background-color: var(--status-ok);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.confirm-panel__ref {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navi-navy);
}

.confirm-panel__summary {
  margin: 1rem 0 1.15rem;
  padding: 0.95rem 1.1rem;
  background-color: var(--bg-page);
  border: 1px solid var(--status-ok-border);
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.confirm-panel__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 0.9rem;
}

.confirm-panel__row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.confirm-panel__row dt {
  color: var(--ink-secondary);
  font-weight: 500;
}

.confirm-panel__row dd {
  margin: 0;
  color: var(--navi-navy);
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}

.confirm-panel__actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.lead-error-panel {
  margin-top: 1.15rem;
  padding: 1.2rem 1.25rem;
  background-color: var(--status-err-bg);
  border: 1.5px solid var(--status-err);
  border-radius: var(--radius-md);
}

.lead-error-panel[hidden] {
  display: none !important;
}

.lead-error-panel__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--status-err);
  margin: 0 0 0.4rem;
}

.lead-error-panel__desc {
  font-size: 0.92rem;
  line-height: 1.58;
  color: var(--ink-primary);
  margin: 0;
}

.lead-parallel-divider {
  margin-top: 1.85rem;
  margin-bottom: 1.1rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lead-parallel-divider span {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navi-navy);
}

/* Privacy Policy Page (chinh-sach-bao-ve-du-lieu.html) */
.privacy-policy-card {
  max-width: 880px;
  margin-inline: auto;
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-top: 4px solid var(--navi-navy);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  box-shadow: var(--shadow-whisper);
}

@media (min-width: 768px) {
  .privacy-policy-card {
    padding: 2.5rem 2.75rem;
  }
}

.privacy-policy-card__header {
  padding-bottom: 1.35rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-hairline);
}

.privacy-policy-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw + 0.8rem, 2.15rem);
  font-weight: 800;
  color: var(--navi-navy);
  line-height: 1.25;
  margin-top: 0.35rem;
}

.privacy-policy-card__meta {
  margin-top: 0.65rem;
  font-size: 0.92rem;
  color: var(--ink-secondary);
}

.privacy-policy-section,
.privacy-policy-card__section {
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--border-hairline);
}

.privacy-policy-section:last-of-type,
.privacy-policy-card__section:last-of-type {
  border-bottom: none;
}

.privacy-policy-section h2,
.privacy-policy-card__section h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navi-navy);
  margin-bottom: 0.6rem;
}

.privacy-policy-section p,
.privacy-policy-section li,
.privacy-policy-card__section p,
.privacy-policy-card__section li {
  font-size: 0.96rem;
  line-height: 1.68;
  color: var(--ink-secondary);
}

.privacy-policy-section ul,
.privacy-policy-card__section ul {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.privacy-policy-section strong,
.privacy-policy-card__section strong {
  color: var(--ink-primary);
}

.privacy-policy-section a,
.privacy-policy-card__section a {
  color: var(--navi-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.privacy-policy-card__actions {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 520px) {
  .lead-form-actions .btn,
  .confirm-panel__actions .btn,
  .privacy-policy-card__actions .btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
  .confirm-panel__row {
    flex-direction: column;
    gap: 0.15rem;
  }
  .confirm-panel__row dd {
    text-align: left;
  }
}

/* ==========================================================================
   14. R3.4 PREMIUM CLEAN & SMART INFORMATION (PROGRESSIVE DISCLOSURE & 1-COL FORM)
   ========================================================================== */

/* 14.1. Photo Proportions & Soft Card Restraint (Preventing Secondary Photo Dominance) */
.editorial-figure {
  border-color: var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-whisper);
}

.editorial-figure--banner .editorial-figure__media,
.editorial-figure--compact .editorial-figure__media {
  aspect-ratio: 16 / 9;
  max-height: 410px;
}

.editorial-figure--compact {
  margin-top: 2rem;
}

.editorial-figure__caption {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-hairline);
}

/* 14.2. Smart Information: Course Level Tabs & Progressive Disclosure Cards (#hoc-phi) */
.course-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem;
  background-color: var(--bg-cool);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

.course-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.55rem 1.05rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink-secondary);
  background-color: transparent;
  border: 1px solid transparent;
  transition:
    background-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out);
}

.course-tab__sub {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.78;
  padding-left: 0.4rem;
  border-left: 1px solid currentColor;
}

.course-tab:hover {
  color: var(--navi-navy);
  background-color: rgba(255, 255, 255, 0.72);
}

.course-tab.is-active,
.course-tab[aria-selected="true"] {
  background-color: var(--navi-navy);
  color: #FFFFFF;
  box-shadow: var(--shadow-whisper);
}

@media (max-width: 639px) {
  .course-tabs-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .course-tab:last-child {
    grid-column: 1 / -1;
  }
}

.course-catalog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 768px) {
  .course-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
  }
}

.combo-grid {
  align-items: start;
}

.course-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-whisper);
  transition:
    border-color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out);
}

.course-card:hover {
  border-color: rgba(20, 42, 74, 0.28);
  box-shadow: var(--shadow-hover);
}

.course-card[hidden] {
  display: none !important;
}

.course-card--highlight {
  background: linear-gradient(180deg, #FFF9F5 0%, #FFFFFF 100%);
  border-color: rgba(200, 62, 11, 0.24);
}

/* F5 (R-1): Đặt mã khóa (.course-card__code) và nhãn tư vấn học phí (.course-card__tuition-badge)
 * cùng hàng trên; đưa tiêu đề (.course-card__title) + đối tượng (.course-card__for) xuống hàng riêng
 * chiếm trọn 100% chiều rộng thẻ ở mọi kích thước màn hình (đặc biệt <= 480px: 390px, 360px, 320px)
 * để triệt tiêu hoàn toàn hiện tượng bóp hẹp tiêu đề và chồng chữ (0px overlap).
 */
.course-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.75rem;
}

.course-card__identity {
  display: contents;
}

.course-card__code {
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 34px;
  padding: 0 0.65rem;
  border-radius: var(--radius-xs);
  background-color: var(--bg-cool);
  color: var(--navi-navy);
  font-size: 0.9rem;
  font-weight: 800;
  flex-shrink: 0;
}

.course-card__identity > div {
  order: 3;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}

.course-card__step {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.course-card__title {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 800;
  color: var(--navi-navy);
  line-height: 1.3;
  margin-top: 0;
  width: 100%;
}

.course-card__for {
  margin-top: 0.22rem;
  font-size: 0.88rem;
  color: var(--ink-secondary);
}

.course-card__badge,
.course-card__tuition-badge {
  order: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.68rem;
  border-radius: var(--radius-xs);
  background-color: var(--bg-warm);
  color: var(--navi-orange-ink);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .course-card {
    padding: 1.1rem 1rem;
  }

  .course-card__title {
    font-size: 1.02rem;
    line-height: 1.32;
  }

  .course-card__for {
    font-size: 0.84rem;
  }

  .course-card__benefit {
    font-size: 0.92rem;
    line-height: 1.56;
  }
}

.course-card__badge--warm {
  background-color: var(--bg-warm);
  color: var(--navi-orange-ink);
}

.course-card__benefit {
  margin-top: 0.75rem;
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--ink-secondary);
}

.course-card__actions {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.course-accordion-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-xs);
  background-color: var(--bg-cool);
  border: 1px solid transparent;
  color: var(--navi-navy);
  font-size: 0.85rem;
  font-weight: 600;
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out);
}

.course-accordion-btn:hover {
  background-color: var(--bg-muted);
  border-color: rgba(20, 42, 74, 0.18);
}

.course-accordion-btn[aria-expanded="true"] {
  background-color: var(--bg-warm);
  color: var(--navi-orange-ink);
  border-color: rgba(200, 62, 11, 0.22);
}

.course-accordion-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(20, 42, 74, 0.08);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
}

.combo-accordion-wrap {
  margin-top: 1rem;
}

.combo-accordion-wrap .course-accordion-btn,
.course-accordion-btn--combo {
  width: 100%;
  padding: 0.65rem 1rem;
  border-color: var(--border-hairline);
}

.course-card__details {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
}

html.js-ready .course-card__details {
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 280ms var(--ease-out),
    opacity 200ms var(--ease-out);
}

html.js-ready .course-card__details.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.course-card__details-inner {
  overflow: hidden;
}

.course-detail-list {
  margin-top: 0.95rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border-strong);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-secondary);
}

.course-detail-list > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 0.5rem;
}

@media (max-width: 539px) {
  .course-detail-list > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

.course-detail-list dt {
  font-weight: 700;
  color: var(--navi-navy);
}

.course-detail-list dd {
  margin: 0;
}

.combo-panel__benefit,
.combo-panel__summary-benefit {
  margin-top: 0.85rem;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--ink-secondary);
}

.combo-panel__cta {
  margin-top: 1.25rem;
}

/* 14.3. Active Schedule Selection State & Banner (#lich-hoc) */
.schedule-item {
  border: 1.5px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background-color: var(--bg-cool);
  padding: 1rem 1.15rem;
}

.schedule-item__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-xs);
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navi-navy);
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out);
}

.schedule-item.is-selected,
.schedule-item[aria-pressed="true"] {
  background-color: var(--bg-warm) !important;
  border-color: var(--navi-cta-bg) !important;
  box-shadow: 0 0 0 1px var(--navi-cta-bg);
}

.schedule-item.is-selected .schedule-item__check,
.schedule-item[aria-pressed="true"] .schedule-item__check {
  background-color: var(--navi-cta-bg);
  border-color: var(--navi-cta-bg);
  color: #FFFFFF;
}

.schedule-selection-banner {
  margin-top: 1.5rem;
  padding: 1.15rem 1.4rem;
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-whisper);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
}

.schedule-selection-banner__info {
  font-size: 0.94rem;
  color: var(--ink-secondary);
}

.schedule-selection-banner__info strong {
  color: var(--navi-navy);
}

/* 14.4. Redesigned Consultation Form Section (#dang-ky — 40/60 Split on Desktop, Form First on Mobile F8/V-2) */
#dang-ky {
  scroll-margin-top: 74px;
}

@media (min-width: 1024px) {
  #dang-ky .enroll-layout {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    gap: 2.75rem;
    align-items: start;
  }

  #dang-ky .enroll-aside {
    position: sticky;
    top: 5.25rem;
  }
}

.enroll-main-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
  width: 100%;
  max-width: 580px;
}

@media (min-width: 1024px) {
  .enroll-main-col {
    max-width: 620px;
  }
}

/* Compact Teacher Portrait on Desktop & Form-First Order on Mobile (<= 1023px — F8 / V-2) */
.enroll-portrait--compact {
  border-color: var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-whisper);
}

@media (min-width: 1024px) {
  .enroll-portrait--compact img {
    aspect-ratio: 16 / 10;
    max-height: 220px;
    object-position: center 18%;
  }
}

@media (max-width: 1023px) {
  #dang-ky {
    scroll-margin-top: 64px;
    padding-top: 1.15rem;
  }

  #dang-ky .section-head {
    margin-bottom: 0.85rem;
    gap: 0.35rem;
  }

  #dang-ky .section-kicker {
    margin-bottom: 0.2rem;
  }

  #dang-ky .section-title {
    font-size: clamp(1.22rem, 4.2vw, 1.55rem);
    line-height: 1.24;
  }

  #dang-ky .section-lead {
    font-size: 0.86rem;
    line-height: 1.44;
  }

  #dang-ky .enroll-layout {
    gap: 1.25rem;
  }

  /* Đưa cột Form (.enroll-main-col) lên trước thẻ giáo viên & 3 bước (.enroll-aside) trên mobile */
  #dang-ky .enroll-main-col {
    order: 1;
    max-width: 100%;
  }

  #dang-ky .enroll-aside {
    order: 2;
  }

  #dang-ky .form-shell {
    padding: 1rem 0.95rem;
  }

  #dang-ky .lead-form-card__heading {
    font-size: 1.04rem;
    line-height: 1.26;
  }

  #dang-ky .lead-selection-bar {
    margin-top: 0.55rem;
    margin-bottom: 0.25rem;
    padding: 0.55rem 0.7rem;
    gap: 0.35rem 0.55rem;
  }

  #dang-ky .lead-intake-form {
    margin-top: 0.55rem;
  }

  .enroll-portrait--compact {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.9rem;
  }

  .enroll-portrait--compact img {
    width: 76px;
    height: 76px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    object-fit: cover;
    object-position: center 15%;
  }

  .enroll-portrait--compact figcaption {
    padding: 0;
    border-top: none;
    font-size: 0.85rem;
    line-height: 1.45;
  }

  .aside-box--steps {
    padding: 1rem 1.1rem;
  }
}

/* Compact Selection Chip Bar inside Form */
.lead-selection-bar {
  margin-top: 1rem;
  margin-bottom: 0.35rem;
  padding: 0.8rem 1rem;
  background-color: var(--bg-cool);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.85rem;
}

.lead-selection-bar__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  font-size: 0.85rem;
}

.lead-selection-bar__label {
  color: var(--ink-muted);
  font-weight: 600;
}

.lead-selection-chip,
.lead-chip__val {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-xs);
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  color: var(--navi-navy);
  font-weight: 700;
}

.lead-selection-chip[hidden] {
  display: none !important;
}

.lead-selection-chip.is-highlighted,
.lead-chip__val.is-highlighted {
  color: var(--navi-orange-ink);
  background-color: var(--bg-warm);
  border-color: rgba(200, 62, 11, 0.28);
}

.lead-selection-bar__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.lead-selection-bar__link,
.lead-chip__link {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navi-orange-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lead-selection-bar__clear {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-secondary);
  background-color: var(--bg-page);
  border: 1px solid var(--border-strong);
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-xs);
}

.lead-selection-bar__clear:hover {
  border-color: var(--navi-navy);
  color: var(--navi-navy);
}

.lead-selection-bar__clear[hidden] {
  display: none !important;
}

/* Notice Panel Styling */
.confirm-panel--notice {
  border-color: var(--navi-orange);
  background-color: #FFFBF7;
}

.confirm-panel--notice .confirm-panel__title {
  color: var(--navi-navy);
}

.confirm-panel--notice .confirm-panel__summary {
  background-color: var(--bg-page);
  border-color: var(--border-strong);
}

.confirm-panel__badge--demo {
  background-color: var(--bg-warm);
  color: var(--navi-orange-ink);
  border: 1px solid rgba(200, 62, 11, 0.32);
}

/* 1-Column Form Inputs & 24px Touch Consent Checkbox */
.lead-intake-form .field-group {
  margin-bottom: 1.05rem;
}

.consent-card,
.consent-card--compact {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.95rem 1.05rem;
  font-size: 0.9rem;
  line-height: 1.56;
}

.consent-card input[type="checkbox"],
.consent-card--compact input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin-top: 0.1rem;
  accent-color: var(--navi-cta-bg);
  flex-shrink: 0;
  cursor: pointer;
}

.lead-form-actions,
.lead-form-actions--single {
  margin-top: 1.15rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.lead-form-actions .btn--primary,
.lead-submit-btn--full {
  flex: 0 0 auto !important;
  width: 100%;
  justify-content: center;
  min-height: 52px;
  font-size: 1rem;
}

.lead-submit-note:empty {
  display: none;
}

/* Horizontal Direct Contact Bar below Form Card (F8 / V-1: 1 Row on Desktop, Compact Grid on Mobile) */
.quick-contact-bar {
  padding: 1.1rem 1.25rem;
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-whisper);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.quick-contact-bar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.85rem;
}

.quick-contact-bar__title,
.quick-contact-bar__kicker {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navi-navy);
}

.quick-contact-bar__copy-btn,
.quick-copy-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navi-orange-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quick-contact-bar__copy-btn:hover,
.quick-copy-link:hover {
  color: var(--navi-navy);
}

.quick-contact-bar__buttons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}

.quick-contact-bar__buttons .btn {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 40px;
  padding: 0.48rem 0.65rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

@media (max-width: 639px) {
  .quick-contact-bar {
    padding: 0.9rem 0.95rem;
    gap: 0.6rem;
  }

  .quick-contact-bar__buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .quick-contact-bar__buttons #cta-email-main {
    grid-column: 1 / -1;
  }

  .quick-contact-bar__buttons .btn {
    width: 100%;
    min-height: 40px;
    padding: 0.42rem 0.55rem;
    font-size: 0.8rem;
  }
}

.quick-contact-bar__status {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--status-ok);
}

.quick-contact-bar__status[hidden] {
  display: none !important;
}

/* ==========================================================================
   15. R3.6 & R3.7 VISUAL POLISH — HERO SKY-TO-PEACH PASTEL CANVAS & AIRY CARD ARCHITECTURE
   - R3.7 Hero Background Correction: Áp dụng nền pastel chuyển màu mượt cho TOÀN BỘ #hero
     theo đúng ảnh tham chiếu Founder duyệt:
       + Trên: xanh da trời pastel sáng (#DCF0FD / #E4F3FE)
       + Giữa: xanh trắng rất nhạt (#F3F8FE -> #FAFCFF)
       + Dưới: kem hồng / cam đào nhạt (#FFF2EA -> #FFE8DA)
       + Kèm lưới kiến trúc cực mờ (~2.2% opacity) không gây nhiễu chữ.
   - Chỉnh ranh giới giữa Hero và khung tra cứu 8 khóa học (.hero-blueprint) thành mặt thẻ
     trắng ngà trong trẻo nổi liền mạch trên nền pastel chung của #hero (loại bỏ mảng trắng
     lớn phía trên tách rời với hộp cam kem phía dưới).
   - Áp dụng ngôn ngữ nền pastel mềm + micro-grid cực mờ có chọn lọc tại:
     (0) Hero đầu trang (#hero — tâm điểm thị giác xanh pastel -> xanh trắng -> kem đào)
     (1) Lộ trình học (#lo-trinh) & Học phí / Chi tiết khóa học (#hoc-phi)
     (2) Khu đăng ký tư vấn / nhận thông tin (#dang-ky)
     (3) CTA cuối trang (.quick-contact-bar & .schedule-selection-banner)
   - Các section còn lại (#gioi-thieu, #loi-the, #combo, #lich-hoc, #faq) giữ nền trắng
     hoặc sương nhạt xen kẽ để trang có nhịp thở và không bị phủ gradient liên tục.
   - Card / form / bảng thông tin bên trong giữ trắng (#FFFFFF) hoặc trắng kem (#FFFDFB),
     bo góc mềm hơn (20px cho card/form, 12px cho nút/input), viền mảnh hơn (1px hairline),
     bỏ viền đỉnh 3px cứng và giảm cảm giác box lồng box.
   ========================================================================== */

:root {
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --border-hairline: rgba(20, 42, 74, 0.075);
  --border-strong: rgba(20, 42, 74, 0.13);
  --shadow-whisper: 0 12px 32px -10px rgba(20, 42, 74, 0.055), 0 2px 6px -1px rgba(20, 42, 74, 0.028);
  --shadow-hover: 0 18px 40px -12px rgba(20, 42, 74, 0.095), 0 4px 12px -2px rgba(20, 42, 74, 0.04);
  --shadow-float: 0 22px 48px -14px rgba(20, 42, 74, 0.09), 0 6px 16px -4px rgba(20, 42, 74, 0.035);
}

html {
  scroll-behavior: auto;
}

/* 15.1. Alternating Clean Section Canvas vs. Selected Soft Pastel Ambient Sections */
#loi-the,
#combo,
#faq {
  background: #FFFFFF;
}

#gioi-thieu {
  background: linear-gradient(180deg, #FFF9F4 0%, #FFFDFB 8%, #FFFFFF 22%, #FFFFFF 100%);
}

#lich-hoc {
  background: linear-gradient(180deg, #F9FBFE 0%, #FFFFFF 100%);
}

/* Hero (#hero) + Priority Area 1 (#lo-trinh & #hoc-phi) + Priority Area 2 (#dang-ky):
 * Airy High-White Pastel Gradient (lightened 20-25%: soft pastel sky -> expansive pure white -> delicate warm cream)
 * R3.8 Boundary Feathering: Continuous CSS color handoff across #hero -> #gioi-thieu and #lo-trinh -> #hoc-phi (zero hard seam)
 */
#hero,
#lo-trinh,
#hoc-phi,
#dang-ky {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid rgba(20, 42, 74, 0.055);
}

#hero,
#lo-trinh {
  border-bottom: none;
}

#hero {
  background:
    radial-gradient(68% 46% at 16% 6%, rgba(176, 220, 255, 0.28) 0%, rgba(176, 220, 255, 0) 100%),
    radial-gradient(64% 44% at 86% 10%, rgba(196, 228, 255, 0.22) 0%, rgba(196, 228, 255, 0) 100%),
    radial-gradient(68% 40% at 50% 82%, rgba(255, 212, 186, 0.18) 0%, rgba(255, 212, 186, 0) 100%),
    linear-gradient(
      180deg,
      #E7F4FE 0%,
      #F2F8FE 20%,
      #FAFCFF 38%,
      #FFFFFF 62%,
      #FFF6EE 84%,
      #FFF9F4 100%
    );
}

#lo-trinh {
  background:
    radial-gradient(62% 50% at 14% 10%, rgba(186, 224, 255, 0.18) 0%, rgba(186, 224, 255, 0) 100%),
    radial-gradient(60% 40% at 86% 78%, rgba(255, 212, 186, 0.16) 0%, rgba(255, 212, 186, 0) 100%),
    linear-gradient(
      180deg,
      #F0F7FE 0%,
      #FAFCFF 28%,
      #FFFFFF 62%,
      #FFF7F0 84%,
      #FFFBF8 93%,
      #F9FBFE 100%
    );
}

#hoc-phi {
  background:
    radial-gradient(58% 40% at 86% 20%, rgba(186, 224, 255, 0.15) 0%, rgba(186, 224, 255, 0) 100%),
    radial-gradient(60% 48% at 14% 90%, rgba(255, 212, 186, 0.16) 0%, rgba(255, 212, 186, 0) 100%),
    linear-gradient(
      180deg,
      #F9FBFE 0%,
      #F3F8FE 12%,
      #FFFFFF 32%,
      #FFFFFF 70%,
      #FFF8F2 100%
    );
}

#dang-ky {
  background:
    radial-gradient(64% 52% at 16% 12%, rgba(186, 224, 255, 0.20) 0%, rgba(186, 224, 255, 0) 100%),
    radial-gradient(64% 52% at 84% 88%, rgba(255, 210, 182, 0.20) 0%, rgba(255, 210, 182, 0) 100%),
    linear-gradient(180deg, #EFF7FE 0%, #FAFCFF 30%, #FFFFFF 68%, #FFF6EE 100%);
}

/* Ultra-subtle architectural micro-grid (~1.7% opacity, faded smoothly at edges) */
#hero::before,
#lo-trinh::before,
#hoc-phi::before,
#dang-ky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(20, 42, 74, 0.017) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 42, 74, 0.017) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 88% 82% at 50% 48%, #000000 32%, transparent 100%);
  mask-image: radial-gradient(ellipse 88% 82% at 50% 48%, #000000 32%, transparent 100%);
}

/* Crisp Pure-White Hero Interior Surfaces (Teacher Photo, Course Lookup, Outline CTA) */
#hero .btn--outline {
  background-color: #FFFFFF;
  border-color: rgba(20, 42, 74, 0.14);
  box-shadow: 0 4px 12px -4px rgba(20, 42, 74, 0.05);
}

#hero .btn--outline:hover,
#hero .btn--outline:focus-visible {
  background-color: #FFFFFF;
  border-color: var(--navi-navy);
}

#hero .hero-ledger {
  border-top-color: rgba(20, 42, 74, 0.08);
}

#hero .hero-ledger__item {
  border-left-color: rgba(20, 42, 74, 0.12);
}

#hero .editorial-figure--hero {
  background-color: #FFFFFF;
  border: 1px solid rgba(20, 42, 74, 0.08);
  border-radius: 20px;
  box-shadow: 0 18px 40px -14px rgba(20, 42, 74, 0.085), 0 4px 12px -2px rgba(20, 42, 74, 0.03);
}

#hero .editorial-figure--hero .editorial-figure__caption {
  background-color: #FFFFFF;
  border-top-color: rgba(20, 42, 74, 0.06);
}

/* 15.2. Softened Radii, Thinner Hairline Borders & De-boxed Surfaces */
.btn,
.field-input,
.field-select,
.field-textarea {
  border-radius: 12px;
}

.field-input,
.field-select,
.field-textarea {
  border: 1px solid rgba(20, 42, 74, 0.13);
  background-color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 42, 74, 0.02);
}

/* Remove rigid 3px top borders & soften outer cards to 20px radius with delicate hairline borders */
.pillar-ledger,
.journey-group,
.pricing-ledger,
.schedule-box {
  border-top: 1px solid var(--border-hairline);
}

.course-card,
.combo-panel,
.form-shell,
.quick-contact-bar,
.aside-box,
.journey-group,
.journey-fork,
.level-finder,
.schedule-box,
.intro-audience,
.pillar-ledger,
.hero-blueprint,
.schedule-selection-banner,
.enroll-portrait--compact {
  border-radius: 20px;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-whisper);
}

.hero-blueprint {
  background: #FFFFFF;
  border: 1px solid rgba(20, 42, 74, 0.08);
  box-shadow: 0 16px 38px -14px rgba(20, 42, 74, 0.07), 0 4px 12px -2px rgba(20, 42, 74, 0.025);
}

.hero-blueprint .blueprint-pill:not(.is-active) {
  background-color: #F8FAFD;
  border-color: rgba(20, 42, 74, 0.1);
}

.hero-blueprint .blueprint-pill:not(.is-active):hover {
  background-color: #FFFFFF;
  border-color: var(--navi-navy);
}

.hero-blueprint__card {
  background-color: #FFFFFF;
  border: 1px solid rgba(20, 42, 74, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 24px -10px rgba(20, 42, 74, 0.05);
}

/* De-box Roadmap (#lo-trinh): Crisp White Level Cards + Soft Un-bordered Course Nodes + Ivory Level Finder */
.journey-group {
  background-color: #FFFFFF;
  border-color: rgba(20, 42, 74, 0.07);
}

.journey-group__head {
  border-bottom-color: rgba(20, 42, 74, 0.065);
}

.journey-node {
  background-color: #F7FAFE;
  border: 1px solid rgba(20, 42, 74, 0.045);
  border-radius: 14px;
}

.journey-node:hover {
  background-color: #FFFFFF;
  border-color: rgba(20, 42, 74, 0.22);
  box-shadow: 0 6px 16px -6px rgba(20, 42, 74, 0.07);
}

.journey-node.is-active {
  background-color: #FFF7F1;
  border-color: rgba(200, 62, 11, 0.45);
  box-shadow: 0 6px 18px -6px rgba(200, 62, 11, 0.12);
}

.journey-fork {
  background-color: #FFFFFF;
  border-color: rgba(20, 42, 74, 0.07);
}

.journey-branch {
  background-color: #F7FAFE;
  border: 1px solid rgba(20, 42, 74, 0.05);
  border-radius: 14px;
}

.journey-node.is-in-plan,
.journey-branch.is-in-plan {
  background-color: #FFFFFF;
  border-color: rgba(200, 62, 11, 0.28);
  box-shadow: inset 0 0 0 1px rgba(200, 62, 11, 0.1), 0 4px 12px -6px rgba(20, 42, 74, 0.06);
}

.journey-node.is-in-plan .journey-node__step {
  color: var(--navi-orange-ink);
}

.journey-node.is-in-plan .journey-node__dot {
  background-color: #FFF3E8;
  border: 1.5px solid var(--navi-cta-bg);
  box-sizing: border-box;
  transform: none;
}

.journey-branch.is-in-plan .journey-branch__badge {
  background-color: #FFF3E8;
  color: var(--navi-orange-ink);
  border-color: rgba(200, 62, 11, 0.28);
}

.level-finder {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF9F5 100%);
  border: 1px solid rgba(200, 62, 11, 0.14);
  box-shadow: var(--shadow-whisper);
}

.level-finder__result {
  border-color: rgba(20, 42, 74, 0.08);
}

.level-chip {
  background-color: #FFFFFF;
  border: 1px solid rgba(20, 42, 74, 0.11);
  border-radius: 999px;
  padding: 0.48rem 0.95rem;
}

/* De-box Course Catalog (#hoc-phi): Floating White Pill Tab Bar & Soft White Course Cards */
.course-tabs-bar {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(20, 42, 74, 0.075);
  border-radius: 16px;
  padding: 0.4rem;
  box-shadow: 0 8px 24px -10px rgba(20, 42, 74, 0.05);
}

.course-tab {
  border-radius: 12px;
}

.course-card {
  background-color: #FFFFFF;
  border: 1px solid rgba(20, 42, 74, 0.07);
}

.course-card--highlight,
.pricing-row--special,
.pricing-row--b2 {
  background: linear-gradient(180deg, #FFFDFB 0%, #FFFFFF 100%);
  border: 1px solid rgba(200, 62, 11, 0.16);
  border-left: 1px solid rgba(200, 62, 11, 0.16);
}

.course-card__actions {
  border-top: 1px solid rgba(20, 42, 74, 0.065);
}

.course-accordion-btn {
  border-radius: 10px;
  background-color: #F6F9FD;
}

.course-detail-list {
  border-top: 1px solid rgba(20, 42, 74, 0.07);
}

/* Combo (#combo) & Schedule (#lich-hoc) Softening */
.combo-panel {
  background-color: #FFFFFF;
  border: 1px solid rgba(20, 42, 74, 0.08);
}

.combo-panel--featured {
  background: linear-gradient(180deg, #FFFDFB 0%, #FFFFFF 100%);
  border: 1.5px solid rgba(20, 42, 74, 0.24);
}

.schedule-item {
  border: 1px solid rgba(20, 42, 74, 0.07);
  border-radius: 14px;
  background-color: #F7FAFE;
}

.schedule-selection-banner {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8F2 100%);
  border: 1px solid rgba(200, 62, 11, 0.15);
}

/* 15.3. Consultation Intake Form (#dang-ky) & Closing CTA Band (.quick-contact-bar) */
.form-shell {
  background-color: #FFFFFF;
  border: 1px solid rgba(20, 42, 74, 0.075);
  box-shadow: var(--shadow-float);
}

.enroll-portrait--compact,
.aside-box {
  background-color: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 42, 74, 0.07);
}

.lead-selection-bar {
  background-color: #F8FAFE;
  border: 1px solid rgba(20, 42, 74, 0.07);
  border-radius: 14px;
}

.lead-selection-chip {
  border-radius: 8px;
  border-color: rgba(20, 42, 74, 0.08);
}

.consent-card,
.consent-card--compact {
  background-color: #F8FAFE;
  border: 1px solid rgba(20, 42, 74, 0.11);
  border-radius: 14px;
}

.confirm-panel,
.confirm-panel--notice {
  border-radius: 14px;
  border: 1px solid rgba(200, 62, 11, 0.28);
  background-color: #FFFBF8;
}

/* Priority Area 3 & Fix N-2: Closing CTA Band (.quick-contact-bar)
 * - Soft warm ivory-pastel surface with hairline border & rounded 20px corners
 * - Responsive Grid for buttons so every button stays 100% inside the card (0px overflow at 1440/1280/1024/768)
 *   and never clips text at 390/360/320px (scrollWidth <= clientWidth).
 */
.quick-contact-bar {
  padding: 1.2rem 1.35rem;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(240, 92, 34, 0.065) 0%, transparent 70%),
    linear-gradient(135deg, #FFFFFF 0%, #FFF9F4 100%);
  border: 1px solid rgba(200, 62, 11, 0.15);
  border-radius: 20px;
  box-shadow: var(--shadow-whisper);
  gap: 0.8rem;
}

.quick-contact-bar__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  width: 100%;
}

.quick-contact-bar__buttons #cta-email-main {
  grid-column: 1 / -1;
}

.quick-contact-bar__buttons .btn {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  padding: 0.52rem 0.75rem;
  font-size: 0.84rem;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

@media (max-width: 479px) {
  .quick-contact-bar {
    padding: 0.95rem 1rem;
    gap: 0.65rem;
  }

  .quick-contact-bar__buttons {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .quick-contact-bar__buttons #cta-email-main {
    grid-column: auto;
  }

  .quick-contact-bar__buttons .btn {
    padding: 0.48rem 0.45rem;
    font-size: 0.76rem;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }
}

/* Fix P3: Compact mobile header & lead spacing in #dang-ky so clicking any CTA shows
 * .section-kicker ("08 · ĐĂNG KÝ TƯ VẤN & XẾP LỚP"), h2, AND #lead-full-name in the viewport simultaneously
 */
@media (max-width: 1023px) {
  #dang-ky {
    padding-top: 1rem;
  }

  #dang-ky .section-head {
    margin-bottom: 0.65rem;
    gap: 0.25rem;
  }

  #dang-ky .section-kicker {
    margin-bottom: 0.15rem;
    font-size: 0.72rem;
  }

  #dang-ky .section-title {
    font-size: clamp(1.16rem, 4vw, 1.45rem);
    line-height: 1.22;
  }

  #dang-ky .section-lead {
    font-size: 0.82rem;
    line-height: 1.38;
  }
}

/* ==========================================================================
   15. C4-A & D-2 FOOTER CORPORATE ENTITY & DATA NOTICE (T1d)
   ========================================================================== */
.site-footer__legal {
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--border-hairline);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}

@media (min-width: 860px) {
  .site-footer__legal {
    grid-template-columns: 1fr 1.25fr;
    gap: 2.5rem;
    align-items: start;
  }
}

.site-footer__legal-block {
  min-width: 0;
}

.site-footer__legal-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navi-navy);
  margin-bottom: 0.5rem;
}

.site-footer__entity-list {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

.site-footer__entity-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.site-footer__entity-item dt {
  font-weight: 600;
  color: var(--ink-secondary);
}

.site-footer__entity-item dd {
  margin: 0;
  color: var(--ink-primary);
  overflow-wrap: anywhere;
}

.site-footer__legal-text {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   16. R3.9 UI VISUAL POLISH SAU DEPLOY (5 TARGETED POINTS — ATLAS BRIEF)
   1) Dải thông tin đầu trang (.hero-ledger): 4 khối thẻ có phân cấp thị giác rõ,
      số liệu chính nổi bật, chú thích nhỏ hơn, desktop 4 cột ngang, mobile 2 cột.
   2) Khu vực Giới thiệu & Lợi thế (#gioi-thieu & #loi-the): tăng độ nổi bật,
      giảm mật độ chữ, làm nổi bật giá trị học tập thay vì ảnh tài liệu thu nhỏ.
   3) Ảnh bài giảng (Slot 02, 03, 04–06): chuẩn hóa tỷ lệ khung 16:10, xóa giới hạn
      max-height: 410px gây lệch khung phải ở Slot 03, không cắt mất nội dung bài học.
   4) Lộ trình học (#lo-trinh): tiêu đề "Lộ trình học tiếng Đức A1.1 → B1.2" kèm
      dòng phụ (.section-subtitle) giải thích rõ hai hướng sau B1.2.
   5) Ảnh cô Tường Ngân (Slot 01 & Slot 07): khung 6:5 cân đối cho ảnh vest xanh
      đưa tay giới thiệu ở Hero, khung 4:3 rõ nét cho ảnh sơ mi sọc ở mục phụ #dang-ky.
   ========================================================================== */

/* 16.1. Point 1 — Dải thông tin đầu trang (.hero-ledger) */
#hero .hero-ledger {
  margin-top: 1.65rem;
  padding-top: 0;
  border-top: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

@media (min-width: 768px) {
  #hero .hero-ledger {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
  }
}

#hero .hero-ledger__item {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(20, 42, 74, 0.11);
  border-top: 3px solid var(--navi-orange);
  border-left: 1px solid rgba(20, 42, 74, 0.11);
  border-radius: 14px;
  padding: 0.85rem 0.9rem;
  box-shadow: 0 10px 24px -12px rgba(20, 42, 74, 0.08), 0 2px 6px -1px rgba(20, 42, 74, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}

#hero .hero-ledger__item:nth-child(even) {
  border-top-color: var(--navi-navy);
}

#hero .hero-ledger__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(20, 42, 74, 0.2);
  border-top-color: var(--navi-orange);
}

.hero-ledger__kicker {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navi-orange-ink);
  margin-bottom: 0.22rem;
}

#hero .hero-ledger__item:nth-child(even) .hero-ledger__kicker {
  color: var(--navi-navy);
}

#hero .hero-ledger__val {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.5vw + 0.88rem, 1.16rem);
  font-weight: 800;
  color: var(--navi-navy);
  line-height: 1.22;
  letter-spacing: -0.015em;
}

#hero .hero-ledger__lbl {
  margin-top: 0.26rem;
  font-size: 0.78rem;
  color: var(--ink-secondary);
  line-height: 1.38;
}

@media (max-width: 374px) {
  #hero .hero-ledger {
    gap: 0.5rem;
  }
  #hero .hero-ledger__item {
    padding: 0.7rem 0.65rem;
  }
  #hero .hero-ledger__val {
    font-size: 0.94rem;
  }
  #hero .hero-ledger__lbl {
    font-size: 0.73rem;
  }
}

/* 16.2. Point 5 — Ảnh cô Tường Ngân (Slot 01 Hero & Slot 07 #dang-ky) */
#hero .editorial-figure--hero .editorial-figure__media {
  width: 100%;
  aspect-ratio: 6 / 5;
  background-color: #FFFDFB;
}

#hero .editorial-figure--hero .editorial-figure__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

@media (min-width: 1024px) {
  .enroll-portrait--compact img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: none;
    object-fit: cover;
    object-position: center 14%;
    display: block;
  }
}

/* 16.3. Point 2 — Khu vực Giới thiệu (#gioi-thieu) & Lợi thế (#loi-the) */
.intro-audience {
  margin-top: 1.65rem;
  padding: 1.35rem 1.4rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF8 100%);
  border: 1px solid rgba(200, 62, 11, 0.16);
  border-radius: 18px;
  box-shadow: var(--shadow-whisper);
}

.intro-audience__heading {
  font-family: var(--font-display);
  font-size: 1.04rem;
  font-weight: 800;
  color: var(--navi-navy);
  margin-bottom: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.intro-audience__heading::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--navi-orange);
  flex-shrink: 0;
}

.intro-audience__list {
  display: grid;
  gap: 0.75rem;
}

.intro-audience__item {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  background-color: #FFFFFF;
  border: 1px solid rgba(20, 42, 74, 0.08);
  border-radius: 12px;
  font-size: 0.93rem;
  line-height: 1.5;
}

.intro-audience__bullet {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  background-color: var(--navi-orange-soft);
  border: 1px solid var(--navi-orange-border);
  color: var(--navi-orange-ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.intro-audience__body {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

.intro-audience__label {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--navi-navy);
}

/* 4 nguyên tắc tổ chức lớp học (.pillar-ledger) -> 2x2 Elevated Feature Cards */
.pillar-ledger {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
}

@media (min-width: 560px) {
  .pillar-ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pillar-row {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.15rem 1.2rem;
  background-color: #FFFFFF;
  border: 1px solid rgba(20, 42, 74, 0.1);
  border-top: 3px solid var(--navi-navy);
  border-radius: 16px;
  box-shadow: var(--shadow-whisper);
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}

.pillar-row:nth-child(odd) {
  border-top-color: var(--navi-orange);
}

.pillar-row:hover {
  background-color: #FFFFFF;
  padding-left: 1.2rem;
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.pillar-row__num {
  align-self: flex-start;
  padding: 0.18rem 0.55rem;
  border-radius: 6px;
  background-color: var(--navi-orange-soft);
  border: 1px solid var(--navi-orange-border);
  color: var(--navi-orange-ink);
  font-size: 0.76rem;
  font-weight: 800;
}

.pillar-row:nth-child(even) .pillar-row__num {
  background-color: #EEF4FB;
  border-color: rgba(20, 42, 74, 0.14);
  color: var(--navi-navy);
}

.pillar-row__title {
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--navi-navy);
}

.pillar-row__desc {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  line-height: 1.52;
  color: var(--ink-secondary);
}

/* 6 Lợi thế cốt lõi (.advantage-matrix) */
#loi-the {
  background: linear-gradient(180deg, #F5F9FE 0%, #FFFFFF 45%, #F8FAFE 100%);
}

.advantage-matrix {
  gap: 1.15rem;
}

.advantage-cell {
  padding: 1.5rem 1.45rem;
  background-color: #FFFFFF;
  border: 1px solid rgba(20, 42, 74, 0.1);
  border-top: 3px solid var(--navi-orange);
  border-radius: 18px;
  box-shadow: var(--shadow-whisper);
  gap: 0.85rem;
  transition: transform var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}

.advantage-cell:nth-child(even) {
  border-top-color: var(--navi-navy);
}

.advantage-cell:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.advantage-cell__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.advantage-cell__idx {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background-color: var(--navi-orange-soft);
  border: 1px solid var(--navi-orange-border);
  color: var(--navi-orange-ink);
  font-size: 0.8rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.advantage-cell:nth-child(even) .advantage-cell__idx {
  background-color: #EEF4FB;
  border-color: rgba(20, 42, 74, 0.14);
  color: var(--navi-navy);
}

.advantage-cell__tag {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--navi-navy);
  background-color: #F3F7FC;
  border: 1px solid rgba(20, 42, 74, 0.08);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.advantage-cell__title {
  font-size: 1.16rem;
  font-weight: 800;
  color: var(--navi-navy);
}

.advantage-cell__desc {
  margin-top: 0.38rem;
  font-size: 0.94rem;
  line-height: 1.58;
  color: var(--ink-secondary);
}

/* 16.4. Point 3 — Ảnh bài giảng & học liệu (Slot 02, 03, 04–06) */
.editorial-figure--compact .editorial-figure__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: none;
  background-color: #FFFFFF;
}

.editorial-figure--compact .editorial-figure__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.editorial-figure--banner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 2.25rem;
  background-color: #FFFFFF;
  border: 1px solid rgba(20, 42, 74, 0.11);
  border-radius: 20px;
  box-shadow: var(--shadow-float);
}

.editorial-figure--banner .editorial-figure__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: none;
  background-color: #FAF6F0;
}

.editorial-figure--banner .editorial-figure__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hệ sinh thái học liệu (.photo-cluster): Value-First Showcase Cards */
.photo-cluster {
  margin-top: 2.5rem;
  padding: 1.85rem 1.5rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF9F4 100%);
  border: 1px solid rgba(200, 62, 11, 0.15);
  border-radius: 22px;
  box-shadow: var(--shadow-whisper);
}

@media (min-width: 768px) {
  .photo-cluster {
    padding: 2.25rem 2.25rem;
  }
}

.photo-cluster__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(20, 42, 74, 0.08);
}

@media (min-width: 900px) {
  .photo-cluster__head {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    gap: 2rem;
  }
}

.photo-cluster__kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navi-orange-ink);
  margin-bottom: 0.35rem;
}

.photo-cluster__title {
  font-size: clamp(1.28rem, 1.5vw + 0.8rem, 1.6rem);
  font-weight: 800;
  color: var(--navi-navy);
  margin-bottom: 0;
  line-height: 1.28;
}

.photo-cluster__lead {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.58;
  color: var(--ink-secondary);
}

.photo-cluster__item {
  background-color: #FFFFFF;
  border: 1px solid rgba(20, 42, 74, 0.11);
  border-radius: 16px;
  box-shadow: var(--shadow-whisper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.photo-cluster__caption {
  padding: 1.15rem 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border-bottom: 1px solid rgba(20, 42, 74, 0.07);
}

.photo-cluster__badge {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navi-orange-ink);
  background-color: var(--navi-orange-soft);
  border: 1px solid var(--navi-orange-border);
  padding: 0.18rem 0.58rem;
  border-radius: 999px;
  margin-bottom: 0.15rem;
}

.photo-cluster__caption strong {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--navi-navy);
  line-height: 1.3;
}

.photo-cluster__caption span:not(.photo-cluster__badge) {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

.photo-cluster__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: #F8FAFD;
  border-bottom: none;
  padding: 0.45rem;
}

.photo-cluster__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(20, 42, 74, 0.06);
}

/* 16.5. Point 4 — Lộ trình học (#lo-trinh) Subtitle Line */
.section-subtitle {
  margin-top: 0.65rem;
  margin-bottom: 0;
  padding: 0.5rem 0.9rem;
  background-color: #FFF6EE;
  border: 1px solid rgba(200, 62, 11, 0.22);
  border-left: 3px solid var(--navi-orange);
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.48;
  color: var(--navi-navy);
  display: inline-block;
}

.section-subtitle strong {
  color: var(--navi-orange-ink);
  font-weight: 700;
}