/* ==========================================================================
   Á CHÂU ELECTRIC — EDITORIAL (MAGAZINE) LAYER
   11 · token re-map + magazine typography/components · loads LAST
   --------------------------------------------------------------------------
   WHY A NEW FILE INSTEAD OF EDITING 01-tokens.css:
     nothing in the existing design system is rewritten. This file is enqueued
     after 10-floating.css, so at equal specificity it wins the cascade. Deleting
     this file (+ 00-fonts.css + ae-editorial.js) returns the site to exactly the
     pre-editorial design. See docs/design/PHASE_A_PLAN_2026-10-17.md §5.

   APPROVED PALETTE (owner decision 2026-10-17):
     navy #0B1F3A / #07142A / #12305A · accent #FFB400 / #E69F00
     paper #F7F5F0 · ink #14181F · muted #667085 · line #E3E0D8
   CONTRAST (WCAG AA, measured):
     navy-700 on white 11.0:1 · ink on white 16.6:1 · muted on white 4.9:1
     navy text on #FFB400 8.6:1 · white text on navy 15.4:1
     amber #E69F00 on paper is only 2.2:1 → used ONLY for rules/underlines/
     large numbers, never for small text (--ac-accent-ink #8A5A00 = 5.6:1 is
     used for small uppercase kickers instead).
   ========================================================================== */

/* 1. TOKEN RE-MAP
   ========================================================================== */
:root {
  /* 1.1 new palette */
  --ac-navy: #0b1f3a;
  --ac-navy-900: #07142a;
  --ac-navy-700: #12305a;
  --ac-accent: #ffb400;
  --ac-accent-600: #e69f00;
  --ac-accent-ink: #8a5a00;
  --ac-paper: #f7f5f0;
  --ac-paper-2: #f1eee7;
  --ac-line: #e3e0d8;
  --ac-ink: #14181f;
  --ac-muted: #667085;
  --ac-white: #ffffff;

  /* 1.2 core identity tokens re-pointed (components keep working untouched) */
  --ae-blue: #12305a;
  --ae-blue-dark: #0b1f3a;
  --ae-blue-soft: rgba(18, 48, 90, 0.08);
  --ae-orange: #ffb400;
  --ae-gold: #ffb400;
  --ae-orange-soft: rgba(255, 180, 0, 0.16);
  --ae-gold-soft: rgba(255, 180, 0, 0.2);
  --ae-on-blue: #ffffff;
  --ae-on-orange: #0b1f3a;
  --ae-on-gold: #0b1f3a;
  --ae-accent-warm: #8a5a00;

  /* 1.3 surfaces — warm paper family */
  --ae-tone-0: #ffffff;
  --ae-tone-1: #f7f5f0;
  --ae-tone-2: #f1eee7;
  --ae-tone-3: #eae6dc;
  --ae-ink: #14181f;
  --ae-ink-2: #35415a;
  --ae-ink-3: #667085;
  --ae-line-light: #e3e0d8;
  --ae-line-light-strong: #cfc9bb;
  --ae-grid-line-light: rgba(11, 31, 58, 0.05);

  /* 1.4 dark contrast family — navy instead of neutral black */
  --ae-dark: #0b1f3a;
  --ae-dark-1: #07142a;
  --ae-dark-2: #0f2548;
  --ae-dark-3: #12305a;
  --ae-dark-4: #1b3b6b;
  --ae-gray-1: #9fb0c6;
  --ae-gray-2: #c7d3e2;
  --ae-gray-3: #e8eef6;

  /* 1.5 typography */
  --ae-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ae-font-display: var(--ae-font);
  --ae-font-num: 'Barlow Condensed', 'Be Vietnam Pro', sans-serif;
  --ae-fs-h1: clamp(2.4rem, 5vw + 1rem, 5rem);
  --ae-fs-h2: clamp(1.75rem, 1.9vw + 1.05rem, 3rem);
  --ae-fs-h3: clamp(1.2rem, 0.6vw + 1.02rem, 1.5rem);
  --ae-fs-body: 1.0625rem;
  --ae-lh-tight: 1.15;
  --ae-lh-body: 1.65;

  /* 1.6 geometry — magazine rules are square-ish, not "pill" */
  --ae-radius-sm: 2px;
  --ae-radius: 3px;
  --ae-radius-lg: 4px;
  --ae-container: 1280px;
  --ae-container-narrow: 760px;
  --ae-space-9: 96px;
  --ae-shadow-1: 0 1px 2px rgba(11, 31, 58, 0.05);
  --ae-shadow-2: 0 16px 36px -24px rgba(11, 31, 58, 0.45);
  --ae-shadow-3: 0 34px 70px -40px rgba(11, 31, 58, 0.55);

  /* 1.7 editorial kit */
  --ac-rule: 1px solid var(--ac-line);
  --ac-underline: 2px solid var(--ac-accent);
  --ac-measure: 68ch;
}

/* 1.8 base font on the page shell — everything (including elements outside the
   .ae-home/.ae-page wrappers) inherits Be Vietnam Pro */
body.achau-brand-ui {
  font-family: var(--ae-font);
}

/* dark surfaces keep resolving through the existing §2.2 scope, but the accent
   text on navy is the bright accent (9.4:1) rather than the amber ink */
