/* ==========================================================================
   main.css — thành phần giao diện của landing GO4AI-IT02-SALES.
   Token + nền tảng nằm ở style.css. File này chỉ chứa thành phần bổ sung.

   ⛔ Không hard-code màu / khoảng cách / cỡ chữ. Luôn dùng biến từ style.css.
   ⛔ Không @import từ CDN. Mọi asset nằm trong theme.
   ========================================================================== */

/* --- Motion: hero concept A (headline cascade), MOTION.md §6 --------------
   Line 1 → line 2 (90ms sau) → copy + media + CTA cùng lúc (500ms). Chỉ chạy
   khi html có class `motion-ready` (xem style.css §10 + assets/js/main.js).
   Tổng thời lượng 500ms + 600ms = 1100ms, trong ngân sách duration-hero ≤1200ms.
   ------------------------------------------------------------------------- */

html.motion-ready .hero-cascade .hero-split__title span,
html.motion-ready .hero-cascade .hero-split__copy,
html.motion-ready .hero-cascade .hero-split__media,
html.motion-ready .hero-cascade .btn-row {
  opacity: 0;
  transform: translateY(var(--dist-md));
  transition: opacity var(--dur-entrance) var(--ease), transform var(--dur-entrance) var(--ease);
}

html.motion-ready .hero-cascade.is-visible .hero-split__title span,
html.motion-ready .hero-cascade.is-visible .hero-split__copy,
html.motion-ready .hero-cascade.is-visible .hero-split__media,
html.motion-ready .hero-cascade.is-visible .btn-row {
  opacity: 1;
  transform: none;
}

html.motion-ready .hero-cascade.is-visible .hero-split__title span:first-child {
  transition-delay: 0ms;
}

html.motion-ready .hero-cascade.is-visible .hero-split__title span:last-child {
  transition-delay: 90ms;
}

html.motion-ready .hero-cascade.is-visible .hero-split__copy,
html.motion-ready .hero-cascade.is-visible .hero-split__media,
html.motion-ready .hero-cascade.is-visible .btn-row {
  transition-delay: 500ms;
}

/* --- Motion: đổi màu nền khi section kể chuyện cuộn tới, MOTION.md §7 ------
   Chỉ còn 1 lần trên trang (giới hạn tối đa của MOTION.md là 2): section-dark. Chữ trong section này luôn là màu sáng nên khoảng
   chuyển 400ms không ảnh hưởng độ đọc — nội dung chữ tự nó cũng đang mờ dần
   vào lúc này (stagger/reveal riêng, chạy chậm hơn). Không JS => giữ màu thật
   luôn (an toàn, không phụ thuộc motion). */

html.motion-ready .bg-shift {
  background: var(--paper-50);
  transition: background-color var(--dur-section) var(--ease);
}

html.motion-ready .section-dark.bg-shift.is-visible {
  background: var(--ink-900);
}

/* --- Header: nav-bar cố định (fixed), pill nav + 2 CTA + avatar ------------ */

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background: var(--paper-50);
}

.nav-bar__inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.nav-bar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: 0 0 auto;
}

.nav-bar__brand:hover {
  text-decoration: none;
}

.nav-bar__mark {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--ink-900);
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: center;
}

.nav-bar__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 4px;
}

.nav-bar__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-300);
  background: var(--paper-0);
  border: 1px solid var(--paper-100);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-bar__links {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 40px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--paper-0);
  border: 1px solid var(--paper-100);
}

.nav-bar__links a {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--ink-900);
  white-space: nowrap;
}

.nav-bar__links a:hover,
.nav-bar__links a:focus-visible {
  color: var(--ink-500);
  text-decoration: none;
}

.nav-bar__links a.is-active {
  color: var(--accent-text);
}

.nav-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

.nav-bar__cta {
  min-height: 40px;
  padding: 0.55rem 1.25rem;
  font-size: var(--fs-small);
}

.nav-bar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
}

@media (max-width: 991px) {
  .nav-bar__links,
  .nav-bar__badge,
  .nav-bar__cta.btn--secondary {
    display: none;
  }
}

@media (max-width: 480px) {
  .nav-bar__cta {
    padding: 0.5rem 0.9rem;
  }
}

/* Bù chiều cao nav-bar fixed để nội dung không bị che. */
#main {
  padding-top: 64px;
}

/* --- Footer: thanh chân trang sáng ----------------------------------------- */

.site-footer {
  padding: var(--sp-4) 0;
  background: var(--paper-0);
  border-top: 1px solid var(--line);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
}

.site-footer p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-500);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.6rem;
}

.site-footer a {
  color: var(--ink-500);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}

.site-footer a:hover {
  color: var(--evidence-deep);
}

/* --- Section titles -------------------------------------------------------- */

.section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  color: var(--ink-900);
  letter-spacing: -0.03em;
  line-height: var(--lh-tight);
  max-width: 51rem;
  margin: 0 0 var(--sp-5);
}

.section-title--inverse {
  color: var(--paper-0);
}

.section-title__muted {
  display: block;
  color: var(--ink-500);
}

.section__eyebrow--inverse {
  color: var(--line);
}

/* --- Chips (pill nhỏ dùng làm nhãn) ---------------------------------------- */

.chip {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-2);
}

.chip--coral {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.chip--mint {
  background: var(--evidence-soft);
  color: var(--ink-900);
}

/* --- Section 2: hành vi cũ / mới --------------------------------------------
   Chia 2 nửa: .bs-old (băng chuyền 4 trạm) và .bs-new (quả cầu + input + 3 thẻ).
   CSS của .bs-* nằm ở cuối file, trong khối "SECTION 2 — HAI NỬA".
   ------------------------------------------------------------------------- */

.behavior-shift {
  position: relative;
}

.behavior-shift__head {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.behavior-shift__icon {
  display: inline-flex;
  color: var(--ink-300);
}

.behavior-shift__icon--new {
  color: var(--evidence);
}

.flow-node {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
  font-weight: var(--fw-medium);
  border: 1px solid var(--line);
  background: var(--paper-0);
  color: var(--ink-900);
}

.flow-node--new {
  border-color: var(--evidence);
  background: var(--evidence-soft);
}

.closing-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3);
  max-width: 68rem;
}

.closing-notes__item {
  --rule: var(--paper-100);
  padding-top: var(--sp-2);
  font-size: 1.125rem;
  color: var(--ink-900);
  margin: 0;
}

/* --- Section 3: index list (không dùng card màu) --------------------------- */

.funnel-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3);
  align-items: end;
  margin-bottom: var(--sp-5);
}

