/* ==========================================================================
   Á CHÂU ELECTRIC — ROUND 3 (2026-10-17)
   12 · TYPOGRAPHY NORMALISATION + INDUSTRIAL MOTION LAYER
   --------------------------------------------------------------------------
   Loaded LAST (after 11-editorial.css). Its only job is to make the two earlier
   layers behave as ONE design system:

     1. TWO font families only — no serif, no synthetic bold.
        Be Vietnam Pro 400/500/700/800 (content, headings, menu, buttons)
        Barlow Condensed 600/700  (big numbers, uppercase kickers, category labels)
     2. A FIXED type scale (CSS variables) so every section title / card title /
        card description is exactly the same size and weight.
     3. Hero controls no longer overlap the CTA; services / EV / chips / process
        / icons / footer corrected.
     4. Electrical-engineering visual language: circuit traces, a running current
        line, one chamfered corner, gold sweep on hover, a slow category ticker.
        Pure CSS/SVG. Only transform / opacity / stroke-dashoffset are animated.
        prefers-reduced-motion disables everything that moves on its own.

   Rollback: delete this file + its enqueue block in inc/achau-editorial.php.
   ========================================================================== */

/* 1. TOKENS + BASE
   ========================================================================== */
:root {
  /* 1.1 font stacks — NO serif anywhere */
  --r3-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --r3-num: 'Barlow Condensed', 'Be Vietnam Pro', system-ui, sans-serif;

  /* 1.2 fixed type scale — every role reads from here, never ad-hoc values */
  --r3-fs-h1: 64px;
  --r3-fs-h2: 40px;
  --r3-fs-card: 20px;
  --r3-fs-body: 17px;
  --r3-fs-copy: 15px;
  --r3-fs-small: 14px;
  --r3-fs-label: 13px;
  --r3-fs-num: 28px;

  /* 1.3 rhythm */
  --r3-lh-h: 1.15;
  --r3-lh-body: 1.65;
  --r3-ls-h: -0.01em;
  --r3-ls-kicker: 0.12em;

  /* 1.4 palette anchors used by this layer */
  --r3-gold: #ffb400;
  --r3-gold-ink: #8a5a00;
  --r3-navy: #0b1f3a;
  --r3-navy-700: #12305a;
  --r3-navy-900: #07142a;
  --r3-ink-muted: #5b6879;

  /* 1.5 industrial geometry */
  --r3-chamfer: 16px;
  --r3-clip: polygon(0 0, calc(100% - var(--r3-chamfer)) 0, 100% var(--r3-chamfer), 100% 100%, 0 100%);
  --r3-clip-sm: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  --r3-ease: cubic-bezier(0.22, 0.7, 0.28, 1);
}

@media (max-width: 1023px) {
  :root {
    --r3-fs-h1: 44px;
    --r3-fs-h2: 32px;
    --r3-fs-num: 24px;
  }
}
@media (max-width: 600px) {
  :root {
    --r3-fs-h1: 38px;
    --r3-fs-h2: 26px;
    --r3-fs-card: 18px;
    --r3-fs-body: 16px;
    --r3-fs-num: 22px;
  }
}

/* Never let the browser fake a weight or a slant: every used weight is a real
   self-hosted file (400 / 500 / 700 / 800 + Barlow 600 / 700). */
