/* ═══════════════════════════════════════════════════════════════
   GAT ACADEMY — MAIN STYLESHEET v3.0 (Academy-premium)
   Spirit ref: gein.edu.vn — Navy deep · Gold · White
   Fonts: Montserrat (heading) · Be Vietnam Pro (body)
═══════════════════════════════════════════════════════════════ */
/* ── Variables ── */
:root {
  /* Brand palette */
  --navy:        #062B5F;
  --navy-dark:   #031B3D;
  --navy-mid:    #0D3B8C;
  --gold:        #D8B46A;
  --gold-light:  #F5EDD6;
  --gold-dark:   #B8913E;
  --blue-accent: #0EA5E9;
  --blue-light:  #EEF7FF;
  --red:         #D8B46A;
  --red-dark:    #B88A2E;
  --red-light:   #FFF4D6;
  --white:       #FFFFFF;
  --gray-light:  #F5F7FA;
  --gray-mid:    #E2E8F0;
  --gray:        #9CA3AF;
  --dark:        #062B5F;
  --text:        #062B5F;
  --text-light:  #5B6B84;

  --font-heading: 'Montserrat', 'Be Vietnam Pro', Arial, sans-serif;
  --font-body:    'Be Vietnam Pro', 'Inter', Arial, sans-serif;

  --container:   1200px;
  --radius:      6px;
  --radius-lg:   12px;
  --shadow:      0 2px 12px rgba(6,43,95,.10);
  --shadow-lg:   0 8px 32px rgba(6,43,95,.16);
  --transition:  0.25s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  background: var(--white);
  overflow-x: clip; /* clip, not hidden — hidden creates scroll context that breaks position:sticky */
}
body.mobile-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* ── Container ── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 28px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
}
.btn--red {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn--red:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  box-shadow: 0 4px 16px rgba(216,180,106,.35);
}
.btn--navy {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.btn--navy:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
}
.btn--outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.6);
}
.btn--outline-white:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}
.btn--outline-red {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
}
.btn--outline-red:hover {
  background: var(--red);
  color: var(--white);
}
.btn--lg { padding: 14px 36px; font-size: 17px; }
.btn--sm { padding: 8px 20px; font-size: 13px; }
.btn--header-cta { padding: 10px 22px; font-size: 13px; }

/* ── Section base ── */
.section { padding: 72px 0; }
.section--gray { background: var(--gray-light); }
.section--navy {
  background: var(--navy);
  color: var(--white);
}
.section--dark {
  background: var(--navy-dark);
  color: var(--white);
}
.section--red {
  background: var(--red);
  color: var(--white);
}
.section--sm { padding: 48px 0; }
.section--lg { padding: 96px 0; }

.section-header { text-align: center; margin-bottom: 52px; }
.section-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--red-light);
  padding: 4px 12px;
  border-radius: 2px;
  margin-bottom: 12px;
}
.section--navy .section-label,
.section--dark .section-label {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
}
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 16px;
}
.section--navy .section-title,
.section--dark .section-title { color: var(--white); }
.section-subtitle {
  font-size: 16px;
  color: var(--text-light);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}
.section--navy .section-subtitle,
.section--dark .section-subtitle { color: rgba(255,255,255,.75); }

/* ── TOP BAR ── */
.top-bar {
  background: var(--navy-dark);
  color: rgba(255,255,255,.85);
  font-size: 13px;
  padding: 8px 0;
  position: relative;
  z-index: 1000;
}
.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.top-bar__left,
.top-bar__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.top-bar__contact,
.top-bar__link {
  color: rgba(255,255,255,.8);
  transition: color var(--transition);
  display: flex;
  align-items: center;
  gap: 5px;
}
.top-bar__contact:hover,
.top-bar__link:hover { color: var(--white); }
.top-bar__contact strong { color: var(--white); }
.top-bar__sep { color: rgba(255,255,255,.3); }
.top-bar__icon { font-size: 12px; }

/* ── SITE HEADER ── */
.site-header {
  background: var(--white);
  box-shadow: 0 2px 8px rgba(10,37,88,.10);
  position: sticky;
  top: 0;
  z-index: 900;
  transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: 0 4px 20px rgba(10,37,88,.18); }
.site-header__inner {
  display: flex;
  align-items: center;
  height: 70px;
  gap: 24px;
}

/* Logo */
.site-header__logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; }
.logo-text { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.logo-text__gat {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--red);
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.logo-text__academy {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Logo image (replaces text logo) */
.site-logo__img {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}
.site-logo__img--sm { height: 44px; }
.site-logo__img--auth {
  height: 80px;
  width: auto;
  margin: 0 auto 12px;
  display: block;
}
.mobile-menu__logo-link { text-decoration: none; display: flex; align-items: center; gap: 10px; }

/* ── Logo Icon Wrap + Wordmark ── */
.logo-icon-wrap {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--navy-dark);
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.logo-icon-wrap--sm { width: 40px; height: 40px; border-radius: 8px; }
.logo-icon-wrap .site-logo__img {
  width: 100%; height: 100%;
  object-fit: contain;
  flex-shrink: initial;
}
.logo-wordmark { display: flex; flex-direction: column; line-height: 1.25; }
.logo-wordmark__name {
  font-family: var(--font-heading);
  font-size: 20px; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--navy);
  line-height: 1.1;
}
.logo-wordmark__tagline {
  font-size: 10px; font-weight: 600;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 2px;
}
/* Dark background contexts (footer, mobile menu header) */
.logo-wordmark--footer .logo-wordmark__name,
.mobile-menu__header .logo-wordmark__name { color: var(--white); }
.logo-wordmark--footer .logo-wordmark__tagline,
.mobile-menu__header .logo-wordmark__tagline { color: rgba(255,255,255,.6); }
/* Auth page wordmark (centered below icon) */
.logo-wordmark--auth { align-items: center; margin-top: 10px; }
.logo-wordmark--auth .logo-wordmark__name { font-size: 22px; color: var(--navy); }
.logo-wordmark--auth .logo-wordmark__tagline { font-size: 11px; }

/* Site Nav */
.site-nav { flex: 1; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  flex-wrap: nowrap;
}
.site-nav__item { position: relative; }
.site-nav__link {
  display: block;
  padding: 8px 12px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.site-nav__link:hover,
.current-menu-item > .site-nav__link,
.current-menu-ancestor > .site-nav__link,
.site-nav__item--active > .site-nav__link {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* Dropdown */
.site-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border-top: 3px solid var(--red);
  box-shadow: 0 8px 32px rgba(10,37,88,.16);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  z-index: 800;
  border-radius: 0 0 var(--radius) var(--radius);
}
.site-nav__item--dropdown:hover .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-nav__dd-link {
  display: block;
  padding: 10px 20px;
  font-size: 13.5px;
  color: var(--text);
  border-bottom: 1px solid var(--gray-mid);
  transition: background var(--transition), color var(--transition), padding var(--transition);
}
.site-nav__dd-link:last-child { border-bottom: none; }
.site-nav__dd-link:hover { background: var(--gray-light); color: var(--red); padding-left: 26px; }

/* Mega dropdown */
.dropdown-mega {
  display: flex;
  gap: 0;
  min-width: 480px;
}
.dropdown-mega__col {
  flex: 1;
  padding: 16px;
  border-right: 1px solid var(--gray-mid);
}
.dropdown-mega__col:last-child { border-right: none; }
.dropdown-mega__heading {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--red);
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--gray-mid);
}
.dropdown-mega__link {
  display: block;
  padding: 7px 0;
  font-size: 13px;
  color: var(--text);
  transition: color var(--transition), padding var(--transition);
}
.dropdown-mega__link:hover { color: var(--red); padding-left: 6px; }

/* Header CTA + Hamburger */
.site-header__cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  cursor: pointer;
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius);
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE MENU ── */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(360px, 90vw);
  height: 100vh;
  background: var(--white);
  box-shadow: -8px 0 32px rgba(10,37,88,.2);
  z-index: 1100;
  transition: right .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mobile-menu.open { right: 0; }
.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 2px solid var(--red);
  background: var(--navy);
}
.mobile-menu__header .logo-text__gat { color: var(--red); }
.mobile-menu__header .logo-text__academy { color: var(--white); }
.mobile-menu__close {
  color: var(--white);
  font-size: 22px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background var(--transition);
}
.mobile-menu__close:hover { background: rgba(255,255,255,.15); }
.mobile-menu__nav { display: flex; flex-direction: column; padding: 16px 0; }
.mobile-menu__link {
  display: block;
  padding: 13px 24px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--navy);
  border-bottom: 1px solid var(--gray-mid);
  transition: color var(--transition), background var(--transition);
}
.mobile-menu__link:hover { color: var(--red); background: var(--gray-light); }
.mobile-menu__link--highlight { color: var(--navy-mid); font-weight: 700; }
.mobile-menu__link--cta {
  background: var(--red);
  color: var(--white);
  margin: 16px 24px;
  border-radius: var(--radius);
  text-align: center;
  border: none;
}
.mobile-menu__link--cta:hover { background: var(--red-dark); color: var(--white); }
.mobile-menu__divider { height: 1px; background: var(--gray-mid); margin: 8px 0; }

.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s;
}
.mobile-overlay.open { opacity: 1; visibility: visible; }

/* ── HERO SECTION ── */
.hero {
  position: relative;
  min-height: 580px;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-mid) 60%, var(--navy) 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero__deco {
  position: absolute;
  right: -80px;
  top: -80px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(216,180,106,.15) 0%, transparent 70%);
  border-radius: 50%;
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  width: 100%;
}
.hero__content {}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(216,180,106,.10);
  border: 1px solid rgba(216,180,106,.45);
  color: #D8B46A;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 2px;
  margin-bottom: 20px;
}
.hero__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.4); }
}
.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 20px;
}
.hero__title span { color: var(--red); }
.hero__sub {
  font-size: 17px;
  color: rgba(255,255,255,.8);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 520px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero__stat-num {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}
.hero__stat-num span { color: var(--red); }
.hero__stat-label {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  margin-top: 4px;
}
.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
}
.hero__card {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  border-left: 4px solid var(--red);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  color: var(--white);
}
.hero__card-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 6px;
}
.hero__card-desc { font-size: 13px; color: rgba(255,255,255,.7); }
.hero__card-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

/* ── HERO IMAGE FRAME ── */
.hero__img-frame {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 0 0 1.5px rgba(216,180,106,.28);
}
.hero__img {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: center 45%;
}
.hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(6,24,64,.1) 0%, rgba(6,24,64,.28) 100%);
  pointer-events: none;
}
.hero__img-chips {
  position: absolute;
  bottom: 14px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(6,24,64,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  padding: 6px 11px;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__chip-icon { font-size: 14px; line-height: 1; }
.hero__chip-text { color: rgba(255,255,255,.92); }

/* ── STATS BAR ── */
.stats-bar {
  background: var(--navy);
  padding: 0;
}
.stats-bar__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.stats-bar__item {
  text-align: center;
  padding: 28px 16px;
  border-right: 1px solid rgba(255,255,255,.08);
  position: relative;
}
.stats-bar__item:last-child { border-right: none; }
.stats-bar__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background var(--transition);
}
.stats-bar__item:hover::before { background: var(--red); }
.stats-bar__num {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  display: block;
}
.stats-bar__label {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 6px;
}

/* ── BRAND STATEMENT ── */
.brand-statement {
  background: var(--white);
  padding: 72px 0;
}
.brand-statement__inner {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: 64px;
  align-items: center;
}
.brand-statement__left {}
.brand-statement__quote {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  line-height: 1.15;
  border-left: 5px solid var(--red);
  padding-left: 24px;
  margin-bottom: 28px;
}
.brand-statement__quote em { color: var(--red); font-style: normal; }
.brand-statement__body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 28px;
}
.brand-statement__img-wrap {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 56px rgba(10,37,88,.18);
}
.brand-statement__img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center center;
}

/* ── PILLARS GRID ── */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.pillar-card {
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition);
}
.pillar-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.pillar-card__img {
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}
.pillar-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform .4s ease;
}
.pillar-card:hover .pillar-card__img img { transform: scale(1.05); }
.pillar-card__body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pillar-card__name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 4px;
}
.pillar-card__sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 10px;
}
.pillar-card__desc {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 14px;
}
.pillar-card__link {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  border-bottom: 1px solid var(--red);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color var(--transition);
}

/* ── CAREER MAP ── */
.career-map {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 8px;
}
.career-step {
  flex: 1;
  min-width: 140px;
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-right: none;
  padding: 24px 16px;
  text-align: center;
  transition: background var(--transition);
}
.career-step:last-child { border-right: 1px solid var(--gray-mid); }
.career-step::after {
  content: '›';
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 700;
  color: var(--red);
  z-index: 2;
  background: var(--white);
  width: 24px;
  text-align: center;
}
.career-step:last-child::after { display: none; }
.career-step:hover { background: var(--navy); }
.career-step__num {
  width: 36px;
  height: 36px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.career-step__title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 6px;
  transition: color var(--transition);
}
.career-step:hover .career-step__title { color: var(--white); }
.career-step__desc {
  font-size: 11.5px;
  color: var(--text-light);
  line-height: 1.5;
  transition: color var(--transition);
}
.career-step:hover .career-step__desc { color: rgba(255,255,255,.7); }

/* ── PROGRAM CARDS ── */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.program-card {
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.program-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.program-card__thumb {
  height: 200px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.program-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.program-card__thumb-text {
  font-family: var(--font-heading);
  font-size: 60px;
  font-weight: 800;
  color: rgba(255,255,255,.08);
  user-select: none;
  letter-spacing: -.02em;
}
.program-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}
.program-card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.program-card__level {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.program-card__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 10px;
}
.program-card__desc { font-size: 14px; color: var(--text-light); line-height: 1.6; flex: 1; margin-bottom: 16px; }
.program-card__meta {
  display: flex;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-mid);
  font-size: 12.5px;
  color: var(--text-light);
}
.program-card__meta-item { display: flex; align-items: center; gap: 5px; }
.program-card__footer {
  padding: 16px 24px;
  background: var(--gray-light);
  border-top: 1px solid var(--gray-mid);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.program-card { position: relative; }
.program-card__cover-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.program-card__detail-link { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; position: relative; z-index: 2; }
.program-card__detail-link:hover { color: var(--red); }
.program-card__footer .btn { position: relative; z-index: 2; }
.program-card__thumb img { display: block; }

/* ── EVENTS LIST (HBR style) ── */
.events-list-section { background: var(--gray-light); padding: 60px 0; }
.events-list { display: flex; flex-direction: column; gap: 16px; }
.event-row {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-left: 5px solid var(--navy);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  transition: border-left-color var(--transition), box-shadow var(--transition);
}
.event-row:hover { border-left-color: var(--red); box-shadow: var(--shadow); }
.event-row__date {
  background: var(--navy);
  color: var(--white);
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  text-align: center;
  transition: background var(--transition);
}
.event-row:hover .event-row__date { background: var(--red); }
.event-row__day {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
}
.event-row__month {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .8;
}
.event-row__content { flex: 1; padding: 16px 24px; display: flex; flex-direction: column; justify-content: center; }
.event-row__cat {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
.event-row__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  margin-bottom: 6px;
  transition: color var(--transition);
}
.event-row:hover .event-row__title { color: var(--red); }
.event-row__meta { font-size: 13px; color: var(--text-light); display: flex; gap: 16px; flex-wrap: wrap; }
.event-row__action {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  align-self: stretch;
  border-left: 1px solid var(--gray-mid);
}
.event-row__cover-link { position: absolute; inset: 0; z-index: 1; }
.event-row__title a, .event-row__action a { position: relative; z-index: 2; }

/* ── BLOG / ARTICLE CARDS ── */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.article-card {
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.article-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.article-card__thumb {
  height: 200px;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy-mid));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-card__cat {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
}
.article-card__body { padding: 20px; }
.article-card__date { font-size: 12px; color: var(--text-light); margin-bottom: 8px; }
.article-card__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition);
}
.article-card:hover .article-card__title { color: var(--red); }
.article-card__excerpt { font-size: 13.5px; color: var(--text-light); line-height: 1.6; margin-bottom: 14px; }
.article-card__footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--gray-mid); }
.article-card__read-more {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
}
.article-card { position: relative; }
.article-card__cover-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.article-card__footer a, .article-card__title a { position: relative; z-index: 2; }
.article-card__vis-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.article-card__vis-icon svg { width: 90px; height: 68px; }
.article-card__thumb--nls { background: linear-gradient(135deg, #061840 0%, #0d3268 60%, #163d7a 100%); }
.article-card__thumb--nls::after { content: 'NLS'; position: absolute; font-family: var(--font-heading); font-size: 96px; font-weight: 800; color: rgba(255,255,255,.055); right: -4px; bottom: -18px; letter-spacing: -.03em; line-height: 1; pointer-events: none; user-select: none; }
.article-card__thumb--affiliate { background: linear-gradient(135deg, #0A2558 0%, #6b1218 100%); }
.article-card__thumb--affiliate::after { content: 'AFF'; position: absolute; font-family: var(--font-heading); font-size: 80px; font-weight: 800; color: rgba(255,255,255,.055); right: -2px; bottom: -14px; letter-spacing: -.02em; line-height: 1; pointer-events: none; user-select: none; }
.article-card__thumb--journey { background: linear-gradient(135deg, #061840 0%, #0a3a80 100%); }
.article-card__thumb--journey::after { content: 'PRO'; position: absolute; font-family: var(--font-heading); font-size: 88px; font-weight: 800; color: rgba(255,255,255,.055); right: -4px; bottom: -16px; letter-spacing: -.03em; line-height: 1; pointer-events: none; user-select: none; }

/* ── TESTIMONIALS ── */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 16px;
  right: 24px;
  font-family: Georgia, serif;
  font-size: 72px;
  color: rgba(255,255,255,.08);
  line-height: 1;
}
.testimonial-card__quote {
  font-size: 15px;
  color: rgba(255,255,255,.85);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 20px;
}
.testimonial-card__author { display: flex; align-items: center; gap: 12px; }
.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--red);
  flex-shrink: 0;
}
.testimonial-card__name {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
}
.testimonial-card__role { font-size: 12px; color: rgba(255,255,255,.6); }

/* ── STAR SYSTEM (Affiliate) ── */
.star-system {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.star-card {
  background: var(--white);
  border: 2px solid var(--gray-mid);
  border-radius: var(--radius-lg);
  padding: 24px 16px;
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.star-card:hover { border-color: var(--red); box-shadow: var(--shadow); }
.star-card__stars { font-size: 22px; margin-bottom: 8px; }
.star-card__rate {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 6px;
}
.star-card__label { font-size: 12px; color: var(--text-light); text-transform: uppercase; letter-spacing: .06em; }

/* ── BENEFIT CARDS ── */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.benefit-card {
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.benefit-card:hover { box-shadow: var(--shadow-lg); }
.benefit-card__num {
  font-family: var(--font-heading);
  font-size: 80px;
  font-weight: 800;
  color: rgba(10,37,88,.06);
  position: absolute;
  top: 0;
  right: 16px;
  line-height: 1;
  user-select: none;
}
.benefit-card__icon { font-size: 32px; margin-bottom: 14px; }
.benefit-card__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.benefit-card__desc { font-size: 14px; color: var(--text-light); line-height: 1.7; }

/* ── PROCESS STEPS ── */
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--red) 100%);
  z-index: 0;
}
.process-step {
  text-align: center;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}
.process-step__num {
  width: 80px;
  height: 80px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border: 4px solid var(--white);
  box-shadow: var(--shadow);
  transition: background var(--transition), transform var(--transition);
}
.process-step:hover .process-step__num { background: var(--red); transform: scale(1.1); }
.process-step__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.process-step__desc { font-size: 13.5px; color: var(--text-light); line-height: 1.6; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  padding: 72px 0 56px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero__label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(216,180,106,.15);
  border: 1px solid rgba(216,180,106,.3);
  padding: 4px 12px;
  border-radius: 2px;
  margin-bottom: 16px;
}
.page-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 800;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.15;
  margin-bottom: 16px;
}
.page-hero__desc {
  font-size: 16px;
  color: rgba(255,255,255,.75);
  max-width: 640px;
  line-height: 1.7;
  margin-bottom: 28px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255,255,255,.7); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb__sep { color: rgba(255,255,255,.3); }
.breadcrumb__current { color: rgba(255,255,255,.9); }

/* ── TABS ── */
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-tab {
  padding: 9px 20px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--gray-mid);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
}
.filter-tab:hover { border-color: var(--navy); color: var(--navy); }
.filter-tab.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ── FAQ ACCORDION ── */
.faq-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--gray-mid); border-radius: var(--radius-lg); overflow: hidden; }
.faq-item { border-bottom: 1px solid var(--gray-mid); }
.faq-item:last-child { border-bottom: none; }
.faq-question {
  width: 100%;
  padding: 20px 24px;
  text-align: left;
  background: var(--white);
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .02em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.faq-question:hover { background: var(--gray-light); }
.faq-item.open .faq-question { background: var(--navy); color: var(--white); }
.faq-toggle {
  width: 28px;
  height: 28px;
  background: var(--gray-mid);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 300;
  flex-shrink: 0;
  transition: background var(--transition), transform var(--transition);
}
.faq-item.open .faq-toggle { background: var(--red); transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .4s ease;
}
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer-inner { padding: 20px 24px; font-size: 15px; line-height: 1.75; color: var(--text); border-top: 1px solid var(--gray-mid); }

/* ── PRICING PACKAGES ── */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.package-card {
  background: var(--white);
  border: 2px solid var(--gray-mid);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
}
.package-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.package-card--featured {
  border-color: var(--red);
  transform: scale(1.03);
}
.package-card--featured:hover { transform: scale(1.03) translateY(-4px); }
.package-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 20px;
  white-space: nowrap;
}
.package-card__name {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.package-card__price {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  margin: 16px 0 6px;
}
.package-card__price span { font-size: 18px; font-weight: 600; color: var(--text-light); }
.package-card__period { font-size: 13px; color: var(--text-light); margin-bottom: 24px; }
.package-card__features { flex: 1; }
.package-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-mid);
  font-size: 14px;
  color: var(--text);
}
.package-card__feature:last-child { border-bottom: none; }
.package-card__feature::before { content: '✓'; color: var(--red); font-weight: 700; flex-shrink: 0; }
.package-card__cta { margin-top: 28px; }

/* ── TEAM CARDS ── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.team-card {
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: center;
  transition: box-shadow var(--transition);
}
.team-card:hover { box-shadow: var(--shadow-lg); }
.team-card__photo {
  height: 260px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.team-card__photo-placeholder {
  font-family: var(--font-heading);
  font-size: 80px;
  font-weight: 800;
  color: rgba(255,255,255,.12);
  position: absolute;
  bottom: -10px;
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__body { padding: 24px 20px; }
.team-card__name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.team-card__title { font-size: 13px; color: var(--red); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.team-card__bio { font-size: 13.5px; color: var(--text-light); line-height: 1.6; }

/* ── CONTACT LAYOUT ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.contact-form { background: var(--white); border: 1px solid var(--gray-mid); border-radius: var(--radius-lg); padding: 36px; }
.contact-info { display: flex; flex-direction: column; gap: 20px; }
.contact-info-card {
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-left: 4px solid var(--navy);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: border-left-color var(--transition);
}
.contact-info-card:hover { border-left-color: var(--red); }
.contact-info-card__icon {
  width: 40px;
  height: 40px;
  background: var(--navy);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.contact-info-card__label {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-light);
  margin-bottom: 4px;
}
.contact-info-card__value { font-size: 15px; color: var(--navy); font-weight: 600; }

/* ── FORM ELEMENTS ── */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--navy);
  margin-bottom: 8px;
}
.form-label sup { color: var(--red); }
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background: var(--white);
  border: 2px solid var(--gray-mid);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(10,37,88,.08);
}
.form-textarea { min-height: 120px; resize: vertical; }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--gray); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-hint { font-size: 12px; color: var(--text-light); margin-top: 4px; }

/* ── FLOATING CTA ── */
.floating-cta {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.floating-cta__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--white);
  background: var(--navy);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), padding var(--transition);
  border-radius: 4px 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 50px;
}
.floating-cta__item:hover { max-width: 180px; padding-left: 16px; }
.floating-cta__item--phone { background: var(--red); }
.floating-cta__item--phone:hover { background: var(--red-dark); }
.floating-cta__item--zalo { background: #006af5; }
.floating-cta__item--zalo:hover { background: #0058d0; }
.floating-cta__item--messenger { background: #0084ff; }
.floating-cta__item--messenger:hover { background: #006acc; }
.floating-cta__item--register { background: var(--navy-mid); }
.floating-cta__item--register:hover { background: var(--navy); }
.floating-cta__item--top { background: var(--dark); opacity: 0; pointer-events: none; transition: opacity var(--transition), background var(--transition), padding var(--transition), max-width var(--transition); }
.floating-cta__item--top.visible { opacity: 1; pointer-events: all; }
.floating-cta__item svg { flex-shrink: 0; }
.floating-cta__item span { opacity: 0; transition: opacity var(--transition); white-space: nowrap; }
.floating-cta__item:hover span { opacity: 1; }

/* ── NEWSLETTER STRIP ── */
.newsletter-strip {
  background: var(--navy);
  padding: 32px 0;
  border-top: 4px solid var(--red);
}
.newsletter-strip__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.newsletter-strip__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--white);
}
.newsletter-strip__text strong { font-family: var(--font-heading); font-size: 20px; font-weight: 700; text-transform: uppercase; }
.newsletter-strip__text span { font-size: 14px; color: rgba(255,255,255,.7); }
.newsletter-strip__form { display: flex; gap: 12px; flex: 1; max-width: 440px; }
.newsletter-strip__input {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  color: var(--white);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
}
.newsletter-strip__input::placeholder { color: rgba(255,255,255,.5); }
.newsletter-strip__input:focus { border-color: rgba(255,255,255,.5); }

/* ── SITE FOOTER ── */
.site-footer {
  background: var(--navy-dark);
  color: rgba(255,255,255,.8);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 56px 24px 40px;
  max-width: var(--container);
  margin: 0 auto;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.footer-logo__gat {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
}
.footer-logo__academy {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.footer-logo__img {
  height: 72px;
  width: auto;
  display: block;
  object-fit: contain;
  margin-bottom: 16px;
}
.footer-tagline {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  text-transform: uppercase;
  line-height: 1.4;
  margin-bottom: 12px;
}
.footer-desc { font-size: 13.5px; color: rgba(255,255,255,.55); line-height: 1.65; margin-bottom: 20px; }
.footer-col__heading {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--red);
  display: inline-block;
}
.footer-col__links { display: flex; flex-direction: column; gap: 8px; }
.footer-col__links a {
  font-size: 13.5px;
  color: rgba(255,255,255,.6);
  transition: color var(--transition), padding var(--transition);
}
.footer-col__links a:hover { color: var(--white); padding-left: 4px; }
.footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-contact__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255,255,255,.65);
}
.footer-contact__item a { color: rgba(255,255,255,.8); }
.footer-contact__item a:hover { color: var(--white); }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  background: var(--dark);
}
.site-footer__bottom-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer__bottom p { font-size: 13px; color: rgba(255,255,255,.45); }
.footer-bottom__links { display: flex; gap: 20px; }
.footer-bottom__links a { font-size: 13px; color: rgba(255,255,255,.45); transition: color var(--transition); }
.footer-bottom__links a:hover { color: var(--white); }

/* ── UTILITY ── */
.text-center { text-align: center; }
.text-red { color: var(--red); }
.text-navy { color: var(--navy); }
.text-white { color: var(--white); }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.mb-8 { margin-bottom: 32px; }
.font-heading { font-family: var(--font-heading); }
.uppercase { text-transform: uppercase; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: none; }
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--navy);
  color: var(--white);
  padding: 14px 24px;
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--red);
  font-size: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  transform: translateX(120%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.toast.show { transform: translateX(0); }
.toast--success { border-left-color: #22c55e; }
.toast--error { border-left-color: var(--red); }
.alert { padding: 14px 20px; border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; }
.alert--error { background: var(--red-light); color: var(--red-dark); border: 1px solid rgba(216,180,106,.25); }
.alert--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* ── SPIN ANIMATION ── */
@keyframes spin { to { transform: rotate(360deg); } }
.btn.loading::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin-left: 6px;
}

/* ══════════════════════════════════════
   RESPONSIVE — 4 breakpoints
   1199px  tablet landscape
   1023px  tablet portrait (hamburger on)
    767px  mobile
    479px  small mobile
══════════════════════════════════════ */

/* ── 1199px: Tablet landscape ── */
@media (max-width: 1199px) {
  .container { max-width: 960px; }
  .site-nav__link { font-size: 12.5px; padding: 8px 8px; }
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
  .star-system { grid-template-columns: repeat(3, 1fr); }
  .stats-bar__inner { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .hero__inner { gap: 36px; }
  .hero__title { font-size: clamp(34px, 4vw, 52px); line-height: 1.18; }
  .site-footer__inner { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
  .brand-statement__inner { gap: 40px; }
  .brand-statement__img { height: 420px; }
  .benefits-grid { grid-template-columns: repeat(3, 1fr); }
  .programs-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── 1024px: Tablet portrait — hamburger on ── */
@media (max-width: 1024px) {
  /* Header: hide desktop nav, show hamburger — keep .site-header__cta visible as container */
  .site-nav { display: none; }
  .hamburger { display: flex; width: 44px; height: 44px; justify-content: center; }
  .site-header__cta .btn--header-cta { display: none; }
  .site-header__inner { justify-content: space-between; }

  /* Top bar compact */
  .top-bar__left { display: none; }
  .top-bar__right { margin-left: auto; }

  /* Hero */
  .hero__inner { grid-template-columns: 1fr; gap: 0; padding: 64px 24px 48px; }
  .hero__visual { display: block; margin-top: 32px; }
  .hero__img { height: 360px; }
  .hero__img-chips { display: none; }
  .hero { min-height: 440px; }
  .hero__title { font-size: clamp(30px, 5vw, 46px); line-height: 1.2; }
  .hero__stats { grid-template-columns: repeat(4, 1fr); gap: 12px; }

  /* Grids */
  .brand-statement__inner { grid-template-columns: 1fr; gap: 36px; }
  .brand-statement__img { height: 360px; }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar-card__img { height: 220px; }
  .programs-grid { grid-template-columns: repeat(2, 1fr); }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-steps::before { display: none; }
  .packages-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .package-card--featured { transform: none; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .roadmap-step__inner { grid-template-columns: 60px 1fr; }

  /* Footer */
  .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .site-footer__col:first-child { grid-column: 1 / -1; }

  /* Career map */
  .career-map { flex-direction: column; }
  .career-step::after { display: none; }
  .career-step { border-right: 1px solid var(--gray-mid); border-bottom: none; width: 100%; max-width: 480px; }
  .career-step:last-child { border-bottom: 1px solid var(--gray-mid); }

  /* Floating CTA — stays on right side, slightly smaller */
  .floating-cta { transform: translateY(-50%) scale(0.9); }
}

/* ── 767px: Mobile ── */
@media (max-width: 767px) {
  html { font-size: 15px; }
  .container { padding: 0 16px; }
  .section { padding: 48px 0; }

  /* Top bar: hide entirely on mobile */
  .top-bar { display: none; }

  /* Site header */
  .site-header { height: 64px; }
  .site-logo__img { height: 40px; }
  .site-logo__img--sm { height: 36px; }
  .footer-logo__img { height: 60px; }
  .site-logo__text { display: none; }
  .hamburger { width: 44px; height: 44px; justify-content: center; }
  /* Logo wordmark mobile — 2 dòng vẫn hiển thị, compact để không chèn hamburger */
  .logo-icon-wrap { width: 38px; height: 38px; border-radius: 8px; }
  .site-header__logo { gap: 8px; flex-shrink: 1; }
  .logo-wordmark { min-width: 0; }
  .logo-wordmark__name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .logo-wordmark__tagline { font-size: 8.5px; letter-spacing: .07em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Hero */
  .hero { min-height: 340px; }
  .hero__inner { padding: 48px 16px 36px; }
  .hero__badge { font-size: 11px; padding: 5px 12px; }
  .hero__title { font-size: clamp(26px, 7vw, 36px); line-height: 1.25; margin-bottom: 12px; }
  .hero__sub { font-size: 14px; margin-bottom: 20px; }
  .hero__actions { flex-direction: column; gap: 10px; align-items: stretch; }
  .hero__actions .btn { width: 100%; min-height: 48px; justify-content: center; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; }
  .hero__stat-num { font-size: 22px; }
  .hero__img { height: 240px; }
  .hero__visual { margin-top: 24px; }

  /* Stats bar */
  .stats-bar__inner { grid-template-columns: repeat(2, 1fr); }
  .stats-bar__item:last-child:nth-child(odd) { grid-column: 1/-1; }
  .stats-bar__num { font-size: 28px; }

  /* Brand statement */
  .brand-statement__inner { grid-template-columns: 1fr; gap: 28px; }
  .brand-statement__img { height: 290px; }
  .brand-target-list { grid-template-columns: 1fr; }
  .brand-statement__quote { font-size: clamp(20px, 5vw, 26px); }

  /* Section headings */
  .section-title { font-size: clamp(22px, 5.5vw, 30px); }

  /* Pillars */
  .pillars-grid { grid-template-columns: 1fr; gap: 16px; }
  .pillar-card__img { height: 260px; }
  .pillar-card__img { height: 180px; }
  .pillar-card__body { padding: 16px; }

  /* Programs */
  .programs-grid { grid-template-columns: 1fr; }

  /* Articles */
  .articles-grid { grid-template-columns: 1fr; }

  /* Benefits */
  .benefits-grid { grid-template-columns: 1fr; }

  /* Star system */
  .star-system { grid-template-columns: 1fr; }

  /* Process */
  .process-steps { grid-template-columns: 1fr; }

  /* Packages */
  .packages-grid { grid-template-columns: 1fr; max-width: 100%; }

  /* Team */
  .team-grid { grid-template-columns: 1fr; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* Events */
  .event-row { flex-direction: column; gap: 12px; align-items: flex-start; }
  .event-row__date { flex-direction: row; gap: 8px; align-items: baseline; min-width: auto; }
  .event-row__day { font-size: 28px; }
  .event-row__action { align-self: flex-end; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-info-cards { grid-template-columns: 1fr; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; }

  /* Newsletter */
  .newsletter-strip__inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .newsletter-strip__form { max-width: 100%; width: 100%; }
  .newsletter-strip__form input, .newsletter-strip__form button { width: 100%; }

  /* Footer */
  .site-footer__inner { grid-template-columns: 1fr; gap: 24px; }
  .site-footer__bottom-inner { flex-direction: column; gap: 12px; text-align: center; }
  .site-footer__bottom-links { justify-content: center; }

  /* Career map */
  .career-map { flex-direction: column; }
  .career-step { width: 100%; max-width: 100%; }

  /* Roadmap steps */
  .roadmap-step__inner { grid-template-columns: 48px 1fr; gap: 16px; }

  /* Page hero */
  .page-hero { padding: 48px 0 32px; }
  .page-hero__title { font-size: clamp(24px, 6vw, 36px); line-height: 1.25; }

  /* Buttons — ensure 44px min touch target */
  .btn { min-height: 44px; padding: 12px 20px; }
  .btn--sm { min-height: 40px; padding: 9px 16px; }
  .btn--lg { min-height: 52px; padding: 15px 28px; }

  /* ── Floating CTA → bottom bar on mobile ── */
  .floating-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0; top: auto;
    transform: none;
    flex-direction: row;
    width: 100%;
    height: auto;
    z-index: 9999;
    gap: 0;
    border-top: 2px solid var(--red);
    border-radius: 0;
    box-shadow: 0 -2px 12px rgba(0,0,0,.18);
  }
  .floating-cta__item {
    flex: 1;
    flex-direction: column;
    max-width: none;
    width: auto;
    border-radius: 0;
    padding: 8px 4px 6px;
    font-size: 10px;
    line-height: 1.2;
    gap: 3px;
    justify-content: center;
    align-items: center;
    min-height: 56px;
  }
  .floating-cta__item .floating-cta__icon { font-size: 20px; }
  .floating-cta__item span { opacity: 1; font-size: 9px; }

  /* Push body up so bottom bar doesn't cover content */
  body { padding-bottom: 64px; }

  /* Mobile menu full-screen */
  .mobile-menu { width: 100%; max-width: 100%; }
}

/* ── 479px: Small mobile ── */
@media (max-width: 479px) {
  .container { padding: 0 12px; }
  .section { padding: 36px 0; }

  .site-logo__img { height: 36px; }
  .site-logo__img--sm { height: 32px; }
  /* Logo extra compact at 360px */
  .logo-icon-wrap { width: 34px; height: 34px; border-radius: 6px; }
  .logo-wordmark__name { font-size: 13px; }
  .logo-wordmark__tagline { font-size: 8px; letter-spacing: .05em; }

  .hero__title { font-size: clamp(22px, 7.5vw, 30px); line-height: 1.3; }
  .hero__inner { padding: 40px 12px 28px; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hero__stat-num { font-size: 20px; }
  .hero__img { height: 200px; }
  .hero__visual { margin-top: 20px; }

  .section-title { font-size: clamp(20px, 6vw, 26px); }
  .stats-bar__num { font-size: 24px; }
  .stats-bar__label { font-size: 11px; }

  .package-card { padding: 24px 16px; }

  .site-footer { padding: 32px 0 20px; }
  .site-footer__logo { font-size: 18px; }

  .floating-cta__item { padding: 6px 2px 5px; min-height: 52px; }
  .floating-cta__item .floating-cta__icon { font-size: 18px; }
  .floating-cta__item span { font-size: 8px; }
  body { padding-bottom: 60px; }

  /* Breadcrumb single line */
  .breadcrumb { flex-wrap: wrap; gap: 4px; font-size: 12px; }

  /* FAQ */
  .faq-question { font-size: 14px; padding: 14px 12px; }
  .faq-answer { padding: 0 12px 14px; font-size: 13px; }

  /* Career step compact */
  .career-step__num { font-size: 22px; }
  .career-step__title { font-size: 13px; }
}

/* ═══════════════════════════════════════════
   HEADER SEARCH
═══════════════════════════════════════════ */

/* ── Inline search bar (desktop / tablet) ── */
.header-search-inline {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid var(--red);
  border-radius: 10px;
  padding: 0 12px;
  gap: 8px;
  height: 40px;
  width: 210px;
  flex-shrink: 0;
  transition: border-color .18s, box-shadow .18s;
}
.header-search-inline:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(216,180,106,.12);
}
.header-search-inline__icon {
  color: var(--red);
  flex-shrink: 0;
  pointer-events: none;
}
.header-search-inline__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--navy);
  min-width: 0;
  padding: 0;
}
.header-search-inline__input::placeholder { color: var(--red); opacity: .65; }

/* Dropdown below inline input */
.header-search-inline__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 320px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(10,37,88,.14);
  border: 1px solid #E2E8F0;
  overflow: hidden;
  max-height: 400px;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 10002;
}
.header-search-inline__dropdown.open { display: block; }

/* ── Mobile icon button (hidden on desktop/tablet) ── */
.header-search-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--navy);
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.header-search-btn:hover { background: var(--gray-light); color: var(--red); }
.header-search-btn svg { display: block; pointer-events: none; }

/* Overlay backdrop (mobile only) */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 24, 64, 0.65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 10001;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 76px;
}
.search-overlay.open { display: flex; }
body.search-open { overflow: hidden; }

/* Search box (inside overlay) */
.search-box {
  width: 100%;
  max-width: 640px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(6,24,64,.28);
  overflow: hidden;
  margin: 0 16px;
  animation: searchBoxIn .18s ease;
}
@keyframes searchBoxIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-box__input-row {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--gray-mid);
  gap: 10px;
}
.search-box__icon { color: var(--gray); flex-shrink: 0; }
.search-box__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--navy);
  padding: 16px 0;
  background: transparent;
  min-width: 0;
}
.search-box__input::placeholder { color: var(--gray); }
.search-box__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray);
  font-size: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  flex-shrink: 0;
  transition: color var(--transition), background var(--transition);
}
.search-box__close:hover { color: var(--navy); background: var(--gray-light); }

/* Results list (shared) */
.search-results {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.search-results:empty { display: none; }

.search-result-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 20px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--gray-mid);
  transition: background var(--transition);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--gray-light); }
.search-result-item:hover .search-result-title { color: var(--red); }
.search-result-type {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
}
.search-result-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  transition: color var(--transition);
}
.search-result-desc {
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.45;
}
.search-no-results {
  padding: 24px 20px;
  text-align: center;
  color: var(--text-light);
  font-size: 14px;
}

/* ── Mobile always-visible search bar (injected after <header>, shown mobile only) ── */
.header-search-mobile-bar {
  display: none;
  padding: 10px 16px 12px;
  background: var(--white);
  border-bottom: 1px solid #F0F0F0;
  box-shadow: 0 2px 6px rgba(10,37,88,.06);
}
.header-search-mobile__wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.header-search-mobile__icon {
  position: absolute;
  left: 13px;
  color: var(--red);
  pointer-events: none;
  flex-shrink: 0;
}
.header-search-mobile__input {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 44px;
  border: 2px solid var(--red);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--navy);
  background: var(--white);
  outline: none;
  transition: box-shadow .18s;
  box-sizing: border-box;
}
.header-search-mobile__input::placeholder {
  color: var(--red);
  opacity: .65;
}
.header-search-mobile__input:focus {
  box-shadow: 0 0 0 3px rgba(216,180,106,.12);
}
.header-search-mobile__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(10,37,88,.14);
  border: 1px solid #E2E8F0;
  overflow: hidden;
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 10002;
}
.header-search-mobile__dropdown.open { display: block; }

/* Responsive */
@media (max-width: 1200px) {
  .header-search-inline { width: 180px; }
}
@media (max-width: 1024px) {
  .header-search-inline { width: 160px; height: 38px; }
}
@media (max-width: 767px) {
  .header-search-mobile-bar {
    display: block;
    position: sticky;
    top: 64px;
    z-index: 899;
  }
  .header-search-inline { display: none; }
  .header-search-btn { display: none; }
  .search-overlay { padding-top: 120px; }
  .search-box { margin: 0 8px; }
  .search-results { max-height: 55vh; }
  .search-box__input { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════
   GAT ACADEMY v3 — Academy-premium overrides
   Spirit: gein.edu.vn · Navy deep · Gold · White
   Applied after all base rules — cascade wins here
══════════════════════════════════════════════════════════════ */

/* ── Body & base ── */
body { line-height: 1.7; font-size: 15px; }

/* ── Buttons ── */
.btn {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  border-radius: 6px;
}
.btn--lg { font-size: 16px; }
/* All CTA buttons now gold — navy dark text for contrast */
.btn--red {
  background: var(--gold);
  color: var(--navy-dark);
  border-color: var(--gold);
}
.btn--red:hover {
  background: var(--gold-dark);
  color: var(--navy-dark);
  border-color: var(--gold-dark);
  box-shadow: 0 4px 16px rgba(216,180,106,.4);
}
.btn--outline-red {
  color: var(--navy);
  border-color: var(--gold);
}
.btn--outline-red:hover {
  background: var(--gold);
  color: var(--navy-dark);
  border-color: var(--gold);
}
.btn--header-cta {
  background: var(--gold);
  color: var(--navy-dark);
  border-color: var(--gold);
  font-weight: 700;
}
.btn--header-cta:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
  box-shadow: 0 4px 16px rgba(216,180,106,.4);
  color: var(--white);
}

/* ── Section label → gold ── */
.section-label {
  color: var(--navy);
  background: var(--gold-light);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .08em;
  border-radius: 4px;
}
.section--navy .section-label,
.section--dark .section-label {
  background: rgba(216,180,106,.18);
  color: var(--gold-light);
}

/* ── Section title: lighter, no uppercase ── */
.section-title {
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.section-subtitle { font-size: 15px; line-height: 1.75; }

/* ── Red sections → navy-dark ── */
.section--red { background: var(--navy-dark); }

/* ── Gray sections → blue-light ── */
.section--gray { background: var(--blue-light); }

/* ── Header: navy deep, sticky reinforced ── */
.site-header {
  background: var(--navy);
  box-shadow: 0 2px 12px rgba(3,27,61,.4);
  position: sticky;
  top: 0;
  z-index: 9999;
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(3,27,61,.65); }

/* ── Logo wordmark on dark header ── */
.logo-wordmark__name { color: var(--white); }
.logo-wordmark__tagline { color: var(--gold); }
.logo-icon-wrap { border: 1px solid rgba(216,180,106,.2); }

/* ── Nav links: white on navy ── */
.site-nav__link {
  color: rgba(255,255,255,.85);
  font-weight: 500;
  text-transform: none;
  font-size: 14px;
  letter-spacing: .01em;
}
.site-nav__link:hover,
.current-menu-item > .site-nav__link,
.current-menu-ancestor > .site-nav__link,
.site-nav__item--active > .site-nav__link {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.site-nav__item--dropdown:hover > .site-nav__link { color: var(--gold); }

/* ── Dropdown accent: gold ── */
.site-nav__dropdown { border-top-color: var(--gold); }
.dropdown-mega__heading { color: var(--gold); }
.site-nav__dd-link:hover { color: var(--navy); }
.dropdown-mega__link:hover { color: var(--navy); }

/* ── Hamburger white on dark header ── */
.hamburger span { background: var(--white); }

/* ── Mobile menu: navy-dark ── */
.mobile-menu { background: var(--navy-dark); }
.mobile-menu__link { color: rgba(255,255,255,.85); }
.mobile-menu__link:hover { color: var(--gold); background: rgba(255,255,255,.06); }
.mobile-menu__link--cta { background: var(--gold); color: var(--navy-dark); font-weight: 700; }
.mobile-menu__header .logo-wordmark__name { color: var(--white); }
.mobile-menu__header .logo-wordmark__tagline { color: rgba(255,255,255,.55); }
.mobile-menu__close { color: var(--white); background: transparent; }
.mobile-menu__close:hover { color: var(--gold); background: rgba(255,255,255,.08); }
.mobile-overlay { background: rgba(3,27,61,.7); }

/* ── Hero ── */
.hero__title {
  font-size: clamp(28px, 5vw, 58px);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.hero__title span { color: var(--gold); }
.hero__badge::before { background: var(--gold); }
.hero__stat-num { font-weight: 700; }
.hero__stat-num span { color: var(--gold); }
.hero__card { border-left-color: var(--gold); }
.hero__card-title { text-transform: none; font-weight: 600; }
.hero__img-frame { box-shadow: 0 24px 64px rgba(0,0,0,.45), 0 0 0 1.5px rgba(216,180,106,.3); }

/* ── Program cards ── */
.program-card__badge {
  background: var(--gold);
  color: var(--navy-dark);
  border-radius: 4px;
}
.program-card__level { color: var(--blue-accent); }
.program-card__title { text-transform: none; font-weight: 600; font-size: 18px; }

/* ── Founder card CTA ── */
.founder-card__cta { color: var(--navy); }
.founder-card__cta:hover { color: var(--gold-dark); transform: translateX(3px); }

/* ── Filter tabs ── */
.filter-tab {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
}
.filter-tab.active { background: var(--navy); border-color: var(--navy); }
.filter-tab:hover { color: var(--navy); border-color: var(--navy); }

/* ── Top bar ── */
.top-bar { background: var(--navy-dark); }

/* ── Footer ── */
.site-footer { background: var(--navy-dark); }

/* ── Search bar: white on navy header (inline desktop/tablet) ── */
.header-search-inline {
  background: #ffffff;
  border-color: rgba(216,180,106,.65);
}
.header-search-inline:focus-within {
  background: #ffffff;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(216,180,106,.22);
}
.header-search-inline__icon { color: var(--navy); }
.header-search-inline__input { color: var(--navy); }
.header-search-inline__input::placeholder { color: var(--text-light); opacity: 1; }

/* ── Search mobile bar: white bg, gold border ── */
.header-search-mobile-bar { background: var(--white); }
.header-search-mobile__input {
  border-color: rgba(216,180,106,.65);
  color: var(--navy);
}
.header-search-mobile__input::placeholder { color: var(--text-light); opacity: 1; }
.header-search-mobile__icon { color: var(--navy); }
.header-search-mobile__input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(216,180,106,.18);
}

/* ── Form focus: navy ── */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(6,43,95,.1);
}

/* ── Floating CTA phone: gold bg needs dark text ── */
.floating-cta__item--phone { color: var(--navy-dark); }
.floating-cta__item--phone:hover { color: var(--navy-dark); }

/* ── Mobile responsive tweaks v3 ── */
@media (max-width: 767px) {
  .section-title { font-size: clamp(20px, 6vw, 28px); }
  .hero__title { font-size: clamp(24px, 7vw, 36px); }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE HEADER + HERO FIX v3.1
   Root cause: logo(~180px) + gap(24×2) + nav(~546px) + search(210px)
   + btn(~150px) = ~1134px > 1152px container inner at ≥1200px viewport.
   Fix: tighter gap, narrower search, compact CTA btn, hamburger at ≤1199px.
══════════════════════════════════════════════════════════════ */

/* 1. Base header: reduce gap and search width so all items fit 1152px inner */
.site-header__inner { gap: 16px; }
.header-search-inline { width: 160px; }
.btn--header-cta {
  padding: 9px 16px;
  font-size: 13px;
  letter-spacing: .01em;
}
/* Compact nav links: 6 long Vietnamese items × 14px would exceed available ~600px */
.site-nav__link {
  font-size: 13px;
  padding: 8px 7px;
  letter-spacing: .01em;
}

/* 2. At ≤1199px: hamburger on, nav off — CTA btn still visible */
@media (max-width: 1199px) {
  .site-nav { display: none; }
  .hamburger { display: flex; width: 44px; height: 44px; justify-content: center; }
  .site-header__inner { justify-content: space-between; gap: 0; }
  .header-search-inline { width: 160px; }
}

/* 3. At ≤1024px: CTA btn hidden — search + hamburger only (already in base, reinforce) */
@media (max-width: 1024px) {
  .site-header__cta .btn--header-cta { display: none; }
}

/* 4. Hero: slightly asymmetric columns (content left, image right) + clamp gap */
.hero__inner {
  grid-template-columns: 48fr 52fr;
  gap: clamp(40px, 4vw, 60px);
}

/* Hero tablet (1025–1199px): keep 2-col but reduce gap */
@media (max-width: 1199px) and (min-width: 1025px) {
  .hero__inner { gap: clamp(28px, 3vw, 44px); }
}

/* Hero ≤1024px: restore single column (v3.1 base would otherwise override existing 1fr rule) */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
}

/* 5. Global overflow guard — clip preserves sticky positioning unlike hidden */
html, body { overflow-x: clip; }

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE — Founder Story (index.html only, .brand-statement--founder)
   New classes added; base .brand-statement* untouched → other pages safe
══════════════════════════════════════════════════════════════ */

/* Align columns to top (content left taller than image) */
.brand-statement--founder .brand-statement__inner { align-items: start; }

/* "CÓ BAO GIỜ BẠN TỪNG..." */
.brand-statement__heading {
  font-family: var(--font-heading);
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* Bullet list */
.brand-statement__list {
  list-style: none;
  margin-bottom: 20px;
}
.brand-statement__list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
}
.brand-statement__list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

/* "Nếu đã từng... / Bạn không phải người duy nhất." */
.brand-statement__callout {
  font-size: 15px;
  color: var(--text-light);
  font-style: italic;
  margin-bottom: 28px;
  padding: 12px 18px;
  background: var(--gold-light);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.brand-statement__callout strong { color: var(--navy); font-style: normal; }

/* "VÌ SAO GAT ACADEMY RA ĐỜI?" */
.brand-statement__subheading {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 10px;
}

/* Personal quote */
.brand-statement__personal-quote {
  font-family: var(--font-heading);
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 700;
  font-style: italic;
  color: var(--navy);
  border-left: 4px solid var(--gold);
  padding-left: 20px;
  margin: 0 0 24px;
  line-height: 1.5;
}

/* Multi-paragraph body */
.brand-statement__body p { margin-bottom: 14px; }
.brand-statement__body p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════
   FONT WEIGHT REFINEMENT v3.2
   Target: thinner, more modern — max 700, no 800/900 on UI text.
   Hero title + stat-num already 700 in v3 hero block above.
   Buttons already 600, nav links 500 in v3 buttons/nav blocks.
══════════════════════════════════════════════════════════════ */

/* Logo — 800 → 700 */
.logo-wordmark__name { font-weight: 700; }

/* Section headings — 800 → 700 (cascades over base 800) */
.section-title { font-weight: 700; }
.section-label { font-weight: 600; }

/* Stats bar numbers — 800 → 700 */
.stats-bar__num { font-weight: 700; }

/* Pillar card name — 800 → 700 */
.pillar-card__name { font-weight: 700; }

/* Brand statement quote — 800 → 700 */
.brand-statement__quote { font-weight: 700; }

/* Card/component headings — 800 → 700 */
.testimonial-stat__num { font-weight: 700; }
.package-card__price { font-weight: 700; }
.article-card__title { font-weight: 700; }

/* Body text baseline */
body { font-weight: 400; }
p    { font-weight: 400; }

/* Decorative watermark text (large background letter) — keep 800, it's decorative */
/* .article-card__thumb--nls::after etc. are intentionally heavy for visual texture */

/* ══════════════════════════════════════════════════════════════
   HERO COMPACT v3.3 — fit in 1 viewport on desktop
   Target: 1366×768 with 70px sticky header = 698px available.
   Estimated hero height: ~516px → 586px with header = fits ✓
   Image gets 54% width + taller frame + stronger glow.
══════════════════════════════════════════════════════════════ */

/* ── Desktop base: tighter padding + image-dominant 46/54 split ── */
.hero { min-height: 0; }
.hero__inner {
  padding: 48px 24px;
  grid-template-columns: 46fr 54fr;
  gap: clamp(28px, 3vw, 48px);
}

/* Title: max 50px (vs 58px in v3) — ~14% smaller */
.hero__title {
  font-size: clamp(26px, 3.8vw, 50px);
  line-height: 1.12;
  margin-bottom: 14px;
}

/* Badge: tighter */
.hero__badge { margin-bottom: 12px; }

/* Sub-text: slightly smaller, tighter margin */
.hero__sub {
  font-size: 16px;
  margin-bottom: 20px;
}

/* Stats: compact 2×2, smaller numbers, tighter spacing */
.hero__stats {
  margin-top: 20px;
  padding-top: 16px;
  gap: 12px 20px;
}
.hero__stat-num  { font-size: 28px; }
.hero__stat-label { font-size: 12px; margin-top: 2px; }

/* Image: taller than base (420px), wider corner, stronger shadow + gold glow */
.hero__img { height: 420px; }
.hero__img-frame {
  border-radius: 24px;
  box-shadow:
    0 32px 80px rgba(0,0,0,.55),
    0 0 0 1.5px rgba(216,180,106,.45),
    0 0 60px rgba(216,180,106,.12);
}

/* ── Tablet landscape (1025–1199px): 2-col, scale down ── */
@media (max-width: 1199px) and (min-width: 1025px) {
  .hero__inner {
    padding: 40px 24px;
    grid-template-columns: 48fr 52fr;
    gap: clamp(24px, 2.5vw, 40px);
  }
  .hero__title  { font-size: clamp(24px, 3.5vw, 42px); }
  .hero__img    { height: 360px; }
  .hero__stat-num { font-size: 26px; }
}

/* ── Tablet portrait ≤1024px: single col (grid from v3.1), compact padding ── */
@media (max-width: 1024px) {
  .hero__inner  { padding: 44px 24px 36px; }
  .hero__img    { height: 300px; }
  .hero__stat-num { font-size: 26px; }
  .hero__stats  { margin-top: 18px; padding-top: 14px; gap: 10px 16px; }
}

/* ── Mobile ≤767px ── */
@media (max-width: 767px) {
  .hero__inner  { padding: 30px 16px 26px; }
  .hero__badge  { margin-bottom: 10px; }
  .hero__title  { font-size: clamp(22px, 7vw, 32px); line-height: 1.18; margin-bottom: 10px; }
  .hero__sub    { font-size: 14px; line-height: 1.65; margin-bottom: 16px; }
  .hero__img    { height: 210px; }
  .hero__stats  { margin-top: 16px; padding-top: 12px; gap: 8px 14px; }
  .hero__stat-num  { font-size: 22px; }
  .hero__stat-label { font-size: 11px; }
}

/* ── Small mobile ≤375px ── */
@media (max-width: 375px) {
  .hero__inner { padding: 24px 14px 22px; }
  .hero__title { font-size: clamp(20px, 6.5vw, 28px); }
  .hero__sub   { font-size: 13.5px; }
}

/* ── v3.4 Founder Story — YouTube embed ── */
.brand-statement__video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: var(--navy-dark);
  box-shadow: 0 20px 56px rgba(10,37,88,.18), 0 4px 16px rgba(10,37,88,.10);
}
.yt-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-light);
  line-height: 1.5;
  opacity: .8;
}
.yt-note code {
  font-family: monospace;
  background: var(--gray-light);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════
   v3.5 — Hero & Founder Story: mobile/tablet reorder
   Chỉ sửa ≤1024px. Desktop (≥1025px) không thay đổi.
═══════════════════════════════════════════════════ */

/* Desktop: hero__stats đã ra ngoài hero__content — loại row-gap thừa */
.hero__inner { row-gap: 0; }
.hero__stats  { grid-column: 1; }

/* ── Hero ≤1024px: flex column, ảnh full-width sau CTA, stats sau ảnh ── */
@media (max-width: 1024px) {
  .hero__inner {
    display: flex;
    flex-direction: column;
    padding: 44px 24px 36px;
  }
  .hero__content { order: 1; }
  .hero__visual  { order: 2; width: 100%; margin-top: 24px; }
  .hero__stats   { order: 3; width: 100%; margin-top: 20px; padding-top: 20px;
                   grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero__img     { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .hero__img-chips { display: none; }
}

/* Hero mobile ≤767px */
@media (max-width: 767px) {
  .hero__inner   { padding: 30px 16px 26px; }
  .hero__visual  { margin-top: 20px; }
  .hero__stats   { margin-top: 16px; gap: 8px 14px; }
  .hero__stat-num { font-size: 22px; }
  .hero__stat-label { font-size: 11px; }
}

/* Hero small mobile ≤375px */
@media (max-width: 375px) {
  .hero__inner { padding: 24px 14px 22px; }
}

/* ── Founder Story ≤1024px: video trước, text sau ── */
@media (max-width: 1024px) {
  .brand-statement--founder .brand-statement__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .brand-statement--founder .brand-statement__right { order: 1; }
  .brand-statement--founder .brand-statement__left  { order: 2; }
}

/* ── v3.6 Founder Story desktop: body text full-width dưới 2 cột ── */

/* Mobile/tablet: body-full là block bình thường */
.brand-statement--founder .brand-statement__body-full {
  margin-top: 28px;
}

/* Desktop ≥1025px: full-width, chia 3 cột */
@media (min-width: 1025px) {
  .brand-statement--founder .brand-statement__body-full {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--gray-mid);
    column-count: 3;
    column-gap: 40px;
  }
  .brand-statement--founder .brand-statement__body-full p {
    break-inside: avoid;
    margin-bottom: 14px;
  }
  .brand-statement--founder .brand-statement__body-full p:last-child {
    margin-bottom: 0;
  }
}

/* ── v3.7 Ecosystem section insights pills ── */
.ecosystem-insights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.ecosystem-insight {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: #ffffff;
  border: 1.5px solid rgba(216,180,106,.55);
  border-radius: 100px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(6,43,95,.06);
}
.ecosystem-insight__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* Mobile: allow wrap to 2 per row */
@media (max-width: 767px) {
  .ecosystem-insights { gap: 10px; margin-top: 24px; }
  .ecosystem-insight  { font-size: 12px; padding: 9px 16px; }
}
@media (max-width: 374px) {
  .ecosystem-insight  { font-size: 11.5px; padding: 8px 14px; white-space: normal; }
}

/* ══════════════════════════════════════════════════════
   v3.8 — CTA sections: dark navy → gold theme
   Global: .section--red + .newsletter-strip
══════════════════════════════════════════════════════ */

/* ── .section--red: gold gradient ── */
.section--red {
  background: linear-gradient(135deg, #F3D78A 0%, #D8B46A 55%, #B9903F 100%) !important;
  color: #062B5F !important;
}
.section--red .section-label {
  background: rgba(6,43,95,.12) !important;
  color: #062B5F !important;
  border-color: rgba(6,43,95,.18) !important;
}
.section--red .section-title,
.section--red h1, .section--red h2,
.section--red h3, .section--red h4 { color: #062B5F !important; }
.section--red p,
.section--red .section-subtitle     { color: rgba(6,43,95,.85) !important; }
.section--red .btn--red {
  background: #062B5F !important;
  color: #ffffff !important;
  border-color: #062B5F !important;
}
.section--red .btn--red:hover {
  background: #031B3D !important;
  border-color: #031B3D !important;
}
.section--red .btn--outline-white {
  background: rgba(255,255,255,.2) !important;
  border-color: #062B5F !important;
  color: #062B5F !important;
}
.section--red .btn--outline-white:hover {
  background: #062B5F !important;
  color: #ffffff !important;
}
.section--red .btn--navy {
  background: #ffffff !important;
  color: #062B5F !important;
  border-color: #ffffff !important;
}
.section--red .btn--navy:hover {
  background: rgba(255,255,255,.85) !important;
}

/* ── .newsletter-strip: gold gradient ── */
.newsletter-strip {
  background: linear-gradient(135deg, #F3D78A 0%, #D8B46A 55%, #B9903F 100%);
  border-top: 4px solid rgba(6,43,95,.15);
}
.newsletter-strip__text        { color: #062B5F; }
.newsletter-strip__text strong { color: #062B5F; }
.newsletter-strip__text span   { color: rgba(6,43,95,.75); }
.newsletter-strip__input {
  background: rgba(255,255,255,.8);
  border-color: rgba(6,43,95,.25);
  color: #062B5F;
}
.newsletter-strip__input::placeholder { color: rgba(6,43,95,.45); opacity: 1; }
.newsletter-strip__input:focus {
  border-color: #062B5F;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(6,43,95,.1);
}
.newsletter-strip .btn--red {
  background: #062B5F !important;
  color: #ffffff !important;
  border-color: #062B5F !important;
}
.newsletter-strip .btn--red:hover {
  background: #031B3D !important;
  border-color: #031B3D !important;
}

/* ══════════════════════════════════════════════════════
   v3.9 — Content sections: navy dark → white/light
   Targets .section--navy + .section--dark (non-hero).
   Keeps header, footer, nav, hero, floating CTA unchanged.
══════════════════════════════════════════════════════ */

/* ─── 1. Section backgrounds ─── */
.section--navy:not(.page-hero),
.section--dark:not(.page-hero) {
  background: #FAFBFC;
  color: #062B5F;
}

/* ─── 2. Section chrome: label / title / subtitle ─── */
.section--navy:not(.page-hero) .section-label,
.section--dark:not(.page-hero)  .section-label {
  background: rgba(216,180,106,.14);
  color: #9B7B2C;
  border: 1px solid rgba(216,180,106,.38);
}
.section--navy:not(.page-hero) .section-title,
.section--dark:not(.page-hero)  .section-title { color: #062B5F; }

.section--navy:not(.page-hero) .section-subtitle,
.section--dark:not(.page-hero)  .section-subtitle { color: #334155; }

/* ─── 3. Generic text color fix in white sections ─── */
.section--navy:not(.page-hero) h2,
.section--navy:not(.page-hero) h3,
.section--navy:not(.page-hero) h4,
.section--dark:not(.page-hero)  h2,
.section--dark:not(.page-hero)  h3,
.section--dark:not(.page-hero)  h4 { color: #062B5F; }

.section--navy:not(.page-hero) p,
.section--navy:not(.page-hero) li,
.section--dark:not(.page-hero)  p,
.section--dark:not(.page-hero)  li { color: #334155; }

/* ─── 4. Career step hover: soft tint on white section ─── */
.section--navy:not(.page-hero) .career-step:hover,
.section--dark:not(.page-hero)  .career-step:hover { background: rgba(6,43,95,.04); }

/* ─── 5. Testimonial cards → white card with gold accent ─── */
.testimonial-card {
  background: #ffffff;
  border: 1.5px solid rgba(216,180,106,.38);
  box-shadow: 0 2px 16px rgba(6,43,95,.07), 0 1px 4px rgba(6,43,95,.04);
}
.testimonial-card::before { color: rgba(216,180,106,.3); }
.testimonial-card__quote  { color: #334155; }
.testimonial-card__name   { color: #062B5F; }
.testimonial-card__role   { color: #64748b; }
.testimonial-card__avatar {
  background: rgba(216,180,106,.12);
  border: 2px solid rgba(216,180,106,.45);
  color: #062B5F;
}

/* ─── 6. Stats bar → white strip ─── */
.stats-bar {
  background: #FAFBFC;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}
.stats-bar__item      { border-right-color: #E5E7EB; }
.stats-bar__item:hover::before { background: var(--gold); }
.stats-bar__num       { color: #062B5F; }
.stats-bar__label     { color: #64748b; }

/* ─── 7. FAQ: gold active state ─── */
.faq-item.open .faq-question {
  background: rgba(216,180,106,.12);
  color: #062B5F;
}
.faq-item.open .faq-toggle { background: var(--gold); }

/* ─── 8. Contact info card icon → gold ─── */
.contact-info-card__icon {
  background: rgba(216,180,106,.15);
  color: #9B7B2C;
  border: 1.5px solid rgba(216,180,106,.4);
}
.contact-info-card:hover { border-left-color: var(--gold); }
.contact-info-card:hover .contact-info-card__icon {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}

/* ─── 9. Form inputs: #D1D5DB base border + gold focus ─── */
.form-input,
.form-select,
.form-textarea { border-color: #D1D5DB; }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(216,180,106,.18);
}

/* ─── 10. Responsive: ensure white sections stay readable ─── */
@media (max-width: 1024px) {
  .section--navy:not(.page-hero) .testimonials-grid,
  .section--dark:not(.page-hero)  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .section--navy:not(.page-hero) .testimonials-grid,
  .section--dark:not(.page-hero)  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .stats-bar__inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-bar__item { border-right: none; border-bottom: 1px solid #E5E7EB; }
  .stats-bar__item:last-child { border-bottom: none; }
  .stats-bar__num  { font-size: 32px; }
}

/* ══════════════════════════════════════════════════════
   v3.10 — Homepage Sections 4 & 5: New components
   Prog-grid (5 training programs) · LTR-timeline (roadmap)
══════════════════════════════════════════════════════ */

/* ─── Section 4: 5 Training Programs Grid ─── */
.prog-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}
.prog-card {
  flex: 0 0 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
  background: #ffffff;
  border: 1.5px solid #E5E7EB;
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: 0 2px 12px rgba(6,43,95,.06);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-top-color var(--transition);
}
.prog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(6,43,95,.13);
  border-top-color: #B9903F;
}
.prog-card__num {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #9B7B2C;
  margin-bottom: 12px;
}
.prog-card__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: #062B5F;
  text-transform: uppercase;
  letter-spacing: .025em;
  line-height: 1.3;
  margin-bottom: 12px;
}
.prog-card__desc {
  font-size: 14.5px;
  color: #334155;
  line-height: 1.65;
  flex: 1;
  margin-bottom: 20px;
}
.prog-card__link {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #D8B46A;
  text-decoration: none;
  letter-spacing: .06em;
  align-self: flex-start;
  transition: color var(--transition);
}
.prog-card__link:hover { color: #9B7B2C; }

@media (max-width: 1024px) {
  .prog-card {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}
@media (max-width: 639px) {
  .prog-grid { gap: 14px; }
  .prog-card {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 24px 20px;
  }
}

/* ─── Section 5: Career Roadmap Timeline ─── */
.ltr-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0 auto 36px;
  padding: 24px 0 0;
}
.ltr-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 0;
}
.ltr-step__circle {
  width: 52px;
  height: 52px;
  background: #ffffff;
  border: 2.5px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: #062B5F;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(216,180,106,.25);
  flex-shrink: 0;
  transition: background var(--transition);
}
.ltr-step:hover .ltr-step__circle { background: var(--gold); }
.ltr-step__title {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: #062B5F;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.35;
  max-width: 88px;
}
.ltr-connector {
  flex: 0 0 20px;
  min-width: 8px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(216,180,106,.25) 100%);
  margin-top: 25px;
  align-self: flex-start;
}

/* Support features strip */
.ltr-supports {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #FAFBFC;
  border: 1.5px solid #E5E7EB;
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ltr-support {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 20px;
  border-right: 1px solid #E5E7EB;
}
.ltr-support:last-child { border-right: none; }
.ltr-support__icon { font-size: 24px; flex-shrink: 0; }
.ltr-support__title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #062B5F;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.35;
}

@media (max-width: 1024px) {
  .ltr-step__circle { width: 44px; height: 44px; font-size: 16px; }
  .ltr-step__title { font-size: 10.5px; max-width: 72px; }
  .ltr-connector { margin-top: 21px; }
  .ltr-supports { grid-template-columns: 1fr 1fr; }
  .ltr-support:nth-child(2) { border-right: none; }
  .ltr-support:nth-child(1),
  .ltr-support:nth-child(2) { border-bottom: 1px solid #E5E7EB; }
}
@media (max-width: 767px) {
  .ltr-timeline {
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 0;
  }
  .ltr-step {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 16px;
    width: 100%;
  }
  .ltr-step__circle { margin-bottom: 0; }
  .ltr-step__title { max-width: none; font-size: 13px; }
  .ltr-connector {
    flex: none;
    width: 2px;
    height: 20px;
    background: linear-gradient(180deg, var(--gold) 0%, rgba(216,180,106,.25) 100%);
    margin-top: 0;
    margin-left: 21px;
    align-self: flex-start;
  }
  .ltr-supports { grid-template-columns: 1fr 1fr; border-radius: var(--radius); }
  .ltr-support { padding: 16px; }
  .ltr-support__title { font-size: 12px; }
}
@media (max-width: 480px) {
  .ltr-supports { grid-template-columns: 1fr; }
  .ltr-support { border-right: none !important; }
  .ltr-support:not(:last-child) { border-bottom: 1px solid #E5E7EB; }
}

/* ══════════════════════════════════════════════════════
   v3.11 — Homepage 2.0 Sections 6–10
   App mockup · Community grid · Story cards · Biz grid
══════════════════════════════════════════════════════ */

/* ─── Section 6: App GAT Academy ─── */
.app-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.app-section__text .section-label,
.app-section__text .section-title,
.app-section__text .section-subtitle { text-align: left; }
.app-section__text .section-title { margin-bottom: 16px; }
.app-features {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.app-feature { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #334155; }
.app-feature__icon { font-size: 20px; flex-shrink: 0; }

/* Phone mockup */
.app-section__mockup { display: flex; justify-content: center; align-items: center; }
.app-mockup__phone {
  width: 240px;
  background: #062B5F;
  border-radius: 36px;
  padding: 8px;
  box-shadow: 0 28px 64px rgba(6,43,95,.22), 0 8px 20px rgba(6,43,95,.14);
  transform: rotate(-2deg) rotateY(4deg);
}
.app-mockup__screen {
  background: #F8FAFD;
  border-radius: 28px;
  overflow: hidden;
}
.app-mockup__header {
  background: #062B5F;
  padding: 14px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app-mockup__logo { color: #D8B46A; font-weight: 800; font-size: 13px; letter-spacing: .06em; }
.app-mockup__notif { font-size: 16px; }
.app-mockup__body { padding: 16px 14px 18px; }
.app-mockup__greeting { font-size: 12.5px; font-weight: 600; color: #062B5F; margin-bottom: 12px; }
.app-mockup__progress-card {
  background: linear-gradient(135deg, #F3D78A 0%, #D8B46A 100%);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.app-mockup__progress-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #062B5F;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 7px;
}
.app-mockup__progress-bar { height: 5px; background: rgba(6,43,95,.2); border-radius: 3px; margin-bottom: 5px; }
.app-mockup__progress-fill { height: 100%; background: #062B5F; border-radius: 3px; }
.app-mockup__progress-pct { font-size: 10px; color: rgba(6,43,95,.7); }
.app-mockup__section-title {
  font-size: 9.5px;
  font-weight: 700;
  color: #9B7B2C;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 8px;
}
.app-mockup__lesson-card {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #ffffff;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid #E5E7EB;
}
.app-mockup__lesson-icon { font-size: 17px; flex-shrink: 0; }
.app-mockup__lesson-info { flex: 1; min-width: 0; }
.app-mockup__lesson-name { font-size: 11px; font-weight: 700; color: #062B5F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-mockup__lesson-sub { font-size: 10px; color: #64748b; margin-top: 2px; }
.app-mockup__lesson-btn { font-size: 13px; color: #D8B46A; font-weight: 700; flex-shrink: 0; }

@media (max-width: 1024px) {
  .app-section { gap: 40px; }
  .app-mockup__phone { width: 210px; }
}
@media (max-width: 767px) {
  .app-section { grid-template-columns: 1fr; gap: 32px; }
  .app-section__mockup { order: -1; }
  .app-section__text .section-label,
  .app-section__text .section-title,
  .app-section__text .section-subtitle { text-align: center; }
  .app-mockup__phone { width: 220px; transform: none; }
}

/* ─── Section 7: Cộng đồng GAT ─── */
.community-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-bottom: 36px;
}
.community-card {
  flex: 0 0 calc(20% - 16px);
  min-width: 160px;
  background: #ffffff;
  border: 1.5px solid #E5E7EB;
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(6,43,95,.05);
  transition: transform var(--transition), box-shadow var(--transition);
}
.community-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(6,43,95,.1); }
.community-card__icon { font-size: 28px; margin-bottom: 10px; }
.community-card__num { font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: #062B5F; margin-bottom: 4px; line-height: 1.2; }
.community-card__label { font-size: 12.5px; color: #64748b; line-height: 1.4; }
.community-closing {
  text-align: center;
  font-size: 17px;
  color: #334155;
  font-style: italic;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.75;
}
.community-closing strong { color: #062B5F; font-style: normal; }

@media (max-width: 1024px) {
  .community-card { flex: 0 0 calc(33.333% - 14px); }
}
@media (max-width: 639px) {
  .community-card { flex: 0 0 calc(50% - 10px); padding: 20px 14px; }
  .community-closing { font-size: 15px; }
}
@media (max-width: 374px) {
  .community-card { flex: 0 0 100%; }
}

/* ─── Section 8: Câu chuyện thay đổi ─── */
.story-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.story-card {
  background: #ffffff;
  border: 1.5px solid #E5E7EB;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(6,43,95,.06);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.story-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(6,43,95,.13); }
.story-card__thumb {
  position: relative;
  height: 180px;
  background: linear-gradient(135deg, #062B5F 0%, #0D3F7F 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-card__thumb--mentor   { background: linear-gradient(135deg, #0D3F7F 0%, #1A5276 100%); }
.story-card__thumb--business { background: linear-gradient(135deg, #1B4F72 0%, #062B5F 100%); }
.story-card__thumb--case     { background: linear-gradient(135deg, #062B5F 0%, #2C3E50 100%); }
.story-card__play {
  width: 52px;
  height: 52px;
  background: rgba(216,180,106,.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #062B5F;
  padding-left: 4px;
  transition: transform var(--transition), background var(--transition);
}
.story-card:hover .story-card__play { transform: scale(1.1); background: var(--gold); }
.story-card__type {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(6,43,95,.75);
  color: #D8B46A;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 4px;
}
.story-card__body { padding: 18px 18px 20px; }
.story-card__title { font-family: var(--font-heading); font-size: 13.5px; font-weight: 700; color: #062B5F; line-height: 1.4; margin-bottom: 7px; }
.story-card__desc { font-size: 12.5px; color: #64748b; line-height: 1.55; }

@media (max-width: 1024px) {
  .story-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .story-grid { grid-template-columns: 1fr; gap: 14px; }
  .story-card__thumb { height: 160px; }
}

/* ─── Section 9: Ứng dụng doanh nghiệp ─── */
.biz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.biz-card {
  background: #ffffff;
  border: 1.5px solid #E5E7EB;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: 0 2px 10px rgba(6,43,95,.05);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.biz-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(6,43,95,.12);
  border-color: rgba(216,180,106,.5);
}
.biz-card__icon { font-size: 30px; margin-bottom: 14px; display: block; }
.biz-card__title { font-family: var(--font-heading); font-size: 14px; font-weight: 800; color: #062B5F; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.biz-card__desc { font-size: 13.5px; color: #334155; line-height: 1.65; }

@media (max-width: 1024px) {
  .biz-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 639px) {
  .biz-grid { grid-template-columns: 1fr; gap: 12px; }
  .biz-card { padding: 22px 18px; }
}

/* ══════════════════════════════════════════════════════
   v3.12 — Homepage HBR-inspired visual refinement
   Outline-navy btn · Story featured layout · Circular icons
══════════════════════════════════════════════════════ */

/* ─── btn--outline-navy (replace red outline buttons) ─── */
.btn--outline-navy {
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
}
.btn--outline-navy:hover {
  background: var(--navy);
  color: #ffffff;
}

/* ─── Section 8: Featured story layout (HBR-style) ─── */
.story-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
  margin-bottom: 24px;
}
.story-layout-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.story-card--featured .story-card__thumb {
  height: 280px;
}
.story-card--featured .story-card__title {
  font-size: 16px;
  line-height: 1.4;
}
.story-card--featured .story-card__play {
  width: 64px;
  height: 64px;
  font-size: 22px;
}

/* ─── Section 9: Circular icon (HBR "lý do chọn" style) ─── */
.biz-card__icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #062B5F 0%, #0D4A8A 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(6,43,95,.18);
}
.biz-card { border-top: 3px solid transparent; }
.biz-card:hover { border-top-color: var(--gold); }

/* ─── Section 7: Community card icon → gold circle ─── */
.community-card__icon {
  width: 56px;
  height: 56px;
  background: rgba(216,180,106,.14);
  border: 2px solid rgba(216,180,106,.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 14px;
}

/* Responsive */
@media (max-width: 1024px) {
  .story-layout { grid-template-columns: 1fr 1fr; }
  .story-card--featured .story-card__thumb { height: 220px; }
}
@media (max-width: 639px) {
  .story-layout { grid-template-columns: 1fr; }
  .story-layout-row2 { grid-template-columns: 1fr; }
  .story-card--featured .story-card__thumb { height: 180px; }
}

/* ══════════════════════════════════════════════════════
   v3.13 — Image-forward homepage: Photo placeholder system
   Sections 4 · 5 · 6 · 7 · 9 converted to photo-first
══════════════════════════════════════════════════════ */

/* ─── Universal image placeholder ─── */
.img-ph {
  width: 100%;
  background: linear-gradient(145deg, #EDF2F8 0%, #E2ECF6 100%);
  border: 2px dashed #B5CCE3;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 10px;
  color: #7A95B0;
  font-family: var(--font-primary);
  text-align: center;
  box-sizing: border-box;
}
.img-ph__ico { opacity: .5; display: block; flex-shrink: 0; }
.img-ph__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  line-height: 1.5;
  max-width: 160px;
}
.img-ph__hint { font-size: 10px; opacity: .6; }

/* ─── Aspect ratio variants ─── */
.img-ph--16x9 { aspect-ratio: 16 / 9; min-height: 140px; }
.img-ph--3x2  { aspect-ratio: 3 / 2;  min-height: 120px; }

/* App screen — phone silhouette */
.img-ph--app {
  aspect-ratio: 9 / 19;
  min-height: 400px;
  max-width: 240px;
  border-radius: 36px;
  border-width: 3px;
  border-color: #C5D8EC;
  box-shadow: 0 24px 60px rgba(6,43,95,.15), 0 8px 24px rgba(6,43,95,.07);
  padding: 28px 16px;
}

/* Support icon — small square */
.img-ph--support {
  width: 64px;
  height: 64px;
  min-height: unset;
  aspect-ratio: unset;
  border-radius: var(--radius);
  padding: 6px;
}

/* ─── Section 4: Prog card thumbnail ─── */
.prog-card__photo { margin-bottom: 16px; border-radius: var(--radius); overflow: hidden; }

/* ─── Section 5: Support icon replacement ─── */
.ltr-support__img { margin-bottom: 8px; }

/* ─── Section 6: App visual + feature check ─── */
.app-section__visual {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-feature__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--navy);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

/* ─── Section 7: Community card photo ─── */
.community-card__photo { margin-bottom: 12px; border-radius: var(--radius); overflow: hidden; }

/* ─── Section 9: Biz card photo ─── */
.biz-card__photo { margin-bottom: 16px; border-radius: var(--radius); overflow: hidden; }

/* Responsive */
@media (max-width: 1024px) {
  .img-ph--app { min-height: 320px; max-width: 200px; }
}
@media (max-width: 767px) {
  .img-ph--app { min-height: 260px; max-width: 170px; }
}
@media (max-width: 639px) {
  .img-ph--16x9 { min-height: 120px; }
  .img-ph--3x2  { min-height: 100px; }
  .img-ph--support { width: 48px; height: 48px; }
}

/* ══════════════════════════════════════════════════════
   v3.14 — Hero: GEIN-inspired digital background
   Photo bg · Dot-grid overlay · Energy rings · Gold glow
══════════════════════════════════════════════════════ */

/* ─── Hero background: digital photo + deep navy overlay ─── */
.hero {
  background:
    linear-gradient(90deg, rgba(2,18,48,.88) 0%, rgba(4,48,100,.68) 100%),
    url("../images/hero-digital-bg.jpg") center center / cover no-repeat !important;
}

/* ─── ::before — tắt hoàn toàn mọi pattern/dots trên Hero ─── */
.hero::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* ─── ::after — concentric energy rings (left side) ─── */
.hero::after {
  content: '';
  position: absolute;
  left: -140px;
  top: 50%;
  transform: translateY(-50%);
  width: 560px;
  height: 560px;
  border-radius: 50%;
  border: 1px solid rgba(99,179,237,.14);
  box-shadow:
    inset 0 0 80px rgba(99,179,237,.06),
    0 0 0  60px rgba(99,179,237,.04),
    0 0 0 120px rgba(99,179,237,.025),
    0 0 0 200px rgba(99,179,237,.012);
  pointer-events: none;
  z-index: 0;
  animation: ring-breathe 7s ease-in-out infinite;
}
@keyframes ring-breathe {
  0%, 100% { opacity: .65; }
  50%       { opacity: 1; }
}

/* ─── hero__deco: brighter gold glow sphere ─── */
.hero__deco {
  background: radial-gradient(circle, rgba(216,180,106,.24) 0%, rgba(216,180,106,.10) 38%, transparent 68%);
  width: 700px;
  height: 700px;
  right: -100px;
  top: -120px;
  animation: gold-breathe 5s ease-in-out infinite;
}
@keyframes gold-breathe {
  0%, 100% { opacity: .75; }
  50%       { opacity: 1; }
}

/* ─── Title: subtle glow, gold line unchanged ─── */
.hero__title {
  text-shadow: 0 2px 24px rgba(1,9,32,.7), 0 0 80px rgba(99,179,237,.15);
}
.hero__title span {
  color: var(--gold) !important;
  text-shadow: 0 0 40px rgba(216,180,106,.4), 0 2px 12px rgba(1,9,32,.5);
}

/* ─── Sub text: slightly brighter on dark bg ─── */
.hero__sub { color: rgba(220,235,255,.88); }

/* ─── Badge: blue-tinted to match digital theme ─── */
.hero__badge {
  background: rgba(99,179,237,.10);
  border-color: rgba(99,179,237,.4);
  color: rgba(210,235,255,.95);
}
.hero__badge::before { background: #63B3ED; }

/* ─── CTA primary → gold bg, navy text ─── */
.hero .btn--red {
  background: var(--gold) !important;
  color: var(--navy-dark) !important;
  border-color: var(--gold) !important;
  font-weight: 700;
  box-shadow: 0 4px 22px rgba(216,180,106,.38);
}
.hero .btn--red:hover {
  background: #E8C77D !important;
  box-shadow: 0 6px 30px rgba(216,180,106,.55);
  transform: translateY(-1px);
}

/* ─── CTA secondary: keep outline-white, add gold tint ─── */
.hero .btn--outline-white {
  border-color: rgba(216,180,106,.6);
  color: rgba(255,255,255,.95);
}
.hero .btn--outline-white:hover {
  background: rgba(216,180,106,.12);
  border-color: var(--gold);
}

/* ─── Workshop image frame: gold ring glow ─── */
.hero__img-frame {
  box-shadow:
    0 24px 64px rgba(0,0,0,.60),
    0 0 0 2px rgba(216,180,106,.5),
    0 0 50px rgba(216,180,106,.15);
  border-radius: 20px;
}

/* ─── Stat numbers: blue glow ─── */
.hero__stat-num {
  text-shadow: 0 0 24px rgba(99,179,237,.2);
}
.hero__stat-num span { color: var(--gold) !important; }
.hero__stats { border-top-color: rgba(99,179,237,.15); }

/* ─── Chips: slightly more visible ─── */
.hero__chip {
  background: rgba(4,20,55,.82);
  border-color: rgba(99,179,237,.22);
  box-shadow: 0 2px 12px rgba(1,9,32,.4);
}

/* Responsive: hide rings on mobile to save paint ─── */
@media (max-width: 767px) {
  .hero::after { left: -200px; width: 420px; height: 420px; }
}
@media (max-width: 479px) {
  .hero::after { display: none; }
  .hero__deco  { display: none; }
}

/* ══════════════════════════════════════════════════════
   v3.16 — Hero: xóa toàn bộ navy overlay, để ảnh nổi
   Ghi đè mọi lớp màu từ v3.0 → v3.15
══════════════════════════════════════════════════════ */

/* Background: chỉ overlay đen nhẹ, ảnh digital hiện rõ */
.hero {
  background:
    linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.10) 100%),
    url("../images/hero-digital-bg.jpg") center center / cover no-repeat !important;
}

/* Tắt hoàn toàn ::before và ::after */
.hero::before {
  display: none !important;
  content: none !important;
  background: none !important;
}
.hero::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Tắt hero__deco (vòng trang trí gold/blue) */
.hero__deco { display: none !important; }

/* Text: shadow mạnh hơn để đọc được khi overlay mỏng */
.hero__title {
  text-shadow: 0 2px 8px rgba(0,0,0,.75), 0 4px 20px rgba(0,0,0,.45) !important;
}
.hero__title span {
  color: var(--gold) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.6), 0 0 32px rgba(216,180,106,.5) !important;
}
.hero__sub {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.65) !important;
}
.hero__badge {
  background: rgba(0,0,0,.35) !important;
  border-color: rgba(216,180,106,.55) !important;
  color: #fff !important;
  backdrop-filter: blur(4px);
}
.hero__stat-num {
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.hero__stat-label {
  color: rgba(255,255,255,.85) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.hero__stats { border-top-color: rgba(255,255,255,.18) !important; }

/* Chips: glassmorphism nhẹ */
.hero__chip {
  background: rgba(0,0,0,.45) !important;
  border-color: rgba(255,255,255,.2) !important;
  backdrop-filter: blur(8px);
}

/* ══════════════════════════════════════════════════════
   v3.17 — Founder Story video: mobile/tablet full-width
   Root cause: align-items:start làm video co nhỏ trong flex
   Desktop ≥1025px giữ nguyên hoàn toàn
══════════════════════════════════════════════════════ */

/* ── Tablet ≤1024px ── */
@media (max-width: 1024px) {

  /* Fix align-items: start → stretch để children full-width */
  .brand-statement--founder .brand-statement__inner {
    align-items: stretch !important;
  }

  /* Cả 2 cột (right=video, left=text) phải full-width */
  .brand-statement--founder .brand-statement__right,
  .brand-statement--founder .brand-statement__left {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    position: relative !important;
    transform: none !important;
  }

  /* Video wrapper: full-width, giới hạn max 900px, căn giữa */
  .brand-statement--founder .brand-statement__video-wrap {
    width: 100% !important;
    max-width: 900px;
    margin: 0 auto !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
  }

  /* iframe: fill 100% chiều rộng wrapper */
  .brand-statement--founder .yt-iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
}

/* ── Mobile ≤767px ── */
@media (max-width: 767px) {
  .brand-statement--founder .brand-statement__video-wrap {
    max-width: 100% !important;
    border-radius: 12px;
  }
}

/* ── Small mobile ≤479px ── */
@media (max-width: 479px) {
  .brand-statement--founder .brand-statement__video-wrap {
    border-radius: 8px;
  }
}

/* ══════════════════════════════════════════════════════
   v3.19 — Story-card & Biz-card: link footer + <a> wrapper
══════════════════════════════════════════════════════ */

/* Story-card khi dùng thẻ <a> làm wrapper */
a.story-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.story-card:hover { color: inherit; }

.story-card__body {
  display: flex;
  flex-direction: column;
}
.story-card__footer {
  margin-top: auto;
  padding-top: 12px;
}
.story-card__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .04em;
}
a.story-card:hover .story-card__link { color: var(--gold); }

/* Biz-card khi dùng thẻ <a> làm wrapper */
a.biz-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.biz-card:hover { color: inherit; }

.biz-card__footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #E5E7EB;
}
.biz-card__link {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .04em;
}
a.biz-card:hover .biz-card__link { color: var(--gold); }

/* ══════════════════════════════════════════════════════
   v3.18 — Stats Bar: horizontal scroll on mobile/tablet
   Desktop (≥1025px) giữ nguyên layout grid 5 cột
══════════════════════════════════════════════════════ */

/* ── Tablet ≤1024px ── */
@media (max-width: 1024px) {
  .stats-bar__inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    gap: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
  }
  .stats-bar__inner::-webkit-scrollbar {
    display: none !important;
  }
  .stats-bar__item {
    flex: 0 0 165px !important;
    width: 165px !important;
    min-width: 0 !important;
    scroll-snap-align: start !important;
    border-right: 1px solid #E5E7EB !important;
    border-bottom: none !important;
    padding: 20px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .stats-bar__item:last-child {
    border-right: none !important;
  }
  .stats-bar__num {
    font-size: 32px !important;
  }
  .stats-bar__label {
    font-size: 11px !important;
    text-align: center !important;
  }
}

/* ── Mobile ≤767px ── */
@media (max-width: 767px) {
  .stats-bar__item {
    flex: 0 0 140px !important;
    width: 140px !important;
    padding: 16px 10px !important;
  }
  .stats-bar__num {
    font-size: 28px !important;
  }
}

/* ── Small mobile ≤479px ── */
@media (max-width: 479px) {
  .stats-bar__item {
    flex: 0 0 130px !important;
    width: 130px !important;
    padding: 14px 8px !important;
  }
  .stats-bar__num {
    font-size: 26px !important;
  }
}

/* ══════════════════════════════════════════════════════
   v3.20 — Hero: GEIN-inspired typography
   Font Black · Gradient Gold · Glow nhẹ · Fade-up
══════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes gein-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gein-glow-white {
  0%, 100% {
    text-shadow:
      0 0 8px  rgba(255,255,255,.55),
      0 0 18px rgba(255,255,255,.25),
      0 2px 10px rgba(0,0,0,.70);
  }
  50% {
    text-shadow:
      0 0 10px rgba(255,255,255,.70),
      0 0 26px rgba(255,255,255,.32),
      0 2px 10px rgba(0,0,0,.70);
  }
}
@keyframes gein-glow-gold {
  0%, 100% {
    filter:
      drop-shadow(0 0 10px rgba(232,182,74,.45))
      drop-shadow(0 0 22px rgba(232,182,74,.18));
  }
  50% {
    filter:
      drop-shadow(0 0 14px rgba(232,182,74,.58))
      drop-shadow(0 0 30px rgba(232,182,74,.25));
  }
}
@keyframes gein-badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(99,182,237,.5); }
  50%       { opacity: .8; transform: scale(1.3); box-shadow: 0 0 0 4px rgba(99,182,237,0); }
}

/* ── Badge GEIN-style pill ── */
.hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  background: rgba(6,20,50,.60) !important;
  border: 1px solid rgba(216,180,106,.38) !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.95) !important;
  font-family: var(--font-heading) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  padding: 9px 22px !important;
  margin-bottom: 22px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  animation: gein-fade-up 700ms 0ms ease-out both;
}

/* Tắt ::before mặc định của badge cũ */
.hero__badge::before {
  display: none !important;
}

/* Dot từ span riêng */
.hero__badge-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #5DADE2;
  border-radius: 50%;
  flex-shrink: 0;
  animation: gein-badge-pulse 2.4s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(93,173,226,.65);
}

/* ── Hero Title: Montserrat Black, viết hoa, tracking âm ── */
.hero__title {
  font-family: 'Montserrat', var(--font-heading) !important;
  font-weight: 900 !important;
  font-size: clamp(40px, 6vw, 76px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.025em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  margin-bottom: 22px !important;
  text-shadow:
    0 0 8px  rgba(255,255,255,.55),
    0 0 18px rgba(255,255,255,.25),
    0 2px 10px rgba(0,0,0,.70) !important;
  animation:
    gein-fade-up   700ms 150ms ease-out both,
    gein-glow-white 9s   1500ms ease-in-out infinite;
}

/* ── Gradient Gold span (KIẾN TẠO SỰ NGHIỆP) ── */
.hero__title span {
  display: block !important;
  background: linear-gradient(
    180deg,
    #F8E29B 0%,
    #D9AF57 45%,
    #B97A21 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter:
    drop-shadow(0 0 10px rgba(232,182,74,.45))
    drop-shadow(0 0 22px rgba(232,182,74,.18));
  animation:
    gein-fade-up  700ms 280ms ease-out both,
    gein-glow-gold 9s  1500ms ease-in-out infinite;
}

/* ── Subtitle ── */
.hero__sub {
  font-size: 16px !important;
  color: rgba(255,255,255,.90) !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-shadow: none !important;
  margin-bottom: 34px !important;
  animation: gein-fade-up 700ms 350ms ease-out both;
}

/* ── Actions ── */
.hero__actions {
  animation: gein-fade-up 700ms 480ms ease-out both;
}

/* ── Button primary: Gold gradient ── */
.hero .btn--red {
  background: linear-gradient(
    135deg,
    #F8E29B 0%,
    #D9AF57 45%,
    #B97A21 100%
  ) !important;
  color: #031B3D !important;
  border: none !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  box-shadow: 0 4px 22px rgba(217,175,87,.40) !important;
  transition: filter .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
.hero .btn--red:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 6px 30px rgba(217,175,87,.58) !important;
  transform: translateY(-2px) !important;
}

/* ── Button outline: trắng mờ, hover white 8% ── */
.hero .btn--outline-white {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,.30) !important;
  color: rgba(255,255,255,.95) !important;
  font-weight: 600 !important;
  transition: background .2s ease, border-color .2s ease, transform .2s ease !important;
}
.hero .btn--outline-white:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.55) !important;
  transform: translateY(-2px) !important;
}

/* ── Responsive: điều chỉnh font-size ── */
@media (max-width: 1024px) {
  .hero__title {
    font-size: clamp(34px, 5.5vw, 58px) !important;
    line-height: 1.0 !important;
  }
}
@media (max-width: 767px) {
  .hero__title {
    font-size: clamp(30px, 8vw, 44px) !important;
    line-height: 1.0 !important;
    letter-spacing: -0.02em !important;
  }
  .hero__sub { font-size: 14.5px !important; }
}
@media (max-width: 479px) {
  .hero__title {
    font-size: clamp(26px, 8.5vw, 36px) !important;
  }
}

/* ══════════════════════════════════════════════════════
   v3.21 — Hero: GEIN Premium Typography
   Sora 700 · Tracking dương · Glow cực nhẹ · Fade-blur
   Mục tiêu: Apple / Stripe / Linear / GEIN — sang trọng
══════════════════════════════════════════════════════ */

/* ── Animations ── */
@keyframes gein21-fade-blur-up {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}
@keyframes gein21-fade-up {
  /* Dùng cho span gradient (đã có filter drop-shadow, không dùng blur) */
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Badge: cập nhật spacing và animation ── */
.hero__badge {
  margin-bottom: 32px !important;
  animation: gein21-fade-blur-up 700ms 0ms ease-out both !important;
}

/* ── Heading: Sora 700, tracking dương, line-height 1.08 ── */
.hero__title {
  font-family: 'Sora', 'Plus Jakarta Sans', 'Manrope', 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(64px, 6vw, 88px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.02em !important;
  color: #FFFFFF !important;
  max-width: 760px !important;
  margin-bottom: 30px !important;
  word-break: keep-all !important;
  text-shadow:
    0 0 8px  rgba(255,255,255,.35),
    0 0 18px rgba(255,255,255,.12) !important;
  animation: gein21-fade-blur-up 700ms 140ms ease-out both !important;
}

/* ── Span: gradient gold #FFD979 → #D79A2B ── */
.hero__title span {
  display: block !important;
  background: linear-gradient(180deg, #FFD979 0%, #D79A2B 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  /* drop-shadow thay cho text-shadow khi dùng gradient clip */
  filter:
    drop-shadow(0 0 10px rgba(220,170,70,.22))
    drop-shadow(0 0 22px rgba(220,170,70,.10)) !important;
  animation: gein21-fade-up 700ms 260ms ease-out both !important;
}

/* ── Description ── */
.hero__sub {
  font-size: 20px !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  text-shadow: none !important;
  max-width: 620px !important;
  margin-bottom: 42px !important;
  animation: gein21-fade-blur-up 700ms 320ms ease-out both !important;
}

/* ── Actions ── */
.hero__actions {
  animation: gein21-fade-blur-up 700ms 440ms ease-out both !important;
}

/* ── Button primary: gradient gold, bo góc 14px ── */
.hero .btn--red {
  background: linear-gradient(135deg, #FFD979 0%, #D79A2B 100%) !important;
  color: #1C0E00 !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  box-shadow: 0 4px 20px rgba(215,154,43,.32) !important;
  transition: filter .22s ease, box-shadow .22s ease, transform .22s ease !important;
}
.hero .btn--red:hover {
  filter: brightness(1.10) !important;
  box-shadow: 0 6px 28px rgba(215,154,43,.48) !important;
  transform: translateY(-2px) !important;
}

/* ── Button outline: trắng 25%, hover white 8% ── */
.hero .btn--outline-white {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,.25) !important;
  border-radius: 14px !important;
  color: rgba(255,255,255,.95) !important;
  font-weight: 500 !important;
  transition: background .22s ease, border-color .22s ease, transform .22s ease !important;
}
.hero .btn--outline-white:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.45) !important;
  transform: translateY(-2px) !important;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hero__title {
    font-size: 52px !important;
    line-height: 1.10 !important;
  }
  .hero__sub { font-size: 18px !important; }
}
@media (max-width: 767px) {
  .hero__title {
    font-size: 40px !important;
    line-height: 1.12 !important;
    letter-spacing: 0.015em !important;
    max-width: 100% !important;
  }
  .hero__sub { font-size: 16px !important; max-width: 100% !important; }
}
@media (max-width: 479px) {
  .hero__title {
    font-size: clamp(30px, 8.5vw, 40px) !important;
    letter-spacing: 0.01em !important;
  }
  .hero__sub { font-size: 15px !important; margin-bottom: 28px !important; }
}

/* ══════════════════════════════════════════════════════
   v3.22 — Hero Desktop Layout Fix (≥1025px ONLY)
   Cân bằng text–ảnh · Vừa 1 viewport · 2 dòng gọn
   Mobile / tablet KHÔNG bị ảnh hưởng
══════════════════════════════════════════════════════ */

@media (min-width: 1025px) {

  /* ── 1. Hero container: vừa 1 màn hình ── */
  .hero {
    min-height: calc(100vh - 112px) !important; /* 112 = topbar~40 + header~72 */
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  /* ── 2. Inner grid: equal columns, wider container ── */
  .hero__inner {
    max-width: 1480px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 36px 48px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 56px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* ── 3. Badge ── */
  .hero__badge {
    margin-bottom: 24px !important;
    padding: 8px 18px !important;
    font-size: 10.5px !important;
  }

  /* ── 4. Heading: 2 dòng không vỡ ── */
  .hero__title {
    font-size: clamp(44px, 3.6vw, 58px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.015em !important;
    max-width: none !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important; /* ngăn chữ xuống dòng ngoài ý muốn */
    overflow: hidden !important;
  }

  /* ── 5. Description ── */
  .hero__sub {
    font-size: 18px !important;
    line-height: 1.55 !important;
    max-width: 580px !important;
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    white-space: normal !important; /* cho phép description wrap bình thường */
  }

  /* ── 6. Actions ── */
  .hero__actions {
    margin-top: 32px !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
  }
  .hero .btn--red,
  .hero .btn--outline-white {
    min-height: 58px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    white-space: nowrap !important;
  }

  /* ── 7. Stats: compact ── */
  .hero__stats {
    margin-top: 28px !important;
    padding-top: 18px !important;
    gap: 12px 20px !important;
  }
  .hero__stat-num  { font-size: 30px !important; }
  .hero__stat-label { font-size: 11.5px !important; }

  /* ── 8. Visual column ── */
  .hero__visual {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── 9. Image frame: gold glow, proper sizing ── */
  .hero__img-frame {
    width: 100% !important;
    max-width: 820px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow:
      0 28px 64px rgba(0,0,0,.58),
      0 0 0 1.5px rgba(216,180,106,.50),
      0 0 48px rgba(216,180,106,.14) !important;
  }

  /* ── 10. Image: 16:9, object-fit cover ── */
  .hero__img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center 40% !important;
  }

  /* ── 11. Tablet landscape 1025–1280px: scale xuống nhẹ ── */
  @media (max-width: 1280px) {
    .hero__inner {
      padding: 32px 36px !important;
      gap: 44px !important;
    }
    .hero__title {
      font-size: clamp(40px, 3.4vw, 52px) !important;
    }
    .hero__sub { font-size: 17px !important; }
    .hero__stat-num { font-size: 26px !important; }
  }

}

/* ══════════════════════════════════════════════════════
   v3.23 — Hero Desktop: ảnh cao ngang vuông, đổi 45/55
   Xóa 16:9 · ảnh fill chiều cao Hero · chips bám đáy
   Desktop only (≥1025px) — Mobile/Tablet giữ nguyên
══════════════════════════════════════════════════════ */

@media (min-width: 1025px) {

  /* ── Hero: chiều cao cố định vừa 1 màn hình ── */
  .hero {
    height: clamp(640px, calc(100vh - 112px), 900px) !important;
    min-height: unset !important;
    max-height: unset !important;
  }

  /* ── Grid: 45% text / 55% image ── */
  .hero__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    align-items: center !important;
  }

  /* ── Visual: stretch để ảnh fill chiều cao row ── */
  .hero__visual {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── Image frame: cao gần vuông, fill chiều cao hero ── */
  .hero__img-frame {
    position: relative !important;
    width: 100% !important;
    max-width: 840px !important;
    /* Chiều cao = 66% viewport height, tối thiểu 540px, tối đa 720px */
    height: clamp(540px, 66vh, 720px) !important;
    aspect-ratio: unset !important; /* xóa 16:9 từ v3.22 */
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow:
      0 28px 64px rgba(0,0,0,.60),
      0 0 0 1.5px rgba(216,180,106,.52),
      0 0 52px rgba(216,180,106,.16) !important;
  }

  /* ── Image: fill frame, object-fit cover ── */
  .hero__img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;           /* fill frame height */
    aspect-ratio: unset !important;    /* xóa 16:9 */
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* ── Chips: luôn bám đáy ảnh ── */
  .hero__img-chips {
    display: flex !important;
    position: absolute !important;
    bottom: 14px !important;
    left: 12px !important;
    right: 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ── Điều chỉnh theo chiều cao màn hình ── */

  /* Viewport thấp ≤800px: giảm ảnh xuống 520px */
  @media (max-height: 800px) {
    .hero__img-frame { height: clamp(480px, 62vh, 580px) !important; }
  }

  /* Viewport cao ≥1000px: cho phép ảnh to hơn */
  @media (min-height: 1000px) {
    .hero__img-frame { height: clamp(680px, 66vh, 820px) !important; }
  }

}

/* ══════════════════════════════════════════════════════
   v3.24 — Hero Desktop: 4:3 image · stats ngoài hero
   Premium CTA gold + glass · exact viewport fit
   Desktop (≥1025px) isolated · CTA applies all screens
══════════════════════════════════════════════════════ */

/* ── Hero-stats wrapper: stats tách ra ngoài hero (all screens) ── */
.hero-stats-outer {
  background: var(--navy-dark);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 24px 20px 32px;
}
.hero-stats-outer .hero__stats {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px 20px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}
@media (min-width: 640px) {
  .hero-stats-outer .hero__stats {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ══ Desktop ≥1025px: Hero layout ══ */
@media (min-width: 1025px) {

  .hero-stats-outer {
    padding: 28px 48px 36px !important;
  }
  .hero-stats-outer .hero__stats {
    max-width: 1440px !important;
    gap: 20px !important;
  }

  /* ── 1. Hero: vừa đúng 1 màn hình ── */
  .hero {
    min-height: calc(100vh - 72px) !important;
    max-height: calc(100vh - 72px) !important;
    height: unset !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  /* ── 2. Hero inner: grid 47fr/53fr ── */
  .hero__inner {
    display: grid !important;
    grid-template-columns: 47fr 53fr !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 48px !important;
    max-width: 1440px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 48px !important;
  }

  /* ── 3. Fallback: ẩn stats nếu vẫn còn trong hero ── */
  .hero .hero__stats {
    display: none !important;
  }

  /* ── 4. Visual column: center image ── */
  .hero__visual {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── 5. Heading: 2 dòng cứng, không vỡ ── */
  .hero__title {
    font-size: clamp(42px, 3.8vw, 60px) !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
    letter-spacing: 0.015em !important;
    max-width: 760px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  /* ── 6. Description ── */
  .hero__sub {
    font-size: 18px !important;
    line-height: 1.55 !important;
    max-width: 620px !important;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    white-space: normal !important;
  }

  /* ── 7. Actions: 2 nút ngang, không wrap ── */
  .hero__actions {
    margin-top: 32px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    align-items: center !important;
  }

  /* ── 8. Image frame: 4:3, max 760×560px ── */
  .hero__img-frame {
    position: relative !important;
    width: 100% !important;
    max-width: 760px !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 560px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow:
      0 24px 60px rgba(0,0,0,.55),
      0 0 0 1.5px rgba(216,180,106,.52),
      0 0 48px rgba(216,180,106,.14) !important;
  }

  /* ── 9. Image: fill frame, cover ── */
  .hero__img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* ── 10. Chips: bám đáy ── */
  .hero__img-chips {
    display: flex !important;
    position: absolute !important;
    bottom: 14px !important;
    left: 12px !important;
    right: 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ── 11. Laptop nhỏ 1025–1280px: padding chặt hơn ── */
  @media (max-width: 1280px) {
    .hero__inner {
      padding: 36px !important;
      gap: 36px !important;
    }
    .hero__title {
      font-size: clamp(38px, 3.4vw, 52px) !important;
    }
    .hero__sub { font-size: 17px !important; }
  }

}

/* ══ CTA Premium: Gold gradient + Glass (tất cả màn hình) ══ */

/* ── Button chính: vàng gold ── */
.hero .btn--red {
  background: linear-gradient(180deg, #F6D57A 0%, #E9BF59 55%, #D79E2F 100%) !important;
  color: #0C2A5B !important;
  -webkit-text-fill-color: #0C2A5B !important;
  text-shadow: none !important;
  filter: none !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  padding: 18px 42px !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 18px 40px rgba(233,191,89,.35) !important;
  transition: all 300ms cubic-bezier(.22,.61,.36,1) !important;
  cursor: pointer !important;
  min-height: 58px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
.hero .btn--red:hover {
  background: linear-gradient(180deg, #FFD979 0%, #F1C15A 100%) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 24px 48px rgba(233,191,89,.45) !important;
}
.hero .btn--red:active {
  transform: scale(.98) !important;
  box-shadow: 0 12px 28px rgba(233,191,89,.30) !important;
}

/* ── Button phụ: kính trắng mờ ── */
.hero .btn--outline-white {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  color: #0C2A5B !important;
  -webkit-text-fill-color: #0C2A5B !important;
  text-shadow: none !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  border: 1.5px solid rgba(12,42,91,.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 32px rgba(12,42,91,.12) !important;
  transition: all 300ms cubic-bezier(.22,.61,.36,1) !important;
  cursor: pointer !important;
  padding: 18px 42px !important;
  min-height: 58px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
.hero .btn--outline-white:hover {
  background: rgba(255,255,255,.95) !important;
  border: 1.5px solid rgba(12,42,91,.32) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(12,42,91,.18) !important;
}
.hero .btn--outline-white:active {
  transform: scale(.98) !important;
  box-shadow: 0 8px 20px rgba(12,42,91,.12) !important;
}

/* ══════════════════════════════════════════════════════
   Prog Carousel — HBR Style
   Section "Bạn muốn phát triển điều gì?"
   5 cards · 3/2/1 visible · scroll-snap · arrow nav
══════════════════════════════════════════════════════ */

/* ── Arrows: aligned right, below section-header ── */
.prog-arrows {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  margin-bottom: 20px;
}
.prog-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid #0C2A5B;
  background: #fff;
  color: #0C2A5B;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 180ms, color 180ms, box-shadow 180ms;
  box-shadow: 0 2px 8px rgba(12,42,91,.10);
  flex-shrink: 0;
  padding: 0;
}
.prog-arrow:hover:not(:disabled) {
  background: #0C2A5B;
  color: #fff;
  box-shadow: 0 4px 16px rgba(12,42,91,.22);
}
.prog-arrow:disabled {
  opacity: 0.32;
  cursor: default;
  box-shadow: none;
}

/* ── Track wrapper: clips overflow, no page-level scroll ── */
.prog-track-wrap {
  overflow: hidden;
  padding-bottom: 8px; /* room for shadow */
}

/* ── Scrollable track ── */
.prog-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px 12px;
  /* 3 cards visible: each card = (100% - 2×gap) / 3 */
}
.prog-track::-webkit-scrollbar { display: none; }

/* ── Card: HBR style — white bg, navy border ── */
.prog-card-hbr {
  flex: 0 0 calc(33.333% - 16px);
  min-width: 260px;
  background: #ffffff;
  border: 1.5px solid #0C2A5B;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(12,42,91,.07);
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 220ms, transform 220ms;
}
.prog-card-hbr:hover {
  box-shadow: 0 8px 32px rgba(12,42,91,.15);
  transform: translateY(-4px);
  text-decoration: none;
}

/* ── Image area: 16:9 ── */
.prog-card-hbr__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  flex-shrink: 0;
  background: #EEF2F9;
}
.prog-card-hbr__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Placeholder */
.prog-card-hbr__ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #EEF2F9 0%, #DCE6F4 100%);
  color: #6B84AD;
  gap: 8px;
  padding: 16px;
  text-align: center;
}
.prog-card-hbr__ph svg { opacity: .65; }
.prog-card-hbr__ph span {
  font-size: 11.5px;
  line-height: 1.4;
  color: #7A90B3;
  max-width: 160px;
}

/* ── Card body ── */
.prog-card-hbr__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}

/* ── Title: uppercase, navy ── */
.prog-card-hbr__title {
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  color: #0C2A5B;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
  margin: 0 0 10px;
}

/* ── Divider: navy hairline ── */
.prog-card-hbr__divider {
  width: 100%;
  height: 1px;
  background: #0C2A5B;
  opacity: 0.18;
  margin-bottom: 12px;
  flex-shrink: 0;
}

/* ── Description ── */
.prog-card-hbr__desc {
  font-size: 13.5px;
  color: #3B4D6E;
  line-height: 1.6;
  flex: 1;
  margin: 0 0 16px;
}

/* ── CTA button: outline navy ── */
.prog-card-hbr__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 100%;
  border: 1px solid #0C2A5B;
  border-radius: 8px;
  background: #fff;
  color: #0C2A5B;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.025em;
  transition: background 200ms, color 200ms;
  margin-top: auto;
  flex-shrink: 0;
}
.prog-card-hbr:hover .prog-card-hbr__btn {
  background: #0C2A5B;
  color: #fff;
}

/* ── Tablet: 2 cards visible ── */
@media (max-width: 1024px) {
  .prog-card-hbr {
    flex: 0 0 calc(50% - 12px);
  }
}

/* ── Mobile: 1 card visible ── */
@media (max-width: 639px) {
  .prog-card-hbr {
    flex: 0 0 calc(100% - 4px);
    min-width: 0;
  }
  .prog-track { gap: 16px; padding: 4px 0 12px; }
  .prog-arrows { margin-top: 20px; margin-bottom: 16px; }
  .prog-arrow { width: 38px; height: 38px; }
}

/* ── Mobile very small ── */
@media (max-width: 375px) {
  .prog-card-hbr__title { font-size: 12.5px; }
  .prog-card-hbr__body { padding: 14px 16px 16px; }
}

/* ── Mobile/tablet: buttons xếp dọc ── */
@media (max-width: 1024px) {
  .hero .btn--red,
  .hero .btn--outline-white {
    font-size: 16px !important;
    padding: 14px 28px !important;
    min-height: 52px !important;
  }
  .hero__actions {
    flex-direction: column !important;
    gap: 16px !important;
    align-items: stretch !important;
  }
  .hero__actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════════════════
   v3.25 — Hero Desktop: stats về lại content trái,
   grid 1fr/1fr, ảnh 4:3, height 100vh−72px chính xác
   Desktop only ≥1025px · Mobile/Tablet không đổi
══════════════════════════════════════════════════════ */

/* ── Ẩn wrapper hero-stats-outer (không còn dùng) ── */
.hero-stats-outer { display: none !important; }

@media (min-width: 1025px) {

  /* ── 1. Hero: đúng 1 màn hình, max 900px ── */
  .hero {
    height: calc(100vh - 72px) !important;
    min-height: 580px !important;
    max-height: 900px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  /* ── 2. Grid: 50/50, padding 36px top/bottom ── */
  .hero__inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 40px !important;
    max-width: 1440px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 36px 48px !important;
  }

  /* ── 3. Visual column: center image ── */
  .hero__visual {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── 4. Heading: 2 dòng cứng, không vỡ ── */
  .hero__title {
    font-size: clamp(40px, 3.4vw, 56px) !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
    letter-spacing: 0.015em !important;
    max-width: 700px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  /* ── 5. Description ── */
  .hero__sub {
    font-size: 17px !important;
    line-height: 1.55 !important;
    max-width: 600px !important;
    margin-top: 16px !important;
    margin-bottom: 0 !important;
    white-space: normal !important;
  }

  /* ── 6. Actions: 2 nút ngang, gap 20px ── */
  .hero__actions {
    margin-top: 24px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    align-items: center !important;
  }

  /* ── 7. Stats 2×2: nằm trong cột text, dưới CTA ── */
  .hero .hero__stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 520px !important;
    width: 100% !important;
    margin-top: 28px !important;
    gap: 14px 28px !important;
    padding-top: 22px !important;
    padding-bottom: 0 !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
    margin-bottom: 0 !important;
  }

  /* ── 8. Stat numbers & labels ── */
  .hero .hero__stat-num {
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }
  .hero .hero__stat-label {
    font-size: 12.5px !important;
    margin-top: 3px !important;
    line-height: 1.35 !important;
  }

  /* ── 9. Image frame: 4:3, max 500px tall ── */
  .hero__img-frame {
    position: relative !important;
    width: 100% !important;
    max-width: 700px !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    max-height: 500px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow:
      0 24px 60px rgba(0,0,0,.55),
      0 0 0 1.5px rgba(216,180,106,.52),
      0 0 48px rgba(216,180,106,.14) !important;
  }

  /* ── 10. Image: fill frame, cover ── */
  .hero__img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* ── 11. Chips: bám đáy ── */
  .hero__img-chips {
    display: flex !important;
    position: absolute !important;
    bottom: 14px !important;
    left: 12px !important;
    right: 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ── 12. Laptop nhỏ 1025–1280px: thu nhỏ vừa phải ── */
  @media (max-width: 1280px) {
    .hero__inner {
      padding: 28px 36px !important;
      gap: 32px !important;
    }
    .hero__title {
      font-size: clamp(36px, 3.2vw, 48px) !important;
    }
    .hero__sub { font-size: 16px !important; }
    .hero__actions { margin-top: 20px !important; gap: 16px !important; }
    .hero .hero__stats {
      gap: 12px 20px !important;
      margin-top: 22px !important;
      padding-top: 18px !important;
    }
    .hero .hero__stat-num { font-size: 25px !important; }
    .hero .hero__stat-label { font-size: 12px !important; }
  }

}

/* ══════════════════════════════════════════════════════
   v3.26 — Hero Desktop: nội dung lên cao hơn
   Đổi align-items: center → flex-start, tinh padding
   Desktop only ≥1025px · không đổi font/size/spacing
══════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  /* Đổi từ căn giữa sang căn trên → content sát header */
  .hero {
    align-items: flex-start !important;
  }

  /* 36px top → 32px: badge cách header ~32px */
  .hero__inner {
    padding-top: 32px !important;
    padding-bottom: 44px !important;
  }

  /* Laptop nhỏ 1025–1280px: padding sát hơn */
  @media (max-width: 1280px) {
    .hero__inner {
      padding-top: 26px !important;
      padding-bottom: 36px !important;
    }
  }

}

/* ══════════════════════════════════════════════════════
   Pillars Carousel — Tablet & Mobile only (≤1024px)
   Section "Hệ sinh thái GAT Academy"
   Desktop ≥1025px: giữ nguyên grid 5 cột
   Tablet ≤1024px: 1 hàng ngang, kéo sang
   Mobile ≤640px: card 86% width
══════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* ── Override grid → flex carousel ── */
  .pillars-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 20px !important;
    /* dùng container padding sẵn có làm left margin */
    padding: 0 0 16px !important;
    /* scrollbar mảnh nhất có thể */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(12,42,91,.18) transparent !important;
    /* không để grid rule cũ can thiệp */
    grid-template-columns: unset !important;
  }

  /* scrollbar webkit: cao 3px, gần transparent */
  .pillars-grid::-webkit-scrollbar {
    height: 3px;
  }
  .pillars-grid::-webkit-scrollbar-track {
    background: transparent;
  }
  .pillars-grid::-webkit-scrollbar-thumb {
    background: rgba(12,42,91,.18);
    border-radius: 2px;
  }

  /* spacer ảo cuối track → card cuối có breathing room */
  .pillars-grid::after {
    content: '';
    flex: 0 0 1px;
    padding-right: 4px;
  }

  /* ── Mỗi card: không xuống hàng, 70% tablet ── */
  .pillar-card {
    flex: 0 0 70% !important;
    max-width: 520px !important;
    min-width: 220px !important;
    width: auto !important;
    scroll-snap-align: start !important;
  }

  /* ảnh giữ nguyên height 200px */
  .pillar-card__img {
    height: 200px !important;
  }

}

/* ── Mobile ≤640px: card 86% ── */
@media (max-width: 640px) {
  .pillars-grid {
    gap: 16px !important;
  }
  .pillar-card {
    flex: 0 0 86% !important;
    max-width: 360px !important;
  }
  .pillar-card__img {
    height: 180px !important;
  }
}

/* ── Mobile nhỏ ≤375px ── */
@media (max-width: 375px) {
  .pillar-card {
    flex: 0 0 90% !important;
    max-width: 320px !important;
  }
  .pillar-card__body {
    padding: 14px !important;
  }
  .pillar-card__img {
    height: 160px !important;
  }
}

/* ═══════════════════════════════════════════════════
   v3.27 — Journey Roadmap (Section 5 redesign)
   ═══════════════════════════════════════════════════ */

/* Section background */
.journey-section {
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F8FF 100%);
}

/* Heading accent span (gold) */
.journey-title-accent {
  color: #D8B46A;
}

/* ── Timeline Track ── */
.journey-track-outer {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 48px 0 44px;
  padding-bottom: 4px;
}
.journey-track-outer::-webkit-scrollbar { display: none; }

.journey-track {
  display: flex;
  gap: 14px;
  position: relative;
  padding-bottom: 32px;
  min-width: max-content;
}

/* Gold line running below cards, at dot level */
.journey-track::before {
  content: '';
  position: absolute;
  bottom: 9px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(216,180,106,0) 0%,
    #D8B46A 8%,
    #F6D57A 50%,
    #D8B46A 92%,
    rgba(216,180,106,0) 100%
  );
  z-index: 0;
}

/* ── Each Step ── */
.journey-step {
  flex: 1 1 0;
  min-width: 155px;
  max-width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}

/* Mini card */
.journey-step__card {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(6,43,95,.10);
  border-top: 2.5px solid rgba(216,180,106,.65);
  border-radius: 12px;
  padding: 18px 14px 16px;
  box-shadow: 0 2px 14px rgba(6,43,95,.06);
  text-align: center;
  transition: box-shadow 220ms ease, transform 220ms ease;
  cursor: default;
}
.journey-step__card:hover {
  box-shadow: 0 6px 24px rgba(6,43,95,.12);
  transform: translateY(-4px);
}

/* Step number badge */
.journey-step__num {
  display: inline-block;
  font-family: 'Sora', 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #D8B46A;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Step title */
.journey-step__title {
  font-family: 'Montserrat', 'Be Vietnam Pro', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #062B5F;
  line-height: 1.35;
  margin: 0 0 6px;
}

/* Step description */
.journey-step__desc {
  font-size: 11.5px;
  color: #6477A0;
  line-height: 1.5;
  margin: 0;
}

/* Gold dot */
.journey-step__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F6D57A 0%, #D8B46A 100%);
  border: 3px solid #FFFFFF;
  box-shadow: 0 0 0 1.5px #D8B46A, 0 0 10px rgba(216,180,106,.55);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* ── Benefit Cards ── */
.journey-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 12px;
}

.journey-benefit {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 20px;
  background: #FFFFFF;
  border: 1px solid rgba(6,43,95,.09);
  border-radius: 16px;
  box-shadow: 0 2px 14px rgba(6,43,95,.05);
  transition: box-shadow 220ms ease, transform 220ms ease;
}
.journey-benefit:hover {
  box-shadow: 0 8px 28px rgba(6,43,95,.10);
  transform: translateY(-3px);
}

/* Icon container */
.journey-benefit__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #EEF2FB 0%, #E0E9F6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.journey-benefit__title {
  font-family: 'Montserrat', 'Be Vietnam Pro', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #062B5F;
  line-height: 1.3;
  margin: 0 0 6px;
}

.journey-benefit__desc {
  font-size: 13.5px;
  color: #4E6180;
  line-height: 1.6;
  margin: 0;
}

/* ── Gold CTA Button ── */
.btn--journey-gold {
  background: linear-gradient(180deg, #F6D57A 0%, #E9BF59 55%, #D79E2F 100%);
  color: #0C2A5B;
  -webkit-text-fill-color: #0C2A5B;
  border: none;
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(233,191,89,.30);
  transition: all 260ms cubic-bezier(.22,.61,.36,1);
}
.btn--journey-gold:hover {
  background: linear-gradient(180deg, #FFD979 0%, #F1C15A 100%);
  box-shadow: 0 14px 36px rgba(233,191,89,.42);
  transform: translateY(-2px);
  color: #0C2A5B;
  -webkit-text-fill-color: #0C2A5B;
}

/* ── Responsive: Tablet ≤1024px ── */
@media (max-width: 1024px) {
  .journey-step {
    flex: 0 0 190px;
    max-width: 190px;
  }
  .journey-benefits {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .journey-track-outer {
    margin: 36px 0 32px;
  }
}

/* ── Responsive: Mobile ≤640px ── */
@media (max-width: 640px) {
  .journey-step {
    flex: 0 0 170px;
    max-width: 170px;
  }
  .journey-step__card {
    padding: 14px 12px 12px;
  }
  .journey-step__title {
    font-size: 12px;
  }
  .journey-benefits {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .journey-benefit {
    padding: 18px 16px;
    gap: 12px;
  }
  .journey-benefit__title {
    font-size: 13.5px;
  }
  .journey-benefit__desc {
    font-size: 12.5px;
  }
}

/* ── Responsive: Mobile nhỏ ≤374px ── */
@media (max-width: 374px) {
  .journey-benefits {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════
   v3.28 — Journey Roadmap: image areas on cards
   ═══════════════════════════════════════════════════ */

/* ── Step card: overflow + image area ── */
.journey-step {
  flex: 0 0 230px !important;
  min-width: 230px !important;
  max-width: 230px !important;
}

.journey-step__card {
  border-top: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  border: 1px solid rgba(12,42,91,.12) !important;
  text-align: left !important;
}
.journey-step__card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 28px rgba(6,43,95,.13) !important;
}

/* Placeholder image area — step (16:9) */
.journey-step__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #EAF0FA 0%, #D3E2F0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-bottom: 1px solid rgba(12,42,91,.08);
  overflow: hidden;
  position: relative;
}

/* Camera icon */
.journey-step__img::before {
  content: '';
  display: block;
  width: 28px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='22' viewBox='0 0 28 22' fill='none'%3E%3Crect x='1' y='5' width='26' height='16' rx='3' stroke='%23062B5F' stroke-opacity='.28' stroke-width='1.5'/%3E%3Ccircle cx='14' cy='13' r='5' stroke='%23062B5F' stroke-opacity='.28' stroke-width='1.5'/%3E%3Cpath d='M10 5V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1' stroke='%23062B5F' stroke-opacity='.28' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.journey-step__img-label {
  font-size: 9.5px;
  color: rgba(6,43,95,.38);
  text-align: center;
  line-height: 1.4;
  padding: 0 10px;
  font-family: 'Be Vietnam Pro', sans-serif;
}

/* Card body (num + title + desc) */
.journey-step__body {
  padding: 14px 14px 16px;
  text-align: center;
}

/* ── Benefit cards: image area replaces icon ── */
.journey-benefit {
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  flex-direction: column !important;
}
.journey-benefit:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 10px 32px rgba(6,43,95,.12) !important;
}

/* Placeholder image area — benefit (16:9) */
.journey-benefit__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #E8F0FA 0%, #CCDDEE 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid rgba(12,42,91,.08);
  overflow: hidden;
  flex-shrink: 0;
}

/* Camera icon — benefit */
.journey-benefit__img::before {
  content: '';
  display: block;
  width: 34px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='26' viewBox='0 0 34 26' fill='none'%3E%3Crect x='1' y='5' width='32' height='20' rx='3.5' stroke='%23062B5F' stroke-opacity='.28' stroke-width='1.5'/%3E%3Ccircle cx='17' cy='15' r='6' stroke='%23062B5F' stroke-opacity='.28' stroke-width='1.5'/%3E%3Cpath d='M12 5V4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1' stroke='%23062B5F' stroke-opacity='.28' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.journey-benefit__img-label {
  font-size: 10.5px;
  color: rgba(6,43,95,.38);
  text-align: center;
  line-height: 1.4;
  padding: 0 16px;
  font-family: 'Be Vietnam Pro', sans-serif;
}

/* Benefit body */
.journey-benefit__body {
  padding: 18px 18px 20px !important;
}

/* ── Responsive: Tablet ≤1024px ── */
@media (max-width: 1024px) {
  .journey-step {
    flex: 0 0 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }
  .journey-benefits {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* ── Responsive: Mobile ≤640px ── */
@media (max-width: 640px) {
  .journey-step {
    flex: 0 0 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
  }
  .journey-benefits {
    grid-template-columns: 1fr !important;
  }
  .journey-step__body {
    padding: 12px 12px 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v3.29 — Journey Roadmap Complete Redesign (jrm-*)
   Concept: Apple/Coursera-style — Milestone timeline + Detail card
   ═══════════════════════════════════════════════════════════════ */

.jrm-wrap {
  margin-top: 56px;
}

/* ══════════ MILESTONE TIMELINE ══════════ */

.jrm-timeline-outer {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 40px;
  padding: 8px 2px 4px;
}
.jrm-timeline-outer::-webkit-scrollbar { display: none; }

.jrm-timeline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-width: 700px;
  position: relative;
  padding: 0;
}

/* Gold connecting line at avatar center */
/* num line-height ~16px + gap 8px + half avatar 44px = 68px */
.jrm-line {
  position: absolute;
  top: 68px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(216,180,106,0) 0%,
    #C9A44B 8%,
    #F0CC6A 50%,
    #C9A44B 92%,
    rgba(216,180,106,0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Milestone Button ── */
.jrm-milestone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 4px 4px 10px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: opacity 200ms;
  -webkit-tap-highlight-color: transparent;
}
.jrm-milestone:focus-visible {
  outline: 2px solid #D8B46A;
  outline-offset: 6px;
  border-radius: 10px;
}

/* Step number */
.jrm-ms-num {
  display: block;
  font-family: 'Sora', 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(6,43,95,.32);
  letter-spacing: 0.12em;
  line-height: 16px;
  transition: color 280ms ease;
}
.jrm-milestone.active .jrm-ms-num,
.jrm-milestone:hover .jrm-ms-num {
  color: #C9A44B;
}

/* Avatar circle */
.jrm-ms-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid rgba(6,43,95,.10);
  box-shadow: 0 2px 12px rgba(6,43,95,.07);
  transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
  background: #E8EDF5;
}
.jrm-milestone:hover .jrm-ms-avatar {
  transform: scale(1.05);
  border-color: rgba(216,180,106,.55);
  box-shadow: 0 6px 22px rgba(6,43,95,.14);
}
.jrm-milestone.active .jrm-ms-avatar {
  border-color: #D8B46A;
  box-shadow:
    0 0 0 3.5px rgba(216,180,106,.22),
    0 4px 22px rgba(6,43,95,.13);
  transform: scale(1.08);
}

/* Avatar placeholder (gradient + initials) */
.jrm-av-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: rgba(255,255,255,.88);
  letter-spacing: 0.04em;
  background: linear-gradient(150deg, #1248A0 0%, #062B5F 100%);
  user-select: none;
}
.jrm-av-ph[data-step="2"] { background: linear-gradient(150deg, #1660B8 0%, #0A3A8A 100%); }
.jrm-av-ph[data-step="3"] { background: linear-gradient(150deg, #0C4AA0 0%, #052860 100%); }
.jrm-av-ph[data-step="4"] { background: linear-gradient(150deg, #C89A30 0%, #A07820 100%); }
.jrm-av-ph[data-step="5"] { background: linear-gradient(150deg, #12284A 0%, #060E20 100%); }
.jrm-av-ph[data-step="6"] { background: linear-gradient(150deg, #040C1A 0%, #020610 100%); }

/* Step name label */
.jrm-ms-name {
  font-family: 'Be Vietnam Pro', 'Montserrat', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: #5A6E90;
  text-align: center;
  line-height: 1.4;
  transition: color 250ms ease, font-weight 200ms;
  white-space: nowrap;
}
.jrm-milestone.active .jrm-ms-name {
  font-weight: 700;
  color: #062B5F;
}
.jrm-milestone:hover .jrm-ms-name {
  color: #2A4070;
}

/* ══════════ DETAIL CARD ══════════ */

.jrm-cards {
  position: relative;
}

.jrm-card {
  display: none;
  grid-template-columns: 45fr 55fr;
  overflow: hidden;
  background: #FFFFFF;
  border-radius: 24px;
  border: 1px solid rgba(6,43,95,.08);
  box-shadow:
    0 2px 8px rgba(6,43,95,.04),
    0 16px 48px rgba(6,43,95,.07);
}
.jrm-card.active {
  display: grid;
  animation: jrmSlideIn 320ms cubic-bezier(.25,.46,.45,.94) both;
}

@keyframes jrmSlideIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Image area */
.jrm-card__visual {
  overflow: hidden;
  position: relative;
  background: #E5EDF8;
}

/* Image placeholder */
.jrm-img-ph {
  width: 100%;
  height: 100%;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
}
/* Camera icon via ::before */
.jrm-img-ph::before {
  content: '';
  display: block;
  width: 48px;
  height: 38px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='38' viewBox='0 0 48 38' fill='none'%3E%3Crect x='2' y='8' width='44' height='28' rx='5' stroke='%23062B5F' stroke-opacity='.22' stroke-width='2'/%3E%3Ccircle cx='24' cy='22' r='9' stroke='%23062B5F' stroke-opacity='.22' stroke-width='2'/%3E%3Cpath d='M16 8V7a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v1' stroke='%23062B5F' stroke-opacity='.22' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
}
.jrm-img-ph span {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 12px;
  color: rgba(6,43,95,.32);
  text-align: center;
  padding: 0 24px;
  line-height: 1.5;
}

/* Per-step card image background tints */
.jrm-img-ph--1 { background: linear-gradient(150deg, #D4E0F4 0%, #B8CCE8 100%); }
.jrm-img-ph--2 { background: linear-gradient(150deg, #CAD8F0 0%, #AABCE0 100%); }
.jrm-img-ph--3 { background: linear-gradient(150deg, #D0DCEE 0%, #B4C6E0 100%); }
.jrm-img-ph--4 { background: linear-gradient(150deg, #ECD8A0 0%, #D4BC6C 100%); }
.jrm-img-ph--5 { background: linear-gradient(150deg, #C2CEEC 0%, #9CB0D4 100%); }
.jrm-img-ph--6 { background: linear-gradient(150deg, #B4C0D8 0%, #8898B4 100%); }

/* Content area */
.jrm-card__content {
  padding: 48px 52px 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

/* Level badge pill */
.jrm-card__badge {
  display: inline-flex;
  align-items: center;
  background: rgba(216,180,106,.10);
  color: #8A6010;
  border: 1px solid rgba(216,180,106,.42);
  border-radius: 100px;
  font-family: 'Sora', 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 16px;
  width: fit-content;
}

/* Card title */
.jrm-card__title {
  font-family: 'Sora', 'Montserrat', sans-serif;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 800;
  color: #062B5F;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.025em;
}

/* Card description */
.jrm-card__desc {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 15px;
  color: #485E7E;
  line-height: 1.78;
  margin: 0;
}

/* Perks list */
.jrm-card__perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jrm-card__perks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2C3E5A;
  line-height: 1.5;
}
.jrm-card__perks li::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: rgba(216,180,106,.12);
  border: 1.5px solid rgba(216,180,106,.55);
  color: #C09028;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

/* CTA wrapper */
.jrm-card__cta {
  padding-top: 4px;
}

/* ══════════ RESPONSIVE ══════════ */

/* Tablet ≤1024px */
@media (max-width: 1024px) {
  .jrm-ms-avatar { width: 80px; height: 80px; }
  /* Line: 16 + 8 + 40 = 64px */
  .jrm-line { top: 64px; }
  .jrm-ms-name { font-size: 11px; }
  .jrm-card__content { padding: 36px 40px 36px 32px; gap: 18px; }
  .jrm-img-ph { min-height: 340px; }
}

/* ≤900px: card ngang vẫn hoạt động, nhưng nén nội dung */
@media (max-width: 900px) {
  .jrm-card__title { font-size: clamp(22px, 4.5vw, 30px); }
  .jrm-card__desc { font-size: 14px; }
  .jrm-card__content { padding: 28px 28px 28px 24px; gap: 16px; }
}

/* ≤768px: card stack dọc (ảnh trên, text dưới) */
@media (max-width: 768px) {
  .jrm-card { grid-template-columns: 1fr !important; }
  .jrm-card__visual { aspect-ratio: 16/9; }
  .jrm-img-ph { min-height: unset; height: 100%; }
  .jrm-card__content { padding: 28px 24px 32px; gap: 16px; }
  .jrm-card__title { font-size: clamp(22px, 6vw, 30px); }
}

/* Mobile ≤480px */
@media (max-width: 480px) {
  .jrm-wrap { margin-top: 36px; }
  .jrm-timeline-outer { margin-bottom: 28px; }
  .jrm-timeline { min-width: 560px; }
  .jrm-ms-avatar { width: 72px; height: 72px; }
  /* Line: 16 + 8 + 36 = 60px */
  .jrm-line { top: 60px; }
  .jrm-ms-name { font-size: 10.5px; }
  .jrm-milestone.active .jrm-ms-avatar { transform: scale(1.05); }
  .jrm-card__content { padding: 22px 18px 26px; gap: 14px; }
  .jrm-card__desc { font-size: 13.5px; line-height: 1.7; }
  .jrm-card__perks li { font-size: 13px; }
  .jrm-av-ph svg { width: 38px; height: 38px; }
}

/* ═══════════════════════════════════════════════
   v3.30 — Avatar SVG icons (replace text abbrev.)
   ═══════════════════════════════════════════════ */

/* Remove text-rendering props, keep flex centering */
.jrm-av-ph {
  font-size: 0 !important;
  letter-spacing: 0 !important;
}

/* SVG inside avatar: always centered, no shrink */
.jrm-av-ph svg {
  display: block;
  flex-shrink: 0;
  /* Slight opacity boost for inactive milestones */
  opacity: 0.82;
  transition: opacity 250ms ease;
}
.jrm-milestone.active .jrm-av-ph svg,
.jrm-milestone:hover .jrm-av-ph svg {
  opacity: 1;
}

/* Tablet: slightly smaller icons */
@media (max-width: 1024px) {
  .jrm-av-ph svg { width: 40px; height: 40px; }
}

/* ═══════════════════════════════════════════════════════════
   v3.31 — Affiliate Star Ladder + Community Mosaic Gallery
   ═══════════════════════════════════════════════════════════ */

/* ─── AFFILIATE STAR LADDER ─── */

.affiliate-section { overflow: hidden; }

.affiliate-ladder-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 0 24px;
}
.affiliate-ladder-wrap::-webkit-scrollbar { display: none; }

.affiliate-ladder {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center;
  gap: 20px;
  min-width: 920px;
  margin: 72px auto 20px;
  padding: 8px 8px 0;
  position: relative;
}

/* Gold connecting line at base */
.affiliate-ladder::before {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 3%;
  right: 3%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #D8B46A 12%, #F6D57A 50%, #D8B46A 88%, transparent);
  z-index: 0;
}

.affiliate-level-card {
  position: relative;
  z-index: 1;
  width: 190px !important;
  min-width: 190px !important;
  min-height: 190px;
  background: #fff;
  border: 1.5px solid rgba(12,42,91,.10);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(12,42,91,.10), 0 4px 12px rgba(12,42,91,.06);
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  padding: 28px 16px 24px;
  gap: 6px;
  transition: transform 300ms cubic-bezier(.34,1.56,.64,1), box-shadow 300ms ease;
  cursor: default;
  flex-shrink: 0;
}

/* Staircase — ascending from left to right */
.affiliate-level-card[data-lvl="1"] { transform: translateY(40px); }
.affiliate-level-card[data-lvl="2"] { transform: translateY(20px); }
.affiliate-level-card[data-lvl="3"] { transform: translateY(0px); }
.affiliate-level-card[data-lvl="4"] { transform: translateY(-20px); }
.affiliate-level-card[data-lvl="5"] { transform: translateY(-50px) scale(1.08); }

/* Hover — lift 8px from resting position */
.affiliate-level-card[data-lvl="1"]:hover { transform: translateY(32px); box-shadow: 0 28px 60px rgba(12,42,91,.16); }
.affiliate-level-card[data-lvl="2"]:hover { transform: translateY(12px); box-shadow: 0 28px 60px rgba(12,42,91,.16); }
.affiliate-level-card[data-lvl="3"]:hover { transform: translateY(-8px); box-shadow: 0 28px 60px rgba(12,42,91,.16); }
.affiliate-level-card[data-lvl="4"]:hover { transform: translateY(-28px); box-shadow: 0 28px 60px rgba(12,42,91,.16); }
.affiliate-level-card[data-lvl="5"]:hover { transform: translateY(-58px) scale(1.11); }

/* MASTER card — gold gradient + glow */
.affiliate-level-card--master {
  background: linear-gradient(180deg, #F6D57A 0%, #E9BF59 55%, #D79E2F 100%) !important;
  border-color: rgba(216,180,106,.5) !important;
  box-shadow: 0 0 0 3px rgba(216,180,106,.22), 0 24px 64px rgba(216,150,30,.35), 0 8px 24px rgba(12,42,91,.10) !important;
}
.affiliate-level-card--master:hover {
  box-shadow: 0 0 0 4px rgba(216,180,106,.3), 0 32px 72px rgba(216,150,30,.5) !important;
}

.alc-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #7A4F00;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 100px;
  padding: 3px 10px;
  margin-bottom: 2px;
}

.alc-stars {
  display: flex !important;
  flex-direction: row !important;
  gap: 2px;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
}

.alc-pct {
  display: block;
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 900;
  color: #062B5F;
  letter-spacing: -0.03em;
  line-height: 1;
}
.affiliate-level-card--master .alc-pct {
  font-size: clamp(32px, 3.6vw, 42px);
  color: #3A2000;
}

.alc-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #334E6F;
  margin-top: 2px;
}
.affiliate-level-card--master .alc-title { color: #5A3500; }

.alc-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #94A3B8;
}
.affiliate-level-card--master .alc-sub { color: rgba(90,53,0,.55); }

.affiliate-note {
  text-align: center;
  font-size: 12.5px;
  color: #94A3B8;
  margin: 52px auto 0;
  max-width: 680px;
  line-height: 1.65;
}

.affiliate-cta { text-align: center; margin-top: 28px; }

.affiliate-btn {
  display: inline-block;
  background: linear-gradient(180deg, #F6D57A 0%, #E9BF59 55%, #D79E2F 100%);
  color: #0C2A5B !important;
  font-size: 15px;
  font-weight: 700;
  padding: 15px 40px;
  border-radius: 14px;
  border: none;
  text-decoration: none !important;
  box-shadow: 0 4px 20px rgba(216,180,106,.4);
  transition: box-shadow 250ms, transform 250ms;
  cursor: pointer;
}
.affiliate-btn:hover {
  box-shadow: 0 8px 32px rgba(216,180,106,.6);
  transform: translateY(-2px);
  color: #0C2A5B !important;
  text-decoration: none !important;
}

/* ─── COMMUNITY MOSAIC GALLERY ─── */

.community-section { background: #F7F9FF; }

.community-mosaic {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  margin: 64px 0 32px;
}

.community-side-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.community-tile {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  min-height: 248px;
  box-shadow: 0 18px 50px rgba(12,42,91,.12);
  background: #0D2247;
}

/* Scalable background via ::before — hover zooms without moving overlay text */
.community-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: transform 420ms cubic-bezier(.25,.46,.45,.94);
}
.community-tile:hover::before { transform: scale(1.05); }

/* Individual tile backgrounds */
.community-tile-large::before {
  background: linear-gradient(145deg, #1A3568 0%, #0D2247 100%);
}
.community-side-grid .community-tile:nth-child(1)::before {
  background: linear-gradient(145deg, #1248A0 0%, #0A3070 100%);
}
.community-side-grid .community-tile:nth-child(2)::before {
  background: linear-gradient(145deg, #0C4A88 0%, #072E60 100%);
}
.community-side-grid .community-tile:nth-child(3)::before {
  background: linear-gradient(145deg, #1A3F88 0%, #0E2458 100%);
}
.community-side-grid .community-tile:nth-child(4)::before {
  background: linear-gradient(145deg, #0F3F7A 0%, #082050 100%);
}

/* Overlay — sits above the ::before bg layer */
.community-tile__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 48px 24px 24px;
  background: linear-gradient(0deg, rgba(6,43,95,.90) 0%, rgba(6,43,95,.52) 55%, transparent 100%);
  z-index: 1;
}

.community-tile-large {
  min-height: 520px;
}
.community-tile-large .community-tile__overlay {
  padding: 64px 36px 36px;
}

.community-tile__stat {
  display: block;
  color: #fff;
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.community-tile-large .community-tile__stat {
  font-size: clamp(30px, 3.8vw, 46px);
  letter-spacing: -0.03em;
}

.community-tile__lbl {
  display: block;
  color: rgba(255,255,255,.76);
  font-size: 12.5px;
  font-weight: 500;
  margin-top: 4px;
}
.community-tile-large .community-tile__lbl {
  font-size: 15px;
  margin-top: 6px;
}

/* ─── RESPONSIVE ─── */

@media (max-width: 1100px) {
  .affiliate-ladder { gap: 14px; }
  .affiliate-level-card { width: 175px !important; min-width: 175px !important; padding: 24px 14px 20px; }
  .community-mosaic { grid-template-columns: 1fr 1fr; gap: 16px; }
  .community-tile-large { min-height: 420px; }
}

@media (max-width: 768px) {
  .affiliate-ladder-wrap { padding: 0 0 16px; }
  .affiliate-ladder {
    justify-content: flex-start;
    min-width: 820px;
    margin: 36px 0 16px;
    gap: 12px;
  }
  .affiliate-level-card[data-lvl="1"],
  .affiliate-level-card[data-lvl="2"],
  .affiliate-level-card[data-lvl="3"],
  .affiliate-level-card[data-lvl="4"] { transform: none; }
  .affiliate-level-card[data-lvl="5"] { transform: scale(1.04); }
  .affiliate-level-card[data-lvl="1"]:hover,
  .affiliate-level-card[data-lvl="2"]:hover,
  .affiliate-level-card[data-lvl="3"]:hover,
  .affiliate-level-card[data-lvl="4"]:hover { transform: translateY(-4px); }
  .affiliate-level-card[data-lvl="5"]:hover { transform: scale(1.07); }

  .community-mosaic { grid-template-columns: 1fr; gap: 14px; margin: 40px 0 24px; }
  .community-tile-large { min-height: 320px; }
  .community-side-grid { gap: 14px; }
}

@media (max-width: 480px) {
  .affiliate-level-card { width: 155px !important; min-width: 155px !important; min-height: 165px; padding: 18px 10px 16px; }
  .alc-pct { font-size: 24px !important; }
  .affiliate-level-card--master .alc-pct { font-size: 28px !important; }
  .community-tile-large { min-height: 280px; }
  .community-tile { min-height: 195px; }
  .community-side-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .community-tile__overlay { padding: 36px 16px 16px; }
  .community-tile-large .community-tile__overlay { padding: 44px 20px 20px; }
}

/* ═══════════════════════════════════════════════════════════
   v3.32 — Enterprise Business Applications Showcase
   ═══════════════════════════════════════════════════════════ */

/* ─── OUTER SECTION ─── */
.ent-section {
  padding: 48px 20px !important;
  background: transparent !important;
}

/* ─── PREMIUM WRAPPER ─── */
.ent-wrapper {
  max-width: 1520px;
  margin: 0 auto;
  background: linear-gradient(180deg, #F6FAFF 0%, #EAF3FF 100%);
  border-radius: 32px;
  padding: 88px 0 80px;
  position: relative;
  overflow: hidden;
}

/* Dot grid pattern — subtle business blueprint */
.ent-bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,47,108,.055) 1.5px, transparent 1.5px);
  background-size: 36px 36px;
  pointer-events: none;
  z-index: 0;
}

/* ─── HEADER ─── */
.ent-header {
  text-align: center;
  padding: 0 56px;
  margin-bottom: 64px;
  position: relative;
  z-index: 1;
}

.ent-badge {
  display: inline-block;
  background: rgba(218,176,90,.16);
  color: #002F6C;
  border: 1px solid rgba(218,176,90,.38);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 26px;
}

.ent-title {
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 800;
  line-height: 1.1;
  color: #002F6C;
  max-width: 880px;
  margin: 0 auto 20px;
  letter-spacing: -0.025em;
}

.ent-subtitle {
  font-size: 17px;
  line-height: 1.75;
  color: #51627A;
  max-width: 680px;
  margin: 0 auto;
}

/* ─── CAROUSEL WRAPPER ─── */
.ent-carousel-wrap {
  position: relative;
  z-index: 1;
}

/* Right-edge fade hint */
.ent-carousel-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 110px;
  background: linear-gradient(270deg, #EAF3FF 0%, rgba(234,243,255,0) 100%);
  pointer-events: none;
  z-index: 4;
}
/* Left-edge fade (shows after scrolling starts) */
.ent-carousel-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 110px;
  background: linear-gradient(90deg, #EAF3FF 0%, rgba(234,243,255,0) 100%);
  pointer-events: none;
  z-index: 4;
}

/* ─── CAROUSEL TRACK ─── */
.ent-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 20px 72px 40px;
  -webkit-overflow-scrolling: touch;
}
.ent-carousel::-webkit-scrollbar { display: none; }

/* ─── CARD ─── */
.ent-card {
  flex: 0 0 380px;
  min-width: 0;
  scroll-snap-align: start;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 18px 18px 22px;
  box-shadow: 0 18px 50px rgba(0,47,108,.08), 0 2px 8px rgba(0,47,108,.04);
  border: 1px solid rgba(0,47,108,.06);
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  color: inherit;
}
.ent-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 70px rgba(0,47,108,.14), 0 4px 14px rgba(0,47,108,.06);
  text-decoration: none !important;
  color: inherit;
}

/* ─── CARD IMAGE ─── */
.ent-card__img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  flex-shrink: 0;
}

.ent-card__img-ph {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}
.ent-card:hover .ent-card__img-ph { transform: scale(1.04); }

/* Individual placeholder backgrounds */
.ent-ph--1 { background: linear-gradient(145deg, #C0D4EE 0%, #85AACC 100%); }
.ent-ph--2 { background: linear-gradient(145deg, #C8C4A0 0%, #9E9470 100%); }
.ent-ph--3 { background: linear-gradient(145deg, #B0C8E8 0%, #7298C0 100%); }
.ent-ph--4 { background: linear-gradient(145deg, #B8D2E0 0%, #7AA4BC 100%); }
.ent-ph--5 { background: linear-gradient(145deg, #BCBCD8 0%, #888AB0 100%); }
.ent-ph--6 { background: linear-gradient(145deg, #ACCAE0 0%, #6E96B8 100%); }

/* ─── CARD BADGE ─── */
.ent-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  z-index: 2;
  line-height: 1;
}
.ent-card__badge--navy {
  background: #002F6C;
  color: #FFFFFF;
}
.ent-card__badge--gold {
  background: linear-gradient(135deg, #F6D57A 0%, #D79E2F 100%);
  color: #3A2000;
}

/* ─── CARD BODY ─── */
.ent-card__body {
  padding: 22px 6px 4px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ent-card__title {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 800;
  line-height: 1.22;
  color: #002F6C;
  margin: 0 0 10px;
}

.ent-card__desc {
  font-size: 15px;
  line-height: 1.7;
  color: #51627A;
  margin: 0;
  flex: 1;
}

/* CTA pill */
.ent-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(0,47,108,.18);
  color: #002F6C;
  background: #FFFFFF;
  font-size: 13.5px;
  font-weight: 700;
  margin-top: 20px;
  align-self: flex-start;
  transition: background 270ms ease, color 270ms ease, border-color 270ms ease;
  white-space: nowrap;
}
.ent-card:hover .ent-card__cta {
  background: #002F6C;
  color: #FFFFFF;
  border-color: #002F6C;
}

.ent-arrow {
  transition: transform 270ms ease;
  flex-shrink: 0;
}
.ent-card:hover .ent-arrow { transform: translateX(4px); }

/* ─── NAV BUTTONS ─── */
.ent-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,47,108,.10);
  box-shadow: 0 4px 20px rgba(0,47,108,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #002F6C;
  z-index: 10;
  transition: background 250ms, color 250ms, box-shadow 250ms, opacity 250ms;
}
.ent-nav:hover {
  background: #002F6C;
  color: #FFFFFF;
  box-shadow: 0 8px 28px rgba(0,47,108,.22);
}
.ent-nav:disabled {
  opacity: 0.28;
  pointer-events: none;
}
.ent-nav--prev { left: 14px; }
.ent-nav--next { right: 14px; }

/* ─── FOOTER CTA ─── */
.ent-footer {
  text-align: center;
  padding: 0 48px;
  position: relative;
  z-index: 1;
}

.ent-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #002F6C;
  color: #FFFFFF !important;
  font-size: 15px;
  font-weight: 700;
  padding: 17px 38px;
  border-radius: 14px;
  text-decoration: none !important;
  box-shadow: 0 4px 22px rgba(0,47,108,.28);
  transition: box-shadow 250ms, transform 250ms, background 250ms;
}
.ent-footer-btn:hover {
  background: #001E50;
  box-shadow: 0 10px 36px rgba(0,47,108,.42);
  transform: translateY(-2px);
  color: #FFFFFF !important;
}
.ent-footer-btn svg { transition: transform 270ms ease; flex-shrink: 0; }
.ent-footer-btn:hover svg { transform: translateX(5px); }

/* ─── RESPONSIVE ─── */

@media (max-width: 1280px) {
  .ent-wrapper { border-radius: 28px; padding: 76px 0 68px; }
  .ent-card { flex: 0 0 350px; }
  .ent-carousel { padding: 20px 60px 36px; gap: 20px; }
}

@media (max-width: 1024px) {
  .ent-section { padding: 36px 16px !important; }
  .ent-wrapper { border-radius: 24px; padding: 64px 0 60px; }
  .ent-header { padding: 0 40px; margin-bottom: 52px; }
  .ent-title { font-size: clamp(30px, 4vw, 42px); }
  .ent-card { flex: 0 0 310px; }
  .ent-carousel { padding: 16px 48px 32px; gap: 18px; }
  .ent-carousel-wrap::after,
  .ent-carousel-wrap::before { width: 72px; }
}

@media (max-width: 768px) {
  .ent-section { padding: 28px 14px !important; }
  .ent-wrapper { border-radius: 20px; padding: 56px 0 52px; }
  .ent-header { padding: 0 28px; margin-bottom: 40px; }
  .ent-title { font-size: clamp(26px, 6vw, 36px); }
  .ent-subtitle { font-size: 15px; }
  .ent-card { flex: 0 0 82vw; }
  .ent-carousel { padding: 14px 28px 28px; gap: 16px; }
  .ent-nav { display: none; }
  .ent-carousel-wrap::after,
  .ent-carousel-wrap::before { width: 40px; }
  .ent-footer { padding: 0 28px; }
  .ent-footer-btn { font-size: 14px; padding: 15px 28px; }
}

@media (max-width: 576px) {
  .ent-section { padding: 20px 12px !important; }
  .ent-wrapper { border-radius: 18px; padding: 48px 0 44px; }
  .ent-header { padding: 0 22px; margin-bottom: 32px; }
  .ent-title { font-size: clamp(24px, 7.5vw, 32px); }
  .ent-subtitle { font-size: 14.5px; line-height: 1.65; }
  .ent-badge { font-size: 11.5px; padding: 7px 16px; margin-bottom: 20px; }
  .ent-card { flex: 0 0 85vw; }
  .ent-carousel { padding: 12px 22px 24px; gap: 14px; }
  .ent-card__title { font-size: 19px; }
  .ent-card__desc { font-size: 14px; }
  .ent-card__cta { font-size: 13px; height: 40px; padding: 0 16px; margin-top: 16px; }
  .ent-footer { padding: 0 22px; }
  .ent-footer-btn { font-size: 13.5px; padding: 14px 22px; gap: 8px; }
}

@media (max-width: 390px) {
  .ent-card { flex: 0 0 88vw; }
  .ent-carousel { padding: 12px 16px 22px; }
  .ent-wrapper { border-radius: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v3.33 — RESPONSIVE CAROUSEL: TABLET & MOBILE
   SCOPE: Media queries ONLY — zero rules outside @media blocks
   Desktop > 1024px: untouched, unchanged, zero impact
   Pillars (≤1024px): already done in v3.25 — skip
   ═══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   TABLET — ≤ 1024px  |  ~2 cards visible, horizontal carousel
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* ── Bài Viết Mới Nhất / Articles ── */
  .articles-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 20px !important;
    padding-top: 8px !important;
    padding-bottom: 24px !important;
    scrollbar-width: none !important;
    grid-template-columns: unset !important;
  }
  .articles-grid::-webkit-scrollbar { display: none !important; }
  .article-card {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    width: calc(48% - 12px) !important;
    min-width: 260px !important;
  }

  /* ── Câu Chuyện Thay Đổi / Story Cards ── */
  .story-layout,
  .story-layout-row2 {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 20px !important;
    padding-top: 8px !important;
    padding-bottom: 24px !important;
    scrollbar-width: none !important;
    grid-template-columns: unset !important;
  }
  /* Khoảng cách giữa 2 carousel story (Row1 → Row2) */
  .story-layout { margin-bottom: 8px !important; }
  .story-layout-row2 { margin-bottom: 0 !important; }
  .story-layout::-webkit-scrollbar,
  .story-layout-row2::-webkit-scrollbar { display: none !important; }
  .story-layout .story-card,
  .story-layout-row2 .story-card {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    width: calc(48% - 12px) !important;
    min-width: 260px !important;
  }

  /* ── Lịch Khai Giảng & Sự Kiện / Events ── */
  .events-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 20px !important;
    padding-top: 8px !important;
    padding-bottom: 24px !important;
    scrollbar-width: none !important;
  }
  .events-list::-webkit-scrollbar { display: none !important; }
  .event-row {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    width: calc(52% - 12px) !important;
    min-width: 300px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
  }
  /* Separator: border-left → border-top khi card xếp dọc */
  .event-row .event-row__action {
    border-left: none !important;
    border-top: 1px solid var(--gray-mid) !important;
    align-self: auto !important;
  }
}

/* ────────────────────────────────────────────────────────────
   MOBILE — ≤ 576px  |  ~1.1 card visible (82 vw), touch swipe
   ──────────────────────────────────────────────────────────── */
@media (max-width: 576px) {

  /* ── Articles ── */
  .article-card {
    width: 82vw !important;
    min-width: 240px !important;
  }
  .articles-grid > .article-card:last-child { margin-right: 16px !important; }

  /* ── Story Cards ── */
  .story-layout .story-card,
  .story-layout-row2 .story-card {
    width: 82vw !important;
    min-width: 240px !important;
  }
  .story-layout > .story-card:last-child,
  .story-layout-row2 > .story-card:last-child { margin-right: 16px !important; }

  /* ── Events ── */
  .event-row {
    width: 82vw !important;
    min-width: 260px !important;
  }
  .events-list > .event-row:last-child { margin-right: 16px !important; }
}

/* ────────────────────────────────────────────────────────────
   MOBILE SMALL — ≤ 390px  |  88 vw for very narrow screens
   ──────────────────────────────────────────────────────────── */
@media (max-width: 390px) {
  .article-card {
    width: 86vw !important;
  }
  .story-layout .story-card,
  .story-layout-row2 .story-card {
    width: 86vw !important;
  }
  .event-row {
    width: 86vw !important;
  }
}

/* ═══════════════════════════════════════════════════════
   v3.34 — Newsletter Strip CTA: Mobile Only (≤ 576px)
   Desktop + Tablet: zero changes — all inside @media
   ═══════════════════════════════════════════════════════ */
@media (max-width: 576px) {
  /* Text → Form: tăng gap lên 20px */
  .newsletter-strip__inner {
    gap: 20px !important;
  }

  /* Form: chuyển từ row → column, khoảng cách input→button = 14px */
  .newsletter-strip__form {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  /* Input: 100% wide, 54px tall, không auto-zoom iOS */
  .newsletter-strip__input {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    font-size: 16px !important;
    padding: 0 18px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    flex: none !important;
  }

  /* Button: 100% wide, cùng chiều cao input */
  .newsletter-strip .btn--red {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 16px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v3.35 — Real Images: CSS support for photo replacements
   All rules target specific containers — no global changes
   ═══════════════════════════════════════════════════════════════ */

/* ── Journey card: img fills visual panel ── */
.jrm-card__visual img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
@media (max-width: 1024px) {
  .jrm-card__visual img { min-height: unset; height: 100%; }
}

/* ── App screenshot: natural ratio, no crop ── */
.app-screenshot {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(6,43,95,.15), 0 8px 24px rgba(6,43,95,.07);
  object-fit: contain;
  object-position: center;
}
@media (max-width: 1024px) { .app-screenshot { max-width: 260px; } }
@media (max-width: 767px)  { .app-screenshot { max-width: 220px; } }

/* ── Community tile: real photo layer ── */
.community-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
  transition: transform 420ms cubic-bezier(.25,.46,.45,.94);
}
.community-tile:hover .community-tile__img { transform: scale(1.05); }
/* Make ::before a semi-transparent overlay so photo shows through */
.community-tile-large::before {
  background: linear-gradient(to top, rgba(6,27,73,.92) 0%, rgba(6,27,73,.45) 55%, rgba(6,27,73,.18) 100%) !important;
  z-index: 1 !important;
}
.community-tile-large .community-tile__overlay { z-index: 2 !important; }

/* ── Article card: real photo fills thumbnail ── */
.article-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}
/* Keep category badge above photo */
.article-card__thumb .article-card__cat { z-index: 1; }

/* ── Enterprise solution cards: real images with hover zoom ── */
.ent-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}
.ent-card:hover .ent-card__img-wrap img { transform: scale(1.04); }
/* Badge stays above photo */
.ent-card__img-wrap .ent-card__badge { z-index: 2; }

/* ── v3.36: Community small tiles — real background photos ── */
/* Override solid-color ::before with semi-transparent gradient so photo shows through */
.community-side-grid .community-tile::before {
  background: linear-gradient(to top, rgba(6,27,73,.85) 0%, rgba(6,27,73,.4) 55%, rgba(6,27,73,.15) 100%) !important;
  z-index: 1 !important;
}
/* Text overlay above the gradient */
.community-side-grid .community-tile .community-tile__overlay {
  z-index: 2 !important;
}
/* Hover zoom on small-tile photos */
.community-side-grid .community-tile:hover .community-tile__img {
  transform: scale(1.05);
}

/* ── v3.37: Journey roadmap → horizontal carousel ── */
/* Container becomes a 1-slide-at-a-time scroll container */
.jrm-cards {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  gap: 0 !important;
  /* Contain the scroll within this element — never propagate to page */
  overscroll-behavior-x: contain !important;
}
.jrm-cards::-webkit-scrollbar { display: none !important; }

/* Every card is always rendered (display: grid overrides the hide) */
.jrm-card {
  display: grid !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  scroll-snap-align: start !important;
  animation: none !important;
}
/* Active card: no entry animation needed — scroll provides the transition */
.jrm-card.active {
  animation: none !important;
}
/* Cursor hint on desktop so users know they can drag */
.jrm-cards { cursor: grab; }
.jrm-cards.is-dragging { cursor: grabbing !important; }

/* ── v3.38: YouTube Facade — thumbnail overlay ── */
.yt-facade {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Thumbnail loaded via JS backgroundImage; dark fallback while it loads */
  background: var(--navy-dark) center / cover no-repeat;
  transition: opacity 280ms ease;
  /* Outline for keyboard focus */
  outline: none;
}
.yt-facade:focus-visible { box-shadow: 0 0 0 3px var(--red-gat); }
.yt-facade--hidden {
  opacity: 0;
  pointer-events: none;
}
.yt-facade__play {
  filter: drop-shadow(0 2px 14px rgba(0,0,0,.6));
  transition: transform 200ms ease, filter 200ms ease;
}
.yt-facade:hover .yt-facade__play,
.yt-facade:focus-visible .yt-facade__play {
  transform: scale(1.14);
  filter: drop-shadow(0 4px 22px rgba(0,0,0,.75)) brightness(1.1);
}

/* ════════════════════════════════════════════════════════════
   HERO REBUILD FINAL
   Ghi đè toàn bộ v3.x cũ. Chỉ tác động Hero.
   Không chỉnh header / footer / section khác.
════════════════════════════════════════════════════════════ */

/* Chống tràn ngang — dùng clip thay hidden để không phá vỡ position:sticky */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* Stats-bar đã xóa khỏi HTML */
.stats-bar { display: none !important; }

/* ── Hero section: height tự co theo nội dung ──────────────
   Xóa toàn bộ min-height cũ (580px / 440px / 340px).
   overflow:hidden giữ deco/rings không tràn ra ngoài.      */
.hero {
  min-height: 0        !important;
  height: auto         !important;
  max-height: none     !important;
  overflow: hidden     !important;
  display: flex        !important;
  align-items: stretch !important;   /* inner tự kéo dài = hero */
  flex-direction: column !important;
}

/* ── Hero inner: container + padding chính thức ────────────
   padding: top  |  sides  |  bottom  (sides = 0, dùng width calc)
   Desktop: 72px 0 56px  |  Tablet: 56px 0 44px  |  Mobile: 36px 0 32px */
.hero__inner {
  padding:        72px 0 56px  !important;
  max-width:      1200px       !important;
  width:          calc(100% - 48px) !important;  /* 24px mỗi bên */
  margin:         0 auto       !important;
  box-sizing:     border-box   !important;
  /* Giữ grid 2 cột từ base CSS */
  display:        grid         !important;
  grid-template-columns: 46fr 54fr !important;
  gap:            clamp(32px, 4vw, 52px) !important;
  align-items:    center       !important;
}

/* ── Typography spacing ─── */
.hero__badge  { margin-bottom: 14px !important; }
.hero__title  { margin-bottom: 14px !important; }
.hero__sub    { margin-bottom: 22px !important; max-width: 480px !important; }
.hero__stats  { margin-top: 24px    !important; padding-top: 18px !important; }

/* ── CTA wrapper: 1 hàng, nowrap trên mọi màn hình ─── */
.hero__actions {
  display:         flex        !important;
  flex-direction:  row         !important;
  flex-wrap:       nowrap      !important;
  gap:             10px        !important;
  align-items:     center      !important;
  justify-content: flex-start  !important;
}

/* ── Desktop CTA: h=40px, p=0 18px, 14px, r=10px ─── */
.hero .btn--lg,
.hero__actions .btn--lg,
.hero__actions .btn {
  display:         inline-flex !important;
  align-items:     center      !important;
  justify-content: center      !important;
  height:          40px        !important;
  min-height:      0           !important;
  max-height:      none        !important;
  padding:         0 18px      !important;
  font-size:       14px        !important;
  font-weight:     700         !important;
  border-radius:   10px        !important;
  white-space:     nowrap      !important;
  width:           auto        !important;
  min-width:       0           !important;
  flex:            0 0 auto    !important;
  line-height:     1           !important;
  box-sizing:      border-box  !important;
}

/* ── Tablet landscape 1025–1199px: vẫn 2 cột ─── */
@media (max-width: 1199px) and (min-width: 1025px) {
  .hero__inner {
    padding: 60px 0 48px !important;
    width: calc(100% - 48px) !important;
  }
  .hero .btn--lg,
  .hero__actions .btn--lg,
  .hero__actions .btn { height: 38px !important; padding: 0 16px !important; font-size: 13px !important; }
}

/* ── Tablet portrait ≤1024px: 1 cột ─── */
@media (max-width: 1024px) {
  .hero__inner {
    padding:               56px 0 44px !important;
    width:                 calc(100% - 40px) !important;
    grid-template-columns: 1fr !important;
    gap:                   28px !important;
  }
  .hero__title {
    font-size: clamp(36px, 5.5vw, 52px) !important;
    line-height: 1.1 !important;
  }
  .hero__stats { margin-top: 20px !important; padding-top: 14px !important; }
  .hero .btn--lg,
  .hero__actions .btn--lg,
  .hero__actions .btn {
    height: 37px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    border-radius: 9px !important;
  }
}

/* ── Mobile ≤767px ─────────────────────────────────────────
   - Hiện ảnh workshop bên dưới stats, aspect-ratio 16/9
   - heading cố định 32px
   - CTA 1 hàng nowrap, rất nhỏ gọn (h=33px, p=0 10px, 12px)
   - Stats 2 cột gọn                                         */
@media (max-width: 767px) {
  .hero__inner {
    padding:               36px 0 32px !important;
    width:                 calc(100% - 32px) !important;
    grid-template-columns: 1fr !important;
    gap:                   20px !important;
  }

  /* Hiện ảnh workshop, đặt sau content (grid row 2) */
  .hero__visual {
    display:    block !important;
    margin-top: 0     !important;
    order:      2     !important;
  }
  .hero__img-frame {
    border-radius: 16px    !important;
    overflow:      hidden  !important;
  }
  .hero__img {
    width:        100%    !important;
    height:       auto    !important;
    aspect-ratio: 16 / 9  !important;
    object-fit:   cover   !important;
    display:      block   !important;
  }

  .hero__title {
    font-size:   32px !important;
    line-height: 1.1  !important;
    margin-bottom: 10px !important;
  }
  .hero__sub {
    font-size:     14px !important;
    line-height:   1.6  !important;
    margin-bottom: 14px !important;
    max-width:     100% !important;
  }
  .hero__badge { margin-bottom: 10px !important; }

  /* CTA: nowrap, căn giữa, cực nhỏ */
  .hero__actions {
    display:         flex    !important;
    flex-direction:  row     !important;
    flex-wrap:       nowrap  !important;
    justify-content: center  !important;
    align-items:     center  !important;
    gap:             8px     !important;
  }

  /* Override triệt để rule cũ: flex-direction:column, width:100%, min-height:48px */
  .hero .btn--lg,
  .hero__actions .btn--lg,
  .hero__actions .btn {
    display:        inline-flex !important;
    flex-direction: row    !important;
    align-items:    center !important;
    justify-content:center !important;
    width:          auto   !important;
    max-width:      fit-content !important;
    min-width:      0      !important;
    min-height:     0      !important;
    height:         33px   !important;
    max-height:     none   !important;
    padding:        0 10px !important;
    font-size:      12px   !important;
    border-radius:  8px    !important;
    white-space:    nowrap !important;
    flex:           0 0 auto !important;
    line-height:    1      !important;
    box-sizing:     border-box !important;
  }

  /* Stats: 2 cột */
  .hero__stats {
    display:               grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap:                   10px 14px !important;
    margin-top:            16px !important;
    padding-top:           12px !important;
  }
  .hero__stat-num   { font-size: 22px !important; }
  .hero__stat-label { font-size: 11px !important; }
}

/* ── Small mobile ≤430px ─── */
@media (max-width: 430px) {
  .hero__inner { padding: 28px 0 24px !important; }
  .hero__title { font-size: 28px !important; }
  .hero .btn--lg,
  .hero__actions .btn--lg,
  .hero__actions .btn {
    height:    32px !important;
    padding:   0 10px !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
  }
  .hero__actions { gap: 8px !important; }
}

/* ── Cực nhỏ ≤360px ─── */
@media (max-width: 360px) {
  .hero__title { font-size: 26px !important; }
}

/* ════════════════════════════════════════════════════════════
   STICKY HEADER FINAL
   Scroll effect: height 70→60px, backdrop-blur(10px), box-shadow.
   Không ảnh hưởng dropdown, mega menu, layout, spacing.
════════════════════════════════════════════════════════════ */

/* Reinforce sticky + transition */
.site-header {
  position: sticky    !important;
  top: 0              !important;
  left: 0             !important;
  width: 100%         !important;
  z-index: 10000      !important;
  transition: box-shadow 0.3s ease,
              backdrop-filter 0.3s ease,
              -webkit-backdrop-filter 0.3s ease !important;
}

/* Header inner — chiều cao + transition */
.site-header__inner {
  height:     70px             !important;
  transition: height 0.3s ease !important;
}

/* Trạng thái scrolled: thu nhỏ + blur + shadow */
.site-header.scrolled {
  box-shadow:              0 8px 30px rgba(0,0,0,.18)  !important;
  backdrop-filter:         blur(10px)                  !important;
  -webkit-backdrop-filter: blur(10px)                  !important;
}
.site-header.scrolled .site-header__inner {
  height: 60px !important;
}

/* Mobile ≤767px */
@media (max-width: 767px) {
  .site-header__inner                       { height: 60px !important; }
  .site-header.scrolled .site-header__inner { height: 52px !important; }
}

/* ════════════════════════════════════════════════════════════
   HERO BADGE — responsive
   Không đổi màu sắc, border, animation. Chỉ size + 1 dòng.
════════════════════════════════════════════════════════════ */

/* Tablet landscape 1025–1199px: thu nhỏ ~10% */
@media (max-width: 1199px) and (min-width: 1025px) {
  .hero__badge {
    font-size:      11px   !important;
    letter-spacing: 0.10em !important;
    white-space:    nowrap !important;
  }
}

/* Tablet portrait 768–1024px: thu nhỏ ~10% */
@media (max-width: 1024px) and (min-width: 768px) {
  .hero__badge {
    display:        inline-flex !important;
    align-items:    center      !important;
    gap:            7px         !important;
    font-size:      11px        !important;
    letter-spacing: 0.10em      !important;
    white-space:    nowrap      !important;
    width:          fit-content !important;
  }
}

/* Mobile ≤767px: thu nhỏ ~20-25%, luôn 1 dòng */
@media (max-width: 767px) {
  .hero__badge {
    display:        inline-flex !important;
    align-items:    center      !important;
    gap:            6px         !important;
    height:         32px        !important;
    padding:        0 12px      !important;
    font-size:      10.5px      !important;
    font-weight:    600         !important;
    letter-spacing: 0.05em      !important;
    border-radius:  999px       !important;
    white-space:    nowrap      !important;
    width:          fit-content !important;
    max-width:      90%         !important;
    overflow:       hidden      !important;
  }
}

/* ════════════════════════════════════════════════════════════
   STORY CAROUSEL — 1 hàng ngang, swipe trái/phải
   Desktop ≥1025px: không đổi gì.
   Tablet + Mobile ≤1024px: 4 card trên 1 scroll track.
════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* ── Scroll container (wrapper mới thêm vào HTML) ── */
  .story-scroll-track {
    display:                    flex        !important;
    flex-wrap:                  nowrap      !important;
    overflow-x:                 auto        !important;
    overflow-y:                 hidden      !important;
    scroll-snap-type:           x mandatory !important;
    scroll-behavior:            smooth      !important;
    -webkit-overflow-scrolling: touch       !important;
    gap:                        16px        !important;
    padding-bottom:             20px        !important;
    scrollbar-width:            none        !important;
  }
  .story-scroll-track::-webkit-scrollbar { display: none !important; }

  /* Xóa box của 2 row con → 4 card tham gia trực tiếp vào flex track */
  .story-scroll-track .story-layout,
  .story-scroll-track .story-layout-row2 {
    display:       contents !important;
    margin-bottom: 0        !important;
  }

  /* Card: 82% track width, hint card kế ở bên phải */
  .story-scroll-track .story-card {
    flex:              0 0 82%  !important;
    width:             auto     !important;
    min-width:         0        !important;
    max-width:         360px    !important;
    scroll-snap-align: start    !important;
  }
  /* Khoảng hở cuối — nhắc người dùng còn card tiếp theo */
  .story-scroll-track .story-card:last-child {
    margin-right: 16px !important;
  }
}

/* ≤576px: 84% width */
@media (max-width: 576px) {
  .story-scroll-track .story-card { flex-basis: 84% !important; }
}

/* ≤390px: 88% width */
@media (max-width: 390px) {
  .story-scroll-track .story-card { flex-basis: 88% !important; }
}

/* ════════════════════════════════════════════════════════════
   PHASE 1 — Footer mới
════════════════════════════════════════════════════════════ */

/* Footer social */
.footer-social {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-top:     16px;
}
.footer-social__link {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  padding:         0 14px 0 10px;
  min-height:      44px;
  background:      rgba(255,255,255,.08);
  border-radius:   8px;
  color:           rgba(255,255,255,.7);
  text-decoration: none;
  transition:      background .2s ease, color .2s ease;
}
.footer-social__link:hover {
  background: var(--gold);
  color:      var(--navy-dark);
}
.footer-social__label {
  font-size:   13px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
}

/* Footer company name */
.footer-company-name {
  font-size:     11px;
  font-weight:   700;
  color:         rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

/* Footer contact label */
.footer-contact__label {
  color:        rgba(255,255,255,.45);
  font-size:    11px;
  margin-right: 4px;
}

/* Footer bottom quote */
.footer-bottom__quote {
  font-size:  12px;
  color:      rgba(255,255,255,.4);
  font-style: italic;
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════
   GIỚI THIỆU — SECTION 1: HERO
   Cinematic full-viewport hero. 3-line stagger animation.
   CSS gradient fallback khi chưa có ảnh thật.
   Desktop ≥1024 · Tablet 768–1023 · Mobile ≤767
════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.gt-hero {
  position: relative;
  min-height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #010E20;
}

/* ── Background layer (gradient fallback + image) ── */
.gt-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, #010E20 0%, #031B3D 55%, #0A2547 100%);
}
.gt-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* ── Directional gradient overlay (left opaque → right transparent) ── */
.gt-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    #010E20       0%,
    #010E20       38%,
    rgba(3,27,61,.88) 58%,
    rgba(3,27,61,.52) 100%
  );
}

/* ── Content area (flex:1 so it fills space above stat strip) ── */
.gt-hero__content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 80px;
}
.gt-hero__inner { max-width: 620px; }

/* ── Label ── */
.gt-hero__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(216,180,106,.80);
  margin-bottom: 28px;
  opacity: 0;
  animation: gtFadeUp .5s ease .20s forwards;
}

/* ── H1: 3 stacked lines as flex column ── */
.gt-hero__title {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-size: clamp(38px, 5.2vw, 72px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--white);
  text-transform: none;
  margin: 0 0 32px;
}

.gt-hero__line {
  display: block;
  opacity: 0;
  animation: gtFadeUp .55s ease forwards;
}
.gt-hero__line--1 { animation-delay: .40s; }
.gt-hero__line--2 { animation-delay: .65s; }
.gt-hero__line--3 {
  animation-delay: .90s;
  /* Gold gradient text */
  background: linear-gradient(135deg, var(--gold) 0%, #F5EDD6 60%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Thin rule between headline lines */
.gt-hero__divider {
  display: block;
  width: 36px;
  height: 1px;
  background: rgba(255,255,255,.20);
  margin: 13px 0;
  opacity: 0;
  animation: gtFadeUp .4s ease forwards;
}
.gt-hero__divider:first-of-type { animation-delay: .52s; }
.gt-hero__divider:last-of-type  { animation-delay: .78s; }

/* ── Body text ── */
.gt-hero__body {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255,255,255,.70);
  max-width: 480px;
  margin-bottom: 40px;
  opacity: 0;
  animation: gtFadeUp .5s ease 1.10s forwards;
}

/* ── CTA button: gold border/text on hover (overrides btn--outline-white) ── */
.gt-hero__cta {
  opacity: 0;
  animation: gtFadeUp .45s ease 1.30s forwards;
}
.gt-hero__cta.btn--outline-white:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: transparent;
}

/* ── Micro-stat strip (sticks to bottom of section) ── */
.gt-hero__stats {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.10);
  opacity: 0;
  animation: gtFadeUp .5s ease 1.55s forwards;
}
.gt-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 0 18px 32px;
  flex: 1;
}
.gt-hero__stat:first-child { padding-left: max(24px, 8vw); }
.gt-hero__stat strong {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: .03em;
}
.gt-hero__stat span {
  font-size: 11px;
  color: rgba(255,255,255,.48);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.gt-hero__stat-sep {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}

/* ── Shared keyframe ── */
@keyframes gtFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ── Accessibility: skip animation for users who prefer less motion ── */
@media (prefers-reduced-motion: reduce) {
  .gt-hero__label,
  .gt-hero__line,
  .gt-hero__divider,
  .gt-hero__body,
  .gt-hero__cta,
  .gt-hero__stats {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ── Tablet 768–1023px ── */
@media (max-width: 1023px) {
  .gt-hero__overlay {
    background: rgba(1,14,32,.88);
  }
  .gt-hero__title { font-size: clamp(34px, 5.5vw, 56px); }
  .gt-hero__body  { font-size: 16px; }
  .gt-hero__stat  { padding: 16px 0 16px 24px; }
}

/* ── Mobile ≤767px ── */
@media (max-width: 767px) {
  .gt-hero         { min-height: calc(100svh - 60px); min-height: calc(100vh - 60px); }
  .gt-hero__overlay { background: rgba(1,14,32,.88); }
  .gt-hero__content { padding-top: 48px; padding-bottom: 48px; }
  .gt-hero__label   { font-size: 10px; letter-spacing: .15em; margin-bottom: 20px; }
  .gt-hero__title   { font-size: clamp(28px, 8vw, 42px); margin-bottom: 20px; }
  .gt-hero__divider { margin: 10px 0; }
  .gt-hero__body    { font-size: 15px; margin-bottom: 28px; }
  .gt-hero__cta     { width: 100%; justify-content: center; }
  .gt-hero__stat    { padding: 14px 0 14px 16px; }
  .gt-hero__stat:first-child { padding-left: 20px; }
  .gt-hero__stat strong { font-size: 15px; }
  .gt-hero__stat span   { font-size: 10px; }
}

/* ── Very small ≤375px: hide last stat to prevent crowding ── */
@media (max-width: 375px) {
  .gt-hero__stat:nth-child(5),
  .gt-hero__stat-sep:nth-child(4) { display: none; }
}


/* ════════════════════════════════════════════════════════════
   GIỚI THIỆU — SECTION 2: VÌ SAO GAT ACADEMY RA ĐỜI
   White bg. 2-col grid: text (52fr) · founder photo (44fr).
   Pull quote gold border-left. Float chip glass effect.
   Mobile: stack, image first for visual impact.
════════════════════════════════════════════════════════════ */

.gt-founding {
  padding: 100px 0;
  background: var(--white);
}

/* ── 2-column grid ── */
.gt-founding__grid {
  display: grid;
  grid-template-columns: 52fr 44fr;
  gap: 80px;
  align-items: center;
}

/* ── Label (plain gold, no pill background) ── */
.gt-founding__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

/* ── Heading (sentence case, not uppercase like .section-title) ── */
.gt-founding__heading {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  line-height: 1.18;
  color: var(--navy);
  text-transform: none;
  letter-spacing: -.01em;
  margin-bottom: 28px;
}

/* ── Body paragraphs ── */
.gt-founding__body {
  font-size: 16px;
  line-height: 1.80;
  color: var(--text-light);
  margin-bottom: 24px;
}
.gt-founding__body:last-child { margin-bottom: 0; }

/* ── Pull quote ── */
.gt-founding__quote {
  border-left: 3px solid var(--gold);
  padding: 2px 0 2px 24px;
  margin: 32px 0;
}
.gt-founding__quote p {
  font-family: var(--font-heading);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 600;
  font-style: italic;
  color: var(--navy);
  line-height: 1.55;
}

/* ── Photo wrapper: 3/4 aspect ratio, rounded corners ── */
.gt-founding__photo-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  /* Navy gradient shows while image loads or if image missing */
  background: linear-gradient(160deg, var(--navy-dark) 0%, var(--navy-mid) 100%);
}

/* ── Founder photo ── */
.gt-founding__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .6s ease;
}
.gt-founding__photo-wrap:hover .gt-founding__photo {
  transform: scale(1.03);
}

/* ── Float chip — glass pill bottom-left ── */
.gt-founding__chip {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  background: rgba(3,27,61,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.gt-founding__chip-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  animation: gtPulse 2.5s ease-in-out infinite;
}

@keyframes gtPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216,180,106,.40); }
  50%       { box-shadow: 0 0 0 5px rgba(216,180,106,.00); }
}

/* ── Tablet 768–1023px ── */
@media (max-width: 1023px) {
  .gt-founding { padding: 80px 0; }
  .gt-founding__grid {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

/* ── Mobile ≤767px: single col, image first ── */
@media (max-width: 767px) {
  .gt-founding { padding: 60px 0; }
  .gt-founding__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .gt-founding__media { order: -1; }
  .gt-founding__photo-wrap {
    aspect-ratio: 16 / 9;
    border-radius: 14px;
  }
  .gt-founding__photo { object-position: center 15%; }
  .gt-founding__quote {
    margin: 24px 0;
    padding-left: 18px;
  }
  .gt-founding__chip {
    font-size: 11px;
    padding: 8px 12px;
  }
}


/* ══════════════════════════════════════════════════════════
   GIỚI THIỆU — SHARED SECTION LABEL
   Plain gold uppercase label (no pill). Prefix gt-sl.
══════════════════════════════════════════════════════════ */
.gt-sl {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.gt-sl--on-dark { color: rgba(216,180,106,.75); }


/* ══════════════════════════════════════════════════════════
   SECTION 3: HỆ SINH THÁI — GAT không chỉ là một học viện
   Dark navy. Featured card (bg image) + 4 accent cards.
   Grid: 3 cols (2fr 1fr 1fr), featured spans 2 rows.
══════════════════════════════════════════════════════════ */
.gt-ecosystem {
  background: var(--navy-dark);
  padding: 100px 0 80px;
}
.gt-ecosystem__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.gt-ecosystem__title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  color: var(--white);
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.gt-ecosystem__lead {
  font-size: 17px;
  color: rgba(255,255,255,.65);
  line-height: 1.72;
}
.gt-ecosystem__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
}
.gt-eco-card--featured { grid-row: 1 / 3; }

/* ── Base card ── */
.gt-eco-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  min-height: 220px;
  transition: border-color .3s ease, transform .3s ease;
}
.gt-eco-card:hover {
  border-color: rgba(216,180,106,.35);
  transform: translateY(-3px);
}

/* ── Featured card: full image background ── */
.gt-eco-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.gt-eco-card__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  transition: transform .6s ease;
}
.gt-eco-card--featured:hover .gt-eco-card__bg-img { transform: scale(1.04); }
.gt-eco-card__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(1,14,32,.96) 0%,
    rgba(1,14,32,.72) 50%,
    rgba(3,27,61,.28) 100%
  );
}

/* ── Card body ── */
.gt-eco-card__body {
  position: relative;
  z-index: 1;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
}
.gt-eco-card--featured .gt-eco-card__body { padding: 36px; }

/* ── Card number, title, desc, link ── */
.gt-eco-card__num {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: 4px;
}
.gt-eco-card__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--white);
  text-transform: none;
  line-height: 1.2;
}
.gt-eco-card--featured .gt-eco-card__title { font-size: 28px; }
.gt-eco-card__desc {
  font-size: 14px;
  color: rgba(255,255,255,.68);
  line-height: 1.65;
}
.gt-eco-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 8px;
  transition: gap .25s ease, color .25s ease;
}
.gt-eco-card__link:hover { gap: 8px; color: #F5EDD6; }

/* ── Small card accent gradients ── */
.gt-eco-card--affiliate { background: linear-gradient(160deg, #0A3A1A 0%, #031B3D 60%); }
.gt-eco-card--expert    { background: linear-gradient(160deg, #3A2A00 0%, #031B3D 60%); }
.gt-eco-card--business  { background: linear-gradient(160deg, #1A0A3A 0%, #031B3D 60%); }
.gt-eco-card--ai        { background: linear-gradient(160deg, #001A2E 0%, #031B3D 60%); }

.gt-ecosystem__cta-wrap {
  text-align: center;
  margin-top: 48px;
}

/* ── Tablet ── */
@media (max-width: 1023px) {
  .gt-ecosystem { padding: 80px 0 60px; }
  .gt-ecosystem__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .gt-eco-card--featured {
    grid-column: 1 / 3;
    grid-row: auto;
    min-height: 320px;
  }
}
/* ── Mobile ── */
@media (max-width: 767px) {
  .gt-ecosystem { padding: 60px 0 48px; }
  .gt-ecosystem__grid { grid-template-columns: 1fr; }
  .gt-eco-card--featured { grid-column: auto; min-height: 280px; }
  .gt-eco-card { min-height: 180px; }
  .gt-eco-card__body { padding: 20px; }
  .gt-eco-card--featured .gt-eco-card__body { padding: 24px; }
  .gt-eco-card__title { font-size: 18px; }
  .gt-eco-card--featured .gt-eco-card__title { font-size: 22px; }
}


/* ══════════════════════════════════════════════════════════
   SECTION 4: ĐIỀU CHÚNG TÔI TIN
   Off-white. Editorial numbered beliefs. Divider-separated.
══════════════════════════════════════════════════════════ */
.gt-beliefs {
  background: #F8F9FB;
  padding: 100px 0;
}
.gt-beliefs__header { max-width: 560px; margin-bottom: 60px; }
.gt-beliefs__title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  color: var(--navy);
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-bottom: 0;
}
.gt-belief-list { border-top: 1px solid var(--gray-mid); }
.gt-belief-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 48px;
  align-items: start;
  padding: 60px 0;
  border-bottom: 1px solid var(--gray-mid);
}
.gt-belief-num {
  font-family: var(--font-heading);
  font-size: 80px;
  font-weight: 800;
  color: rgba(216,180,106,.13);
  line-height: 1;
  letter-spacing: -.03em;
  user-select: none;
}
.gt-belief-content { padding-top: 6px; }
.gt-belief-title {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 800;
  color: var(--navy);
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin-bottom: 16px;
}
.gt-belief-body {
  font-size: 16px;
  color: var(--text-light);
  line-height: 1.78;
  max-width: 640px;
}

@media (max-width: 1023px) {
  .gt-beliefs { padding: 80px 0; }
  .gt-belief-item { gap: 32px; }
  .gt-belief-num { font-size: 64px; }
}
@media (max-width: 767px) {
  .gt-beliefs { padding: 60px 0; }
  .gt-belief-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 40px 0;
  }
  .gt-belief-num { font-size: 48px; }
}


/* ══════════════════════════════════════════════════════════
   SECTION 5: NHỮNG CON SỐ BIẾT NÓI
   Darkest navy. 4 animated counters. Reuses data-counter JS.
══════════════════════════════════════════════════════════ */
.gt-stats-section {
  background: #010E20;
  padding: 88px 0;
}
.gt-stats-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}
.gt-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 48px;
  flex: 1;
  text-align: center;
  min-width: 0;
}
.gt-stat-num {
  font-family: var(--font-heading);
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold) 0%, #F5EDD6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -.02em;
}
.gt-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1.45;
}
.gt-stat-sep {
  width: 1px;
  height: 56px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .gt-stats-section { padding: 64px 0; }
  .gt-stats-grid { flex-wrap: wrap; gap: 0; }
  .gt-stat-item { flex: 0 0 50%; padding: 24px 16px; }
  .gt-stat-sep { display: none; }
  .gt-stat-num { font-size: clamp(36px, 9vw, 52px); }
}


/* ══════════════════════════════════════════════════════════
   SECTION 6: HÀNH TRÌNH NÀY MỚI CHỈ BẮT ĐẦU
   White bg. Vertical single-axis timeline.
   Last item (2030 future) has dashed border.
══════════════════════════════════════════════════════════ */
.gt-timeline-section {
  background: var(--white);
  padding: 100px 0;
}
.gt-timeline-header { max-width: 560px; margin-bottom: 60px; }
.gt-timeline-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  color: var(--navy);
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-bottom: 0;
}

/* ── Vertical axis line ── */
.gt-timeline-list {
  position: relative;
  max-width: 760px;
}
.gt-timeline-list::before {
  content: '';
  position: absolute;
  left: 88px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold) 0%, var(--gray-mid) 100%);
}

/* ── Single item: year | dot | content ── */
.gt-tl-item {
  display: grid;
  grid-template-columns: 88px 24px 1fr;
  gap: 0 24px;
  align-items: start;
  margin-bottom: 48px;
}
.gt-tl-item:last-child { margin-bottom: 0; }
.gt-tl-year {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: .04em;
  padding-top: 2px;
  text-align: right;
}
.gt-tl-year--future { color: rgba(216,180,106,.45); }
.gt-tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold);
  margin-top: 4px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.gt-tl-dot--future {
  border-color: rgba(216,180,106,.38);
  border-style: dashed;
}
.gt-tl-content { padding-bottom: 4px; }
.gt-tl-milestone {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  text-transform: none;
  margin-bottom: 6px;
}
.gt-tl-item--future .gt-tl-milestone { color: rgba(6,43,95,.45); }
.gt-tl-text {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.70;
}
.gt-tl-item--future .gt-tl-text { color: rgba(91,107,132,.55); }
.gt-tl-item--future .gt-tl-content {
  border: 1px dashed rgba(216,180,106,.28);
  border-radius: 12px;
  padding: 20px 24px;
  background: rgba(216,180,106,.03);
}

@media (max-width: 1023px) { .gt-timeline-section { padding: 80px 0; } }
@media (max-width: 767px) {
  .gt-timeline-section { padding: 60px 0; }
  .gt-timeline-list::before { left: 56px; }
  .gt-tl-item { grid-template-columns: 56px 20px 1fr; gap: 0 16px; }
  .gt-tl-year { font-size: 13px; }
  .gt-tl-milestone { font-size: 15px; }
  .gt-tl-item--future .gt-tl-content { padding: 16px 18px; }
}


/* ══════════════════════════════════════════════════════════
   SECTION 7: TẦM NHÌN & SỨ MỆNH
   Dark navy gradient. Centered editorial content.
   Anchor: #tam-nhin-su-menh
══════════════════════════════════════════════════════════ */
.gt-vision {
  background: linear-gradient(160deg, #010E20 0%, #031B3D 55%, #0A2547 100%);
  padding: 110px 0;
}
.gt-vision__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.gt-vision__statement {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.8vw, 36px);
  font-weight: 700;
  color: var(--white);
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.40;
  font-style: italic;
  margin: 20px 0 40px;
}
.gt-vision__divider {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 28px;
  opacity: .6;
}
.gt-vision__mission-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 12px;
}
.gt-vision__mission {
  font-size: 17px;
  color: rgba(255,255,255,.70);
  line-height: 1.80;
  max-width: 620px;
  margin: 0 auto;
}

@media (max-width: 1023px) { .gt-vision { padding: 88px 0; } }
@media (max-width: 767px) {
  .gt-vision { padding: 64px 0; }
  .gt-vision__statement { font-size: clamp(18px, 5vw, 26px); }
  .gt-vision__mission { font-size: 15px; }
}


/* ══════════════════════════════════════════════════════════
   SECTION 8: GIÁ TRỊ CỐT LÕI
   Off-white. 2x2 grid with hairline border between cells.
   Anchor: #gia-tri-cot-loi
══════════════════════════════════════════════════════════ */
.gt-values {
  background: #F8F9FB;
  padding: 100px 0;
}
.gt-values__header { max-width: 560px; margin-bottom: 60px; }
.gt-values__title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 800;
  color: var(--navy);
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin-bottom: 0;
}
.gt-values__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gray-mid);
  border-radius: 16px;
  overflow: hidden;
}
.gt-value-item {
  background: #F8F9FB;
  padding: 48px 44px;
  transition: background .3s ease;
}
.gt-value-item:hover { background: var(--white); }
.gt-value-num {
  font-family: var(--font-heading);
  font-size: 72px;
  font-weight: 800;
  color: rgba(216,180,106,.12);
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: 12px;
  user-select: none;
}
.gt-value-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  text-transform: none;
  letter-spacing: -.01em;
  margin-bottom: 12px;
}
.gt-value-body {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.72;
}

@media (max-width: 1023px) {
  .gt-values { padding: 80px 0; }
  .gt-value-item { padding: 36px 32px; }
  .gt-value-num { font-size: 56px; }
}
@media (max-width: 767px) {
  .gt-values { padding: 60px 0; }
  .gt-values__grid { grid-template-columns: 1fr; }
  .gt-value-item { padding: 32px 24px; }
  .gt-value-num { font-size: 48px; }
}


/* ══════════════════════════════════════════════════════════
   SECTION 9: CTA CUỐI TRANG
   Dark navy. Background photo + overlay. Quote + 2 CTAs.
══════════════════════════════════════════════════════════ */
.gt-closing {
  position: relative;
  background: #010E20;
  padding: 120px 0;
  overflow: hidden;
}
.gt-closing__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.gt-closing__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  filter: grayscale(30%);
}
.gt-closing__overlay {
  position: absolute;
  inset: 0;
  background: rgba(1,14,32,.90);
}
.gt-closing__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.gt-closing__quote-mark {
  font-family: var(--font-heading);
  font-size: 88px;
  font-weight: 800;
  color: var(--gold);
  line-height: .6;
  margin-bottom: 16px;
  opacity: .65;
}
.gt-closing__quote {
  margin: 0 auto 24px;
  max-width: 680px;
}
.gt-closing__quote p {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 600;
  font-style: italic;
  color: var(--white);
  line-height: 1.48;
}
.gt-closing__attr {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
}
.gt-closing__sub {
  font-size: 16px;
  color: rgba(255,255,255,.50);
  margin-bottom: 36px;
}
.gt-closing__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .gt-closing { padding: 80px 0; }
  .gt-closing__quote-mark { font-size: 64px; }
  .gt-closing__quote p { font-size: clamp(18px, 5vw, 24px); }
  .gt-closing__actions { flex-direction: column; align-items: center; }
  .gt-closing__actions .btn { width: 100%; max-width: 360px; text-align: center; justify-content: center; }
}


/* ══════════════════════════════════════════════════════════
   TRANG CHỦ — STORY CARD IMAGE SUPPORT
   Adds real photo layer + overlay to .story-card__thumb.
   Preserves existing play button + type badge z-index.
══════════════════════════════════════════════════════════ */
.story-card__thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}
.story-card__thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3,27,61,.55);
  z-index: 1;
  pointer-events: none;
}
/* Ensure play button + type badge sit above overlay */
.story-card__play { position: relative; z-index: 2; }
.story-card__type { z-index: 2; }


/* ══════════════════════════════════════════════════════════
   TRANG CHỦ — PILLAR CARD: .pillar-card--coming-soon
   Muted opacity + cursor default for GAT AI (sắp ra mắt).
══════════════════════════════════════════════════════════ */
.pillar-card--coming-soon {
  opacity: .75;
  cursor: default;
  pointer-events: none;
}
.pillar-card--coming-soon .pillar-card__name {
  color: var(--text-light);
}
.pillar-card--coming-soon .pillar-card__sub {
  color: var(--gold);
  font-weight: 700;
}
.pillar-card--coming-soon:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════
   HERO v6 — badge xóa, CTA nhỏ gọn exact, 2 nút cùng hàng
══════════════════════════════════════════════════════════ */

/* Desktop ≥1025px: image chiếm 62% width, heading nhỏ, image 580px */
@media (min-width: 1025px) {
  .hero__inner {
    grid-template-columns: 38fr 62fr !important;
    padding: 44px 24px !important;
    gap: clamp(20px, 2.2vw, 36px) !important;
  }
  .hero__title {
    font-size: clamp(20px, 2.2vw, 28px) !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
  }
  .hero__sub {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 16px !important;
    max-width: 340px !important;
  }
  .hero__img { height: 580px !important; }
}

/* Tablet landscape 1025–1199px */
@media (max-width: 1199px) and (min-width: 1025px) {
  .hero__inner {
    grid-template-columns: 40fr 60fr !important;
    padding: 36px 24px !important;
    gap: 18px !important;
  }
  .hero__title { font-size: clamp(18px, 2vw, 22px) !important; }
  .hero__img { height: 460px !important; }
}

/* Tablet portrait ≤1024px: single col */
@media (max-width: 1024px) {
  .hero__title { font-size: clamp(22px, 4vw, 32px) !important; }
}

/* Mobile ≤767px: heading nhỏ hơn */
@media (max-width: 767px) {
  .hero__title { font-size: clamp(20px, 5.5vw, 26px) !important; }
  .hero__sub { font-size: 13px !important; }
}

/* Small mobile ≤430px */
@media (max-width: 430px) {
  .hero__title { font-size: 20px !important; }
}

/* ── CTA container: flex-start, nowrap, 1 hàng tất cả breakpoint ── */
.hero__actions {
  display:         flex        !important;
  flex-direction:  row         !important;
  flex-wrap:       nowrap      !important;
  align-items:     center      !important;
  justify-content: flex-start  !important;
  gap:             6px         !important;
}

/* ── CTA buttons: desktop + tablet ── */
.hero .btn--lg,
.hero__actions .btn--lg,
.hero__actions .btn {
  display:         inline-flex  !important;
  align-items:     center       !important;
  justify-content: center       !important;
  width:           auto         !important;
  min-width:       0            !important;
  max-width:       none         !important;
  flex:            0 0 auto     !important;
  height:          26px         !important;
  min-height:      26px         !important;
  max-height:      none         !important;
  padding:         0 8px        !important;
  font-size:       10.5px       !important;
  font-weight:     700          !important;
  line-height:     1            !important;
  border-radius:   7px          !important;
  white-space:     nowrap       !important;
  box-sizing:      border-box   !important;
}

/* Mobile ≤767px: nhỏ hơn, 1 hàng, lệch trái */
@media (max-width: 767px) {
  .hero__actions {
    justify-content: flex-start  !important;
    gap:             5px         !important;
  }
  .hero .btn--lg,
  .hero__actions .btn--lg,
  .hero__actions .btn {
    height:        24px  !important;
    min-height:    24px  !important;
    padding:       0 6px !important;
    font-size:     9.5px !important;
    border-radius: 6px   !important;
  }
}

/* ══════════════════════════════════════════════════════════
   HEADER v2 — Responsive redesign
   Desktop >1024px: navigation + consultation CTA
   Tablet ≤1024px: nav inline scrollable · search icon · no hamburger
   Mobile ≤767px: 3 hàng — logo+CTA | search | nav scroll
══════════════════════════════════════════════════════════ */

/* Ẩn element mới trên desktop */
.site-header__search-btn { display: none; }
.site-header__row-search  { display: none; }
.site-header__row-nav     { display: none; }

/* ── Desktop ≥1025px: CTA tư vấn luôn hiển thị ── */
@media (min-width: 1025px) {
  .site-header__inner {
    width: 100%;
    max-width: none;
    padding-inline: clamp(24px, 2.4vw, 48px);
    gap: clamp(18px, 1.5vw, 30px);
  }
  .site-header__logo {
    gap: 8px;
    flex: 0 0 auto;
  }
  .site-header__logo .logo-icon-wrap {
    width: 44px;
    height: 44px;
  }
  .site-header__logo .logo-wordmark__name {
    font-size: 20px;
  }
  .site-header__logo .logo-wordmark__tagline {
    font-size: 10.5px;
  }
  .site-nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
  }
  .site-nav__list {
    width: 100%;
    justify-content: space-evenly;
    gap: 0;
  }
  .site-nav__link {
    padding: 8px clamp(5px, .55vw, 11px);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .site-header__cta {
    gap: 8px;
    margin-left: auto;
  }
  .header-search-inline {
    display: none !important;
  }
  .header-search-btn {
    display: flex;
    width: 38px;
    height: 38px;
    color: #fff;
    background: rgba(255,255,255,.08);
  }
  .header-search-btn:hover {
    color: var(--navy);
    background: var(--gold);
  }
  .site-header__cta .btn--header-cta {
    display: inline-flex !important;
    padding: 11px 16px;
    font-size: 14px;
    white-space: nowrap;
  }
}

/* Desktop hẹp: ưu tiên menu và CTA, ẩn ô tìm kiếm để không tràn ngang */
@media (min-width: 1025px) and (max-width: 1750px) {
  .header-search-inline {
    display: none !important;
  }
  .site-nav__link {
    padding-inline: 4px;
    font-size: 13px;
  }
  .site-header__cta .btn--header-cta {
    padding-inline: 12px;
    font-size: 11px;
  }
}

/* ── Tablet ≤1024px: hiện nav inline, không hamburger ── */
@media (max-width: 1024px) {
  .header-search-inline { display: none !important; }

  /* Hiện nav (override display:none tại line 2040) */
  .site-nav {
    display:    flex !important;
    flex:       1 1 auto !important;
    min-width:  0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav__list {
    flex-wrap: nowrap !important;
    gap:       0 !important;
  }
  .site-nav__item { flex-shrink: 0 !important; }
  /* Dropdown ẩn trên tablet (overflow:auto clip dropdown) */
  .site-nav__dropdown { display: none !important; }

  /* Ẩn hamburger (override display:flex tại line 2041) */
  .hamburger { display: none !important; }

  /* Hiện search icon */
  .site-header__search-btn {
    display:         flex !important;
    align-items:     center;
    justify-content: center;
    width:           34px;
    height:          34px;
    border-radius:   8px;
    color:           var(--navy);
    background:      transparent;
    border:          none;
    cursor:          pointer;
    flex-shrink:     0;
    transition:      background .2s;
  }
  .site-header__search-btn:hover { background: var(--gray-light); }

  /* Header inner: logo + [nav scroll] + search + CTA */
  .site-header__inner {
    height:          64px !important;
    justify-content: flex-start !important;
    gap:             10px !important;
  }

  /* Row 2 và 3 ẩn trên tablet */
  .site-header__row-search { display: none !important; }
  .site-header__row-nav    { display: none !important; }
  .site-header__cta .btn--header-cta {
    display: inline-flex !important;
    padding: 8px 10px;
    font-size: 10px;
    white-space: nowrap;
  }
}

/* ── Mobile ≤767px: 3-hàng header ── */
@media (max-width: 767px) {
  /* Cho phép header cao tự nhiên (override height:64px tại line 2100) */
  .site-header { height: auto !important; }

  /* Hàng 1: logo bên trái + CTA tư vấn bên phải */
  .site-header__inner {
    height:          52px !important;
    gap:             0 !important;
    justify-content: space-between !important;
    padding:         0 16px !important;
  }
  .site-nav                  { display: none !important; }
  .hamburger                 { display: none !important; }
  .site-header__search-btn   { display: none !important; }
  .site-header__cta .btn--header-cta {
    display: inline-flex !important;
    max-width: 156px;
    padding: 6.5px 9px;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  /* Hàng 2: Search full width */
  .site-header__row-search {
    display:    block !important;
    background: var(--white);
    padding:    6px 16px 8px;
    border-top: 1px solid rgba(6,43,95,.07);
  }
  .site-header__search-wrap {
    display:       flex;
    align-items:   center;
    background:    #EEF1F6;
    border-radius: 8px;
    padding:       0 12px;
    height:        36px;
    gap:           8px;
    position:      relative;
  }
  .site-header__search-icon-svg { color: var(--text-light); flex-shrink: 0; }
  .site-header__search-input {
    flex:       1;
    border:     none;
    background: transparent;
    font-size:  13px;
    color:      var(--navy);
    outline:    none;
    padding:    0;
    min-width:  0;
  }
  .site-header__search-input::placeholder { color: #8899B0; }

  /* Hàng 3: Nav scroll ngang */
  .site-header__row-nav {
    display:    block !important;
    background: var(--white);
    border-top: 1px solid rgba(6,43,95,.07);
  }
  .site-header__mobile-nav-scroll {
    display:                    flex;
    align-items:                center;
    overflow-x:                 auto;
    overflow-y:                 hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:            none;
    padding:                    0 16px;
  }
  .site-header__mobile-nav-scroll::-webkit-scrollbar { display: none; }
  .site-header__mobile-nav-link {
    display:         block;
    flex-shrink:     0;
    padding:         10px 11px;
    font-family:     var(--font-heading);
    font-size:       12px;
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  .04em;
    color:           var(--navy);
    white-space:     nowrap;
    text-decoration: none;
    border-bottom:   2px solid transparent;
    transition:      color .2s, border-color .2s;
  }
  .site-header__mobile-nav-link:first-child { padding-left: 0; }
  .site-header__mobile-nav-link:hover,
  .site-header__mobile-nav-link.active {
    color:               var(--gold);
    border-bottom-color: var(--gold);
  }
}

/* ── Mobile: ẩn thanh search JS-injected (header-search-mobile-bar) ── */
@media (max-width: 767px) {
  .header-search-mobile-bar { display: none !important; }
}

/* ── Mobile header search autocomplete dropdown ── */
.mhdr-drop {
  display:       none;
  position:      absolute;
  top:           calc(100% + 6px);
  left:          -12px;
  right:         -12px;
  background:    var(--white);
  border:        1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow:    0 8px 28px rgba(6,43,95,.14);
  z-index:       1000;
  overflow:      hidden;
  max-height:    264px;
  overflow-y:    auto;
}
.mhdr-drop.open { display: block; }
.mhdr-item {
  display:         block;
  padding:         10px 14px;
  text-decoration: none;
  border-bottom:   1px solid rgba(0,0,0,.04);
  transition:      background .15s;
}
.mhdr-item:last-child { border-bottom: none; }
.mhdr-item:hover      { background: rgba(216,180,106,.10); }
.mhdr-item__type {
  display:        block;
  font-size:      10px;
  font-weight:    600;
  color:          var(--gold);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom:  2px;
}
.mhdr-item__title {
  display:     block;
  font-size:   13px;
  font-weight: 600;
  color:       var(--navy);
  line-height: 1.3;
}
.mhdr-item__desc {
  display:       block;
  font-size:     11px;
  color:         #5a6e8a;
  line-height:   1.4;
  margin-top:    2px;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.mhdr-no-result {
  padding:    14px 16px;
  font-size:  13px;
  color:      #8899B0;
  text-align: center;
}

/* ── gt-values: 5th item spans full row (2-col grid) ── */
.gt-values__grid .gt-value-item:nth-child(5):last-child {
  grid-column: 1 / -1;
}
@media (min-width: 768px) {
  .gt-values__grid .gt-value-item:nth-child(5):last-child {
    max-width: 50%;
  }
}

/* ══════════════════════════════════════════════════════
   ABOUT HERO — gioi-thieu.html
   Kế thừa .hero layout/typography. Chỉ override:
   - Video frame 16:9 thay ảnh
   - Compact padding (không có CTA/stats)
   - line-height 3-dòng heading
══════════════════════════════════════════════════════ */

/* Compact inner padding — không có CTA/stats nên ít hơn trang chủ */
.about-hero .hero__inner {
  align-items: center;
  padding-top:    52px !important;
  padding-bottom: 52px !important;
}
@media (max-width: 1024px) {
  .about-hero .hero__inner {
    padding-top:    36px !important;
    padding-bottom: 36px !important;
  }
}
@media (max-width: 767px) {
  .about-hero .hero__inner {
    padding-top:    28px !important;
    padding-bottom: 28px !important;
  }
}

/* Heading: 3 dòng đều, line-height chặt hơn */
.about-hero .hero__title {
  display:         flex          !important;
  flex-direction:  column        !important;
  gap:             0.08em        !important;
  line-height:     1.05          !important;
  margin-bottom:   16px          !important;
}
.about-hero .hero__title br   { display: none; }
.about-hero .hero__title span { display: block; margin: 0; }

/* Sub: không có CTA/stats bên dưới nên bỏ margin-bottom thừa */
.about-hero .hero__sub {
  margin-bottom: 0 !important;
}

/* Video wrapper: aspect-ratio 16:9 thay cho height cố định của ảnh */
.about-hero__video-wrap {
  aspect-ratio: 16 / 9 !important;
  height:        auto  !important;
  background:    #010E20;
}

/* iframe: fill tuyệt đối trong frame, luôn hiển thị */
.about-hero__iframe {
  position: absolute;
  inset:    0;
  width:    100% !important;
  height:   100% !important;
  border:   0;
  display:  block;
}

/* ════════════════════════════════════════════════════
   SECTION 2 — GT-FOUNDING v3 (YouTube video + prose)
   52% video left / 48% headline+flowing text right
   ════════════════════════════════════════════════════ */

.gt-founding {
  padding: 100px 0 !important;
  background: #fff !important;
}

.gt-founding__grid {
  display: grid !important;
  grid-template-columns: 52fr 48fr !important;
  gap: 72px !important;
  align-items: center !important;
}

/* ── YouTube video (left) ── */
.gt-founding__video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(1, 14, 32, 0.16), 0 4px 18px rgba(1, 14, 32, 0.10);
  background: #010E20;
}

.gt-founding__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Right: headline + flowing prose ── */
.gt-founding__heading {
  font-family: 'Sora', sans-serif !important;
  font-size: clamp(22px, 2.6vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--navy, #0a2342) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 28px !important;
  text-transform: uppercase !important;
}

.gt-founding__body-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gt-founding__para {
  font-size: 15.5px;
  line-height: 1.72;
  color: #3a4a5c;
  margin: 0;
}

.gt-founding__para--em {
  font-weight: 600;
  color: var(--navy, #0a2342);
  font-size: 16px;
  line-height: 1.65;
}

/* ── Responsive Section 2 ── */
@media (max-width: 1024px) {
  .gt-founding__grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .gt-founding__media { order: -1; }
  .gt-founding__heading { font-size: clamp(22px, 4vw, 34px) !important; }
}

@media (max-width: 767px) {
  .gt-founding { padding: 64px 0 !important; }
  .gt-founding__grid { gap: 28px !important; }
  .gt-founding__heading { font-size: clamp(20px, 6vw, 30px) !important; margin-bottom: 20px !important; }
  .gt-founding__para { font-size: 14.5px; }
}

/* ════════════════════════════════════════════════════
   SECTION 3 — GT-ECOSYSTEM v3 (Light pillar cards)
   White/light bg · 5 cards with images · gold accents
   Layout: 3 top + 2 centered bottom (6-col base grid)
   ════════════════════════════════════════════════════ */

.gt-ecosystem {
  background: #F8F9FB !important;
  padding: 96px 0 80px !important;
  overflow: visible;
}

.gt-ecosystem__header {
  text-align: center !important;
  margin-bottom: 52px !important;
}

.gt-ecosystem__section-label {
  display: inline-block;
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold, #D5A857);
  margin-bottom: 14px;
}

.gt-ecosystem__title {
  font-family: 'Sora', sans-serif !important;
  font-size: clamp(26px, 3.2vw, 44px) !important;
  font-weight: 700 !important;
  color: var(--navy, #0a2342) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 14px !important;
  text-transform: none !important;
}

.gt-ecosystem__lead {
  font-size: 16px !important;
  color: #5a6a7a !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  line-height: 1.65 !important;
}

/* ── Carousel: 5 cards, 1 hàng ngang, scroll-snap ── */
.gt-pillar-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 20px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

/* Ẩn scrollbar nhưng giữ scroll được */
.gt-pillar-grid::-webkit-scrollbar { height: 0; }
.gt-pillar-grid { scrollbar-width: none; }

/* Card: cố định width, không co lại */
.gt-pillar-card {
  flex: 0 0 360px;
  width: 360px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #E8EDF5;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(1, 14, 32, 0.06);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  color: inherit;
}

.gt-pillar-card:hover {
  box-shadow: 0 10px 32px rgba(1, 14, 32, 0.12);
  transform: translateY(-4px);
}

.gt-pillar-card__img {
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}

.gt-pillar-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.gt-pillar-card:hover .gt-pillar-card__img img {
  transform: scale(1.05);
}

.gt-pillar-card__body {
  padding: 22px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.gt-pillar-card__tag {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold, #D5A857);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.gt-pillar-card__name {
  font-family: 'Sora', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy, #0a2342);
  margin-bottom: 10px;
  line-height: 1.25;
}

.gt-pillar-card__desc {
  font-size: 13.5px;
  color: #5a6a7a;
  line-height: 1.62;
  flex: 1;
  margin-bottom: 16px;
}

.gt-pillar-card__link {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold, #D5A857);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: flex-start;
  border-bottom: 1px solid rgba(213, 168, 87, 0.4);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.gt-pillar-card:hover .gt-pillar-card__link {
  color: var(--navy, #0a2342);
  border-color: rgba(10, 35, 66, 0.3);
}

/* ── Tablet ── */
@media (max-width: 1024px) {
  .gt-ecosystem { padding: 72px 0 60px !important; }
  .gt-pillar-grid { gap: 16px; }
  .gt-pillar-card { flex: 0 0 320px; width: 320px; }
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .gt-ecosystem { padding: 56px 0 48px !important; }
  .gt-ecosystem__header { margin-bottom: 36px !important; }
  .gt-ecosystem__title { font-size: clamp(22px, 7vw, 32px) !important; }
  .gt-pillar-grid { gap: 14px; }
  .gt-pillar-card { flex: 0 0 82vw; width: 82vw; }
  .gt-pillar-card__img { height: 180px; }
  .gt-pillar-card__body { padding: 18px 18px 20px; }
}

/* ════════════════════════════════════════
   SECTION 3 — Carousel nav buttons
   Desktop only (>=1024px) · glassmorphism
   ════════════════════════════════════════ */

.gt-eco-carousel {
  position: relative;
}

/* Hidden on mobile/tablet */
.gt-eco-nav-btn {
  display: none;
}

@media (min-width: 1024px) {
  .gt-eco-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(1, 14, 32, 0.08);
    box-shadow: 0 4px 16px rgba(1, 14, 32, 0.10), 0 1px 4px rgba(1, 14, 32, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    z-index: 10;
    color: var(--navy, #0a2342);
    padding: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  }

  .gt-eco-nav-btn--prev { left: -26px; }
  .gt-eco-nav-btn--next { right: -26px; }

  .gt-eco-nav-btn:hover {
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 8px 28px rgba(1, 14, 32, 0.16), 0 2px 8px rgba(1, 14, 32, 0.08);
    background: rgba(255, 255, 255, 0.96);
  }

  .gt-eco-nav-btn:active {
    transform: translateY(-50%) scale(0.96);
    transition-duration: 0.08s;
  }

  .gt-eco-nav-btn:disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
  }
}

/* ════════════════════════════════════════════════════
   SECTION 4 — GT-BELIEFS v3.1 (Compact editorial)
   Tinh gọn · nhẹ nhàng · sang trọng
   ════════════════════════════════════════════════════ */

.gt-beliefs {
  background: #FAF9F5 !important;
  padding: 80px 0 !important;
}

.gt-beliefs__intro { margin-bottom: 52px; }

.gt-beliefs__title {
  font-family: var(--font-heading) !important;
  font-size: clamp(26px, 3.2vw, 46px) !important;
  font-weight: 700 !important;
  color: var(--navy, #0a2342) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  margin: 6px 0 0 !important;
}

/* ── Story blocks ── */
.gt-story-block {
  display: grid;
  align-items: center;
  gap: 56px;
  margin-bottom: 64px;
}

.gt-story-block:last-child { margin-bottom: 0; }

/* Block 01: text left · image right; standalone number hidden */
.gt-story-block--hero {
  grid-template-columns: 1fr minmax(0, 440px);
  gap: 56px;
}

.gt-story-block--hero > .gt-story-block__num { display: none; }

/* Blocks 02–05: image column max 440px, text gets rest */
.gt-story-block--img-left  { grid-template-columns: minmax(0, 440px) 1fr; }
.gt-story-block--img-right { grid-template-columns: 1fr minmax(0, 440px); }
.gt-story-block--img-left .gt-story-block__media { order: -1; }

/* ── Inline number label (all blocks) ── */
.gt-story-block__num {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  color: rgba(213, 168, 87, 0.8);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  user-select: none;
  display: block;
  margin-bottom: 10px;
}

/* ── Heading ── */
.gt-story-block__heading {
  font-family: var(--font-heading) !important;
  font-size: clamp(20px, 2.3vw, 32px) !important;
  font-weight: 600 !important;
  color: var(--navy, #0a2342) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
  margin: 0 0 12px !important;
}

/* ── Body text ── */
.gt-story-block__body {
  font-size: 16px !important;
  color: #4b5563 !important;
  line-height: 1.72 !important;
  margin: 0 !important;
  max-width: 480px;
}

/* ── Image wrapper ── */
.gt-story-block__img-wrap {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  position: relative;
  box-shadow: 0 4px 20px rgba(1, 14, 32, 0.06), 0 1px 5px rgba(1, 14, 32, 0.03);
}

.gt-story-block__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gt-story-block__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 35, 66, 0);
  transition: background 0.4s ease;
  pointer-events: none;
}

.gt-story-block__img-wrap:hover img { transform: scale(1.03); }
.gt-story-block__img-wrap:hover::after { background: rgba(10, 35, 66, 0.04); }

/* ── Tablet (768–1023px) ── */
@media (max-width: 1023px) {
  .gt-beliefs { padding: 60px 0 !important; }
  .gt-beliefs__intro { margin-bottom: 36px; }
  .gt-story-block { gap: 32px; margin-bottom: 48px; }
  .gt-story-block--hero  { grid-template-columns: 1fr minmax(0, 310px); gap: 32px; }
  .gt-story-block--img-left  { grid-template-columns: minmax(0, 310px) 1fr; }
  .gt-story-block--img-right { grid-template-columns: 1fr minmax(0, 310px); }
  .gt-story-block__heading { font-size: clamp(18px, 2.6vw, 27px) !important; }
  .gt-story-block__body    { font-size: 15px !important; }
  .gt-story-block__img-wrap { border-radius: 14px; }
}

/* ── Mobile (<768px): image on top, then text ── */
@media (max-width: 767px) {
  .gt-beliefs { padding: 40px 0 !important; }
  .gt-beliefs__intro { margin-bottom: 28px; }
  .gt-beliefs__title { font-size: clamp(22px, 6.5vw, 34px) !important; }

  .gt-story-block--hero,
  .gt-story-block--img-left,
  .gt-story-block--img-right {
    grid-template-columns: 1fr !important;
    gap: 12px;
    margin-bottom: 40px;
  }

  .gt-story-block__media { order: -1 !important; }
  .gt-story-block__img-wrap { border-radius: 12px; aspect-ratio: 16 / 9; }

  .gt-story-block__num    { font-size: 10px; margin-bottom: 7px; }
  .gt-story-block__heading { font-size: clamp(18px, 5.5vw, 23px) !important; margin: 0 0 9px !important; }
  .gt-story-block__body   { font-size: 15px !important; line-height: 1.65 !important; }
}

/* ════════════════════════════════════════════════════
   SECTION 5 — GT-STATS v3 (compact · navy on cream)
   1 hàng ngang · scroll ngang nếu cần · no wrap
   ════════════════════════════════════════════════════ */

.gt-stats-section {
  background: #FAF3E4 !important;
  padding: 52px 0 !important;
}

.gt-stats-grid {
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.gt-stats-grid::-webkit-scrollbar { height: 0; }
.gt-stats-grid { scrollbar-width: none; }

.gt-stat-item {
  flex: 1 0 auto !important;
  min-width: 140px;
  padding: 0 36px !important;
}

.gt-stat-num {
  font-size: clamp(28px, 3.2vw, 44px) !important;
  font-weight: 500 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--navy, #0a2342) !important;
  -webkit-text-fill-color: unset !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}

.gt-stat-label {
  color: #5a6a7a !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  margin-top: 4px !important;
}

.gt-stat-sep {
  background: rgba(10, 35, 66, 0.15) !important;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .gt-stats-section { padding: 36px 0 !important; }
  .gt-stats-grid {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding-inline: 20px;
    gap: 28px !important;
    scroll-padding-left: 20px;
  }
  .gt-stat-item {
    flex: 0 0 auto !important;
    min-width: 120px;
    padding: 0 !important;
  }
  .gt-stat-sep { display: block !important; height: 36px !important; }
  .gt-stat-num { font-size: clamp(28px, 7vw, 32px) !important; }
  .gt-stat-label { font-size: 10px !important; }
}

/* ════════════════════════════════════════════════════
   SECTION 6 — GT-MANIFESTO (Future Manifesto)
   2 cột: ảnh trái · tuyên ngôn phải · nền cream
   ════════════════════════════════════════════════════ */

.gt-manifesto {
  background: #FDFAF4;
  padding: 96px 0;
}

.gt-manifesto__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.gt-manifesto__img-wrap {
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 8px 36px rgba(1, 14, 32, 0.08), 0 2px 10px rgba(1, 14, 32, 0.04);
}

.gt-manifesto__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gt-manifesto__heading {
  font-family: 'Sora', sans-serif !important;
  font-size: clamp(26px, 3.4vw, 50px) !important;
  font-weight: 800 !important;
  color: var(--navy, #0a2342) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  margin: 12px 0 24px !important;
}

.gt-manifesto__body {
  font-size: 17px;
  color: #3a4a5c;
  line-height: 1.75;
  margin-bottom: 28px;
}

.gt-manifesto__points {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gt-manifesto__point {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy, #0a2342);
}

.gt-manifesto__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold, #D5A857);
  flex-shrink: 0;
}

.gt-manifesto__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold, #D5A857);
  color: var(--navy, #0a2342);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 13px 28px;
  border-radius: 100px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.gt-manifesto__cta:hover {
  background: #c8973f;
  transform: translateY(-1px);
}

.gt-manifesto__cta svg { transition: transform 0.2s ease; }
.gt-manifesto__cta:hover svg { transform: translateX(3px); }

@media (max-width: 1023px) {
  .gt-manifesto { padding: 64px 0; }
  .gt-manifesto__grid { gap: 40px; }
  .gt-manifesto__heading { font-size: clamp(22px, 3vw, 38px) !important; }
  .gt-manifesto__body { font-size: 15.5px; }
}

@media (max-width: 767px) {
  .gt-manifesto { padding: 48px 0; }
  .gt-manifesto__grid { grid-template-columns: 1fr; gap: 24px; }
  .gt-manifesto__img-wrap { aspect-ratio: 16 / 9; border-radius: 18px; }
  .gt-manifesto__heading { font-size: clamp(22px, 6.5vw, 32px) !important; margin: 10px 0 16px !important; }
  .gt-manifesto__body { font-size: 15px; margin-bottom: 18px; }
  .gt-manifesto__points { margin-bottom: 22px; gap: 8px; }
  .gt-manifesto__point { font-size: 14px; }
  .gt-manifesto__cta { font-size: 13px; padding: 11px 22px; }
}

/* ════════════════════════════════════════════════════
   SECTION 7 — GT-VSM (Tầm nhìn & Sứ mệnh)
   Enterprise editorial · 2-block · white bg
   ════════════════════════════════════════════════════ */

/* Override base gt-vision (navy dark bg) */
.gt-vision {
  background: #fff !important;
  padding: 96px 0 !important;
  color: var(--navy, #0a2342) !important;
}

/* ── Header ── */
.gt-vsm__header {
  max-width: 680px;
  margin-bottom: 72px;
}

.gt-vsm__title {
  font-family: 'Sora', sans-serif !important;
  font-size: clamp(22px, 2.9vw, 42px) !important;
  font-weight: 700 !important;
  color: var(--navy, #0a2342) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  margin: 8px 0 16px !important;
}

.gt-vsm__intro {
  font-size: 17px;
  color: #4b5563;
  line-height: 1.7;
  margin: 0;
}

/* ── Blocks ── */
.gt-vsm-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 72px;
}

.gt-vsm-block:last-child { margin-bottom: 0; }

/* img-left: media first in DOM → col 1; content → col 2 ✓ */
/* img-right: content first in DOM → col 1; media → col 2 ✓ */

/* ── Image ── */
.gt-vsm-block__img-wrap {
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: 0 4px 24px rgba(1, 14, 32, 0.07), 0 1px 6px rgba(1, 14, 32, 0.03);
  position: relative;
}

.gt-vsm-block__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gt-vsm-block__img-wrap:hover img { transform: scale(1.03); }

/* ── Content ── */
.gt-vsm-block__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(213, 168, 87, 0.1);
  color: var(--gold, #D5A857);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.gt-vsm-block__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold, #D5A857);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.gt-vsm-block__text {
  font-size: 18px;
  color: #1e2d3d;
  line-height: 1.72;
  margin: 0;
  font-weight: 400;
}

/* ── Tablet (768–1023px) ── */
@media (max-width: 1023px) {
  .gt-vision { padding: 72px 0 !important; }
  .gt-vsm__header { margin-bottom: 52px; }
  .gt-vsm-block { gap: 40px; margin-bottom: 56px; }
  .gt-vsm__title { font-size: clamp(20px, 2.8vw, 34px) !important; }
  .gt-vsm__intro { font-size: 15.5px; }
  .gt-vsm-block__text { font-size: 16px; }
}

/* ── Mobile (<768px): ảnh → text stack ── */
@media (max-width: 767px) {
  .gt-vision { padding: 48px 0 !important; }
  .gt-vsm__header { margin-bottom: 36px; }
  .gt-vsm-block {
    grid-template-columns: 1fr !important;
    gap: 18px;
    margin-bottom: 48px;
  }
  /* img-left: media already first in DOM ✓ */
  /* img-right: content is first → push media before it */
  .gt-vsm-block--img-right .gt-vsm-block__media { order: -1; }
  .gt-vsm-block__img-wrap { border-radius: 16px; aspect-ratio: 16 / 10; }
  .gt-vsm__title { font-size: clamp(19px, 5.5vw, 28px) !important; margin: 8px 0 12px !important; }
  .gt-vsm__intro { font-size: 15px; }
  .gt-vsm-block__text { font-size: 15.5px; }
  .gt-vsm-block__icon { width: 40px; height: 40px; border-radius: 10px; margin-bottom: 14px; }
}

/* ════════════════════════════════════════════════════
   SECTION 8 — GT-VC (Values Carousel)
   5 card · 1 hàng · scroll-snap · overflow-x auto
   ════════════════════════════════════════════════════ */

/* ── GT-VC: GIÁ TRỊ CỐT LÕI CAROUSEL v2 (with image) ── */
.gt-vc-carousel { position: relative; }

.gt-vc-track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 20px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.gt-vc-track::-webkit-scrollbar { height: 0; }
.gt-vc-track { scrollbar-width: none; }

.gt-vc-card {
  flex: 0 0 340px;
  width: 340px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #E8EDF5;
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.gt-vc-card:hover {
  box-shadow: 0 10px 32px rgba(1, 14, 32, 0.1);
  transform: translateY(-3px);
}

/* Image / placeholder area */
.gt-vc-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.gt-vc-card__img--01 { background: linear-gradient(135deg, #0a2342 0%, #1a4060 100%); }
.gt-vc-card__img--02 { background: linear-gradient(135deg, #0d1f38 0%, #1b3d64 100%); }
.gt-vc-card__img--03 { background: linear-gradient(150deg, #0a2342 0%, #1c3d62 55%, rgba(213,168,87,0.4) 100%); }
.gt-vc-card__img--04 { background: linear-gradient(135deg, #12294a 0%, #1e4470 100%); }
.gt-vc-card__img--05 { background: linear-gradient(135deg, rgba(213,168,87,0.18) 0%, #0a2342 100%); }

.gt-vc-card__img::before {
  content: '';
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1.5px solid rgba(213, 168, 87, 0.22);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gt-vc-card__img::after {
  content: '';
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 1.5px solid rgba(213, 168, 87, 0.18);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gt-vc-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; }

.gt-vc-card__ph {
  font-family: 'Sora', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.05em;
  text-align: center;
  z-index: 1;
  position: relative;
}

/* Text body below image */
.gt-vc-card__body-wrap {
  padding: 24px 26px 28px;
}

.gt-vc-card__num {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(213, 168, 87, 0.7);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  display: block;
}

.gt-vc-card__title {
  font-family: 'Sora', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--navy, #0a2342) !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 10px !important;
}

.gt-vc-card__body {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.76;
  margin: 0;
}

/* Nav buttons — desktop only */
.gt-vc-btn { display: none; }

@media (min-width: 1024px) {
  .gt-vc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(1, 14, 32, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    z-index: 10;
    color: var(--navy, #0a2342);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .gt-vc-btn--prev { left: -22px; }
  .gt-vc-btn--next { right: -22px; }
  .gt-vc-btn:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 4px 16px rgba(1, 14, 32, 0.12); }
  .gt-vc-btn:active { transform: translateY(-50%) scale(0.96); }
  .gt-vc-btn:disabled { opacity: 0.3; pointer-events: none; }
}

@media (max-width: 1023px) {
  .gt-vc-card { flex: 0 0 300px; width: 300px; }
}

@media (max-width: 767px) {
  .gt-vc-card { flex: 0 0 82vw; width: 82vw; border-radius: 16px; }
  .gt-vc-card__body-wrap { padding: 20px 20px 24px; }
  .gt-vc-card__title { font-size: 16px !important; }
}

/* ════════════════════════════════════════════════════
   GT-TYPOGRAPHY SYNC — gioi-thieu.html → design system
   Align all gt- heading/label selectors from Sora
   to var(--font-heading) = Montserrat (same as index.html)
   ════════════════════════════════════════════════════ */

/* 1. Font family: replace Sora with design-system Montserrat */
.gt-founding__heading,
.gt-ecosystem__section-label,
.gt-ecosystem__title,
.gt-pillar-card__tag,
.gt-pillar-card__name,
.gt-pillar-card__link,
.gt-beliefs__title,
.gt-story-block__num,
.gt-story-block__heading,
.gt-manifesto__heading,
.gt-vsm__title,
.gt-vsm-block__label,
.gt-vc-card__num,
.gt-vc-card__ph,
.gt-vc-card__title {
  font-family: var(--font-heading) !important;
}

/* 2. Fix Sora-optimized negative letter-spacing for Montserrat */
.gt-founding__heading    { letter-spacing: 0.02em !important; }
.gt-ecosystem__title     { letter-spacing: 0em !important; }
.gt-beliefs__title       { letter-spacing: 0.02em !important; line-height: 1.15 !important; }
.gt-story-block__heading { letter-spacing: 0.01em !important; }
.gt-manifesto__heading   { letter-spacing: 0.06em !important; }
.gt-vsm__title           { letter-spacing: 0.01em !important; line-height: 1.28 !important; }

/* ════════════════════════════════════════════════════
   CT = CHUONG-TRINH page CSS
   prefix: ct-  |  navy/gold/white design system
   ════════════════════════════════════════════════════ */

/* ── Shared section intro ── */
.ct-section-intro { max-width: 680px; margin-bottom: 56px; }
.ct-section-intro--center { text-align: center; margin-left: auto; margin-right: auto; }
.ct-section-h2 {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 6px 0 16px;
}
.ct-section-lead {
  font-size: 16px;
  color: var(--text-light);
  line-height: 1.72;
  margin: 0;
}

/* ── CT-HERO ── */
/* ── HERO — Program page modifier (ẩn stats, giữ nguyên .hero layout) ── */
.hero--program .hero__stats { display: none !important; }

/* ── CT-GOALS ── */
.ct-goals { background: #fff; padding: 96px 0; }
.ct-goals__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.ct-goal-card {
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gray-mid);
  text-decoration: none;
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ct-goal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(6,43,95,0.11);
  border-color: rgba(216,180,106,0.55);
}
.ct-goal-card__img { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.ct-goal-card__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.35s ease;
}
.ct-goal-card:hover .ct-goal-card__img img { transform: scale(1.04); }
.ct-goal-card__body {
  padding: 18px 22px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ct-goal-card__title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
  letter-spacing: 0.01em;
  margin: 0;
}
.ct-goal-card__arr {
  font-size: 18px;
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.ct-goal-card:hover .ct-goal-card__arr { transform: translateX(4px); }

/* ── CT-JOURNEY ── */
.ct-journey { background: #F8F9FB; padding: 64px 0; }
.ct-phase { margin-bottom: 40px; }
.ct-phase:last-child { margin-bottom: 0; }
.ct-phase__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-mid);
}
.ct-phase__tag {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-dark);
  background: var(--gold);
  padding: 4px 14px;
  border-radius: 100px;
  white-space: nowrap;
}
.ct-phase__title {
  font-family: var(--font-heading);
  font-size: clamp(17px, 1.8vw, 24px);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}
/* ── Phase carousel row ── */
.ct-phase__carousel-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ct-phase__carousel {
  flex: 1;
  min-width: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 24px;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ct-phase__carousel::-webkit-scrollbar { display: none; }
.ct-phase__carousel .ct-course-card {
  scroll-snap-align: start;
  flex: 0 0 380px;
  min-width: 220px;
}
/* Phase 2: pad wrap to align first card with arrow-padded phases (arrow 38px + gap 10px = 48px) */
.ct-phase--p2 .ct-phase__carousel-wrap {
  padding-inline: 48px;
}
.ct-phase--p2 .ct-phase__carousel .ct-course-card {
  flex: 0 0 440px;
}
/* Arrow buttons */
.ct-phase__arrow {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--gray-mid);
  box-shadow: 0 2px 8px rgba(6,43,95,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--navy);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ct-phase__arrow:hover:not(:disabled) {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.ct-phase__arrow:disabled {
  opacity: 0.28;
  cursor: default;
}
.ct-course-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--gray-mid);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.ct-course-card:hover {
  box-shadow: 0 10px 36px rgba(6,43,95,0.1);
  transform: translateY(-3px);
  border-color: rgba(216,180,106,0.6);
}
.ct-course-card__img { width: 100%; aspect-ratio: 16/9; overflow: hidden; flex-shrink: 0; }
.ct-course-card__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.ct-course-card:hover .ct-course-card__img img { transform: scale(1.04); }
.ct-course-card__body {
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ct-course-card__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 5px;
  display: block;
}
.ct-course-card__h4 {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.ct-course-card__desc {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.68;
  margin: 0 0 7px;
}
.ct-course-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(6,43,95,0.25);
  padding-bottom: 2px;
  flex-shrink: 0;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ct-course-card__cta:hover,
.ct-course-card:hover .ct-course-card__cta { color: var(--gold); border-color: var(--gold); }

/* ── CT-COURSE-CARD premium additions ── */
.ct-course-card__audience {
  font-size: 11.5px;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0 0 auto;
}
.ct-course-card__footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-mid);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ct-course-card__price-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-course-card__price-label {
  font-family: var(--font-heading);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
}
.ct-course-card__price {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.01em;
}
.ct-course-card__price--consult { font-size: 13px; color: var(--navy); }

/* (ct-phase--single retired — see ct-phase--p2 for single-card phase) */

/* ── CT-BENEFITS carousel ── */
.ct-benefits { background: #fff; padding: 96px 0; }

.ct-benefits__carousel { position: relative; }

.ct-benefits__track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 18px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.ct-benefits__track::-webkit-scrollbar { height: 0; }
.ct-benefits__track { scrollbar-width: none; }

.ct-benefit-item {
  flex: 0 0 420px;
  width: 420px;
  scroll-snap-align: start;
  background: #F8F9FB;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--gray-mid);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.ct-benefit-item:hover {
  box-shadow: 0 8px 28px rgba(6,43,95,0.09);
  transform: translateY(-2px);
}

.ct-benefit-item__img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  flex-shrink: 0;
}
.ct-benefit-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-benefit-item__img--grad { width: 100%; aspect-ratio: 4/3; }

.ct-benefit-item--grad01 .ct-benefit-item__img--grad {
  background: linear-gradient(135deg, #062B5F 0%, #0D3B8C 100%);
}
.ct-benefit-item--grad02 .ct-benefit-item__img--grad {
  background: linear-gradient(150deg, #062B5F 0%, #1a3d6b 55%, rgba(216,180,106,0.35) 100%);
}
.ct-benefit-item--grad03 .ct-benefit-item__img--grad {
  background: linear-gradient(135deg, #0a1f3a 0%, #0D3B8C 100%);
}

.ct-benefit-item__body { padding: 22px 24px 26px; flex: 1; }
.ct-benefit-item__title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  line-height: 1.35;
}
.ct-benefit-item__desc {
  font-size: 13.5px;
  color: var(--text-light);
  line-height: 1.65;
  margin: 0;
}

/* Nav buttons — desktop only */
.ct-ben-btn { display: none; }
@media (min-width: 1024px) {
  .ct-ben-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(6, 43, 95, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    z-index: 10;
    color: var(--navy);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .ct-ben-btn--prev { left: -22px; }
  .ct-ben-btn--next { right: -22px; }
  .ct-ben-btn:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 4px 16px rgba(6,43,95,0.12); }
  .ct-ben-btn:active { transform: translateY(-50%) scale(0.96); }
  .ct-ben-btn:disabled { opacity: 0.3; pointer-events: none; }
}

/* ── CT-CAREER ── */
.ct-career { background: #FAF3E4; padding: 96px 0; }
.ct-career__path {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: 52px;
}
.ct-career__level {
  flex: 1;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ct-career__level-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(216,180,106,0.45);
  box-shadow: 0 4px 18px rgba(6,43,95,0.12);
  margin-bottom: 12px;
  flex-shrink: 0;
}
.ct-career__level-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-career__level-num {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 4px;
}
.ct-career__level-name {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
}
.ct-career__arrow {
  flex: 0 0 auto;
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 60%, rgba(216,180,106,0.3) 100%);
  margin-top: 47px;
  position: relative;
  flex-shrink: 0;
}
.ct-career__arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
}
.ct-career__cta { text-align: center; }
.ct-career__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--navy);
  padding: 14px 34px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease;
}
.ct-career__btn:hover { background: var(--navy-mid); transform: translateY(-2px); }

/* ── CT-CONSULT ── */
.ct-consult {
  position: relative;
  background: var(--navy-dark, #031B3D);
  padding: 96px 0;
  overflow: hidden;
}
.ct-consult__deco {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(13,59,140,0.3) 0%, transparent 70%);
  pointer-events: none;
}
.ct-consult__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.ct-consult__h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.8vw, 52px);
  font-weight: 600;
  color: var(--white);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 6px 0 20px;
}
.ct-consult__sub {
  font-size: 16px;
  color: rgba(255,255,255,0.74);
  line-height: 1.74;
  margin: 0 0 36px;
}
.ct-consult__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-dark);
  background: var(--gold);
  padding: 15px 36px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease;
}
.ct-consult__btn:hover { background: var(--gold-dark, #B8913E); transform: translateY(-2px); }
.ct-consult__img-wrap {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
}
.ct-consult__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Responsive: Tablet (max 1023px) ── */
@media (max-width: 1023px) {
  .ct-goals { padding: 72px 0; }
  .ct-goals__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .ct-journey { padding: 52px 0; }
  .ct-phase__carousel .ct-course-card { flex: 0 0 330px; }
  .ct-phase--p2 .ct-phase__carousel-wrap { padding-inline: 44px; }
  .ct-phase--p2 .ct-phase__carousel .ct-course-card { flex: 0 0 400px; }
  .ct-benefits { padding: 72px 0; }
  .ct-benefit-item { flex: 0 0 340px; width: 340px; }
  .ct-career { padding: 72px 0; }
  .ct-career__level { max-width: 140px; }
  .ct-career__level-img { width: 78px; height: 78px; }
  .ct-career__arrow { margin-top: 38px; width: 24px; }
  .ct-consult { padding: 72px 0; }
  .ct-consult__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ── Responsive: Mobile (max 767px) ── */
@media (max-width: 767px) {
  .ct-goals { padding: 56px 0; }
  .ct-goals__grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    padding-inline: 24px;
    margin-inline: -24px;
  }
  .ct-goals__grid::-webkit-scrollbar { height: 0; }
  .ct-goal-card {
    flex: 0 0 78vw;
    width: 78vw;
    scroll-snap-align: start;
  }
  .ct-journey { padding: 42px 0; }
  .ct-phase__carousel .ct-course-card { flex: 0 0 80%; }
  .ct-phase--p2 .ct-phase__carousel-wrap { padding-inline: 0; }
  .ct-phase--p2 .ct-phase__carousel .ct-course-card { flex: 0 0 80%; }
  .ct-phase__arrow { display: none; }
  .ct-benefits { padding: 56px 0; }
  .ct-benefit-item { flex: 0 0 84vw; width: 84vw; }
  .ct-career { padding: 56px 0; }
  .ct-career__path {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .ct-career__level { max-width: 200px; }
  .ct-career__arrow {
    width: 2px;
    height: 28px;
    margin-top: 0;
    margin-bottom: 0;
    background: linear-gradient(180deg, var(--gold) 60%, rgba(216,180,106,0.3) 100%);
  }
  .ct-career__arrow::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(-50%) rotate(135deg);
  }
  .ct-consult { padding: 56px 0; }
  .ct-consult__visual { display: none; }
  .ct-consult__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   LO-TRINH PAGE — lr-* prefix
   Đồng bộ tone navy / gold, typography với design system
══════════════════════════════════════════════════════ */

/* ── Shared helpers ── */
.lr-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.lr-section-h2 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.18;
  margin: 0 0 20px;
}
.lr-section-sub {
  font-size: 16px;
  color: var(--text-light);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto;
}
.lr-section-intro { margin-bottom: 52px; }
.lr-section-intro--center { text-align: center; }
.lr-section-intro--center .lr-section-sub { margin: 0 auto; }

/* ══ S1: INTRO ══ */
.lr-intro {
  background: #fff;
  padding: 96px 0;
}
.lr-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.lr-intro__content .lr-section-h2 { margin-bottom: 24px; }
.lr-intro__body {
  font-size: 16px;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 16px;
}
.lr-intro__body:last-of-type { margin-bottom: 28px; }
.lr-intro__cta { margin-top: 8px; }
.lr-intro__visual { position: relative; }
.lr-intro__img-wrap {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 20px 56px rgba(6,43,95,.13), 0 0 0 1px rgba(6,43,95,.06);
}
.lr-intro__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lr-intro__stat-wrap {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}
.lr-intro__stat {
  flex: 1;
  background: var(--navy);
  border-radius: 14px;
  padding: 18px 22px;
  text-align: center;
}
.lr-intro__stat-num {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 6px;
}
.lr-intro__stat-label {
  font-size: 12px;
  color: rgba(255,255,255,.72);
  line-height: 1.4;
}

/* ══ S2: LEVELS CAROUSEL ══ */
.lr-levels {
  background: #F4F6FB;
  padding: 96px 0;
}
.lr-levels__carousel { position: relative; }
.lr-levels__track {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 20px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.lr-levels__track::-webkit-scrollbar { height: 0; }
.lr-level-card {
  flex: 0 0 340px;
  width: 340px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #E4EAF4;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.lr-level-card:hover {
  box-shadow: 0 10px 36px rgba(6,43,95,.10);
  transform: translateY(-3px);
}
.lr-level-card--featured {
  border-color: rgba(216,180,106,.5);
}
.lr-level-card--premium {
  border-color: var(--gold);
  border-width: 2px;
}
.lr-level-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
}
.lr-level-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lr-level-card__body { padding: 22px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.lr-level-card__num {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.lr-level-card__title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 12px;
  line-height: 1.3;
}
.lr-level-card--premium .lr-level-card__title { color: var(--navy-dark); }
.lr-level-card__desc {
  font-size: 13.5px;
  color: var(--text-light);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
/* Nav buttons */
.lr-lv-btn { display: none; }
@media (min-width: 1024px) {
  .lr-lv-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(6,43,95,.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    z-index: 10;
    color: var(--navy);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .lr-lv-btn--prev { left: -22px; }
  .lr-lv-btn--next { right: -22px; }
  .lr-lv-btn:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 4px 16px rgba(6,43,95,.13); }
  .lr-lv-btn:active { transform: translateY(-50%) scale(0.96); }
  .lr-lv-btn:disabled { opacity: 0.3; pointer-events: none; }
  .lr-level-card { flex: 0 0 380px; width: 380px; }
}

/* ══ S3: BENEFITS ══ */
.lr-benefits {
  background: #fff;
  padding: 96px 0;
}
.lr-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.lr-benefit-card {
  background: #F8F9FB;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #E4EAF4;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.lr-benefit-card:hover {
  box-shadow: 0 8px 28px rgba(6,43,95,.08);
  transform: translateY(-2px);
}
.lr-benefit-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
}
.lr-benefit-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lr-benefit-card__body { padding: 20px 22px 24px; flex: 1; }
.lr-benefit-card__icon { font-size: 22px; margin-bottom: 10px; line-height: 1; }
.lr-benefit-card__title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.lr-benefit-card__desc {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.65;
  margin: 0;
}

/* ══ S4: APP ══ */
.lr-app {
  background: #F0F4FB;
  padding: 96px 0;
}
.lr-app__grid {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: 64px;
  align-items: center;
}
.lr-app__mockup { display: flex; align-items: center; justify-content: center; }
.lr-app__img-wrap {
  max-width: 340px;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(6,43,95,.18), 0 0 0 1px rgba(6,43,95,.08);
}
.lr-app__img-wrap img { width: 100%; display: block; }
.lr-app__content .lr-section-h2 { margin-bottom: 18px; }
.lr-app__sub {
  font-size: 16px;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 32px;
}
.lr-app__features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.lr-app__feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 14px;
  padding: 16px 12px;
  border: 1px solid #E4EAF4;
  text-align: center;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.lr-app__feat:hover { box-shadow: 0 4px 16px rgba(6,43,95,.08); border-color: rgba(216,180,106,.45); }
.lr-app__feat-icon { font-size: 22px; line-height: 1; }
.lr-app__feat span:last-child {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* ══ S5: CRITERIA ══ */
.lr-criteria {
  background: #fff;
  padding: 96px 0;
}
.lr-criteria__grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 64px;
  align-items: center;
}
.lr-criteria__lead {
  font-size: 16px;
  color: var(--text);
  line-height: 1.7;
  margin: 0 0 36px;
}
.lr-criteria__steps { display: flex; flex-direction: column; gap: 0; }
.lr-criteria__step {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #EEF1F8;
}
.lr-criteria__step:last-child { border-bottom: none; }
.lr-criteria__step-num {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--gold);
  opacity: 0.7;
  min-width: 42px;
  line-height: 1;
}
.lr-criteria__step-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.01em;
  margin: 0;
}
.lr-criteria__closing {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.65;
  margin: 28px 0 0;
  padding: 16px 20px;
  background: #F4F6FB;
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
}
.lr-criteria__visual { display: flex; align-items: center; justify-content: center; }
.lr-criteria__img-wrap {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 20px 56px rgba(6,43,95,.12), 0 0 0 1px rgba(6,43,95,.06);
}
.lr-criteria__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ══ S6: COMMUNITY ══ */
.lr-community {
  background: #F8F9FB;
  padding: 96px 0;
}
.lr-community__head { text-align: center; margin-bottom: 40px; }
.lr-community__head .lr-section-h2 { margin-bottom: 16px; }
.lr-community__intro {
  font-size: 16px;
  color: var(--text);
  margin: 0 0 22px;
}
.lr-community__pillars {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.lr-community__pillar {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 100px;
}
.lr-community__photos {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
  margin-bottom: 40px;
}
.lr-community__photos::-webkit-scrollbar { height: 0; }
.lr-community__photo-item {
  flex: 0 0 420px;
  width: 420px;
  scroll-snap-align: start;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.lr-community__photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lr-community__closing {
  text-align: center;
  font-size: 17px;
  color: var(--text);
  line-height: 1.75;
  max-width: 700px;
  margin: 0 auto;
}

/* ══ S7: CTA ══ */
.lr-cta {
  position: relative;
  background: var(--navy-dark, #031B3D);
  padding: 96px 0;
  overflow: hidden;
}
.lr-cta__deco {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 85% 50%, rgba(13,59,140,0.45) 0%, transparent 70%),
    radial-gradient(ellipse 35% 40% at 10% 30%, rgba(216,180,106,0.08) 0%, transparent 55%);
  pointer-events: none;
}
.lr-cta__grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.lr-cta__h2 {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.08;
  margin: 0 0 22px;
}
.lr-cta__sub {
  font-size: 16px;
  color: rgba(255,255,255,.76);
  line-height: 1.74;
  margin: 0 0 36px;
}
.lr-cta__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.lr-cta__visual { display: flex; align-items: center; justify-content: center; }
.lr-cta__img-wrap {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 24px 60px rgba(0,0,0,.40), 0 0 0 1.5px rgba(216,180,106,.35);
}
.lr-cta__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ══ LR Responsive: Tablet (≤1023px) ══ */
@media (max-width: 1023px) {
  .lr-intro { padding: 72px 0; }
  .lr-intro__grid { grid-template-columns: 1fr; gap: 40px; }
  .lr-levels { padding: 72px 0; }
  .lr-level-card { flex: 0 0 300px; width: 300px; }
  .lr-benefits { padding: 72px 0; }
  .lr-benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .lr-app { padding: 72px 0; }
  .lr-app__grid { grid-template-columns: 1fr; gap: 44px; }
  .lr-app__mockup { justify-content: center; }
  .lr-app__img-wrap { max-width: 280px; }
  .lr-app__features { grid-template-columns: repeat(4, 1fr); }
  .lr-criteria { padding: 72px 0; }
  .lr-criteria__grid { grid-template-columns: 1fr; gap: 40px; }
  .lr-community { padding: 72px 0; }
  .lr-community__photo-item { flex: 0 0 340px; width: 340px; }
  .lr-cta { padding: 72px 0; }
  .lr-cta__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ══ LR Responsive: Mobile (≤767px) ══ */
@media (max-width: 767px) {
  .lr-intro { padding: 56px 0; }
  .lr-intro__stat-wrap { gap: 12px; }
  .lr-intro__stat-num { font-size: 22px; }
  .lr-levels { padding: 56px 0; }
  .lr-level-card { flex: 0 0 85vw; width: 85vw; }
  .lr-benefits { padding: 56px 0; }
  .lr-benefits__grid { grid-template-columns: 1fr; gap: 16px; }
  .lr-app { padding: 56px 0; }
  .lr-app__features { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .lr-app__feat { padding: 12px 8px; }
  .lr-app__feat-icon { font-size: 18px; }
  .lr-criteria { padding: 56px 0; }
  .lr-criteria__step-num { font-size: 18px; min-width: 34px; }
  .lr-community { padding: 56px 0; }
  .lr-community__photo-item { flex: 0 0 85vw; width: 85vw; }
  .lr-community__closing { font-size: 15px; }
  .lr-cta { padding: 56px 0; }
  .lr-cta__h2 { font-size: clamp(22px, 6vw, 34px); }
  .lr-cta__actions { flex-direction: column; align-items: stretch; }
  .lr-cta__actions .btn { text-align: center; justify-content: center; }
}

/* ══════════════════════════════════════════════════════
   CHUYEN-GIA PAGE — cg-* prefix
   Tone: navy / gold / white, đồng bộ design system
══════════════════════════════════════════════════════ */

/* ── Shared helpers ── */
.cg-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.cg-label--light { color: rgba(216,180,106,.8); }
.cg-section-h2 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.18;
  margin: 0 0 20px;
}

/* ══ S1: NETWORK STATS ══ */
.cg-network {
  background: #fff;
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.cg-network__intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 56px;
}
.cg-network__sub {
  font-size: 16px;
  color: var(--text-light);
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto;
}
/* S1 background map */
.cg-network__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
}
.cg-network__map-svg {
  width: 100%;
  height: 100%;
}
/* Premium stat cards — image + floating badge */
@keyframes cgNetCardIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cg-net-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.cg-net-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid #EEF1F8;
  box-shadow: 0 2px 20px rgba(6,43,95,.07);
  opacity: 0;
  transform: translateY(28px);
}
.cg-net-card.in-view {
  animation: cgNetCardIn 0.65s ease calc(var(--i, 0) * 120ms) both;
  transition: box-shadow 0.32s ease, transform 0.32s ease;
}
.cg-net-card.in-view:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 64px rgba(6,43,95,.14), 0 0 0 1.5px rgba(216,180,106,.28);
}
.cg-net-card__img-wrap {
  height: 180px;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  position: relative;
}
.cg-net-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.cg-net-card.in-view:hover .cg-net-card__img { transform: scale(1.07); }
.cg-net-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,43,95,.15) 0%, rgba(6,43,95,.62) 100%);
}
.cg-net-card__badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  border: 2.5px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: -28px auto 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(6,43,95,.25);
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.cg-net-card.in-view:hover .cg-net-card__badge {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 8px 24px rgba(6,43,95,.32);
}
.cg-net-card__body {
  padding: 16px 20px 28px;
  text-align: center;
}
.cg-net-card__title {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 10px;
}
.cg-net-card__num {
  font-family: var(--font-heading);
  font-size: clamp(32px, 2.8vw, 44px);
  font-weight: 400;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
  transition: transform 0.3s ease;
}
.cg-net-card__num span {
  font-size: 0.52em;
  color: var(--gold);
  vertical-align: super;
  margin-left: 2px;
}
.cg-net-card.in-view:hover .cg-net-card__num { transform: scale(1.05); }
.cg-net-card__desc {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.55;
}

/* ══ S2: DIRECTORY ══ */
.cg-directory {
  background: #F5F7FB;
  padding: 96px 0;
}
.cg-dir__head {
  text-align: center;
  margin-bottom: 52px;
}
.cg-dir__sub {
  font-size: 16px;
  color: var(--text-light);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.65;
}

/* Filter — two-row layout */
.cg-filter {
  background: #fff;
  border-radius: 16px;
  padding: 18px 24px;
  box-shadow: 0 2px 16px rgba(6,43,95,.07);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.cg-filter__row { display: flex; align-items: center; gap: 10px; }
.cg-filter__row--search { }
.cg-filter__row--selects { flex-wrap: wrap; }
.cg-filter__search-wrap {
  position: relative;
  flex: 1;
}
.cg-filter__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  pointer-events: none;
}
.cg-filter__search {
  width: 100%;
  height: 42px;
  padding: 0 12px 0 36px;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
  font-family: var(--font-body);
  background: #F8FAFC;
  transition: border-color .2s;
  box-sizing: border-box;
}
.cg-filter__search:focus { outline: none; border-color: var(--navy); background: #fff; }
.cg-filter__select {
  height: 42px;
  padding: 0 32px 0 12px;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font-body);
  background: #F8FAFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none;
  cursor: pointer;
  transition: border-color .2s;
  flex: 1;
  min-width: 140px;
}
.cg-filter__select:focus { outline: none; border-color: var(--navy); background-color: #fff; }
.cg-filter__reset {
  height: 42px;
  padding: 0 16px;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-light);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color .2s, color .2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.cg-filter__reset:hover { border-color: var(--navy); color: var(--navy); }

/* Demo note */
.cg-dir__demo-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(216,180,106,.08);
  border: 1px solid rgba(216,180,106,.3);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 32px;
}
.cg-dir__demo-note svg { flex-shrink: 0; color: var(--gold); }

/* Expert grid */
.cg-expert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Expert card */
.cg-expert-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid #EEF1F8;
  transition: box-shadow .25s, transform .25s;
}
.cg-expert-card:hover {
  box-shadow: 0 12px 40px rgba(6,43,95,.12);
  transform: translateY(-4px);
}
.cg-expert-card[hidden] { display: none; }

.cg-expert-card__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #EEF1F8;
}
.cg-expert-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.cg-expert-card:hover .cg-expert-card__photo img { transform: scale(1.04); }

.cg-expert-card__level-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--navy-dark, #031B3D);
}
.cg-expert-card__level-badge--mentor { background: var(--navy); color: #fff; }
.cg-expert-card__level-badge--expert { background: #E8F4E8; color: #1a6b1a; }
.cg-expert-card__level-badge--business { background: #EDF2FF; color: #1a3aac; }
.cg-expert-card__level-badge--master { background: var(--gold); color: var(--navy-dark, #031B3D); }
.cg-expert-card__level-badge--founder { background: var(--gold); color: var(--navy-dark, #031B3D); font-weight: 800; letter-spacing: .04em; }
.cg-expert-card__level-badge--co-founder { background: var(--navy); color: #fff; font-weight: 700; }

.cg-expert-card__body { padding: 20px 22px 22px; }
.cg-expert-card__name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 6px;
}
.cg-expert-card__specialty {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.5;
  margin-bottom: 12px;
}
.cg-expert-card__meta { margin-bottom: 16px; }
.cg-expert-card__region {
  font-size: 13px;
  color: var(--text-light);
}
.cg-expert-card__cta {
  display: block;
  width: 100%;
  height: 40px;
  border-radius: 10px;
  background: transparent;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.cg-expert-card__cta:hover { background: var(--navy); color: #fff; }

/* Empty state */
.cg-dir__empty {
  text-align: center;
  padding: 60px 0;
  color: var(--text-light);
  font-size: 15px;
}
.cg-dir__empty p { margin-bottom: 20px; }
.btn--navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
}
.btn--navy:hover { background: var(--navy-dark, #031B3D); }
.btn--outline-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.btn--outline-navy:hover { background: var(--navy); color: #fff; }

/* ══ S5: APP SECTION ══ */
.cg-app {
  background: #fff;
  padding: 96px 0;
}
.cg-app__grid {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: 72px;
  align-items: center;
}
.cg-app__mockup {
  display: flex;
  justify-content: center;
}
.cg-app__img-wrap {
  max-width: 280px;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(6,43,95,.16), 0 0 0 1.5px rgba(6,43,95,.08);
}
.cg-app__img-wrap img { width: 100%; display: block; }
.cg-app__content .cg-section-h2 { margin-bottom: 12px; }
.cg-app__lead {
  font-size: 16px;
  color: var(--text-light);
  line-height: 1.65;
  margin-bottom: 32px;
}
.cg-app__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  margin-bottom: 28px;
}
.cg-app__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cg-app__item-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.cg-app__item-title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 2px;
}
.cg-app__item-desc {
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.5;
}
.cg-app__closing {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  padding: 16px 20px;
  background: rgba(216,180,106,.08);
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
}

/* ══ S6: CONSULT / ĐỒNG HÀNH ══ */
.cg-consult {
  background: #F5F7FB;
  padding: 96px 0;
}
.cg-consult__grid {
  display: grid;
  grid-template-columns: 48fr 52fr;
  gap: 72px;
  align-items: center;
}
.cg-consult__visual { position: relative; }
.cg-consult__img-wrap {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 20px 56px rgba(6,43,95,.12), 0 0 0 1px rgba(6,43,95,.06);
}
.cg-consult__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-consult__content .cg-section-h2 { margin-bottom: 20px; }
.cg-consult__lead {
  font-size: 15px;
  color: var(--text-light);
  margin-bottom: 16px;
}
.cg-consult__list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cg-consult__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text);
  line-height: 1.4;
}
.cg-consult__list li::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.cg-consult__closing {
  font-size: 15px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 24px;
  font-style: italic;
}
.cg-consult__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ══ S7: CTA ══ */
.cg-cta {
  position: relative;
  background: var(--navy-dark, #031B3D);
  padding: 96px 0;
  overflow: hidden;
}
.cg-cta__deco {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 30% 50%, rgba(216,180,106,.12) 0%, transparent 70%);
  pointer-events: none;
}
.cg-cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 64px;
  align-items: center;
}
.cg-cta__h2 {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.08;
  margin: 0 0 20px;
}
.cg-cta__h2 span { color: var(--gold); }
.cg-cta__sub {
  font-size: 16px;
  color: rgba(255,255,255,.7);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 560px;
}
.cg-cta__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.cg-cta__visual { position: relative; }
.cg-cta__img-wrap {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 0 1.5px rgba(216,180,106,.35);
}
.cg-cta__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ══ PROFILE MODAL (S3) ══ */
.cg-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cg-modal[hidden] { display: none; }
.cg-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(6,43,95,.65);
  backdrop-filter: blur(4px);
}
.cg-modal__panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 24px;
  width: 100%;
  max-width: 860px;
  max-height: 92vh;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(6,43,95,.25);
  display: flex;
  flex-direction: column;
  animation: cgModalIn .25s ease;
}
@keyframes cgModalIn {
  from { opacity: 0; transform: scale(.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.cg-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background .2s;
}
.cg-modal__close:hover { background: rgba(255,255,255,.3); }
.cg-modal__inner { display: flex; overflow: hidden; flex: 1; min-height: 0; }

/* Sidebar */
.cg-modal__sidebar {
  width: 236px;
  flex-shrink: 0;
  background: var(--navy);
  padding: 40px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cg-modal__photo-wrap {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(216,180,106,.5);
  margin-bottom: 14px;
}
.cg-modal__photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.cg-modal__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--gold);
  color: var(--navy-dark, #031B3D);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cg-modal__name {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 20px;
  line-height: 1.3;
}
.cg-modal__quick {
  width: 100%;
  text-align: left;
  margin-bottom: 28px;
}
.cg-modal__quick dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin: 14px 0 4px;
}
.cg-modal__quick dt:first-child { margin-top: 0; }
.cg-modal__quick dd {
  font-size: 13px;
  color: rgba(255,255,255,.85);
  margin: 0;
  line-height: 1.5;
}
.cg-modal__contact-btn {
  display: block;
  width: 100%;
  height: 40px;
  border-radius: 10px;
  background: var(--gold);
  color: var(--navy-dark, #031B3D);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 40px;
  text-decoration: none;
  margin-top: auto;
  transition: filter .2s;
}
.cg-modal__contact-btn:hover { filter: brightness(1.08); }

/* Main */
.cg-modal__main {
  flex: 1;
  overflow-y: auto;
  padding: 32px 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cg-modal__section-title {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #EEF1F8;
}
.cg-modal__intro {
  font-size: 15px;
  color: var(--text);
  line-height: 1.72;
  margin: 0;
}
.cg-modal__experience-list {
  padding-left: 20px;
}
.cg-modal__experience-list li {
  margin-bottom: 7px;
}
.cg-modal__experience-list li:last-child {
  margin-bottom: 0;
}

/* Level & Chuyên môn row */
.cg-modal__level-row {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}
.cg-modal__level-item {
  flex: 1;
  background: #F5F7FB;
  border-radius: 10px;
  padding: 12px 14px;
}
.cg-modal__level-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 4px;
}
.cg-modal__level-val {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.cg-modal__specialty-wrap { margin-top: 4px; }
.cg-modal__specialty-text {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 6px;
}
.cg-modal__specialty-note {
  font-size: 12px;
  color: var(--text-light);
  font-style: italic;
  margin: 0;
}

/* System stats grid */
.cg-modal__sys-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cg-modal__sys-stat {
  background: #F5F7FB;
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
}
.cg-modal__sys-icon { font-size: 20px; margin-bottom: 6px; }
.cg-modal__sys-label {
  font-size: 11px;
  color: var(--text-light);
  margin-bottom: 4px;
  line-height: 1.3;
}
.cg-modal__sys-val {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
.cg-modal__sys-val--pending { color: var(--text-light); font-weight: 500; font-style: italic; font-family: var(--font-body); }

/* Review */
.cg-modal__section--review {
  background: #F5F7FB;
  border-radius: 14px;
  padding: 20px;
}
.cg-modal__review { margin: 0; }
.cg-modal__review-text {
  font-size: 15px;
  color: var(--text);
  line-height: 1.7;
  font-style: italic;
  margin: 0 0 10px;
}
.cg-modal__review-text::before { content: '\201C'; }
.cg-modal__review-text::after  { content: '\201D'; }
.cg-modal__review-cite {
  font-size: 13px;
  color: var(--text-light);
  font-style: normal;
  font-weight: 600;
}

/* ══ CG Responsive: Tablet (≤1023px) ══ */
@media (max-width: 1023px) {
  .cg-network { padding: 72px 0; }
  .cg-net-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .cg-net-card__img-wrap { height: 160px; }
  .cg-directory { padding: 72px 0; }
  .cg-expert-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .cg-app { padding: 72px 0; }
  .cg-app__grid { grid-template-columns: 1fr; gap: 48px; }
  .cg-app__mockup { justify-content: center; }
  .cg-app__img-wrap { max-width: 240px; }
  .cg-consult { padding: 72px 0; }
  .cg-consult__grid { grid-template-columns: 1fr; gap: 44px; }
  .cg-consult__visual { display: none; }
  .cg-cta { padding: 72px 0; }
  .cg-cta__inner { grid-template-columns: 1fr; gap: 40px; }
  .cg-cta__visual { display: none; }
  /* Modal tablet */
  .cg-modal__sys-stats { grid-template-columns: repeat(2, 1fr); }
  .cg-modal__sidebar { width: 210px; }
}

/* ══ CG Responsive: Mobile (≤767px) ══ */
@media (max-width: 767px) {
  .cg-network { padding: 56px 0; }
  .cg-net-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; padding-bottom: 4px; }
  .cg-net-cards::-webkit-scrollbar { display: none; }
  .cg-net-card { flex: 0 0 68vw; scroll-snap-align: start; }
  .cg-net-card__img-wrap { height: 120px; }
  .cg-net-card__badge { width: 46px; height: 46px; font-size: 18px; margin-top: -23px; }
  .cg-net-card__num { font-size: clamp(26px, 8vw, 38px); }
  .cg-directory { padding: 56px 0; }
  .cg-filter { padding: 16px; }
  .cg-filter__row--selects { flex-direction: column; align-items: stretch; }
  .cg-filter__select { min-width: unset; }
  .cg-expert-grid { grid-template-columns: 1fr; gap: 16px; }
  .cg-app { padding: 56px 0; }
  .cg-app__items { grid-template-columns: 1fr; gap: 14px; }
  .cg-consult { padding: 56px 0; }
  .cg-cta { padding: 56px 0; }
  .cg-cta__h2 { font-size: clamp(22px, 7vw, 34px); }
  .cg-cta__actions .btn { width: 100%; text-align: center; justify-content: center; }
  /* Modal mobile — bottom sheet */
  .cg-modal { padding: 0; align-items: flex-end; }
  .cg-modal__panel { border-radius: 24px 24px 0 0; max-height: 94vh; }
  .cg-modal__inner { flex-direction: column; }
  .cg-modal__sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 14px;
    padding: 18px 20px;
    flex-shrink: 0;
  }
  .cg-modal__photo-wrap { width: 68px; height: 68px; margin-bottom: 0; flex-shrink: 0; }
  .cg-modal__name { font-size: 15px; margin-bottom: 0; }
  .cg-modal__quick { display: none; }
  .cg-modal__contact-btn { display: none; }
  .cg-modal__main { padding: 18px 20px 24px; gap: 20px; }
  .cg-modal__level-row { flex-direction: column; gap: 10px; }
  .cg-modal__sys-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════
   DOANH NGHIEP PAGE  (dn-*)  v2 PREMIUM
══════════════════════════════════════════════════════ */

/* ── Core modifiers ── */
.hero--dn .hero__title span { color: var(--gold) !important; }

.btn--gold {
  background: var(--gold);
  color: var(--navy);
  border: 2px solid var(--gold);
  font-weight: 700;
}
.btn--gold:hover,
.btn--gold:focus-visible {
  background: #c9a03a;
  border-color: #c9a03a;
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(216,180,106,.35);
}
.btn--navy {
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--navy);
  font-weight: 700;
}
.btn--navy:hover,
.btn--navy:focus-visible {
  background: var(--navy-mid);
  border-color: var(--navy-mid);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6,43,95,.3);
}

/* ── Stats Bar ── */
.dn-stats-bar {
  background: var(--navy-dark);
  border-bottom: 1px solid rgba(216,180,106,.15);
}
.dn-stats-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  gap: 0;
}
.dn-stats-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.dn-stats-bar__num {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.01em;
}
.dn-stats-bar__label {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  letter-spacing: 0.04em;
  text-align: center;
}
.dn-stats-bar__sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}

/* ── S1: Pain — editorial layout ── */
.dn-pain { background: #fff; }
.dn-pain__header { margin-bottom: 56px; text-align: center; }
.dn-pain__inner {
  display: grid;
  grid-template-columns: 44% 56%;
  gap: 48px;
  align-items: start;
}

/* Gallery side */
.dn-pain__gallery {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dn-pain__gallery-main {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 340px;
}
.dn-pain__gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.dn-pain__gallery-main:hover img { transform: scale(1.04); }
.dn-pain__gallery-main-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,43,95,.1) 0%, rgba(6,43,95,.65) 100%);
}
.dn-pain__gallery-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(216,180,106,.2);
  border: 1px solid rgba(216,180,106,.5);
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
}
.dn-pain__gallery-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(6,43,95,.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(216,180,106,.3);
  border-radius: 14px;
  padding: 10px 16px;
}
.dn-pain__gallery-num {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  color: var(--gold);
  display: block;
  line-height: 1;
}
.dn-pain__gallery-lbl {
  font-size: 11px;
  color: rgba(255,255,255,.7);
  letter-spacing: 0.03em;
}
.dn-pain__gallery-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dn-pain__gallery-sm {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 160px;
}
.dn-pain__gallery-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.dn-pain__gallery-sm:hover img { transform: scale(1.06); }
.dn-pain__gallery-sm-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(6,43,95,.7) 100%);
}
.dn-pain__gallery-sm-label {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Challenge cards side */
.dn-pain__cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dn-pain-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border: 1.5px solid #EEF1F8;
  border-radius: 16px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateX(24px);
}
.dn-pain-item.in-view {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease calc(var(--i, 0) * 80ms), transform 0.5s ease calc(var(--i, 0) * 80ms), box-shadow 0.3s ease, border-color 0.3s ease;
}
.dn-pain-item:hover {
  box-shadow: 0 8px 32px rgba(6,43,95,.1);
  border-color: rgba(216,180,106,.4);
  transform: translateX(4px);
}
.dn-pain-item.in-view:hover { transform: translateX(4px); }
.dn-pain-item__thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
}
.dn-pain-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.dn-pain-item:hover .dn-pain-item__thumb img { transform: scale(1.1); }
.dn-pain-item__body { flex: 1; }
.dn-pain-item__num {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 4px;
}
.dn-pain-item__title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
  line-height: 1.4;
}
.dn-pain-item__desc {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
}

/* ── S2: Solutions — alternating storytelling rows ── */
.dn-solutions {
  background: #F6F8FC;
  padding: 96px 0 0;
}
.dn-solutions .section-header {
  text-align: center;
  margin-bottom: 72px;
}
.dn-sol-rows { display: flex; flex-direction: column; }
.dn-sol-row {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 500px;
}
.dn-sol-row--reverse { grid-template-columns: 45% 55%; }
.dn-sol-row--reverse .dn-sol-row__img { order: 2; }
.dn-sol-row--reverse .dn-sol-row__content { order: 1; }
.dn-sol-row__img {
  position: relative;
  overflow: hidden;
  min-height: 440px;
}
.dn-sol-row__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}
.dn-sol-row:hover .dn-sol-row__img img { transform: scale(1.04); }
.dn-sol-row__img-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, #F6F8FC 100%);
}
.dn-sol-row--reverse .dn-sol-row__img-fade {
  background: linear-gradient(270deg, transparent 55%, #F6F8FC 100%);
}
.dn-sol-row__img-num {
  position: absolute;
  top: 28px;
  left: 28px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold);
  background: rgba(6,43,95,.7);
  border: 1px solid rgba(216,180,106,.4);
  border-radius: 6px;
  padding: 3px 12px;
}
.dn-sol-row__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 48px;
  gap: 20px;
}
.dn-sol-row__title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 900;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.dn-sol-row__desc {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.75;
  margin: 0;
}
.dn-sol-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dn-sol-row__tags span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--navy);
  background: rgba(6,43,95,.07);
  border: 1px solid rgba(6,43,95,.1);
  border-radius: 20px;
  padding: 4px 12px;
}
.dn-sol-row__result {
  font-size: 14px;
  color: var(--text-light);
  background: rgba(216,180,106,.1);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 10px 16px;
  line-height: 1.5;
  margin: 0;
}
.dn-sol-row__result strong { color: var(--navy); }

/* Mini card grid */
.dn-sol-mini-wrap { padding-top: 64px; padding-bottom: 96px; }
.dn-sol-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.dn-sol-mini-card {
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid #EEF1F8;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(6,43,95,.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.dn-sol-mini-card:hover {
  box-shadow: 0 16px 48px rgba(6,43,95,.12);
  transform: translateY(-4px);
}
.dn-sol-mini-card__img {
  position: relative;
  height: 240px;
  overflow: hidden;
}
.dn-sol-mini-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.dn-sol-mini-card:hover .dn-sol-mini-card__img img { transform: scale(1.05); }
.dn-sol-mini-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,43,95,.55) 100%);
}
.dn-sol-mini-card__num {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gold);
  background: rgba(6,43,95,.65);
  border: 1px solid rgba(216,180,106,.4);
  border-radius: 6px;
  padding: 2px 10px;
}
.dn-sol-mini-card__body { padding: 24px 28px 28px; }
.dn-sol-mini-card__title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
  line-height: 1.3;
}
.dn-sol-mini-card__desc {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.65;
  margin-bottom: 16px;
}
.dn-sol-mini-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dn-sol-mini-card__tags span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--navy);
  background: rgba(6,43,95,.07);
  border-radius: 20px;
  padding: 3px 10px;
}

/* ── S3: Flow — infographic with images ── */
.dn-flow {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.dn-flow::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 600px at 20% 50%, rgba(13,59,140,.4) 0%, transparent 70%),
    radial-gradient(circle 400px at 80% 80%, rgba(216,180,106,.06) 0%, transparent 60%);
  pointer-events: none;
}
.dn-flow__label { background: rgba(216,180,106,.18) !important; color: var(--gold) !important; }
.dn-flow__title,
.section-title.dn-flow__title { color: #fff; }
.dn-flow__sub,
.section-subtitle.dn-flow__sub { color: rgba(255,255,255,.6); }
.dn-flow .section-header { text-align: center; margin-bottom: 64px; position: relative; z-index: 1; }
.dn-flow-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
  z-index: 1;
}
.dn-flow-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  opacity: 0;
  transform: translateY(20px);
}
.dn-flow-item.in-view {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease calc(var(--fi, 0) * 120ms), transform 0.6s ease calc(var(--fi, 0) * 120ms);
}
.dn-flow-item__img {
  width: 100%;
  position: relative;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  height: 180px;
}
.dn-flow-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.dn-flow-item:hover .dn-flow-item__img img { transform: scale(1.06); }
.dn-flow-item__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,27,61,.3) 0%, rgba(3,27,61,.7) 100%);
}
.dn-flow-item__num {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.dn-flow-item__body {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(216,180,106,.15);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 20px 16px 24px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.3s ease;
}
.dn-flow-item:hover .dn-flow-item__body {
  background: rgba(216,180,106,.08);
}
.dn-flow-item__icon {
  font-size: 24px;
  display: block;
  margin-bottom: 10px;
}
.dn-flow-item__title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  line-height: 1.4;
}
.dn-flow-item__desc {
  font-size: 12.5px;
  color: rgba(255,255,255,.6);
  line-height: 1.55;
  margin: 0;
}
.dn-flow-line {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 90px;
}
.dn-flow-line svg { width: 60px; height: 24px; }

/* ── S4: Personal — mosaic gallery ── */
.dn-personal { background: #fff; }
.dn-personal-inner {
  display: grid;
  grid-template-columns: 38% 62%;
  gap: 56px;
  align-items: start;
}
.dn-personal__content {
  position: sticky;
  top: 100px;
  padding-top: 16px;
}
.dn-personal__title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 900;
  color: var(--navy);
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.dn-personal__lead {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.75;
  margin-bottom: 32px;
}
.dn-personal-points {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 36px;
}
.dn-personal-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.dn-personal-point__icon {
  width: 44px;
  height: 44px;
  background: rgba(6,43,95,.07);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.dn-personal-point__title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
}
.dn-personal-point__desc {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
}

/* Mosaic grid */
.dn-personal__mosaic { overflow: hidden; }
.dn-mosaic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 180px 180px 160px 180px;
  gap: 8px;
}
.dn-mosaic-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}
.dn-mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.dn-mosaic-item:hover img { transform: scale(1.08); }
.dn-mosaic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(6,43,95,.5) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dn-mosaic-item:hover .dn-mosaic-overlay { opacity: 1; }
/* Mosaic layout */
.dn-mosaic-item--1 { grid-column: 1 / 3; grid-row: 1; }
.dn-mosaic-item--2 { grid-column: 3; grid-row: 1 / 3; }
.dn-mosaic-item--3 { grid-column: 1; grid-row: 2; }
.dn-mosaic-item--4 { grid-column: 2; grid-row: 2; }
.dn-mosaic-item--5 { grid-column: 1 / 3; grid-row: 3; }
.dn-mosaic-item--6 { grid-column: 3; grid-row: 3; }
.dn-mosaic-item--7 { grid-column: 1; grid-row: 4; }
.dn-mosaic-item--8 { grid-column: 2; grid-row: 4; }
.dn-mosaic-item--9 { grid-column: 3; grid-row: 4; }

/* ── S5: Expert Directory — horizontal slider ── */
.dn-experts { background: #F6F8FC; }
.dn-experts .section-header { text-align: center; margin-bottom: 48px; }
.dn-dir {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dn-dir-btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #DDE3EE;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(6,43,95,.08);
  z-index: 2;
}
.dn-dir-btn:hover:not(:disabled) {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: scale(1.08);
}
.dn-dir-btn:disabled { opacity: 0.3; cursor: default; }
.dn-dir-track-wrap { flex: 1; overflow: hidden; }
.dn-dir-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 4px 16px;
}
.dn-dir-track::-webkit-scrollbar { display: none; }
.dn-dir-card {
  flex: 0 0 220px;
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid #EEF1F8;
  box-shadow: 0 2px 16px rgba(6,43,95,.06);
  scroll-snap-align: start;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.dn-dir-card:hover {
  box-shadow: 0 16px 48px rgba(6,43,95,.14);
  transform: translateY(-6px);
}
.dn-dir-card__img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
}
.dn-dir-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s ease;
}
.dn-dir-card:hover .dn-dir-card__img-wrap img { transform: scale(1.06); }
.dn-dir-card__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(6,43,95,.85) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.dn-dir-card:hover .dn-dir-card__img-overlay { opacity: 1; }
.dn-dir-card__hover-body { width: 100%; }
.dn-dir-card__hover-body p {
  font-size: 12px;
  color: rgba(255,255,255,.85);
  line-height: 1.5;
  margin: 0 0 10px;
}
.dn-dir-card__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.dn-dir-card__skills span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  background: rgba(216,180,106,.2);
  border: 1px solid rgba(216,180,106,.4);
  border-radius: 20px;
  padding: 2px 8px;
}
.dn-dir-card__info { padding: 16px 18px 20px; }
.dn-dir-card__tier {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dn-dir-card__name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 3px;
}
.dn-dir-card__role {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 6px;
}
.dn-dir-card__meta {
  font-size: 11px;
  color: rgba(6,43,95,.5);
  font-style: italic;
}
.dn-dir-card--more {
  background: var(--navy);
  border-color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dn-dir-card--more:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(6,43,95,.3); }
.dn-dir-card__more-inner {
  text-align: center;
  padding: 32px 24px;
}
.dn-dir-card__more-num {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 900;
  color: var(--gold);
  display: block;
  margin-bottom: 8px;
}
.dn-dir-card__more-txt {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* ── S6: Cases — editorial ── */
.dn-cases { background: #fff; padding-bottom: 96px; }
.dn-cases__label { /* inherits .section-label */ }
.dn-cases__title { /* inherits .section-title */ }

/* Featured case hero */
.dn-case-featured { background: #F6F8FC; padding: 80px 0; margin-bottom: 72px; }
.dn-case-featured__head { margin-bottom: 48px; }
.dn-case-hero {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 48px;
  align-items: start;
}
.dn-case-hero__img-col {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 480px;
  box-shadow: 0 24px 64px rgba(6,43,95,.18);
}
.dn-case-hero__img-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dn-case-hero__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,43,95,.75) 100%);
}
.dn-case-hero__industry-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(6,43,95,.75);
  backdrop-filter: blur(8px);
  color: var(--gold);
  border: 1px solid rgba(216,180,106,.4);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
}
.dn-case-hero__metrics {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  gap: 0;
  background: rgba(6,43,95,.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(216,180,106,.25);
  border-radius: 14px;
  padding: 14px 20px;
}
.dn-case-hero__metric {
  flex: 1;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.12);
}
.dn-case-hero__metric:last-child { border-right: none; }
.dn-case-hero__metric-num {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  color: var(--gold);
  display: block;
  line-height: 1;
  margin-bottom: 3px;
}
.dn-case-hero__metric-lbl {
  font-size: 11px;
  color: rgba(255,255,255,.65);
}
.dn-case-hero__content-col { padding-top: 8px; }
.dn-case-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 900;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 24px;
}
.dn-case-hero__quote {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.75;
  font-style: italic;
  border-left: 4px solid var(--gold);
  padding: 4px 0 4px 20px;
  margin: 0 0 28px;
}
.dn-case-hero__author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #F6F8FC;
  border-radius: 14px;
  margin-bottom: 24px;
}
.dn-case-hero__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid var(--gold);
  flex-shrink: 0;
}
.dn-case-hero__author-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.dn-case-hero__author-role {
  font-size: 13px;
  color: var(--text-light);
}
.dn-case-hero__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.dn-case-hero__gallery img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  transition: transform 0.3s ease;
}
.dn-case-hero__gallery img:hover { transform: scale(1.04); }

/* Carousel */
.dn-case-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dn-case-track-wrap { flex: 1; overflow: hidden; }
.dn-case-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 4px 20px;
}
.dn-case-track::-webkit-scrollbar { display: none; }
.dn-case-card {
  flex: 0 0 calc(50% - 12px);
  min-width: 300px;
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid #EEF1F8;
  box-shadow: 0 2px 16px rgba(6,43,95,.06);
  scroll-snap-align: start;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.dn-case-card:hover {
  box-shadow: 0 16px 48px rgba(6,43,95,.12);
  transform: translateY(-4px);
}
.dn-case-card__img {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.dn-case-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.dn-case-card:hover .dn-case-card__img img { transform: scale(1.05); }
.dn-case-card__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(6,43,95,.65) 100%);
}
.dn-case-card__industry {
  position: absolute;
  bottom: 14px;
  left: 16px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(6,43,95,.7);
  border: 1px solid rgba(216,180,106,.4);
  border-radius: 20px;
  padding: 2px 10px;
}
.dn-case-card__body { padding: 20px 22px 24px; }
.dn-case-card__results {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.dn-case-card__result {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dn-case-card__result strong {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
}
.dn-case-card__result span {
  font-size: 11px;
  color: var(--text-light);
  letter-spacing: 0.03em;
}
.dn-case-card__title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 12px;
}
.dn-case-card__quote {
  font-size: 13.5px;
  color: var(--text-light);
  line-height: 1.65;
  font-style: italic;
  border-left: 3px solid var(--gold);
  padding-left: 12px;
  margin: 0 0 18px;
}
.dn-case-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dn-case-card__author img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #EEF1F8;
  flex-shrink: 0;
}
.dn-case-card__author strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  display: block;
}
.dn-case-card__author span {
  font-size: 12px;
  color: var(--text-light);
}
.dn-case-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #DDE3EE;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(6,43,95,.08);
  z-index: 2;
}
.dn-case-btn:hover:not(:disabled) {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  transform: scale(1.08);
}
.dn-case-btn:disabled { opacity: 0.35; cursor: default; }

/* ── S7: CTA — photo stack ── */
.dn-cta {
  background: var(--navy);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.dn-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 700px at 70% 50%, rgba(13,59,140,.5) 0%, transparent 70%),
    radial-gradient(circle 300px at 10% 80%, rgba(216,180,106,.06) 0%, transparent 60%);
  pointer-events: none;
}
.dn-cta__inner {
  display: grid;
  grid-template-columns: 52% 48%;
  gap: 64px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.dn-cta__heading {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.5vw, 40px);
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.dn-cta__lead {
  font-size: 15px;
  color: rgba(255,255,255,.7);
  line-height: 1.75;
  margin-bottom: 24px;
}
.dn-cta__trust {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dn-cta__trust li {
  font-size: 14px;
  color: rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  gap: 10px;
}
.dn-cta__trust li::before {
  content: '✓';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(216,180,106,.2);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Form elements */
.dn-cta__form { display: flex; flex-direction: column; gap: 0; }
.dn-form-group { margin-bottom: 14px; }
.dn-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dn-form-input,
.dn-form-select,
.dn-form-textarea {
  width: 100%;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: #fff;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
  font-family: var(--font-body);
}
.dn-form-input::placeholder { color: rgba(255,255,255,.35); }
.dn-form-select::placeholder { color: rgba(255,255,255,.35); }
.dn-form-input:focus,
.dn-form-select:focus,
.dn-form-textarea:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,.12);
}
.dn-form-select option { background: var(--navy-dark); color: #fff; }
.dn-form-textarea { resize: vertical; min-height: 80px; }
.dn-form-note {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.4);
  margin: 10px 0 0;
}

/* Photo stack */
.dn-cta__right { position: relative; }
.dn-photo-stack {
  position: relative;
  height: 500px;
}
.dn-photo-stack__main {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
.dn-photo-stack__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dn-photo-stack__main-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,43,95,.6) 100%);
}
.dn-photo-stack__float {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  border: 3px solid rgba(255,255,255,.15);
}
.dn-photo-stack__float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dn-photo-stack__float--tr {
  width: 160px;
  height: 120px;
  top: -20px;
  right: -20px;
  animation: floatY 4s ease-in-out infinite;
}
.dn-photo-stack__float--bl {
  width: 140px;
  height: 110px;
  bottom: 60px;
  left: -20px;
  animation: floatY 5s ease-in-out 1.5s infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.dn-photo-stack__badge {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 14px;
  padding: 10px 16px;
  text-align: center;
}
.dn-photo-stack__badge strong {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  display: block;
  line-height: 1;
}
.dn-photo-stack__badge span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: block;
}

/* ── Tablet ≤ 1023px ── */
@media (max-width: 1023px) {
  .dn-stats-bar__inner { gap: 8px; }
  .dn-stats-bar__sep { display: none; }
  .dn-stats-bar__item { gap: 2px; }

  .dn-pain__inner { grid-template-columns: 1fr; gap: 40px; }
  .dn-pain__gallery { position: static; }

  .dn-sol-row { grid-template-columns: 1fr 1fr; min-height: 380px; }
  .dn-sol-row--reverse { grid-template-columns: 1fr 1fr; }
  .dn-sol-row__content { padding: 36px 28px; }
  .dn-sol-mini-grid { grid-template-columns: 1fr; }

  .dn-flow-track { flex-wrap: wrap; gap: 16px; }
  .dn-flow-item { flex: 0 0 calc(50% - 8px); }
  .dn-flow-line { display: none; }

  .dn-personal-inner { grid-template-columns: 1fr; gap: 40px; }
  .dn-personal__content { position: static; }
  .dn-mosaic-grid { grid-template-rows: 160px 160px 140px 160px; }

  .dn-dir-card { flex: 0 0 180px; }

  .dn-case-hero { grid-template-columns: 1fr; gap: 32px; }
  .dn-case-hero__img-col { height: 360px; }
  .dn-case-card { flex: 0 0 calc(80% - 12px); }

  .dn-cta__inner { grid-template-columns: 1fr; gap: 48px; }
  .dn-cta { padding: 72px 0; }
  .dn-photo-stack { height: 380px; }
}

/* ── Mobile ≤ 767px ── */
@media (max-width: 767px) {
  .dn-stats-bar__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 0; }
  .dn-stats-bar__sep { display: none; }
  .dn-stats-bar__item { gap: 3px; }

  .dn-pain__gallery-main { height: 260px; }
  .dn-pain__gallery-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .dn-pain__gallery-sm { height: 120px; }
  .dn-pain__cards { gap: 8px; }
  .dn-pain-item { padding: 14px; gap: 12px; }
  .dn-pain-item__thumb { width: 56px; height: 56px; }

  .dn-sol-row { grid-template-columns: 1fr; min-height: auto; }
  .dn-sol-row--reverse .dn-sol-row__img { order: 1; }
  .dn-sol-row--reverse .dn-sol-row__content { order: 2; }
  .dn-sol-row__img { min-height: 280px; }
  .dn-sol-row__img-fade { display: none; }
  .dn-sol-row__content { padding: 28px 20px; }
  .dn-sol-mini-grid { grid-template-columns: 1fr; gap: 16px; }
  .dn-sol-mini-card__img { height: 200px; }
  .dn-solutions { padding-top: 64px; }
  .dn-sol-mini-wrap { padding-top: 40px; padding-bottom: 64px; }

  .dn-flow-track {
    flex-direction: column;
    gap: 12px;
  }
  .dn-flow-item { flex: 1 1 auto; width: 100%; }
  .dn-flow-item__img { height: 160px; }
  .dn-flow-line { display: none; }

  .dn-personal-inner { grid-template-columns: 1fr; gap: 32px; }
  .dn-personal__mosaic { overflow-x: auto; }
  .dn-mosaic-grid {
    grid-template-columns: repeat(5, 140px);
    grid-template-rows: 180px;
    grid-auto-rows: 0;
    gap: 8px;
    width: max-content;
  }
  .dn-mosaic-item--1,
  .dn-mosaic-item--2,
  .dn-mosaic-item--3,
  .dn-mosaic-item--4,
  .dn-mosaic-item--5 {
    grid-column: auto;
    grid-row: auto;
  }
  .dn-mosaic-item--6,
  .dn-mosaic-item--7,
  .dn-mosaic-item--8,
  .dn-mosaic-item--9 { display: none; }

  .dn-dir-card { flex: 0 0 180px; }
  .dn-dir-btn { display: none; }

  .dn-case-featured { padding: 48px 0; }
  .dn-case-hero { grid-template-columns: 1fr; gap: 24px; }
  .dn-case-hero__img-col { height: 280px; }
  .dn-case-hero__gallery { grid-template-columns: 1fr 1fr 1fr; }
  .dn-case-hero__gallery img { height: 64px; }
  .dn-case-card { flex: 0 0 calc(93% - 8px); }
  .dn-case-btn { display: none; }

  .dn-cta { padding: 56px 0; }
  .dn-cta__inner { grid-template-columns: 1fr; gap: 40px; }
  .dn-photo-stack { height: 280px; }
  .dn-photo-stack__float--tr { width: 110px; height: 82px; top: -12px; right: -8px; }
  .dn-photo-stack__float--bl { width: 100px; height: 78px; bottom: 30px; left: -8px; }
  .dn-form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ══════════════════════════════════════════════════════
   TRI THUC PAGE  (tt-*)  KNOWLEDGE HUB
══════════════════════════════════════════════════════ */

/* ── Hero modifier ── */
.hero--tt .hero__title span { color: var(--gold) !important; }
.hero--tt .hero__inner { align-items: center; }
/* Left column above right column — prevents collage from painting over dropdown */
.hero--tt .hero__content { position: relative; z-index: 10; }
.hero--tt .hero__visual  { z-index: 1; }

/* Search bar inside hero */
.tt-hero-search { margin: 8px 0 24px; position: relative; z-index: 50; }
.tt-search-bar {
  display: flex;
  align-items: center;
  position: relative;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 14px;
  padding: 6px 6px 6px 18px;
  gap: 10px;
  backdrop-filter: blur(8px);
  transition: border-color 0.2s ease, background 0.2s ease;
  margin-bottom: 12px;
}
.tt-search-bar:focus-within {
  background: rgba(255,255,255,.15);
  border-color: rgba(216,180,106,.6);
}
.tt-search-bar__icon { color: rgba(255,255,255,.5); flex-shrink: 0; }
.tt-search-bar__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 15px;
  color: #fff;
}
.tt-search-bar__input::placeholder { color: rgba(255,255,255,.45); }
.tt-search-bar__btn { border-radius: 10px !important; padding: 10px 20px !important; font-size: 14px !important; flex-shrink: 0; }

/* ── Hero Search Dropdown ── */
.tt-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid rgba(216,180,106,.4);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(6,43,95,.18), 0 4px 16px rgba(0,0,0,.08);
  overflow: hidden;
  z-index: 9999;
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(6,43,95,.12) transparent;
}
.tt-search-dropdown.is-open { display: block; }
.tt-search-dropdown__header {
  padding: 10px 18px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(6,43,95,.38);
  background: rgba(6,43,95,.03);
  border-bottom: 1px solid rgba(6,43,95,.06);
}
.tt-search-dropdown__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background .14s ease;
  border-bottom: 1px solid rgba(6,43,95,.06);
}
.tt-search-dropdown__item:last-child { border-bottom: none; }
.tt-search-dropdown__item:hover,
.tt-search-dropdown__item--active { background: rgba(216,180,106,.1); }
.tt-search-dropdown__icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6,43,95,.06);
  border-radius: 9px;
}
.tt-search-dropdown__body { flex: 1; min-width: 0; }
.tt-search-dropdown__type {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 2px;
  line-height: 1.3;
}
.tt-search-dropdown__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.tt-search-dropdown__desc {
  font-size: 11px;
  color: rgba(6,43,95,.52);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.tt-search-dropdown__empty {
  padding: 28px 20px;
  text-align: center;
  color: rgba(6,43,95,.48);
  font-size: 13px;
}
@media (max-width: 767px) {
  .tt-search-dropdown { border-radius: 14px; max-height: 260px; left: -8px; right: -8px; }
  .tt-search-dropdown__item { padding: 10px 14px; gap: 10px; }
  .tt-search-dropdown__icon { width: 30px; height: 30px; font-size: 14px; border-radius: 7px; }
  .tt-search-dropdown__title { font-size: 12px; }
}

.tt-search-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-search-tag {
  font-size: 12px;
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.tt-search-tag:hover {
  background: rgba(216,180,106,.2);
  color: var(--gold);
  border-color: rgba(216,180,106,.4);
}

/* Hero topic tags (below CTAs) */
.tt-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tt-hero-tag {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tt-hero-tag:hover {
  color: var(--gold);
  border-color: rgba(216,180,106,.4);
  background: rgba(216,180,106,.08);
}

/* Hero media collage */
.tt-hero-collage {
  position: relative;
  height: 520px;
  width: 100%;
}

/* Video — trái trên, điểm nhấn chính */
.tt-collage-video {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(64% - 8px);
  height: 340px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 0 0 1.5px rgba(216,180,106,.25);
  cursor: pointer;
  z-index: 1;
}
.tt-collage-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.tt-collage-video:hover img { transform: scale(1.03); }
.tt-collage-video__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,43,95,.12) 0%, rgba(6,43,95,.72) 100%);
}
.tt-collage-video__info {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
}
.tt-collage-video__type {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold);
  background: rgba(6,43,95,.7);
  border: 1px solid rgba(216,180,106,.4);
  border-radius: 20px;
  padding: 2px 10px;
  display: inline-block;
  margin-bottom: 6px;
  backdrop-filter: blur(8px);
}
.tt-collage-video__title {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
}
.tt-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(8px);
}
.tt-play-btn:hover {
  background: rgba(216,180,106,.3);
  border-color: var(--gold);
  transform: translate(-50%, -50%) scale(1.1);
}

/* Podcast — phải trên */
.tt-collage-podcast {
  position: absolute;
  top: 0;
  right: 0;
  width: 36%;
  height: 254px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--navy-dark);
  border: 1px solid rgba(216,180,106,.22);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.tt-collage-podcast__img {
  width: 100%;
  height: 138px;
  flex-shrink: 0;
  overflow: hidden;
}
.tt-collage-podcast__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tt-collage-podcast__body { padding: 12px 16px; flex: 1; }
.tt-collage-podcast__badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 4px;
}
.tt-collage-podcast__title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  line-height: 1.4;
  margin-bottom: 4px;
}
.tt-collage-podcast__meta { font-size: 11px; color: rgba(255,255,255,.45); }
.tt-collage-podcast__waveform {
  margin-top: 8px;
  height: 4px;
  background: rgba(255,255,255,.12);
  border-radius: 2px;
  overflow: hidden;
}
.tt-collage-podcast__bar { width: 42%; height: 100%; background: var(--gold); border-radius: 2px; }

/* Ebook — phải dưới */
.tt-collage-ebook {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 36%;
  height: 254px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--navy-dark);
  border: 1px solid rgba(216,180,106,.22);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  z-index: 2;
}
.tt-collage-ebook__cover {
  width: 100%;
  height: 138px;
  position: relative;
  overflow: hidden;
}
.tt-collage-ebook__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-collage-ebook__cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(3,27,61,.9) 100%);
}
.tt-collage-ebook__body { padding: 10px 16px 14px; }
.tt-collage-ebook__badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 4px;
}
.tt-collage-ebook__title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  line-height: 1.35;
  margin-bottom: 10px;
}
.tt-collage-ebook__btn {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  background: var(--gold);
  border-radius: 8px;
  padding: 6px 12px;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s ease;
}
.tt-collage-ebook__btn:hover { opacity: 0.88; }

/* Bài viết nổi bật — trái dưới, đè nhẹ lên video */
.tt-collage-article {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(64% - 8px);
  height: 192px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(6,43,95,.82);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  z-index: 3;
  display: flex;
}
.tt-collage-article__img {
  width: 160px;
  flex-shrink: 0;
  overflow: hidden;
}
.tt-collage-article__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-collage-article__body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.tt-collage-article__badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.tt-collage-article__title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  line-height: 1.4;
}
.tt-collage-article__meta { font-size: 11px; color: rgba(255,255,255,.45); }

/* ── Stats Bar (reuse dn pattern) ── */
.tt-stats-bar {
  background: var(--navy-dark);
  border-bottom: 1px solid rgba(216,180,106,.15);
}
.tt-stats-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.tt-stats-bar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tt-stats-bar__num {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.01em;
}
.tt-stats-bar__label { font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: 0.04em; }
.tt-stats-bar__sep { width: 1px; height: 36px; background: rgba(255,255,255,.1); flex-shrink: 0; }

/* ── S1: Categories — Netflix poster ── */
.tt-categories { background: #fff; }
.tt-categories__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
}
.tt-categories__controls { display: flex; gap: 8px; }
.tt-cat-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #DDE3EE;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(6,43,95,.08);
}
.tt-cat-btn:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; transform: scale(1.08); }
.tt-cat-btn:disabled { opacity: 0.3; cursor: default; }
.tt-cat-track-wrap { overflow: hidden; }
.tt-cat-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 4px 20px;
}
.tt-cat-track::-webkit-scrollbar { display: none; }
.tt-cat-card {
  flex: 0 0 260px;
  height: 380px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(6,43,95,.12);
  opacity: 0;
  transform: translateY(20px);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.tt-cat-card.in-view {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease calc(var(--ci, 0) * 80ms), transform 0.5s ease calc(var(--ci, 0) * 80ms), box-shadow 0.3s ease;
}
.tt-cat-card:hover { box-shadow: 0 20px 56px rgba(6,43,95,.25); }
.tt-cat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.tt-cat-card:hover img { transform: scale(1.07); }
.tt-cat-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,43,95,.1) 0%, rgba(6,43,95,.85) 60%, rgba(3,27,61,.95) 100%);
  transition: background 0.3s ease;
}
.tt-cat-card:hover .tt-cat-card__overlay {
  background: linear-gradient(180deg, rgba(6,43,95,.25) 0%, rgba(6,43,95,.9) 55%, rgba(3,27,61,.97) 100%);
}
.tt-cat-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px;
}
.tt-cat-card__icon { font-size: 28px; display: block; margin-bottom: 8px; }
.tt-cat-card__count {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tt-cat-card__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin-bottom: 10px;
}
.tt-cat-card__desc {
  font-size: 12.5px;
  color: rgba(255,255,255,.7);
  line-height: 1.55;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-cat-card__btn {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s ease;
}
.tt-cat-card:hover .tt-cat-card__btn { color: #fff; }

/* ── S2: Editorial masonry ── */
.tt-editorial { background: #F6F8FC; }
.tt-editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: 20px;
}
/* large card spans col1 + rows 1-2 */
.tt-editorial-card--large {
  grid-column: 1;
  grid-row: 1 / 3;
}
/* wide card spans all 3 cols */
.tt-editorial-card--wide {
  grid-column: 1 / 4;
}
.tt-editorial-card {
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid #EEF1F8;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(6,43,95,.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.tt-editorial-card:hover {
  box-shadow: 0 16px 48px rgba(6,43,95,.12);
  transform: translateY(-4px);
}
.tt-editorial-card__img {
  position: relative;
  height: 280px;
  overflow: hidden;
}
.tt-editorial-card__img--sm { height: 180px; }
.tt-editorial-card__img--md { height: 200px; }
.tt-editorial-card__img--wide { height: 220px; }
.tt-editorial-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.tt-editorial-card:hover .tt-editorial-card__img img { transform: scale(1.05); }
.tt-editorial-card__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,43,95,.5) 100%);
}
.tt-editorial-card__type-badge {
  position: absolute;
  top: 12px;
  left: 14px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  background: rgba(6,43,95,.75);
  border: 1px solid rgba(216,180,106,.4);
  border-radius: 20px;
  padding: 3px 10px;
  text-transform: uppercase;
}
.tt-editorial-card__body { padding: 20px 22px 24px; }
.tt-editorial-card__body--sm { padding: 14px 16px 18px; }
.tt-editorial-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.tt-editorial-card__cat {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(216,180,106,.1);
  border-radius: 20px;
  padding: 2px 10px;
}
.tt-editorial-card__time {
  font-size: 11px;
  color: var(--text-light);
}
.tt-editorial-card__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 10px;
}
.tt-editorial-card--small .tt-editorial-card__title { font-size: 14px; margin-bottom: 8px; }
.tt-editorial-card__desc {
  font-size: 13.5px;
  color: var(--text-light);
  line-height: 1.65;
  margin-bottom: 16px;
}
.tt-editorial-card__btn {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}
.tt-editorial-card__btn:hover { color: var(--gold); }
.tt-editorial-card__btn-sm {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
}
.tt-editorial-card__btn-sm:hover { color: var(--navy); }

/* wide card layout override */
.tt-editorial-card--wide .tt-editorial-card__body {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 0 24px;
  align-items: start;
}
.tt-editorial-card--wide .tt-editorial-card__meta { grid-column: 1 / 3; }
.tt-editorial-card--wide .tt-editorial-card__title { grid-column: 1; }
.tt-editorial-card--wide .tt-editorial-card__desc { grid-column: 1; }
.tt-editorial-card--wide .tt-editorial-card__btn { grid-column: 1; }

/* ── S3: Video & Podcast ── */
.tt-media-section {
  background: var(--navy-dark);
  padding: 80px 0;
}
.tt-media-section__head { margin-bottom: 48px; }
.tt-media-section__label { background: rgba(216,180,106,.18) !important; color: var(--gold) !important; }
.tt-media-section__title { color: #fff; }
.tt-media-section__sub { color: rgba(255,255,255,.6); }

/* Video hero */
.tt-video-hero { margin-bottom: 32px; }
.tt-video-hero__img {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 420px;
  cursor: pointer;
}
.tt-video-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.tt-video-hero__img:hover img { transform: scale(1.03); }
.tt-video-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,43,95,.2) 0%, rgba(3,27,61,.85) 100%);
}
.tt-video-hero__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 2.5px solid rgba(255,255,255,.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(8px);
}
.tt-video-hero__img:hover .tt-video-hero__play {
  background: rgba(216,180,106,.3);
  border-color: var(--gold);
  transform: translate(-50%, -50%) scale(1.1);
}
.tt-video-hero__info {
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
}
.tt-video-hero__badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  background: rgba(6,43,95,.7);
  border: 1px solid rgba(216,180,106,.4);
  border-radius: 20px;
  padding: 3px 12px;
  margin-bottom: 10px;
}
.tt-video-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 12px;
}
.tt-video-hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.7);
}
.tt-video-hero__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.3);
}
.tt-video-hero__dot { color: rgba(255,255,255,.35); }

/* Video grid */
.tt-video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.tt-video-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  overflow: hidden;
  transition: background 0.3s ease, transform 0.3s ease;
}
.tt-video-card:hover {
  background: rgba(255,255,255,.1);
  transform: translateY(-4px);
}
.tt-video-card__thumb {
  position: relative;
  height: 160px;
  overflow: hidden;
}
.tt-video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.tt-video-card:hover .tt-video-card__thumb img { transform: scale(1.06); }
.tt-video-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(6,43,95,.6) 100%);
}
.tt-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tt-video-card:hover .tt-video-card__play {
  background: rgba(216,180,106,.3);
  border-color: var(--gold);
  transform: translate(-50%, -50%) scale(1.1);
}
.tt-video-card__duration {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.5);
  border-radius: 4px;
  padding: 2px 6px;
}
.tt-video-card__body { padding: 14px 16px 18px; }
.tt-video-card__type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 6px;
}
.tt-video-card__title {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-video-card__meta { font-size: 11px; color: rgba(255,255,255,.45); }

/* Podcast strip */
.tt-podcast-strip { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 24px 28px; }
.tt-podcast-strip__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tt-podcast-strip__label { font-family: var(--font-heading); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase; }
.tt-podcast-strip__all { font-size: 13px; color: rgba(255,255,255,.6); text-decoration: none; transition: color 0.2s; }
.tt-podcast-strip__all:hover { color: var(--gold); }
.tt-podcast-list { display: flex; flex-direction: column; gap: 0; }
.tt-podcast-ep {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tt-podcast-ep:last-child { border-bottom: none; }
.tt-podcast-ep__cover {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  border: 1px solid rgba(216,180,106,.2);
}
.tt-podcast-ep__body { flex: 1; }
.tt-podcast-ep__num {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 3px;
}
.tt-podcast-ep__title { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.9); line-height: 1.4; margin-bottom: 3px; }
.tt-podcast-ep__meta { font-size: 11px; color: rgba(255,255,255,.45); }
.tt-podcast-ep__play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(216,180,106,.15);
  border: 1px solid rgba(216,180,106,.4);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.tt-podcast-ep__play:hover { background: rgba(216,180,106,.3); }

/* ── S4: Case Studies ── */
.tt-cases { background: #fff; }
.tt-cases__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
}
.tt-cases__controls { display: flex; gap: 8px; }
.tt-case-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #DDE3EE;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(6,43,95,.08);
}
.tt-case-btn:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; transform: scale(1.08); }
.tt-case-btn:disabled { opacity: 0.3; cursor: default; }
.tt-case-track-wrap { overflow: hidden; }
.tt-case-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 4px 20px;
}
.tt-case-track::-webkit-scrollbar { display: none; }
.tt-case-card {
  flex: 0 0 calc(50% - 12px);
  min-width: 300px;
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid #EEF1F8;
  box-shadow: 0 2px 16px rgba(6,43,95,.06);
  scroll-snap-align: start;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  display: flex;
}
.tt-case-card:hover { box-shadow: 0 16px 48px rgba(6,43,95,.12); transform: translateY(-4px); }
.tt-case-card__img {
  flex: 0 0 200px;
  position: relative;
  overflow: hidden;
}
.tt-case-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.tt-case-card:hover .tt-case-card__img img { transform: scale(1.06); }
.tt-case-card__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6,43,95,.4) 0%, transparent 60%);
}
.tt-case-card__role-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(6,43,95,.75);
  border: 1px solid rgba(216,180,106,.3);
  border-radius: 20px;
  padding: 2px 10px;
}
.tt-case-card__body { padding: 20px 22px 24px; flex: 1; }
.tt-case-card__result-chip {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: var(--navy);
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 3px 12px;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.tt-case-card__name {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.tt-case-timeline { display: flex; flex-direction: column; gap: 12px; }
.tt-case-timeline__item { display: flex; gap: 12px; align-items: flex-start; }
.tt-case-timeline__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.tt-case-timeline__dot--problem { background: #E74C3C; }
.tt-case-timeline__dot--solution { background: var(--gold); }
.tt-case-timeline__dot--result { background: #27AE60; }
.tt-case-timeline__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 3px;
}
.tt-case-timeline__text { font-size: 12.5px; color: var(--text-light); line-height: 1.55; margin: 0; }

/* ── S5: Library bookshelf ── */
.tt-library { background: #F6F8FC; }
.tt-shelf-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}
.tt-shelf-tag {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
  background: #fff;
  border: 1.5px solid #DDE3EE;
  border-radius: 20px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tt-shelf-tag:hover, .tt-shelf-tag--active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.tt-shelf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.tt-book {
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(20px);
}
.tt-book.in-view {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease calc(var(--bi, 0) * 80ms), transform 0.5s ease calc(var(--bi, 0) * 80ms);
}
.tt-book__cover {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 240px;
  box-shadow: 0 12px 32px rgba(6,43,95,.15), 8px 8px 0 rgba(6,43,95,.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}
.tt-book:hover .tt-book__cover {
  box-shadow: 0 20px 48px rgba(6,43,95,.22), 12px 12px 0 rgba(6,43,95,.12);
  transform: translateY(-4px) rotate(-1deg);
}
.tt-book__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.tt-book:hover .tt-book__cover img { transform: scale(1.06); }
.tt-book__cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(6,43,95,.75) 100%);
}
.tt-book__type-tag {
  position: absolute;
  top: 12px;
  left: 14px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gold);
  background: rgba(6,43,95,.8);
  border: 1px solid rgba(216,180,106,.4);
  border-radius: 20px;
  padding: 3px 10px;
}
.tt-book__spine {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.1) 100%);
}
.tt-book__info {}
.tt-book__cat {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.tt-book__title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 8px;
}
.tt-book__meta { font-size: 12px; color: var(--text-light); margin-bottom: 12px; }
.tt-book__dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
  background: rgba(6,43,95,.07);
  border: 1.5px solid rgba(6,43,95,.15);
  border-radius: 8px;
  padding: 7px 14px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tt-book__dl-btn:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ── S6: FAQ ── */
.tt-faq { background: #fff; }
.tt-faq-inner {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 64px;
  align-items: start;
}
.tt-faq-left {}
.tt-faq-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 900;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 12px 0 32px;
}
.tt-faq-list { display: flex; flex-direction: column; gap: 0; }
.tt-faq-item {
  border-bottom: 1px solid #EEF1F8;
}
.tt-faq-item--open .tt-faq-item__q { color: var(--navy); }
.tt-faq-item--open .tt-faq-item__icon { transform: rotate(0deg); color: var(--gold); }
.tt-faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 18px 0;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  text-align: left;
  line-height: 1.4;
  transition: color 0.2s ease;
}
.tt-faq-item__q:hover { color: var(--gold); }
.tt-faq-item__icon {
  flex-shrink: 0;
  transition: transform 0.3s ease, color 0.2s ease;
  color: var(--text-light);
  transform: rotate(180deg);
}
.tt-faq-item--open .tt-faq-item__icon { transform: rotate(0deg); }
.tt-faq-item__a { padding-bottom: 18px; }
.tt-faq-item__a p { font-size: 14px; color: var(--text-light); line-height: 1.7; margin: 0 0 12px; }
.tt-faq-item__a p:last-child { margin-bottom: 0; }
.tt-faq-item__img-strip {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.tt-faq-item__img-strip img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

/* FAQ image stack */
.tt-faq-right { position: sticky; top: 100px; }
.tt-faq-img-stack { position: relative; height: 440px; }
.tt-faq-img-stack__main {
  position: absolute;
  inset: 24px 0 0 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 56px rgba(6,43,95,.18);
}
.tt-faq-img-stack__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-faq-img-stack__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(6,43,95,.6) 100%);
}
.tt-faq-img-stack__badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(6,43,95,.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(216,180,106,.3);
  border-radius: 12px;
  padding: 10px 16px;
}
.tt-faq-img-stack__badge strong {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 900;
  color: var(--gold);
  display: block;
  line-height: 1;
}
.tt-faq-img-stack__badge span { font-size: 11px; color: rgba(255,255,255,.7); }
.tt-faq-img-stack__sm {
  position: absolute;
  width: 120px;
  height: 90px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  border: 2.5px solid #fff;
}
.tt-faq-img-stack__sm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-faq-img-stack__sm--tr { top: 0; right: -10px; }
.tt-faq-img-stack__sm--bl { bottom: 20px; right: 20px; }

/* ── S7: Newsletter ── */
.tt-newsletter {
  background: #F6F8FC;
  padding: 80px 0;
}
.tt-newsletter__inner {
  display: grid;
  grid-template-columns: 52% 48%;
  gap: 64px;
  align-items: center;
}
.tt-newsletter__badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(216,180,106,.1);
  border: 1px solid rgba(216,180,106,.3);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 16px;
}
.tt-newsletter__title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 900;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 16px;
}
.tt-newsletter__lead {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.75;
  margin-bottom: 20px;
}
.tt-newsletter__perks {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tt-newsletter__perks li {
  font-size: 13.5px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tt-newsletter__perks li::before {
  content: '✓';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(216,180,106,.15);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tt-newsletter__form { margin-bottom: 24px; }
.tt-newsletter__input-row {
  display: flex;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #DDE3EE;
  border-radius: 14px;
  padding: 6px 6px 6px 16px;
  transition: border-color 0.2s ease;
}
.tt-newsletter__input-row:focus-within { border-color: var(--gold); }
.tt-newsletter__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--navy);
}
.tt-newsletter__input::placeholder { color: var(--text-light); }
.tt-newsletter__avatars {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tt-newsletter__avatars img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  object-fit: cover;
  margin-left: -8px;
  box-shadow: 0 2px 8px rgba(6,43,95,.1);
}
.tt-newsletter__avatars img:first-child { margin-left: 0; }
.tt-newsletter__avatar-count {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  margin-left: 4px;
}
.tt-newsletter__avatar-text { font-size: 12px; color: var(--text-light); }

/* Phone mockup */
.tt-newsletter-phone { position: relative; display: flex; justify-content: center; }
.tt-newsletter-phone__frame {
  width: 280px;
  background: var(--navy);
  border-radius: 36px;
  padding: 12px;
  box-shadow: 0 32px 80px rgba(6,43,95,.3), 0 0 0 1.5px rgba(216,180,106,.25);
  position: relative;
  z-index: 1;
}
.tt-newsletter-phone__notch {
  width: 80px;
  height: 22px;
  background: #000;
  border-radius: 0 0 12px 12px;
  margin: 0 auto 8px;
}
.tt-newsletter-phone__screen {
  background: #0F1923;
  border-radius: 28px;
  overflow: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tt-newsletter-phone__header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tt-newsletter-phone__app-icon { font-size: 28px; }
.tt-newsletter-phone__app-name {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.tt-newsletter-phone__app-sub { font-size: 10px; color: rgba(255,255,255,.5); }
.tt-newsletter-phone__notif {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.tt-newsletter-phone__notif-img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.tt-newsletter-phone__notif-img img { width: 100%; height: 100%; object-fit: cover; }
.tt-newsletter-phone__notif-title { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.4; margin-bottom: 2px; }
.tt-newsletter-phone__notif-meta { font-size: 10px; color: rgba(255,255,255,.45); }
.tt-newsletter-phone__article {}
.tt-newsletter-phone__article-img { width: 100%; height: 100px; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 8px; }
.tt-newsletter-phone__article-cat { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.tt-newsletter-phone__article-title { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9); line-height: 1.4; }
.tt-newsletter-phone__podcast {
  background: rgba(216,180,106,.1);
  border: 1px solid rgba(216,180,106,.3);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tt-newsletter-phone__podcast-play {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--navy);
}
.tt-newsletter-phone__podcast-title { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.9); margin-bottom: 4px; }
.tt-newsletter-phone__podcast-bar { height: 3px; background: rgba(255,255,255,.15); border-radius: 3px; position: relative; }
.tt-newsletter-phone__podcast-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 42%;
  background: var(--gold);
  border-radius: 3px;
}
.tt-newsletter-phone__glow {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 40px;
  background: radial-gradient(ellipse, rgba(216,180,106,.4) 0%, transparent 70%);
  pointer-events: none;
}

/* ── CTA Bottom ── */
.tt-cta-bottom {
  background: var(--navy);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
.tt-cta-bottom__deco {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 600px at 30% 50%, rgba(13,59,140,.5) 0%, transparent 70%),
    radial-gradient(circle 400px at 80% 20%, rgba(216,180,106,.06) 0%, transparent 60%);
  pointer-events: none;
}
.tt-cta-bottom__inner {
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.tt-cta-bottom__heading {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.5vw, 38px);
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.tt-cta-bottom__lead {
  font-size: 15px;
  color: rgba(255,255,255,.7);
  line-height: 1.75;
  margin-bottom: 32px;
}
.tt-cta-bottom__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.tt-cta-bottom__trust {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tt-cta-bottom__trust-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tt-cta-bottom__trust-item strong {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.tt-cta-bottom__trust-item span { font-size: 12px; color: rgba(255,255,255,.55); }
.tt-cta-bottom__trust-sep { width: 1px; height: 32px; background: rgba(255,255,255,.12); }

/* Photo stack */
.tt-cta-bottom__right {}
.tt-cta-bottom__img-stack { position: relative; height: 480px; }
.tt-cta-bottom__img-main {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
.tt-cta-bottom__img-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-cta-bottom__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,43,95,.5) 100%);
}
.tt-cta-bottom__img-float {
  position: absolute;
  border-radius: 14px;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 32px rgba(0,0,0,.3);
}
.tt-cta-bottom__img-float img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-cta-bottom__img-float--tr { width: 140px; height: 110px; top: -16px; right: -16px; animation: floatY 4s ease-in-out infinite; }
.tt-cta-bottom__img-float--bl { width: 120px; height: 96px; bottom: 60px; left: -16px; animation: floatY 5s ease-in-out 1s infinite; }
.tt-cta-bottom__img-float--br { width: 110px; height: 88px; bottom: -16px; right: 24px; animation: floatY 6s ease-in-out 2s infinite; }

/* ── Tablet ≤ 1023px ── */
@media (max-width: 1023px) {
  .tt-hero-collage { height: 400px; }
  .tt-collage-video { height: 260px; }
  .tt-collage-podcast { height: 193px; }
  .tt-collage-podcast__img { height: 110px; }
  .tt-collage-ebook { height: 193px; }
  .tt-collage-ebook__cover { height: 110px; }
  .tt-collage-article { height: 148px; }
  .tt-collage-article__img { width: 110px; }
  .tt-collage-article__title { font-size: 13px; }

  .tt-categories__head { flex-direction: column; align-items: flex-start; gap: 16px; }

  .tt-editorial-grid { grid-template-columns: 1fr 1fr; }
  .tt-editorial-card--large { grid-column: 1 / 3; grid-row: 1; }
  .tt-editorial-card--large .tt-editorial-card__img { height: 280px; }
  .tt-editorial-card--wide { grid-column: 1 / 3; }

  .tt-video-grid { grid-template-columns: repeat(2, 1fr); }

  .tt-case-card { flex: 0 0 calc(80% - 12px); }

  .tt-shelf-grid { grid-template-columns: repeat(2, 1fr); }

  .tt-faq-inner { grid-template-columns: 1fr; gap: 48px; }
  .tt-faq-right { position: static; }

  .tt-newsletter__inner { grid-template-columns: 1fr; gap: 48px; }
  .tt-newsletter-phone__frame { width: 240px; }

  .tt-cta-bottom__inner { grid-template-columns: 1fr; gap: 48px; }
  .tt-cta-bottom { padding: 72px 0; }
  .tt-cta-bottom__img-stack { height: 360px; }
}

/* ── Mobile ≤ 767px ── */
@media (max-width: 767px) {
  .tt-hero-collage { height: 280px; }
  .tt-collage-video { width: 100%; height: 100%; }
  .tt-collage-podcast {
    top: auto;
    bottom: 12px;
    right: 12px;
    width: 170px;
    height: auto;
    background: rgba(3,27,61,.9);
    backdrop-filter: blur(10px);
    border-radius: 14px;
  }
  .tt-collage-podcast__img { display: none; }
  .tt-collage-podcast__body { padding: 10px 12px; }
  .tt-collage-ebook { display: none; }
  .tt-collage-article { display: none; }
  .tt-search-bar__btn { display: none; }
  .tt-hero-tags { gap: 6px; }
  .tt-hero-tag { font-size: 11px; padding: 4px 12px; }

  .tt-cat-card { flex: 0 0 220px; height: 320px; }
  .tt-categories__controls { display: none; }

  .tt-editorial-grid { grid-template-columns: 1fr; }
  .tt-editorial-card--large { grid-column: 1; grid-row: auto; }
  .tt-editorial-card--large .tt-editorial-card__img { height: 220px; }
  .tt-editorial-card--wide { grid-column: 1; }
  .tt-editorial-card--wide .tt-editorial-card__body { grid-template-columns: 1fr; }
  .tt-editorial-card--wide .tt-editorial-card__meta,
  .tt-editorial-card--wide .tt-editorial-card__title,
  .tt-editorial-card--wide .tt-editorial-card__desc,
  .tt-editorial-card--wide .tt-editorial-card__btn { grid-column: 1; }

  .tt-video-hero__img { height: 260px; }
  .tt-video-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tt-video-card__thumb { height: 120px; }
  .tt-podcast-strip { padding: 16px; }

  .tt-case-card { flex: 0 0 93%; flex-direction: column; }
  .tt-case-card__img { flex: none; height: 180px; }
  .tt-case-btn { display: none; }

  .tt-shelf-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .tt-book__cover { height: 180px; }

  .tt-faq-inner { grid-template-columns: 1fr; gap: 32px; }
  .tt-faq-img-stack { height: 280px; }
  .tt-faq-img-stack__sm { display: none; }

  .tt-newsletter__inner { grid-template-columns: 1fr; gap: 40px; }
  .tt-newsletter__input-row { flex-direction: column; padding: 12px; }
  .tt-newsletter-phone__frame { width: 220px; }
  .tt-newsletter { padding: 56px 0; }

  .tt-cta-bottom { padding: 56px 0; }
  .tt-cta-bottom__inner { grid-template-columns: 1fr; gap: 40px; }
  .tt-cta-bottom__actions { flex-direction: column; }
  .tt-cta-bottom__img-stack { height: 260px; }
  .tt-cta-bottom__img-float--tr { width: 100px; height: 80px; top: -8px; right: -8px; }
  .tt-cta-bottom__img-float--bl { width: 90px; height: 72px; bottom: 30px; left: -8px; }
  .tt-cta-bottom__img-float--br { display: none; }
}

/* ══════════════════════════════════════════════════════
   GLOBAL ACCESSIBILITY — added QA pass
══════════════════════════════════════════════════════ */

/* Keyboard focus: catch-all for any button not covered by variant-level :focus-visible */
.btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* Reduced motion: disable all scroll-reveal and card animations */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in-view {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .cg-net-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .cg-net-card.in-view {
    animation: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   LANDING PAGES (khoa-*.html) — Course Detail Pages
   Prefix: lp-  |  Navy · Gold · White design system
═══════════════════════════════════════════════════════════ */

/* ── LP Hero ── */
.lp-hero {
  position: relative; background: var(--navy-dark);
  overflow: hidden; color: #fff;
  padding: clamp(52px,6vw,72px) 0 clamp(36px,4vw,52px);
}
.lp-hero__deco {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 75% 15%, rgba(216,180,106,.15) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 85%, rgba(13,59,140,.35) 0%, transparent 55%);
}
.lp-hero--enterprise .lp-hero__deco {
  background:
    radial-gradient(ellipse at 80% 10%, rgba(216,180,106,.22) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 90%, rgba(3,27,61,.55) 0%, transparent 55%);
}
.lp-hero--elite .lp-hero__deco {
  background:
    radial-gradient(ellipse at 85% 5%, rgba(216,180,106,.28) 0%, transparent 45%),
    radial-gradient(ellipse at 5% 95%, rgba(3,27,61,.65) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(13,59,140,.1) 0%, transparent 70%);
}
.lp-hero__inner { position: relative; z-index: 2; max-width: 780px; }
.lp-hero__badge {
  display: inline-block;
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(216,180,106,.45);
  padding: 5px 16px; border-radius: 100px; margin-bottom: 20px;
}
.lp-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 40px); font-weight: 800;
  line-height: 1.1; color: #fff; letter-spacing: -.015em;
  margin: 0 0 12px;
}
.lp-hero__title em { color: var(--gold); font-style: normal; display: block; }
.lp-hero__sub {
  font-family: var(--font-heading);
  font-size: clamp(13px, 1.1vw, 15px); font-weight: 600;
  color: rgba(255,255,255,.85); line-height: 1.55; margin: 0 0 14px;
}
.lp-hero__desc {
  font-size: clamp(14px, 1.1vw, 15.5px); color: rgba(255,255,255,.7);
  line-height: 1.8; margin: 0 0 28px; max-width: 680px;
}
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.lp-hero__video-stub {
  width: 100%; max-width: 580px; aspect-ratio: 16/9;
  border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px; cursor: pointer;
  margin-top: 36px; position: relative;
}
.lp-hero__video-stub img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .35;
}
.lp-hero__video-play {
  position: relative; z-index: 2;
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(216,180,106,.9);
  display: flex; align-items: center; justify-content: center;
  transition: transform .22s ease, background .22s ease;
}
.lp-hero__video-stub:hover .lp-hero__video-play { transform: scale(1.1); background: var(--gold); }
.lp-hero__video-label {
  position: relative; z-index: 2;
  font-family: var(--font-heading); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7);
}

/* LP Price Box (hero) */
.lp-price-box {
  display: inline-flex; align-items: flex-start; gap: 24px; flex-wrap: wrap;
  background: rgba(255,255,255,.07); border: 1px solid rgba(216,180,106,.3);
  border-radius: 14px; padding: 18px 24px; margin-bottom: 26px;
}
.lp-price-box__main { display: flex; flex-direction: column; gap: 3px; }
.lp-price-box__label {
  font-family: var(--font-heading); font-size: 9px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.lp-price-box__value {
  font-family: var(--font-heading); font-size: 26px; font-weight: 800;
  color: var(--gold); letter-spacing: -.01em;
}
.lp-price-box__includes { display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
.lp-price-box__includes li {
  font-size: 12.5px; color: rgba(255,255,255,.65); line-height: 1.5;
  list-style: none; display: flex; align-items: flex-start; gap: 7px;
}
.lp-price-box__includes li::before {
  content: ''; width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8B46A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── LP Breadcrumb ── */
.lp-breadcrumb { background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.1); padding: 12px 0; }
.lp-breadcrumb__inner {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-size: 11.5px; color: rgba(255,255,255,.5);
}
.lp-breadcrumb__link { color: rgba(255,255,255,.45); text-decoration: none; transition: color .2s; }
.lp-breadcrumb__link:hover { color: var(--gold); }
.lp-breadcrumb__sep { color: rgba(255,255,255,.28); }
.lp-breadcrumb__current { color: rgba(255,255,255,.8); }

/* ── LP Common Section ── */
.lp-section { padding: clamp(56px,8vw,96px) 0; }
.lp-section--light { background: var(--gray-light); }
.lp-section--navy { background: var(--navy); color: #fff; }
.lp-section-intro { margin-bottom: 44px; }
.lp-section-intro--center { text-align: center; }
.lp-section-label {
  display: inline-block;
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.lp-section--navy .lp-section-label { color: var(--gold); }
.lp-section-title {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.6vw, 34px); font-weight: 800;
  color: var(--navy); line-height: 1.2; margin: 0 0 12px; letter-spacing: -.01em;
}
.lp-section--navy .lp-section-title { color: #fff; }
.lp-section-lead {
  font-size: clamp(14px, 1.05vw, 16px); color: var(--text-light);
  line-height: 1.75; max-width: 640px;
}
.lp-section-intro--center .lp-section-lead { margin-inline: auto; }
.lp-section--navy .lp-section-lead { color: rgba(255,255,255,.7); }
.lp-section-body { font-size: 15px; color: var(--text-light); line-height: 1.78; }
.lp-section--navy .lp-section-body { color: rgba(255,255,255,.72); }

/* ── LP Check Items ── */
.lp-checks { display: flex; flex-direction: column; gap: 12px; }
.lp-checks--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-check {
  display: flex; align-items: flex-start; gap: 13px;
  background: #fff; border: 1px solid var(--gray-mid);
  border-radius: 12px; padding: 15px 18px;
}
.lp-section--light .lp-check { background: #fff; }
.lp-check__icon {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8B46A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lp-check__icon--q {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.lp-check__text { font-size: 14.5px; color: var(--text); line-height: 1.6; }
.lp-check--navy { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); }
.lp-check--navy .lp-check__text { color: rgba(255,255,255,.85); }

/* ── LP Outcomes Grid ── */
.lp-outcomes-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.lp-outcome-card {
  background: #fff; border: 1px solid var(--gray-mid);
  border-radius: 16px; padding: 26px 24px;
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.lp-outcome-card:hover {
  box-shadow: 0 8px 32px rgba(6,43,95,.09);
  transform: translateY(-2px); border-color: rgba(216,180,106,.45);
}
.lp-outcome-card__num {
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 8px; display: block;
}
.lp-outcome-card__title {
  font-family: var(--font-heading); font-size: 15px; font-weight: 700;
  color: var(--navy); margin: 0 0 7px;
}
.lp-outcome-card__desc { font-size: 13.5px; color: var(--text-light); line-height: 1.68; margin: 0; }

/* ── LP Audience Pills ── */
.lp-audience-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-audience-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-light); border: 1px solid rgba(216,180,106,.4);
  border-radius: 100px; padding: 8px 18px;
  font-family: var(--font-heading); font-size: 13px; font-weight: 600; color: var(--navy);
}
.lp-audience-pill__icon {
  width: 15px; height: 15px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8B46A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── LP Curriculum (accordion) ── */
.lp-curriculum-list { display: flex; flex-direction: column; gap: 12px; }
.lp-curriculum-item {
  background: #fff; border: 1px solid var(--gray-mid); border-radius: 14px; overflow: hidden;
}
.lp-curriculum-header {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; cursor: pointer; user-select: none;
  transition: background .2s ease;
}
.lp-curriculum-header:hover { background: var(--gray-light); }
.lp-curriculum-num {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
}
.lp-curriculum-title {
  font-family: var(--font-heading); font-size: 14.5px; font-weight: 600;
  color: var(--navy); margin: 0; flex: 1;
}
.lp-curriculum-arrow {
  width: 18px; height: 18px; flex-shrink: 0; color: var(--text-light);
  transition: transform .25s ease;
}
.lp-curriculum-item.open .lp-curriculum-arrow { transform: rotate(180deg); }
.lp-curriculum-body {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
  padding: 0 22px 0 72px;
}
.lp-curriculum-item.open .lp-curriculum-body { max-height: 600px; padding-bottom: 20px; }
.lp-curriculum-body p { font-size: 14px; color: var(--text-light); line-height: 1.7; margin: 0 0 8px; }
.lp-curriculum-body ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lp-curriculum-body ul li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; color: var(--text-light); line-height: 1.6;
}
.lp-curriculum-body ul li::before {
  content: ''; width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8B46A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── LP Method Grid ── */
.lp-method-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.lp-method-item {
  background: #fff; border: 1px solid var(--gray-mid);
  border-radius: 14px; padding: 22px 18px;
  text-align: center;
}
.lp-section--light .lp-method-item { background: #fff; }
.lp-method-item__icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.lp-method-item__title {
  font-family: var(--font-heading); font-size: 13.5px; font-weight: 700;
  color: var(--navy); margin: 0 0 5px;
}
.lp-method-item__desc { font-size: 12.5px; color: var(--text-light); line-height: 1.6; margin: 0; }

/* ── LP Instructor ── */
.lp-instructor-grid { display: grid; grid-template-columns: 340px 1fr; gap: 52px; align-items: start; }
.lp-instructor__photo {
  border-radius: 18px; overflow: hidden; aspect-ratio: 3/4;
}
.lp-instructor__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-instructor__label {
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  display: block; margin-bottom: 8px;
}
.lp-instructor__name {
  font-family: var(--font-heading); font-size: clamp(22px,2.5vw,32px);
  font-weight: 800; color: var(--navy); margin: 0 0 4px;
}
.lp-instructor__role {
  font-size: 14.5px; color: var(--text-light); margin: 0 0 18px; font-style: italic;
}
.lp-instructor__bio { font-size: 15px; color: var(--text-light); line-height: 1.78; margin: 0 0 24px; }
.lp-instructor__video-stub {
  border-radius: 12px; overflow: hidden; aspect-ratio: 16/9;
  background: var(--gray-light); border: 1px solid var(--gray-mid);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; position: relative;
}
.lp-instructor__video-stub img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .35;
}
.lp-instructor__video-stub .lp-video-play-btn {
  position: relative; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--gold); display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.lp-instructor__video-stub:hover .lp-video-play-btn { transform: scale(1.1); }

/* ── LP Video Stubs ── */
.lp-video-stub {
  border-radius: 14px; overflow: hidden; aspect-ratio: 16/9;
  background: var(--gray-light); border: 1px solid var(--gray-mid);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; position: relative;
}
.lp-video-stub img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.lp-video-play-btn {
  position: relative; z-index: 2;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--gold); display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.lp-video-stub:hover .lp-video-play-btn { transform: scale(1.08); }
.lp-video-label {
  position: relative; z-index: 2;
  font-family: var(--font-heading); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-light);
}

/* Stories grid */
.lp-stories-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ── LP FAQ ── */
.lp-faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; }
.lp-faq-item { background: #fff; border: 1px solid var(--gray-mid); border-radius: 14px; overflow: hidden; }
.lp-faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px; cursor: pointer; user-select: none;
  font-family: var(--font-heading); font-size: 14.5px; font-weight: 600; color: var(--navy);
  transition: background .2s ease;
}
.lp-faq-question:hover { background: var(--gray-light); }
.lp-faq-arrow {
  width: 18px; height: 18px; flex-shrink: 0; color: var(--gold);
  transition: transform .25s ease;
}
.lp-faq-item.open .lp-faq-arrow { transform: rotate(180deg); }
.lp-faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
  padding: 0 22px;
}
.lp-faq-item.open .lp-faq-answer { max-height: 400px; padding-bottom: 18px; }
.lp-faq-answer p { font-size: 14px; color: var(--text-light); line-height: 1.75; margin: 0; }

/* ── LP Includes List ── */
.lp-includes { display: flex; flex-direction: column; gap: 9px; }
.lp-includes-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; color: var(--text); line-height: 1.6;
}
.lp-includes-item::before {
  content: ''; width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8B46A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lp-section--navy .lp-includes-item { color: rgba(255,255,255,.78); }

/* ── LP Note ── */
.lp-note {
  background: var(--gold-light); border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0; padding: 15px 18px;
  font-size: 13.5px; color: var(--text-light); line-height: 1.65; margin-top: 18px;
}
.lp-note strong { color: var(--navy); }

/* ── LP Two-col ── */
.lp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }

/* ── LP Pricing Card ── */
.lp-pricing-card {
  background: #fff; border: 2px solid rgba(216,180,106,.5);
  border-radius: 20px; padding: 36px 40px;
  box-shadow: 0 8px 40px rgba(6,43,95,.07);
}
.lp-pricing-card__label {
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-light); margin-bottom: 4px;
}
.lp-pricing-card__value {
  font-family: var(--font-heading); font-size: 36px; font-weight: 800;
  color: var(--navy); margin: 0 0 22px; letter-spacing: -.02em;
}
.lp-pricing-card__divider { height: 1px; background: var(--gray-mid); margin-bottom: 22px; }

/* ── LP Final CTA ── */
.lp-cta-final {
  background: var(--navy-dark); color: #fff;
  padding: clamp(64px,9vw,100px) 0;
  position: relative; overflow: hidden; text-align: center;
}
.lp-cta-final__deco {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(216,180,106,.15) 0%, transparent 55%);
}
.lp-cta-final__inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.lp-cta-final__heading {
  font-family: var(--font-heading);
  font-size: clamp(18px,2.5vw,30px); font-weight: 800;
  color: #fff; line-height: 1.25; margin: 0 0 14px; letter-spacing: -.01em;
}
.lp-cta-final__sub {
  font-size: clamp(14px,1.05vw,16px); color: rgba(255,255,255,.7);
  line-height: 1.75; margin: 0 0 26px;
}
.lp-cta-final__price {
  display: flex; flex-direction: column; align-items: center; gap: 3px; margin-bottom: 24px;
}
.lp-cta-final__price-label {
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45);
}
.lp-cta-final__price-value {
  font-family: var(--font-heading); font-size: 32px; font-weight: 800;
  color: var(--gold); letter-spacing: -.01em;
}
.lp-cta-final__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── LP Responsive ── */
@media (max-width: 1023px) {
  .lp-instructor-grid { grid-template-columns: 1fr; gap: 32px; }
  .lp-instructor__photo { aspect-ratio: 16/7; max-width: 480px; }
  .lp-method-grid { grid-template-columns: repeat(2,1fr); }
  .lp-two-col { grid-template-columns: 1fr; gap: 32px; }
  .lp-stories-grid { grid-template-columns: 1fr; }
  .lp-pricing-card { padding: 28px 24px; }
}
@media (max-width: 767px) {
  .lp-hero__actions { flex-direction: column; align-items: flex-start; }
  .lp-hero__actions .btn { width: 100%; text-align: center; }
  .lp-outcomes-grid { grid-template-columns: 1fr; }
  .lp-checks--grid { grid-template-columns: 1fr; }
  .lp-method-grid { grid-template-columns: 1fr; }
  .lp-audience-pill { font-size: 12.5px; }
  .lp-curriculum-body { padding-left: 22px; }
  .lp-cta-final__actions { flex-direction: column; align-items: center; }
  .lp-cta-final__actions .btn { width: 100%; max-width: 320px; text-align: center; }
  .lp-price-box { flex-direction: column; gap: 14px; }
  .lp-hero__video-stub { max-width: 100%; }
  .lp-pricing-card { padding: 24px 20px; }
  .lp-pricing-card__value { font-size: 28px; }
}

/* ==========================================================================
   MOBILE TYPOGRAPHY ENHANCEMENT OVERRIDES
   Goal: Make text and description font-sizes larger and more readable on mobile screens.
   ========================================================================== */
@media (max-width: 767px) {
  /* Increase base font-size */
  body {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
  
  /* Make main paragraphs and common text elements larger */
  p, li, .brand-statement__list li, .brand-statement__body p, .brand-statement__body-full p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  /* Section and Hero Subtitles */
  .section-subtitle, .hero__sub {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  /* Buttons */
  .btn {
    font-size: 15.5px !important;
  }
  
  /* Mobile Header Navigation Link */
  .site-header__mobile-nav-link {
    font-size: 13.5px !important;
    letter-spacing: .02em !important;
  }

  /* Ecosystem insights tags */
  .ecosystem-insight {
    font-size: 13.5px !important;
  }
  @media (max-width: 374px) {
    .ecosystem-insight {
      font-size: 12.5px !important;
    }
  }

  /* Pillar Cards (ecosystem) */
  .pillar-card__desc {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }
  .pillar-card__sub {
    font-size: 12px !important;
  }
  .pillar-card__name {
    font-size: 17px !important;
  }
  .pillar-card__link {
    font-size: 13.5px !important;
  }

  /* Program/Course Cards */
  .program-card__desc {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  .program-card__title {
    font-size: 17px !important;
  }
  .program-card__detail-link {
    font-size: 14px !important;
  }

  /* Article / Blog Cards */
  .article-card__excerpt {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }
  .article-card__title {
    font-size: 17px !important;
  }
  .article-card__date {
    font-size: 13px !important;
  }

  /* Benefit / Outcome Cards */
  .benefit-card__desc, .lr-benefit-card__desc {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }
  .benefit-card__title, .lr-benefit-card__title {
    font-size: 15.5px !important;
  }

  /* FAQ section */
  .faq-question, .lp-faq-question {
    font-size: 15.5px !important;
  }
  .faq-answer p, .lp-faq-answer p {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
  }

  /* Roadmap / Career Steps */
  .career-step__title, .ltr-step__title, .roadmap-step__title {
    font-size: 14.5px !important;
  }
  .career-step__desc, .roadmap-step__desc {
    font-size: 14.5px !important;
  }

  /* Floating CTA bottom bar on mobile */
  .floating-cta__item {
    font-size: 11.5px !important;
  }
  .floating-cta__item span {
    font-size: 10.5px !important;
  }

  /* Footer typography */
  .site-footer p, .site-footer__bottom p, .footer-bottom__links a {
    font-size: 14px !important;
  }
}