/* AHB Solutions Design System — shared component styles.
   Every value comes from tokens.css (var(--…)); this file only composes them.
   Breakpoints: 640px (sm), 768px (md), 1024px (lg). Mobile first. */

/* ---------- Base ---------- */
.ahb, .ahb * { box-sizing: border-box; }
.ahb { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
:where(.ahb p) { margin: 0; }
:where(.ahb h1, .ahb h2, .ahb h3, .ahb h4) { margin: 0; }
:where(.ahb a) { color: inherit; }
:where(.ahb img) { max-width: 100%; display: block; }
:where(.ahb svg) { width: 20px; height: 20px; flex: none; }

/* Responsive type: tokens hold desktop sizes, mobile sizes live here. */
@media (max-width: 1023px) {
  .t-hero { font-size: 44px; }
  .t-display, .t-latin-display { font-size: 34px; }
  .t-headline { font-size: 26px; }
  .t-title { font-size: 20px; }
  .t-lead { font-size: 18px; }
  .t-body { font-size: 16px; }
  .t-number { font-size: 40px; }
}

/* ---------- Layout ---------- */
.ahb-container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter-mobile); }
@media (min-width: 768px) { .ahb-container { padding-inline: var(--gutter); } }

.ahb-section { position: relative; overflow: hidden; padding-block: var(--section-y-sm); }
@media (min-width: 1024px) { .ahb-section { padding-block: var(--section-y); } }
.ahb-section > .ahb-container { position: relative; z-index: 1; }

/* Light grounds */
.ahb-section--light { background: var(--surface); color: var(--ink); }
.ahb-section--tint  { background: var(--surface-tint); color: var(--ink); }

/* Dark grounds: freeform gradient (GL tr.42, 52) — Axis top-left, Gravity centre, Velocity bottom-right */
.ahb-section--dark {
  color: var(--on-dark);
  background:
    radial-gradient(60% 70% at 8% 0%, rgba(0, 48, 191, 0.85) 0%, rgba(0, 48, 191, 0) 70%),
    radial-gradient(55% 60% at 100% 100%, rgba(2, 134, 213, 0.55) 0%, rgba(2, 134, 213, 0) 70%),
    var(--surface-dark);
}
/* Brand band: linear 60° Gravity → Axis (GL tr.41) — CTA band, hero of inner pages */
.ahb-section--brand { color: var(--on-dark); background: linear-gradient(60deg, var(--gravity-blue) 0%, var(--axis-blue) 100%); }

/* Muted text follows the ground */
.ahb-muted { color: var(--ink-muted); }
.ahb-section--dark .ahb-muted, .ahb-section--brand .ahb-muted, .ahb-on-dark .ahb-muted { color: var(--on-dark-muted); }

/* Accent word inside a heading: gradient on light (GL tr.43, 54), pale cyan on dark (GL tr.55) */
.ahb-accent { background: linear-gradient(60deg, var(--axis-blue), var(--velocity-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ahb-section--dark .ahb-accent, .ahb-section--brand .ahb-accent, .ahb-on-dark .ahb-accent { background: none; color: var(--accent-on-dark); }

/* Light → dark transition arc (prototype "We were born from the gap") */
.ahb-arc { position: relative; }
.ahb-arc::before { content: ""; position: absolute; left: -10%; right: -10%; top: 0; height: 240px; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, var(--axis-blue), rgba(2, 134, 213, 0.6) 30%, var(--surface-tint) 100%); opacity: .9; }

/* ---------- Section header ---------- */
.ahb-sechead { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-7); }
.ahb-sechead__lead { max-width: 640px; }
@media (min-width: 1024px) {
  .ahb-sechead--split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-8); }
  .ahb-sechead--split .ahb-sechead__lead { max-width: 380px; }
}
.ahb-sechead--center { align-items: center; text-align: center; }
.ahb-sechead--center .ahb-sechead__lead { margin-inline: auto; }

/* ---------- Grids: 2, 3, 4 blocks and split ---------- */
.ahb-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .ahb-grid { gap: var(--space-6); } .ahb-grid--2, .ahb-grid--3, .ahb-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ahb-grid--3 { grid-template-columns: repeat(3, 1fr); } .ahb-grid--4 { grid-template-columns: repeat(4, 1fr); } }
/* 3 items in a 2-col tablet row: the last one spans */
@media (min-width: 768px) and (max-width: 1023px) { .ahb-grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

.ahb-split { display: grid; gap: var(--space-7); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .ahb-split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .ahb-split--reverse > :first-child { order: 2; }
}

/* ---------- Eyebrow ---------- */
.ahb-eyebrow { width: fit-content; display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 14px 6px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-strong); }
.ahb-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--velocity-cyan); box-shadow: 0 0 0 3px rgba(2, 134, 213, .2); }
.ahb-section--dark .ahb-eyebrow, .ahb-section--brand .ahb-eyebrow, .ahb-on-dark .ahb-eyebrow { background: var(--glass-on-dark); border-color: var(--line-on-dark); color: var(--on-dark); }
.ahb-section--dark .ahb-eyebrow::before, .ahb-section--brand .ahb-eyebrow::before, .ahb-on-dark .ahb-eyebrow::before { background: var(--accent-on-dark); }

/* ---------- Buttons ---------- */
.ahb-btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 14px 24px;
  border-radius: var(--radius-pill); border: 1.5px solid transparent; text-decoration: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1; transition: transform .15s ease, background-color .15s ease; }
.ahb-btn svg { width: 18px; height: 18px; }
.ahb-btn:hover { transform: translateY(-1px); }
.ahb-btn:focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: 3px; }
.ahb-btn--primary { background: var(--axis-blue); color: var(--white); }
.ahb-btn--primary:hover { background: var(--gravity-blue); }
.ahb-btn--secondary { background: transparent; color: var(--axis-blue); border-color: var(--axis-blue); }
/* On dark grounds */
.ahb-btn--light { background: var(--white); color: var(--axis-blue); }
.ahb-btn--ghost { background: var(--glass-on-dark); color: var(--on-dark); border-color: var(--field-border-on-dark); }
.ahb-section--dark .ahb-btn:focus-visible, .ahb-section--brand .ahb-btn:focus-visible, .ahb-on-dark .ahb-btn:focus-visible { outline-color: var(--focus-on-dark); }
.ahb-link { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--ink-strong); text-decoration: none; }
.ahb-link svg { width: 18px; height: 18px; }
.ahb-section--dark .ahb-link, .ahb-section--brand .ahb-link, .ahb-on-dark .ahb-link { color: var(--accent-on-dark); }

/* ---------- Chips ---------- */
.ahb-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ahb-chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.2; }
.ahb-chip svg { width: 16px; height: 16px; color: var(--axis-blue); }
.ahb-section--dark .ahb-chip, .ahb-section--brand .ahb-chip, .ahb-on-dark .ahb-chip { background: var(--glass-on-dark); border-color: var(--line-on-dark); color: var(--on-dark); }
.ahb-section--dark .ahb-chip svg, .ahb-section--brand .ahb-chip svg, .ahb-on-dark .ahb-chip svg { color: var(--accent-on-dark); }

/* ---------- Icon orb (glass sphere holding a line icon) ---------- */
.ahb-orb { --orb: 56px; width: var(--orb); height: var(--orb); flex: none; border-radius: 50%; display: inline-grid; place-items: center; color: var(--axis-blue);
  background: radial-gradient(circle at 35% 28%, #FFFFFF 0%, #E3F1FC 42%, #A9D8F5 100%); box-shadow: var(--glow-soft), inset 0 0 0 1px rgba(2, 134, 213, .25); }
.ahb-orb svg { width: calc(var(--orb) * .42); height: calc(var(--orb) * .42); stroke-width: 1.5; }
.ahb-orb--sm { --orb: 40px; } .ahb-orb--lg { --orb: 88px; } .ahb-orb--xl { --orb: 160px; }
.ahb-section--dark .ahb-orb, .ahb-section--brand .ahb-orb, .ahb-on-dark .ahb-orb { color: var(--on-dark);
  background: radial-gradient(circle at 50% 45%, rgba(0, 7, 109, .9) 35%, rgba(2, 134, 213, .55) 78%, rgba(143, 214, 255, .9) 100%);
  box-shadow: var(--glow-cyan), inset 0 0 0 1px rgba(143, 214, 255, .5); }

/* ---------- Stat bubble ---------- */
.ahb-stats { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-5); }
.ahb-stat { --d: 168px; width: var(--d); height: var(--d); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--space-4); gap: var(--space-2); color: var(--axis-blue);
  background: radial-gradient(circle at 50% 40%, #FFFFFF 0%, #EAF5FD 55%, #B9E0F7 100%); box-shadow: var(--glow-soft), inset 0 0 0 1px rgba(2, 134, 213, .3); }
.ahb-stat .t-label { color: var(--ink); }
.ahb-stat--lg { --d: 220px; } .ahb-stat--md { --d: 180px; } .ahb-stat--sm { --d: 144px; }
@media (max-width: 767px) { .ahb-stat--lg { --d: 176px; } .ahb-stat--md { --d: 152px; } .ahb-stat--sm { --d: 128px; } .ahb-stat .t-number { font-size: 32px; } }
.ahb-section--dark .ahb-stat, .ahb-section--brand .ahb-stat, .ahb-on-dark .ahb-stat { color: var(--on-dark);
  background: radial-gradient(circle at 50% 45%, rgba(0, 7, 109, .95) 45%, rgba(0, 48, 191, .9) 70%, rgba(2, 134, 213, .95) 88%, rgba(143, 214, 255, 1) 100%);
  box-shadow: var(--glow-cyan), inset 0 0 0 1.5px rgba(143, 214, 255, .8); }
.ahb-section--dark .ahb-stat .t-label, .ahb-section--brand .ahb-stat .t-label, .ahb-on-dark .ahb-stat .t-label { color: var(--on-dark-muted); }

/* ---------- Cards ---------- */
.ahb-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6);
  border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.ahb-section--tint .ahb-card { box-shadow: var(--shadow-card); border-color: transparent; }
.ahb-card__media { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0; height: 180px; display: grid; place-items: center;
  background: linear-gradient(60deg, var(--surface-tint), #CFE7F8); }
.ahb-card__meta { color: var(--axis-blue); }
/* Glass card on dark grounds (bento results, industries) */
.ahb-card--glass { border-radius: var(--radius-lg); background: var(--glass-on-dark); border-color: var(--line-on-dark); color: var(--on-dark); min-height: 260px; justify-content: flex-end; }
.ahb-card--glass .ahb-card__meta { color: var(--accent-on-dark); }
.ahb-card--glass .ahb-card__orb { position: absolute; width: 220px; height: 220px; right: -60px; top: -60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 60%, rgba(0, 7, 109, .2) 30%, rgba(2, 134, 213, .55) 75%, rgba(143, 214, 255, .7) 100%); box-shadow: var(--glow-cyan); opacity: .9; }
.ahb-card--glass > :not(.ahb-card__orb) { position: relative; }

/* ---------- Orbit graphic (brand image asset, never redrawn) ---------- */
.ahb-orbit { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.ahb-orbit--hero { width: min(720px, 120vw); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ahb-orbit--edge-right { width: min(640px, 90vw); right: -18%; top: 50%; transform: translateY(-50%); }
.ahb-orbit--edge-top { width: min(900px, 140vw); left: 50%; top: -55%; transform: translateX(-50%); }
@media (prefers-reduced-motion: no-preference) { .ahb-orbit--float { animation: ahb-float 14s ease-in-out infinite; } }
@keyframes ahb-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

/* ---------- Process steps on an orbit path ---------- */
.ahb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); grid-template-columns: 1fr 1fr; position: relative; }
.ahb-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
.ahb-step__num { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; font-weight: 700; color: var(--axis-blue);
  background: radial-gradient(circle at 50% 40%, #FFFFFF 0%, #E3F1FC 55%, #A9D8F5 100%); box-shadow: var(--glow-soft), inset 0 0 0 1px rgba(2, 134, 213, .3); }
.ahb-step__time { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--axis-blue); font-size: 14px; font-weight: 500; }
.ahb-step__time svg { width: 14px; height: 14px; }
@media (min-width: 1024px) {
  .ahb-steps { grid-template-columns: repeat(5, 1fr); }
  .ahb-steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 44px; height: 1px; background: linear-gradient(90deg, rgba(2, 134, 213, 0), var(--velocity-cyan), rgba(2, 134, 213, 0)); }
  .ahb-steps > :nth-child(even) { transform: translateY(32px); }
}
.ahb-steps > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 1024px) { .ahb-steps > :last-child:nth-child(odd) { grid-column: auto; } }

/* ---------- Forms (on dark: CTA band, contact) ---------- */
.ahb-form { display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--glass-on-dark); border: 1px solid var(--line-on-dark); color: var(--on-dark); }
.ahb-field { display: grid; gap: var(--space-2); }
.ahb-field label:not(.ahb-chip):not(.ahb-check) { font-size: 14px; font-weight: 500; color: var(--on-dark-muted); }
.ahb-field input, .ahb-field textarea, .ahb-field select { width: 100%; min-height: 48px; padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--field-border-on-dark); background: var(--glass-on-dark); color: var(--on-dark); font: 500 16px/1.4 var(--font-sans); }
.ahb-field input::placeholder, .ahb-field textarea::placeholder { color: rgba(255, 255, 255, .6); }
.ahb-field input:focus-visible, .ahb-field textarea:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 2px; }

/* ---------- Header ---------- */
.ahb-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-5); color: var(--on-dark); }
.ahb-header__logo img { height: 28px; width: auto; }
.ahb-header__nav { display: none; gap: var(--space-2); }
.ahb-header__nav a { padding: 10px 14px; border-radius: var(--radius-pill); text-decoration: none; font-size: 15px; font-weight: 500; color: var(--on-dark); }
.ahb-header__nav a[aria-current] { background: var(--glass-on-dark); box-shadow: inset 0 0 0 1px var(--line-on-dark); }
.ahb-header__cta { display: none; }
.ahb-header__menu { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--field-border-on-dark); background: var(--glass-on-dark); color: var(--on-dark); display: grid; place-items: center; }
@media (min-width: 1024px) { .ahb-header__nav, .ahb-header__cta { display: flex; } .ahb-header__menu { display: none; } }

/* ---------- Footer ---------- */
.ahb-footer .ahb-muted { color: var(--on-dark-muted); }
.ahb-footer { background: var(--surface-dark); color: var(--on-dark); padding-block: var(--space-8) var(--space-6); }
.ahb-footer__top { display: grid; gap: var(--space-7); grid-template-columns: 1fr; }
@media (min-width: 768px) { .ahb-footer__top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.ahb-footer__logo img { height: 32px; width: auto; }
.ahb-footer h4 { font-size: 14px; font-weight: 600; color: var(--accent-on-dark); margin-bottom: var(--space-4); }
.ahb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ahb-footer a { text-decoration: none; color: var(--on-dark); }
.ahb-footer__bottom { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--line-on-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); color: var(--on-dark-muted); }

/* =====================================================================
   v1.1 — states, full form set, navigation, long-form text, imagery
   ===================================================================== */

/* ---------- States ---------- */
/* .is-hover / .is-focus / .is-active mirror the pseudo-states so previews can show them side by side */
.ahb-btn:active, .ahb-btn.is-active { transform: translateY(0) scale(.98); }
.ahb-btn--primary.is-hover { background: var(--gravity-blue); transform: translateY(-1px); }
.ahb-btn--secondary:hover, .ahb-btn--secondary.is-hover { background: var(--surface-tint); }
.ahb-btn--light:hover, .ahb-btn--light.is-hover { background: var(--surface-tint); transform: translateY(-1px); }
.ahb-btn--ghost:hover, .ahb-btn--ghost.is-hover { background: rgba(255, 255, 255, .16); transform: translateY(-1px); }
.ahb-btn.is-focus { outline: 2px solid var(--focus-on-light); outline-offset: 3px; }
.ahb-on-dark .ahb-btn.is-focus, .ahb-section--dark .ahb-btn.is-focus { outline-color: var(--focus-on-dark); }
.ahb-btn[disabled], .ahb-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.ahb-btn.is-loading { pointer-events: none; }
.ahb-btn.is-loading::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ahb-spin .8s linear infinite; }
@keyframes ahb-spin { to { transform: rotate(360deg); } }
.ahb-link:hover, .ahb-link.is-hover { text-decoration: underline; text-underline-offset: 4px; }
.ahb-link:focus-visible, .ahb-link.is-focus { outline: 2px solid var(--focus-on-light); outline-offset: 3px; border-radius: 4px; }
/* Selectable chip (filters, budget picker) */
.ahb-chip--toggle { cursor: pointer; font-family: var(--font-sans); }
.ahb-chip--toggle:hover, .ahb-chip--toggle.is-hover { border-color: var(--axis-blue); }
.ahb-chip--toggle[aria-pressed="true"], .ahb-chip--toggle[aria-selected="true"], .ahb-chip--toggle:has(input:checked) { background: var(--axis-blue); border-color: var(--axis-blue); color: var(--white); }
.ahb-chip--toggle:focus-visible, .ahb-chip--toggle.is-focus, .ahb-chip--toggle:has(input:focus-visible) { outline: 2px solid var(--focus-on-light); outline-offset: 2px; }
.ahb-chip--toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ahb-on-dark .ahb-chip--toggle[aria-pressed="true"], .ahb-section--dark .ahb-chip--toggle[aria-pressed="true"],
.ahb-on-dark .ahb-chip--toggle:has(input:checked), .ahb-section--dark .ahb-chip--toggle:has(input:checked) { background: var(--white); border-color: var(--white); color: var(--axis-blue); }
/* Clickable card */
a.ahb-card { text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.ahb-card:hover, .ahb-card.is-hover { border-color: var(--axis-blue); box-shadow: var(--shadow-card); transform: translateY(-2px); }
a.ahb-card:focus-visible, .ahb-card.is-focus { outline: 2px solid var(--focus-on-light); outline-offset: 3px; }

/* ---------- Forms: light ground + all field types ---------- */
.ahb-form--light { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-card); }
.ahb-form--light .ahb-field label:not(.ahb-chip):not(.ahb-check), .ahb-form--light .ahb-field legend { color: var(--ink); }
.ahb-form--light .ahb-field input, .ahb-form--light .ahb-field textarea, .ahb-form--light .ahb-field select { background: var(--surface); border-color: var(--field-border); color: var(--ink); }
.ahb-form--light .ahb-field input::placeholder, .ahb-form--light .ahb-field textarea::placeholder { color: var(--ink-muted); }
.ahb-form--light .ahb-field input:focus-visible, .ahb-form--light .ahb-field textarea:focus-visible, .ahb-form--light .ahb-field select:focus-visible { outline-color: var(--focus-on-light); }
.ahb-form__row { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .ahb-form__row { grid-template-columns: 1fr 1fr; } }
.ahb-field textarea { min-height: 120px; resize: vertical; }
.ahb-field select { appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.ahb-field select option { color: var(--ink); background: var(--white); }
.ahb-field fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.ahb-field legend { padding: 0; font-size: 14px; font-weight: 500; color: var(--on-dark-muted); margin-bottom: var(--space-2); }
.ahb-req { color: inherit; margin-left: 2px; }
.ahb-help { font-size: 13px; line-height: 1.4; color: var(--on-dark-muted); }
.ahb-form--light .ahb-help { color: var(--ink-muted); }
/* Checkbox (consent) */
.ahb-check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--on-dark-muted); cursor: pointer; }
.ahb-check input { appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 6px; border: 1.5px solid var(--field-border-on-dark); background: var(--glass-on-dark); display: grid; place-items: center; cursor: pointer; }
.ahb-check input:checked { background: var(--white); border-color: var(--white); }
.ahb-check input:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--axis-blue); border-bottom: 2px solid var(--axis-blue); transform: translateY(-1px) rotate(-45deg); }
.ahb-check input:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 2px; }
.ahb-form--light .ahb-check { color: var(--ink-muted); }
.ahb-form--light .ahb-check input { border-color: var(--field-border); background: var(--surface); }
.ahb-form--light .ahb-check input:checked { background: var(--axis-blue); border-color: var(--axis-blue); }
.ahb-form--light .ahb-check input:checked::after { border-color: var(--white); }
.ahb-form--light .ahb-check input:focus-visible { outline-color: var(--focus-on-light); }
.ahb-check a { color: inherit; text-decoration: underline; }
/* Validation */
.ahb-field.is-error input, .ahb-field.is-error textarea, .ahb-field.is-error select { border-color: var(--danger-on-dark); border-width: 2px; }
.ahb-form--light .ahb-field.is-error input, .ahb-form--light .ahb-field.is-error textarea, .ahb-form--light .ahb-field.is-error select { border-color: var(--danger); }
.ahb-error { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 500; color: var(--danger-on-dark); }
.ahb-form--light .ahb-error { color: var(--danger); }
.ahb-error svg { width: 16px; height: 16px; flex: none; }
.ahb-field input:disabled, .ahb-field textarea:disabled { opacity: .5; cursor: not-allowed; }
/* Result banners */
.ahb-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-sm); border: 1.5px solid currentColor; font-size: 15px; line-height: 1.5; }
.ahb-alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.ahb-alert strong { display: block; }
.ahb-alert--success { color: var(--success-on-dark); background: rgba(126, 226, 176, .08); }
.ahb-alert--error { color: var(--danger-on-dark); background: rgba(255, 180, 168, .08); }
.ahb-form--light .ahb-alert--success { color: var(--success); background: #EDF7F1; }
.ahb-form--light .ahb-alert--error { color: var(--danger); background: #FDF0EE; }
.ahb-alert span { color: inherit; }

/* ---------- Navigation ---------- */
/* Mega menu (Giải pháp) */
.ahb-mega { background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(0, 7, 109, .22); padding: var(--space-6); display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .ahb-mega { grid-template-columns: 1fr 260px; } }
.ahb-mega__grid { display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: repeat(3, 1fr); align-content: start; }
.ahb-mega .ahb-orb, .ahb-section--dark .ahb-mega .ahb-orb, .ahb-on-dark .ahb-mega .ahb-orb { color: var(--axis-blue); background: radial-gradient(circle at 35% 28%, #FFFFFF 0%, #E3F1FC 42%, #A9D8F5 100%); box-shadow: var(--glow-soft), inset 0 0 0 1px rgba(2, 134, 213, .25); }
.ahb-mega__item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); }
.ahb-mega__item:hover, .ahb-mega__item.is-hover { background: var(--surface-tint); }
.ahb-mega__item:focus-visible { outline: 2px solid var(--focus-on-light); }
.ahb-mega__sub { margin: var(--space-2) 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; color: var(--ink-muted); }
.ahb-mega__aside { border-radius: var(--radius-md); padding: var(--space-5); color: var(--on-dark); background: linear-gradient(60deg, var(--gravity-blue), var(--axis-blue)); display: flex; flex-direction: column; gap: var(--space-3); justify-content: space-between; }
/* Mobile menu panel */
.ahb-mnav { color: var(--on-dark); background: var(--surface-dark); padding: var(--space-5) var(--gutter-mobile) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); min-height: 100%; }
.ahb-mnav__top { display: flex; align-items: center; justify-content: space-between; }
.ahb-mnav__top img { height: 24px; width: auto; }
.ahb-mnav__list { list-style: none; margin: 0; padding: 0; display: grid; }
.ahb-mnav__list > li { border-bottom: 1px solid var(--line-on-dark); }
.ahb-mnav__list a, .ahb-mnav__list summary { display: flex; justify-content: space-between; align-items: center; min-height: 56px; font-size: 20px; font-weight: 600; text-decoration: none; color: var(--on-dark); cursor: pointer; list-style: none; }
.ahb-mnav__list summary::-webkit-details-marker { display: none; }
.ahb-mnav__list details[open] summary svg { transform: rotate(90deg); }
.ahb-mnav__list details ul { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.ahb-mnav__list details ul a { min-height: 40px; font-size: 16px; font-weight: 500; color: var(--on-dark-muted); }
.ahb-mnav__list svg { width: 20px; height: 20px; transition: transform .2s; }
/* Breadcrumb */
.ahb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 14px; color: var(--ink-muted); list-style: none; margin: 0; padding: 0; }
.ahb-crumbs a { color: var(--ink-strong); text-decoration: none; }
.ahb-crumbs a:hover { text-decoration: underline; }
.ahb-crumbs li + li::before { content: "/"; margin-right: var(--space-2); opacity: .6; }
.ahb-section--dark .ahb-crumbs, .ahb-on-dark .ahb-crumbs { color: var(--on-dark-muted); }
.ahb-section--dark .ahb-crumbs a, .ahb-on-dark .ahb-crumbs a { color: var(--on-dark); }
/* Pagination */
.ahb-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.ahb-pager a, .ahb-pager span { min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; font-weight: 600; text-decoration: none; color: var(--ink); border: 1px solid var(--line); }
.ahb-pager a:hover { border-color: var(--axis-blue); color: var(--axis-blue); }
.ahb-pager [aria-current="page"] { background: var(--axis-blue); border-color: var(--axis-blue); color: var(--white); }
.ahb-pager .is-disabled { opacity: .4; pointer-events: none; }
.ahb-pager svg { width: 18px; height: 18px; }
/* Filter tabs (Dự án, Insights) */
.ahb-filters { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.ahb-filters::-webkit-scrollbar { display: none; }
.ahb-filters .ahb-chip { flex: none; }

/* ---------- Long-form text (Insights articles, case study detail) ---------- */
.ahb-article__head { max-width: 760px; display: grid; gap: var(--space-4); }
.ahb-article__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; font-size: 14px; color: var(--ink-muted); }
.ahb-article__meta .ahb-chip { padding: 4px 12px; }
.ahb-prose { max-width: 720px; font-size: 18px; line-height: 1.75; font-weight: 500; color: var(--ink); }
.ahb-prose > * + * { margin-top: 1.1em; }
.ahb-prose h2 { font-size: 30px; line-height: 1.25; font-weight: 600; color: var(--ink-strong); margin-top: 2em; }
.ahb-prose h3 { font-size: 22px; line-height: 1.35; font-weight: 600; margin-top: 1.6em; }
.ahb-prose h2 + *, .ahb-prose h3 + * { margin-top: .6em; }
.ahb-prose strong { font-weight: 700; }
.ahb-prose a { color: var(--ink-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ahb-prose ul, .ahb-prose ol { padding-left: 1.4em; }
.ahb-prose li + li { margin-top: .4em; }
.ahb-prose ul li::marker { color: var(--velocity-cyan); }
.ahb-prose ol li::marker { color: var(--axis-blue); font-weight: 700; }
.ahb-prose blockquote { margin-left: 0; margin-right: 0; padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: var(--surface-tint); font-size: 22px; line-height: 1.5; font-weight: 600; color: var(--ink-strong); position: relative; }
.ahb-prose blockquote::before { content: ""; position: absolute; left: var(--space-6); top: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--velocity-cyan); box-shadow: 0 0 0 6px rgba(2, 134, 213, .18); }
.ahb-prose blockquote cite { display: block; margin-top: var(--space-3); font-size: 14px; font-style: normal; font-weight: 500; color: var(--ink-muted); }
.ahb-prose figure { margin-left: 0; margin-right: 0; }
.ahb-prose figcaption { margin-top: var(--space-2); font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.ahb-prose table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.ahb-prose th { text-align: left; font-weight: 600; color: var(--ink-strong); border-bottom: 2px solid var(--axis-blue); padding: 10px 12px; }
.ahb-prose td { border-bottom: 1px solid var(--line); padding: 10px 12px; }
.ahb-prose td.num, .ahb-prose th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ahb-keystat { display: flex; gap: var(--space-5); align-items: center; padding: var(--space-5); border-radius: var(--radius-md); background: linear-gradient(60deg, var(--gravity-blue), var(--axis-blue)); color: var(--on-dark); }
.ahb-keystat .t-number { color: var(--accent-on-dark); flex: none; }
@media (max-width: 767px) { .ahb-prose { font-size: 17px; } .ahb-prose h2 { font-size: 24px; } .ahb-prose h3 { font-size: 20px; } .ahb-prose blockquote { font-size: 19px; padding: var(--space-4) var(--space-5); } .ahb-keystat { flex-direction: column; align-items: flex-start; } }

/* ---------- Imagery ---------- */
.ahb-img { position: relative; overflow: hidden; border-radius: var(--radius-md); background: linear-gradient(60deg, var(--surface-tint), #CFE7F8); }
.ahb-img > img { width: 100%; height: 100%; object-fit: cover; }
.ahb-img--16x9 { aspect-ratio: 16 / 9; } .ahb-img--16x10 { aspect-ratio: 16 / 10; } .ahb-img--4x3 { aspect-ratio: 4 / 3; } .ahb-img--1x1 { aspect-ratio: 1 / 1; } .ahb-img--21x9 { aspect-ratio: 21 / 9; }
/* Overlay for text on photos (GL tr.51: blue gradient fading in) */
.ahb-img--overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(60deg, rgba(0, 7, 109, .92) 0%, rgba(0, 48, 191, .55) 45%, rgba(0, 48, 191, 0) 75%); }
.ahb-img__caption { position: absolute; left: var(--space-5); bottom: var(--space-5); right: var(--space-5); z-index: 1; color: var(--on-dark); }
/* Portrait inside an orbit ring (founder, team) */
.ahb-img--orb { border-radius: 50%; aspect-ratio: 1 / 1; box-shadow: var(--glow-cyan), 0 0 0 6px rgba(143, 214, 255, .35); }
/* Placeholder when no photo yet */
.ahb-img__ph { position: absolute; inset: 0; display: grid; place-items: center; gap: var(--space-2); text-align: center; color: var(--ink-muted); font-size: 13px; }
.ahb-img__label { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 3px 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .9); color: var(--ink); font-size: 12px; font-weight: 600; }

/* ---------- Header: bar heights, transparent vs solid (sticky on scroll) ---------- */
.ahb-header-bar { position: sticky; top: 0; z-index: 50; transition: background-color .25s ease, box-shadow .25s ease; }
.ahb-header-bar .ahb-header { min-height: 72px; padding-block: var(--space-3); }
@media (min-width: 1024px) { .ahb-header-bar .ahb-header { min-height: 84px; } .ahb-header__logo img { height: 28px; } }
@media (max-width: 1023px) { .ahb-header__logo img { height: 24px; } }
.ahb-header-bar--transparent { background: transparent; }
.ahb-header-bar--solid { background: rgba(0, 7, 109, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line-on-dark), 0 12px 32px rgba(0, 7, 109, .25); }
.ahb-header__nav a:hover, .ahb-header__nav a.is-hover { background: var(--glass-on-dark); }
.ahb-header__nav a:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 2px; }
.ahb-header__nav svg { width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; }
.ahb-header__menu:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 2px; }

/* ---------- Footer: socials, legal row, mobile ---------- */
.ahb-social { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.ahb-social svg { width: 18px; height: 18px; }
.ahb-social a { text-decoration: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--field-border-on-dark); background: var(--glass-on-dark); color: var(--on-dark); font-size: 13px; font-weight: 700; }
.ahb-social a:hover { background: rgba(255, 255, 255, .16); }
.ahb-social a:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 2px; }
.ahb-footer ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ahb-footer ul svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 8px; color: var(--accent-on-dark); }
.ahb-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.ahb-footer__legal a { color: var(--on-dark-muted); text-decoration: none; }
.ahb-footer__legal a:hover { color: var(--on-dark); text-decoration: underline; }
@media (min-width: 640px) and (max-width: 767px) { .ahb-footer__top { grid-template-columns: 1fr 1fr; } .ahb-footer__top > :first-child { grid-column: 1 / -1; } }

