/* ==========================================================================
   Edunauts colour system
   ==========================================================================
   Every colour comes from palette.css (enqueued first) — the same palette
   the EnID console, Eno Portal and EnO Admin use. The names below are this
   theme's roles for it; do not add hex values anywhere else in this file.

   Division of labour (palette.css has the full rationale):
     navy   — identity, headings, primary buttons, the header band
     blue   — interaction: links, focus, "info"
     gold   — highlights and the one promotional action per section
     teal / purple — categories: learning & growth, special & premium
     green / amber / red — state only
   Contrast rule: navy background -> gold or white text; gold -> navy text.
   ========================================================================== */
:root {
  --navy: var(--en-navy);
  --navy-light: var(--en-blue);
  --gold: var(--en-gold);
  --gold-text: var(--en-gold-text); /* darker gold — meets contrast as TEXT on white */
  --text: var(--en-neutral-800);
  --text-muted: var(--en-neutral-500);
  --border: var(--en-border);
  --bg: var(--en-surface-bg);
  --bg-soft: var(--en-surface);
  --radius: 8px;
  /* Interaction colours: a link is blue, so it reads as a link rather than
     as another navy heading. */
  --link: var(--en-link);
  --link-hover: var(--en-link-hover);
  --focus: var(--en-focus-ring);
  /* Was an off-palette electric cyan for the lead-capture card's glow; teal
     is the palette's "tech / growth" colour and sits beside navy the same way. */
  --cyan: var(--en-teal-400);
  --cyan-text: var(--en-teal-700);
  /* Section tints — alternate these instead of grey so consecutive sections
     are distinguishable without a heavy border. */
  --blue-tint: var(--en-tint-blue);
  --tint-navy: var(--en-tint-navy);
  --tint-gold: var(--en-tint-gold);
  --tint-teal: var(--en-tint-teal);
  --tint-purple: var(--en-tint-purple);
  --max-width: 1320px;
  --max-width-narrow: 760px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family:
    'SVN-Gilroy',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: on short pages (e.g. a bare Contact page), the footer
       should still sit flush at the bottom of the viewport instead of
       floating up right under a short amount of content. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-main {
  flex: 1 0 auto;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--navy);
  text-decoration: none;
}
/* Site-wide text-hover convention: link blue + bold (was gold; gold is now kept
   for highlights, not interaction). Buttons and card-level
   hover effects (box-shadow, image scale, icon backgrounds) are a separate,
   deliberately different pattern and are NOT part of this rule. */
a:hover {
  color: var(--link-hover);
  font-weight: 700;
  text-decoration: none;
}
h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.5em;
  color: var(--navy);
}
p {
  margin: 0 0 1em;
}
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.wrap-narrow {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding: 0 24px;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 8px;
  z-index: 10000;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 4px;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 8px;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
}

/* ---- Top loading bar — shown on initial load and internal navigations ---- */
#edunauts-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 10001; /* above .skip-link (10000) and the sticky header (100) */
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
}
#edunauts-loading-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--navy) 35%, var(--gold) 65%, transparent);
}
html.is-loading #edunauts-loading-bar {
  opacity: 1;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: no-preference) {
  html.is-loading #edunauts-loading-bar::before {
    animation: edunauts-loading-sweep 1.1s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* No sweep animation for reduced-motion users — a static gradient still
       communicates "busy" without the continuous motion. */
  #edunauts-loading-bar::before {
    width: 100%;
  }
}
@keyframes edunauts-loading-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(350%);
  }
}

/* ---- Header ---- */
.site-header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-logo-mark {
  height: 28px;
  width: auto;
}
/* Only ever visible inside the collapsed menu panel; the bar carries its own
   pair at desktop widths. */
.nav-mobile-actions {
  display: none;
}
.site-logo-text {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.c-navy {
  color: var(--navy);
}
.c-gold {
  color: var(--gold);
} /* wordmark uses the true brand gold — logos are exempt from text-contrast rules */

.site-header-right {
  display: flex;
  align-items: center;
  gap: 52px;
}

.primary-nav .nav-menu {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav .nav-menu li {
  position: relative;
  display: flex;
  align-items: center;
}
.primary-nav .nav-menu a {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
  /* "Tin tức – Sự kiện" is one label, not three words to break apart: without
     this the bar silently wraps items into two stacked lines the moment the
     row runs short, which is what it was doing all the way up to ~1185px. */
  white-space: nowrap;
  color: var(--text);
  font-weight: 500;
  font-size: 15px;
  transition: color 0.15s;
}
.primary-nav .nav-menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--gold-text);
  border-radius: 1px;
  transition: width 0.25s ease;
}
.primary-nav .nav-menu a:hover {
  color: var(--gold-text);
  font-weight: 700;
  text-decoration: none;
}
.primary-nav .nav-menu a:hover::after {
  width: 100%;
}
.primary-nav .nav-menu .current-menu-item > a {
  color: var(--gold-text);
  font-weight: 700;
  text-decoration: none;
}
.primary-nav .nav-menu .current-menu-item > a::after {
  width: 100%;
}

/* ---- Mega-menu (Sản phẩm / Giải pháp dropdowns) ---- */
.mega-menu-caret {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 2px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
}
.mega-menu-caret svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}
.mega-menu-caret[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 24px 48px rgba(0, 31, 63, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
  z-index: 90;
}
.mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-menu-inner {
  padding: 32px 24px;
}
.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mega-menu-tile {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: 10px;
  align-items: flex-start;
  transition: background-color 0.15s;
}
.mega-menu-tile:hover {
  background: var(--bg-soft);
  text-decoration: none;
}
.mega-menu-tile-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--en-tint-navy);
  color: var(--navy);
  transition:
    background-color 0.15s,
    color 0.15s;
}
.mega-menu-grid > :nth-child(4n + 1) .mega-menu-tile-icon {
  background: var(--en-info-50);
  color: var(--en-info-600);
}
.mega-menu-grid > :nth-child(4n + 2) .mega-menu-tile-icon {
  background: var(--en-teal-50);
  color: var(--en-teal-600);
}
.mega-menu-grid > :nth-child(4n + 3) .mega-menu-tile-icon {
  background: var(--en-purple-50);
  color: var(--en-purple-600);
}
.mega-menu-grid > :nth-child(4n + 4) .mega-menu-tile-icon {
  background: var(--en-gold-50);
  color: var(--en-gold-700);
}
.mega-menu-tile-icon svg {
  width: 22px;
  height: 22px;
}
.mega-menu-tile:hover .mega-menu-tile-icon {
  /* Hover deepens the colour the icon already has — light blue to brand
     navy — rather than switching it to gold, which read as a different
     element lighting up instead of this one coming forward. */
  background: var(--navy);
  color: #fff;
}
.mega-menu-tile-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mega-menu-tile-title {
  font-weight: 700;
  color: var(--navy);
  font-size: 15px;
}
.mega-menu-tile-desc {
  font-weight: 400;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* "Sản phẩm" tabbed variant — left list of audience segments, right side
   shows the product grid for whichever tab is active. */
.mega-menu-tabbed {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.mega-menu-tablist {
  /* Wide enough that the longest label ("Giảng viên / Giáo viên") still
       fits on one line once .is-active switches it to font-weight: 700 —
       bold text is wider than regular, so sizing off the regular weight
       alone left the active tab wrapping to two lines. */
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--border);
  padding-right: 20px;
}
.mega-menu-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.mega-menu-tab span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mega-menu-tab svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-muted);
}
.mega-menu-tab:hover {
  background: var(--bg-soft);
}
.mega-menu-tab.is-active {
  background: var(--bg-soft);
  color: var(--navy);
  font-weight: 700;
}
.mega-menu-tab.is-active svg {
  color: var(--navy);
}
.mega-menu-tabpanels {
  flex: 1;
  min-width: 0;
}
.mega-menu-tabpanel {
  display: none;
}
.mega-menu-tabpanel.is-active {
  display: block;
}
.mega-menu-tabpanel .mega-menu-grid {
  grid-template-columns: repeat(3, 1fr);
}

/* "Giải pháp" variant — 5 audience cards in a row (icon in a tinted box +
   label), kept visually distinct from "Sản phẩm"'s tabbed product grid
   but with the same card-like polish instead of a bare text list. */
.mega-menu-audience-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.mega-menu-audience-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  color: var(--navy);
  height: 100%;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}
.mega-menu-audience-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--en-tint-navy);
  color: var(--navy);
  transition:
    background-color 0.15s,
    color 0.15s;
}
.mega-menu-audience-icon svg {
  width: 24px;
  height: 24px;
}
.mega-menu-audience-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.mega-menu-audience-link:hover {
  border-color: var(--navy);
  box-shadow: 0 12px 28px rgba(0, 31, 63, 0.12);
  transform: translateY(-3px);
  /* The site-wide a:hover turns text gold; a card keeps its own colour and
     lifts instead (see the note on that rule). */
  color: var(--navy);
  text-decoration: none;
}
.mega-menu-audience-link:hover .mega-menu-audience-icon {
  background: var(--navy);
  color: #fff;
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* The one commercial call to action in the header, so it is allowed to move.
   Three layers, all inside the palette:
     1. the fill — navy to navy-secondary with a gold band that drifts across
        it, so the gradient really is "xanh + vàng" and not navy with a gold
        hint at the edge;
     2. the frame — a 2px gold gradient ring, drawn as a second background
        layer clipped to the border box (a plain border cannot hold a
        gradient), drifting with the fill;
     3. the sheen — a brighter gold highlight crossing every six seconds.
   The gold band tops out at 0.30 alpha over navy, which keeps the label at
   roughly 6.5:1 against its own background — white on gold would fail, gold
   over navy does not. Everything stops under prefers-reduced-motion. */
.btn-header-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  border-radius: 7px;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    box-shadow 0.2s,
    filter 0.2s,
    color 0.15s,
    transform 0.12s;
}
.btn-header-primary {
  position: relative;
  /* Keeps the sheen's negative z-index scoped to this button: it has to sit
     above the gradient and below the label, not behind the header. */
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  /* Transparent border + background-clip below is what turns the second
     layer into a gradient frame; a border-color can only ever be one flat
     colour. */
  border: 2px solid transparent;
  background-image:
    /* fill — the gold band sits mid-gradient and navy returns on both
       sides, so the drift below reads as a sweep rather than a slide off
       one end */
    linear-gradient(
      115deg,
      var(--navy) 0%,
      var(--navy-light) 35%,
      rgba(242, 201, 76, 0.3) 55%,
      var(--navy-light) 75%,
      var(--navy) 100%
    ),
    /* frame */
    linear-gradient(
        115deg,
        var(--gold) 0%,
        var(--en-gold-100) 22%,
        var(--gold) 42%,
        var(--navy-light) 70%,
        var(--gold) 100%
      );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size:
    220% 100%,
    220% 100%;
  background-position:
    0% 50%,
    0% 50%;
  box-shadow:
    0 2px 10px rgba(0, 31, 63, 0.22),
    0 0 0 0 rgba(242, 201, 76, 0);
  animation: btn-header-gradient 9s ease-in-out infinite;
}
@keyframes btn-header-gradient {
  0%,
  100% {
    background-position:
      0% 50%,
      0% 50%;
  }
  50% {
    background-position:
      100% 50%,
      100% 50%;
  }
}
.btn-header-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    105deg,
    rgba(255, 240, 184, 0) 38%,
    rgba(255, 240, 184, 0.55) 50%,
    rgba(255, 240, 184, 0) 62%
  );
  transform: translateX(-130%);
  animation: btn-header-sheen 6s ease-in-out 1.5s infinite;
}
@keyframes btn-header-sheen {
  0% {
    transform: translateX(-130%);
  }
  /* Crosses in the first fifth of the cycle, then waits — a sweep every six
     seconds reads as "look here", a constant one reads as a broken GIF. */
  20%,
  100% {
    transform: translateX(130%);
  }
}
/* No background-position here: the drift above owns that property, and
   setting it on hover would fight the animation. Hover brightens the same
   gradient instead and lights the gold halo. */
.btn-header-primary:hover {
  color: #fff;
  text-decoration: none;
  filter: brightness(1.08) saturate(1.12);
  box-shadow:
    0 10px 24px rgba(0, 31, 63, 0.34),
    0 0 0 4px rgba(242, 201, 76, 0.22);
  transform: translateY(-2px);
}
.btn-header-primary:active {
  filter: brightness(0.94);
  box-shadow:
    0 2px 6px rgba(0, 31, 63, 0.24),
    0 0 0 2px rgba(242, 201, 76, 0.18);
  transform: translateY(0) scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
  .btn-header-primary {
    transition: none;
    animation: none;
    /* Parked mid-sweep so the still frame is the good one — gold band
       across the middle, navy at both ends. */
    background-position:
      50% 50%,
      50% 50%;
  }
  .btn-header-primary::after {
    animation: none;
  }
  .btn-header-primary:hover {
    transform: none;
  }
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
}
.nav-toggle-bar::before {
  transform: translateY(-7px);
}
.nav-toggle-bar::after {
  transform: translateY(5px);
}

/* The full menu bar needs ~1185px of room: six labels, a 52px gap and two
   buttons. Collapsing it only at 782px (WordPress admin-bar width, not this
   header's own) left every iPad in portrait — 820, 834, 1024 — rendering a
   bar it could not fit, with the labels wrapped and the trial button pushed
   off the edge. The hamburger now covers everything up to 1100px. */
@media (max-width: 1100px) {
  .site-header-right {
    gap: 0;
  }
  .primary-nav {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: none;
    padding: 12px 24px 20px;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }
  .primary-nav.is-open {
    display: block;
  }
  .primary-nav .nav-menu {
    flex-direction: column;
    gap: 14px;
  }
  .primary-nav .nav-menu li {
    flex-wrap: wrap;
  }
  .nav-toggle {
    display: flex;
  }
  /* The button leaves the bar as soon as the menu collapses — it lives in the
     panel below instead (.nav-mobile-actions). Keeping it in the bar left a
     phone showing a logo, a dark button and a menu icon competing for the same
     row, which is what made the header feel crowded. */
  .site-header-actions .btn-header-primary {
    display: none;
  }
  .nav-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
  }
  .nav-mobile-actions .btn-header-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 16px;
    font-size: 14.5px;
  }

  /* On mobile the panel flows inline under the menu list instead of
       floating as an absolutely-positioned overlay. */
  .mega-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border-top: 0;
    box-shadow: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .mega-menu.is-open {
    max-height: 1400px;
  }
  .mega-menu-inner {
    padding: 8px 0 12px;
  }
  .mega-menu-grid {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .mega-menu-tile {
    padding: 10px 6px;
  }

  .mega-menu-tabbed {
    flex-direction: column;
    gap: 4px;
  }
  .mega-menu-tablist {
    /* The desktop rule pins this column to 250px along the main axis. Once
       the parent turns vertical that 250px becomes a locked HEIGHT, and the
       row of tabs stretched to fill it — the pills rendered as 250px-tall
       ovals. Back to content height. */
    flex: 0 0 auto;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 10px;
    margin-bottom: 8px;
    gap: 6px;
  }
  .mega-menu-tab {
    width: auto;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
  }
  .mega-menu-tab.is-active {
    border-color: var(--navy);
  }
  .mega-menu-tabpanel .mega-menu-grid {
    grid-template-columns: 1fr;
  }
  .mega-menu-audience-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .mega-menu-audience-link {
    padding: 16px 10px;
  }
}

