/* ==========================================================================
   BAMFLOW — Theme "Fluent Glass" (chỉ nạp cho index.html)
   Tông màu: xanh Microsoft Fluent (#0078D4 sáng · #4CC2FF tối).
   Bề mặt: kính mờ nhiều lớp kiểu Apple Liquid Glass — blur + saturate,
   viền sáng mảnh phía trên, highlight nội tuyến, bo góc mềm 12–24px.
   Nạp SAU tokens.css + style.css: chỉ ghi đè biến + vài bề mặt chính.
   ========================================================================== */

:root {
  /* ---------- Accent: Fluent dark (#4CC2FF trên nền tối) ---------- */
  --accent: #4cc2ff;
  --accent-rgb: 76, 194, 255;
  --accent-hover: #6fd0ff;
  --accent-dim: #2aa8ec;
  --accent-soft: rgba(76, 194, 255, 0.14);
  --accent-softer: rgba(76, 194, 255, 0.07);
  --accent-line: rgba(76, 194, 255, 0.45);
  --text-on-accent: #04121c;

  /* Nền graphite ám xanh nhẹ, kiểu Windows 11 Mica */
  --bg-base: #0b1118;
  --bg-sunken: #070c12;
  --bg-raised: #111925;
  --bg-panel: #131d2a;
  --bg-panel-hover: #182435;
  --bg-inset: #0d141d;

  --stroke: rgba(180, 210, 240, 0.12);
  --stroke-strong: rgba(180, 210, 240, 0.2);
  --stroke-faint: rgba(180, 210, 240, 0.06);
  --stroke-blueprint: rgba(180, 210, 240, 0.04);

  /* ---------- Radius: bo mềm ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* ---------- Kính ---------- */
  --glass-bg: rgba(20, 30, 44, 0.55);
  --glass-bg-strong: rgba(20, 30, 44, 0.78);
  --glass-stroke: rgba(255, 255, 255, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.22);
  --glass-blur: 22px;
  --glass-sat: 160%;

  --line-top: inset 0 1px 0 var(--glass-highlight);
  --shadow-panel: 0 1px 0 rgba(0, 0, 0, 0.4), 0 16px 40px -18px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 2px 0 rgba(0, 0, 0, 0.4), 0 28px 60px -20px rgba(0, 0, 0, 0.9);
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);

  --bar-bg: var(--glass-bg);
  --bar-bg-stuck: var(--glass-bg-strong);
  --drawer-bg: rgba(16, 24, 36, 0.9);

  /* Hero: quầng sáng xanh thay cho amber */
  --hero-aura-warm: rgba(0, 120, 212, 0.38);
  --hero-aura-cool: rgba(76, 194, 255, 0.16);
  --hero-dome-core: rgba(190, 228, 255, 0.34);
  --hero-dome-mid: rgba(0, 120, 212, 0.3);
  --hero-star-warm: rgba(120, 200, 255, 0.7);

  /* Chuyển động mềm hơn một chút cho hợp kính */
  --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
  --t-normal: 180ms;
}

[data-theme="light"] {
  /* Accent: Fluent light #0078D4 (4.5:1 với chữ trắng) */
  --accent: #0078d4;
  --accent-rgb: 0, 120, 212;
  --accent-hover: #106ebe;
  --accent-dim: #005a9e;
  --accent-soft: rgba(0, 120, 212, 0.12);
  --accent-softer: rgba(0, 120, 212, 0.06);
  --accent-line: rgba(0, 120, 212, 0.35);
  --text-on-accent: #ffffff;

  --bg-base: #f3f6fa;
  --bg-sunken: #e9eef5;
  --bg-raised: #ffffff;
  --bg-panel: #ffffff;
  --bg-panel-hover: #f7f9fc;
  --bg-inset: #eef2f7;

  --text-primary: #0b1420;
  --text-secondary: #42505f;
  --text-muted: #5c6a7a;

  --stroke: rgba(11, 20, 32, 0.1);
  --stroke-strong: rgba(11, 20, 32, 0.16);
  --stroke-faint: rgba(11, 20, 32, 0.06);
  --stroke-blueprint: rgba(11, 20, 32, 0.045);

  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-bg-strong: rgba(255, 255, 255, 0.82);
  --glass-stroke: rgba(255, 255, 255, 0.75);
  --glass-highlight: rgba(255, 255, 255, 0.95);

  --line-top: inset 0 1px 0 var(--glass-highlight);
  --shadow-panel: 0 1px 2px rgba(11, 20, 32, 0.05), 0 14px 32px -18px rgba(0, 60, 120, 0.22);
  --shadow-lift: 0 2px 4px rgba(11, 20, 32, 0.06), 0 24px 48px -20px rgba(0, 60, 120, 0.3);

  --bar-bg: var(--glass-bg);
  --bar-bg-stuck: var(--glass-bg-strong);
  --drawer-bg: rgba(255, 255, 255, 0.92);

  --hero-aura-warm: rgba(0, 120, 212, 0.18);
  --hero-aura-cool: rgba(76, 194, 255, 0.12);
  --hero-dome-core: rgba(210, 236, 255, 0.6);
  --hero-dome-mid: rgba(0, 120, 212, 0.12);
  --hero-star-warm: rgba(0, 120, 212, 0.3);
}

/* ==========================================================================
   Bề mặt kính
   ========================================================================== */

/* Thanh nav nổi */
.header__inner {
  background: var(--bar-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-panel), var(--line-top);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.header.is-stuck .header__inner {
  background: var(--bar-bg-stuck);
  border-color: var(--glass-stroke);
}

/* Panel / thẻ */
.panel,
.agent,
.ai-bcard,
.ai-employee-card,
.pipeline__step,
.detail__panel,
.contact-company-side,
.service-row,
.system-anatomy-matrix,
.matrix-scroll {
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--line-top), var(--shadow-panel);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.panel:hover,
.agent:hover,
.ai-bcard:hover,
.ai-employee-card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--line-top), var(--shadow-lift), 0 0 0 1px var(--accent-softer);
}

/* Bỏ vạch góc kiểu bản vẽ — không hợp kính */
.panel--ticked::before,
.panel--ticked::after {
  display: none;
}

/* Ngăn kéo mobile + modal */
@media (max-width: 900px) {
  .nav {
    background: var(--drawer-bg);
    border: 1px solid var(--glass-stroke);
    border-radius: var(--r-xl);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  }
}

.modal-backdrop {
  background: rgba(6, 12, 20, 0.6);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.modal-container {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  box-shadow: var(--line-top), 0 32px 80px -16px rgba(0, 0, 0, 0.7), 0 0 40px var(--accent-softer);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* ==========================================================================
   Nút — bo tròn mềm, primary có highlight kính phía trên
   ========================================================================== */
.btn {
  border-radius: var(--r-md);
  transition: background var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease),
    color var(--t-normal) var(--ease), box-shadow var(--t-normal) var(--ease), transform var(--t-fast) var(--ease);
}

.btn--primary {
  background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);
  color: var(--text-on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px -8px var(--accent-line);
}

.btn--primary:hover {
  background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent-hover) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 28px -8px var(--accent-line);
}

.btn--primary:active {
  background: var(--accent-dim);
  transform: translateY(1px);
}

.btn--ghost {
  background: var(--glass-bg);
  border-color: var(--glass-stroke);
  box-shadow: var(--line-top);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.btn--ghost:hover {
  background: var(--glass-bg-strong);
  border-color: var(--accent-line);
}

.btn--lg {
  border-radius: var(--r-lg);
}

/* ==========================================================================
   Chỗ style.css viết cứng màu cam → chuyển sang xanh
   ========================================================================== */
mark,
.mark {
  border-radius: 6px;
  background: var(--accent);
  color: var(--text-on-accent) !important;
}

[data-theme="light"] mark,
[data-theme="light"] .mark {
  background: var(--accent);
  color: #ffffff !important;
}

.hero__ai-gradient {
  background: linear-gradient(90deg, #4cc2ff 0%, #0078d4 25%, #7c9cff 50%, #38bdf8 75%, #4cc2ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(76, 194, 255, 0.45));
}

.hero__ai-gradient::after {
  background: linear-gradient(90deg, #0078d4 0%, #4cc2ff 30%, #7c9cff 60%, #0078d4 100%);
  background-size: 200% auto;
  filter: drop-shadow(0 2px 8px rgba(76, 194, 255, 0.7));
}

/* Ảnh, avatar, khối media: bo mềm đồng bộ */
img,
.ai-employee-card__avatar,
.ai-employee-card__avatar img,
.anatomy-card__icon,
.ai-bcard__icon {
  border-radius: var(--r-md);
}

/* Input / textarea nếu có */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  border-radius: var(--r-md);
}

/* Bo mềm cho mọi thứ còn dùng bậc bo cũ hardcode nhỏ */
[class*="pill"],
[class*="tag"],
[class*="badge"],
.eyebrow--chip {
  border-radius: var(--r-round);
}

/* ==========================================================================
   Hero v2 — hai cột kiểu R1 (Webflow): thông điệp trái, ứng dụng mẫu phải.
   Một nguồn sáng tĩnh, không sao / scanline / ticker.
   ========================================================================== */
.hero2 {
  padding-top: calc(var(--header-h) + var(--header-offset) + var(--space-16));
  padding-bottom: var(--space-20);
  overflow: hidden;
}

.hero2__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 78% 38%, rgba(var(--accent-rgb), 0.22), transparent 70%),
    radial-gradient(ellipse 40% 40% at 12% 20%, rgba(var(--accent-rgb), 0.08), transparent 70%);
}

.hero2__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-12);
}

/* ---- Cột trái ---- */
.hero2__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  text-align: left;
}

.hero2__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 6px 14px 6px 8px;
  border-radius: var(--r-round);
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--line-top);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.hero2__brand {
  padding: 2px 10px;
  border-radius: var(--r-round);
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
}

.hero2__sep {
  width: 1px;
  height: 14px;
  background: var(--stroke-strong);
}

.hero2__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  font-weight: 800;
  color: var(--text-primary);
  max-width: 14ch;
}

.hero2__em {
  color: var(--accent);
}

.hero2__sub {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text-secondary);
}

.hero2__sub strong {
  color: var(--text-primary);
  font-weight: 600;
}

.hero2__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.hero2__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.hero2__proof li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero2__proof svg {
  width: 16px;
  height: 16px;
  padding: 2px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}

/* ---- Cột phải: khung ứng dụng mẫu ---- */
.hero2__visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hero2__window {
  border-radius: var(--r-xl);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--line-top), var(--shadow-lift), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  overflow: hidden;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.hero2__winbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--stroke);
  background: var(--glass-bg);
}

.hero2__dots {
  display: inline-flex;
  gap: 5px;
}

.hero2__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--stroke-strong);
}

.hero2__wintitle {
  flex: 1;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero2__winchip {
  padding: 2px 8px;
  border-radius: var(--r-round);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.hero2__winbody {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  min-height: 300px;
}

.hero2__side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  border-right: 1px solid var(--stroke);
  background: var(--bg-inset);
}

.hero2__side span {
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
}

.hero2__side .is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.hero2__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  min-width: 0;
}

.hero2__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.hero2__kpis div {
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--bg-panel);
  border: 1px solid var(--stroke);
}

.hero2__kpis b {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.hero2__kpis span {
  color: var(--text-muted);
  font-size: 11px;
}

.hero2__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.hero2__table th,
.hero2__table td {
  padding: 7px 8px;
  text-align: left;
  border-bottom: 1px solid var(--stroke-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero2__table th {
  font-weight: 600;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero2__table td:first-child {
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.hero2__table i {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-round);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
}

.hero2__table i.ok   { background: rgba(21, 128, 61, 0.12); color: #15803d; }
.hero2__table i.wait { background: rgba(202, 138, 4, 0.14); color: #a16207; }
.hero2__table i.ship { background: var(--accent-soft); color: var(--accent); }

[data-theme="dark"] .hero2__table i.ok   { color: #4ade80; }
[data-theme="dark"] .hero2__table i.wait { color: #facc15; }

.hero2__ai {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.1), transparent);
}

.hero2__ai-icon {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
}

.hero2__ai b {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
}

.hero2__ai span {
  font-size: 11px;
  color: var(--text-muted);
}

.hero2__label {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .hero2__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
  }

  .hero2__copy {
    align-items: center;
    text-align: center;
  }

  .hero2__title {
    max-width: 18ch;
  }

  .hero2__actions,
  .hero2__proof {
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .hero2 {
    padding-bottom: var(--space-12);
  }

  .hero2__winbody {
    grid-template-columns: 1fr;
  }

  .hero2__side {
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--stroke);
  }

  .hero2__kpis {
    gap: 6px;
  }

  .hero2__table th:nth-child(3),
  .hero2__table td:nth-child(3) {
    display: none;
  }

  .hero2__actions .btn {
    flex: 1 1 100%;
  }

  .hero2__eyebrow {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    font-size: var(--text-xs);
  }

  .hero2__sep {
    display: none;
  }
}

/* ==========================================================================
   Thân trang v2 — các khối mới theo WEBSITE-COPY-HOMEPAGE-DRAFT.md
   ========================================================================== */

/* Lưới 3 thẻ dùng chung: cách làm, dự án, lớp học */
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.trio__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}

.trio__card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--text-primary);
}

.trio__card p {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.trio__card .btn {
  margin-top: auto;
  align-self: flex-start;
}

.trio__num {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
}

.trio__label {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--r-round);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.trio__foot {
  margin: var(--space-6) 0 0;
  font-size: var(--text-md);
  color: var(--text-muted);
}

/* Lớp học: cặp nhãn – giá trị */
.course__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.5;
}

.course__meta dt {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  padding-top: 2px;
}

.course__meta dd {
  margin: 0;
  color: var(--text-secondary);
}

/* Nút cuối thẻ nền tảng */
.track__cta {
  padding: 0;
}

/* Demo AI: 4 bước nối nhau */
.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  counter-reset: flow;
}

.flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--line-top), var(--shadow-panel);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--space-3));
  width: var(--space-3);
  height: 2px;
  background: var(--stroke-strong);
}

.flow__step--ai {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: var(--line-top), var(--shadow-panel), 0 0 0 1px rgba(var(--accent-rgb), 0.12);
}

.flow__step--human {
  border-color: rgba(21, 128, 61, 0.4);
}

.flow__step h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
  color: var(--text-primary);
}

.flow__step p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

.flow__tag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--r-round);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.flow__tag--in,
.flow__tag--rule {
  background: var(--bg-inset);
  color: var(--text-muted);
  border: 1px solid var(--stroke);
}

.flow__tag--ai {
  background: var(--accent);
  color: var(--text-on-accent);
}

.flow__tag--human {
  background: rgba(21, 128, 61, 0.14);
  color: #15803d;
}

[data-theme="dark"] .flow__tag--human {
  color: #4ade80;
}

.flow__note {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Ba câu hỏi dưới quy trình */
.qa {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--stroke);
}

.qa__item h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-primary);
}

.qa__item p {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

/* Hai lối vào liên hệ */
.entry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.entry__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
}

.entry__card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--text-primary);
}

.entry__card p {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

.entry__card .btn {
  margin-top: var(--space-3);
  align-self: flex-start;
}

/* FAQ */
.faq {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-10);
  max-width: 820px;
}

.faq__item {
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  padding: 0 var(--space-5);
}

.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) 0;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.faq__item[open] summary::after {
  content: "–";
}

.faq__item p {
  margin: 0;
  padding: 0 0 var(--space-4);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 960px) {
  .trio,
  .qa {
    grid-template-columns: 1fr;
  }

  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .flow__step:nth-child(2)::after {
    display: none;
  }
}

@media (max-width: 600px) {
  .flow,
  .entry {
    grid-template-columns: 1fr;
  }

  .flow__step::after {
    display: none;
  }

  .course__meta {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .course__meta dd {
    margin-bottom: var(--space-2);
  }
}

/* ==========================================================================
   Hero motion — ngôn ngữ vOffice: xuất hiện thấp + mờ + hơi xoay rồi "đậu"
   đúng chỗ; khung app nghiêng nổi; chip bay quanh. Chỉ chạy khi tải trang.
   ========================================================================== */
:root {
  --chip-yellow: #f6e86b;
  --chip-yellow-ink: #4a4000;
  --hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] {
  --chip-yellow: #f2df4e;
  --chip-yellow-ink: #2a2500;
}

/* Trạng thái đầu: mọi phần tử đánh dấu data-anim */
.js .hero2 [data-anim] {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-settle 720ms var(--hero-ease) forwards;
}

/* Lệch nhịp theo thứ tự */
.js .hero2 [data-anim="1"]  { animation-delay: 80ms; }
.js .hero2 [data-anim="2"]  { animation-delay: 180ms; }
.js .hero2 [data-anim="3"]  { animation-delay: 280ms; }
.js .hero2 [data-anim="4"]  { animation-delay: 380ms; }
.js .hero2 [data-anim="5"]  { animation-delay: 520ms; }
.js .hero2 [data-anim="6"]  { animation-delay: 640ms; }
.js .hero2 [data-anim="7"]  { animation-delay: 760ms; }
.js .hero2 [data-anim="8"]  { animation-delay: 900ms; }
.js .hero2 [data-anim="9"]  { animation-delay: 1000ms; }
.js .hero2 [data-anim="10"] { animation-delay: 1100ms; }
.js .hero2 [data-anim="11"] { animation-delay: 1200ms; }
.js .hero2 [data-anim="12"] { animation-delay: 1300ms; }

@keyframes hero-settle {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Tiêu đề: từng dòng là một block để hiện lệch nhịp */
.hero2__line {
  display: block;
}

/* Icon-chip nhét giữa dòng tiêu đề (vOffice) */
.hero2__chip {
  display: inline-grid;
  place-items: center;
  width: 0.78em;
  height: 0.78em;
  margin-right: 0.18em;
  border-radius: 0.22em;
  background: var(--chip-yellow);
  color: var(--chip-yellow-ink);
  vertical-align: -0.08em;
  transform: rotate(-6deg);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.35);
}

.hero2__chip svg {
  width: 62%;
  height: 62%;
}

/* ---- Sân khấu cột phải ---- */
.hero2__stage {
  position: relative;
  padding: var(--space-6) var(--space-8) var(--space-6) var(--space-4);
  perspective: 1400px;
}

/* Khung app: nghiêng nổi, bay vào từ góc xoay sâu hơn rồi đậu lại */
.hero2__window {
  transform: rotateY(-9deg) rotateX(3deg) rotate(0.6deg);
  transform-origin: 60% 50%;
  transition: transform 600ms var(--hero-ease), box-shadow 600ms var(--hero-ease);
  will-change: transform;
}

.js .hero2__window {
  opacity: 0;
  animation: hero-window-in 1100ms var(--hero-ease) 320ms forwards;
}

@keyframes hero-window-in {
  from {
    opacity: 0;
    transform: translateY(48px) rotateY(-24deg) rotateX(8deg) rotate(2.5deg) scale(0.96);
  }
  to {
    opacity: 1;
    transform: rotateY(-9deg) rotateX(3deg) rotate(0.6deg);
  }
}

/* Rê chuột thì khung thẳng lại nhẹ — tương tác, không lơ lửng */
.hero2__stage:hover .hero2__window {
  transform: rotateY(-4deg) rotateX(1.5deg) rotate(0.2deg);
}

/* Chip bay quanh khung */
.hero2__float {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--r-round);
  background: var(--bg-raised);
  border: 1px solid var(--stroke);
  box-shadow: var(--line-top), 0 14px 30px -14px rgba(0, 40, 90, 0.35);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  pointer-events: none;
}

.hero2__float .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.hero2__float .dot--yellow { background: var(--chip-yellow); }
.hero2__float .dot--blue   { background: var(--accent); }

.hero2__float b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.hero2__float svg {
  width: 16px;
  height: 16px;
  padding: 2px;
  border-radius: 50%;
  background: rgba(21, 128, 61, 0.14);
  color: #15803d;
}

[data-theme="dark"] .hero2__float svg { color: #4ade80; }

.hero2__float--a { top: 2px;   left: -6px;  transform: rotate(-4deg); background: var(--chip-yellow); color: var(--chip-yellow-ink); border-color: transparent; }
.hero2__float--b { top: 14px;  right: 6px;  transform: rotate(3deg); }
.hero2__float--c { bottom: 54px; left: -14px; transform: rotate(2deg); }
.hero2__float--d { bottom: 6px;  right: 18px; transform: rotate(-3deg); }

/* Chip có xoay riêng: giữ xoay sau khi animation kết thúc */
.js .hero2 .hero2__float[data-anim] {
  animation-name: hero-settle-chip;
}

.hero2__float--a { --rot: -4deg; }
.hero2__float--b { --rot: 3deg; }
.hero2__float--c { --rot: 2deg; }
.hero2__float--d { --rot: -3deg; }

@keyframes hero-settle-chip {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.85) rotate(calc(var(--rot) * 3));
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(var(--rot));
  }
}

/* Hạ bậc gọn khi hẹp: chip nhỏ hơn, khung ít nghiêng */
@media (max-width: 960px) {
  .hero2__stage {
    padding: var(--space-5) var(--space-4);
  }

  .hero2__window,
  .js .hero2__window {
    transform: rotateY(-5deg) rotateX(2deg);
  }

  @keyframes hero-window-in {
    from { opacity: 0; transform: translateY(40px) rotateY(-16deg) rotateX(6deg) scale(0.96); }
    to   { opacity: 1; transform: rotateY(-5deg) rotateX(2deg); }
  }

  .hero2__float {
    font-size: var(--text-xs);
    padding: 5px 10px;
  }

  .hero2__float--a { left: 0; }
  .hero2__float--c { left: 0; }
}

@media (max-width: 560px) {
  .hero2__float--c { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero2 [data-anim],
  .js .hero2__window {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero2__window {
    transform: none;
  }
}

/* ==========================================================================
   Hero biến thể "beam" — ngôn ngữ Resq.io: khối tối cục bộ, một chùm sáng
   chéo từ góc trên trái, kính chàm, nút pill phát sáng. Bật bằng class
   .hero2--beam (index.html thêm khi URL có ?hero=beam). Không sao, không
   glow toàn trang — chỉ một nguồn sáng.
   ========================================================================== */
.hero2--beam {
  --beam-ink: #f4f6fb;
  --beam-ink-2: rgba(244, 246, 251, 0.72);
  --beam-ink-3: rgba(244, 246, 251, 0.5);
  --beam-glass: rgba(24, 32, 56, 0.55);
  --beam-glass-strong: rgba(20, 27, 48, 0.82);
  --beam-stroke: rgba(180, 200, 255, 0.16);
  --beam-hi: rgba(255, 255, 255, 0.18);
  --beam-accent: #4cc2ff;
  --beam-accent-rgb: 76, 194, 255;
  --beam-accent-deep: #0078d4;

  color: var(--beam-ink);
  background: #070b16;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* Chùm sáng chéo + quầng đáy — duy nhất một nguồn sáng */
.hero2--beam .hero2__glow {
  background:
    linear-gradient(118deg, rgba(var(--beam-accent-rgb), 0.55) 0%, rgba(var(--beam-accent-rgb), 0.18) 22%, transparent 46%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(0, 120, 212, 0.28), transparent 70%),
    radial-gradient(ellipse 30% 26% at 6% 0%, rgba(255, 255, 255, 0.22), transparent 70%);
  opacity: 1;
}

.hero2--beam .hero2__glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
}

/* Chữ */
.hero2--beam .hero2__title,
.hero2--beam .hero2__sub strong,
.hero2--beam .hero2__proof {
  color: var(--beam-ink);
}

.hero2--beam .hero2__sub {
  color: var(--beam-ink-2);
}

.hero2--beam .hero2__em {
  color: var(--beam-accent);
  text-shadow: 0 0 24px rgba(var(--beam-accent-rgb), 0.35);
}

.hero2--beam .hero2__eyebrow {
  background: var(--beam-glass);
  border-color: var(--beam-stroke);
  color: var(--beam-ink-2);
  box-shadow: inset 0 1px 0 var(--beam-hi);
}

.hero2--beam .hero2__brand {
  background: var(--beam-accent);
  color: #04121c;
}

.hero2--beam .hero2__sep {
  background: var(--beam-stroke);
}

.hero2--beam .hero2__chip {
  background: var(--beam-accent);
  color: #04121c;
  box-shadow: 0 0 22px rgba(var(--beam-accent-rgb), 0.5);
}

/* Nút: pill phát sáng phía dưới (Resq.io) */
.hero2--beam .btn--primary {
  border-radius: var(--r-round);
  background: linear-gradient(180deg, #5fcaff 0%, var(--beam-accent-deep) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(var(--beam-accent-rgb), 0.35),
    0 14px 34px -10px rgba(var(--beam-accent-rgb), 0.7);
}

.hero2--beam .btn--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 1px rgba(var(--beam-accent-rgb), 0.5),
    0 18px 44px -10px rgba(var(--beam-accent-rgb), 0.85);
}

.hero2--beam .btn--ghost {
  border-radius: var(--r-round);
  background: var(--beam-glass);
  border-color: var(--beam-stroke);
  color: var(--beam-ink);
  box-shadow: inset 0 1px 0 var(--beam-hi);
}

.hero2--beam .hero2__proof svg {
  background: rgba(var(--beam-accent-rgb), 0.18);
  color: var(--beam-accent);
}

/* Khung app: kính chàm */
.hero2--beam .hero2__window {
  background: var(--beam-glass-strong);
  border-color: var(--beam-stroke);
  color: var(--beam-ink-2);
  box-shadow:
    inset 0 1px 0 var(--beam-hi),
    0 40px 80px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(var(--beam-accent-rgb), 0.08),
    0 0 60px -20px rgba(var(--beam-accent-rgb), 0.35);
}

.hero2--beam .hero2__winbar {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--beam-stroke);
}

.hero2--beam .hero2__wintitle,
.hero2--beam .hero2__kpis b,
.hero2--beam .hero2__table td:first-child,
.hero2--beam .hero2__ai b {
  color: var(--beam-ink);
}

.hero2--beam .hero2__winchip,
.hero2--beam .hero2__side .is-active,
.hero2--beam .hero2__table i.ship {
  background: rgba(var(--beam-accent-rgb), 0.16);
  color: var(--beam-accent);
}

.hero2--beam .hero2__dots i { background: rgba(255, 255, 255, 0.18); }

.hero2--beam .hero2__side {
  background: rgba(0, 0, 0, 0.25);
  border-color: var(--beam-stroke);
}

.hero2--beam .hero2__side span,
.hero2--beam .hero2__kpis span,
.hero2--beam .hero2__table th,
.hero2--beam .hero2__ai span {
  color: var(--beam-ink-3);
}

.hero2--beam .hero2__kpis div {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--beam-stroke);
}

.hero2--beam .hero2__table th,
.hero2--beam .hero2__table td {
  border-color: rgba(255, 255, 255, 0.06);
}

.hero2--beam .hero2__table i.ok   { background: rgba(74, 222, 128, 0.14); color: #4ade80; }
.hero2--beam .hero2__table i.wait { background: rgba(250, 204, 21, 0.14); color: #facc15; }

.hero2--beam .hero2__ai {
  border-color: rgba(var(--beam-accent-rgb), 0.4);
  background: linear-gradient(90deg, rgba(var(--beam-accent-rgb), 0.16), transparent);
}

.hero2--beam .hero2__ai-icon {
  background: var(--beam-accent);
  color: #04121c;
  box-shadow: 0 0 18px rgba(var(--beam-accent-rgb), 0.6);
}

/* Chip bay: kính tối, chip AppSheet giữ vàng để vẫn có điểm ấm */
.hero2--beam .hero2__float {
  background: var(--beam-glass);
  border-color: var(--beam-stroke);
  color: var(--beam-ink);
  box-shadow: inset 0 1px 0 var(--beam-hi), 0 14px 30px -14px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.hero2--beam .hero2__float--a {
  background: var(--chip-yellow);
  color: var(--chip-yellow-ink);
}

.hero2--beam .hero2__float b {
  background: var(--beam-accent);
  color: #04121c;
  box-shadow: 0 0 14px rgba(var(--beam-accent-rgb), 0.6);
}

.hero2--beam .hero2__float svg { color: #4ade80; background: rgba(74, 222, 128, 0.16); }

.hero2--beam .hero2__label {
  color: var(--beam-ink-3);
}

/* Thanh nav nổi trên khối tối: kính tối cho hợp */
.has-hero-beam .header:not(.is-stuck) .header__inner {
  background: rgba(14, 20, 36, 0.6);
  border-color: rgba(180, 200, 255, 0.16);
  color: #f4f6fb;
}

.has-hero-beam .header:not(.is-stuck) .nav__link,
.has-hero-beam .header:not(.is-stuck) .logo {
  color: #f4f6fb;
}

/* ==========================================================================
   Hero v3 — bám cấu trúc video vOffice: font hình học, nền trắng sạch,
   xếp giữa một cột, tiêu đề rất lớn, ảnh sản phẩm to hết chiều ngang bên
   dưới, hơi ngả ra sau theo phối cảnh. Ghi đè các khai báo hero v2 phía trên.
   ========================================================================== */
:root {
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --tracking-display: -0.03em;
  --tracking-heading: -0.015em;
}

[data-theme="light"] {
  --bg-base: #ffffff;
  --bg-sunken: #f4f6fa;
  --bg-inset: #f4f6fa;
}

/* Nền trắng sạch: tắt lưới blueprint, vệt sáng bám con trỏ và hạt nhiễu */
.bp,
.spotlight-layer {
  display: none;
}

/* Nhãn section: bỏ mono in hoa, dùng chữ thường nhỏ */
.section-index {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
}

.section-index__num {
  font-family: var(--font-body);
  font-weight: 700;
  border-radius: var(--r-round);
  background: var(--accent-soft);
  color: var(--accent);
  border: 0;
}

.section-index__meta {
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

/* ---- Bố cục: một cột, xếp giữa ---- */
.hero2 {
  padding-top: calc(var(--header-h) + var(--header-offset) + var(--space-12));
  padding-bottom: var(--space-12);
}

.hero2__glow {
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(var(--accent-rgb), 0.14), transparent 70%);
}

.hero2__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.hero2__copy {
  align-items: center;
  text-align: center;
  max-width: 880px;
  gap: var(--space-6);
}

.hero2__eyebrow {
  font-weight: 600;
}

.hero2__title {
  max-width: 16ch;
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.75rem);
  line-height: 1.04;
  font-weight: 800;
}

.hero2__line {
  display: inline;
}

.hero2__line::after {
  content: " ";
}

.hero2__sub {
  max-width: 58ch;
  font-size: var(--text-lg);
  font-weight: 500;
}

.hero2__actions,
.hero2__proof {
  justify-content: center;
}

.hero2__actions .btn {
  border-radius: var(--r-round);
  padding-inline: var(--space-8);
}

/* ---- Ảnh sản phẩm: to, hết chiều ngang, ngả nhẹ ra sau ---- */
.hero2__visual {
  width: 100%;
  max-width: 1120px;
  align-items: center;
}

.hero2__stage {
  width: 100%;
  padding: var(--space-8) var(--space-6) var(--space-4);
  perspective: 1800px;
}

.hero2__window,
.js .hero2__window {
  transform: rotateX(7deg);
  transform-origin: 50% 0%;
  font-size: 13px;
  border-radius: 22px;
  box-shadow:
    var(--line-top),
    0 60px 100px -40px rgba(10, 30, 60, 0.35),
    0 24px 48px -30px rgba(10, 30, 60, 0.25),
    0 0 0 1px rgba(var(--accent-rgb), 0.06);
}

@keyframes hero-window-in {
  from { opacity: 0; transform: translateY(60px) rotateX(18deg) scale(0.97); }
  to   { opacity: 1; transform: rotateX(7deg); }
}

.hero2__stage:hover .hero2__window {
  transform: rotateX(3deg);
}

.hero2__winbar {
  padding: 12px 18px;
}

.hero2__winbody {
  grid-template-columns: 172px minmax(0, 1fr);
  min-height: 420px;
}

.hero2__side {
  padding: 16px 12px;
  gap: 4px;
}

.hero2__side span {
  padding: 9px 12px;
  border-radius: var(--r-md);
}

.hero2__main {
  padding: 18px 20px;
  gap: 14px;
}

.hero2__kpis {
  gap: 12px;
}

.hero2__kpis div {
  padding: 12px 14px;
}

.hero2__kpis b {
  font-size: 22px;
}

.hero2__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.hero2__table th,
.hero2__table td {
  padding: 9px 10px;
}

.hero2__aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero2__chart {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--bg-panel);
  border: 1px solid var(--stroke);
}

.hero2__chart b {
  font-size: 12px;
  color: var(--text-primary);
}

.hero2__bars {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: end;
  gap: 6px;
  min-height: 90px;
}

.hero2__bars i {
  display: block;
  height: var(--h);
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  opacity: 0.85;
}

.hero2__bars i:last-child {
  opacity: 1;
  box-shadow: 0 8px 18px -8px var(--accent-line);
}

.hero2__ai {
  margin-top: 0;
}

/* Chip bay: đặt quanh khung to */
.hero2__float {
  font-size: var(--text-md);
  padding: 9px 14px;
}

.hero2__float--a { top: 12px;   left: -8px; }
.hero2__float--b { top: 6px;    right: 0; }
.hero2__float--c { bottom: 40px; left: -16px; }
.hero2__float--d { bottom: 20px; right: -6px; }

/* Biến thể beam: khung ngả thay cho xoay ngang */
.hero2--beam .hero2__window,
.js .hero2--beam .hero2__window {
  transform: rotateX(7deg);
}

@media (max-width: 960px) {
  .hero2__grid {
    gap: var(--space-8);
  }

  .hero2__title {
    max-width: 14ch;
  }

  .hero2__stage {
    padding: var(--space-6) var(--space-2) var(--space-3);
  }

  .hero2__window,
  .js .hero2__window,
  .hero2--beam .hero2__window,
  .js .hero2--beam .hero2__window {
    transform: rotateX(4deg);
  }

  .hero2__winbody {
    grid-template-columns: 140px minmax(0, 1fr);
    min-height: 0;
  }

  .hero2__cols {
    grid-template-columns: 1fr;
  }

  .hero2__float {
    font-size: var(--text-sm);
  }

  .hero2__float--a { left: 0; }
  .hero2__float--c { left: 0; }
  .hero2__float--d { right: 0; }
}

@media (max-width: 560px) {
  .hero2__winbody {
    grid-template-columns: 1fr;
  }

  .hero2__window,
  .js .hero2__window {
    font-size: 12px;
  }
}

/* ---- Hero v3: chỉnh sau khi chụp ---- */
/* Mỗi dòng tiêu đề là một khối, không bị tách "đào / tạo" */
.hero2__line {
  display: inline-block;
}

/* Nút phụ có viền rõ trên nền sáng */
.hero2__actions .btn--ghost {
  border-color: var(--stroke-strong);
  background: var(--bg-raised);
}

/* Biến thể beam: thẻ biểu đồ và ô KPI dùng kính tối */
.hero2--beam .hero2__chart {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--beam-stroke);
}

.hero2--beam .hero2__chart b {
  color: var(--beam-ink);
}

.hero2--beam .hero2__bars i {
  background: linear-gradient(180deg, #7dd6ff, var(--beam-accent));
}

/* Chữ "AI" trong ô icon: thắng rule `.hero2__ai span` (cùng là span) */
.hero2__ai .hero2__ai-icon {
  color: var(--text-on-accent);
  font-size: 11px;
}

.hero2--beam .hero2__ai .hero2__ai-icon {
  color: #04121c;
}

/* Beam: nút phụ giữ kính tối, không lấy nền sáng của rule chung */
.hero2--beam .hero2__actions .btn--ghost {
  background: var(--beam-glass);
  border-color: var(--beam-stroke);
  color: var(--beam-ink);
}

/* ==========================================================================
   Hero v4 — kiểu Clarasight: nền navy ở đỉnh loang qua xanh Microsoft rồi
   tan vào nền trắng; chữ trắng ở phần trên; khung app (vOffice) nằm đè lên
   vùng loang. Nav kính tối khi chưa cuộn. Bật bằng .hero2--grad (mặc định).
   ========================================================================== */
.hero2--grad {
  --grad-ink: #ffffff;
  --grad-ink-2: rgba(255, 255, 255, 0.78);
  --grad-ink-3: rgba(255, 255, 255, 0.6);
  --grad-glass: rgba(255, 255, 255, 0.1);
  --grad-stroke: rgba(255, 255, 255, 0.2);
  --grad-hi: rgba(255, 255, 255, 0.35);

  color: var(--grad-ink);
  background: linear-gradient(
    180deg,
    #0a1730 0%,
    #0b3f8c 28%,
    #1d7be0 52%,
    #a9d3fb 72%,
    var(--bg-base) 88%
  );
  padding-bottom: var(--space-8);
}

.hero2--grad .hero2__glow {
  background:
    radial-gradient(ellipse 50% 32% at 50% 8%, rgba(120, 190, 255, 0.35), transparent 70%);
}

.hero2--grad .hero2__glow::after {
  content: "";
  position: absolute;
  inset: 0 0 40% 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}

.hero2--grad .hero2__title,
.hero2--grad .hero2__sub strong,
.hero2--grad .hero2__proof {
  color: var(--grad-ink);
}

.hero2--grad .hero2__sub {
  color: var(--grad-ink-2);
}

.hero2--grad .hero2__em {
  color: #9fd6ff;
}

.hero2--grad .hero2__eyebrow {
  background: var(--grad-glass);
  border-color: var(--grad-stroke);
  color: var(--grad-ink-2);
  box-shadow: inset 0 1px 0 var(--grad-hi);
}

.hero2--grad .hero2__brand {
  background: #ffffff;
  color: #0b3f8c;
}

.hero2--grad .hero2__sep {
  background: var(--grad-stroke);
}

/* Nút: primary trắng chữ xanh (Clarasight), phụ là kính */
.hero2--grad .hero2__actions .btn--primary {
  background: #ffffff;
  color: #0b3f8c;
  box-shadow: inset 0 1px 0 #fff, 0 12px 30px -12px rgba(0, 0, 0, 0.45);
}

.hero2--grad .hero2__actions .btn--primary:hover {
  background: #eef5ff;
}

.hero2--grad .hero2__actions .btn--ghost {
  background: var(--grad-glass);
  border-color: var(--grad-stroke);
  color: var(--grad-ink);
  box-shadow: inset 0 1px 0 var(--grad-hi);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero2--grad .hero2__proof svg {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.hero2--grad .hero2__chip {
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
}

.hero2--grad .hero2__label {
  color: var(--text-muted);
}

/* Khung app sáng đè lên vùng loang: bóng sâu hơn cho nổi */
.hero2--grad .hero2__window,
.js .hero2--grad .hero2__window {
  box-shadow:
    var(--line-top),
    0 70px 120px -40px rgba(4, 20, 50, 0.55),
    0 30px 60px -30px rgba(4, 20, 50, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Nav kính tối trên hero tối, trong suốt hơn khi cuộn qua */
.has-hero-dark .header:not(.is-stuck) .header__inner {
  background: rgba(8, 18, 40, 0.45);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.has-hero-dark .header:not(.is-stuck) .nav__link,
.has-hero-dark .header:not(.is-stuck) .logo,
.has-hero-dark .header:not(.is-stuck) .lang-toggle,
.has-hero-dark .header:not(.is-stuck) .theme-toggle {
  color: #ffffff;
}

.has-hero-dark .header:not(.is-stuck) .nav__cta {
  background: #ffffff;
  color: #0b3f8c;
}

/* ==========================================================================
   Dải khách hàng — ngay dưới hero
   ========================================================================== */
.logos {
  padding: var(--space-6) 0 var(--space-12);
}

.logos__lead {
  margin: 0 0 var(--space-5);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.logos__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4) var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.logos__item {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  opacity: 0.75;
  transition: opacity var(--t-normal) var(--ease), color var(--t-normal) var(--ease);
}

.logos__item:hover {
  opacity: 1;
  color: var(--text-primary);
}

.logos__item--muted {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}

/* ==========================================================================
   Section "Vì sao" — câu tuyên bố lớn + lưới kẻ mảnh (Clarasight)
   ========================================================================== */
.section--why {
  padding-top: var(--space-16);
}

.why {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-4) auto var(--space-16);
  text-align: center;
}

.why__pill {
  padding: 5px 12px;
  border-radius: var(--r-round);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.why__statement {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--text-muted);
}

.why__statement strong {
  font-weight: 600;
  color: var(--text-primary);
}

/* Lưới kẻ mảnh thay cho thẻ kính */
.threat-grid--lines {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}

.threat-grid--lines .threat {
  padding: var(--space-8) var(--space-6);
  border-right: 1px solid var(--stroke);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.threat-grid--lines .threat:last-child {
  border-right: 0;
}

.threat-grid--lines .threat__idx {
  width: 28px;
  height: 28px;
  border-radius: var(--r-round);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 800;
}

.threat-grid--lines .threat__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

.threat-grid--lines .threat__list li {
  font-size: var(--text-md);
  color: var(--text-secondary);
}

.section--why .callout {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  background: transparent;
  border: 0;
  border-left: 0;
  padding: var(--space-6) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-secondary);
}

.section--why .callout strong {
  color: var(--text-primary);
}

@media (max-width: 960px) {
  .threat-grid--lines {
    grid-template-columns: 1fr;
    border-top: 0;
  }

  .threat-grid--lines .threat {
    border-right: 0;
    border-top: 1px solid var(--stroke);
    padding-inline: 0;
  }

  .hero2--grad {
    background: linear-gradient(180deg, #0a1730 0%, #0b3f8c 26%, #1d7be0 46%, #a9d3fb 62%, var(--bg-base) 76%);
  }
}

/* Nút menu / theme / ngôn ngữ trên nav kính tối */
.has-hero-dark .header:not(.is-stuck) .nav-toggle,
.has-hero-dark .header:not(.is-stuck) .menu-toggle,
.has-hero-dark .header:not(.is-stuck) .theme-toggle,
.has-hero-dark .header:not(.is-stuck) .lang-toggle,
.has-hero-dark .header:not(.is-stuck) .lang-switch {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.has-hero-dark .header:not(.is-stuck) .nav-toggle svg {
  color: #ffffff;
}

/* ---- Hero không hình (yêu cầu 16/09): ẩn khung app, gradient ngắn lại ---- */
.hero2__visual {
  display: none;
}

.hero2--grad {
  padding-top: calc(var(--header-h) + var(--header-offset) + var(--space-20));
  padding-bottom: var(--space-24);
  background: linear-gradient(
    180deg,
    #0a1730 0%,
    #0b3f8c 38%,
    #1d7be0 66%,
    #8fc6f7 86%,
    var(--bg-base) 100%
  );
}

.hero2--grad .hero2__glow::after {
  inset: 0 0 25% 0;
}

.hero2__copy {
  gap: var(--space-7, 28px);
}

.logos {
  padding-top: var(--space-10);
}

@media (max-width: 960px) {
  .hero2--grad {
    padding-top: calc(var(--header-h) + var(--header-offset) + var(--space-12));
    padding-bottom: var(--space-16);
    background: linear-gradient(180deg, #0a1730 0%, #0b3f8c 40%, #1d7be0 70%, #8fc6f7 90%, var(--bg-base) 100%);
  }
}

/* ==========================================================================
   Hero v5 — tinh chỉnh theo ảnh Clarasight: nhẹ, nhỏ, calm.
   ========================================================================== */
.hero2--grad {
  padding-top: calc(var(--header-h) + var(--header-offset) + var(--space-16));
  padding-bottom: var(--space-16);
  background: linear-gradient(
    180deg,
    #0b1633 0%,
    #10388a 30%,
    #2a72d6 58%,
    #a7cdf3 82%,
    #e9f2fc 100%
  );
}

/* Không có pill nhãn phía trên tiêu đề */
.hero2--grad .hero2__eyebrow {
  display: none;
}

.hero2__copy {
  gap: var(--space-5);
  max-width: 760px;
}

.hero2__title {
  max-width: 20ch;
  font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.4rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Bỏ icon-chip trong tiêu đề cho đúng độ tĩnh */
.hero2--grad .hero2__chip {
  display: none;
}

.hero2--grad .hero2__em {
  color: #ffffff;
}

.hero2__sub {
  max-width: 54ch;
  font-size: var(--text-base);
  line-height: 1.55;
  font-weight: 500;
}

.hero2__actions {
  margin-top: var(--space-1);
}

.hero2__actions .btn--lg {
  padding: 11px 22px;
  font-size: var(--text-md);
}

.hero2--grad .hero2__proof {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--grad-ink-2);
}

/* Lưới chấm rõ hơn ở vùng loang giữa, giống Clarasight */
.hero2--grad .hero2__glow::after {
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1.2px);
  background-size: 18px 18px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 70%, transparent 100%);
}

/* Dải logo nằm trong đuôi loang nhạt */
.logos--in-fade {
  padding: var(--space-8) 0 var(--space-12);
  background: linear-gradient(180deg, #e9f2fc 0%, var(--bg-base) 100%);
}

.logos--in-fade .logos__lead {
  color: var(--text-muted);
}

.logos--in-fade .logos__item {
  font-size: var(--text-lg);
  opacity: 0.6;
}

/* Câu "Vì sao": kết bằng màu thương hiệu */
.why__statement {
  font-weight: 500;
  max-width: 38ch;
}

.why__statement em {
  font-style: normal;
  color: var(--accent);
}

.section--why {
  padding-top: var(--space-12);
}

@media (max-width: 960px) {
  .hero2--grad {
    padding-top: calc(var(--header-h) + var(--header-offset) + var(--space-10));
    padding-bottom: var(--space-12);
    background: linear-gradient(180deg, #0b1633 0%, #10388a 32%, #2a72d6 62%, #a7cdf3 86%, #e9f2fc 100%);
  }

  .hero2__title {
    max-width: 16ch;
  }
}

.logos--in-fade .logos__item--muted {
  font-size: var(--text-sm);
  opacity: 1;
}

/* Clarasight chỉ dùng pill, không có dòng chỉ mục "01 —" */
.section--why .section-index {
  display: none;
}

/* ==========================================================================
   Thân trang v3 — khung Clarasight: lưới 2 cột kẻ mảnh có minh hoạ CSS,
   hai khối tối bo góc, thẻ CTA xanh, FAQ 2 cột, CTA cuối, wordmark footer.
   ========================================================================== */

/* ---- Tiêu đề section dùng chung với .why ---- */
.why__title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text-primary);
}

.why__sub {
  margin: 0;
  max-width: 52ch;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-secondary);
}

.why__pill--onDark {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* ---- Lưới tính năng 2 cột ---- */
.section--how {
  padding-top: var(--space-8);
}

.section--how .why {
  margin-bottom: var(--space-12);
}

.fgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-raised);
}

.fcell {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  border-right: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}

.fcell:nth-child(2n) {
  border-right: 0;
}

.fcell:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.fcell__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.fcell h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--text-primary);
}

.fcell p {
  margin: 0;
  max-width: 48ch;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---- Minh hoạ CSS trong ô ---- */
.fillu {
  margin-top: auto;
  padding-top: var(--space-6);
  font-size: 13px;
  color: var(--text-secondary);
}

.fillu__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--bg-panel);
  margin-bottom: 6px;
}

.fillu__row span {
  flex: 1;
  color: var(--text-primary);
}

.fillu__row em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-muted);
}

.fillu__row i {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--stroke-strong);
}

.fillu__row i.ok {
  border: 0;
  background: rgba(21, 128, 61, 0.15);
  position: relative;
}

.fillu__row i.ok::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 4px;
  height: 7px;
  border: solid #15803d;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.fillu__row i.dot {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 40%, transparent 42%);
}

.fillu__row i.sq {
  border-radius: 3px;
  background: var(--accent-soft);
  border-color: transparent;
}

.fillu__row.is-active {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: var(--accent-softer);
}

.fillu__row.is-active em {
  color: var(--accent);
  font-weight: 600;
}

.fillu__row.is-human {
  border-color: rgba(21, 128, 61, 0.35);
}

.fillu__row.is-human em {
  color: #15803d;
  font-weight: 600;
}

.fillu__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.fillu__dots i {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
}

.fillu__dots i:nth-child(2) { opacity: 0.7; }
.fillu__dots i:nth-child(3) { opacity: 1; }

.tag {
  flex: none;
  min-width: 34px;
  padding: 2px 7px;
  border-radius: var(--r-round);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.04em;
}

.tag--ai { background: var(--accent); color: var(--text-on-accent); }
.tag--human { background: rgba(21, 128, 61, 0.14); color: #15803d; }
.tag--rule { background: var(--bg-inset); color: var(--text-muted); border: 1px solid var(--stroke); }

/* Điện thoại AppSheet */
.fillu--phone {
  display: flex;
  justify-content: center;
}

.fillu__phone {
  width: 240px;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid var(--stroke-strong);
  background: var(--bg-inset);
  box-shadow: 0 16px 30px -20px rgba(10, 30, 60, 0.35);
}

.fillu__phone-bar {
  padding: 6px 10px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.fillu__phone .fillu__row {
  padding: 8px 10px;
}

.fillu__btn {
  margin-top: 4px;
  padding: 9px;
  border-radius: var(--r-round);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* Bảng vai trò NocoBase */
.fillu--roles {
  display: grid;
  gap: 4px;
}

.fillu__thead,
.fillu__trow {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
}

.fillu__thead {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.fillu__trow {
  background: var(--bg-panel);
  border: 1px solid var(--stroke);
  color: var(--text-primary);
}

.fillu__trow i {
  justify-self: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  position: relative;
}

.fillu__trow i.y { background: rgba(21, 128, 61, 0.14); }
.fillu__trow i.r { background: var(--accent-soft); }
.fillu__trow i.n { background: var(--bg-inset); border: 1px solid var(--stroke); }

.fillu__trow i.y::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 4px;
  height: 8px;
  border: solid #15803d;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.fillu__trow i.r::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* Timeline 5 bước */
.fillu--timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 0;
  margin-top: auto;
  padding: var(--space-6) 0 0;
  list-style: none;
}

.fillu--timeline li {
  position: relative;
  padding: 10px 8px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--bg-panel);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.fillu--timeline li b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
}

.fillu--timeline li:last-child {
  background: var(--accent-softer);
  border-color: rgba(var(--accent-rgb), 0.35);
}

/* ---- Khối tối bo góc ---- */
.section--dark {
  padding-block: var(--space-6);
}

.dark {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-12);
  border-radius: 28px;
  background: #0b1633;
  color: #ffffff;
}

.dark__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 60% at 85% 30%, rgba(42, 114, 214, 0.35), transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.2px) 0 0 / 22px 22px;
  mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 80% 50%, #000 20%, transparent 100%);
}

.dark__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.dark__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #ffffff;
}

.dark__head p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.btn--onDark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border-radius: var(--r-round);
  box-shadow: none;
  backdrop-filter: none;
}

.btn--onDark:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.35);
}

.dark__stats {
  position: relative;
  display: grid;
  gap: var(--space-4);
}

.stat {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.stat span {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
}

.dark__person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dark__person img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.dark__person b {
  display: block;
  font-size: var(--text-base);
  color: #ffffff;
}

.dark__person span {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
}

.dark__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.dark__list li {
  position: relative;
  padding-left: 26px;
  font-size: var(--text-md);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
}

.dark__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.dark__list li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 3px;
  height: 7px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dark__tiles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  min-height: 150px;
  padding: var(--space-6);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
}

.tile b {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.tile b em {
  font-style: normal;
  color: #8fc6f7;
}

.tile span {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
}

/* ---- Thẻ CTA xanh ---- */
.section--cta {
  padding-block: var(--space-6);
}

.ctacard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-12);
  border-radius: 28px;
  background: linear-gradient(135deg, #1d6fd6 0%, #0b3f8c 100%);
  color: #ffffff;
}

.ctacard__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.ctacard__text h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #ffffff;
}

.ctacard__text p {
  margin: 0;
  max-width: 42ch;
  font-size: var(--text-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.btn--white {
  background: #ffffff;
  color: #0b3f8c;
  border-radius: var(--r-round);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.4);
}

.btn--white:hover {
  background: #eef5ff;
}

.ctacard__list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ctacard__list li {
  display: grid;
  gap: 4px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.ctacard__tag {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #cfe6ff;
}

.ctacard__list b {
  font-size: var(--text-base);
  font-weight: 600;
  color: #ffffff;
}

.ctacard__list li > span:last-child {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

/* ---- FAQ 2 cột + CTA cuối ---- */
.section--faq {
  padding-top: var(--space-16);
}

.faq2 {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-12);
  align-items: start;
}

.faq2__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  position: sticky;
  top: calc(var(--header-h) + var(--header-offset) + var(--space-6));
}

.faq2__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text-primary);
}

.faq2__head p {
  margin: 0;
  max-width: 36ch;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-secondary);
}

.faq2 .faq {
  margin-top: 0;
  max-width: none;
}

.faq__item {
  background: var(--bg-raised);
  border-color: var(--stroke);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-24);
  text-align: center;
}

.closing h2 {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text-primary);
}

.closing p {
  margin: 0;
  max-width: 48ch;
  font-size: var(--text-md);
  color: var(--text-secondary);
}

.closing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.closing__actions .btn {
  border-radius: var(--r-round);
}

/* ---- Footer: phẳng + wordmark khổng lồ ---- */
.footer {
  position: relative;
  overflow: hidden;
  background: var(--bg-base);
  border-top: 1px solid var(--stroke);
}

.footer__wordmark {
  margin-top: var(--space-10);
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 17rem);
  line-height: 0.8;
  font-weight: 800;
  letter-spacing: -0.05em;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.02));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  transform: translateY(18%);
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .fgrid {
    grid-template-columns: 1fr;
  }

  .fcell {
    border-right: 0;
  }

  .fcell:nth-last-child(2) {
    border-bottom: 1px solid var(--stroke);
  }

  .dark,
  .ctacard,
  .faq2 {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .dark,
  .ctacard {
    padding: var(--space-8) var(--space-6);
    border-radius: 22px;
  }

  .faq2__head {
    position: static;
  }

  .fillu--timeline {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }

  .fillu--timeline li {
    padding: 8px 4px;
    font-size: 11px;
  }
}

@media (max-width: 560px) {
  .fcell {
    padding: var(--space-6) var(--space-5);
  }

  .dark__tiles {
    grid-template-columns: 1fr 1fr;
  }

  .tile {
    min-height: 120px;
    padding: var(--space-4);
  }

  .fillu--timeline {
    grid-template-columns: repeat(3, 1fr);
  }

  .closing__actions .btn {
    flex: 1 1 100%;
  }
}

/* ---- Sửa sau khi chụp toàn trang ---- */
/* Nút phụ trên nền sáng luôn có viền thấy được */
.btn--ghost:not(.btn--onDark) {
  border-color: var(--stroke-strong);
  background: var(--bg-raised);
}

/* Footer: bỏ font mono của template cũ */
.footer__col h2,
.footer__bottom,
.footer__legal a {
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

.footer__col h2 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
}

.footer__bottom {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ==========================================================================
   Header v2 — kiểu Clarasight: thanh trong suốt trên hero, dính lên thì thành
   nền trắng mờ với hairline dưới. Logo gọn, 5 link, một nút pill.
   ========================================================================== */
:root {
  --header-offset: 0px;
  --header-h: 72px;
}

.js .header {
  animation: none;
}

.header {
  top: 0;
  height: var(--header-h);
  transition: background var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease),
    box-shadow var(--t-normal) var(--ease);
  border-bottom: 1px solid transparent;
}

.header__inner,
.header.is-stuck .header__inner,
.has-hero-dark .header:not(.is-stuck) .header__inner {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-inline: 0;
  gap: var(--space-8);
}

.header.is-stuck {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: var(--stroke);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

[data-theme="dark"] .header.is-stuck {
  background: rgba(11, 17, 24, 0.86);
}

/* Bỏ những thứ thừa: hậu tố "/ ops", chip partner, nút theme, nút ngôn ngữ */
.logo__text span,
.cred-chip,
.theme-toggle,
.lang-toggle {
  display: none !important;
}

.logo__text {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--text-base);
}

.nav__link {
  font-size: var(--text-md);
  font-weight: 500;
  padding: 6px 2px;
}

@media (min-width: 901px) {
  .nav {
    gap: var(--space-6);
  }

  .nav__cta {
    display: none;
  }
}

.header__actions .btn--primary {
  border-radius: var(--r-round);
  padding: 9px 18px;
  font-size: var(--text-sm);
}

.has-hero-dark .header:not(.is-stuck) .nav__link {
  color: rgba(255, 255, 255, 0.85);
}

.has-hero-dark .header:not(.is-stuck) .nav__link:hover,
.has-hero-dark .header:not(.is-stuck) .nav__link.is-active {
  color: #ffffff;
}

.has-hero-dark .header:not(.is-stuck) .header__actions .btn--primary {
  background: #ffffff;
  color: #0b3f8c;
  box-shadow: none;
}

.has-hero-dark .header:not(.is-stuck) .nav-toggle {
  border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 900px) {
  .nav {
    top: calc(var(--header-h) - 8px);
  }

  .has-hero-dark .header:not(.is-stuck) .nav .nav__link {
    color: var(--text-primary);
  }
}

/* ==========================================================================
   Chuyển động kiểu vOffice / Resq.io — scroll-settle:
   mờ + thấp hơn + hơi xoay → đậu đúng chỗ khi cuộn tới. Không lơ lửng liên
   tục. Dùng .reveal / .is-visible sẵn có trong main.js.
   ========================================================================== */
:root {
  --settle: 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Tiêu đề section: pill → tiêu đề → mô tả lệch nhịp */
.js .why.reveal > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--settle), transform var(--settle);
}

.js .why.reveal.is-visible > * {
  opacity: 1;
  transform: none;
}

.js .why.reveal > :nth-child(2) { transition-delay: 90ms; }
.js .why.reveal > :nth-child(3) { transition-delay: 180ms; }

/* Dải logo: từng tên nổi lên */
.js .logos__row.reveal .logos__item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--settle), transform var(--settle);
}

.js .logos__row.reveal.is-visible .logos__item {
  opacity: 1;
  transform: none;
}

.js .logos__row.reveal .logos__item:nth-child(2) { transition-delay: 80ms; }
.js .logos__row.reveal .logos__item:nth-child(3) { transition-delay: 160ms; }
.js .logos__row.reveal .logos__item:nth-child(4) { transition-delay: 240ms; }

/* Ba cột nỗi đau: nổi lên lệch nhịp */
.js .threat.reveal {
  transform: translateY(26px);
  transition: opacity var(--settle), transform var(--settle);
}

.js .threat.reveal.delay-1 { transition-delay: 110ms; }
.js .threat.reveal.delay-2 { transition-delay: 220ms; }

/* Ô tính năng: bay lên hơi nghiêng rồi thẳng lại */
.js .fcell.reveal {
  transform: translateY(32px) rotate(-1.2deg) scale(0.985);
  transform-origin: 50% 100%;
  transition: opacity var(--settle), transform var(--settle);
}

.js .fcell.reveal.delay-1 {
  transform: translateY(32px) rotate(1.2deg) scale(0.985);
  transition-delay: 120ms;
}

.js .fcell.reveal.is-visible {
  transform: none;
}

/* Bên trong ô: từng dòng minh hoạ hiện lần lượt sau khi ô đã đậu */
.js .fcell.reveal .fillu__row,
.js .fcell.reveal .fillu__trow,
.js .fcell.reveal .fillu--timeline li,
.js .fcell.reveal .fillu__phone {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1), transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .fcell.reveal.is-visible .fillu__row,
.js .fcell.reveal.is-visible .fillu__trow,
.js .fcell.reveal.is-visible .fillu--timeline li,
.js .fcell.reveal.is-visible .fillu__phone {
  opacity: 1;
  transform: none;
}

.js .fcell.reveal.is-visible .fillu__phone { transition-delay: 320ms; }
.js .fcell.reveal.is-visible .fillu__row:nth-child(1),
.js .fcell.reveal.is-visible .fillu__trow:nth-child(2),
.js .fcell.reveal.is-visible .fillu--timeline li:nth-child(1) { transition-delay: 320ms; }
.js .fcell.reveal.is-visible .fillu__row:nth-child(2),
.js .fcell.reveal.is-visible .fillu__trow:nth-child(3),
.js .fcell.reveal.is-visible .fillu--timeline li:nth-child(2) { transition-delay: 420ms; }
.js .fcell.reveal.is-visible .fillu__row:nth-child(3),
.js .fcell.reveal.is-visible .fillu__trow:nth-child(4),
.js .fcell.reveal.is-visible .fillu--timeline li:nth-child(3) { transition-delay: 520ms; }
.js .fcell.reveal.is-visible .fillu__row:nth-child(4),
.js .fcell.reveal.is-visible .fillu__trow:nth-child(5),
.js .fcell.reveal.is-visible .fillu--timeline li:nth-child(4) { transition-delay: 620ms; }
.js .fcell.reveal.is-visible .fillu__row:nth-child(5),
.js .fcell.reveal.is-visible .fillu--timeline li:nth-child(5) { transition-delay: 720ms; }

/* Điện thoại: các dòng trong điện thoại theo sau khung */
.js .fcell.reveal.is-visible .fillu__phone .fillu__row:nth-child(2) { transition-delay: 480ms; }
.js .fcell.reveal.is-visible .fillu__phone .fillu__row:nth-child(3) { transition-delay: 580ms; }
.js .fcell.reveal.is-visible .fillu__phone .fillu__row:nth-child(4) { transition-delay: 680ms; }

/* Chấm "Đang xử lý" nhấp nháy nhẹ — chỉ khi ô đã hiện */
.fcell.is-visible .fillu__dots i {
  animation: dots-pulse 1.4s ease-in-out infinite;
}

.fcell.is-visible .fillu__dots i:nth-child(2) { animation-delay: 0.2s; }
.fcell.is-visible .fillu__dots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes dots-pulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

/* Khối tối: khung nổi lên, ba thẻ xoè quạt rồi thẳng lại (Resq.io) */
.js .dark.reveal {
  transform: translateY(28px);
  transition: opacity var(--settle), transform var(--settle);
}

.js .dark.reveal .stat,
.js .dark.reveal .tile {
  opacity: 0;
  transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1), transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .dark.reveal .stat:nth-child(1) { transform: translate(-24px, 36px) rotate(-6deg); }
.js .dark.reveal .stat:nth-child(2) { transform: translateY(44px); }
.js .dark.reveal .stat:nth-child(3) { transform: translate(24px, 36px) rotate(6deg); }

.js .dark.reveal .tile:nth-child(1) { transform: translate(-16px, 24px) rotate(-4deg) scale(0.94); }
.js .dark.reveal .tile:nth-child(2) { transform: translate(16px, 24px) rotate(4deg) scale(0.94); }
.js .dark.reveal .tile:nth-child(3) { transform: translate(-16px, 24px) rotate(3deg) scale(0.94); }
.js .dark.reveal .tile:nth-child(4) { transform: translate(16px, 24px) rotate(-3deg) scale(0.94); }

.js .dark.reveal.is-visible .stat,
.js .dark.reveal.is-visible .tile {
  opacity: 1;
  transform: none;
}

.js .dark.reveal.is-visible .stat:nth-child(1),
.js .dark.reveal.is-visible .tile:nth-child(1) { transition-delay: 220ms; }
.js .dark.reveal.is-visible .stat:nth-child(2),
.js .dark.reveal.is-visible .tile:nth-child(2) { transition-delay: 340ms; }
.js .dark.reveal.is-visible .stat:nth-child(3),
.js .dark.reveal.is-visible .tile:nth-child(3) { transition-delay: 460ms; }
.js .dark.reveal.is-visible .tile:nth-child(4) { transition-delay: 580ms; }

/* Thẻ CTA xanh: ba lớp trượt vào từ phải, hơi nghiêng */
.js .ctacard.reveal {
  transform: translateY(28px);
  transition: opacity var(--settle), transform var(--settle);
}

.js .ctacard.reveal .ctacard__list li {
  opacity: 0;
  transform: translateX(32px) rotate(1.5deg);
  transform-origin: 0 50%;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .ctacard.reveal.is-visible .ctacard__list li {
  opacity: 1;
  transform: none;
}

.js .ctacard.reveal.is-visible .ctacard__list li:nth-child(1) { transition-delay: 200ms; }
.js .ctacard.reveal.is-visible .ctacard__list li:nth-child(2) { transition-delay: 320ms; }
.js .ctacard.reveal.is-visible .ctacard__list li:nth-child(3) { transition-delay: 440ms; }

/* FAQ: từng câu nổi lên */
.js .faq.reveal .faq__item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1), transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .faq.reveal.is-visible .faq__item {
  opacity: 1;
  transform: none;
}

.js .faq.reveal.is-visible .faq__item:nth-child(2) { transition-delay: 70ms; }
.js .faq.reveal.is-visible .faq__item:nth-child(3) { transition-delay: 140ms; }
.js .faq.reveal.is-visible .faq__item:nth-child(4) { transition-delay: 210ms; }
.js .faq.reveal.is-visible .faq__item:nth-child(5) { transition-delay: 280ms; }
.js .faq.reveal.is-visible .faq__item:nth-child(6) { transition-delay: 350ms; }

/* Wordmark footer: trồi lên từ mép dưới */
.js .footer__wordmark {
  opacity: 0;
  transform: translateY(40%);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .footer__wordmark.is-visible {
  opacity: 1;
  transform: translateY(18%);
}

/* Hero: quầng sáng trôi rất chậm — nguồn sáng duy nhất, đúng tinh thần Resq */
.hero2--grad .hero2__glow {
  animation: glow-drift 18s ease-in-out infinite alternate;
}

@keyframes glow-drift {
  from { transform: translate3d(-3%, 0, 0); }
  to   { transform: translate3d(3%, 1.5%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .js .why.reveal > *,
  .js .logos__row.reveal .logos__item,
  .js .fcell.reveal,
  .js .fcell.reveal .fillu__row,
  .js .fcell.reveal .fillu__trow,
  .js .fcell.reveal .fillu--timeline li,
  .js .fcell.reveal .fillu__phone,
  .js .dark.reveal .stat,
  .js .dark.reveal .tile,
  .js .ctacard.reveal .ctacard__list li,
  .js .faq.reveal .faq__item,
  .js .footer__wordmark {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero2--grad .hero2__glow,
  .fcell.is-visible .fillu__dots i {
    animation: none;
  }
}

/* Ngăn kéo mobile: nút CTA luôn xanh, dù header đang trong suốt trên hero */
@media (max-width: 900px) {
  .has-hero-dark .header:not(.is-stuck) .nav .nav__cta,
  .nav .nav__cta {
    background: var(--accent);
    color: var(--text-on-accent);
    border-radius: var(--r-round);
  }
}

/* ==========================================================================
   AI trong hệ thống — khối công nghệ: chùm sáng chéo (Resq.io), lõi AI có
   vòng xung, đường mạch phát sáng chạy xung về lõi, ô hỏi đáp tự gõ.
   Một nguồn sáng, hạt thưa và chậm — không nền sao dày.
   ========================================================================== */
.section--ailab {
  padding-block: var(--space-6);
}

.ailab {
  position: relative;
  overflow: hidden;
  padding: var(--space-12) var(--space-10);
  border-radius: 28px;
  background: #060b1a;
  color: #ffffff;
  isolation: isolate;
}

.ailab__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ailab__beam {
  position: absolute;
  inset: -20% -10%;
  background:
    linear-gradient(118deg, rgba(76, 194, 255, 0.5) 0%, rgba(76, 194, 255, 0.14) 20%, transparent 42%),
    radial-gradient(ellipse 40% 30% at 50% 55%, rgba(0, 120, 212, 0.35), transparent 70%);
  animation: beam-breathe 9s ease-in-out infinite alternate;
}

@keyframes beam-breathe {
  from { opacity: 0.8; transform: translate3d(-1.5%, 0, 0); }
  to   { opacity: 1; transform: translate3d(1.5%, 1%, 0); }
}

.ailab__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 100%);
}

.ailab__p {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9fd6ff;
  box-shadow: 0 0 12px 2px rgba(159, 214, 255, 0.6);
  opacity: 0.6;
  animation: particle-float 14s ease-in-out infinite alternate;
}

.ailab__p--1 { left: 12%; top: 22%; animation-duration: 16s; }
.ailab__p--2 { left: 78%; top: 18%; animation-duration: 13s; width: 3px; height: 3px; }
.ailab__p--3 { left: 64%; top: 74%; animation-duration: 18s; }
.ailab__p--4 { left: 28%; top: 82%; animation-duration: 15s; width: 3px; height: 3px; }
.ailab__p--5 { left: 90%; top: 58%; animation-duration: 12s; }

@keyframes particle-float {
  from { transform: translate3d(0, 0, 0); opacity: 0.35; }
  50%  { opacity: 0.8; }
  to   { transform: translate3d(18px, -26px, 0); opacity: 0.35; }
}

.ailab__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  margin-bottom: var(--space-12);
}

.ailab__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.ailab__head p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--text-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

/* ---- Sân khấu ---- */
.ailab__stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

.ailab__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.ailab__wires .wire {
  fill: none;
  stroke: rgba(159, 214, 255, 0.22);
  stroke-width: 1.5;
}

.ailab__wires .pulse {
  fill: none;
  stroke: #7dd6ff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 26 420;
  stroke-dashoffset: 446;
  filter: drop-shadow(0 0 6px rgba(125, 214, 255, 0.9));
  opacity: 0;
}

.ailab.is-visible .pulse {
  animation: wire-pulse 3.2s linear infinite;
}

.ailab.is-visible .pulse--2 { animation-delay: 0.8s; }
.ailab.is-visible .pulse--3 { animation-delay: 1.6s; }
.ailab.is-visible .pulse--4 { animation-delay: 2.4s; }

@keyframes wire-pulse {
  0%   { stroke-dashoffset: 446; opacity: 0; }
  8%   { opacity: 1; }
  70%  { stroke-dashoffset: 0; opacity: 1; }
  78%  { opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.ailab__col {
  display: grid;
  gap: var(--space-6);
  position: relative;
  z-index: 1;
}

.acard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--r-lg);
  background: rgba(20, 30, 56, 0.55);
  border: 1px solid rgba(159, 214, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: border-color var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
}

.acard:hover {
  border-color: rgba(125, 214, 255, 0.5);
  transform: translateY(-2px);
}

.acard__tag {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7dd6ff;
}

.acard h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.25;
  font-weight: 600;
  color: #ffffff;
}

.acard p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}

/* Lõi AI */
.ailab__core {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.core {
  position: relative;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
}

.core__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(125, 214, 255, 0.35);
}

.core__ring--1 {
  animation: ring-pulse 3.2s ease-out infinite;
}

.core__ring--2 {
  animation: ring-pulse 3.2s ease-out infinite 1.6s;
}

@keyframes ring-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

.core__chip {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(160deg, #5fcaff 0%, #0b5fc4 100%);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 6px rgba(125, 214, 255, 0.12),
    0 0 50px rgba(76, 194, 255, 0.55),
    0 24px 50px -20px rgba(0, 0, 0, 0.9);
  animation: chip-glow 3.2s ease-in-out infinite;
}

@keyframes chip-glow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 6px rgba(125, 214, 255, 0.12), 0 0 40px rgba(76, 194, 255, 0.45), 0 24px 50px -20px rgba(0, 0, 0, 0.9); }
  50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 10px rgba(125, 214, 255, 0.08), 0 0 70px rgba(76, 194, 255, 0.75), 0 24px 50px -20px rgba(0, 0, 0, 0.9); }
}

.core__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(159, 214, 255, 0.8);
  white-space: nowrap;
}

/* ---- Ô hỏi đáp tự gõ ---- */
.ailab__ask {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: var(--space-12);
}

.ask {
  width: min(100%, 720px);
  border-radius: var(--r-lg);
  background: rgba(10, 18, 40, 0.75);
  border: 1px solid rgba(159, 214, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  font-size: 13px;
}

.ask__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.ask__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.8);
}

.ask__title {
  flex: 1;
  font-weight: 600;
  color: #ffffff;
}

.ask__role {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(159, 214, 255, 0.8);
}

.ask__q {
  padding: 16px 18px;
  font-size: var(--text-base);
  font-weight: 500;
  color: #ffffff;
  min-height: 56px;
}

.ask__cursor {
  position: relative;
  display: inline-block;
  min-height: 1.4em;
}

.ask__text {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #7dd6ff;
  width: 0;
  animation: ask-type 12s steps(44) infinite;
}

.ask__text--2 { animation-delay: 4s; }
.ask__text--3 { animation-delay: 8s; }

/* Mỗi câu gõ 1.5s, đứng 2s, xoá nhanh 0.4s, trống đến hết chu kỳ */
@keyframes ask-type {
  0%      { width: 0; opacity: 1; }
  12.5%   { width: 100%; }
  29%     { width: 100%; opacity: 1; }
  32%     { width: 0; opacity: 1; }
  33.3%   { width: 0; opacity: 0; }
  100%    { width: 0; opacity: 0; }
}

.ask__a {
  padding: 4px 18px 14px;
}

.ask__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  margin-bottom: 6px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ask__row b {
  font-family: var(--font-mono);
  font-weight: 500;
  color: #7dd6ff;
}

.ask__row span {
  flex: 1;
  color: #ffffff;
}

.ask__row em {
  font-style: normal;
  padding: 2px 8px;
  border-radius: var(--r-round);
  background: rgba(250, 204, 21, 0.14);
  color: #facc15;
  font-size: 11px;
  font-weight: 600;
}

.ask__foot {
  padding-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.ask__foot span {
  color: #7dd6ff;
}

/* Câu trả lời hiện sau khi khối đã đậu */
.js .ailab.reveal .ask__row,
.js .ailab.reveal .ask__foot {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1), transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .ailab.reveal.is-visible .ask__row,
.js .ailab.reveal.is-visible .ask__foot {
  opacity: 1;
  transform: none;
}

.js .ailab.reveal.is-visible .ask__row:nth-child(1) { transition-delay: 1700ms; }
.js .ailab.reveal.is-visible .ask__row:nth-child(2) { transition-delay: 1900ms; }
.js .ailab.reveal.is-visible .ask__foot { transition-delay: 2100ms; }

/* ---- Có kiểm soát ---- */
.ailab__ctrl {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-12) 0 0;
  padding: var(--space-6) 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ailab__ctrl li {
  display: grid;
  gap: 4px;
  padding-left: 14px;
  border-left: 2px solid rgba(125, 214, 255, 0.6);
}

.ailab__ctrl b {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #ffffff;
}

.ailab__ctrl span {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.62);
}

/* ---- Chuyển động khi cuộn tới: thẻ xoè quạt về lõi ---- */
.js .ailab.reveal {
  transform: translateY(28px);
  transition: opacity var(--settle), transform var(--settle);
}

.js .ailab.reveal .acard {
  opacity: 0;
  transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1), transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .ailab.reveal .ailab__col--l .acard:nth-child(1) { transform: translate(40px, 24px) rotate(-5deg); }
.js .ailab.reveal .ailab__col--l .acard:nth-child(2) { transform: translate(40px, -24px) rotate(5deg); }
.js .ailab.reveal .ailab__col--r .acard:nth-child(1) { transform: translate(-40px, 24px) rotate(5deg); }
.js .ailab.reveal .ailab__col--r .acard:nth-child(2) { transform: translate(-40px, -24px) rotate(-5deg); }

.js .ailab.reveal .core {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.js .ailab.reveal .ask {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) 600ms, transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 600ms;
}

.js .ailab.reveal.is-visible .acard,
.js .ailab.reveal.is-visible .core,
.js .ailab.reveal.is-visible .ask {
  opacity: 1;
  transform: none;
}

.js .ailab.reveal.is-visible .core { transition-delay: 150ms; }
.js .ailab.reveal.is-visible .ailab__col--l .acard:nth-child(1) { transition-delay: 300ms; }
.js .ailab.reveal.is-visible .ailab__col--r .acard:nth-child(1) { transition-delay: 400ms; }
.js .ailab.reveal.is-visible .ailab__col--l .acard:nth-child(2) { transition-delay: 500ms; }
.js .ailab.reveal.is-visible .ailab__col--r .acard:nth-child(2) { transition-delay: 600ms; }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .ailab {
    padding: var(--space-10) var(--space-5);
    border-radius: 22px;
  }

  .ailab__stage {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .ailab__wires {
    display: none;
  }

  .ailab__core {
    order: -1;
    margin-bottom: var(--space-2);
  }

  .ailab__ctrl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ask__text {
    white-space: normal;
    border-right: 0;
    animation-name: ask-fade;
  }

  @keyframes ask-fade {
    0% { opacity: 0; }
    6% { opacity: 1; }
    30% { opacity: 1; }
    33.3% { opacity: 0; }
    100% { opacity: 0; }
  }

  .ask__cursor {
    display: block;
    min-height: 2.8em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ailab__beam,
  .ailab__p,
  .core__ring,
  .core__chip,
  .ailab.is-visible .pulse,
  .ask__text {
    animation: none;
  }

  .ask__text { width: auto; opacity: 0; }
  .ask__text--1 { opacity: 1; position: static; }

  .js .ailab.reveal .acard,
  .js .ailab.reveal .core,
  .js .ailab.reveal .ask,
  .js .ailab.reveal .ask__row,
  .js .ailab.reveal .ask__foot {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Sửa sau chụp: AI section ---- */
/* Tiêu đề trắng (style.css tô h2 màu tối) */
.ailab__head h2,
.dark__head h2,
.ctacard__text h2 {
  color: #ffffff;
}

/* Thẻ phải đậu thẳng: rule đậu cần cùng độ ưu tiên với rule xoè */
.js .ailab.reveal.is-visible .ailab__col--l .acard:nth-child(1),
.js .ailab.reveal.is-visible .ailab__col--l .acard:nth-child(2),
.js .ailab.reveal.is-visible .ailab__col--r .acard:nth-child(1),
.js .ailab.reveal.is-visible .ailab__col--r .acard:nth-child(2) {
  transform: none;
  opacity: 1;
}

/* Ô gõ: con trỏ dừng ở cuối chữ, không ở mép ô */
.ask__cursor {
  display: block;
  width: 100%;
}

.ask__text {
  width: max-content;
  max-width: 0;
  animation-name: ask-type-mw;
}

@keyframes ask-type-mw {
  0%      { max-width: 0; opacity: 1; }
  12.5%   { max-width: 100%; }
  29%     { max-width: 100%; opacity: 1; }
  32%     { max-width: 0; opacity: 1; }
  33.3%   { max-width: 0; opacity: 0; }
  100%    { max-width: 0; opacity: 0; }
}

@media (max-width: 960px) {
  .ask__text {
    max-width: none;
    width: auto;
    animation-name: ask-fade;
  }
}

/* ==========================================================================
   AI trong hệ thống v2 — bố cục Resq.io: ô năng lực → ống dẫn → chip AI.
   Nền gần đen, không chùm sáng, không hạt. Chip có mạch điện tĩnh, xung nhẹ.
   ========================================================================== */
.ailab2 {
  position: relative;
  padding: var(--space-12) var(--space-10) var(--space-10);
  border-radius: 28px;
  background: #06080f;
  color: #ffffff;
  overflow: hidden;
}

.ailab2__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  margin-bottom: var(--space-12);
}

.ailab2__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #ffffff;
}

.ailab2__head p {
  margin: 0;
  max-width: 60ch;
  font-size: var(--text-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}

/* ---- Sân khấu: ô | ống | chip ---- */
.ailab2__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 120px minmax(0, 1fr);
  align-items: center;
}

.ailab2__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.ncard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 132px;
  padding: var(--space-5) var(--space-5);
  border-radius: 16px;
  background: linear-gradient(180deg, #131a30 0%, #0c1122 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 40px -30px rgba(0, 0, 0, 0.9);
  text-align: center;
  transition: border-color var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
}

.ncard:hover {
  border-color: rgba(125, 214, 255, 0.45);
  transform: translateY(-2px);
}

.ncard h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: #ffffff;
}

.ncard p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

/* Ống dẫn: nét dày, bo tròn, sáng mờ */
.ailab2__pipes {
  width: 100%;
  height: 100%;
  min-height: 260px;
  overflow: visible;
}

.ailab2__pipes path {
  fill: none;
  stroke: #1c2540;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.15));
}

/* Chip + mạch */
.ailab2__chipwrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
}

.ailab2__traces {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ailab2__traces .traces path {
  fill: none;
  stroke: rgba(125, 160, 255, 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ailab2__traces .nodes circle {
  fill: #9fb8ff;
  filter: drop-shadow(0 0 4px rgba(159, 184, 255, 0.9));
}

.ailab2 .ailab2__traces .nodes circle {
  animation: node-blink 3.6s ease-in-out infinite;
}

.ailab2 .ailab2__traces .nodes circle:nth-child(3n) { animation-delay: 1.2s; }
.ailab2 .ailab2__traces .nodes circle:nth-child(3n + 1) { animation-delay: 2.4s; }

@keyframes node-blink {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.ailab2__chip {
  position: relative;
  width: 200px;
  height: 200px;
  display: grid;
  place-items: center;
  border-radius: 34px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.28), transparent 45%),
    linear-gradient(160deg, #6fa8ff 0%, #2b6fe6 45%, #123f9e 100%);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 92px;
  line-height: 1;
  letter-spacing: -0.02em;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -6px 18px rgba(0, 0, 0, 0.35),
    0 0 0 8px #0b1226,
    0 0 0 9px rgba(125, 160, 255, 0.35),
    0 0 60px rgba(60, 120, 255, 0.45),
    0 30px 60px -30px rgba(0, 0, 0, 0.9);
  animation: chip-breathe 4s ease-in-out infinite;
}

@keyframes chip-breathe {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -6px 18px rgba(0, 0, 0, 0.35), 0 0 0 8px #0b1226, 0 0 0 9px rgba(125, 160, 255, 0.35), 0 0 50px rgba(60, 120, 255, 0.4), 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
  50%      { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), inset 0 -6px 18px rgba(0, 0, 0, 0.35), 0 0 0 8px #0b1226, 0 0 0 9px rgba(125, 160, 255, 0.5), 0 0 80px rgba(60, 120, 255, 0.6), 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
}

.ailab2__chip::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: 22px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 14px -6px 0 -1px rgba(255, 255, 255, 0.8), 6px -18px 0 -2px rgba(255, 255, 255, 0.7), 26px -22px 0 -2px rgba(255, 255, 255, 0.6);
  opacity: 0.85;
}

.ailab2__note {
  margin: var(--space-10) 0 0;
  text-align: center;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
}

/* ---- Chuyển động khi cuộn tới: ô nổi lên lần lượt, ống vẽ dần, chip phóng ra ---- */
.js .ailab2.reveal {
  transform: translateY(24px);
  transition: opacity var(--settle), transform var(--settle);
}

.js .ailab2.reveal .ncard {
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .ailab2.reveal.is-visible .ncard {
  opacity: 1;
  transform: none;
}

.js .ailab2.reveal.is-visible .ncard:nth-child(1) { transition-delay: 120ms; }
.js .ailab2.reveal.is-visible .ncard:nth-child(2) { transition-delay: 200ms; }
.js .ailab2.reveal.is-visible .ncard:nth-child(3) { transition-delay: 280ms; }
.js .ailab2.reveal.is-visible .ncard:nth-child(4) { transition-delay: 360ms; }
.js .ailab2.reveal.is-visible .ncard:nth-child(5) { transition-delay: 440ms; }
.js .ailab2.reveal.is-visible .ncard:nth-child(6) { transition-delay: 520ms; }

.js .ailab2.reveal .ailab2__pipes path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 900ms cubic-bezier(0.22, 1, 0.36, 1) 500ms;
}

.js .ailab2.reveal.is-visible .ailab2__pipes path {
  stroke-dashoffset: 0;
}

.js .ailab2.reveal .ailab2__chip {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) 900ms, transform 700ms cubic-bezier(0.34, 1.4, 0.64, 1) 900ms;
}

.js .ailab2.reveal .ailab2__traces {
  opacity: 0;
  transition: opacity 900ms ease 1300ms;
}

.js .ailab2.reveal.is-visible .ailab2__chip,
.js .ailab2.reveal.is-visible .ailab2__traces {
  opacity: 1;
  transform: none;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .ailab2 {
    padding: var(--space-10) var(--space-5) var(--space-8);
    border-radius: 22px;
  }

  .ailab2__stage {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .ailab2__pipes {
    display: none;
  }

  .ailab2__chipwrap {
    order: -1;
    min-height: 280px;
  }

  .ailab2__chip {
    width: 160px;
    height: 160px;
    font-size: 72px;
    border-radius: 28px;
  }
}

@media (max-width: 560px) {
  .ailab2__cards {
    grid-template-columns: 1fr;
  }

  .ncard {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ailab2__chip,
  .ailab2 .ailab2__traces .nodes circle {
    animation: none;
  }

  .js .ailab2.reveal .ncard,
  .js .ailab2.reveal .ailab2__chip,
  .js .ailab2.reveal .ailab2__traces,
  .js .ailab2.reveal .ailab2__pipes path {
    opacity: 1;
    transform: none;
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* Đoạn ống nối tiếp vào chip, cùng nét với ống ở cột giữa */
.ailab2__traces .bus {
  fill: none;
  stroke: #1c2540;
  stroke-width: 10;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.ailab2__traces {
  overflow: visible;
}

/* ==========================================================================
   Nhịp trang v2 — xen sáng/tối như Clarasight:
   sáng (giải pháp) → DẢI TỐI tràn mép (AI + Dự án) → sáng (Lớp học, Về
   BAMFLOW, FAQ) → THẺ XANH (CTA cuối) → footer. Không còn 4 cục màu liền nhau.
   ========================================================================== */

/* ---- Dải tối tràn mép: AI + Dự án chung một nền ---- */
.section--ailab {
  padding: var(--space-24) 0 var(--space-16);
  background: #06080f;
}

.ailab2 {
  padding: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.section--band {
  padding: 0 0 var(--space-20);
  background: #06080f;
}

.section--band .dark {
  padding: var(--space-16) 0 0;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  overflow: visible;
  gap: var(--space-12);
}

.section--band .dark__glow {
  display: none;
}

.section--band .stat {
  background: linear-gradient(180deg, #131a30 0%, #0c1122 100%);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---- Hình AI: gọn, phẳng, đều ---- */
.ailab2__stage {
  grid-template-columns: minmax(0, 1.15fr) 96px minmax(0, 0.95fr);
}

.ailab2__pipes path {
  stroke: rgba(125, 160, 255, 0.28);
  stroke-width: 3;
  filter: none;
}

.ailab2__traces .bus {
  stroke: rgba(125, 160, 255, 0.28);
  stroke-width: 3;
}

.ailab2__chipwrap {
  min-height: 360px;
}

.ailab2__traces .traces path {
  stroke: rgba(125, 160, 255, 0.4);
  stroke-width: 1.25;
}

.ailab2__traces .nodes circle {
  fill: #8fb0ff;
  filter: none;
}

.ailab2 .ailab2__traces .nodes circle {
  animation-duration: 4.8s;
}

.ailab2__chip {
  width: 160px;
  height: 160px;
  border-radius: 28px;
  font-size: 64px;
  font-weight: 600;
  background: linear-gradient(160deg, #1f3a7a 0%, #0e1f4a 100%);
  color: #cfe0ff;
  border: 1px solid rgba(143, 176, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 40px rgba(60, 120, 255, 0.25),
    0 0 0 10px #06080f,
    0 0 0 11px rgba(143, 176, 255, 0.22),
    0 0 48px rgba(60, 120, 255, 0.25);
  animation: chip-breathe-2 5s ease-in-out infinite;
}

.ailab2__chip::after {
  display: none;
}

@keyframes chip-breathe-2 {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 40px rgba(60, 120, 255, 0.25), 0 0 0 10px #06080f, 0 0 0 11px rgba(143, 176, 255, 0.22), 0 0 40px rgba(60, 120, 255, 0.2); }
  50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 52px rgba(60, 120, 255, 0.4), 0 0 0 10px #06080f, 0 0 0 11px rgba(143, 176, 255, 0.35), 0 0 64px rgba(60, 120, 255, 0.35); }
}

.ncard {
  min-height: 124px;
  border-radius: 14px;
}

.ailab2__note {
  margin-top: var(--space-8);
}

/* ---- Lớp học: nền sáng, ba thẻ kẻ mảnh ---- */
.section--light-cta {
  padding-block: var(--space-24) var(--space-6);
}

.section--light-cta .ctacard {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
}

.section--light-cta .ctacard__text h2 {
  color: var(--text-primary);
}

.section--light-cta .ctacard__text p {
  color: var(--text-secondary);
}

.section--light-cta .ctacard__list li {
  background: var(--bg-raised);
  border-color: var(--stroke);
  box-shadow: var(--line-top);
}

.section--light-cta .ctacard__tag {
  color: var(--accent);
}

.section--light-cta .ctacard__list b {
  color: var(--text-primary);
}

.section--light-cta .ctacard__list li > span:last-child {
  color: var(--text-secondary);
}

/* ---- Về BAMFLOW: nền sáng, ô số kẻ mảnh ---- */
.section--about {
  padding-block: var(--space-20) var(--space-8);
}

.section--about .dark {
  padding: var(--space-12) 0 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  border-top: 1px solid var(--stroke);
  overflow: visible;
}

.section--about .dark__glow {
  display: none;
}

.section--about .dark__head h2 {
  color: var(--text-primary);
}

.section--about .dark__person b {
  color: var(--text-primary);
}

.section--about .dark__person span {
  color: var(--text-muted);
}

.section--about .dark__person img {
  border-color: var(--stroke);
}

.section--about .dark__list li {
  color: var(--text-secondary);
}

.section--about .dark__list li::before {
  background: var(--accent-soft);
}

.section--about .dark__list li::after {
  border-color: var(--accent);
}

.section--about .tile {
  background: var(--bg-raised);
  border-color: var(--stroke);
  box-shadow: var(--line-top);
}

.section--about .tile b {
  color: var(--text-primary);
}

.section--about .tile b em {
  color: var(--accent);
}

.section--about .tile span {
  color: var(--text-muted);
}

/* ---- CTA cuối: thẻ xanh duy nhất của trang ---- */
.closing {
  margin-top: var(--space-16);
  padding: var(--space-16) var(--space-8);
  border-radius: 28px;
  background: linear-gradient(135deg, #1d6fd6 0%, #0b3f8c 100%);
  color: #ffffff;
}

.closing h2 {
  color: #ffffff;
}

.closing p {
  color: rgba(255, 255, 255, 0.82);
}

.closing__actions .btn--white {
  background: #ffffff;
  color: #0b3f8c;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .section--ailab {
    padding: var(--space-16) 0 var(--space-12);
  }

  .section--band {
    padding-bottom: var(--space-12);
  }

  .section--band .dark,
  .section--about .dark {
    padding: var(--space-10) 0 0;
  }

  .section--light-cta .ctacard {
    grid-template-columns: 1fr;
  }

  .closing {
    padding: var(--space-12) var(--space-5);
    border-radius: 22px;
  }

  .ailab2__chipwrap {
    min-height: 300px;
  }
}

/* Mobile: sân khấu AI một cột (rule cột 3 ở trên đã đè rule cũ) */
@media (max-width: 960px) {
  .ailab2__stage {
    grid-template-columns: 1fr;
  }
}

/* Phần tử ở trạng thái chờ reveal bị dịch ra ngoài mép → clip theo trục ngang.
   `clip` không tạo vùng cuộn mới, không ảnh hưởng sticky. */
main,
.section--band,
.section--light-cta,
.section--ailab {
  overflow-x: clip;
}

/* ==========================================================================
   Bài toán đã xử lý theo ngành — trong dải tối, lưới 4×2
   ========================================================================== */
.ind {
  padding-top: var(--space-16);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ind__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  margin-bottom: var(--space-10);
}

.ind__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #ffffff;
}

.ind__head p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--text-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}

.ind__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.icard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-5);
  border-radius: 14px;
  background: linear-gradient(180deg, #131a30 0%, #0c1122 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color var(--t-normal) var(--ease), transform var(--t-normal) var(--ease);
}

.icard:hover {
  border-color: rgba(125, 214, 255, 0.45);
  transform: translateY(-2px);
}

.icard h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: #ffffff;
}

.icard ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.icard li {
  position: relative;
  padding-left: 14px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.icard li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7dd6ff;
}

.ind__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-10);
}

.ind__foot .btn--white {
  border-radius: var(--r-round);
}

.js .ind.reveal {
  transform: translateY(24px);
  transition: opacity var(--settle), transform var(--settle);
}

.js .ind.reveal .icard {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1), transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .ind.reveal.is-visible .icard {
  opacity: 1;
  transform: none;
}

.js .ind.reveal.is-visible .icard:nth-child(2) { transition-delay: 70ms; }
.js .ind.reveal.is-visible .icard:nth-child(3) { transition-delay: 140ms; }
.js .ind.reveal.is-visible .icard:nth-child(4) { transition-delay: 210ms; }
.js .ind.reveal.is-visible .icard:nth-child(5) { transition-delay: 280ms; }
.js .ind.reveal.is-visible .icard:nth-child(6) { transition-delay: 350ms; }
.js .ind.reveal.is-visible .icard:nth-child(7) { transition-delay: 420ms; }
.js .ind.reveal.is-visible .icard:nth-child(8) { transition-delay: 490ms; }

/* Footer: liên hệ */
.footer__contact {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.footer__contact a {
  color: var(--text-primary);
  text-decoration: none;
}

.footer__contact a:hover {
  color: var(--accent);
}

.faq2__head p a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 960px) {
  .ind__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ind {
    padding-top: var(--space-10);
  }
}

@media (max-width: 560px) {
  .ind__grid {
    grid-template-columns: 1fr;
  }

  .ind__foot .btn {
    flex: 1 1 100%;
  }
}

/* Dải số liệu dưới hero */
.logos__row--stats .logos__item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-secondary);
  opacity: 1;
}

.logos__row--stats .logos__item b {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.logos__lead--after {
  margin: var(--space-6) 0 0;
}

.footer__made {
  color: var(--text-muted);
}

/* ==========================================================================
   Màn trình diễn "rời rạc → một hệ thống" — scroll-driven.
   --p (0→1) do main.js ghi lên section theo vị trí cuộn; mọi thứ nội suy
   bằng calc(): vị trí, góc xoay, độ mờ. Desktop: section cao 260vh, khung
   dính 100vh. Mobile / reduced-motion: main.js tự tăng --p khi thấy section.
   ========================================================================== */
.morph {
  --p: 0;
  --pe: var(--p);
  position: relative;
  height: 260vh;
  padding: 0;
  background: var(--bg-base);
}

.morph__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(var(--accent-rgb), calc(0.04 + 0.10 * var(--pe))), transparent 70%),
    var(--bg-base);
}

.morph__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
}

/* Tiêu đề: hai câu chồng nhau, chéo mờ theo --p */
.morph__head {
  position: relative;
  min-height: 5.2em;
  width: 100%;
  text-align: center;
}

.morph__title {
  position: absolute;
  inset: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1rem + 2vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text-primary);
}

.morph__title span {
  display: block;
  margin-top: 0.3em;
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-secondary);
}

.morph__title--before {
  opacity: clamp(0, calc(1 - (var(--pe) - 0.3) / 0.2), 1);
  transform: translateY(calc(-14px * clamp(0, (var(--pe) - 0.3) / 0.2, 1)));
}

.morph__title--after {
  opacity: clamp(0, calc((var(--pe) - 0.5) / 0.2), 1);
  transform: translateY(calc(14px * (1 - clamp(0, (var(--pe) - 0.5) / 0.2, 1))));
}

/* Sân khấu */
.morph__stage {
  position: relative;
  width: min(100%, 1040px);
  height: 460px;
}

.morph__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 920px;
  height: 352px;
  transform: translate(-50%, -50%) scale(calc(0.96 + 0.04 * var(--pe)));
  border-radius: 22px;
  background: var(--bg-raised);
  border: 1px solid var(--stroke);
  box-shadow: 0 40px 80px -40px rgba(10, 30, 60, 0.35), 0 0 0 1px rgba(var(--accent-rgb), 0.06);
  opacity: clamp(0, calc((var(--pe) - 0.35) / 0.3), 1);
}

.morph__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 18px;
  border-bottom: 1px solid var(--stroke);
  font-size: 13px;
  color: var(--text-secondary);
}

.morph__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--stroke-strong);
}

.morph__bar span {
  margin-left: 10px;
  font-weight: 600;
  color: var(--text-primary);
}

.morph__bar em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  color: var(--text-muted);
}

/* Thẻ: một phần tử, hai mặt */
.mc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 116px;
  margin: -58px 0 0 -100px;
  border-radius: calc(12px + 2px * var(--pe));
  transform:
    translate(
      calc(var(--cx) + (var(--gx) - var(--cx)) * var(--pe)),
      calc(var(--cy) + (var(--gy) - var(--cy)) * var(--pe))
    )
    rotate(calc(var(--cr) * (1 - var(--pe)) * 1deg));
  will-change: transform;
}

.mc__before,
.mc__after {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 16px;
  border-radius: inherit;
}

/* Mặt "rời rạc": mỗi loại một chất liệu */
.mc__before {
  opacity: clamp(0, calc(1 - (var(--pe) - 0.45) / 0.25), 1);
  box-shadow: 0 18px 40px -22px rgba(10, 30, 60, 0.45);
}

.mc__before b {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
}

.mc__before span {
  font-size: 12px;
  line-height: 1.4;
  color: #4b5563;
}

.mc--excel .mc__before { background: #ffffff; border: 1px solid #cfd8e3; border-top: 6px solid #1d7a3e; }
.mc--zalo  .mc__before { background: #e8f2ff; border: 1px solid #b9d4fb; border-radius: 16px 16px 16px 4px; }
.mc--paper .mc__before { background: #fbf7ec; border: 1px solid #e6dcc4; font-family: "IBM Plex Mono", monospace; }
.mc--photo .mc__before { background: #2b2f36; border: 6px solid #ffffff; box-shadow: 0 18px 40px -22px rgba(0,0,0,.6); }
.mc--photo .mc__before b, .mc--photo .mc__before span { color: #e5e7eb; }
.mc--mail  .mc__before { background: #ffffff; border: 1px solid #d9dee7; border-left: 4px solid #d97706; }
.mc--note  .mc__before { background: #fff2a8; border: 0; box-shadow: 0 18px 40px -22px rgba(120, 90, 0, 0.5); }

/* Mặt "hệ thống": ô dashboard đồng nhất */
.mc__after {
  opacity: clamp(0, calc((var(--pe) - 0.55) / 0.25), 1);
  background: var(--bg-panel);
  border: 1px solid var(--stroke);
  box-shadow: var(--line-top);
}

.mc__after small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.mc__after b {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.mc__after span {
  font-size: 12px;
  color: var(--text-muted);
}

/* 4 thẻ thừa: bay vào cùng vị trí rồi tan đi — "gộp bản trùng" */
.mc--extra {
  opacity: clamp(0, calc(1 - (var(--pe) - 0.4) / 0.3), 1);
}

/* Gợi ý cuộn */
.morph__hint {
  position: relative;
  min-height: 1.6em;
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.morph__hint span {
  position: absolute;
  left: 0;
  right: 0;
}

.morph__hint-before { opacity: clamp(0, calc(1 - var(--pe) / 0.25), 1); }
.morph__hint-after  { opacity: clamp(0, calc((var(--pe) - 0.7) / 0.2), 1); color: var(--text-secondary); font-weight: 500; }

/* ---- Mobile / màn thấp: không dính, tự chạy khi nhìn thấy ---- */
@media (max-width: 960px), (max-height: 640px) {
  .morph {
    height: auto;
    padding: var(--space-16) 0;
  }

  .morph__sticky {
    position: static;
    height: auto;
    overflow: visible;
  }

  .morph__stage {
    height: 420px;
    transform: scale(0.72);
    transform-origin: 50% 50%;
    margin: -50px 0;
  }
}

@media (max-width: 560px) {
  .morph__stage {
    transform: scale(0.42);
    height: 300px;
    margin: -110px 0;
  }

  .morph__head {
    min-height: 6.5em;
  }
}

/* Morph: thu độ toả trạng thái rời rạc để không đè tiêu đề / gợi ý */
.morph {
  --sx: 0.92;
  --sy: 0.78;
}

.mc {
  transform:
    translate(
      calc(var(--cx) * var(--sx) + (var(--gx) - var(--cx) * var(--sx)) * var(--pe)),
      calc(var(--cy) * var(--sy) + (var(--gy) - var(--cy) * var(--sy)) * var(--pe))
    )
    rotate(calc(var(--cr) * (1 - var(--pe)) * 1deg));
}

.morph__stage {
  margin-top: var(--space-2);
}

@media (max-width: 560px) {
  .morph__stage {
    transform: scale(0.52);
    height: 340px;
    margin: -90px 0 -70px;
  }
}

@media (max-width: 560px) {
  .morph__stage {
    transform: scale(0.4);
    height: 300px;
    margin: -110px 0 -90px;
  }
}

/* Trang xem thử riêng morph-demo.html */
.demo-intro,
.demo-outro {
  text-align: center;
}

.demo-intro {
  padding: var(--space-24) 0 var(--space-12);
}

.demo-intro h1 {
  margin: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem);
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text-primary);
}

.demo-intro p,
.demo-outro p {
  max-width: 56ch;
  margin: 0 auto var(--space-6);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-secondary);
}

.demo-outro {
  padding: var(--space-16) 0 var(--space-32);
}

.demo-outro .btn {
  border-radius: var(--r-round);
}

/* ==========================================================================
   Morph v2 — cho chuyển động "có tay người":
   1. mỗi thẻ có --d (0…0.35): tiến độ riêng --lp, thẻ này đi trước thẻ kia
   2. smoothstep --le: vào nhẹ, ra nhẹ, không tuyến tính
   3. đường bay vòng: nhấc lên giữa chặng rồi hạ xuống
   4. ở trạng thái rời rạc, thẻ thở nhẹ (float) và tắt dần khi đã xếp
   5. --pe do main.js ghi theo quán tính (lerp) nên không giật theo nấc chuột
   ========================================================================== */
.mc {
  --d: 0;
  --lp: clamp(0, calc((var(--pe) - var(--d)) / 0.65), 1);
  --le: calc(var(--lp) * var(--lp) * (3 - 2 * var(--lp)));
  --arc: calc(4 * var(--le) * (1 - var(--le)));
  transform:
    translate(
      calc(var(--cx) * var(--sx) + (var(--gx) - var(--cx) * var(--sx)) * var(--le)),
      calc(var(--cy) * var(--sy) + (var(--gy) - var(--cy) * var(--sy)) * var(--le) - 36px * var(--arc))
    )
    rotate(calc(var(--cr) * (1 - var(--le)) * 1deg))
    scale(calc(1 + 0.05 * var(--arc)));
  border-radius: calc(12px + 2px * var(--le));
  z-index: 1;
}

/* Thẻ đang bay nổi lên trên thẻ đã đậu */
.mc[style*="--d:0.0"],
.mc[style*="--d:0.1"] { z-index: 2; }
.mc[style*="--d:0.2"],
.mc[style*="--d:0.3"] { z-index: 3; }

.mc__before {
  opacity: clamp(0, calc(1 - (var(--le) - 0.55) / 0.25), 1);
  box-shadow: 0 calc(18px + 14px * var(--arc)) calc(40px + 20px * var(--arc)) -22px rgba(10, 30, 60, calc(0.45 + 0.25 * var(--arc)));
}

.mc__after {
  opacity: clamp(0, calc((var(--le) - 0.6) / 0.25), 1);
}

.mc--extra {
  opacity: clamp(0, calc(1 - (var(--le) - 0.45) / 0.3), 1);
}

/* Thở nhẹ khi rời rạc: biên độ giảm về 0 khi đã đậu */
.mc__before {
  --amp: calc(1 - var(--le));
  animation: mc-float var(--fd, 6s) ease-in-out infinite alternate;
  animation-delay: var(--fo, 0s);
}

@keyframes mc-float {
  from { transform: translate(0, calc(-5px * var(--amp))) rotate(calc(-0.6deg * var(--amp))); }
  to   { transform: translate(calc(3px * var(--amp)), calc(5px * var(--amp))) rotate(calc(0.6deg * var(--amp))); }
}

/* Khung app: hiện sau các thẻ đầu tiên, trước các thẻ cuối */
.morph__frame {
  opacity: clamp(0, calc((var(--pe) - 0.3) / 0.25), 1);
  transform: translate(-50%, -50%) scale(calc(0.97 + 0.03 * clamp(0, (var(--pe) - 0.3) / 0.4, 1)));
}

/* Tiêu đề đổi sớm hơn một chút để câu "một hệ thống" đón thẻ về */
.morph__title--before {
  opacity: clamp(0, calc(1 - (var(--pe) - 0.35) / 0.15), 1);
}

.morph__title--after {
  opacity: clamp(0, calc((var(--pe) - 0.5) / 0.15), 1);
}

@media (prefers-reduced-motion: reduce) {
  .mc__before {
    animation: none;
  }
}

/* Morph: quãng cuộn ngắn hơn; xếp xong thì nhả dính, section co về 1 màn hình */
.morph {
  height: 200vh;
}

.morph.is-done {
  height: 100vh;
}

@media (max-width: 960px), (max-height: 640px) {
  .morph,
  .morph.is-done {
    height: auto;
  }
}

/* Morph: khi đã xếp xong và đã dọn quãng cuộn, section = 1 màn hình, khung dính không còn quãng chạy */
.morph.is-settled {
  height: 100vh;
}

.morph.is-done .morph__sticky {
  transition: none;
}

/* Tắt scroll anchoring của trình duyệt trong morph: JS tự bù vị trí cuộn,
   nếu không Chrome bù thêm lần nữa khi chiều cao section đổi → nhảy kép. */
.morph,
.morph * {
  overflow-anchor: none;
}

/* Tắt scroll anchoring toàn trang: morph tự bù vị trí cuộn khi đổi chiều cao */
html,
body {
  overflow-anchor: none;
}

/* Khung đóng băng phải trải hết chiều ngang section */
.morph.is-done .morph__sticky {
  left: 0;
  right: 0;
  width: 100%;
}

/* ==========================================================================
   Màn "một đơn hàng đi qua hệ thống" — tự chạy, lặp 12 s, không phụ thuộc cuộn.
   Mọi thứ chạy trên một dòng thời gian chung --T = 12s (1 s = 8.333%).
   Sân khấu 1120×520 px, thu phóng bằng --s (JS) và nghiêng 3D theo chuột.
   ========================================================================== */
.section--flow {
  padding: var(--space-24) 0;
  background: #06080f;
  overflow-x: clip;
}

.flowx {
  --T: 12s;
  color: #ffffff;
}

.flowx__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  margin-bottom: var(--space-12);
}

.flowx__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #ffffff;
}

.flowx__head p {
  margin: 0;
  max-width: 60ch;
  font-size: var(--text-md);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}

/* Khung nghiêng theo chuột */
.flowx__tilt {
  --rx: 0deg;
  --ry: 0deg;
  --s: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 1120 / 520;
  perspective: 1600px;
}

.flowx__stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1120px;
  height: 520px;
  transform-origin: 0 0;
  transform: scale(var(--s)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 24px;
  background: #0a0f1f;
  border: 1px solid rgba(159, 214, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 60px 120px -60px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

.flowx__beam {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(76, 194, 255, 0.28) 0%, rgba(76, 194, 255, 0.08) 22%, transparent 42%),
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.2px) 0 0 / 28px 28px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%);
}

/* ---- Đường mạch và hạt sáng ---- */
.flowx__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.flowx__wires .wire {
  fill: none;
  stroke: rgba(159, 214, 255, 0.18);
  stroke-width: 2;
  stroke-linecap: round;
}

.flowx__wires .dot {
  fill: #9fd6ff;
  filter: drop-shadow(0 0 8px rgba(125, 214, 255, 1));
  opacity: 0;
  offset-rotate: 0deg;
  animation-duration: var(--T);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* 1.0–2.2 s : Zalo → AI */
.dot--1 { offset-path: path("M250 120 C 330 120, 340 240, 420 240"); animation-name: dot-1; }
@keyframes dot-1 {
  0%, 8.3% { offset-distance: 0%; opacity: 0; }
  9%      { opacity: 1; }
  18.3%   { offset-distance: 100%; opacity: 1; }
  18.6%, 100% { offset-distance: 100%; opacity: 0; }
}

/* 3.6–4.2 s : AI → phiếu */
.dot--4 { offset-path: path("M520 240 H 600"); animation-name: dot-4; }
@keyframes dot-4 {
  0%, 30% { offset-distance: 0%; opacity: 0; }
  30.5%   { opacity: 1; }
  35%     { offset-distance: 100%; opacity: 1; }
  35.3%, 100% { offset-distance: 100%; opacity: 0; }
}

/* 7.8–8.6 s : phiếu → nút chia */
.dot--5 { offset-path: path("M800 240 H 830"); animation-name: dot-5; }
@keyframes dot-5 {
  0%, 65% { offset-distance: 0%; opacity: 0; }
  65.5%   { opacity: 1; }
  71.6%   { offset-distance: 100%; opacity: 1; }
  72%, 100% { offset-distance: 100%; opacity: 0; }
}

/* 8.6–9.4 s : chia ba nhánh */
.dot--6 { offset-path: path("M830 240 C 870 240, 870 110, 910 110"); animation-name: dot-6; }
.dot--7 { offset-path: path("M830 240 H 910"); animation-name: dot-6; }
.dot--8 { offset-path: path("M830 240 C 870 240, 870 370, 910 370"); animation-name: dot-6; }
@keyframes dot-6 {
  0%, 71.6% { offset-distance: 0%; opacity: 0; }
  72%     { opacity: 1; }
  78.3%   { offset-distance: 100%; opacity: 1; }
  78.6%, 100% { offset-distance: 100%; opacity: 0; }
}

/* ---- Thẻ chung ---- */
.fx {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 190px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #131a30 0%, #0c1122 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
  animation-duration: var(--T);
  animation-iteration-count: infinite;
}

.fx b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}

.fx__tag {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7dd6ff;
}

/* Nguồn: tin Zalo sáng lên lúc 0.5 s */
.fx--src {
  opacity: 0.55;
}

.fx--zalo {
  animation-name: src-zalo;
}

@keyframes src-zalo {
  0%, 3%   { opacity: 0.55; border-color: rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); transform: none; }
  6%, 20%  { opacity: 1; border-color: rgba(125, 214, 255, 0.8); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 30px rgba(76, 194, 255, 0.35); transform: translateX(4px); }
  26%, 100% { opacity: 0.55; border-color: rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); transform: none; }
}

/* AI */
.fx--ai {
  width: 100px;
  height: 100px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.fx__chip {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(160deg, #1f3a7a 0%, #0e1f4a 100%);
  border: 1px solid rgba(143, 176, 255, 0.45);
  color: #cfe0ff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  box-shadow: inset 0 0 24px rgba(60, 120, 255, 0.25), 0 0 30px rgba(60, 120, 255, 0.2);
  animation: ai-work var(--T) infinite;
}

/* 2.2–3.6 s : AI làm việc */
@keyframes ai-work {
  0%, 18%  { box-shadow: inset 0 0 24px rgba(60,120,255,0.25), 0 0 30px rgba(60,120,255,0.2); transform: scale(1); }
  20%, 30% { box-shadow: inset 0 0 40px rgba(60,120,255,0.5), 0 0 70px rgba(76,194,255,0.6); transform: scale(1.06); }
  34%, 100% { box-shadow: inset 0 0 24px rgba(60,120,255,0.25), 0 0 30px rgba(60,120,255,0.2); transform: scale(1); }
}

.fx__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(125, 214, 255, 0.5);
  opacity: 0;
  animation: ai-ring var(--T) infinite;
}

@keyframes ai-ring {
  0%, 18% { transform: scale(0.7); opacity: 0; }
  19%     { opacity: 0.9; }
  30%     { transform: scale(1.4); opacity: 0; }
  100%    { transform: scale(1.4); opacity: 0; }
}

.fx__status {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  white-space: nowrap;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(159, 214, 255, 0.85);
}

.fx__status i {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  opacity: 0;
  animation-duration: var(--T);
  animation-iteration-count: infinite;
}

.fx__status i:nth-child(1) { animation-name: st-1; }
.fx__status i:nth-child(2) { animation-name: st-2; }
@keyframes st-1 { 0%, 18% { opacity: 0; } 19%, 29% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes st-2 { 0%, 30% { opacity: 0; } 31%, 45% { opacity: 1; } 47%, 100% { opacity: 0; } }

/* Phiếu nháp: hiện lúc 4.2 s, từng trường gõ vào, duyệt lúc 7.4 s */
.fx--draft {
  width: 180px;
  padding: 0;
  overflow: hidden;
  animation-name: draft-in;
}

@keyframes draft-in {
  0%, 33%  { opacity: 0; transform: translateY(8px); border-color: rgba(255,255,255,0.09); }
  36%, 60% { opacity: 1; transform: none; border-color: rgba(125, 214, 255, 0.5); }
  63%, 94% { opacity: 1; transform: none; border-color: rgba(74, 222, 128, 0.6); }
  97%, 100% { opacity: 0; transform: translateY(8px); border-color: rgba(255,255,255,0.09); }
}

.fx__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 600;
  color: #ffffff;
}

.fx__state {
  position: relative;
  width: 62px;
  height: 18px;
  font-style: normal;
}

.fx__state i {
  position: absolute;
  right: 0;
  top: 0;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  opacity: 0;
  animation-duration: var(--T);
  animation-iteration-count: infinite;
}

.fx__state i:nth-child(1) { background: rgba(250, 204, 21, 0.16); color: #facc15; animation-name: state-draft; }
.fx__state i:nth-child(2) { background: rgba(74, 222, 128, 0.16); color: #4ade80; animation-name: state-ok; }
@keyframes state-draft { 0%, 35% { opacity: 0; } 36%, 62% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes state-ok    { 0%, 62% { opacity: 0; } 63%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }

.fx__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.fx__row span { color: rgba(255, 255, 255, 0.5); }

.fx__row b {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
  text-align: right;
  animation-duration: var(--T);
  animation-iteration-count: infinite;
  animation-timing-function: steps(18);
}

.fx__type--1 { animation-name: type-1; }
.fx__type--2 { animation-name: type-2; }
.fx__type--3 { animation-name: type-3; }
.fx__type--4 { animation-name: type-4; }
@keyframes type-1 { 0%, 35% { max-width: 0; } 39%, 96% { max-width: 130px; } 97%, 100% { max-width: 0; } }
@keyframes type-2 { 0%, 39% { max-width: 0; } 43%, 96% { max-width: 130px; } 97%, 100% { max-width: 0; } }
@keyframes type-3 { 0%, 43% { max-width: 0; } 46%, 96% { max-width: 130px; } 97%, 100% { max-width: 0; } }
@keyframes type-4 { 0%, 46% { max-width: 0; } 50%, 96% { max-width: 130px; } 97%, 100% { max-width: 0; } }

.fx__btn {
  position: relative;
  display: block;
  width: calc(100% - 24px);
  height: 30px;
  margin: 8px 12px 12px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #0b3f8c;
  font: 700 12px/30px var(--font-body);
  cursor: default;
  animation: btn-press var(--T) infinite;
}

.fx__btn i {
  position: absolute;
  inset: 0;
  font-style: normal;
  opacity: 0;
  animation-duration: var(--T);
  animation-iteration-count: infinite;
}

.fx__btn i:nth-child(1) { animation-name: btn-l1; }
.fx__btn i:nth-child(2) { animation-name: btn-l2; color: #ffffff; }
@keyframes btn-l1 { 0%, 35% { opacity: 0; } 36%, 61.5% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes btn-l2 { 0%, 62% { opacity: 0; } 62.5%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* 7.4 s : bấm */
@keyframes btn-press {
  0%, 60.5% { transform: scale(1); background: #ffffff; }
  61.2%     { transform: scale(0.94); background: #dbeafe; }
  62%, 96%  { transform: scale(1); background: #16a34a; box-shadow: 0 0 24px rgba(74, 222, 128, 0.5); }
  97%, 100% { transform: scale(1); background: #ffffff; box-shadow: none; }
}

/* Con trỏ: bay tới nút 6.2–7.4 s, bấm, rời đi */
.fx__cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  opacity: 0;
  animation: cursor-move var(--T) infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cursor-move {
  0%, 50%  { transform: translate(760px, 470px); opacity: 0; }
  52%      { opacity: 1; }
  61%      { transform: translate(690px, 322px); opacity: 1; }
  61.5%    { transform: translate(690px, 322px) scale(0.85); }
  62.5%    { transform: translate(690px, 322px) scale(1); opacity: 1; }
  68%      { transform: translate(720px, 380px); opacity: 0; }
  100%     { transform: translate(760px, 470px); opacity: 0; }
}

/* ---- Đầu ra: 9.4–10.6 s ---- */
.fx--out {
  opacity: 0.45;
}

.fx--stock { animation-name: out-stock; }
.fx--reply { animation-name: out-reply; }
.fx--chart { animation-name: out-chart; }

@keyframes out-stock {
  0%, 77% { opacity: 0.45; border-color: rgba(255,255,255,0.09); }
  79%, 95% { opacity: 1; border-color: rgba(125, 214, 255, 0.6); }
  98%, 100% { opacity: 0.45; border-color: rgba(255,255,255,0.09); }
}

@keyframes out-reply {
  0%, 78% { opacity: 0.45; transform: none; }
  80%, 95% { opacity: 1; transform: translateX(-4px); border-color: rgba(74, 222, 128, 0.5); }
  98%, 100% { opacity: 0.45; transform: none; }
}

@keyframes out-chart {
  0%, 79% { opacity: 0.45; }
  81%, 95% { opacity: 1; }
  98%, 100% { opacity: 0.45; }
}

/* Số tồn kho đếm xuống từng nấc */
.fx__num {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.fx__num::after {
  content: "1.284";
  animation: num-tick var(--T) infinite steps(1, end);
}

.fx__num { font-size: 0; }
.fx__num::after { font-size: 26px; }

@keyframes num-tick {
  0%, 79%  { content: "1.284"; color: #ffffff; }
  80%      { content: "1.234"; color: #7dd6ff; }
  81.5%    { content: "1.184"; color: #7dd6ff; }
  83%      { content: "1.134"; color: #7dd6ff; }
  84.5%, 96% { content: "1.084"; color: #ffffff; }
  97%, 100% { content: "1.284"; color: #ffffff; }
}

.fx__delta {
  display: block;
  color: #4ade80;
  opacity: 0;
  animation: delta-in var(--T) infinite;
}

@keyframes delta-in { 0%, 84% { opacity: 0; } 86%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }

.fx__bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 5px;
  height: 56px;
  margin-top: 6px;
}

.fx__bars i {
  display: block;
  height: var(--h);
  border-radius: 4px 4px 2px 2px;
  background: rgba(125, 214, 255, 0.45);
}

.fx__bars i.grow {
  background: #7dd6ff;
  box-shadow: 0 0 14px rgba(125, 214, 255, 0.6);
  animation: bar-grow var(--T) infinite cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bar-grow { 0%, 80% { height: 40%; } 88%, 96% { height: 82%; } 98%, 100% { height: 40%; } }

/* Chú giải */
.flowx__legend {
  position: absolute;
  left: 20px;
  bottom: 16px;
  display: flex;
  gap: 18px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.flowx__legend span { display: inline-flex; align-items: center; gap: 6px; }
.flowx__legend .l { width: 8px; height: 8px; border-radius: 50%; }
.l--ai { background: #7dd6ff; }
.l--human { background: #4ade80; }
.l--rule { background: rgba(255, 255, 255, 0.35); }

/* Reveal cả khối */
.js .flowx.reveal { transform: translateY(24px); transition: opacity var(--settle), transform var(--settle); }

@media (prefers-reduced-motion: reduce) {
  .flowx *, .flowx *::after { animation: none !important; }
  .fx--src, .fx--out { opacity: 1; }
  .fx--draft { opacity: 1; transform: none; }
  .fx__row b { max-width: 130px; }
  .fx__btn i:nth-child(2), .fx__state i:nth-child(2) { opacity: 1; }
  .fx__delta { opacity: 1; }
  .flowx__stage { transform: scale(var(--s)); }
}

.demo-page--dark { background: #06080f; }
.demo-outro--dark { background: #06080f; }
.demo-outro--dark p { color: rgba(255,255,255,0.65); }

/* Flow: phiếu rộng hơn để không cắt chữ; ô số tồn không lặp */
.fx--draft { width: 200px; }
@keyframes type-1 { 0%, 35% { max-width: 0; } 39%, 96% { max-width: 150px; } 97%, 100% { max-width: 0; } }
@keyframes type-2 { 0%, 39% { max-width: 0; } 43%, 96% { max-width: 150px; } 97%, 100% { max-width: 0; } }
@keyframes type-3 { 0%, 43% { max-width: 0; } 46%, 96% { max-width: 150px; } 97%, 100% { max-width: 0; } }
@keyframes type-4 { 0%, 46% { max-width: 0; } 50%, 96% { max-width: 150px; } 97%, 100% { max-width: 0; } }
.fx .fx__num { font-size: 26px; }

/* ==========================================================================
   Hero isometric (Sentry / Syntra): nền đen loang xanh, chữ trái, khối 3D
   4 tầng phát sáng bên phải, nhãn bay quanh có đường nối. CSS 3D thuần.
   ========================================================================== */
.isohero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + var(--space-16)) 0 var(--space-20);
  color: #ffffff;
  background:
    radial-gradient(ellipse 70% 60% at 70% 40%, rgba(37, 99, 235, 0.55), transparent 70%),
    linear-gradient(180deg, #05070f 0%, #0a1a5c 55%, #1d4ed8 100%);
}

.isohero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.06));
  pointer-events: none;
}

.isohero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-10);
}

.isohero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.isohero__chips {
  display: flex;
  gap: 8px;
}

.isohero__chips span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.75);
}

.isohero__chips i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
}

.isohero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: #ffffff;
}

.isohero__title span {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

.isohero__sub {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-base);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.isohero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.isohero__actions .btn {
  border-radius: 8px;
}

/* ---- Khối isometric ---- */
.iso {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  margin-inline: auto;
  perspective: 1400px;
}

.iso__glow {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 70%;
  height: 40%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(96, 165, 250, 0.55), rgba(37, 99, 235, 0.15) 50%, transparent 72%);
  filter: blur(18px);
  animation: iso-glow 6s ease-in-out infinite alternate;
}

@keyframes iso-glow {
  from { opacity: 0.75; transform: translate(-50%, -50%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

.iso__scene {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 240px;
  height: 240px;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-45deg);
  animation: iso-float 7s ease-in-out infinite alternate;
}

@keyframes iso-float {
  from { transform: translate(-50%, -52%) rotateX(58deg) rotateZ(-45deg); }
  to   { transform: translate(-50%, -48%) rotateX(58deg) rotateZ(-45deg); }
}

.iso__layer {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid rgba(147, 197, 253, 0.55);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(30, 58, 138, 0.55));
  box-shadow:
    inset 0 0 40px rgba(96, 165, 250, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 30px 60px -20px rgba(0, 0, 0, 0.8);
  transform-style: preserve-3d;
  animation: iso-layer 7s ease-in-out infinite alternate;
}

/* Cạnh dày: giả lập bằng pseudo dịch xuống */
.iso__layer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.9), rgba(15, 23, 42, 0.95));
  transform: translateZ(-14px);
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.25);
}

.iso__layer--1 { transform: translateZ(0);    --d: 0s; }
.iso__layer--2 { transform: translateZ(52px);  --d: 0.4s; width: 86%; height: 86%; margin: 7%; }
.iso__layer--3 { transform: translateZ(104px); --d: 0.8s; width: 72%; height: 72%; margin: 14%; }
.iso__layer--4 { transform: translateZ(156px); --d: 1.2s; width: 58%; height: 58%; margin: 21%; background: linear-gradient(135deg, rgba(96, 165, 250, 0.6), rgba(37, 99, 235, 0.7)); border-color: rgba(191, 219, 254, 0.9); box-shadow: inset 0 0 40px rgba(147, 197, 253, 0.45), 0 0 60px rgba(96, 165, 250, 0.55); }

@keyframes iso-layer {
  from { filter: brightness(1); }
  to   { filter: brightness(1.15); }
}

.iso__layer { animation-delay: var(--d); }

.iso__grid {
  position: absolute;
  inset: 10px;
  border-radius: 10px;
  background-image:
    linear-gradient(rgba(191, 219, 254, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 219, 254, 0.25) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 80%);
}

.iso__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%) translateZ(2px);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #93c5fd 40%, transparent 70%);
  box-shadow: 0 0 30px 10px rgba(191, 219, 254, 0.6);
  animation: iso-core 2.4s ease-in-out infinite;
}

@keyframes iso-core {
  0%, 100% { transform: translate(-50%, -50%) translateZ(2px) scale(1); opacity: 0.9; }
  50%      { transform: translate(-50%, -50%) translateZ(2px) scale(1.25); opacity: 1; }
}

.iso__ring {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  border: 1px dashed rgba(147, 197, 253, 0.35);
  transform: translateZ(-6px);
  animation: iso-spin 30s linear infinite;
}

.iso__ring::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #bfdbfe;
  box-shadow: 0 0 10px #bfdbfe;
}

@keyframes iso-spin { to { transform: translateZ(-6px) rotate(360deg); } }

/* Nhãn bay quanh */
.iso__label {
  position: absolute;
  display: grid;
  gap: 2px;
  padding: 8px 12px 8px 22px;
  border-radius: 10px;
  background: rgba(10, 16, 40, 0.7);
  border: 1px solid rgba(147, 197, 253, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 11px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  animation: label-bob 5s ease-in-out infinite alternate;
}

.iso__label b {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
}

.iso__label i {
  position: absolute;
  left: 9px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7dd6ff;
  box-shadow: 0 0 8px #7dd6ff;
}

.iso__label--a { left: 0;     top: 70px;  animation-delay: 0s; }
.iso__label--b { right: 0;    top: 104px; animation-delay: 1.2s; }
.iso__label--c { left: 0;     top: 346px; animation-delay: 2.1s; }
.iso__label--d { right: 0;    top: 374px; animation-delay: 0.7s; }

@keyframes label-bob {
  from { transform: translateY(-4px); }
  to   { transform: translateY(4px); }
}

.iso__tag {
  position: absolute;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.8);
  animation: label-bob 6s ease-in-out infinite alternate;
}

.iso__tag--1 { left: 42%;  top: 8%;  animation-delay: 0.3s; }
.iso__tag--2 { right: 8%;  top: 50%; animation-delay: 1.5s; }
.iso__tag--3 { left: 8%;   top: 56%; animation-delay: 0.9s; }
.iso__tag--4 { left: 46%;  bottom: 6%; animation-delay: 2.2s; }

.iso__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.iso__lines path {
  fill: none;
  stroke: rgba(147, 197, 253, 0.45);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

/* ---- Bước quy trình trên dải gradient ---- */
.steps {
  padding: var(--space-24) 0;
  background: linear-gradient(180deg, #1d4ed8 0%, #0a1a5c 100%);
  color: #ffffff;
}

.steps__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  margin-bottom: var(--space-12);
}

.steps__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #ffffff;
}

.steps__head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.steps__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: var(--space-6) var(--space-5);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform var(--t-normal) var(--ease), background var(--t-normal) var(--ease);
}

.step:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.1);
}

.step b {
  position: absolute;
  right: 8px;
  top: -18px;
  font-family: var(--font-display);
  font-size: 128px;
  line-height: 1;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.1);
  letter-spacing: -0.05em;
}

.step h3 {
  position: relative;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: #ffffff;
}

.step p {
  position: relative;
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 960px) {
  .isohero__grid {
    grid-template-columns: 1fr;
  }

  .isohero__copy {
    align-items: center;
    text-align: center;
  }

  .isohero__actions {
    justify-content: center;
  }

  .iso {
    max-width: 440px;
  }

  .iso__scene {
    width: 190px;
    height: 190px;
  }

  .iso__layer--2 { transform: translateZ(42px); }
  .iso__layer--3 { transform: translateZ(84px); }
  .iso__layer--4 { transform: translateZ(126px); }

  .iso__label { font-size: 10px; padding: 6px 10px 6px 20px; }
  .iso__label--c { top: 300px; }
  .iso__label--d { top: 330px; }

  .steps__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .iso { max-width: 340px; }
  .iso__lines { display: none; }
  .iso__label--a { top: 20px; }
  .iso__label--b { top: 48px; }
  .iso__label--c { top: 262px; }
  .iso__label--d { top: 290px; }
  .steps__row { grid-template-columns: 1fr; }
  .step { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .iso__glow, .iso__scene, .iso__layer, .iso__core, .iso__ring, .iso__label, .iso__tag { animation: none; }
}

@media (max-width: 560px) {
  .iso__tag--4 { left: 8%; bottom: 4%; }
  .iso__label--d { top: 300px; }
}

/* Dải 5 bước trong trang chính: đứng giữa hai section sáng */
.steps.section {
  padding-block: var(--space-20);
}

.fillu--cost .fillu__row em {
  color: var(--accent);
  font-weight: 600;
}

/* ==========================================================================
   Ba phương án cho khối AI — ai-options.html
   ========================================================================== */
.opt-tag {
  display: inline-block;
  margin-bottom: var(--space-8);
  padding: 4px 10px;
  border-radius: 6px;
  background: #fde68a;
  color: #4a3a00;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.opt-tag--onDark { background: #fde68a; }

/* ---- A ---- */
.aiA {
  padding-block: var(--space-24);
  background:
    radial-gradient(ellipse 50% 60% at 70% 50%, rgba(var(--accent-rgb), 0.12), transparent 70%),
    var(--bg-base);
}

.aiA__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--space-12);
}

.aiA__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.aiA__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--text-primary);
}

.aiA__title em {
  font-style: normal;
  color: var(--accent);
}

.aiA__copy p {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-secondary);
}

.aiA__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.aiA__list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-md);
  color: var(--text-secondary);
}

.aiA__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.aiA__list b { color: var(--text-primary); }

/* Khối 3D bản sáng */
.iso--light .iso__glow {
  background: radial-gradient(ellipse, rgba(var(--accent-rgb), 0.45), rgba(var(--accent-rgb), 0.1) 50%, transparent 72%);
}

.iso--light .iso__layer {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.45));
  box-shadow: inset 0 0 40px rgba(var(--accent-rgb), 0.2), 0 30px 60px -24px rgba(10, 40, 90, 0.45);
}

.iso--light .iso__layer::before {
  background: linear-gradient(135deg, #1d4ed8, #0b1633);
}

.iso--light .iso__layer--4 {
  background: linear-gradient(135deg, #2b7fe6, #0b3f8c);
  border-color: #bfdbfe;
  box-shadow: inset 0 0 40px rgba(147, 197, 253, 0.5), 0 0 60px rgba(var(--accent-rgb), 0.5);
}

.iso__ai {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(4px) rotateZ(45deg) rotateX(-58deg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.8);
}

.iso--light .iso__core { opacity: 0.55; }

.iso--light .iso__label {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--stroke);
  color: var(--text-secondary);
  box-shadow: 0 12px 30px -16px rgba(10, 40, 90, 0.35);
}

.iso--light .iso__label b { color: var(--text-primary); }
.iso--light .iso__label i { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

.iso--light .iso__tag {
  background: var(--bg-raised);
  border-color: var(--stroke);
  color: var(--text-secondary);
}

.iso--light .iso__lines path { stroke: rgba(var(--accent-rgb), 0.5); }
.iso--light .iso__ring { border-color: rgba(var(--accent-rgb), 0.35); }
.iso--light .iso__ring::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* ---- B ---- */
.aiB {
  padding-block: var(--space-24);
  color: #ffffff;
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(37, 99, 235, 0.6), transparent 70%),
    linear-gradient(180deg, #06080f 0%, #0a1a5c 70%, #1d4ed8 100%);
}

.aiB__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  margin-bottom: var(--space-10);
}

.aiB__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: #ffffff;
}

.aiB__head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

.canvas {
  position: relative;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.2);
  overflow: visible;
}

.canvas__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 18px 18px 0 0;
  background: #f8fafc;
  font-size: 12px;
  color: #475569;
}

.canvas__tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: #e2e8f0;
}

.canvas__tabs b, .canvas__tabs i {
  padding: 4px 10px;
  border-radius: 6px;
  font-style: normal;
  font-weight: 500;
}

.canvas__tabs b { background: #ffffff; color: #0f172a; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

.canvas__run { margin-left: auto; padding: 5px 10px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; }
.canvas__pub { padding: 5px 12px; border-radius: 6px; background: #1d6fd6; color: #fff; font-weight: 600; }

.canvas__body {
  position: relative;
  height: 400px;
  border-radius: 0 0 18px 18px;
  overflow: hidden;
  background: #fbfcfe;
}

.canvas__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1.2px);
  background-size: 22px 22px;
}

.canvas__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.canvas__wires .cw {
  fill: none;
  stroke: #cbd5e1;
  stroke-width: 2;
}

.canvas__wires .cw--flow {
  stroke: #1d6fd6;
  stroke-dasharray: 8 14;
  animation: cw-flow 1.6s linear infinite;
  opacity: 0.9;
}

@keyframes cw-flow { to { stroke-dashoffset: -44; } }

.node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 240px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.35);
  font-size: 12px;
  line-height: 1.45;
  color: #475569;
  animation: node-pulse 6.4s ease-in-out infinite;
}

.node--trigger:nth-child(1) { --d: 0s; }
.node--trigger:nth-child(2) { --d: 0.5s; }
.node--ai { --d: 1.4s; border-color: #93c5fd; box-shadow: 0 0 0 4px rgba(29, 111, 214, 0.08), 0 20px 40px -20px rgba(29, 111, 214, 0.5); }
.node--human { --d: 2.8s; }
.node--act { --d: 3.4s; }
.node { animation-delay: var(--d); }

@keyframes node-pulse {
  0%, 18%, 100% { transform: translateY(0); box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.35); }
  6%           { transform: translateY(-3px); box-shadow: 0 0 0 4px rgba(29, 111, 214, 0.14), 0 20px 40px -18px rgba(29, 111, 214, 0.55); }
}

.node b { display: block; margin: 6px 0 4px; font-size: 13px; font-weight: 600; color: #0f172a; }
.node p { margin: 0; }

.node__kind {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.node__kind--trigger { background: #e0f2fe; color: #0369a1; }
.node__kind--ai      { background: #ede9fe; color: #6d28d9; }
.node__kind--human   { background: #dcfce7; color: #15803d; }
.node__kind--act     { background: #ffedd5; color: #c2410c; }

.node__prompt {
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 11px;
}

.node__prompt span {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e2e8f0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #334155;
}

.node__foot {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  color: #64748b;
}

.node__foot i { font-style: normal; padding: 1px 6px; border-radius: 4px; background: #f1f5f9; }

.dock {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px #e2e8f0;
}

.dock__item {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--c, #1d6fd6);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  transition: transform var(--t-normal) var(--ease);
}

.dock__item:hover { transform: translateY(-6px) scale(1.08); }
.dock__item--more { background: #f1f5f9; color: #64748b; }

/* ---- C ---- */
.aiC {
  padding-block: var(--space-24);
  background: var(--bg-base);
}

.aiC__giant {
  margin: 0 0 var(--space-8);
  font-family: var(--font-display);
  font-size: clamp(5rem, 2rem + 14vw, 12rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-weight: 800;
  color: var(--text-primary);
}

.aiC__giant span { color: var(--accent); }

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(220px, auto);
  gap: var(--space-4);
}

.bcard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-6);
  border-radius: 20px;
  background: var(--bg-raised);
  border: 1px solid var(--stroke);
  box-shadow: var(--line-top);
  transition: transform var(--t-normal) var(--ease), box-shadow var(--t-normal) var(--ease);
}

.bcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.bcard__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.bcard h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.25;
  font-weight: 600;
  color: var(--text-primary);
}

.bcard p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

.bcard--blue {
  grid-column: span 2;
  grid-row: span 2;
  background: linear-gradient(135deg, #1d6fd6 0%, #0b3f8c 100%);
  border-color: transparent;
  color: #ffffff;
}

.bcard--blue h3 { font-size: var(--text-2xl); color: #ffffff; }
.bcard--blue p { color: rgba(255, 255, 255, 0.8); font-size: var(--text-md); }
.bcard--blue .bcard__label { color: rgba(255, 255, 255, 0.6); }

.bcard--wide { grid-column: span 2; }

/* Khối lập phương nhỏ (isometric) */
.cube {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(45deg);
  animation: cube-spin 14s linear infinite;
}

.cube i {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: var(--accent);
}

.cube i:nth-child(1) { transform: translateZ(24px); background: #7dd6ff; }
.cube i:nth-child(2) { transform: rotateY(90deg) translateZ(24px); background: var(--accent); }
.cube i:nth-child(3) { transform: rotateX(90deg) translateZ(24px); background: #0b3f8c; }

.cube--lg { width: 110px; height: 110px; right: 32px; bottom: 32px; }
.cube--lg i:nth-child(1) { transform: translateZ(55px); background: #ffb347; }
.cube--lg i:nth-child(2) { transform: rotateY(90deg) translateZ(55px); background: #ff8c1a; }
.cube--lg i:nth-child(3) { transform: rotateX(90deg) translateZ(55px); background: #ffd28a; }

.cube--stack i:nth-child(1) { transform: translateZ(24px) translateY(-14px); }
.cube--ring i { border-radius: 50%; }
.cube--doc i { border-radius: 3px; }

@keyframes cube-spin { to { transform: rotateX(-30deg) rotateY(405deg); } }

@media (max-width: 960px) {
  .aiA__grid { grid-template-columns: 1fr; }
  .canvas__body { height: 640px; }
  .node { width: min(240px, 44%); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bcard--blue, .bcard--wide { grid-column: span 1; }
  .canvas__body { height: 760px; }
  .node { width: 86%; }
}

@media (prefers-reduced-motion: reduce) {
  .cw--flow, .node, .cube { animation: none; }
}

/* B: sân khấu cố định để dây khớp node */
.canvas__body { display: grid; place-items: center; }
.canvas__stage { position: relative; width: 1040px; height: 400px; max-width: 100%; }
.canvas__wires { z-index: 0; }
.canvas__stage .node { z-index: 1; }

/* C: khối lập phương SVG thay cho CSS 3D */
svg.cube {
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 56px;
  height: auto;
  transform: none;
  animation: cube-bob 5s ease-in-out infinite alternate;
  filter: drop-shadow(0 10px 16px rgba(10, 40, 90, 0.25));
}

svg.cube--lg { width: 150px; right: 36px; bottom: 28px; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.35)); }
svg.cube--stack { transform: translateY(-6px); }
svg.cube--ring { transform: scale(0.9); }
svg.cube--doc { transform: rotate(-6deg); }

@keyframes cube-bob { from { translate: 0 0; } to { translate: 0 -6px; } }

@media (max-width: 960px) {
  .canvas__stage { width: 100%; height: 100%; }
}

/* ==========================================================================
   Các section "màn hình sản phẩm nổi trên nền" — cùng ngôn ngữ phương án B
   ========================================================================== */
.shot { padding-block: var(--space-24); }

.shot--dark {
  color: #ffffff;
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(37, 99, 235, 0.55), transparent 70%),
    linear-gradient(180deg, #06080f 0%, #0a1a5c 70%, #1d4ed8 100%);
}

.shot--dark2 {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(37, 99, 235, 0.5), transparent 70%),
    linear-gradient(180deg, #1d4ed8 0%, #0a1a5c 30%, #06080f 100%);
}

.shot--light { background: var(--bg-base); }

.shot__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  margin-bottom: var(--space-10);
}

.shot__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: inherit;
}

.shot__head p {
  margin: 0;
  max-width: 56ch;
  font-size: var(--text-base);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.shot--light .shot__head h2 { color: var(--text-primary); }
.shot--light .shot__head p { color: var(--text-secondary); }

.shot__split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-12);
  align-items: center;
}

.shot__split--rev { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

.shot__head--left {
  align-items: flex-start;
  text-align: left;
  margin-bottom: 0;
}

.shot__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.shot__list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-md);
  color: var(--text-secondary);
}

.shot__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Cửa sổ app */
.win {
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.shot--light .win {
  box-shadow: 0 40px 80px -40px rgba(10, 40, 90, 0.35), 0 0 0 1px var(--stroke);
}

.win__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
  font-size: 12px;
  color: #475569;
}

.win__tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 8px; background: #e2e8f0; }
.win__tabs b, .win__tabs i { padding: 4px 10px; border-radius: 6px; font-style: normal; font-weight: 500; }
.win__tabs b { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

.win__chip { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-weight: 600; font-size: 11px; }
.win__chip--live { display: inline-flex; align-items: center; gap: 6px; background: #dcfce7; color: #15803d; }
.win__chip--live i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 8px #16a34a; animation: dots-pulse 1.6s ease-in-out infinite; }

.win__body { position: relative; background: #fbfcfe; }
.win__body--erd { height: 380px; display: grid; place-items: center; overflow: hidden; }

/* ERD */
.erd__stage { position: relative; width: 1040px; height: 380px; max-width: 100%; }
.erd__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.erd__rel { font-family: var(--font-mono); font-size: 11px; fill: #64748b; }

.tbl {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 240px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.35);
  font-size: 12px;
  color: #334155;
  overflow: hidden;
}

.tbl--hi { border-color: #93c5fd; box-shadow: 0 0 0 4px rgba(29, 111, 214, 0.1), 0 20px 40px -20px rgba(29, 111, 214, 0.5); }

.tbl__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #f1f5f9;
  font-weight: 600;
  color: #0f172a;
}

.tbl__head i { width: 8px; height: 8px; border-radius: 2px; background: #1d6fd6; }
.tbl--hi .tbl__head { background: #eff6ff; }

.tbl__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid #f1f5f9;
  font-family: var(--font-mono);
  font-size: 11px;
}

.tbl__row em { font-style: normal; font-family: var(--font-body); color: #94a3b8; white-space: nowrap; }
.tbl__row--pk::before { content: "🔑 "; }
.tbl__row--fk { color: #1d6fd6; }

/* Phân quyền */
.win--sm .win__body { padding: 14px; }

.perm__roles { display: flex; gap: 6px; margin-bottom: 12px; }
.perm__roles span { padding: 5px 12px; border-radius: 999px; background: #f1f5f9; font-size: 12px; color: #475569; }
.perm__roles .is-active { background: #1d6fd6; color: #fff; font-weight: 600; }

.perm__table { width: 100%; border-collapse: collapse; font-size: 12px; color: #334155; }
.perm__table th { text-align: left; padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; border-bottom: 1px solid #e2e8f0; }
.perm__table th:not(:first-child), .perm__table td:not(:first-child) { text-align: center; width: 64px; }
.perm__table td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; }

.sw {
  display: inline-block;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  vertical-align: middle;
  transition: background 300ms;
}

.sw::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sw.on { background: #1d6fd6; }
.sw.on::after { transform: translateX(12px); }
.sw.d { background: #f59e0b; }

/* Công tắc lật lần lượt khi thấy */
.js .shot .sw.on { background: #cbd5e1; }
.js .shot .sw.on::after { transform: none; }
.js .shot.is-visible .sw.on { background: #1d6fd6; }
.js .shot.is-visible .sw.on.d { background: #f59e0b; }
.js .shot.is-visible .sw.on::after { transform: translateX(12px); }
.js .shot.is-visible tr:nth-child(1) .sw { transition-delay: 300ms; }
.js .shot.is-visible tr:nth-child(2) .sw { transition-delay: 450ms; }
.js .shot.is-visible tr:nth-child(3) .sw { transition-delay: 600ms; }
.js .shot.is-visible tr:nth-child(5) .sw { transition-delay: 750ms; }
.js .shot.is-visible .sw::after { transition-delay: inherit; }

.perm__note { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; font-size: 12px; color: #92400e; }
.perm__note i { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }

/* Dashboard */
.win__body--dash {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.kpi {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  color: #64748b;
}

.kpi b { font-family: var(--font-display); font-size: 28px; line-height: 1; color: #0f172a; letter-spacing: -0.02em; }
.kpi em { font-style: normal; font-size: 11px; color: #15803d; }

.chart {
  padding: 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  min-height: 150px;
}

.chart--bars { grid-column: span 2; }
.chart__title { font-size: 12px; font-weight: 600; color: #0f172a; margin-bottom: 10px; }

.chart__bars { display: grid; grid-template-columns: repeat(8, 1fr); align-items: end; gap: 8px; height: 100px; }
.chart__bars i { display: block; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #60a5fa, #1d6fd6); transform-origin: bottom; }
.js .shot .chart__bars i { transform: scaleY(0); transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.js .shot.is-visible .chart__bars i { transform: scaleY(1); }
.js .shot.is-visible .chart__bars i:nth-child(2) { transition-delay: 60ms; }
.js .shot.is-visible .chart__bars i:nth-child(3) { transition-delay: 120ms; }
.js .shot.is-visible .chart__bars i:nth-child(4) { transition-delay: 180ms; }
.js .shot.is-visible .chart__bars i:nth-child(5) { transition-delay: 240ms; }
.js .shot.is-visible .chart__bars i:nth-child(6) { transition-delay: 300ms; }
.js .shot.is-visible .chart__bars i:nth-child(7) { transition-delay: 360ms; }
.js .shot.is-visible .chart__bars i:nth-child(8) { transition-delay: 420ms; }

.chart--line svg { width: 100%; height: 100px; }
.chart__area { fill: rgba(29, 111, 214, 0.12); }
.chart__stroke { fill: none; stroke: #1d6fd6; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.js .shot.is-visible .chart__stroke { animation: line-draw 1.4s cubic-bezier(0.22, 1, 0.36, 1) 300ms forwards; }
@keyframes line-draw { to { stroke-dashoffset: 0; } }

.chart--list .chart__item { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid #f1f5f9; font-size: 12px; color: #334155; }
.chart--list .chart__item b { font-family: var(--font-mono); font-weight: 500; color: #1d6fd6; }
.chart--list .chart__item span { flex: 1; }
.chart--list .chart__item em { font-style: normal; padding: 2px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11px; }

/* Điện thoại */
.phones { position: relative; height: 560px; }

.phone {
  position: absolute;
  width: 250px;
  padding: 14px 12px;
  border-radius: 32px;
  background: #ffffff;
  border: 8px solid #0f172a;
  box-shadow: 0 40px 80px -30px rgba(10, 40, 90, 0.5);
  font-size: 12px;
  color: #334155;
}

.phone--front { left: 55%; top: 40px; transform: rotate(4deg); z-index: 2; }
.phone--back { left: 8%; top: 90px; transform: rotate(-6deg); opacity: 0.95; }

.js .shot .phone--front { transform: rotate(10deg) translateY(30px); opacity: 0; transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 100ms, opacity 600ms 100ms; }
.js .shot .phone--back { transform: rotate(-12deg) translateY(30px); opacity: 0; transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms; }
.js .shot.is-visible .phone--front { transform: rotate(4deg); opacity: 1; }
.js .shot.is-visible .phone--back { transform: rotate(-6deg); opacity: 0.95; }

.phone__bar { padding: 10px 6px 12px; font-weight: 600; color: #0f172a; border-bottom: 1px solid #f1f5f9; }

.phone__scan { position: relative; height: 150px; margin: 12px 0; border-radius: 14px; background: #0f172a; color: #fff; display: grid; place-content: end start; padding: 12px; overflow: hidden; }
.phone__scan b { font-family: var(--font-mono); font-size: 13px; }
.phone__scan span:last-child { color: rgba(255,255,255,0.7); }
.phone__laser { position: absolute; left: 10%; right: 10%; top: 20%; height: 2px; background: #4ade80; box-shadow: 0 0 12px #4ade80; animation: laser 2.2s ease-in-out infinite alternate; }
@keyframes laser { to { top: 70%; } }

.phone__qty { display: grid; gap: 2px; padding: 10px 6px; }
.phone__qty b { font-family: var(--font-display); font-size: 36px; line-height: 1; color: #0f172a; }
.phone__qty span:last-child { color: #b45309; }

.phone__btn { margin-top: 10px; padding: 12px; border-radius: 999px; background: #1d6fd6; color: #fff; font-weight: 700; text-align: center; }
.phone__btn--ok { background: #16a34a; }

.phone__map { position: relative; height: 120px; margin: 12px 0; border-radius: 14px; background: #e0f2fe; overflow: hidden; display: grid; place-content: end start; padding: 10px; }
.phone__map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#bae6fd 1px, transparent 1px), linear-gradient(90deg, #bae6fd 1px, transparent 1px); background-size: 20px 20px; opacity: 0.6; }
.phone__map i { position: absolute; left: 50%; top: 40%; width: 14px; height: 14px; border-radius: 50%; background: #1d6fd6; box-shadow: 0 0 0 6px rgba(29, 111, 214, 0.25); animation: dots-pulse 1.8s ease-in-out infinite; }
.phone__map span { position: relative; font-size: 11px; font-weight: 600; color: #0c4a6e; }

.phone__list { display: grid; gap: 6px; margin-top: 12px; }
.phone__list div { display: grid; padding: 8px 10px; border-radius: 10px; background: #f8fafc; }
.phone__list b { color: #0f172a; }
.phone__list span { font-size: 11px; color: #64748b; }

@media (max-width: 960px) {
  .shot__split, .shot__split--rev { grid-template-columns: 1fr; }
  .win__body--erd { height: 720px; }
  .erd__stage { width: 100%; height: 100%; }
  .erd__wires { display: none; }
  .erd__stage .tbl { position: static; margin: 12px auto; width: min(320px, 100%); }
  .win__body--dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart--bars { grid-column: span 2; }
  .phones { height: 520px; }
  .phone { width: 220px; }
  .phone--front { left: auto; right: 0; }
  .phone--back { left: 0; }
}

@media (max-width: 560px) {
  .win__body--dash { grid-template-columns: 1fr; }
  .chart--bars { grid-column: span 1; }
  .phones { height: 600px; }
  .phone--front { top: 200px; right: 0; }
  .phone--back { top: 0; }
  .perm__table th:nth-child(5), .perm__table td:nth-child(5) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .phone__laser, .phone__map i, .win__chip--live i { animation: none; }
  .js .shot .chart__bars i, .js .shot .phone--front, .js .shot .phone--back { transition: none; transform: none; opacity: 1; }
}

/* B trong trang chính: kết thúc tối để nối vào dải "Bài toán" */
.aiB--index {
  padding-top: var(--space-24);
  background:
    radial-gradient(ellipse 60% 50% at 50% 55%, rgba(37, 99, 235, 0.45), transparent 70%),
    linear-gradient(180deg, #06080f 0%, #0a1a5c 55%, #06080f 100%);
}
.aiB--index .aiB__head { margin-bottom: var(--space-10); }
.aiB--index .canvas { margin-bottom: var(--space-12); }
.js .aiB.reveal { transform: translateY(24px); transition: opacity var(--settle), transform var(--settle); }

/* ERD: dây cùng kiểu canvas B */
.erd__wires .cw { fill: none; stroke: #cbd5e1; stroke-width: 2; }
.erd__wires .cw--flow { stroke: #1d6fd6; stroke-dasharray: 8 14; animation: cw-flow 1.6s linear infinite; opacity: 0.9; }
.js .shot.reveal { transform: translateY(24px); transition: opacity var(--settle), transform var(--settle); }

/* ==========================================================================
   ideas-demo.html — 5 section theo ảnh tham khảo
   ========================================================================== */
.idea { padding-block: var(--space-24); }
.idea--dark { color: #fff; background: linear-gradient(180deg, #06080f 0%, #0a1a5c 100%); }
.idea--light { background: var(--bg-base); }
.idea--tint { background: linear-gradient(180deg, var(--bg-base), #e9f2fc); }
.idea .opt-tag { margin-bottom: var(--space-6); }

.idea__h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--text-primary);
}

.idea__h2 em { font-style: normal; color: var(--accent); }
.idea--light .shot__head p { color: var(--text-secondary); }
.js .idea.reveal { transform: translateY(24px); transition: opacity var(--settle), transform var(--settle); }

/* ---- I1 agents ---- */
.agents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }

.agent2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-5);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease);
}

.agent2:hover { transform: translateY(-4px); border-color: rgba(125, 214, 255, 0.5); }
.agent2__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.agent2__avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--c); color: #fff; font-family: var(--font-display); font-weight: 700; }
.agent2__status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,0.7); }
.agent2__status i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: dots-pulse 1.8s ease-in-out infinite; }
.agent2 h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: #fff; }
.agent2__role { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #7dd6ff; }
.agent2 ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.agent2 li { position: relative; padding-left: 14px; font-size: var(--text-sm); color: rgba(255,255,255,0.7); line-height: 1.45; }
.agent2 li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #7dd6ff; }
.agent2__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 11px; color: rgba(255,255,255,0.55); }
.agent2__foot em { font-style: normal; font-family: var(--font-mono); color: rgba(255,255,255,0.75); }
.agent2--add { justify-content: center; align-items: center; text-align: center; border-style: dashed; }
.agent2__plus { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px dashed rgba(255,255,255,0.35); font-size: 24px; color: rgba(255,255,255,0.7); }
.agent2--add p { margin: 0; font-size: var(--text-sm); color: rgba(255,255,255,0.65); }

/* ---- I2 line-art ---- */
.linegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: var(--space-10); border-top: 1px solid var(--stroke); }
.linecell { padding: var(--space-8) var(--space-5) var(--space-6) 0; border-right: 1px solid var(--stroke); margin-right: var(--space-5); }
.linecell:last-child { border-right: 0; margin-right: 0; }
.linecell__idx { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.lineart { display: block; width: 100%; max-width: 200px; height: auto; margin: var(--space-4) 0 var(--space-5); }
.la path, .la ellipse { fill: none; stroke: var(--text-primary); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.la .la--hi { stroke: var(--accent); stroke-width: 1.6; fill: var(--accent-soft); }
.la .la--dim { stroke: var(--stroke-strong); }
.la .la--dot { fill: var(--accent); stroke: none; }
.linecell h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); }
.linecell p { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary); }
.js .idea.reveal .la path, .js .idea.reveal .la ellipse { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1); }
.js .idea.reveal.is-visible .la path, .js .idea.reveal.is-visible .la ellipse { stroke-dashoffset: 0; }
.js .idea.reveal.is-visible .linecell:nth-child(2) .la * { transition-delay: 150ms; }
.js .idea.reveal.is-visible .linecell:nth-child(3) .la * { transition-delay: 300ms; }
.js .idea.reveal.is-visible .linecell:nth-child(4) .la * { transition-delay: 450ms; }

/* ---- I3 steps + notifications ---- */
.bsteps { margin: var(--space-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-5); }
.bsteps li { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-3); }
.bsteps b { font-family: var(--font-mono); font-size: 12px; color: var(--accent); padding-top: 4px; }
.bsteps h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); }
.bsteps p { margin: 0; font-size: var(--text-md); color: var(--text-secondary); line-height: 1.55; }

.notis { display: grid; gap: var(--space-3); }
.noti { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg-raised); border: 1px solid var(--stroke); box-shadow: 0 20px 40px -30px rgba(10, 40, 90, 0.35); font-size: 13px; }
.noti__av { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--c); color: #fff; font-weight: 700; font-size: 12px; }
.noti b { display: block; color: var(--text-primary); }
.noti > div > span { font-size: 12px; color: var(--text-muted); }
.noti__st { font-style: normal; padding: 3px 9px; border-radius: 999px; background: var(--bg-inset); color: var(--text-muted); font-size: 11px; font-weight: 600; }
.noti__st--new { background: var(--accent-soft); color: var(--accent); }
.noti__st--ok { background: rgba(21,128,61,0.12); color: #15803d; }
.js .idea.reveal .noti { opacity: 0; transform: translateX(28px); transition: opacity 600ms cubic-bezier(0.22,1,0.36,1), transform 600ms cubic-bezier(0.22,1,0.36,1); }
.js .idea.reveal.is-visible .noti { opacity: 1; transform: none; }
.js .idea.reveal.is-visible .noti:nth-child(2) { transition-delay: 250ms; }
.js .idea.reveal.is-visible .noti:nth-child(3) { transition-delay: 500ms; }
.js .idea.reveal.is-visible .noti:nth-child(4) { transition-delay: 750ms; }

/* ---- I4 stages ---- */
.stages { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); align-items: stretch; margin-top: var(--space-10); }
.stages__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.stages__list li { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--bg-raised); border: 1px solid var(--stroke); transition: background 400ms, color 400ms, border-color 400ms; }
.stages__list b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); }
.stages__list span { font-size: var(--text-sm); color: var(--text-secondary); }
.stages__list li.is-on { background: var(--accent); border-color: var(--accent); }
.stages__list li.is-on b, .stages__list li.is-on span { color: #fff; }
.stages__vis { border-radius: 22px; background: linear-gradient(135deg, #e9f2fc, #cfe3fb); display: grid; place-items: center; min-height: 340px; }
.stages__card { position: relative; width: 260px; height: 220px; }
.stages__pic { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms; display: grid; place-items: center; }
.stages__pic.is-on { opacity: 1; }
.stages__pic i { position: absolute; border-radius: 10px; background: #fff; box-shadow: 0 20px 40px -24px rgba(10,40,90,0.5); border: 1px solid #bfdbfe; }
/* 1 khảo sát: file rời rạc */
.stages__pic--1 i:nth-child(1) { left: 10px; top: 20px; width: 110px; height: 70px; transform: rotate(-8deg); }
.stages__pic--1 i:nth-child(2) { right: 20px; top: 10px; width: 100px; height: 60px; transform: rotate(6deg); background: #fff2a8; border-color: #fde68a; }
.stages__pic--1 i:nth-child(3) { left: 60px; bottom: 20px; width: 120px; height: 70px; transform: rotate(3deg); }
.stages__pic--1 i:nth-child(4) { right: 10px; bottom: 40px; width: 70px; height: 70px; transform: rotate(-5deg); background: #e8f2ff; }
/* 2 chuẩn hoá: bảng có cấu trúc */
.stages__pic--2 i:nth-child(1) { left: 20px; top: 30px; width: 100px; height: 150px; }
.stages__pic--2 i:nth-child(2) { right: 20px; top: 30px; width: 100px; height: 70px; }
.stages__pic--2 i:nth-child(3) { right: 20px; bottom: 30px; width: 100px; height: 60px; background: var(--accent); border-color: var(--accent); }
/* 3 dựng: app */
.stages__pic--3 i:nth-child(1) { inset: 20px; }
.stages__pic--3 i:nth-child(2) { left: 32px; top: 32px; width: 60px; height: 156px; background: #f1f5f9; }
.stages__pic--3 i:nth-child(3) { right: 32px; top: 32px; width: 140px; height: 50px; background: var(--accent); border-color: var(--accent); }
/* 4 bàn giao: chìa khoá / tick */
.stages__pic--4 i:nth-child(1) { inset: 40px; border-radius: 50%; background: var(--accent); border-color: var(--accent); }
.stages__pic--4 i:nth-child(2) { left: 50%; top: 50%; width: 40px; height: 70px; border: 0; background: transparent; box-shadow: none; border-right: 10px solid #fff; border-bottom: 10px solid #fff; transform: translate(-50%, -60%) rotate(45deg); border-radius: 0; }

/* ---- I5 quotes ---- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.quote { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
.quote blockquote { margin: 0; font-size: var(--text-md); line-height: 1.6; color: rgba(255,255,255,0.85); }
.quote figcaption { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; margin-top: auto; font-size: 12px; }
.quote__av { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #fff; font-weight: 700; }
.quote figcaption b { display: block; color: #fff; }
.quote figcaption span { color: rgba(255,255,255,0.6); }
.quote figcaption em { font-style: normal; color: #facc15; letter-spacing: 2px; }

@media (max-width: 960px) {
  .agents, .linegrid, .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linecell { padding-right: 0; border-right: 0; margin-right: 0; border-bottom: 1px solid var(--stroke); }
  .stages { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .agents, .linegrid, .quotes { grid-template-columns: 1fr; }
}

/* Tự động hoá trong trang chính: nối mượt sau màn xếp thẻ */
#automation.idea { padding-block: var(--space-16) var(--space-20); }
#automation .shot__head--left { max-width: 720px; }

/* Nét vẽ isometric: vẽ đều tay, thấy rõ đang vẽ (trước đó ease front-loaded, xong trong 100 ms) */
.js .idea.reveal .la path,
.js .idea.reveal .la ellipse {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.js .idea.reveal.is-visible .linecell:nth-child(2) .la * { transition-delay: 200ms; }
.js .idea.reveal.is-visible .linecell:nth-child(3) .la * { transition-delay: 400ms; }
.js .idea.reveal.is-visible .linecell:nth-child(4) .la * { transition-delay: 600ms; }

/* Nav 7 mục: gọn hơn một chút */
@media (min-width: 901px) { .nav { gap: var(--space-5); } .nav__link { font-size: var(--text-sm); } }
/* 5 bước đứng giữa AI (tối) và Bài toán (tối): dải xanh nối hai bên tối */
.aiB--index + .steps { background: linear-gradient(180deg, #06080f 0%, #0a1a5c 18%, #1d4ed8 55%, #0a1a5c 85%, #06080f 100%); }

/* Điểm neo cuộn chừa chỗ cho nav cố định */
section[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

/* style.css đã có scroll-padding-top 96px trên html → bỏ scroll-margin để không cộng dồn */
section[id] { scroll-margin-top: 0; }

/* ==========================================================================
   Vòng 9 — bối cảnh "cần số hoá", lưới 3 ô, ghép section, báo cáo v2
   ========================================================================== */
.signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0 auto var(--space-16);
}

.signal {
  padding: var(--space-6);
  border-radius: 18px;
  background: var(--bg-raised);
  border: 1px solid var(--stroke);
  box-shadow: var(--line-top);
}

.signal__ico {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  border-radius: 12px;
  background: var(--accent-soft);
  font-size: 20px;
}

.signal h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.25;
  font-weight: 600;
  color: var(--text-primary);
}

.signal p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-secondary);
}

.why--tight { margin-top: 0; }

.js .signals.reveal .signal { opacity: 0; transform: translateY(16px); transition: opacity var(--settle), transform var(--settle); }
.js .signals.reveal.is-visible .signal { opacity: 1; transform: none; }
.js .signals.reveal.is-visible .signal:nth-child(2) { transition-delay: 100ms; }
.js .signals.reveal.is-visible .signal:nth-child(3) { transition-delay: 200ms; }

/* Lưới 3 ô */
.fgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fgrid--3 .fcell:nth-child(2n) { border-right: 1px solid var(--stroke); }
.fgrid--3 .fcell:nth-child(3n) { border-right: 0; }
.fgrid--3 .fcell { border-bottom: 0; }

/* Đội AI nối tiếp dải AI (B) */
.idea--after-ai { padding-top: 0; background: #06080f; }
.idea--after-ai .shot__head { padding-top: var(--space-8); border-top: 1px solid rgba(255, 255, 255, 0.1); }

/* ---- Báo cáo v2: điện thoại giám đốc + số đếm lên ---- */
.report2 {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-12);
  align-items: center;
}

.report2__phone {
  position: relative;
  width: 300px;
  margin: 0 auto;
  padding: 16px 14px 18px;
  border-radius: 36px;
  background: #ffffff;
  border: 8px solid #0f172a;
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.9);
  color: #0f172a;
  transform: rotate(-3deg);
}

.report2__bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px 12px; font-size: 12px; color: #64748b; }
.report2__bar b { color: #0f172a; font-size: 14px; }
.report2__live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 11px; font-weight: 600; }
.report2__live i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; animation: dots-pulse 1.6s ease-in-out infinite; }

.report2__big { padding: 6px 4px 14px; }
.report2__big span { font-size: 12px; color: #64748b; }
.report2__big b { display: block; font-family: var(--font-display); font-size: 44px; line-height: 1; letter-spacing: -0.03em; color: #0f172a; }
.report2__big em { font-style: normal; font-size: 12px; color: #15803d; font-weight: 600; }

.report2__spark { height: 64px; margin: 0 4px 12px; }
.report2__spark path { fill: none; stroke: #1d6fd6; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.report2__spark .area { fill: rgba(29, 111, 214, 0.12); stroke: none; }

.report2__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.report2__tiles div { padding: 10px 12px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; }
.report2__tiles span { display: block; font-size: 11px; color: #64748b; }
.report2__tiles b { font-family: var(--font-display); font-size: 20px; color: #0f172a; }
.report2__tiles b.warn { color: #b45309; }

.report2__alert { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; font-size: 12px; color: #9a3412; }
.report2__alert i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f97316; box-shadow: 0 0 8px #f97316; }

/* Thẻ "cách cũ" mờ phía sau điện thoại */
.report2__old {
  position: absolute;
  right: -110px;
  top: 40px;
  width: 190px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  transform: rotate(6deg);
}

.report2__old b { display: block; color: #fff; margin-bottom: 4px; }
.report2__old s { color: rgba(255, 255, 255, 0.45); }

.report2__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.report2__list li { position: relative; padding-left: 26px; font-size: var(--text-md); line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.report2__list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.report2__list li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.js .shot.reveal .report2__phone { opacity: 0; transform: rotate(-8deg) translateY(30px); transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 900ms cubic-bezier(0.22,1,0.36,1); }
.js .shot.reveal.is-visible .report2__phone { opacity: 1; transform: rotate(-3deg); }
.js .shot.reveal .report2__spark path:not(.area) { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.6s cubic-bezier(0.45, 0.05, 0.25, 1) 500ms; }
.js .shot.reveal.is-visible .report2__spark path:not(.area) { stroke-dashoffset: 0; }

@media (max-width: 960px) {
  .signals { grid-template-columns: 1fr; }
  .fgrid--3 { grid-template-columns: 1fr; }
  .fgrid--3 .fcell { border-right: 0 !important; border-bottom: 1px solid var(--stroke); }
  .report2 { grid-template-columns: 1fr; }
  .report2__old { display: none; }
}

/* Báo cáo v2: thẻ "cách cũ" là anh em của điện thoại, nằm sau và lệch phải */
.report2__stage { position: relative; }
.report2__phone { position: relative; z-index: 1; }
.report2__old { right: 8%; top: 24px; z-index: 0; transform: rotate(8deg); opacity: 0.9; }
.js .shot.reveal .report2__old { opacity: 0; transform: rotate(14deg) translateY(20px); transition: opacity 700ms 300ms, transform 900ms cubic-bezier(0.22,1,0.36,1) 300ms; }
.js .shot.reveal.is-visible .report2__old { opacity: 0.9; transform: rotate(8deg); }

/* 5 bước đứng sau "Ba điều làm khác" (sáng) và trước Dữ liệu (tối): gradient sáng→tối */
#services + .steps { background: linear-gradient(180deg, #1d4ed8 0%, #0a1a5c 70%, #06080f 100%); padding-top: var(--space-20); }
#services { padding-bottom: var(--space-16); }

/* ==========================================================================
   Thống nhất nền tối — một bảng màu cho mọi section tối
   ink-950 nền sâu · ink-800 nền tối có ánh xanh · brand-700 dải nhấn xanh
   Quy tắc: section tối = ink-950 → ink-800 với một quầng xanh mờ ở đỉnh;
   chỉ dải "Quy trình" và thẻ CTA cuối dùng brand-700.
   ========================================================================== */
:root {
  --ink-950: #070b18;
  --ink-900: #0a1128;
  --ink-800: #0d1b45;
  --brand-700: #1d4ed8;
  --brand-500: #2f6fe8;
  --dark-bg: linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%);
  --dark-glow: radial-gradient(ellipse 60% 45% at 50% 0%, rgba(47, 111, 232, 0.28), transparent 70%);
}

/* Mọi section tối: cùng một nền */
.aiB--index,
.idea--after-ai,
.section--band,
.shot--dark,
.shot--dark2,
.idea--dark,
.section--dark {
  background: var(--dark-glow), var(--dark-bg);
}

/* Hai section tối liền nhau: phần sau bỏ quầng để liền một khối */
.aiB--index + .idea--after-ai,
.idea--after-ai + .section--band,
.section--band + .shot--dark {
  background: var(--ink-900);
}

.section--band .dark,
.ind {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* Dải nhấn xanh: quy trình và CTA cuối, cùng một gradient */
#services + .steps,
.steps {
  background: linear-gradient(180deg, var(--brand-700) 0%, var(--ink-800) 100%);
}

.closing,
.section--light-cta .ctacard--blue {
  background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 60%, var(--ink-800) 100%);
}

/* Thẻ trong section tối: cùng chất liệu */
.acard, .ncard, .icard, .agent2, .quote, .stat, .step {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Section sáng tiếp sau tối: một vạch sáng mảnh ở mép trên để cắt sạch */
.shot--dark + .shot--light,
.section--band + .shot--light,
.steps + .shot--dark { box-shadow: none; }

/* ==========================================================================
   Icon isometric v2 — lắp ráp từng bộ phận (Sentry): mỗi bộ phận trồi lên +
   hiện dần theo thứ tự, cột sau đi sau cột trước; dây và vòng vẽ dần sau đó.
   ========================================================================== */
#automation .la path,
#automation .la circle {
  fill: none;
  stroke: var(--text-primary);
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  transition: none;
}

#automation .la .la--hi path { stroke: var(--accent); stroke-width: 1.6; }
#automation .la .la--hi path:first-child { fill: var(--accent-soft); }
#automation .la .la--dot { fill: var(--accent); stroke: none; }
#automation .la .sm path { stroke: var(--text-secondary); stroke-width: 1; }
#automation .la .wire { stroke: var(--accent); stroke-dasharray: 3 3; }
#automation .la .ring { stroke: var(--stroke-strong); stroke-dasharray: 3 4; }

/* Trạng thái chờ: bộ phận ẩn, thấp hơn 14px */
.js #automation .pt {
  opacity: 0;
  transform: translateY(14px);
  transform-box: fill-box;
  transform-origin: center;
}

.js #automation.is-visible .pt {
  animation: part-in 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--col, 0) * 1ms + var(--i, 0) * 110ms);
}

@keyframes part-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Thứ tự bộ phận */
#automation .p1 { --i: 0; }  #automation .p2 { --i: 1; }  #automation .p3 { --i: 2; }
#automation .p4 { --i: 3; }  #automation .p5 { --i: 4; }  #automation .p6 { --i: 5; }
#automation .p7 { --i: 6; }  #automation .p8 { --i: 7; }  #automation .p9 { --i: 8; }
#automation .p10 { --i: 9; } #automation .p11 { --i: 10; } #automation .p12 { --i: 11; }

/* Cột sau trễ hơn cột trước */
#automation .lineart--1 .pt { --col: 0; }
#automation .lineart--2 .pt { --col: 350; }
#automation .lineart--3 .pt { --col: 700; }
#automation .lineart--4 .pt { --col: 1050; }

/* Dây và vòng: vẽ dần thay vì trồi lên */
.js #automation .wire,
.js #automation .ring {
  transform: none;
  stroke-dasharray: 3 3;
}

.js #automation.is-visible .wire,
.js #automation.is-visible .ring {
  animation: wire-in 700ms ease-out forwards;
  animation-delay: calc(var(--col, 0) * 1ms + var(--i, 0) * 110ms);
}

@keyframes wire-in {
  from { opacity: 0; stroke-dashoffset: 40; }
  to   { opacity: 1; stroke-dashoffset: 0; }
}

/* Sau khi lắp xong: chấm trên vòng quay chậm, chấm đỉnh thở */
#automation.is-visible .orbit { animation: part-in 620ms cubic-bezier(0.22,1,0.36,1) forwards, orbit-a 6s linear 2.4s infinite; animation-delay: calc(var(--col) * 1ms + var(--i) * 110ms), 2.4s; }
#automation.is-visible .orbit2 { animation: part-in 620ms cubic-bezier(0.22,1,0.36,1) forwards, orbit-b 6s linear 2.4s infinite; animation-delay: calc(var(--col) * 1ms + var(--i) * 110ms), 2.4s; }
#automation.is-visible .la-1 .p5 { animation: part-in 620ms cubic-bezier(0.22,1,0.36,1) forwards, dot-breathe 2.4s ease-in-out 2s infinite; animation-delay: 440ms, 2s; }

@keyframes orbit-a { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes orbit-b { from { offset-distance: 50%; } to { offset-distance: 150%; } }
@keyframes dot-breathe { 0%, 100% { r: 4; opacity: 1; } 50% { r: 6; opacity: 0.7; } }

#automation .orbit, #automation .orbit2 { offset-path: path("M22 78 A58 26 0 1 1 138 78 A58 26 0 1 1 22 78"); offset-rotate: 0deg; }

@media (prefers-reduced-motion: reduce) {
  .js #automation .pt { opacity: 1; transform: none; animation: none !important; }
}

/* ==========================================================================
   Một tông navy cho mọi khối tối — không còn "chỗ đen chỗ xanh".
   Nền tối = navy xanh (#0b1633 → #0c2160), cùng hướng, cùng độ sáng.
   Dải 5 bước cũng dùng navy này (xanh sáng chỉ còn ở nút và thẻ CTA cuối).
   ========================================================================== */
:root {
  --ink-950: #0b1633;
  --ink-900: #0c1d55;
  --ink-800: #0d2670;
  --dark-bg: linear-gradient(180deg, #0b1633 0%, #0c2160 100%);
  --dark-glow: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(59, 130, 246, 0.22), transparent 70%);
}

.aiB--index,
.idea--after-ai,
.section--band,
.shot--dark,
.shot--dark2,
.idea--dark,
.section--dark,
#services + .steps,
.steps {
  background: var(--dark-glow), var(--dark-bg);
}

/* Khối tối liền nhau: nền phẳng cùng màu, ngăn bằng hairline */
.aiB--index + .idea--after-ai,
.idea--after-ai + .section--band,
.section--band + .shot--dark,
.steps + .shot--dark {
  background: #0c1d55;
}

/* Hero kết thúc cùng tông với dải số liệu (sáng) — giữ nguyên */
/* Thẻ trong khối tối: cùng chất liệu, viền sáng nhẹ hơn trên navy */
.acard, .ncard, .icard, .agent2, .quote, .stat, .step {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.step b { color: rgba(255, 255, 255, 0.12); }

/* ==========================================================================
   Bỏ nhãn pill nhỏ trên mọi section, bỏ icon emoji thẻ bối cảnh,
   và nền tối = XANH (không navy đen): royal blue → xanh sâu, cùng một tông.
   ========================================================================== */
.why__pill,
.why__pill--onDark,
.signal__ico { display: none !important; }

.why { gap: var(--space-4); }
.signal h3 { margin-top: 0; }

:root {
  --blue-700: #1e4fd6;
  --blue-800: #133c9f;
  --blue-900: #0e2f7f;
  --dark-bg: linear-gradient(180deg, var(--blue-700) 0%, var(--blue-800) 100%);
  --dark-glow: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 255, 255, 0.10), transparent 70%);
}

.aiB--index,
.idea--after-ai,
.section--band,
.shot--dark,
.shot--dark2,
.idea--dark,
.section--dark,
#services + .steps,
.steps {
  background: var(--dark-glow), var(--dark-bg);
}

.aiB--index + .idea--after-ai,
.idea--after-ai + .section--band,
.section--band + .shot--dark,
.steps + .shot--dark {
  background: var(--blue-800);
}

/* Thẻ / hairline trên nền xanh */
.acard, .ncard, .icard, .agent2, .quote, .stat, .step {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.section--band .dark, .ind, .idea--after-ai .shot__head { border-top-color: rgba(255, 255, 255, 0.14); }
.step b { color: rgba(255, 255, 255, 0.14); }
.shot--dark .shot__head p, .idea--dark .shot__head p, .aiB__head p, .ind__head p { color: rgba(255, 255, 255, 0.8); }
.icard li, .agent2 li, .step p, .stat span, .agent2__foot { color: rgba(255, 255, 255, 0.78); }
.icard li::before { background: #bfdbfe; }
.agent2__role, .acard__tag { color: #bfdbfe; }
.win__chip, .canvas__pub { background: var(--blue-700); color: #fff; }
.canvas { box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.25); }

/* Nút phụ trên nền xanh */
.btn--onDark { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); }
.btn--onDark:hover { background: rgba(255, 255, 255, 0.2); }

/* Thẻ CTA cuối cùng tông */
.closing { background: linear-gradient(135deg, #2b63e6 0%, var(--blue-700) 60%, var(--blue-900) 100%); }

/* ==========================================================================
   Vòng 10 — xen kẽ trắng / xanh, không hở vạch giữa các section, ít chữ hơn
   ========================================================================== */
.section { margin: 0; }
main > .section + .section { margin-top: 0; }

/* Nghiệp vụ trên nền sáng */
.section--band-light {
  padding-block: var(--space-20);
  background: var(--bg-base);
}

.section--band-light .ind { border-top: 0; padding-top: 0; }
.section--band-light .ind__head h2 { color: var(--text-primary); }
.section--band-light .ind__head p { color: var(--text-secondary); }
.section--band-light .icard { background: var(--bg-raised); border-color: var(--stroke); box-shadow: var(--line-top); }
.section--band-light .icard h3 { color: var(--text-primary); }
.section--band-light .icard li { color: var(--text-secondary); }
.section--band-light .icard li::before { background: var(--accent); }
.section--band-light .icard:hover { border-color: var(--accent-line); }
.section--band-light .ind__foot .btn--primary { border-radius: var(--r-round); }

/* Chuyển tiếp trắng → xanh: không cần glow trắng ở đỉnh nữa, giữ đều tông */
.steps, .shot--dark, .shot--dark2, .aiB--index { background: var(--dark-bg); }

/* Tiêu đề section: bớt cỡ để trang thoáng hơn, câu mô tả một dòng */
.why__statement { font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); }
.shot__head p, .aiB__head p, .ind__head p, .why__sub { max-width: 48ch; }

/* Ba cột vấn đề: 3 gạch đầu dòng, thoáng hơn */
.threat-grid--lines .threat { padding-block: var(--space-6); }

/* Section tối không được dịch chuyển khi chờ reveal (lộ vạch trắng);
   chỉ nội dung bên trong (.container) trồi lên. */
.js .shot.reveal,
.js .idea.reveal,
.js .aiB.reveal,
.js .steps.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.js .shot.reveal > .container,
.js .idea.reveal > .container,
.js .aiB.reveal > .container {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--settle), transform var(--settle);
}

.js .shot.reveal.is-visible > .container,
.js .idea.reveal.is-visible > .container,
.js .aiB.reveal.is-visible > .container {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Nhịp nền — 3 tông, luân phiên từng section, xanh đậm chỉ ở điểm nhấn
   tone-w trắng · tone-g xám xanh nhạt · tone-b xanh đậm (1/4 số section)
   ========================================================================== */
:root { --tone-g: #f2f5fa; }

section.tone-w, section.tone-w .morph__sticky { background: #ffffff !important; }
section.tone-g, section.tone-g .morph__sticky { background: var(--tone-g) !important; }
section.tone-b { background: var(--dark-bg) !important; color: #ffffff; }

/* Section đã có nền riêng bên trong (band-light, section--about, faq…): nhường cho tone */
.section--band-light, .section--about, .section--faq, .section--light-cta, .section--why, .idea--light, .shot--light { background: transparent; }

/* Thẻ trên nền xám nhạt: trắng để nổi */
.tone-g .signal, .tone-g .panel, .tone-g .teaser, .tone-g .faq__item, .tone-g .ctacard__list li, .tone-g .win, .tone-g .mc__after {
  background: #ffffff;
}

/* ---- Section xanh "Cách BAMFLOW làm": 3 ô + 5 bước ---- */
.tone-b .why__title, .tone-b .why__statement, .tone-b .fcell h3 { color: #ffffff; }
.tone-b .why__sub, .tone-b .fcell p { color: rgba(255, 255, 255, 0.8); }
.tone-b .fcell__label { color: #bfdbfe; }
.tone-b .fgrid { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); }
.tone-b .fcell, .tone-b .fgrid--3 .fcell:nth-child(2n) { border-color: rgba(255, 255, 255, 0.14); }
.tone-b .fillu__row, .tone-b .fillu--cost .fillu__row { background: #ffffff; border-color: transparent; }
.tone-b .fillu__row.is-active { background: #eaf2ff; }

.steps--inline { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.steps--inline .steps__head { margin-bottom: var(--space-8); }
.steps--inline .steps__head h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem); }
#services.tone-b { padding-block: var(--space-20); }

/* Section Dữ liệu trên nền xám: khung cửa sổ có bóng sáng */
.tone-g .win { box-shadow: 0 40px 80px -40px rgba(10, 40, 90, 0.35), 0 0 0 1px var(--stroke); }

/* Morph trên nền xám: thẻ hệ thống trắng */
.tone-g .morph__frame { background: #ffffff; }

/* Nghiệp vụ trắng, Lớp học xám, Về BAMFLOW trắng, FAQ xám: hairline trên cùng để ngăn nhẹ */
section.tone-w + section.tone-g, section.tone-g + section.tone-w { border-top: 1px solid var(--stroke-faint); }
section.tone-b { border-top: 0; }

/* Không còn glow trắng ở đỉnh section xanh, giữ phẳng để 2 điểm nhấn giống nhau */
.tone-b.aiB--index, .tone-b#services { background: linear-gradient(180deg, var(--blue-700) 0%, var(--blue-800) 100%) !important; }

@media (max-width: 960px) {
  .steps--inline { margin-top: var(--space-10); padding-top: var(--space-8); }
}

/* 5 bước nằm trong section xanh: không nền riêng, không padding riêng */
.steps--inline, #services + .steps { background: transparent !important; padding-block: 0; }
.steps--inline { padding-top: var(--space-12); }

/* Ba cột vấn đề: vạch dọc không lòi qua hairline dưới */
.threat-grid--lines { border-bottom: 0; overflow: hidden; }
.threat-grid--lines .threat { border-bottom: 1px solid var(--stroke); }
.threat-grid--lines .threat:last-child { border-right: 0; }

/* Vòng 12 — ít chữ: thẻ dấu hiệu chỉ còn tiêu đề; nghiệp vụ mỗi thẻ 1 dòng */
.signal { padding: var(--space-5) var(--space-6); }
.signal h3 { margin: 0; }
.signals { margin-bottom: var(--space-12); }
.icard li:nth-child(n + 2) { display: none; }
.step { min-height: 150px; }
.fcell { gap: var(--space-4); }
.fillu { padding-top: var(--space-2); }
.section--why .threat-grid--lines { margin-bottom: 0; }
#context { padding-bottom: var(--space-16); }

/* ==========================================================================
   Đa thiết bị — --dp (0→1) do main.js ghi theo vị trí cuộn, một chiều.
   0–0.55: PC bay lên. 0.45–1: điện thoại trượt ra từ sau PC.
   ========================================================================== */
.devices { --dp: 0; padding-block: var(--space-20); overflow-x: clip; }

.devices__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; margin-bottom: var(--space-10); }
.devices__head h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; color: var(--text-primary); }
.devices__head p { margin: 0; max-width: 56ch; font-size: var(--text-base); line-height: 1.6; color: var(--text-secondary); }

.devices__stage { position: relative; width: min(100%, 980px); height: 560px; margin: 0 auto; }

/* PC */
.dv-pc {
  --pp: clamp(0, calc(var(--dp) / 0.55), 1);
  --pe: calc(var(--pp) * var(--pp) * (3 - 2 * var(--pp)));
  position: absolute; left: 50%; top: 0; width: 760px; margin-left: -400px; z-index: 2;
  transform: translateY(calc((1 - var(--pe)) * 140px)) scale(calc(0.92 + 0.08 * var(--pe)));
  opacity: calc(0.15 + 0.85 * var(--pe));
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.dv-pc__screen { border-radius: 16px; background: #ffffff; border: 10px solid #0f172a; box-shadow: 0 50px 100px -40px rgba(10, 30, 60, 0.55); overflow: hidden; font-size: 12px; color: #334155; }
.dv-pc__bar { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-bottom: 1px solid #e5e7eb; background: #f8fafc; }
.dv-pc__bar i { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.dv-pc__bar span { margin-left: 8px; font-weight: 600; color: #0f172a; }
.dv-pc__bar em { margin-left: auto; font-style: normal; font-size: 11px; color: #15803d; }
.dv-pc__body { display: grid; grid-template-columns: 130px 1fr; min-height: 360px; }
.dv-pc__side { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; background: #f1f5f9; border-right: 1px solid #e2e8f0; }
.dv-pc__side span { padding: 7px 10px; border-radius: 8px; color: #64748b; }
.dv-pc__side .on { background: #dbeafe; color: #1d4ed8; font-weight: 600; }
.dv-pc__main { padding: 14px; display: grid; gap: 12px; align-content: start; }
.dv-pc__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dv-pc__kpis div { padding: 10px 12px; border-radius: 10px; border: 1px solid #e2e8f0; display: grid; gap: 2px; }
.dv-pc__kpis span { font-size: 11px; color: #64748b; }
.dv-pc__kpis b { font-family: var(--font-display); font-size: 20px; color: #0f172a; }
.dv-pc__kpis b.warn { color: #b45309; }
.dv-pc__kpis em { font-style: normal; font-size: 11px; color: #15803d; }
.dv-pc__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
.dv-pc__chart, .dv-pc__list { padding: 12px; border-radius: 10px; border: 1px solid #e2e8f0; }
.dv-pc__title { font-weight: 600; color: #0f172a; margin-bottom: 8px; }
.dv-pc__bars { display: grid; grid-template-columns: repeat(8, 1fr); align-items: end; gap: 6px; height: 110px; }
.dv-pc__bars i { display: block; height: calc(var(--h) * var(--pe)); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #60a5fa, #1d4ed8); }
.dv-pc__list > div:not(.dv-pc__title) { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid #f1f5f9; }
.dv-pc__list b { font-family: var(--font-mono); font-weight: 500; color: #1d4ed8; }
.dv-pc__list span { flex: 1; }
.dv-pc__list em, .dv-phone__row em { font-style: normal; padding: 2px 8px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 600; }
.dv-pc__list em.ok, .dv-phone__row em.ok { background: #dcfce7; color: #15803d; }
.dv-pc__neck { width: 90px; height: 46px; margin: 0 auto; background: linear-gradient(180deg, #1e293b, #334155); }
.dv-pc__foot { width: 260px; height: 12px; margin: 0 auto; border-radius: 8px 8px 0 0; background: #334155; box-shadow: 0 20px 30px -10px rgba(10, 30, 60, 0.4); }

/* Điện thoại: bắt đầu nấp sau PC, trượt sang phải + ra trước */
.dv-phone {
  --qp: clamp(0, calc((var(--dp) - 0.45) / 0.55), 1);
  --qe: calc(var(--qp) * var(--qp) * (3 - 2 * var(--qp)));
  position: absolute; left: 50%; top: 150px; width: 230px; margin-left: 110px; z-index: 1;
  padding: 26px 12px 14px; border-radius: 32px; background: #ffffff; border: 8px solid #0f172a;
  box-shadow: 0 40px 80px -30px rgba(10, 30, 60, 0.55);
  font-size: 12px; color: #334155;
  transform: translate(calc(var(--qe) * 270px), calc((1 - var(--qe)) * 60px)) rotate(calc(-10deg + 14deg * var(--qe))) scale(calc(0.86 + 0.14 * var(--qe)));
  opacity: clamp(0, calc(var(--qp) * 3), 1);
  will-change: transform, opacity;
}

/* Khi đã trượt ra hơn nửa đường thì nổi lên trước PC */
.devices[data-front="1"] .dv-phone { z-index: 3; }

.dv-phone__notch { position: absolute; top: 8px; left: 50%; width: 70px; height: 14px; margin-left: -35px; border-radius: 999px; background: #0f172a; }
.dv-phone__bar { font-weight: 600; color: #0f172a; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; }
.dv-phone__big { padding: 10px 2px; }
.dv-phone__big span { font-size: 11px; color: #64748b; }
.dv-phone__big b { display: block; font-family: var(--font-display); font-size: 34px; line-height: 1; color: #0f172a; }
.dv-phone__big em { font-style: normal; font-size: 11px; color: #15803d; font-weight: 600; }
.dv-phone__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.dv-phone__tiles div { padding: 8px 10px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; }
.dv-phone__tiles span { display: block; font-size: 10px; color: #64748b; }
.dv-phone__tiles b { font-family: var(--font-display); font-size: 16px; color: #0f172a; }
.dv-phone__row { display: flex; gap: 6px; align-items: center; padding: 7px 0; border-top: 1px solid #f1f5f9; }
.dv-phone__row b { font-family: var(--font-mono); font-weight: 500; color: #1d4ed8; }
.dv-phone__row span { flex: 1; }
.dv-phone__btn { margin-top: 8px; padding: 10px; border-radius: 999px; background: #1d4ed8; color: #fff; font-weight: 700; text-align: center; }

.devices__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-8) auto 0; padding: 0; list-style: none; max-width: 980px; }
.devices__points li { display: grid; gap: 4px; padding-left: 14px; border-left: 2px solid var(--accent); }
.devices__points b { font-size: var(--text-md); color: var(--text-primary); }
.devices__points span { font-size: var(--text-sm); color: var(--text-secondary); }

@media (max-width: 960px) {
  .devices__stage { height: 440px; transform: scale(0.78); transform-origin: 50% 0; margin-bottom: -90px; }
  .devices__points { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .devices__stage { width: 980px; left: 50%; margin-left: -490px; position: relative; transform: scale(0.4); height: 560px; margin-bottom: -330px; }
}

@media (prefers-reduced-motion: reduce) {
  .devices { --dp: 1 !important; }
}

/* Đa thiết bị: quãng trượt điện thoại theo biến, ngắn hơn ở màn hẹp để không bị cắt */
.devices { --travel: 270px; }
.dv-phone { transform: translate(calc(var(--qe) * var(--travel)), calc((1 - var(--qe)) * 60px)) rotate(calc(-10deg + 14deg * var(--qe))) scale(calc(0.86 + 0.14 * var(--qe))); }
@media (max-width: 960px) { .devices { --travel: 170px; } .dv-phone { margin-left: 70px; } }

/* ==========================================================================
   Vòng 14 — hero bỏ quầng trắng; tab bấm được; dock nhãn ứng dụng;
   điện thoại đúng tỉ lệ
   ========================================================================== */

/* 1. Hero: bỏ quầng sáng trắng ở đỉnh, nền chuyển đều */
.hero2--grad .hero2__glow { background: none !important; animation: none; }
.hero2--grad { background: linear-gradient(180deg, #0b1633 0%, #10388a 32%, #2a72d6 60%, #a7cdf3 84%, #e9f2fc 100%); }

/* 2. Tab bấm được */
.canvas__tabs button, .win__tabs button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 4px 10px; border-radius: 6px; font: 500 12px/1.4 var(--font-body); color: #475569;
  transition: background 160ms, color 160ms;
}
.canvas__tabs button:hover, .win__tabs button:hover { color: #0f172a; }
.canvas__tabs button.is-on, .win__tabs button.is-on { background: #ffffff; color: #0f172a; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.canvas__tabs button:focus-visible, .win__tabs button:focus-visible, .canvas__run:focus-visible, .canvas__pub:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }

.canvas__run, .canvas__pub { appearance: none; cursor: pointer; font: 500 12px/1.4 var(--font-body); }
.canvas__run { margin-left: auto; padding: 5px 10px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #334155; }
.canvas__run:hover { border-color: #93c5fd; color: #1d4ed8; }
.canvas__pub { border: 0; padding: 6px 12px; border-radius: 6px; font-weight: 600; }
.canvas__pub.is-done { background: #16a34a; }

.tabpanel { display: none; }
.tabpanel.is-on { display: block; animation: panel-in 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.tabpanel--pad { width: 100%; padding: 18px 20px; align-self: start; }
.canvas__body, .win__body--erd { align-items: stretch; }
.canvas__stage.tabpanel.is-on, .erd__stage.tabpanel.is-on { display: block; margin: auto; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Bảng lưới trong panel */
.gridtbl { width: 100%; border-collapse: collapse; font-size: 12.5px; color: #334155; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.gridtbl th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.gridtbl td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; }
.gridtbl tr:last-child td { border-bottom: 0; }
.gridtbl td:first-child { font-family: var(--font-mono); color: #0f172a; }
.gridtbl--perm td:first-child, .gridtbl td:first-child b { font-family: var(--font-body); }
.st, .pm { display: inline-block; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; background: #f1f5f9; color: #475569; }
.st--ok { background: #dcfce7; color: #15803d; } .st--wait { background: #fef3c7; color: #92400e; }
.st--ship { background: #dbeafe; color: #1d4ed8; } .st--ai { background: #ede9fe; color: #6d28d9; }
.pm--r { background: #dbeafe; color: #1d4ed8; } .pm--w { background: #dcfce7; color: #15803d; }

/* Cấu hình tác nhân AI */
.aicfg { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; font-size: 12.5px; color: #334155; }
.aicfg label { display: block; margin: 0 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }
.aicfg__field { padding: 9px 12px; margin-bottom: 12px; border-radius: 8px; background: #fff; border: 1px solid #e2e8f0; color: #0f172a; }
.aicfg__field em { display: block; font-style: normal; font-size: 11px; color: #64748b; }
.aicfg__field--area { min-height: 84px; line-height: 1.5; }
.aicfg__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aicfg__chips span { padding: 4px 10px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 11.5px; font-weight: 600; }

/* "Chạy thử": các node sáng lần lượt */
.canvas.is-running .node { animation: none; }
.canvas.is-running .node.is-lit { border-color: #1d4ed8; box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.16), 0 20px 40px -18px rgba(29, 78, 216, 0.55); transform: translateY(-3px); transition: all 260ms cubic-bezier(0.22, 1, 0.36, 1); }

/* 3. Dock: nhãn ứng dụng */
.dock { gap: 8px; padding: 8px 12px; align-items: center; border-radius: 999px; bottom: -22px; flex-wrap: nowrap; }
.dock__lead { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #64748b; padding-right: 4px; }
.dock__app { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 12.5px; font-weight: 600; color: #0f172a; white-space: nowrap; transition: transform 160ms, border-color 160ms; }
.dock__app:hover { transform: translateY(-2px); border-color: #93c5fd; }
.dock__app i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.dock__app--more { color: #64748b; font-weight: 500; }

/* 4. Điện thoại: tỉ lệ ~9:19 */
.dv-phone { width: 214px; min-height: 452px; padding: 30px 12px 16px; border-radius: 38px; border-width: 9px; display: flex; flex-direction: column; top: 96px; }
.dv-phone__btn { margin-top: auto; }
.dv-phone__home { width: 84px; height: 4px; margin: 12px auto 0; border-radius: 999px; background: #0f172a; opacity: 0.85; }
.dv-phone__notch { top: 9px; width: 76px; height: 16px; margin-left: -38px; }

@media (max-width: 960px) {
  .dock { position: static; transform: none; margin: 14px auto 0; flex-wrap: wrap; justify-content: center; border-radius: 16px; box-shadow: none; border: 1px solid #e2e8f0; }
  .aicfg { grid-template-columns: 1fr; }
  .tabpanel--pad { overflow-x: auto; }
  .gridtbl { min-width: 560px; }
}

.dock__lead { white-space: nowrap; }

/* ==========================================================================
   Vòng 15 — theo bản đánh giá: tương phản đầu trang, chữ hiện ngay,
   nhịp cuộn gọn hơn, form tư vấn không phải cuộn
   ========================================================================== */

/* 1. Dòng bằng chứng ở hero: chữ tối trên nền sáng riêng (trước đó trắng trên xanh nhạt) */
.hero2--grad .hero2__proof {
  margin-top: var(--space-4);
  padding: 8px 18px;
  gap: var(--space-2) var(--space-5);
  border-radius: var(--r-round);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 24px -12px rgba(10, 30, 60, 0.35);
  color: #0b1633;
  font-weight: 600;
}
.hero2--grad .hero2__proof svg { background: rgba(29, 78, 216, 0.12); color: #1d4ed8; }

/* 2. Chữ hiện ngay; chuyển động chỉ dành cho phần minh hoạ */
:root { --settle: 380ms cubic-bezier(0.22, 1, 0.36, 1); }

.js .reveal,
.js .why.reveal > *,
.js .devices__head.reveal,
.js .shot.reveal > .container,
.js .idea.reveal > .container,
.js .aiB.reveal > .container,
.js .ind.reveal,
.js .faq2__head.reveal,
.js .closing.reveal,
.js .logos__row.reveal .logos__item,
.js .signals.reveal .signal,
.js .threat.reveal,
.js .faq.reveal .faq__item,
.js .fcell.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* phần minh hoạ vẫn chuyển động, nhưng ngắn và ít dịch chuyển */
.js .fcell.reveal .fillu__row { transform: translateY(6px); transition-duration: 320ms; }
.js .ind.reveal .icard { transform: translateY(8px); transition-duration: 360ms; }
.js .ind.reveal.is-visible .icard:nth-child(n) { transition-delay: calc((var(--k, 0)) * 1ms); }
.js .ind.reveal.is-visible .icard:nth-child(2) { transition-delay: 40ms; }
.js .ind.reveal.is-visible .icard:nth-child(3) { transition-delay: 80ms; }
.js .ind.reveal.is-visible .icard:nth-child(4) { transition-delay: 120ms; }
.js .ind.reveal.is-visible .icard:nth-child(5) { transition-delay: 160ms; }
.js .ind.reveal.is-visible .icard:nth-child(6) { transition-delay: 200ms; }
.js .ind.reveal.is-visible .icard:nth-child(7) { transition-delay: 240ms; }
.js .ind.reveal.is-visible .icard:nth-child(8) { transition-delay: 280ms; }

/* 3. Nhịp cuộn gọn hơn ở các phần ít nội dung */
.section--why, #context { padding-block: var(--space-16) var(--space-12); }
#automation.idea { padding-block: var(--space-16); }
.shot { padding-block: var(--space-16); }
.devices { padding-block: var(--space-16); }
.section--band-light { padding-block: var(--space-16); }
.section--faq { padding-top: var(--space-16); }
.closing { margin-top: var(--space-12); padding-block: var(--space-12); }
#services.tone-b { padding-block: var(--space-16); }
.steps--inline { margin-top: var(--space-12); padding-top: var(--space-10); }
.aiB--index { padding-top: var(--space-16); }
.aiB--index .canvas { margin-bottom: var(--space-10); }
.signals { margin-bottom: var(--space-10); }
.why { margin-bottom: var(--space-10); }

/* 4. Form tư vấn: gọn, nút gửi luôn trong tầm nhìn */
.modal-container {
  display: flex;
  flex-direction: column;
  max-height: 94vh;
  padding: var(--space-6) var(--space-8) 0;
  overflow: hidden;
}
.modal-header { margin-bottom: var(--space-4); }
.modal-header h2 { font-size: var(--text-xl); margin: 6px 0 4px; }
.modal-sub { margin: 0; font-size: var(--text-sm); }
.company-badge { font-size: 10px; padding: 2px 8px; }
.modal-form { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; overflow-y: auto; padding-bottom: 0; }
.modal-form .form__row { gap: var(--space-3); }
.modal-form .field { gap: 4px; }
.modal-form .field__label { font-size: var(--text-xs); }
.modal-form input, .modal-form select { padding-block: 9px; }
.modal-form textarea { min-height: 72px; height: 72px; }
.modal-form .form__status[data-visible="false"] { display: none; }
.modal-form > .btn[type="submit"], .modal-form .form__note {
  position: sticky;
  bottom: 0;
}
.modal-form > .btn[type="submit"] { bottom: 30px; z-index: 2; margin-top: var(--space-2); box-shadow: 0 -12px 16px 4px var(--bg-raised, #fff); }
.modal-form .form__note { z-index: 2; margin: 0; padding: 8px 0 12px; background: var(--bg-raised, #fff); font-size: 11px; text-align: center; color: var(--text-muted); }

@media (max-width: 600px) {
  .modal-container { padding: var(--space-5) var(--space-5) 0; max-height: 96vh; }
  .hero2--grad .hero2__proof { border-radius: 16px; justify-content: center; }
}

/* Vòng 15b — thẻ lĩnh vực hiện ngay; bảng phân quyền trên nền trắng; form trên điện thoại */
.js .ind.reveal .icard { opacity: 1 !important; transform: none !important; transition: border-color 160ms, box-shadow 160ms !important; }
.tabpanel[data-panel="roles"] .perm { max-width: 760px; margin: 0 auto; padding: 16px 18px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; }
@media (max-width: 600px) {
  .modal-form { padding-inline: 0; }
  .modal-form .form__note { position: static; padding-bottom: 16px; }
  .modal-form > .btn[type="submit"] { bottom: 0; box-shadow: 0 -10px 14px 2px var(--bg-raised, #fff); }
  .modal-header h2 { font-size: var(--text-lg); }
}

/* ==========================================================================
   Vòng 16 — Bối cảnh kể thành chuyện ngắn: vướng ở đâu → chọn công cụ chưa đủ
   → câu nối sang phương pháp. Vai trò trong bảng phân quyền bấm được.
   ========================================================================== */
.ctx__head, .ctx__mid { max-width: 820px; margin: 0 auto; text-align: center; }
.ctx__head h2 { margin: 0; font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.15; letter-spacing: -0.02em; color: #0b1633; }
.ctx__head h2 em { font-style: normal; color: #1d4ed8; }

.ctx__pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-10); }
.ctx__pain { padding: var(--space-6); border-radius: 18px; background: #f1f6fe; border: 1px solid #dbe7fb; }
.ctx__ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: #1d4ed8; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
.ctx__ico svg { width: 22px; height: 22px; }
.ctx__pain h3 { margin: var(--space-4) 0 6px; font-size: var(--text-lg); color: #0b1633; }
.ctx__pain p { margin: 0; color: #475569; font-size: var(--text-base); line-height: 1.55; }

.ctx__mid { margin-top: var(--space-16); }
.ctx__mid h2 { margin: 0 0 10px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.2; letter-spacing: -0.015em; color: #0b1633; }
.ctx__mid p { margin: 0; color: #475569; font-size: var(--text-lg); line-height: 1.55; }

.ctx__asks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-10); border-top: 1px solid #e2e8f0; }
.ctx__ask { padding: var(--space-6) var(--space-6) var(--space-2); }
.ctx__ask + .ctx__ask { border-left: 1px solid #e2e8f0; }
.ctx__ask:first-child { padding-left: 0; }
.ctx__label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #1d4ed8; }
.ctx__ask h3 { margin: 10px 0 8px; font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.01em; color: #0b1633; }
.ctx__ask p { margin: 0; color: #64748b; font-size: var(--text-sm); line-height: 1.55; }

.ctx__bridge { max-width: 760px; margin: var(--space-12) auto 0; padding-top: var(--space-8); border-top: 1px solid #e2e8f0; text-align: center; font-size: var(--text-xl); font-weight: 600; line-height: 1.45; color: #0b1633; }

@media (max-width: 860px) {
  .ctx__pains, .ctx__asks { grid-template-columns: minmax(0, 1fr); }
  .ctx__pains { gap: var(--space-3); margin-top: var(--space-8); }
  .ctx__pain { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--space-4); padding: var(--space-5); }
  .ctx__pain .ctx__ico { grid-row: span 2; }
  .ctx__pain h3 { margin-top: 0; }
  .ctx__ask, .ctx__ask:first-child { padding: var(--space-5) 0; }
  .ctx__ask + .ctx__ask { border-left: 0; border-top: 1px solid #e2e8f0; }
  .ctx__mid { margin-top: var(--space-12); }
  .ctx__bridge { font-size: var(--text-lg); }
}

/* Vai trò bấm được */
.perm__roles button { appearance: none; border: 0; cursor: pointer; padding: 5px 12px; border-radius: 999px; background: #f1f5f9; font: 500 12px/1.5 var(--font-body); color: #475569; transition: background 160ms, color 160ms; }
.perm__roles button:hover { background: #e2e8f0; color: #0f172a; }
.perm__roles button.is-active { background: #1d6fd6; color: #fff; font-weight: 600; }
.perm__roles button:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.js .shot.is-visible .perm.is-live .sw, .js .shot.is-visible .perm.is-live .sw::after { transition-delay: 0ms !important; }
.canvas__dots { pointer-events: none; }
.win__body--erd .tabpanel, .canvas__body .tabpanel { position: relative; z-index: 1; }

/* ==========================================================================
   Vòng 17 — Màn đầu trọn chiều cao màn hình; đáy nền gợn rất nhẹ như mặt nước
   ========================================================================== */
.fold {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;           /* nội dung dài hơn thì fold tự cao hơn, không cắt */
  overflow: hidden;
  background: linear-gradient(180deg, #0b1633 0%, #10388a 26%, #2a72d6 50%, #a7cdf3 70%, #e4effb 82%, #ffffff 96%);
}
.fold > .hero2--grad {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: none !important;
  padding-top: calc(var(--header-h) + var(--header-offset) + clamp(24px, 5vh, 64px));
  padding-bottom: clamp(20px, 4vh, 48px);
}
.fold > .hero2--grad .hero2__sub { margin-top: clamp(16px, 2.6vh, 28px); }
.fold > .hero2--grad .hero2__actions { margin-top: clamp(20px, 3.4vh, 36px); }
.fold > .hero2--grad .hero2__proof { margin-top: clamp(18px, 3.4vh, 36px); }
.fold > .logos--in-fade {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  background: none;
  padding: clamp(16px, 3vh, 32px) 0 clamp(28px, 6vh, 64px);
}
.fold > .logos--in-fade .logos__item { opacity: 1; color: #334155; }
.fold > .logos--in-fade .logos__item b { color: #0b1633; }
.fold > .logos--in-fade .logos__lead { color: #475569; }
.fold > .hero2--grad > .container { position: relative; z-index: 1; }

/* Ba lớp sóng rộng, biên độ thấp, mờ; trôi ngang đúng một bước sóng nên lặp không giật */
.fold__waves { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 0; pointer-events: none; }
.fold__wave { position: absolute; left: 0; width: 200%; height: 120px; will-change: transform; animation: fold-drift 22s linear infinite; }
.fold__wave path { fill: currentColor; }
.fold__wave--1 { top: 0;    color: rgba(167, 205, 243, 0.34); filter: blur(10px); animation-duration: 25s; }
.fold__wave--2 { top: 22%;  color: rgba(228, 239, 251, 0.62); filter: blur(8px);  animation-duration: 19s; animation-direction: reverse; height: 140px; }
.fold__wave--3 { top: 46%;  color: rgba(255, 255, 255, 0.78); filter: blur(7px);  animation-duration: 16s; height: 150px; }
.fold__wave--3::after { content: ""; }
@keyframes fold-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

@media (max-width: 960px) {
  .fold > .hero2--grad { background: none !important; padding-top: calc(var(--header-h) + var(--header-offset) + clamp(20px, 4vh, 40px)); padding-bottom: var(--space-5); }
  .fold__wave { width: 400%; height: 90px; }
  .fold__wave--2 { height: 100px; } .fold__wave--3 { height: 110px; }
  @keyframes fold-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
}
@media (prefers-reduced-motion: reduce) {
  .fold__wave { animation: none; }
}

/* Vòng 17b — sóng: bỏ giới hạn max-width của svg, đáy mỗi lớp tan dần (không còn mép) */
.fold__wave {
  max-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
}
.fold__wave--1 { height: 200px; } .fold__wave--2 { height: 220px; } .fold__wave--3 { height: 240px; }
@media (max-width: 960px) {
  .fold__wave--1 { height: 150px; } .fold__wave--2 { height: 165px; } .fold__wave--3 { height: 180px; }
}
@media (max-width: 600px) {
  .fold > .logos--in-fade .logos__row--stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .fold > .logos--in-fade .logos__item { display: flex; flex-direction: column; align-items: center; gap: 0; font-size: var(--text-sm); text-align: center; }
  .fold > .logos--in-fade .logos__item b { font-size: 1.5rem; line-height: 1.15; }
  .fold > .logos--in-fade .logos__lead { margin-top: var(--space-4); font-size: var(--text-xs); }
  .fold > .logos--in-fade { padding: 12px 0 24px; }
  .fold > .hero2--grad .hero2__actions { gap: 10px; }
}

/* Vòng 17c — màn thấp: siết khoảng cách theo chiều cao để vẫn trọn một màn */
.fold > .hero2--grad { padding-top: calc(var(--header-h) + var(--header-offset) + clamp(8px, 5vh, 64px)); padding-bottom: clamp(8px, 4vh, 48px); }
.fold > .logos--in-fade { padding: clamp(10px, 3vh, 32px) 0 clamp(18px, 6vh, 64px); }
@media (max-height: 760px) and (min-width: 961px) {
  .fold > .hero2--grad .hero2__title { font-size: clamp(2.4rem, 7.2vh, 3.6rem); }
}
@media (max-width: 600px) {
  .fold > .hero2--grad { padding-top: calc(var(--header-h) + var(--header-offset) + 12px); padding-bottom: 8px; }
  .fold > .hero2--grad .hero2__sub { margin-top: 14px; }
  .fold > .hero2--grad .hero2__actions { margin-top: 18px; }
  .fold > .hero2--grad .hero2__proof { margin-top: 16px; }
  .fold > .logos--in-fade { padding: 10px 0 18px; }
}
/* nút phụ vẫn đọc rõ khi nằm trên dải xanh nhạt */
.fold > .hero2--grad .hero2__actions .btn--ghost { background: rgba(11, 22, 51, 0.22); border-color: rgba(255, 255, 255, 0.45); }

/* ==========================================================================
   Vòng 18 — thay ba dải sóng bằng MỘT vùng chuyển tiếp mềm: hai lớp gần nhau ở đáy,
   1 nhịp cong rộng / chiều ngang, gợn 10–14 px, mềm bằng màu trong suốt (không blur),
   trôi 28–34 s cùng hướng, đáy trắng hoàn toàn.
   ========================================================================== */
.fold { background: linear-gradient(180deg, #0b1633 0%, #10388a 26%, #2a72d6 50%, #a7cdf3 72%, #dcebfa 86%, #ffffff 100%); }
.fold__waves { height: 30%; min-height: 200px; }
.fold__layer { position: absolute; left: 0; right: 0; bottom: 0; }
.fold__layer--1 { top: 0; }
.fold__layer--2 { top: 22px; }
.fold__crest { display: block; width: 200%; max-width: none; height: 40px; will-change: transform; animation: fold-drift 34s linear infinite; }
.fold__crest path { fill: currentColor; }
.fold__layer::after { content: ""; position: absolute; left: 0; right: 0; top: 39px; bottom: 0; }
/* lớp sau: rất nhạt */
.fold__layer--1 { color: rgba(255, 255, 255, 0.16); }
.fold__layer--1::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.5) 100%); }
/* lớp trước: đậm dần tới trắng hoàn toàn ở đáy */
.fold__layer--2 { color: rgba(255, 255, 255, 0.24); }
.fold__layer--2::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.85) 60%, #ffffff 100%); }
.fold__layer--2 .fold__crest { animation-duration: 28s; animation-delay: -9s; }
@media (max-width: 960px) {
  .fold__crest { width: 300%; }
  .fold__waves { min-height: 170px; }
}
@media (prefers-reduced-motion: reduce) { .fold__crest { animation: none; } }
/* mép sóng tan dần bằng độ trong suốt, không có đường viền */
.fold__crest { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, #000 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, #000 100%); }

/* ==========================================================================
   Vòng 19 — nền hero loang mềm (tham chiếu CreativeFlow), bỏ toàn bộ sóng.
   Tĩnh: navy phủ ngang phía trên + elip lớn xanh → trắng, giữa xuống thấp hơn hai bên.
   Động: hai vùng sáng radial rất lớn, "thở" 29 s / 34 s, biên độ nhỏ.
   ========================================================================== */
.fold {
  background:
    linear-gradient(180deg, #0a1430 0%, rgba(10, 20, 48, 0.92) 10%, rgba(10, 20, 48, 0.55) 26%, rgba(10, 20, 48, 0.18) 40%, rgba(10, 20, 48, 0) 52%),
    radial-gradient(ellipse 100% 96% at 50% -6%,
      #0d2460 0%, #10358c 24%, #1749b8 40%, #2a72d6 54%, #4f8fe2 63%, #7fb0ec 71%,
      #aacdf4 78%, #cfe2f9 85%, #e9f2fc 91%, #f8fbfe 96%, #ffffff 100%),
    #ffffff;
}
.fold__aura { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fold__blob { position: absolute; display: block; border-radius: 50%; will-change: transform; }
/* vùng xanh sáng ở giữa: kéo màu xuống thấp hơn ở tâm */
.fold__blob--a {
  left: 50%; top: 60%; width: 92vw; height: 64vh; min-height: 420px; margin: -32vh 0 0 -46vw;
  background: radial-gradient(closest-side, rgba(42, 114, 214, 0.62) 0%, rgba(42, 114, 214, 0.42) 32%, rgba(60, 130, 225, 0.2) 58%, rgba(80, 150, 235, 0.07) 80%, rgba(80, 150, 235, 0) 100%);
  animation: aura-a 29s ease-in-out infinite alternate;
}
/* vùng xanh nhạt lệch trái, trôi rất nhẹ để hình loang đổi dáng */
.fold__blob--b {
  left: 36%; top: 64%; width: 70vw; height: 50vh; min-height: 340px; margin: -25vh 0 0 -35vw;
  background: radial-gradient(closest-side, rgba(96, 165, 245, 0.42) 0%, rgba(96, 165, 245, 0.24) 40%, rgba(96, 165, 245, 0.08) 72%, rgba(96, 165, 245, 0) 100%);
  animation: aura-b 34s ease-in-out infinite alternate;
}
/* đáy luôn trắng, tan dần (không có mép) */
.fold__aura::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 66%, rgba(255,255,255,0.35) 76%, rgba(255,255,255,0.72) 85%, rgba(255,255,255,0.93) 92%, #ffffff 98%);
}
@keyframes aura-a { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d(1.5%, 2%, 0) scale(1.07, 1.04); } }
@keyframes aura-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(9%, -3%, 0) scale(1.1, 0.96); } }

@media (max-width: 960px) {
  .fold {
    background:
      linear-gradient(180deg, #0a1430 0%, rgba(10, 20, 48, 0.9) 10%, rgba(10, 20, 48, 0.5) 26%, rgba(10, 20, 48, 0) 50%),
      radial-gradient(ellipse 210% 92% at 50% -6%,
        #0d2460 0%, #10358c 24%, #1749b8 40%, #2a72d6 54%, #4f8fe2 63%, #7fb0ec 71%,
        #aacdf4 78%, #cfe2f9 85%, #e9f2fc 91%, #f8fbfe 96%, #ffffff 100%),
      #ffffff;
  }
  .fold__blob--a { width: 170vw; margin-left: -85vw; }
  .fold__blob--b { width: 130vw; margin-left: -65vw; }
}
@media (prefers-reduced-motion: reduce) { .fold__blob { animation: none; } }

/* Vòng 19b — kéo vùng navy/xanh xuống thấp hơn, trắng bắt đầu muộn hơn */
.fold {
  background:
    linear-gradient(180deg, #0a1430 0%, rgba(10, 20, 48, 0.95) 14%, rgba(10, 20, 48, 0.68) 32%, rgba(10, 20, 48, 0.3) 48%, rgba(10, 20, 48, 0.08) 58%, rgba(10, 20, 48, 0) 66%),
    radial-gradient(ellipse 104% 106% at 50% -2%,
      #0d2460 0%, #10358c 26%, #1749b8 43%, #2a72d6 57%, #4f8fe2 66%, #7fb0ec 74%,
      #aacdf4 81%, #cfe2f9 87%, #e9f2fc 92%, #f8fbfe 97%, #ffffff 100%),
    #ffffff;
}
.fold__blob--a { top: 65%; }
.fold__blob--b { top: 69%; }
.fold__aura::after { background: linear-gradient(180deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.4) 81%, rgba(255,255,255,0.78) 89%, rgba(255,255,255,0.95) 94%, #ffffff 99%); }
@media (max-width: 960px) {
  .fold {
    background:
      linear-gradient(180deg, #0a1430 0%, rgba(10, 20, 48, 0.92) 14%, rgba(10, 20, 48, 0.6) 32%, rgba(10, 20, 48, 0.2) 50%, rgba(10, 20, 48, 0) 62%),
      radial-gradient(ellipse 220% 100% at 50% -2%,
        #0d2460 0%, #10358c 26%, #1749b8 43%, #2a72d6 57%, #4f8fe2 66%, #7fb0ec 74%,
        #aacdf4 81%, #cfe2f9 87%, #e9f2fc 92%, #f8fbfe 97%, #ffffff 100%),
      #ffffff;
  }
}
@media (max-width: 960px) {
  /* điện thoại: số liệu nằm cao hơn theo tỉ lệ → trắng phải tới sớm hơn để chữ tối đọc rõ */
  .fold__aura::after { background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.55) 71%, rgba(255,255,255,0.9) 79%, #ffffff 90%); }
}

/* ==========================================================================
   Vòng 20 — lưới chấm chuyển động: lưới nền trôi chéo rất chậm (lặp đúng một ô),
   cộng một vùng sáng lang thang làm các chấm đi qua sáng lên rồi tắt dần.
   ========================================================================== */
.hero2--grad .hero2__glow::after { display: none; }   /* lưới tĩnh cũ */
.fold__dots {
  position: absolute; inset: -22px; display: block;
  background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 26%, #000 58%, transparent 80%);
  mask-image: linear-gradient(180deg, transparent 4%, #000 26%, #000 58%, transparent 80%);
  animation: dots-drift 14s linear infinite;
  will-change: transform;
}
.fold__dots--lit {
  background-image: radial-gradient(rgba(190, 225, 255, 0.95) 1.1px, transparent 1.5px);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,0.5) 45%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,0.5) 45%, transparent 100%);
  -webkit-mask-size: 46% 52%; mask-size: 46% 52%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 10% 30%; mask-position: 10% 30%;
  animation: dots-drift 14s linear infinite, dots-roam 26s ease-in-out infinite alternate;
}
@keyframes dots-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(22px, -22px, 0); } }
@keyframes dots-roam {
  0%   { -webkit-mask-position: 5% 20%;  mask-position: 5% 20%; }
  35%  { -webkit-mask-position: 70% 45%; mask-position: 70% 45%; }
  70%  { -webkit-mask-position: 95% 15%; mask-position: 95% 15%; }
  100% { -webkit-mask-position: 35% 60%; mask-position: 35% 60%; }
}
@media (max-width: 960px) { .fold__dots--lit { -webkit-mask-size: 90% 40%; mask-size: 90% 40%; } }
@media (prefers-reduced-motion: reduce) { .fold__dots { animation: none; } }
/* chấm sáng dịu hơn để không lẫn với dấu câu trong đoạn mô tả */
.fold__dots--lit { background-image: radial-gradient(rgba(170, 210, 255, 0.6) 1px, transparent 1.4px); }

/* ==========================================================================
   Vòng 21 — theo đánh giá 8/10: nền hero bớt bận, nút phụ rõ là nút,
   câu nối nhỏ lại, tiêu đề Tự động hoá gọn, bóng đổ mô phỏng gọn hơn
   ========================================================================== */
/* 1. Lưới chấm: nổi một nửa, tan hẳn trước vùng trắng */
.fold__dots { background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.3px);
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 22%, #000 40%, transparent 58%);
  mask-image: linear-gradient(180deg, transparent 4%, #000 22%, #000 40%, transparent 58%); }
.fold__dots--lit { background-image: radial-gradient(rgba(170, 210, 255, 0.32) 1px, transparent 1.4px);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,0.5) 45%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0%, rgba(0,0,0,0.5) 45%, transparent 100%); }
@keyframes dots-roam {
  0%   { -webkit-mask-position: 5% 10%;  mask-position: 5% 10%; }
  35%  { -webkit-mask-position: 70% 28%; mask-position: 70% 28%; }
  70%  { -webkit-mask-position: 95% 6%;  mask-position: 95% 6%; }
  100% { -webkit-mask-position: 35% 34%; mask-position: 35% 34%; }
}
/* Nút phụ: viền trắng rõ, nền trong — không còn giống nút bị vô hiệu hoá */
.fold > .hero2--grad .hero2__actions .btn--ghost {
  background: rgba(255, 255, 255, 0.1); color: #ffffff; font-weight: 600;
  border: 1.5px solid rgba(255, 255, 255, 0.85); box-shadow: none; backdrop-filter: none;
}
.fold > .hero2--grad .hero2__actions .btn--ghost:hover { background: #ffffff; color: #123a9a; }

/* 2. Bối cảnh: câu nối nhỏ lại, khoảng cách gọn, nhường điểm nhấn cho Phương pháp */
.ctx__mid { margin-top: var(--space-12); }
.ctx__asks { margin-top: var(--space-8); }
.ctx__bridge { max-width: 640px; margin-top: var(--space-8); padding-top: var(--space-6); font-size: var(--text-base); font-weight: 500; color: #475569; }
#context { padding-bottom: var(--space-10); }

/* 3. Tự động hoá: tiêu đề một dòng + mô tả nhỏ */
#automation .idea__h2 { max-width: none; font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.idea__lead { max-width: 56ch; margin: 12px 0 0; font-size: var(--text-lg); line-height: 1.55; color: #475569; }

/* Bóng đổ mô phỏng: gần và nhẹ hơn, khối bám nền thay vì lơ lửng */
.win { box-shadow: 0 18px 36px -24px rgba(10, 40, 90, 0.28), 0 0 0 1px var(--stroke); }
.canvas { box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.25); }
.dv-pc__screen { box-shadow: 0 24px 44px -26px rgba(10, 30, 60, 0.4); }
.dv-pc__foot { box-shadow: 0 10px 16px -8px rgba(10, 30, 60, 0.3); }
.dv-phone { box-shadow: 0 22px 40px -24px rgba(10, 30, 60, 0.45); }

#automation .idea__h2 { color: #0b1633; }

/* Vòng 21b — điện thoại: thanh công cụ của khung mô phỏng không chen chữ, không tràn */
@media (max-width: 720px) {
  .win__bar, .canvas__bar { flex-wrap: wrap; gap: 8px; height: auto; padding: 10px 12px; }
  .win__tabs, .canvas__tabs { display: flex; flex: 1 1 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .win__tabs::-webkit-scrollbar, .canvas__tabs::-webkit-scrollbar { display: none; }
  .win__tabs button, .canvas__tabs button { flex: 0 0 auto; white-space: nowrap; }
  .win__chip { display: none; }
  .canvas__run { margin-left: 0; }
  .canvas__run, .canvas__pub { flex: 1 1 0; white-space: nowrap; text-align: center; }
}

/* ==========================================================================
   Vòng 22 — chấm phóng to theo con trỏ: hai lớp chấm lớn hơn, cùng lưới 22 px và cùng nhịp trôi,
   chỉ hiện trong vùng radial quanh (--mx, --my). Vòng ngoài chấm vừa, lõi chấm to → cảm giác kính lúp.
   ========================================================================== */
.fold__cur {
  position: absolute; inset: 0; display: block; opacity: var(--mo, 0);
  background-size: 22px 22px;
  animation: dots-drift-bg 14s linear infinite;
}
.fold__cur--halo {
  background-image: radial-gradient(rgba(215, 235, 255, 0.6) 1.5px, transparent 1.9px);
  -webkit-mask-image: radial-gradient(circle 190px at var(--mx, -400px) var(--my, -400px), #000 0%, rgba(0,0,0,0.55) 45%, transparent 100%), linear-gradient(180deg, #000 0%, #000 52%, transparent 70%);
  mask-image: radial-gradient(circle 190px at var(--mx, -400px) var(--my, -400px), #000 0%, rgba(0,0,0,0.55) 45%, transparent 100%), linear-gradient(180deg, #000 0%, #000 52%, transparent 70%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.fold__cur--core {
  background-image: radial-gradient(rgba(255, 255, 255, 0.95) 2.4px, transparent 2.9px);
  -webkit-mask-image: radial-gradient(circle 90px at var(--mx, -400px) var(--my, -400px), #000 0%, rgba(0,0,0,0.6) 50%, transparent 100%), linear-gradient(180deg, #000 0%, #000 52%, transparent 70%);
  mask-image: radial-gradient(circle 90px at var(--mx, -400px) var(--my, -400px), #000 0%, rgba(0,0,0,0.6) 50%, transparent 100%), linear-gradient(180deg, #000 0%, #000 52%, transparent 70%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@keyframes dots-drift-bg { from { background-position: 0 0; } to { background-position: 22px -22px; } }
@media (hover: none), (prefers-reduced-motion: reduce) { .fold__cur { display: none; } }

/* Vòng 23 — lưới chấm vẽ bằng canvas (main.js); các lớp chấm CSS cũ không còn trong HTML */
.fold__grid { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }

/* ==========================================================================
   Vòng 26 — Bối cảnh: ba tình huống minh hoạ tĩnh + câu nối ngắn.
   Phương pháp: ba bước 01–02–03 trực tiếp trên nền xanh, đường nối mảnh, dải chi phí riêng.
   ========================================================================== */
.ctx__pain { display: flex; flex-direction: column; padding: var(--space-5); }
.ctx__pain h3 { margin-top: var(--space-5); }
.scene { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 168px; padding: 16px; border-radius: 12px; background: #ffffff; border: 1px solid #e3ecf9; font-size: 12.5px; color: #334155; overflow: hidden; }
.scene em { font-style: normal; margin-left: auto; padding-left: 10px; font-size: 11px; color: #94a3b8; white-space: nowrap; }

.scene__file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; white-space: nowrap; overflow: hidden; }
.scene__file svg { flex: 0 0 16px; width: 16px; height: 16px; }
.scene__file:nth-child(2) { margin-left: 10px; }
.scene__file:nth-child(3) { margin-left: 20px; }
.scene__file.is-q { border-color: #fcd34d; background: #fffbeb; }
.scene__file.is-q em { color: #b45309; font-weight: 700; font-size: 13px; }

.scene--chat { gap: 6px; }
.scene__msg { display: flex; align-items: baseline; align-self: flex-start; max-width: 92%; padding: 7px 11px; border-radius: 12px 12px 12px 4px; background: #eef2f7; }
.scene__msg--r { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: #dbeafe; }
.scene__msg.is-old { opacity: 0.5; }
.scene__more { align-self: center; padding: 2px 10px; border-radius: 999px; background: #f1f5f9; font-size: 11px; color: #64748b; }

.scene__rtitle { display: flex; align-items: baseline; font-weight: 700; color: #0b1633; padding-bottom: 6px; border-bottom: 1px solid #eef2f7; }
.scene__rtitle em { color: #b45309; font-weight: 600; }
.scene__src { display: flex; align-items: center; gap: 8px; }
.scene__src i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px dashed #cbd5e1; }
.scene__src.is-done i { border: 0; background: #1d9d5b; }
.scene__src.is-done em { color: #1d9d5b; }

.ctx__bridge { max-width: 720px; margin-top: var(--space-10); padding-top: 0; border-top: 0; font-size: var(--text-xl); font-weight: 600; color: #0b1633; }
.ctx__bridge em { font-style: normal; color: #1d4ed8; }
#context { padding-bottom: var(--space-16); }

/* Phương pháp */
.method .why { margin-bottom: var(--space-12); }
.method__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.method__steps::before { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0.18)); }
.method__step { position: relative; color: #ffffff; }
.method__num { position: relative; display: inline-block; padding-right: 14px; font: 600 1.05rem/42px var(--font-mono); letter-spacing: 0.06em; color: #ffffff; background: #1d4bcf; }
.method__step:nth-child(2) .method__num, .method__step:nth-child(3) .method__num { padding-left: 14px; margin-left: -14px; }
.method__step h3 { margin: var(--space-5) 0 10px; font-size: 1.55rem; line-height: 1.25; letter-spacing: -0.01em; color: #ffffff; }
.method__step p { margin: 0; max-width: 34ch; font-size: var(--text-base); line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.method__out { margin-top: var(--space-5) !important; padding-top: var(--space-4); border-top: 1px solid rgba(255, 255, 255, 0.18); color: #ffffff !important; font-weight: 600; }
.method__out b { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.method__cost { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin: var(--space-16) 0 0; padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.85); }
.method__cost b { margin-right: auto; font-weight: 600; color: #ffffff; }
.method__cost span { position: relative; padding-left: 14px; }
.method__cost span::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #93c5fd; }

@media (max-width: 860px) {
  .scene { height: auto; min-height: 150px; }
  .ctx__pain { display: flex; grid-template-columns: none; }
  .ctx__pain h3 { margin-top: var(--space-4); }
  .method__steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-left: 22px; }
  .method__steps::before { left: 0; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; background: rgba(255, 255, 255, 0.3); }
  .method__num, .method__step:nth-child(n) .method__num { padding: 0; margin: 0; line-height: 1.4; background: none; }
  .method__step::before { content: ""; position: absolute; left: -26px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #ffffff; }
  .method__step h3 { margin-top: 6px; font-size: 1.35rem; }
  .method__cost b { flex: 1 1 100%; }
  .ctx__bridge { font-size: var(--text-lg); }
}

/* Vòng 26b — số bước không có ô nền; đường nối chạy từ sau con số tới hết cột; hàng "Đầu ra" thẳng nhau */
.method__steps::before { display: none; }
.method__num, .method__step:nth-child(n) .method__num { display: flex; align-items: center; gap: 14px; padding: 0; margin: 0; background: none; }
.method__num::after { content: ""; flex: 1; height: 1px; margin-right: calc(var(--space-10) * -1); background: rgba(255, 255, 255, 0.32); }
.method__step:last-child .method__num::after { margin-right: 0; background: linear-gradient(90deg, rgba(255,255,255,0.32), rgba(255,255,255,0)); }
.method__step > p:not(.method__out) { min-height: 3.2em; }
@media (max-width: 860px) {
  .method__steps::before { display: block; }
  .method__num::after { display: none; }
  .method__step > p:not(.method__out) { min-height: 0; }
}

/* ==========================================================================
   Vòng 27 — Phương pháp theo bản phác của anh Hòa: nhãn nhỏ + tiêu đề câu, số trong vòng tròn,
   "Đầu ra" cùng dòng, dải "Chi phí minh bạch" ba cột có vạch ngăn
   ========================================================================== */
.method__head { text-align: center; margin-bottom: var(--space-12); }
.method__eyebrow { margin: 0 0 10px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.method__head h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: -0.015em; color: #ffffff; }

.method__num, .method__step:nth-child(n) .method__num { gap: 0; font: 500 0.95rem/1 var(--font-body); letter-spacing: 0.02em; }
.method__num { counter-increment: none; }
.method__num::before { content: none; }
.method__num { --ring: 40px; }
.method__num { height: var(--ring); }
.method__num > *, .method__num { color: #ffffff; }
.method__num { position: relative; padding-left: 0; }
.method__num { text-indent: 0; }
.method__num::after { margin-left: 12px; }
.method__num { display: flex; }
.method__num b, .method__num { font-weight: 500; }
.method__num { width: auto; }
.method__num > span { display: none; }
/* vòng tròn quanh con số: dùng first-letter không được → bọc bằng box-shadow trên pseudo riêng */
.method__num { isolation: isolate; }
.method__num::before { content: ""; position: absolute; left: 0; top: 0; width: var(--ring); height: var(--ring); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.85); z-index: -1; }
.method__num { padding-left: 11px; }
.method__num::after { margin-left: 23px; }

.method__step h3 { margin: var(--space-4) 0 8px; font-size: 1.4rem; font-weight: 700; }
.method__step > p:not(.method__out) { min-height: 3.2em; max-width: 26ch; }
.method__out { margin-top: var(--space-3) !important; padding-top: 0; border-top: 0; font-weight: 400; font-size: var(--text-sm) !important; color: rgba(255, 255, 255, 0.85) !important; }
.method__out b { display: inline; margin: 0; font-size: inherit; font-weight: 700; letter-spacing: 0; text-transform: none; color: #ffffff; }

.method__cost { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); align-items: center; gap: 0; margin-top: var(--space-12); padding-top: var(--space-6); font-size: var(--text-base); }
.method__cost b { margin: 0; font-size: 1.35rem; font-weight: 700; color: #ffffff; }
.method__cost span { padding: 4px 0; text-align: center; color: rgba(255, 255, 255, 0.9); }
.method__cost span::before { content: none; }
.method__cost span + span { border-left: 1px solid rgba(255, 255, 255, 0.25); }
.method__cost i { font-style: normal; margin: 0 8px; opacity: 0.6; }

@media (max-width: 860px) {
  .method__head { text-align: left; margin-bottom: var(--space-8); }
  .method__num::before { display: none; }
  .method__num, .method__step:nth-child(n) .method__num { padding-left: 0; height: auto; font-family: var(--font-mono); }
  .method__step > p:not(.method__out) { max-width: none; }
  .method__cost { grid-template-columns: 1fr; gap: 6px; }
  .method__cost span { text-align: left; }
  .method__cost span + span { border-left: 0; }
}
@media (min-width: 861px) {
  .method__steps .method__step:nth-child(n) .method__num { padding-left: 0; }
  .method__steps .method__step:nth-child(n) .method__num::before { position: static; flex: 0 0 var(--ring); margin-right: calc(var(--ring) * -1); z-index: 0; }
  .method__steps .method__step:nth-child(n) .method__num { text-indent: 0; }
  .method__steps .method__num { justify-content: flex-start; }
  .method__steps .method__num::after { margin-left: 0; }
}
.method__out { font-size: 0.95rem !important; }
.method__num em { font-style: normal; }
@media (min-width: 861px) {
  .method__steps .method__num em { flex: 0 0 var(--ring); text-align: center; margin-right: 12px; }
}
@media (max-width: 860px) { .method__steps .method__step > p:not(.method__out) { min-height: 0; } }

/* ==========================================================================
   Vòng 28 — tiêu đề hero lớn kiểu Stitch: cỡ chữ theo cả chiều rộng lẫn chiều cao màn hình,
   nét vừa, dòng khít; màn rộng gộp còn 2 dòng
   ========================================================================== */
.fold > .hero2--grad .hero2__title {
  max-width: none;
  font-size: clamp(2.5rem, min(5.2vw, 9vh), 5rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.fold > .hero2--grad .hero2__sub { font-size: clamp(1rem, 1.25vw, 1.2rem); max-width: 62ch; }
@media (min-width: 1100px) {
  .fold > .hero2--grad .hero2__title .hero2__line:nth-child(2),
  .fold > .hero2--grad .hero2__title .hero2__line:nth-child(3) { display: inline; }
  .fold > .hero2--grad .hero2__title .hero2__line:nth-child(2)::after { content: " "; }
}
@media (max-width: 600px) {
  .fold > .hero2--grad .hero2__title { font-size: clamp(2.3rem, 10.4vw, 2.9rem); line-height: 1.08; }
}
/* giữ 3 dòng như bản gốc (gộp 2 dòng bị rớt chữ "cho"); cỡ chữ bám chiều cao màn hình chặt hơn */
@media (min-width: 1100px) {
  .fold > .hero2--grad .hero2__title .hero2__line:nth-child(2),
  .fold > .hero2--grad .hero2__title .hero2__line:nth-child(3) { display: block; }
  .fold > .hero2--grad .hero2__title .hero2__line:nth-child(2)::after { content: none; }
}
@media (min-width: 601px) { .fold > .hero2--grad .hero2__title { font-size: clamp(2.5rem, min(5.2vw, 8.2vh), 5rem); } }
@media (max-width: 600px) { .fold > .hero2--grad .hero2__title { font-size: clamp(2.1rem, 9.3vw, 2.9rem); } }

/* ==========================================================================
   Vòng 29 — dải "Quy trình triển khai năm bước" thay cho dải chi phí
   ========================================================================== */
.flow5 { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.flow5__title { margin: 0 0 var(--space-8); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; color: #ffffff; }
.flow5__row { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.flow5__row::before { content: ""; position: absolute; left: 10%; right: 10%; top: 17px; height: 1.5px; background: rgba(255, 255, 255, 0.45); }
.flow5__step { position: relative; text-align: center; color: #ffffff; }
.flow5__step b { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #3b82f6; border: 1.5px solid rgba(255, 255, 255, 0.9); font-size: 0.95rem; font-weight: 600; color: #ffffff; box-shadow: 0 0 0 5px #1a47c4; }
.flow5__step h4 { margin: 12px 0 4px; font-size: 1.02rem; font-weight: 700; color: #ffffff; }
.flow5__step p { margin: 0 auto; max-width: 17ch; font-size: var(--text-sm); line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
@media (max-width: 860px) {
  .flow5__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .flow5__row::before { left: 17px; right: auto; top: 18px; bottom: 18px; width: 1.5px; height: auto; }
  .flow5__step { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; text-align: left; }
  .flow5__step b { grid-row: span 2; }
  .flow5__step h4 { margin: 0; align-self: end; }
  .flow5__step p { margin: 0; max-width: none; }
}

/* ==========================================================================
   Vòng 30 — Phương pháp theo bản phác 2: hai cột có icon nét + 2 ý kiểm, năm bước, dải chi phí sáng ở đáy
   ========================================================================== */
#services.method { padding-bottom: 0; }
.method__head--left { text-align: left; margin-bottom: var(--space-10); }
.method__head--left h2, .flow5__title { margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: #ffffff; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.duo__col { display: grid; grid-template-columns: 84px 1fr; column-gap: var(--space-8); align-items: start; color: #ffffff; }
.duo__col + .duo__col { padding-left: var(--space-12); border-left: 1px solid rgba(255, 255, 255, 0.2); }
.duo__col:first-child { padding-right: var(--space-12); }
.duo__ico { display: block; width: 84px; height: 84px; color: #ffffff; opacity: 0.95; }
.duo__ico svg { width: 100%; height: 100%; }
.duo__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.duo__col h3 { margin: 8px 0 10px; font-size: 1.6rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: #ffffff; }
.duo__col p { margin: 0; max-width: 38ch; font-size: var(--text-base); line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.duo__col ul { margin: var(--space-5) 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.duo__col li { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.92); }
.duo__col li svg { flex: 0 0 20px; width: 20px; height: 20px; }
.flow5 { margin-top: var(--space-12); padding-top: var(--space-10); padding-bottom: var(--space-16); }
.flow5__title { margin-bottom: var(--space-8); }

.costbar { background: #eef4fd; border-top: 1px solid rgba(255, 255, 255, 0.4); }
.costbar__in { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); align-items: center; padding-block: var(--space-6); }
.costbar b { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.01em; color: #0b1633; }
.costbar span { padding-left: var(--space-6); border-left: 1px solid #cfdcf0; font-size: var(--text-sm); color: #55627a; }
.costbar strong { display: block; margin-bottom: 2px; font-size: var(--text-base); font-weight: 700; color: #0b1633; }

@media (max-width: 860px) {
  .duo { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .duo__col { grid-template-columns: 52px 1fr; column-gap: var(--space-4); }
  .duo__col + .duo__col { padding-left: 0; border-left: 0; padding-top: var(--space-8); border-top: 1px solid rgba(255, 255, 255, 0.2); }
  .duo__col:first-child { padding-right: 0; }
  .duo__ico { width: 52px; height: 52px; }
  .duo__col h3 { font-size: 1.35rem; }
  .flow5 { padding-bottom: var(--space-12); }
  .costbar__in { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .costbar span { padding-left: 0; border-left: 0; }
}

/* ==========================================================================
   Vòng 31 — gỡ chỗ "cấn" ở phần Phương pháp: một trục căn trái duy nhất, một tiêu đề chính,
   hai cột cân nhau, năm bước bám mép trái, chi phí thành thẻ trắng nằm trong nền xanh
   ========================================================================== */
/* 1. Thứ bậc: chỉ một tiêu đề lớn; "năm bước" là tiêu đề phụ */
.flow5__title { font-size: 1.3rem; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, 0.92); margin-bottom: var(--space-6); }

/* 2. Hai cột cân nhau, vạch ngăn đúng giữa */
.duo { position: relative; column-gap: calc(var(--space-12) * 2); }
.duo::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: rgba(255, 255, 255, 0.2); }
.duo__col, .duo__col + .duo__col, .duo__col:first-child { padding: 0; border: 0; }
.duo__col { grid-template-columns: 64px 1fr; column-gap: var(--space-6); }
.duo__ico { width: 64px; height: 64px; }

/* 3. Năm bước: cùng mép trái với mọi thứ phía trên, chữ căn trái dưới vòng số */
.flow5 { margin-top: var(--space-10); padding-top: var(--space-8); padding-bottom: var(--space-10); }
.flow5__row { gap: var(--space-6); }
.flow5__row::before { left: 18px; right: calc(20% - 18px - var(--space-6) * 0.8); }
.flow5__step { text-align: left; }
.flow5__step p { margin: 0; max-width: 20ch; }
.flow5__step h4 { font-size: 1.05rem; }

/* 4. Chi phí: thẻ trắng bo góc nằm trong nền xanh (không còn dải sáng cắt ngang ba tông màu) */
#services.method { padding-bottom: var(--space-16); }
.costbar { background: none; border: 0; }
.costbar__in { position: relative; padding-block: var(--space-5); background: none; }
.costbar__in::before { content: ""; position: absolute; inset: 0 32px; border-radius: 16px; background: #ffffff; box-shadow: 0 18px 40px -24px rgba(5, 20, 60, 0.6); z-index: 0; }
.costbar__in > * { position: relative; z-index: 1; }
.costbar__in > b { padding-left: var(--space-8); }
/* thẻ trắng rộng đúng bằng cột nội dung: khung ngoài là .container, thẻ là lớp trong */
.costbar b { font-size: 1.2rem; }

@media (max-width: 860px) {
  .duo::before { display: none; }
  .duo { row-gap: var(--space-8); }
  .duo__col + .duo__col { padding-top: var(--space-8); border-top: 1px solid rgba(255, 255, 255, 0.2); }
  .duo__col { grid-template-columns: 48px 1fr; }
  .duo__ico { width: 48px; height: 48px; }
  .costbar__in { padding: var(--space-5); }
}
@media (max-width: 860px) {
  .costbar__in::before { inset: 0 20px; }
  .costbar__in > b, .costbar__in > span { padding-left: var(--space-5); }
  .costbar__in { padding-block: var(--space-5); }
}
@media (min-width: 861px) { .duo__col p { max-width: 34ch; min-height: 3.2em; } }
@media (max-width: 860px) { .flow5__step p { max-width: none; } }

/* ==========================================================================
   Vòng 32 — tinh chỉnh phần Phương pháp theo nhận xét
   ========================================================================== */
/* 1. Hai cột: mô tả cùng chiều cao (không ép xuống dòng), dấu tích bắt đầu ngang hàng */
@media (min-width: 861px) { .duo__col p { max-width: 42ch; min-height: 3.2em; } }

/* 2. Thanh chi phí: thấp hơn, trắng pha xanh rất nhạt, không bóng đổ → không hút mắt hơn nội dung chính */
.costbar__in { padding-block: 14px; }
.costbar__in::before { background: #dfe9fb; box-shadow: none; border-radius: 12px; }
.costbar b { font-size: 1.05rem; font-weight: 600; color: #12265a; }
.costbar strong { font-size: 0.95rem; font-weight: 600; color: #12265a; margin-bottom: 0; }
.costbar span { font-size: 0.85rem; color: #4a5a7d; border-left-color: rgba(18, 38, 90, 0.18); }
#services.method { padding-bottom: var(--space-12); }

/* 4. Chữ phụ của năm bước: lớn và thoáng hơn */
.flow5__step h4 { font-size: 1.1rem; margin: 14px 0 6px; }
.flow5__step p { font-size: 0.97rem; line-height: 1.6; max-width: 22ch; color: rgba(255, 255, 255, 0.86); }
@media (max-width: 860px) { .flow5__step p { max-width: none; } .flow5__step h4 { margin: 0 0 2px; } }
/* dấu tích ngang hàng mà không cần chiều cao cứng: hai cột cao bằng nhau, nhóm dấu tích bám đáy cột */
@media (min-width: 861px) {
  .duo__col p { min-height: 0; }
  .duo__col { align-items: stretch; }
  .duo__col > div { display: flex; flex-direction: column; height: 100%; }
  .duo__col ul { margin-top: auto; padding-top: var(--space-5); }
}

/* ==========================================================================
   Vòng 33 — Phương pháp: bỏ icon, bỏ thanh chi phí, toàn khối căn giữa
   ========================================================================== */
.method__head--left { text-align: center; }
.duo__col, .duo__col:nth-child(n) { display: block; text-align: center; }
.duo__col > div { align-items: center; }
.duo__col p { margin-inline: auto; }
.duo__col ul { justify-items: center; }
.flow5__title { text-align: center; }
.flow5__step { text-align: center; }
.flow5__step p { margin-inline: auto; }
.flow5__row::before { left: 10%; right: 10%; }
#services.method { padding-bottom: var(--space-16); }
.flow5 { padding-bottom: 0; }
@media (max-width: 860px) {
  .method__head--left, .flow5__title { text-align: left; }
  .duo__col, .duo__col:nth-child(n) { text-align: left; }
  .duo__col ul { justify-items: start; }
  .duo__col p { margin-inline: 0; }
  .flow5__step { text-align: left; }
  .flow5__step p { margin-inline: 0; }
  .flow5__row::before { left: 17px; right: auto; }
}

/* ==========================================================================
   Vòng 35 — Phương pháp: năm bước làm xương sống, ba nguyên tắc là ba ngoặc ôm các bước,
   mỗi bước có "Bạn nhận được", kết bằng cam kết về mốc thời gian + nút trao đổi
   ========================================================================== */
#services.mth { padding-block: var(--space-20) var(--space-16); color: #ffffff; }
.mth__head { text-align: center; max-width: 760px; margin: 0 auto var(--space-12); }
.mth__head h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: #ffffff; }
.mth__head p { margin: 0; font-size: 1.125rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }
.mth__head em { font-style: normal; font-weight: 600; color: #ffffff; }

.mth__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 28px; }
.mth__brace { grid-row: 1; align-self: end; margin-bottom: 22px; text-align: center; }
.mth__brace--a { grid-column: 1 / span 2; }
.mth__brace--m { grid-column: 3 / span 2; }
.mth__brace--b { grid-column: 5; }
.mth__brace b { display: block; font-size: 1.05rem; font-weight: 700; color: #ffffff; }
.mth__brace span { display: block; margin-top: 4px; font-size: 0.9rem; line-height: 1.45; color: rgba(255, 255, 255, 0.75); }
.mth__brace i { display: block; height: 12px; margin-top: 14px; border: 1.5px solid rgba(147, 197, 253, 0.85); border-bottom: 0; border-radius: 10px 10px 0 0; }

.mth__step { grid-row: 2; position: relative; }
.mth__step::before { content: ""; position: absolute; left: 44px; right: -28px; top: 18px; height: 1.5px; background: rgba(255, 255, 255, 0.35); }
.mth__step:last-child::before { display: none; }
.mth__n { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #ffffff; color: #173fae; font-weight: 600; font-size: 0.95rem; }
.mth__step h3 { margin: 16px 0 6px; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: #ffffff; }
.mth__step p { margin: 0; min-height: 3.2em; font-size: 0.97rem; line-height: 1.6; color: rgba(255, 255, 255, 0.84); }
.mth__got { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.mth__got small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.58); }
.mth__got span { display: block; margin-top: 4px; font-size: 0.95rem; font-weight: 600; line-height: 1.45; color: #ffffff; }

.mth__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: var(--space-12); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.mth__foot p { margin: 0; max-width: 56ch; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.mth__foot p b { color: #ffffff; }
.mth__btn { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 14px 24px; border-radius: 999px; background: #ffffff; color: #123a9a; font-weight: 700; font-size: 1rem; text-decoration: none; transition: transform 160ms, box-shadow 160ms; }
.mth__btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(5, 20, 60, 0.6); color: #123a9a; }
.mth__btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

@media (max-width: 860px) {
  #services.mth { padding-block: var(--space-12); }
  .mth__head { text-align: left; margin-bottom: var(--space-8); }
  .mth__grid { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .mth__brace { display: none; }
  .mth__step { grid-row: auto; display: grid; grid-template-columns: 36px 1fr; column-gap: 16px; }
  .mth__step::before { left: 17px; right: auto; top: 40px; bottom: -26px; width: 1.5px; height: auto; }
  .mth__n { grid-row: 1 / span 4; }
  .mth__step h3 { margin: 4px 0; }
  .mth__step p { min-height: 0; }
  .mth__step[data-rule]::after { content: attr(data-rule); grid-column: 2; grid-row: 1; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: #93c5fd; }
  .mth__step h3 { grid-column: 2; }
  .mth__step p, .mth__got { grid-column: 2; }
  .mth__foot { flex-direction: column; align-items: flex-start; }
  .mth__btn { width: 100%; justify-content: center; text-align: center; }
}

/* ==========================================================================
   Trang lớp học — lop-hoc.html
   ========================================================================== */
.courses { padding-top: var(--space-8); }
.courses .why { margin-bottom: var(--space-10); }

.course {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-10);
  padding: var(--space-8);
  margin-bottom: var(--space-5);
  border-radius: 22px;
  background: var(--bg-raised);
  border: 1px solid var(--stroke);
  box-shadow: var(--line-top);
}

.course--soon { background: var(--bg-sunken); }

.course__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }

.course__tag {
  padding: 4px 10px;
  border-radius: var(--r-round);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.course__tag--soon { background: #fef3c7; color: #92400e; }

.course h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text-primary);
}

.course__side > p { margin: 0; color: var(--text-secondary); line-height: 1.6; }

.course__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
}

.course__meta dt { color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.course__meta dd { margin: 0; color: var(--text-secondary); }

.course__main h4 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.course__main h4 + * { margin-bottom: var(--space-6); }

.course__out { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.course__out li { position: relative; padding-left: 26px; font-size: var(--text-md); color: var(--text-primary); line-height: 1.5; }
.course__out li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-soft); }
.course__out li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 3px; height: 7px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.course__syl { margin: 0; padding: 0; list-style: none; counter-reset: syl; display: grid; gap: 0; }
.course__syl li { counter-increment: syl; display: grid; grid-template-columns: 28px 130px 1fr; gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--stroke-faint); font-size: var(--text-sm); color: var(--text-secondary); }
.course__syl li::before { content: counter(syl, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.course__syl b { color: var(--text-primary); font-weight: 600; }

.steps__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Trang chủ: khối dẫn sang lớp học */
.teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-10);
  border-radius: 22px;
  background: var(--bg-raised);
  border: 1px solid var(--stroke);
  box-shadow: var(--line-top);
}

.teaser__text { display: flex; flex-direction: column; gap: var(--space-3); }
.teaser__text h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); letter-spacing: -0.02em; font-weight: 600; color: var(--text-primary); }
.teaser__text p { margin: 0; color: var(--text-secondary); max-width: 60ch; }
.teaser__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-2); }
.teaser__chips span { padding: 5px 12px; border-radius: var(--r-round); background: var(--accent-soft); color: var(--accent); font-size: var(--text-sm); font-weight: 600; }
.teaser__chips span.soon { background: #fef3c7; color: #92400e; }

@media (max-width: 960px) {
  .course { grid-template-columns: 1fr; padding: var(--space-6); }
  .course__syl li { grid-template-columns: 28px 1fr; }
  .course__syl b { display: block; }
  .steps__row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teaser { grid-template-columns: 1fr; padding: var(--space-6); }
}

@media (max-width: 560px) {
  .steps__row--4 { grid-template-columns: 1fr; }
  .course__meta { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Vòng 36 — dải tên khách hàng chạy ngang dưới hàng số liệu; menu thêm Khóa học, NocoBase Partner
   ========================================================================== */
.clients { margin-top: var(--space-6); text-align: center; }
.clients__lead { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #64748b; }
.clients__track {
  display: flex; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.clients__row { flex: 0 0 auto; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; animation: clients-run 48s linear infinite; }
.clients__row li { padding: 0 28px; white-space: nowrap; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: #334155; }
.clients__row li + li { border-left: 1px solid #dbe3ee; }
.clients__track:hover .clients__row { animation-play-state: paused; }
@keyframes clients-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@media (max-width: 600px) {
  .clients__row li { padding: 0 18px; font-size: 0.95rem; }
  .clients__row { animation-duration: 36s; }
}
@media (prefers-reduced-motion: reduce) {
  .clients__row { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .clients__row[aria-hidden="true"] { display: none; }
  .clients__track { mask-image: none; -webkit-mask-image: none; }
}

/* Trang khoa-hoc.html: hero dùng lại kiểu hero chính nhưng không có canvas/fold */
body.page-khoa-hoc .hero2--grad { padding-bottom: var(--space-16); }
.nav__link.is-active { color: #ffffff; font-weight: 700; }
.header.is-stuck .nav__link.is-active, .header.is-scrolled .nav__link.is-active { color: #1d4ed8; }

/* ==========================================================================
   Vòng 37 — hàng số liệu: 4 ô bằng nhau, số trên nhãn dưới, không bao giờ rớt lẻ một mục;
   thanh ghi nhận chỉ còn một mục (bỏ trùng "1.000+ học viên")
   ========================================================================== */
.fold > .logos--in-fade .logos__row--stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  max-width: 980px; margin: 0 auto;
}
.fold > .logos--in-fade .logos__row--stats .logos__item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 12px; text-align: center; font-size: var(--text-sm); font-weight: 500; color: #475569; opacity: 1;
}
.fold > .logos--in-fade .logos__row--stats .logos__item + .logos__item { border-left: 1px solid #d6e0ee; }
.fold > .logos--in-fade .logos__row--stats .logos__item b { font-size: clamp(1.7rem, 2.4vw, 2.25rem); line-height: 1.1; color: #0b1633; }
.fold > .logos--in-fade .logos__row--stats .logos__item span { white-space: nowrap; }
.fold > .hero2--grad .hero2__proof { gap: 0; padding: 8px 18px; }
@media (max-width: 600px) {
  .fold > .logos--in-fade .logos__row--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
  .fold > .logos--in-fade .logos__row--stats .logos__item:nth-child(3) { border-left: 0; }
  .fold > .logos--in-fade .logos__row--stats .logos__item span { white-space: normal; }
}
@media (max-width: 600px) { .fold > .logos--in-fade .logos__row--stats .logos__item:nth-child(4) span { white-space: nowrap; } }

/* ==========================================================================
   Vòng 39 — huy hiệu "Đối tác chính thức của NocoBase" đặt trên tiêu đề hero, tích xanh kiểu Facebook;
   số liệu 300+ ứng dụng · 50+ khách hàng (chủ dự án cung cấp 2026-09-18)
   ========================================================================== */
.hero2__partner {
  display: inline-flex; align-items: center; gap: 8px; align-self: center;
  margin: 0 0 var(--space-2); padding: 7px 16px 7px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.95rem; font-weight: 600; color: #ffffff; letter-spacing: 0.005em;
}
.hero2__partner .verified { width: 22px; height: 22px; flex: 0 0 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }
.fold > .hero2--grad .hero2__title { margin-top: 0; }
@media (max-width: 600px) { .hero2__partner { font-size: 0.85rem; padding: 6px 12px 6px 8px; } }

/* ==========================================================================
   Vòng 40 — hàng số liệu thành 4 thẻ kính mờ (theo bản phác của anh Hòa), đặt trên vùng xanh nhạt;
   kính sáng thay vì kính tối để đáy hero vẫn nối trắng sang phần sau
   ========================================================================== */
.fold > .logos--in-fade .logos__row--stats.stats { max-width: 1040px; gap: 14px; }
.fold > .logos--in-fade .stats .stat-card, .fold > .logos--in-fade .stats .stat-card + .stat-card {
  position: relative; align-items: flex-start; text-align: left; gap: 2px;
  padding: 18px 20px 16px; border: 1px solid rgba(255, 255, 255, 0.9); border-left: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5));
  box-shadow: 0 12px 30px -18px rgba(10, 40, 100, 0.35), inset 0 1px 0 #ffffff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.fold > .logos--in-fade .stats .stat-card b { font-size: clamp(1.7rem, 2.3vw, 2.1rem); }
.fold > .logos--in-fade .stats .stat-card > span:last-child { white-space: nowrap; color: #475569; }
.stat-card__ico { position: absolute; top: 12px; right: 12px; display: inline-flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(29, 78, 216, 0.1); color: #1d4ed8; }
.stat-card__ico svg { width: 16px; height: 16px; }
/* vùng trắng tới muộn hơn một chút để thẻ nằm trên nền xanh nhạt */
.fold__aura::after { background: linear-gradient(180deg, rgba(255,255,255,0) 74%, rgba(255,255,255,0.3) 84%, rgba(255,255,255,0.7) 92%, rgba(255,255,255,0.92) 97%, #ffffff 100%); }
@media (max-width: 600px) {
  .fold > .logos--in-fade .logos__row--stats.stats { gap: 10px; }
  .fold > .logos--in-fade .stats .stat-card { padding: 12px 12px 10px; border-radius: 12px; }
  .fold > .logos--in-fade .stats .stat-card:nth-child(3) { border-left: 1px solid rgba(255, 255, 255, 0.9); }
  .fold > .logos--in-fade .stats .stat-card > span:last-child { white-space: normal; font-size: 12px; }
  .stat-card__ico { width: 24px; height: 24px; top: 8px; right: 8px; } .stat-card__ico svg { width: 13px; height: 13px; }
  .fold__aura::after { background: linear-gradient(180deg, rgba(255,255,255,0) 66%, rgba(255,255,255,0.5) 78%, rgba(255,255,255,0.9) 88%, #ffffff 96%); }
}
/* vừa một màn sau khi thêm thẻ: siết đệm */
.fold > .logos--in-fade { padding-top: clamp(6px, 2vh, 20px); }
.fold > .logos--in-fade .stats .stat-card, .fold > .logos--in-fade .stats .stat-card + .stat-card { padding: 14px 18px 12px; }
.clients { margin-top: var(--space-4); }
@media (max-width: 600px) {
  .fold > .logos--in-fade { padding: 6px 0 14px; }
  .fold > .logos--in-fade .stats .stat-card, .fold > .logos--in-fade .stats .stat-card + .stat-card { padding: 9px 10px 8px; }
  .fold > .logos--in-fade .stats .stat-card b { font-size: 1.45rem; }
  .fold > .logos--in-fade .stats .stat-card > span:last-child { font-size: 11.5px; line-height: 1.3; }
  .clients { margin-top: 10px; } .clients__lead { margin-bottom: 6px; }
  .fold > .hero2--grad .hero2__sub { margin-top: 10px; }
  .fold > .hero2--grad .hero2__actions { margin-top: 14px; }
}

/* ==========================================================================
   Vòng 41 — hero bớt thông tin: 4 thẻ số liệu chuyển xuống đầu phần "Lĩnh vực" (thành dải bằng chứng);
   đáy hero chỉ còn dải tên khách hàng
   ========================================================================== */
.stats--band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: var(--space-8) 0 var(--space-10); padding: 0; list-style: none; }
.stats--band .stat-card {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px 18px 14px;
  border-radius: 16px; background: #f4f8fe; border: 1px solid #dfe9fb; color: #475569; font-size: var(--text-sm); font-weight: 500;
}
.stats--band .stat-card b { font-family: var(--font-display); font-size: clamp(1.7rem, 2.3vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: #0b1633; }
.stats--band .stat-card > span:last-child { white-space: nowrap; }
.stats--band .stat-card__ico { background: rgba(29, 78, 216, 0.1); }
.fold > .logos--in-fade { padding-top: clamp(10px, 3vh, 28px); }
.clients { margin-top: 0; }
.fold__aura::after { background: linear-gradient(180deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.4) 81%, rgba(255,255,255,0.78) 89%, rgba(255,255,255,0.95) 94%, #ffffff 99%); }
@media (max-width: 860px) {
  .stats--band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stats--band .stat-card > span:last-child { white-space: normal; font-size: 12.5px; }
}
@media (max-width: 600px) { .fold__aura::after { background: linear-gradient(180deg, rgba(255,255,255,0) 66%, rgba(255,255,255,0.55) 78%, rgba(255,255,255,0.9) 88%, #ffffff 96%); } }

/* ==========================================================================
   Vòng 43 — "Trước / Sau" (phương án B) thay cho bốn section giữa trang.
   Chuyển động một lần khi hiện: mảnh bên trái tan nhẹ, khung bên phải trượt lên.
   ========================================================================== */
.ba { padding-block: var(--space-16); }
.ba__head { max-width: 760px; margin: 0 auto var(--space-10); text-align: center; }
.ba__head h2 { margin: 0 0 12px; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; color: #0b1633; }
.ba__head h2 em { font-style: normal; color: #1d4ed8; }
.ba__head p { margin: 0; font-size: var(--text-lg); line-height: 1.55; color: #475569; }

.ba__cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; align-items: stretch; }
.ba__col { padding: 24px; border-radius: 18px; }
.ba__col--before { background: #ffffff; border: 1px dashed #cbd5e1; }
.ba__col--after { background: #eef4fd; border: 1px solid #d5e3f8; }
.ba__col h3 { margin: 0 0 4px; font-size: 1.15rem; color: #0b1633; }
.ba__col > p { margin: 0 0 18px; font-size: 0.92rem; line-height: 1.5; color: #64748b; }

.ba__mess { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ba__mess .chip { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 12.5px; color: #334155; }
.ba__mess .chip svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; }
.ba__mess .chip small { display: block; margin-top: 2px; font-size: 11px; color: #94a3b8; }
.ba__mess .chip.x { transform: rotate(-1.2deg); }
.ba__mess .chip.y { transform: rotate(1deg); margin-left: 14px; }

.ba__app { position: relative; }
.ba__win { border-radius: 14px; background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 18px 36px -24px rgba(10, 40, 90, 0.35); overflow: hidden; }
.ba__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-size: 12px; color: #64748b; }
.ba__bar b { color: #0b1633; font-weight: 600; }
.ba__bar em { margin-left: auto; font-style: normal; }
.ba__dots { display: inline-flex; gap: 5px; } .ba__dots i { width: 9px; height: 9px; border-radius: 50%; background: #e2e8f0; }
.ba__body { padding: 14px; display: grid; gap: 12px; }
.ba__roles { display: flex; gap: 6px; } .ba__roles span { padding: 4px 12px; border-radius: 999px; background: #f1f5f9; font-size: 12px; color: #475569; } .ba__roles .is-on { background: #1d4ed8; color: #ffffff; }
.ba__kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ba__kpi div { padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #eef2f7; }
.ba__kpi b { display: block; font-size: 1.25rem; color: #0b1633; } .ba__kpi span { font-size: 11px; color: #64748b; }
.ba__tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; color: #334155; }
.ba__tbl th { text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 600; color: #64748b; background: #f8fafc; border-bottom: 1px solid #eef2f7; }
.ba__tbl td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; }

.ba__phone { position: absolute; right: -6px; bottom: -22px; width: 118px; padding: 8px 6px 10px; border-radius: 20px; background: #0f172a; box-shadow: 0 18px 30px -18px rgba(10, 30, 60, 0.6); }
.ba__notch { display: block; width: 36px; height: 5px; margin: 0 auto 6px; border-radius: 999px; background: #334155; }
.ba__screen { display: grid; gap: 6px; padding: 10px 8px; border-radius: 14px; background: #ffffff; font-size: 9.5px; color: #334155; text-align: center; }
.ba__screen b { font-size: 10px; color: #0b1633; }
.ba__qr { width: 48px; height: 48px; margin: 0 auto; border-radius: 6px; background: repeating-linear-gradient(90deg, #0f172a 0 4px, #fff 4px 8px), repeating-linear-gradient(0deg, #0f172a 0 4px, #fff 4px 8px); background-blend-mode: multiply; border: 3px solid #fff; outline: 1.5px solid #0f172a; }
.ba__screen small { font-size: 9px; color: #64748b; } .ba__screen em { font-style: normal; font-size: 9px; font-weight: 600; color: #15803d; }

.ba__pts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: var(--space-10) 0 0; padding: 0; list-style: none; }
.ba__pts li { padding-top: 14px; border-top: 2px solid #c9dbf7; }
.ba__pts b { display: block; margin-bottom: 4px; font-size: 1rem; color: #0b1633; }
.ba__pts span { font-size: 0.92rem; line-height: 1.5; color: #475569; }

/* chuyển động một lần */
.js .ba.reveal .ba__col--after { opacity: 0; transform: translateY(18px); transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1) 120ms, transform 600ms cubic-bezier(0.22, 1, 0.36, 1) 120ms; }
.js .ba.reveal.is-visible .ba__col--after { opacity: 1; transform: none; }
.js .ba.reveal .ba__mess .chip { opacity: 0; transform: translateY(8px); transition: opacity 400ms, transform 400ms; }
.js .ba.reveal.is-visible .ba__mess .chip { opacity: 1; }
.js .ba.reveal.is-visible .ba__mess .chip.x { transform: rotate(-1.2deg); }
.js .ba.reveal.is-visible .ba__mess .chip.y { transform: rotate(1deg); }
.js .ba.reveal.is-visible .ba__mess .chip:nth-child(2) { transition-delay: 60ms; }
.js .ba.reveal.is-visible .ba__mess .chip:nth-child(3) { transition-delay: 120ms; }
.js .ba.reveal.is-visible .ba__mess .chip:nth-child(4) { transition-delay: 180ms; }
.js .ba.reveal.is-visible .ba__mess .chip:nth-child(5) { transition-delay: 240ms; }

@media (max-width: 960px) {
  .ba { padding-block: var(--space-12); }
  .ba__cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ba__pts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ba__phone { right: 6px; bottom: -14px; width: 96px; }
  .ba__col { padding: 18px; }
  .ba__kpi { grid-template-columns: repeat(3, 1fr); gap: 6px; } .ba__kpi div { padding: 8px; } .ba__kpi b { font-size: 1.05rem; }
  .ba__tbl td:nth-child(2), .ba__tbl th:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ba.reveal .ba__col--after, .js .ba.reveal .ba__mess .chip { opacity: 1; transition: none; }
}
/* điện thoại đứng cạnh khung, không che cột trạng thái */
@media (min-width: 961px) { .ba__win { margin-right: 96px; } .ba__phone { right: -4px; bottom: -10px; } }
@media (max-width: 960px) { .ba__win { margin-right: 0; margin-bottom: 8px; } .ba__phone { position: static; width: 96px; margin: -28px 0 0 auto; } }

/* Vòng 44 — cân lại đáy hero: dải khách hàng cách mép dưới nhiều hơn, khoảng trống dưới nút bớt lại */
.fold > .logos--in-fade { padding: 0 0 clamp(44px, 8vh, 84px); }
.fold > .hero2--grad { padding-bottom: clamp(8px, 2vh, 24px); }
.clients__lead { margin-bottom: 12px; }
@media (max-width: 600px) { .fold > .logos--in-fade { padding: 0 0 28px; } }

/* ==========================================================================
   Vòng 45 — form tư vấn dùng đúng kiểu chữ và tông của trang:
   bỏ chữ mono in hoa, bỏ icon trong nhãn, bo góc mềm, tiêu đề như các section khác
   ========================================================================== */
.modal-container { border-radius: 20px; }
.modal-header h2 {
  font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.25; color: #0b1633; margin: 0 0 6px;
}
.modal-sub { font-size: 0.95rem; line-height: 1.55; color: #64748b; }

.modal-form .field__label,
.modal-container .field__label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #334155;
  gap: 4px;
}
.modal-container .field__label .req { color: #dc2626; font-weight: 600; }
.modal-container .field { gap: 6px; }
.modal-container .field input,
.modal-container .field select,
.modal-container .field textarea {
  border-radius: 12px;
  border: 1px solid #dbe3ee;
  background: #f8fafc;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #0b1633;
  transition: border-color 160ms, background 160ms, box-shadow 160ms;
}
.modal-container .field input::placeholder,
.modal-container .field textarea::placeholder { color: #94a3b8; }
.modal-container .field input:focus,
.modal-container .field select:focus,
.modal-container .field textarea:focus {
  outline: none; background: #ffffff; border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}
.modal-container .field textarea { resize: none; line-height: 1.55; }
.modal-container .field select.custom-select { color: #0b1633; }

.modal-form > .btn[type="submit"] {
  border-radius: 12px; font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0;
}
.modal-form .form__note {
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0; text-transform: none;
  line-height: 1.5; color: #94a3b8;
}
/* mũi tên của select: nền tô đè background shorthand nên phải vẽ lại */
.modal-container .field select.custom-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

/* ==========================================================================
   Vòng 46 — form bớt "thô": hẹp lại, tiêu đề và các trường cùng một mép trái,
   ô nhập và nút thấp hơn, ô mô tả không lộ thanh cuộn
   ========================================================================== */
.modal-container { max-width: 540px; padding: 26px 28px 0; }
.modal-header { margin-bottom: 18px; }
.modal-header h2 { font-size: 1.35rem; }
.modal-sub { font-size: 0.9rem; }
.modal-form { padding: 0 0 0; gap: 13px; }
.modal-form .form__row { gap: 14px; }
.modal-container .field__label { font-size: 0.82rem; }
.modal-container .field input,
.modal-container .field select,
.modal-container .field textarea { padding: 10px 14px; font-size: 0.92rem; border-radius: 10px; }
.modal-container .field textarea { height: 84px; min-height: 84px; scrollbar-width: thin; }
.modal-container .field textarea::-webkit-scrollbar { width: 6px; }
.modal-container .field textarea::-webkit-scrollbar-thumb { border-radius: 999px; background: #cbd5e1; }
.modal-container .field textarea::-webkit-scrollbar-button { display: none; }
.modal-form > .btn[type="submit"] { padding: 12px 20px; font-size: 0.95rem; border-radius: 10px; margin-top: 4px; }
.modal-form .form__note { font-size: 11.5px; padding: 8px 0 14px; }
@media (max-width: 600px) { .modal-container { padding: 20px 18px 0; } .modal-header h2 { font-size: 1.2rem; } }

/* ==========================================================================
   Vòng 47 — mở form không còn khựng:
   nền mờ nhẹ hơn và có sẵn lớp riêng; tạm dừng lưới chấm, nền loang và dải khách hàng khi form mở
   ========================================================================== */
.modal-overlay {
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 200ms;
  contain: paint;
}
.modal-overlay.is-open { transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
.modal-backdrop {
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: rgba(6, 8, 13, 0.7);
  transform: translateZ(0);
}
.modal-container { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms linear; }

/* mọi chuyển động nền dừng lại khi form đang mở → không phải tính lại lớp mờ mỗi khung hình */
body.modal-open .clients__row,
body.modal-open .fold__blob { animation-play-state: paused; }
body.modal-open .fold__grid { visibility: hidden; }
/* quy tắc [data-theme="light"] có độ ưu tiên cao hơn → chỉ định lại cho đúng */
[data-theme="light"] .modal-backdrop, .modal-overlay .modal-backdrop {
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: rgba(6, 8, 13, 0.62);
}

/* lớp nền mờ được dựng trước khi bấm (không nhìn thấy) */
.modal-overlay.is-priming { visibility: visible; opacity: 0; pointer-events: none; }
/* giữ chỗ thanh cuộn: khi mở form, trang không bị nhảy ngang vì thanh cuộn biến mất */
html { scrollbar-gutter: stable; }

/* ==========================================================================
   Vòng 48 — vẽ lại điện thoại trong phần Trước / Sau cho ra dáng máy thật:
   khung có nút bên hông, thanh trạng thái, khung quét có mã QR đúng cấu trúc
   ========================================================================== */
.ph {
  position: absolute; right: -4px; bottom: -10px; z-index: 2;
  width: 132px; padding: 7px;
  border-radius: 24px;
  background: linear-gradient(160deg, #1e293b, #0f172a 60%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 20px 34px -18px rgba(10, 30, 60, 0.6);
}
.ph__btn { position: absolute; left: -2px; width: 2px; border-radius: 2px; background: #334155; }
.ph__btn--vol { top: 46px; height: 26px; }
.ph__btn--pw { left: auto; right: -2px; top: 54px; height: 34px; }
.ph__screen { position: relative; display: grid; gap: 7px; padding: 6px 8px 5px; border-radius: 18px; background: #ffffff; }
.ph__status { display: flex; align-items: center; justify-content: space-between; font-size: 8px; font-weight: 700; color: #0b1633; }
.ph__sig { display: inline-flex; align-items: flex-end; gap: 1px; }
.ph__sig i { width: 2px; background: #0b1633; border-radius: 1px; }
.ph__sig i:nth-child(1) { height: 3px; } .ph__sig i:nth-child(2) { height: 4.5px; }
.ph__sig i:nth-child(3) { height: 6px; } .ph__sig i:nth-child(4) { height: 7.5px; opacity: 0.3; }
.ph__top { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 5px; border-bottom: 1px solid #eef2f7; }
.ph__top b { font-size: 10px; color: #0b1633; }
.ph__top span { font-size: 8px; color: #94a3b8; }
.ph__scan { position: relative; padding: 9px; border-radius: 10px; background: #f8fafc; }
.ph__qr { display: block; width: 100%; height: auto; }
.ph__c { position: absolute; width: 9px; height: 9px; border: 1.6px solid #1d4ed8; }
.ph__c--tl { top: 3px; left: 3px; border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; }
.ph__c--tr { top: 3px; right: 3px; border-left: 0; border-bottom: 0; border-radius: 0 3px 0 0; }
.ph__c--bl { bottom: 3px; left: 3px; border-right: 0; border-top: 0; border-radius: 0 0 0 3px; }
.ph__c--br { bottom: 3px; right: 3px; border-left: 0; border-top: 0; border-radius: 0 0 3px 0; }
.ph__res { display: grid; gap: 1px; padding: 6px 7px; border-radius: 8px; background: #ecfdf5; border: 1px solid #d1fae5; }
.ph__res b { font-size: 9.5px; color: #0b1633; }
.ph__res span { font-size: 8px; color: #64748b; }
.ph__res em { font-style: normal; font-size: 8px; font-weight: 700; color: #15803d; }
.ph__home { width: 42px; height: 3px; margin: 1px auto 0; border-radius: 999px; background: #0f172a; opacity: 0.25; }

@media (min-width: 961px) { .ba__win { margin-right: 108px; } }
@media (max-width: 960px) {
  .ba__win { margin-right: 0; }
  .ph { position: static; width: 132px; margin: -30px 0 0 auto; }
}

/* ==========================================================================
   Vòng 49 — trang NocoBase Partner dựng lại theo ngôn ngữ thiết kế hiện tại
   ========================================================================== */
.np-hero {
  padding: calc(var(--header-h) + var(--header-offset) + clamp(48px, 9vh, 104px)) 0 clamp(56px, 9vh, 104px);
  background: linear-gradient(180deg, #0a1430 0%, #10358c 40%, #2a72d6 78%, #5b93e0 100%);
  text-align: center; color: #ffffff;
}
.np-hero__in { max-width: 960px; }
.np-hero .hero2__partner { margin-bottom: var(--space-5); }
.np-hero__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; color: #ffffff; }
.np-hero__sub { max-width: 60ch; margin: var(--space-5) auto 0; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.np-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--space-8); }
.np-hero__actions .btn--ghost { background: rgba(255, 255, 255, 0.1); color: #ffffff; font-weight: 600; border: 1.5px solid rgba(255, 255, 255, 0.85); }
.np-hero__actions .btn--ghost:hover { background: #ffffff; color: #123a9a; }

.np { padding-block: var(--space-16); }
.np__head { max-width: 720px; margin: 0 auto var(--space-10); text-align: center; }
.np__head h2 { margin: 0 0 12px; font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1.18; letter-spacing: -0.02em; color: #0b1633; }
.np__head p { margin: 0; font-size: var(--text-lg); line-height: 1.6; color: #475569; }
.np__head--light h2 { color: #ffffff; }
.np__head--light p { color: rgba(255, 255, 255, 0.82); }

.np__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.np__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.np__card { padding: 22px; border-radius: 16px; background: #f6f9fe; border: 1px solid #e3ecf9; }
.np__ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 12px; background: #ffffff; color: #1d4ed8; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
.np__ico svg { width: 22px; height: 22px; }
.np__card h3 { margin: 0 0 8px; font-size: 1.1rem; color: #0b1633; }
.np__card p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #475569; }
.np__cta-line { margin: var(--space-10) 0 0; text-align: center; }

.np-pick { padding-block: var(--space-16); }
.pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pick__col { padding: 26px; border-radius: 18px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); color: #ffffff; }
.pick__col--hi { background: #ffffff; border-color: #ffffff; color: #0b1633; }
.pick__tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pick__tag--hi { background: #e8f0fe; color: #1d4ed8; }
.pick__col h3 { margin: 14px 0 12px; font-size: 1.35rem; letter-spacing: -0.01em; color: inherit; }
.pick__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pick__col li { position: relative; padding-left: 20px; font-size: 0.97rem; line-height: 1.55; color: rgba(255, 255, 255, 0.85); }
.pick__col--hi li { color: #475569; }
.pick__col li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); }
.pick__col--hi li::before { background: #1d4ed8; }
.np-pick__note { max-width: 72ch; margin: var(--space-8) auto 0; text-align: center; font-size: 0.97rem; line-height: 1.65; color: rgba(255, 255, 255, 0.82); }

.np-end { padding-block: var(--space-12) var(--space-16); }
.np-end .clients { margin-bottom: var(--space-10); }
.np-end .clients__row li { color: #334155; }
.np-end .closing { margin-top: 0; }
.np .stats--band { margin-top: var(--space-10); margin-bottom: 0; }

@media (max-width: 960px) {
  .np__grid, .np__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick { grid-template-columns: minmax(0, 1fr); }
  .np-hero { padding-top: calc(var(--header-h) + var(--header-offset) + 36px); }
}
@media (max-width: 600px) {
  .np__grid, .np__grid--3 { grid-template-columns: minmax(0, 1fr); }
  .np-hero__actions .btn { width: 100%; justify-content: center; }
}

/* Vòng 50 — phần "Đối tác chính thức nghĩa là gì": ba cột trên nền xanh */
.pick--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pick--3 .pick__col { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); }
.pick__num { display: block; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.6); }
.pick--3 .pick__col h3 { margin: 10px 0 10px; font-size: 1.2rem; line-height: 1.3; }
.pick--3 .pick__col p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
@media (max-width: 960px) { .pick--3 { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Vòng 51 — trang partner: "Bốn tầng của hệ thống", dải hệ thống có thể xây, thẻ bản quyền & hạ tầng
   ========================================================================== */
.np-layers { padding-block: var(--space-16); }
.layers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.layer { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; padding: 24px; border-radius: 16px; background: #ffffff; border: 1px solid #e3ecf9; }
.layer__n { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.04em; color: #1d4ed8; padding-top: 4px; }
.layer h3 { margin: 0 0 8px; font-size: 1.15rem; color: #0b1633; }
.layer p { margin: 0 0 12px; font-size: 0.95rem; line-height: 1.6; color: #475569; }
.layer b { display: inline-block; padding: 5px 12px; border-radius: 8px; background: #e8f0fe; font-size: 0.85rem; font-weight: 700; color: #1d4ed8; }

.np__systems { margin-top: var(--space-10); text-align: center; }
.np__systems-lead { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #64748b; }
.np__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.np__chips li { padding: 7px 14px; border-radius: 999px; background: #ffffff; border: 1px solid #dbe3ee; font-size: 0.9rem; font-weight: 600; color: #334155; }

@media (max-width: 860px) {
  .layers { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .layer { grid-template-columns: 36px 1fr; column-gap: 12px; padding: 18px; }
}

/* ==========================================================================
   Vòng 52 — trang partner theo hợp đồng đối tác: 4 quyền lợi, 6 nhóm dịch vụ, số liệu NocoBase,
   khối lưu ý bắt buộc (Điều 4.3.4)
   ========================================================================== */
.pick--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pick--4 .pick__col { padding: 22px; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); }
.pick--4 .pick__col h3 { margin: 10px 0 8px; font-size: 1.08rem; line-height: 1.3; }
.pick--4 .pick__col p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }

.np__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 48px; margin: var(--space-10) 0 0; padding: 0; list-style: none; }
.np__facts li { display: flex; align-items: baseline; gap: 8px; font-size: 0.95rem; color: #475569; }
.np__facts b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: #0b1633; }
.np__facts-src { margin: 8px 0 0; text-align: center; font-size: 12px; color: #94a3b8; }

.np-disclaimer { max-width: 900px; margin: var(--space-10) auto 0; padding: 18px 22px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.28); }
.np-disclaimer p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
.np-disclaimer p b { color: #ffffff; }
.np-disclaimer__en { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.82rem !important; color: rgba(255, 255, 255, 0.7) !important; }

@media (max-width: 960px) { .pick--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .np__facts { gap: 10px 28px; } }
@media (max-width: 600px) { .pick--4 { grid-template-columns: minmax(0, 1fr); } .np__facts { flex-direction: column; align-items: center; } }
/* Vòng 53 — phần "Sau bàn giao, đội ngũ tự làm được gì" (thay "Bốn tầng") */
.np-after__note { max-width: 70ch; margin: var(--space-8) auto 0; text-align: center; font-size: 0.93rem; line-height: 1.6; color: #64748b; }
/* Vòng 54 — bỏ nhãn dưới mỗi thẻ; đoạn mô tả không còn lề dưới thừa */
#after .layer p { margin-bottom: 0; }

/* ==========================================================================
   Vòng 55 — trang Khóa học: gói học và học phí (2 chương trình × 3 cách học)
   ========================================================================== */
.pricing { padding-block: var(--space-16); }
.pricing .why { margin-bottom: var(--space-10); }
.pricing__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pricing__col { padding: 24px; border-radius: 18px; background: #f6f9fe; border: 1px solid #e3ecf9; }
.pricing__head { margin-bottom: 16px; }
.pricing__brand { display: inline-block; padding: 5px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.pricing__brand--as { background: #fef3c7; color: #92400e; }
.pricing__brand--nb { background: #dbeafe; color: #1d4ed8; }
.pricing__head p { margin: 10px 0 0; font-size: 0.93rem; line-height: 1.55; color: #64748b; }
.pricing__head a { color: #1d4ed8; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.plans { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.plan { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t p" "t b"; column-gap: 16px; row-gap: 10px; align-items: center; padding: 18px; border-radius: 14px; background: #ffffff; border: 1px solid #e2e8f0; }
.plan__t { grid-area: t; }
.plan__t h3 { margin: 0 0 4px; font-size: 1.05rem; color: #0b1633; }
.plan__t p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #64748b; }
.plan__note { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 8px; background: #ecfdf5; font-size: 12.5px; font-weight: 600; color: #15803d; }
.plan__p { grid-area: p; text-align: right; white-space: nowrap; }
.plan__p b { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: #0b1633; }
.plan__p span { font-size: 0.85rem; color: #64748b; }
.plan > .btn { grid-area: b; justify-self: end; padding: 9px 16px; font-size: 0.9rem; white-space: nowrap; }
.plan--hi { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.08); }
.plan--soon { opacity: 0.82; }
.plan--soon .plan__p b { font-size: 1rem; color: #64748b; }
.plan .btn--ghost { border: 1px solid #cbd5e1; color: #1d4ed8; background: #ffffff; }
.plan .btn--ghost:hover { border-color: #93c5fd; background: #f1f6fe; }
.pricing__foot { max-width: 72ch; margin: var(--space-8) auto 0; text-align: center; font-size: 0.93rem; line-height: 1.6; color: #64748b; }

.course__meta dd a { color: #1d4ed8; font-weight: 600; }

@media (max-width: 960px) { .pricing__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .pricing__col { padding: 16px; }
  .plan { grid-template-columns: 1fr; grid-template-areas: "t" "p" "b"; }
  .plan__p { text-align: left; }
  .plan > .btn { justify-self: stretch; text-align: center; }
}
.plan__p--link b { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: #475569; }

/* Vòng 56 — trang Khóa học chỉ còn NocoBase: bảng gói học một cột */
.plans--single { max-width: 760px; margin: 0 auto; }
.plans--single .plan { padding: 22px 24px; }

/* ==========================================================================
   Vòng 57 — gói học: ba thẻ dọc, liệt kê quyền lợi, thẻ giữa nổi bật
   ========================================================================== */
.plans3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; max-width: 1040px; margin: 0 auto; padding: 0; list-style: none; }
.pc { position: relative; display: flex; flex-direction: column; padding: 28px 26px; border-radius: 18px; background: #ffffff; border: 1px solid #e2e8f0; }
.pc__head h3 { margin: 0 0 6px; font-size: 1.15rem; color: #0b1633; }
.pc__head p { margin: 0; font-size: 0.92rem; color: #64748b; }
.pc__price { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 6px; }
.pc__price b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; color: #0b1633; }
.pc__price span { font-size: 0.9rem; color: #64748b; }
.pc__note { margin: 0 0 4px; padding: 6px 10px; border-radius: 8px; background: #ecfdf5; font-size: 12.5px; font-weight: 600; color: #15803d; }
.pc__list { flex: 1; display: grid; gap: 10px; margin: 16px 0 22px; padding: 16px 0 0; list-style: none; border-top: 1px solid #eef2f7; }
.pc__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.93rem; line-height: 1.5; color: #334155; }
.pc__list svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; color: #1d4ed8; }
.pc .btn { width: 100%; justify-content: center; text-align: center; }
.pc .btn--ghost { border: 1px solid #cbd5e1; color: #1d4ed8; background: #ffffff; }
.pc .btn--ghost:hover { border-color: #93c5fd; background: #f1f6fe; }
.pc--soon .pc__price b { font-size: 1.35rem; color: #64748b; }
.pc--soon .pc__list svg { color: #94a3b8; }
.pc--hi { background: linear-gradient(180deg, #1e4fd6, #133c9f); border-color: transparent; color: #ffffff; transform: translateY(-14px); box-shadow: 0 30px 50px -28px rgba(19, 60, 159, 0.7); }
.pc--hi::before { content: "Có giảng viên đi cùng"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: #ffffff; font-size: 12px; font-weight: 700; color: #123a9a; white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.25); }
.pc--hi .pc__head h3, .pc--hi .pc__price b { color: #ffffff; }
.pc--hi .pc__head p, .pc--hi .pc__price span { color: rgba(255, 255, 255, 0.78); }
.pc--hi .pc__note { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.pc--hi .pc__list { border-top-color: rgba(255, 255, 255, 0.2); }
.pc--hi .pc__list li { color: rgba(255, 255, 255, 0.92); }
.pc--hi .pc__list svg { color: #93c5fd; }
.pc--hi .btn--primary { background: #ffffff; color: #123a9a; }
.pc--hi .btn--primary:hover { background: #eef4ff; color: #123a9a; }
@media (max-width: 960px) {
  .plans3 { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pc--hi { transform: none; }
}
/* danh sách trong thẻ bám đầu, không giãn đều khi thẻ cao hơn nội dung */
.pc__list { align-content: start; }

/* Vòng 58 — thẻ giữa nổi bật hơn: to hơn, bóng sâu, viền sáng; hai thẻ bên lùi lại */
.plans3 { max-width: 1120px; gap: 0; align-items: center; }
.pc { padding: 26px 24px; background: #f8fafc; border-color: #e2e8f0; }
.pc:first-child { border-radius: 18px 0 0 18px; border-right: 0; }
.pc:last-child { border-radius: 0 18px 18px 0; border-left: 0; }
.pc--hi {
  z-index: 1; padding: 36px 32px; border-radius: 22px;
  transform: scale(1.06);
  box-shadow: 0 40px 70px -30px rgba(19, 60, 159, 0.75), 0 0 0 6px rgba(29, 78, 216, 0.14);
  background: linear-gradient(170deg, #2456e0 0%, #1a45c4 55%, #123a9a 100%);
}
.pc--hi::before { top: -15px; padding: 6px 16px; font-size: 12.5px; background: #ffd23f; color: #1a1f36; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.35); }
.pc--hi .pc__head h3 { font-size: 1.3rem; }
.pc--hi .pc__price b { font-size: 2.4rem; }
.pc--hi .pc__list li { font-size: 0.97rem; }
.pc--hi .btn--primary { padding: 14px 20px; font-size: 1.02rem; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45); }
.pc--hi .btn--primary:hover { transform: translateY(-1px); }
.pc:not(.pc--hi) .pc__head h3 { color: #334155; }
.pc:not(.pc--hi) .pc__price b { color: #334155; }
@media (max-width: 960px) {
  .plans3 { gap: 26px; }
  .pc, .pc:first-child, .pc:last-child { border-radius: 18px; border: 1px solid #e2e8f0; }
  .pc--hi { transform: none; border: 0; }
}

/* ==========================================================================
   Vòng 59 — giáo trình 15 buổi theo Giáo án NocoBase v3.0: 4 phần, mỗi phần liệt kê buổi
   ========================================================================== */
.syl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.syl__part { padding: 14px 16px; border-radius: 12px; background: #f8fafc; border: 1px solid #eef2f7; }
.syl__part h5 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; font-size: 0.9rem; font-weight: 700; color: #0b1633; }
.syl__part h5 span { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; white-space: nowrap; }
.syl__part ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.syl__part li { display: flex; gap: 8px; font-size: 0.86rem; line-height: 1.45; color: #334155; }
.syl__part li b { flex: 0 0 22px; font-family: var(--font-mono); font-weight: 500; color: #1d4ed8; }
.syl__note { margin: 12px 0 0; font-size: 0.85rem; line-height: 1.5; color: #64748b; }
@media (max-width: 600px) { .syl { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Vòng 60 — Lịch khai giảng: 3 lịch tháng mini, ngày khai giảng nổi bật, chọn khoá → form
   ========================================================================== */
.sched .modal-container.sched__box { max-width: 920px; padding: 26px 28px 22px; }
.sched .modal-header { margin-bottom: 18px; }
.sched__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.coh { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; }
.coh--near { background: #f1f6fe; border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.08); }
.coh--past { opacity: 0.55; }
.coh__top { display: flex; align-items: center; justify-content: space-between; }
.coh__top b { font-size: 0.95rem; color: #0b1633; }
.coh__top em { font-style: normal; padding: 3px 9px; border-radius: 999px; background: #1d4ed8; color: #ffffff; font-size: 11px; font-weight: 700; }
.cal__dow, .cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dow span { text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: #94a3b8; padding-bottom: 4px; }
.cal__days span, .cal__days i { display: flex; align-items: center; justify-content: center; height: 28px; border-radius: 7px; font-size: 12.5px; color: #334155; }
.cal__days .is-past { color: #cbd5e1; }
.cal__days .is-start { background: #1d4ed8; color: #ffffff; font-weight: 700; box-shadow: 0 6px 14px -6px rgba(29, 78, 216, 0.7); }
.coh__info { display: grid; gap: 2px; }
.coh__info b { font-size: 0.95rem; color: #0b1633; }
.coh__info span { font-size: 0.82rem; color: #64748b; }
.coh .btn { width: 100%; justify-content: center; padding: 10px 14px; font-size: 0.92rem; }
.coh .btn--ghost { border: 1px solid #cbd5e1; color: #1d4ed8; background: #ffffff; }
.coh .btn[disabled] { opacity: 0.5; cursor: default; }
.sched__note { margin: 16px 0 0; text-align: center; font-size: 12.5px; color: #94a3b8; }
@media (max-width: 860px) {
  .sched .modal-container.sched__box { max-height: 94vh; overflow-y: auto; padding: 20px 18px 18px; }
  .sched__grid { grid-template-columns: minmax(0, 1fr); }
}
/* ba lịch cao bằng nhau (tháng 6 hàng) để dòng khai giảng và nút thẳng hàng */
.cal__days { grid-auto-rows: 28px; min-height: calc(6 * 28px + 5 * 3px); }
.coh__info { margin-top: auto; }
@media (max-width: 600px) { .sched .modal-header { padding-right: 44px; } .sched .modal-header h2 { font-size: 1.15rem; } }
/* Vòng 61 — ba thẻ lịch cân nhau: cùng chiều cao, lịch 6 hàng cố định, khối thông tin + nút bám đáy */
.sched__grid { align-items: stretch; }
.coh { height: 100%; }
.cal { flex: 0 0 auto; }
.cal__days { grid-auto-rows: 28px; grid-template-rows: repeat(6, 28px); min-height: 0; }
.coh__info { margin-top: auto; padding-top: 4px; }

/* ==========================================================================
   Vòng 62 — logo NocoBase chính thức trong hero trang partner; pháp nhân + MST + địa chỉ ở chân trang
   ========================================================================== */
.np-lockup { display: inline-flex; align-items: center; gap: 22px; margin-top: var(--space-6); padding: 14px 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); }
.np-lockup__bf { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; letter-spacing: 0.02em; color: #ffffff; }
.np-lockup__bf svg { width: 26px; height: 26px; color: #ffffff; }
.np-lockup__x { font-size: 1.2rem; color: rgba(255, 255, 255, 0.55); }
.np-lockup__nb { height: 30px; width: auto; filter: brightness(0) invert(1); }   /* logo gốc màu đen → trắng trên nền xanh */
.np-hero__sub { margin-top: var(--space-6); }

.footer__legal { display: grid; gap: 3px; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid #e2e8f0; font-style: normal; font-size: 12.5px; line-height: 1.5; color: #64748b; }
.footer__legal b { font-weight: 600; color: #334155; }

@media (max-width: 600px) {
  .np-lockup { gap: 14px; padding: 12px 18px; }
  .np-lockup__bf { font-size: 1.1rem; }
  .np-lockup__nb { height: 24px; }
}

/* ==========================================================================
   Vòng 63 — Lộ trình 15 buổi dạng con đường: đường uốn lượn, 4 mốc chặng, cờ bắt đầu / đích
   ========================================================================== */
.road { margin-top: var(--space-10); }
.road__head { text-align: center; max-width: 640px; margin: 0 auto var(--space-8); }
.road__head h3 { margin: 0 0 8px; font-size: 1.5rem; letter-spacing: -0.015em; color: #0b1633; }
.road__head p { margin: 0; font-size: 0.97rem; line-height: 1.55; color: #64748b; }

.road__track { position: relative; padding: 56px 0 0; }
.road__svg { position: absolute; left: 0; right: 0; top: 56px; width: 100%; height: 120px; overflow: visible; }
.road__base { fill: none; stroke: #dbe3ee; stroke-width: 14; stroke-linecap: round; }
.road__dash { fill: none; stroke: #ffffff; stroke-width: 3; stroke-dasharray: 14 12; stroke-linecap: round; }

.road__flag { position: absolute; top: 0; display: grid; gap: 1px; font-size: 12px; line-height: 1.35; color: #64748b; max-width: 180px; }
.road__flag b { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #1d4ed8; }
.road__flag--start { left: 0; }
.road__flag--end { right: 0; text-align: right; }
.road__flag--end b { color: #15803d; }

.road__st { position: absolute; left: var(--x); top: calc(56px + var(--y) * 1.2); transform: translate(-50%, -50%); width: 25%; display: flex; flex-direction: column; align-items: center; }
.road__dot { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #1d4ed8; color: #ffffff; font-weight: 700; font-size: 1.05rem; border: 4px solid #ffffff; box-shadow: 0 8px 20px -8px rgba(29, 78, 216, 0.7); }
.road__card { margin-top: 12px; width: 100%; max-width: 250px; padding: 14px 16px; border-radius: 12px; background: #ffffff; border: 1px solid #e3ecf9; box-shadow: 0 14px 28px -20px rgba(10, 40, 90, 0.35); }
.road__card h5 { margin: 0 0 8px; font-size: 0.9rem; line-height: 1.3; color: #0b1633; }
.road__card h5 span { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
.road__card ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.road__card li { display: flex; gap: 8px; font-size: 0.84rem; line-height: 1.4; color: #334155; }
.road__card li b { flex: 0 0 22px; font-family: var(--font-mono); font-weight: 500; color: #1d4ed8; }

/* các thẻ ở chặng thấp (2, 4) nằm dưới đường; chặng cao (1, 3) cũng đẩy thẻ xuống dưới đường để không đè lên nhau */
.road__st:nth-child(odd) .road__card { margin-top: 12px; }
.road__track { min-height: 480px; }
.road__st:nth-of-type(2), .road__st:nth-of-type(4) { top: calc(56px + var(--y) * 1.2); }

@media (max-width: 960px) {
  .road__track { padding: 0 0 0 30px; min-height: 0; }
  .road__svg, .road__flag { display: none; }
  .road__track::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: repeating-linear-gradient(180deg, #dbe3ee 0 12px, transparent 12px 20px); }
  .road__st { position: static; transform: none; width: auto; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; margin-bottom: 18px; }
  .road__st .road__dot { margin-left: -33px; }
  .road__card { margin-top: 0; max-width: none; }
}
/* mốc đặt theo px trên dải đường 120 px (sửa lỗi nhân phần trăm với chiều cao khung) */
.road__st, .road__st:nth-of-type(2), .road__st:nth-of-type(4) { top: calc(56px + var(--y)); transform: translateX(-50%); }
.road__track { min-height: 0; padding-bottom: 8px; }
.road__st { position: absolute; }
.road__spacer { height: 470px; }
/* tâm mốc nằm đúng trên tim đường; bớt khoảng trống dưới */
.road__st, .road__st:nth-of-type(2), .road__st:nth-of-type(4) { transform: translate(-50%, -22px); }
.road__spacer { height: 430px; }
@media (max-width: 960px) { .road__st, .road__st:nth-of-type(2), .road__st:nth-of-type(4) { transform: none; } .road__spacer { display: none; } }
.road__spacer { height: 380px; }
@media (max-width: 960px) {
  .road__track .road__st, .road__track .road__st:nth-of-type(2), .road__track .road__st:nth-of-type(4) { position: static; transform: none; top: auto; left: auto; }
}
@media (max-width: 960px) {
  .road__track::before { z-index: 0; }
  .road__track .road__dot { position: relative; z-index: 1; margin-left: -33px; }
  .road__track .road__st { grid-template-columns: 44px 1fr; column-gap: 18px; }
}

/* ==========================================================================
   Vòng 64 — "Nội dung khoá học" một khối: dải 4 con số → con đường (uốn sâu, tô màu tiến trình,
   thẻ so le trên/dưới, mốc đích) → thông tin khoá. Ghi đè hoàn toàn bố cục .road của vòng 63.
   ========================================================================== */
.kfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 880px; margin: 0 auto var(--space-10); padding: 0; list-style: none; }
.kfacts li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 10px; border-radius: 14px; background: #ffffff; border: 1px solid #e3ecf9; text-align: center; }
.kfacts b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: #0b1633; }
.kfacts span { font-size: 0.85rem; color: #64748b; }

.road { margin-top: 0; }
.road__track { position: relative; height: 700px; padding: 0; min-height: 0; }
.road__svg { position: absolute; left: 0; right: 0; top: 250px; width: 100%; height: 200px; overflow: visible; }
.road__base { fill: none; stroke: url(#roadGrad); stroke-width: 22; stroke-linecap: round; }
.road__dash { fill: none; stroke: #ffffff; stroke-width: 3; stroke-dasharray: 16 14; stroke-linecap: round; opacity: 0.9; }

.road__st, .road__st:nth-of-type(2), .road__st:nth-of-type(4),
.road__track .road__st, .road__track .road__st:nth-of-type(2), .road__track .road__st:nth-of-type(4) {
  position: absolute; left: var(--x); top: calc(250px + var(--y)); width: 48px; height: 48px;
  transform: translate(-50%, -50%); display: block;
}
.road__dot { position: absolute; inset: 0; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; margin: 0; border-radius: 50%; background: #1d4ed8; color: #ffffff; font-weight: 700; font-size: 1.1rem; border: 4px solid #ffffff; box-shadow: 0 10px 22px -8px rgba(29, 78, 216, 0.7); z-index: 2; }
.road__card { position: absolute; left: 50%; width: 256px; margin: 0; transform: translateX(-50%); padding: 14px 16px; border-radius: 12px; background: #ffffff; border: 1px solid #e3ecf9; box-shadow: 0 16px 30px -22px rgba(10, 40, 90, 0.4); }
.road__st--down .road__card { top: calc(100% + 14px); }
.road__st--up .road__card { bottom: calc(100% + 14px); }
.road__card::before { content: ""; position: absolute; left: 50%; width: 2px; height: 14px; margin-left: -1px; background: #cbd5e1; }
.road__st--down .road__card::before { bottom: 100%; }
.road__st--up .road__card::before { top: 100%; }
.road__card h5 { margin: 0 0 8px; font-size: 0.95rem; line-height: 1.3; color: #0b1633; }
.road__card h5 span { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
.road__card ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.road__card li { display: flex; gap: 8px; font-size: 0.9rem; line-height: 1.4; color: #334155; }
.road__card li b { flex: 0 0 24px; font-family: var(--font-mono); font-weight: 500; color: #1d4ed8; }

.road__start, .road__end { position: absolute; top: calc(250px + var(--y)); }
.road__start { left: 0; transform: translateY(-50%); }
.road__end { left: calc(1180 / 12 * 1%); transform: translate(-50%, -50%); width: 48px; height: 48px; }
.road__pin { display: block; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; border: 4px solid #93c5fd; box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.3); }
.road__flag { position: absolute; display: grid; gap: 2px; font-size: 12.5px; line-height: 1.4; color: #475569; width: 210px; }
.road__flag b { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #1d4ed8; }
.road__flag small { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #cbd5e1; font-size: 11.5px; line-height: 1.4; color: #64748b; }
.road__start .road__flag { left: 0; top: 30px; }
.road__dot--end { background: #15803d; box-shadow: 0 10px 22px -8px rgba(21, 128, 61, 0.7); }
.road__dot--end svg { width: 22px; height: 22px; }
.road__flag--end { left: 50%; top: calc(100% + 12px); transform: translateX(-50%); width: 200px; text-align: center; }
.road__flag--end b { color: #15803d; }
.road__spacer { display: none; }

.kinfo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: var(--space-8); padding: 26px 28px; border-radius: 18px; background: #ffffff; border: 1px solid #e3ecf9; }
.kinfo h3 { margin: 0 0 12px; font-size: 1.1rem; color: #0b1633; }
.kinfo__meta { display: flex; flex-direction: column; gap: 16px; }
.kinfo__meta .course__meta { margin: 0; }
.kinfo__meta .btn { align-self: flex-start; }

@media (max-width: 960px) {
  .kfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .road__track { height: auto; padding: 0 0 0 30px; }
  .road__svg, .road__start .road__pin { display: none; }
  .road__track::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: repeating-linear-gradient(180deg, #bfd3f2 0 12px, transparent 12px 20px); }
  .road__track .road__st, .road__track .road__st:nth-of-type(2), .road__track .road__st:nth-of-type(4), .road__start, .road__end {
    position: static; transform: none; width: auto; height: auto; display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: start; margin-bottom: 18px;
  }
  .road__dot { position: relative; margin-left: -33px; }
  .road__card, .road__st--up .road__card, .road__st--down .road__card { position: static; transform: none; width: auto; }
  .road__card::before { display: none; }
  .road__start .road__flag, .road__flag--end { position: static; transform: none; width: auto; text-align: left; grid-column: 2; }
  .road__start { grid-template-columns: 1fr; padding-left: 0; }
  .road__end .road__dot--end { margin-left: -33px; }
  .kinfo { grid-template-columns: minmax(0, 1fr); padding: 18px; }
}
/* nhãn Đích đặt phía trên mốc (phía dưới đã có thẻ Phần 4) */
@media (min-width: 961px) { .road__flag--end { top: auto; bottom: calc(100% + 12px); } }
/* Vòng 65 — bỏ dải 4 con số; con đường nối thẳng sau câu dẫn */
#lo-trinh .why { margin-bottom: var(--space-6); }
/* Vòng 67 — khối lưu ý chỉ còn bản tiếng Anh nguyên văn, hiển thị rõ (không thu nhỏ) */
.np-disclaimer p { font-size: 0.92rem; color: rgba(255, 255, 255, 0.92); }

/* ==========================================================================
   Vòng 68 — trang Khóa học thêm thông tin có căn cứ từ giáo án:
   bảng 16 mini-project (gập/mở) và năm nguyên tắc thiết kế khoá
   ========================================================================== */
.mp { margin-top: var(--space-8); border-radius: 16px; background: #ffffff; border: 1px solid #e3ecf9; overflow: hidden; }
.mp > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; }
.mp > summary::-webkit-details-marker { display: none; }
.mp > summary span { font-size: 1.05rem; font-weight: 700; color: #0b1633; }
.mp > summary small { flex: 1; font-size: 0.85rem; color: #64748b; }
.mp > summary::after { content: ""; flex: 0 0 10px; width: 10px; height: 10px; border-right: 2px solid #1d4ed8; border-bottom: 2px solid #1d4ed8; transform: rotate(45deg); transition: transform 200ms; }
.mp[open] > summary::after { transform: rotate(-135deg); }
.mp[open] > summary { border-bottom: 1px solid #eef2f7; }
.mp__wrap { overflow-x: auto; }
.mp__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; color: #334155; }
.mp__table th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; background: #f8fafc; border-bottom: 1px solid #eef2f7; white-space: nowrap; }
.mp__table td { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: top; line-height: 1.45; }
.mp__table td b { font-family: var(--font-mono); font-weight: 500; color: #1d4ed8; }
.mp__table td:nth-child(2) { font-weight: 600; color: #0b1633; }
.mp__row--opt td { color: #94a3b8; } .mp__row--opt td:nth-child(2) { color: #64748b; font-weight: 500; }
.mp__tbl { position: relative; min-width: 150px; }
.mp__tbl i { position: absolute; left: 14px; top: 50%; height: 8px; width: calc((100% - 60px) * var(--w) / 100); margin-top: -4px; border-radius: 4px; background: linear-gradient(90deg, #93c5fd, #1d4ed8); }
.mp__tbl span { position: relative; float: right; font-family: var(--font-mono); font-size: 0.85rem; color: #0b1633; }

.princ { max-width: 1040px; margin: var(--space-12) auto 0; padding-top: var(--space-8); border-top: 1px solid rgba(255, 255, 255, 0.18); color: #ffffff; }
.princ h3 { margin: 0 0 var(--space-6); text-align: center; font-size: 1.35rem; letter-spacing: -0.01em; color: #ffffff; }
.princ__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: pr; }
.princ__grid li { counter-increment: pr; padding: 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); }
.princ__grid li::before { content: counter(pr, decimal-leading-zero); display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); }
.princ__grid b { display: block; margin-bottom: 6px; font-size: 0.98rem; line-height: 1.3; color: #ffffff; }
.princ__grid span { font-size: 0.86rem; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
.princ__note { max-width: 70ch; margin: var(--space-6) auto 0; text-align: center; font-size: 0.9rem; line-height: 1.55; color: rgba(255, 255, 255, 0.8); }

@media (max-width: 960px) {
  .princ__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp > summary { flex-wrap: wrap; } .mp > summary small { flex-basis: 100%; }
  .mp__table { min-width: 640px; }
}
@media (max-width: 600px) { .princ__grid { grid-template-columns: minmax(0, 1fr); } }

/* Vòng 70 — trang Khóa học: hero gọn hơn, phần "dành cho ai" bớt rối */
body.page-khoa-hoc .hero2--grad .hero2__sub, #top.hero2--grad .hero2__sub { max-width: 56ch; }
#ban-la-ai { padding-top: var(--space-16); padding-bottom: var(--space-16); }
#ban-la-ai .why { max-width: 640px; margin: 0 auto var(--space-8); text-align: center; }
#ban-la-ai .why__title { margin: 0 0 10px; font-size: clamp(1.8rem, 2.8vw, 2.3rem); letter-spacing: -0.02em; color: #0b1633; }
#ban-la-ai .why__sub { margin: 0; font-size: var(--text-lg); color: #64748b; }
#ban-la-ai .trio { gap: 18px; }
#ban-la-ai .trio__card { padding: 24px; border-radius: 16px; border: 1px solid #e3ecf9; box-shadow: none; }
#ban-la-ai .trio__card h3 { margin: 0 0 8px; font-size: 1.12rem; }
#ban-la-ai .trio__card p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #475569; }

/* ==========================================================================
   Vòng 72 — trang Khóa học theo phương án A (Maven) + hero C (kết quả trước)
   ========================================================================== */
/* Hero */
.kh-hero { padding: calc(var(--header-h) + var(--header-offset) + clamp(40px, 7vh, 80px)) 0 0; text-align: center; color: #ffffff;
  background: linear-gradient(180deg, #0a1430 0%, #10358c 45%, #2456e0 100%); }
.kh-hero .hero2__partner { margin-bottom: var(--space-5); font-size: 0.9rem; }
.kh-hero__title { margin: 0 auto; max-width: 20ch; font-family: var(--font-display); font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; color: #ffffff; }
.kh-hero__sub { max-width: 62ch; margin: var(--space-5) auto 0; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.kh-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: var(--space-7); }
.kh-hero__actions .btn--primary { background: #ffffff; color: #123a9a; }
.kh-hero__actions .btn--primary:hover { background: #eef4ff; color: #123a9a; }
.kh-hero__actions .btn--ghost { background: rgba(255, 255, 255, 0.1); color: #ffffff; font-weight: 600; border: 1.5px solid rgba(255, 255, 255, 0.85); }
.kh-shot { max-width: 980px; margin: var(--space-10) auto 0; padding: 0 0 var(--space-10); }
.kh-shot__app { position: relative; text-align: left; }
.kh-shot__app .ba__win { margin-right: 120px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7); }
.kh-shot__app .ph { right: 0; bottom: -18px; width: 136px; }
.kh-shot__note { margin: 28px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }

/* Lưới hai cột + thẻ dính */
.kh { padding-block: var(--space-16); }
.kh__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.kh__block + .kh__block { margin-top: var(--space-12); padding-top: var(--space-10); border-top: 1px solid #eef2f7; }
.kh__block h2 { margin: 0 0 var(--space-5); font-size: clamp(1.5rem, 2.2vw, 1.9rem); letter-spacing: -0.02em; color: #0b1633; }
.kh__lead { margin: -6px 0 var(--space-5); color: #64748b; }
.kh__ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
.kh__ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.97rem; line-height: 1.5; color: #334155; }
.kh__ticks svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; color: #1d4ed8; }
#ban-la-ai .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#ban-la-ai .trio__card { padding: 18px; }
#ban-la-ai .trio__card h3 { font-size: 1rem; }
#ban-la-ai .trio__card p { font-size: 0.9rem; }

.cur { border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.cur > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; background: #f8fafc; }
.cur > summary::-webkit-details-marker { display: none; }
.cur > summary span { font-weight: 700; color: #0b1633; }
.cur > summary small { font-size: 0.85rem; color: #64748b; white-space: nowrap; }
.cur > summary::after { content: ""; flex: 0 0 9px; width: 9px; height: 9px; margin-left: 6px; border-right: 2px solid #1d4ed8; border-bottom: 2px solid #1d4ed8; transform: rotate(45deg); transition: transform 200ms; }
.cur[open] > summary::after { transform: rotate(-135deg); }
.cur ul { margin: 0; padding: 6px 18px 12px; list-style: none; }
.cur li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f1f5f9; }
.cur li:last-child { border-bottom: 0; }
.cur li b { flex: 0 0 26px; font-family: var(--font-mono); font-weight: 500; color: #1d4ed8; padding-top: 1px; }
.cur li strong { display: block; font-size: 0.95rem; font-weight: 600; color: #0b1633; }
.cur li em { display: block; margin-top: 2px; font-style: normal; font-size: 0.85rem; color: #64748b; }
.kh__note { margin: 12px 0 0; font-size: 0.88rem; line-height: 1.5; color: #64748b; }

.kh__inst { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start; padding: 22px; border-radius: 16px; background: #f6f9fe; border: 1px solid #e3ecf9; }
.kh__avatar { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(160deg, #1e4fd6, #133c9f); color: #ffffff; font-weight: 700; font-size: 1.4rem; letter-spacing: 0.04em; }
.kh__inst h3 { margin: 0 0 2px; font-size: 1.2rem; color: #0b1633; }
.kh__role { margin: 0 0 10px; font-size: 0.88rem; font-weight: 600; color: #1d4ed8; }
.kh__inst p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #475569; }

.kh__side { position: sticky; top: calc(var(--header-h) + 20px); }
.enroll { padding: 22px; border-radius: 18px; background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 24px 48px -30px rgba(10, 40, 90, 0.35); }
.enroll__price { display: flex; align-items: baseline; gap: 8px; }
.enroll__price b { font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: #0b1633; }
.enroll__price span { font-size: 0.9rem; color: #64748b; }
.enroll__off { margin: 4px 0 14px; font-size: 0.85rem; color: #15803d; font-weight: 600; }
.enroll__cohorts { display: grid; gap: 8px; }
.enroll__cohorts label { position: relative; display: grid; grid-template-columns: 1fr auto; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; cursor: pointer; transition: border-color 150ms, background 150ms; }
.enroll__cohorts label.is-on { border-color: #1d4ed8; background: #f1f6fe; }
.enroll__cohorts input { position: absolute; opacity: 0; pointer-events: none; }
.enroll__cohorts b { font-size: 0.93rem; color: #0b1633; }
.enroll__cohorts span { grid-column: 1; font-size: 0.8rem; color: #64748b; }
.enroll__cohorts em { grid-row: 1 / span 2; align-self: center; padding: 3px 8px; border-radius: 999px; background: #1d4ed8; color: #ffffff; font-style: normal; font-size: 11px; font-weight: 700; }
.enroll__btn { margin-top: 14px; padding: 13px 18px; border-radius: 10px; font-size: 0.98rem; font-weight: 700; }
.enroll__inc { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid #eef2f7; list-style: none; display: grid; gap: 8px; font-size: 0.88rem; color: #334155; }
.enroll__inc li { position: relative; padding-left: 16px; }
.enroll__inc li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #1d4ed8; }
.enroll__alt { margin: 14px 0 0; font-size: 0.83rem; line-height: 1.5; color: #64748b; }
.enroll__alt a { color: #1d4ed8; font-weight: 600; }

@media (max-width: 960px) {
  .kh-shot__app .ba__win { margin-right: 0; }
  .kh-shot__app .ph { position: static; margin: -28px 0 0 auto; }
  .kh__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .kh__side { position: static; }
  .kh__ticks { grid-template-columns: minmax(0, 1fr); }
  #ban-la-ai .trio { grid-template-columns: minmax(0, 1fr); }
  .kh__inst { grid-template-columns: 64px 1fr; gap: 14px; padding: 16px; }
  .kh__avatar { width: 64px; height: 64px; font-size: 1rem; }
  .kh-hero__actions .btn { width: 100%; justify-content: center; }
}
/* nhãn "Gần nhất" gọn ở góc phải, không giãn theo ô lưới */
.enroll__cohorts label { grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; }
.enroll__cohorts em { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center; white-space: nowrap; }
.enroll__cohorts b, .enroll__cohorts span { grid-column: 1; }

/* ==========================================================================
   Vòng 73 — trang Khóa học: bỏ bố cục hai cột kiểu tài liệu; mỗi dải một ý, khoảng thở rộng,
   số lớn, ít chữ; thanh CTA dính đáy thay cho thẻ dính bên phải
   ========================================================================== */
.kout { padding-block: var(--space-16); }
.kout .why { margin-bottom: var(--space-10); }
.kout__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kout__tile { padding: 30px 28px; border-radius: 20px; background: #ffffff; border: 1px solid #e3ecf9; }
.kout__tile b { display: block; font-family: var(--font-display); font-size: 3.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: #1d4ed8; }
.kout__tile h3 { margin: 10px 0 8px; font-size: 1.15rem; line-height: 1.3; color: #0b1633; }
.kout__tile p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #475569; }
.kwho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid #dbe3ee; }
.kwho h3 { margin: 0 0 6px; font-size: 1rem; color: #0b1633; }
.kwho p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: #64748b; }

.curwrap { max-width: 880px; margin: var(--space-12) auto 0; }
.curwrap h3 { margin: 0 0 14px; text-align: center; font-size: 1.25rem; color: #0b1633; }
#lo-trinh.tone-w .road__card { border-color: #e2e8f0; box-shadow: 0 16px 30px -22px rgba(10, 40, 90, 0.35); }
#lo-trinh.tone-w .cur > summary { background: #f8fafc; }

.inst { padding-block: var(--space-16); }
.inst__grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 56px; align-items: center; }
.inst__photo { position: relative; aspect-ratio: 4 / 5; border-radius: 24px; background: linear-gradient(160deg, #1e4fd6, #133c9f); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.inst__ph { font-family: var(--font-display); font-size: 4rem; font-weight: 800; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.9); }
.inst__photo em { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; background: rgba(0, 0, 0, 0.35); color: #ffffff; font-size: 12px; font-style: normal; text-align: center; }
.inst__eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #1d4ed8; }
.inst__body h2 { margin: 0 0 12px; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.15; letter-spacing: -0.02em; color: #0b1633; }
.inst__name { margin: 0 0 12px !important; font-weight: 600; color: #0b1633 !important; }
.inst__body > p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: #475569; }
.inst__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: var(--space-8) 0 0; padding: var(--space-6) 0 0; border-top: 1px solid #e2e8f0; list-style: none; }
.inst__stats b { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; color: #0b1633; }
.inst__stats span { font-size: 0.85rem; color: #64748b; }

.cohorts { padding-block: var(--space-16); }
.cohorts .why { margin-bottom: var(--space-10); }
.cohorts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; }
.coh2 { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border-radius: 20px; background: #f8fafc; border: 1px solid #e2e8f0; }
.coh2--near { background: #f1f6fe; border-color: #93c5fd; box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.08); }
.coh2__tag { position: absolute; top: 16px; right: 16px; padding: 4px 10px; border-radius: 999px; background: #1d4ed8; color: #ffffff; font-size: 11px; font-weight: 700; }
.coh2 b { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #0b1633; }
.coh2 h3 { margin: 10px 0 2px; font-size: 1.1rem; color: #0b1633; }
.coh2 p { margin: 0 0 20px; font-size: 0.92rem; color: #64748b; }
.coh2 .btn { margin-top: auto; width: 100%; justify-content: center; }
.coh2 .btn--ghost { border: 1px solid #cbd5e1; color: #1d4ed8; background: #ffffff; }

.ctabar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; transform: translateY(110%); transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-top: 1px solid #e2e8f0; box-shadow: 0 -12px 30px -20px rgba(10, 40, 90, 0.35); }
.ctabar.is-on { transform: none; }
.ctabar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 24px; }
.ctabar__t b { display: block; font-size: 0.95rem; color: #0b1633; }
.ctabar__t span { font-size: 0.85rem; color: #64748b; }
.ctabar .btn { padding: 11px 20px; border-radius: 10px; white-space: nowrap; }
body.modal-open .ctabar { transform: translateY(110%); }

@media (max-width: 960px) {
  .kout__grid, .kwho, .cohorts__grid { grid-template-columns: minmax(0, 1fr); }
  .kwho { gap: 18px; }
  .inst__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .inst__photo { max-width: 260px; aspect-ratio: 1; }
  .inst__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctabar__t span { display: none; }
  .ctabar__in { padding: 10px 16px; }
}

/* ==========================================================================
   Vòng 74 — trang Khóa học theo format nội dung trang khoá của master.dev (giữ tông sáng của site)
   ========================================================================== */
.md-hero { padding: calc(var(--header-h) + var(--header-offset) + clamp(40px, 6vh, 72px)) 0 clamp(48px, 7vh, 80px); color: #ffffff; background: linear-gradient(180deg, #0a1430 0%, #10358c 55%, #2456e0 100%); }
.md-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.md-hero__eyebrow { margin: 0 0 14px; font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.md-hero h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2.1rem, 3.6vw, 3.1rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: #ffffff; }
.md-hero__sub { margin: 18px 0 0; max-width: 52ch; font-size: 1.02rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.md-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.md-hero__actions .btn--primary { background: #ffffff; color: #123a9a; }
.md-hero__actions .btn--primary:hover { background: #eef4ff; color: #123a9a; }
.md-hero__actions .btn--ghost { background: rgba(255, 255, 255, 0.1); color: #ffffff; font-weight: 600; border: 1.5px solid rgba(255, 255, 255, 0.85); }
.md-quote { margin: 30px 0 0; padding: 16px 18px 16px 22px; border-left: 3px solid #93c5fd; background: rgba(255, 255, 255, 0.08); border-radius: 0 12px 12px 0; }
.md-quote p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }
.md-quote footer { margin-top: 8px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }
.md-quote footer b { color: #ffffff; margin-right: 8px; }
.md-shot { margin: 0; }
.md-shot .ba__win { margin-right: 96px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7); }
.md-shot .ph { right: -6px; bottom: -14px; width: 124px; }

.md { padding-block: var(--space-16); }
.md--tight { padding-block: var(--space-12); }
.md__head { text-align: center; max-width: 820px; margin: 0 auto var(--space-10); }
.md__head--left { text-align: left; margin-left: 0; }
.md__eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: #1d4ed8; }
.md__eyebrow--light { color: #93c5fd; }
.md__head h2 { margin: 0; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.18; letter-spacing: -0.02em; color: #0b1633; }
.md__sub { margin: 12px 0 0; font-size: var(--text-lg); line-height: 1.6; color: #475569; }

.md__ben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; max-width: 1040px; margin: 0 auto; }
.md__b { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.md__ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #eef4fd; color: #1d4ed8; }
.md__ico svg { width: 24px; height: 24px; }
.md__b h3 { margin: 4px 0 6px; font-size: 1.05rem; color: #0b1633; }
.md__b p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #475569; }

.md__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; }
.md__stat { padding: 22px 24px; border-radius: 16px; background: #ffffff; border: 1px solid #e3ecf9; }
.md__stat b { display: block; font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #1d4ed8; }
.md__stat span { display: block; margin-top: 6px; font-size: 0.9rem; color: #64748b; }
.md__feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 900px; margin: 16px auto 0; }
.md__f { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; background: #ffffff; border: 1px solid #e3ecf9; font-size: 0.95rem; font-weight: 600; color: #0b1633; }
.md__f svg { flex: 0 0 22px; width: 22px; height: 22px; color: #1d4ed8; }
.md__desc { max-width: 760px; margin: var(--space-8) auto 0; text-align: center; font-size: 1rem; line-height: 1.65; color: #475569; }
.md__ticks { max-width: 760px; margin: var(--space-6) auto 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.md__ticks li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.97rem; line-height: 1.55; color: #334155; }
.md__ticks svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; color: #15803d; }
.md__cta { margin: var(--space-8) 0 0; text-align: center; }

.md__tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.md__tools li { padding: 16px 14px; border-radius: 14px; background: #f6f9fe; border: 1px solid #e3ecf9; text-align: center; }
.md__tools b { display: block; font-size: 1rem; color: #0b1633; }
.md__tools span { display: block; margin-top: 4px; font-size: 0.8rem; line-height: 1.4; color: #64748b; }

.md-inst { padding-block: var(--space-16); }
.md-inst__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.md-inst__card { padding: 30px; border-radius: 18px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); color: #ffffff; }
.md-inst__who { margin: 0 0 8px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); }
.md-inst__who b { color: #ffffff; margin-right: 8px; }
.md-inst__card h2 { margin: 0 0 14px; font-size: clamp(1.6rem, 2.4vw, 2rem); letter-spacing: -0.02em; color: #ffffff; }
.md-inst__card blockquote { margin: 0; padding-left: 16px; border-left: 3px solid #93c5fd; font-size: 1.02rem; line-height: 1.6; color: rgba(255, 255, 255, 0.92); }
.md-inst__meta { margin: 14px 0 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }
.md-inst__photo { position: relative; aspect-ratio: 16 / 11; border-radius: 18px; background: linear-gradient(160deg, #2456e0, #0d2460); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.md-inst__photo span { font-family: var(--font-display); font-size: 4rem; font-weight: 800; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); }
.md-inst__photo em { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px; background: rgba(0, 0, 0, 0.35); font-style: normal; font-size: 12px; text-align: center; color: #ffffff; }

.md__cred { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.md__c { padding: 24px; border-radius: 16px; background: #f6f9fe; border: 1px solid #e3ecf9; }
.md__c img { display: block; height: 18px; width: auto; margin-bottom: 14px; }
.md__cn { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #1d4ed8; }
.md__c b { display: block; margin-bottom: 6px; font-size: 1rem; color: #0b1633; }
.md__c p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: #64748b; }

.md__narrow { max-width: 820px; }
.md__pre { margin: 12px 0 0; font-size: 0.95rem; line-height: 1.6; color: #475569; }
.md__pre b { color: #0b1633; }
.cw { width: 100%; border-collapse: collapse; background: #ffffff; border: 1px solid #e3ecf9; border-radius: 14px; overflow: hidden; font-size: 0.95rem; }
.cw td, .cw th { padding: 11px 18px; border-bottom: 1px solid #f1f5f9; text-align: left; }
.cw td:last-child, .cw tfoot td:last-child { text-align: right; white-space: nowrap; color: #64748b; }
.cw td b { display: inline-block; min-width: 28px; font-family: var(--font-mono); font-weight: 500; color: #1d4ed8; }
.cw__part th { padding: 10px 18px; background: #f8fafc; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
.cw tfoot td { font-weight: 700; color: #0b1633; background: #f8fafc; border-bottom: 0; }
.cw tfoot td:last-child { color: #0b1633; }
.md__note { margin: 14px 0 0; font-size: 0.88rem; line-height: 1.5; color: #64748b; }

.md-how { padding-block: var(--space-16); }
.md-how__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; margin-bottom: var(--space-12); }
.md-how__frame { border-radius: 14px; overflow: hidden; background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.md-how__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #1e293b; font-size: 12px; color: #cbd5e1; }
.md-how__bar i { width: 9px; height: 9px; border-radius: 50%; background: #475569; }
.md-how__bar b { margin-left: 8px; font-weight: 600; color: #ffffff; }
.md-how__body { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 70px); gap: 8px; padding: 12px; }
.md-how__tile { display: flex; align-items: flex-end; padding: 8px; border-radius: 8px; background: linear-gradient(160deg, #334155, #1e293b); font-size: 11px; color: #e2e8f0; }
.md-how__tile--big { grid-row: 1 / span 3; background: linear-gradient(160deg, #2456e0, #133c9f); }
.md-how__foot { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #1e293b; font-size: 11.5px; color: #cbd5e1; }
.md-how__foot span:first-child { color: #f87171; }
.md-how__text { color: #ffffff; }
.md-how__text h2 { margin: 0 0 18px; font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -0.02em; color: #ffffff; }
.md-how__text ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.md-how__text li { font-size: 0.95rem; line-height: 1.55; color: rgba(255, 255, 255, 0.85); }
.md-how__text li b { color: #ffffff; }
.md-how .princ { margin-top: 0; }

@media (max-width: 960px) {
  .md-hero__grid, .md-inst__grid, .md-how__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .md-shot .ba__win { margin-right: 0; } .md-shot .ph { position: static; margin: -24px 0 0 auto; }
  .md__ben { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .md__stats, .md__cred { grid-template-columns: minmax(0, 1fr); }
  .md__feat { grid-template-columns: minmax(0, 1fr); }
  .md__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-hero__actions .btn { width: 100%; justify-content: center; }
  .md-inst__grid > .md-inst__photo { order: -1; }
}

/* ==========================================================================
   Vòng 75 — rà lại trang Khóa học: một thang tiêu đề, một nhãn nút, gộp giảng viên, bớt lặp
   ========================================================================== */
main .md__head h2, main .md-how__text h2, main .pricing .why__title, main .cohorts .why__title, main .faq2__head h2 { font-size: clamp(1.7rem, 2.6vw, 2.25rem); }
.md-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 0.92rem; color: rgba(255, 255, 255, 0.78); }
.md-hero__facts b { color: #ffffff; font-weight: 700; }
.inst2 { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: center; max-width: 900px; margin: 0 auto var(--space-10); }
.inst2__photo { aspect-ratio: 1; border-radius: 20px; background: linear-gradient(160deg, #2456e0, #0d2460); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.9); }
.inst2__body h3 { margin: 0 0 2px; font-size: 1.35rem; color: #0b1633; }
.inst2__role { margin: 0 0 12px !important; font-size: 0.9rem; font-weight: 600; color: #1d4ed8 !important; }
.inst2__body p { margin: 0; font-size: 1rem; line-height: 1.65; color: #475569; }
.inst2__body blockquote { margin: 14px 0 0; padding-left: 14px; border-left: 3px solid #93c5fd; font-size: 0.97rem; line-height: 1.55; color: #334155; }
.cw__part th:last-child { text-align: right; text-transform: none; letter-spacing: 0; font-weight: 600; color: #64748b; }
.cw td { padding-right: 18px; }
.md-how__grid { margin-bottom: 0; }
@media (max-width: 960px) { .inst2 { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; } .inst2__photo { font-size: 1.5rem; border-radius: 14px; } }
@media (max-width: 600px) { .inst2 { grid-template-columns: minmax(0, 1fr); } .inst2__photo { width: 120px; } }
/* Vòng 75b — h2 khối kết cùng thang; nền xen kẽ sau khi gộp giảng viên */
main .closing h2 { font-size: clamp(1.7rem, 2.6vw, 2.25rem); }
#hoc-duoc .md__stat, #hoc-duoc .md__f { background: #f6f9fe; }
/* bảng chương trình: hàng buổi chỉ có một ô → căn trái, số buổi cách tên */
.cw tbody tr:not(.cw__part) td { text-align: left; color: #334155; }
.cw td b { margin-right: 10px; }
.cw tbody tr:not(.cw__part) td { border-right: 0; }
.cw tbody tr:not(.cw__part) td:first-child { display: table-cell; width: 100%; }
.cw tbody tr:not(.cw__part) td, .cw tfoot td { border-bottom: 1px solid #f1f5f9; }
/* Vòng 76b — bỏ ô số liệu; đoạn dẫn nối thẳng sau tiêu đề */
#hoc-duoc .md__desc { margin-top: 0; }

/* ==========================================================================
   Vòng 77 — khoa-hoc-b.html: bố cục theo trang coaching của UniGap, tông sáng + xanh của site
   ========================================================================== */
.ug-hero { padding: calc(var(--header-h) + var(--header-offset) + 28px) 0 var(--space-12); background: #f4f7fd; }
.ug-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: stretch; }
.ug-hero__card { display: flex; flex-direction: column; justify-content: center; padding: 40px 42px; border-radius: 22px; background: #e8f0fe; }
.ug-tag { display: inline-block; align-self: flex-start; margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #1d4ed8; }
.ug-hero__card h1 { margin: 0; font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.12; letter-spacing: -0.025em; color: #0b1633; }
.ug-hero__promise { margin: 16px 0 0; font-size: 1.05rem; font-weight: 600; line-height: 1.5; color: #123a9a; }
.ug-ticks { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ug-ticks li { display: flex; align-items: center; gap: 10px; font-size: 0.97rem; color: #334155; }
.ug-ticks svg { flex: 0 0 18px; width: 18px; height: 18px; color: #15803d; }
.ug-hero__note { margin: 16px 0 0; font-size: 0.85rem; color: #64748b; }
.ug-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 22px; }
.ug-hero__meta { font-size: 0.88rem; font-weight: 600; color: #475569; }
.ug-hero__vis { display: flex; align-items: center; }
.ug-hero__vis .md-shot { width: 100%; }
.ug-hero__vis .md-shot .ba__win { margin-right: 90px; box-shadow: 0 30px 60px -30px rgba(10, 40, 90, 0.45); }
.ug-hero__vis .md-shot .ph { right: -4px; bottom: -12px; width: 120px; }

.ug { padding-block: var(--space-16); }
.ug--tight { padding-block: var(--space-12); }
.ug--tint { background: #eef3fc; }
.ug__head { text-align: center; max-width: 820px; margin: 0 auto var(--space-10); }
.ug__head h2 { margin: 0; font-size: clamp(1.6rem, 2.5vw, 2.1rem); line-height: 1.22; letter-spacing: -0.02em; color: #0b1633; }
.ug__head p { margin: 10px 0 0; font-size: 1rem; color: #64748b; }

.ug-two { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.ug-two__text > p { margin: 0 0 14px; font-size: 1rem; line-height: 1.65; color: #475569; }
.ug-two__text ul { margin: 0 0 22px; padding: 0 0 0 18px; display: grid; gap: 8px; font-size: 0.97rem; line-height: 1.55; color: #334155; }
.ug-two__text b { color: #0b1633; }
.ug-btn-ghost { border: 1px solid #1d4ed8; color: #1d4ed8; background: #ffffff; }
.ug-two__vis .md-how__frame { box-shadow: 0 30px 60px -30px rgba(10, 40, 90, 0.5); }

.ug-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ug-quotes blockquote { position: relative; margin: 0; padding: 26px 24px 22px; border-radius: 16px; background: #ffffff; border: 1px solid #e3ecf9; font-size: 0.95rem; line-height: 1.65; color: #334155; }
.ug-quotes blockquote span { display: block; margin-bottom: 4px; font-family: Georgia, serif; font-size: 2.2rem; line-height: 0.7; color: #93c5fd; }

.ug-tl { position: relative; max-width: 960px; margin: 0 auto; }
.ug-tl::before { content: ""; position: absolute; left: 170px; top: 10px; bottom: 10px; width: 2px; background: #c9dbf7; }
.ug-tl__row { display: grid; grid-template-columns: 150px 40px minmax(0, 1fr); gap: 0 12px; margin-bottom: 26px; }
.ug-tl__g span { display: inline-block; padding-top: 6px; font-size: 0.9rem; font-weight: 700; color: #0b1633; }
.ug-tl__node { position: relative; }
.ug-tl__node i { position: absolute; left: 50%; top: 9px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #1d4ed8; border: 3px solid #ffffff; box-shadow: 0 0 0 2px #c9dbf7; }
.ug-tl__card { padding: 22px 24px; border-radius: 16px; background: #ffffff; border: 1px solid #dfe8f8; }
.ug-tl__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ug-tl__head h3 { margin: 0; font-size: 1.15rem; color: #0b1633; }
.ug-tl__head em { font-style: normal; padding: 3px 10px; border-radius: 999px; background: #e8f0fe; font-size: 12px; font-weight: 700; color: #1d4ed8; white-space: nowrap; }
.ug-tl__lead { margin: 8px 0 12px; font-size: 0.93rem; color: #64748b; }
.ug-tl__card ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 0.95rem; color: #334155; }
.ug-tl__out { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed #dfe8f8; font-size: 0.9rem; font-weight: 600; color: #15803d; }
.ug-tl__note { max-width: 960px; margin: 6px auto 0; font-size: 0.88rem; color: #64748b; }

.ug-band { background: linear-gradient(180deg, #1e4fd6, #133c9f); color: #ffffff; }
.ug-band__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 34px; }
.ug-band h2 { margin: 0 0 6px; font-size: 1.5rem; letter-spacing: -0.015em; color: #ffffff; }
.ug-band p { margin: 0; color: rgba(255, 255, 255, 0.85); }
.ug-band .btn--white { background: #ffffff; color: #123a9a; white-space: nowrap; }

.ug-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ug-five > div { padding: 20px 18px; border-radius: 14px; background: #f6f9fe; border: 1px solid #e3ecf9; }
.ug-five b { display: block; margin-bottom: 8px; font-size: 1rem; color: #0b1633; }
.ug-five p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: #475569; }

.ug-testi { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; max-width: 900px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #ffffff; border: 1px solid #e3ecf9; }
.ug-testi__ph { display: flex; align-items: center; justify-content: center; min-height: 240px; background: repeating-linear-gradient(45deg, #eef2f7 0 10px, #f8fafc 10px 20px); color: #94a3b8; font-size: 0.85rem; }
.ug-testi__body { padding: 32px 34px; }
.ug-testi__q { margin: 0; font-size: 1.05rem; line-height: 1.65; color: #334155; }
.ug-testi__who { margin: 16px 0 0; font-size: 0.85rem; font-weight: 600; color: #b45309; }

.ug-coach { max-width: 420px; margin: 0 auto; text-align: center; }
.ug-coach__photo { width: 200px; height: 200px; margin: 0 auto 16px; border-radius: 20px; background: linear-gradient(160deg, #2456e0, #0d2460); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.9); }
.ug-coach h3 { margin: 0 0 4px; font-size: 1.2rem; letter-spacing: 0.02em; text-transform: uppercase; color: #0b1633; }
.ug-coach__role { margin: 0 0 12px; font-size: 0.9rem; font-weight: 600; color: #1d4ed8; }
.ug-coach__exp { margin: 0; font-size: 0.93rem; line-height: 1.6; color: #475569; }
.ug-coach__exp b { color: #0b1633; }

.ug-fee { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0; border-radius: 18px; background: #eef3fc; border: 1px solid #dfe8f8; }
.ug-fee > div { padding: 26px 28px; }
.ug-fee > div + div { border-left: 1px solid #dfe8f8; }
.ug-fee__main h2 { margin: 0 0 8px; font-size: 1.35rem; letter-spacing: -0.015em; color: #0b1633; }
.ug-fee__main p, .ug-fee__perk p { margin: 0; font-size: 0.93rem; line-height: 1.55; color: #475569; }
.ug-fee__perk b { display: block; margin-bottom: 6px; font-size: 1rem; color: #0b1633; }
.ug-pricing { padding-block: var(--space-12) var(--space-16); }
.ug-pricing .plans3 .pc { background: #ffffff; }
.ug-pricing .plans3 .pc:not(.pc--hi) { border-color: transparent; }

.ug-final { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: var(--space-12); padding: 34px 38px; border-radius: 20px; background: #e8f0fe; }
.ug-final__k { margin: 0 0 4px !important; font-size: 0.85rem !important; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #1d4ed8 !important; }
.ug-final h2 { margin: 0 0 6px; font-size: 1.6rem; letter-spacing: -0.02em; color: #0b1633; }
.ug-final p { margin: 0; color: #475569; }

@media (max-width: 960px) {
  .ug-hero__grid, .ug-two, .ug-quotes, .ug-testi, .ug-fee { grid-template-columns: minmax(0, 1fr); }
  .ug-hero__card { padding: 28px 22px; }
  .ug-hero__vis .md-shot .ba__win { margin-right: 0; } .ug-hero__vis .md-shot .ph { position: static; margin: -24px 0 0 auto; }
  .ug-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ug-tl::before { left: 8px; }
  .ug-tl__row { grid-template-columns: 20px minmax(0, 1fr); }
  .ug-tl__g { grid-column: 2; order: -1; margin-bottom: 4px; }
  .ug-tl__node { grid-column: 1; grid-row: 1 / span 2; }
  .ug-tl__node i { left: 0; margin-left: 0; }
  .ug-tl__card { grid-column: 2; }
  .ug-band__in, .ug-final { flex-direction: column; align-items: flex-start; }
  .ug-fee > div + div { border-left: 0; border-top: 1px solid #dfe8f8; }
  .ug-testi__ph { min-height: 160px; }
}
@media (max-width: 600px) { .ug-five { grid-template-columns: minmax(0, 1fr); } }
/* Vòng 77b — bản B: hero sáng → header chữ tối ngay từ đầu; thẻ giá giữa giữ nền xanh */
body.page-light-hero .header:not(.is-stuck) .nav__link { color: #42505f; }
body.page-light-hero .header:not(.is-stuck) .nav__link:hover, body.page-light-hero .header:not(.is-stuck) .nav__link.is-active { color: #1d4ed8; }
body.page-light-hero .header:not(.is-stuck) .logo__text, body.page-light-hero .header:not(.is-stuck) .logo__mark { color: #0b1633; }
body.page-light-hero .header:not(.is-stuck) .nav__cta { background: #1d4ed8; color: #ffffff; border-color: #1d4ed8; }
body.page-light-hero .header:not(.is-stuck) .header__inner { background: transparent; }
.ug-pricing .plans3 .pc:not(.pc--hi) { background: #ffffff; }
.ug-pricing .plans3 .pc--hi { background: linear-gradient(170deg, #2456e0 0%, #1a45c4 55%, #123a9a 100%); }
.ug-pricing .plans3 .pc--hi { border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(255, 255, 255, 0.12); }
/* Vòng 78 — trang Khóa học ghép: lộ trình dòng thời gian trên nền xám của site; cách học còn 3 ý */
#lo-trinh.ug--tint { background: #f2f5fa; }
.ug-band + #dac-biet { padding-top: var(--space-16); }

/* ==========================================================================
   Vòng 79 — nửa dưới trang Khóa học gọn lại: khoá khai giảng thành dải chọn ngày trong phần giá,
   khối kết thành một hàng, bỏ section riêng "Ba khoá"
   ========================================================================== */
.pricing .why { margin-bottom: var(--space-8); }
.pricing .why__sub { max-width: 60ch; }
.cohort-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; max-width: 1040px; margin: var(--space-8) auto 0; padding: 14px 18px; border-radius: 14px; background: #ffffff; border: 1px solid #e2e8f0; }
.cohort-strip__l { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #64748b; margin-right: 4px; }
.cohort-pill { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid #cbd5e1; background: #ffffff; cursor: pointer; font: inherit; color: #0b1633; transition: border-color 150ms, background 150ms; }
.cohort-pill b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.cohort-pill span { font-size: 0.82rem; color: #64748b; }
.cohort-pill:hover { border-color: #1d4ed8; background: #f1f6fe; }
.cohort-pill.is-near { border-color: #1d4ed8; background: #1d4ed8; color: #ffffff; }
.cohort-pill.is-near span { color: rgba(255, 255, 255, 0.8); }
.cohort-strip__n { flex: 1 1 100%; font-size: 0.85rem; color: #64748b; }
.section--faq .ug-final { margin-top: var(--space-10); padding: 26px 30px; }
.ug-final__a { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ug-final__a a { font-size: 0.88rem; font-weight: 600; color: #1d4ed8; }
@media (max-width: 960px) { .ug-final__a { align-items: flex-start; } .cohort-strip__l { flex-basis: 100%; } }
/* thẻ giá cách dòng phụ đủ xa để nhãn vàng không đè chữ */
.pricing .plans3 { margin-top: var(--space-6); }

/* Vòng 81 — phương án C cho nửa dưới trang Khóa học: bảng so sánh ba cách học + dải ngày + FAQ + dải kết xanh */
.cmpwrap{max-width:1040px;margin:0 auto;overflow-x:auto}.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:.93rem;color:#334155}.cmp th,.cmp td{padding:12px 16px;border-bottom:1px solid #eef2f7;text-align:center;vertical-align:middle}.cmp tbody th{text-align:left;font-weight:600;color:#0b1633;background:#f8fafc}.cmp thead th{font-size:1rem;color:#0b1633;padding-top:18px;padding-bottom:18px}.cmp .hi{background:#f1f6fe}.cmp thead .hi{border-radius:14px 14px 0 0;position:relative}.cmp thead .hi em{display:block;font-style:normal;font-size:11px;font-weight:700;color:#1d4ed8;margin-top:2px}.cmp td svg{width:18px;height:18px;color:#15803d}.cmp tbody tr:last-child td{padding:16px}.cmp .btn{padding:9px 14px;font-size:.88rem}.cmp .btn--ghost{border:1px solid #cbd5e1;color:#1d4ed8;background:#fff}

@media (max-width: 900px) { .cmp{min-width:720px} }
#hoc-phi .cmpwrap { margin-top: var(--space-2); }
#hoc-phi .cohort-strip { margin-top: var(--space-6); }
/* bảng so sánh trên nền xám: bảng trắng bo góc; điện thoại chỉ giữ cột Google Meet */
#hoc-phi .cmpwrap { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; }
#hoc-phi .cmp td { background: #ffffff; } #hoc-phi .cmp .hi, #hoc-phi .cmp td.hi { background: #f1f6fe; }
.cmp__more { display: none; margin: 12px 0 0; font-size: 0.85rem; color: #64748b; }
@media (max-width: 600px) {
  .cmp { min-width: 0; }
  .cmp th:nth-child(2), .cmp td:nth-child(2), .cmp th:nth-child(4), .cmp td:nth-child(4) { display: none; }
  .cmp tbody th { width: 42%; }
  .cmp__more { display: block; }
}

/* ==========================================================================
   Vòng 82 — học phí kiểu bảng giá Google Workspace: cột, nhãn giảm giá, giá, nút ở trên,
   danh sách "bao gồm" có icon; cột giữa viền xanh
   ========================================================================== */
.gp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 1080px; margin: 0 auto; border-radius: 20px; background: #ffffff; border: 1px solid #e2e8f0; overflow: visible; }
.gp__col { position: relative; padding: 28px 26px 30px; border-right: 1px solid #eef2f7; }
.gp__col:last-child { border-right: 0; }
.gp__col h3 { margin: 0 0 12px; font-size: 1.55rem; font-weight: 600; letter-spacing: -0.02em; color: #0b1633; }
.gp__badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 12px; font-weight: 600; }
.gp__badge--soon { background: #fef3c7; color: #92400e; }
.gp__badge--grey { background: #f1f5f9; color: #475569; }
.gp__price { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.gp__price b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; color: #0b1633; line-height: 1.1; }
.gp__price s { text-decoration: none; font-size: 0.82rem; color: #15803d; font-weight: 600; }
.gp__unit { margin: 4px 0 0; font-size: 0.9rem; color: #64748b; }
.gp__btn { width: 100%; justify-content: center; margin: 18px 0 22px; padding: 11px 16px; border-radius: 999px; font-size: 0.95rem; font-weight: 600; }
.gp__col .gp__btn:not(.btn--primary) { background: #ffffff; color: #1d4ed8; border: 1px solid #cbd5e1; }
.gp__col .gp__btn:not(.btn--primary):hover { background: #f1f6fe; border-color: #93c5fd; }
.gp__lead { margin: 0 0 14px; font-size: 0.95rem; font-weight: 600; color: #0b1633; }
.gp__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.gp__list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.gp__list svg { width: 22px; height: 22px; color: #1d4ed8; }
.gp__list b { display: block; font-size: 0.93rem; font-weight: 600; line-height: 1.4; color: #0b1633; }
.gp__list span { display: block; margin-top: 2px; font-size: 0.83rem; line-height: 1.4; color: #64748b; }
.gp__col--hi { margin: -1px; border: 2px solid #1d4ed8; border-radius: 20px; background: #ffffff; z-index: 1; }
.gp__col--hi .gp__badge { background: #dcfce7; }
#hoc-phi .cohort-strip { max-width: 1080px; margin-top: var(--space-6); }
@media (max-width: 960px) {
  .gp { grid-template-columns: minmax(0, 1fr); border: 0; background: none; gap: 14px; }
  .gp__col { border: 1px solid #e2e8f0; border-radius: 16px; background: #ffffff; }
  .gp__col--hi { margin: 0; order: -1; }
}
/* hàng tiêu đề, nhãn, giá, nút thẳng hàng giữa 3 cột (tiêu đề 2 dòng không đẩy lệch) */
.gp__col h3 { min-height: 2.6em; }
.gp__price { min-height: 2.9em; align-content: end; }
.gp__unit { min-height: 1.4em; }
.gp__col--hi .gp__price { min-height: 2.9em; }
.gp__col--hi .gp__unit { margin-top: 4px; }
@media (min-width: 961px) { .gp__col--hi .gp__btn { margin-top: 18px; } .gp__col .gp__btn { margin-top: 18px; } .gp__price s { flex-basis: 100%; } .gp__col:not(.gp__col--hi) .gp__price::after { content: ""; flex-basis: 100%; height: 1.2em; } }

/* ==========================================================================
   Vòng 83 — hai phần đầu trang Khóa học bớt chữ; chuyển động một chiều kiểu "settle":
   ô lợi ích rơi vào chỗ lần lượt, icon vẽ nét, dấu tích hiện dần, lộ trình: đường kẻ vẽ xuống,
   thẻ giai đoạn trượt vào lần lượt. Chỉ phần con chuyển động (phần tử .reveal đứng yên).
   ========================================================================== */
.md__ben { gap: 22px 40px; }
.md__b p { font-size: 0.95rem; }
.md__ticks--2 { max-width: 900px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
@media (max-width: 760px) { .md__ticks--2 { grid-template-columns: minmax(0, 1fr); } }

/* ô lợi ích: rơi từ dưới lên, hơi nghiêng rồi thẳng, lần lượt */
.js .md.reveal .md__b { opacity: 0; transform: translateY(26px) rotate(-1.2deg); transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1); }
.js .md.reveal .md__b:nth-child(2) { transform: translateY(26px) rotate(1.2deg); }
.js .md.reveal.is-visible .md__b { opacity: 1; transform: none; }
.js .md.reveal.is-visible .md__b:nth-child(2) { transition-delay: 110ms; }
.js .md.reveal.is-visible .md__b:nth-child(3) { transition-delay: 220ms; }
.js .md.reveal.is-visible .md__b:nth-child(4) { transition-delay: 330ms; }
/* icon: vẽ nét */
.js .md.reveal .md__ico svg * { stroke-dasharray: 70; stroke-dashoffset: 70; transition: stroke-dashoffset 900ms cubic-bezier(0.45, 0.05, 0.25, 1); }
.js .md.reveal.is-visible .md__ico svg * { stroke-dashoffset: 0; }
.js .md.reveal.is-visible .md__b:nth-child(1) .md__ico svg * { transition-delay: 250ms; }
.js .md.reveal.is-visible .md__b:nth-child(2) .md__ico svg * { transition-delay: 360ms; }
.js .md.reveal.is-visible .md__b:nth-child(3) .md__ico svg * { transition-delay: 470ms; }
.js .md.reveal.is-visible .md__b:nth-child(4) .md__ico svg * { transition-delay: 580ms; }
/* dấu tích: hiện lần lượt, dấu vẽ nét */
.js .md.reveal .md__ticks li { opacity: 0; transform: translateX(-10px); transition: opacity 420ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.js .md.reveal .md__ticks svg path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 380ms ease 200ms; }
.js .md.reveal.is-visible .md__ticks li { opacity: 1; transform: none; }
.js .md.reveal.is-visible .md__ticks svg path { stroke-dashoffset: 0; }
.js .md.reveal.is-visible .md__ticks li:nth-child(2) { transition-delay: 90ms; }
.js .md.reveal.is-visible .md__ticks li:nth-child(3) { transition-delay: 180ms; }
.js .md.reveal.is-visible .md__ticks li:nth-child(4) { transition-delay: 270ms; }
.js .md.reveal.is-visible .md__ticks li:nth-child(2) svg path { transition-delay: 290ms; }
.js .md.reveal.is-visible .md__ticks li:nth-child(3) svg path { transition-delay: 380ms; }
.js .md.reveal.is-visible .md__ticks li:nth-child(4) svg path { transition-delay: 470ms; }

/* lộ trình: đường kẻ đi đúng tâm mốc; đường vẽ từ trên xuống, mốc nở ra, thẻ trượt vào */
.ug-tl::before { left: 181px; transform-origin: top; transform: scaleY(0); transition: transform 1400ms cubic-bezier(0.45, 0.05, 0.25, 1); }
.ug-tl.is-drawn::before { transform: scaleY(1); }
.js .ug-tl__row.reveal .ug-tl__node i { transform: scale(0); transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.js .ug-tl__row.reveal .ug-tl__card { opacity: 0; transform: translateX(28px); transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1), transform 560ms cubic-bezier(0.22, 1, 0.36, 1); }
.js .ug-tl__row.reveal .ug-tl__g span { opacity: 0; transition: opacity 400ms ease 120ms; }
.js .ug-tl__row.reveal.is-visible .ug-tl__node i { transform: scale(1); }
.js .ug-tl__row.reveal.is-visible .ug-tl__card { opacity: 1; transform: none; transition-delay: 140ms; }
.js .ug-tl__row.reveal.is-visible .ug-tl__g span { opacity: 1; }
@media (max-width: 960px) { .ug-tl::before { left: 8px; } .js .ug-tl__row.reveal .ug-tl__card { transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  .js .md.reveal .md__b, .js .md.reveal .md__ticks li, .js .ug-tl__row.reveal .ug-tl__card, .js .ug-tl__row.reveal .ug-tl__g span { opacity: 1; transform: none; transition: none; }
  .js .md.reveal .md__ico svg *, .js .md.reveal .md__ticks svg path { stroke-dashoffset: 0; transition: none; }
  .js .ug-tl__row.reveal .ug-tl__node i { transform: none; }
  .ug-tl::before { transform: none; transition: none; }
}
/* Vòng 84 — "Bạn sẽ học được gì" lấy lại đủ 6 ý (một cột); dấu tích 5, 6 trễ theo */
.js .md.reveal.is-visible .md__ticks li:nth-child(5) { transition-delay: 360ms; }
.js .md.reveal.is-visible .md__ticks li:nth-child(6) { transition-delay: 450ms; }
.js .md.reveal.is-visible .md__ticks li:nth-child(5) svg path { transition-delay: 560ms; }
.js .md.reveal.is-visible .md__ticks li:nth-child(6) svg path { transition-delay: 650ms; }

/* ==========================================================================
   Vòng 86 — trang Khóa học: chuyển động khi rê chuột, nhẹ và nhất quán
   (nâng 3 px + bóng, icon hơi phóng, viền chuyển xanh). Chỉ trên thiết bị có chuột.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  /* ô lợi ích */
  .md__b { padding: 10px 12px; margin: -10px -12px; border-radius: 14px; transition: background 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
  .md__b:hover { background: rgba(255, 255, 255, 0.85); transform: translateY(-2px); }
  .md__ico { transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), background 220ms, color 220ms; }
  .md__b:hover .md__ico { transform: scale(1.12) rotate(-4deg); background: #1d4ed8; color: #ffffff; }
  /* dấu tích */
  .md__ticks li { padding: 4px 8px; margin: -4px -8px; border-radius: 8px; transition: background 200ms, color 200ms; }
  .md__ticks li:hover { background: #f1f6fe; color: #0b1633; }
  .md__ticks li svg { transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
  .md__ticks li:hover svg { transform: scale(1.25); }
  /* lộ trình */
  .ug-tl__card { transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms, border-color 220ms; }
  .ug-tl__row:hover .ug-tl__card { transform: translateY(-3px); border-color: #93c5fd; box-shadow: 0 20px 36px -22px rgba(29, 78, 216, 0.4); }
  .ug-tl__node i { transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 260ms; }
  .ug-tl__row:hover .ug-tl__node i { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(29, 78, 216, 0.16); }
  .ug-tl__card ul li { transition: transform 200ms, color 200ms; }
  .ug-tl__card ul li:hover { transform: translateX(4px); color: #1d4ed8; }
  /* điều đặc biệt */
  .ug-five > div { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms, border-color 220ms, background 220ms; }
  .ug-five > div:hover { transform: translateY(-4px); background: #ffffff; border-color: #93c5fd; box-shadow: 0 22px 36px -24px rgba(29, 78, 216, 0.45); }
  /* cách học: ý đậm sáng lên */
  .md-how__text li { padding: 6px 10px; margin: -6px -10px; border-radius: 10px; transition: background 200ms; }
  .md-how__text li:hover { background: rgba(255, 255, 255, 0.1); }
  .md-how__frame { transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms; }
  .md-how__frame:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.75); }
  /* giảng viên + uy tín */
  .md__c { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms, border-color 220ms; }
  .md__c:hover { transform: translateY(-4px); border-color: #93c5fd; box-shadow: 0 22px 36px -24px rgba(29, 78, 216, 0.4); }
  .inst2__photo { transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms; }
  .inst2__photo:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 30px 50px -28px rgba(19, 60, 159, 0.6); }
  /* bảng giá */
  .gp__col { transition: background 220ms; }
  .gp__col:not(.gp__col--hi):hover { background: #f8fafc; }
  .gp__col--hi { transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms; }
  .gp__col--hi:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -28px rgba(29, 78, 216, 0.45); }
  .gp__list li { transition: transform 200ms; }
  .gp__list li:hover { transform: translateX(4px); }
  .gp__list li svg { transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
  .gp__list li:hover svg { transform: scale(1.2); }
  .cohort-pill { transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 150ms, background 150ms, box-shadow 200ms; }
  .cohort-pill:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 18px -10px rgba(29, 78, 216, 0.5); }
  /* FAQ */
  .faq__item { transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms, border-color 200ms; }
  .faq__item:hover { transform: translateY(-2px); border-color: #93c5fd; box-shadow: 0 14px 28px -20px rgba(29, 78, 216, 0.4); }
  /* nút chính: nâng nhẹ */
  .khoa-hoc .btn--primary, .md__cta .btn, .ug-band .btn, .gp__btn, .ctabar .btn { transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms, background 160ms, color 160ms; }
  .md__cta .btn:hover, .ug-band .btn:hover, .gp__btn:hover, .ctabar .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -12px rgba(29, 78, 216, 0.55); }
}
@media (prefers-reduced-motion: reduce) { .md__b, .md__ico, .ug-tl__card, .ug-tl__node i, .ug-five > div, .md__c, .gp__col--hi, .cohort-pill, .faq__item { transition: none !important; transform: none !important; } }
/* Vòng 87 — ảnh giảng viên thật */
.inst2__img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 20px; box-shadow: 0 24px 44px -26px rgba(19, 60, 159, 0.55); }
@media (hover: hover) and (pointer: fine) { .inst2__img { transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms; } .inst2__img:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 30px 50px -28px rgba(19, 60, 159, 0.6); } }
@media (max-width: 600px) { .inst2__img { width: 160px; } }

/* ==========================================================================
   Vòng 96 — trang chủ: section "Giải pháp" (#solutions) theo mẫu anh Hòa gửi:
   tiêu đề giữa có chữ nhấn xanh, đoạn dẫn, 3 thẻ đánh số 01/02/03, thẻ giữa nền xanh.
   Chuyển động một chiều (thẻ trượt lên lần lượt, số trượt vào), hover nhấc thẻ.
   ========================================================================== */
.sol .sol__head { max-width: 880px; margin: 0 auto clamp(32px, 4vw, 52px); text-align: center; }
.sol .sol__head h2 { margin: 0 0 16px; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: #0b1633; }
.sol .sol__head h2 em { font-style: normal; color: #1d4ed8; }
.sol .sol__head p { margin: 0 auto; max-width: 70ch; font-size: 1.05rem; line-height: 1.65; color: #475569; }
.sol__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1180px; margin: 0 auto; }
.sol__card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 32px 28px 28px; border-radius: 20px; background: #ffffff; border: 1px solid #e2e8f0; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, border-color 220ms ease; }
.sol__num { display: block; margin-bottom: 26px; font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 1.4vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #1d4ed8; }
.sol__card h3 { margin: 0 0 12px; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; color: #0b1633; }
.sol__card p { margin: 0 0 22px; font-size: 0.98rem; line-height: 1.65; color: #475569; }
.sol__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.95rem; color: #1d4ed8; text-decoration: none; }
.sol__link span { display: inline-block; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.sol__card--hi { background: linear-gradient(160deg, #1e4fd6 0%, #133c9f 100%); border-color: transparent; box-shadow: 0 26px 52px -30px rgba(19, 60, 159, 0.7); }
.sol__card--hi .sol__num { color: #93c5fd; }
.sol__card--hi h3 { color: #ffffff; }
.sol__card--hi p { color: rgba(255, 255, 255, 0.86); }
.sol__card--hi .sol__link { color: #ffffff; }
.sol__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 3px; border-radius: 6px; }
.sol__card--hi .sol__link:focus-visible { outline-color: #ffffff; }
@media (hover: hover) and (pointer: fine) {
  .sol__card:hover { transform: translateY(-6px); border-color: #93c5fd; box-shadow: 0 24px 40px -26px rgba(29, 78, 216, 0.45); }
  .sol__card--hi:hover { box-shadow: 0 30px 56px -28px rgba(19, 60, 159, 0.8); }
  .sol__card:hover .sol__link span { transform: translateX(4px); }
}
/* một chiều: chỉ phần con chuyển động (khối .reveal đứng yên) */
.js .sol__head.reveal h2, .js .sol__head.reveal p { opacity: 0; transform: translateY(16px); transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.js .sol__head.reveal.is-visible h2, .js .sol__head.reveal.is-visible p { opacity: 1; transform: none; }
.js .sol__head.reveal.is-visible p { transition-delay: 120ms; }
.js .sol__grid.reveal .sol__card { opacity: 0; transform: translateY(28px); transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1), transform 640ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, border-color 220ms ease; }
.js .sol__grid.reveal .sol__num { display: block; opacity: 0; transform: translateX(-14px); transition: opacity 500ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1); }
.js .sol__grid.reveal.is-visible .sol__card { opacity: 1; transform: none; }
.js .sol__grid.reveal.is-visible .sol__num { opacity: 1; transform: none; }
.js .sol__grid.reveal.is-visible .sol__card:nth-child(2) { transition-delay: 120ms, 120ms, 0s, 0s; }
.js .sol__grid.reveal.is-visible .sol__card:nth-child(3) { transition-delay: 240ms, 240ms, 0s, 0s; }
.js .sol__grid.reveal.is-visible .sol__card:nth-child(1) .sol__num { transition-delay: 260ms; }
.js .sol__grid.reveal.is-visible .sol__card:nth-child(2) .sol__num { transition-delay: 380ms; }
.js .sol__grid.reveal.is-visible .sol__card:nth-child(3) .sol__num { transition-delay: 500ms; }
@media (hover: hover) and (pointer: fine) {
  .js .sol__grid.reveal.is-visible .sol__card:hover { transform: translateY(-6px); transition-delay: 0s; }
}
@media (max-width: 900px) {
  .sol__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sol__card { padding: 26px 22px 22px; }
  .sol__num { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .sol__head.reveal h2, .js .sol__head.reveal p, .js .sol__grid.reveal .sol__card, .js .sol__grid.reveal .sol__num { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Vòng 97 — trang chủ: "Về chúng tôi" (#about), đích của mục menu mới.
   Ảnh giám đốc bên trái, giới thiệu + 3 dòng thông tin + 2 nút bên phải.
   ========================================================================== */
.abt__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1120px; margin: 0 auto; }
.abt__photo { position: relative; margin: 0; border-radius: 24px; overflow: hidden; background: #1d4ed8; box-shadow: 0 30px 60px -36px rgba(19, 60, 159, 0.55); }
.abt__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.abt__photo figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 10px 24px -16px rgba(11, 22, 51, 0.45); }
.abt__photo figcaption b { font-size: 1rem; font-weight: 800; color: #0b1633; }
.abt__photo figcaption span { font-size: 0.86rem; color: #475569; }
.abt__body h2 { margin: 0 0 16px; font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: #0b1633; }
.abt__body h2 em { font-style: normal; color: #1d4ed8; }
.abt__lead { margin: 0 0 12px; font-size: 1.1rem; line-height: 1.6; color: #0b1633; font-weight: 600; }
.abt__body > p:not(.abt__lead) { margin: 0 0 20px; font-size: 1rem; line-height: 1.65; color: #475569; }
.abt__list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.abt__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.97rem; line-height: 1.55; color: #334155; }
.abt__list svg { width: 22px; height: 22px; margin-top: 1px; color: #1d4ed8; }
.abt__list a { color: #1d4ed8; font-weight: 600; text-decoration: none; background: linear-gradient(#1d4ed8, #1d4ed8) 0 100% / 0 1px no-repeat; transition: background-size 200ms ease; }
.abt__list a:hover { background-size: 100% 1px; }
.abt__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (hover: hover) and (pointer: fine) {
  .abt__photo:hover img { transform: scale(1.03); }
}
/* một chiều: ảnh trượt từ trái, chữ + dòng thông tin hiện lần lượt */
.js .abt__photo.reveal img, .js .abt__photo.reveal figcaption { opacity: 0; transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.js .abt__photo.reveal img { transform: scale(1.06); }
.js .abt__photo.reveal figcaption { transform: translateY(14px); }
.js .abt__photo.reveal.is-visible img { opacity: 1; transform: none; }
.js .abt__photo.reveal.is-visible figcaption { opacity: 1; transform: none; transition-delay: 260ms; }
.js .abt__body.reveal > * { opacity: 0; transform: translateY(18px); transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.js .abt__body.reveal.is-visible > * { opacity: 1; transform: none; }
.js .abt__body.reveal.is-visible > :nth-child(2) { transition-delay: 90ms; }
.js .abt__body.reveal.is-visible > :nth-child(3) { transition-delay: 180ms; }
.js .abt__body.reveal.is-visible > :nth-child(4) { transition-delay: 270ms; }
.js .abt__body.reveal.is-visible > :nth-child(5) { transition-delay: 360ms; }
@media (max-width: 900px) {
  .abt__grid { grid-template-columns: minmax(0, 1fr); }
  .abt__photo { max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .abt__photo.reveal img, .js .abt__photo.reveal figcaption, .js .abt__body.reveal > * { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Round 97 — #hoc-phi: ba thẻ học phí tách rời theo mẫu anh Hòa gửi.
   Thẻ giữa xanh hoàng gia + quầng sáng xanh, hai thẻ bên sáng viền mảnh.
   Nút cùng một đường đáy trên desktop (thẻ giữa cao hơn bằng padding bù
   margin âm, nội dung vẫn thẳng hàng). Reveal một chiều bằng animation
   fill "backwards" để hover lift không bị delay; không bao giờ phát lại.
   ========================================================================== */
#hoc-phi .tp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1080px; margin: 38px auto 0; align-items: stretch; }
#hoc-phi .tp__card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px 26px 26px; border-radius: 20px; background: #ffffff; border: 1px solid #e2e8f0; color: #0b1633; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease, border-color 220ms ease; }
#hoc-phi .tp__card--hi { z-index: 1; margin: -20px 0; padding-top: 48px; padding-bottom: 46px; border-color: transparent; color: #ffffff; background: radial-gradient(120% 70% at 100% 0%, rgba(147, 197, 253, 0.3) 0%, rgba(147, 197, 253, 0) 58%), linear-gradient(160deg, #1e4fd6 0%, #133c9f 100%); box-shadow: 0 30px 64px -26px rgba(30, 79, 214, 0.6), 0 12px 26px -18px rgba(19, 60, 159, 0.55); }

#hoc-phi .tp__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
#hoc-phi .tp__name { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; color: inherit; }
#hoc-phi .tp__badge { flex: none; display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; border: 1px solid #e2e8f0; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
#hoc-phi .tp__badge--soon { border-color: #fde68a; background: #fef3c7; color: #92400e; }
#hoc-phi .tp__badge--hi { position: absolute; top: 14px; right: 16px; border-color: #ffffff; background: #ffffff; color: #1d4ed8; box-shadow: 0 8px 18px -10px rgba(8, 20, 60, 0.55); }

#hoc-phi .tp__pricebox { min-height: 74px; margin-top: 18px; }
#hoc-phi .tp__price { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 1.3rem + 1.4vw, 2.55rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: inherit; }
#hoc-phi .tp__price small { margin-left: 3px; font-size: 0.5em; font-weight: 700; letter-spacing: 0; }
#hoc-phi .tp__price--text { font-size: clamp(1.4rem, 0.95rem + 0.95vw, 1.85rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
#hoc-phi .tp__unit { margin: 8px 0 0; font-size: 0.88rem; line-height: 1.35; color: #64748b; }
#hoc-phi .tp__card--hi .tp__unit { color: rgba(255, 255, 255, 0.8); }

#hoc-phi .tp__rule { display: block; width: 100%; height: 1px; margin: 18px 0; border: 0; background: #e2e8f0; }
#hoc-phi .tp__card--hi .tp__rule { background: rgba(255, 255, 255, 0.2); }

#hoc-phi .tp__facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 0.95rem; line-height: 1.4; color: #475569; }
#hoc-phi .tp__facts b { font-weight: 700; color: #0b1633; }
#hoc-phi .tp__card--hi .tp__facts { color: rgba(255, 255, 255, 0.84); }
#hoc-phi .tp__card--hi .tp__facts b { color: #ffffff; }

#hoc-phi .tp__lead { margin: 0 0 12px; font-size: 0.92rem; font-weight: 700; line-height: 1.35; color: inherit; }
#hoc-phi .tp__list { flex: 1 0 auto; margin: 0; padding: 0; list-style: none; display: grid; align-content: start; gap: 10px; }
#hoc-phi .tp__list li { position: relative; padding-left: 18px; font-size: 0.92rem; line-height: 1.45; color: #0b1633; }
#hoc-phi .tp__list li::before { content: ""; position: absolute; left: 1px; top: 0.56em; width: 7px; height: 7px; border-radius: 50%; background: #1d4ed8; }
#hoc-phi .tp__list b { font-weight: 500; }
#hoc-phi .tp__list span { display: block; margin-top: 1px; font-size: 0.82rem; line-height: 1.4; color: #64748b; }
#hoc-phi .tp__card--hi .tp__list li { color: #ffffff; }
#hoc-phi .tp__card--hi .tp__list li::before { background: #93c5fd; box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.18); }
#hoc-phi .tp__card--hi .tp__list span { color: rgba(255, 255, 255, 0.72); }

#hoc-phi .tp__foot { display: grid; gap: 14px; margin-top: 24px; }
#hoc-phi .tp__addon { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 11px 14px; border-radius: 12px; border: 1px solid #e2e8f0; background: #f7f9fc; font-size: 0.86rem; line-height: 1.35; color: #64748b; }
#hoc-phi .tp__addon b { margin-left: auto; font-weight: 700; text-align: right; color: #0b1633; }
#hoc-phi .tp__card--hi .tp__addon { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.82); }
#hoc-phi .tp__card--hi .tp__addon b { color: #ffffff; }

#hoc-phi .tp__btn { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 999px; border: 1px solid #1d4ed8; background: #1d4ed8; color: #ffffff; font-size: 0.95rem; font-weight: 600; box-shadow: none; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
#hoc-phi .tp__btn:hover { border-color: #1e40af; background: #1e40af; color: #ffffff; }
#hoc-phi .tp__btn:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 3px; }
#hoc-phi .tp__card--hi .tp__btn { border-color: #ffffff; background: #ffffff; color: #1d4ed8; }
#hoc-phi .tp__card--hi .tp__btn:hover { border-color: #eff6ff; background: #eff6ff; color: #1e40af; }
#hoc-phi .tp__card--hi .tp__btn:focus-visible { outline-color: #ffffff; }

#hoc-phi .tp + .cohort-strip { margin-top: calc(var(--space-6) + 20px); }

/* reveal một chiều: khối .tp đứng yên, chỉ các thẻ trồi lên lệch 120 ms */
.js #hoc-phi .tp.reveal { opacity: 1; transform: none; transition: none; }
.js #hoc-phi .tp.reveal .tp__card { opacity: 0; }
.js #hoc-phi .tp.reveal.is-visible .tp__card { opacity: 1; animation: hpTpRise 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.js #hoc-phi .tp.reveal.is-visible .tp__card:nth-child(2) { animation-delay: 120ms; }
.js #hoc-phi .tp.reveal.is-visible .tp__card:nth-child(3) { animation-delay: 240ms; }
@keyframes hpTpRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (hover: hover) and (pointer: fine) {
  #hoc-phi .tp__card:hover { transform: translateY(-6px); border-color: #bfdbfe; box-shadow: 0 26px 46px -26px rgba(29, 78, 216, 0.42); }
  #hoc-phi .tp__card--hi:hover { border-color: transparent; box-shadow: 0 38px 72px -26px rgba(30, 79, 214, 0.7), 0 14px 30px -18px rgba(19, 60, 159, 0.6); }
  #hoc-phi .tp__btn:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -12px rgba(29, 78, 216, 0.6); }
  #hoc-phi .tp__card--hi .tp__btn:hover { box-shadow: 0 12px 22px -12px rgba(8, 20, 60, 0.55); }
}

@media (min-width: 901px) and (max-width: 1180px) {
  #hoc-phi .tp { gap: 16px; }
  #hoc-phi .tp__card { padding-left: 20px; padding-right: 20px; }
  #hoc-phi .tp__addon { flex-direction: column; align-items: flex-start; gap: 2px; }
  #hoc-phi .tp__addon b { margin-left: 0; text-align: left; }
}
@media (max-width: 900px) {
  #hoc-phi .tp { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 560px; margin-top: 24px; }
  #hoc-phi .tp__card { padding: 24px 20px 22px; }
  #hoc-phi .tp__card--hi { order: -1; margin: 0; padding-top: 50px; padding-bottom: 24px; }
  #hoc-phi .tp__pricebox { min-height: 0; }
  #hoc-phi .tp + .cohort-strip { margin-top: var(--space-6); }
  .js #hoc-phi .tp.reveal.is-visible .tp__card--hi { animation-delay: 0ms; }
  .js #hoc-phi .tp.reveal.is-visible .tp__card:nth-child(1) { animation-delay: 120ms; }
}

@media (prefers-reduced-motion: reduce) {
  .js #hoc-phi .tp.reveal .tp__card, .js #hoc-phi .tp.reveal.is-visible .tp__card { opacity: 1; animation: none; }
  #hoc-phi .tp__card, #hoc-phi .tp__btn { transition: none; }
  #hoc-phi .tp__card:hover, #hoc-phi .tp__btn:hover { transform: none; }
}

/* Round 97 review: 901-980px keeps the middle plan name on one line so the
   dividers stay level; no one-word orphans in list lines; sub-lines on the
   blue card a touch brighter for contrast. */
#hoc-phi .tp__list li, #hoc-phi .tp__facts li { text-wrap: pretty; }
#hoc-phi .tp__card--hi .tp__list span { color: rgba(255, 255, 255, 0.78); }
@media (min-width: 901px) and (max-width: 980px) {
  #hoc-phi .tp__name { font-size: 1rem; }
}

/* ==========================================================================
   Round 98 — menu mới: Trang chủ · Dự án · Khoá học · Về chúng tôi · NocoBase Partner.
   Mục "NocoBase Partner" là viên thuốc có tích xanh: nền xanh nhạt trên header
   trắng, kính trắng trong suốt trên hero xanh. Ngăn kéo mobile (≤1140px) luôn
   nền sáng nên chữ luôn tối, mục đang xem xanh, nút CTA luôn hiện.
   Kèm: huy hiệu đối tác trên hero trang Khoá học (.md-partner) và liên kết
   phụ "Xem thêm →" (.more-link) ở các khối giới thiệu trên trang chủ.
   ========================================================================== */
.nav__link.nav__link--partner {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px 6px 8px; border: 1px solid #bfdbfe; border-radius: 999px;
  background: #eef4ff; color: #1d4ed8; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav__verified { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
.nav__link.nav__link--partner:hover { background: #dbeafe; border-color: #93c5fd; color: #133c9f; box-shadow: 0 8px 18px -12px rgba(29, 78, 216, 0.6); }
.header .nav__link.nav__link--partner.is-active { background: #dbeafe; border-color: #93c5fd; color: #133c9f; font-weight: 700; }
.nav__link.nav__link--partner:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .nav__link.nav__link--partner:hover { transform: translateY(-1px); }
}

/* header trong suốt nằm trên hero xanh: kính trắng, chữ trắng */
.has-hero-dark .header:not(.is-stuck) .nav__link.nav__link--partner { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.has-hero-dark .header:not(.is-stuck) .nav__link.nav__link--partner:hover,
.has-hero-dark .header:not(.is-stuck) .nav__link.nav__link--partner.is-active { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.7); color: #ffffff; }
.has-hero-dark .header:not(.is-stuck) .nav__verified { filter: drop-shadow(0 1px 1px rgba(4, 16, 48, 0.35)); }
.has-hero-dark .header:not(.is-stuck) .nav__link.nav__link--partner:focus-visible { outline-color: #ffffff; }
[data-theme="dark"] .header.is-stuck .nav__link.nav__link--partner { background: rgba(96, 165, 250, 0.14); border-color: rgba(147, 197, 253, 0.4); color: #bfdbfe; }

/* thanh header thẳng mép với nội dung (trước đây padding 0 → logo và nút menu dính sát mép màn hình ở mobile) */
.header .container.header__inner,
.has-hero-dark .header:not(.is-stuck) .container.header__inner { padding-inline: var(--gutter); }

/* thanh ngang desktop: vạch mảnh dưới mục đang xem */
@media (min-width: 1141px) {
  .nav__link.is-active:not(.nav__link--partner)::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: -3px; height: 2px; border-radius: 2px; background: currentColor; }
}

/* ngăn kéo (≤1140px): nền sáng → chữ tối, viên thuốc đứng riêng, CTA luôn hiện */
@media (max-width: 1140px) {
  .header .nav { left: auto; right: var(--gutter); width: min(380px, calc(100% - 2 * var(--gutter))); }
  .nav .nav__link { font-size: var(--text-base); }
  .has-hero-dark .header:not(.is-stuck) .nav .nav__link { color: var(--text-primary); }
  .nav .nav__link.is-active:not(.nav__link--partner),
  .has-hero-dark .header:not(.is-stuck) .nav .nav__link.is-active:not(.nav__link--partner) { color: #1d4ed8; font-weight: 700; }
  .nav .nav__link.nav__link--partner,
  .has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner {
    align-self: flex-start; margin-top: 14px; padding: 10px 18px 10px 12px; gap: 8px;
    border: 1px solid #bfdbfe; border-radius: 999px; background: #eef4ff; color: #1d4ed8;
    font-size: var(--text-base); box-shadow: none;
  }
  .nav .nav__link.nav__link--partner:hover,
  .nav .nav__link.nav__link--partner.is-active,
  .has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner:hover,
  .has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner.is-active { background: #dbeafe; border-color: #93c5fd; color: #133c9f; }
  .has-hero-dark .header:not(.is-stuck) .nav .nav__verified { filter: none; }
  .nav .nav__verified { width: 20px; height: 20px; flex-basis: 20px; }
  .nav .nav__cta,
  .has-hero-dark .header:not(.is-stuck) .nav .nav__cta { display: inline-flex; justify-content: center; margin-top: 16px; background: #1d4ed8; color: #ffffff; border-color: #1d4ed8; border-radius: 999px; }
  [data-theme="dark"] .nav .nav__link.is-active:not(.nav__link--partner) { color: #93c5fd; }
}

/* --- Trang Khoá học: huy hiệu đối tác trên hero (thay dòng chữ nhỏ cũ) --- */
.md-partner {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  margin: 0 0 20px; padding: 7px 14px 7px 9px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.36); background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 28px -18px rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #ffffff; font-size: 0.95rem; font-weight: 600; line-height: 1.2; text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 240ms ease, transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: mdPartnerIn 720ms cubic-bezier(0.22, 1, 0.36, 1) 120ms backwards;
}
.md-partner::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  transform: translateX(-120%); animation: mdPartnerSheen 1200ms ease 820ms 1 forwards;
}
.md-partner__check { display: block; width: 22px; height: 22px; flex: 0 0 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28)); }
.md-partner__t { white-space: nowrap; }
.md-partner__logo { display: block; width: auto; height: 18px; aspect-ratio: 320 / 47; flex: none; filter: brightness(0) invert(1); }   /* logo gốc đen → trắng */
.md-partner__arr { display: block; width: 14px; height: 14px; flex: 0 0 14px; margin-left: 1px; opacity: 0.75; transition: transform 200ms ease, opacity 200ms ease; }
.md-partner:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.62); color: #ffffff; }
.md-partner:hover .md-partner__arr { opacity: 1; transform: translateX(3px); }
.md-partner:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .md-partner:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 16px 30px -18px rgba(0, 0, 0, 0.7); }
}
@keyframes mdPartnerIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes mdPartnerSheen { to { transform: translateX(120%); } }
@media (max-width: 600px) {
  .md-partner { gap: 7px; margin-bottom: 16px; padding: 6px 11px 6px 7px; font-size: 0.85rem; }
  .md-partner__check { width: 20px; height: 20px; flex-basis: 20px; }
  .md-partner__logo { height: 15px; }
}
@media (max-width: 379px) { .md-partner__arr { display: none; } }

/* --- Trang chủ: liên kết phụ sang trang riêng --- */
.more-link { display: inline-block; align-self: center; padding: 10px 4px; font-size: 0.95rem; font-weight: 600; line-height: 1.3; color: #1d4ed8; text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color 160ms ease; }
.more-link span { display: inline-block; margin-left: 2px; transition: transform 200ms ease; }
.more-link:hover { color: #133c9f; text-decoration: underline; }
.more-link:hover span { transform: translateX(3px); }
.more-link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .md-partner, .md-partner::after { animation: none; }
  .md-partner::after { display: none; }
  .nav__link.nav__link--partner, .md-partner, .md-partner__arr, .more-link span { transition: none; }
  .nav__link.nav__link--partner:hover, .md-partner:hover, .md-partner:hover .md-partner__arr, .more-link:hover span { transform: none; }
}

/* ==========================================================================
   Vòng 99 — CHỈ THỊ CỦA CHỦ WEBSITE (anh Hòa, 2026-09-25): mục menu "NocoBase Partner"
   dùng kiểu chữ BÌNH THƯỜNG như các mục khác (không viên thuốc, không nền, không viền).
   Không làm nổi lại mục này. Giữ dấu tích xanh nhỏ cạnh chữ.
   ========================================================================== */
.header .nav__link.nav__link--partner,
.header .nav__link.nav__link--partner:hover,
.header .nav__link.nav__link--partner.is-active,
.has-hero-dark .header:not(.is-stuck) .nav__link.nav__link--partner,
.has-hero-dark .header:not(.is-stuck) .nav__link.nav__link--partner:hover,
.has-hero-dark .header:not(.is-stuck) .nav__link.nav__link--partner.is-active {
  background: none; border: 0; box-shadow: none; transform: none;
  padding-left: 0; padding-right: 0; border-radius: 0;
  color: inherit; font-weight: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.header .nav__link.nav__link--partner .nav__verified { width: 15px; height: 15px; flex: 0 0 15px; filter: none; }

/* Trang chủ: vùng xanh đậm kéo xuống ~2/3 chiều cao màn đầu (trước ~1/2);
   dải "Đang vận hành tại" nhích lên (khoảng trống dưới nút thu lại). Chỉ máy tính. */
@media (min-width: 961px) {
  .fold {
    background:
      linear-gradient(180deg, #0a1430 0%, rgba(10, 20, 48, 0.95) 18%, rgba(10, 20, 48, 0.78) 38%, rgba(10, 20, 48, 0.5) 54%, rgba(10, 20, 48, 0.22) 64%, rgba(10, 20, 48, 0.06) 72%, rgba(10, 20, 48, 0) 78%),
      radial-gradient(ellipse 110% 128% at 50% -2%,
        #0d2460 0%, #10358c 26%, #1749b8 43%, #2a72d6 57%, #4f8fe2 66%, #7fb0ec 74%,
        #aacdf4 81%, #cfe2f9 87%, #e9f2fc 92%, #f8fbfe 97%, #ffffff 100%),
      #ffffff;
  }
  .fold__blob--a { top: 70%; }
  .fold__blob--b { top: 74%; }
  .fold__aura::after { background: linear-gradient(180deg, rgba(255,255,255,0) 74%, rgba(255,255,255,0.5) 81%, rgba(255,255,255,0.86) 87%, rgba(255,255,255,0.97) 93%, #ffffff 98%); }
  .fold > .logos--in-fade { padding-bottom: clamp(84px, 14vh, 150px); }
  .fold > .hero2--grad { padding-bottom: 0; }
}

/* Vòng 100 — sửa vòng 99 theo anh Hòa: (1) chỉ dòng "Đang vận hành tại" nhích lên, dải tên khách hàng
   giữ vị trí cũ; (2) bỏ lớp navy kéo sâu (gây dải xám đen), thay bằng xanh tươi kéo xuống ~2/3. Chỉ máy tính. */
@media (min-width: 961px) {
  .fold {
    background:
      linear-gradient(180deg, #0a1430 0%, rgba(10, 20, 48, 0.95) 14%, rgba(10, 20, 48, 0.68) 32%, rgba(10, 20, 48, 0.3) 48%, rgba(10, 20, 48, 0.08) 58%, rgba(10, 20, 48, 0) 66%),
      radial-gradient(ellipse 112% 128% at 50% -2%,
        #0d2460 0%, #10358c 24%, #1749b8 40%, #2166d6 52%, #2f7ae0 60%, #4f8fe2 66%, #7fb0ec 73%,
        #aacdf4 80%, #cfe2f9 86%, #e9f2fc 91%, #f8fbfe 96%, #ffffff 100%),
      #ffffff;
  }
  .fold__blob--a { top: 66%; }
  .fold__blob--b { top: 70%; }
  .fold__aura::after { background: linear-gradient(180deg, rgba(255,255,255,0) 76%, rgba(255,255,255,0.45) 83%, rgba(255,255,255,0.85) 89%, rgba(255,255,255,0.97) 94%, #ffffff 99%); }
  /* dải tên khách hàng về chỗ cũ (đáy), dòng chữ nhích lên nhờ khoảng cách phía trên dải tên */
  .fold > .logos--in-fade { padding: 0 0 clamp(44px, 8vh, 84px); }
  .fold > .hero2--grad { padding-bottom: clamp(8px, 2vh, 24px); }
  .fold .clients__lead { margin-bottom: clamp(44px, 6.5vh, 72px); }
}
@media (min-width: 961px) { .fold .clients__lead { color: #1e3a8a; } }   /* vòng 100: chữ nằm trên nền xanh nhạt → xanh đậm cho rõ */
/* Vòng 101 — anh Hòa: bỏ dấu tích cạnh "NocoBase Partner" trên menu */
.header .nav__link.nav__link--partner .nav__verified { display: none; }
/* Vòng 102c — CHỈ THỊ CHỦ WEBSITE: "NocoBase Partner" là mục menu thường ở MỌI trạng thái,
   kể cả ngăn kéo điện thoại (≤1140px) và header trên hero xanh. Không viên thuốc, không icon. */
.header .nav .nav__link.nav__link--partner,
.header .nav .nav__link.nav__link--partner:hover,
.header .nav .nav__link.nav__link--partner.is-active,
.has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner,
.has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner:hover,
.has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner.is-active {
  align-self: auto; margin-top: 0; padding-left: 0; padding-right: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; transform: none;
}
.header .nav .nav__link.nav__link--partner .nav__verified { display: none; }
@media (max-width: 1140px) {
  .header .nav .nav__link.nav__link--partner,
  .has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner { color: var(--text-primary); font-weight: inherit; padding-top: inherit; padding-bottom: inherit; }
  .header .nav .nav__link.nav__link--partner.is-active,
  .has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner.is-active { color: #1d4ed8; font-weight: 700; }
}

/* ==========================================================================
   Vòng 101 — BẦU TRỜI HERO DÙNG CHUNG (anh Hòa, 2026-09-25: "hero của các page màu nên như nhau,
   không nên lúc xanh này lúc xanh kia… màn sương, ô vuông nên giữ cho đồng nhất").
   Một hệ nền cho mọi hero:
     .fold  — trang chủ, NocoBase Partner (màn đầu trọn chiều cao)
     .sky   — Khoá học, Dự án, Về chúng tôi (hero giữ chiều cao của nó)
   Cùng gradient navy → xanh royal → trắng (--sky-paint), cùng hai vùng sương "thở" (__blob--a/b),
   cùng lớp tan trắng ở đáy (__aura::after, --sky-fade), cùng lưới chấm trắng (canvas __grid do main.js vẽ,
   0,8 chiều cao hero, tan dần sau 66%). Mọi mốc tính theo % chiều cao hero → hero thấp vẫn đúng tỉ lệ.
   Muốn chỉnh màu trời: sửa --sky-paint / --sky-fade ở đây, cả năm trang đổi theo.
   Markup .sky: <section class="… sky"><div class="sky__aura" aria-hidden="true"><i class="sky__blob
   sky__blob--a"></i><i class="sky__blob sky__blob--b"></i><canvas class="sky__grid"></canvas></div>…
   ========================================================================== */
:root {
  /* ≤960px (giá trị vòng 19b của trang chủ) */
  --sky-paint:
    linear-gradient(180deg, #0a1430 0%, rgba(10, 20, 48, 0.92) 14%, rgba(10, 20, 48, 0.6) 32%, rgba(10, 20, 48, 0.2) 50%, rgba(10, 20, 48, 0) 62%),
    radial-gradient(ellipse 220% 100% at 50% -2%,
      #0d2460 0%, #10358c 26%, #1749b8 43%, #2a72d6 57%, #4f8fe2 66%, #7fb0ec 74%,
      #aacdf4 81%, #cfe2f9 87%, #e9f2fc 92%, #f8fbfe 97%, #ffffff 100%),
    #ffffff;
  --sky-fade: linear-gradient(180deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.4) 81%, rgba(255,255,255,0.78) 89%, rgba(255,255,255,0.95) 94%, #ffffff 99%);
}
@media (max-width: 600px) {
  :root { --sky-fade: linear-gradient(180deg, rgba(255,255,255,0) 66%, rgba(255,255,255,0.55) 78%, rgba(255,255,255,0.9) 88%, #ffffff 96%); }
}
@media (min-width: 961px) {
  :root {
    /* máy tính (giá trị vòng 100 của trang chủ) */
    --sky-paint:
      linear-gradient(180deg, #0a1430 0%, rgba(10, 20, 48, 0.95) 14%, rgba(10, 20, 48, 0.68) 32%, rgba(10, 20, 48, 0.3) 48%, rgba(10, 20, 48, 0.08) 58%, rgba(10, 20, 48, 0) 66%),
      radial-gradient(ellipse 112% 128% at 50% -2%,
        #0d2460 0%, #10358c 24%, #1749b8 40%, #2166d6 52%, #2f7ae0 60%, #4f8fe2 66%, #7fb0ec 73%,
        #aacdf4 80%, #cfe2f9 86%, #e9f2fc 91%, #f8fbfe 96%, #ffffff 100%),
      #ffffff;
    --sky-fade: linear-gradient(180deg, rgba(255,255,255,0) 76%, rgba(255,255,255,0.45) 83%, rgba(255,255,255,0.85) 89%, rgba(255,255,255,0.97) 94%, #ffffff 99%);
  }
}

/* nền trời: du-an.css / ve-chung-toi.css nạp SAU theme → .dh / .vct-hero cần bộ chọn ghép để trời thắng */
.fold, .sky, .dh.sky, .vct-hero.sky { background: var(--sky-paint); }
.sky { position: relative; isolation: isolate; overflow: hidden; }
.sky > .container { position: relative; z-index: 1; }

/* màn sương: hai vùng sáng "thở" rất chậm + đáy tan trắng */
.sky__aura { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky__blob { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.fold__blob--a, .sky__blob--a {
  background: radial-gradient(closest-side, rgba(42, 114, 214, 0.62) 0%, rgba(42, 114, 214, 0.42) 32%, rgba(60, 130, 225, 0.2) 58%, rgba(80, 150, 235, 0.07) 80%, rgba(80, 150, 235, 0) 100%);
  animation: aura-a 29s ease-in-out infinite alternate;
}
.fold__blob--b, .sky__blob--b {
  background: radial-gradient(closest-side, rgba(96, 165, 245, 0.42) 0%, rgba(96, 165, 245, 0.24) 40%, rgba(96, 165, 245, 0.08) 72%, rgba(96, 165, 245, 0) 100%);
  animation: aura-b 34s ease-in-out infinite alternate;
}
/* vị trí/cỡ theo % hero (trang chủ: tâm 65–66% / 69–70% chiều cao, cao 64% / 50%, rộng 92% / 70%) */
.sky__blob--a { left: 4%; top: 33%; width: 92%; height: 64%; }
.sky__blob--b { left: 1%; top: 44%; width: 70%; height: 50%; }
@media (min-width: 961px) { .sky__blob--a { top: 34%; } .sky__blob--b { top: 45%; } }
@media (max-width: 960px) { .sky__blob--a { left: -35%; width: 170%; } .sky__blob--b { left: -29%; width: 130%; } }
.fold__aura::after, .sky__aura::after { content: ""; position: absolute; inset: 0; background: var(--sky-fade); }

/* lưới chấm (main.js vẽ vào mọi canvas .fold__grid / .sky__grid) */
.fold__grid, .sky__grid { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }

body.modal-open .sky__blob { animation-play-state: paused; }
body.modal-open .sky__grid { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .fold__blob, .sky__blob { animation: none; } }

/* --- Đệm đáy: chữ trắng nằm trên phần navy/xanh, sương trắng ở dưới nội dung (như trang Đối tác) --- */
@media (min-width: 961px) {
  .md-hero.sky { padding-bottom: clamp(120px, 21vh, 240px); }
  .dh.sky { padding-bottom: clamp(170px, 27vh, 300px); }
  .vct-hero.sky { padding-bottom: clamp(120px, 21vh, 240px); }
}
@media (min-width: 961px) and (max-width: 1199px) {
  /* hai cột hẹp → chữ xuống nhiều dòng, khối chữ cao hơn → đệm đáy lớn hơn để nút vẫn nằm trên nền xanh */
  .md-hero.sky, .vct-hero.sky { padding-bottom: clamp(150px, 29vh, 260px); }
  .dh.sky { padding-bottom: clamp(190px, 31vh, 320px); }
}
@media (max-width: 640px) {
  .dh.sky { padding-bottom: clamp(240px, 40vh, 380px); }
}

/* --- Về chúng tôi: hero từng là nền sáng chữ tối → chuyển sang chữ trắng như hero trang chủ --- */
.vct-hero.sky .vct-hero__title { color: #ffffff; }
.vct-hero.sky .vct-hero__title em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #9fd6ff; }
.vct-hero.sky .vct-hero__lead { color: rgba(255, 255, 255, 0.85); }
.vct-hero.sky .vct-hero__facts { color: rgba(255, 255, 255, 0.8); }
.vct-hero.sky .vct-hero__partner { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); color: #ffffff; }
.vct-hero.sky .vct-hero__partner:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); box-shadow: none; }
.vct-hero.sky .vct-hero__partner:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.vct-hero.sky .vct-hero__partner .vct-verified { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }
.vct-hero.sky .vct-hero__actions .btn--primary { background: #ffffff; color: #0b3f8c; border-color: #ffffff; box-shadow: inset 0 1px 0 #ffffff, 0 12px 30px -12px rgba(0, 0, 0, 0.45); }
.vct-hero.sky .vct-hero__actions .btn--primary:hover { background: #eef5ff; color: #0b3f8c; }
.vct-hero.sky .vct-hero__actions .btn--ghost { background: rgba(255, 255, 255, 0.1); color: #ffffff; font-weight: 600; border: 1.5px solid rgba(255, 255, 255, 0.85); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.vct-hero.sky .vct-hero__actions .btn--ghost:hover { background: #ffffff; color: #123a9a; }
.vct-hero.sky .vct-hero__actions .btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/* ==========================================================================
   Vòng 101 — rà soát chéo (reviewer):
   (1) Menu: "NocoBase Partner" trông GIỐNG HỆT các mục khác (chỉ thị vòng 99/102c: mục thường,
       không viên thuốc, không icon). Trước đó mục này sáng hơn (trắng 100% so với 85%), mảnh hơn
       (400 so với 500), lệch 2px và trong ngăn kéo thiếu vạch ngăn, đệm dày hơn.
       Trạng thái đang xem (trang Đối tác) giữ nguyên: đậm 700 + vạch dưới / chữ xanh.
   (2) Dự án: huy hiệu "Đối tác chính thức của NocoBase" nằm thấp, sau bầu trời chung nó rơi vào
       vùng xanh nhạt (tương phản ~2,5–2,9:1). Nền kính ngả xanh royal → ≥4,5:1 ở 360–1440px.
   ========================================================================== */
.header .nav .nav__link.nav__link--partner,
.header .nav .nav__link.nav__link--partner:hover,
.header .nav .nav__link.nav__link--partner.is-active,
.has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner,
.has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner:hover,
.has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner.is-active {
  display: block; line-height: inherit; padding: 6px 2px;
}
.header .nav .nav__link.nav__link--partner:not(.is-active),
.has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner:not(.is-active) { font-weight: 500; }
.header .nav .nav__link.nav__link--partner:not(.is-active):hover { color: var(--text-primary); }
@media (min-width: 1141px) {
  .header .nav .nav__link.nav__link--partner,
  .header .nav .nav__link.nav__link--partner.is-active,
  .has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner,
  .has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner.is-active { border-radius: var(--r-sm); }
  .has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner:not(.is-active) { color: rgba(255, 255, 255, 0.85); }
  .has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner:not(.is-active):hover { color: #ffffff; }
}
@media (max-width: 1140px) {
  .header .nav .nav__link.nav__link--partner,
  .header .nav .nav__link.nav__link--partner:hover,
  .header .nav .nav__link.nav__link--partner.is-active,
  .has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner,
  .has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner:hover,
  .has-hero-dark .header:not(.is-stuck) .nav .nav__link.nav__link--partner.is-active { border-bottom: 1px solid var(--stroke-faint); }
}

.dh.sky .dh__partner { background: rgba(19, 60, 159, 0.4); border-color: rgba(255, 255, 255, 0.34); }
.dh.sky .dh__partner:hover { background: rgba(19, 60, 159, 0.55); border-color: rgba(255, 255, 255, 0.5); }
.dh.sky .dh__partner:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

/* Vòng 105 — anh Hòa đồng ý: trên điện thoại, nút phụ ở hero trang chủ nằm trong vùng sương trắng
   → chữ xanh trên nền kính sáng cho đọc được (máy tính giữ nguyên kiểu viền trắng). */
@media (max-width: 960px) {
  .fold > .hero2--grad .hero2__actions .btn--ghost {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(29, 78, 216, 0.28);
    color: #1d4ed8;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 8px 20px -14px rgba(19, 60, 159, 0.55);
  }
  .fold > .hero2--grad .hero2__actions .btn--ghost:hover { background: #ffffff; color: #133c9f; }
}

/* Vòng 107 — an toàn chế độ tối: site chỉ có bản sáng thương hiệu (bản tối cũ không bảo trì).
   "only light" (kèm <meta name="color-scheme" content="only light"> ở mỗi trang) chặn trình duyệt
   tự làm tối/đảo màu trang — Chrome Android "auto dark mode for web contents", Samsung Internet,
   Opera — và giữ ô nhập, danh sách chọn, lịch chọn ngày, thanh cuộn, autofill ở giao diện sáng.
   Khối @media lặp lại đúng quy tắc đó: không đổi gì, chỉ để trình duyệt nhận ra trang đã tự xử lý
   chế độ tối của khách (Samsung Internet dò khối này trước khi tự làm tối). */
:root { color-scheme: only light; }
@media (prefers-color-scheme: dark) {
  :root { color-scheme: only light; }
}

/* Vòng 107 — song ngữ VI/EN (anh Hòa: "có cả ngôn ngữ Việt Anh"): hiện lại nút ngôn ngữ đã ẩn ở
   khối "Bỏ những thứ thừa". Nút nằm trên thanh header ở mọi bề rộng, ngay trước "Tư vấn ngay"
   (máy tính) hoặc trước nút menu (≤1140px); chữ "VI/EN", ngôn ngữ đang xem in đậm xanh.
   Máy tính: viên thuốc cao 38px như nút CTA; điện thoại/tablet: ô 36px bo 8px như nút menu. */
.header .lang-toggle {
  display: inline-flex !important;
  align-items: center; justify-content: center; gap: 1px;
  height: 38px; padding: 0 13px; flex: 0 0 auto;
  border: 1px solid rgba(13, 17, 23, 0.16); border-radius: 999px; background: transparent;
  font-family: inherit; font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.02em;
  line-height: 1; white-space: nowrap; color: #42505f; text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.header .lang-toggle b { color: #1d4ed8; font-weight: 700; }
.header .lang-toggle:hover { border-color: rgba(29, 78, 216, 0.45); color: #0b1633; background: rgba(29, 78, 216, 0.05); }
.header .lang-toggle:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.has-hero-dark .header:not(.is-stuck) .lang-toggle { color: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.3); }
.has-hero-dark .header:not(.is-stuck) .lang-toggle b { color: #ffffff; }
.has-hero-dark .header:not(.is-stuck) .lang-toggle:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.08); }
.has-hero-dark .header:not(.is-stuck) .lang-toggle:focus-visible { outline-color: #ffffff; }
@media (max-width: 1140px) {
  .header .lang-toggle { height: 36px; padding: 0 10px; border-radius: 8px; font-size: 12px; }
}

/* Vòng 107 — soát bản EN ở 1440/1024/768/390/360:
   (1) Trang Đối tác, nút cuối phần "Hệ thống" ("Trao đổi về hệ thống của doanh nghiệp bạn →" /
       "Discuss your company's system →"): .btn giữ chữ một dòng nên nút rộng hơn khung trên điện
       thoại và bị main cắt mất phần phải (bản VI mất ~50px ở 390px). Cho chữ xuống dòng trong nút.
   (2) Thẻ số liệu (trang chủ, Đối tác): nhãn EN dài hơn tràn khỏi thẻ ở 861–1180px khi còn nowrap.
   (3) Tiêu đề h2/h3 bản EN có <br>: "balance" (style.css) không cân được đoạn sau <br> vì dòng đầu
       đã rộng nhất → còn một chữ lẻ ở dòng cuối ("strain." ở 360px, "file." ở 390px). "pretty"
       kéo thêm một chữ xuống dòng cuối; tiêu đề không có <br> vẫn giữ "balance". */
@media (max-width: 600px) {
  .np__cta-line .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.35; text-wrap: balance; }
}
html[lang="en"] .stats--band .stat-card > span:last-child,
html[lang="en"] .fold > .logos--in-fade .stats .stat-card > span:last-child { white-space: normal; }
html[lang="en"] :is(h2, h3):has(br) { text-wrap: pretty; }
/* (4) Thanh CTA đáy trang Khoá học trên điện thoại ≤400px: nhãn bị nút ép xuống 3 dòng (cả VI
       "Khoá / NocoBase 15 / buổi" lẫn EN), thanh cao 94px. Chữ và nút gọn lại → 2 dòng cân, cao ~61px. */
@media (max-width: 400px) {
  .ctabar__in { gap: 12px; }
  .ctabar__t b { font-size: 0.84rem; line-height: 1.3; text-wrap: balance; }
  .ctabar .btn { padding: 10px 14px; font-size: 0.84rem; }
}

/* ==========================================================================
   Vòng 108 — sửa trước khi mở trang (rà soát 10 trang VI/EN).
   Khối này nằm cuối file và thắng các quy tắc cùng độ ưu tiên phía trên.
   ========================================================================== */

/* (1) Một màu xanh thương hiệu cho mọi nút chính và liên kết: xanh royal #1d4ed8 → #133c9f
       (thay xanh Fluent #0078d4 → #106ebe). Nút trắng trên hero giữ nguyên (bộ chọn riêng, ưu tiên cao hơn). */
[data-theme="light"] {
  --accent: #1d4ed8;
  --accent-rgb: 29, 78, 216;
  --accent-hover: #133c9f;
  --accent-dim: #0f3286;
  --accent-soft: rgba(29, 78, 216, 0.12);
  --accent-softer: rgba(29, 78, 216, 0.06);
  --accent-line: rgba(29, 78, 216, 0.35);
}
.btn--primary { background: linear-gradient(180deg, #1d4ed8 0%, #133c9f 100%); }
.btn--primary:hover { background: linear-gradient(180deg, #1a46c4 0%, #0f3286 100%); }
.btn--primary:active { background: #0f3286; }

/* (2) Hero bầu trời: chữ trắng đọc được (≥ 4,5:1) ở mọi bề rộng.
       Nút phụ: nền kính xanh royal đậm thay cho kính trắng 10% (trên nền xanh nhạt chỉ đạt 3,0–3,9:1),
       bỏ blur/saturate (trên nền trời nó biến nút thành khối xanh sáng). Phụ đề và dòng thông tin:
       trắng đặc + quầng tối rất nhẹ dưới chữ. */
body .fold > .hero2--grad .hero2__actions .btn--ghost,
body .dh .dh__actions .btn--ghost,
body .md-hero__actions .btn--ghost,
body .vct-hero.sky .vct-hero__actions .btn--ghost,
body .np-fold .np-hero__actions .btn--ghost {
  background: rgba(19, 60, 159, 0.5);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  color: #ffffff;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body .fold > .hero2--grad .hero2__actions .btn--ghost:hover,
body .dh .dh__actions .btn--ghost:hover,
body .md-hero__actions .btn--ghost:hover,
body .vct-hero.sky .vct-hero__actions .btn--ghost:hover,
body .np-fold .np-hero__actions .btn--ghost:hover,
body .np-fold .np-hero__actions .btn--ghost:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: #133c9f;
}
/* trang chủ ≤ 960px: giữ kiểu anh Hòa đã duyệt ở vòng 105 (nút nằm trong vùng sương trắng) */
@media (max-width: 960px) {
  body .fold > .hero2--grad .hero2__actions .btn--ghost {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(29, 78, 216, 0.28);
    color: #1d4ed8;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 20px -14px rgba(19, 60, 159, 0.55);
  }
  body .fold > .hero2--grad .hero2__actions .btn--ghost:hover { background: #ffffff; color: #133c9f; }
}
body .fold > .hero2--grad .hero2__sub,
body .np-fold .np-hero__sub,
body .vct-hero.sky .vct-hero__facts {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(10, 20, 48, 0.3), 0 0 18px rgba(10, 20, 48, 0.35);
}
/* điện thoại: dòng cuối phụ đề trang chủ nằm trên phần trời sáng hơn → quầng dưới chữ đậm hơn một chút */
@media (max-width: 600px) {
  body .fold > .hero2--grad .hero2__sub { text-shadow: 0 1px 2px rgba(10, 20, 48, 0.36), 0 0 20px rgba(10, 20, 48, 0.5); }
}
body .vct-hero.sky .vct-hero__partner { background: rgba(19, 60, 159, 0.5); border-color: rgba(255, 255, 255, 0.4); }
body .vct-hero.sky .vct-hero__partner:hover { background: rgba(19, 60, 159, 0.66); border-color: rgba(255, 255, 255, 0.6); }
/* thẻ BAMFLOW trong hero Về chúng tôi (chỉ đổi màu, không đổi chuyển động) */
body .vct-evo__card--new .vct-evo__year { color: #ffffff; }
body .vct-evo__card--new .vct-evo__sub { color: rgba(255, 255, 255, 0.94); }
body .vct-evo__card--new .vct-evo__tags i { background: rgba(10, 20, 48, 0.24); border-color: rgba(255, 255, 255, 0.3); }
body .vct-evo__card--old .vct-evo__sub { color: #475569; font-weight: 500; }

/* (3) Chữ phụ cỡ nhỏ đạt 4,5:1 */
.mth__got small { color: rgba(255, 255, 255, 0.84); }
.mth__brace span { color: rgba(255, 255, 255, 0.84); }
.ba__col--after > p { color: #475569; }
.ba__mess .chip small { color: #64748b; }
.scene em, .ph__top span { color: #64748b; }
.scene__msg.is-old { opacity: 0.78; }
.closing p { color: rgba(255, 255, 255, 0.94); }
.fold .clients__lead { color: #172554; }
.tone-g .clients__lead, .np-end .clients__lead { color: #475569; }
.np__facts-src { color: #64748b; }
.np-after__note { color: #475569; }
.pick__num { color: rgba(255, 255, 255, 0.86); }
.dock__lead, .dock__app--more { color: #475569; }
.ug__head p, .ug-tl__note { color: #475569; }
#hoc-phi .tp__addon { color: #475569; }
.sched__note { color: #64748b; }
.cal__dow span { color: #475569; }
.coh__info span { color: #475569; }
.faq2__head p a { white-space: nowrap; }
.footer__made { text-wrap: pretty; }
/* tiêu đề có <br> (VI và EN): "pretty" tránh một chữ lẻ ở dòng cuối */
main :is(h2, h3):has(br) { text-wrap: pretty; }
.nowrap { white-space: nowrap; }

/* (4) Form tư vấn */
#contactModal .modal-header { padding-right: 48px; }
.modal-container:focus { outline: none; }
.modal-form .form__row { align-items: start; }
.modal-container .field { align-content: start; }
.modal-container .field__error {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}
.modal-form .form__note { color: #64748b; }
.modal-container .field input::placeholder,
.modal-container .field textarea::placeholder { color: #64748b; }
.modal-container .field select.custom-select { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* khung cuộn của form: chừa chỗ cho nút Gửi + ghi chú dính ở đáy khi đưa ô đang nhập vào tầm nhìn */
.modal-form { scroll-padding-bottom: 104px; }

/* (5) Chữ BAMFLOW khổng lồ ở chân trang: trên điện thoại vừa trong lề, không bị cắt chữ W */
@media (max-width: 600px) {
  .footer__wordmark { font-size: clamp(3rem, 17vw, 5rem); }
}

/* (6) Hiệu ứng khi rê chuột: thẻ nhích lên, viền xanh (như .sol__card) */
@media (hover: hover) and (pointer: fine) {
  .ctx__pain, .stats--band .stat-card, .ba__pts li, .np__card, .layer, .pick__col, .np__chips li {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease, color 220ms ease;
  }
  .ctx__pain:hover, .stats--band .stat-card:hover, .np__card:hover, .layer:hover {
    transform: translateY(-3px);
    border-color: #93c5fd;
    box-shadow: 0 20px 36px -26px rgba(29, 78, 216, 0.45);
  }
  .ba__pts li:hover { transform: translateY(-2px); border-top-color: #1d4ed8; }
  .pick__col:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 24px 40px -28px rgba(4, 16, 60, 0.6); }
  .pick__col--hi:hover { border-color: #ffffff; }
  .np__chips li:hover { border-color: #93c5fd; color: #1d4ed8; }
  .closing__actions .btn--white:hover { background: #eef5ff; }
}
@media (prefers-reduced-motion: reduce) {
  .ctx__pain:hover, .stats--band .stat-card:hover, .np__card:hover, .layer:hover, .ba__pts li:hover, .pick__col:hover { transform: none; }
}

/* (7) Trang chủ — sân khấu workflow AI.
       ≤ 1100px: các node xếp lưới trong luồng (2 cột: 2 trigger / AI / người duyệt + hành động; ≤ 600px: 1 cột),
       khung cao theo nội dung (không còn node bị cắt), bảng Dữ liệu / Phân quyền cuộn ngang được.
       > 1100px: khung cao 440px để hàng node dưới không chạm thanh "Kết nối". */
@media (min-width: 1101px) {
  .aiB--index .canvas__body { height: 440px; }
  .aiB--index .canvas { margin-bottom: 22px; }
}
@media (max-width: 1100px) {
  .aiB--index .canvas__body { display: block; height: auto; }
  .aiB--index .canvas .canvas__stage.tabpanel.is-on {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
    width: auto; height: auto; max-width: none; margin: 0; padding: 20px;
  }
  .aiB--index .canvas__stage .node { position: relative; left: auto; top: auto; width: auto; }
  .aiB--index .canvas__stage .node--ai { grid-column: 1 / -1; }
  .aiB--index .canvas__wires { display: none; }
  .aiB--index .canvas__body > .tabpanel--pad { min-width: 0; max-width: 100%; overflow-x: auto; }
  .aiB--index .gridtbl { min-width: 560px; }
  .aiB--index .dock { position: static; transform: none; margin: 14px auto 0; flex-wrap: wrap; justify-content: center; border-radius: 16px; box-shadow: none; border: 1px solid #e2e8f0; }
  .aiB--index .canvas { margin-bottom: 0; }
}
@media (max-width: 600px) {
  .aiB--index .canvas .canvas__stage.tabpanel.is-on { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
}
.aiB--index { padding-bottom: 64px; }

/* (8) Trang chủ — "Hai cách vận hành": khung ứng dụng + điện thoại */
.ba__roles { flex-wrap: wrap; }
.ba__roles span { white-space: nowrap; }
.ba__bar b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ba__kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ba__kpi span { display: block; line-height: 1.35; overflow-wrap: anywhere; }
.ba__tbl td:first-child { white-space: nowrap; }
@media (max-width: 1100px) { .ba__bar em { display: none; } }
/* ≤ 960px: điện thoại vẫn là khung chứa của hai nút bên hông (trước đây position:static làm hai nút
   bám vào .ba__app thành hai vạch lạc ở mép cửa sổ). 601–960px: điện thoại đứng cạnh cửa sổ như desktop. */
@media (max-width: 960px) { .ph { position: relative; } }
@media (min-width: 601px) and (max-width: 960px) {
  .ba__app .ba__win { margin-right: 108px; }
  .ba__app .ph { position: absolute; right: -4px; bottom: -10px; margin: 0; }
}

/* (9) Nhịp nền xen kẽ đến cuối trang: trang kết thúc bằng section trắng → chân trang dùng nền xám */
body:has(> main > section.tone-w:last-child) > .footer { background: var(--tone-g, #f2f5fa); }
/* kiểm tra lại vòng 108: dòng pháp nhân 12,5px #64748b trên chân trang xám chỉ 4,35:1 → #5b6b80 (4,98:1 trên xám, 5,44:1 trên trắng), mọi trang cùng màu */
.footer .footer__legal { color: #5b6b80; }

/* (9b) Thẻ CTA cuối trang ≤ 600px: nhãn nút dài (bản EN "Message us on Zalo: 0986 238 723") xuống dòng
        trong nút thay vì đẩy nút tràn khỏi thẻ */
@media (max-width: 600px) {
  .closing__actions .btn { white-space: normal; max-width: 100%; text-align: center; text-wrap: balance; }
}

/* (10) Trang chủ — lặt vặt */
.mth__head { text-align: center; }
.sol__link { display: block; align-self: flex-start; }
.sol__link span { display: inline-block; }
.scene__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* tên tệp dài: cắt bằng dấu …, dấu ? luôn hiện */
.scene__file em { flex: none; }

/* (11) Trang Đối tác: lưới 4 cột xuống 2 cột sớm hơn, dãy số liệu NocoBase thành lưới */
@media (max-width: 1100px) {
  .pick--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np__grid:not(.np__grid--3) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.np__facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 12px 48px; }
@media (max-width: 1100px) { .np__facts { grid-template-columns: repeat(2, auto); gap: 12px 40px; } }
@media (max-width: 600px) { .np__facts { grid-template-columns: auto; justify-items: center; } }

/* (12) Trang Khoá học */
.md-how__foot span:first-child { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1180px) {
  .ug-five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ug-five > div { grid-column: span 2; }
  .ug-five > div:nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 601px) and (max-width: 960px) {
  .ug-five > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
main > section#hoc-phi, main > section#dang-ky { padding-block: var(--space-16); }
#hoc-phi .why__title, #dang-ky .faq2__head h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0b1633;
}

/* (13) Không có JavaScript: header không trôi trong suốt đè lên nội dung, menu điện thoại vẫn dùng được */
html:not(.js) .header { position: absolute; background: #ffffff; border-bottom: 1px solid #e2e8f0; }
html:not(.js) .header .nav__link.is-active { color: #1d4ed8; }
@media (max-width: 1140px) {
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .header .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4px;
    padding: 6px 12px 8px; opacity: 1; visibility: visible; transform: none;
    background: #ffffff; border: 0; border-bottom: 1px solid #e2e8f0; border-radius: 0; box-shadow: none;
    width: auto;
  }
  html:not(.js) .header .nav .nav__link { padding: 6px 8px; border-bottom: 0; font-size: 0.9rem; color: #334155; }
  html:not(.js) .header .nav .nav__cta { display: none; }
}

/* (13b) Kiểm tra lại vòng 108: ngăn kéo menu (≤1140px) mở khi đã cuộn (header dính) —
       "NocoBase Partner" đậm hơn các mục khác (#0b1420 so với #42505f). Cùng màu như mọi mục thường. */
@media (max-width: 1140px) {
  .header.is-stuck .nav .nav__link.nav__link--partner:not(.is-active) { color: var(--text-secondary); }
  .header.is-stuck .nav .nav__link.nav__link--partner:not(.is-active):hover { color: var(--text-primary); }
  html:not(.js) .header .nav .nav__link.is-active { color: #1d4ed8; }   /* không JS: trang đang xem xanh ở mọi trang (trước chỉ trang Đối tác) */
}

/* (14) Góc liên tục (superellipse n = 3) — theo hình mẫu của anh Hòa.
       n = 3 ⇔ corner-shape: superellipse(log2 3 ≈ 1.585); từ khoá "squircle" là n = 4 (vuông quá).
       Bán kính tăng ~1,4× để độ bo nhìn bằng thiết kế cũ. Ô biểu tượng nhỏ: 50% + cùng dạng góc
       (thành hình "squircle" trọn). Viên thuốc (999px) và hình tròn (50%) giữ nguyên.
       Trình duyệt chưa hỗ trợ corner-shape: giữ bo góc như cũ (cả khối nằm trong @supports).
       :root ở đầu bộ chọn → thắng các file CSS riêng của trang (nạp sau file này). */
@supports (corner-shape: superellipse(1.585)) {
  /* thẻ, khung, ảnh, hộp thoại, thẻ CTA, thẻ hero, thẻ học phí */
  :root .sol__card, :root .dcard, :root .dh__win, :root .dh__back, :root .dcl__wall,
  :root #hoc-phi .tp__card, :root .vct-pr__card, :root .inst2__img, :root .modal-container,
  :root .modal-container.sched__box { border-radius: 28px; corner-shape: superellipse(1.585); }
  :root .ctx__pain, :root .ba__col, :root .canvas, :root .pick__col, :root .vct-tl__card,
  :root .ph__screen { border-radius: 25px; corner-shape: superellipse(1.585); }
  :root .canvas__bar { border-radius: 25px 25px 0 0; corner-shape: superellipse(1.585); }
  :root .canvas__body { border-radius: 0 0 25px 25px; corner-shape: superellipse(1.585); }
  :root .icard, :root .ba__win, :root .dh__app, :root .cohort-strip, :root .md-how__frame,
  :root .md__b, :root .ug-five > div, :root .abt__photo figcaption { border-radius: 20px; corner-shape: superellipse(1.585); }
  :root .stats--band .stat-card, :root .np__card, :root .layer, :root .md__c, :root .ug-tl__card,
  :root .vct-do__steps, :root .vct-cl li { border-radius: 22px; corner-shape: superellipse(1.585); }
  :root .faq__item, :root .node, :root .scene, :root .np-disclaimer,
  :root #hoc-phi .tp__addon { border-radius: 17px; corner-shape: superellipse(1.585); }
  :root .dcard__mock, :root .dcard__mock .mk { border-radius: 18px; corner-shape: superellipse(1.585); }
  :root .vct-evo__card, :root .vct-info__card { border-radius: 31px; corner-shape: superellipse(1.585); }
  :root .vct-do__card, :root .abt__photo, :root .ph { border-radius: 34px; corner-shape: superellipse(1.585); }
  :root .vct-fd__photo img { border-radius: 39px; corner-shape: superellipse(1.585); }
  :root .vct-fd__photo::before { border-radius: 42px; corner-shape: superellipse(1.585); }
  :root .closing { border-radius: 39px; corner-shape: superellipse(1.585); }
  @media (max-width: 960px) {
    :root .closing { border-radius: 31px; }
  }
  @media (max-width: 560px) {
    :root .vct-cl li { border-radius: 17px; }
  }
  /* ô biểu tượng nhỏ: trọn hình superellipse */
  :root .ctx__ico, :root .fi, :root .dcard__title .fi, :root .dg__grid.is-solo .dcard__title .fi, :root .dcard--more__ico, :root .md__ico, :root .np__ico,
  :root .vct-contact__ico, :root .vct-do__ico, :root .vct-evo__ico { border-radius: 50%; corner-shape: superellipse(1.585); }
}

/* Vòng 111 — form liên hệ chưa có máy chủ nhận: sau khi bấm Gửi, khách chọn gửi qua email
   (thư soạn sẵn) hoặc Zalo (chép sẵn nội dung) thay cho thông báo "đã ghi nhận" giả. */
.modal-form .form__status.form__status--choose[data-visible="true"] {
  display: grid; gap: 10px; align-items: start; text-align: left;
  padding: 14px 16px; border-radius: 14px;
  background: #eef4ff; border: 1px solid #bfdbfe; color: #0b1633;
}
.form__status--choose .form__status-title { font-weight: 600; font-size: 0.93rem; line-height: 1.45; }
.form__status--choose .form__status-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.form__status--choose .form__status-btn { padding: 10px 16px; font-size: 0.92rem; min-height: 42px; }
.form__status--choose .form__status-btn.btn--ghost { background: #ffffff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.form__status--choose .form__status-note { font-size: 0.85rem; color: #15803d; min-height: 1em; }
.form__status--choose .form__status-note:empty { display: none; }