/* ==========================================================================
   BAMFLOW — Stylesheet
   Ngôn ngữ thị giác: precision engineering.
   Ba nguyên tắc chi phối toàn bộ file:
     1. Phân lớp bằng hairline 1px và bậc nền — không dùng bóng toả sáng.
     2. Hình học sắc cạnh (≤6px) — không có viên thuốc, không có bo lớn.
     3. Accent amber chỉ xuất hiện ở trạng thái tương tác, mục đang hoạt động
        và dữ liệu cần nhấn. Phần còn lại giữ đơn sắc.

   Mục lục
   01. Reset & base
   02. Nền blueprint
   03. Typography & tiện ích
   04. Layout, section-index, panel
   05. Nút
   06. Header + điều hướng
   07. Hero căn giữa
   08. Spec bar (chỉ số)
   09. Bối cảnh
   10. Dịch vụ
   11. Ma trận so sánh
   12. Quy trình
   13. Vì sao BAMFLOW
   14. Liên hệ / form
   15. Footer
   16. Reveal & prefers-reduced-motion
   ========================================================================== */

/* ---------- 01. Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  /* Thanh nav nổi nên vùng chừa phải cộng cả khoảng hở phía trên nó */
  scroll-padding-top: calc(var(--header-h) + var(--header-offset) + var(--space-6));
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  /* Không chừa chỗ cho thanh nav ở đây: hero phải bắt đầu từ đúng đỉnh trang
     thì vòm sáng mới đổ được từ trên xuống, xuyên qua sau thanh nav. Phần chừa
     nằm trong padding-top của .hero. */
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

/* Focus-visible bắt buộc hiển thị — không được ẩn */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-xs);
}

::selection {
  background: var(--accent);
  color: var(--text-on-accent);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--t-normal) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 02. Nền blueprint ----------
   Bốn lớp tĩnh: lưới kỹ thuật, cột dọc trùng với container, một vệt sáng
   amber cực nhạt, và film grain. Không có gì chuyển động ngoài vệt sáng
   dịch rất chậm — đối lập có chủ ý với nền aurora cuộn liên tục. */
.bp {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  /* Bắt buộc: .bp__grain trải rộng inset:-50% và .bp__wash tràn mép phải.
     Không cắt ở đây là có ngày sinh thanh cuộn ngang. */
  overflow: hidden;
  background: var(--bg-base);
}

.bp__mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--stroke-blueprint) 1px, transparent 0),
    linear-gradient(90deg, var(--stroke-blueprint) 1px, transparent 0);
  background-size: 40px 40px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
}

/* Cột dọc — khớp đúng mép container, tạo cảm giác trang được "đặt lên khung" */
.bp__rules {
  display: none;
}

.bp__rules::before,
.bp__rules::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--stroke-faint);
}

.bp__rules::before {
  left: 33.333%;
}

.bp__rules::after {
  left: 66.666%;
}

@media (max-width: 900px) {
  .bp__rules {
    display: none;
  }
}

.bp__wash {
  position: absolute;
  top: -20vh;
  right: -10vw;
  width: 70vw;
  height: 70vh;
  background: radial-gradient(closest-side, var(--accent-softer), transparent 70%);
  filter: blur(40px);
  /* Trước đây vệt sáng này trôi qua lại. Nền toàn trang mà cứ động thì mọi
     chuyển động có chủ đích khác đều bị loãng — để yên. */
}

/* Film grain — bù lại độ "phẳng" của bảng màu graphite, cho cảm giác vật liệu */
.bp__grain {
  position: absolute;
  inset: -50%;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- 03. Typography & tiện ích ---------- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--text-primary);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-display);
  font-weight: 800;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-heading);
}

h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.28;
}

p {
  text-wrap: pretty;
}

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

/* Điểm nhấn ô nền màu da cam Hổ phách (Signal Orange Block Highlight) — sắc nét, tươi sáng trên cả nền tối lẫn nền sáng */
mark,
.mark {
  display: inline;
  padding: 0.06em 0.28em;
  margin-inline: 0.05em;
  border-radius: 2px;
  background: var(--accent);
  color: #08090b !important;
  font-weight: 700;
  box-shadow: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

[data-theme="light"] mark,
[data-theme="light"] .mark {
  background: #ff7700;
  color: #0d1117 !important;
}

.lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

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

/* ---------- 04. Layout, section-index, panel ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main {
  position: relative;
}

.section {
  position: relative;
  padding-block: var(--space-24);
}

.section--tight {
  padding-block: var(--space-20);
}

.section+.section {
  border-top: 1px solid var(--stroke-faint);
}

/* Đầu section kiểu tài liệu kỹ thuật: chỉ số + tên, gạch ngang hết chiều rộng */
.section-index {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--stroke);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.section-index__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xs);
  background: var(--accent-softer);
  color: var(--accent);
  font-weight: 600;
}

.section-index__name {
  color: var(--text-primary);
  font-weight: 600;
}

.section-index__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-line), var(--stroke-faint) 60%, transparent);
}

.section-index__meta {
  color: var(--text-muted);
  opacity: 0.85;
}

.section__head {
  max-width: 760px;
  margin-bottom: var(--space-16);
}

.section__head h2+.lead {
  margin-top: var(--space-5);
}

.section__head--wide {
  max-width: 900px;
}

/* Panel phẳng + viền hairline chì */
.panel {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--line-top), 0 12px 32px -16px rgba(0, 0, 0, 0.8);
  transition: border-color var(--t-normal) var(--ease), box-shadow var(--t-normal) var(--ease);
}

/* Vạch góc kiểu bản vẽ kỹ thuật */
.panel--ticked::before,
.panel--ticked::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--stroke-strong);
  transition: border-color var(--t-normal) var(--ease);
}

.panel--ticked::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.panel--ticked::after {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}

.panel--interactive {
  overflow: hidden;
  background-image: radial-gradient(380px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
      var(--accent-soft), transparent 68%);
  transition: background-color var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease);
}

.panel--interactive>.panel__edge {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-slow) var(--ease-out);
}

.panel--interactive:hover,
.panel--interactive:focus-within {
  background-color: var(--bg-panel-hover);
  border-color: var(--stroke-strong);
}

.panel--interactive:hover>.panel__edge,
.panel--interactive:focus-within>.panel__edge {
  transform: scaleY(1);
}

.panel--interactive:hover.panel--ticked::before,
.panel--interactive:hover.panel--ticked::after {
  border-color: var(--accent-line);
}

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

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

/* ---------- 05. Nút ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
}

.btn--primary:hover {
  background: var(--accent-hover);
}

.btn--primary:active {
  background: var(--accent-dim);
}

.btn--ghost {
  background: transparent;
  border-color: var(--stroke-strong);
  color: var(--text-primary);
}

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

.btn--ghost:active {
  background: var(--bg-inset);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn.is-loading {
  pointer-events: none;
  opacity: 0.7;
}

.btn.is-loading::after {
  content: "";
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- 06. Header nổi + điều hướng ----------
   Thanh tách rời khỏi mép trên, rơi xuống khi tải trang rồi nảy nhẹ một nhịp.
   Khác thanh viên thuốc phát sáng của hệ đối thủ ở chỗ: góc sắc, viền hairline,
   không glow — hình dạng vẫn thuộc về hệ này. */
.header {
  position: fixed;
  top: var(--header-offset);
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
}

.header__inner {
  /* Mốc neo cho ngăn kéo mobile. Bắt buộc: .header chạy animation có transform,
     nên nó đã là containing block của mọi con position:fixed — neo tương đối
     vào chính thanh nav là cách duy nhất giữ ngăn kéo thẳng hàng. */
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-inline: var(--space-5);
  background: var(--bar-bg);
  border: 1px solid rgba(120, 100, 200, 0.18);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel), var(--line-top), 0 0 0 1px rgba(100, 80, 180, 0.06);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: background var(--t-normal) var(--ease), border-color var(--t-normal) var(--ease);
}

/* Cuộn xuống thì thanh đặc lại, viền rõ hơn — vẫn giữ nguyên hình dạng */
.header.is-stuck .header__inner {
  background: var(--bar-bg-stuck);
  border-color: var(--stroke-strong);
}

/* Thả rơi: rơi có gia tốc, chạm đáy, lún một nhịp rồi đứng yên.
   Trước đây nảy ba nhịp — đọc ra là vui nhộn chứ không phải chắc chắn, nên rút
   còn một nhịp lún. Vẫn cảm nhận được sức nặng, bớt ồn. */
.js .header {
  animation: header-drop 480ms both;
}