/* Just above the collapse point the bar fits, but only barely — this band
   buys back the ~190px it needs by tightening the gaps and type rather than
   letting anything wrap or overflow. Scoped with min-width so it can never
   reach the collapsed panel below. */
@media (min-width: 1101px) and (max-width: 1250px) {
  .site-header-right {
    gap: 28px;
  }
  .primary-nav .nav-menu {
    gap: 18px;
  }
  .primary-nav .nav-menu a {
    font-size: 14px;
  }
  .site-header-actions {
    gap: 8px;
  }
  .site-header-actions .btn-header-primary {
    padding: 8px 14px;
    font-size: 13.5px;
  }
}

/* ---- Buttons ---- */
.btn-primary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.18s ease;
  border: 1.5px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--navy);
  color: #fff;
}
.btn-primary:hover {
  background: var(--gold);
  color: var(--navy);
  text-decoration: none;
  transform: translateY(-2px);
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-outline {
  border-color: var(--border);
  color: var(--navy);
}
.btn-outline:hover {
  border-color: var(--navy);
  color: var(--gold-text);
  background: var(--bg-soft);
  text-decoration: none;
  transform: translateY(-2px);
}
.btn-outline:active {
  transform: translateY(0);
}

.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-text);
  margin-bottom: 10px;
}

/* ---- Homepage hero — deliberately white, unlike .page-banner (Pages/blog/
   archives), which stays navy. Homepage-only, so these rules restyle
   .hero-home directly rather than needing a light/dark modifier class. ---- */
.hero-home {
  /* Flat white — a gradient here kept leaving a visible seam at the
       section edge against the header/.value-strip around it. The galaxy
       artwork + grid texture already carry enough visual interest. */
  background: #fff;
  position: relative;
  overflow: hidden;
  color: var(--text);
}
.hero-home::before {
  content: '';
  position: absolute;
  inset: -32px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 31, 63, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 31, 63, 0.045) 1px, transparent 1px);
  background-size: 32px 32px;
  /* On the old navy background the grid's hard edge was invisible (same
       color as the section around it). On white it reads as a faint but
       distinct rectangle, so the pattern needs to fade out toward every
       edge instead of cutting off sharply. */
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 100%);
}
.hero-home-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 88px 24px;
  position: relative;
  z-index: 1;
}
.hero-home-copy {
  max-width: 620px;
}
.hero-home .eyebrow {
  color: var(--gold-text);
}
.hero-home h1 {
  color: var(--navy);
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.18;
  margin-bottom: 18px;
}
.hero-home p {
  color: var(--text-muted);
  font-size: 17px;
  max-width: 520px;
  margin-bottom: 32px;
}
.hero-home-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-home-mark {
  position: relative;
  flex-shrink: 0;
  width: 600px;
  height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-home-mascot {
  position: relative;
  z-index: 1;
  height: 480px;
  width: auto;
  max-width: 100%;
  /* A black shadow read as a dark smudge under the character once the
       background went white — a soft navy tint grounds it instead without
       looking heavy. */
  filter: drop-shadow(0 20px 28px rgba(0, 31, 63, 0.18));
}
.hero-home-glow {
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  /* Needs more saturation than the old navy-background version to read
       as a glow at all against white — same color, higher opacity. */
  background: radial-gradient(circle, rgba(242, 201, 76, 0.45) 0%, rgba(242, 201, 76, 0) 70%);
}

/* "Galaxy" backdrop, centered behind the mascot — moderate size (not
   sweeping the whole hero), positioned so the mascot stands inside the
   ring's own hollow center rather than the image's plain bounding-box
   center (the ellipse's hole sits left/up of that geometric middle). Kept
   sharp (no blur) but paled via opacity + a lighter/less-saturated filter
   so it reads as a soft atmosphere behind the character, not competing
   detail. */
.hero-home-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-44%, -46%);
  width: 900px;
  max-width: none;
  height: auto;
  opacity: 0.6;
  filter: saturate(55%) brightness(1.2);
  pointer-events: none;
  z-index: 0;
}

/* Floating value badges — pushed well outside the mascot's own bounding
   box (not just outside .hero-home-mark's edge) so they sit clearly beside
   the character instead of overlapping its limbs/cap, whatever its pose. */
.hero-home-badge {
  /* Rounded RECTANGLE, not a pill — a small but real corner radius. */
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  color: var(--navy);
  border-radius: 16px;
  padding: 12px 18px;
  white-space: nowrap;
  box-shadow: 0 14px 32px rgba(0, 31, 63, 0.14);
}
.hero-home-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--navy);
}
.hero-home-badge-icon svg {
  width: 24px;
  height: 24px;
}
.hero-home-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.hero-home-badge-text strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
}
.hero-home-badge-text {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
}
/* Symmetric 4-corner placement — same offset on every side — pulled in
   close to the mascot (small offset) instead of pushed out to the box's
   far corners, while staying clear of the character itself. */
.hero-home-badge-1 {
  top: 14%;
  left: -4%;
}
.hero-home-badge-2 {
  top: 14%;
  right: -4%;
}
.hero-home-badge-3 {
  bottom: 14%;
  left: -4%;
}
.hero-home-badge-4 {
  bottom: 14%;
  right: -4%;
}

/* ---- Motion ----
   Every homepage section used to reveal the same way: fade + slide up
   30px. Deliberately varied below instead — grids scale in, the FAQ list
   slides in from the side, the lead-band's copy/mascot converge from
   opposite sides, badges pop diagonally from their own corner — but all of
   it stays on the same easing/duration family so the page still reads as
   one coherent system rather than a grab-bag of unrelated effects. */
@media (prefers-reduced-motion: no-preference) {
  .hero-home::before,
  .process-section::before,
  .faq-section::before,
  .about-hero::before,
  .about-pillars-section::before,
  .about-why-section::before {
    animation: edunauts-grid-drift 40s linear infinite;
  }

  .about-hero-mascot {
    animation: edunauts-float 5s ease-in-out infinite;
  }

  .hero-home-mascot {
    animation: edunauts-float 5s ease-in-out infinite;
  }
  .lead-band-mascot {
    animation: edunauts-float 4.5s ease-in-out infinite;
  }

  .hero-home-copy > *,
  .hero-home-mark {
    opacity: 0;
    transform: translateY(22px);
    animation: edunauts-hero-in 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
  .hero-home-copy > .eyebrow {
    animation-delay: 0.1s;
  }
  .hero-home-copy > h1 {
    animation-delay: 0.22s;
  }
  .hero-home-copy > p {
    animation-delay: 0.38s;
  }
  .hero-home-copy > .hero-home-actions {
    animation-delay: 0.54s;
  }
  .hero-home-mark {
    animation-delay: 0.4s;
  }

  /* Value badges pop in diagonally from their own corner toward the
       mascot — direction matches where each one actually sits — with a
       small overshoot (back-out easing) instead of the plain vertical
       glide every other reveal uses; fitting for a small chip, not a
       full content block. */
  html.has-reveal .hero-home-badge[data-reveal] {
    transition:
      opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
      transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* The step number pops in with the same overshoot just after its card
       has landed — a second, punchier beat layered on the base reveal
       instead of card and badge arriving identically. */
  html.has-reveal .process-step.is-visible .process-step-number {
    animation: edunauts-badge-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
  }
}

@keyframes edunauts-hero-in {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes edunauts-grid-drift {
  from {
    background-position:
      0 0,
      0 0;
  }
  to {
    background-position:
      32px 32px,
      32px 32px;
  }
}
@keyframes edunauts-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes edunauts-badge-pop {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

[data-reveal] {
  opacity: 1;
  transform: none;
}
html.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(26px); /* default: glides up from below */
}
html.has-reveal [data-reveal].is-from-top {
  transform: translateY(-26px); /* scrolling up: glides down from above instead */
}
/* Per-section shapes — each overrides the default above for its own
   [data-reveal] elements, so different parts of the page arrive
   differently instead of everything sliding up the same 26px. */
html.has-reveal .persona-grid [data-reveal] {
  transform: translateY(26px) scale(0.94);
}
html.has-reveal .faq-item[data-reveal] {
  transform: translateX(-22px);
}
html.has-reveal .faq-intro[data-reveal] {
  transform: translateY(14px) scale(0.96);
}
html.has-reveal .lead-band-copy[data-reveal] {
  transform: translateX(-32px);
}
html.has-reveal .lead-band-form-group[data-reveal] {
  transform: translateX(32px);
}
html.has-reveal .cta-band-inner[data-reveal] {
  transform: scale(0.96);
}
html.has-reveal .hero-home-badge-1[data-reveal] {
  transform: translate(-22px, -14px) scale(0.82);
}
html.has-reveal .hero-home-badge-2[data-reveal] {
  transform: translate(22px, -14px) scale(0.82);
}
html.has-reveal .hero-home-badge-3[data-reveal] {
  transform: translate(-22px, 14px) scale(0.82);
}
html.has-reveal .hero-home-badge-4[data-reveal] {
  transform: translate(22px, 14px) scale(0.82);
}
html.has-reveal .process-step-number {
  opacity: 0;
  transform: scale(0.5);
}

@media (prefers-reduced-motion: no-preference) {
  /* .6s (not the 1.1s this started at) — still reads as a smooth glide,
       but finishes fast enough that a full-page capture (screenshot tool,
       print-to-PDF, etc.) resizing the viewport and grabbing the frame a
       moment later doesn't catch content still mid-fade and looking like
       it's missing — that's what every "section is blank/cut off" report
       this session has actually turned out to be. */
  html.has-reveal [data-reveal] {
    transition:
      opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  html.has-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  /* Staggered reveal within a grid — each subsequent card/item lags slightly
       behind so the section feels like it's cascading in, not popping at once.
       Applies on the way out too, since the observer toggles both directions. */
  .value-strip-inner [data-reveal]:nth-child(1),
  .solution-grid [data-reveal]:nth-child(1),
  .process-grid [data-reveal]:nth-child(1),
  .post-grid [data-reveal]:nth-child(1),
  .about-pillars [data-reveal]:nth-child(1),
  .about-timeline [data-reveal]:nth-child(1),
  .about-why-list [data-reveal]:nth-child(1),
  .about-products-panels [data-reveal]:nth-child(1),
  .persona-grid [data-reveal]:nth-child(1) {
    transition-delay: 0ms;
  }
  .value-strip-inner [data-reveal]:nth-child(2),
  .solution-grid [data-reveal]:nth-child(2),
  .process-grid [data-reveal]:nth-child(2),
  .post-grid [data-reveal]:nth-child(2),
  .about-pillars [data-reveal]:nth-child(2),
  .about-timeline [data-reveal]:nth-child(2),
  .about-why-list [data-reveal]:nth-child(2),
  .about-products-panels [data-reveal]:nth-child(2),
  .persona-grid [data-reveal]:nth-child(2) {
    transition-delay: 120ms;
  }
  .value-strip-inner [data-reveal]:nth-child(3),
  .solution-grid [data-reveal]:nth-child(3),
  .process-grid [data-reveal]:nth-child(3),
  .post-grid [data-reveal]:nth-child(3),
  .about-timeline [data-reveal]:nth-child(3),
  .about-why-list [data-reveal]:nth-child(3),
  .about-products-panels [data-reveal]:nth-child(3),
  .persona-grid [data-reveal]:nth-child(3) {
    transition-delay: 240ms;
  }
  .value-strip-inner [data-reveal]:nth-child(4),
  .process-grid [data-reveal]:nth-child(4),
  .post-grid [data-reveal]:nth-child(4),
  .about-timeline [data-reveal]:nth-child(4),
  .about-why-list [data-reveal]:nth-child(4),
  .persona-grid [data-reveal]:nth-child(4) {
    transition-delay: 360ms;
  }
  .persona-grid [data-reveal]:nth-child(5) {
    transition-delay: 480ms;
  }

  /* Hero badges cascade after the hero copy/mark's own entrance has
       mostly played out, echoing that stagger instead of firing at once. */
  .hero-home-badge-1 {
    transition-delay: 0.55s;
  }
  .hero-home-badge-2 {
    transition-delay: 0.65s;
  }
  .hero-home-badge-3 {
    transition-delay: 0.75s;
  }
  .hero-home-badge-4 {
    transition-delay: 0.85s;
  }

  .blog-featured-side [data-reveal]:nth-child(1) {
    transition-delay: 120ms;
  }
  .blog-featured-side [data-reveal]:nth-child(2) {
    transition-delay: 240ms;
  }
}

@media (max-width: 900px) {
  .hero-home-inner {
    flex-direction: column;
    text-align: center;
    padding: 56px 24px;
  }
  .hero-home-copy {
    max-width: 100%;
  }
  .hero-home p {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-home-actions {
    justify-content: center;
  }
  .hero-home-mark {
    width: auto;
    height: auto;
  }
  .hero-home-mascot {
    height: 220px;
  }
  .hero-home-glow,
  .hero-home-orbit,
  .hero-home-badge {
    display: none;
  }
}

/* ---- Value strip (core value props) ---- */
/* One shared card, 4 columns divided by hairlines — not 4 separate boxes. */
.value-strip {
  background: #fff;
}
.value-strip-inner {
  /* Sits inside a plain .wrap rather than being one. As the .wrap itself, its
     24px gutter was painted inside its own background, so the card touched
     both screen edges at every width below --max-width — the whole of every
     phone and tablet. Nested, it lines up with the text in the sections
     above and below it. */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0, 31, 63, 0.18);
  margin-top: 48px;
  margin-bottom: 64px;
  overflow: hidden;
}
.value-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 30px 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  text-align: left;
}
.value-item:last-child {
  border-right: none;
}
.value-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--gold);
}
/* The value strip sits on the navy hero band, so its icons use the light end
   of each palette colour — gold, teal, purple, blue — instead of four golds. */
.value-strip-inner > :nth-child(4n + 2) .value-item-icon {
  color: var(--en-teal-300);
}
.value-strip-inner > :nth-child(4n + 3) .value-item-icon {
  color: var(--en-purple-300);
}
.value-strip-inner > :nth-child(4n + 4) .value-item-icon {
  color: var(--en-info-300);
}
.value-item-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 2.4;
}
.value-item-text h3 {
  font-size: 16px;
  margin: 0 0 4px;
  color: #fff;
}
.value-item-text p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 900px) {
  .value-strip-inner {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 32px;
    margin-bottom: 48px;
  }
  .value-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .value-item:nth-child(2n) {
    border-right: none;
  }
  .value-item:nth-child(n + 3) {
    border-bottom: none;
  }
}
@media (max-width: 560px) {
  .value-strip-inner {
    grid-template-columns: 1fr;
    border-radius: 14px;
  }
  .value-item {
    padding: 22px 18px;
    gap: 12px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .value-item-icon svg {
    width: 26px;
    height: 26px;
  }
  .value-item:last-child {
    border-bottom: none;
  }

  /* The wordmark is the widest fixed thing in the header; at 28px it left the
     row looking full before the menu button was even drawn. */
  .site-logo {
    gap: 8px;
  }
  .site-logo-mark {
    height: 23px;
  }
  .site-logo-text {
    font-size: 16.5px;
  }
  .site-header-inner {
    height: 60px;
  }
  /* The bar loses 8px here, so the panel hanging off it has to follow —
     otherwise it floats with a strip of the page showing through the gap. */
  .primary-nav {
    top: 60px;
    max-height: calc(100vh - 60px);
  }
}

/* ---- Section header ---- */
.section-header {
  padding: 56px 0 28px;
  text-align: center;
}
.section-header h2 {
  font-size: clamp(24px, 3vw, 32px);
  margin: 0;
}
.section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  text-align: left;
  padding-bottom: 24px;
}
.section-header-link {
  font-weight: 600;
  color: var(--navy);
  font-size: 14.5px;
  white-space: nowrap;
}
.section-header-link:hover {
  color: var(--gold-text);
  font-weight: 700;
}