.ae-dark-surface,
.ae-footer,
.ae-final,
.ae-cta,
.ae-section--dark,
.ae-hero--dark {
  --ae-accent-text: #ffb400;
  --ae-accent-text-hover: #ffffff;
  --ae-accent-warm: #ffb400;
  --ae-focus: #ffb400;
}

/* 2. TYPOGRAPHY — serif headlines, magazine rhythm
   ========================================================================== */
.ae-h1,
.ae-home h1,
.ae-page h1 {
  font-family: var(--ae-font-display);
  font-weight: 700;
  line-height: var(--ae-lh-tight);
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin-bottom: var(--ae-space-5);
}
.ae-h2,
.ae-home .ae-section h2,
.ae-page h2 {
  font-family: var(--ae-font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.008em;
  text-wrap: balance;
}
.ae-h3,
.ae-card__title,
.ae-timeline__title {
  font-family: var(--ae-font-display);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0;
}
.ae-h4 {
  font-weight: 700;
}
/* Kicker — replaces the gradient bar with a solid accent rule + readable amber */
.ae-eyebrow {
  gap: var(--ae-space-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ac-accent-ink);
}
.ae-eyebrow::before {
  width: 28px;
  height: 2px;
  background: var(--ac-accent);
}
.ae-lead {
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  line-height: 1.6;
  max-width: 64ch;
}
.ae-slogan {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  color: var(--ac-accent-ink);
}

/* 2.1 PROSE MEASURE — reading comfort (~68 characters per line) */
.ae-home p,
.ae-page p,
.ae-article p,
.ae-contact-page p {
  max-width: var(--ac-measure);
}
.ae-home .ae-card p,
.ae-home .ae-card__text,
.ae-page .ae-card p,
.ae-timeline__text,
.ae-note,
.ae-caption,
.ae-footer p,
.ae-cta p,
.ae-final p {
  max-width: none;
}
.ae-article p,
.ae-page p {
  line-height: 1.7;
}

/* 2.2 LONG-FORM DETAILS — drop cap + pull quote + figure caption */
.ae-dropcap::first-letter,
.ae-article .ae-dropcap > p:first-of-type::first-letter {
  float: left;
  font-family: var(--ae-font-display);
  font-size: 4.2em;
  line-height: 0.82;
  padding: 0.08em 0.12em 0 0;
  font-weight: 700;
  color: var(--ac-navy);
}
.ae-pullquote {
  margin: var(--ae-space-7) 0;
  padding: var(--ae-space-2) 0 var(--ae-space-2) var(--ae-space-5);
  border-left: 4px solid var(--ac-accent);
  font-family: var(--ae-font-display);
  font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--ac-navy);
  max-width: 46ch;
}
.ae-pullquote cite {
  display: block;
  margin-top: var(--ae-space-3);
  font-family: var(--ae-font);
  font-size: 0.8125rem;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-muted);
}
/* Figure caption — "Hình 1 — …" */
.ae-figcap {
  margin: var(--ae-space-3) 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ac-muted);
  border-top: var(--ac-rule);
  padding-top: var(--ae-space-2);
}
.ae-figcap b {
  color: var(--ac-navy);
  font-weight: 700;
}

/* 2.3 NUMBER PLATES + RULES (magazine section numbering) */
.ae-num {
  font-family: var(--ae-font-display);
  font-size: clamp(2rem, 3vw + 1rem, 3.4rem);
  line-height: 1;
  font-weight: 700;
  color: var(--ac-line);
}
.ae-rule {
  height: 1px;
  background: var(--ac-line);
  border: 0;
  margin: 0;
}
.ae-rule--accent {
  height: 3px;
  background: var(--ac-accent);
}
.ae-divider {
  background: var(--ac-line);
}

