/* ============================================================
   SELF-HOSTED FONTS
   Same family names as before, so every font-family rule below is
   unchanged. Replaces the render-blocking Google Fonts <link>.
   Baloo 2 is a variable font: one file covers weights 600-800.
   ============================================================ */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("fonts/baloo2-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("fonts/baloo2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bevietnampro-400-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bevietnampro-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/bevietnampro-500-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/bevietnampro-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/bevietnampro-600-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/bevietnampro-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/bevietnampro-700-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/bevietnampro-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/bevietnampro-800-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/bevietnampro-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   NANCY ENGLISH CENTER

   DESIGN SYSTEM
   -------------
   Palette      ONE brand (blue) + ONE accent (orange). Nothing else.
                The teal / violet / pink accents from the previous build
                are gone on purpose: five competing accents read as a
                template, not as a brand.
   Type         Be Vietnam Pro carries every heading and all body copy.
                Baloo 2 is reserved for the H1 and for display numerals,
                where its rounded warmth is an asset instead of noise.
   Shape        --r-sm inputs · --r-md buttons · --r-lg cards and panels
                --r-pill tags only. No other radii anywhere.
   Elevation    Shadows are tinted with the brand hue, never pure black.
   Theme        One theme for the whole page, following the OS setting.
                No section inverts against its neighbours.
   ============================================================ */

:root {
  color-scheme: light;

  /* Brand: Enterprise Royal Navy */
  --brand: #0e4ea1;          /* solid fills, white text = 8.0:1 */
  --brand-ink: #0e4ea1;      /* brand-coloured text on light surfaces */
  --brand-strong: #0a3b7d;   /* hover state for brand fills */
  --brand-tint: #e4eefa;
  --brand-wash: #f4f8fe;
  --on-brand: #ffffff;

  /* Accent: Energetic Warm Amber */
  --accent: #c24c00;         /* solid fills, white text = 4.8:1 */
  --accent-hover: #A84200;
  --accent-ink: #B04500;     /* accent-coloured text on light surfaces */
  --accent-tint: #fcebdd;
  --accent-wash: #fef7f1;

  /* Surfaces */
  --surface: #ffffff;
  --surface-2: #f6f9fd;
  --surface-3: #e8f0f9;
  --footer-bg: #081c33;
  --footer-text: #b8ccdf;
  --footer-heading: #ffffff;

  /* Text */
  --text: #0f172a;
  --text-2: #3e4e63;
  --text-3: #64748b;
  --danger: #b3261e;

  --line: #e2e8f0;
  --line-2: #cbd5e1;

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Elevation: Multi-layer soft shadows */
  --sh-1: 0 1px 3px rgba(11, 40, 79, 0.05), 0 2px 8px rgba(11, 40, 79, 0.04);
  --sh-2: 0 4px 12px rgba(11, 40, 79, 0.07), 0 12px 28px rgba(11, 40, 79, 0.08);
  --sh-3: 0 12px 32px rgba(11, 40, 79, 0.1), 0 28px 64px rgba(11, 40, 79, 0.12);

  /* Type scale */
  --fs-hero: clamp(2rem, 1.3rem + 2.9vw, 3.05rem);
  --fs-h2: clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem);
  --fs-h3: clamp(1.05rem, 0.98rem + 0.34vw, 1.28rem);
  --fs-lead: clamp(1rem, 0.96rem + 0.22vw, 1.12rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;

  /* Rhythm */
  --wrap: 1280px;
  --gutter: clamp(16px, 3.6vw, 48px);
  --section-y: clamp(28px, 3.2vw, 48px);
  --section-y-mobile: clamp(20px, 5.5vw, 32px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Trang khóa nền sáng theo yêu cầu: đây là trang của một trung tâm tiếng Anh
   thiếu nhi, nền tối làm mất hẳn cảm giác tươi vui. Không có biến thể tối,
   nên toàn trang chỉ còn đúng một chủ đề màu. */

/* ============================================================
   BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto,
    sans-serif;
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--surface);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* The width/height attributes on <img> reserve space against CLS, but they
   also make height definite, which silently cancels every aspect-ratio rule
   below. height:auto hands control back to CSS. */
img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text);
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.wrap {
  width: min(var(--wrap), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 300;
  padding: 10px 18px;
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  transition: top 0.2s var(--ease);
}
.skip-link:focus-visible {
  top: 12px;
}

/* ---------- Shared type ---------- */
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.18;
  color: var(--text);
  text-wrap: balance;
}

.tx-accent {
  color: var(--accent-ink);
}

.lead {
  margin-top: 14px;
  max-width: 56ch;
  color: var(--text-2);
  font-size: var(--fs-lead);
  line-height: 1.7;
}

.section {
  padding: var(--section-y) 0;
}

/* Trước đây cụm tiêu đề bám lề trái trong hộp 62ch, nên nửa phải màn
   hình bỏ trống ở cả 5 section. Canh giữa để tiêu đề chiếm đúng bề
   ngang của nội dung bên dưới. */
.section-head {
  max-width: 62ch;
  margin: 0 auto clamp(28px, 3.2vw, 44px);
  text-align: center;
}
.section-head .lead {
  max-width: 52ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* ============================================================
   BUTTONS
   Every CTA is checked for WCAG AA against its own fill.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  min-height: 46px;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    transform 0.15s var(--ease);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
.btn-ic {
  flex: none;
}

.btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(146, 57, 0, 0.24);
}
.btn-accent:hover {
  background: var(--accent-hover);
  box-shadow: 0 8px 20px rgba(146, 57, 0, 0.3);
}

.btn-brand {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 4px 12px rgba(14, 78, 161, 0.24);
}
.btn-brand:hover {
  background: var(--brand-strong);
  box-shadow: 0 8px 20px rgba(14, 78, 161, 0.3);
}

/* Nút viền: nền trắng, viền xanh navy, đúng như "Xem thông tin" ở hero. */
.btn-ghost {
  background: var(--surface);
  color: var(--brand-ink);
  border-color: var(--brand);
}
.btn-ghost:hover {
  background: var(--brand-wash);
  border-color: var(--brand-strong);
}

.btn-lg {
  padding: 14px 30px;
  min-height: 54px;
  font-size: 1rem;
}
.btn-block {
  width: 100%;
  min-height: 54px;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--sh-1);
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header {
    background: var(--surface);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 36px);
  height: 78px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.brand-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.brand-text strong {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1.15;
  color: var(--brand-ink);
}
.brand-text em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 30px);
  margin-left: auto;
}
.main-nav a {
  position: relative;
  padding: 8px 0;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.main-nav a:hover {
  color: var(--text);
}
.main-nav a:hover::after {
  transform: scaleX(1);
}
.main-nav a[aria-current="page"] {
  color: var(--brand-ink);
  font-weight: 800;
}
.main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--brand-ink);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.header-phone:hover {
  color: var(--accent-ink);
}
.header-cta .btn {
  padding: 11px 20px;
  min-height: 44px;
  font-size: 0.9rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: 9px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  width: 24px;
  height: 2.5px;
  border-radius: 3px;
  background: var(--brand-ink);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ============================================================
   HERO
   Bố cục gốc của site đang chạy: cột chữ bên trái, ảnh học viên tràn
   ra mép phải, dải sóng xanh vắt qua đáy ảnh.
   Lưới ở đây KHÔNG dùng .wrap: cột phải phải chạm mép phải màn hình
   thì ảnh mới tràn được, nên .hero-grid tự quản bề ngang.
   ============================================================ */
.hero {
  position: relative;
  padding-top: 22px;
  background: linear-gradient(
    180deg,
    var(--surface) 0%,
    var(--brand-wash) 58%,
    var(--surface-3) 100%
  );
  overflow: hidden;
}

.hero-grid {
  position: relative;
  display: grid;
  width: min(var(--wrap), calc(100% - 96px));
  margin-inline: auto;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.34fr);
  align-items: center;
  padding-bottom: 12px;
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 590px;
  padding: 8px 34px 34px 0;
  color: var(--text);
}