.funnel-head .section-title {
  margin-bottom: 0;
}

.section__eyebrow--right {
  margin: 0;
}

.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4) var(--sp-5);
}

.index-list__item {
  --rule: var(--line);
  padding-top: var(--sp-2);
}

.index-list__index {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--ink-300);
  margin-bottom: var(--sp-1);
}

.index-list__title {
  margin: 0 0 0.4rem;
  font-size: var(--fs-h3);
}

.index-list__body {
  margin: 0;
  color: var(--ink-500);
  max-width: 30rem;
}

/* --- Section 4: nền tối, mất bối cảnh -------------------------------------- */

.section-dark {
  background: var(--ink-900);
  padding: var(--sp-7) 0;
  color: var(--paper-0);
}

.context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-5);
  align-items: start;
  margin-top: var(--sp-5);
}

.context-grid__example {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--paper-0);
  margin: 0.5rem 0 var(--sp-3);
}

.context-grid__intro {
  color: var(--line);
  margin-bottom: var(--sp-2);
}

.context-grid__closing {
  color: #37a88a;
  font-weight: var(--fw-medium);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
}

.context-grid__formula-label {
  color: var(--paper-0);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-2);
}

/* Cột trái section 4: "con số vỡ ra". Mặc định (không JS / màn hình nhỏ / reduced-motion)
   = lưới icon + câu nguyên nhân, đọc đủ. Khi animations.js bật .cl-pinned (≥1240×620)
   cả .cl-stage được giữ bằng position: sticky trong .cl-pin (cùng cách với section 2 —
   KHÔNG dùng ScrollTrigger pin): con số giữa cảnh vỡ thành 6 mảnh (JS nhân bản
   .cl-sh__glyph, mỗi bản cắt bằng clip-path), mỗi mảnh bay về một nguyên nhân, rồi các
   nguyên nhân gom lại thành một con số mờ. Không tổ tiên nào của .cl-stage được đặt
   overflow hidden/auto/clip (xem .section-dark.cl-pinned bên dưới). */

.cl-pin {
  --cl-nav: 76px;        /* mép dưới header cố định + khoảng thở */
  --cl-stage: clamp(520px, calc(100vh - 200px), 720px);
}

.admin-bar .cl-pin { --cl-nav: 108px; }

@media (max-width: 782px) {
  .admin-bar .cl-pin { --cl-nav: 122px; }
}

.cl-pin__run,
.cl-sh__layer { display: none; }

.cl-sh { position: relative; }

.cl-sh__items {
  list-style: none;
  margin: var(--sp-2) 0 var(--sp-3);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-3) var(--sp-2);
}

.cl-sh__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--paper-0);
}

.cl-sh__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.cl-sh__icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cl-sh__icon .cl-ic-hot { stroke: var(--accent); }

.cl-sh__text { line-height: 1.3; }

.cl-sh__glyph {
  display: block;
  color: var(--accent);
  font-size: calc(var(--fs-display) * 1.4);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
}

/* --- Bản ghim --- */

.section-dark.cl-pinned { overflow: visible; }

.cl-pinned .cl-stage {
  position: sticky;
  /* căn giữa theo chiều dọc khi màn hình cao, nhưng không bao giờ chui dưới header */
  top: max(var(--cl-nav), calc((100vh - var(--cl-stage)) / 2));
  height: var(--cl-stage);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}

.cl-pinned .cl-pin__run {
  display: block;
  height: calc(100vh * 1.7);
}

.cl-pinned .cl-sh {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

/* Sân khấu: 6 nguyên nhân xếp 3 cột × 2 hàng dính mép trên/dưới, con số nằm ở khoảng trống giữa. */
.cl-pinned .cl-sh__arena {
  position: relative;
  min-height: 0;
}

.cl-pinned .cl-sh__items {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  align-content: space-between;
  gap: 0 var(--sp-2);
}

.cl-pinned .cl-sh__item {
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
  font-size: var(--fs-caption);
}

/* Mỗi lớp là một ô phủ kín sân khấu, căn giữa con số — GSAP dịch chuyển tương đối so với tâm. */
.cl-pinned .cl-sh__layer {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.cl-pinned .cl-sh__glyph { will-change: transform; }

.cl-pinned .cl-sh__after {
  align-self: end;
  max-width: 34rem;
  margin: var(--sp-2) auto 0;
  text-align: center;
}

.cl-pinned .cl-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cl-pinned .cl-side .cl-art {
  aspect-ratio: auto;
  height: max(240px, calc(var(--cl-stage) - 290px));
}

.cl-pinned .cl-side .context-grid__closing { margin-top: auto; }

/* Carousel hình minh hoạ (cột phải section 4). Không JS: lưới thẻ tĩnh. JS
   thêm .cl-enhanced → các slide chồng lên nhau, đổi slide bằng class .is-active. */

.cl-carousel {
  --cl-ok: #37a88a;      /* cùng màu xanh với .context-grid__closing */
  --cl-dur: 5s;          /* thời gian mỗi slide (thanh tiến độ chạy hết thì chuyển) */
  margin-bottom: var(--sp-3);
}

.cl-slides {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3) var(--sp-2);
}

.cl-art {
  aspect-ratio: 8 / 5;
  padding: var(--sp-3);
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 65%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
}

.cl-art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cl-faint { stroke: rgba(255, 255, 255, 0.22); }
.cl-cover { fill: var(--ink-900); }
.cl-solid { fill: rgba(255, 255, 255, 0.3); stroke: none; }
.cl-solid--hi { fill: rgba(255, 255, 255, 0.62); }
.cl-hot { stroke: var(--accent); }
.cl-tint { fill: rgba(206, 60, 43, 0.14); fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.cl-hot-fill { fill: var(--accent); stroke: none; }
.cl-ok-fill { fill: var(--cl-ok); stroke: none; }
.cl-check { stroke: var(--paper-0); stroke-width: 3; }
.cl-dash { stroke-dasharray: 5 6; }
.cl-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }

.cl-pop,
.cl-up { transform-box: fill-box; transform-origin: 50% 50%; }
.cl-rise { transform-box: fill-box; transform-origin: 50% 100%; }
.cl-grow { transform-box: fill-box; transform-origin: 0 50%; }

.cl-slide__caption {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  color: var(--paper-0);
  font-weight: var(--fw-medium);
}

.cl-slide__n {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--ink-300);
}

/* --- Bản có JS: một slide hiện, các slide khác chồng phía sau ---------------- */

.cl-enhanced .cl-slides {
  display: grid;
  overflow: clip;          /* slide chờ nằm lệch 28px sang bên — không được gây cuộn ngang */
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}