/* ---------- Mobile simulation (previews only) ----------
   The site itself switches by media query. Inside a preview card the viewport is wide,
   so .ahb-mobile forces the same <768px rules on a 375px frame. Do not use on the live site. */
.ahb-phone { width: 375px; flex: none; border-radius: 36px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 10px #10142B, 0 24px 60px rgba(0, 7, 109, .25); }
.ahb-phone__label { margin-top: 22px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.ahb-mobile .t-hero { font-size: 44px; }
.ahb-mobile .t-display, .ahb-mobile .t-latin-display { font-size: 34px; }
.ahb-mobile .t-headline { font-size: 26px; } .ahb-mobile .t-title { font-size: 20px; } .ahb-mobile .t-lead { font-size: 18px; }
.ahb-mobile .t-body { font-size: 16px; } .ahb-mobile .t-number { font-size: 40px; }
.ahb-mobile .ahb-container { padding-inline: var(--gutter-mobile); }
.ahb-mobile .ahb-section { padding-block: var(--section-y-sm); }
.ahb-mobile .ahb-grid, .ahb-mobile .ahb-grid--2, .ahb-mobile .ahb-grid--3, .ahb-mobile .ahb-grid--4, .ahb-mobile .ahb-split, .ahb-mobile .ahb-form__row, .ahb-mobile .ahb-footer__top { grid-template-columns: 1fr; gap: var(--space-5); }
.ahb-mobile .ahb-split--reverse > :first-child { order: 0; }
.ahb-mobile .ahb-sechead--split { flex-direction: column; align-items: flex-start; }
.ahb-mobile .ahb-header__nav, .ahb-mobile .ahb-header__cta { display: none; }
.ahb-mobile .ahb-header__menu { display: grid; }
.ahb-mobile .ahb-header-bar .ahb-header { min-height: 72px; }
.ahb-mobile .ahb-header__logo img { height: 24px; }
.ahb-mobile .ahb-steps { grid-template-columns: 1fr 1fr; }
.ahb-mobile .ahb-steps::before { display: none; }
.ahb-mobile .ahb-steps > :nth-child(even) { transform: none; }
.ahb-mobile .ahb-steps > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.ahb-mobile .ahb-stat--lg { --d: 176px; } .ahb-mobile .ahb-stat--md { --d: 152px; } .ahb-mobile .ahb-stat--sm { --d: 128px; }
.ahb-mobile .ahb-stat .t-number { font-size: 32px; }
.ahb-mobile .ahb-stats { gap: var(--space-3); }
.ahb-mobile .ahb-footer { padding-block: var(--space-7) var(--space-5); }
.ahb-mobile .ahb-footer__bottom { flex-direction: column; }
.ahb-mobile .ahb-btn { width: 100%; }
.ahb-mobile .ahb-chips .ahb-chip { width: auto; }
.ahb-mobile .ahb-orbit--hero { width: 380px; top: 26%; opacity: .55; }

@media (max-width: 767px) { .ahb-orbit--hero { width: 380px; top: 26%; opacity: .55; } }
.ahb-img__ph svg { width: 32px; height: 32px; }
.ahb-img__ph .ahb-orb svg { width: calc(var(--orb) * .42); height: calc(var(--orb) * .42); }
.ahb-header__menu svg { width: 22px; height: 22px; }

/* =====================================================================
   v1.2 — components found in prototype draft 5 (all 6 canvas pages) + site utilities
   ===================================================================== */

/* ---------- Orbit diagram: core + satellites (homepage 6 solutions, About disciplines, ecosystem) ---------- */
.ahb-odiag { position: relative; width: min(680px, 100%); aspect-ratio: 1 / 1; margin: 0 auto; }
.ahb-odiag__ring { position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed var(--line-on-dark); }
.ahb-odiag__ring--2 { inset: 0; border-style: solid; opacity: .5; }
.ahb-odiag__core { position: absolute; inset: 30%; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 8%;
  background: radial-gradient(circle at 50% 45%, rgba(0, 7, 109, .95) 40%, rgba(0, 48, 191, .9) 72%, rgba(2, 134, 213, .95) 92%, rgba(143, 214, 255, 1) 100%); box-shadow: var(--glow-cyan); color: var(--on-dark); }
.ahb-odiag__node { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: var(--space-3); padding: 8px 16px 8px 8px; border-radius: var(--radius-pill);
  background: var(--glass-on-dark); border: 1px solid var(--line-on-dark); color: var(--on-dark); text-decoration: none; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ahb-odiag__node:hover { border-color: var(--accent-on-dark); }
.ahb-odiag__node:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 2px; }
.ahb-odiag__node b { display: block; font-size: 15px; font-weight: 600; }
.ahb-odiag__node small { display: block; font-size: 12px; color: var(--on-dark-muted); }
/* Venn A·H·B inside the core */
.ahb-venn { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.ahb-venn span { position: absolute; width: 58%; aspect-ratio: 1 / 1; border-radius: 50%; display: grid; place-items: center; align-content: center; font-weight: 800; font-size: clamp(18px, 3vw, 32px); line-height: 1;
  background: radial-gradient(circle at 50% 50%, rgba(2, 134, 213, .15), rgba(2, 134, 213, .45)); border: 1.5px solid rgba(143, 214, 255, .8); color: var(--on-dark); }
.ahb-venn span small { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; color: var(--on-dark-muted); }
.ahb-venn span:nth-child(1) { left: 21%; top: 0; } .ahb-venn span:nth-child(2) { left: 0; top: 38%; } .ahb-venn span:nth-child(3) { right: 0; top: 38%; }
.ahb-venn em { position: absolute; left: 50%; top: 118%; transform: translateX(-50%); font-style: normal; font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center; color: var(--on-dark); white-space: nowrap; }
.ahb-venn em small { display: block; font-size: 12px; font-weight: 500; color: var(--on-dark-muted); }
@media (max-width: 767px) { .ahb-venn em { position: static; transform: none; display: block; margin-top: 12px; } }
.ahb-mobile .ahb-venn em { display: none; }
/* Light-ground variant */
.ahb-odiag--light .ahb-odiag__ring { border-color: rgba(2, 134, 213, .35); }
.ahb-odiag--light .ahb-odiag__core { background: radial-gradient(circle at 50% 40%, #FFFFFF 0%, #EAF5FD 55%, #B9E0F7 100%); box-shadow: var(--glow-soft), inset 0 0 0 1px rgba(2, 134, 213, .3); color: var(--ink-strong); }
.ahb-odiag--light .ahb-odiag__node { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-card); }
.ahb-odiag--light .ahb-odiag__node small { color: var(--ink-muted); }
/* Mobile: ring drops, core shrinks, satellites stack (prototype note) */
@media (max-width: 767px) {
  .ahb-odiag { aspect-ratio: auto; display: flex; flex-direction: column; gap: var(--space-3); }
  .ahb-odiag__ring { display: none; }
  .ahb-odiag__core { position: relative; inset: auto; width: 220px; height: 220px; margin: 0 auto var(--space-4); }
  .ahb-odiag__node { position: static; transform: none; white-space: normal; border-radius: var(--radius-md); }
}
.ahb-mobile .ahb-odiag { aspect-ratio: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.ahb-mobile .ahb-odiag__ring { display: none; }
.ahb-mobile .ahb-odiag__core { position: relative; inset: auto; width: 220px; height: 220px; margin: 0 auto var(--space-4); }
.ahb-mobile .ahb-odiag__node { position: static; transform: none; white-space: normal; border-radius: var(--radius-md); }

/* ---------- Value bubbles (About: A · H · B, three overlapping glass spheres) ---------- */
.ahb-values { display: flex; justify-content: center; align-items: center; }
.ahb-value { width: 300px; height: 300px; flex: none; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px; gap: var(--space-2);
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .95) 0%, rgba(234, 245, 253, .9) 55%, rgba(169, 216, 245, .85) 100%); box-shadow: var(--glow-soft), inset 0 0 0 1px rgba(2, 134, 213, .3); }
.ahb-value + .ahb-value { margin-left: -36px; }
.ahb-value__letter { font-size: 56px; font-weight: 800; line-height: 1; color: var(--axis-blue); }
.ahb-value__name { font-size: 18px; font-weight: 600; color: var(--ink); }
.ahb-value p { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
@media (max-width: 1023px) { .ahb-values { flex-direction: column; } .ahb-value { width: 260px; height: 260px; padding: 36px; } .ahb-value + .ahb-value { margin-left: 0; margin-top: -28px; } }
.ahb-mobile .ahb-values { flex-direction: column; } .ahb-mobile .ahb-value { width: 260px; height: 260px; padding: 36px; } .ahb-mobile .ahb-value + .ahb-value { margin-left: 0; margin-top: -28px; }

/* ---------- Founder letter / quote block ---------- */
.ahb-quote { font-size: 26px; line-height: 1.45; font-weight: 600; color: var(--on-dark); margin: 0; }
.ahb-quote::before { content: "\201C"; display: block; font-size: 64px; line-height: .6; color: var(--accent-on-dark); margin-bottom: var(--space-3); }
.ahb-signature { display: grid; gap: 2px; margin-top: var(--space-5); }
.ahb-signature b { font-size: 16px; font-weight: 600; }
.ahb-signature span { font-size: 14px; color: var(--accent-on-dark); }
@media (max-width: 767px) { .ahb-quote { font-size: 21px; } }
.ahb-mobile .ahb-quote { font-size: 21px; }

/* ---------- Contact panel (Liên hệ hero, beside the full form) ---------- */
.ahb-contact { display: grid; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--glass-on-dark); border: 1px solid var(--line-on-dark); color: var(--on-dark); }
.ahb-contact__person { display: flex; gap: var(--space-4); align-items: center; }
.ahb-contact__person .ahb-img--orb { width: 64px; flex: none; box-shadow: 0 0 0 3px rgba(143, 214, 255, .5); }
.ahb-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.ahb-contact__list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.ahb-contact__list .ahb-orb { --orb: 40px; }
.ahb-contact__list small { display: block; font-size: 13px; color: var(--on-dark-muted); }
.ahb-contact__list a { color: var(--on-dark); font-weight: 600; text-decoration: none; }

/* ---------- Jump pills (Giải pháp hero: anchor to each solution) ---------- */
.ahb-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ahb-jump a { display: inline-flex; align-items: center; gap: var(--space-2); padding: 8px 16px 8px 8px; border-radius: var(--radius-pill); background: var(--glass-on-dark); border: 1px solid var(--line-on-dark); color: var(--on-dark); text-decoration: none; font-size: 15px; font-weight: 500; }
.ahb-jump a:hover { border-color: var(--accent-on-dark); }
.ahb-jump a:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 2px; }
.ahb-jump .ahb-orb { --orb: 32px; }
@media (max-width: 767px) { .ahb-jump { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .ahb-jump a { flex: none; } }

/* ---------- CTA banner (inline, inside a section: "Chưa biết bắt đầu từ đâu?") ---------- */
.ahb-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-lg); color: var(--on-dark);
  background: linear-gradient(60deg, var(--gravity-blue), var(--axis-blue)); box-shadow: inset 0 0 0 1px var(--line-on-dark); }
.ahb-banner::after { content: ""; position: absolute; width: 320px; height: 320px; right: -80px; top: -140px; border-radius: 50%; border: 1.5px solid rgba(143, 214, 255, .5); box-shadow: var(--glow-cyan); opacity: .7; pointer-events: none; }
.ahb-banner > * { position: relative; z-index: 1; }
.ahb-banner__text { flex: 1; display: grid; gap: var(--space-1); }
.ahb-banner__text p { color: var(--on-dark-muted); }
@media (max-width: 767px) { .ahb-banner { flex-direction: column; align-items: flex-start; } }
.ahb-mobile .ahb-banner { flex-direction: column; align-items: flex-start; }

/* ---------- Numbered feature card ---------- */
.ahb-card__num { position: absolute; top: var(--space-5); right: var(--space-6); font-size: 32px; font-weight: 700; line-height: 1; color: rgba(0, 48, 191, .2); }

/* ---------- Process with icons (4D model: Discover · Develop · Deliver · Diagnose) ---------- */
.ahb-steps--icons { grid-template-columns: 1fr 1fr; }
@media (min-width: 1024px) { .ahb-steps--icons { grid-template-columns: repeat(4, 1fr); } .ahb-steps--icons > :nth-child(even) { transform: none; } .ahb-steps--icons::before { top: 48px; } }
.ahb-step__en { font-size: 20px; font-weight: 600; }
.ahb-step__vi { font-size: 14px; color: var(--accent-on-dark); margin-top: -8px; }
.ahb-section--light .ahb-step__vi, .ahb-section--tint .ahb-step__vi { color: var(--axis-blue); }
.ahb-step__desc { font-size: 15px; line-height: 1.55; max-width: 260px; }
.ahb-mobile .ahb-steps--icons > :nth-child(even) { transform: none; }

/* ---------- Fit panels ("Phù hợp với bạn nếu" + "Bạn nhận được") ---------- */
.ahb-fit { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .ahb-fit { grid-template-columns: 1fr 1fr; } }
.ahb-fit__panel { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); display: grid; gap: var(--space-4); align-content: start; }
.ahb-fit__panel--strong { background: linear-gradient(60deg, var(--gravity-blue), var(--axis-blue)); border-color: transparent; color: var(--on-dark); }
.ahb-fit__head { display: flex; align-items: center; gap: var(--space-3); }
.ahb-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: 16px; line-height: 1.5; }
.ahb-checklist li { display: flex; gap: var(--space-3); align-items: flex-start; }
.ahb-checklist svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--axis-blue); }
.ahb-fit__panel--strong .ahb-checklist svg { color: var(--accent-on-dark); }
.ahb-mobile .ahb-fit { grid-template-columns: 1fr; }

/* ---------- Related links ("Dịch vụ liên quan") ---------- */
.ahb-related { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .ahb-related { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ahb-related { grid-template-columns: repeat(4, 1fr); } }
.ahb-related a { display: flex; align-items: center; gap: var(--space-3); padding: 8px 16px 8px 8px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.ahb-related a > span:nth-child(2) { flex: 1; }
.ahb-related a:hover { border-color: var(--axis-blue); }
.ahb-related a:focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: 2px; }
.ahb-related .ahb-orb { --orb: 36px; }
.ahb-mobile .ahb-related { grid-template-columns: 1fr; }

/* ---------- FAQ accordion ---------- */
.ahb-faq-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .ahb-faq-layout { grid-template-columns: 1fr 2fr; gap: var(--space-8); } }
.ahb-faq { display: grid; gap: var(--space-3); }
.ahb-faq details { border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.ahb-faq details[open] { border-color: rgba(0, 48, 191, .35); box-shadow: var(--shadow-card); }
.ahb-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); cursor: pointer; list-style: none; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.ahb-faq summary::-webkit-details-marker { display: none; }
.ahb-faq summary svg { width: 20px; height: 20px; flex: none; color: var(--axis-blue); transition: transform .2s; }
.ahb-faq details[open] summary svg { transform: rotate(180deg); }
.ahb-faq summary:focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: -2px; border-radius: var(--radius-md); }
.ahb-faq details > div { padding: 0 var(--space-6) var(--space-5); font-size: 16px; line-height: 1.65; color: var(--ink-muted); }
.ahb-mobile .ahb-faq-layout { grid-template-columns: 1fr; }
.ahb-mobile .ahb-faq summary { font-size: 16px; padding: var(--space-4) var(--space-5); }

/* ---------- Empty / proof slot (content not available yet) ---------- */
.ahb-empty { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); border: 1.5px dashed var(--field-border); background: var(--surface); color: var(--ink-muted); font-size: 15px; line-height: 1.55; }

/* ---------- Fact tiles (case study hero) ---------- */
.ahb-facts { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr; }
.ahb-fact { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-md); background: var(--glass-on-dark); border: 1px solid var(--line-on-dark); color: var(--on-dark); }
.ahb-fact .ahb-orb { --orb: 36px; }
.ahb-fact small { display: block; font-size: 13px; color: var(--on-dark-muted); }
.ahb-fact b { display: block; font-size: 15px; font-weight: 600; }
@media (max-width: 639px) { .ahb-facts { grid-template-columns: 1fr; } }
.ahb-mobile .ahb-facts { grid-template-columns: 1fr; }

/* ---------- Article extras: layout + sidebar, stat strip, tags, author box ---------- */
.ahb-article-layout { display: grid; gap: var(--space-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .ahb-article-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-8); } }
.ahb-aside { display: grid; gap: var(--space-4); }
@media (min-width: 1024px) { .ahb-aside { position: sticky; top: 104px; } }
.ahb-aside__cta { padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface-tint); display: grid; gap: var(--space-3); }
.ahb-statstrip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); }
.ahb-statstrip .t-number { color: var(--axis-blue); }
.ahb-statstrip > div { flex: 1; min-width: 180px; }
.ahb-author { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: var(--surface-tint); }
.ahb-author .ahb-orb { --orb: 56px; }
.ahb-mobile .ahb-article-layout { grid-template-columns: 1fr; }

/* ---------- Newsletter band ---------- */
.ahb-newsletter { display: flex; gap: var(--space-3); align-items: flex-end; max-width: 520px; }
.ahb-newsletter .ahb-field { flex: 1; }
@media (max-width: 639px) { .ahb-newsletter { flex-direction: column; align-items: stretch; } }
.ahb-mobile .ahb-newsletter { flex-direction: column; align-items: stretch; }

/* ---------- Case card on light (related projects) ---------- */
.ahb-card--case { min-height: 240px; justify-content: flex-end; box-shadow: var(--shadow-card); }
.ahb-card--case .t-number { color: var(--axis-blue); font-size: 48px; }
.ahb-card--case .ahb-card__orb { position: absolute; width: 180px; height: 180px; right: -50px; top: -60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 60%, rgba(255, 255, 255, .6) 30%, rgba(169, 216, 245, .8) 75%, rgba(2, 134, 213, .5) 100%); box-shadow: var(--glow-soft); }
.ahb-card--case > :not(.ahb-card__orb) { position: relative; }

/* ---------- Utilities: skip link, back to top, utility pages ---------- */
.ahb-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: 12px 18px; border-radius: var(--radius-pill); background: var(--white); color: var(--axis-blue); font-weight: 600; text-decoration: none; }
.ahb-skip:focus, .ahb-skip.is-focus { top: var(--space-4); outline: 2px solid var(--focus-on-light); outline-offset: 2px; }
.ahb-totop { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 40; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 0; cursor: pointer;
  background: var(--axis-blue); color: var(--white); box-shadow: 0 8px 24px rgba(0, 7, 109, .3); }
.ahb-totop svg { width: 22px; height: 22px; }
.ahb-totop:focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: 3px; }
.ahb-utility { min-height: 520px; display: grid; place-items: center; text-align: center; }
.ahb-utility__inner { display: grid; justify-items: center; gap: var(--space-4); max-width: 520px; }
.ahb-utility__orb { width: 180px; height: 180px; border-radius: 50%; display: grid; place-items: center; font-size: 56px; font-weight: 800; color: var(--on-dark);
  background: radial-gradient(circle at 50% 45%, rgba(0, 7, 109, .95) 40%, rgba(0, 48, 191, .9) 72%, rgba(2, 134, 213, .95) 92%, rgba(143, 214, 255, 1) 100%); box-shadow: var(--glow-cyan); }
.ahb-utility__orb svg { width: 72px; height: 72px; }