/* ---- Solutions grid ---- */
.solutions {
  padding-bottom: 64px;
}
.solution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.solution-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.solution-card:hover {
  box-shadow: 0 16px 32px rgba(0, 31, 63, 0.1);
  transform: translateY(-3px);
}
.solution-card-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--navy);
}
.solution-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.solution-card:hover .solution-card-thumb img {
  transform: scale(1.04);
}
.solution-card-body {
  padding: 24px 28px 28px;
}
.solution-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--en-tint-navy);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.solution-card:hover .solution-icon {
  background: var(--gold);
  color: var(--navy);
}
.solution-card h3 {
  font-size: 19px;
  margin-bottom: 8px;
}
.solution-card p {
  color: var(--text-muted);
  font-size: 14.5px;
  margin-bottom: 16px;
}
.solution-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
}
.solution-card:hover .solution-link {
  color: var(--gold-text);
  font-weight: 700;
}

/* ---- Closing CTA band (homepage) ---- */
.cta-band {
  background: var(--navy);
}
.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 56px 24px;
}
.cta-band h2 {
  color: #fff;
  font-size: clamp(22px, 2.6vw, 28px);
  margin-bottom: 8px;
}
.cta-band p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15.5px;
  max-width: 520px;
  margin: 0;
}
.cta-band-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
/* .btn-primary's default navy fill is invisible against this band's own
   navy background — gold reads correctly here instead, same as every
   other navy-background button on the site (hero mascot, etc). */
.cta-band-actions .btn-primary {
  background: var(--gold);
  color: var(--navy);
}
.cta-band-actions .btn-primary:hover {
  background: #fff;
  color: var(--navy);
}
.btn-outline-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  transition: all 0.18s ease;
}
.btn-outline-navy:hover {
  border-color: var(--gold);
  color: var(--gold);
  text-decoration: none;
  transform: translateY(-2px);
}
.btn-outline-navy:active {
  transform: translateY(0);
}

@media (max-width: 700px) {
  .cta-band-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ---- Audience showcase (homepage — "Giải pháp theo đối tượng") ----
   Five persona cards — one per audience Edunauts serves, each fronted by
   its own mascot variant. Deliberately NOT the "Sản phẩm" mega-menu's
   tabbed product comparison (that stays in header.php, untouched, with
   its own .mega-menu-tab* markup) — this is brand storytelling, not a
   feature/product selector. */
.audience-showcase {
  padding: 88px 0;
  background: var(--blue-tint);
  position: relative;
  overflow: hidden;
}
.audience-showcase::before {
  content: '';
  position: absolute;
  inset: -40px;
  pointer-events: none;
  background-image: radial-gradient(rgba(0, 31, 63, 0.06) 1.5px, transparent 1.5px);
  background-size: 34px 34px;
}
.audience-showcase .section-header p {
  max-width: 620px;
  margin: 10px auto 0;
  color: var(--text-muted);
}

.persona-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 52px;
  position: relative;
  z-index: 1;
}
.persona-card {
  --accent: var(--navy);
  flex: 1 1 210px;
  max-width: 240px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(0, 31, 63, 0.07);
  border-radius: 24px;
  padding: 0 20px 26px;
  padding-top: 130px;
  box-shadow: 0 14px 32px rgba(0, 31, 63, 0.08);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.3s ease-out,
    box-shadow 0.3s ease-out;
}
.persona-card:hover,
.persona-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 26px 48px rgba(0, 31, 63, 0.16);
  text-decoration: none;
}
.persona-card:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
/* One palette colour per audience, so five cards read as five audiences
   rather than as navy-and-gold again: gold, teal, purple, blue, navy. */
.persona-card:nth-child(1) {
  --accent: var(--gold-text);
  --grad-a: var(--en-gold-200);
  --grad-b: var(--en-gold-50);
}
.persona-card:nth-child(2) {
  --accent: var(--en-teal-700);
  --grad-a: var(--en-teal-200);
  --grad-b: var(--en-teal-50);
}
.persona-card:nth-child(3) {
  --accent: var(--en-purple-700);
  --grad-a: var(--en-purple-200);
  --grad-b: var(--en-purple-50);
}
.persona-card:nth-child(4) {
  --accent: var(--en-info-700);
  --grad-a: var(--en-info-200);
  --grad-b: var(--en-info-50);
}
.persona-card:nth-child(5) {
  --accent: var(--en-navy-700);
  --grad-a: var(--en-navy-200);
  --grad-b: var(--en-navy-50);
}

.persona-card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54%;
  border-radius: 24px 24px 0 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background:
    linear-gradient(to bottom, transparent 50%, #fff 100%),
    linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 100%);
  transition: filter 0.3s ease-out;
}
.persona-card:hover .persona-card-glow {
  filter: brightness(1.06) saturate(1.08);
}

.persona-card-mascot-wrap {
  margin-top: -66px;
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.persona-card-mascot {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 31, 63, 0.18));
  transition: transform 0.3s ease-out;
}
.persona-card:hover .persona-card-mascot {
  transform: translateY(-6px);
}

.persona-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
}
.persona-card-title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 16px;
}
.persona-card-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 6px;
}
.persona-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: 10px;
}
.persona-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}
.persona-card-cta svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s ease-out;
}
.persona-card:hover .persona-card-cta svg {
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .persona-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
    gap: 16px;
    margin-left: -24px;
    margin-right: -24px;
    /* A scroll container clips BOTH axes, not just the one it scrolls, so
       the cards' shadows were cut off square at this box's bottom edge —
       the hard grey band under the row. The padding is now deeper than the
       shadow reaches (10px offset + 24px blur = 34px), and the negative
       margin gives the extra space back so the section does not grow. */
    padding: 12px 24px 44px;
    margin-bottom: -30px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .persona-grid::-webkit-scrollbar {
    display: none;
  }
  .persona-card {
    flex: 0 0 76%;
    max-width: 300px;
    scroll-snap-align: center;
    /* Softer and shorter than desktop, so it fits inside the padding above. */
    box-shadow: 0 10px 24px rgba(0, 31, 63, 0.07);
  }
  .persona-card:hover,
  .persona-card:focus-visible {
    /* No lift in a swipe row: a card tapped or focused would rise into the
       clipped top edge, and touch has no hover to reward anyway. */
    transform: none;
    box-shadow: 0 10px 24px rgba(0, 31, 63, 0.1);
  }
  .audience-showcase {
    padding: 64px 0;
  }
}

/* ---- Process timeline (homepage — "Quy trình triển khai") ---- */
.process-section {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
/* Same dot-grid texture as .audience-showcase, so the two sections read as
   one visual family rather than the plain white gap this used to be. */
.process-section::before {
  content: '';
  position: absolute;
  inset: -40px;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(0, 31, 63, 0.05) 1.5px, transparent 1.5px);
  background-size: 34px 34px;
}
.process-section > .wrap {
  position: relative;
  z-index: 1;
}

/* Each step is now a floating card with its number as a badge overlapping
   the card's top edge — the same "artwork overlaps the card" composition
   .persona-card uses for its mascot — connected by an arrow in the gap
   instead of the old plain grey line running behind flush-left circles. */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 52px;
  position: relative;
}
.process-step {
  position: relative;
  display: flex;
  flex-direction: column;
}
.process-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  font-weight: 700;
  font-size: 15.5px;
  margin-left: 26px;
  margin-bottom: -25px;
  box-shadow: 0 10px 20px rgba(0, 31, 63, 0.2);
  transition: transform 0.3s ease-out;
}
.process-step:hover .process-step-number {
  transform: scale(1.1);
}
.process-step:nth-child(1) .process-step-number {
  background: linear-gradient(135deg, var(--en-gold-400), var(--en-gold-200));
  color: var(--en-gold-900);
}
.process-step:nth-child(2) .process-step-number {
  background: var(--en-gradient-teal-blue);
  color: #fff;
}
.process-step:nth-child(3) .process-step-number {
  background: linear-gradient(135deg, var(--en-purple-600), var(--en-purple-400));
  color: #fff;
}
.process-step:nth-child(4) .process-step-number {
  background: var(--en-gradient-navy-blue);
  color: #fff;
}

.process-step-card {
  position: relative;
  z-index: 1;
  flex: 1;
  background: #fff;
  border: 1px solid rgba(0, 31, 63, 0.07);
  border-radius: 20px;
  padding: 38px 22px 24px;
  box-shadow: 0 14px 32px rgba(0, 31, 63, 0.06);
  transition:
    transform 0.3s ease-out,
    box-shadow 0.3s ease-out;
}
.process-step:hover .process-step-card {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(0, 31, 63, 0.12);
}
.process-step-card h3 {
  font-size: 16.5px;
  margin-bottom: 8px;
}
.process-step-card p {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}

.process-step-arrow {
  position: absolute;
  top: 50%;
  right: -27px;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  z-index: 2;
  color: rgba(0, 31, 63, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.process-step-arrow svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 860px) {
  .process-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 40px;
  }
  .process-step-arrow {
    top: auto;
    bottom: -24px;
    right: auto;
    left: 26px;
    transform: rotate(90deg);
  }
}

/* ---- FAQ accordion (homepage) ---- */
.faq-section {
  padding: 72px 0 88px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  scroll-margin-top: 88px;
}
/* Same dot-grid texture as .audience-showcase / .process-section, tuned a
   touch lighter since it sits on --bg-soft rather than white/--blue-tint. */
.faq-section::before {
  content: '';
  position: absolute;
  inset: -40px;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(0, 31, 63, 0.045) 1.5px, transparent 1.5px);
  background-size: 34px 34px;
}
.faq-section > .wrap {
  position: relative;
  z-index: 1;
}

/* Split layout — a left intro panel (eyebrow/heading/icon + a "still stuck?
   contact us" link) paired with the accordion, echoing the copy+card
   pairing .lead-band uses further down, instead of a centered header
   sitting above a single narrow column. stretch (not flex-start) so the
   panel fills the same height as the taller accordion list beside it,
   rather than leaving bare section background hanging below it. */
.faq-layout {
  display: flex;
  gap: 40px;
  align-items: stretch;
}
.faq-intro {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  background: var(--blue-tint);
  border: 1px solid rgba(0, 31, 63, 0.07);
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 14px 32px rgba(0, 31, 63, 0.05);
  position: relative;
}
.faq-intro-top {
  position: relative;
  z-index: 1;
}
/* Pulled up past the panel's own 32px padding-top so the mascot peeks over
   the rounded top edge instead of sitting boxed inside it like the icon
   badge before it. */
.faq-intro-mascot {
  display: block;
  height: 150px;
  width: auto;
  margin: -8px 0 14px 0;
  filter: drop-shadow(0 12px 16px rgba(0, 31, 63, 0.16));
}
.faq-intro h2 {
  margin-top: 6px;
}
.faq-intro-cta {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--navy);
  border-top: 1px solid rgba(0, 31, 63, 0.09);
}
.faq-intro-cta svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease-out;
}
.faq-intro-cta:hover {
  color: var(--gold-text);
  /* Stays regular weight: the site-wide a:hover would otherwise bold it. */
  font-weight: 500;
  text-decoration: none;
}
.faq-intro-cta:hover svg {
  transform: translateX(4px);
}

.faq-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px 24px;
  transition:
    border-color 0.2s ease-out,
    box-shadow 0.3s ease-out,
    transform 0.3s ease-out;
}
.faq-item:hover {
  box-shadow: 0 10px 24px rgba(0, 31, 63, 0.08);
  transform: translateY(-2px);
}
.faq-item[open] {
  border-color: var(--navy);
  box-shadow: 0 12px 28px rgba(0, 31, 63, 0.08);
}
.faq-item[open]:hover {
  transform: none;
}
.faq-question {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-question-index {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
}
.faq-question-text {
  flex: 1;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--navy);
}
.faq-icon {
  flex-shrink: 0;
  color: var(--navy);
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  color: var(--gold-text);
}
/* Animated open/close: forcing `display: grid` here overrides the browser's
   default `details:not([open]) > *:not(summary) { display: none }` (author
   styles win over UA styles regardless of specificity), so the answer stays
   in the layout and its 0fr -> 1fr row-track transition can actually be
   seen — a plain height/max-height transition can't do this on <details>
   since the content is only ever laid out at its full natural height. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.35s ease;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.65;
}
.faq-item[open] .faq-answer {
  grid-template-rows: 1fr;
}
.faq-answer > p {
  min-height: 0;
  overflow: hidden;
  margin: 0 0 0 39px;
  padding-bottom: 20px;
}

@media (max-width: 780px) {
  .faq-layout {
    flex-direction: column;
    gap: 28px;
  }
  .faq-intro {
    position: static;
    flex: 0 0 auto;
  }
}

/* ---- Lead-capture band (homepage — inline "Đăng ký tư vấn" form) ---- */
/* scroll-margin-top matches the sticky header's own height (same offset
   .post-single-sidebar/headings use) so #dang-ky-tu-van jump-links — the
   header/hero/CTA "contact" buttons all point here now instead of a
   separate /contact/ page — don't land with the section's top tucked
   under the header. */
.lead-band {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  position: relative;
  overflow: hidden;
  scroll-margin-top: 88px;
}
/* Large, faint grid — kept well under the opacity of a "technical
   dashboard" grid so it reads as texture, not a UI element. */
.lead-band::before {
  content: '';
  position: absolute;
  inset: -32px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
}
.lead-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  padding: 88px 24px;
  position: relative;
  z-index: 1;
}
.lead-band-copy {
  max-width: 480px;
}
.lead-band .eyebrow {
  color: var(--gold);
}
.lead-band-copy h2 {
  color: #fff;
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 14px;
}
.lead-band-copy p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15.5px;
  margin-bottom: 24px;
}
.lead-band-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lead-band-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
}
.lead-band-points svg {
  width: 20px;
  height: 20px;
  color: var(--gold);
  flex-shrink: 0;
}