@keyframes header-drop {
  0% {
    transform: translateY(calc(-100% - var(--header-offset) - 32px));
    opacity: 0;
    animation-timing-function: cubic-bezier(0.5, 0.05, 0.7, 0.2);
  }

  62% {
    transform: translateY(6px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  100% {
    transform: translateY(0);
  }
}

/* Nội dung thanh nav hiện thành một khối duy nhất sau khi thanh hạ xong.
   Bỏ kiểu từng link rơi lệch pha — sáu thứ nhảy liên tiếp là nguồn rối chính. */
.js .header__inner>* {
  animation: header-item 240ms var(--ease-out) both;
  animation-delay: 360ms;
}

@keyframes header-item {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes header-item {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.logo__mark {
  width: 26px;
  height: 26px;
  flex: none;
}

.logo__dot {
  fill: var(--accent);
}

/* theo chủ đề, không ghi cứng trong SVG */
.logo__text span {
  color: var(--text-muted);
  font-weight: 500;
}

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

.nav__link {
  position: relative;
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease);
}

.nav__link:hover {
  color: var(--text-primary);
}

.nav__link[aria-current="true"] {
  color: var(--text-primary);
}

.nav__link[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: var(--space-3);
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  margin-left: -9px;
  background: var(--accent);
}

.nav__link[aria-current="true"] {
  padding-left: var(--space-4);
}

/* Chip credential trên thanh nav — chỗ đặt bằng chứng mạnh nhất */
.cred-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 10px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--accent-softer);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.cred-chip i {
  width: 4px;
  height: 4px;
  flex: none;
  background: var(--accent);
  font-style: normal;
}

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

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 9px;
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.lang-toggle:hover {
  border-color: var(--stroke-strong);
  color: var(--text-primary);
}

.lang-toggle b {
  color: var(--accent);
  font-weight: 500;
}

/* Nút chuyển sáng/tối — hiện đúng một biểu tượng theo chủ đề đang bật */
.theme-toggle {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-line);
}

.theme-toggle svg {
  width: 15px;
  height: 15px;
}

.theme-toggle__moon {
  display: none;
}

[data-theme="light"] .theme-toggle__sun {
  display: none;
}

[data-theme="light"] .theme-toggle__moon {
  display: block;
}

.nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}

.nav-toggle:hover {
  border-color: var(--accent-line);
}

.nav-toggle svg {
  width: 17px;
  height: 17px;
  color: var(--text-primary);
}

.nav-toggle__close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

@media (max-width: 1140px) {
  .nav-toggle {
    display: inline-flex;
  }

  .header__actions>.btn,
  .header__inner>.cred-chip {
    display: none;
  }

  /* Ngăn kéo là một tấm nổi riêng, thả xuống ngay dưới thanh nav và khớp
     đúng hai mép của thanh */
  .nav {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    right: 0;
    z-index: var(--z-drawer);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-3) var(--space-5) var(--space-5);
    background: var(--drawer-bg);
    border: 1px solid var(--stroke-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lift);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform-origin: top center;
    transform: translateY(-10px) scaleY(0.96);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--t-normal) var(--ease),
      transform var(--t-normal) var(--ease-out),
      visibility var(--t-normal);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scaleY(1);
  }

  /* Trong ngăn kéo, JS không điều khiển stagger — bỏ animation của desktop */
  .js .nav>* {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .nav__link {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--stroke-faint);
    border-radius: 0;
    font-size: var(--text-base);
  }

  .nav__link[aria-current="true"] {
    padding-left: var(--space-4);
  }

  .nav__cta {
    display: inline-flex;
    margin-top: var(--space-5);
  }
}

@media (min-width: 1141px) {
  .nav__cta {
    display: none;
  }
}

/* ---------- 07. Hero căn giữa ---------- */
.hero {
  position: relative;
  /* Tự chừa chỗ cho thanh nav nổi — xem chú thích ở body */
  padding-top: calc(var(--header-h) + var(--header-offset) + var(--space-16));
  padding-bottom: var(--space-16);
  overflow: hidden;
}

/* --- Lớp hiệu ứng nền ---
   Năm lớp chồng nhau, tất cả đều pointer-events:none để không chắn CTA:
     1. .hero__dome  — vòm sáng ở đỉnh, nguồn sáng chính, tĩnh
     2. .hero__stars — ba tầng sao lấp lánh lệch nhịp
     3. .hero__aura  — hai quầng sáng trôi chậm
     4. .hero__lit   — lưới blueprint sáng lên quanh con trỏ
     5. .hero__spot  — quầng amber bám theo con trỏ
   Hai lớp cuối đọc --mx/--my do main.js ghi vào. Chưa rê chuột thì toạ độ nằm
   ngoài khung nên không thấy gì. */
.hero__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Vòm sáng ở đỉnh — nguồn sáng chính, cho cảm giác "chân trời tương lai".
   Lõi để trắng ngả amber rồi loang ra thành amber thuần, nên nó đọc ra là ánh
   sáng chứ không phải một vệt màu cam. Tĩnh hoàn toàn: đây là bối cảnh, phần
   chuyển động đã có aura và sao lo. */
.hero__dome {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1900px, 160%);
  height: min(1100px, 125%);
  /* Tâm quầng nằm ngay trên mép trên, nên chỉ nửa dưới lọt vào khung —
     ánh sáng đọc ra là đổ từ đỉnh trang xuống, xuyên qua sau thanh nav.
     Tăng kích thước vòm và giảm blur để ánh sáng mạnh hơn, rõ hơn. */
  transform: translate(-50%, -44%);
  background:
    radial-gradient(ellipse 42% 46% at 50% 48%, var(--hero-dome-core), transparent 58%),
    radial-gradient(ellipse 65% 60% at 50% 48%, var(--hero-dome-mid), transparent 66%);
  filter: blur(22px);
}

/* Trường sao: ba tầng, mỗi tầng là một tập chấm tròn vẽ bằng radial-gradient
   nên không tốn thêm phần tử DOM nào. Ba tầng lấp lánh lệch nhịp (3.5s / 5.2s
   / 7.1s) — mắt đọc ra là từng ngôi sao nhấp nháy riêng, không phải cả màn
   hình cùng sáng tối. */
.hero__stars,
.hero__stars::before,
.hero__stars::after {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
}

.hero__stars {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, var(--hero-star) 50%, transparent),
    radial-gradient(1.4px 1.4px at 62% 12%, var(--hero-star) 50%, transparent),
    radial-gradient(1.8px 1.8px at 84% 32%, var(--hero-star) 50%, transparent),
    radial-gradient(1.3px 1.3px at 27% 62%, var(--hero-star) 50%, transparent),
    radial-gradient(1.5px 1.5px at 91% 74%, var(--hero-star) 50%, transparent),
    radial-gradient(1.4px 1.4px at 44% 86%, var(--hero-star) 50%, transparent);
  background-size: 340px 300px;
  transform-origin: 50% 0%;
  animation:
    twinkle-a 2.2s ease-in-out infinite alternate,
    stardust-fall-a 22s linear infinite;
}

.hero__stars::before {
  content: "";
  background-image:
    radial-gradient(1.2px 1.2px at 33% 24%, var(--hero-star-dim) 50%, transparent),
    radial-gradient(1px 1px at 71% 48%, var(--hero-star-dim) 50%, transparent),
    radial-gradient(1.3px 1.3px at 8% 78%, var(--hero-star-dim) 50%, transparent),
    radial-gradient(1.1px 1.1px at 55% 68%, var(--hero-star-dim) 50%, transparent),
    radial-gradient(1.2px 1.2px at 96% 16%, var(--hero-star-dim) 50%, transparent);
  background-size: 260px 230px;
  transform-origin: 50% 0%;
  animation:
    twinkle-b 3.2s ease-in-out infinite alternate,
    stardust-fall-b 28s linear infinite;
  animation-delay: -9s;
}

/* Tầng chấm sao cố định đứng yên, lâu lâu nhấp nháy lấp lánh */
.hero__stars::after {
  content: "";
  background-image:
    radial-gradient(2.2px 2.2px at 22% 40%, var(--hero-star-warm) 50%, transparent),
    radial-gradient(2px 2px at 78% 66%, var(--hero-star-warm) 50%, transparent),
    radial-gradient(2.4px 2.4px at 52% 16%, var(--hero-star-warm) 50%, transparent),
    radial-gradient(1.9px 1.9px at 88% 54%, var(--hero-star-warm) 50%, transparent),
    radial-gradient(2.1px 2.1px at 15% 72%, var(--hero-star-warm) 50%, transparent);
  background-size: 520px 460px;
  animation: twinkle-c 4.5s ease-in-out infinite alternate;
}

/* Sao mờ dần về phía chân hero */
.hero__stars {
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.65) 65%, transparent 100%);
}

@keyframes twinkle-a {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 0.95;
  }
}

@keyframes twinkle-b {
  from {
    opacity: 0.85;
  }
  to {
    opacity: 0.2;
  }
}

@keyframes twinkle-c {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}

/* Quầng hạt sao tuôn chảy từ vòm đèn ở đỉnh xuống */
@keyframes stardust-fall-a {
  0% {
    transform: scale(0.6) translateY(0);
    background-position: 0 0;
  }
  100% {
    transform: scale(1.35) translateY(240px);
    background-position: -170px 480px;
  }
}

@keyframes stardust-fall-b {
  0% {
    transform: scale(0.5) translateY(0);
    background-position: 0 0;
  }
  100% {
    transform: scale(1.4) translateY(280px);
    background-position: 130px 480px;
  }
}



/* Một quầng sáng lạnh ở góc dưới phải, trôi và phồng rất chậm — chỉ để tạo
   chiều sâu ở nửa dưới, nơi vòm sáng đỉnh đã tắt.
   Quầng ấm ở góc trên trái đã bỏ: vòm sáng ở đỉnh giờ là nguồn sáng duy nhất
   từ trên xuống, thêm một nguồn nữa ở góc trái làm hướng sáng mâu thuẫn, nhìn
   như hai đèn đá nhau. */
.hero__aura {
  position: absolute;
  inset: -15%;
}

.hero__aura::after {
  content: "";
  position: absolute;
  width: max(460px, 44vw);
  height: max(460px, 44vw);
  right: -10%;
  bottom: -16%;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
  background: radial-gradient(closest-side, var(--hero-aura-cool), transparent 70%);
  animation: aura-b 31s ease-in-out infinite alternate;
}