.hero-title {
  margin-bottom: 14px;
  max-width: 16em;
  font-family: "Baloo 2", "Be Vietnam Pro", sans-serif;
  font-size: clamp(2.1rem, 2.75vw, 2.45rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.highlight-orange {
  display: inline-block;
  margin-top: 2px;
  color: var(--accent-ink);
}

.hero-sub {
  margin-bottom: 20px;
  max-width: 36em;
  color: var(--text-2);
  font-size: 0.96rem;
  line-height: 1.6;
}

.hero-points {
  display: grid;
  gap: 11px;
  margin-bottom: 22px;
}
.hero-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 600;
}
.pt-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
}
.pt-blue {
  background: var(--brand);
}
.pt-orange {
  background: var(--accent);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  align-self: end;
  width: 100%;
}
/* Mép trái ảnh mờ dần để hoà vào nền thay vì cắt thành một đường thẳng. */
.hero-photo-img {
  display: block;
  width: 100%;
  height: 530px;
  object-fit: cover;
  object-position: top center;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 13%,
    #000 100%
  );
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 100%);
}

/* Dải sóng kéo lên đè lên đáy ảnh, nên margin-top âm. */
.hero-wave-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 96px;
  margin-top: -62px;
  pointer-events: none;
}
.hero-wave-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ============================================================
   PROOF BAND
   Bốn số liệu, bày trần không thẻ bọc, ngăn bằng nét mảnh.
   ============================================================ */