/* Mascot + card as one composed unit: mascot stands large in front of the
   card, overlapping its left edge, rather than the two sitting apart as
   separate blocks. */
.lead-band-form-group {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  max-width: 100%;
}

/* Decorative atmosphere layer — soft ambient glows only. The earlier
   orbit ring + particles + sparkles read as scattered clutter rather
   than atmosphere, so this stays to just the two blurred light pools. */
.lead-band-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.lead-band-glow {
  position: absolute;
  border-radius: 50%;
}
.lead-band-glow--mascot {
  left: -60px;
  bottom: -40px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(53, 200, 240, 0.32) 0%, rgba(53, 200, 240, 0) 70%);
}
.lead-band-glow--card {
  right: -40px;
  top: 10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(53, 200, 240, 0.14) 0%, rgba(53, 200, 240, 0) 72%);
}

/* Negative margin pulls the mascot in to rest right against the card —
   overlapping only into the card's own left padding, never the fields —
   so the two read as one unit instead of two things floating apart. */
.lead-band-mascot-wrap {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  margin-bottom: -8px;
  margin-right: -26px;
}
/* Soft white contact shadow grounding the mascot on the navy background —
   a navy-tinted drop-shadow would be invisible here, so it needs to be
   light instead of dark, and blurred rather than a hard-edged ellipse. */
.lead-band-mascot-wrap::after {
  content: '';
  position: absolute;
  left: 46%;
  bottom: -4px;
  width: 70%;
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 75%);
  filter: blur(4px);
  pointer-events: none;
}
.lead-band-mascot {
  display: block;
  width: 300px;
  max-width: 32vw;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 0 30px rgba(53, 200, 240, 0.3))
    drop-shadow(0 18px 18px rgba(0, 10, 25, 0.35));
}
.lead-band-card {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 420px;
  max-width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 31, 63, 0.06);
  border-radius: 24px;
  padding: 36px 40px 32px;
  /* Outer shadow lifts the white card off the navy band; the inset
       shadow on top of it is what actually gives the card its "pressed
       into the page" recessed feel. */
  box-shadow:
    0 24px 56px rgba(0, 10, 28, 0.4),
    inset 0 4px 26px rgba(0, 31, 63, 0.18);
}
.lead-band-card-header {
  margin-bottom: 22px;
}
.lead-band-card-header h3 {
  font-size: 21px;
  margin-bottom: 5px;
  color: var(--navy);
}
.lead-band-card-header p {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
}
.lead-band-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}
.lead-band-trust svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Fields keep the site's own clean underline style (same as the floating
   "Liên hệ nhanh" widget) rather than boxed/filled inputs, including its
   navy focus color — scoped only to widen the row gap a little and give
   the required-asterisk the brand gold, without touching the widget
   elsewhere. */
.lead-band-card .contact-widget-form {
  gap: 20px;
}
.lead-band-card .contact-widget-required {
  color: var(--gold-text);
}
.lead-band-card .contact-widget-form .btn-primary {
  min-height: 52px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.lead-band-card .contact-widget-form .btn-primary:hover {
  background: var(--navy-light);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 31, 63, 0.3);
}

@media (max-width: 1100px) {
  .lead-band-mascot {
    width: 230px;
  }
  .lead-band-mascot-wrap {
    margin-right: -20px;
  }
  .lead-band-card {
    width: 400px;
  }
}

@media (max-width: 900px) {
  .lead-band-inner {
    flex-direction: column;
    text-align: center;
    padding: 56px 24px;
    gap: 44px;
  }
  .lead-band-copy {
    max-width: 100%;
  }
  .lead-band-points {
    align-items: center;
  }
  .lead-band-form-group {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
  }
  .lead-band-mascot {
    width: 190px;
  }
  .lead-band-mascot-wrap {
    margin-right: 0;
    margin-bottom: -26px;
  }
  .lead-band-card {
    width: 100%;
    text-align: left;
  }
  .lead-band-glow--mascot {
    left: 50%;
    transform: translateX(-70%);
  }
  .lead-band-glow--card {
    display: none;
  }
}

@media (max-width: 480px) {
  .lead-band-mascot {
    width: 150px;
  }
  .lead-band-mascot-wrap {
    margin-bottom: -20px;
  }
  .lead-band-card {
    border-radius: 20px;
    padding: 28px 24px 24px;
  }
}

/* ---- News section (homepage) ---- */
.news-section {
  background: #fff;
  padding-bottom: 64px;
}
.news-section .post-grid {
  padding-top: 8px;
  padding-bottom: 0;
}

/* ---- Page hero (Pages, blog listing, archives, search) ---- */
/* ---- About page (page-gioi-thieu.php) ----
   Its own hero (not the shared .page-banner every other inner page uses) —
   the flagship brand page gets a bigger, richer treatment: a real
   headline statement, credibility stats right in the fold, a large
   mascot, on the same navy/grid/glow language as .hero-home so it still
   reads as "this site", just turned up. */
.about-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  position: relative;
  overflow: hidden;
  color: #fff;
}
.about-hero::before {
  content: '';
  position: absolute;
  inset: -32px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.about-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(53, 200, 240, 0.28) 0%, transparent 45%),
    radial-gradient(circle at 90% 82%, rgba(242, 201, 76, 0.18) 0%, transparent 42%);
}
.about-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 96px 24px 80px;
  position: relative;
  z-index: 1;
}
.about-hero-copy {
  max-width: 620px;
}
.about-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  background: rgba(242, 201, 76, 0.12);
  border: 1px solid rgba(242, 201, 76, 0.3);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12.5px;
}
.about-hero h1 {
  color: #fff;
  font-size: clamp(36px, 5.4vw, 60px);
  line-height: 1.12;
  margin: 20px 0 20px;
  white-space: pre-line;
}
.about-hero p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 17px;
  line-height: 1.65;
  max-width: 540px;
  margin: 0 0 36px;
}
.about-hero-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.about-hero-mini-stat strong {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
}
.about-hero-mini-stat span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.about-hero-visual {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.about-hero-mascot {
  position: relative;
  z-index: 1;
  width: 340px;
  max-width: 34vw;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(0, 10, 25, 0.4));
}
.about-hero-glow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 320px;
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(53, 200, 240, 0.35) 0%, transparent 70%);
  pointer-events: none;
}
/* Same "galaxy" backdrop art as .hero-home-orbit, centered behind the
   mascot so the hero reads as the same character/world as the homepage,
   not a plainer re-skin — already navy-friendly art, so unlike the
   homepage's white-background copy it needs no brightness/saturation
   correction, just enough opacity to sit behind the mascot as atmosphere
   rather than compete with it. */
.about-hero-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-44%, -46%);
  /* .hero-home-orbit's 900px art sits inside a dedicated 600px-wide
       .hero-home-mark box, giving it room on every side before the section
       edge. .about-hero-visual has no such reserved box — it's sized to
       the mascot alone and pushed close to the section's right edge — so
       matching the homepage's art/mascot ratio literally (930px) let the
       ring get clipped asymmetrically by the section edge on real (non-4K)
       viewports, reading as "off-center" rather than clipped. Sized down
       so the full ring stays clear of that edge at common widths. */
  width: 720px;
  max-width: none;
  height: auto;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 900px) {
  .about-hero-inner {
    flex-direction: column;
    text-align: center;
    padding: 72px 24px 56px;
  }
  .about-hero-copy {
    max-width: 100%;
  }
  .about-hero p {
    margin-left: auto;
    margin-right: auto;
  }
  .about-hero-mini-stats {
    justify-content: center;
  }
  .about-hero-mascot {
    width: 220px;
    max-width: 60vw;
  }
  .about-hero-orbit {
    width: 460px;
  }
}

/* Full-width brand statement — a deliberate dramatic pause between the
   numbers/story section and the more conventional card grids below,
   the kind of "big declarative sentence" large-company about pages use. */
.about-quote-section {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  position: relative;
  overflow: hidden;
  padding: 96px 0;
}
.about-quote-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(53, 200, 240, 0.2) 0%, transparent 55%);
}
.about-quote {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.about-quote-mark {
  display: block;
  font-size: 72px;
  line-height: 1;
  color: var(--gold);
  font-weight: 800;
  margin-bottom: 8px;
  font-family: Georgia, serif;
}
.about-quote-text {
  color: #fff;
  font-size: clamp(21px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 24px;
}
.about-quote-attribution {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14.5px;
  font-weight: 600;
}
.about-quote-attribution::before {
  content: '— ';
}

/* Same dot-grid texture .audience-showcase/.process-section already use —
   ties these sections into that same rhythm instead of sitting as flat,
   textureless blocks. */
.about-pillars-section,
.about-why-section {
  position: relative;
  overflow: hidden;
}
.about-pillars-section::before,
.about-why-section::before {
  content: '';
  position: absolute;
  inset: -40px;
  pointer-events: none;
  background-image: radial-gradient(rgba(0, 31, 63, 0.05) 1.5px, transparent 1.5px);
  background-size: 34px 34px;
}
/* Pillars sits on navy — same dark dots the hero/quote sections use. */
.about-pillars-section::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);
}
.about-pillars-section .wrap,
.about-why-section .wrap {
  position: relative;
  z-index: 1;
}

.about-overview-section {
  padding: 80px 0 0;
  background: #fff;
}
/* Mascot first, copy second — mirrored from .about-hero (copy-left/
   mascot-right) so the two sections right below each other don't repeat
   the exact same layout. */
.about-overview {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.about-overview-copy h2 {
  margin: 10px 0 20px;
  font-size: clamp(26px, 3.4vw, 36px);
}
.about-overview-copy p {
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 16px;
}
.about-overview-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-overview-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(53, 200, 240, 0.16) 0%, transparent 65%);
  pointer-events: none;
}
.about-overview-visual img {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 24px 32px rgba(0, 31, 63, 0.16));
}

.about-stats-section {
  padding: 56px 0 88px;
  background: #fff;
}
.about-stats {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border-radius: 24px;
  padding: 44px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  box-shadow: 0 24px 48px rgba(0, 31, 63, 0.18);
}
.about-stat {
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0 12px;
}
.about-stat:last-child {
  border-right: none;
}
.about-stat-number {
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 10px;
}
.about-stat-label {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
  line-height: 1.4;
}

/* Shared CTA link — still used standalone inside .about-products-panel
   (the old .about-card wrapper it was designed for is gone, this is now
   the only user of it). */
.about-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}
.about-card-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease-out;
}

/* ---- "Sứ mệnh, tầm nhìn & giá trị" — navy pillars panel ----
   A full-bleed dark panel with 3 columns split by hairlines and giant
   ghost numerals, not another white card grid — reads as a deliberate,
   heavier "statement" section between the quote above and the founder
   spotlight below. */
.about-pillars-section {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  padding: 96px 0;
}
.about-pillars-section .eyebrow {
  color: var(--gold);
  background: rgba(242, 201, 76, 0.12);
  border: 1px solid rgba(242, 201, 76, 0.3);
  border-radius: 999px;
  padding: 7px 16px;
}
.about-pillars-section .section-header h2 {
  color: #fff;
}
.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 20px;
}
.about-pillar {
  position: relative;
  padding: 8px 40px;
}
.about-pillar + .about-pillar {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.about-pillar-index {
  position: absolute;
  top: -18px;
  right: 24px;
  font-size: 64px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.07);
  line-height: 1;
  font-family: Georgia, serif;
}
.about-pillar-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(242, 201, 76, 0.14);
  color: var(--gold);
  margin-bottom: 22px;
}
.about-pillar h3 {
  color: #fff;
  font-size: 19px;
  margin-bottom: 10px;
}
.about-pillar p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0;
}

/* ---- Founder spotlight ----
   The portrait sits directly on the page, layered on top of an offset
   navy panel behind it — the "executive profile" treatment large
   corporate sites use — instead of being caged inside a small rounded
   box floating inside a white card. */
.about-founder-section {
  padding: 96px 0;
  background: #fff;
}
.about-founder {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items: center;
}
.about-founder-visual {
  position: relative;
  max-width: 380px;
  padding: 14px 26px 26px 0;
}
/* Rotated gold panel behind the card — a deliberate "tilted stack" beat
   instead of another perfectly axis-aligned rectangle, plus the circular
   badge overlapping the corner — the two "phá cách" touches on top of
   the now-centered, evenly-padded portrait. */
.about-founder-backdrop {
  position: absolute;
  inset: 0 12px 0 26px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--en-gold-200) 100%);
  border-radius: 26px;
  transform: rotate(-4deg);
  z-index: 0;
}
.about-founder-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border-radius: 24px;
  padding: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30px 60px rgba(0, 31, 63, 0.28);
}
/* The source photo's white backdrop meets the card's navy at a hard
   rectangle otherwise — fading the photo's own bottom edge to transparent
   lets the navy show through gradually, so the crop reads as an
   intentional vignette instead of a visible cut line. */
.about-founder-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.about-founder-copy h2 {
  margin: 12px 0 6px;
  font-size: clamp(24px, 2.8vw, 30px);
}
.about-founder-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-text);
  margin: 0 0 22px;
}
.about-founder-copy p {
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.8;
  margin: 0 0 16px;
}
.about-founder-quote {
  margin: 24px 0 0;
  padding-left: 22px;
  border-left: 3px solid var(--gold);
  font-style: italic;
  font-size: 16px;
  color: var(--navy);
  line-height: 1.65;
}

/* ---- "Hành trình phát triển" — vertical alternating timeline ----
   A center spine with milestones zig-zagging left/right, each pinned by
   an icon node — the classic "company history" treatment, and visibly
   not the horizontal arrow-steps homepage's .process-grid already uses. */
.about-timeline-section {
  padding: 96px 0;
  background: #fff;
}
.about-timeline {
  position: relative;
  max-width: 860px;
  margin: 20px auto 0;
}
.about-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 31, 63, 0.16) 8%,
    rgba(0, 31, 63, 0.16) 92%,
    transparent
  );
  transform: translateX(-50%);
}
.about-timeline-item {
  position: relative;
  width: 50%;
  padding: 0 48px 64px 0;
}
.about-timeline-item:last-child {
  padding-bottom: 0;
}
.about-timeline-item:nth-child(even) {
  margin-left: 50%;
  padding: 0 0 64px 48px;
}
.about-timeline-node {
  position: absolute;
  top: 0;
  right: -23px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--navy);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: 0 0 0 6px #fff;
}
.about-timeline-item:nth-child(even) .about-timeline-node {
  right: auto;
  left: -23px;
}
.about-timeline-node svg {
  width: 19px;
  height: 19px;
}
.about-timeline-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 0 10px 26px rgba(0, 31, 63, 0.06);
}
.about-timeline-tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-text);
  background: rgba(242, 201, 76, 0.12);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 10px;
}
.about-timeline-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.about-timeline-card p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ---- "Vì sao chọn Edunauts" — numbered row list ----
   Full-width hairline rows instead of boxed cards, so this section reads
   as an editorial checklist rather than a third repeat of the card grid. */