/* ===================== v1.3 — prototype v2 (ảnh thật, logo, Insights, bài viết, case) ===================== */
.ahb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* HeroPhoto */
.ahb-herophoto { position: relative; overflow: hidden; min-height: 640px; display: grid; place-items: center; color: var(--on-dark); background: var(--gravity-blue); }
.ahb-herophoto__bg { position: absolute; inset: 0; border-radius: 0; background: linear-gradient(120deg, #1B2A6B 0%, #3A4F8F 50%, #22306E 100%); }
.ahb-herophoto__bg > img { filter: grayscale(1) contrast(1.05); }
.ahb-herophoto__tint { position: absolute; inset: 0; background: linear-gradient(60deg, rgba(0, 7, 109, .85) 0%, rgba(0, 48, 191, .7) 55%, rgba(2, 134, 213, .45) 100%); }
.ahb-herophoto .ahb-orbit--hero { z-index: 1; }
.ahb-herophoto__content { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--space-5); text-align: center; padding-block: 96px; }
.ahb-herophoto__content .t-lead { max-width: 560px; color: var(--on-dark-muted); }
.ahb-herophoto__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.ahb-herophoto__partners { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; justify-content: center; margin-top: var(--space-5); }
.ahb-herophoto__partners .t-label { color: var(--on-dark-muted); margin-right: var(--space-2); }
.ahb-herophoto .ahb-img__ph { color: rgba(255, 255, 255, .55); align-content: end; padding-bottom: 24px; }

/* PhotoOrb */
.ahb-photoorb { --po: 280px; position: relative; width: var(--po); height: var(--po); flex: none; justify-self: center; }
.ahb-photoorb--lg { --po: 380px; }
.ahb-photoorb__img { position: absolute; inset: 0; border-radius: 50%; aspect-ratio: 1 / 1; background: radial-gradient(circle at 35% 30%, #DDF0FC 0%, #A9D8F5 55%, #5FB3E8 100%); }
.ahb-photoorb__ring { position: absolute; inset: -14px; border-radius: 50%; border: 1.5px solid rgba(143, 214, 255, .7); box-shadow: var(--glow-cyan), inset 0 0 40px rgba(143, 214, 255, .35); pointer-events: none; }
.ahb-photoorb--light .ahb-photoorb__ring { border: 8px solid #fff; box-shadow: 0 0 0 1px rgba(2, 134, 213, .15), 0 24px 60px rgba(0, 48, 191, .18), 0 0 80px rgba(2, 134, 213, .25); inset: -8px; }
.ahb-photoorb__stat { position: absolute; left: -36px; bottom: -12px; z-index: 2; }
.ahb-photoorb__img .ahb-img__ph { color: var(--ink); }

/* SolutionBlock */
.ahb-solblock { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items: center; }
.ahb-solblock--reverse .ahb-solblock__text { order: 2; }
.ahb-solblock__text { display: grid; gap: var(--space-4); justify-items: start; }
.ahb-solblock__scope { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ahb-solblock__scope .ahb-chip svg { width: 16px; height: 16px; color: var(--axis-blue); }
.ahb-solblock__fit { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink); margin: 0; }
.ahb-solblock__fit svg { width: 20px; height: 20px; flex: none; color: var(--velocity-cyan); margin-top: 1px; }
.ahb-solblock__fit b { color: var(--axis-blue); }
.ahb-solblock__media { display: grid; place-items: center; padding: 24px; }

/* LogoWall */
.ahb-logos { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ahb-logo { width: 120px; height: 56px; padding: 12px; border-radius: 10px; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0, 7, 109, .12); }
.ahb-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ahb-logo b { font-size: 12px; letter-spacing: .04em; color: #7A869A; font-weight: 700; }
.ahb-logos--sm { gap: var(--space-2); }
.ahb-logos--sm .ahb-logo { width: 88px; height: 44px; padding: 8px; }
.ahb-logo--chip { width: 72px; height: 32px; padding: 6px; border-radius: 8px; }
.ahb-logo--chip b { font-size: 10px; }
.ahb-industry { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-md); background: var(--glass-on-dark); border: 1px solid var(--line-on-dark); color: var(--on-dark); }

/* InsightsList */
.ahb-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-6); align-items: center; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--glass-on-dark); border: 1px solid var(--line-on-dark); color: var(--on-dark); text-decoration: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ahb-feature__img { border-radius: var(--radius-md); }
.ahb-feature__text { display: grid; gap: var(--space-3); padding-right: var(--space-4); }
.ahb-feature__text .t-label { color: var(--accent-on-dark); }
.ahb-feature__text .t-body { color: var(--on-dark-muted); }
.ahb-feature__text .ahb-link { color: var(--accent-on-dark); }
.ahb-feature:hover { border-color: rgba(143, 214, 255, .6); }
.ahb-searchbar { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ahb-search { display: flex; gap: var(--space-2); align-items: center; }
.ahb-search input { min-height: 44px; width: 240px; padding: 10px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: #fff; font: inherit; font-size: 15px; color: var(--ink); }
.ahb-search input:focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: 2px; }
.ahb-search .ahb-btn { min-height: 44px; padding: 10px 20px; }
.ahb-latest { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-6); align-items: start; }
.ahb-latest__list { display: grid; gap: var(--space-4); }
.ahb-mini { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4); align-items: center; padding: var(--space-3); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; }
.ahb-mini__thumb { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.ahb-mini__thumb .ahb-img__ph .ahb-orb { display: none; }
.ahb-mini b { display: block; font-size: 16px; line-height: 1.4; font-weight: 600; margin-top: 4px; }
.ahb-mini:hover b { color: var(--axis-blue); }

/* ArticleTools */
.ahb-tldr { padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: var(--surface-tint); border-left: 4px solid var(--velocity-cyan); }
.ahb-tldr .t-label { color: var(--axis-blue); margin-bottom: var(--space-3); }
.ahb-tldr svg { width: 18px; height: 18px; }
.ahb-tldr ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 16px; line-height: 1.55; font-weight: 500; }
.ahb-note { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: #fff; border: 1px solid rgba(2, 134, 213, .45); color: var(--ink); }
.ahb-note svg { width: 20px; height: 20px; flex: none; color: var(--velocity-cyan); margin-top: 2px; }
.ahb-note p { margin: 0; font-size: 15px; line-height: 1.55; }
.ahb-banner--inline { padding: var(--space-5) var(--space-6); }
.ahb-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.ahb-compare > div { padding: var(--space-5); border-radius: var(--radius-md); background: #fff; border: 1px solid var(--line); display: grid; gap: var(--space-2); }
.ahb-toc { padding: var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--line); background: #fff; position: sticky; top: 96px; }
.ahb-toc .t-label { color: var(--ink); margin-bottom: var(--space-3); }
.ahb-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ahb-toc a { display: block; padding: 6px 10px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--ink-muted); text-decoration: none; }
.ahb-toc a:hover { color: var(--axis-blue); }
.ahb-toc .is-current a { color: var(--axis-blue); border-left-color: var(--axis-blue); font-weight: 600; background: var(--surface-tint); }
.ahb-share { display: grid; gap: var(--space-2); }
.ahb-share > div { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ahb-share .ahb-chip { text-decoration: none; cursor: pointer; }
.ahb-share svg { width: 14px; height: 14px; }

/* Testimonial */
.ahb-testimonial { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: start; max-width: 960px; }
.ahb-testimonial blockquote { margin: 0 0 var(--space-4); color: var(--on-dark); }
.ahb-testimonial figcaption { color: var(--on-dark-muted); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

/* VideoGallery */
.ahb-reels { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
.ahb-reel { position: relative; display: block; color: var(--ink); text-decoration: none; }
.ahb-reel .ahb-img { display: block; aspect-ratio: 9 / 16; border-radius: var(--radius-md); }
.ahb-reel:hover .ahb-orb { transform: scale(1.06); }
.ahb-reel__label { display: block; margin-top: var(--space-2); font-size: 14px; font-weight: 500; text-align: center; color: var(--ink-muted); }

/* v1.3 responsive */
@media (max-width: 767px) {
  .ahb-herophoto { min-height: 560px; }
  .ahb-photoorb { --po: 240px; } .ahb-photoorb--lg { --po: 260px; }
  .ahb-photoorb__stat { --d: 120px; left: -16px; }
  .ahb-solblock, .ahb-latest, .ahb-feature, .ahb-compare, .ahb-testimonial { grid-template-columns: 1fr; }
  .ahb-solblock__media { order: -1; } .ahb-solblock--reverse .ahb-solblock__text { order: 0; }
  .ahb-search { width: 100%; } .ahb-search input { flex: 1; width: auto; }
  .ahb-reels { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 60%; overflow-x: auto; }
  .ahb-toc { position: static; }
}
.ahb-mobile .ahb-photoorb { --po: 240px; } .ahb-mobile .ahb-photoorb--lg { --po: 260px; }
.ahb-mobile .ahb-solblock, .ahb-mobile .ahb-latest, .ahb-mobile .ahb-feature, .ahb-mobile .ahb-compare, .ahb-mobile .ahb-testimonial { grid-template-columns: 1fr; }
.ahb-mobile .ahb-solblock__media { order: -1; }
.ahb-mobile .ahb-reels { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 60%; overflow-x: auto; }

/* ===================== v1.4 — khung trang site v2, nút liên hệ nổi, 6 chuyển động ===================== */
/* SiteShell: header đè lên hero, mega menu dưới header, menu mobile toàn màn hình */
:root { --header-h: 72px; }
@media (min-width: 1024px) { :root { --header-h: 84px; } }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--surface); }
.ahb-page { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
.ahb-page > main { flex: 1; }
.ahb-page img { max-width: 100%; }
.ahb-page :where(figure, blockquote) { margin: 0; }
.ahb-page > .ahb-header-bar { margin-bottom: calc(-1 * var(--header-h)); }
.ahb-header-bar .ahb-header { height: var(--header-h); min-height: 0; }
.ahb-page > main > .ahb-section:first-child, .ahb-page > main > .ahb-hero-first { padding-top: calc(var(--header-h) + var(--space-8)); }
.ahb-header__nav button { appearance: none; border: 0; background: none; font: inherit; cursor: pointer; display: inline-flex; align-items: center;
  padding: 10px 14px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 500; color: var(--on-dark); }
.ahb-header__nav button:hover, .ahb-header__nav button[aria-expanded="true"], .ahb-header__nav button.is-current { background: var(--glass-on-dark); }
.ahb-header__nav button.is-current { box-shadow: inset 0 0 0 1px var(--line-on-dark); }
.ahb-header__nav button:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 2px; }
.ahb-header__nav button svg { width: 14px; height: 14px; margin-left: 4px; transition: transform .2s; }
.ahb-header__nav button[aria-expanded="true"] svg { transform: rotate(180deg); }
.ahb-header__menu { cursor: pointer; }
.ahb-header-bar__mega { position: absolute; left: 0; right: 0; top: 100%; padding-top: var(--space-2); display: none; }
@media (min-width: 1024px) { .ahb-header-bar__mega.is-open { display: block; } }
.ahb-mega__item .t-title { font-size: 17px; display: block; }
.ahb-mega__aside .ahb-btn { min-height: 40px; width: fit-content; }
.ahb-mnav-layer { position: fixed; inset: 0; z-index: 70; overflow-y: auto; overscroll-behavior: contain; background: var(--surface-dark); }
.ahb-mnav-layer[hidden] { display: none; }
.ahb-mnav { min-height: 100%; }
.ahb-mnav__top { min-height: calc(var(--header-h) - var(--space-5)); }
.ahb-mnav__list a:focus-visible, .ahb-mnav__list summary:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 2px; }
.ahb-mnav__list [aria-current="page"] { color: var(--accent-on-dark); }
.ahb-mnav > .ahb-btn { width: 100%; }
.ahb-mnav__phone { color: var(--on-dark-muted); text-decoration: none; }
.ahb-mnav__phone b { color: var(--on-dark); font-weight: 600; }
body.ahb-lock { overflow: hidden; }
.ahb-footer__about { max-width: 340px; }
.ahb-footer__h { font-size: 14px; font-weight: 600; color: var(--accent-on-dark); margin-bottom: var(--space-4); }
.ahb-footer__tagline { margin-top: 14px; color: var(--accent-on-dark); }
.ahb-footer__line { margin-top: var(--space-2); }
.ahb-header__cta.ahb-btn { min-height: 40px; padding: 10px 18px; }
.ahb-mega__aside .t-latin-eyebrow { color: var(--accent-on-dark); }
.ahb-footer ul li { display: flex; align-items: flex-start; }
.ahb-footer ul li > svg { flex: none; margin-top: 3px; }
.ahb-totop[hidden] { display: none; }
/* Trang chờ dựng / 404 dùng khung UtilityPages */
.ahb-utility { min-height: min(760px, 100vh); }
.ahb-utility > .ahb-orbit--hero { opacity: .22; }
.ahb-utility__inner { position: relative; z-index: 1; padding-inline: var(--gutter-mobile); }
.ahb-utility__inner .ahb-crumbs { justify-content: center; }
.ahb-utility__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.ahb-utility__note { max-width: 520px; }

/* FloatContact: nút gọi điện + Zalo nổi góc dưới phải, trên nút lên đầu trang */
.ahb-float { position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + 48px + var(--space-3)); z-index: 45; display: grid; gap: var(--space-3); justify-items: end; }
.ahb-float__btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; font-weight: 700; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 7, 109, .3); transition: transform .2s ease, box-shadow .2s ease; }
.ahb-float__btn svg { width: 22px; height: 22px; }
.ahb-float__btn--call { background: var(--axis-blue); color: var(--white); }
.ahb-float__btn--zalo { background: var(--white); color: var(--axis-blue); box-shadow: 0 8px 24px rgba(0, 7, 109, .3), inset 0 0 0 1px var(--line); }
.ahb-float__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 7, 109, .36); }
.ahb-float__btn:focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .ahb-float__btn--call::after { content: ""; position: absolute; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(2, 134, 213, .5); animation: ahb-ping 3.2s ease-out infinite; pointer-events: none; }
}
.ahb-float__btn--call { position: relative; }
@keyframes ahb-ping { 0% { box-shadow: 0 0 0 0 rgba(2, 134, 213, .5); } 70%, 100% { box-shadow: 0 0 0 14px rgba(2, 134, 213, 0); } }

/* Motion 1 — Hero: quả cầu thở nhẹ, 2 vòng quỹ đạo quay chậm, parallax khi cuộn */
.ahb-sphere { position: absolute; left: 50%; top: 50%; width: min(760px, 130vw); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; z-index: 0; will-change: transform; }
.ahb-sphere > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ahb-sphere__ring { position: absolute; inset: -6%; border-radius: 50%; border: 1px dashed rgba(143, 214, 255, .35); }
.ahb-sphere__ring--2 { inset: -18%; border-style: solid; border-color: rgba(143, 214, 255, .14); }
.ahb-sphere__ring::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; top: -6px; left: calc(50% - 6px); background: var(--accent-on-dark); box-shadow: 0 0 16px 4px rgba(143, 214, 255, .8); }
.ahb-sphere__ring--2::after { width: 8px; height: 8px; top: -4px; opacity: .7; }
@media (max-width: 767px) { .ahb-sphere { width: 440px; opacity: .6; } }
@media (prefers-reduced-motion: no-preference) {
  .ahb-sphere > img { animation: ahb-breathe 7s ease-in-out infinite; }
  .ahb-sphere__ring { animation: ahb-spin 90s linear infinite; }
  .ahb-sphere__ring--2 { animation-duration: 140s; animation-direction: reverse; }
}
@keyframes ahb-breathe { 0%, 100% { scale: 1; opacity: .95; } 50% { scale: 1.035; opacity: 1; } }

/* Motion 2 — Quả cầu đổi sắc khi chuyển từ nền tối sang nền trắng */
.ahb-morph { position: relative; height: 210vh; min-height: 1400px; }
.ahb-morph__sticky { position: sticky; top: 0; height: 100vh; min-height: 640px; display: grid; place-items: center; overflow: hidden; }
.ahb-morph__bg { position: absolute; inset: 0; background: var(--gravity-blue); }
.ahb-morph__copy { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + var(--space-5)); z-index: 2; color: var(--on-dark); transition: color .3s; }
.ahb-morph__copy .ahb-container { display: grid; gap: var(--space-3); }
.ahb-morph__orb { position: relative; width: min(520px, 86vw); aspect-ratio: 1; }
.ahb-morph__orb img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ahb-morph__core { position: absolute; inset: 22%; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 8%; color: var(--on-dark); transition: color .3s; }
.ahb-morph__core .t-headline { font-size: clamp(20px, 3vw, 28px); font-weight: 700; }
.ahb-morph.is-light .ahb-morph__copy, .ahb-morph.is-light .ahb-morph__core { color: var(--ink); }
.ahb-morph.is-light .ahb-morph__copy .ahb-muted { color: var(--ink-muted); }
.ahb-morph:not(.is-light) .ahb-morph__copy .ahb-muted { color: var(--on-dark-muted); }
@media (prefers-reduced-motion: reduce) {
  .ahb-morph { height: auto; min-height: 0; }
  .ahb-morph__sticky { position: relative; height: auto; min-height: 0; padding-block: calc(var(--section-y-sm) + 64px) var(--section-y-sm); }
}

/* Motion 3 — Vòng cung orbit nhô lên khi cuộn tới */
.ahb-arcrise { position: relative; height: 460px; overflow: hidden; }
.ahb-arcrise__shape { position: absolute; left: 50%; top: 0; width: 170%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle at 50% 18%, #E7F4FD 0%, #8CC8F3 22%, #2F7FE6 40%, var(--axis-blue) 60%);
  box-shadow: 0 -12px 60px rgba(2, 134, 213, .45), inset 0 18px 40px rgba(255, 255, 255, .6); border-top: 3px solid #3B82F6; }
.ahb-arcrise__copy { position: relative; z-index: 2; display: grid; gap: var(--space-3); justify-items: center; text-align: center; padding-top: 150px; }
.ahb-arcrise__copy .t-latin-display { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.2; font-weight: 600; color: var(--axis-blue); }
.ahb-arcrise__copy p { max-width: 560px; color: var(--ink); }
@media (max-width: 860px) { .ahb-arcrise { height: 380px; } .ahb-arcrise__copy { padding-top: 120px; } }

/* Motion 4 — Vệ tinh của OrbitDiagram trôi quanh lõi (JS đặt left/top); dừng khi rê chuột hoặc focus */
.ahb-odiag[data-motion="spin"] .ahb-odiag__node { transition: background .2s, border-color .2s, box-shadow .2s; }
.ahb-odiag[data-motion="spin"] .ahb-odiag__node:hover, .ahb-odiag[data-motion="spin"] .ahb-odiag__node:focus-visible { background: rgba(143, 214, 255, .2); box-shadow: 0 0 24px rgba(143, 214, 255, .5); }

/* Motion 5 — Bong bóng số liệu: đếm lên một lần, rồi lơ lửng lệch nhịp */
@media (prefers-reduced-motion: no-preference) {
  .ahb-stats--float .ahb-stat { animation: ahb-float 8s ease-in-out infinite; }
  .ahb-stats--float .ahb-stat:nth-child(2) { animation-delay: -2s; }
  .ahb-stats--float .ahb-stat:nth-child(3) { animation-delay: -4s; }
  .ahb-stats--float .ahb-stat:nth-child(4) { animation-delay: -6s; }
}
.ahb-stat .t-number { font-variant-numeric: tabular-nums; }

/* Motion 6 — Quy trình: điểm sáng chạy theo đường orbit, dừng đúng tâm từng bước */
.ahb-steps__path { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.ahb-steps[data-motion="path"] > li { position: relative; z-index: 1; }
@media (min-width: 1024px) {
  .ahb-steps.has-path::before { display: none; }
  .ahb-steps.has-path .ahb-steps__path { display: block; }
}
.ahb-step__num { transition: transform .4s, box-shadow .4s, background .4s, color .4s; }
.ahb-step.is-on .ahb-step__num { transform: scale(1.08); color: var(--white); background: radial-gradient(circle at 35% 30%, #8FD6FF, var(--velocity-cyan) 55%, var(--axis-blue)); box-shadow: 0 0 30px rgba(2, 134, 213, .55); }

/* Tắt chuyển động khi máy bật "giảm chuyển động": mọi thứ đứng yên ở trạng thái cuối */
@media (prefers-reduced-motion: reduce) {
  .ahb-sphere > img, .ahb-sphere__ring, .ahb-stats--float .ahb-stat, .ahb-float__btn--call::after { animation: none !important; }
  .ahb-step__num, .ahb-morph__copy, .ahb-morph__core, .ahb-float__btn { transition: none !important; }
}

/* ===================== v1.5 — trang chủ (prototype v2, board 1) ===================== */
/* PainPoints: 3 bong bóng vấn đề, quả cầu icon + 1 cụm chữ, không khung card */
.ahb-points { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5) var(--space-8); list-style: none; margin: var(--space-7) auto 0; padding: 0; max-width: 820px; }
@media (min-width: 1024px) { .ahb-points { flex-wrap: nowrap; max-width: none; gap: var(--space-8); } .ahb-point { white-space: nowrap; } }
.ahb-point { display: inline-flex; align-items: center; gap: var(--space-4); font-size: 20px; font-weight: 600; color: var(--ink); }
.ahb-point .ahb-orb { --orb: 64px; }
.ahb-point .ahb-orb svg { width: 26px; height: 26px; }
@media (max-width: 767px) { .ahb-points { flex-direction: column; align-items: flex-start; width: fit-content; gap: var(--space-4); } .ahb-point { font-size: 18px; } .ahb-point .ahb-orb { --orb: 52px; } }
/* Khối "Vì sao AHB ra đời": tiêu đề rộng hơn sechead thường */
.ahb-sechead--wide .t-display { max-width: 1180px; }
.ahb-sechead__note { color: var(--on-dark-muted); max-width: 360px; }
.ahb-sechead--split > .ahb-link { white-space: nowrap; flex: none; }
.ahb-section--light .ahb-sechead__note, .ahb-section--tint .ahb-sechead__note { color: var(--ink-muted); }
/* Vòng cung nối từ khối vấn đề */
.ahb-section--problem { padding-bottom: 0; }
/* Thẻ kết quả bento: số lớn */
.ahb-card--glass .t-number { font-size: clamp(48px, 6vw, 72px); line-height: 1; }
.ahb-card--glass .ahb-link { margin-top: var(--space-2); }
.ahb-card--glass { position: relative; overflow: hidden; gap: var(--space-3); }
.ahb-results-logos { margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--line-on-dark); display: grid; gap: var(--space-4); }
.ahb-results-logos .t-label { color: var(--accent-on-dark); }
.ahb-results-logos .t-annotation { color: var(--on-dark-muted); }
/* Thẻ Insights có ảnh thật */
.ahb-card__media > img { width: 100%; height: 100%; object-fit: cover; }
.ahb-card--post { text-decoration: none; color: inherit; overflow: hidden; }
.ahb-card--post .ahb-card__media { height: auto; aspect-ratio: 16 / 9; }
.ahb-card--post .t-title { color: var(--ink); }
.ahb-card--post:hover .t-title { color: var(--ink-strong); text-decoration: underline; text-underline-offset: 4px; }
.ahb-card--post:focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: 3px; }
/* Dải kêu gọi + form ở cuối trang chủ */
.ahb-cta__tagline { font-size: 22px; color: var(--accent-on-dark); margin-top: var(--space-4); }
.ahb-cta__phone { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); color: var(--on-dark); font-weight: 600; text-decoration: none; }
.ahb-cta__phone svg { width: 18px; height: 18px; }
.ahb-form__foot { color: var(--on-dark-muted); }
.ahb-form .ahb-alert[hidden] { display: none; }
/* Footer: quả cầu trang trí góc trên phải, tagline lớn (prototype v2) */
.ahb-footer { position: relative; overflow: hidden; }
.ahb-footer > .ahb-container { position: relative; z-index: 1; }
.ahb-footer__orbit { position: absolute; width: 340px; right: -170px; top: -170px; opacity: .45; pointer-events: none; }
.ahb-footer__tagline { font-size: 22px; }
@media (max-width: 767px) { .ahb-footer__orbit { width: 240px; right: -130px; top: -120px; } }
/* Orbit góc trên phải của dải kêu gọi (CtaForm), không đè lên form */
.ahb-orbit--cta { width: min(520px, 80vw); right: -200px; top: -200px; opacity: .8; }
@media (max-width: 767px) { .ahb-orbit--cta { display: none; } }
/* Mobile: logo 3 ô mỗi hàng, bong bóng số liệu 2 quả mỗi hàng */
@media (max-width: 767px) {
  ul.ahb-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  ul.ahb-logos .ahb-logo { width: auto; height: auto; aspect-ratio: 15 / 7; }
  .ahb-stats--orbit { gap: var(--space-3); }
}

/* ===================== v1.6 — góp ý trang chủ 16/10 ===================== */
/* Nối section liền mạch: section tối có đỉnh trùng màu đáy của khối phía trên (không có vệt sáng góc trên trái) */
.ahb-section--dark.ahb-seam-top {
  background:
    radial-gradient(60% 55% at 45% 62%, rgba(0, 48, 191, .5) 0%, rgba(0, 48, 191, 0) 70%),
    radial-gradient(55% 60% at 100% 100%, rgba(2, 134, 213, .5) 0%, rgba(2, 134, 213, 0) 70%),
    var(--surface-dark);
}
/* Hero ảnh: đáy mờ dần về Gravity Blue để nối với section tối kế tiếp */
.ahb-herophoto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 260px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 7, 109, 0) 0%, rgba(0, 7, 109, .7) 55%, var(--gravity-blue) 100%); }
.ahb-herophoto .ahb-sphere { width: min(840px, 130vw); }
/* Quả cầu hero kiểu prototype: 1 quả cầu, 1 viền sáng, không vòng quỹ đạo phụ */
.ahb-sphere--solo > img { filter: drop-shadow(0 0 40px rgba(2, 134, 213, .45)); }