.proof {
  padding: clamp(28px, 3.4vw, 44px) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 40px);
}
.proof-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: clamp(18px, 2.4vw, 34px);
  border-left: 1px solid var(--line);
}
.proof-item:first-child {
  padding-left: 0;
  border-left: 0;
}
.proof-value {
  font-family: "Baloo 2", "Be Vietnam Pro", sans-serif;
  font-size: clamp(1.9rem, 1.3rem + 2.1vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}
.proof-value--text {
  font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.75rem);
  line-height: 1.3;
}
.proof-label {
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* ============================================================
   ABOUT
   Editorial two-column: a photo-led statement beside five pillars
   separated by hairlines. Replaces the ten near-duplicate value
   props of the previous build.
   ============================================================ */
.about {
  background: var(--surface);
}
/* Cột trái ngắn hơn hẳn 5 trụ cột bên phải nên đáy trái bỏ trống một
   mảng lớn. Cho cột trái kéo cao bằng cột phải và để tấm ảnh nở ra lấp
   phần dôi ra đó. */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: stretch;
}
.about-lead {
  display: flex;
  flex-direction: column;
}

.about-motto {
  margin-top: 18px;
  color: var(--accent-ink);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.about-figure {
  flex: 1;
  margin: clamp(26px, 3vw, 38px) 0 0;
  min-height: 260px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
}
.about-figure img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.pillars {
  display: grid;
}
.pillar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  padding: clamp(22px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--line);
}
.pillar:first-child {
  border-top: 0;
  padding-top: 0;
}
.pillar-num {
  font-family: "Baloo 2", "Be Vietnam Pro", sans-serif;
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
  color: var(--brand-ink);
  opacity: 0.32;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease);
}
.pillar:hover .pillar-num {
  opacity: 1;
  color: var(--accent-ink);
}
.pillar-body h3 {
  font-size: var(--fs-h3);
  color: var(--text);
}
.pillar-body p {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ============================================================
   COURSES
   ============================================================ */
.courses {
  background: var(--surface-2);
}

/* Đã bỏ tiêu đề nhóm, hàng này giờ chỉ còn cặp nút điều hướng nên
   đẩy hết về phải. Khi carousel không tràn thì toolbar mang thuộc tính
   hidden và hàng này gần như không chiếm chỗ. */
.course-group-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin-bottom: 14px;
}

.course-carousel--extra {
  margin-top: clamp(40px, 5vw, 68px);
}