.about-why-section {
  padding: 88px 0;
  background: var(--blue-tint);
}
.about-why-list {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 12px auto 0;
}
.about-why-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: flex-start;
  gap: 24px;
  padding: 30px 8px;
  border-bottom: 1px solid rgba(0, 31, 63, 0.1);
}
.about-why-row:first-child {
  padding-top: 4px;
}
.about-why-row:last-child {
  border-bottom: none;
}
.about-why-row-index {
  font-size: 15px;
  font-weight: 800;
  color: rgba(0, 31, 63, 0.22);
  line-height: 1;
  padding-top: 5px;
}
.about-why-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 6px 16px rgba(0, 31, 63, 0.08);
}
.about-why-list > :nth-child(4n + 1) .about-why-row-icon {
  color: var(--en-info-600);
}
.about-why-list > :nth-child(4n + 2) .about-why-row-icon {
  color: var(--en-teal-600);
}
.about-why-list > :nth-child(4n + 3) .about-why-row-icon {
  color: var(--en-purple-600);
}
.about-why-list > :nth-child(4n + 4) .about-why-row-icon {
  color: var(--en-gold-700);
}
.about-why-row-body h3 {
  font-size: 17px;
  margin-bottom: 6px;
}
.about-why-row-body p {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ---- Product ecosystem — alternating full-width showcase panels ----
   Big left/right-flipping rows (icon medallion + copy) instead of a
   third card grid, closer to how large SaaS/enterprise sites showcase a
   short, real product line-up than a grid built for many items. */
.about-products-section {
  padding: 88px 0 96px;
  background: #fff;
}
.about-products-panels {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 12px;
}
.about-products-panel {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 44px;
  border-radius: 24px;
  background: var(--blue-tint);
  border: 1px solid rgba(0, 31, 63, 0.06);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.25s ease-out,
    box-shadow 0.25s ease-out;
}
.about-products-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(0, 31, 63, 0.1);
  text-decoration: none;
}
.about-products-panel:nth-child(even) {
  flex-direction: row-reverse;
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 10px 26px rgba(0, 31, 63, 0.05);
}
.about-products-panel-visual {
  position: relative;
  flex-shrink: 0;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.about-products-panel-visual::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle at 30% 30%, rgba(242, 201, 76, 0.35), transparent 60%);
}
.about-products-panel-icon {
  position: relative;
  z-index: 1;
  color: #fff;
}
.about-products-panel-icon svg {
  width: 52px;
  height: 52px;
}
.about-products-panel-body {
  flex: 1;
}
.about-products-panel-index {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gold-text);
  margin-bottom: 10px;
}
.about-products-panel-body h3 {
  font-size: 23px;
  margin-bottom: 12px;
}
.about-products-panel-body p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 16px;
  max-width: 540px;
}
.about-products-panel:hover .about-card-link svg {
  transform: translateX(4px);
}

/* ---- Partners strip ----
   Deliberately illustrative, not real logos yet — dashed placeholder
   tiles say so visually, plus an explicit note underneath, rather than
   implying named schools/partners that haven't been confirmed. */
.about-partners-section {
  padding: 88px 0 96px;
  background: #fff;
}
.about-partners-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: 44px;
}
.about-partners-tile {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(0, 31, 63, 0.16);
  border-radius: 14px;
  background: var(--blue-tint);
  color: rgba(0, 31, 63, 0.32);
}
.about-partners-tile svg {
  width: 28px;
  height: 28px;
}
.about-partners-note {
  text-align: center;
  margin: 28px auto 0;
  max-width: 520px;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .about-overview {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-overview-visual img {
    max-width: 220px;
  }
  .about-stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }
  .about-stat:nth-child(2) {
    border-right: none;
  }
  .about-stat:nth-child(1),
  .about-stat:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 20px;
  }

  .about-pillars {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-pillar {
    padding: 0;
  }
  .about-pillar + .about-pillar {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 32px;
  }
  .about-pillar-index {
    top: -10px;
    right: 0;
  }

  .about-founder {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .about-founder-visual {
    max-width: 260px;
    margin: 0 auto;
    padding: 10px 18px 18px 0;
  }
  .about-founder-backdrop {
    inset: 0 8px 0 18px;
  }
  .about-founder-quote {
    text-align: left;
  }

  .about-products-panel,
  .about-products-panel:nth-child(even) {
    flex-direction: column;
    text-align: center;
  }
  .about-products-panel-body p {
    margin-left: auto;
    margin-right: auto;
  }

  .about-partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 700px) {
  .about-timeline::before {
    left: 22px;
  }
  .about-timeline-item,
  .about-timeline-item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding: 0 0 48px 62px;
  }
  .about-timeline-node,
  .about-timeline-item:nth-child(even) .about-timeline-node {
    left: 0;
    right: auto;
  }
}
@media (max-width: 640px) {
  .about-why-row {
    grid-template-columns: auto 1fr;
    gap: 14px;
    padding: 24px 4px;
  }
  .about-why-row-index {
    display: none;
  }
}
@media (max-width: 480px) {
  .about-stats {
    grid-template-columns: 1fr;
  }
  .about-stat {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 20px;
  }
  .about-stat:last-child {
    border-bottom: none;
  }

  .about-partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Contact page (page-lien-he.php) ----
   Deliberately NOT a grid of decorative info tiles — plain text/links on
   the left (address/phone/email read like a real letterhead, not a
   dashboard widget), map and social folded into that same flowing column.
   The one card on the page is the form itself, which is a real input
   surface, not decoration. */
.contact-page {
  padding: 64px 0 88px;
}
/* stretch (not start) — both columns take the height of the taller one,
   and .contact-page-map below is flex:1 to actually fill that stretched
   space, so its bottom edge lands exactly on the form card's bottom edge
   instead of stopping short at its own natural content height. */
.contact-page-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: stretch;
}
.contact-page-info {
  display: flex;
  flex-direction: column;
}

.contact-page-info h2 {
  margin: 8px 0 12px;
  font-size: clamp(24px, 3vw, 30px);
}
.contact-page-info > p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 440px;
  margin: 0 0 32px;
}

.contact-page-details {
  margin: 0 0 28px;
}
.contact-page-detail {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.contact-page-details .contact-page-detail:last-child {
  border-bottom: 1px solid var(--border);
}
.contact-page-detail dt {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}
.contact-page-detail dt svg {
  width: 16px;
  height: 16px;
  color: var(--navy);
  flex-shrink: 0;
}
.contact-page-detail dd {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--navy);
}
.contact-page-detail dd a {
  color: inherit;
}
.contact-page-detail dd a:hover {
  color: var(--gold-text);
}

.contact-page-social {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
}
.contact-page-social a {
  display: inline-flex;
  transition: transform 0.2s ease-out;
}
.contact-page-social a:hover {
  transform: translateY(-3px);
}
.contact-page-social svg {
  width: 32px;
  height: 32px;
}

.contact-page-map {
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  min-height: 260px;
}
.contact-page-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
}

/* Mascot + card as one grounded unit — same composition as .lead-band
   (mascot standing beside the card, bottom-aligned, overlapping its left
   edge) instead of floating alone above the card in open space, which
   read as disconnected from everything around it. This also moves the
   mascot's height off the card's own column (previously stacked on top of
   it, making the right side taller than the left) onto the horizontal
   axis instead, so the two columns land much closer in height. */
.contact-page-form-wrap {
  display: flex;
  align-items: flex-end;
}
.contact-page-mascot-wrap {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-right: -28px;
  margin-bottom: -6px;
}
.contact-page-mascot-wrap::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 76%;
  height: 20px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 31, 63, 0.16) 0%, rgba(0, 31, 63, 0) 75%);
  filter: blur(3px);
  pointer-events: none;
}
.contact-page-mascot {
  display: block;
  height: 220px;
  width: auto;
  filter: drop-shadow(0 14px 18px rgba(0, 31, 63, 0.18));
  pointer-events: none;
}
.contact-page-form-card {
  position: relative;
  z-index: 0;
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(0, 31, 63, 0.07);
  border-radius: 24px;
  padding: 40px;
  /* Recessed/"pressed into the page" look — same inset recipe
       .lead-band-card already uses on its own white card. */
  box-shadow: inset 0 4px 26px rgba(0, 31, 63, 0.18);
}
.contact-page-form-card h3 {
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--navy);
}
.contact-page-form-card > p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 28px;
}
.contact-page-form {
  gap: 24px;
}
.contact-page-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.contact-page-form .btn-primary {
  min-height: 52px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
}
.contact-page-form .btn-primary:hover {
  background: var(--navy-light);
  box-shadow: 0 10px 24px rgba(0, 31, 63, 0.3);
}

/* The subject field can't use the other fields' floating-label trick (no
   :placeholder-shown equivalent for a select, and the themed control always
   shows a value) — so the label is simply pinned in the *floated* position
   the neighbouring fields animate to: same 12px/700 navy, same top:0. That
   is what keeps "Chủ đề" aligned with "Số điện thoại" beside it in the row.
   Extra-specific selector (.contact-page-form ...), not just
   .contact-widget-field-select label — the generic floating-label rule below
   (.contact-widget-field label, position:absolute) has equal specificity and
   is declared later in this file, so it would otherwise win the tie by
   source order and drop the label back down over the control. */
.contact-page-form .contact-widget-field-select label {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  pointer-events: none;
}
/* ---- Native <select> — the no-JavaScript fallback ----
   A native <select> brings its own background, its own border, its own font
   metrics and its own arrow — four things that are not this form's. Next to
   the underlined, transparent text fields above it, that reads as a control
   borrowed from another page, which is exactly how it looked.

   `appearance: none` drops all four, and everything is restated to match the
   inputs: same 15px face, same 1.5px underline, same transparent ground, same
   navy on focus. The arrow is drawn back as a background SVG in --text-muted,
   the same chevron shape the rest of the theme uses.

   What none of this could reach is the *open* list, which the operating
   system paints (square panel, system font, system-blue highlight) — the
   half of the control that never matched the design. assets/js/select.js
   replaces the whole thing with .edunauts-select below and hides this one;
   these rules are what renders when that script doesn't run. */
.contact-widget-field-select select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  /* Room on the right for the chevron, and the same 22px top reserve as the
     text inputs — the label sits pinned in the floated position above the
     control, exactly where a text field's floated label lands. */
  padding: 22px 30px 8px 0;
  border: none;
  border-bottom: 1.5px solid var(--border);
  border-radius: 0;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* Measured from the bottom, not centred: the 22px top reserve above makes
     the box taller than its text, and a centred chevron would float above
     the value it belongs to. */
  background-position: right 2px bottom 11px;
  background-size: 16px 16px;
  transition: border-color 0.15s ease;
}
.contact-widget-field-select select:focus {
  outline: none;
  border-bottom-color: var(--navy);
}
.contact-widget-field-select select:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}
.contact-widget-field-select select:hover {
  border-bottom-color: var(--navy);
}
/* Windows and some Linux desktops paint the open list from the system theme,
   which can land white-on-white. Naming both ends keeps it readable. */
.contact-widget-field-select select option {
  color: var(--text);
  background-color: #fff;
}
/* IE/Edge legacy drew a second arrow of their own next to ours. */
.contact-widget-field-select select::-ms-expand {
  display: none;
}
/* `display: block` above outranks the user agent's [hidden] { display: none },
   so without this the native control stays on screen next to the themed one
   the script builds — hiding it is the whole point of that swap. */
.contact-widget-field-select select[hidden] {
  display: none;
}

/* ---- Themed select (built by assets/js/select.js) ----
   Closed, it is the same underlined field as its neighbours. Open, the list
   is finally ours: white panel, theme font, navy-tinted hover and a gold bar
   on the chosen row — the brand's own "navy ground, gold accent" pairing
   rather than the system highlight. */
.edunauts-select {
  position: relative;
}
.edunauts-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  /* Matches the text inputs exactly — 22px of top padding under the
     floated label, 8px below — so both cells of the row line up. */
  padding: 22px 2px 8px 0;
  margin: 0;
  border: none;
  border-bottom: 1.5px solid var(--border);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.edunauts-select-trigger:hover,
.edunauts-select.is-open .edunauts-select-trigger {
  border-bottom-color: var(--navy);
}
.edunauts-select-trigger:focus {
  outline: none;
  border-bottom-color: var(--navy);
}
.edunauts-select-trigger:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}
.edunauts-select-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edunauts-select-arrow {
  flex: none;
  display: flex;
  color: var(--text-muted);
  transition:
    transform 0.18s ease,
    color 0.15s ease;
}
.edunauts-select.is-open .edunauts-select-arrow {
  transform: rotate(180deg);
  color: var(--navy);
}
.edunauts-select-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0, 31, 63, 0.1);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 31, 63, 0.18);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
/* Flipped by the script when the panel would run past the bottom of the
   viewport — a form this far down the page is the normal case. */
.edunauts-select.is-above .edunauts-select-list {
  top: auto;
  bottom: calc(100% + 6px);
  transform: translateY(6px);
}
.edunauts-select.is-open .edunauts-select-list {
  opacity: 1;
  transform: translateY(0);
}
.edunauts-select-list[hidden] {
  display: none;
}
.edunauts-select-option {
  position: relative;
  padding: 10px 14px 10px 16px;
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text);
  cursor: pointer;
}
/* One highlight for both the mouse and the keyboard — the script moves
   .is-active on hover as well as on arrow keys, so there is never a second
   competing highlight the way the system list had. */
.edunauts-select-option.is-active {
  background: rgba(0, 31, 63, 0.06);
  color: var(--navy);
}
.edunauts-select-option[aria-selected='true'] {
  font-weight: 700;
  color: var(--navy);
}
.edunauts-select-option[aria-selected='true']::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--gold);
}
.edunauts-select-option[aria-disabled='true'] {
  color: var(--text-muted);
  cursor: default;
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .edunauts-select-list,
  .edunauts-select-arrow {
    transition: none;
  }
}

@media (max-width: 900px) {
  .contact-page-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  /* Side-by-side only had room on wide screens — stacked (mascot
       centered above) once the whole layout itself stacks to one column. */
  .contact-page-form-wrap {
    flex-direction: column;
    align-items: center;
  }
  .contact-page-mascot-wrap {
    margin: 0 0 -16px;
  }
  .contact-page-mascot-wrap::after {
    width: 60%;
  }
  .contact-page-form-card {
    padding: 32px 24px;
    width: 100%;
  }
  .contact-page-mascot {
    height: 170px;
  }
}
@media (max-width: 480px) {
  .contact-page-form-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .contact-page-detail {
    flex-direction: column;
    gap: 4px;
  }
}