@keyframes aura-b {
  from {
    transform: translate3d(4%, 4%, 0) scale(1.12);
  }

  to {
    transform: translate3d(-14%, -10%, 0) scale(0.92);
  }
}

/* --- Quầng sáng trôi (orbs) — 3 quả cầu mờ trôi lệch nhịp, tạo chiều sâu
   và không khí công nghệ. Dùng ::before và ::after + bản thân phần tử = 3 orb
   mà không cần thêm DOM. --- */
.hero__orbs {
  position: absolute;
  inset: 0;
}

.hero__orbs,
.hero__orbs::before,
.hero__orbs::after {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
  will-change: transform;
}

.hero__orbs {
  width: max(220px, 18vw);
  height: max(220px, 18vw);
  top: 12%;
  left: 18%;
  background: radial-gradient(closest-side, rgba(120, 100, 255, 0.25), transparent 70%);
  animation: orb-a 22s ease-in-out infinite alternate;
}

.hero__orbs::before {
  content: "";
  width: max(180px, 14vw);
  height: max(180px, 14vw);
  top: 30%;
  right: -60%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.18), transparent 70%);
  animation: orb-b 28s ease-in-out infinite alternate;
}

.hero__orbs::after {
  content: "";
  width: max(140px, 12vw);
  height: max(140px, 12vw);
  bottom: 10%;
  left: 40%;
  background: radial-gradient(closest-side, rgba(80, 160, 255, 0.2), transparent 70%);
  animation: orb-c 18s ease-in-out infinite alternate;
}

@keyframes orb-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8vw, 5vh, 0) scale(1.3); }
}
@keyframes orb-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-6vw, -8vh, 0) scale(0.85); }
}
@keyframes orb-c {
  from { transform: translate3d(0, 0, 0) scale(0.9); }
  to   { transform: translate3d(-5vw, -6vh, 0) scale(1.2); }
}

/* --- Pulse — vòng tròn đồng tâm lan toả từ giữa hero, kiểu radar/sonar.
   Hai vòng lệch pha 4s để luôn có ít nhất một vòng đang lan. --- */
.hero__pulse {
  position: absolute;
  top: 38%;
  left: 50%;
  width: 0;
  height: 0;
}

.hero__pulse::before,
.hero__pulse::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  margin: -300px 0 0 -300px;
  border-radius: 50%;
  border: 1px solid rgba(120, 100, 255, 0.12);
  opacity: 0;
  animation: pulse-ring 8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.hero__pulse::after {
  animation-delay: 4s;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.15);
    opacity: 0.5;
  }
  80% {
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* --- Scan lines — vạch ngang siêu nhạt kiểu CRT/HUD, cho cảm giác "digital".
   Chỉ hiện ở dark mode; light mode tắt. --- */
.hero__scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.015) 3px,
    rgba(255, 255, 255, 0.015) 4px
  );
  pointer-events: none;
}

[data-theme="light"] .hero__scanlines {
  display: none;
}



/* --- Glow line — vạch ngang phát sáng ở đáy hero, phân cách hero với phần
   nội dung bên dưới. Một tia sáng chạy qua lại liên tục. --- */
.hero__glowline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--stroke-faint) 15%,
    var(--accent-line) 50%,
    var(--stroke-faint) 85%,
    transparent 100%
  );
  z-index: 1;
}

.hero__glowline::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  filter: blur(1px);
  animation: glowline-sweep 4s var(--ease) infinite;
}

@keyframes glowline-sweep {
  0% { left: -120px; }
  100% { left: calc(100% + 120px); }
}

/* Sơ đồ tuyến đã bỏ hẳn — cả nét vẽ lẫn gói dữ liệu chạy dọc nó. */

/* Spotlight layer — phủ toàn bộ trang, không bị cắt bởi section.
   Dùng position:fixed + pointer-events:none để luôn nằm đúng viewport và
   không chặn tương tác. */
.spotlight-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.spotlight-layer__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--accent-line) 1px, transparent 0),
    linear-gradient(90deg, var(--accent-line) 1px, transparent 0);
  background-size: 40px 40px;
  opacity: 0.55;
  mask-image: radial-gradient(220px circle at var(--mx, -999px) var(--my, -999px), #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(220px circle at var(--mx, -999px) var(--my, -999px), #000 0%, transparent 70%);
}

.spotlight-layer__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), var(--accent-soft), transparent 72%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}

.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 5px 12px 5px 9px;
  border: 1px solid rgba(120, 100, 255, 0.25);
  border-radius: var(--r-sm);
  background: rgba(120, 100, 255, 0.06);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  box-shadow: 0 0 12px rgba(120, 100, 255, 0.08);
}

.hero__tag i {
  width: 5px;
  height: 5px;
  background: var(--accent);
  font-style: normal;
  flex: none;
}

/* Tiêu đề + nhãn dán nghiêng ở góc */
.hero__headline {
  position: relative;
  display: inline-block;
}

.hero__title {
  max-width: 18ch;
  margin-inline: auto;
}

.hero__accent {
  background: linear-gradient(100deg, var(--accent) 10%, var(--accent-hover) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.35));
}

.hero__sticker {
  position: absolute;
  top: -14px;
  right: -68px;
  padding: 5px 12px;
  border-radius: var(--r-round);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  transform: rotate(-7deg);
  box-shadow: var(--shadow-panel);
}

/* Dòng AI Agent — to hơn dòng nền tảng vì đây là điểm bán hàng chính */
.hero__ai-feature {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--tracking-heading);
  color: var(--text-primary);
}

/* Đỉnh cao AI Agent: dải màu chuyển động liên tục (Cyan -> Violet -> Pink -> Amber) + nét cong phát sáng */
.hero__ai-gradient {
  position: relative;
  display: inline-block;
  font-weight: 800;
  padding-inline: 4px;
  padding-bottom: 7px;
  background: linear-gradient(
    90deg,
    #38bdf8 0%,
    #818cf8 20%,
    #c084fc 40%,
    #f472b6 60%,
    #ff6a1f 80%,
    #38bdf8 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ai-glow-flow 4s linear infinite;
  filter: drop-shadow(0 0 14px rgba(192, 132, 252, 0.45));
}

/* Nét gạch cong hình võng (Arc curve) phát sáng chuyển màu chuyển động bên dưới AI Agent */
.hero__ai-gradient::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: -3px;
  right: -3px;
  height: 14px;
  background: linear-gradient(
    90deg,
    #ff6a1f 0%,
    #f472b6 25%,
    #c084fc 50%,
    #38bdf8 75%,
    #ff6a1f 100%
  );
  background-size: 200% auto;
  animation: ai-glow-flow 4s linear infinite reverse;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M 2 3 Q 50 12 98 3' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M 2 3 Q 50 12 98 3' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  filter: drop-shadow(0 2px 8px rgba(244, 114, 182, 0.75));
}

@keyframes ai-glow-flow {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.hero__sub {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 58ch;
}

.hero__sub strong {
  color: var(--text-primary);
}

/* Dòng gõ máy — nêu ví dụ cụ thể, thay cho một câu quảng cáo chung chung */
.hero__type {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  min-height: 1.6em;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
}

.hero__type b {
  color: var(--text-secondary);
  font-weight: 400;
}

.hero__type::after {
  content: "▍";
  color: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {

  0%,
  60% {
    opacity: 1;
  }

  61%,
  100% {
    opacity: 0.25;
  }
}

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

/* Chỉ dấu cuộn */
.scroll-cue {
  display: inline-grid;
  justify-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease);
}

.scroll-cue:hover {
  color: var(--accent);
}

.scroll-cue span {
  position: relative;
  width: 20px;
  height: 32px;
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-round);
}

.scroll-cue span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 6px;
  margin-left: -1.5px;
  border-radius: var(--r-round);
  background: var(--accent);
  animation: scroll-dot 1.9s var(--ease) infinite;
}

@keyframes scroll-dot {

  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }

  55% {
    transform: translateY(11px);
    opacity: 0.25;
  }
}

/* Dải bằng chứng — thanh mảnh, mono, đặt ngay dưới CTA. Đây là thứ nâng độ
   tin cậy của hero nhanh nhất, nên nó phải nằm trên màn hình đầu tiên. */
.proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--stroke-faint);
  max-width: 720px;
}

.proof li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-muted);
}

.proof li::before {
  content: "";
  width: 3px;
  height: 3px;
  flex: none;
  background: var(--accent);
}

.proof b {
  color: var(--text-secondary);
  font-weight: 400;
}

@media (max-width: 760px) {
  .hero__sticker {
    top: -30px;
    right: auto;
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
  }
}

@media (max-width: 560px) {

  /* Chỉ đổi padding-bottom. Dùng shorthand padding-block ở đây sẽ xoá luôn
     phần chừa chỗ cho thanh nav nổi ở padding-top và nav sẽ đè lên nội dung. */
  .hero {
    padding-bottom: var(--space-12);
  }

  .hero__title {
    max-width: none;
  }

  .hero__actions {
    width: 100%;
  }

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

/* ---------- 08. Spec bar ---------- */
.specbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: var(--space-20);
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
}

/* column-reverse: dt đứng trước dd trong DOM cho đúng chuẩn <dl>,
   nhưng hiển thị con số lên trên nhãn. */
.spec {
  padding: var(--space-8) var(--space-6) var(--space-8) 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--space-2);
}

.spec+.spec {
  padding-left: var(--space-6);
  border-left: 1px solid var(--stroke-faint);
}