.course-carousel__toolbar {
  display: flex;
  gap: 8px;
  flex: none;
}
.course-nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--brand-ink);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    transform 0.15s var(--ease), opacity 0.2s var(--ease);
}
.course-nav:hover:not(:disabled) {
  background: var(--brand-tint);
  border-color: var(--brand-ink);
  transform: translateY(-1px);
}
.course-nav:active:not(:disabled) {
  transform: translateY(1px);
}
.course-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.course-track {
  --course-gap: clamp(16px, 1.8vw, 24px);
  display: flex;
  gap: var(--course-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  /* Scrollbar hidden: the prev/next buttons carry the affordance.
     Wheel, touch-drag and keyboard scrolling all still work. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 2px 8px;
}
.course-track::-webkit-scrollbar {
  display: none;
}
.course-track:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--r-md);
}

.course-card {
  flex: 0 0 clamp(272px, 27vw, 336px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.course-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: var(--sh-2);
}
.course-card__media {
  overflow: hidden;
  background: var(--surface-3);
}
.course-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.45s var(--ease);
}
.course-card:hover .course-card__media img {
  transform: scale(1.045);
}
.course-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 24px;
}
.course-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.course-card h4 {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--brand-ink);
}
.course-card__grade {
  flex: none;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.course-card p {
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.65;
}

/* ============================================================
   ENROLMENT PATH
   NOTE: quy trình 4 bước là bản nháp, cần đối chiếu thực tế.
   ============================================================ */
.path {
  background: var(--surface);
}
.path-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 40px);
}
.path-steps::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--line-2);
}
.step {
  position: relative;
}
.step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
  font-family: "Baloo 2", "Be Vietnam Pro", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  box-shadow: 0 0 0 8px var(--surface), 0 6px 16px rgba(14, 78, 161, 0.22);
}
.step-body h3 {
  font-size: var(--fs-h3);
}
.step-body p {
  margin-top: 8px;
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ============================================================
   ACTIVITIES GALLERY
   Mosaic with rhythm: one lead frame, one wide frame, three small.
   Exactly five cells for five photos.
   ============================================================ */
.activities {
  background: var(--surface-2);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(104px, 11.5vw, 152px);
  gap: clamp(12px, 1.4vw, 18px);
}
.gal {
  position: relative;
  margin: 0;
  grid-column: span 1;
  grid-row: span 1;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-3);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.gal--lead {
  grid-column: span 3;
  grid-row: span 3;
}
.gal--wide {
  grid-column: span 3;
  grid-row: span 2;
}
.gal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.gal:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}
.gal:hover img {
  transform: scale(1.05);
}
.gal figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 16px 13px;
  background: linear-gradient(to top, rgba(6, 20, 38, 0.86), transparent);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.gal:hover figcaption,
.gal:focus-visible figcaption {
  opacity: 1;
  transform: none;
}

/* ============================================================
   REGISTER
   The single conversion moment on the page.
   ============================================================ */
.register {
  background: var(--surface-3);
}
.register-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}
.register-media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  aspect-ratio: 4 / 5;
  align-self: start;
}
.register-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.register-panel {
  padding: clamp(20px, 2.6vw, 34px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.register-panel .lead {
  margin-top: 8px;
}

.reg-form {
  margin-top: clamp(14px, 1.8vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.field--full {
  width: 100%;
}
.field label {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
}
.field-optional {
  color: var(--text-3);
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 9px 14px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input,
.field select {
  min-height: 44px;
}
.field textarea {
  resize: vertical;
  min-height: 60px;
}
.field select {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px),
    calc(100% - 15px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-3);
  opacity: 1;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 72%, white);
  outline-offset: 3px;
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-ink) 26%, transparent);
}
.field-hint {
  color: var(--text-3);
  font-size: 0.8rem;
  line-height: 1.5;
}
.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--danger);
  font-size: 0.8rem;
  font-weight: 600;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--danger);
}

/* Honeypot. Moved off-screen rather than display:none, because a fair
   number of bots skip fields that are outright hidden. */