.cl-enhanced .cl-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateX(28px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), visibility 0s linear 0.5s;
}

.cl-enhanced .cl-slide.is-past { transform: translateX(-28px); }

.cl-enhanced .cl-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.cl-enhanced .cl-slide__caption { font-size: var(--fs-h3); }

/* Thanh tiến độ = chỉ mục. Mỗi đoạn là một nút bấm; đoạn đang chạy tô coral. */
.cl-dots {
  display: flex;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}

.cl-dot {
  position: relative;
  flex: 1;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.cl-dot::before,
.cl-dot__fill {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
}

.cl-dot::before {
  background: rgba(255, 255, 255, 0.18);
  transition: background var(--dur) var(--ease);
}

.cl-dot:hover::before { background: rgba(255, 255, 255, 0.36); }

.cl-dot:focus-visible {
  outline: 2px solid var(--paper-0);
  outline-offset: 2px;
  border-radius: 4px;
}

.cl-dot__fill {
  background: rgba(255, 255, 255, 0.5);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.cl-dot.is-done .cl-dot__fill { transform: scaleX(1); }

.cl-dot.is-active .cl-dot__fill {
  background: var(--accent);
  animation: cl-fill var(--cl-dur) linear forwards;
}

/* Luôn tự chạy. Chỉ tạm dừng khi chưa cuộn tới hoặc đang focus bàn phím. */
.cl-carousel:not(.is-inview) .cl-dot__fill,
.cl-carousel:has(.cl-dot:focus-visible) .cl-dot__fill { animation-play-state: paused; }

@keyframes cl-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Hoạt hình bên trong hình: chỉ chạy khi slide đang hiện và carousel đang trong
   màn hình. Trạng thái ẩn ban đầu nằm trong media query để reduced-motion luôn
   thấy hình hoàn chỉnh. */
@media (prefers-reduced-motion: no-preference) {
  .cl-enhanced .cl-a { opacity: 0; }

  .cl-enhanced.is-inview .cl-slide.is-active .cl-a {
    animation: var(--cl-kf, cl-up) var(--cl-t, 0.6s) var(--ease) both;
    animation-delay: var(--d, 0s);
  }

  .cl-draw { --cl-kf: cl-draw; --cl-t: 0.9s; }
  .cl-rise { --cl-kf: cl-rise; --cl-t: 0.8s; }
  .cl-grow { --cl-kf: cl-grow; --cl-t: 0.7s; }
  .cl-pop { --cl-kf: cl-pop; --cl-t: 0.55s; }
}

/* Giảm chuyển động: slide đổi tức thì (style.css §10 ép mọi transition/animation về
   0.01ms), nhưng vẫn tự chạy. Thanh tiến độ là "đồng hồ" của carousel nên phải trả lại
   thời lượng thật, nếu không cl-fill kết thúc ngay và slide nhảy liên tục. */
@media (prefers-reduced-motion: reduce) {
  .cl-enhanced .cl-slide,
  .cl-enhanced .cl-slide.is-past { transform: none; }

  .cl-dot.is-active .cl-dot__fill { animation-duration: var(--cl-dur) !important; }
}

@keyframes cl-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes cl-pop {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: none; }
}

@keyframes cl-rise {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: none; }
}

@keyframes cl-grow {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: none; }
}

@keyframes cl-draw {
  0% { opacity: 0; stroke-dashoffset: 1; }
  4% { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}

/* --- Section 5: timeline ngang --------------------------------------------- */

.ai-timeline {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4) var(--sp-2);
}

.ai-timeline__step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.ai-timeline__marker {
  position: relative;
  height: 9px;
}

.ai-timeline__marker::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

.ai-timeline__marker::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--evidence-deep);
}

.ai-timeline__label {
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  color: var(--ink-900);
}

/* --- Motion hook: --on (0→1) do animations.js tween khi cuộn qua từng bước.
   Không có JS → --on mặc định 1 → hiển thị đúng như bản static. ------------- */

.ai-timeline__step {
  position: relative;
}

.ai-timeline__step::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--evidence);
  transform: scaleX(var(--on, 1));
  transform-origin: 0 50%;
}

/* Vạch xám nền mờ đi khi bước sáng, để không đè lên thanh xanh */
.ai-timeline__marker::before {
  background: color-mix(in srgb, var(--line) calc((1 - var(--on, 1)) * 100%), transparent);
}

.ai-timeline__marker::after {
  transform: scale(calc(0.7 + 0.3 * var(--on, 1)));
  background: color-mix(in srgb, var(--evidence-deep) calc(var(--on, 1) * 100%), var(--line));
}

.ai-timeline__step .index-list__index {
  color: color-mix(in srgb, var(--ink-300) calc(var(--on, 1) * 100%), var(--line));
}

.ai-timeline__label {
  color: color-mix(in srgb, var(--ink-900) calc(var(--on, 1) * 100%), var(--ink-300));
}

/* --- Section 6 (Showcase) đã gỡ khỏi trang — bản đầy đủ: variants/showcase-section-removed/ ---- */

/* Khung media placeholder (hero vẫn dùng) */
.media-placeholder-frame {
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-3);
  color: var(--ink-300);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
}

/* --- Section 7: AI không thay Sales ----------------------------------------- */

.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.compare-grid__col {
  --rule: var(--line);
  padding-top: var(--sp-3);
}

.compare-grid__label {
  font-weight: var(--fw-medium);
  color: var(--ink-900);
  margin-bottom: var(--sp-2);
}

/* Mỗi ý = icon động + chữ; một chấm "gậy tiếp sức" chạy nối các icon theo thứ tự (AI → Con người).
   Bố cục: ≥1240px xếp NGANG (2 nửa, icon trên chữ, ray chạy ngang qua tâm các icon); nhỏ hơn thì
   xếp DỌC 1 cột (ray chạy dọc). Vị trí ray/chấm do animations.js đo từ .ha-node nên đúng cả hai kiểu. */
.human-ai .compare-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

/* Nhãn phủ nền trắng để đường ray (chạy dọc ở bố cục 1 cột) không xuyên qua chữ. */
.human-ai .compare-grid__label {
  display: inline-block;
  padding-right: var(--sp-1);
  background: var(--paper-0);
}

.ha-track {
  position: relative;
}