html {
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ae-home,
.ae-header,
.ae-footer,
.ae-page,
.ae-home button,
.ae-header button,
.ae-footer button,
.ae-home input,
.ae-home select,
.ae-home textarea {
  font-family: var(--r3-font);
}

/* Lining + tabular figures everywhere: 01, 02 … never shift. */
.ae-home,
.ae-header,
.ae-footer,
.ae-page,
.ae-home .ae-card__title,
.ae-timeline__step::before,
.ae-news__count {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

/* 2. TYPE SCALE — one role = one size + one weight
   ========================================================================== */

/* H1 — hero only, 800, once per page */
.ae-home h1,
.ae-home .ae-hero h1,
.ae-home .ae-hero .ae-slide__title,
.ae-h1 {
  font-family: var(--r3-font) !important;
  font-size: var(--r3-fs-h1) !important;
  font-weight: 800 !important;
  line-height: var(--r3-lh-h) !important;
  letter-spacing: var(--r3-ls-h) !important;
  text-wrap: wrap;
}

/* H2 — every section title, identical everywhere */
.ae-home .ae-section h2,
.ae-home .ae-h2,
.ae-h2,
.ae-home .ae-cta-image__title,
.ae-home .ae-ev-card__title {
  font-family: var(--r3-font);
  font-size: var(--r3-fs-h2);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: var(--r3-ls-h);
  text-wrap: balance;
}

/* H3 / card titles — identical size + weight */
.ae-home h3,
.ae-home .ae-h3,
.ae-h3,
.ae-home .ae-card__title,
.ae-home .ae-media-card__title,
.ae-home .ae-timeline__title,
.ae-home .ae-svc-cluster__title,
.ae-home .ae-post-card__title,
.ae-home .ae-kb__title,
.ae-home .ae-kb__name {
  font-family: var(--r3-font);
  font-size: var(--r3-fs-card);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--r3-ls-h);
}

/* Kicker / eyebrow / category label — Barlow Condensed, uppercase */
.ae-home .ae-eyebrow,
.ae-home .ae-slogan,
.ae-home .ae-card__num,
.ae-home .ae-media-card__kicker,
.ae-home .ae-svc-cluster__title span,
.ae-home .ae-kb__cat,
.ae-home .ae-kb__kicker,
.ae-home .ae-badge,
.ae-home .ae-slides__count,
.ae-home .ae-post-card__cat,
.ae-home .ae-post-card__date,
.ae-home .ae-news__count,
.ae-footer__title,
.ae-footer__brand-sub {
  font-family: var(--r3-num);
  font-size: var(--r3-fs-label);
  font-weight: 600;
  letter-spacing: var(--r3-ls-kicker);
  text-transform: uppercase;
}

/* Big numbers — Barlow Condensed, same size for every numeral role */
.ae-home .ae-timeline__step::before,
.ae-home .ae-timeline__step > .ae-num,
.ae-home .ae-num,
.ae-home .ae-section-head::before {
  font-family: var(--r3-num);
  font-size: var(--r3-fs-num);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Body / lead / copy */
.ae-home p,
.ae-home .ae-body,
.ae-page p,
.ae-card__text,
.ae-timeline__text,
.ae-post-card__excerpt,
.ae-footer,
.ae-footer p,
.ae-footer__list a,
.ae-footer__contact,
.ae-footer__desc,
.ae-note,
.ae-caption,
.ae-hero__meta,
.ae-hero__strip-item span span,
.ae-gallery__cap,
.ae-figcap {
  font-family: var(--r3-font);
  font-size: var(--r3-fs-copy);
  font-weight: 400;
  line-height: var(--r3-lh-body);
}

.ae-home .ae-lead,
.ae-home .ae-slide__text,
.ae-lead {
  font-family: var(--r3-font);
  font-size: var(--r3-fs-body);
  font-weight: 400;
  line-height: var(--r3-lh-body);
  letter-spacing: 0;
}

/* Small labels that stay in Be Vietnam Pro (menu / buttons / strong labels) */
.ae-nav a,
.ae-hdr__hotline,
.ae-hero__strip-item strong,
.ae-solutions .ae-card__title,
.ae-home .ae-hero__meta span {
  font-family: var(--r3-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.ae-footer__brand-name {
  font-family: var(--r3-font);
  font-size: var(--r3-fs-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ae-home .ae-card__text,
.ae-home .ae-timeline__text,
.ae-home .ae-post-card__excerpt,
.ae-home .ae-footer__list a {
  color: var(--r3-ink-muted);
}

/* Buttons — one size + one weight everywhere */
.ae-btn,
.ae-home .ae-btn {
  font-family: var(--r3-font);
  font-size: var(--r3-fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* 2b. COMPONENT-LEVEL CORRECTIONS FOUND BY THE COMPUTED-STYLE SWEEP
   --------------------------------------------------------------------------
   Flatsome's own nav / card-CTA / hero-strip rules out-specify a plain class,
   so each one is re-asserted with the exact selector that wins. */
.ae-header .nav-top-link,
.ae-header .nav-top-link > span,
.ae-nav .nav-top-link {
  font-family: var(--r3-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.ae-home .ae-card__cta,
.ae-card__cta {
  font-family: var(--r3-font);
  font-size: var(--r3-fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ae-hero--slides .ae-hero__strip-item strong {
  font-family: var(--r3-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.ae-home .ae-card__num {
  color: var(--r3-gold-ink);
}
.ae-footer .ae-footer__title {
  font-family: var(--r3-num);
  font-size: var(--r3-fs-label);
  font-weight: 600;
  letter-spacing: var(--r3-ls-kicker);
  text-transform: uppercase;
  color: #ffffff;
}
.ae-footer__top-link {
  font-size: var(--r3-fs-copy);
}

/* 3. LOGO PLATE — 8 px radius, 6 px padding, white, no border/shadow, 48 px */
.ae-logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: #ffffff;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}
.ae-logo-plate img {
  display: block;
  width: auto;
  height: 48px;
}
.ae-footer .ae-logo-plate {
  background: #ffffff;
  border-radius: 8px;
}
.ae-footer .ae-logo-plate img {
  height: 48px;
}

/* 4. HERO — photo, safe CTA zone, controls bottom-right
   ========================================================================== */
.ae-hero--slides {
  background: var(--r3-navy-900);
  overflow: hidden;
}
.ae-slides {
  min-height: clamp(620px, 84vh, 900px);
}
/* 4.1 photo: a little brighter, subject kept on the right, text on the left */
.ae-slide__media img {
  filter: brightness(1.08) contrast(1.05);
  object-position: 50% 50%;
}
.ae-slide.is-active .ae-slide__media img {
  /* keep the hero still: only the dot progress + the current line animate, so
     at most two animations ever run in the hero viewport */
  animation: none !important;
}
.ae-slide__scrim {
  background: linear-gradient(
    96deg,
    rgba(7, 20, 42, 0.97) 0%,
    rgba(7, 20, 42, 0.93) 32%,
    rgba(7, 20, 42, 0.72) 52%,
    rgba(7, 20, 42, 0.3) 76%,
    rgba(7, 20, 42, 0.12) 100%
  );
}
.ae-slide__art {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #d8e6ff;
  opacity: 0.08;
  pointer-events: none;
}
.ae-slide__inner {
  z-index: 3;
  justify-content: center;
  padding-top: calc(var(--ae-header-h) + 48px);
  /* safe area: the control cluster lives in this reserved strip */
  padding-bottom: 148px;
}
.ae-slide__title {
  max-width: 800px;
}
.ae-home .ae-hero h1.ae-slide__title,
.ae-home .ae-hero .ae-slide__title {
  max-width: 800px;
}
/* Desktop: anchor the photo left and scale it slightly so the workers sit on
   the RIGHT half, clear of the text column (the source frame is centred). */
@media (min-width: 1024px) {
  .ae-slide__media {
    overflow: hidden;
  }
  .ae-slide__media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 128%;
    max-width: none;
    height: 100%;
  }
}
@media (max-width: 1023px) {
  .ae-home .ae-hero h1.ae-slide__title,
  .ae-home .ae-hero .ae-slide__title {
    max-width: 100%;
  }
}
.ae-hero__ctas,
.ae-hero__meta {
  position: relative;
  z-index: 5;
  max-width: 560px;
}
.ae-hero__ctas {
  margin-bottom: 0;
}
.ae-hero__meta {
  margin-top: var(--ae-space-5);
}

/* 4.2 control cluster — bottom right, never over the CTA */
.ae-slides__ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  z-index: 6;
  pointer-events: none;
}
.ae-container.ae-slides__ui-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.ae-slides__ctrl {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 8px 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(7, 20, 42, 0.58);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: 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.52);
  border-radius: 999px;
  background: rgba(7, 20, 42, 0.35);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.ae-slides__btn svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}
.ae-slides__btn:hover,
.ae-slides__btn:focus-visible {
  background: var(--r3-gold);
  border-color: var(--r3-gold);
  color: var(--r3-navy);
}
.ae-slides__arrows {
  display: flex;
  gap: 8px;
  margin-left: 2px;
}
.ae-slides__pause {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}
.ae-slides__pause svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}
.ae-slides__pause-icon {
  display: inline-flex;
}
.ae-slides__pause-icon--play {
  display: none;
}
.ae-slides__pause[aria-pressed='true'] .ae-slides__pause-icon--pause {
  display: none;
}
.ae-slides__pause[aria-pressed='true'] .ae-slides__pause-icon--play {
  display: inline-flex;
}
.ae-slides__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ae-slides__dot {
  position: relative;
  width: 28px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.34);
  overflow: hidden;
  cursor: pointer;
}
.ae-slides__dot.is-active {
  background: rgba(255, 255, 255, 0.26);
}
.ae-slides__dot.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--r3-gold);
  transform: scaleX(0);
  transform-origin: left center;
  animation: ae-dot-run 6000ms linear forwards;
}
.ae-slides[data-paused='true'] .ae-slides__dot.is-active::after {
  animation-play-state: paused;
}

/* transparent header over the hero: a soft navy veil keeps white nav text and
   icon buttons readable even where the photograph is bright */
body.ae-has-hero .ae-header:not(.is-scrolled) {
  background-image: linear-gradient(180deg, rgba(7, 20, 42, 0.86) 0%, rgba(7, 20, 42, 0.55) 58%, rgba(7, 20, 42, 0) 100%);
}
body.ae-has-hero .ae-header:not(.is-scrolled) .ae-icon-btn {
  background: rgba(7, 20, 42, 0.78);
  border-color: rgba(255, 255, 255, 0.5);
}
body.ae-has-hero .ae-header:not(.is-scrolled) .ae-icon-btn--call {
  background: var(--r3-gold);
  border-color: var(--r3-gold);
  color: var(--r3-navy);
}
/* header icon buttons: the phone is a gold plate with navy icon (9.3:1), the
   menu is white on a dark plate (18:1). These two were the last <3:1 icons. */
.ae-header .ae-icon-btn {
  background: rgba(7, 20, 42, 0.78);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}
.ae-header .ae-icon-btn--call {
  background: var(--r3-gold);
  border-color: var(--r3-gold);
  color: var(--r3-navy);
}
.ae-header .ae-icon-btn:hover,
.ae-header .ae-icon-btn:focus-visible {
  background: var(--r3-gold);
  border-color: var(--r3-gold);
  color: var(--r3-navy);
}
.ae-header.is-scrolled .ae-icon-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.ae-header.is-scrolled .ae-icon-btn--call {
  background: var(--r3-gold);
  border-color: var(--r3-gold);
  color: var(--r3-navy);
}
/* 11-editorial colours every scrolled header icon white at higher specificity;
   the call plate is gold, so its icon must stay navy (9.27:1). */
body.ae-has-hero .ae-header.is-scrolled .ae-icon-btn--call {
  color: var(--r3-navy);
}
.ae-slides__count {
  margin: 0;
  min-width: 50px;
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.1em;
}

/* 4.3 the running current line at the foot of the hero */
.ae-hero__flow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}
.ae-hero__flow svg {
  display: block;
  width: 100%;
  height: 3px;
}
.ae-hero__flow path {
  fill: none;
  stroke: var(--r3-gold);
  stroke-width: 2;
  stroke-dasharray: 6 94;
  animation: ae-flow 8s linear infinite;
}

/* 4.4 hero fact strip */
.ae-hero--slides .ae-hero__strip {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.ae-hero--slides .ae-hero__strip-item svg {
  color: var(--r3-gold);
}

/* 5. CATEGORY TICKER — slow, pauses on hover/focus, no brand names
   ========================================================================== */
.ae-ticker {
  position: relative;
  overflow: hidden;
  padding: 13px 0;
  background: var(--r3-navy-900);
  border-top: 1px solid rgba(255, 180, 0, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ae-ticker__track {
  display: flex;
  width: max-content;
  animation: ae-ticker 52s linear infinite;
}
.ae-ticker:hover .ae-ticker__track,
.ae-ticker:focus-within .ae-ticker__track {
  animation-play-state: paused;
}
.ae-ticker__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ae-ticker__list li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  font-family: var(--r3-num);
  font-size: var(--r3-fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffffff;
}
.ae-ticker__list li::after {
  content: '';
  width: 8px;
  height: 12px;
  background: var(--r3-gold);
  clip-path: polygon(58% 0, 12% 52%, 46% 52%, 34% 100%, 88% 44%, 54% 44%);
}

@keyframes ae-dot-run {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes ae-flow {
  to {
    stroke-dashoffset: -100;
  }
}
@keyframes ae-ticker {
  to {
    transform: translateX(-50%);
  }
}

/* 6. SERVICES — two large cards, stacked kicker → title → text → CTA
   ========================================================================== */
.ae-svc-featured {
  gap: var(--ae-space-5);
  margin-bottom: var(--ae-space-5);
}
.ae-svc-featured .ae-media-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--ac-line);
  border-radius: 0;
  box-shadow: none;
  color: var(--r3-navy);
  clip-path: var(--r3-clip);
  transition: transform 200ms var(--r3-ease), border-color 200ms ease;
}
.ae-svc-featured .ae-media-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 420ms var(--r3-ease);
}
.ae-svc-featured .ae-media-card__body {
  position: static;
  inset: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 22px 24px 24px;
  background: #ffffff;
  color: var(--r3-navy);
}
.ae-svc-featured .ae-media-card__kicker {
  color: var(--r3-gold-ink);
  margin: 0;
}
.ae-svc-featured .ae-media-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: var(--r3-navy);
  font-weight: 700;
}
.ae-svc-featured .ae-media-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: var(--r3-ink-muted);
  font-size: var(--r3-fs-copy);
  line-height: 1.6;
}
.ae-svc-featured .ae-media-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 2px;
  color: var(--r3-gold-ink);
  font-size: var(--r3-fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ae-svc-featured .ae-media-card__cta svg {
  width: 16px;
  height: 16px;
  transition: transform 200ms var(--r3-ease);
}
.ae-svc-featured .ae-media-card:hover,
.ae-svc-featured .ae-media-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--r3-gold);
}
.ae-svc-featured .ae-media-card:hover img {
  transform: scale(1.04);
}
.ae-svc-featured .ae-media-card:hover .ae-media-card__cta svg {
  transform: translateX(4px);
}

/* 6.1 EV — one full-width plate: photo left, content right (no empty half) */
.ae-ev-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--ac-line);
  color: var(--r3-navy);
  clip-path: var(--r3-clip);
}
.ae-ev-card__media {
  position: relative;
  min-height: 360px;
  background: var(--r3-navy-900);
}
/* Privacy: photo #1368 shows a vehicle licence plate. The original Media
   Library file is NOT modified; a CSS blur strip covers the bottom of the
   rendered image only (owner decision 2026-10-17). */
.ae-ev-card__media::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background: linear-gradient(180deg, rgba(7, 20, 42, 0) 0%, rgba(7, 20, 42, 0.55) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: none;
}
.ae-ev-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  transition: transform 420ms var(--r3-ease);
}
.ae-ev-card:hover .ae-ev-card__media img {
  transform: scale(1.04);
}
.ae-ev-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 3vw, 44px);
}
.ae-ev-card__kicker {
  margin: 0;
  color: var(--r3-gold-ink);
  font-family: var(--r3-num);
  font-size: var(--r3-fs-label);
  font-weight: 600;
  letter-spacing: var(--r3-ls-kicker);
  text-transform: uppercase;
}
.ae-ev-card__title {
  margin: 0;
  color: var(--r3-navy);
}
.ae-ev-card__text {
  margin: 0;
  color: var(--r3-ink-muted);
  max-width: 58ch;
}
.ae-ev-card__list {
  display: grid;
  gap: 8px;
  margin: 2px 0 4px;
  padding: 0;
  list-style: none;
}
.ae-ev-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--r3-navy);
  font-size: var(--r3-fs-copy);
  line-height: 1.5;
}
.ae-ev-card__bolt {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--r3-gold-ink);
}
.ae-ev-card__cta {
  margin-top: 6px;
}