.field-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.reg-form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 2px;
}
.reg-form__aside {
  color: var(--text-3);
  font-size: 0.88rem;
}
.reg-form__aside a {
  color: var(--brand-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn[aria-busy="true"] {
  opacity: 0.75;
  pointer-events: none;
}

.form-status {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  line-height: 1.6;
}
.form-status:empty {
  display: none;
}
.form-status[data-tone="success"] {
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  color: var(--text);
}
.form-status[data-tone="error"] {
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--text);
}

/* ============================================================
   FAQ
   One panel, hairline-divided rows.
   ============================================================ */
.faq {
  background: var(--surface);
}
.faq-list {
  max-width: 980px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.faq-item + .faq-item {
  border-top: 1px solid var(--line);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px clamp(18px, 2.4vw, 28px);
  list-style: none;
  cursor: pointer;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  transition: background 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  background: var(--brand-wash);
}
.faq-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand-ink);
  transition: transform 0.28s var(--ease), background 0.2s var(--ease),
    color 0.2s var(--ease);
}
.faq-item[open] .faq-mark {
  transform: rotate(180deg);
  background: var(--accent);
  color: #fff;
}
.faq-a {
  padding: 0 clamp(18px, 2.4vw, 28px) 22px;
  max-width: 72ch;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.75;
}
.faq-a a {
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  background: var(--surface-2);
}
/* Cột thông tin thấp hơn khung bản đồ, trước đây để lại một khoảng
   trống dưới hai nút. Cho hai cột cao bằng nhau và bốn thẻ nở ra. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: stretch;
}
.contact-left {
  display: flex;
  flex-direction: column;
}
.contact-cards {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
}
/* Thẻ đã kéo cao bằng bản đồ nên nội dung phải canh giữa theo chiều
   dọc, nếu để dồn lên đỉnh thì đáy mỗi thẻ lại trống. */
.contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
a.contact-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: var(--sh-2);
}
.cc-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--brand-tint);
  color: var(--brand-ink);
}
.cc-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.cc-text strong {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.contact-actions {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.contact-map {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.map-frame {
  position: absolute;
  inset: 0;
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.map-open {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px;
  padding: 13px 16px;
  border-radius: var(--r-md);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  color: var(--accent-ink);
  box-shadow: var(--sh-2);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.map-open:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-3);
}
.map-open svg {
  flex: none;
}
.map-open__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.4;
}
.map-open__text strong {
  color: var(--text);
  font-size: 0.94rem;
}
.map-open__text em {
  font-style: normal;
  color: var(--text-3);
  font-size: 0.8rem;
}
.map-go {
  margin-left: auto;
  color: var(--brand-ink);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(44px, 5vw, 68px) 0 clamp(32px, 4vw, 48px);
}
.foot-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.foot-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.foot-name {
  color: var(--footer-heading);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.foot-tag {
  margin-top: 14px;
  max-width: 32ch;
  font-size: 0.88rem;
  line-height: 1.65;
}
.socials {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
.socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  transition: background 0.2s var(--ease), transform 0.18s var(--ease);
}
.socials a:hover {
  background: var(--accent);
  transform: translateY(-2px);
}
/* The Zalo mark ships as a light-background PNG, so it gets its own
   rounded plate rather than floating on the translucent circle. */
.socials img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
}

.foot-col h3 {
  margin-bottom: 16px;
  color: var(--footer-heading);
  font-size: 0.95rem;
  font-weight: 700;
}
.foot-col a,
.foot-col p {
  display: block;
  padding: 5px 0;
  color: var(--footer-text);
  font-size: 0.88rem;
  line-height: 1.6;
  transition: color 0.2s var(--ease);
}
.foot-col a:hover {
  color: #fff;
}
.foot-col--contact a {
  display: inline-block;
  padding: 0;
}

.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 18px 0;
  font-size: 0.8rem;
  color: var(--footer-text);
}
.foot-bottom .wrap {
  text-align: center;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 18, 34, 0.93);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease);
}
.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-active {
  overflow: hidden;
}
.lightbox-img {
  max-width: min(1100px, 92vw);
  max-height: 78vh;
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
  margin-top: 18px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* ============================================================
   SCROLL REVEAL
   Only active when JS runs (html.js), so content is never stuck
   invisible if the script fails.
   ============================================================ */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   RESPONSIVE
   Every multi-column layout declares its own collapse.
   ============================================================ */
@media (max-width: 1180px) {
  .header-inner {
    gap: 18px;
  }
  .main-nav {
    gap: 16px;
  }
  .main-nav a {
    font-size: 0.9rem;
  }
  .header-phone span {
    display: none;
  }
  .header-phone {
    width: 44px;
    height: 44px;
    justify-content: center;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-md);
  }
  .brand-text em {
    display: none;
  }
}