/* Đường ray (dưới icon) và chấm chạy (trên icon): chỉ hiện khi JS đã tiếp quản (.ha-enhanced). */
.ha-rail,
.ha-baton {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ha-enhanced .ha-rail,
.ha-enhanced .ha-baton {
  display: block;
}

.ha-rail {
  z-index: 0;
}

.ha-baton {
  z-index: 2;
}

.ha-rail path {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

.ha-rail__base {
  stroke: var(--paper-100);
  stroke-width: 2;
}

.ha-rail__ai {
  stroke: var(--evidence);
  stroke-width: 3;
}

.ha-rail__hu {
  stroke: var(--trust);
  stroke-width: 3;
}

.ha-baton__dot,
.ha-baton__glow {
  fill: var(--evidence);
  transition: fill var(--dur) var(--ease);
}

.ha-baton__glow {
  opacity: 0.22;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ha-glow 1.6s ease-in-out infinite var(--ha-play, paused);
}

.ha-baton.is-human .ha-baton__dot,
.ha-baton.is-human .ha-baton__glow {
  fill: var(--trust);
}

.human-ai.ha-inview {
  --ha-play: running;
}

/* Danh sách ý. Mặc định (1 cột): icon bên trái, chữ bên phải. */
.ha-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ha-list--ai {
  --ha-lit: var(--evidence-deep);
}

.ha-list--human {
  --ha-lit: var(--trust);
}

/* Mỗi ý (.ha-item) sáng khi chấm chạy tới: --on 0→1 do animations.js đặt; mặc định 1 = sáng sẵn.
   Icon dùng currentColor nên đổi màu cùng chữ. */
.ha-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ha-lit);
}

@supports (color: color-mix(in srgb, red, blue)) {
  .ha-item {
    color: color-mix(in srgb, var(--ha-lit) calc(var(--on, 1) * 100%), var(--ink-300));
  }
}

.ha-node {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: var(--paper-0);   /* che đường ray phía sau icon */
}

.ha-icon {
  display: block;
  width: 52px;
  height: 52px;
  overflow: visible;
}

.ha-item__text {
  font-size: var(--fs-h3);
  line-height: 1.3;
}

@media (min-width: 1240px) {
  .human-ai .compare-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }

  .ha-list {
    display: grid;
    grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
    column-gap: var(--sp-1);
    align-items: start;
  }

  .ha-item {
    flex-direction: column;
    gap: var(--sp-1);
    text-align: center;
  }

  .ha-node {
    width: 96px;
    height: 96px;
  }

  .ha-icon {
    width: 72px;
    height: 72px;
  }

  .ha-item__text {
    font-size: 1.0625rem;
  }
}

/* --- Chuyển động của icon ------------------------------------------------------------------
   Chỉ chạy khi JS đã tiếp quản (.ha-enhanced) VÀ ý đã được chấm chạy tới (.is-lit); chỉ chạy khi
   khối đang trong khung nhìn (--ha-play). Không JS / reduced-motion: icon đứng yên, hiện đủ.
   Chỉ dùng transform / opacity / stroke-dashoffset. */
.ha-flow {
  stroke-dasharray: 3 7;
}

.ha-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.ha-out,
.ha-spark,
.ha-end,
.ha-zoom,
.ha-lens,
.ha-card,
.ha-snap {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.ha-bell {
  transform-origin: 32px 10px;
}

.ha-beam {
  transform-origin: 32px 20px;
}

/* Chưa tới lượt: nét vẽ dần & điểm chốt chưa hiện. */
.ha-enhanced .ha-item:not(.is-lit) .ha-draw {
  stroke-dashoffset: 1;
}

.ha-enhanced .ha-item:not(.is-lit) .ha-end {
  opacity: 0;
}

.ha-enhanced .ha-item.is-lit .ha-flow {
  animation: ha-flow 1.1s linear infinite var(--ha-play, paused);
}

.ha-enhanced .ha-item.is-lit .ha-out {
  animation: ha-pulse 1.6s ease-in-out infinite var(--ha-play, paused);
}

.ha-enhanced .ha-item.is-lit .ha-lens {
  animation: ha-sweep 3s ease-in-out infinite var(--ha-play, paused);
}

.ha-enhanced .ha-item.is-lit .ha-snap {
  animation: ha-snap 4s ease-in-out infinite var(--ha-play, paused);
  animation-delay: var(--d, 0ms);
}

.ha-enhanced .ha-item.is-lit .ha-card {
  animation: ha-slide 3s ease-in-out infinite var(--ha-play, paused);
}

.ha-enhanced .ha-item.is-lit .ha-spark {
  animation: ha-pulse 1.6s ease-in-out infinite var(--ha-play, paused);
}

.ha-enhanced .ha-item.is-lit .ha-bell {
  animation: ha-ring 3.2s ease-in-out infinite var(--ha-play, paused);
}

.ha-enhanced .ha-item.is-lit .ha-draw {
  animation: ha-drawloop 3s ease-in-out infinite var(--ha-play, paused);
}

.ha-enhanced .ha-item.is-lit .ha-end {
  animation: ha-popin 3s ease-in-out infinite var(--ha-play, paused);
}

.ha-enhanced .ha-item.is-lit .ha-zoom {
  animation: ha-zoom 2.4s ease-out infinite var(--ha-play, paused);
}

.ha-enhanced .ha-item.is-lit .ha-zoom--2 {
  animation-delay: 0.8s;
}

.ha-enhanced .ha-item.is-lit .ha-beam {
  animation: ha-beam 2.6s ease-in-out infinite var(--ha-play, paused);
}

/* Ý cuối cùng ("quyết định cuối cùng") được chốt: vòng sóng lan quanh icon. */
.ha-item.is-final .ha-node::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid var(--trust);
  border-radius: 50%;
  pointer-events: none;
  animation: ha-burst 1.8s ease-out infinite var(--ha-play, paused);
}

@keyframes ha-flow {
  to { stroke-dashoffset: -20; }
}

@keyframes ha-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

@keyframes ha-sweep {
  0%, 100% { transform: translate(-12px, -10px); }
  50% { transform: translate(1px, 3px); }
}

@keyframes ha-snap {
  0% { transform: translate(var(--dx), var(--dy)); }
  30%, 72% { transform: translate(0, 0); }
  100% { transform: translate(var(--dx), var(--dy)); }
}

@keyframes ha-slide {
  0%, 100% { transform: translate(0, 0); }
  45%, 62% { transform: translate(8px, -10px); }
}

@keyframes ha-ring {
  0% { transform: rotate(0); }
  6% { transform: rotate(13deg); }
  12% { transform: rotate(-11deg); }
  18% { transform: rotate(8deg); }
  24% { transform: rotate(-5deg); }
  30%, 100% { transform: rotate(0); }
}

@keyframes ha-drawloop {
  0% { stroke-dashoffset: 1; }
  35%, 85% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 1; }
}