/* 2.4 INLINE LINKS — accent underline that grows on hover */
.ae-home p a,
.ae-page p a,
.ae-footer p a,
.ae-caption a {
  color: var(--ae-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 3. SECTION RHYTHM + LAYOUT
   ========================================================================== */
.ae-section {
  padding: clamp(54px, 6.4vw, var(--ae-space-9)) 0;
}
.ae-section--raised {
  background-color: var(--ac-paper);
  border-top: var(--ac-rule);
  border-bottom: var(--ac-rule);
}
.ae-section--grid {
  background-image: linear-gradient(var(--ae-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ae-grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
}
.ae-section-head {
  max-width: 820px;
  margin-bottom: clamp(30px, 3.6vw, var(--ae-space-8));
}
/* Magazine section head: eyebrow · big serif title · hairline rule */
.ae-section-head > div > p:last-of-type {
  max-width: 62ch;
}
.ae-section-head::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ac-line);
  margin-top: var(--ae-space-5);
}
.ae-section-head--center::after {
  margin-inline: auto;
}
.ae-container {
  max-width: var(--ae-container);
}
/* 12-column editorial grid helpers (asymmetric ratios 7/5 · 5/7 · 4/8) */
.ae-ed-grid {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
.ae-ed-7-5 {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.ae-ed-5-7 {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.ae-ed-4-8 {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}
.ae-ed-span-2 {
  grid-column: span 2;
}

/* 4. BUTTONS — yellow primary on navy text, squared-off magazine geometry
   ========================================================================== */
.ae-btn {
  min-height: 52px;
  padding: 0 var(--ae-space-6);
  border-radius: var(--ae-radius-sm);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
}
.ae-btn--primary {
  background: var(--ac-accent);
  color: var(--ac-navy);
  border-color: var(--ac-accent);
}
.ae-btn--primary:hover,
.ae-btn--primary:focus-visible {
  background: var(--ac-accent-600);
  border-color: var(--ac-accent-600);
  color: var(--ac-navy);
}
.ae-btn--emergency {
  background: var(--ac-navy);
  color: var(--ac-white);
  border-color: var(--ac-navy);
}
.ae-btn--emergency:hover,
.ae-btn--emergency:focus-visible {
  background: var(--ac-navy-700);
  border-color: var(--ac-navy-700);
  color: var(--ac-white);
}
.ae-btn--secondary {
  border-color: var(--ac-navy);
  color: var(--ac-navy);
}
.ae-btn--secondary:hover,
.ae-btn--secondary:focus-visible {
  border-color: var(--ac-accent);
  color: var(--ac-navy);
  background: rgba(255, 180, 0, 0.12);
}
/* Zalo keeps Zalo's own blue so the button is recognisable at a glance */
.ae-btn--zalo {
  background: #0068ff;
  border-color: #0068ff;
  color: #ffffff;
}
.ae-btn--zalo:hover,
.ae-btn--zalo:focus-visible {
  background: #0052cc;
  border-color: #0052cc;
  color: #ffffff;
}
.ae-btn--ghost {
  color: var(--ac-navy);
}
.ae-btn--ghost:hover,
.ae-btn--ghost:focus-visible {
  color: var(--ac-accent-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* On dark surfaces the outline button must not use navy-on-navy */
.ae-dark-surface .ae-btn--secondary,
.ae-cta .ae-btn--secondary,
.ae-final .ae-btn--secondary,
.ae-hero--dark .ae-btn--secondary {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--ac-white);
}
.ae-dark-surface .ae-btn--secondary:hover,
.ae-cta .ae-btn--secondary:hover,
.ae-final .ae-btn--secondary:hover,
.ae-hero--dark .ae-btn--secondary:hover {
  border-color: var(--ac-accent);
  background: rgba(255, 180, 0, 0.14);
  color: var(--ac-white);
}


/* 5. CARDS — flat magazine plates with an accent foot rule
   ========================================================================== */
.ae-card {
  padding: var(--ae-space-5) var(--ae-space-5) var(--ae-space-4);
  border-radius: var(--ae-radius);
  box-shadow: none;
  background: var(--ac-white);
}
.ae-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--ac-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ae-transition);
}
.ae-card:hover::after {
  transform: scaleX(1);
}
.ae-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ae-shadow-2);
  border-color: var(--ac-line);
}
.ae-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--ae-radius-sm);
  background: rgba(11, 31, 58, 0.05);
  color: var(--ac-navy);
  border: 1px solid var(--ac-line);
}
.ae-card__title {
  font-size: 1.1875rem;
}
.ae-card__text {
  font-size: 0.9375rem;
  line-height: 1.62;
}
.ae-card__num,
.ae-card__index {
  font-family: var(--ae-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ac-line);
}

/* 5.1 IMAGE CARD — photo plate + navy scrim + light text (editorial teaser) */
.ae-media-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: var(--ac-rule);
  border-radius: var(--ae-radius);
  background: var(--ac-navy-900);
  color: var(--ac-white);
  text-decoration: none;
}
.ae-media-card img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 420ms ease;
}
.ae-media-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--ae-space-5);
  background: linear-gradient(180deg, rgba(7, 20, 42, 0) 0%, rgba(7, 20, 42, 0.82) 46%, rgba(7, 20, 42, 0.94) 100%);
}
.ae-media-card__kicker {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-accent);
  margin-bottom: var(--ae-space-2);
}
.ae-media-card__title {
  margin: 0;
  font-family: var(--ae-font-display);
  font-size: clamp(1.25rem, 1.4vw + 0.9rem, 1.85rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ac-white);
}
.ae-media-card__text {
  margin: var(--ae-space-2) 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ae-gray-2);
  max-width: none;
}
.ae-media-card:hover img,
.ae-media-card:focus-visible img {
  transform: scale(1.04);
}
.ae-media-card--portrait img {
  aspect-ratio: 4 / 5;
}
.ae-media-card--wide img {
  aspect-ratio: 21 / 9;
}

/* 6. HERO
   ==========================================================================
   E1(c) APPROVED: two-column hero now (text left / photo right on navy), built
   so the switch to a FULL-BLEED hero later is one class change:
     <section class="ae-hero ae-hero--split"> → <section class="ae-hero ae-hero--bleed">
   Everything below is written for both modes; only §6.3/§6.4 differ. */