.spec__value {
  font-family: var(--font-display);
  font-size: var(--text-numeric);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

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

.spec__label {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-muted);
}

@media (max-width: 620px) {

  .spec,
  .spec+.spec {
    padding: var(--space-5) 0;
    border-left: 0;
  }

  .spec+.spec {
    border-top: 1px solid var(--stroke-faint);
  }
}

/* ---------- 09. Bối cảnh ---------- */
.threat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

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

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

.threat__idx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: var(--r-xs);
  background: rgba(248, 113, 113, 0.08);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--err);
  font-weight: 600;
}

.threat__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary);
}

.threat__list {
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-md);
  line-height: 1.5;
}

.threat__list li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: var(--space-3);
}

.threat__list li::before {
  content: "";
  width: 8px;
  height: 1px;
  margin-top: 11px;
  background: var(--err-line);
}

.approach {
  margin-top: var(--space-4);
  padding: var(--space-10);
  border-color: var(--stroke-strong);
}

.approach__head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.approach__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6) var(--space-8);
}

.approach__list li {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--stroke);
  font-size: var(--text-md);
  line-height: 1.55;
}

.approach__list b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
}

/* --- High-Tech 4-Step Handover Pipeline inside Approach Block --- */
.approach__pipeline {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  border: 1px solid var(--stroke-strong);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .approach__pipeline {
  background: #f8fafc;
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.pipeline__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pipeline__title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.pipeline__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.pipeline__step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--r-sm);
  background: var(--bg-panel);
  border: 1px solid var(--stroke-faint);
  transition: all var(--t-fast) var(--ease);
}

[data-theme="light"] .pipeline__step {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.pipeline__step:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.06);
  transform: translateY(-2px);
}

.pipeline__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--accent);
  padding: 2px 8px;
  border-radius: var(--r-xs);
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  flex-shrink: 0;
}

.pipeline__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pipeline__info strong {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

[data-theme="light"] .pipeline__info strong {
  color: #0f172a;
}

.pipeline__info small {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

[data-theme="light"] .pipeline__info small {
  color: #475569;
}

.callout {
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent);
  background: var(--accent-softer);
  font-size: var(--text-md);
  color: var(--text-primary);
}

/* ---------- 10. Dịch vụ theo hai nhánh nền tảng ---------- */
.tracks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.track {
  padding: var(--space-8);
  display: grid;
  gap: var(--space-6);
}

.track__head {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--stroke);
}

.track__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
  padding: 4px 9px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xs);
  background: var(--accent-softer);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.track__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  color: var(--text-primary);
  line-height: 1.1;
}

.track__for {
  font-size: var(--text-md);
  line-height: 1.55;
}

.track__list {
  display: grid;
  gap: var(--space-5);
}

.track__svc {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-5);
  border-left: 2px solid var(--stroke);
  transition: border-color var(--t-normal) var(--ease);
}

.track__svc:hover {
  border-left-color: var(--accent);
}

.track__svc h3 {
  font-size: var(--text-lg);
}

.track__svc p {
  font-size: var(--text-md);
  line-height: 1.6;
}

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

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

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag {
  padding: 3px 8px;
  border: 1px solid var(--stroke);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
}

.check-list {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-md);
}

.check-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--space-3);
  line-height: 1.5;
}

.check-list li::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--accent);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .service {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-4) var(--space-5);
  }

  .service__body {
    grid-column: 2;
  }
}

/* ---------- 10b. AI Agent Roles (Vai trò 01, 02, 03) ---------- */
.agents {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.agent {
  padding: var(--space-6);
  display: grid;
  gap: var(--space-3);
  align-content: start;
  background: var(--bg-panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  transition: all var(--t-fast) var(--ease);
}

.agent:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.agent__role {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
  padding: 4px 9px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xs);
  background: var(--accent-softer);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.agent h3 {
  font-size: var(--text-lg);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
}

.agent p {
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: 1.6;
}

.agent__does {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-md);
}

.agent__does li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--space-2);
  line-height: 1.5;
  color: var(--text-muted);
}

.agent__does li::before {
  content: "→";
  font-family: var(--font-mono);
  color: var(--accent);
  line-height: 1.5;
}