@keyframes ha-popin {
  0%, 30% { transform: scale(0); }
  45%, 85% { transform: scale(1); }
  100% { transform: scale(0); }
}

@keyframes ha-zoom {
  0% { transform: scale(1.35); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}

@keyframes ha-beam {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(9deg); }
}

@keyframes ha-glow {
  0%, 100% { transform: scale(1); opacity: 0.22; }
  50% { transform: scale(1.25); opacity: 0.1; }
}

@keyframes ha-burst {
  0% { transform: scale(0.7); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Ghim bằng CSS sticky (không dùng ScrollTrigger pin — xem CLAUDE.md, mục section 2): JS chỉ bật
   .ha-pinned khi viewport đủ rộng (bố cục ngang) + đủ cao. Quãng cuộn = .ha-pin__run. */
.ha-pinned .ha-stage {
  position: sticky;
  top: max(76px, calc(50vh - 230px));
}

.ha-pinned .ha-pin__run {
  height: 110vh;
}

.closing-statement {
  max-width: 40rem;
  margin: var(--sp-5) auto 0;
  text-align: center;
}

.closing-statement__line {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  color: var(--ink-900);
  margin: 0 0 0.3rem;
}

.closing-statement__line--accent {
  color: var(--evidence);
}

/* --- Section 8: Đăng ký (tab Online/Offline + form lead) --------------------
   Tab chỉ hiện khi JS thêm .is-tabs (main.js). Không JS: hai panel xếp chồng, đọc đủ.
   Form theo hợp đồng INTEGRATION.md (.go4ai-lead-form) — style nền ở style.css §5, ở đây chỉ phủ lên. */

.register {
  scroll-margin-top: var(--sp-6);
}

.register__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  max-width: 48rem;
  margin: 0 auto var(--sp-5);
  text-align: center;
}

.register__head .section-title {
  margin-bottom: 0;
}

.register-tabs {
  display: none;
}

.register.is-tabs .register-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-1);
  max-width: 44rem;
  margin: 0 auto var(--sp-5);
  padding: 6px;
  background: var(--paper-0);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.register-tab {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: var(--sp-2);
  font: inherit;
  color: var(--ink-500);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 18px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.register-tab:hover {
  background: var(--paper-50);
}

.register-tab:focus-visible {
  outline: 2px solid var(--evidence-deep);
  outline-offset: 2px;
}

.register-tab.is-active {
  background: var(--paper-50);
  border-color: var(--line);
  box-shadow: var(--shadow-1);
}

.register-tab__icon {
  display: inline-flex;
  color: var(--ink-500);
  transition: color var(--dur) var(--ease);
}

.register-tab.is-active .register-tab__icon {
  color: var(--evidence-deep);
}

.register-tab__title {
  font-weight: var(--fw-medium);
  color: var(--ink-900);
}

.register-tab__sub {
  font-size: var(--fs-caption);
  color: var(--ink-500);
}

.register-stage {
  max-width: 68rem;
  margin: 0 auto;
}

.register-panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--sp-5);
  align-items: start;
}

.register-panel + .register-panel {
  margin-top: var(--sp-6);
}

.register.is-tabs .register-panel + .register-panel {
  margin-top: 0;
}

.register.is-tabs .register-panel:not(.is-active) {
  display: none;
}

.register-info {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding-top: var(--sp-2);
}

/* Form Offline cao hơn cột thông tin: cột trái dính theo khi cuộn (không tổ tiên nào overflow hidden). */
@media (min-width: 901px) {
  .register-info {
    position: sticky;
    top: calc(var(--sp-6) + var(--sp-2));
  }
}

.register-info__heading {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}

.register-info__intro {
  margin: 0;
  color: var(--ink-500);
}

.register-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.register-checklist li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink-900);
}

.register-checklist li::before,
.register-checklist li::after {
  content: "";
  position: absolute;
}

.register-checklist li::before {
  left: 0;
  top: 0.1em;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--evidence-soft);
}

.register-checklist li::after {
  left: 0.44rem;
  top: calc(0.1em + 0.25rem);
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--evidence-deep);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.register-cross {
  display: grid;
  gap: 0.35rem;
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--paper-0);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.register-cross p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-500);
}

.register-cross a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  justify-self: start;
  font-weight: var(--fw-medium);
  color: var(--evidence-deep);
}

.register-cross a svg {
  transition: transform var(--dur) var(--ease);
}

.register-cross a:hover svg {
  transform: translateX(3px);
}

/* Thẻ form */
.register-form {
  max-width: none;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--paper-0);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.register-form__chip {
  justify-self: start;
  padding: 0.2rem 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--evidence-deep);
  background: var(--evidence-soft);
  border-radius: var(--radius-pill);
}

.register-form__title {
  margin: calc(var(--sp-1) * -1) 0 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}

.register-group {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.register-group__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin-bottom: var(--sp-1);
  padding: 0 0 0.6rem;
  font-weight: var(--fw-medium);
  color: var(--ink-900);
  border-bottom: 1px solid var(--paper-100);
}

.register-group__n {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--fs-caption);
  color: var(--ink-500);
  background: var(--paper-100);
  border-radius: 50%;
}

.register-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.field {
  display: grid;
  gap: 0.4rem;
  grid-column: 1 / -1;
  min-width: 0;
}

.field--half {
  grid-column: auto;
}

.field__req {
  color: var(--accent-text);
}

.field__control {
  position: relative;
}

.register-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
}

.register-form select:required:invalid {
  color: var(--ink-300);
}

.register-form select option {
  color: var(--ink-900);
}

.register-form ::placeholder {
  color: var(--ink-300);
  opacity: 1;
}

.field__control--select::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border: solid var(--ink-500);
  border-width: 0 2px 2px 0;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.field.is-invalid input:not([type="checkbox"]),
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--err);
}

.field__err {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--err);
}

.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  font-weight: var(--fw-regular);
  color: var(--ink-500);
  cursor: pointer;
}

.register-form .check input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  padding: 0;
  accent-color: var(--evidence-deep);
  cursor: pointer;
}

.field.is-invalid .check input {
  outline: 2px solid var(--err);
  outline-offset: 1px;
}