.ae-hero {
  position: relative;
  padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 5vw, 88px);
  background: linear-gradient(160deg, #0b1f3a 0%, #0f2548 46%, #07142a 100%);
  color: var(--ac-white);
  overflow: hidden;
}
/* technical grid + soft accent glow (CSS only, never an image) */
.ae-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.ae-hero::after {
  content: '';
  position: absolute;
  right: -8%;
  top: -18%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 180, 0, 0.22) 0%, rgba(255, 180, 0, 0) 62%);
  pointer-events: none;
}
.ae-hero > .ae-container {
  position: relative;
  z-index: 1;
}
.ae-hero__inner {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.ae-hero--split .ae-hero__inner {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.ae-hero .ae-h1,
.ae-hero h1,
.ae-hero__h1 {
  color: var(--ac-white);
  margin-bottom: var(--ae-space-5);
}
.ae-hero__h1-line {
  display: block;
}
.ae-hero .ae-eyebrow {
  color: var(--ac-accent);
}
.ae-hero .ae-eyebrow::before {
  background: var(--ac-accent);
}
.ae-hero .ae-lead {
  color: var(--ae-gray-2);
  max-width: 56ch;
}
.ae-hero .ae-slogan {
  color: var(--ac-accent);
}
.ae-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ae-space-2) var(--ae-space-5);
  margin-top: var(--ae-space-5);
  padding-top: var(--ae-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ae-gray-1);
}
.ae-hero__logo {
  display: none;
}
.ae-hero__ctas .ae-btn--primary {
  box-shadow: 0 18px 40px -26px rgba(255, 180, 0, 0.9);
}


/* 6.1 HERO PHOTO PLATE (E1(c) — 1276 px photo shown at its own size, never
   stretched to full width) */
.ae-hero__media {
  margin: 0;
  position: relative;
}
.ae-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1160px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ae-radius);
}
.ae-hero__media::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--ae-radius);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
.ae-hero__media .ae-figcap {
  color: var(--ae-gray-1);
  border-top-color: rgba(255, 255, 255, 0.2);
}
.ae-hero__media .ae-figcap b {
  color: var(--ac-accent);
}
/* Legacy illustration plate kept on disk for rollback, hidden in the new hero */
.ae-hero__visual {
  display: none;
}

/* 6.2 HERO STRIP — 4 engineering guarantees as a magazine fact row */
.ae-hero__strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.ae-hero__strip-item {
  display: flex;
  gap: var(--ae-space-3);
  align-items: flex-start;
  padding: var(--ae-space-5) var(--ae-space-4);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.ae-hero__strip-item:first-child {
  border-left: 0;
  padding-left: 0;
}
.ae-hero__strip-item svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--ac-accent);
}
.ae-hero__strip-item strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ac-white);
}
.ae-hero__strip-item span span {
  font-size: 0.8125rem;
  color: var(--ae-gray-1);
}

/* 6.3 FULL-BLEED MODE — ready for the ≥1920 px originals (one class swap).
   The photo becomes the section background; the text block keeps its measure. */