/* StatBubble trên quỹ đạo (prototype v2): bong bóng lớn, lõi xanh đậm sáng dần ra viền cyan, xếp lệch trên 1 vòng elip chấm */
.ahb-stats--orbit .ahb-stat { border: 0; color: var(--on-dark);
  background: radial-gradient(circle at 50% 42%, #0A1C9E 0%, #0A2CC9 48%, #1158EE 78%, #3BA2FF 95%, #A8DFFF 100%);
  box-shadow: 0 0 44px rgba(30, 140, 255, .55), 0 0 120px rgba(2, 134, 213, .22), inset 0 0 36px rgba(143, 214, 255, .28); }
.ahb-stats--orbit .ahb-stat:nth-child(even) {
  background: radial-gradient(circle at 50% 42%, #062A8E 0%, #0844B8 50%, #0A84D8 84%, #43C6FF 97%, #B4EBFF 100%);
  box-shadow: 0 0 44px rgba(2, 160, 230, .55), 0 0 110px rgba(2, 134, 213, .2), inset 0 0 32px rgba(143, 214, 255, .3); }
.ahb-stats--orbit .ahb-stat .t-label { color: rgba(255, 255, 255, .88); max-width: 86%; }
.ahb-stats--orbit .ahb-stat .t-number { line-height: 1; }
.ahb-stat .t-label { text-align: center; }
@media (min-width: 1024px) {
  .ahb-stats--orbit { display: block; position: relative; height: 540px; margin-top: var(--space-5); }
  .ahb-stats--orbit::before { content: ""; position: absolute; left: 6%; right: 6%; top: 14%; bottom: 14%; border-radius: 50%; border: 1.5px dotted rgba(143, 214, 255, .4); pointer-events: none; }
  .ahb-stats--orbit > .ahb-stat { position: absolute; transform: translate(-50%, -50%); }
  .ahb-stats--orbit > .ahb-stat:nth-child(1) { --d: 340px; left: 22%; top: 55%; }
  .ahb-stats--orbit > .ahb-stat:nth-child(2) { --d: 220px; left: 46%; top: 30%; }
  .ahb-stats--orbit > .ahb-stat:nth-child(3) { --d: 280px; left: 66%; top: 66%; }
  .ahb-stats--orbit > .ahb-stat:nth-child(4) { --d: 190px; left: 85%; top: 34%; }
  .ahb-stats--orbit .ahb-stat .t-number { font-size: calc(var(--d) * .26); }
  .ahb-stats--orbit .ahb-stat .t-label { font-size: clamp(14px, calc(var(--d) * .055), 18px); }
}
@media (min-width: 768px) and (max-width: 1023px) { .ahb-stats--orbit .ahb-stat--lg { --d: 240px; } .ahb-stats--orbit .ahb-stat--md { --d: 200px; } .ahb-stats--orbit .ahb-stat--sm { --d: 170px; } }

/* Vòng cung (Motion 3) theo prototype: vòm xanh viền sáng, lõi trắng, không bị cắt quầng sáng phía trên; đáy mờ về Gravity Blue */
.ahb-arcrise { height: 560px; overflow-x: clip; overflow-y: visible; }
.ahb-arcrise__shape { width: 125%;
  background: radial-gradient(ellipse 34% 34% at 50% 34%, #FFFFFF 0%, #F2F9FE 42%, #D3E9FB 62%, #8FC0F6 80%, #4482F0 93%, #2160EC 100%);
  border-top: 0; box-shadow: 0 0 0 3px #2B6CF0, 0 -10px 60px rgba(2, 134, 213, .45), inset 0 18px 40px rgba(255, 255, 255, .35); }
.ahb-arcrise::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 7, 109, 0) 0%, rgba(0, 7, 109, .55) 50%, var(--gravity-blue) 100%); }
@media (max-width: 860px) { .ahb-arcrise { height: 440px; } .ahb-arcrise__shape { width: 170%; } }

/* OrbitDiagram rộng (prototype v2): quỹ đạo elip trải hết khung, lõi A·H·B lớn, vệ tinh lớn. Chỉ từ 1024px; nhỏ hơn dùng sơ đồ tròn / danh sách */
@media (min-width: 1024px) {
  .ahb-odiag--wide { width: 100%; max-width: none; aspect-ratio: 1200 / 720; }
  .ahb-odiag--wide .ahb-odiag__ring--2 { inset: 4% 6%; }
  .ahb-odiag--wide .ahb-odiag__ring { inset: 18% 26%; }
  .ahb-odiag--wide .ahb-odiag__core { inset: auto; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; }
  .ahb-odiag--wide .ahb-venn { width: 84%; }
  .ahb-odiag--wide .ahb-venn span { font-size: 56px; }
  .ahb-odiag--wide .ahb-venn span small { font-size: 15px; margin-top: 6px; color: rgba(255, 255, 255, .85); }
  .ahb-odiag--wide .ahb-venn em { top: 57%; transform: translate(-50%, -50%); font-size: 14px; z-index: 1; text-shadow: 0 1px 8px rgba(0, 7, 109, .9); }
  .ahb-odiag--wide .ahb-venn span:nth-child(1) { align-content: start; padding-top: 14%; }
  .ahb-odiag--wide .ahb-venn span:nth-child(2) { align-content: end; justify-items: start; text-align: left; padding: 0 0 18% 20%; }
  .ahb-odiag--wide .ahb-venn span:nth-child(3) { align-content: end; justify-items: end; text-align: right; padding: 0 20% 18% 0; }
  .ahb-odiag--wide .ahb-odiag__node { gap: var(--space-4); padding: 12px 28px 12px 12px; z-index: 2; }
  .ahb-odiag--wide .ahb-odiag__node .ahb-orb { --orb: 56px; }
  .ahb-odiag--wide .ahb-odiag__node .ahb-orb svg { width: 24px; height: 24px; }
  .ahb-odiag--wide .ahb-odiag__node b { font-size: 20px; }
  .ahb-odiag--wide .ahb-odiag__node small { font-size: 15px; margin-top: 2px; }
}

/* ===================== v1.7 — Về AHB, Giải pháp, Dự án, Liên hệ (prototype v2, board 2 · 3 · 4 · 6) ===================== */
/* PageHero: hero trang con. Chữ trái, quả cầu ảnh (PhotoOrb --lg) hoặc form phải; nền brand 60° + quầng cyan góc dưới phải + vòng sáng lớn mờ */
.ahb-pagehero { position: relative; overflow: hidden; color: var(--on-dark); padding-block: var(--section-y-sm);
  background: radial-gradient(70% 90% at 100% 100%, rgba(2, 134, 213, .7) 0%, rgba(2, 134, 213, 0) 62%), linear-gradient(60deg, var(--gravity-blue) 0%, var(--axis-blue) 100%); }
.ahb-pagehero::before { content: ""; position: absolute; width: 920px; aspect-ratio: 1; right: -300px; top: -140px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(143, 214, 255, .22); box-shadow: inset 0 0 140px rgba(143, 214, 255, .1), 0 0 90px rgba(2, 134, 213, .14); }
.ahb-pagehero > .ahb-container { position: relative; z-index: 1; }
.ahb-pagehero__grid { display: grid; gap: var(--space-7); align-items: center; }
.ahb-pagehero__text { display: grid; gap: var(--space-5); justify-items: start; }
.ahb-pagehero .t-hero { font-size: clamp(38px, 4vw, 52px); line-height: 1.14; }
.ahb-pagehero__text .t-lead { color: var(--on-dark-muted); max-width: 620px; }
.ahb-pagehero__media { position: relative; display: grid; place-items: center; padding: 24px; }
.ahb-pagehero__media::before { content: ""; position: absolute; width: calc(var(--po, 380px) + 120px); aspect-ratio: 1; border-radius: 50%; border: 1.5px dotted rgba(143, 214, 255, .35); pointer-events: none; }
.ahb-pagehero__bead { position: absolute; width: 56px; height: 56px; border-radius: 50%; left: 6%; top: 4%; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(0, 7, 109, .9) 35%, rgba(2, 134, 213, .6) 78%, rgba(143, 214, 255, .95) 100%); box-shadow: var(--glow-cyan); }
@media (min-width: 1024px) {
  .ahb-pagehero { min-height: 640px; display: grid; align-items: center; padding-bottom: var(--section-y); }
  .ahb-pagehero__grid { grid-template-columns: 1.15fr .85fr; gap: var(--space-8); }
  .ahb-pagehero__grid--form { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 767px) { .ahb-pagehero__media::before { display: none; } .ahb-pagehero__bead { width: 40px; height: 40px; } }
/* Orbit góc dưới trái (hero Liên hệ) */
.ahb-orbit--low-left { width: min(680px, 110vw); left: -240px; bottom: -300px; opacity: .75; }
@media (max-width: 1023px) { .ahb-orbit--low-left { display: none; } }

/* Dải kêu gọi có 2 nút (cuối trang Về AHB, Dự án): quả cầu orbit lớn bên phải */
.ahb-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.ahb-orbit--band { width: min(620px, 80vw); right: -140px; top: 50%; transform: translateY(-50%); opacity: .9; }
@media (max-width: 1023px) { .ahb-orbit--band { width: 420px; right: -220px; opacity: .45; } }
.ahb-ctaband__text { max-width: 780px; position: relative; z-index: 1; }
.ahb-line { display: inline; }
@media (min-width: 768px) { .ahb-line { display: block; } }
.ahb-ctaband__text .t-display { font-size: clamp(32px, 3.6vw, 50px); }

/* OrbitDiagram: vệ tinh dạng chip chấm (Về AHB "Câu chuyện", 8 lĩnh vực) và lõi chữ */
.ahb-odiag__node--dot { gap: var(--space-2); padding: 10px 18px 10px 14px; font-size: 16px; font-weight: 600; }
.ahb-odiag__node--dot::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--velocity-cyan); box-shadow: 0 0 0 3px rgba(2, 134, 213, .2); }
.ahb-odiag--light .ahb-odiag__node--dot { color: var(--ink-strong); }
.ahb-odiag__label { font-size: clamp(18px, 2vw, 24px); font-weight: 600; line-height: 1.3; color: var(--axis-blue); }
.ahb-odiag--light .ahb-odiag__core { background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #F2F9FE 40%, #CFE6FB 70%, #6FA9F2 92%, #2F6FEA 100%); box-shadow: 0 0 60px rgba(2, 134, 213, .35), inset 0 0 0 2px rgba(47, 111, 234, .7); }
.ahb-odiag__brand { display: grid; justify-items: center; gap: var(--space-2); }
.ahb-odiag__brand img { width: 52%; height: auto; }
.ahb-odiag__brand span { font-size: 14px; color: var(--on-dark-muted); }
@media (max-width: 767px) {
  .ahb-odiag--chips { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
  .ahb-odiag--chips .ahb-odiag__core { margin: 0 calc((100% - 220px) / 2) var(--space-4); }
  .ahb-odiag--chips .ahb-odiag__node--dot { border-radius: var(--radius-pill); }
}

/* Thư nhà sáng lập trên ảnh văn phòng duotone */
.ahb-section__bg { position: absolute; inset: 0; z-index: 0; }
.ahb-section__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.ahb-section__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 7, 109, .55) 0%, rgba(0, 7, 109, .82) 50%, rgba(0, 7, 109, .9) 100%); }
.ahb-founder .ahb-photoorb__img .ahb-img__ph { color: var(--on-dark-muted); background: radial-gradient(circle at 50% 40%, #3A4F9A, #14206B); }
.ahb-founder .ahb-photoorb__img .ahb-img__ph svg { width: 40px; height: 40px; }
.ahb-founder .ahb-quote { font-size: clamp(21px, 2.1vw, 28px); }
@media (min-width: 1024px) { .ahb-founder__grid { grid-template-columns: auto 1fr; } .ahb-founder .ahb-photoorb { --po: 320px; margin-inline: 24px; } }

/* SolutionBlock: quầng sáng sau ảnh, icon giải pháp ở mép trên phải, ghi chú khi chưa có số liệu (chỉ bản xem thử) */
.ahb-solblock__media .ahb-photoorb::before { content: ""; position: absolute; inset: -20%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(169, 216, 245, .6) 0%, rgba(214, 236, 252, .45) 55%, rgba(255, 255, 255, 0) 71%); }
.ahb-photoorb__icon { position: absolute; right: -10px; top: 4%; z-index: 2; }
.ahb-photoorb__note { position: absolute; right: -72px; bottom: 6%; z-index: 2; padding: 6px 12px; border-radius: var(--radius-pill); border: 1.5px dashed var(--field-border); background: var(--surface); color: var(--ink-muted); font-size: 13px; white-space: nowrap; }
.ahb-solblock .ahb-photoorb__stat { --d: 170px; }
.ahb-solblock .ahb-photoorb__stat .t-number { font-size: 34px; white-space: nowrap; }
@media (min-width: 1024px) { .ahb-solblock__media .ahb-photoorb { --po: 330px; } .ahb-solblock__media { padding: 56px; } .ahb-solblock__media .ahb-photoorb::before { inset: -26%; } }
.ahb-solblock__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 767px) { .ahb-photoorb__note { right: 50%; translate: 50% 0; bottom: -28px; } .ahb-solblock .ahb-photoorb__stat { --d: 128px; } .ahb-solblock .ahb-photoorb__stat .t-number { font-size: 26px; } }

/* 4D: chip trọng tâm dưới mỗi bước */
.ahb-step__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: var(--space-2); max-width: 280px; }
.ahb-step__chips .ahb-chip { padding: 6px 12px; font-size: 13px; }
/* Quy trình 3 bước (Liên hệ "Sau khi gửi"): 1 cột trên mobile, 3 cột từ 1024px, mốc thời gian dạng chip */
.ahb-steps--3 { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .ahb-steps--3 { grid-template-columns: repeat(3, 1fr); } .ahb-steps--3::before { left: 16%; right: 16%; } }
.ahb-steps--icons .ahb-step__time { margin-top: var(--space-1); }
.ahb-steps--icons .ahb-step .t-title { font-size: 20px; }
.ahb-section--light .ahb-steps--icons .ahb-step__desc, .ahb-section--tint .ahb-steps--icons .ahb-step__desc { color: var(--ink-muted); }

/* CaseRow (trang Dự án): chữ trên thẻ trắng bên trái, bong bóng kết quả trên nền tối bên phải */
.ahb-caselist { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.ahb-caserow { display: grid; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.ahb-caserow[hidden] { display: none; }
.ahb-caserow__text { display: grid; gap: var(--space-4); justify-items: start; align-content: center; padding: var(--space-6); }
.ahb-caserow__text .t-headline { color: var(--ink); }
.ahb-caserow__results { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6) var(--space-5); min-height: 260px; color: var(--on-dark);
  background: radial-gradient(60% 70% at 50% 50%, rgba(0, 48, 191, .55) 0%, rgba(0, 48, 191, 0) 72%), var(--surface-dark); }
.ahb-caserow__results .ahb-stat { --d: 150px; }
.ahb-caserow__results .ahb-stat:first-child { --d: 190px; }
.ahb-caserow__results .ahb-stat:only-child { --d: 220px; }
.ahb-caserow__results .ahb-stat .t-number { font-size: calc(var(--d) * .2); line-height: 1; white-space: nowrap; }
.ahb-caserow__results .ahb-stat .t-label { font-size: 13px; }
@media (min-width: 1024px) { .ahb-caserow { grid-template-columns: 1.15fr 1fr; } .ahb-caserow__text { padding: var(--space-7) var(--space-7) var(--space-7) var(--space-6); } }
@media (max-width: 767px) { .ahb-caserow__results .ahb-stat { --d: 128px; } .ahb-caserow__results .ahb-stat:first-child, .ahb-caserow__results .ahb-stat:only-child { --d: 160px; } }

/* Thẻ ngành hàng (Dự án): logo ảnh phủ kín ô trắng */
.ahb-industry__head { display: flex; align-items: center; gap: var(--space-3); }
.ahb-industry__head .t-title { font-size: 19px; }
.ahb-industry .ahb-logo { width: 112px; height: 56px; padding: 0; overflow: hidden; }
.ahb-industry .ahb-logo > img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.ahb-industry .ahb-logos { list-style: none; margin: 0; padding: 0; }
.ahb-industries { margin-top: var(--space-6); }

/* Liên hệ: danh sách kênh ngay trên hero (không khung), form đầy đủ */
.ahb-contact__list--hero { gap: var(--space-5); margin-top: var(--space-3); }
.ahb-contact__list--hero .ahb-orb { --orb: 48px; }
.ahb-contact__list--hero small { color: var(--accent-on-dark); font-size: 13px; }
.ahb-contact__list--hero b, .ahb-contact__list--hero a { display: block; font-size: 18px; font-weight: 600; color: var(--on-dark); text-decoration: none; }
.ahb-contact__list--hero a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ahb-contact__note { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--on-dark); font-weight: 500; }
.ahb-contact__note svg { width: 18px; height: 18px; }
.ahb-form__title { margin-bottom: var(--space-1); }
.ahb-contact__socials { color: var(--on-dark-muted); }
.ahb-contact__socials a { color: var(--on-dark); font-weight: 600; text-decoration: none; }
.ahb-contact__socials a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ahb-form--full { position: relative; z-index: 1; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* Số liệu bong bóng lớn trên nền sáng (Về AHB "Những con số biết nói") */
@media (min-width: 1024px) {
  .ahb-stats--big { gap: var(--space-6); }
  .ahb-stats--big .ahb-stat--lg { --d: 260px; } .ahb-stats--big .ahb-stat--md { --d: 215px; } .ahb-stats--big .ahb-stat--sm { --d: 185px; }
  .ahb-stats--big .ahb-stat .t-number { font-size: calc(var(--d) * .25); line-height: 1; }
  .ahb-stats--big .ahb-stat .t-label { font-size: 16px; max-width: 80%; }
}

/* ===================== v1.8 — Mega menu theo nhóm (prototype v2, board 7) ===================== */
/* Mỗi cột: đầu nhóm (quả cầu icon + tên + mũi tên, là link tới trang nhóm) và danh sách dịch vụ con có icon */
@media (min-width: 1024px) { .ahb-mega--prototype, .ahb-mega--ahb { grid-template-columns: 1fr 280px; padding: var(--space-6); } }
/* Mega menu rộng hơn khung nội dung (prototype: gần hết chiều ngang) */
.ahb-header-bar__mega > .ahb-container { max-width: calc(1360px + 2 * var(--gutter)); }
.ahb-header-bar__mega .ahb-mega { max-height: calc(100vh - var(--header-h) - 16px); overflow-y: auto; overscroll-behavior: contain; }
.ahb-mega__grid--groups { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.ahb-mega__col { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.ahb-mega__head { display: flex; align-items: center; gap: var(--space-3); padding: 4px; margin: -4px; border-radius: var(--radius-sm); text-decoration: none; color: var(--axis-blue); }
.ahb-mega__head .ahb-orb { --orb: 48px; }
.ahb-mega__head .ahb-orb svg { width: 22px; height: 22px; }
.ahb-mega__name { flex: 1; font-size: 19px; font-weight: 600; line-height: 1.3; }
.ahb-mega__head > svg:last-child { width: 20px; height: 20px; transition: transform .2s; }
.ahb-mega__head:hover > svg:last-child { transform: translateX(3px); }
.ahb-mega__head:hover .ahb-mega__name { text-decoration: underline; text-underline-offset: 4px; }
.ahb-mega__head:focus-visible, .ahb-mega__links a:focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: 2px; }
.ahb-mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ahb-mega__links a { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 6px 8px; margin-inline: -8px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.35; }
.ahb-mega__links a svg { width: 18px; height: 18px; flex: none; color: var(--axis-blue); }
.ahb-mega__links a:hover { background: var(--surface-tint); color: var(--ink-strong); }
.ahb-mega__links a[aria-current="page"] { background: var(--surface-tint); color: var(--axis-blue); font-weight: 600; }
.ahb-mega__note { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); padding-left: calc(48px + var(--space-3)); }
/* Ô kêu gọi bên phải: gradient brand + quả cầu sáng góc trên phải */
.ahb-mega--prototype .ahb-mega__aside, .ahb-mega--ahb .ahb-mega__aside { position: relative; overflow: hidden; justify-content: flex-start; padding: var(--space-6); border-radius: var(--radius-lg); }
.ahb-mega--prototype .ahb-mega__aside::before, .ahb-mega--ahb .ahb-mega__aside::before { content: ""; position: absolute; width: 260px; height: 260px; right: -110px; top: -110px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 60%, rgba(0, 48, 191, .1) 40%, rgba(2, 134, 213, .5) 80%, rgba(143, 214, 255, .7) 100%); box-shadow: var(--glow-cyan); opacity: .8; }
.ahb-mega__aside > * { position: relative; }
.ahb-mega__aside .t-title { font-size: 24px; line-height: 1.3; }
.ahb-mega__aside-text { color: var(--on-dark-muted); }
.ahb-mega__aside .ahb-btn { margin-top: auto; width: 100%; justify-content: space-between; white-space: normal; text-align: left; }

/* Bản thử A·H·B: 3 nhóm, mỗi nhóm có dải nhãn trên cùng; nhóm A rộng 2 cột */
.ahb-mega__groups { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-5); }
.ahb-mega__group { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.ahb-mega__band { margin: 0; display: grid; gap: 2px; padding-bottom: var(--space-3); border-bottom: 1.5px solid var(--line); }
.ahb-mega__band b { font-family: var(--font-latin); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--velocity-cyan); }
.ahb-mega__band span { font-size: 15px; font-weight: 600; color: var(--ink); }
.ahb-mega__cols { display: grid; gap: var(--space-5); }
.ahb-mega__group--2 .ahb-mega__cols { grid-template-columns: 1fr 1fr; }

/* Menu mobile: mỗi nhóm của mega menu là 1 mục đóng/mở lồng trong "Giải pháp" */
.ahb-mnav__groups { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; }
.ahb-mnav__list .ahb-mnav__groups > li { border-top: 1px solid var(--line-on-dark); }
.ahb-mnav__list .ahb-mnav__groups summary { min-height: 52px; font-size: 17px; font-weight: 600; padding-left: var(--space-3); }
.ahb-mnav__list .ahb-mnav__groups summary svg { width: 18px; height: 18px; }
.ahb-mnav__list .ahb-mnav__groups details ul { padding-left: var(--space-5); margin-bottom: var(--space-3); }
.ahb-mnav__band { display: block; font-family: var(--font-latin); font-size: 12px; font-weight: 600; color: var(--accent-on-dark); }
.ahb-mnav__list .ahb-mnav__groups summary:has(.ahb-mnav__band) { flex-wrap: wrap; align-content: center; padding-block: 8px; }
.ahb-mnav__list .ahb-mnav__groups summary:has(.ahb-mnav__band) .ahb-mnav__band { flex-basis: 100%; }
.ahb-mnav__list .ahb-mnav__head a { color: var(--on-dark); font-weight: 600; }

/* ===================== v1.9 — góp ý trang chủ 17/10 ===================== */
/* Hero: 1 quả cầu, 1 viền mảnh như prototype; bỏ quầng sáng ngoài (trông như vòng thứ 2) */
.ahb-sphere--solo > img { filter: none; opacity: .92; }

/* Logo khách (ảnh web/logos 400×200 đã có lề trắng): ảnh phủ kín ô, không tràn ra ngoài */
.ahb-logo:has(> img) { padding: 0; overflow: hidden; }
.ahb-logo > img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }

/* Số liệu (Motion 5 + đường nối): bong bóng nằm trên 1 quỹ đạo elip chấm, 3 chấm sáng chạy dọc quỹ đạo (motion.js) */
.ahb-statorbit { display: none; }
@media (min-width: 1024px) {
  .ahb-stats--orbit { height: 600px; }
  .ahb-stats--orbit::before { display: none; }
  .ahb-statorbit { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .ahb-statorbit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .ahb-statorbit ellipse { fill: none; stroke: rgba(143, 214, 255, .45); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .ahb-statorbit i { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #CFEFFF; box-shadow: 0 0 10px 3px rgba(143, 214, 255, .85), 0 0 26px 8px rgba(2, 134, 213, .5); }
  .ahb-statorbit i:nth-child(3) { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; opacity: .8; }
  .ahb-stats--orbit > .ahb-stat { z-index: 1; }
  /* bong bóng đặt trên quỹ đạo (tâm elip 50/50, bán kính 36% × 34%) */
  .ahb-stats--orbit > .ahb-stat:nth-child(1) { left: 15.2%; top: 58.8%; }
  .ahb-stats--orbit > .ahb-stat:nth-child(2) { left: 37.7%; top: 18%; }
  .ahb-stats--orbit > .ahb-stat:nth-child(3) { left: 68%; top: 79.4%; }
  .ahb-stats--orbit > .ahb-stat:nth-child(4) { left: 81.2%; top: 33%; }
}

/* Quả cầu lớn nối section 3 → 4 → 5 (Motion 3 v1.9): vòm trên nhô lên ở cuối khối "Vì sao AHB ra đời",
   thân cầu tối chứa sơ đồ 6 giải pháp, vòm đáy kết thúc section; ngoài vòm trên là nền trắng, ngoài vòm đáy là Gravity Blue */
.ahb-globe { position: relative; overflow-x: clip; overflow-y: visible; color: var(--on-dark); padding-bottom: 200px;
  background: linear-gradient(180deg, var(--surface) 0, var(--surface) 50%, var(--surface-dark) 50%); }
.ahb-globe > .ahb-container { position: relative; z-index: 1; }
.ahb-globe__shape { position: absolute; left: 50%; top: var(--globe-top, 0px); bottom: 0; width: 125%; translate: -50% 0; border-radius: 9999px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 620px 290px at 50% 250px, #FFFFFF 0%, #F2F9FE 38%, #D3E9FB 58%, rgba(143, 192, 246, 0) 82%),
    linear-gradient(180deg, #8FC0F6 0, #4482F0 120px, #2160EC 300px, #0A2CC9 470px, var(--surface-dark) 700px, var(--surface-dark) calc(100% - 420px), #0A2CC9 calc(100% - 170px), #2B6CF0 100%);
  box-shadow: 0 0 0 3px #2B6CF0, 0 -12px 60px rgba(2, 134, 213, .45), inset 0 18px 40px rgba(255, 255, 255, .35), inset 0 -24px 60px rgba(79, 160, 255, .55); }
.ahb-globe__lead { display: grid; gap: var(--space-3); justify-items: center; text-align: center; padding-top: 150px; }
.ahb-globe__lead .t-latin-display { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.2; font-weight: 600; color: var(--axis-blue); }
.ahb-globe__lead .t-body { max-width: 560px; color: var(--ink); }
.ahb-globe__body { margin-top: 210px; }
/* Desktop: quả cầu là 1 elip trọn (không có đoạn phẳng ở đỉnh/đáy); mobile giữ dạng viên thuốc vì cao hơn rộng nhiều */
@media (min-width: 1024px) { .ahb-globe__shape { border-radius: 50%; } }
.ahb-section--problem { padding-bottom: var(--space-7); }
@media (max-width: 1023px) {
  .ahb-globe { padding-bottom: 140px; }
  .ahb-globe__shape { width: 150%; background:
    radial-gradient(ellipse 420px 230px at 50% 210px, #FFFFFF 0%, #F2F9FE 38%, #D3E9FB 58%, rgba(143, 192, 246, 0) 82%),
    linear-gradient(180deg, #8FC0F6 0, #4482F0 100px, #2160EC 260px, #0A2CC9 400px, var(--surface-dark) 560px, var(--surface-dark) calc(100% - 300px), #0A2CC9 calc(100% - 120px), #2B6CF0 100%); }
  .ahb-globe__lead { padding-top: 110px; }
  .ahb-globe__body { margin-top: 150px; }
}
@media (max-width: 767px) { .ahb-globe__shape { width: 190%; } .ahb-globe__lead { padding-top: 90px; } .ahb-globe__lead .t-body { font-size: 15px; } }

/* ===================== v1.9 — trang Insights (prototype v2, page Insights, board 5) ===================== */
.ahb-pagehero--insights .ahb-pagehero__text { max-width: 820px; }
.ahb-pagehero--insights .ahb-feature { margin-top: var(--space-7); }
.ahb-feature { color: var(--on-dark); }
.ahb-feature__img { aspect-ratio: 16 / 10; }
.ahb-feature__img > img { width: 100%; height: 100%; object-fit: cover; }
.ahb-feature__text .t-headline { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; }
.ahb-feature:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 3px; }
@media (max-width: 767px) { .ahb-feature { padding: var(--space-3); } .ahb-feature__text { padding: var(--space-2) var(--space-2) var(--space-3); } }
/* Thanh lọc + tìm: chip có icon chủ đề, tự xuống dòng trên desktop, cuộn ngang trên mobile */
.ahb-ins .ahb-searchbar { align-items: flex-start; margin-bottom: var(--space-7); }
.ahb-filters--wrap { flex-wrap: wrap; overflow: visible; flex: 1; min-width: 0; }
@media (max-width: 767px) { .ahb-filters--wrap { flex-wrap: nowrap; overflow-x: auto; width: 100%; flex: none; } }
.ahb-filters .ahb-chip svg { width: 16px; height: 16px; color: var(--axis-blue); }
.ahb-filters .ahb-chip[aria-pressed="true"] svg { color: var(--white); }
.ahb-filters .ahb-chip { min-height: 44px; padding: 10px 16px; font-size: 15px; }
.ahb-search__field { position: relative; display: flex; align-items: center; flex: 1; }
.ahb-search__field svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--axis-blue); pointer-events: none; }
.ahb-search__field input { padding-left: 42px; width: 100%; min-width: 0; }
@media (min-width: 768px) { .ahb-search__field input { width: 260px; } }
/* Khối mới nhất: 1 thẻ lớn + 3 thẻ nhỏ (ảnh trái) */
.ahb-latest[hidden] { display: none; }
.ahb-card--big { padding-bottom: var(--space-6); }
.ahb-card--big .ahb-card__media { aspect-ratio: 16 / 7; }
.ahb-card--big .t-headline { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; color: var(--ink); }
.ahb-latest__list { align-content: start; }
.ahb-mini__thumb { display: block; width: 120px; }
.ahb-mini__thumb > img { width: 100%; height: 100%; object-fit: cover; }
.ahb-mini__thumb .ahb-orb { --orb: 48px; position: absolute; inset: 0; margin: auto; }
.ahb-mini .ahb-card__meta { display: block; }
.ahb-mini b { font-size: 17px; }
.ahb-mini:focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: 3px; }
@media (max-width: 1023px) { .ahb-latest { grid-template-columns: 1fr; } }
@media (max-width: 479px) { .ahb-mini { grid-template-columns: 96px 1fr; } .ahb-mini__thumb { width: 96px; } .ahb-mini b { font-size: 16px; } }
/* Lưới bài: thẻ chưa có ảnh bìa hiện quả cầu icon chủ đề; phân trang */
.ahb-card--post[hidden] { display: none; }
.ahb-card--post .ahb-card__media .ahb-orb { --orb: 72px; }
.ahb-ins__pager { margin-top: var(--space-7); }
.ahb-ins__pager[hidden] { display: none; }
.ahb-pager button { min-width: 44px; height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 15px/1 var(--font-sans); cursor: pointer; }
.ahb-pager button:hover { border-color: var(--axis-blue); color: var(--axis-blue); }
.ahb-pager button[aria-current="page"] { background: var(--axis-blue); border-color: var(--axis-blue); color: var(--white); }
.ahb-pager button:focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: 2px; }
.ahb-pager { flex-wrap: wrap; }
[data-ins-empty][hidden] { display: none; }
[data-ins-empty] { margin-top: var(--space-5); }
/* Newsletter: quả cầu orbit lớn góc trái */
.ahb-orbit--news { width: min(560px, 80vw); left: -200px; top: -120px; opacity: .7; }
@media (max-width: 767px) { .ahb-orbit--news { display: none; } }
.ahb-newsletter-form { display: grid; gap: var(--space-4); align-content: center; }
.ahb-newsletter-form .ahb-newsletter { max-width: none; }
.ahb-newsletter-form .ahb-field label { color: var(--on-dark); }
.ahb-newsletter-form .ahb-alert[hidden] { display: none; }

/* ===================== v1.10 — trang Về AHB theo prototype (góp ý 17/10) ===================== */
/* Nét đứt chạy theo chiều kim đồng hồ (đường xích đạo hero, vòng nối ô chữ, vòng nối ô đối tác). SVG vẽ elip theo chiều kim đồng hồ,
   dashoffset giảm dần = nét chạy theo chiều đường vẽ. Giảm chuyển động: đứng yên. */
.ahb-dashring { fill: none; stroke: rgba(143, 214, 255, .55); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 9; }
.ahb-dashring--dots { stroke: rgba(2, 134, 213, .45); stroke-width: .35; stroke-dasharray: .1 1.6; }
.ahb-dashring--line { stroke: rgba(143, 214, 255, .5); stroke-width: 1.5; stroke-dasharray: 10 8; }
@media (prefers-reduced-motion: no-preference) {
  .ahb-dashring { animation: ahb-dash 6s linear infinite; }
  .ahb-dashring--dots { animation: ahb-dash-sm 6s linear infinite; }
  .ahb-dashring--line { animation: ahb-dash-line 5s linear infinite; }
}
@keyframes ahb-dash { to { stroke-dashoffset: -110; } }
@keyframes ahb-dash-sm { to { stroke-dashoffset: -17; } }
@keyframes ahb-dash-line { to { stroke-dashoffset: -180; } }

/* PageHero: quả cầu Orbit Echo lớn đồng tâm với ảnh (sáng dần về góc dưới phải) + xích đạo xéo nét đứt sau ảnh */
.ahb-pagehero::before { display: none; }
.ahb-pagehero__media::before { display: none; }
.ahb-pagehero__media { --po: 380px; }
.ahb-pagehero__media > .ahb-photoorb { position: relative; z-index: 2; }
.ahb-pagehero__echo { position: absolute; left: 50%; top: 50%; width: calc(var(--po) * 1.9); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 38% 34%, rgba(0, 48, 191, .0) 0%, rgba(0, 48, 191, .18) 45%, rgba(2, 134, 213, .38) 78%, rgba(79, 184, 240, .55) 100%);
  box-shadow: inset 0 0 0 1px rgba(143, 214, 255, .28), 0 0 80px rgba(2, 134, 213, .18); }
.ahb-pagehero__equator { position: absolute; left: 50%; top: 50%; width: calc(var(--po) * 2.1); height: auto; translate: -50% -50%; rotate: -14deg; z-index: 1; overflow: visible; pointer-events: none; }
.ahb-pagehero__equator .ahb-dashring { stroke: rgba(143, 214, 255, .6); stroke-width: 2; stroke-dasharray: 2 10; }
.ahb-pagehero__bead { z-index: 3; left: 4%; top: 2%; }
.ahb-pagehero .ahb-photoorb__ring { inset: -6px; border: 2px solid rgba(143, 214, 255, .75); box-shadow: 0 0 30px rgba(2, 134, 213, .45); }
@media (max-width: 767px) { .ahb-pagehero__media { --po: 260px; } .ahb-pagehero__echo { width: calc(var(--po) * 1.6); } .ahb-pagehero__equator { width: calc(var(--po) * 1.7); } }

/* OrbitDiagram --chips (Câu chuyện): ô chữ nằm trên vòng chấm (bán kính 44%), vòng chấm chạy; lõi lớn sáng trắng → xanh */
.ahb-odiag__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.ahb-odiag--chips .ahb-odiag__core { inset: 27%; padding: 10%;
  background: radial-gradient(circle at 42% 44%, #FFFFFF 0%, #F4FAFF 30%, #CFE5FF 58%, #78AEFF 82%, #2F6BFF 100%);
  box-shadow: 0 0 0 1.5px rgba(47, 107, 255, .65), 0 18px 60px rgba(47, 107, 255, .28), inset -10px -6px 30px rgba(47, 107, 255, .35); }
.ahb-odiag--chips .ahb-odiag__label { font-size: clamp(18px, 1.9vw, 24px); color: var(--axis-blue); }
.ahb-odiag--chips .ahb-odiag__node { z-index: 1; background: var(--surface); border: 1px solid rgba(2, 134, 213, .14); box-shadow: 0 10px 28px rgba(0, 48, 191, .12); padding: 10px 20px 10px 16px; }
.ahb-odiag--chips .ahb-odiag__node--dot::before { width: 11px; height: 11px; background: var(--velocity-cyan); box-shadow: 0 0 0 4px rgba(2, 134, 213, .18); }
@media (max-width: 767px) { .ahb-odiag--chips .ahb-odiag__svg { display: none; } .ahb-odiag--chips .ahb-odiag__core { inset: auto; } }

/* ValueBubbles --halo (Ba triết lý): mỗi chữ là 1 quả cầu kính sáng đặt trong 1 quầng sáng lớn; các quầng chồng lên nhau, quả cầu không chạm */
.ahb-values--halo { gap: 80px; padding-block: 90px; }
.ahb-values--halo .ahb-value { position: relative; width: 290px; height: 290px; padding: 40px; margin: 0; gap: 6px; isolation: isolate;
  background: radial-gradient(circle at 50% 46%, #FFFFFF 0%, #F3FBFF 40%, #B9EAFA 74%, #5AD3F5 100%);
  box-shadow: 0 0 0 1.5px rgba(34, 198, 238, .7), 0 0 34px rgba(34, 198, 238, .45), inset 0 0 26px rgba(34, 198, 238, .35); }
.ahb-values--halo .ahb-value::before { content: ""; position: absolute; left: 50%; top: 50%; width: 175%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 30%, rgba(186, 236, 252, .35) 60%, rgba(120, 214, 245, .55) 100%); opacity: .9; }
.ahb-values--halo .ahb-value:nth-child(2) { background: radial-gradient(circle at 50% 46%, #FFFFFF 0%, #EEF4FF 36%, #A9C4FF 70%, #3F78FF 100%);
  box-shadow: 0 0 0 1.5px rgba(47, 107, 255, .75), 0 0 34px rgba(47, 107, 255, .4), inset 0 0 26px rgba(47, 107, 255, .35); }
.ahb-values--halo .ahb-value:nth-child(2)::before { background: radial-gradient(circle, rgba(255, 255, 255, 0) 30%, rgba(186, 205, 255, .35) 60%, rgba(140, 170, 255, .55) 100%); }
.ahb-values--halo .ahb-value:nth-child(3) { background: radial-gradient(circle at 50% 46%, #FFFFFF 0%, #F0F7FF 38%, #AED3FF 72%, #3D8BFF 100%);
  box-shadow: 0 0 0 1.5px rgba(61, 139, 255, .75), 0 0 34px rgba(61, 139, 255, .4), inset 0 0 26px rgba(61, 139, 255, .35); }
.ahb-values--halo .ahb-value:nth-child(3)::before { background: radial-gradient(circle, rgba(255, 255, 255, 0) 30%, rgba(186, 220, 255, .35) 60%, rgba(140, 195, 255, .55) 100%); }
.ahb-values--halo .ahb-value__letter { font-size: 64px; color: #0B5BD3; }
.ahb-values--halo .ahb-value__name { font-size: 19px; line-height: 1.3; color: var(--ink-strong); }
.ahb-values--halo .ahb-value p { font-size: 14px; color: var(--ink-muted); }
@media (max-width: 1023px) {
  .ahb-values--halo { gap: 120px; padding-block: 70px; }
  .ahb-values--halo .ahb-value { width: 260px; height: 260px; padding: 34px; }
  .ahb-values--halo .ahb-value + .ahb-value { margin-top: 0; }
  .ahb-values--halo .ahb-value::before { width: 150%; }
}

/* OrbitDiagram --eco (Hệ sinh thái): 6 ô đối tác nằm đúng trên quỹ đạo elip ngoài (nét đứt chạy), elip chấm bên trong, lõi AHB trong quầng sáng */
.ahb-section--eco { background: linear-gradient(180deg, #0B1E9C 0%, #061283 30%, var(--surface-dark) 60%); }
.ahb-odiag--eco { width: 100%; max-width: none; aspect-ratio: 1150 / 570; margin-top: var(--space-6); }
.ahb-odiag--eco .ahb-odiag__inner { fill: none; stroke: rgba(143, 214, 255, .35); stroke-width: 1.5; stroke-dasharray: 1 7; stroke-linecap: round; }
.ahb-odiag__halo { position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(30, 80, 230, .38) 0%, rgba(20, 60, 210, .22) 45%, rgba(10, 40, 180, 0) 72%); }
.ahb-odiag--eco .ahb-odiag__core { inset: auto; left: 50%; top: 50%; width: 22.5%; aspect-ratio: 1; translate: -50% -50%; padding: 0; z-index: 1;
  background: radial-gradient(circle at 50% 45%, #0A1FA8 0%, #0B2CC4 55%, #1458EA 82%, #3BA2FF 96%, #9ADBFF 100%);
  box-shadow: 0 0 0 1.5px rgba(143, 214, 255, .8), 0 0 50px rgba(30, 140, 255, .55), inset 0 0 30px rgba(143, 214, 255, .3); }
.ahb-odiag--eco .ahb-odiag__brand img { width: 56%; }
.ahb-odiag--eco .ahb-odiag__brand span { font-size: 14px; color: #CFE9FF; }
.ahb-odiag--eco .ahb-odiag__node { z-index: 2; width: 26%; gap: var(--space-4); padding: 12px 20px 12px 12px; white-space: normal;
  background: rgba(10, 26, 140, .72); border-color: rgba(143, 214, 255, .3); }
.ahb-odiag--eco .ahb-odiag__node .ahb-orb { --orb: 48px; }
.ahb-odiag--eco .ahb-odiag__node b { font-size: 17px; }
.ahb-odiag--eco .ahb-odiag__node small { font-size: 14px; color: var(--accent-on-dark); }
@media (max-width: 1023px) and (min-width: 768px) { .ahb-odiag--eco .ahb-odiag__node { width: 30%; } .ahb-odiag--eco .ahb-odiag__node b { font-size: 15px; } }
@media (max-width: 767px) {
  .ahb-odiag--eco { aspect-ratio: auto; }
  .ahb-odiag--eco .ahb-odiag__svg, .ahb-odiag--eco .ahb-odiag__halo { display: none; }
  .ahb-odiag--eco .ahb-odiag__core { position: relative; left: auto; top: auto; translate: none; width: 220px; margin: 0 auto var(--space-4); }
  .ahb-odiag--eco .ahb-odiag__node { width: auto; }
}

/* ===== v1.11 — sửa mobile khu đối tác / khách hàng (WIP 17/10) ===== */
@media (max-width: 767px) {
  /* Logo wall: 3 ô mỗi hàng, hàng cuối lẻ thì căn giữa thay vì dồn trái */
  ul.ahb-logos:not(.ahb-logos--sm) { display: flex; flex-wrap: wrap; justify-content: center; }
  ul.ahb-logos:not(.ahb-logos--sm) .ahb-logo { flex: 0 0 calc((100% - 2 * var(--space-2)) / 3); }
  /* Đối tác nền tảng: nhãn một dòng riêng, chip căn giữa bên dưới */
  .ahb-herophoto__partners .t-label { flex-basis: 100%; text-align: center; margin: 0 0 var(--space-1); }
}

/* ===================== v1.12 — trang tổng dịch vụ, trang dịch vụ con, SEO Audit (prototype v2, page SEO · Paid Advertising · Creative) ===================== */
/* PageHero biến thể icon (trang dịch vụ con): quả cầu kính lớn phát sáng chứa icon dịch vụ, dùng chung echo + xích đạo của hero-orbit */
.ahb-pagehero__media--icon { --po: 260px; }
.ahb-orb--hero { --orb: var(--po, 260px); position: relative; z-index: 2; color: #fff;
  background: radial-gradient(circle at 40% 32%, rgba(143, 214, 255, .35) 0%, rgba(2, 134, 213, .55) 42%, rgba(0, 48, 191, .55) 78%, rgba(143, 214, 255, .75) 100%);
  box-shadow: 0 0 0 2px rgba(143, 214, 255, .7), 0 0 90px rgba(2, 134, 213, .7), inset 0 0 80px rgba(143, 214, 255, .4); }
.ahb-orb--hero svg { width: 34%; height: 34%; stroke-width: 1.5; filter: drop-shadow(0 0 14px rgba(143, 214, 255, .9)); }
@media (max-width: 767px) { .ahb-pagehero__media--icon { --po: 180px; } }
/* Breadcrumb trong PageHero */
.ahb-pagehero__text > nav:first-child { margin-bottom: calc(var(--space-2) * -1); }
/* Danh sách có dấu tích trên nền tối (hero SEO Audit) */
.ahb-on-dark .ahb-checklist, .ahb-section--dark .ahb-checklist { color: var(--on-dark); }
.ahb-on-dark .ahb-checklist svg, .ahb-section--dark .ahb-checklist svg { color: var(--accent-on-dark); }
.ahb-checklist--check svg { border-radius: 50%; }

/* Card dịch vụ con trên nền tối (Card --glass + --service): cả thẻ bấm được, icon trên, link "Xem chi tiết" dưới đáy */
.ahb-card--service { min-height: 0; justify-content: flex-start; gap: var(--space-3); text-decoration: none; transition: border-color .2s ease, transform .2s ease, background-color .2s ease; }
.ahb-card--service .t-title { color: var(--on-dark); }
.ahb-card--service .ahb-link { margin-top: auto; padding-top: var(--space-2); }
a.ahb-card--service:hover { border-color: rgba(143, 214, 255, .6); background-color: rgba(255, 255, 255, .1); }
a.ahb-card--service:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { a.ahb-card--service:hover { transform: translateY(-2px); } }
/* Thẻ chờ trang (viền nét đứt): chỉ hiện ở bản xem thử */
.ahb-card--pending { border-style: dashed; border-width: 1.5px; }
.ahb-card__note { margin-top: auto; font-size: 13px; color: var(--on-dark-muted); }
/* Banner kêu gọi đặt ngay dưới lưới */
.ahb-grid + .ahb-banner { margin-top: var(--space-6); }
/* CtaBanner --light: khung trắng viền mảnh trên nền sáng, nút chính (cuối trang SEO Audit) */
.ahb-banner--light { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.ahb-banner--light::after { display: none; }
.ahb-banner--light .ahb-banner__text p { color: var(--ink-muted); }
.ahb-banner--light .t-title { color: var(--ink); }

/* Ghi chú chỉ có ở bản xem thử (EmptySlot nhỏ): ô chưa có nội dung, câu FAQ chờ AHB bổ sung */
.ahb-empty--sm { padding: 8px 14px; font-size: 13px; border-radius: var(--radius-sm, 10px); gap: var(--space-2); }
.ahb-pagehero .ahb-empty--sm, .ahb-section--dark .ahb-empty--sm { background: rgba(255, 255, 255, .92); color: var(--ink-muted); }
.ahb-faq .ahb-empty--sm { margin-top: var(--space-3); }

/* Form có icon ở tiêu đề (SEO Audit) */
.ahb-form__title--icon { display: flex; align-items: center; gap: var(--space-3); }
.ahb-form__title--icon .ahb-orb { --orb: 44px; }

/* ===================== v1.12.1 — thẻ dịch vụ chưa có trang: xám, không bấm được (góp ý Quân 20/10) ===================== */
.ahb-card--pending { cursor: default; background: rgba(255, 255, 255, .03); border-color: rgba(143, 214, 255, .22); }
.ahb-card--pending .ahb-orb { filter: grayscale(1) blur(.6px); opacity: .45; box-shadow: none; }
.ahb-card--pending .t-title, .ahb-card--pending .t-body { opacity: .55; }
.ahb-card--pending .ahb-card__note { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px dashed rgba(143, 214, 255, .35); width: fit-content; }
.ahb-card--pending .ahb-card__note svg { width: 14px; height: 14px; flex: none; }

/* ===================== v1.13 — meeting 20/10 + prototype v3 (23/10) =====================
   1 HeroOrbit: hero trang chủ không ảnh, quả cầu thở + 2 vòng nét đứt quay ngược chiều + 3 quả cầu vệ tinh (chuyển động duy nhất của trang).
   2 Section ảnh nền (.ahb-section--photo): ảnh đơn sắc dưới lớp phủ brand NHẸ (meeting: ảnh phải rõ hơn).
   3 Lưới logo khách hàng (.ahb-logos--grid): ô đều nhau, xếp giữa, không chia nhóm.
   4 Hover thống nhất cho nút, thẻ, box, logo, bong bóng.
   5 Flow: màu nền chuyển dần khi cuộn (motion.js mục 7 gắn html.has-flow và .is-flow).
   6 Sửa mobile: chữ A·H·B nằm trong vòng tròn sơ đồ Venn. */

/* 1 HeroOrbit */
.ahb-herophoto--orbit { background:
    radial-gradient(55% 70% at 88% 92%, rgba(2, 134, 213, .95) 0%, rgba(2, 134, 213, 0) 70%),
    radial-gradient(60% 60% at 10% 6%, rgba(0, 21, 150, .9) 0%, rgba(0, 21, 150, 0) 70%),
    linear-gradient(125deg, #0024AE 0%, #0033C4 50%, #0A5FD0 100%); }
.ahb-herophoto--orbit .ahb-sphere { width: min(760px, 120vw); }
.ahb-herophoto--orbit .ahb-sphere > img { filter: drop-shadow(0 0 50px rgba(79, 184, 240, .45)); opacity: 1; }
.ahb-sphere__ring--sat { inset: auto; left: 50%; top: 50%; width: 168%; height: 62%; translate: -50% -50%; border: 1.5px dashed rgba(173, 224, 255, .5); rotate: -9deg; }
.ahb-sphere__ring--sat.ahb-sphere__ring--2 { width: 210%; height: 84%; rotate: 12deg; border-style: dashed; border-color: rgba(173, 224, 255, .28); }
.ahb-sphere__ring--sat::after { display: none; }
.ahb-sphere__ring--sat i { position: absolute; width: 40px; height: 40px; border-radius: 50%; left: -20px; top: calc(50% - 20px);
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95) 0%, #8FD6FF 22%, #0286D5 55%, #0030BF 85%);
  box-shadow: 0 0 22px 3px rgba(79, 184, 240, .55), inset 0 0 0 1px rgba(255, 255, 255, .35); }
.ahb-sphere__ring--2 i { width: 26px; height: 26px; left: calc(50% - 13px); top: -13px; }
.ahb-sphere__ring--2 i + i { width: 54px; height: 54px; left: auto; right: 9%; top: auto; bottom: -4px; }
@media (max-width: 767px) { .ahb-sphere__ring--sat i { width: 26px; height: 26px; left: -13px; top: calc(50% - 13px); } .ahb-sphere__ring--2 i + i { width: 34px; height: 34px; } }
@media (prefers-reduced-motion: no-preference) {
  .ahb-sphere__ring--sat { animation: ahb-ring-turn 60s linear infinite; }
  .ahb-sphere__ring--sat.ahb-sphere__ring--2 { animation: ahb-ring-turn-rev 90s linear infinite; }
}
@keyframes ahb-ring-turn { from { rotate: -9deg; } to { rotate: 351deg; } }
@keyframes ahb-ring-turn-rev { from { rotate: 12deg; } to { rotate: -348deg; } }

/* 2 Section ảnh nền: lớp phủ nhẹ, mép trên/dưới mờ dần để nối section kề bên */
.ahb-section--photo { isolation: isolate; }
.ahb-section__photo { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); mask: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%); }
.ahb-section__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: .9; }
.ahb-section__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 7, 109, .62) 0%, rgba(0, 30, 160, .42) 50%, rgba(0, 7, 109, .62) 100%); mix-blend-mode: multiply; }
.ahb-section__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 48, 191, .38); mix-blend-mode: color; }
/* Thư ngỏ trang Về AHB: lớp phủ nhẹ hơn (meeting 20/10) */
.ahb-section__bg img { opacity: .75; filter: grayscale(.6); }
.ahb-section__bg::after { background: linear-gradient(90deg, rgba(0, 7, 109, .35) 0%, rgba(0, 7, 109, .62) 50%, rgba(0, 7, 109, .78) 100%); }

/* 3 Lưới logo khách hàng */
.ahb-results-logos--only { margin-top: var(--space-7); padding-top: 0; border-top: 0; }
ul.ahb-logos--grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.ahb-logos--grid .ahb-logo { width: 156px; height: 80px; padding: 14px 20px; border-radius: 16px; box-shadow: 0 6px 18px -8px rgba(0, 7, 109, .45); }
@media (max-width: 767px) {
  ul.ahb-logos--grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .ahb-logos--grid .ahb-logo { width: auto; height: auto; aspect-ratio: 15 / 8; padding: 8px 10px; border-radius: 12px; }
}

/* 4 Hover thống nhất */
@media (hover: hover) {
  .ahb-card, .ahb-feature, .ahb-logo, .ahb-orb, .ahb-step__num, .ahb-stat, .ahb-chip, .ahb-related a, .ahb-odiag__node, .ahb-point {
    transition: transform .25s ease, scale .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease, color .25s ease; }
  .ahb-link svg, .ahb-btn svg { transition: transform .2s ease; }
  .ahb-link:hover svg, .ahb-btn:hover svg { transform: translateX(3px); }
  .ahb-card:not(a):hover, .ahb-feature:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -20px rgba(0, 7, 109, .38); }
  .ahb-section--dark .ahb-card:not(a):hover, .ahb-section--brand .ahb-card:not(a):hover { border-color: rgba(143, 214, 255, .55); box-shadow: 0 20px 44px -18px rgba(0, 0, 40, .6), 0 0 0 1px rgba(143, 214, 255, .2); }
  .ahb-logo:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(0, 7, 109, .45); }
  .ahb-point:hover .ahb-orb, .ahb-step:hover .ahb-step__num, .ahb-card:hover .ahb-orb, .ahb-feature:hover .ahb-orb { scale: 1.08; }
  .ahb-stat:hover { scale: 1.04; }
  .ahb-chip:hover { border-color: var(--axis-blue); }
  .ahb-on-dark .ahb-chip:hover, .ahb-section--dark .ahb-chip:hover { border-color: var(--accent-on-dark); background: rgba(255, 255, 255, .14); }
}
@media (prefers-reduced-motion: reduce) {
  .ahb-card:not(a):hover, .ahb-feature:hover, .ahb-logo:hover, .ahb-link:hover svg, .ahb-btn:hover svg { transform: none; }
  .ahb-point:hover .ahb-orb, .ahb-step:hover .ahb-step__num, .ahb-card:hover .ahb-orb, .ahb-feature:hover .ahb-orb, .ahb-stat:hover { scale: none; }
}
/* Meeting 20/10: chỉ hero chuyển động — tắt bong bóng số liệu trôi và các nét đứt chạy */
.ahb-stats--float .ahb-stat, .ahb-dashring, .ahb-dashring--dots, .ahb-dashring--line { animation: none !important; }

/* 5 Flow: section nền đặc lấy màu từ body (motion.js đổi màu body khi cuộn) */
html.has-flow main > section.is-flow { background: none !important; }
.ahb-flow__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
html.has-flow main > section.is-flow > .ahb-container { position: relative; z-index: 1; }

/* 6 Mobile: sơ đồ Venn A·H·B nằm gọn trong vòng tròn lõi (meeting 20/10: chữ rớt ra ngoài) */
@media (max-width: 1023px) {
  .ahb-odiag--wide .ahb-odiag__core { width: 260px; height: 260px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .ahb-odiag--wide .ahb-venn { width: 66%; flex: none; }
  .ahb-odiag--wide .ahb-venn span { font-size: 20px; }
  .ahb-odiag--wide .ahb-venn span small { font-size: 10px; margin-top: 2px; }
  .ahb-odiag--wide .ahb-venn em { position: absolute; left: 50%; top: 104%; transform: translateX(-50%); margin: 0; font-size: 12px; }
}

/* ===================== v2.0 — trang chủ dựng lại theo prototype v3 (đợt 2, 23/10) =====================
   Số đo lấy từ ảnh chụp board "1 · Trang chủ" ở khung 1280px (đổi ra px thiết kế). Màu giữ token hiện có, chỉnh sau (chờ anh Phong).
   Chuyển động: hero (quả cầu thở + lơ lửng, quỹ đạo, vệ tinh), số liệu (bong bóng lơ lửng, chấm chạy), giải pháp (quỹ đạo, chấm, block lơ lửng).
   Quỹ đạo đứng yên, nét chấm chạy theo chiều kim đồng hồ; vệ tinh/chấm sáng do motion.js mục 8 đặt vị trí. */

/* Header: menu nằm bên phải, sát nút tư vấn (prototype) */
@media (min-width: 1024px) { .ahb-header__nav { margin-left: auto; gap: 6px; } .ahb-header__cta { margin-left: var(--space-3); } }

/* Quỹ đạo dùng chung */
.ahb-orbitrings { overflow: visible; pointer-events: none; }
.ahb-orbitrings__line { fill: none; stroke: rgba(173, 224, 255, .55); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 0.1 8; vector-effect: non-scaling-stroke; }
.ahb-orbitrings__line--b { stroke: rgba(173, 224, 255, .3); }
.ahb-orbitrings__line--solid { stroke: rgba(143, 214, 255, .45); stroke-width: 1.4; stroke-dasharray: none; }
.ahb-orbitrings__sat { fill: url(#ahb-sat); stroke: rgba(200, 238, 255, .7); stroke-width: 1; filter: drop-shadow(0 0 10px rgba(79, 184, 240, .6)); }
.ahb-orbitrings__dot { fill: #CFEFFF; filter: drop-shadow(0 0 6px rgba(143, 214, 255, .95)); }
.ahb-orbitrings__dot--sm { opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
  .ahb-orbitrings__line:not(.ahb-orbitrings__line--solid) { animation: ahb-dots-cw 2.4s linear infinite; }
  .ahb-orbitrings__line--b { animation-duration: 3.6s; }
}
@keyframes ahb-dots-cw { to { stroke-dashoffset: -8.1; } }

/* 1 Hero */
.ahb-herophoto--orbit { min-height: 763px; place-items: start center; }
.ahb-hero3 { position: absolute; left: 50%; top: 0; width: 1280px; height: 763px; translate: -50% 0; pointer-events: none; z-index: 0; }
.ahb-hero3 .ahb-hero3__sphere { width: 912px; left: 50%; top: 335px; translate: -50% -50%; }
.ahb-hero3__rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.ahb-herophoto--orbit .ahb-herophoto__content { padding-block: 66px 36px; gap: 0; }
.ahb-herophoto--orbit::after { display: none; }
.ahb-herophoto--orbit .ahb-herophoto__content .t-hero { margin-top: 30px; font-size: 65px; line-height: 1.12; }
.ahb-herophoto--orbit .ahb-herophoto__content .t-lead { margin-top: 24px; max-width: 500px; font-size: 19.5px; line-height: 1.45; }
.ahb-herophoto--orbit .ahb-herophoto__cta { margin-top: 34px; }
.ahb-herophoto--orbit .ahb-herophoto__partners .ahb-chip { font-size: 16px; font-weight: 600; padding: 8px 16px; }
.ahb-herophoto--orbit .ahb-herophoto__partners .t-label { font-size: 15px; }
.ahb-herophoto--orbit .ahb-herophoto__partners { margin-top: 100px; }
@media (prefers-reduced-motion: no-preference) {
  .ahb-hero3 .ahb-hero3__sphere { animation: ahb-bob 9s ease-in-out infinite; }
  .ahb-herophoto--orbit .ahb-herophoto__content > * { animation: ahb-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .ahb-herophoto--orbit .ahb-herophoto__content > :nth-child(2) { animation-delay: .08s; }
  .ahb-herophoto--orbit .ahb-herophoto__content > :nth-child(3) { animation-delay: .16s; }
  .ahb-herophoto--orbit .ahb-herophoto__content > :nth-child(4) { animation-delay: .24s; }
  .ahb-herophoto--orbit .ahb-herophoto__content > :nth-child(5) { animation-delay: .32s; }
}
@keyframes ahb-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -12px; } }
@keyframes ahb-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) {
  .ahb-herophoto--orbit { min-height: 0; }
  .ahb-hero3 { top: 50%; height: 100%; translate: -50% -50%; }
  .ahb-hero3 .ahb-hero3__sphere { top: 50%; width: 800px; }
  .ahb-herophoto--orbit .ahb-herophoto__content { padding-block: 150px 72px; }
  .ahb-herophoto--orbit .ahb-herophoto__content .t-hero { font-size: 52px; }
  .ahb-herophoto--orbit .ahb-herophoto__partners { margin-top: 64px; }
}
@media (max-width: 767px) {
  .ahb-hero3 .ahb-hero3__sphere { width: 600px; }
  .ahb-herophoto--orbit .ahb-herophoto__content { padding-block: 130px 56px; }
  .ahb-herophoto--orbit .ahb-herophoto__content .t-hero { font-size: 38px; }
  .ahb-herophoto--orbit .ahb-herophoto__content .t-lead { font-size: 17px; max-width: 300px; }
  .ahb-herophoto--orbit .ahb-herophoto__cta { flex-direction: column; align-items: center; }
}

/* 2 Số liệu */
.ahb-numbers3 .ahb-sechead { display: grid; gap: 16px; margin-bottom: 0; }
.ahb-numbers3 .ahb-sechead .t-display { margin: 0; font-size: 56px; line-height: 1.12; }
.ahb-numbers3 .ahb-sechead__note { margin: 0; max-width: 460px; color: var(--on-dark-muted); text-align: left; }
.ahb-stats--v3 .ahb-stats__ring { display: none; }
@media (min-width: 1024px) {
  .ahb-stats--v3 { height: 465px; margin-top: 30px; }
  .ahb-stats--v3::before { display: none; }
  .ahb-stats--v3 .ahb-stats__ring { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
  .ahb-stats--v3 > .ahb-stat { z-index: 1; }
  .ahb-stats--v3 > .ahb-stat:nth-child(1) { --d: 318px; left: 20.9%; top: 47.9%; }
  .ahb-stats--v3 > .ahb-stat:nth-child(2) { --d: 202px; left: 47.1%; top: 25%; }
  .ahb-stats--v3 > .ahb-stat:nth-child(3) { --d: 251px; left: 66%; top: 60.5%; }
  .ahb-stats--v3 > .ahb-stat:nth-child(4) { --d: 169px; left: 84.6%; top: 26.6%; }
}
@media (prefers-reduced-motion: no-preference) {
  .ahb-stats--v3 > .ahb-stat { animation: ahb-float 8s ease-in-out infinite !important; }
  .ahb-stats--v3 > .ahb-stat:nth-child(2) { animation-duration: 7s !important; animation-delay: -2s !important; }
  .ahb-stats--v3 > .ahb-stat:nth-child(3) { animation-duration: 9s !important; animation-delay: -4s !important; }
  .ahb-stats--v3 > .ahb-stat:nth-child(4) { animation-duration: 6.5s !important; animation-delay: -1s !important; }
}

/* 3 Vấn đề + vòm */
.ahb-problem3 { padding-bottom: 0 !important; }
.ahb-problem3 .ahb-sechead .t-display { font-size: 46px; line-height: 1.2; max-width: 1000px; margin-inline: auto; color: var(--axis-blue); }
@media (max-width: 1023px) { .ahb-br-lg { display: none; } }
.ahb-problem3 .ahb-points { margin-top: 28px; gap: 36px; }
.ahb-problem3 .ahb-point { font-size: 19px; font-weight: 600; color: #101B4D; gap: 14px; }
.ahb-problem3 .ahb-point .ahb-orb { --orb: 64px; color: var(--axis-blue); background: radial-gradient(circle at 38% 32%, #FFFFFF 0%, #CDEFFC 45%, #6CCBF3 88%, #45B6EE 100%); box-shadow: 0 0 22px rgba(69, 182, 238, .45), inset 0 0 0 1px rgba(255, 255, 255, .6); }
.ahb-dome3 { position: relative; height: 364px; margin-top: 32px; overflow: hidden; }
.ahb-dome3__shape { position: absolute; left: 50%; top: 0; width: 1672px; height: 1672px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(ellipse 920px 420px at 50% 440px, #FFFFFF 0%, #F4F8FF 30%, #D3E3FD 52%, #9EBDF9 74%, #6E9BF5 90%, #5C8DF3 100%), #5C8DF3;
  box-shadow: inset 0 0 0 3px #3F74F0, inset 0 10px 24px rgba(255, 255, 255, .45), 0 -8px 28px rgba(63, 116, 240, .35); }
.ahb-dome3__copy { position: relative; z-index: 1; display: grid; gap: 14px; justify-items: center; text-align: center; padding-top: 108px; }
.ahb-dome3__copy .t-latin-display { font-size: 40px; line-height: 1.22; font-weight: 500; color: var(--axis-blue); }
.ahb-dome3__copy .t-body { max-width: 560px; font-size: 18px; color: var(--ink); }
@media (max-width: 767px) {
  .ahb-problem3 .ahb-sechead .t-display { font-size: 30px; }
  .ahb-problem3 .ahb-points { gap: 14px; }
  .ahb-dome3 { height: 300px; }
  .ahb-dome3__shape { width: 900px; height: 900px; background: radial-gradient(ellipse 380px 240px at 50% 300px, #FFFFFF 0%, #EAF2FE 30%, #B9D2FB 58%, #7EA6F7 82%, #5E8EF4 100%), #5E8EF4; }
  .ahb-dome3__copy { padding-top: 80px; }
  .ahb-dome3__copy .t-latin-display { font-size: 25px; }
  .ahb-dome3__copy .t-body { font-size: 15px; }
}

/* 4 Giải pháp — Integrated Orbit */
.ahb-solutions3 { background: radial-gradient(55% 50% at 50% 62%, rgba(0, 48, 191, .5) 0%, rgba(0, 48, 191, 0) 72%), var(--surface-dark) !important; }
.ahb-iorbit { position: relative; margin-top: 56px; }
.ahb-iorbit__rings { display: none; }
.ahb-iorbit__core { position: relative; width: 300px; aspect-ratio: 1; margin: 0 auto 32px; display: grid; place-items: center; }
.ahb-iorbit__glow { position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(20, 90, 235, .85) 0%, rgba(0, 48, 191, .55) 48%, rgba(0, 48, 191, 0) 72%); box-shadow: 0 0 0 1px rgba(143, 214, 255, .12); }
.ahb-venn--v3 { width: 100%; }
.ahb-venn--v3 span { width: 51%; font-size: 44px; color: var(--white); border: 1.5px solid rgba(160, 225, 255, .65);
  background: radial-gradient(circle at 50% 38%, rgba(120, 205, 255, .42) 0%, rgba(30, 120, 230, .32) 58%, rgba(2, 90, 210, .22) 100%); box-shadow: 0 0 28px rgba(79, 184, 240, .35), inset 0 0 22px rgba(160, 225, 255, .25); }
.ahb-venn--v3 span:nth-child(1) { left: 24.5%; top: 0; background: radial-gradient(circle at 50% 36%, rgba(150, 228, 255, .7) 0%, rgba(40, 160, 240, .5) 60%, rgba(10, 110, 225, .35) 100%); }
.ahb-venn--v3 span:nth-child(2) { left: .3%; top: 42%; }
.ahb-venn--v3 span:nth-child(3) { right: .3%; top: 42%; }
.ahb-venn--v3 span small { font-size: 15px; color: rgba(255, 255, 255, .85); }
.ahb-venn--v3 em { top: 50%; transform: translate(-50%, -50%); font-size: 14px; z-index: 1; text-shadow: 0 1px 8px rgba(0, 7, 109, .9); }
.ahb-iorbit__node { display: flex; align-items: center; gap: 14px; padding: 10px 24px 10px 10px; border-radius: var(--radius-pill); text-decoration: none; color: var(--on-dark);
  background: rgba(10, 30, 140, .55); border: 1px solid rgba(143, 214, 255, .35); backdrop-filter: blur(8px); margin-bottom: 12px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
.ahb-iorbit__node .ahb-orb { --orb: 52px; }
.ahb-iorbit__node b { display: block; font-size: 19px; font-weight: 700; line-height: 1.25; }
.ahb-iorbit__node small { display: block; font-size: 15px; color: rgba(190, 228, 255, .9); }
.ahb-iorbit__node:hover, .ahb-iorbit__node:focus-visible { border-color: var(--accent-on-dark); background: rgba(30, 70, 200, .6); box-shadow: 0 12px 30px -10px rgba(0, 0, 40, .7), 0 0 24px rgba(143, 214, 255, .25); }
@media (min-width: 1024px) {
  .ahb-iorbit { height: 588px; margin-top: 80px; }
  .ahb-iorbit__rings { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .ahb-iorbit__core { position: absolute; left: 50%; top: 50.8%; width: 327px; margin: 0; translate: -50% -50%; }
  .ahb-iorbit__glow { inset: -40%; }
  .ahb-iorbit__node { position: absolute; width: 312px; height: 76px; margin: 0; translate: -50% -50%; }
  .ahb-iorbit__node--1 { left: 50%; top: 6.5%; } .ahb-iorbit__node--2 { left: 86.8%; top: 28%; } .ahb-iorbit__node--3 { left: 86.8%; top: 71.5%; }
  .ahb-iorbit__node--4 { left: 50%; top: 93.5%; } .ahb-iorbit__node--5 { left: 13.2%; top: 71%; } .ahb-iorbit__node--6 { left: 13.2%; top: 27.7%; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .ahb-iorbit__node { animation: ahb-bob-sm 7s ease-in-out infinite; }
  .ahb-iorbit__node--2 { animation-delay: -1.2s; } .ahb-iorbit__node--3 { animation-delay: -2.4s; } .ahb-iorbit__node--4 { animation-delay: -3.6s; }
  .ahb-iorbit__node--5 { animation-delay: -4.8s; } .ahb-iorbit__node--6 { animation-delay: -6s; }
  .ahb-iorbit__node:hover, .ahb-iorbit__node:focus-visible { animation-play-state: paused; transform: translateY(-6px); }
}
@keyframes ahb-bob-sm { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; }
}

/* 5 Kết quả */
.ahb-work3 .ahb-section__photo img { opacity: 1; filter: grayscale(1) contrast(1.05) brightness(1.05); }
.ahb-work3 .ahb-section__photo::after { background: linear-gradient(180deg, rgba(0, 7, 109, .62) 0%, rgba(0, 20, 150, .42) 50%, rgba(0, 7, 109, .66) 100%); }
.ahb-work3 .ahb-section__photo::before { background: rgba(0, 48, 191, .5); }
.ahb-card--result { min-height: 402px; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; border-radius: 32px; overflow: hidden;
  background: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(143, 214, 255, .3) !important; backdrop-filter: blur(6px); }
.ahb-card--result .ahb-card__meta { position: absolute; top: 32px; left: 32px; right: 32px; margin: 0; color: rgba(190, 228, 255, .95); }
.ahb-card--result .t-number { font-size: 74px; line-height: 1; margin: 0 0 14px; color: #E9F7FF; }
.ahb-card--result .t-body { font-size: 18px; margin: 0; }
.ahb-card--result .ahb-link { margin-top: 18px; }
.ahb-card--glass.ahb-card--result .ahb-card__orb { width: 75%; height: auto; aspect-ratio: 1; right: -18%; top: -18%; opacity: 1;
  background: radial-gradient(circle at 45% 72%, #1F63E8 0%, #0C40C8 50%, #0A2FA8 78%, #08268E 100%) !important; opacity: .92 !important;
  box-shadow: inset 0 -10px 22px rgba(58, 193, 240, .65), 0 0 30px rgba(2, 134, 213, .35); }
@media (max-width: 767px) { .ahb-card--result { min-height: 300px; } .ahb-card--result .t-number { font-size: 56px; } }
.ahb-work3 .ahb-results-logos { margin-top: 56px; padding-top: 40px; }
.ahb-work3 .ahb-results-logos .t-label { color: var(--accent-on-dark); }
.ahb-work3 ul.ahb-logos { display: flex; flex-wrap: wrap; gap: 12px; }
.ahb-work3 .ahb-logo { width: 111px; height: 56px; padding: 8px 12px; border-radius: 10px; }
@media (max-width: 767px) { .ahb-work3 ul.ahb-logos { display: grid; grid-template-columns: repeat(3, 1fr); } .ahb-work3 .ahb-logo { width: auto; height: auto; aspect-ratio: 2 / 1; } }

/* 6 Quy trình */
.ahb-process3 { background: #F4F8FE !important; }
.ahb-process3 .ahb-sechead .t-display { color: var(--axis-blue); }
.ahb-steps3 { position: relative; margin-top: 48px; }
.ahb-steps3__line { display: none; }
.ahb-steps--v3 .ahb-step__num { width: 103px; height: 103px; font-size: 34px; color: #0B3FD1; background: radial-gradient(circle at 50% 40%, #FFFFFF 0%, #DDF3FD 40%, #86D3F5 82%, #45B6EE 100%);
  box-shadow: 0 0 26px rgba(69, 182, 238, .45), inset 0 0 0 1px rgba(255, 255, 255, .7); transform: none !important; }
.ahb-steps--v3 .ahb-step__name { font-size: 18px; font-weight: 600; color: var(--ink-strong); }
.ahb-steps--v3 .ahb-step__time { background: #E4EEFC; font-size: 14px; padding: 4px 12px; }
@media (min-width: 1024px) {
  .ahb-steps3__line { display: block; position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 200px; z-index: 0; }
  .ahb-steps3__line path { fill: none; stroke: rgba(2, 134, 213, .5); stroke-width: 2; stroke-dasharray: 0.1 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .ahb-steps--v3 { z-index: 1; }
  .ahb-steps--v3::before { display: none; }
  .ahb-steps--v3 > .ahb-step { transform: none !important; }
  .ahb-steps--v3 > :nth-child(2) { margin-top: 38px; } .ahb-steps--v3 > :nth-child(3) { margin-top: 56px; }
  .ahb-steps--v3 > :nth-child(4) { margin-top: 48px; } .ahb-steps--v3 > :nth-child(5) { margin-top: 11px; }
}
@media (hover: hover) { .ahb-steps--v3 .ahb-step:hover .ahb-step__num { scale: 1.06; } }

/* 8 Dải kêu gọi (form 3 ô) */
.ahb-section--brand .ahb-split > div > .t-display { font-size: 50px; line-height: 1.12; max-width: 560px; }
.ahb-orbit--cta { width: 560px; height: auto; aspect-ratio: 1; right: -150px; top: -150px; opacity: .9; }
@media (min-width: 1024px) { .ahb-section--brand .ahb-split { grid-template-columns: 1.55fr 1fr; } }
@media (max-width: 767px) { .ahb-section--brand .ahb-split > div > .t-display { font-size: 34px; } }

/* Footer (prototype) */
.ahb-footer { padding-block: 92px 36px; }
.ahb-footer__logo img { height: 44px; }
.ahb-footer__tagline { font-size: 24px; margin-top: 18px; }
.ahb-footer__line { font-size: 16px; line-height: 1.6; max-width: 320px; color: rgba(205, 215, 245, .85); }
@media (min-width: 768px) { .ahb-footer__top { grid-template-columns: 47.5fr 18fr 17.5fr 17fr; gap: 0; } }
.ahb-footer__h { font-size: 14px; margin-bottom: 18px; }
.ahb-footer ul { gap: 16px; }
.ahb-footer ul a, .ahb-footer ul li > span { font-size: 16px; font-weight: 600; }
.ahb-footer__bottom { margin-top: 72px; }

.ahb-insights3 .ahb-sechead .t-display { color: var(--axis-blue) !important; }
.ahb-venn--v3 em { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; display: block !important; }
.ahb-numbers3 { background: radial-gradient(50% 60% at 85% 18%, rgba(0, 48, 191, .38) 0%, rgba(0, 48, 191, 0) 70%), var(--surface-dark) !important; }
@media (max-width: 767px) { .ahb-numbers3 .ahb-sechead .t-display { font-size: 34px; } }

/* ===== v2.1 — Về AHB dựng lại theo prototype v3 (board 2) ===== */
/* Hero: chữ trái, quả cầu Orbit + biểu tượng đội ngũ bên phải, quỹ đạo nét chấm cố định, vệ tinh chạy trên quỹ đạo */
.ahb-abouthero3 { min-height: 606px; }
.ahb-abouthero3 .ahb-pagehero__grid { grid-template-columns: 1fr; }
.ahb-abouthero3 .t-hero { font-size: clamp(34px, 3.85vw, 49px); line-height: 1.18; max-width: 600px; }
.ahb-abouthero3 .t-lead { font-size: clamp(17px, 1.55vw, 19.5px); max-width: 560px; }
.ahb-abouthero3 .ahb-pagehero__media::before { display: none; }
.ahb-orbhero { position: relative; width: 100%; max-width: 560px; aspect-ratio: 600 / 500; margin-inline: auto; padding: 0; }
.ahb-orbhero::after { content: ""; position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(143, 214, 255, .14); pointer-events: none; z-index: 0; }
.ahb-orbhero__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 2; pointer-events: none; }
.ahb-orbhero__sphere { position: absolute; left: 50%; top: 50%; width: 66%; translate: -50% -50%; z-index: 1; animation: ahb-breathe 7s ease-in-out infinite; }
.ahb-orbhero__sphere img { display: block; width: 100%; height: auto; }
.ahb-orbhero__icon { position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: #fff; width: 22%; display: grid; place-items: center; }
.ahb-orbhero__icon svg { width: 100%; height: auto; stroke-width: 1.6; }
@keyframes ahb-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@media (min-width: 1024px) {
  .ahb-abouthero3 .ahb-pagehero__grid { grid-template-columns: 575px 1fr; gap: 40px; }
  .ahb-orbhero { max-width: 600px; margin-right: -60px; }
}
@media (max-width: 767px) { .ahb-orbhero { max-width: 340px; } .ahb-abouthero3 { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .ahb-orbhero__sphere { animation: none; } }

/* Câu chuyện: lõi sáng ~300, 8 chip trên vòng chấm, xoay chậm, chữ luôn thẳng */
.ahb-odiag--story3 { width: min(600px, 100%); }
.ahb-odiag--story3 .ahb-odiag__core { animation: ahb-breathe 8s ease-in-out infinite; }
@media (min-width: 768px) { .ahb-odiag--story3 .ahb-odiag__core { inset: 25%; padding: 9%; } }
.ahb-odiag--story3 .ahb-odiag__label { font-size: clamp(17px, 1.65vw, 21px); line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; }
.ahb-odiag--story3 .ahb-odiag__node { font-size: 15px; font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ahb-odiag--story3 .ahb-odiag__core { animation: none; } }

/* Thư nhà sáng lập: không dấu ngoặc lớn, chữ 23px */
.ahb-quote--v3::before { display: none; }
.ahb-founder .ahb-quote--v3 { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.5; }
.ahb-founder .ahb-photoorb { animation: ahb-breathe 8s ease-in-out infinite; }
@media (min-width: 1024px) { .ahb-founder .ahb-photoorb { --po: 257px; margin-inline: 60px 40px; } }
@media (prefers-reduced-motion: reduce) { .ahb-founder .ahb-photoorb { animation: none; } }

/* Số liệu: nền ảnh đội ngũ phủ brand, tiêu đề giữa, 4 bong bóng một hàng */
.ahb-aboutnum3 .ahb-sechead .t-display { font-size: clamp(26px, 2.65vw, 34px); color: #fff; }
.ahb-stats--row3 { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 44px; margin-top: 56px; }
.ahb-stats--row3 .ahb-stat { position: static; transform: none; padding: 18px; text-align: center;
  background: radial-gradient(circle at 50% 42%, rgba(10, 30, 160, .55) 0%, rgba(8, 30, 170, .65) 62%, rgba(40, 140, 255, .55) 92%, rgba(150, 220, 255, .85) 100%);
  box-shadow: 0 0 0 1.5px rgba(143, 214, 255, .75), 0 0 36px rgba(60, 170, 255, .45); animation: ahb-bob 7s ease-in-out infinite; }
.ahb-stats--row3 .ahb-stat:nth-child(1) { --d: 230px; }
.ahb-stats--row3 .ahb-stat:nth-child(2) { --d: 181px; animation-delay: -2s; }
.ahb-stats--row3 .ahb-stat:nth-child(3) { --d: 166px; animation-delay: -4s; }
.ahb-stats--row3 .ahb-stat:nth-child(4) { --d: 202px; animation-delay: -1s; }
.ahb-stats--row3 .ahb-stat .t-number { font-size: calc(var(--d) * .26); line-height: 1; }
.ahb-stats--row3 .ahb-stat .t-label { font-size: 13px; line-height: 1.3; max-width: 78%; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .ahb-stats--row3 { gap: 16px; }
  .ahb-stats--row3 .ahb-stat:nth-child(n) { --d: 150px; }
  .ahb-stats--row3 .ahb-stat .t-label { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .ahb-stats--row3 .ahb-stat { animation: none; } }

/* Hệ sinh thái: elip ngoài nét liền mảnh, elip chấm trong (chấm chạy), block đi trên quỹ đạo */
.ahb-odiag--eco3 .ahb-odiag__outer { fill: none; stroke: rgba(143, 214, 255, .4); stroke-width: 1.2; }
.ahb-odiag--eco3 .ahb-odiag__inner { animation: ahb-dots-cw 1.6s linear infinite; }
.ahb-odiag--eco3 .ahb-odiag__core { animation: ahb-breathe 7s ease-in-out infinite; }
.ahb-odiag--eco3 .ahb-odiag__node { width: auto; min-width: 0; max-width: 30%; white-space: nowrap; }
.ahb-odiag--eco3 .ahb-odiag__node b { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1023px) and (min-width: 768px) { .ahb-odiag--eco3 .ahb-odiag__node { max-width: 34%; padding: 8px 14px 8px 8px; } .ahb-odiag--eco3 .ahb-odiag__node .ahb-orb { --orb: 36px; } }
@media (max-width: 767px) { .ahb-odiag--eco3 .ahb-odiag__node { max-width: none; white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .ahb-odiag--eco3 .ahb-odiag__inner, .ahb-odiag--eco3 .ahb-odiag__core { animation: none; } }

/* Dải kêu gọi: quả cầu ~343 bên phải giữa */
.ahb-orbit--band { width: 440px; right: 6%; animation: none; }
@media (max-width: 1023px) { .ahb-orbit--band { width: 360px; right: -140px; } }
.ahb-odiag--eco3 .ahb-odiag__inner { stroke-dasharray: .1 8; stroke-width: 3; stroke-linecap: round; stroke: rgba(143, 214, 255, .55); }
.ahb-orbit--band { height: auto; aspect-ratio: 900 / 898; }

/* ===== v2.2 — sửa theo Feedback v2 (23/10 tối) ===== */
/* Block đứng yên (trang chủ 6 giải pháp, Về AHB): chỉ quỹ đạo có chấm chạy + quả cầu nhỏ đi trên quỹ đạo */
.ahb-iorbit__node { animation: none !important; }
.ahb-orbitrings--light .ahb-orbitrings__line { stroke: rgba(2, 134, 213, .45); stroke-width: 2.2; }
.ahb-orbitrings--light .ahb-orbitrings__dot { fill: var(--velocity-cyan); filter: drop-shadow(0 0 4px rgba(2, 134, 213, .6)); }
@media (max-width: 767px) { .ahb-odiag--story3 .ahb-orbitrings { display: none; } }
.ahb-odiag--eco3 .ahb-odiag__outer { stroke-dasharray: .1 9; stroke-width: 2.6; stroke-linecap: round; stroke: rgba(143, 214, 255, .5); animation: ahb-dots-cw 3s linear infinite; }
@keyframes ahb-dots-cw9 { to { stroke-dashoffset: -9.1; } }
.ahb-odiag--eco3 .ahb-odiag__outer { animation-name: ahb-dots-cw9; }
@media (prefers-reduced-motion: reduce) { .ahb-odiag--eco3 .ahb-odiag__outer { animation: none; } }

/* Ảnh nền: ảnh trắng đen rõ, lớp xanh mỏng (chỉ đủ đọc chữ) */
.ahb-section__photo img { filter: grayscale(1) contrast(1.05) brightness(1.08); opacity: 1; }
.ahb-section__photo::before { background: rgba(0, 48, 191, .22); }
.ahb-section__photo::after { background: linear-gradient(180deg, rgba(0, 7, 109, .42) 0%, rgba(0, 20, 150, .16) 50%, rgba(0, 7, 109, .45) 100%); }
.ahb-work3 .ahb-section__photo::before { background: rgba(0, 48, 191, .24); }
.ahb-work3 .ahb-section__photo::after { background: linear-gradient(180deg, rgba(0, 7, 109, .5) 0%, rgba(0, 20, 150, .18) 50%, rgba(0, 7, 109, .5) 100%); }
.ahb-section__bg img { opacity: 1; filter: grayscale(1) brightness(1.05); }
.ahb-section__bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 48, 191, .22); mix-blend-mode: color; }
.ahb-section__bg::after { z-index: 1; background: linear-gradient(90deg, rgba(0, 7, 109, .18) 0%, rgba(0, 7, 109, .45) 45%, rgba(0, 7, 109, .62) 100%); }

/* Vòm "Tăng trưởng không thất bại…" hoà dần xuống nền xanh của phần Giải pháp */
/* 27/10: không còn dải xám full ngang; chỉ phần trong vòm chuyển dần sang xanh đậm, khớp nền section dưới. Thêm khoảng trên để quầng sáng mép vòm không bị cắt thành đường kẻ ngang. */
.ahb-dome3 { position: relative; height: 404px; margin-top: -8px; }
.ahb-dome3__shape { top: 40px;
  background: linear-gradient(180deg, rgba(0, 7, 109, 0) 0, rgba(0, 7, 109, 0) 262px, rgba(45, 90, 230, .7) 318px, var(--surface-dark) 364px, var(--surface-dark) 100%),
    radial-gradient(ellipse 920px 420px at 50% 440px, #FFFFFF 0%, #F4F8FF 30%, #D3E3FD 52%, #9EBDF9 74%, #6E9BF5 90%, #5C8DF3 100%), #5C8DF3; }
.ahb-dome3__copy { padding-top: 148px; }
@media (max-width: 767px) {
  .ahb-dome3 { height: 340px; }
  .ahb-dome3__shape { background: linear-gradient(180deg, rgba(0, 7, 109, 0) 0, rgba(0, 7, 109, 0) 215px, rgba(45, 90, 230, .7) 262px, var(--surface-dark) 300px, var(--surface-dark) 100%),
    radial-gradient(ellipse 380px 240px at 50% 300px, #FFFFFF 0%, #EAF2FE 30%, #B9D2FB 58%, #7EA6F7 82%, #5E8EF4 100%), #5E8EF4; }
  .ahb-dome3__copy { padding-top: 112px; }
}

/* Quy trình 4D: đường nối nằm dưới vòng tròn; mô tả các bước thẳng hàng */
.ahb-steps--icons .ahb-orb { position: relative; z-index: 1; background-color: var(--surface-dark); }
.ahb-section--light .ahb-steps--icons .ahb-orb, .ahb-section--tint .ahb-steps--icons .ahb-orb { background-color: #fff; }
@media (min-width: 1024px) {
  .ahb-steps--icons > .ahb-step { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start; justify-items: center; }
  .ahb-steps--icons .ahb-step__desc { min-height: calc(1.55em * 3); }
}
.ahb-section--photo .ahb-sechead .t-display { text-shadow: 0 2px 18px rgba(0, 7, 60, .55); }

/* ===== v2.3 — Menu Giải pháp 6 giải pháp (Quân 23/10) ===== */
.ahb-header__nav a[data-mega-trigger] { display: inline-flex; align-items: center; }
.ahb-header__nav a[data-mega-trigger] svg { width: 14px; height: 14px; margin-left: 4px; transition: transform .2s; }
.ahb-header__nav a[data-mega-trigger][aria-expanded="true"] { background: var(--glass-on-dark); }
.ahb-header__nav a[data-mega-trigger][aria-expanded="true"] svg { transform: rotate(180deg); }
.ahb-header__nav a[data-mega-trigger].is-current { box-shadow: inset 0 0 0 1px var(--line-on-dark); }
.ahb-mega--six { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .ahb-mega--six { grid-template-columns: 1fr 260px; } }
.ahb-mega6 { display: grid; grid-template-columns: 290px 1fr; gap: 0 28px; min-height: 340px; }
.ahb-mega6__list { list-style: none; margin: 0; padding: 0 20px 0 0; border-right: 1px solid var(--line); display: grid; gap: 4px; align-content: start; }
.ahb-mega6__sol { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15px; }
.ahb-mega6__sol > svg:last-child { width: 16px; height: 16px; margin-left: auto; opacity: 0; transition: opacity .2s; color: var(--axis-blue); }
.ahb-mega6__sol.is-active, .ahb-mega6__sol:hover { background: var(--surface-tint, #EEF4FC); color: var(--axis-blue); }
.ahb-mega6__sol.is-active > svg:last-child { opacity: 1; }
.ahb-mega6__sol:focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: 2px; }
.ahb-mega6__panel { display: none; align-content: start; gap: 14px; }
.ahb-mega6__panel.is-active { display: grid; animation: ahb-mega6-in .2s ease-out; }
@keyframes ahb-mega6-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
.ahb-mega6__head { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: var(--axis-blue); text-decoration: none; }
.ahb-mega6__head svg { width: 16px; height: 16px; }
.ahb-mega6__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.ahb-mega6__links a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); font-size: 15px; }
.ahb-mega6__links a:hover, .ahb-mega6__links a[aria-current] { background: var(--surface-tint, #EEF4FC); color: var(--axis-blue); }
.ahb-mega6__ico { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #EAF3FD; color: var(--axis-blue); }
.ahb-mega6__ico svg { width: 16px; height: 16px; }
.ahb-mega6__note { margin: 0; color: var(--ink-muted); font-size: 15px; max-width: 420px; }
.ahb-mega6__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--axis-blue); text-decoration: none; font-size: 15px; }
.ahb-mega6__more svg { width: 16px; height: 16px; }
/* Hero orbit dùng chung (partials/orbhero.html) */
.ahb-pagehero .ahb-orbhero::before { display: none; }
.ahb-pagehero .ahb-orbhero { padding: 0; }
.ahb-mega6 { grid-template-columns: 310px 1fr; }
.ahb-mega6__sol span:not(.ahb-orb) { white-space: nowrap; }
.ahb-mega6__sol .ahb-orb { --orb: 36px; }
.ahb-mega__aside .ahb-btn { white-space: nowrap; }
@media (min-width: 1024px) { .ahb-insights-hero3 { grid-template-columns: 1.15fr .85fr; margin-bottom: 48px; } }
@media (min-width: 1024px) { .ahb-solhero3 .ahb-pagehero__grid { grid-template-columns: 1.35fr .65fr; } .ahb-solhero3 .t-hero { font-size: clamp(38px, 3.5vw, 46px); } }
/* Quỹ đạo có chiều sâu (data-depth, motion.js mục 8): nửa sau nằm dưới quả cầu, nửa trước nằm trên */
.ahb-orbitrings[data-depth] { z-index: 0 !important; }
.ahb-orbitrings--front { z-index: 3 !important; pointer-events: none; }
.ahb-hero3__sphere { position: absolute; z-index: 1; }

/* ===== v2.4 — Feedback v3 (27/10) ===== */
/* Hero trang chủ vừa khung trình duyệt: cả cụm quả cầu + chữ co giãn theo --hs (site.js) */
@media (min-width: 1024px) {
  .ahb-herophoto--orbit { min-height: calc(763px * var(--hs, 1)); }
  .ahb-hero3 { scale: var(--hs, 1); transform-origin: 50% 0; }
  .ahb-herophoto--orbit .ahb-herophoto__content { zoom: var(--hs, 1); }
}
/* Lòng quả cầu hero sẫm như prototype (viền sáng, giữa xanh đậm) */
.ahb-hero3__sphere::after { content: ""; position: absolute; left: 11%; top: 11%; width: 78%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, rgba(4, 14, 120, .82) 0%, rgba(6, 22, 140, .62) 42%, rgba(10, 40, 170, .2) 68%, rgba(10, 40, 170, 0) 80%); }
/* Lõi sơ đồ 6 giải pháp: quả cầu sáng phía sau Venn, 3 vòng kính sáng hơn */
.ahb-iorbit__core::before { content: ""; position: absolute; left: 50%; top: 50%; width: 104%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, #2A62F2 0%, #1C49DE 52%, #1640CC 66%, rgba(40, 110, 255, .45) 72%, rgba(30, 80, 230, 0) 76%);
  box-shadow: 0 0 90px rgba(40, 120, 255, .45); }
.ahb-venn--v3 { position: relative; z-index: 1; }
.ahb-venn--v3 span { font-size: 38px; border-color: rgba(140, 225, 255, .9);
  background: radial-gradient(circle at 50% 34%, rgba(130, 220, 255, .58) 0%, rgba(40, 150, 245, .42) 55%, rgba(20, 95, 230, .32) 100%);
  box-shadow: 0 0 30px rgba(80, 190, 255, .45), inset 0 0 26px rgba(170, 230, 255, .3); }
.ahb-venn--v3 span:nth-child(1) { background: radial-gradient(circle at 50% 34%, rgba(170, 238, 255, .78) 0%, rgba(60, 185, 250, .55) 55%, rgba(20, 120, 235, .4) 100%); }
.ahb-venn--v3 span small { font-size: 14px; }
@media (max-width: 767px) { .ahb-venn--v3 span { font-size: 30px; } }
.ahb-dome3::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(70, 110, 235, .28) 45%, var(--surface-dark) 100%); }

/* ============================================================
   v2.5 — Quân 31/10
   1 Ảnh nền section: Phương án 1 đã chốt (trang thử KvWG9…): bỏ phủ xanh, giữ màu gốc ảnh, phủ xám đậm 72%.
     Áp cho mọi ảnh nền (.ahb-section__photo: trang chủ, Về AHB; .ahb-section__bg: thư nhà sáng lập).
   2 Trang chủ: 2 dải logo "Đã đồng hành cùng" (khách hàng) và "Đối tác phát triển" (credential slide 11).
   3 Về AHB: thư nhà sáng lập bỏ ảnh CEO, 1 cột căn giữa.
   4 Làm mượt chuyển động: nhịp "lơ lửng" dùng transform/translate thay margin-top (margin bắt tính lại bố cục mỗi khung hình);
     block đang chạy/lơ lửng bỏ kính mờ (backdrop-filter phải làm mờ lại nền mỗi khung hình), thay bằng nền đặc hơn.
   ============================================================ */
/* 1 */
.ahb-section__photo img, .ahb-work3 .ahb-section__photo img { filter: none; opacity: 1; }
.ahb-section__photo::before, .ahb-work3 .ahb-section__photo::before { display: none; }
.ahb-section__photo::after, .ahb-work3 .ahb-section__photo::after { background: rgba(28, 30, 36, .72); mix-blend-mode: normal; }
.ahb-section--photo, .ahb-founder { background-color: #1b1d22; }
.ahb-section__bg img { opacity: 1; filter: none; }
.ahb-section__bg::before { display: none; }
.ahb-section__bg::after { background: rgba(28, 30, 36, .72); }

/* 2 */
.ahb-results-logos--two { gap: var(--space-7); }
.ahb-logorow { display: grid; gap: var(--space-4); min-width: 0; }
@media (max-width: 767px) { .ahb-work3 .ahb-logorow ul.ahb-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ahb-logorow .t-label { color: var(--accent-on-dark); }
.ahb-logos--partners .ahb-logo b { font-size: 14px; color: #3A4660; letter-spacing: .01em; text-align: center; line-height: 1.2; }

/* 3 */
.ahb-founder--noimg .ahb-founder__col { max-width: 860px; margin-inline: auto; text-align: center; display: grid; justify-items: center; position: relative; z-index: 1; }
.ahb-founder__mark { font-family: Georgia, "Times New Roman", serif; font-size: 120px; line-height: .7; height: 56px; color: var(--accent-on-dark); opacity: .9; }
.ahb-founder--noimg .ahb-eyebrow { margin-top: var(--space-4); }
.ahb-founder--noimg .ahb-founder__quote { margin-top: var(--space-5); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.45; font-weight: 600; text-wrap: balance; }
.ahb-founder__body { margin-top: var(--space-5); max-width: 720px; color: var(--on-dark-muted); text-wrap: pretty; }
.ahb-founder__sign { margin-top: var(--space-6); justify-items: center; }
.ahb-founder__sign::before { content: ""; width: 48px; height: 2px; border-radius: 2px; background: var(--accent-on-dark); margin: 0 auto var(--space-4); }
@media (max-width: 767px) { .ahb-founder__mark { font-size: 88px; height: 40px; } .ahb-founder--noimg .ahb-founder__col { text-align: left; justify-items: start; } .ahb-founder__sign { justify-items: start; } .ahb-founder__sign::before { margin-left: 0; } }

/* 4 */
@keyframes ahb-bob-t { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ahb-bob-tr { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: no-preference) {
  .ahb-hero3 .ahb-hero3__sphere { animation-name: ahb-bob-t; will-change: transform; }
  .ahb-stats--row3 .ahb-stat { animation-name: ahb-bob-t; will-change: transform; }
  .ahb-iorbit__node { animation-name: ahb-bob-tr; will-change: translate; }
}
.ahb-iorbit__node { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12, 32, 140, .78); }
.ahb-odiag[data-motion] .ahb-odiag__node { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ============================================================
   v2.6 — theo source HTML prototype (31/10)
   1 Màu: token lấy đúng mã trong prototype (tokens.css): chữ thân #0B1437, chữ phụ #4A5578, viền #DCE5F7,
     nhấn trên nền tối #9ED8FF, chữ phụ trên nền tối #C9D6FF, nền nhạt #F3F7FF.
     Nền section tối theo prototype: gradient dọc #00076D ↔ #000447 + quầng cyan mờ (không còn mảng Axis/Cyan ở 2 góc).
   2 Hero trang chủ dựng lại theo prototype: nền ảnh gradient trôi chậm, quả cầu 1260px "thở",
     2 vòng nét chấm đồng tâm quay ngược chiều, 1 quỹ đạo elip nghiêng -14°, 3 quả cầu vệ tinh chạy bằng offset-path.
     Mỗi lớp quay bằng transform trên phần tử HTML riêng (card đồ hoạ xử lý, không vẽ lại cả hero mỗi khung hình).
   ============================================================ */
/* 1 */
.ahb-section--dark { background:
    radial-gradient(820px 520px at 50% 60%, rgba(2, 134, 213, .3) 0%, rgba(2, 134, 213, 0) 70%),
    linear-gradient(180deg, #00076D 0%, #000447 100%); }
.ahb-numbers3 { background: radial-gradient(760px 520px at 78% 50%, rgba(2, 134, 213, .28) 0%, rgba(2, 134, 213, 0) 70%), linear-gradient(180deg, #000447 0%, #00076D 100%) !important; }
.ahb-solutions3 { background: radial-gradient(820px 520px at 50% 60%, rgba(2, 134, 213, .34) 0%, rgba(2, 134, 213, 0) 70%), linear-gradient(180deg, #00076D 0%, #000447 100%) !important; }
.ahb-process3 { background: linear-gradient(180deg, #F3F7FF 0%, #FFFFFF 100%) !important; }
.ahb-section--tint { background: linear-gradient(180deg, #F3F7FF 0%, #FFFFFF 100%); }
.ahb-section--dark .ahb-eyebrow, .ahb-section--brand .ahb-eyebrow, .ahb-on-dark .ahb-eyebrow { color: #CFE9FF; border-color: rgba(158, 216, 255, .35); background: rgba(255, 255, 255, .06); }
.ahb-section--dark .ahb-eyebrow::before, .ahb-section--brand .ahb-eyebrow::before, .ahb-on-dark .ahb-eyebrow::before { background: #5CC8FF; box-shadow: 0 0 0 3px rgba(92, 200, 255, .18), 0 0 12px #5CC8FF; }
.ahb-eyebrow { border-color: #DCE5F7; background: #F2F7FF; }
.ahb-card__meta { color: #0070B8; }

/* 2 */
.ahb-herophoto--orbit { background: #00076D; isolation: isolate; }
.ahb-hero3__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.ahb-hero3 { z-index: 0; }
.ahb-hero3__sys { position: absolute; left: 50%; top: -300px; width: 1260px; height: 1260px; margin-left: -630px; pointer-events: none; }
.ahb-hero3__orb { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; }
.ahb-hero3__ring, .ahb-hero3__ell { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ahb-hero3__tilt { position: absolute; inset: 0; transform: rotate(-14deg); }
.ahb-hero3__sat { position: absolute; left: 0; top: 0; offset-path: path('M 1260 630 A 630 252 0 1 1 0 630 A 630 252 0 1 1 1260 630 Z'); offset-rotate: 0deg; }
.ahb-hero3__sat--1 { width: 75px; height: 75px; }
.ahb-hero3__sat--2 { width: 50px; height: 50px; offset-distance: 33%; }
.ahb-hero3__sat--3 { width: 35px; height: 35px; offset-distance: 66%; }
@keyframes ahb-hdrift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.07) translate(-1.2%, 1%); } }
@keyframes ahb-hglow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .8; transform: scale(1.03); } }
@keyframes ahb-hspin { to { transform: rotate(360deg); } }
@keyframes ahb-hdash { to { stroke-dashoffset: -400; } }
@keyframes ahb-htravel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .ahb-hero3__bg { animation: ahb-hdrift 36s ease-in-out infinite alternate; will-change: transform; }
  .ahb-hero3__orb { animation: ahb-hglow 7s ease-in-out infinite; will-change: transform, opacity; }
  .ahb-hero3__ring--in { animation: ahb-hspin 140s linear infinite reverse; will-change: transform; }
  .ahb-hero3__ring--out { animation: ahb-hspin 90s linear infinite; will-change: transform; }
  .ahb-hero3__ell { will-change: transform; }
  .ahb-hero3__ell path { animation: ahb-hdash 40s linear infinite; }
  .ahb-hero3__sat { animation: ahb-htravel 24s linear infinite; will-change: offset-distance; }
  .ahb-hero3__sat--2 { animation-duration: 38s; animation-delay: -12s; }
  .ahb-hero3__sat--3 { animation-duration: 60s; animation-delay: -30s; }
}
@media (max-width: 760px) { .ahb-hero3__ring, .ahb-hero3__tilt { display: none; } }
/* 3 Vòm "We were born from the gap…": prototype dùng chính quả cầu Orbit (ảnh) phóng 1640px, "thở", cắt ở đáy section */
.ahb-problem3 { overflow: clip; }
.ahb-dome3 { height: 340px; margin-top: 56px; overflow: visible; }
.ahb-dome3::after { display: none; }
.ahb-dome3__shape { top: 0; width: 1640px; height: 1640px; border-radius: 50%; box-shadow: none !important;
  background: url("../graphics/dome-orb.webp") center / 100% 100% no-repeat !important; transform-origin: 50% 50%; }
.ahb-dome3__copy { padding-top: 92px; gap: 16px; }
.ahb-dome3__copy .t-latin-display { font-size: 40px; line-height: 48px; font-weight: 600; color: #0030BF; }
.ahb-dome3__copy .t-body { color: #26346B; }
.ahb-problem3 + .ahb-section, .ahb-problem3 { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) { .ahb-dome3__shape { animation: ahb-hglow 7s ease-in-out infinite; } }
@media (max-width: 767px) { .ahb-dome3 { height: 300px; } .ahb-dome3__shape { width: 900px; height: 900px; } .ahb-dome3__copy { padding-top: 64px; } .ahb-dome3__copy .t-latin-display { font-size: 26px; line-height: 32px; } }

/* ============================================================
   v2.7 — chuyển động + hover toàn site theo source prototype (Quân chốt 31/10)
   a Hiện dần khi cuộn tới (.ahb-rv, gắn bởi motion.js mục 9): trượt lên 24px + rõ dần 0,7 s, phần tử trong lưới cách nhau 80 ms.
   b Lơ lửng nhẹ (.ahb-fl): 8 s, lệch pha nhau.  c Đường quy trình tự vẽ (.ahb-draw).
   d Dải logo đối tác chạy ngang ở hero trang chủ (48 s/vòng, dừng khi rê chuột).
   e Hover theo prototype (.lift): nhấc 4px + sáng 6% cho phần tử bấm được; phần tử chỉ để xem: nhấc 2px + quầng sáng nhẹ.
   Tất cả tắt khi máy bật giảm chuyển động.
   ============================================================ */
/* a */
.has-rv .ahb-rv { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 80ms); }
.has-rv .ahb-rv.is-in { opacity: 1; transform: none; }
/* b */
@keyframes ahb-fl { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: no-preference) { .ahb-fl { animation: ahb-fl 8s ease-in-out infinite; animation-delay: var(--fd, 0s); } }
/* c */
.ahb-draw { transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1) .2s; }
.ahb-draw.is-in { stroke-dashoffset: 0 !important; }
/* d */
.ahb-marquee-wrap { flex-direction: column; gap: 14px; width: 100%; min-width: 0; max-width: 100%; }
.ahb-herophoto--orbit .ahb-herophoto__partners.ahb-marquee-wrap { margin-top: 72px; }
.ahb-marquee-wrap .t-label { margin: 0 !important; flex-basis: auto !important; align-self: center; text-align: center; }
.ahb-marquee { position: relative; overflow: hidden; width: 100%; max-width: 1184px; min-width: 0; contain: inline-size;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ahb-marquee__track { display: flex; width: max-content; }
.ahb-marquee__set { display: flex; flex: none; gap: 14px; padding-right: 14px; }
.ahb-marquee__set img { display: block; width: 96px; height: 48px; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(0, 4, 71, .25);
  transition: translate .2s ease, filter .2s ease; }
.ahb-marquee__set img:hover { translate: 0 -4px; filter: brightness(1.06); }
@keyframes ahb-marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) { .ahb-marquee__track { animation: ahb-marq 48s linear infinite; will-change: transform; } .ahb-marquee:hover .ahb-marquee__track { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .ahb-marquee { -webkit-mask-image: none; mask-image: none; } .ahb-marquee__track { width: auto; justify-content: center; } .ahb-marquee__set { flex-wrap: wrap; justify-content: center; } .ahb-marquee__set[aria-hidden] { display: none; } }
@media (max-width: 760px) { .ahb-marquee__set img { width: 80px; height: 40px; } }
/* e */
.ahb-logo, .ahb-value, .ahb-step, .ahb-stat, .ahb-point, .ahb-chip, .ahb-odiag__node, .ahb-photoorb, .ahb-card, .ahb-feature, .ahb-mini, .ahb-faq details, .ahb-related a, .ahb-check, .ahb-checklist li {
  transition: translate .2s ease, filter .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.ahb-card:hover, a.ahb-feature:hover, a.ahb-mini:hover, .ahb-related a:hover, a.ahb-chip:hover, a.ahb-odiag__node:hover, .ahb-logo:hover { translate: 0 -4px; filter: brightness(1.06); }
.ahb-value:hover, .ahb-step:hover, .ahb-point:hover, .ahb-card:not(a):hover, .ahb-checklist li:hover, div.ahb-odiag__node:hover, span.ahb-odiag__node:hover { translate: 0 -2px; filter: brightness(1.05); }
.ahb-stat:hover, .ahb-photoorb:hover { filter: brightness(1.08) drop-shadow(0 0 18px rgba(92, 200, 255, .45)); }
.ahb-step:hover .ahb-step__num, .ahb-step:hover .ahb-orb, .ahb-point:hover .ahb-orb { box-shadow: 0 0 0 4px rgba(92, 200, 255, .18), 0 0 24px rgba(92, 200, 255, .55); }
.ahb-logo:hover { box-shadow: 0 10px 24px -8px rgba(0, 7, 109, .45); }
@media (prefers-reduced-motion: reduce) { .has-rv .ahb-rv { opacity: 1; transform: none; transition: none; } .ahb-logo, .ahb-value, .ahb-step, .ahb-stat, .ahb-point, .ahb-chip, .ahb-odiag__node, .ahb-card { transition: none; } }

/* ============================================================
   v2.8 — 03/11 (Quân chốt: ảnh nền theo prototype; sửa các chỗ lệch so với source HTML)
   1 Ảnh nền section theo source: ảnh màu gốc đã làm mờ sẵn trong file (assets/images/bg/), không lọc màu, không mask;
     lớp phủ: xanh đậm 94% ở mép trên/dưới, xám tối 52% ở giữa. Nền section gradient #000447 → #00076D như source.
     Thư nhà sáng lập: ảnh văn phòng rõ nét, opacity .9; bố cục 1 cột nên lớp phủ đậm ở giữa (chỗ chữ) thay cho phủ lệch phải của source.
   ============================================================ */
/* 1 */
.ahb-section--photo, .ahb-founder { background: linear-gradient(180deg, #000447 0%, #00076D 100%); }
.ahb-section__photo, .ahb-work3 .ahb-section__photo { -webkit-mask: none; mask: none; }
.ahb-section__photo img, .ahb-work3 .ahb-section__photo img { filter: none; opacity: 1; }
.ahb-section__photo::before, .ahb-work3 .ahb-section__photo::before { display: none; }
.ahb-section__photo::after, .ahb-work3 .ahb-section__photo::after { mix-blend-mode: normal;
  background: linear-gradient(180deg, rgba(0, 4, 71, .94) 0%, rgba(6, 10, 34, .52) 28%, rgba(6, 10, 34, .52) 72%, rgba(0, 4, 71, .94) 100%); }
.ahb-section__bg img { filter: none; opacity: .9; }
.ahb-section__bg::before { display: none; }
.ahb-section__bg::after { mix-blend-mode: normal;
  background: linear-gradient(180deg, rgba(0, 4, 71, .75) 0%, rgba(0, 4, 71, 0) 22%, rgba(0, 4, 71, 0) 78%, rgba(0, 4, 71, .75) 100%),
    radial-gradient(ellipse 62% 78% at 50% 50%, rgba(0, 4, 71, .9) 0%, rgba(6, 10, 34, .62) 62%, rgba(6, 10, 34, .42) 100%); }
/* 2 Hero trang con theo source: nền ảnh gradient trôi (hero-gradient.jpg như trang chủ), quả cầu 560px lệch phải,
     2 vòng chấm quay ngược chiều, elip nghiêng -18° nét đứt chạy + 3 vệ tinh, icon 120px phát sáng. Điện thoại ẩn quả cầu (như source). */
.ahb-pagehero.ahb-on-dark { background: #00076D; isolation: isolate; }
.ahb-pagehero.ahb-on-dark::before { display: block; content: ""; position: absolute; inset: 0; width: auto; aspect-ratio: auto; right: 0; top: 0; border-radius: 0; z-index: 0;
  background: url(../images/hero-gradient.jpg) center / cover no-repeat; border: 0; box-shadow: none; opacity: 1; transform-origin: 50% 50%; }
.ahb-orbhero2 { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; padding: 0; margin-inline: auto; pointer-events: none; display: block; }
.ahb-orbhero2::before { display: none; }
.ahb-orbhero2__orb { position: absolute; inset: 0; width: 100%; height: 100%; }
.ahb-orbhero2__rings, .ahb-orbhero2__tilt, .ahb-orbhero2__tilt svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ahb-orbhero2__ring { transform-origin: 280px 280px; transform-box: view-box; }
.ahb-orbhero2__tilt { transform: rotate(-18deg); }
.ahb-orbhero2__sat { position: absolute; left: 0; top: 0; offset-rotate: 0deg; }
.ahb-orbhero2__sat--1 { width: 10%; height: auto; }
.ahb-orbhero2__sat--2 { width: 6.25%; height: auto; offset-distance: 33%; }
.ahb-orbhero2__sat--3 { width: 4.5%; height: auto; offset-distance: 66%; }
.ahb-orbhero2__icon { position: absolute; left: 50%; top: 50%; width: 23.6%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; color: #fff; }
.ahb-orbhero2__glow { position: absolute; inset: -22.7%; border-radius: 50%; background: radial-gradient(circle, rgba(92, 200, 255, .45) 0%, rgba(92, 200, 255, 0) 70%); }
.ahb-orbhero2__icon svg { position: relative; width: 91%; height: auto; stroke-width: 2; filter: drop-shadow(0 0 14px rgba(92, 200, 255, .95)) drop-shadow(0 0 2px rgba(255, 255, 255, .6)); }
@media (min-width: 1024px) {
  .ahb-pagehero__grid:has(> .ahb-orbhero2) { grid-template-columns: minmax(0, 700px) 1fr; }
  .ahb-orbhero2 { width: 560px; max-width: none; justify-self: end; margin: -40px -88px -40px 0; }
  .ahb-pagehero:has(.ahb-orbhero2) { min-height: 624px; }
}
/* Khung luôn 560px (đường bay vệ tinh tính bằng px), cỡ nhỏ hơn thì thu bằng scale */
.ahb-orbhero2 { width: 560px; max-width: none; flex: none; }
@media (min-width: 768px) and (max-width: 1023px) { .ahb-pagehero__media.ahb-orbhero2 { scale: .75; margin: -70px auto; } }
@media (max-width: 767px) { .ahb-orbhero2 { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ahb-pagehero.ahb-on-dark::before { animation: ahb-hdrift 36s ease-in-out infinite alternate; }
  .ahb-orbhero2__orb { animation: ahb-hglow 7s ease-in-out infinite; transform-origin: 50% 50%; }
  .ahb-orbhero2__ring--in { animation: ahb-hspin 140s linear infinite reverse; }
  .ahb-orbhero2__ring--out { animation: ahb-hspin 90s linear infinite; }
  .ahb-orbhero2__ell { animation: ahb-hdash 40s linear infinite; }
  .ahb-orbhero2__sat { animation: ahb-htravel 24s linear infinite; }
  .ahb-orbhero2__sat--2 { animation-duration: 38s; animation-delay: -12s; }
  .ahb-orbhero2__sat--3 { animation-duration: 60s; animation-delay: -30s; }
  .ahb-orbhero2__glow { animation: ahb-pulse2 4s ease-in-out infinite; }
}
@keyframes ahb-pulse2 { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* 3 Tiêu đề section cấp 2 theo source: 32/40 SemiBold (trang dịch vụ, khối giải pháp, 4D, FAQ, Câu chuyện / Số liệu / Hệ sinh thái ở Về AHB).
     Tiêu đề lớn 48/56 ExtraBold giữ cho các section trang chủ, Giá trị cốt lõi và dải kêu gọi. */
.ahb-section .t-display.t-h2s, .t-display.t-h2s { font-size: 32px !important; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
@media (max-width: 767px) { .ahb-section .t-display.t-h2s, .t-display.t-h2s { font-size: 26px !important; line-height: 34px; } }
.ahb-pagehero .t-hero { text-wrap: balance; }
/* 4 Insights theo source: hero chỉ chữ, bài mới nhất là thẻ kính ngay trong hero; nửa trái thẻ là quả cầu 440px mang icon chủ đề. */
.ahb-pagehero--insights .ahb-pagehero__grid { grid-template-columns: 1fr; }
.ahb-pagehero--insights .ahb-feature { display: flex; flex-wrap: wrap; padding: 0; gap: 0; overflow: hidden; border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .04) 100%); border: 1px solid rgba(158, 216, 255, .3); }
.ahb-feature__orb { position: relative; flex: 1 1 420px; min-height: 360px; display: grid; place-items: center; overflow: hidden; }
.ahb-feature__orb .ahb-orbhero2 { display: block; width: 560px; max-width: none; position: absolute; left: 50%; top: 50%; translate: -50% -50%; scale: .786; margin: 0; }
.ahb-feature__orb .ahb-orbhero2__tilt { transform: rotate(-16deg); }
.ahb-pagehero--insights .ahb-feature__text { flex: 1 1 420px; padding: 40px; display: flex; flex-direction: column; gap: 14px; }
.ahb-pagehero--insights .ahb-feature__text .t-headline { font-size: 32px; line-height: 40px; font-weight: 600; }
.ahb-pagehero--insights .ahb-feature__text .t-label { color: #9ED8FF; }
.ahb-pagehero--insights .ahb-feature__text .t-body { color: #C9D6FF; }
@media (max-width: 767px) {
  .ahb-feature__orb { min-height: 280px; }
  .ahb-feature__orb .ahb-orbhero2 { scale: .56; }
  .ahb-feature__orb .ahb-orbhero2__tilt { display: none; }
  .ahb-pagehero--insights .ahb-feature__text { padding: 24px; }
  .ahb-pagehero--insights .ahb-feature__text .t-headline { font-size: 24px; line-height: 32px; }
}
/* 5 Mobile 320px: chip phạm vi dài làm cột khối giải pháp rộng hơn màn hình → cột co được, chip xuống dòng */
@media (max-width: 767px) {
  .ahb-solblock { grid-template-columns: minmax(0, 1fr); }
  .ahb-solblock__text { min-width: 0; }
  .ahb-solblock__scope .ahb-chip, .ahb-step__chips .ahb-chip { white-space: normal; max-width: 100%; height: auto; min-height: 32px; }
}
/* 6 Chuyển động còn thiếu so với source (03/11): node sơ đồ lơ lửng (transform, vì vị trí node dùng translate),
     chấm nhấp nháy (.ahb-ping) lần lượt trên icon node, quầng lõi "thở", đường quy trình chấm chạy sau khi vẽ xong,
     quả cầu dải Liên hệ lơ lửng + sáng nhịp, lõi sơ đồ Câu chuyện sáng nhịp. */
@keyframes ahb-flt { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ahb-flt-c { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 12px)); } }
@keyframes ahb-ping { 0%, 100% { opacity: 0; scale: .6; } 6% { opacity: 1; scale: 1.25; } 14% { opacity: 0; scale: .6; } }
@keyframes ahb-flowdash { to { stroke-dashoffset: -400; } }
.ahb-ping { position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(126, 216, 255, .6) 0%, rgba(126, 216, 255, 0) 70%); box-shadow: 0 0 0 2px rgba(158, 230, 255, .6), 0 0 24px rgba(92, 200, 255, .9); }
.ahb-iorbit__node .ahb-orb, .ahb-odiag--eco3 .ahb-odiag__node .ahb-orb { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .ahb-iorbit .ahb-iorbit__node { animation: ahb-flt 8s ease-in-out infinite !important; animation-delay: var(--fd, 0s) !important; }
  .ahb-odiag--eco3 .ahb-odiag__node { animation: ahb-flt-c 8s ease-in-out infinite !important; animation-delay: var(--fd, 0s) !important; }
  .ahb-ping { animation: ahb-ping 9s linear infinite; animation-delay: var(--pd, 0s); }
  .ahb-iorbit__glow, .ahb-odiag--eco3 .ahb-odiag__halo { animation: ahb-pulse2 4s ease-in-out infinite; }
  .ahb-odiag--story3 .ahb-odiag__core { animation: ahb-hglow 7s ease-in-out infinite; }
  .ahb-steps3__line path.ahb-flow { stroke-dasharray: 3 9 !important; animation: ahb-flowdash 40s linear infinite; }
  .ahb-section--brand > .ahb-orbit, .ahb-section--brand > .ahb-container > .ahb-orbit { animation: ahb-fl 8s ease-in-out infinite !important; }
}
@media (max-width: 767px) { .ahb-iorbit .ahb-iorbit__node, .ahb-odiag--eco3 .ahb-odiag__node { animation: none !important; } }
/* 7 Ra mắt (03/11): ô bẫy chống spam trong form (ẩn với người xem), thanh đồng ý cookie, trang bài viết, trang pháp lý */
.ahb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ahb-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 720px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 16px 20px; border-radius: 20px; background: rgba(0, 7, 109, .96); color: #fff; border: 1px solid rgba(158, 216, 255, .3); box-shadow: 0 18px 48px rgba(0, 4, 71, .45); }
.ahb-consent p { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.55; color: #C9D6FF; }
.ahb-consent a { color: #9ED8FF; }
.ahb-consent div { display: flex; gap: 8px; }
.ahb-consent .ahb-btn { min-height: 40px; padding-inline: 18px; }
.ahb-posthero .ahb-crumbs { margin-bottom: 8px; }
.ahb-posthero .ahb-eyebrow svg { width: 16px; height: 16px; margin-right: 6px; }
.ahb-posthero__title { font-size: clamp(32px, 3.6vw, 48px) !important; line-height: 1.17; }
.ahb-posthero__by { display: flex; align-items: center; gap: 12px; margin-top: 8px; color: #fff; }
.ahb-posthero__by b { display: block; font-weight: 600; }
.ahb-posthero__by small { display: block; font-size: 14px; color: #C9D6FF; }
.ahb-postbody { padding-top: 0; }
.ahb-postcover { margin: -56px 0 48px; border-radius: 28px; overflow: hidden; position: relative; z-index: 2; box-shadow: 0 24px 60px -24px rgba(0, 7, 109, .45); }
.ahb-postcover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ahb-post__prose { max-width: none; font-size: 17px; line-height: 30px; }
.ahb-post__prose h3 { font-size: 20px; }
.ahb-post__prose .ahb-tldr p.t-label { display: flex; gap: 8px; align-items: center; }
.ahb-post__prose .ahb-tldr ul { padding-left: 20px; }
.ahb-post__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 40px !important; }
.ahb-post__author { margin-top: 40px !important; }
.ahb-post__author p { margin: 4px 0 8px; font-size: 15px; line-height: 1.55; }
.ahb-toc--mobile { display: none; }
.ahb-toc--mobile summary { cursor: pointer; }
@media (max-width: 1023px) { .ahb-toc--side { display: none; } .ahb-toc--mobile { display: block; position: static; } .ahb-postcover { margin-top: 24px; } }
.ahb-legalhero { min-height: 0 !important; padding-block: 120px 64px; }
.ahb-legalhero .ahb-pagehero__text { max-width: 760px; }

/* ===== v2.9 — Quân 03/11: cụm nút nổi Facebook · LinkedIn · Zalo OA · Gọi ===== */
.ahb-float { gap: 10px; }
.ahb-float__btn { width: 48px; height: 48px; font-size: 12px; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease; }
.ahb-float__btn svg { width: 20px; height: 20px; }
.ahb-float__btn--facebook { background: #1877F2; color: #fff; box-shadow: 0 8px 24px rgba(0, 7, 109, .28); }
.ahb-float__btn--linkedin { background: #0A66C2; color: #fff; box-shadow: 0 8px 24px rgba(0, 7, 109, .28); }
.ahb-float__btn--zalo_oa { background: #0068FF; color: #fff; box-shadow: 0 8px 24px rgba(0, 7, 109, .28); letter-spacing: -.2px; }
.ahb-float__btn.is-off { filter: grayscale(1); opacity: .42; box-shadow: none; cursor: default; }
.ahb-float__btn.is-off:hover { transform: none; box-shadow: none; }
@media (max-width: 767px) {
  .ahb-float { gap: 8px; right: 12px; }
  .ahb-float__btn { width: 42px; height: 42px; }
  .ahb-float__btn svg { width: 18px; height: 18px; }
  .ahb-float__btn--call::after { width: 42px; height: 42px; }
}

/* ===== v2.10 — Quân 03/11 (R3): màu phụ đúng mã trong source HTML prototype ===== */
/* Breadcrumb trên hero tối: chữ #BFD6FF, dấu "/" #7F9BE0 */
.ahb-section--dark .ahb-crumbs, .ahb-on-dark .ahb-crumbs, .ahb-section--dark .ahb-crumbs a, .ahb-on-dark .ahb-crumbs a { color: #BFD6FF; }
.ahb-section--dark .ahb-crumbs li + li::before, .ahb-on-dark .ahb-crumbs li + li::before { color: #7F9BE0; opacity: 1; }
/* Chữ nhấn trong tiêu đề trên nền tối: chuyển màu #A8EBFF → trắng */
.ahb-section--dark .ahb-accent, .ahb-section--brand .ahb-accent, .ahb-on-dark .ahb-accent { background: linear-gradient(90deg, #A8EBFF 0%, #FFFFFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Đoạn dẫn ở hero trang con: #DCE8FF; đoạn dẫn ở dải kêu gọi cuối trang: #E6EEFF */
.ahb-on-dark .t-lead, .ahb-section--dark .ahb-pagehero .t-lead { color: #DCE8FF; }
.ahb-section--brand .t-lead, .ahb-section--brand .t-body, .ahb-section--brand .ahb-muted { color: #E6EEFF; }
/* Dòng cuối footer: #AFC0EE */
.ahb-footer__bottom, .ahb-footer__bottom a { color: #AFC0EE; }
/* Chữ gợi ý trong ô nhập trên nền sáng: #8FA3D9 */
.ahb-form--light .ahb-field input::placeholder, .ahb-form--light .ahb-field textarea::placeholder { color: #8FA3D9; opacity: 1; }
/* Nút chia sẻ bài viết: viền #B7C6EE, chữ Axis Blue */
.ahb-share .ahb-chip { background: #FFFFFF; border: 1px solid #B7C6EE; color: #0030BF; font-weight: 600; }
/* Điện thoại: ẩn nút chưa có link để không che nội dung (Claude đề xuất 03/11, chờ Quân xác nhận ở doc Feedback R8) */
@media (max-width: 767px) { .ahb-float__btn.is-off { display: none; } }

/* ===== v2.11 — Quân 03/11 chiều (doc Feedback R1): ảnh nền quay lại Phương án 1 của trang thử 24/10 =====
   Ảnh rõ nét, giữ màu gốc, phủ một lớp xám đều 72% (không phủ xanh, không làm mờ). Thay cho lớp phủ v2.8.
   Khối 4D (Giải pháp + 3 trang tổng) chỉ có ảnh mờ từ prototype nên vẫn dùng ảnh đó, phủ cùng lớp xám. */
.ahb-section--photo, .ahb-founder { background: #1b1d22; }
.ahb-section__photo::after, .ahb-work3 .ahb-section__photo::after { mix-blend-mode: normal; background: rgba(28, 30, 36, .72); }
.ahb-section__bg img { filter: none; opacity: 1; }
.ahb-section__bg::after { mix-blend-mode: normal; background: rgba(28, 30, 36, .72); }

/* ===== v2.12 — Quân 03/11 chiều (R8): gom nút nổi thành 1 nút, bấm thì bung ra ===== */
.ahb-float__list { display: grid; gap: 10px; justify-items: end; }
.ahb-float__list[hidden] { display: none; }
.ahb-float.is-open .ahb-float__list > * { animation: ahb-float-in .18s ease-out both; }
@keyframes ahb-float-in { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.ahb-float__btn.is-off { opacity: .42; }
.ahb-float__toggle { border: 0; cursor: pointer; background: var(--axis-blue); color: var(--white); box-shadow: 0 8px 24px rgba(0, 7, 109, .32); position: relative; }
.ahb-float__toggle .ahb-float__ico-close { display: none; }
.ahb-float.is-open .ahb-float__toggle { background: var(--gravity-blue); }
.ahb-float.is-open .ahb-float__ico-open { display: none; }
.ahb-float.is-open .ahb-float__ico-close { display: inline-flex; }
.ahb-float__toggle span { display: inline-flex; }
.ahb-float__toggle:focus-visible { outline: 2px solid var(--focus-on-light); outline-offset: 3px; }
@media (max-width: 767px) { .ahb-float__btn.is-off { display: grid; } }
@media (prefers-reduced-motion: reduce) { .ahb-float.is-open .ahb-float__list > * { animation: none; } }