/* ==========================================================================
   motion.css — chuyển động của trang. Điều khiển bằng js/motion.js (reveal) và js/bg-network.js (nền mạng điểm).
   Cấu trúc kế thừa từ landing viai-landing (css/motion.css), chỉnh theo landing khóa học.
   Nguyên tắc:
   · Chỉ animate opacity + thuộc tính riêng `translate` / `scale` / `rotate` / clip-path (không đụng `transform`
     có sẵn của phần tử) → hover (dùng `transform`) không bị đè, không bị trễ.
   · Reveal: JS gắn data-anim (ẩn) → vào màn hình thì thêm .is-in (hiện) → xong gỡ data-anim.
   · Hiệu ứng con (pop, vẽ mũi tên, tick…) là @keyframes chạy khi cha có .is-in; cha đang ẩn trước đó nên
     con không cần trạng thái ẩn riêng → tắt JS / giảm chuyển động thì mọi thứ vẫn hiện đủ.
   · Chạy đủ trên mọi máy, KHÔNG xét `prefers-reduced-motion` (chủ ý theo yêu cầu chủ trang); chỉ cần trình duyệt hỗ trợ `translate`.
     Vòng lặp ngoài màn hình thì tạm dừng (.is-off).
   Chỉnh mạnh/nhẹ: --reveal-dist, --dur-reveal, --stagger trong css/tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Trạng thái tĩnh + hover (không phụ thuộc JS)
   -------------------------------------------------------------------------- */
/* Header: thanh tiến độ cuộn + link mục đang xem */
.site-header .scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--color-brand-orange), var(--color-brand-blue));
  transform: scaleX(0); transform-origin: 0 50%;
}
.nav__menu a[aria-current] { color: var(--color-brand-navy); }
.nav__menu a[aria-current]::after { transform: scaleX(1); }

/* Nút cam / nút trắng: vệt sáng quét khi rê chuột + mũi tên nhích phải */
.btn--orange, .btn--white { position: relative; overflow: hidden; isolation: isolate; }
.btn--orange::after, .btn--white::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
  translate: -130% 0; transition: translate .75s var(--ease-out-expo);
}
.btn--white::after { background: linear-gradient(110deg, transparent 30%, rgba(8, 97, 248, .16) 50%, transparent 70%); }
.btn--orange:hover::after, .btn--white:hover::after { translate: 130% 0; }
.btn .icon { transition: translate var(--duration-fast) var(--ease-standard); }
.btn:hover .icon:not(.btn__spinner) { translate: 3px 0; }

/* Số đang đếm: chữ số cùng bề rộng nên không rung */
[data-count] { font-variant-numeric: tabular-nums; display: inline-block; }

/* Chính sách / ai nên học / cấp độ: icon nảy nhẹ khi rê chuột */
.icon-disc { transition: scale .35s var(--ease-spring), rotate .35s var(--ease-spring); }
.policy-card:hover .icon-disc { scale: 1.08; rotate: -4deg; }
.road__num { transition: scale .35s var(--ease-spring); }
.road__step:hover .road__num { scale: 1.12; }
.policy-card { transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal); }
.policy-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }

/* FAQ: dấu + xoay thành − (cả hai icon luôn có mặt, chỉ đổi độ mờ + góc xoay) */
.faq-toggle .icon { transition: opacity .25s ease, rotate .35s var(--ease-out-expo); }
.faq-toggle .icon--minus { display: block; opacity: 0; rotate: -90deg; }
.faq-item.is-open .icon--plus { display: block; opacity: 0; rotate: 90deg; }
.faq-item.is-open .icon--minus { opacity: 1; rotate: 0deg; }