/* ---- Blog index — featured section (page 1 only) ---- */
.blog-featured {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  margin: 40px 0 48px;
}
.blog-featured-main {
  display: block;
  color: inherit;
}
.blog-featured-main-thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--bg-soft);
}
.blog-featured-main-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.blog-featured-main:hover .blog-featured-main-thumb img {
  transform: scale(1.03);
}
.blog-featured-main-title {
  font-size: 26px;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--navy);
}
.blog-featured-main:hover .blog-featured-main-title {
  color: var(--gold-text);
  font-weight: 700;
}
.blog-featured-main-excerpt {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-featured-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13.5px;
  color: var(--text-muted);
}
.blog-featured-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.blog-featured-meta-item svg {
  width: 14px;
  height: 14px;
  color: var(--gold-text);
  flex-shrink: 0;
}
.blog-featured-meta--side {
  font-size: 12.5px;
  margin-bottom: 6px;
}
.blog-featured-meta--side svg {
  width: 13px;
  height: 13px;
}

.blog-featured-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.blog-featured-side-item {
  display: block;
  color: inherit;
}
.blog-featured-side-thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--bg-soft);
}
.blog-featured-side-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-featured-side-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 6px;
  color: var(--navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-featured-side-excerpt {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-featured-side-item:hover .blog-featured-side-title {
  color: var(--gold-text);
  font-weight: 700;
}

@media (max-width: 782px) {
  .blog-featured {
    grid-template-columns: 1fr;
  }
}

/* ---- Blog toolbar (search + category filter, blog listing/archive/search) ----
   Every control on this row is cut to one spec: the same height
   (--toolbar-control-h, never under the 44px touch minimum), the same pill
   radius, the same 600-weight label. Without that it read as a square search
   box parked next to round filter pills — two different form languages in
   one strip, which is what made the row look unfinished on a small screen. */
.blog-toolbar {
  --toolbar-control-h: 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
/* Wider + free to grow — the fixed 300px cap made it look cramped next to
   the button; this fills the row's own available space instead. */
.blog-toolbar .search-form {
  margin: 0;
  flex: 1 1 320px;
  max-width: 480px;
  gap: 10px;
}
.blog-toolbar .search-form input[type='search'] {
  /* iOS Safari paints its own rounding + inner shadow on search inputs
     unless the appearance is reset. */
  -webkit-appearance: none;
  appearance: none;
  /* Inputs carry an intrinsic min-width; without this the field refuses to
     shrink and shoves the submit button out of the row on narrow screens. */
  min-width: 0;
  height: var(--toolbar-control-h);
  padding: 0 20px;
  border-radius: 999px;
  /* 16px exactly: anything smaller and mobile Safari zooms the whole page
     in when the field takes focus. */
  font-size: 16px;
}
.blog-toolbar .search-form button {
  flex-shrink: 0;
  height: var(--toolbar-control-h);
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14.5px;
  white-space: nowrap;
}

/* One "Tất cả" badge (quick reset) + one custom dropdown for everything
   else — scales to any number of categories without a row of pills
   wrapping into a second/third line. The dropdown is a real
   button + styled panel (not a native <select>) so its open menu can
   actually match the badge's pill look — a native select's popup is
   rendered by the OS/browser and can't be styled to match. */
.blog-filter-cats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.blog-filter-badge {
  display: inline-flex;
  align-items: center;
  height: var(--toolbar-control-h, 46px);
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1;
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease;
}
.blog-filter-badge:hover {
  border-color: var(--navy);
  color: var(--navy);
  text-decoration: none;
}
.blog-filter-badge.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.blog-filter-dropdown {
  position: relative;
}
.blog-filter-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--toolbar-control-h, 46px);
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.blog-filter-dropdown-btn:hover,
.blog-filter-dropdown[data-dropdown] .blog-filter-dropdown-btn[aria-expanded='true'] {
  border-color: var(--navy);
}
/* A long category name truncates rather than stretching the pill past the
   edge of a phone screen. */
.blog-filter-dropdown-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-filter-dropdown-btn svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transition: transform 0.18s ease;
}
.blog-filter-dropdown-btn[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.blog-filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 32px rgba(0, 31, 63, 0.14);
  padding: 6px;
  /* A site with a lot of categories would otherwise run the panel off the
     bottom of a short phone viewport. */
  max-height: min(340px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.blog-filter-dropdown-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
/* A little air between options, so a highlighted row (active navy, hover
   tint) never sits flush against the next one. A margin, not `gap` on the
   menu: making the menu a flex container would override its [hidden]
   attribute and leave it open. */
.blog-filter-dropdown-option + .blog-filter-dropdown-option {
  margin-top: 4px;
}
.blog-filter-dropdown-option span {
  color: var(--text-muted);
  font-weight: 500;
}
.blog-filter-dropdown-option:hover {
  background: var(--blue-tint);
  text-decoration: none;
}
.blog-filter-dropdown-option.is-active {
  background: var(--navy);
  color: #fff;
}
.blog-filter-dropdown-option.is-active span {
  color: rgba(255, 255, 255, 0.7);
}

/* Tablet portrait and down: the search field and the filters stop competing
   for one row. Each gets its own full-width line, so neither ends up
   squeezed to a stub — and the toolbar keeps a deliberate two-row shape
   instead of whatever the flex wrap happened to produce. */
@media (max-width: 860px) {
  .blog-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 24px 0;
  }
  .blog-toolbar .search-form {
    flex: 1 1 auto;
    max-width: none;
  }
  /* The reset badge keeps left, the dropdown keeps right — the same
     relationship the full-width row has, rather than one pill stretched
     across half a tablet with a single short label rattling inside it. */
  .blog-filter-cats {
    justify-content: space-between;
  }
  .blog-filter-dropdown {
    min-width: 0;
  }
  .blog-filter-dropdown-btn {
    justify-content: space-between;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .blog-toolbar {
    --toolbar-control-h: 44px;
    padding: 20px 0;
  }
  .blog-toolbar .search-form {
    gap: 8px;
  }
  .blog-toolbar .search-form input[type='search'] {
    padding: 0 16px;
  }
  .blog-toolbar .search-form button {
    padding: 0 16px;
    font-size: 14px;
  }
  .blog-filter-badge,
  .blog-filter-dropdown-btn {
    padding: 0 16px;
    font-size: 13.5px;
  }
  /* Phone: no room left to keep the dropdown at its own width, so it takes
     whatever the reset badge leaves and the menu spans the same box. */
  .blog-filter-dropdown {
    flex: 1 1 auto;
  }
  .blog-filter-dropdown-btn {
    width: 100%;
  }
  .blog-filter-dropdown-menu {
    left: 0;
    right: 0;
  }
}

/* ---- Post grid / cards ---- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  padding-bottom: 56px;
}

/* ---- Post carousel (Blog listing — single scrolling row instead of
   wrapping to multiple rows) ---- */
.post-carousel {
  position: relative;
  padding: 0 4px;
}
.post-carousel::before,
.post-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 72px;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.post-carousel::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(255, 255, 255, 0) 100%);
}
.post-carousel::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 0%, rgba(255, 255, 255, 0) 100%);
}
.post-carousel.at-start::before {
  opacity: 0;
}
.post-carousel.at-end::after {
  opacity: 0;
}
.post-grid--carousel {
  display: flex;
  grid-template-columns: none;
  flex-wrap: nowrap;
  align-items: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* Setting overflow-x forces the browser to compute overflow-y as "auto"
   too (a CSS spec quirk — visible only stays visible when both axes are
   visible), so this track silently clips vertically as well. Each card
   slides in from ±30px via the scroll-reveal transform (template-parts/
   content-card.php's data-reveal) — without slack here that in-progress
   offset gets cropped by this now-vertically-clipping track, which looks
   like the card/badge is cut off. Padding absorbs the transform's full
   range so nothing crosses the clip edge; the negative margin cancels the
   padding's effect on outer spacing. (Selector scoped through .post-
   carousel, not just .post-grid--carousel, so it outranks the .news-
   section .post-grid padding override above.) */
.post-carousel .post-grid--carousel {
  padding: 32px 0;
  margin: -32px 0;
}
.post-grid--carousel::-webkit-scrollbar {
  display: none;
}
/* No scroll-snap here on purpose: it fights the continuous rAF-driven
   autoplay drift below — the browser corrects any sub-card scrollLeft write
   straight back to the nearest snap point, which silently cancels the
   animation every frame. The arrow buttons already jump exactly one card
   width themselves, so nothing relies on CSS snapping for alignment. */
.post-grid--carousel .post-card {
  flex: 0 0 320px;
  /* .post-card's own height:100% is meant for the CSS-grid listing page
       (equal-height rows) — inside this flex row it creates a circular
       height dependency (card wants 100% of a container whose own height
       is based on the card), which the browser resolves by under-sizing
       the row and clipping the top of every card (badge included). Cards
       here just size to their own content instead. */
  height: auto;
}
.post-carousel-arrow {
  position: absolute;
  top: calc(50% - 28px);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  z-index: 2;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
}
.post-carousel-arrow svg {
  width: 18px;
  height: 18px;
}
.post-carousel-arrow:hover:not(:disabled) {
  background: var(--navy);
  color: #fff;
}
.post-carousel-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.post-carousel-prev {
  left: -18px;
}
.post-carousel-next {
  right: -18px;
}
.post-carousel-prev svg {
  transform: rotate(90deg);
}
.post-carousel-next svg {
  transform: rotate(-90deg);
}

@media (max-width: 700px) {
  .post-carousel-arrow {
    display: none;
  }
  .post-grid--carousel {
    gap: 20px;
  }
  .post-grid--carousel .post-card {
    flex-basis: 82%;
  }
}
.post-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
  height: 100%; /* stretch to the grid row's tallest card so every card in
                     a row ends the same height, regardless of its own content */
}
.post-card:hover {
  box-shadow: 0 12px 28px rgba(0, 31, 63, 0.1);
  transform: translateY(-2px);
}
.post-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}
.post-card-link:hover {
  text-decoration: none;
}
.post-card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-soft);
  flex-shrink: 0;
}
.post-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Fallback for posts with no featured image set — brand navy gradient with
   the white logo mark (a soft, low-opacity glow only, for depth — strong
   enough to still read as a "white gradient" background per spec, but not
   so bright it washes out the white logo sitting on top of it). */
.post-card-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
}
.post-card-thumb-fallback img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.post-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.post-card-cat {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
  background: var(--gold);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}
/* Corner-ribbon variant, overlaid on the thumbnail image itself (flush
   against the card's own rounded corner) instead of sitting in the body.
   Bleeds 2px past the top/left edge (with matching extra padding on those
   sides) so the card's own rounded-corner clip always has full gold
   coverage to cut against — otherwise sub-pixel rounding differences
   between the badge's box and the parent's corner curve can leave a
   hairline sliver of the navy thumbnail showing through at the corner. */
.post-card-cat-ribbon {
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 1;
  margin-bottom: 0;
  border-radius: 0 0 6px 0;
  padding: 6px 10px 4px 12px;
}
.post-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-muted);
}
.post-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.post-card-meta-item svg {
  width: 13px;
  height: 13px;
  color: var(--gold-text);
  flex-shrink: 0;
}
.post-card-author {
  font-weight: 600;
  color: var(--text);
}
.post-card-date {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.post-card-title {
  font-size: 19px;
  line-height: 1.3;
  margin: 8px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.post-card-excerpt {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.5em;
}
.post-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--navy);
  font-size: 14px;
  margin-top: auto;
  padding-top: 4px;
}
.post-card:hover .post-card-more {
  color: var(--gold-text);
  font-weight: 700;
}

.no-results {
  padding: 60px 0;
  text-align: center;
  color: var(--text-muted);
}

/* ---- Pagination ---- */
.pagination,
.navigation.pagination {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 24px 0 56px;
  flex-wrap: wrap;
}
/* Plain text page numbers (no border/fill) except the current one, which
   gets the same navy->navy-light gradient used for .process-step-number
   and the persona-card accents — ties pagination into that same visual
   language instead of a flat navy circle. No shadow — a page-number pill
   doesn't need to look "lifted" the way an actual card does. */
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition:
    background-color 0.2s ease-out,
    color 0.2s ease-out;
}
.pagination .page-numbers.current {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
}
.pagination .page-numbers:hover:not(.current):not(.dots) {
  background: var(--blue-tint);
  color: var(--navy);
  text-decoration: none;
}
.pagination .page-numbers.dots {
  min-width: auto;
  padding: 0 4px;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
  width: 40px;
  padding: 0;
  border: 1px solid var(--border);
  color: var(--navy);
}
.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover {
  border-color: var(--navy);
}
.pagination .page-numbers.prev svg,
.pagination .page-numbers.next svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* ---- Single post / page ---- */
.post-single {
  padding-bottom: 32px;
}

/* Two-column layout (article + "latest posts" sidebar), single posts only —
   pages have their own document layout (page.php, .page-doc below).
   Top spacing lives on the shared grid container (not .post-single alone)
   so the sidebar starts level with the article instead of sitting flush
   under the sticky header while the article has breathing room. */
.post-single-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
  padding-top: 56px;
  /* Bottom spacing belongs here too, for the same reason: both columns end
     on the grid's bottom edge — the sidebar is often the taller one, and the
     prev/next nav sits outside .post-single — so padding on the article
     alone left whichever column was lower flush against the section below. */
  padding-bottom: 72px;
}
.post-single-main {
  min-width: 0;
}