.check__text a {
  font-weight: var(--fw-medium);
  color: var(--evidence-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.register-form__submit {
  width: 100%;
  justify-content: center;
}

.register-form__submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* Panel vừa được chọn: nội dung vào nhẹ bằng CSS (không phụ thuộc GSAP — panel đang display:none
   không có scroll trigger, nên đổi tab không bao giờ để nội dung kẹt ở opacity 0). */
@media (prefers-reduced-motion: no-preference) {
  .register.is-tabs .register-panel.is-active .register-info__heading,
  .register.is-tabs .register-panel.is-active .register-info__intro,
  .register.is-tabs .register-panel.is-active .register-cross {
    animation: reg-up 0.5s var(--ease) both;
  }

  .register.is-tabs .register-panel.is-active .register-checklist li {
    animation: reg-up 0.5s var(--ease) both;
    animation-delay: calc(0.12s + var(--i, 0) * 0.07s);
  }

  .register.is-tabs .register-panel.is-active .register-form {
    animation: reg-up 0.55s var(--ease) 0.08s both;
  }
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 900px) {
  .register-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }

  .register-form {
    padding: var(--sp-3);
  }
}

@media (max-width: 520px) {
  .register-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .field--half {
    grid-column: 1 / -1;
  }

  .register-tab__sub {
    display: none;
  }
}

.btn--secondary-on-dark {
  background: transparent;
  color: var(--paper-0);
  border-color: var(--paper-0);
}

.btn--secondary-on-dark:hover {
  background: var(--paper-0);
  color: var(--evidence-deep);
}

/* --- Nhãn còn thiếu nội dung: phải NHÌN THẤY, không được lẫn vào dữ liệu thật - */

.todo-flag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px dashed var(--err);
  border-radius: var(--radius-sm);
  background: var(--err-soft);
  color: var(--err);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}

/* --- Hero split -------------------------------------------------------------- */

.hero-split {
  padding: var(--sp-6) 0 var(--sp-7);
}

.hero-split__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--sp-5);
  align-items: center;
}

.hero-split__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  letter-spacing: -0.03em;
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
}

.hero-split__title span {
  display: block;
}

.hero-split__title-accent {
  color: var(--evidence);
}

.hero-split__copy {
  max-width: 34rem;
  margin-bottom: var(--sp-4);
}

.hero-split__copy p {
  color: var(--ink-500);
}

.hero-split__lede {
  color: var(--ink-900) !important;
  font-weight: var(--fw-medium);
  font-size: 1.25rem;
}

.hero-split__media {
  background: var(--paper-0);
  border-radius: var(--radius);
  padding: var(--sp-2);
}

/* --- Hero: video AI lặp (assets/video/hero-loop.*, xem hero.php) -----------------------------
   Khung bo góc token, không viền/khung placeholder. main.js (initHeroVideo) tạm dừng khi ra khỏi
   màn hình hoặc prefers-reduced-motion. Không có file video → hero.php dùng canvas flow.js bên dưới. */
.hero-split__media--video {
  background: none;
  padding: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.hv-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: var(--paper-50);
}

.hv-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Hero: canvas "khách hàng đi qua lớp AI" (assets/js/flow.js) ------------------------------
   Không khung/nền: vẽ thẳng lên nền trang, mép trái/phải mờ dần để dòng khách vào/ra tự nhiên.
   Chuyển động do flow.js tự chạy (tạm dừng khi ra khỏi màn hình; reduced-motion → 1 khung tĩnh).
   Bản trước (tảng băng SVG): variants/hero-media-iceberg/. */
.hero-split__media--flow {
  position: relative;
  aspect-ratio: 16 / 10;
  background: none;
  padding: 0;
  border-radius: 0;
}

.hf-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 97%, transparent);
}

/* --- Tiện ích ------------------------------------------------------------ */

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.text-center { text-align: center; }
.flow > * + * { margin-top: var(--sp-2); }

/* ==========================================================================
   RESPONSIVE — theo MASTER-DESIGN.md §10: ≤991px 1 cột, ≤767px căn giữa hero.
   ========================================================================== */

@media (max-width: 767px) {
  .hero-split__grid {
    text-align: center;
  }

  .hero-split__copy {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   MOTION LAYER (GSAP) — chuyển động dựng bởi assets/js/animations.js.

   Nguyên tắc:
   - Mặc định (không JS / JS lỗi / prefers-reduced-motion) MỌI thứ hiện sẵn
     đúng như bản static. Trạng thái "ẩn chờ cuộn" do GSAP đặt bằng style inline,
     KHÔNG nằm ở CSS (trừ hero với class tạm `anim-pending`, có bảo hiểm 3,5s).
   - JS chỉ điều khiển qua transform / opacity / biến CSS (--rule-scale, --on,
     --tick, --mx, --my). Không đổi layout khi chạy.
   ========================================================================== */

/* --- Lenis (smooth scroll) — bản rút gọn từ lenis.css -------------------- */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* --- Đường kẻ "vẽ" được: pseudo-element thay border-top ------------------- */

.index-list__item,
.closing-notes__item,
.compare-grid__col {
  position: relative;
}

.index-list__item::before,
.closing-notes__item::before,
.compare-grid__col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule, var(--line));
  transform: scaleX(var(--rule-scale, 1));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* --- Admin bar của WordPress: nav fixed không được chui dưới nó ------------- */

.admin-bar .nav-bar {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .nav-bar {
    top: 46px;
  }
}

/* --- Header: thanh tiến trình cuộn + trạng thái đã cuộn + gạch chân nav ----- */

.nav-bar {
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.nav-bar.is-scrolled {
  background: rgba(242, 246, 245, 0.86);
  box-shadow: 0 1px 0 var(--paper-100), var(--shadow-1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  pointer-events: none;
}

.scroll-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--evidence), var(--accent));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.nav-bar__links a {
  position: relative;
}

.nav-bar__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur) var(--ease);
}

.nav-bar__links a.is-active::after,
.nav-bar__links a:hover::after {
  transform: scaleX(1);
}

/* --- Hero: nền trang trí (lưới chấm + 3 quầng màu) --------------------------- */

.hero-split {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero-bg__grid {
  position: absolute;
  inset: -10% 0;
  background-image: radial-gradient(circle, var(--line) 1.2px, transparent 1.6px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 72% 45%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 65% 60% at 72% 45%, #000 15%, transparent 75%);
  opacity: 0.7;
}

.hero-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.6;
  will-change: transform;
}

.hero-bg__orb--a {
  width: min(38vw, 520px);
  aspect-ratio: 1;
  right: -6%;
  top: -8%;
  background: var(--evidence-soft);
}

.hero-bg__orb--b {
  width: min(26vw, 360px);
  aspect-ratio: 1;
  left: -8%;
  bottom: -14%;
  background: var(--accent-soft);
}

.hero-bg__orb--c {
  width: min(20vw, 280px);
  aspect-ratio: 1;
  right: 32%;
  bottom: 4%;
  background: var(--trust-soft);
}

@media (max-width: 767px) {
  .hero-bg__orb--c {
    display: none;
  }
}

/* Chống nháy: JS gỡ `anim-pending` ngay sau khi đã đặt trạng thái đầu. */
html.anim-pending .hero-split__title span,
html.anim-pending .hero-split__copy,
html.anim-pending .hero-split__media,
html.anim-pending .hero-split .btn-row,
html.anim-pending .nav-bar {
  opacity: 0;
}

/* Khung media: vệt sáng quét qua (chỉ khi GSAP đã tiếp quản) */
.media-placeholder-frame {
  position: relative;
  overflow: hidden;
}

.media-placeholder-frame > span {
  position: relative;
  z-index: 1;
}

html.gsap-ready .media-placeholder-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, var(--paper-50) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: g4-shimmer 3.4s var(--ease) infinite;
  pointer-events: none;
}