/* Light Theme Overrides for .agent */
[data-theme="light"] .agent {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .agent h3 {
  color: #0f172a;
}

[data-theme="light"] .agent p,
[data-theme="light"] .agent__does li {
  color: #475569;
}

@media (max-width: 900px) {
  .agents {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ---------- 10c. AI Agent Organic Curved Branching Diagram (Staggered - Continuous Flow) ---------- */
.ai-branching-panel {
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
  padding: 20px 20px;
  overflow: hidden;
  position: relative;
}

.ai-branching-container {
  position: relative;
  width: 100%;
  max-width: 960px;
  min-height: 280px;
  margin: 0 auto;
}

/* SVG overlay lines */
.ai-branching-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Base Branch Lines */
.branch-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--t-fast) var(--ease);
}

.branch-line--red-main,
.branch-line--red {
  stroke: #ff5252;
  stroke-width: 2px;
  opacity: .5;
}

.branch-line--blue-main,
.branch-line--blue {
  stroke: #38bdf8;
  stroke-width: 2px;
  opacity: .5;
}

/* Continuous Moving Energy Dots (Stroke flow) */
.branch-pulse {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3.5px;
  stroke-dasharray: 6 36;
  pointer-events: none;
}

.branch-pulse--red-main,
.branch-pulse--red {
  stroke: #ff5252;
  filter: drop-shadow(0 0 6px #ff5252);
  animation: pulse-flow-red 2.2s linear infinite;
}

.branch-pulse--blue-main,
.branch-pulse--blue {
  stroke: #38bdf8;
  filter: drop-shadow(0 0 6px #38bdf8);
  animation: pulse-flow-blue 2.8s linear infinite;
}

@keyframes pulse-flow-red {
  0%   { stroke-dashoffset: 84; }
  100% { stroke-dashoffset: 0; }
}

@keyframes pulse-flow-blue {
  0%   { stroke-dashoffset: 120; }
  100% { stroke-dashoffset: 0; }
}

/* Split Nodes & End Dots Pulsing */
.branch-node--red {
  fill: #ff5252;
  animation: node-pulse-red 2.2s ease-in-out infinite;
}

.branch-node--blue {
  fill: #38bdf8;
  animation: node-pulse-blue 2.8s ease-in-out infinite;
}

@keyframes node-pulse-red {
  0%, 100% { r: 4px; filter: drop-shadow(0 0 4px rgba(255,82,82,.6)); }
  50%      { r: 6px; filter: drop-shadow(0 0 10px rgba(255,82,82,1)); }
}

@keyframes node-pulse-blue {
  0%, 100% { r: 4px; filter: drop-shadow(0 0 4px rgba(56,189,248,.6)); }
  50%      { r: 6px; filter: drop-shadow(0 0 10px rgba(56,189,248,1)); }
}

.branch-dot--red {
  fill: #ff5252;
  filter: drop-shadow(0 0 5px rgba(255,82,82,.8));
}

.branch-dot--blue {
  fill: #38bdf8;
  filter: drop-shadow(0 0 5px rgba(56,189,248,.8));
}

/* Root Node (Circle on Left: x=5..85) */
.ai-branching-root {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 80px;
}

.ai-branching-root__ring {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 2px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(255,106,31,.25), inset 0 0 12px rgba(255,106,31,.1);
}

/* Continuous Expanding Pulse Ring from AI Agent Frame */
.ai-branching-root__ring::before,
.ai-branching-root__ring::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: root-ring-pulse 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.ai-branching-root__ring::after {
  animation-delay: 1.5s;
}

@keyframes root-ring-pulse {
  0% {
    transform: scale(0.85);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

.ai-branching-root__title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

/* Branch Tag Badges (Nocode & Lowcode) */
.ai-branching-tag {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
  margin-bottom: 2px;
}

.ai-branching-tag--red {
  color: #ff5252;
  background: rgba(255, 82, 82, .1);
  border: 1px solid rgba(255, 82, 82, .25);
}

.ai-branching-tag--blue {
  color: #38bdf8;
  background: rgba(56, 189, 248, .1);
  border: 1px solid rgba(56, 189, 248, .25);
}

/* Column 1 (Middle: x=240..520, width: 280px) */
.ai-branching-col--1 {
  position: absolute;
  left: 240px;
  top: 0px;
  width: 280px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Column 2 (Right: x=640..920, width: 280px) */
.ai-branching-col--2 {
  position: absolute;
  left: 640px;
  top: 67px;
  width: 280px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Individual Compact Card */
.ai-bcard {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--bg-panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

/* Continuous Staggered Card Light-Up Flashes as Energy Arrives */
.ai-branching-col--1 .ai-bcard:nth-child(1) { animation: bcard-flash-red 3s ease-in-out 0.4s infinite; }
.ai-branching-col--1 .ai-bcard:nth-child(2) { animation: bcard-flash-red 3s ease-in-out 0.7s infinite; }
.ai-branching-col--1 .ai-bcard:nth-child(3) { animation: bcard-flash-red 3s ease-in-out 1.0s infinite; }
.ai-branching-col--1 .ai-bcard:nth-child(4) { animation: bcard-flash-red 3s ease-in-out 1.3s infinite; }

.ai-branching-col--2 .ai-bcard:nth-child(1) { animation: bcard-flash-blue 3.6s ease-in-out 1.0s infinite; }
.ai-branching-col--2 .ai-bcard:nth-child(2) { animation: bcard-flash-blue 3.6s ease-in-out 1.3s infinite; }
.ai-branching-col--2 .ai-bcard:nth-child(3) { animation: bcard-flash-blue 3.6s ease-in-out 1.6s infinite; }
.ai-branching-col--2 .ai-bcard:nth-child(4) { animation: bcard-flash-blue 3.6s ease-in-out 1.9s infinite; }

@keyframes bcard-flash-red {
  0%, 100% {
    border-color: var(--stroke);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    transform: translateX(0);
  }
  20%, 45% {
    border-color: #ff5252;
    box-shadow: 0 4px 16px rgba(255,82,82,.25);
    transform: translateX(4px);
  }
}

@keyframes bcard-flash-blue {
  0%, 100% {
    border-color: var(--stroke);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    transform: translateX(0);
  }
  20%, 45% {
    border-color: #38bdf8;
    box-shadow: 0 4px 16px rgba(56,189,248,.25);
    transform: translateX(4px);
  }
}

.ai-branching-root:hover .ai-branching-root__ring {
  transform: scale(1.2);
  border-color: var(--accent);
  box-shadow: 0 0 32px rgba(255,106,31,.6), inset 0 0 18px rgba(255,106,31,.25);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.ai-branching-col--1 .ai-bcard:hover {
  border-color: #ff5252 !important;
  transform: scale(1.2) translateX(8px) !important;
  box-shadow: 0 10px 28px rgba(255,82,82,.4) !important;
  z-index: 10;
}

.ai-branching-col--2 .ai-bcard:hover {
  border-color: #38bdf8 !important;
  transform: scale(1.2) translateX(8px) !important;
  box-shadow: 0 10px 28px rgba(56,189,248,.4) !important;
  z-index: 10;
}

.ai-bcard__icon {
  width: 26px;
  height: 26px;
  min-width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.ai-bcard__icon--blue   { background: rgba(96,165,250,.12);  color: #60a5fa; }
.ai-bcard__icon--green  { background: rgba(74,222,128,.12);  color: #4ade80; }
.ai-bcard__icon--yellow { background: rgba(250,204,21,.12);  color: #facc15; }
.ai-bcard__icon--gold   { background: rgba(245,158,11,.12);  color: #f59e0b; }
.ai-bcard__icon--red    { background: rgba(248,113,113,.12); color: #f87171; }
.ai-bcard__icon--teal   { background: rgba(45,212,191,.12);  color: #2dd4bf; }
.ai-bcard__icon--purple { background: rgba(168,85,247,.12);  color: #a855f7; }
.ai-bcard__icon--indigo { background: rgba(99,102,241,.12);  color: #6366f1; }

.ai-bcard__info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ai-bcard__info strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}

.ai-bcard__info span {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.25;
}

/* Light Theme Adaptations */
[data-theme="light"] .ai-bcard {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .ai-branching-root__ring {
  background: #ffffff;
  box-shadow: 0 0 14px rgba(255,106,31,.12);
}

[data-theme="light"] .ai-bcard__info strong { color: #0f172a; }
[data-theme="light"] .ai-bcard__info span   { color: #64748b; }

/* Responsive adjustments */
@media (max-width: 960px) {
  .ai-branching-container {
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .ai-branching-root,
  .ai-branching-col--1,
  .ai-branching-col--2 {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
  }
  .ai-branching-root {
    flex-direction: row;
    justify-content: center;
  }
  .ai-branching-svg {
    display: none;
  }
  .ai-bcard {
    animation: none !important;
  }
}

/* ---------- 10d. 3D AI Employees Carousel Showcase ---------- */
.ai-carousel-section {
  position: relative;
  margin-top: var(--space-8);
  margin-bottom: var(--space-12);
}

.ai-carousel-header {
  text-align: center;
  margin-bottom: var(--space-6);
}

.ai-carousel-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-primary);
  margin-top: var(--space-1);
}

.ai-carousel-wrapper {
  position: relative;
  width: 100%;
  padding-inline: 28px;
}

.ai-carousel-track {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-block: var(--space-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ai-carousel-track::-webkit-scrollbar {
  display: none;
}

.ai-employee-card {
  flex: 0 0 310px;
  max-width: 310px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.ai-employee-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.5), 0 0 24px rgba(var(--accent-rgb), 0.12);
}

.ai-employee-card__avatar {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0f172a;
}

.ai-employee-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.4s var(--ease);
}

.ai-employee-card:hover .ai-employee-card__avatar img {
  transform: scale(1.05);
}

.ai-employee-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ai-employee-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text-primary);
}

.ai-employee-card__role {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: var(--tracking-mono);
  margin-bottom: var(--space-2);
}

.ai-employee-card__desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.6;
}

/* Floating Navigation Arrow Buttons for AI Carousel */
.ai-carousel-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--stroke-strong);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: all var(--t-fast) var(--ease);
}

.ai-carousel-btn--prev {
  left: -12px;
}

.ai-carousel-btn--next {
  right: -12px;
}

.ai-carousel-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.5);
  transform: translateY(-50%) scale(1.1);
}

.ai-carousel-btn svg {
  width: 20px;
  height: 20px;
}

.ai-carousel-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

[data-theme="light"] .ai-employee-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .ai-employee-card__name {
  color: #0f172a;
}

[data-theme="light"] .ai-employee-card__desc {
  color: #475569;
}

[data-theme="light"] .ai-carousel-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .ai-carousel-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.4);
}

@media (max-width: 768px) {
  .ai-carousel-wrapper {
    padding-inline: 0;
  }
  .ai-carousel-btn {
    display: none;
  }
  .ai-employee-card {
    flex: 0 0 270px;
    max-width: 270px;
  }
}
  gap: var(--space-2);
  line-height: 1.5;
}

.agent__does li::before {
  content: "→";
  font-family: var(--font-mono);
  color: var(--accent);
  line-height: 1.5;
}

/* --- AI Employees Roster (Danh mục Nhân sự AI) --- */
.ai-roster {
  margin-block: var(--space-6);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-6);
}

.ai-roster__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--stroke);
}

.ai-roster__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-top: var(--space-1);
}

.ai-roster__tabs {
  display: inline-flex;
  gap: var(--space-2);
  padding: 3px;
  background: var(--bg-inset);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-md);
}

.ai-roster__tab {
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.ai-roster__tab:hover {
  color: var(--text-primary);
}

.ai-roster__tab.is-active {
  background: var(--bg-panel);
  border-color: var(--accent-line);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 0 10px var(--accent-softer);
}

/* --- 5-Layer Operational System Stack --- */
.system-layers-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-6);
}

.stack-layer {
  display: grid;
  grid-template-columns: 240px 1fr 200px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-sunken);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  transition: all var(--t-fast) var(--ease);
  position: relative;
  overflow: hidden;
}

@media (max-width: 900px) {
  .stack-layer {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

.stack-layer:hover {
  background: var(--bg-panel-hover);
  border-color: var(--stroke-strong);
  transform: translateX(4px);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.4);
}

.stack-layer__tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}

.stack-layer--l5 .stack-layer__tag { color: var(--accent); }
.stack-layer--l4 .stack-layer__tag { color: #4ade80; }
.stack-layer--l3 .stack-layer__tag { color: #38bdf8; }
.stack-layer--l2 .stack-layer__tag { color: #facc15; }
.stack-layer--l1 .stack-layer__tag { color: var(--accent); }

.stack-layer__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

.stack-layer__desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

.stack-layer__owner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  border: 1px solid var(--stroke);
  background: var(--bg-inset);
  text-align: center;
  white-space: nowrap;
}

.stack-layer__owner--human {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.08);
}

.stack-layer__owner--ai {
  color: var(--ok);
  border-color: rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.08);
}

.stack-layer__owner--engine {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(56, 189, 248, 0.08);
}

.stack-layer__owner--ent {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.08);
}

/* --- System Anatomy Interactive Matrix (Split Deck) --- */
.system-anatomy-matrix {
  margin-block: var(--space-8);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
  background: var(--bg-panel);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.45);
}

.anatomy-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--stroke);
}

.anatomy-head__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-top: var(--space-1);
}

.anatomy-head__telemetry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.anatomy-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--bg-inset);
  border: 1px solid var(--stroke);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-secondary);
}

.dot-ok { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.dot-amber { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.dot-blue { width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 6px #38bdf8; }

/* Split Deck Layout (Left Anatomy Dial 55% / Right Inspection Card 45%) */
.anatomy-deck-split {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: var(--space-5);
  align-items: center;
}

@media (max-width: 980px) {
  .anatomy-deck-split {
    grid-template-columns: 1fr;
  }
}

/* Left Panel: Anatomy Dial Canvas Stage */
.anatomy-left-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.anatomy-canvas-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 520px;
  background: #06080d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

#anatomyCanvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.anatomy-hint-pill {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13, 17, 23, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 5px 14px;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #f8fafc !important;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.anatomy-hint-pill svg {
  stroke: #f8fafc !important;
}

/* Right Panel: Anatomy Inspection HUD Card */
.anatomy-right-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.anatomy-card-hud {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-sunken);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.4);
  height: 100%;
}

.anatomy-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--stroke);
}

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

.anatomy-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.9);
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 14px var(--accent-softer);
}

.anatomy-card__title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
}

.anatomy-card__handle {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--accent);
}

.anatomy-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.3);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ok);
}