.ae-hero--bleed {
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(120px, 14vh, 200px);
  background: var(--ac-navy-900);
}
.ae-hero--bleed .ae-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ae-hero--bleed .ae-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.ae-hero--bleed .ae-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(94deg, rgba(7, 20, 42, 0.94) 0%, rgba(7, 20, 42, 0.78) 42%, rgba(7, 20, 42, 0.34) 100%);
}
.ae-hero--bleed .ae-hero__inner {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  width: 100%;
}
.ae-hero--bleed .ae-hero__media,
.ae-hero--bleed .ae-hero__bg-inline {
  display: none;
}
.ae-hero--bleed .ae-hero__h1 {
  font-size: clamp(2.6rem, 5.2vw + 1rem, 5.4rem);
}
/* slow, subtle hero drift (disabled under reduced motion) */
@keyframes ae-hero-drift {
  from {
    transform: scale(1.005);
  }
  to {
    transform: scale(1.06);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ae-hero--bleed .ae-hero__bg img {
    animation: ae-hero-drift 26s ease-out both;
  }
}

/* 7. QUY TRÌNH — magazine timeline (big ghost numerals)
   ========================================================================== */
.ae-timeline {
  counter-reset: ae-step;
}
.ae-timeline__step {
  position: relative;
  counter-increment: ae-step;
  padding-top: var(--ae-space-6);
  border-top: 2px solid var(--ac-navy);
}
.ae-timeline__step::before {
  content: counter(ae-step, decimal-leading-zero);
  position: absolute;
  top: var(--ae-space-3);
  left: 0;
  font-family: var(--ae-font-display);
  font-size: clamp(2.4rem, 3vw + 1rem, 3.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ac-line);
}
.ae-timeline__title {
  margin-top: var(--ae-space-6);
}


/* 8. KIẾN THỨC — magazine split: 1 featured story + list of the rest
   ========================================================================== */
.ae-kb {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.ae-kb__feature {
  border-top: 3px solid var(--ac-navy);
  padding-top: var(--ae-space-5);
}
.ae-kb__kicker {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-accent-ink);
  border: 1px solid var(--ac-line);
  padding: 4px 8px;
  margin-bottom: var(--ae-space-4);
}
.ae-kb__title {
  margin: 0 0 var(--ae-space-3);
  font-family: var(--ae-font-display);
  font-size: clamp(1.6rem, 2.4vw + 1rem, 2.5rem);
  line-height: 1.14;
  font-weight: 700;
}
.ae-kb__title a {
  color: var(--ac-navy);
  text-decoration: none;
}
.ae-kb__title a:hover,
.ae-kb__title a:focus-visible {
  color: var(--ac-accent-ink);
}
.ae-kb__excerpt {
  color: var(--ac-muted);
  max-width: 60ch;
}
.ae-kb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 3px solid var(--ac-navy);
}
.ae-kb__item {
  border-bottom: var(--ac-rule);
}
.ae-kb__item a {
  display: block;
  padding: var(--ae-space-4) 0;
  text-decoration: none;
}
.ae-kb__cat {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-accent-ink);
  margin-bottom: 4px;
}
.ae-kb__name {
  display: block;
  font-family: var(--ae-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ac-navy);
}
.ae-kb__meta {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--ac-muted);
}
.ae-kb__item a:hover .ae-kb__name {
  text-decoration: underline;
  text-decoration-color: var(--ac-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* 9. THƯ VIỆN HÌNH ẢNH THỰC TẾ — asymmetric masonry + lightbox
   ========================================================================== */
.ae-gallery {
  columns: 3;
  column-gap: var(--ae-space-4);
}
.ae-gallery__item {
  position: relative;
  break-inside: avoid;
  margin: 0 0 var(--ae-space-4);
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.ae-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ae-radius);
  transition: transform 420ms ease, filter var(--ae-transition);
}
.ae-gallery__item:hover img,
.ae-gallery__item:focus-visible img {
  transform: scale(1.02);
}
.ae-gallery__cap {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.45;
  text-align: left;
  color: var(--ac-muted);
}
.ae-gallery__item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--ac-accent);
  opacity: 0;
  transition: opacity var(--ae-transition);
}
.ae-gallery__item:hover::after,
.ae-gallery__item:focus-visible::after {
  opacity: 1;
}
/* Lightbox (hand-written, no library) */
.ae-lb {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ae-z-drawer) + 20);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(7, 20, 42, 0.94);
}
.ae-lb.is-open {
  display: flex;
}
.ae-lb__fig {
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
}
.ae-lb__fig img {
  display: block;
  max-width: 100%;
  max-height: 74vh;
  margin-inline: auto;
  border-radius: var(--ae-radius);
}
.ae-lb__cap {
  margin: var(--ae-space-4) 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ae-gray-2);
}
.ae-lb__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(7, 20, 42, 0.6);
  color: var(--ac-white);
  cursor: pointer;
}
.ae-lb__btn:hover,
.ae-lb__btn:focus-visible {
  border-color: var(--ac-accent);
  color: var(--ac-accent);
}
.ae-lb__btn--prev {
  left: clamp(8px, 2vw, 32px);
}
.ae-lb__btn--next {
  right: clamp(8px, 2vw, 32px);
}
.ae-lb__close {
  position: absolute;
  top: clamp(8px, 2vw, 28px);
  right: clamp(8px, 2vw, 28px);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: var(--ac-white);
  font-size: 1.25rem;
  cursor: pointer;
}
.ae-lb__count {
  position: absolute;
  bottom: clamp(10px, 2vw, 26px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--ae-gray-1);
}


/* 10. MOBILE CONTACT BAR — Gọi | Zalo | Báo giá (replaces the two floating pills
   below 768 px). Reserve space with body padding so content is never covered. */
.ae-mobile-bar {
  display: none;
}
@media (max-width: 767px) {
  body.achau-brand-ui {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .ae-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--ae-z-float) + 10);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--ac-white);
    border-top: 1px solid var(--ac-line);
    box-shadow: 0 -12px 30px -22px rgba(11, 31, 58, 0.55);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ae-mobile-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 60px;
    padding: 0 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ac-navy);
    border-left: 1px solid var(--ac-line);
  }
  .ae-mobile-bar__btn:first-child {
    border-left: 0;
  }
  .ae-mobile-bar__btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }
  .ae-mobile-bar__btn--call {
    background: var(--ac-navy);
    color: var(--ac-white);
  }
  .ae-mobile-bar__btn--zalo {
    background: #0068ff;
    color: #ffffff;
  }
  .ae-mobile-bar__btn--quote {
    background: var(--ac-accent);
    color: var(--ac-navy);
  }
  /* the old floating pills step aside on phones (desktop keeps them) */
  .ae-float {
    display: none;
  }
  /* back-to-top sits above the bar, never behind it */
  .ae-top-link {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 11. FOOTER + DARK BLOCKS — navy, hairline separators */
.ae-footer {
  background: var(--ac-navy-900);
}
.ae-footer,
.ae-final,
.ae-cta {
  --ae-line: rgba(255, 255, 255, 0.12);
  --ae-line-strong: rgba(255, 255, 255, 0.24);
}
.ae-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ae-footer h2,
.ae-footer h3 {
  font-family: var(--ae-font);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ac-white);
}
.ae-footer a:hover,
.ae-footer a:focus-visible {
  color: var(--ac-accent);
}

/* 12. MOTION — reveal on scroll (one-shot, 480 ms, 20 px), hero drift, hovers.
   The class is added by assets/js/ae-editorial.js; with JS off or reduced motion
   nothing is ever hidden. */
@media (prefers-reduced-motion: no-preference) {
  .ae-js .ae-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 480ms ease, transform 480ms cubic-bezier(0.22, 0.7, 0.28, 1);
    will-change: opacity, transform;
  }
  .ae-js .ae-reveal.is-in {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ae-reveal,
  .ae-reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ae-btn,
  .ae-card,
  .ae-gallery__item img,
  .ae-media-card img {
    transition: none !important;
  }
  .ae-card:hover,
  .ae-btn:hover {
    transform: none;
  }
}