/* Vòng lặp nằm ngoài màn hình thì dừng (js/motion.js gắn .is-off) — tiết kiệm GPU/pin */
.is-off, .is-off *, .is-off::before, .is-off::after, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* In ra giấy / PDF: hiện đủ nội dung */
@media print {
  [data-anim], [data-anim] > img { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
  .scroll-progress, .hero__tech, .intro__waves, .trial__fx { display: none; }
}

/* --------------------------------------------------------------------------
   2. Nền động
   -------------------------------------------------------------------------- */
/* Hero: lưới mờ + vầng sáng trôi + mạng điểm (canvas). Nằm trên lớp phủ trắng (::before, z -1 đứng trước trong cây)
   và dưới nội dung; mạng điểm mờ dần về phía ảnh người để không đè lên mặt nhân vật. */
.hero__tech { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__tech::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(8, 97, 248, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 97, 248, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(75% 90% at 42% 42%, #000 0%, transparent 82%); mask-image: radial-gradient(75% 90% at 42% 42%, #000 0%, transparent 82%);
}
.hero__tech-glow { position: absolute; aspect-ratio: 1; border-radius: 50%; }
.hero__tech-glow--a { width: min(40vw, 560px); left: -8%; top: -34%; background: radial-gradient(circle, rgba(8, 97, 248, .22), transparent 68%); }
.hero__tech-glow--c { width: min(34vw, 480px); right: 6%; top: 30%; background: radial-gradient(circle, rgba(135, 71, 232, .13), transparent 68%); }
.hero__tech-glow--b { width: min(30vw, 420px); left: 26%; bottom: -10%; background: radial-gradient(circle, rgba(243, 107, 28, .17), transparent 68%); }
.net-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__tech .net-canvas { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 62%); mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 62%); }
/* Màn hẹp (hero xếp dọc: chữ → ảnh → thẻ): mạng điểm chỉ phủ phần chữ phía trên */
@media (max-width: 1099px) {
  .hero__tech .net-canvas { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 52%); mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 52%); }
  .hero__tech::before { -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 52%); mask-image: linear-gradient(180deg, #000 0%, transparent 52%); }
}

