/* =========================================================================
   BENOVA — landing page stylesheet
   Dark-first, teal accent, không phụ thuộc framework.
   ========================================================================= */

/* ---------------------------------------------------------- 1. tokens --- */

:root {
  --bg: #0a192f;
  --bg-alt: #081426;
  --bg-raise: #0e2340;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --border: rgba(136, 173, 214, 0.18);
  --border-strong: rgba(100, 255, 218, 0.32);
  --text: #e6edf7;
  --text-strong: #ffffff;
  --muted: #93a7c4;
  --accent: #64ffda;
  --accent-soft: rgba(100, 255, 218, 0.12);
  --accent-ink: #06231d;
  --amber: #ffbe6b;
  --binean: #3481e5;
  --shadow: 0 24px 60px -32px rgba(2, 8, 20, 0.9);
  --radius: 16px;
  --radius-lg: 22px;
  --shell: 1200px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme='light'] {
  --bg: #f6f9fc;
  --bg-alt: #eef3f9;
  --bg-raise: #ffffff;
  --surface: #ffffff;
  --surface-hover: #ffffff;
  --border: rgba(10, 25, 47, 0.12);
  --border-strong: rgba(13, 148, 136, 0.4);
  --text: #16283f;
  --text-strong: #0a192f;
  --muted: #566d8c;
  --accent: #0d9488;
  --accent-soft: rgba(13, 148, 136, 0.1);
  --accent-ink: #ffffff;
  --amber: #b45309;
  --binean: #2563c4;
  --shadow: 0 20px 50px -34px rgba(10, 25, 47, 0.45);
}

/* ----------------------------------------------------------- 2. base --- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  color: var(--text-strong);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 700;
}

h2 {
  font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.7rem);
}

h3 {
  font-size: 1.14rem;
}

p {
  margin: 0 0 1rem;
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.9rem;
}

.lead {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 62ch;
}

/* --------------------------------------------------------- 3. header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: 0 10px 30px -24px rgba(0, 0, 0, 0.8);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 70px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-strong);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark svg {
  display: block;
}

.brand-mark {
  display: block;
  line-height: 0;
}

.brand-mark img {
  width: 30px;
  height: 30px;
}

.brand-mark .logo-light {
  display: none;
}

[data-theme='light'] .brand-mark .logo-dark {
  display: none;
}

[data-theme='light'] .brand-mark .logo-light {
  display: block;
}

.brand-name {
  font-size: 1.05rem;
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  gap: 6px;
}

.site-nav a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 500;
  transition: color 0.2s, background 0.2s;
}

.site-nav a:hover,
.site-nav a.is-active {
  color: var(--text-strong);
  background: var(--surface-hover);
  text-decoration: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

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

.theme-toggle svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.theme-toggle .icon-moon {
  display: none;
}

[data-theme='light'] .theme-toggle .icon-sun {
  display: none;
}

[data-theme='light'] .theme-toggle .icon-moon {
  display: block;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 38px;
  padding: 0 9px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}

.nav-toggle[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* -------------------------------------------------------- 4. buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s, color 0.2s,
    border-color 0.2s;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}

.btn-primary:hover {
  box-shadow: 0 18px 38px -14px color-mix(in srgb, var(--accent) 80%, transparent);
}

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

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

.btn-sm {
  padding: 9px 18px;
  font-size: 0.9rem;
}

.btn-lg {
  padding: 15px 32px;
  font-size: 1.02rem;
}

/* ----------------------------------------------------------- 5. hero --- */