/* 7. SOLUTIONS — six chips in 3 × 2 (desktop) / 2 × 3 (mobile), no orphan */
.ae-home .ae-solutions.ae-grid--5 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ae-home .ae-solutions .ae-card {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  height: auto;
  min-height: 68px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid var(--ac-line);
  border-radius: 3px;
  box-shadow: none;
  clip-path: none;
}
.ae-home .ae-solutions .ae-card::after {
  display: none;
}
.ae-home .ae-solutions .ae-card__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  background: #fff3d0;
  border: 0;
  color: var(--r3-navy);
}
.ae-home .ae-solutions .ae-card__icon svg {
  width: 20px;
  height: 20px;
}
.ae-home .ae-solutions .ae-card:hover {
  transform: translateY(-4px);
  border-color: var(--r3-gold);
}

/* 8. PROCESS — 9 steps, a current line, less dead space below
   ========================================================================== */
#quy-trinh {
  padding-block: clamp(72px, 6vw, 96px);
}
#quy-trinh .ae-timeline {
  position: relative;
  margin-bottom: 0;
}
#quy-trinh .ae-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(11, 31, 58, 0.16) 0 10px, transparent 10px 25px);
  pointer-events: none;
}
#quy-trinh .ae-timeline::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 24%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--r3-gold), transparent);
  transform: translateX(-110%);
  animation: ae-flow-x 7s linear infinite;
  pointer-events: none;
}
#quy-trinh .ae-timeline__step {
  border-top: 2px solid var(--r3-navy);
  padding-top: 56px;
}
#quy-trinh .ae-timeline__step::before {
  top: 4px;
  color: var(--r3-gold-ink);
}
#quy-trinh .ae-timeline__step::after {
  display: none;
}
@keyframes ae-flow-x {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(520%);
  }
}