@keyframes g4-shimmer {
  to {
    transform: translateX(100%);
  }
}

[data-tilt] {
  transform-style: preserve-3d;
}

/* --- Section tối / panel CTA: đốm sáng + lưới chấm bám con trỏ ---------------- */

.has-spotlight {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

.has-spotlight::before,
.has-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.has-spotlight::before {
  background: radial-gradient(460px circle at var(--mx, 72%) var(--my, 28%), rgba(255, 255, 255, 0.1), transparent 62%);
}

.has-spotlight::after {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 1px, transparent 1.4px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(340px circle at var(--mx, 72%) var(--my, 28%), #000, transparent 70%);
  mask-image: radial-gradient(340px circle at var(--mx, 72%) var(--my, 28%), #000, transparent 70%);
  opacity: 0.55;
}

/* --- Tương tác hover (chỉ thiết bị có con trỏ thật) ----------------------------
   ⛔ KHÔNG dùng `transition: transform` / hover `transform` trên phần tử mà GSAP
   đang tween transform (index-list__item, pill, formula term, flow-node...):
   CSS transition sẽ giằng với GSAP gây giật. Chỉ đổi màu / box-shadow. */

@media (hover: hover) and (pointer: fine) {
  .index-list__item:hover::before {
    background: var(--evidence);
  }

  .index-list__item .index-list__index,
  .index-list__item .index-list__title {
    transition: color var(--dur) var(--ease);
  }

  .index-list__item:hover .index-list__index {
    color: var(--evidence);
  }

  .index-list__item:hover .index-list__title {
    color: var(--evidence-deep);
  }
}

/* Node "tín hiệu" chạy dọc luồng hành vi mới (JS bật/tắt class) */
.flow-node {
  transition: box-shadow var(--dur) var(--ease);
}

/* Nhịp thở của CTA chính (hero + panel cuối) — chỉ khi GSAP đã tiếp quản */
@keyframes g4-ring {
  0% {
    box-shadow: 0 0 0 0 var(--accent);
  }

  70%,
  100% {
    box-shadow: 0 0 0 14px transparent;
  }
}

html.gsap-ready .hero-split .btn--primary {
  animation: g4-ring 2.8s var(--ease) 1.6s infinite;
}

html.gsap-ready .btn--primary:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    display: none;
  }

  html.anim-pending .hero-split__title span,
  html.anim-pending .hero-split__copy,
  html.anim-pending .hero-split__media,
  html.anim-pending .hero-split .btn-row,
  html.anim-pending .nav-bar {
    opacity: 1;
  }
}

/* ==========================================================================
   SECTION 2 — HAI NỬA: hành vi cũ (băng chuyền) / hành vi mới (quả cầu + input)

   Mặc định (không JS / reduced-motion) là bố cục TĨNH, đọc đủ: 4 trạm cũ, rồi
   "Hỏi AI" + input đã gõ đủ chữ + 3 thẻ kết quả ở trạng thái cuối.
   Khi animations.js chạy, nó thêm `.bs-enhanced` lên <section>: nửa mới trở thành
   sân khấu cố định chiều cao (được ghim), canvas quả cầu nằm dưới, input + thẻ
   xếp chồng tuyệt đối lên trên. Biến CSS do GSAP điều khiển: --p, --on.
   ⛔ Không đặt `transition: transform` lên phần tử GSAP tween transform.
   ========================================================================== */

.bs-old {
  margin: var(--sp-4) 0 var(--sp-6);
}

/* --- Nửa 1: băng chuyền 4 trạm ------------------------------------------- */

.bs-old__track {
  --bs-gap: var(--sp-3);
  --p: 1;
  position: relative;
  margin-top: var(--sp-2);
}

.bs-old__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--bs-gap);
}

.bs-stop {
  --on: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bs-stop__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  margin-bottom: var(--sp-2);
}

.bs-icon {
  width: 96px;
  height: 72px;
  color: color-mix(in srgb, var(--ink-500) calc(var(--on, 1) * 100%), var(--line));
}

.bs-stop__marker {
  display: block;
  width: 9px;
  height: 9px;
  margin-bottom: var(--sp-2);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) calc(var(--on, 1) * 100%), var(--line));
  position: relative;
  z-index: 1;
}

.bs-stop .flow-node--old {
  color: color-mix(in srgb, var(--ink-900) calc(var(--on, 1) * 100%), var(--ink-300));
}

/* Đường ray đi qua tâm các chấm marker: từ tâm cột đầu tới tâm cột cuối. */
.bs-old__rail {
  position: absolute;
  left: calc((100% - (var(--n) - 1) * var(--bs-gap)) / var(--n) / 2);
  right: calc((100% - (var(--n) - 1) * var(--bs-gap)) / var(--n) / 2);
  top: calc(72px + var(--sp-2) + 3px);
  height: 3px;
  border-radius: 3px;
  background: var(--paper-100);
  pointer-events: none;
}

.bs-old__rail::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--accent);
  transform: scaleX(var(--p, 1));
  transform-origin: 0 50%;
}

/* Chấm "khách" chạy dọc đường ray. */
.bs-old__dot {
  position: absolute;
  top: 50%;
  left: calc(var(--p, 1) * 100%);
  width: 17px;
  height: 17px;
  margin: -8.5px 0 0 -8.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
  z-index: 2;
}