/* Khối Làm thử: aurora + lưới chấm trượt + mạng điểm sáng (nền xanh đậm) */
.trial__fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fx-grid {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: radial-gradient(70% 110% at 72% 50%, #000 0%, transparent 82%); mask-image: radial-gradient(70% 110% at 72% 50%, #000 0%, transparent 82%);
}
.fx-grid::before {
  content: ""; position: absolute; inset: -40px;
  background-image: radial-gradient(rgba(255, 255, 255, .26) 1.3px, transparent 1.8px); background-size: 34px 34px;
}
.fx-orb { position: absolute; aspect-ratio: 1; border-radius: 50%; }
.fx-orb--a { width: min(46vw, 620px); left: -10%; top: -40%; background: radial-gradient(circle, rgba(70, 165, 255, .5), transparent 66%); }
.fx-orb--b { width: min(38vw, 500px); right: -6%; top: -18%; background: radial-gradient(circle, rgba(150, 95, 255, .38), transparent 66%); }
.fx-orb--c { width: min(32vw, 420px); right: 28%; bottom: -52%; background: radial-gradient(circle, rgba(255, 140, 60, .3), transparent 66%); }

/* --------------------------------------------------------------------------
   3. Chuyển động (mọi máy, kể cả máy bật "giảm chuyển động"; chỉ yêu cầu trình duyệt hỗ trợ `translate`)
   -------------------------------------------------------------------------- */
@supports (translate: 0) {

  /* ---- 3a. Reveal khi cuộn ---- */
  [data-anim] {
    opacity: 0;
    transition:
      opacity var(--dur-reveal) var(--ease-out-expo) var(--d, 0ms),
      translate var(--dur-reveal) var(--ease-out-expo) var(--d, 0ms),
      scale var(--dur-reveal) var(--ease-out-expo) var(--d, 0ms),
      filter var(--dur-reveal) var(--ease-out-expo) var(--d, 0ms);
  }
  [data-anim="up"], [data-anim="left"], [data-anim="right"] { translate: 0 var(--reveal-dist); }
  [data-anim="blur"] { translate: 0 16px; filter: blur(8px); }
  [data-anim="zoom"] { scale: .94; }
  /* wipe: khung li luôn hiện (ô xám chờ ảnh) để IntersectionObserver còn thấy nó; chỉ ảnh bên trong bị quét.
     Không được clip-path chính phần tử đang theo dõi: Chrome coi phần bị cắt là "không nhìn thấy" nên sẽ không bao giờ kích hoạt. */
  [data-anim="wipe"] { opacity: 1; }
  [data-anim="wipe"] > img {
    clip-path: inset(0 100% 0 0); scale: 1.1;
    transition: clip-path 1.1s var(--ease-out-expo) var(--d, 0ms), scale 1.4s var(--ease-out-expo) var(--d, 0ms);
  }
  [data-anim="wipe"].is-in > img { clip-path: inset(0 0 0 0); scale: 1; }
  @media (min-width: 1280px) {
    /* Trượt ngang chỉ khi lề trang ≥ quãng trượt (39px): ở 1024–1279px lề chỉ ~24px nên phần tử bị dịch sẽ làm trang rộng hơn màn hình */
    [data-anim="left"] { translate: calc(var(--reveal-dist) * -1.4) 0; }
    [data-anim="right"] { translate: calc(var(--reveal-dist) * 1.4) 0; }
  }
  [data-anim].is-in { opacity: 1; translate: none; scale: none; filter: none; }

  /* ---- 3b. Keyframes dùng chung ---- */
  @keyframes m-pop { from { opacity: 0; scale: .5; } }
  @keyframes m-pop-rot { from { opacity: 0; scale: .5; rotate: -90deg; } }
  @keyframes m-drop { from { opacity: 0; translate: 0 -16px; scale: .8; } }
  @keyframes m-rise { from { opacity: 0; translate: 0 14px; } }
  @keyframes m-hero-up { from { opacity: 0; translate: 0 26px; } }
  @keyframes m-hero-side { from { opacity: 0; translate: 44px 0; scale: .97; } }
  @keyframes m-nav-in { from { opacity: 0; translate: 0 -14px; } }
  @keyframes m-fade-in { from { opacity: 0; } }
  @keyframes m-line-y { from { scale: 1 0; } }
  @keyframes m-line-x { from { scale: 0 1; } }
  @keyframes m-arrow-wipe { from { clip-path: inset(-2px 100% -2px -2px); } to { clip-path: inset(-2px -2px -2px -2px); } }
  @keyframes m-zoomout { from { scale: 1.14; } }
  @keyframes m-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
  @keyframes m-float-lg { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
  @keyframes m-cta-glow { 0%, 100% { box-shadow: 0 8px 22px rgba(243, 107, 28, .45), 0 0 0 0 rgba(255, 150, 60, .5); } 55% { box-shadow: 0 8px 22px rgba(243, 107, 28, .45), 0 0 0 10px rgba(255, 150, 60, 0); } }
  @keyframes m-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
  @keyframes m-waves { to { translate: 24px -10px; } }
  @keyframes m-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }
  @keyframes m-kenburns { to { scale: 1.05; } }
  @keyframes m-bg-shift { to { background-position: 100% 0; } }
  @keyframes m-sweep { 0% { translate: -100% 0; } 22%, 100% { translate: 100% 0; } }
  @keyframes m-sweep-btn { 0% { translate: -130% 0; } 18%, 100% { translate: 130% 0; } }
  @keyframes m-drift-a { to { translate: 60px 36px; scale: 1.14; } }
  @keyframes m-drift-b { to { translate: -48px 44px; scale: 1.1; } }
  @keyframes m-drift-c { to { translate: -36px -40px; scale: 1.18; } }
  @keyframes m-grid-pan { to { translate: 34px 34px; } }
  @keyframes m-pulse-ring { 0%, 100% { box-shadow: 0 8px 20px rgba(8, 97, 248, .28), 0 0 0 0 rgba(8, 97, 248, .38); } 55% { box-shadow: 0 8px 20px rgba(8, 97, 248, .28), 0 0 0 14px rgba(8, 97, 248, 0); } }
  /* Vòng sóng lan ra từ nút, lần lượt L1→L5 nhờ animation-delay theo --n */
  @keyframes m-ring-out { 0% { opacity: 0; scale: 1; } 5% { opacity: .75; } 24% { opacity: 0; scale: 1.7; } 100% { opacity: 0; scale: 1.7; } }
  @keyframes m-typing { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -2px; } }
  /* Tay nắm thanh kéo Yêu cầu | Kết quả: sóng nhẹ gợi ý kéo */
  @keyframes m-knob-ring { 0% { opacity: .7; scale: 1; } 70%, 100% { opacity: 0; scale: 1.7; } }
  /* Khối nỗi đau (cảnh báo đỏ): băng cảnh báo chạy ngang, quầng đỏ thở, huy hiệu "!" có sóng + rung nhẹ định kỳ */
  @keyframes m-tape { to { translate: 33.94px 0; } }
  @keyframes m-red-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
  @keyframes m-alert-ring { 0% { opacity: .75; scale: 1; } 70%, 100% { opacity: 0; scale: 1.9; } }
  @keyframes m-alert-wiggle { 0%, 88%, 100% { rotate: 0deg; } 91% { rotate: -14deg; } 94% { rotate: 12deg; } 97% { rotate: -7deg; } }
  /* Vệt sáng quét qua chữ gradient (lớp trên cùng của background) */
  @keyframes m-sheen-text { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }

  /* ---- 3c. Header + Hero: chạy ngay khi tải trang (CSS thuần, không chờ JS; fill backwards nên không kẹt ẩn) ---- */
  .js .site-header { animation: m-nav-in .6s var(--ease-out-expo) backwards; }
  .js .hero__eyebrow { animation: m-hero-up .7s var(--ease-out-expo) backwards; }
  .js .hero h1 { animation: m-hero-up .8s var(--ease-out-expo) .08s backwards; }
  .js .hero__lead { animation: m-hero-up .8s var(--ease-out-expo) .2s backwards; }
  .js .hero__cta .btn:nth-child(1) { animation: m-hero-up .8s var(--ease-out-expo) .32s backwards, m-cta-glow 3.4s ease-in-out 2.4s infinite; }
  .js .hero__cta .btn:nth-child(2) { animation: m-hero-up .8s var(--ease-out-expo) .42s backwards; }
  /* Khung ảnh trượt vào từ phải (màn hẹp: từ dưới lên); ảnh người + robot nổi lơ lửng rất nhẹ, nền văn phòng mờ phóng chậm */
  .js .hero__stage { animation: m-hero-up .9s var(--ease-out-expo) .2s backwards; }
  @media (min-width: 1100px) { .js .hero__stage { animation-name: m-hero-side; } }
  .js .hero__photo { animation: m-float-lg 7s ease-in-out 1.2s infinite; }
  .js .hero__scene { animation: m-kenburns 26s ease-in-out 1.2s infinite alternate; }

  /* ---- 3d. Nền động ---- */
  .hero__tech-glow--a { animation: m-drift-a 16s ease-in-out infinite alternate; }
  .hero__tech-glow--b { animation: m-drift-b 19s ease-in-out -6s infinite alternate; }
  .hero__tech-glow--c { animation: m-drift-c 22s ease-in-out -9s infinite alternate; }
  .intro__waves { animation: m-waves 22s ease-in-out infinite alternate; }
  .fx-grid::before { animation: m-grid-pan 7s linear infinite; }
  .fx-orb--a { animation: m-drift-a 15s ease-in-out infinite alternate; }
  .fx-orb--b { animation: m-drift-b 19s ease-in-out -7s infinite alternate; }
  .fx-orb--c { animation: m-drift-c 17s ease-in-out -3s infinite alternate; }

  /* ---- 3e. Hiệu ứng con theo từng section ---- */
  /* Hero: 3 dấu ✓ vào sau hai nút; thẻ Agent hiện lần lượt rồi nổi lơ lửng (JS gắn .is-float); dấu "..." nhấp nháy như đang gõ */
  .js .hero__checks { animation: m-hero-up .8s var(--ease-out-expo) .52s backwards; }
  .agent-card.is-in .ag-ico, .ag-chip.is-in .ag-ico { animation: m-pop .6s var(--ease-spring) calc(var(--d, 0ms) + 200ms) backwards; }
  .agent-card.is-float, .ag-chip.is-float { animation: m-float 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.1s); }
  .dots i { animation: m-typing 1.3s ease-in-out infinite; }
  .dots i:nth-child(2) { animation-delay: .18s; }
  .dots i:nth-child(3) { animation-delay: .36s; }

  /* 5 nỗi đau (cảnh báo đỏ): quầng đỏ thở + băng cảnh báo chạy; huy hiệu "!" nảy vào, sóng đỏ lan ra, thỉnh thoảng rung — lệch pha giữa 5 thẻ;
     ảnh zoom-out khi vào; thẻ nổi lơ lửng nhẹ sau khi hiện xong (JS gắn .is-float) */
  .section--problem::before { animation: m-red-breathe 5s ease-in-out infinite; }
  .section--problem::after { animation: m-tape 1.6s linear infinite; }
  .pain-card:nth-child(1) { --n: 0; } .pain-card:nth-child(2) { --n: 1; } .pain-card:nth-child(3) { --n: 2; }
  .pain-card:nth-child(4) { --n: 3; } .pain-card:nth-child(5) { --n: 4; }
  .pain-card__alert::before {
    content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; opacity: 0;
    border: 2px solid rgba(240, 68, 56, .8);
  }
  .pain-card.is-in .pain-card__alert { animation: m-pop .55s var(--ease-spring) calc(var(--d, 0ms) + 350ms) backwards, m-alert-wiggle 5s ease-in-out calc(var(--d, 0ms) + 2200ms + var(--n) * 700ms) infinite; }
  .pain-card.is-in .pain-card__alert::before { animation: m-alert-ring 2.6s ease-out calc(var(--d, 0ms) + 900ms + var(--n) * 650ms) infinite; }
  .pain-card.is-in img { animation: m-zoomout 1.3s var(--ease-out-expo) calc(var(--d, 0ms) + 100ms) backwards; }
  .pain-card.is-float { animation: m-float 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s); }

  /* Second Brain (sơ đồ): xung sáng chạy dọc các đường nối vào/ra, nét đứt của vòng cập nhật chạy về Second Brain, huy hiệu ✓ nảy khi thẻ hiện */
  @keyframes m-sb-flow { to { stroke-dashoffset: -199; } }
  @keyframes m-sb-march { to { stroke-dashoffset: -14; } }
  .sb__pulse { animation: m-sb-flow 3.6s linear infinite; }
  .sb__loop { animation: m-sb-march 1s linear infinite; }
  .sb-card.is-in .sb-card__badge { animation: m-pop .55s var(--ease-spring) calc(var(--d, 0ms) + 350ms) backwards; }
  .sb__hub.is-in img { animation: m-zoomout 1.3s var(--ease-out-expo) calc(var(--d, 0ms) + 100ms) backwards; }
  .sb-chip.is-in .sb-chip__ico { animation: m-pop .6s var(--ease-spring) calc(var(--d, 0ms) + 200ms) backwards; }

  /* Ba cách: icon nảy, từng dòng hiện lần lượt, ảnh zoom-out khi vào */
  .way.is-in .way__ico { animation: m-pop .6s var(--ease-spring) calc(var(--d, 0ms) + 150ms) backwards; }
  .way.is-in .way__list li { animation: m-rise .5s var(--ease-out-expo) calc(var(--d, 0ms) + 250ms + var(--k, 0) * 100ms) backwards; }
  .way.is-in .way__fig img { animation: m-zoomout 1.3s var(--ease-out-expo) calc(var(--d, 0ms) + 100ms) backwards; }

  /* Dải chuyển: ảnh zoom-out khi vào, hai nhãn "Làm thủ công" / "Đội ngũ có AI Agent" rơi vào sau */
  .bridge__fig.is-in img { animation: m-zoomout 1.4s var(--ease-out-expo) calc(var(--d, 0ms) + 100ms) backwards; }
  .bridge__fig.is-in .bridge__tag { animation: m-drop .6s var(--ease-spring) calc(var(--d, 0ms) + 500ms) backwards; }
  .bridge__fig.is-in .bridge__tag--agent { animation-delay: calc(var(--d, 0ms) + 750ms); }

  /* Mô phỏng: sóng nhẹ quanh tay nắm để gợi ý kéo (js/compare.js còn tự quét một lần khi vào màn hình) */
  .compare__knob::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    border: 2px solid rgba(255, 255, 255, .95); animation: m-knob-ring 2.6s ease-out infinite;
  }
  .compare.is-dragging .compare__knob::before { animation: none; opacity: 0; }

  /* Sau khóa học: ảnh đứng yên (mũi tên SVG bám theo ảnh); chip nổi lệch pha nhẹ (JS gắn .is-float) */
  .after__img.is-in { animation: m-zoomout 1.3s var(--ease-out-expo) calc(var(--d, 0ms) + 100ms) backwards; }

  /* Ai nên học: đĩa icon nảy, nút trên đường sáng nhấp nhẹ */
  .who-card.is-in .who-card__ico { animation: m-pop .6s var(--ease-spring) calc(var(--d, 0ms) + 250ms) backwards; }
  @keyframes m-node-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }
  .who-card.is-in::before { animation: m-node-pulse 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.9s); }

  /* Mô phỏng (hero navy): vật nổi hiện lần lượt rồi lơ lửng (JS gắn .is-float); thẻ bước hiện từ dưới */
  .msim-obj.is-float { animation: m-float 5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.2s); }
  .msim__photo img { animation: m-kenburns 18s ease-in-out infinite alternate; }

  /* Nội dung khóa học (4 giai đoạn): bìa — chữ số lớn trôi nhẹ, icon nảy, chip "từ → đến" hiện sau; từng ý ✓ hiện lần lượt */
  .module.is-in .module__media img { animation: m-zoomout 1.3s var(--ease-out-expo) calc(var(--d, 0ms) + 100ms) backwards; }
  .module.is-in .module__list li { animation: m-rise .5s var(--ease-out-expo) calc(var(--d, 0ms) + 300ms + var(--k, 0) * 110ms) backwards; }

  /* Lộ trình 5 cấp độ: số nảy lần lượt, mũi tên quét nối sang bước sau, vòng sóng chạy lần lượt như đang đi qua từng cấp; timeline dọc (mobile) vẽ ra */
  .road__step:nth-child(1) { --n: 0; } .road__step:nth-child(2) { --n: 1; } .road__step:nth-child(3) { --n: 2; }
  .road__step:nth-child(4) { --n: 3; } .road__step:nth-child(5) { --n: 4; }
  .road__num::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; opacity: 0; border: 2px solid var(--c); }
  .road__step.is-in .road__num { animation: m-pop .55s var(--ease-spring) calc(var(--d, 0ms) + 150ms) backwards; }
  .road__step.is-in .road__num::before { animation: m-ring-out 7s ease-out calc(var(--d, 0ms) + 2400ms + var(--n) * 1100ms) infinite; }
  .road__step.is-in:not(:last-child)::after { animation: m-arrow-wipe .5s var(--ease-out-expo) calc(var(--d, 0ms) + 420ms) backwards; }
  .road.is-in::before { transform-origin: 50% 0; animation: m-line-y 1.3s var(--ease-out-expo) .2s backwards; }


  /* Quy trình học (thẻ mở rộng): nội dung thẻ vừa mở hiện lên lần lượt từ trên xuống (chạy mỗi lần một thẻ được mở) */
  .proc-card.is-open .proc-card__inner > * { animation: m-rise .5s var(--ease-out-expo) backwards; }
  .proc-card.is-open .proc-card__inner > :nth-child(2) { animation-delay: .05s; }
  .proc-card.is-open .proc-card__inner > :nth-child(3) { animation-delay: .1s; }
  .proc-card.is-open .proc-card__inner > :nth-child(4) { animation-delay: .15s; }
  .proc-card.is-open .proc-card__inner > :nth-child(5) { animation-delay: .22s; }
  .proc-card.is-open .proc-card__inner > :nth-child(6) { animation-delay: .3s; }

  /* Làm thử: nút trắng có vệt sáng quét định kỳ */
  .btn--white::after { translate: -130% 0; animation: m-sweep-btn 5.5s ease-in-out 1.5s infinite; }
  .btn--white:hover::after { animation: none; translate: 130% 0; }

  /* Giá: ruy-băng rơi xuống, dấu tích lần lượt, quầng cam "thở"; nút cam vệt sáng định kỳ */
  .price-card.is-in .price-card__ribbon { animation: m-drop .65s var(--ease-spring) calc(var(--d, 0ms) + 300ms) backwards; }
  .price-card.is-in .price-card__list li { animation: m-rise .5s var(--ease-out-expo) calc(var(--d, 0ms) + 650ms + var(--k, 0) * 110ms) backwards; }
  .price-card.is-in .price-card__list .icon { animation: m-pop .45s var(--ease-spring) calc(var(--d, 0ms) + 750ms + var(--k, 0) * 110ms) backwards; }
  .price-card::after {
    content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none; opacity: 0;
    box-shadow: 0 0 0 3px rgba(245, 155, 46, .26), 0 0 46px rgba(243, 107, 28, .36); animation: m-glow 4.2s ease-in-out infinite;
  }
  .btn--orange::after { translate: -130% 0; animation: m-sweep-btn 6s ease-in-out 1.5s infinite; }
  .btn--orange:hover::after { animation: none; translate: 130% 0; }
  /* Nút header: quầng cam thở + vệt sáng quét định kỳ (đã bật lại) để nổi bật hơn */
  .nav__cta { animation: m-cta-glow 3.4s ease-in-out 2s infinite; }

  /* Chính sách: icon xoay-nảy */
  .policy-card.is-in .icon-disc { animation: m-pop-rot .6s var(--ease-spring) calc(var(--d, 0ms) + 250ms) backwards; }

  /* Tiêu đề: cụm cam gradient quét sáng một lần khi hiện. Lớp trên là vệt sáng, lớp dưới là gradient gốc */
  .accent {
    background: linear-gradient(100deg, transparent 42%, var(--sheen, rgba(255, 214, 150, .95)) 50%, transparent 58%) 160% 0 / 260% 100% no-repeat,
                linear-gradient(90deg, var(--color-accent-from), var(--color-accent-to));
    -webkit-background-clip: text; background-clip: text;
  }
  h2.is-in .accent { animation: m-sheen-text 1.5s ease-in-out calc(var(--d, 0ms) + 650ms) both; }
  /* Cụm nhấn ở form cuối quét sáng lặp chậm */
  .cta__accent {
    background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .9) 50%, transparent 58%) 160% 0 / 260% 100% no-repeat,
                linear-gradient(90deg, #FFC24D, #FF8A3D);
    -webkit-background-clip: text; background-clip: text;
    animation: m-sheen-text 5.5s ease-in-out 1s infinite;
  }

  /* Form cuối: tick lần lượt, ô nhập lên lần lượt, sóng nền trôi (mở rộng khung để không lộ mép) */
  .cta__points.is-in li { animation: m-rise .5s var(--ease-out-expo) calc(var(--d, 0ms) + 250ms + var(--k, 0) * 90ms) backwards; }
  .lead-form.is-in .field { animation: m-rise .5s var(--ease-out-expo) calc(var(--d, 0ms) + 250ms + var(--k, 0) * 55ms) backwards; }
  .cta__waves { inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); animation: m-waves 18s ease-in-out infinite alternate; }

}