/* 9. CAPABILITIES — gold icon on a navy-700 tile (contrast ≈ 7:1)
   ========================================================================== */
#nang-luc .ae-card__icon {
  width: 52px;
  height: 52px;
  background: var(--r3-navy-700);
  border: 1px solid rgba(255, 180, 0, 0.5);
  color: var(--r3-gold);
}
#nang-luc .ae-card__icon svg,
#nang-luc .ae-card__icon .ae-icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.8;
  color: var(--r3-gold);
}

/* icons inherit the label colour of their button (never a fixed accent) */
.ae-btn .ae-icon,
.ae-btn svg {
  color: inherit;
}

/* 10. FOOTER — readable slogan, one logo, navy circuit texture
   ========================================================================== */
.ae-footer {
  position: relative;
  overflow: hidden;
  padding-bottom: 96px;
}
/* The desktop floating contact cluster is only shown when the page gutter is
   wide enough to hold it WITHOUT covering a card (≥1400 px). Tablets and small
   laptops keep the header hotline + quote button; phones keep the 3-button bar. */
@media (max-width: 1399px) {
  .ae-float {
    display: none;
  }
  /* the fixed back-to-top would sit on top of cards in narrow gutters */
  .ae-top-link {
    display: none;
  }
}
.ae-float {
  right: 8px;
  bottom: 8px;
}
@media (max-width: 767px) {
  .ae-footer {
    padding-bottom: 120px;
  }
}
.ae-footer__circuit {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: #8fb4e8;
  opacity: 0.07;
  pointer-events: none;
}
.ae-footer > .ae-container {
  position: relative;
  z-index: 1;
}
.ae-footer__slogan {
  color: var(--r3-gold);
  font-weight: 700;
}
.ae-footer__desc,
.ae-footer__list a,
.ae-footer__contact a,
.ae-footer__contact address {
  color: #c7d3e2;
}
.ae-footer__bottom {
  color: #9fb0c6;
}