.post-single-sidebar {
  position: sticky;
  top: 88px;
}
.sidebar-widget {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.sidebar-widget-title {
  background: var(--navy);
  color: #fff;
  margin: 0;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Title bar with an arrow opposite the title, leading to the full list
   (single.php: every post; page.php: every page). Icon only — the link's
   name lives in its aria-label. The bar carries the navy ground, so the
   title inside it drops its own. The arrow stays centred on hover — nudging
   it sideways inside a circle reads as misaligned, not as motion; the fill
   change carries the hover on its own. */
.sidebar-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 18px;
  background: var(--navy);
}
.sidebar-widget-head .sidebar-widget-title {
  padding: 0;
  background: none;
}
.sidebar-widget-more {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(242, 201, 76, 0.45);
  border-radius: 50%;
  color: var(--gold);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.sidebar-widget-more svg {
  width: 16px;
  height: 16px;
}
.sidebar-widget-more:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  text-decoration: none;
}
.sidebar-widget-more:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.sidebar-post-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-post-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 6px;
  color: inherit;
}
.sidebar-post-link:hover {
  background: var(--bg-soft);
  text-decoration: none;
}
.sidebar-post-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-soft);
}
.sidebar-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sidebar-post-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
}
.sidebar-post-thumb-fallback img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.sidebar-post-body {
  min-width: 0;
}
.sidebar-post-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}
.sidebar-post-link:hover .sidebar-post-title {
  color: var(--gold-text);
  font-weight: 700;
}
.sidebar-post-date {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

@media (max-width: 900px) {
  .post-single-layout {
    grid-template-columns: 1fr;
    padding-bottom: 56px;
  }
  .post-single-sidebar {
    position: static;
  }
}
.post-single-cats {
  margin-bottom: 12px;
}
.post-single-cats a {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy);
  background: var(--en-tint-navy);
  padding: 4px 10px;
  border-radius: 999px;
  margin-right: 6px;
}
.post-single-cats a:hover {
  background: var(--gold);
  text-decoration: none;
}
.post-single-title {
  font-size: clamp(28px, 4vw, 38px);
  margin-bottom: 14px;
  text-align: justify;
  color: var(--navy);
}
.post-single-meta {
  color: var(--text-muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.post-single-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.post-single-meta-item svg {
  width: 15px;
  height: 15px;
  color: var(--gold-text);
  flex-shrink: 0;
}
.post-single-lead {
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: justify;
  margin: 0 0 28px;
}
.post-single-thumb {
  margin: 32px 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.post-single-thumb-fallback {
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
}
.post-single-thumb-fallback img {
  width: 84px;
  height: 84px;
  object-fit: contain;
}

/* ---- Table of contents ---- */
.post-single-toc {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  margin-bottom: 32px;
  overflow: hidden;
}
.post-single-toc-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 16px 20px;
  font-family: inherit;
  text-align: left;
}
.post-single-toc-toggle > svg {
  color: var(--navy);
  flex-shrink: 0;
}
.post-single-toc-toggle > svg:first-child {
  width: 18px;
  height: 18px;
}
.post-single-toc-toggle > svg:last-child {
  width: 16px;
  height: 16px;
  margin-left: auto;
  transition: transform 0.25s ease;
}
.post-single-toc.is-collapsed .post-single-toc-toggle > svg:last-child {
  transform: rotate(-90deg);
}
.post-single-toc-title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
}
.post-single-toc ol {
  list-style: none;
  margin: 0;
  padding: 0 20px 20px;
  counter-reset: toc;
  max-height: 3000px;
  opacity: 1;
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    opacity 0.25s ease,
    padding 0.4s ease;
}
.post-single-toc.is-collapsed ol {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.post-single-toc-item {
  margin-bottom: 8px;
}
.post-single-toc-item:last-child {
  margin-bottom: 0;
}
.post-single-toc-item a {
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
}
.post-single-toc-item a:hover {
  color: var(--gold-text);
  font-weight: 700;
  text-decoration: none;
}
.post-single-toc-level-2 {
  counter-increment: toc;
}
.post-single-toc-level-2 a::before {
  content: counter(toc) '. ';
  color: var(--navy);
  font-weight: 700;
  margin-right: 2px;
}
.post-single-toc-level-3 {
  margin-left: 22px;
}
.post-single-toc-level-3 a::before {
  content: '– ';
  color: var(--navy);
  margin-right: 2px;
}

.post-single-content {
  font-size: 17px;
  text-align: justify;
  color: var(--text-muted);
}
.post-single-content h1,
.post-single-content h2,
.post-single-content h3,
.post-single-content h4,
.post-single-content h5,
.post-single-content h6 {
  color: var(--navy);
}
.post-single-content h2 {
  font-size: 24px;
  margin-top: 1.6em;
  scroll-margin-top: 88px;
  padding: 8px 20px;
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  background: linear-gradient(to right, rgba(242, 201, 76, 0.2), rgba(242, 201, 76, 0) 100%);
}
.post-single-content h3 {
  font-size: 20px;
  margin-top: 1.4em;
  scroll-margin-top: 88px;
}
.post-single-content ul,
.post-single-content ol {
  padding-left: 1.4em;
}
.post-single-content a {
  text-decoration: underline;
}
.post-single-content img {
  border-radius: var(--radius);
  margin: 1.2em 0;
}
.post-single-content blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--gold);
  color: var(--text-muted);
  font-style: italic;
}
.post-single-tags {
  margin-top: 32px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.post-single-tags a {
  font-size: 13px;
  color: var(--text-muted);
}
.post-single-tags a:hover {
  color: var(--gold-text);
  font-weight: 700;
}

.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.post-nav-link {
  max-width: 46%;
}
.post-nav-next {
  margin-left: auto;
  text-align: right;
}
.post-nav-label {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.post-nav-arrow {
  display: inline-block;
  margin: 0 5px;
}
.post-nav-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 700;
  color: var(--navy);
  text-align: left; /* -webkit-line-clamp silently drops its "…" when the
                          box is text-align:right (a real Chromium quirk) —
                          .post-nav-next sets that on this whole column, so
                          the title has to opt back out to keep its ellipsis */
}
.post-nav-title:hover {
  color: var(--gold-text);
  font-weight: 700;
}

.page-links {
  margin-top: 24px;
  font-weight: 600;
}

/* ---- Comments ---- */
.post-comments {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comment-list .comment {
  margin-bottom: 24px;
}
.comment-respond input[type='text'],
.comment-respond input[type='email'],
.comment-respond input[type='url'],
.comment-respond textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  margin-bottom: 12px;
}

/* ---- Search form ---- */
.search-form {
  display: flex;
  gap: 8px;
  max-width: 420px;
  margin: 24px auto 0;
}
.search-form input[type='search'] {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 15px;
  font-family: inherit;
}
.search-form button {
  padding: 10px 18px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}
.search-form button:hover {
  background: var(--gold);
  color: var(--navy);
}

/* ---- 404 ---- */
.error-404 {
  text-align: center;
  padding: 80px 0;
}
.error-404-code {
  font-size: 96px;
  font-weight: 800;
  color: var(--gold);
  margin: 0;
  line-height: 1;
}
.error-404 h1 {
  margin-top: 8px;
}
.error-404 p {
  color: var(--text-muted);
}
.error-404 .btn-primary {
  margin-top: 16px;
}

/* ---- Footer ---- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
  background-image: radial-gradient(rgba(0, 31, 63, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
}
.site-footer::before {
  /* bottom/right = -half the circle's own size, so its center sits
       exactly on the footer's corner point (same fix as the navy one). */
  content: '';
  position: absolute;
  bottom: -280px;
  right: -280px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(242, 201, 76, 0.32), transparent 70%);
}
.site-footer::after {
  /* top/left = -half the circle's own size, so its center sits exactly
       on the footer's corner point — a true quarter-circle, not just
       "roughly in the corner". */
  content: '';
  position: absolute;
  top: -270px;
  left: -270px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 31, 63, 0.4), transparent 70%);
}
.site-footer > * {
  position: relative;
}
.site-footer-inner {
  display: grid;
  grid-template-columns: 2.4fr 0.8fr 0.8fr 0.8fr;
  gap: 40px;
  padding: 56px 24px 40px;
}
.footer-col-title {
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
}
.footer-tagline {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 480px;
  margin: 14px 0 0;
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-links a {
  color: var(--text);
  font-size: 14.5px;
  transition: color 0.15s;
}
.footer-links a:hover {
  color: var(--gold-text);
  font-weight: 700;
  text-decoration: none;
}
.footer-widget-title {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy);
  margin-bottom: 16px;
}
.footer-widget {
  color: var(--text);
  font-size: 14.5px;
}

.footer-contact {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
}
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}
.footer-contact svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--navy);
}
.footer-contact a {
  color: var(--text-muted);
}
.footer-contact a:hover {
  color: var(--gold-text);
  font-weight: 700;
  text-decoration: none;
}

.footer-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-social a {
  display: flex;
  line-height: 0;
  transition: transform 0.15s;
}
.footer-social a:hover {
  transform: translateY(-2px);
  text-decoration: none;
}
.footer-social svg {
  width: 30px;
  height: 30px;
}

.site-footer-trust {
  border-top: 1px solid var(--border);
  padding: 24px 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
}
.site-footer-trust img {
  height: 40px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(40%);
  opacity: 0.85;
  transition:
    opacity 0.2s,
    filter 0.2s;
}
.site-footer-trust a:hover img {
  filter: grayscale(0);
  opacity: 1;
}

.site-footer-bottom {
  border-top: 1px solid var(--border);
  padding: 18px 24px;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer-legal-info p {
  margin: 0;
}
.footer-biz-reg {
  line-height: 1.6;
  margin-bottom: 4px !important;
}
.footer-copyright {
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .site-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .post-nav-link {
    max-width: 100%;
  }
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .site-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Back-to-top button ---- */
/* While the cookie bar is up it spans the whole bottom edge, so both pinned
   widgets have to clear it. They keep their own resting heights (the contact
   widget stacks above the back-to-top button) and share one lift, published
   by the bar as its measured height — see assets/js/cookie-consent.js. The
   fallback covers the single frame before the first measurement lands. */
html[data-consent-banner] {
  --floating-lift: var(--eui-consent-banner-height, 96px);
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: calc(24px + var(--floating-lift, 0px));
  z-index: 80;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--navy);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s,
    background-color 0.15s,
    color 0.15s;
}
.back-to-top svg {
  width: 20px;
  height: 20px;
  transform: rotate(180deg);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--navy);
  color: #fff;
}

/* ---- Floating contact widget — stacked quick-action bubbles (Zalo /
   Gọi điện / Messenger / Liên hệ) above a single toggle button. ---- */
.contact-widget {
  position: fixed;
  right: 24px;
  bottom: calc(78px + var(--floating-lift, 0px));
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.contact-widget-toggle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    filter 0.15s,
    transform 0.15s,
    background-color 0.15s,
    color 0.15s;
}
.contact-widget-toggle svg {
  width: 20px;
  height: 20px;
}
.contact-widget-toggle:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}
.contact-widget-toggle[aria-expanded='true'] {
  background: var(--gold);
  color: var(--navy);
}
/* Chat icon while closed, swaps to an X once open (it's now acting as
   the close button). */
.contact-widget-toggle-icon-close {
  display: none;
}
.contact-widget-toggle[aria-expanded='true'] .contact-widget-toggle-icon-open {
  display: none;
}
.contact-widget-toggle[aria-expanded='true'] .contact-widget-toggle-icon-close {
  display: flex;
}

.contact-widget-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  transform-origin: bottom right;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.contact-widget-panel[hidden] {
  display: none;
}
.contact-widget-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.contact-widget-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.contact-widget-actions[hidden] {
  display: none;
}
.contact-widget-action {
  position: relative;
  display: flex;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  background: none;
  padding: 0;
  font-family: inherit;
}
.contact-widget-action-icon {
  /* Matches the toggle (46px) and back-to-top (44px) buttons above/
       below it now that there's no frame padding adding visual weight. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.contact-widget-action:hover .contact-widget-action-icon,
.contact-widget-action:focus-visible .contact-widget-action-icon {
  transform: scale(1.08);
}
.contact-widget-action-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--navy);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.contact-widget-action-tooltip::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--navy);
}
.contact-widget-action:hover .contact-widget-action-tooltip,
.contact-widget-action:focus-visible .contact-widget-action-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
/* "brand" = Zalo/Messenger's self-colored 36x36 badge from
   edunauts_social_icon() — scale that svg to fill the circle. */
.contact-widget-action-icon--brand svg,
.contact-widget-action-icon--brand img {
  width: 44px;
  height: 44px;
  display: block;
  /* A rectangular box-shadow would show corners around Zalo's
       non-circular icon shape — drop-shadow follows its actual silhouette
       instead, which also keeps it visible against any background. */
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}
/* Zalo's own icon file already has its own shape/rounding baked in —
   forcing a circular mask over it just crops/distorts it. */
.contact-widget-action-icon--brand {
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
/* "tone" = the single-color icon set, so this wrapper supplies the
   brand-colored circle background behind it. */
.contact-widget-action-icon--tone {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
}
.contact-widget-action-icon--tone svg {
  width: 16px;
  height: 16px;
}

.contact-widget-form-view {
  width: 380px;
  max-width: calc(100vw - 48px);
  box-sizing: border-box;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(0, 31, 63, 0.2);
  padding: 26px 28px 28px;
}
.contact-widget-form-header {
  margin-bottom: 10px;
}
.contact-widget-form-header h3 {
  margin: 0;
  font-size: 19px;
  color: var(--navy);
}

.contact-widget-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact-widget-form[hidden] {
  display: none;
}
/* Floating label — label sits inside the field until it's focused or has a
   value, then floats up above the underline. Needs the label AFTER the
   input in markup (for the ~ sibling selector) and placeholder=" " on the
   input (for :placeholder-shown to reflect "empty" correctly). */
.contact-widget-field {
  position: relative;
}
.contact-widget-field label {
  position: absolute;
  left: 0;
  top: 20px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-muted);
  pointer-events: none;
  transition:
    top 0.15s ease,
    font-size 0.15s ease,
    color 0.15s ease;
}
.contact-widget-required {
  color: var(--en-danger-600);
}
.contact-widget-form input[type='text'],
.contact-widget-form input[type='tel'],
.contact-widget-form input[type='email'],
.contact-widget-form textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 22px 0 8px;
  border: none;
  border-bottom: 1.5px solid var(--border);
  border-radius: 0;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  resize: vertical;
  background: transparent;
}
.contact-widget-form input:focus,
.contact-widget-form textarea:focus {
  outline: none;
  border-bottom-color: var(--navy);
}
.contact-widget-form input:focus ~ label,
.contact-widget-form input:not(:placeholder-shown) ~ label,
.contact-widget-form textarea:focus ~ label,
.contact-widget-form textarea:not(:placeholder-shown) ~ label {
  top: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
}
.contact-widget-form .btn-primary {
  /* A second, later .btn-primary rule elsewhere (used for the 404 page)
       sets display:inline-block, which silently wins over the shared
       button rule's inline-flex and breaks icon/text centering+gap here —
       restated explicitly so this button doesn't depend on rule order. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 16px;
  /* <button> does not inherit the page font; without this the label fell
     back to the browser's default sans instead of the brand face. */
  font-family: inherit;
  font-size: 14px;
  margin-top: 4px;
}
.contact-widget-form .btn-primary svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.contact-widget-honeypot {
  display: none !important;
}

/* Negative margin counteracts most of .contact-widget-form's own 22px gap
   above this — it still reserves a line of height (no layout jump when an
   error message appears), but doesn't leave a dead gap under the button
   while empty, which is the common case. */
.contact-widget-status {
  margin: -14px 0 0;
  font-size: 13px;
  min-height: 1em;
}
.contact-widget-status.is-error {
  color: var(--en-danger-600);
}