/* 13. RESPONSIVE
   ========================================================================== */
@media (max-width: 1023px) {
  .ae-kb,
  .ae-ed-7-5,
  .ae-ed-5-7,
  .ae-ed-4-8 {
    grid-template-columns: minmax(0, 1fr);
  }
  /* the split hero must stack on tablets/phones — this rule has the same
     specificity as the split rule above and comes later, so it wins */
  .ae-hero--split .ae-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .ae-hero__media {
    order: 2;
  }
  .ae-gallery {
    columns: 2;
  }
  .ae-hero__strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ae-hero__strip-item:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .ae-timeline__step::before {
    font-size: 2.2rem;
  }
}
@media (max-width: 767px) {
  :root {
    /* owner requirement: body copy is never below 16 px on phones */
    --ae-fs-body: 1rem;
    --ae-fs-small: 0.9375rem;
    --ae-container-narrow: 100%;
  }
  .ae-section {
    padding: 48px 0;
  }
  .ae-gallery {
    columns: 1;
  }
  .ae-h1,
  .ae-home h1 {
    margin-bottom: var(--ae-space-4);
  }
  .ae-pullquote {
    padding-left: var(--ae-space-4);
  }
  .ae-card {
    padding: var(--ae-space-5) var(--ae-space-4) var(--ae-space-4);
  }
  .ae-hero__strip-item {
    padding: var(--ae-space-4) var(--ae-space-3);
  }
}
@media (max-width: 359px) {
  .ae-mobile-bar__btn {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
  }
}
/* Wide screens: a little more air, same grid */
@media (min-width: 1600px) {
  :root {
    --ae-container: 1320px;
    --ae-space-9: 104px;
  }
}




/* ==========================================================================
   ROUND 2 — SỬA THEO NHẬN XÉT CỦA CHỦ WEBSITE (2026-10-17)
   Mỗi khối dưới đây ghi rõ nó ghi đè selector nào và tại sao.
   ========================================================================== */

/* R2-1 · CHỮ TRONG HERO
   Lỗi đã tìm bằng CDP: <h1> là trắng NHƯNG các <span class="ae-hero__h1-line">
   bên trong lại có màu ink do 05-homepage.css (.ae-hero__h1 .ae-hero__h1-line,
   specificity 0,2,0) → chữ nhìn thấy bị ĐEN trên nền navy. Ép trắng có chủ đích. */
.ae-hero .ae-hero__h1-line,
.ae-hero__h1 .ae-hero__h1-line {
  color: #ffffff !important;
}
.ae-home .ae-hero h1,
.ae-hero h1,
.ae-hero .ae-h1,
.ae-slide__title {
  color: #ffffff !important;
  font-size: clamp(2.2rem, 3.6vw + 1rem, 4rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  max-width: min(20ch, 100%);
  margin-bottom: var(--ae-space-5);
  text-wrap: balance;
}
/* kicker: không rớt dòng trên desktop */
@media (min-width: 1024px) {
  .ae-hero .ae-eyebrow,
  .ae-slide .ae-eyebrow {
    white-space: nowrap;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }
}
.ae-hero .ae-lead,
.ae-slide__text {
  color: var(--ae-gray-2) !important;
  font-size: clamp(1rem, 0.5vw + 0.95rem, 1.125rem);
  max-width: 52ch;
  margin-bottom: var(--ae-space-6);
}

/* R2-2 · HEADER
   – bỏ khung xám có viền quanh logo (03-header.css .ae-logo-plate) → nền trắng
     trơn, không viền/không bóng; logo cao 48 px (42 px ở mobile).
   – trên trang chủ: header TRONG SUỐT đè lên hero rồi chuyển NAVY + bóng khi cuộn
     (body.ae-has-hero + .is-scrolled do assets/js/ae-site.js bật).
   – nút: chỉ còn 1 CTA vàng “Nhận báo giá” (nút Zalo đã bỏ trong template). */
.ae-logo-plate {
  padding: 5px 7px;
  background: #ffffff;
  border: 0;
  border-radius: 3px;
  box-shadow: none;
}
.ae-logo-plate img {
  height: 48px;
}
@media (max-width: 767px) {
  .ae-logo-plate img {
    height: 42px;
  }
}
.ae-hdr__zalo {
  display: none !important;
}
.ae-hdr__cta {
  min-height: 46px;
}
body.ae-has-hero .ae-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  /* R2-2: the navy state must apply instantly — a background-color/box-shadow
     transition can hold the start value for a frame, which made automated checks
     read "transparent". The state change is instant; motion lives elsewhere. */
  transition: none;
}
body.ae-has-hero .ae-header::before {
  opacity: 0.35;
}
body.ae-has-hero .ae-header:not(.is-scrolled) .ae-nav a,
body.ae-has-hero .ae-header:not(.is-scrolled) .ae-hdr__brand-name,
body.ae-has-hero .ae-header:not(.is-scrolled) .ae-hdr__hotline {
  color: #ffffff;
}
body.ae-has-hero .ae-header:not(.is-scrolled) .ae-icon-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(7, 20, 42, 0.35);
}
body.ae-has-hero .ae-header.is-scrolled {
  background-color: var(--ac-navy);
  border-bottom-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 34px -26px rgba(7, 20, 42, 0.95);
  backdrop-filter: none;
}
body.ae-has-hero .ae-header.is-scrolled .ae-nav a,
body.ae-has-hero .ae-header.is-scrolled .ae-hdr__hotline,
body.ae-has-hero .ae-header.is-scrolled .ae-hdr__brand-name {
  color: #ffffff;
}
body.ae-has-hero .ae-header.is-scrolled .ae-icon-btn {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}
body.ae-has-hero .ae-hdr__brand-text {
  display: none;
}
.admin-bar .ae-header {
  top: 32px;
}