/* 11. LATEST ARTICLES — scroll-snap slider, 3 / 2 / 1.2 cards
   ========================================================================== */
.ae-news {
  background: var(--ac-paper);
  border-top: 1px solid var(--ac-line);
}
.ae-news .ae-section-head {
  margin-bottom: 28px;
}
.ae-news__slider {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.ae-news__slider::-webkit-scrollbar {
  display: none;
}
.ae-news__slider:focus-visible {
  outline: 3px solid var(--r3-navy);
  outline-offset: 4px;
}
.ae-news__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ae-news__slide {
  scroll-snap-align: start;
  min-width: 0;
}
.ae-post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--ac-line);
  clip-path: var(--r3-clip);
  transition: transform 200ms var(--r3-ease), border-color 200ms ease;
}
.ae-post-card:hover,
.ae-post-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--r3-gold);
}
.ae-post-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--r3-navy-900);
}
.ae-post-card__media-link {
  display: block;
  width: 100%;
  height: 100%;
}
.ae-post-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--r3-ease);
}
.ae-post-card:hover .ae-post-card__media img {
  transform: scale(1.04);
}
.ae-post-card__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0b1f3a 0%, #12305a 100%);
}
.ae-post-card__fallback-icon {
  width: 56px;
  height: 56px;
  color: var(--r3-gold);
}
.ae-post-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 18px 20px 20px;
}
.ae-post-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ae-post-card__cat {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  background: var(--r3-navy);
  color: var(--r3-gold);
  text-decoration: none;
}
.ae-post-card__date {
  color: var(--r3-ink-muted);
  white-space: nowrap;
}
.ae-post-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
  margin: 0;
}
.ae-post-card__title a {
  color: var(--r3-navy);
  text-decoration: none;
}
.ae-post-card__title a:hover,
.ae-post-card__title a:focus-visible {
  color: var(--r3-gold-ink);
}
.ae-post-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.3em;
  margin: 0;
}
.ae-post-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: auto;
  color: var(--r3-gold-ink);
  font-family: var(--r3-font);
  font-size: var(--r3-fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.ae-post-card__more svg {
  width: 16px;
  height: 16px;
  transition: transform 200ms var(--r3-ease);
}
.ae-post-card__more:hover svg {
  transform: translateX(4px);
}
.ae-news__ui {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
}
.ae-news.is-static .ae-news__ui {
  display: none;
}
.ae-news__progress {
  flex: 1;
  height: 3px;
  background: rgba(11, 31, 58, 0.14);
  overflow: hidden;
}
.ae-news__progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--r3-gold);
}
.ae-news__meta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ae-news__count {
  color: var(--r3-ink-muted);
}
.ae-news__arrows {
  display: flex;
  gap: 8px;
}
.ae-news__btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(11, 31, 58, 0.28);
  border-radius: 999px;
  background: #ffffff;
  color: var(--r3-navy);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.ae-news__btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}