@media (max-width: 1023px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 48px);
  }
  .about-lead {
    max-width: 640px;
  }
  .register-grid {
    grid-template-columns: 1fr;
  }
  .register-media {
    max-width: 460px;
    margin: 0 auto;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(120px, 16vw, 170px);
  }
  .gal--lead {
    grid-column: span 2;
    grid-row: span 2;
  }
  .gal--wide {
    grid-column: span 2;
    grid-row: span 1;
  }
  .gal {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (max-width: 1120px) {
  .main-nav,
  .header-cta {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .header-inner {
    height: 70px;
  }
  .brand-text em {
    display: block;
  }

  /* Mobile nav panel */
  .main-nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-2);
  }
  .main-nav.open a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }
  .main-nav.open a::after {
    display: none;
  }
}

@media (max-width: 980px) {
  html {
    scroll-padding-top: 84px;
  }

  /* Hero về một cột, có lề hai bên trở lại nên bỏ mặt nạ mờ mép trái
     của ảnh và bo góc lại như một tấm ảnh bình thường. */
  .hero-grid {
    width: min(calc(100% - 40px), 720px);
    margin-inline: auto;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero-copy {
    order: 1;
    max-width: none;
    padding: 14px 0 0;
  }
  .hero-visual {
    order: 2;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }
  .hero-photo-img {
    height: auto;
    max-height: 480px;
    border-radius: var(--r-lg);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero-wave-wrapper {
    height: 76px;
    margin-top: -24px;
  }

  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .proof-item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .path-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 34px;
  }
  .path-steps::before {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}

.mobile-action-bar {
  display: none;
}

@media (max-width: 680px) {
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .mobile-action-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 120;
    display: grid;
    grid-template-columns: minmax(112px, 0.72fr) minmax(0, 1.28fr);
    gap: 8px;
    padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 -8px 28px rgba(11, 40, 79, 0.12);
  }

  .mobile-action-bar a {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
  }

  .mobile-action-bar__phone {
    border: 1px solid var(--brand);
    color: var(--brand-ink);
  }

  .mobile-action-bar__register {
    background: var(--accent);
    color: #fff;
  }
  .contact-cards,
  .contact-actions {
    grid-template-columns: 1fr;
  }
  .register-panel {
    padding: 24px 20px 28px;
  }
}

@media (max-width: 580px) {
  .wrap,
  .hero-grid {
    width: min(calc(100% - 28px), var(--wrap));
  }
  /* Tiêu đề phải được phép xuống dòng ở đây, nếu không sẽ tràn ngang. */
  .hero-title {
    font-size: clamp(1.75rem, 8vw, 2.2rem);
    white-space: normal;
  }

  .proof-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .proof-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 14px;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .proof-item:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .proof-value {
    font-size: 1.85rem;
  }
  .proof-value--text {
    font-size: 1.2rem;
  }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(130px, 34vw, 180px);
  }
  .gal,
  .gal--wide {
    grid-column: span 1;
    grid-row: span 1;
  }
  .gal--lead {
    grid-column: span 2;
    grid-row: span 2;
  }

  .path-steps {
    grid-template-columns: 1fr;
    row-gap: 26px;
  }
  .step {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 16px;
  }
  .step-num {
    width: 50px;
    height: 50px;
    margin-bottom: 0;
    font-size: 1.2rem;
    box-shadow: 0 6px 16px rgba(14, 78, 161, 0.22);
  }

  .course-card {
    flex-basis: min(80vw, 320px);
  }

  .faq-item summary {
    padding: 16px 16px;
    font-size: 0.94rem;
  }
  .faq-a {
    padding: 0 16px 18px;
    font-size: 0.9rem;
  }

  .hero-actions .btn {
    flex: 1 1 160px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 72%, white);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .results-modal,
  .results-panel {
    animation: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
  .btn:hover,
  .gal:hover,
  .course-card:hover,
  .contact-card:hover,
  .map-open:hover,
  .results-thumb:hover {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .lightbox {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ============================================================
   THÀNH TÍCH HỌC VIÊN
   Hộp thoại mở khi bấm thẻ khóa học có dữ liệu kết quả.
   Nội dung bên trong do results-modal.js dựng.
   ============================================================ */

/* --- huy hiệu và nút trên thẻ khóa học --- */
.course-card__proof {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
}

.course-card__media {
  position: relative;
}

.course-card__cta {
  margin-top: 10px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--brand-ink);
  cursor: pointer;
}

.course-card__cta::after {
  content: " \2192";
  transition: transform 0.2s var(--ease);
  display: inline-block;
}

.course-card[data-results] {
  cursor: pointer;
}

.course-card[data-results]:hover .course-card__cta::after {
  transform: translateX(3px);
}

/* --- khung hộp thoại --- */
.results-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(10, 36, 69, 0.86);
  padding: clamp(12px, 3vw, 32px);
  overflow-y: auto;
}

.results-modal.open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.results-panel {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  width: min(1100px, 100%);
  margin: auto;
  animation: results-in 0.28s var(--ease);
}

@keyframes results-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* --- đầu hộp thoại --- */
.results-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.results-badge {
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.results-head h3 {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: var(--fs-h3);
  color: var(--text);
  margin: 0;
}

.results-head p {
  font-size: 0.82rem;
  color: var(--text-3);
  margin: 2px 0 0;
}

.results-close {
  margin-left: auto;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.results-close {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

/* --- dải số liệu --- */
.results-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 20px;
  background: var(--brand-wash);
  border-bottom: 1px solid var(--line);
}

.results-stat {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 14px;
}

.results-stat b {
  display: block;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 1.3rem;
  color: var(--brand-ink);
}

.results-stat span {
  display: block;
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: 2px;
}

/* --- một phiếu lớn và dải ảnh thu nhỏ --- */
.results-viewer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  gap: 14px;
  min-height: 0;
  padding: 14px 20px 20px;
}

.results-main {
  min-width: 0;
}

.results-detail__stage {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
  min-height: 0;
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 12px;
}

.results-main__document {
  min-width: 0;
  text-align: center;
}

.results-main__image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 280px);
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: var(--sh-1);
}

.results-nav {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--brand-ink);
  font-size: 1.1rem;
  cursor: pointer;
}