/* Metrics Strip */
.anatomy-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.ana-metric-box {
  padding: 8px 10px;
  background: var(--bg-inset);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xs);
  text-align: center;
}

.ana-metric-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  letter-spacing: var(--tracking-label);
}

.ana-metric-val {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: 700;
  margin-top: 2px;
}

/* Capabilities list */
.ana-section-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.ana-caps-list {
  display: grid;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text-primary);
}

.ana-caps-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ana-caps-list li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-top: 6px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Terminal Log */
.ana-terminal {
  border-radius: var(--r-xs);
  background: #06080c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.ana-terminal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ana-term-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #94a3b8 !important;
}

.ana-term-status {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ok);
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(74, 222, 128, 0.15);
}

.ana-terminal__out {
  padding: 8px 12px;
  height: 90px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  color: #38bdf8;
  margin: 0;
  white-space: pre-wrap;
}

.avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1rem;
  border: 1px solid var(--stroke-strong);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.avatar-circle--blue { background: rgba(56, 189, 248, 0.15); border-color: rgba(56, 189, 248, 0.4); }
.avatar-circle--green { background: rgba(74, 222, 128, 0.15); border-color: rgba(74, 222, 128, 0.4); }
.avatar-circle--yellow { background: rgba(250, 204, 21, 0.15); border-color: rgba(250, 204, 21, 0.4); }
.avatar-circle--orange { background: rgba(var(--accent-rgb), 0.15); border-color: rgba(var(--accent-rgb), 0.4); }
.avatar-circle--red { background: rgba(248, 113, 113, 0.15); border-color: rgba(248, 113, 113, 0.4); }
.avatar-circle--purple { background: rgba(192, 132, 252, 0.15); border-color: rgba(192, 132, 252, 0.4); }

.pos-badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--bg-inset);
  border: 1px solid var(--stroke);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-primary);
  font-weight: 500;
}

.pos-badge--dev {
  border-color: rgba(168, 85, 247, 0.35);
  background: rgba(168, 85, 247, 0.08);
}

.status-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ok);
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.status-toggle i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 6px var(--ok);
}

/* Ranh giới AI / con người */
.boundary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.boundary__side {
  padding: var(--space-8);
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.boundary__side+.boundary__side {
  border-left: 1px solid var(--stroke);
}

.boundary__side--human {
  background: var(--bg-inset);
}

.boundary h3 {
  font-size: var(--text-lg);
}

.boundary ul {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-md);
}

.boundary li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--space-2);
  line-height: 1.5;
}

.boundary li::before {
  font-family: var(--font-mono);
  line-height: 1.5;
}

.boundary__side--ai li::before {
  content: "AI";
  font-size: 0.6rem;
  color: var(--accent);
  padding-top: 3px;
}

.boundary__side--human li::before {
  content: "◆";
  font-size: 0.6rem;
  color: var(--accent);
  padding-top: 2px;
}

.boundary__side--human.proof li::before {
  content: "✦";
  font-size: 0.6rem;
  color: var(--accent);
  padding-top: 1px;
}

/* --- High-Tech Hero Running Marquee Ticker --- */
.hero-ticker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: 8px 16px;
  max-width: 980px;
  width: 100%;
  border-radius: var(--r-round);
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.5), inset 0 0 16px rgba(var(--accent-rgb), 0.08);
  overflow: hidden;
}

.hero-ticker__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
  flex-shrink: 0;
}

.ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse-dot 1.5s ease-in-out infinite alternate;
}

@keyframes pulse-dot {
  from { opacity: 0.4; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1.2); }
}

.hero-ticker__track-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.hero-ticker__track {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  white-space: nowrap;
  width: max-content;
  animation: marquee-scroll 24s linear infinite;
}

.hero-ticker:hover .hero-ticker__track {
  animation-play-state: paused;
}

.hero-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.ticker-glyph {
  font-style: normal;
  color: var(--accent);
  font-size: 0.75rem;
  text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.6);
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* --- Minimalist Cyber Mouse Scroll Down Icon --- */
.hero-scroll-down {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
  margin-bottom: 12px;
  margin-inline: auto;
  text-decoration: none;
  width: fit-content;
  cursor: pointer;
  transition: transform var(--t-normal) var(--ease), opacity 300ms var(--ease), visibility 300ms;
  opacity: 1;
  visibility: visible;
}

.scroll-down-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease);
}

.hero-scroll-down.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(14px) scale(0.9) !important;
}

.hero-scroll-down:hover:not(.is-hidden) {
  transform: translateY(-4px) scale(1.08);
}

.hero-scroll-down:hover:not(.is-hidden) .scroll-down-label {
  color: #facc15;
}

/* Mouse Body - Pure White & Gold Outline */
.scroll-mouse-icon {
  position: relative;
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
  box-shadow: 0 0 14px rgba(250, 204, 21, 0.35), inset 0 0 10px rgba(250, 204, 21, 0.12);
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  transition: all var(--t-normal) var(--ease);
}

.hero-scroll-down:hover .scroll-mouse-icon {
  border-color: #facc15;
  box-shadow: 0 0 22px rgba(250, 204, 21, 0.65), inset 0 0 14px rgba(250, 204, 21, 0.3);
}

/* Mouse Wheel Segment - Amber Gold LED Glow */
.scroll-mouse-wheel {
  width: 2.5px;
  height: 8px;
  background: #facc15;
  border-radius: 99px;
  box-shadow: 0 0 10px #facc15;
  animation: mouse-wheel-glow-roll 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  transition: all var(--t-normal) var(--ease);
}

.hero-scroll-down:hover .scroll-mouse-wheel {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8);
}

/* Light Theme Explicit High-Contrast Overrides */
[data-theme="light"] .hero-ticker {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(var(--accent-rgb), 0.15);
}

[data-theme="light"] .hero-ticker__badge {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.45);
  color: #d9530f;
  font-weight: 800;
}

[data-theme="light"] .hero-ticker__item {
  color: #0f172a;
  font-weight: 700;
}

[data-theme="light"] .scroll-mouse-icon {
  background: rgba(255, 255, 255, 0.95);
  border-color: #334155;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .scroll-mouse-wheel {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
}

[data-theme="light"] .scroll-down-label {
  color: #334155;
  font-weight: 700;
}

[data-theme="light"] .hero-scroll-down:hover:not(.is-hidden) .scroll-down-label {
  color: #d9530f;
}

@keyframes mouse-wheel-glow-roll {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  60% {
    transform: translateY(14px);
    opacity: 0.15;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


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

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

  .boundary__side+.boundary__side {
    border-left: 0;
    border-top: 1px solid var(--stroke);
  }

  .boundary__side {
    padding: var(--space-6);
  }
}

/* ---------- 10c. Giải phẫu kiến trúc — teardown cuộn ----------
   Bố cục: chồng tầng isometric bên trái, khung mô tả bên phải, thanh bước
   01>02>03>04>05 ở dưới. Đổi tầng bằng cuộn (desktop) hoặc bấm thanh bước.

   Điều khiển bằng đúng một nguồn sự thật: vị trí cuộn. Bấm thanh bước không
   tự đặt trạng thái mà cuộn tới đoạn tương ứng — nên hai cách điều khiển
   không bao giờ đá nhau.

   Khác hệ đối thủ ở hai điểm: tầng phân biệt bằng bậc sáng graphite chứ không
   phải bốn màu riêng, và mỗi tầng nói rõ nó nghĩa là gì trên cả AppSheet lẫn
   NocoBase. */

/* ---------- 10c. Giải phẫu kiến trúc — teardown cuộn ---------- */
.teardown {
  position: relative;
}

.teardown__sticky {
  display: grid;
  gap: var(--space-10);
}

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

/* --- Chồng tầng isometric --- */
.stage {
  display: grid;
  place-items: center;
  perspective: 1500px;
}

.stack {
  --sep: 1;
  position: relative;
  width: 290px;
  height: 180px;
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-38deg);
}

.stack__layer {
  --slide: 0px;
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-sm);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 0) 0 0 / 24px 24px,
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 0) 0 0 / 24px 24px,
    #0f172a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  transform: translate3d(var(--slide), 0, calc(var(--z) * var(--sep) * 1px));
  transition:
    transform 560ms var(--ease-out),
    border-color var(--t-normal) var(--ease),
    box-shadow var(--t-normal) var(--ease),
    filter var(--t-normal) var(--ease);
}

/* 5 Tầng Isometric với viền phát sáng neon sắc nét, không bị chìm nền tối */
.stack__layer:nth-child(1) {
  --z: 188;
  border-color: rgba(var(--accent-rgb), 0.75);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.25);
}

.stack__layer:nth-child(1) .stack__tag {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
}

.stack__layer:nth-child(2) {
  --z: 141;
  border-color: rgba(74, 222, 128, 0.75);
  box-shadow: 0 0 18px rgba(74, 222, 128, 0.22);
}

.stack__layer:nth-child(2) .stack__tag {
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}

.stack__layer:nth-child(3) {
  --z: 94;
  border-color: rgba(56, 189, 248, 0.75);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.22);
}

.stack__layer:nth-child(3) .stack__tag {
  color: #38bdf8;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.stack__layer:nth-child(4) {
  --z: 47;
  border-color: rgba(250, 204, 21, 0.75);
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.22);
}

.stack__layer:nth-child(4) .stack__tag {
  color: #facc15;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
}

.stack__layer:nth-child(5) {
  --z: 0;
  border-color: rgba(192, 132, 252, 0.75);
  box-shadow: 0 0 18px rgba(192, 132, 252, 0.22);
}