.ae-news__btn:hover,
.ae-news__btn:focus-visible {
  background: var(--r3-gold);
  border-color: var(--r3-gold);
  color: var(--r3-navy);
}

/* 12. INDUSTRIAL ACCENTS — chamfer, sweep, current, slant
   ========================================================================== */
/* chamfered metal-plate corner + gold "charge" sweep on every button */
.ae-btn {
  position: relative;
  overflow: hidden;
  clip-path: var(--r3-clip-sm);
}
.ae-btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg) translateX(-160%);
  opacity: 0;
  pointer-events: none;
}
.ae-btn:hover::after,
.ae-btn:focus-visible::after {
  animation: ae-charge 720ms var(--r3-ease);
}
.ae-btn--secondary::after,
.ae-btn--ghost::after {
  background: linear-gradient(90deg, transparent, rgba(255, 180, 0, 0.6), transparent);
}
@keyframes ae-charge {
  0% {
    opacity: 0;
    transform: skewX(-18deg) translateX(-160%);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: skewX(-18deg) translateX(480%);
  }
}

/* cards: 4 px lift + gold edge (already partly in 11-editorial, repeated here so
   every card type shares exactly one behaviour) */
.ae-home .ae-card:hover,
.ae-home .ae-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--r3-gold);
}

/* kicker bullet = small lightning bolt (CSS shape, no extra HTTP request) */
.ae-home .ae-eyebrow::before {
  width: 9px;
  height: 13px;
  border-radius: 0;
  background: var(--r3-gold);
  clip-path: polygon(58% 0, 12% 52%, 46% 52%, 34% 100%, 88% 44%, 54% 44%);
}
.ae-home .ae-section-head::before {
  color: var(--r3-gold-ink);
}
.ae-home .ae-section-head {
  padding-top: 30px;
}