.hero {
  position: relative;
  padding: clamp(56px, 7vw, 104px) 0 clamp(24px, 3.5vw, 52px);
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  inset: -30% 0 auto -10%;
  height: 720px;
  background: radial-gradient(46% 46% at 22% 32%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(40% 40% at 78% 18%, color-mix(in srgb, var(--amber) 14%, transparent), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 68px 68px;
  opacity: 0.28;
  mask-image: radial-gradient(80% 60% at 50% 30%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 60% at 50% 30%, #000 10%, transparent 75%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero-title {
  font-size: clamp(2.2rem, 1.2rem + 3.9vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 1.1rem;
}

.hero-title span {
  display: block;
}

.hero-title .grad {
  background: linear-gradient(100deg, var(--accent) 0%, var(--amber) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem);
  color: var(--muted);
  max-width: 58ch;
  margin-bottom: 1.9rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 1.4rem;
}

.hero-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

/* orbit ------------------------------------------------------------------ */

.hero-visual {
  display: grid;
  place-items: center;
}

.orbit-stage {
  --size: clamp(300px, 36vw, 460px);
  /* Góc nhìn chếch xuống mặt phẳng hệ và độ mạnh của phối cảnh. */
  --scene: 56deg;
  --sun: 27%;
  position: relative;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  perspective: calc(var(--size) * 1.9);
  perspective-origin: 50% 50%;
}

/* trường sao ------------------------------------------------------------- */

.starfield {
  position: absolute;
  inset: -14%;
  pointer-events: none;
}

.starfield i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fff;
  opacity: 0.35;
  animation: twinkle var(--tw) ease-in-out var(--td) infinite;
}

/* Nền sáng thì không có bầu trời đêm; bỏ sao đi cho sạch. */
[data-theme='light'] .starfield {
  display: none;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.12;
    transform: scale(0.85);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.15);
  }
}

/* quầng sáng và tia quanh mặt trời --------------------------------------- */

.orbit-corona {
  position: absolute;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--binean) 55%, transparent) 0%,
    color-mix(in srgb, var(--binean) 18%, transparent) 44%,
    transparent 70%
  );
  filter: blur(7px);
  animation: breathe 6s ease-in-out infinite;
}

/* Tia sáng quay chậm, tạo lấp lánh chứ không thành hình rõ ràng. */
.orbit-flare {
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--binean) 30%, transparent) 18deg,
    transparent 46deg,
    color-mix(in srgb, #ffffff 22%, transparent) 128deg,
    transparent 168deg,
    color-mix(in srgb, var(--binean) 26%, transparent) 250deg,
    transparent 300deg
  );
  filter: blur(11px);
  opacity: 0.75;
  animation: spin 30s linear infinite;
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.13);
    opacity: 1;
  }
}

/* mặt trời --------------------------------------------------------------- */