.stack__layer:nth-child(5) .stack__tag {
  color: #c084fc;
  text-shadow: 0 0 8px rgba(192, 132, 252, 0.6);
}

/* Tầng đang chọn rút khỏi chồng và trượt sang phải */
.stack__layer.is-active {
  --slide: 66px;
  z-index: 10;
  border-color: var(--accent) !important;
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.6), 0 0 0 2px var(--accent) !important;
  background:
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.25) 1px, transparent 0) 0 0 / 24px 24px,
    linear-gradient(rgba(var(--accent-rgb), 0.25) 1px, transparent 0) 0 0 / 24px 24px,
    rgba(var(--accent-rgb), 0.18) !important;
}

.stack__layer.is-active .stack__tag {
  color: var(--accent) !important;
}

/* Phản hồi khi rê chuột */
.stack__layer:hover:not(.is-active) {
  border-color: #ffffff !important;
  transform: translate3d(var(--slide), 0, calc(var(--z) * var(--sep) * 1px)) scale(1.05);
}

.stack__layer:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.stack__tag {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-primary);
  transition: color var(--t-normal) var(--ease);
}

/* --- Khung mô tả --- */
.detail {
  position: relative;
  display: grid;
  perspective: 1100px;
}

.teardown-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--stroke-strong);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: all var(--t-fast) var(--ease);
}

.teardown-nav-btn--prev {
  left: -22px;
}

.teardown-nav-btn--next {
  right: -22px;
}

.teardown-nav-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.5);
  transform: translateY(-50%) scale(1.1);
}

.teardown-nav-btn svg {
  width: 20px;
  height: 20px;
}

[data-theme="light"] .teardown-nav-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .teardown-nav-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.4);
}

@media (max-width: 900px) {
  .teardown-nav-btn--prev {
    left: 8px;
  }
  .teardown-nav-btn--next {
    right: 8px;
  }
}

.detail__panel {
  position: relative;
  overflow: hidden;
  padding: var(--space-8);
  display: grid;
  gap: var(--space-4);
  align-content: start;
  background: var(--bg-panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--line-top);
}

/* Có JS: cả 5 khung nằm chồng đúng một ô lưới nên chiều cao khoá theo khung
   cao nhất — đổi tầng không làm trang giật. Không JS: 5 khung xếp dọc. */
.js .detail__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms var(--ease), visibility 200ms;
}

.js .detail__panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), var(--shadow-panel);
  animation: panel-fly 620ms var(--ease-out);
}

/* Bay vào từ bên trái, xoay nhẹ quanh trục dọc như một tấm thẻ được đưa sang */
@keyframes panel-fly {
  0% {
    opacity: 0;
    transform: translateX(-72px) rotateY(16deg) scale(0.95);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/* Vệt quét chạy qua đúng một lần mỗi khi khung mới bay vào */
.js .detail__panel.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, var(--accent-soft) 50%, transparent 58%);
  animation: panel-sweep 820ms var(--ease-out);
}

@keyframes panel-sweep {
  from {
    transform: translateX(-110%);
  }

  to {
    transform: translateX(110%);
  }
}

.detail__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.detail__idx {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--accent);
}

.detail__idx small {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
}

.detail__kind {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.detail__panel h3 {
  font-size: var(--text-xl);
}

.detail__panel>p {
  font-size: var(--text-md);
  line-height: 1.6;
}

.detail__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--stroke-faint);
}

.detail__split dt {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}

.detail__split dd {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-muted);
}

/* --- Thanh bước 01 > 02 > 03 > 04 > 05 --- */
.stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--stroke);
}

.stepper__item {
  display: grid;
}

.stepper__btn {
  position: relative;
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  padding: var(--space-5) var(--space-4) var(--space-4) 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--text-muted);
  transition: color var(--t-normal) var(--ease);
}

.stepper__btn::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}

.stepper__item.is-done .stepper__btn::before,
.stepper__item.is-active .stepper__btn::before {
  transform: scaleX(1);
}

.stepper__btn:hover {
  color: var(--text-secondary);
}

.stepper__item.is-active .stepper__btn {
  color: var(--text-primary);
}

.stepper__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  transition: color var(--t-normal) var(--ease);
}

.stepper__item.is-active .stepper__num {
  color: var(--accent);
}

.stepper__item.is-done .stepper__num {
  color: var(--text-secondary);
}

.stepper__label {
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.3;
}

@media (max-width: 1024px) {
  .teardown__main {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .stage {
    order: -1;
    height: 320px;
  }

  .stepper {
    grid-template-columns: repeat(5, 1fr);
  }

  .stepper__label {
    display: none;
  }

  .stepper__btn {
    justify-items: center;
    padding: var(--space-4) var(--space-2);
  }
}

@media (max-width: 560px) {
  .stage {
    height: 250px;
  }

  .stack {
    width: 230px;
    height: 144px;
  }

  .detail__panel {
    padding: var(--space-6);
  }

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

/* --- Kết luận + lối sang bảng so sánh --- */
.anatomy-note {
  margin-top: var(--space-10);
  padding: var(--space-5) var(--space-6);
  border-left: 2px solid var(--accent);
  background: var(--accent-softer);
  font-size: var(--text-md);
  color: var(--text-primary);
}

.anatomy-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease);
}

.anatomy-cta:hover {
  color: var(--accent);
}

.anatomy-cta svg {
  width: 14px;
  height: 14px;
}

/* ---------- 11. Ma trận so sánh ---------- */
/* Bảng đặt trong một tấm panel có nền riêng. Trước đây bảng trôi thẳng trên
   nền trang nên các cột không có mép, mắt phải tự dóng hàng — rất khó đọc ở
   bảng 5 cột. */
.matrix-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--line-top), var(--shadow-panel);
}

.matrix {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: var(--text-md);
}

.matrix th,
.matrix td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--stroke-faint);
}

/* Sọc xen kẽ để mắt bám đúng hàng khi rê ngang qua 5 cột */
.matrix tbody tr:nth-child(odd) th,
.matrix tbody tr:nth-child(odd) td {
  background: var(--bg-inset);
}

.matrix thead th {
  padding-block: var(--space-4) var(--space-3);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--stroke-strong);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.matrix thead th.is-us {
  color: var(--accent);
}

.matrix tbody th {
  width: 25%;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
}

.matrix tbody th small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-muted);
}

.matrix .row-num {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text-muted);
  margin-right: var(--space-3);
}

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

/* Cột BAMFLOW phải thắng được sọc xen kẽ ở trên, nên chọn qua tbody tr td để
   đủ độ ưu tiên — không dùng !important. */
.matrix tbody tr td.is-us {
  color: var(--text-primary);
  background: var(--accent-soft);
  box-shadow: inset 1px 0 0 var(--accent-line), inset -1px 0 0 var(--accent-line);
}

.matrix tbody tr:last-child td.is-us {
  box-shadow: inset 1px 0 0 var(--accent-line), inset -1px 0 0 var(--accent-line), inset 0 -1px 0 var(--accent-line);
}

.matrix thead th.is-us {
  background: var(--accent-soft);
  box-shadow: inset 1px 0 0 var(--accent-line), inset -1px 0 0 var(--accent-line), inset 0 1px 0 var(--accent-line);
}

.scroll-hint {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
}

/* ---------- 12. Quy trình ----------
   Bốn nút trên một trục ngang liên tục — đọc như sơ đồ giai đoạn, không phải
   bốn thẻ rời. */
.phases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.phase {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-8);
  border-top: 2px solid var(--stroke-strong);
  transition: border-color var(--t-normal) var(--ease);
}

.phase:hover {
  border-top-color: var(--accent);
}

.phase::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  box-shadow: 0 0 8px var(--accent-softer);
  transform: rotate(45deg);
}

.phase--first::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

.phase__num {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--accent);
  font-weight: 600;
}

.phase h3 {
  font-size: var(--text-lg);
}

.phase p {
  font-size: var(--text-md);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .phases {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

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

/* ---------- 13. Vì sao BAMFLOW ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.pillar {
  padding: var(--space-8);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.pillar__num {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.pillar__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.pillar p {
  font-size: var(--text-md);
  line-height: 1.6;
}

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

/* ---------- 13b. Đội ngũ ---------- */
.team {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}

/* Ảnh đứng thành một cột hẹp bên trái thay vì tràn hết mép trên panel.
   Bản trước ảnh vuông full-width làm panel cao gấp đôi lưới thành tích bên
   cạnh, nên bốn thẻ kia bị kéo giãn và trông rỗng. */
.profile {
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}

/* Lớp phủ chuyển sang màu nền để nền xanh của ảnh chìm vào hệ graphite thay vì
   chọi với accent amber. */
.profile__photo {
  position: relative;
  background: var(--bg-inset);
  aspect-ratio: 16 / 9;
}

.profile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  filter: var(--photo-filter);
}

.profile__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, var(--bg-panel) 100%);
  pointer-events: none;
}

.profile__body {
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.profile__head {
  display: grid;
  gap: var(--space-2);
}

.profile__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
}

.profile__role {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.profile__bio {
  display: grid;
  gap: var(--space-4);
  font-size: var(--text-md);
  line-height: 1.62;
}

.profile__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.profile__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 10px;
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.profile__links a:hover {
  color: var(--accent);
  border-color: var(--accent-line);
}

.profile__links svg {
  width: 13px;
  height: 13px;
}

.creds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-content: stretch;
}