/* R2-3 · NÚT NỔI (desktop) — gom thành 1 cụm gọn: 2 nút tròn 48 px, icon-only,
   có nhãn hiện ra khi hover/focus; mobile đã có thanh 3 nút nên cụm này ẩn. */
.ae-float {
  right: 18px;
  bottom: 18px;
  gap: 10px;
  align-items: flex-end;
}
.ae-float__btn {
  position: relative;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  justify-content: center;
  border-radius: 999px;
}
.ae-float__btn > span {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 3px;
  background: var(--ac-navy);
  color: #ffffff;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ae-transition);
}
.ae-float__btn:hover > span,
.ae-float__btn:focus-visible > span {
  opacity: 1;
}
.ae-float__btn svg {
  width: 22px;
  height: 22px;
}

/* R2-4 · HERO SLIDESHOW (toàn chiều rộng, 78–85vh, 3–4 slide ảnh thật)
   – slide tuyệt đối, fade + Ken Burns rất nhẹ; lớp phủ gradient navy từ trái.
   – chấm điều hướng, nút trái/phải, thanh tiến trình vàng (do ae-editorial.js
     điều khiển; tôn trọng prefers-reduced-motion = tắt tự chạy). */
.ae-hero--slides {
  padding: 0;
  background: var(--ac-navy-900);
  border-bottom: 0;
}
.ae-hero--slides::before,
.ae-hero--slides::after {
  display: none;
}
.ae-slides {
  position: relative;
  min-height: clamp(560px, 82vh, 940px);
  overflow: hidden;
}
.ae-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms ease, visibility 900ms ease;
}
.ae-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.ae-slide__media {
  position: absolute;
  inset: 0;
}
.ae-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
@keyframes ae-kenburns {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.1);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ae-slide.is-active .ae-slide__media img {
    animation: ae-kenburns 8s ease-out forwards;
  }
}
/* lớp phủ: navy đậm bên trái để chữ trắng đọc được, nhạt dần sang phải */
.ae-slide__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    96deg,
    rgba(7, 20, 42, 0.96) 0%,
    rgba(7, 20, 42, 0.86) 34%,
    rgba(7, 20, 42, 0.52) 62%,
    rgba(7, 20, 42, 0.42) 100%
  );
}
.ae-slide__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
  padding-top: calc(var(--ae-header-h) + 28px);
  padding-bottom: 84px;
}
.ae-slide__title {
  max-width: min(20ch, 100%);
}
.ae-slides__ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  z-index: 3;
}
.ae-slides__ui-inner {
  display: flex;
  align-items: center;
  gap: var(--ae-space-4);
}
.ae-slides__arrows {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.ae-slides__btn {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(7, 20, 42, 0.5);
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--ae-transition), border-color var(--ae-transition);
}
.ae-slides__btn:hover,
.ae-slides__btn:focus-visible {
  background: var(--ac-accent);
  border-color: var(--ac-accent);
  color: var(--ac-navy);
}
.ae-slides__dots {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ae-slides__dot {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  transition: background-color var(--ae-transition);
}
.ae-slides__dot.is-active {
  background: var(--ac-accent);
}
/* thanh tiến trình mảnh chạy trong lúc chờ chuyển slide */
.ae-slides__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
  z-index: 4;
  overflow: hidden;
}
.ae-slides__progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ac-accent);
}
.ae-slide__count {
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.75);
}
/* dải 4 điểm mạnh nằm ngay dưới hero, nền navy đậm */
.ae-hero--slides .ae-hero__strip {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 20, 42, 0.96);
}
.ae-hero--slides .ae-hero__strip-item {
  padding: var(--ae-space-5) var(--ae-space-4);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.ae-hero--slides .ae-hero__strip-item:first-child {
  border-left: 0;
}
.ae-hero--slides .ae-hero__strip-item strong {
  color: #ffffff;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: none;
}
.ae-hero--slides .ae-hero__strip-item span span {
  color: var(--ae-gray-1);
}

/* R2-5 · TIMELINE QUY TRÌNH — sửa lỗi “02, 04, … 18”
   Nguyên nhân: 04-components.css đã có counter-reset + counter-increment:
   ae-step trên ::before, lớp editorial lại tăng thêm 1 lần ⇒ mỗi bước +2.
   Cách sửa: dùng counter RIÊNG (ae-mag) chỉ tăng trên phần tử, và tắt hẳn
   counter cũ trên ::before; số lớn nằm PHÍA SAU nội dung (z-index 0). */
.ae-timeline {
  counter-reset: ae-mag;
}
.ae-timeline__step {
  counter-increment: ae-mag;
  border-top: 2px solid var(--ac-navy);
  padding-top: 72px;
}
.ae-timeline__step::before {
  counter-increment: none;
  content: counter(ae-mag, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 6px;
  width: auto;
  height: auto;
  display: block;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--ae-font-display);
  font-size: clamp(2.4rem, 3vw + 1rem, 3.6rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(11, 31, 58, 0.12);
  z-index: 0;
  pointer-events: none;
}
.ae-timeline__step > * {
  position: relative;
  z-index: 1;
}
.ae-timeline__title {
  margin-top: 0;
}

/* R2-6 · NĂNG LỰC KỸ THUẬT — thẻ navy, số thứ tự, đường vàng (không còn thẻ trắng) */
#nang-luc .ae-capabilities {
  counter-reset: ae-cap;
}
#nang-luc .ae-card {
  counter-increment: ae-cap;
  background: var(--ac-navy);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  justify-content: flex-start;
}
#nang-luc .ae-card::before {
  content: counter(ae-cap, decimal-leading-zero);
  position: absolute;
  top: var(--ae-space-4);
  right: var(--ae-space-4);
  font-family: var(--ae-font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ac-accent);
}
#nang-luc .ae-card::after {
  height: 3px;
  transform: scaleX(1);
  background: var(--ac-accent);
}
#nang-luc .ae-card__icon {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--ac-accent);
}
#nang-luc .ae-card__title {
  color: #ffffff;
}
#nang-luc .ae-card p,
#nang-luc .ae-card li,
#nang-luc .ae-card__text {
  color: var(--ae-gray-2);
}
#nang-luc .ae-card:hover {
  border-color: var(--ac-accent);
}