.orbit-core {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29%;
  aspect-ratio: 1;
  border-radius: 50%;
  /* Sao xanh nóng: lõi gần trắng, rìa về đúng màu thương hiệu Binean. */
  background: radial-gradient(
    circle at 31% 25%,
    #ffffff 0%,
    color-mix(in srgb, var(--binean) 48%, #ffffff) 15%,
    var(--binean) 56%,
    color-mix(in srgb, var(--binean) 68%, #000000) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, #ffffff 40%, transparent),
    0 0 30px -2px color-mix(in srgb, var(--binean) 90%, transparent),
    0 0 90px 8px color-mix(in srgb, var(--binean) 45%, transparent);
}

.core-name {
  font-family: 'Times New Roman', Times, Georgia, serif;
  font-weight: 700;
  /* Cỡ chữ bám theo cạnh sân khấu để B luôn choán gần hết đĩa mặt trời. */
  font-size: calc(var(--size) * 0.2);
  line-height: 0.74;
  color: #f8fafb;
  text-shadow:
    0 1px 2px rgba(4, 22, 48, 0.45),
    0 3px 26px rgba(4, 22, 48, 0.7);
}

/* cảnh 3D ---------------------------------------------------------------- */

/* Mọi lớp trong cảnh đều phải preserve-3d, chỉ cần một lớp bị làm phẳng là toàn
   bộ phép sắp xếp chiều sâu hỏng. Cũng vì vậy không lớp nào trong cảnh được đặt
   overflow, filter hay opacity — ba thứ đó ép lớp về phẳng. */
.orbit-scene,
.orbit-sats,
.sat-plane,
.sat,
.sat-pos,
.sat-chip {
  transform-style: preserve-3d;
}

.orbit-scene {
  position: absolute;
  inset: 0;
  transform: rotateX(var(--scene));
}

/* mặt trời --------------------------------------------------------------- */

.orbit-core {
  position: absolute;
  inset: calc((100% - var(--sun)) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Dựng đứng lại để không bị bẹt theo góc nhìn của cảnh. */
  transform: rotateX(calc(-1 * var(--scene)));
  /* Sao xanh nóng: lõi gần trắng, rìa về đúng màu thương hiệu Binean. */
  background: radial-gradient(
    circle at 31% 25%,
    #ffffff 0%,
    color-mix(in srgb, var(--binean) 48%, #ffffff) 15%,
    var(--binean) 56%,
    color-mix(in srgb, var(--binean) 68%, #000000) 100%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, #ffffff 40%, transparent),
    0 0 30px -2px color-mix(in srgb, var(--binean) 90%, transparent),
    0 0 90px 8px color-mix(in srgb, var(--binean) 45%, transparent);
}

.core-name {
  font-family: 'Times New Roman', Times, Georgia, serif;
  font-weight: 700;
  font-size: calc(var(--size) * 0.2);
  line-height: 0.74;
  color: #f8fafb;
  text-shadow:
    0 1px 2px rgba(4, 22, 48, 0.45),
    0 3px 26px rgba(4, 22, 48, 0.7);
}

/* hành tinh -------------------------------------------------------------- */

.orbit-sats {
  position: absolute;
  inset: 0;
}

/* 1. Mặt phẳng quỹ đạo riêng: hướng nút lên và độ nghiêng của từng hành tinh. */
.sat-plane {
  position: absolute;
  inset: 0;
  transform: rotateZ(var(--node)) rotateX(var(--incl));
}

/* 2. Quay quanh mặt trời. */
.sat {
  position: absolute;
  inset: 0;
  animation: orbit var(--dur) linear var(--delay) infinite;
}

@keyframes orbit {
  to {
    transform: rotateZ(360deg);
  }
}

/* 3. Đẩy ra bán kính quỹ đạo. Căn giữa bằng margin chứ không bằng translate,
      vì translate sẽ bị các phép quay ở lớp ngoài kéo lệch theo. */
.sat-pos {
  --pw: calc(clamp(34px, 3.6vw, 44px) * var(--ps));
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--pw);
  height: var(--pw);
  margin: calc(var(--pw) / -2) 0 0 calc(var(--pw) / -2);
  transform: translateX(calc(var(--size) * var(--rf)));
}

/* 4 và 5. Billboard: gỡ lần lượt từng phép quay của chuỗi bên trên, theo đúng
   thứ tự ngược lại, để thân hành tinh luôn quay mặt về người xem. */
.sat-chip {
  display: block;
  width: 100%;
  height: 100%;
  animation: orbit-billboard var(--dur) linear var(--delay) infinite;
}

@keyframes orbit-billboard {
  to {
    transform: rotateZ(-360deg);
  }
}

.sat-body {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotateX(calc(-1 * var(--incl))) rotateZ(calc(-1 * var(--node)))
    rotateX(calc(-1 * var(--scene)));
  background: radial-gradient(
    circle at 30% 26%,
    color-mix(in srgb, var(--c) 42%, #ffffff) 0%,
    var(--c) 46%,
    color-mix(in srgb, var(--c) 55%, #071426) 100%
  );
  box-shadow:
    inset -3px -3px 8px -2px rgba(4, 12, 26, 0.75),
    0 0 18px -3px var(--c),
    0 6px 16px -8px rgba(0, 0, 0, 0.9);
}

/* Orbit đeo vành như Sao Thổ. */
.sat-ringed::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 205%;
  height: 62%;
  translate: -50% -50%;
  rotate: -22deg;
  border: 1.5px solid color-mix(in srgb, var(--c) 75%, #ffffff);
  border-radius: 50%;
  opacity: 0.85;
}

.sat-key {
  font-weight: 800;
  font-size: calc(0.42 * clamp(34px, 3.6vw, 44px) * var(--ps));
  letter-spacing: 0.02em;
  color: #071426;
}

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

/* ------------------------------------------------------- 7. sections --- */

.section {
  padding: clamp(64px, 8vw, 116px) 0;
}

.section-head {
  max-width: 760px;
  margin-bottom: clamp(34px, 4vw, 56px);
}

.section-ecosystem,
.section-benefits {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform 0.28s var(--ease), border-color 0.28s, background 0.28s, box-shadow 0.28s;
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  background: var(--surface-hover);
  box-shadow: var(--shadow);
}

.card h3 {
  margin-bottom: 0.5rem;
}

.card p {
  color: var(--muted);
  font-size: 0.94rem;
  margin: 0;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  font-size: 1.25rem;
  margin-bottom: 16px;
}

.section-bridge {
  max-width: 68ch;
  margin: clamp(30px, 4vw, 46px) auto 0;
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted);
  font-size: 1.02rem;
}

/* problem ---------------------------------------------------------------- */

.pain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.strangler {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.strangler-steps li {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.strangler-steps li:last-child {
  border-bottom: 0;
}

.strangler-steps h3 {
  margin-bottom: 0.3rem;
}

.strangler-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.step-num {
  flex: none;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent);
  padding-top: 3px;
}

.diagram {
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.diagram img {
  width: 100%;
}

.diagram figcaption {
  margin-top: 14px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ecosystem -------------------------------------------------------------- */

.agent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.engine-card {
  grid-column: span 3;
  padding: clamp(26px, 3vw, 36px);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 62%);
}

.agent-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.agent-head h3 {
  margin: 0;
  font-size: 1.22rem;
}

.agent-key {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding-inline: 10px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
  color: var(--accent);
  font-weight: 800;
  font-family: var(--mono);
  font-size: 0.95rem;
}

.agent-role {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.status {
  margin-left: auto;
  flex: none;
  align-self: flex-start;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}

.status-core {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
}

.agent-desc {
  color: var(--muted);
  font-size: 0.96rem;
  margin-bottom: 18px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.tag-row li {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 5px 13px;
}

.sub-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.sub-card {
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  transition: border-color 0.25s, transform 0.25s var(--ease);
}

.sub-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}

.sub-icon {
  font-size: 1.15rem;
}

.sub-card h4 {
  margin: 10px 0 6px;
  font-size: 0.98rem;
}

.sub-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.6;
}

.feature-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.feature-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* benefits --------------------------------------------------------------- */

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.benefit-card {
  display: flex;
  flex-direction: column;
}

.benefit-answers {
  margin: 0 0 8px;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--amber);
}

/* cta -------------------------------------------------------------------- */

.section-cta {
  padding-bottom: clamp(72px, 9vw, 128px);
}

.cta-box {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 64px);
  border-radius: 28px;
  border: 1px solid var(--border-strong);
  background: radial-gradient(90% 130% at 50% -20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--bg-alt);
}

.cta-box h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
}

.cta-box .lead {
  margin-inline: auto;
  margin-bottom: 2rem;
}

.cta-box .hero-actions {
  justify-content: center;
}

.cta-contact {
  margin: 18px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
  display: flex;
  gap: 8px 22px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --------------------------------------------------------- 8. footer --- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  padding: clamp(46px, 6vw, 70px) 0 28px;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 34px;
}

.footer-brand p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 42ch;
}

.footer-col h2 {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.footer-col li {
  margin-bottom: 9px;
}

.footer-col a {
  color: var(--text);
  font-size: 0.91rem;
}

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

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom ul {
  display: flex;
  gap: 20px;
}

.footer-bottom a {
  color: var(--muted);
}

/* -------------------------------------------------------- 9. reveal ---- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--delay, 0ms);
}

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

/* --------------------------------------------------- 10. responsive ---- */

@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }

  .hero-visual {
    order: -1;
  }

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

  .engine-card {
    grid-column: span 2;
  }

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

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

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

@media (max-width: 860px) {
  .site-nav {
    position: fixed;
    inset: 70px 0 auto;
    margin: 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px 22px;
    display: none;
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 2px;
  }

  .site-nav a {
    display: block;
    padding: 12px 14px;
    font-size: 1rem;
  }

  .nav-toggle {
    display: flex;
  }

  .header-cta {
    display: none;
  }

}

@media (max-width: 620px) {
  .shell {
    padding-inline: 18px;
  }

  .pain-grid,
  .agent-grid,
  .benefit-grid,
  .sub-grid,
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .engine-card {
    grid-column: span 1;
  }

  .agent-card .agent-head {
    padding-right: 124px;
  }

  .btn {
    width: 100%;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-box .hero-actions {
    flex-direction: column;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

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

  .sat,
  .sat-chip,
  .orbit-corona,
  .orbit-flare,
  .starfield i,
  .nd-seg,
  .nd-wire,
  .nd-chip {
    animation: none !important;
  }

  /* Không quay thì phải đặt sẵn góc, nếu không mọi hành tinh chồng lên nhau,
     và lớp billboard phải gỡ lại đúng chừng đó để chữ vẫn đứng thẳng. */
  .sat {
    transform: rotateZ(var(--static-a));
  }

  .sat-chip {
    transform: rotateZ(calc(-1 * var(--static-a)));
  }

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

  .btn:hover,
  .card:hover,
  .sub-card:hover {
    transform: none;
  }
}

/* ------------------------------------------- 11. cân bằng lưới thẻ ----- */

/* Badge trạng thái tách khỏi luồng flex để tên và vai trò có đủ bề ngang. */
.agent-card .agent-head {
  padding-right: 132px;
}

.agent-card .status {
  position: absolute;
  top: 26px;
  right: 26px;
  margin-left: 0;
}

/* Agent cuối cùng lẻ ra một mình ở hàng 3 cột thì trải ngang cả hàng. */
.agent-card-wide {
  grid-column: span 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 10px 40px;
  align-items: start;
}

.agent-card-wide .agent-head,
.agent-card-wide .agent-desc {
  grid-column: 1;
  margin-bottom: 14px;
}

/* Thẻ rộng có cột phải là danh sách tính năng, badge tuyệt đối sẽ đè lên nó
   nên trả badge về trong luồng của phần đầu thẻ. */
.agent-card-wide .agent-head {
  padding-right: 0;
}

.agent-card-wide .status {
  position: static;
  margin-left: auto;
}

.agent-card-wide .feature-list {
  grid-column: 2;
  grid-row: 1 / span 2;
  columns: 2;
  column-gap: 32px;
}

.agent-card-wide .feature-list li {
  break-inside: avoid;
}

@media (max-width: 1024px) {
  .agent-card-wide {
    grid-column: span 2;
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-card-wide .agent-head,
  .agent-card-wide .agent-desc,
  .agent-card-wide .feature-list {
    grid-column: 1;
  }

  .agent-card-wide .feature-list {
    grid-row: auto;
    columns: 2;
  }

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

@media (max-width: 620px) {
  .agent-card-wide {
    grid-column: span 1;
  }

  .agent-card-wide .feature-list {
    columns: 1;
  }

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

/* -------------------------------------- 12. dải thông báo đầu trang ---- */

.site-notice {
  background: color-mix(in srgb, var(--amber) 12%, var(--bg-alt));
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  font-size: 0.86rem;
}

.notice-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-block: 9px;
}

.notice-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}

.notice-inner p {
  margin: 0;
  color: var(--text);
}

.notice-inner a {
  color: var(--amber);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-contact-note {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

@media (max-width: 620px) {
  .site-notice {
    font-size: 0.82rem;
  }

  .notice-inner {
    gap: 8px;
  }
}

/* ------------------------------------------ 13. logo công ty ở footer -- */

.footer-company {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.footer-company img {
  width: 104px;
  height: auto;
}

/* Bản chữ trắng cho nền tối, bản chữ xanh cho nền sáng. */
.footer-company .logo-light {
  display: none;
}

[data-theme='light'] .footer-company .logo-dark {
  display: none;
}

[data-theme='light'] .footer-company .logo-light {
  display: block;
}

/* --------------------------------------------- 14. đổi ngôn ngữ -------- */

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.lang-switch a {
  display: block;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color 0.2s, background 0.2s;
}

.lang-switch a:hover {
  color: var(--text-strong);
  text-decoration: none;
}

.lang-switch a[aria-current='page'] {
  background: var(--accent-soft);
  color: var(--accent);
}

@media (max-width: 620px) {
  .lang-switch a {
    padding: 4px 7px;
    font-size: 0.72rem;
  }
}

/* --------------------------------------------------------- 14. 404 ----- */

.not-found {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 48px 0;
}

.nf-inner {
  max-width: 640px;
}

.nf-code {
  font-family: var(--mono);
  font-size: clamp(4rem, 2rem + 12vw, 8rem);
  line-height: 1;
  font-weight: 700;
  margin: 0 0 8px;
  color: transparent;
  background: linear-gradient(100deg, var(--accent) 0%, var(--amber) 92%);
  -webkit-background-clip: text;
  background-clip: text;
}

.nf-block + .nf-block {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.nf-block h1,
.nf-block h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  margin-bottom: 0.6rem;
}

.nf-block p {
  color: var(--muted);
  margin-bottom: 1.6rem;
}

/* -------------------------------------------- 15. sơ đồ Engine (E) ----- */

.engine-diagram {
  margin: 0 0 28px;
  padding: 20px 18px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
}

.engine-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  shape-rendering: geometricPrecision;
  text-rendering: optimizeLegibility;
}

/* Màn hình hẹp: thà cuộn ngang còn hơn co chữ xuống mức không đọc nổi. Chỉ
   phần hình mới cuộn — caption nằm ngoài vùng cuộn nên không bị kéo dài theo. */
@media (max-width: 900px) {
  .engine-diagram-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .engine-diagram svg {
    min-width: 700px;
  }
}

.engine-diagram figcaption {
  margin: 14px 4px 16px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
  text-align: center;
}

/* Hai lớp điều phối trừu tượng bao quanh vùng não. */
.nd-shell {
  fill: color-mix(in srgb, var(--accent) 70%, transparent);
  stroke: color-mix(in srgb, var(--accent) 55%, transparent);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.9;
}

.nd-arm {
  fill: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* Hai vùng não bên trong dùng cùng ngôn ngữ panel bo góc. */
.nd-lobe rect,
.nd-lobe path {
  fill: var(--bg-raise);
  stroke: color-mix(in srgb, var(--accent) 55%, transparent);
  stroke-width: 1.4;
}

.nd-lobe text {
  fill: var(--text-strong);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

/* đốt sống — nền lắng để các nút Agent nổi lên */
.nd-seg {
  fill: color-mix(in srgb, var(--accent) 55%, var(--bg-raise));
  stroke: color-mix(in srgb, var(--accent) 38%, transparent);
  stroke-width: 0.6;
  opacity: 0.92;
  animation: nd-pulse 3.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.22s);
}

/* Đốt của mỗi Agent lấy đúng màu chip nhưng nhạt bớt; đặc hiệu cao để không bị đè. */
.nd-seg.nd-agent-seg {
  fill: color-mix(in srgb, var(--c) 45%, var(--bg-raise));
  stroke: color-mix(in srgb, var(--c) 36%, transparent);
}

.nd-seg.nd-shell-seg {
  fill: color-mix(in srgb, var(--accent) 34%, var(--bg-raise));
  stroke: color-mix(in srgb, var(--accent) 26%, transparent);
}

.nd-seg.nd-cervical {
  fill: color-mix(in srgb, #ffffff 84%, #8a98a8);
  stroke: color-mix(in srgb, #ffffff 48%, #8a98a8);
}

.nd-seg.nd-terminal {
  fill: color-mix(in srgb, var(--accent) 30%, var(--bg-raise));
}

@keyframes nd-pulse {
  0%,
  100% {
    opacity: 0.92;
  }
  50% {
    opacity: 1;
  }
}

.nd-spine {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
}

.nd-cord {
  fill: var(--muted);
  font-size: 12px;
  letter-spacing: 0.1em;
  opacity: 0.75;
}

/* dây thần kinh: nét đứt chạy từ ô xuống spine như tín hiệu truyền về */
.nd-wire {
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 11;
  opacity: 0.75;
  animation: nd-signal 2.6s linear infinite;
  animation-delay: calc(var(--i) * -0.6s);
}

@keyframes nd-signal {
  to {
    stroke-dashoffset: -36;
  }
}

.nd-port {
  fill: var(--c);
}

/* ô N, O, V, A trôi nhẹ quanh chỗ của nó */
.nd-chip {
  animation: nd-float 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.3s);
  transform-box: fill-box;
  transform-origin: center;
}

.nd-chip circle {
  fill: var(--c);
  stroke: color-mix(in srgb, #ffffff 22%, var(--c));
  stroke-width: 1;
}

.nd-key {
  fill: color-mix(in srgb, #06101f 82%, var(--c));
  font-size: 26px;
  font-weight: 800;
}

.nd-future-node {
  animation: nd-future-float var(--fd) ease-in-out infinite;
  animation-delay: var(--fdelay);
  transform-box: fill-box;
  transform-origin: center;
}

.nd-future-node circle {
  fill: color-mix(in srgb, #91a0af 34%, var(--bg-raise));
  stroke: color-mix(in srgb, #91a0af 42%, transparent);
  stroke-width: 1;
  opacity: 0.34;
  stroke-dasharray: 3 5;
}

.nd-future-wire {
  fill: none;
  stroke: #718096;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 3 7;
  opacity: 0.32;
  animation: nd-future-signal 3.8s linear infinite;
  animation-delay: calc(var(--i) * -0.55s);
}

@keyframes nd-future-signal {
  to {
    stroke-dashoffset: -20;
  }
}

@keyframes nd-future-float {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  23% {
    transform: translate(3px, -4px) scale(1.02);
  }
  47% {
    transform: translate(-4px, -1px) scale(0.99);
  }
  71% {
    transform: translate(2px, 4px) scale(1.01);
  }
}

@keyframes nd-float {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(8px, -10px);
  }
  66% {
    transform: translate(-8px, 10px);
  }
}

@media (max-width: 620px) {
  .engine-diagram {
    padding: 12px 10px 2px;
  }

  .engine-diagram figcaption {
    font-size: 0.8rem;
  }
}

/* ------------------------------------------- 16. trang Binean Engine --- */

/* Trang bài viết nên hẹp hơn trang chủ: dòng chữ dài quá 75 ký tự là mắt bắt
   đầu trượt dòng. */
.eng-shell {
  max-width: 860px;
}

.eng-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px);
}

.eng-back {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: none;
}

.eng-back:hover {
  color: var(--accent);
}

.eng-title {
  position: relative;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem);
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.eng-lead {
  position: relative;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  color: var(--muted);
  max-width: 66ch;
  margin: 0;
}

.eng-section {
  padding: clamp(44px, 5vw, 72px) 0;
}

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

.eng-section .section-head {
  margin-bottom: clamp(22px, 3vw, 32px);
}

.eng-para {
  max-width: 72ch;
  margin: 0 0 1.15rem;
  color: var(--text);
  line-height: 1.75;
}

.eng-para code {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--accent);
  white-space: nowrap;
}

.eng-para strong {
  color: var(--text-strong);
}

/* năm danh từ */
.eng-glossary {
  display: grid;
  gap: 1px;
  margin: 26px 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.eng-glossary > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 20px;
  background: var(--bg);
}

.eng-glossary dt {
  font-weight: 800;
  color: var(--accent);
  font-size: 0.98rem;
}

/* Nhãn trạng thái cạnh một khái niệm: có trong kiến trúc, chưa có trong V1.
   Cần thiết vì sơ đồ Engine ở trang chủ vẽ cả những phần chưa dựng. */
.eng-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--amber);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 2px;
  white-space: nowrap;
}

.eng-glossary dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.65;
}

/* bốn quyết định thiết kế */
.eng-decisions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.eng-decision {
  position: relative;
}

.eng-num {
  display: block;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--accent);
  margin-bottom: 10px;
}

.eng-decision h3 {
  font-size: 1.06rem;
  margin-bottom: 0.6rem;
}

/* Cái giá của mỗi quyết định — tách hẳn ra để không đọc lướt qua được. */
.eng-cost {
  margin-top: 14px !important;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  color: var(--amber) !important;
  font-size: 0.88rem !important;
}

/* --- đánh giá có tính điểm ------------------------------------------------
   Bảng cần rộng hơn phần chữ, nên section này nới shell ra.
   Bảng màu ba đường radar không chọn bằng mắt: chạy qua validate_palette của
   skill dataviz, cả light lẫn dark, ở chế độ all-pairs — vì trên radar hai
   đường bất kỳ đều có thể nằm cạnh nhau, không chỉ hai đường liền kề. */
.section-compare .eng-shell {
  max-width: 1120px;
}

.section-compare .section-head,
.section-compare .eng-para,
.section-compare .eng-method {
  max-width: 860px;
}

/* sáu tiêu chí chấm điểm */
.eng-criteria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 34px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.eng-criteria > div {
  padding: 16px 18px;
  background: var(--bg);
}

.eng-criteria dt {
  font-weight: 700;
  color: var(--text-strong);
  font-size: 0.95rem;
  margin-bottom: 5px;
}

.eng-criteria dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* --- radar --- */
.eng-radar {
  margin: 0 0 34px;
}

.eng-radar-plot {
  overflow-x: auto;
  padding-bottom: 4px;
}

.eng-radar svg {
  display: block;
  width: 100%;
  min-width: 520px;
  height: auto;
  margin: 0 auto;
  max-width: 640px;
}

/* lưới là nét liền mảnh, lùi một bậc so với nền — nét đứt ở đây sẽ đọc thành
   "ngưỡng" chứ không phải "lưới". */
.rad-ring,
.rad-spoke {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
}

.rad-ring {
  stroke: color-mix(in srgb, var(--border) 70%, transparent);
}

.rad-tick {
  fill: var(--muted);
  font-size: 11px;
  text-anchor: end;
  font-variant-numeric: tabular-nums;
}

.rad-label {
  fill: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.rad-s1 {
  --c: #12a893;
}

.rad-s2 {
  --c: #cc7f22;
}

.rad-s3 {
  --c: #8161e0;
}

[data-theme='light'] .rad-s1 {
  --c: #0d9488;
}

[data-theme='light'] .rad-s2 {
  --c: #b45309;
}

[data-theme='light'] .rad-s3 {
  --c: #7c3aed;
}

.rad-area {
  fill: color-mix(in srgb, var(--c) 13%, transparent);
  stroke: var(--c);
  stroke-width: 2;
  stroke-linejoin: round;
}

.rad-provisional .rad-area {
  stroke-dasharray: 7 5;
}

/* vòng nền quanh chấm để hai đường chồng nhau vẫn tách ra được */
.rad-dot {
  fill: var(--c);
  stroke: var(--bg);
  stroke-width: 2;
}

.rad-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  list-style: none;
  margin: 10px 0 14px;
  padding: 0;
  font-size: 0.9rem;
}

.rad-legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
}

.rad-legend em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.84rem;
}

.rad-swatch {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--c);
  flex: none;
}

.rad-swatch-dashed {
  background: repeating-linear-gradient(
    to right,
    var(--c) 0 7px,
    transparent 7px 12px
  );
}

.eng-radar figcaption {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
  max-width: 72ch;
  margin: 0 auto;
  text-align: center;
}

/* --- bảng điểm --- */
.eng-table-wrap {
  overflow-x: auto;
  margin: 0 0 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.eng-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.eng-table caption {
  caption-side: bottom;
  padding: 12px 18px;
  color: var(--muted);
  font-size: 0.84rem;
  text-align: left;
  border-top: 1px solid var(--border);
}

.eng-table thead th {
  vertical-align: bottom;
  padding: 14px 10px;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text-strong);
  border-bottom: 1px solid var(--border);
}

.eng-table thead th:first-child {
  text-align: left;
  padding-left: 18px;
  min-width: 240px;
}

.eng-table thead th span {
  display: block;
  font-weight: 500;
  color: var(--muted);
  font-size: 0.72rem;
}

.eng-table thead abbr {
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
  cursor: help;
}

.eng-table tbody tr + tr th,
.eng-table tbody tr + tr td {
  border-top: 1px solid var(--border);
}

.eng-table tbody th {
  text-align: left;
  padding: 14px 14px 14px 18px;
  font-weight: 400;
}

.eng-table tbody th b {
  display: block;
  color: var(--text-strong);
  font-size: 0.96rem;
}

.eng-table tbody th span {
  display: block;
  color: var(--accent);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.eng-table tbody th small {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.eng-row-self th b {
  color: var(--accent);
}

.eng-row-self {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Điểm là đại lượng có thứ tự nên nền dùng một sắc độ duy nhất, đậm dần theo
   giá trị. Con số vẫn nằm trong ô, nên thông tin không phụ thuộc màu. */
.eng-score {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-strong);
  padding: 14px 8px;
}

.sc-0 {
  color: var(--muted);
}

.sc-1 {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.sc-2 {
  background: color-mix(in srgb, var(--accent) 11%, transparent);
}

.sc-3 {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.sc-4 {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.sc-5 {
  background: color-mix(in srgb, var(--accent) 29%, transparent);
}

.eng-sub,
.eng-total {
  text-align: center;
  padding: 14px 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

.eng-sub {
  border-left: 1px solid var(--border);
}

.eng-total {
  font-weight: 800;
  color: var(--text-strong);
}

.eng-sub span,
.eng-total span {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.8rem;
}

.eng-total.is-best {
  color: var(--accent);
}

/* ghi chú phương pháp chấm */
.eng-method {
  margin-top: 6px;
}

.eng-method h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.eng-method p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* hợp và không hợp */
.eng-fits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.eng-fit h3 {
  font-size: 1.05rem;
  margin-bottom: 14px;
}

.eng-fit li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 11px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

.eng-fit li::before {
  position: absolute;
  left: 0;
  font-weight: 800;
}

.eng-fit-good li::before {
  content: '✓';
  color: var(--accent);
}

.eng-fit-bad li::before {
  content: '✕';
  color: var(--amber);
}

.section-status {
  background: var(--bg-alt);
}

/* link từ thẻ Engine ở trang chủ sang trang này */
.engine-more {
  margin: 0 0 26px;
}

.engine-more a {
  font-weight: 600;
  font-size: 0.94rem;
}

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

@media (max-width: 760px) {
  .eng-decisions,
  .eng-fits,
  .eng-criteria {
    grid-template-columns: minmax(0, 1fr);
  }

  .eng-table thead th:first-child {
    min-width: 200px;
  }

  .eng-glossary > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}