/* skewed industrial transition into the final CTA band */
.ae-cta-image {
  clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%);
}

/* count-up scaffold — markup stays hidden until the owner supplies real figures */
.ae-stats {
  display: none;
}
.ae-stats.is-ready {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.ae-count {
  font-family: var(--r3-num);
  font-size: var(--r3-fs-num);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--r3-navy);
}

/* typecheck page (local QA only) */
.ae-typecheck__sample {
  margin: 0 0 4px;
  max-width: none;
  font-size: 72px;
  line-height: 1.25;
  word-spacing: 0.18em;
  color: var(--r3-navy);
}
.ae-typecheck__sample--be {
  font-family: var(--r3-font);
  font-weight: 400;
}
.ae-typecheck__sample--be-bold {
  font-family: var(--r3-font);
  font-weight: 700;
}
.ae-typecheck__sample--be-black {
  font-family: var(--r3-font);
  font-weight: 800;
}
.ae-typecheck__sample--bc {
  font-family: var(--r3-num);
  font-weight: 600;
}
.ae-typecheck__sample--bc-bold {
  font-family: var(--r3-num);
  font-weight: 700;
}
.ae-typecheck__sample--numbers {
  font-family: var(--r3-num);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}
.ae-typecheck__label {
  margin: 0 0 30px;
  font-size: var(--r3-fs-label);
  color: var(--r3-ink-muted);
}

/* 12b. BUTTON COLOUR SHIELD + CONTROL RESET
   --------------------------------------------------------------------------
   `08-pages.css §22` colours links with `--ae-on-blue/--ae-on-orange`, which
   turned the hero's secondary CTA navy-on-navy and the gold CTA white-on-gold
   (1.9:1). Re-assert the intent colours here, after every earlier layer.
   Flatsome also gives every <button> a 41 px min-height, which stretched the
   3 px slide bars into tall blocks: reset it on the controls. */
.ae-home a.ae-btn--primary,
.ae-page a.ae-btn--primary,
.ae-footer a.ae-btn--primary {
  background: var(--r3-gold);
  border-color: var(--r3-gold);
  color: var(--r3-navy);
}
.ae-home a.ae-btn--primary:hover,
.ae-home a.ae-btn--primary:focus-visible,
.ae-page a.ae-btn--primary:hover,
.ae-footer a.ae-btn--primary:hover {
  background: #e69f00;
  border-color: #e69f00;
  color: var(--r3-navy);
}
.ae-home a.ae-btn--emergency,
.ae-page a.ae-btn--emergency,
.ae-footer a.ae-btn--emergency {
  background: var(--r3-navy);
  border-color: var(--r3-navy);
  color: #ffffff;
}
.ae-home a.ae-btn--emergency:hover,
.ae-page a.ae-btn--emergency:hover,
.ae-footer a.ae-btn--emergency:hover {
  background: var(--r3-navy-700);
  border-color: var(--r3-navy-700);
  color: #ffffff;
}
.ae-home a.ae-btn--zalo,
.ae-page a.ae-btn--zalo,
.ae-footer a.ae-btn--zalo {
  background: #0068ff;
  border-color: #0068ff;
  color: #ffffff;
}
.ae-home a.ae-btn--zalo:hover,
.ae-home a.ae-btn--zalo:focus-visible {
  background: #0052cc;
  border-color: #0052cc;
  color: #ffffff;
}
.ae-cta-image .ae-eyebrow {
  color: var(--r3-gold);
}
/* dark hero / CTA photo: Zalo stays white-on-blue */
.ae-hero a.ae-btn--zalo,
.ae-cta-image a.ae-btn--zalo {
  color: #ffffff;
}
.ae-home a.ae-btn--secondary,
.ae-page a.ae-btn--secondary {
  color: var(--r3-navy);
}
/* the navy footer needs a light outline button */
.ae-footer a.ae-btn--secondary {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
  background: transparent;
}
.ae-footer a.ae-btn--secondary:hover,
.ae-footer a.ae-btn--secondary:focus-visible {
  border-color: var(--r3-gold);
  color: #ffffff;
  background: rgba(255, 180, 0, 0.14);
}
/* outline buttons keep a clean rectangular edge — a chamfer on a 1 px border
   reads as a broken box, so only filled buttons carry the cut corner */