/* R2-7 · NHỊP SECTION — mỗi khối có số thứ tự lớn (yếu tố hình ảnh thay cho
   dải trắng chỉ có chữ) */
.ae-home {
  counter-reset: ae-sec;
}
.ae-home .ae-section-head {
  position: relative;
  counter-increment: ae-sec;
  padding-top: 34px;
}
.ae-home .ae-section-head::before {
  content: counter(ae-sec, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--ae-font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ac-accent);
  letter-spacing: 0.02em;
}

/* R2-8 · DỊCH VỤ — 2 thẻ lớn có ảnh + 9 thẻ nhỏ, chia 2 cụm */
.ae-svc-cluster {
  margin-top: clamp(32px, 4vw, 56px);
}
.ae-svc-cluster__title {
  display: flex;
  align-items: center;
  gap: var(--ae-space-3);
  margin: 0 0 var(--ae-space-5);
  padding-top: var(--ae-space-4);
  border-top: 3px solid var(--ac-navy);
  font-family: var(--ae-font-display);
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.75rem);
  color: var(--ac-navy);
}
.ae-svc-cluster__title span {
  font-family: var(--ae-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-accent-ink);
}
.ae-svc-featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ae-space-4);
  margin-bottom: var(--ae-space-5);
}
.ae-svc-featured--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 640px;
}
@media (max-width: 1023px) {
  .ae-svc-featured {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* R2-9 · “HÌNH ẢNH THỰC TẾ” — dải ảnh kéo ngang (scroll-snap) + lightbox */
.ae-gallery-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 30%);
  gap: var(--ae-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0 0 var(--ae-space-4);
  scrollbar-width: thin;
}
.ae-gallery-row .ae-gallery__item {
  scroll-snap-align: start;
  margin: 0;
}
.ae-gallery-row .ae-gallery__item img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ae-gallery-row::-webkit-scrollbar {
  height: 6px;
}
.ae-gallery-row::-webkit-scrollbar-thumb {
  background: var(--ac-line);
  border-radius: 3px;
}
@media (max-width: 767px) {
  .ae-gallery-row {
    grid-auto-columns: minmax(230px, 78%);
  }
}

/* R2-10 · CTA CUỐI TRANG — ảnh thật + lớp phủ navy */
.ae-cta-image {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 7vw, 120px) 0;
  background: var(--ac-navy-900);
  color: #ffffff;
}
.ae-cta-image__bg {
  position: absolute;
  inset: 0;
}
.ae-cta-image__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ae-cta-image__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(92deg, rgba(7, 20, 42, 0.95) 0%, rgba(7, 20, 42, 0.78) 48%, rgba(7, 20, 42, 0.6) 100%);
}
.ae-cta-image__inner {
  position: relative;
  z-index: 2;
}
.ae-cta-image__title {
  margin: 0 0 var(--ae-space-4);
  font-family: var(--ae-font-display);
  font-size: clamp(1.75rem, 2.6vw + 1rem, 3.1rem);
  line-height: 1.1;
  color: #ffffff;
  max-width: 24ch;
}
.ae-cta-image p {
  color: var(--ae-gray-2);
  max-width: 58ch;
}
.ae-cta-image__contact {
  margin-top: var(--ae-space-6);
  padding-top: var(--ae-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  gap: var(--ae-space-2);
  font-size: 0.9375rem;
  color: var(--ae-gray-2);
}
.ae-cta-image__contact a {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: var(--ac-accent);
  text-underline-offset: 3px;
}