.cred {
  padding: var(--space-6);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.cred__value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
  color: var(--text-primary);
}

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

.cred__label {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--text-muted);
}

.cred__tag {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.75;
}

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

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

  /* Cột ảnh 180px chiếm gần nửa màn hẹp — xếp dọc lại, ảnh thành dải ngang */
  /* Màn hẹp: giảm aspect ratio ảnh cho gọn hơn */
  .profile__photo {
    aspect-ratio: 4 / 3;
  }

  .profile__photo img {
    object-position: center 18%;
  }

  .profile__body {
    padding: var(--space-5);
  }
}

/* ---------- 14. Liên hệ / form ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-16);
  align-items: start;
}

.contact-info {
  display: grid;
  gap: var(--space-10);
  align-content: start;
}

.contact-points {
  display: grid;
  gap: var(--space-3);
}

.contact-points li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--space-3);
  font-size: var(--text-md);
  line-height: 1.5;
}

.contact-points li::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--accent);
  line-height: 1.5;
}

.contact-meta {
  display: grid;
}

.contact-meta>div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--stroke-faint);
  align-items: baseline;
}

.contact-meta>div:last-child {
  border-bottom: 1px solid var(--stroke-faint);
}

.contact-meta dt {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-meta dd {
  font-size: var(--text-md);
  color: var(--text-primary);
}

.contact-meta a {
  transition: color var(--t-fast) var(--ease);
}

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

/* --- 2-Column Contact & Services Matrix Layout --- */
.contact-services-layout {
  display: grid;
  grid-template-columns: 38% 62%;
  gap: var(--space-6);
  align-items: stretch;
}

@media (max-width: 1024px) {
  .contact-services-layout {
    grid-template-columns: 1fr;
  }
}

.contact-company-side {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-lg);
}

.company-card__title {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: var(--tracking-heading);
}

.company-card__sub {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--accent);
  letter-spacing: var(--tracking-mono);
  margin-top: 2px;
}

.company-card__lead {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--stroke-faint);
}

.contact-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
  margin-bottom: var(--space-6);
}

.contact-meta div dt {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-meta div dd {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 2px;
}

.contact-meta div dd a {
  transition: color var(--t-fast) var(--ease);
}

.contact-meta div dd a:hover {
  color: var(--accent);
}

.company-card__action {
  margin-top: auto;
  padding-top: var(--space-4);
}

/* Services Matrix Minimalist List */
.services-matrix-side {
  display: flex;
  flex-direction: column;
}

.services-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.service-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-panel);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.service-row:hover {
  background: var(--bg-surface);
  border-color: var(--accent-line);
  transform: translateX(4px);
}

.service-row__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--accent);
}

.service-row__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 3px;
}

.service-row__desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.service-row__action {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.service-row:hover .service-row__action {
  opacity: 1;
}

@media (max-width: 768px) {
  .service-row {
    grid-template-columns: 32px 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .service-row__action {
    display: none;
  }
}

.service-card:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: var(--bg-card-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.35), 0 0 20px rgba(var(--accent-rgb), 0.08);
}

.service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.service-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.service-card__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent);
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  line-height: 1;
}

.service-card__pill {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 2px 7px;
  background: var(--bg-surface);
  border: 1px solid var(--stroke-faint);
  border-radius: var(--r-xs);
}

.service-card__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--stroke-faint);
  color: var(--accent);
  transition: all var(--t-fast) var(--ease);
}

.service-card:hover .service-card__icon {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
  transform: scale(1.08);
}

.service-card__icon svg {
  width: 18px;
  height: 18px;
}

.service-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: var(--space-2);
}

.service-card__desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: var(--space-4);
}

.service-card__deliverables {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px dashed var(--stroke-faint);
  padding-top: var(--space-3);
}

.service-card__deliverables li {
  font-size: 0.76rem;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.4;
}

.service-card__deliverables li svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.service-card__action-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--t-fast) var(--ease);
}

.service-card:hover .service-card__action-link {
  gap: 10px;
}

.service-card__action-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--t-fast) var(--ease);
}

.service-card:hover .service-card__action-link svg {
  transform: translateX(3px);
}

.company-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--space-2);
}

/* --- Cyber Glassmorphism Contact Popup Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 300ms var(--ease);
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 13, 0.85);
  backdrop-filter: blur(16px);
}

.modal-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: var(--r-lg);
  padding: var(--space-8);
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.8), 0 0 30px rgba(var(--accent-rgb), 0.2);
  transform: scale(0.92) translateY(20px);
  transition: transform 300ms var(--ease);
}

.modal-overlay.is-open .modal-container {
  transform: scale(1) translateY(0);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--stroke-strong);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.modal-close:hover {
  background: rgba(var(--accent-rgb), 0.2);
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(90deg);
}

.modal-close svg {
  width: 18px;
  height: 18px;
}

.modal-header {
  margin-bottom: var(--space-6);
}

.modal-header h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-2);
  color: var(--text-primary);
}

.modal-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.form {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-10);
}

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

.field {
  display: grid;
  gap: var(--space-2);
}

.field__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.field__icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
}

.field__label .req {
  color: var(--accent);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  background: var(--bg-inset);
  color: var(--text-primary);
  font-size: var(--text-md);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.field textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.6;
}

/* Custom Styled Select Dropdown */
.field select.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ff6a1f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  padding-right: 42px;
  background-color: var(--bg-inset);
  color: var(--text-primary);
  border: 1px solid var(--stroke-strong);
  cursor: pointer;
}

.field select.custom-select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
}

.field select.custom-select option {
  background-color: var(--bg-panel) !important;
  color: var(--text-primary) !important;
  padding: 12px 16px;
  font-size: var(--text-md);
}

.field select.custom-select option:disabled {
  color: var(--text-muted) !important;
}

.field select.custom-select option:hover,
.field select.custom-select option:focus,
.field select.custom-select option:active,
.field select.custom-select option:checked {
  background-color: rgba(var(--accent-rgb), 0.25) !important;
  color: var(--text-primary) !important;
}

/* --- Light Theme Explicit Overrides for Contact Popup Modal --- */
[data-theme="light"] .modal-backdrop {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(12px);
}

[data-theme="light"] .modal-container {
  background: #ffffff;
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 24px 64px -12px rgba(15, 23, 42, 0.2), 0 0 30px rgba(var(--accent-rgb), 0.12);
}

[data-theme="light"] .modal-close {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

[data-theme="light"] .modal-close:hover {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

[data-theme="light"] .field__label {
  color: #334155;
  font-weight: 700;
}

[data-theme="light"] .field input,
[data-theme="light"] .field textarea {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

[data-theme="light"] .field input::placeholder,
[data-theme="light"] .field textarea::placeholder {
  color: #94a3b8;
}

[data-theme="light"] .field input:focus,
[data-theme="light"] .field textarea:focus {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

[data-theme="light"] .field select.custom-select {
  background-color: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

[data-theme="light"] .field select.custom-select:focus {
  background-color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

[data-theme="light"] .field select.custom-select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

[data-theme="light"] .field select.custom-select option:disabled {
  color: #94a3b8 !important;
}

[data-theme="light"] .field select.custom-select option:hover,
[data-theme="light"] .field select.custom-select option:focus,
[data-theme="light"] .field select.custom-select option:checked {
  background-color: rgba(var(--accent-rgb), 0.15) !important;
  color: #d9530f !important;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-muted);
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--stroke-strong);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-sunken);
  box-shadow: none;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  box-shadow: var(--focus-ring);
}

.field input:disabled,
.field textarea:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.field__error {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  color: var(--err);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--err-line);
}

.field.has-error .field__error {
  display: block;
}

.form__note {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
}

.form__status {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: var(--r-md);
  background: rgba(74, 222, 128, 0.08);
  color: var(--ok);
  font-size: var(--text-md);
}

.form__status[data-visible="true"] {
  display: flex;
}

.form__status svg {
  width: 15px;
  height: 15px;
  flex: none;
}

@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}

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

  .form {
    padding: var(--space-5);
  }

  .contact-meta>div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* ---------- 15. Footer ---------- */
.footer {
  position: relative;
  border-top: 1px solid var(--stroke);
  padding-block: var(--space-16) var(--space-8);
  background: var(--bg-sunken);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
  padding-bottom: var(--space-12);
}

.footer__brand {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  max-width: 34ch;
}

.footer__brand p {
  font-size: var(--text-md);
  line-height: 1.6;
}

.footer__social {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.footer__social a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.footer__social a:hover {
  color: var(--accent);
  border-color: var(--accent-line);
}

.footer__social svg {
  width: 15px;
  height: 15px;
}

.footer__col h2 {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

.footer__col ul {
  display: grid;
  gap: var(--space-3);
}

.footer__col a {
  font-size: var(--text-md);
  transition: color var(--t-fast) var(--ease);
}

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

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--stroke-faint);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

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

@media (max-width: 860px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer__brand {
    grid-column: 1 / -1;
    max-width: none;
  }
}

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

/* ---------- 16. Reveal ----------
   Trượt lên rất ngắn, không mờ dần kiểu điện ảnh. Chỉ ẩn khi JS chắc chắn
   chạy được — JS hỏng thì nội dung vẫn hiển thị đầy đủ. */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
}

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

.js .reveal.delay-1 {
  transition-delay: 40ms;
}

.js .reveal.delay-2 {
  transition-delay: 80ms;
}

.js .reveal.delay-3 {
  transition-delay: 120ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

@media print {

  .bp,
  .header,
  .nav-toggle {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}