.results-nav:hover,
.results-nav:focus-visible {
  border-color: var(--brand);
  outline: 2px solid var(--brand-tint);
  outline-offset: 2px;
}

.results-detail__cap {
  text-align: center;
  font-weight: 700;
  color: var(--text);
  margin: 12px 0 0;
}

.results-detail__cap em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-2);
}

.results-detail__count {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-2);
  margin: 6px 0 0;
}

.results-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100dvh - 280px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 2px 2px;
  scrollbar-width: thin;
}

.results-thumb {
  flex: none;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--surface-2);
  cursor: pointer;
  opacity: 0.72;
  transition:
    opacity 0.2s var(--ease),
    border-color 0.2s var(--ease);
}

.results-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.results-thumb:hover,
.results-thumb:focus-visible {
  opacity: 1;
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.results-thumb[aria-current="true"] {
  border-color: var(--accent);
  opacity: 1;
}

@media (max-width: 720px) {
  .results-modal {
    padding: 8px;
  }

  .results-head {
    flex-wrap: nowrap;
    padding: 12px;
  }

  .results-head > div {
    min-width: 0;
  }

  .results-stats {
    gap: 6px;
    padding: 8px 12px;
  }

  .results-stat {
    padding: 8px;
  }

  .results-viewer {
    grid-template-columns: 1fr;
    padding: 10px 12px 14px;
  }

  .results-detail__stage {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 6px;
    padding: 8px;
  }

  .results-main__image {
    max-height: 60vh;
  }

  .results-nav {
    width: 44px;
    height: 44px;
  }

  .results-thumbs {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 6px;
  }

  .results-thumb {
    flex: 0 0 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .results-panel {
    animation: none;
  }

  .results-thumb {
    transition: none;
  }
}