.contact-widget-success {
  text-align: center;
  padding: 8px 4px 4px;
}
.contact-widget-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--en-success-50);
  color: var(--en-success-700);
  margin-bottom: 14px;
}
.contact-widget-success-icon svg {
  width: 30px;
  height: 30px;
}
.contact-widget-success-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}
.contact-widget-success-text {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.contact-widget-success-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  border: 1.5px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.contact-widget-success-close-btn:hover {
  border-color: var(--navy);
  background: var(--bg-soft);
}

@media (max-width: 480px) {
  .back-to-top,
  .contact-widget {
    right: 16px;
  }
  .back-to-top {
    bottom: calc(16px + var(--floating-lift, 0px));
  }
  .contact-widget {
    bottom: calc(70px + var(--floating-lift, 0px));
  }
}

/* ==========================================================================
   Ordinary pages (page.php) — policies, terms, and anything else an editor
   creates under Pages. Laid out as a document, not an article: a compact
   header, a rail (contents, the other pages of the same kind, a way to
   ask), and one white reading column — across the full width of the site's
   .wrap, so its edges line up with the header's.

   Deliberately quiet: hairline borders instead of heavy shadows, white
   rather than grey grounds. The motion is where the polish goes — entrances
   through the shared [data-reveal] system, a contents track that follows
   the reader, cards that answer the pointer.
   ========================================================================== */
/* ---- Header ---- */
.page-doc-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
}
.page-doc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(242, 201, 76, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 201, 76, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
/* Two soft glows drifting very slowly — enough that the band feels lit
   rather than printed, far too slow to pull the eye off the title. */
.page-doc-hero::after {
  content: '';
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 25%, rgba(53, 200, 240, 0.2) 0%, transparent 38%),
    radial-gradient(circle at 80% 75%, rgba(242, 201, 76, 0.16) 0%, transparent 36%);
  animation: page-doc-glow 18s ease-in-out infinite alternate;
}
@keyframes page-doc-glow {
  from {
    transform: translate3d(-3%, -2%, 0);
  }
  to {
    transform: translate3d(3%, 2%, 0);
  }
}
.page-doc-hero-inner {
  position: relative;
  z-index: 1;
  /* The bottom padding is the room the document card rises into (the
     layout's negative margin below). */
  padding-top: 64px;
  padding-bottom: 128px;
}
.page-doc-hero h1 {
  max-width: 860px;
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.page-doc-hero-lead {
  max-width: 680px;
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.page-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
}
.page-doc-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 13.5px;
  line-height: 1.3;
}
.page-doc-meta-item dt {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.66);
}
.page-doc-meta-item dt svg {
  width: 15px;
  height: 15px;
  color: var(--gold);
}
.page-doc-meta-item dd {
  margin: 0;
  font-weight: 700;
  color: #fff;
}

/* ---- Page banner (edunauts_page_hero) ----
   The one banner every inner listing and plain page uses — blog, archives,
   search, contact, the pages index. Built on .page-doc-hero (same navy
   field, grid and drifting glow) so banners and documents share one look,
   but centred: a kind label, the title, one lead line, fact chips. */
.page-banner-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 64px;
  padding-bottom: 64px;
}
.page-banner h1 {
  margin-left: auto;
  margin-right: auto;
}
.page-banner .page-doc-hero-lead {
  margin-left: auto;
  margin-right: auto;
}
.page-banner .page-doc-meta {
  justify-content: center;
}
.page-banner-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 13px 6px 11px;
  border-radius: 999px;
  background: rgba(242, 201, 76, 0.12);
  border: 1px solid rgba(242, 201, 76, 0.28);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-banner-kicker svg {
  width: 14px;
  height: 14px;
}
/* A page's Featured Image: the photo under a navy scrim, with the grid and
   glow (meant for the flat colour) switched off. */
.page-banner.has-image {
  background-size: cover;
  background-position: center;
}
.page-banner.has-image::before,
.page-banner.has-image::after {
  display: none;
}
.page-banner-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 31, 63, 0.88) 0%, rgba(29, 47, 93, 0.82) 100%);
}
@media (max-width: 700px) {
  .page-banner-inner {
    padding-top: 44px;
    padding-bottom: 48px;
  }
}

/* ---- Layout ---- */
.page-doc-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: -80px;
  padding-bottom: 72px;
}
/* A page without sections has nothing for a rail to list — one centred
   column rather than a sidebar holding a lone card. */
.page-doc-layout.is-single {
  grid-template-columns: minmax(0, 880px);
  justify-content: center;
}

/* ---- Contents rail ---- */
.page-doc-rail {
  position: sticky;
  /* Clears the sticky site header. */
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Contents + "Xem thêm" + help can outgrow a short window; a sticky
     column taller than the viewport would hide its own bottom until the
     page ends, so it scrolls within itself instead. */
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  scrollbar-width: thin;
}
/* single.php's "Tin mới nhất" widget, reused for "Xem thêm" — given a white
   ground here because the rail's top overlaps the navy header, and the
   rail's own corner radius so it sits flush with the cards around it. */
.page-doc-rail .sidebar-widget {
  flex: none;
  background: #fff;
  border-color: rgba(0, 31, 63, 0.09);
  border-radius: 14px;
}
.page-doc-toc {
  flex: none;
  background: #fff;
  border: 1px solid rgba(0, 31, 63, 0.09);
  border-radius: 14px;
}
.page-doc-toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 12px;
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-doc-toc summary::-webkit-details-marker {
  display: none;
}
.page-doc-toc summary svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.page-doc-toc[open] summary svg {
  transform: rotate(180deg);
}
/* A single track down the left of the list, with the active entry lit
   gold on it — reads as "you are here" in a way a highlighted row doesn't. */
.page-doc-toc-list {
  position: relative;
  margin: 0 18px 16px;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--border);
}
.page-doc-toc-item a {
  position: relative;
  display: block;
  padding: 7px 0 7px 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.page-doc-toc-item a::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Sub-sections step in only when the page actually has both levels. */
.page-doc-toc-list:has(.page-doc-toc-level-2) .page-doc-toc-level-3 a {
  padding-left: 28px;
  font-size: 13.5px;
}
.page-doc-toc-item a:hover {
  color: var(--navy);
  text-decoration: none;
  transform: translateX(2px);
}
.page-doc-toc-item a.is-active {
  color: var(--navy);
  font-weight: 700;
}
.page-doc-toc-item a.is-active::before {
  transform: scaleY(1);
}

.page-doc-help {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 19px;
  border-radius: 16px;
  /* The warm gold bloom is a background layer, not a pseudo-element: an
     overlay clipped by `overflow: hidden` leaks past the rounded corners
     once the card lifts on hover. Starts at brand navy rather than the
     near-black it used to — at #001428 the antialiased corner pixels blend
     to a muddy grey against the white rail. */
  background:
    radial-gradient(62% 130% at 10% 50%, rgba(242, 201, 76, 0.18) 0%, rgba(242, 201, 76, 0) 60%),
    linear-gradient(
      135deg,
      var(--en-navy) 0%,
      var(--en-blue) 45%,
      var(--en-navy-600) 72%,
      var(--en-info-700) 100%
    );
  color: #fff;
  text-decoration: none;
  /* No shadow of any kind. .page-doc-rail is a scroll container
     (`overflow-y: auto`) whose box is flush with this card on the left,
     right and bottom, so an outer shadow gets clipped square at those edges
     and survives only inside the rounded-corner notches: grey wedges at the
     corners, which is the fringe this card kept showing. The gradient alone
     carries the depth. */
  box-shadow: none;
  transition: transform 0.25s ease;
}
.page-doc-help:hover {
  transform: translateY(-2px);
  box-shadow: none;
  text-decoration: none;
  color: #fff;
}
/* Bare icon — no plate, no border: the card itself is the surface. */
.page-doc-help-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  transition: transform 0.25s ease;
}
.page-doc-help-icon svg {
  width: 26px;
  height: 26px;
}
.page-doc-help:hover .page-doc-help-icon {
  transform: scale(1.08);
}
.page-doc-help-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.page-doc-help-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.page-doc-help-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}
.page-doc-help > svg {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--gold);
  transition:
    transform 0.25s ease,
    color 0.25s ease;
}
.page-doc-help:hover > svg {
  transform: translateX(4px);
  color: #fff;
}

/* ---- Document ---- */
.page-doc-body {
  min-width: 0;
  padding: 56px 64px 40px;
  background: #fff;
  border: 1px solid rgba(0, 31, 63, 0.09);
  border-radius: 18px;
}
.page-doc-content {
  font-size: 16.5px;
  line-height: 1.8;
  /* Left-aligned, not justified like blog posts: justification in a
     reading column opens rivers between Vietnamese words, and a clause is
     read line by line, not skimmed as a block. */
  text-align: left;
  color: var(--text);
}
.page-doc-content > :first-child {
  margin-top: 0;
}
.page-doc-content p {
  margin: 0 0 1.1em;
}
.page-doc-content h2,
.page-doc-content h3,
.page-doc-content h4 {
  color: var(--navy);
  line-height: 1.35;
  scroll-margin-top: 100px;
}
/* Section headings: a hairline across the column with a short gold bar on
   its left end — drawn as a background on the rule itself, so the two stay
   aligned whatever the heading's length. Applies to h2, or to h3 when the
   page uses h3 as its top level (as the seeded policies do). */
.page-doc-content h2,
.page-doc-content:not(:has(h2)) h3 {
  margin: 2.4em 0 0.8em;
  padding-top: 1.3em;
  font-size: 21px;
  border-top: 1px solid var(--border);
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 0 / 44px 3px;
  background-origin: border-box;
}
.page-doc-content:has(h2) h3 {
  margin: 1.8em 0 0.6em;
  font-size: 18px;
}
.page-doc-content h4 {
  margin: 1.6em 0 0.5em;
  font-size: 16.5px;
}
.page-doc-content ul,
.page-doc-content ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}
.page-doc-content li {
  margin-bottom: 0.45em;
}
.page-doc-content li::marker {
  color: var(--gold-text);
  font-weight: 700;
}
.page-doc-content a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(0, 31, 63, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.page-doc-content a:hover {
  text-decoration-color: var(--gold);
}
.page-doc-content strong {
  color: var(--navy);
}
.page-doc-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.page-doc-content table {
  width: 100%;
  margin: 0 0 1.4em;
  border-collapse: collapse;
  font-size: 15px;
}
.page-doc-content th,
.page-doc-content td {
  padding: 10px 14px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.page-doc-content th {
  background: var(--bg-soft);
  color: var(--navy);
}
.page-doc-content blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--gold);
  color: var(--text-muted);
}
/* The leading all-italic paragraph (inc/pages.php marks it) — a note about
   the page rather than part of it. */
.page-doc-content .page-doc-note {
  margin: 0 0 2em;
  padding: 14px 18px;
  border: 1px solid rgba(242, 201, 76, 0.5);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  background: rgba(242, 201, 76, 0.1);
  font-size: 14.5px;
  line-height: 1.65;
}
.page-doc-content .page-doc-note em {
  font-style: normal;
}

.page-doc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.page-doc-issuer p {
  margin: 0 0 2px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.page-doc-issuer .page-doc-issuer-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.page-doc-issuer a {
  color: var(--navy);
  font-weight: 600;
}
.page-doc-print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(0, 31, 63, 0.18);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.page-doc-print:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.page-doc-print:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* A published page with no content yet (page.php). */
.page-doc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0 16px;
  text-align: center;
}
.page-doc-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: var(--blue-tint);
  color: var(--navy);
}
.page-doc-empty-icon svg {
  width: 26px;
  height: 26px;
}
.page-doc-empty-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
}
.page-doc-empty-text {
  max-width: 440px;
  margin: 8px 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}
.page-doc-empty .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.page-doc-empty .btn-primary svg {
  width: 18px;
  height: 18px;
}

/* ---- /trang-thong-tin/ (pages-index.php) ----
   Built from the blog listing's own classes (.blog-toolbar, .blog-featured,
   .post-grid, .post-card, .pagination), so only what the blog doesn't have
   is styled here. */
.pages-index-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 31, 63, 0.08);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}
.blog-filter-badge.is-active .pages-index-count {
  background: rgba(255, 255, 255, 0.18);
}
.pages-index-summary {
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--text-muted);
}
.pages-index-summary a {
  margin-left: 10px;
  font-weight: 600;
  color: var(--navy);
}
.pages-index .no-results a {
  margin-left: 6px;
  font-weight: 600;
  color: var(--navy);
}
.pages-index {
  padding-bottom: 72px;
}

/* ---- Entrances (shared [data-reveal] system, reveal.js) ----
   :not(.is-visible) is load-bearing. These rules come after the shared
   `html.has-reveal [data-reveal].is-visible { transform: none }` in this
   file with equal or higher specificity, so without it they would keep
   winning after the reveal and leave each element parked at its offset. */
html.has-reveal .page-doc-hero h1[data-reveal]:not(.is-visible) {
  transform: translateY(18px);
}
html.has-reveal .page-doc-meta[data-reveal]:not(.is-visible),
html.has-reveal .page-doc-hero-lead[data-reveal]:not(.is-visible) {
  transform: translateY(12px);
}
html.has-reveal .page-doc-rail[data-reveal]:not(.is-visible) {
  transform: translateX(-20px);
}
@media (prefers-reduced-motion: no-preference) {
  .page-doc-hero-lead[data-reveal] {
    transition-delay: 80ms;
  }
  .page-doc-meta[data-reveal] {
    transition-delay: 160ms;
  }
  .page-doc-rail[data-reveal] {
    transition-delay: 200ms;
  }
  .page-doc-body[data-reveal] {
    transition-delay: 120ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-doc-hero::after {
    animation: none;
  }
  .page-doc-toc-item a,
  .page-doc-help,
  .page-doc-help-icon,
  .page-doc-help > svg {
    transition: none;
  }
  .page-doc-toc-item a:hover,
  .page-doc-help:hover,
  .page-doc-help:hover .page-doc-help-icon,
  .page-doc-help:hover > svg {
    transform: none;
  }
}

@media (max-width: 960px) {
  .page-doc-hero-inner {
    padding-top: 44px;
    padding-bottom: 96px;
  }
  .page-doc-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: -60px;
    padding-bottom: 56px;
  }
  /* The rail dissolves into the column: contents first (collapsed by
     page-doc.js), the document next, the help link after it. */
  .page-doc-rail {
    display: contents;
  }
  .page-doc-toc {
    order: 1;
  }
  .page-doc-body {
    order: 2;
    padding: 36px 28px 28px;
  }
  .page-doc-rail .sidebar-widget {
    order: 3;
  }
  .page-doc-help {
    order: 4;
  }
  .page-doc-toc summary {
    padding-bottom: 16px;
  }
  .page-doc-toc[open] summary {
    padding-bottom: 12px;
  }
}
@media (max-width: 560px) {
  .page-doc-body {
    padding: 28px 20px 24px;
    border-radius: 16px;
  }
  .page-doc-content {
    font-size: 16px;
  }
}

/* A policy gets printed — for a signature, for a file. Print the page and
   nothing that only makes sense on a screen. */
@media print {
  .site-header,
  .site-footer,
  .lead-band,
  .back-to-top,
  .contact-widget,
  .eui-consent-banner,
  .page-doc-rail,
  .page-doc-actions {
    display: none !important;
  }
  .page-doc-hero {
    background: none;
    color: var(--text);
  }
  .page-doc-hero::before,
  .page-doc-hero::after {
    display: none;
  }
  .page-doc-hero-inner {
    padding: 0 0 12px;
  }
  .page-doc-hero h1,
  .page-doc-meta-item dd {
    color: var(--navy);
  }
  .page-doc-meta-item {
    border-color: var(--border);
    background: none;
  }
  .page-doc-meta-item dt {
    color: var(--text-muted);
  }
  .page-doc-layout {
    display: block;
    margin: 0;
    padding: 0;
  }
  .page-doc-body {
    padding: 0;
    border: none;
  }
  .page-doc-content h2,
  .page-doc-content h3 {
    break-after: avoid;
  }
  html.has-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}