/* Nét vẽ trong icon: mặc định đã vẽ đủ; GSAP tween strokeDashoffset 1 → 0. */
.bs-type,
.bs-field,
.bs-check {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

@media (max-width: 700px) {
  .bs-old__list {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: var(--sp-2);
  }

  .bs-stop {
    flex-direction: row;
    text-align: left;
    gap: var(--sp-2);
  }

  .bs-stop__icon,
  .bs-stop__marker {
    margin-bottom: 0;
  }

  .bs-stop__icon {
    flex: 0 0 auto;
  }

  .bs-stop__marker,
  .bs-old__rail {
    display: none;
  }
}

/* --- Nửa 2: sân khấu (tĩnh) ------------------------------------------------- */

.bs-pin {
  margin-bottom: var(--sp-6);
}

.bs-pin__run {
  display: none;
}

.bs-stage {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-3);
  background: var(--paper-0);
  border-radius: var(--radius);
}

.bs-stage__canvas {
  display: none;
}

.bs-ask {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  justify-items: center;
}

.bs-ask__head {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.bs-ask__head .index-list__index {
  margin: 0;
}

.bs-input {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  width: min(640px, 100%);
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  background: var(--paper-0);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
}

.bs-input__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--evidence);
}

.bs-input__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-900);
  font-size: 1.05rem;
}

.bs-input__caret {
  display: none;
  flex: 0 0 auto;
  width: 2px;
  height: 1.3em;
  margin-left: -4px;
  background: var(--evidence);
  animation: g4-caret 1s steps(1) infinite;
}

@keyframes g4-caret {
  50% {
    background: transparent;
  }
}

.bs-input__enter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--paper-100);
  background: var(--paper-50);
  color: var(--ink-500);
}

.bs-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-2);
}

.bs-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--sp-3);
  background: var(--paper-50);
  border-radius: var(--radius-sm);
}

.bs-card__viz {
  display: block;
  order: 3;
  margin-top: var(--sp-1);
}

.bs-card .index-list__index {
  order: 1;
  margin: 0;
}

.bs-card__title {
  order: 2;
  margin: 0;
  font-size: var(--fs-h3);
}

.bs-viz {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

/* Hình minh họa: shortlist */
.bs-row__bg {
  fill: var(--paper-0);
}

.bs-row__dot {
  fill: var(--line);
}

.bs-row__bar {
  fill: var(--paper-100);
}

.bs-row--keep .bs-row__bg {
  stroke: var(--evidence);
  stroke-width: 1.5;
}

.bs-row--keep .bs-row__dot {
  fill: var(--evidence);
}

.bs-row--keep .bs-row__bar {
  fill: var(--line);
}

.bs-row__ok {
  fill: var(--evidence);
}

.bs-row__tick {
  fill: none;
  stroke: var(--paper-0);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bs-row--drop {
  opacity: 0.3;
}

/* Hình minh họa: khách tự nghiên cứu */
.bs-doc {
  fill: var(--paper-0);
  stroke: var(--line);
  stroke-width: 1.5;
}

.bs-doc--back {
  fill: var(--paper-50);
}

.bs-line {
  fill: var(--paper-100);
}

.bs-line__fill {
  fill: var(--evidence-soft);
}

.bs-lens circle {
  fill: none;
  stroke: var(--evidence-deep);
  stroke-width: 3;
}

.bs-lens path {
  fill: none;
  stroke: var(--evidence-deep);
  stroke-width: 5;
  stroke-linecap: round;
}

/* Hình minh họa: liên hệ vài nhà cung cấp */
.bs-link {
  fill: none;
  stroke: var(--evidence);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.bs-you {
  fill: var(--ink-900);
}

.bs-vendor {
  fill: var(--paper-0);
  stroke: var(--line);
  stroke-width: 2;
}

.bs-vendor--keep {
  stroke: var(--evidence);
}

.bs-vendor--drop {
  opacity: 0.3;
}

.bs-vendor__ok {
  fill: none;
  stroke: var(--evidence);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Nửa 2: sân khấu (được ghim, JS đã tiếp quản) --------------------------- */

/* Giữ cố định bằng CSS sticky (không dùng pin của JS): trình duyệt tự xử lý ở luồng
   compositor nên KHÔNG nháy, kể cả khi cuộn ngược nhanh / kéo thanh cuộn / phím.
   .bs-new dính trong .bs-pin suốt chiều cao .bs-pin__run; animations.js chỉ scrub
   timeline trong quãng đó. Điều kiện để sticky chạy: không có tổ tiên nào của .bs-new
   đặt overflow hidden/auto/clip.
   --bs-stage : chiều cao sân khấu (tăng theo màn hình cao, chặn ở 860px)
   --bs-head  : ước lượng chiều cao dòng chip "Hành vi mới có thể là:" phía trên sân khấu
   --bs-nav   : mép dưới header cố định (+ khoảng thở); admin bar của WP cộng thêm. */
.bs-enhanced .bs-pin {
  --bs-nav: 76px;
  --bs-head: 50px;
  --bs-stage: clamp(520px, calc(100vh - 220px), 860px);
}

.admin-bar .bs-enhanced .bs-pin {
  --bs-nav: 108px;
}

@media (max-width: 782px) {
  .admin-bar .bs-enhanced .bs-pin {
    --bs-nav: 122px;
  }
}

.bs-enhanced .bs-new {
  position: sticky;
  /* căn giữa theo chiều dọc khi màn hình cao, nhưng không bao giờ chui dưới header */
  top: max(var(--bs-nav), calc((100vh - var(--bs-stage) - var(--bs-head)) / 2));
}

.bs-enhanced .bs-pin__run {
  display: block;
  height: calc(100vh * 4.2);
}

.bs-enhanced .bs-stage {
  display: block;
  padding: 0;
  height: var(--bs-stage);
  overflow: hidden;
}

.bs-enhanced .bs-stage__canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bs-enhanced .bs-ask {
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: 6%;
  z-index: 1;
}

.bs-enhanced .bs-input__caret {
  display: block;
}

.bs-enhanced .bs-results {
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: var(--sp-4);
  z-index: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

/* Hình minh họa lớn dần theo chiều cao sân khấu (màn hình cao → thẻ cao hơn, bớt khoảng trống) */
.bs-enhanced .bs-viz {
  max-height: clamp(150px, calc(var(--bs-stage) * 0.28), 260px);
}

@media (max-width: 700px) {
  .bs-enhanced .bs-pin__run {
    height: calc(100vh * 3.6);
  }

  .bs-enhanced .bs-results {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .bs-enhanced .bs-card {
    display: grid;
    grid-template-columns: 112px 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--sp-2);
    align-content: center;
    padding: 0.7rem 0.9rem;
  }

  .bs-enhanced .bs-card__viz {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
    align-self: center;
  }

  .bs-enhanced .bs-card .index-list__index {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  .bs-enhanced .bs-card__title {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: 1.05rem;
  }

  .bs-enhanced .bs-viz {
    max-height: 78px;
  }
}