.ae-btn--secondary,
.ae-btn--ghost {
  clip-path: none;
}
/* on the dark hero / CTA photo both intents become white-outline controls */
.ae-hero a.ae-btn--secondary,
.ae-cta-image a.ae-btn--secondary {
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
  background: rgba(7, 20, 42, 0.28);
}
.ae-hero a.ae-btn--emergency,
.ae-cta-image a.ae-btn--emergency {
  background: rgba(7, 20, 42, 0.42);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}
.ae-hero a.ae-btn--secondary:hover,
.ae-hero a.ae-btn--secondary:focus-visible,
.ae-hero a.ae-btn--emergency:hover,
.ae-hero a.ae-btn--emergency:focus-visible,
.ae-cta-image a.ae-btn--secondary:hover,
.ae-cta-image a.ae-btn--emergency:hover {
  background: var(--r3-gold);
  border-color: var(--r3-gold);
  color: var(--r3-navy);
}

.ae-slides__dot,
.ae-slides__pause,
.ae-slides__btn,
.ae-news__btn {
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}
.ae-slides__arrows,
.ae-news__arrows {
  margin: 0;
}

/* 13. RESPONSIVE
   ========================================================================== */
@media (max-width: 1099px) {
  .ae-news__track {
    grid-auto-columns: calc((100% - 24px) / 2);
  }
}
@media (max-width: 1023px) {
  .ae-ev-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .ae-ev-card__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 767px) {
  .ae-slides {
    min-height: 720px;
  }
  .ae-slide__media img {
    object-position: 45% 45%;
  }
  .ae-slide__inner {
    padding-top: calc(var(--ae-header-h) + 24px);
    padding-bottom: 190px;
  }
  .ae-slides__dots {
    display: none;
  }
  .ae-slides__ui {
    bottom: 18px;
  }
  .ae-container.ae-slides__ui-inner {
    justify-content: center;
  }
  .ae-slides__ctrl {
    gap: 10px;
    padding: 6px 8px;
  }
  .ae-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
  }
  .ae-hero__ctas .ae-btn {
    width: 100%;
  }
  .ae-hero__meta {
    display: none;
  }
  .ae-home .ae-solutions.ae-grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #quy-trinh .ae-timeline::before,
  #quy-trinh .ae-timeline::after {
    display: none;
  }
  .ae-news__track {
    grid-auto-columns: 82%;
    gap: 16px;
  }
  .ae-news__ui {
    gap: 14px;
  }
  .ae-cta-image {
    clip-path: none;
  }
}
@media (max-width: 420px) {
  .ae-slides__count {
    min-width: 44px;
  }
  .ae-slides__btn {
    width: 44px;
    height: 44px;
  }
  .ae-news__track {
    grid-auto-columns: 86%;
  }
}

/* 14. REDUCED MOTION — nothing moves on its own
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ae-slide.is-active .ae-slide__media img,
  .ae-ticker__track,
  .ae-hero__flow path,
  #quy-trinh .ae-timeline::after,
  .ae-slides__dot.is-active::after,
  .ae-btn::after {
    animation: none !important;
  }
  .ae-slides__dot.is-active::after {
    transform: scaleX(1);
  }
  .ae-slides__pause {
    display: none;
  }
  .ae-news__slider {
    scroll-behavior: auto;
  }
  .ae-card:hover,
  .ae-post-card:hover,
  .ae-svc-featured .ae-media-card:hover,
  .ae-ev-card:hover .ae-ev-card__media img {
    transform: none;
  }
}







/* 12c. INNER-PAGE CTA ON THE CREAM SECTION
   --------------------------------------------------------------------------
   `.ae-cta` carries the dark-surface text tokens (white/pale/gold), but on the
   inner pages it sits inside `.ae-section--raised` (cream), producing
   white-on-cream. Give this specific CTA a real navy card. The homepage CTA
   does not use #tu-van, so it is untouched. */
#tu-van .ae-cta,
.ae-page .ae-section--raised .ae-cta {
  background-color: #07142a;
  background-image: linear-gradient(135deg, #07142a 0%, #0b1f3a 58%, #12305a 100%);
  border-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(7, 20, 42, 0.18);
}
#tu-van .ae-cta .ae-contact__icon,
.ae-page .ae-section--raised .ae-cta .ae-contact__icon {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
#tu-van .ae-cta a.ae-btn--emergency,
.ae-page .ae-section--raised .ae-cta a.ae-btn--emergency {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}
#tu-van .ae-cta a.ae-btn--emergency:hover,
#tu-van .ae-cta a.ae-btn--emergency:focus-visible,
.ae-page .ae-section--raised .ae-cta a.ae-btn--emergency:hover,
.ae-page .ae-section--raised .ae-cta a.ae-btn--emergency:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  color: #ffffff;
}