/* =====================================================================
   THEME — design tokens + class custom (ngoài Tailwind)
   Hệ màu GIỮ TUYỆT ĐỐI (~60/30/10):
     trắng #ffffff  → nền nội dung chính (section sáng)
     xám   #f7f8f8  → nền muted xen kẽ section (nền chính cùng trắng)
     deep  #172f29  → chrome (header/footer) + màu chữ tiêu đề (heading)
     accent #2fb3b7 → chấm phá: CTA, link, đường nối bản đồ, viền active
     xám   thang    → chữ phụ, đường kẻ, trạng thái dim
   Khai báo CÙNG giá trị với tailwind.config trong index.html.
   ===================================================================== */

:root {
  /* deep — nền sâu & shade phái sinh (surface trên nền tối) */
  --deep:      #172f29;
  --deep-700:  #1f3d35;
  --deep-600:  #244a40;
  --deep-900:  #10211c;  /* phái sinh ĐẬM hơn — chỉ panel Lớp 3 (lớp sâu nhất) */

  /* accent — cyan thương hiệu */
  --accent:       #2fb3b7;
  --accent-hover: #39c4c8;
  --accent-tint:  rgba(47, 179, 183, 0.12);

  /* trắng & thang xám */
  --white:    #ffffff;
  --gray-50:  #f7f8f8;
  --gray-200: #e3e6e5;
  --gray-400: #9aa4a1;
  --gray-500: #6b7775;
  --gray-700: #334240;

  /* tiện ích */
  --ring: rgba(47, 179, 183, 0.45);
}

html { scroll-behavior: smooth; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  color: var(--gray-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* ---- Container chung ---- */
.bg-container { width: 100%; max-width: 1180px; margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem); }

/* =====================================================================
   HEADER — Glassmorphism trắng trong suốt mờ. Nav items = tất cả sections.
   Active item = viền gradient chạy liên tục (conic-gradient xoay).
   ===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  border-bottom: 1px solid rgba(23, 47, 41, 0.08);
  box-shadow: 0 1px 24px -6px rgba(23, 47, 41, 0.08);
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 32px -8px rgba(23, 47, 41, 0.12);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 3.75rem; gap: 1rem;
}

/* ---- Brand ---- */
.header-brand {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
  color: var(--deep); text-decoration: none;
  transition: color .2s ease;
}
.header-brand:hover { color: var(--accent); }
.brand-icon {
  font-size: 1.25rem; color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(47, 179, 183, 0.4));
  transition: filter .2s ease;
}
.header-brand:hover .brand-icon {
  filter: drop-shadow(0 0 10px rgba(47, 179, 183, 0.7));
}

/* ---- Nav desktop ---- */
.header-nav {
  display: none; align-items: center; gap: .35rem;
}
@media (min-width: 900px) { .header-nav { display: flex; } }

.nav-item {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .38rem .72rem; border-radius: 8px;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  color: var(--gray-500); text-decoration: none;
  background: transparent; border: 1.5px solid transparent;
  transition: color .22s ease, background .22s ease, border-color .22s ease;
}
.nav-item:hover {
  color: var(--accent);
  background: rgba(47, 179, 183, 0.06);
}

/* ---- Active nav item: viền chạy gradient liên tục ---- */
.nav-item.is-active {
  color: var(--accent); font-weight: 700;
  border-color: transparent; background: transparent;
}
/* Lớp ngoài: conic xoay → tạo vành gradient */
.nav-item.is-active::before {
  content: ""; position: absolute; z-index: -2;
  left: 50%; top: 50%; width: 300%; aspect-ratio: 1;
  background: conic-gradient(
    var(--accent) 0deg,
    var(--accent-hover) 60deg,
    rgba(47, 179, 183, 0.15) 120deg,
    transparent 180deg,
    rgba(47, 179, 183, 0.15) 240deg,
    var(--accent-hover) 300deg,
    var(--accent) 360deg
  );
  transform: translate(-50%, -50%);
  animation: nav-border-spin 2.8s linear infinite;
}
/* Lớp trong: nền trắng mờ che giữa → chỉ lộ viền 1.5px */
.nav-item.is-active::after {
  content: ""; position: absolute; z-index: -1;
  inset: 1.5px; border-radius: 6.5px;
  background: rgba(255, 255, 255, 0.92);
  /* Thêm shimmer nhẹ */
  background-image: linear-gradient(
    115deg,
    transparent 30%,
    rgba(47, 179, 183, 0.08) 50%,
    transparent 70%
  );
  background-size: 250% 100%;
  animation: nav-shimmer 3s ease-in-out infinite;
}

@keyframes nav-border-spin {
  to { transform: translate(-50%, -50%) rotate(1turn); }
}
@keyframes nav-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* ---- Hamburger mobile ---- */
.header-burger {
  display: flex; flex-direction: column; justify-content: center; gap: 4.5px;
  width: 2rem; height: 2rem; padding: .25rem;
  background: none; border: none; cursor: pointer;
}
.header-burger span {
  display: block; width: 100%; height: 2px; border-radius: 2px;
  background: var(--deep);
  transition: transform .3s ease, opacity .3s ease, background .2s ease;
}
.header-burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.header-burger.is-open span:nth-child(2) { opacity: 0; }
.header-burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 900px) { .header-burger { display: none; } }

/* ---- Mobile nav ---- */
.mobile-nav {
  display: flex; flex-direction: column; gap: .25rem;
  max-height: 0; overflow: hidden; opacity: 0;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: max-height .4s cubic-bezier(.4, 0, .2, 1),
              opacity .3s ease,
              padding .4s ease;
}
.mobile-nav.is-open {
  max-height: 32rem; opacity: 1;
  padding: .5rem clamp(1rem, 4vw, 2.5rem) 1rem;
}
@media (min-width: 900px) { .mobile-nav { display: none !important; } }

.mobile-nav-item {
  position: relative; isolation: isolate; overflow: hidden;
  display: block; padding: .6rem .85rem; border-radius: 10px;
  font-size: .88rem; font-weight: 600; color: var(--gray-500);
  text-decoration: none; border: 1.5px solid transparent;
  transition: color .2s ease, background .2s ease;
}
.mobile-nav-item:hover { color: var(--accent); background: rgba(47, 179, 183, 0.05); }
.mobile-nav-item.is-active {
  color: var(--accent); font-weight: 700;
  border-color: transparent; background: transparent;
}
.mobile-nav-item.is-active::before {
  content: ""; position: absolute; z-index: -2;
  left: 50%; top: 50%; width: 300%; aspect-ratio: 1;
  background: conic-gradient(
    var(--accent) 0deg,
    var(--accent-hover) 60deg,
    rgba(47, 179, 183, 0.15) 120deg,
    transparent 180deg,
    rgba(47, 179, 183, 0.15) 240deg,
    var(--accent-hover) 300deg,
    var(--accent) 360deg
  );
  transform: translate(-50%, -50%);
  animation: nav-border-spin 2.8s linear infinite;
}
.mobile-nav-item.is-active::after {
  content: ""; position: absolute; z-index: -1;
  inset: 1.5px; border-radius: 8.5px;
  background: rgba(255, 255, 255, 0.95);
  background-image: linear-gradient(
    115deg,
    transparent 30%,
    rgba(47, 179, 183, 0.08) 50%,
    transparent 70%
  );
  background-size: 250% 100%;
  animation: nav-shimmer 3s ease-in-out infinite;
}

/* ---- Nhãn section (eyebrow) ---- */
.section-eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}

/* =====================================================================
   TODO BANNER — chỗ "chừa sẵn" cho các Phần làm sau (B→G).
   Mỗi mount-point chưa làm hiển thị banner này, ghi rõ Phần nào sẽ điền.
   Khi làm Phần đó: render module thay thế nội dung trong mount-point.
   ===================================================================== */
.todo-banner {
  border: 1.5px dashed var(--gray-400);
  border-radius: 14px;
  background:
    repeating-linear-gradient(45deg,
      var(--gray-50), var(--gray-50) 12px,
      #eef0ef 12px, #eef0ef 24px);
  color: var(--gray-500);
  padding: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
}
.todo-banner .todo-tag {
  display: inline-block; margin-bottom: .6rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  padding: .25rem .7rem; border-radius: 999px;
}
.todo-banner .todo-title { font-weight: 700; color: var(--gray-700); font-size: 1.05rem; }
.todo-banner .todo-desc  { margin-top: .35rem; font-size: .9rem; }

/* ---- Banner trên nền tối (cho section nền deep) ---- */
.todo-banner--dark {
  border-color: rgba(255,255,255,.22);
  background:
    repeating-linear-gradient(45deg,
      var(--deep-700), var(--deep-700) 12px,
      var(--deep-600) 12px, var(--deep-600) 24px);
  color: rgba(255,255,255,.7);
}
.todo-banner--dark .todo-title { color: rgba(255,255,255,.92); }

/* =====================================================================
   NÚT (dùng lại nhiều nơi: CTA hero, liên hệ cuối…) — nền sáng.
   accent filled = hành động chính · ghost = phụ.
   ===================================================================== */
.btn-accent {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--accent); color: #fff;
  font-weight: 600; font-size: .95rem; line-height: 1;
  padding: .8rem 1.5rem; border-radius: 10px;
  box-shadow: 0 8px 22px -8px rgba(47,179,183,.55);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-accent:hover {
  background: var(--accent-hover); transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(47,179,183,.65);
}
.btn-accent span { transition: transform .2s ease; }
.btn-accent:hover span { transform: translateX(3px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; color: var(--deep);
  font-weight: 600; font-size: .95rem; line-height: 1;
  padding: .8rem 1.3rem; border-radius: 10px;
  border: 1.5px solid var(--gray-200);
  transition: border-color .2s ease, color .2s ease;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* =====================================================================
   HERO (Lớp 0) — nền muted SÁNG; accent chỉ chấm phá (số, CTA, glow nhạt).
   KHÔNG dùng deep làm nền. Glow accent rất nhạt để tạo chiều sâu nhẹ.
   ===================================================================== */
#hero { position: relative; overflow: hidden; }
#hero::before {
  content: ""; position: absolute; top: -25%; right: -8%;
  width: 42rem; height: 42rem; max-width: 92vw; max-height: 92vw;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(47,179,183,.13), transparent 62%);
}
#hero-content { position: relative; z-index: 1; }

.hero-title {
  margin-top: 1rem; max-width: 22ch;
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
  color: var(--deep);
}
.hero-sub {
  margin-top: 1.25rem; max-width: 48ch;
  font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6;
  color: var(--gray-500);
}
.hero-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }

/* 3 con số lớn */
.hero-stats { margin-top: 3rem; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .hero-stats { grid-template-columns: repeat(3, 1fr); max-width: 46rem; }
}
.hero-stat {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 16px;
  padding: 1.4rem 1.5rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hero-stat:hover {
  border-color: var(--accent);
  box-shadow: 0 16px 34px -20px rgba(23,47,41,.35);
  transform: translateY(-2px);
}
.hero-stat__num {
  font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800;
  color: var(--accent); line-height: 1; letter-spacing: -.02em;
  white-space: nowrap;
}
.hero-stat__sub { margin-top: .55rem; font-size: .85rem; color: var(--gray-500); line-height: 1.4; }

/* 4 mục tiêu khách hàng */
.hero-goals-wrap { margin-top: 3rem; }
.hero-goals-label {
  margin-bottom: 1rem; font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gray-400);
}
.hero-goals { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .hero-goals { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hero-goals { grid-template-columns: repeat(4, 1fr); } }
.hero-goal {
  display: flex; gap: .75rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px;
  padding: .9rem 1rem;
  transition: border-color .2s ease;
}
.hero-goal:hover { border-color: var(--accent); }
.hero-goal__icon { font-size: 1.4rem; line-height: 1.25; }
.hero-goal__ten { font-weight: 700; color: var(--deep); font-size: .95rem; }
.hero-goal__mo { margin-top: .15rem; font-size: .82rem; color: var(--gray-500); line-height: 1.45; }

/* =====================================================================
   LƯỚI 8 SẢN PHẨM (Lớp 1 — Phần C) — nền section trắng; thẻ trắng viền
   xám, hover/focus → accent. Bấm thẻ mở drawer (Lớp 2). CRM = xương sống.
   ===================================================================== */
.grid-lead { font-size: .95rem; color: var(--gray-500); max-width: 62ch; line-height: 1.6; }
.grid-lead em { color: var(--deep); font-style: normal; font-weight: 600; }
.grid-legend { margin-top: .6rem; font-size: .8rem; color: var(--gray-400); }

.pgrid { margin-top: 1.5rem; display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pgrid { grid-template-columns: repeat(4, 1fr); } }

.pcard {
  display: flex; flex-direction: column; height: 100%;
  width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 16px;
  padding: 1.25rem 1.25rem 1.1rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pcard:hover {
  border-color: var(--accent);
  box-shadow: 0 18px 38px -22px rgba(23,47,41,.42);
  transform: translateY(-3px);
}
.pcard:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.pcard__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pcard__no {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: var(--gray-400);
}
.pcard__flags { display: flex; align-items: center; gap: .4rem; }
.pcard__prio { font-size: .9rem; line-height: 1; }
.pcard__hub {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); background: var(--accent-tint);
  padding: .15rem .5rem; border-radius: 999px; white-space: nowrap;
}

.pcard__ten {
  margin-top: .75rem; font-weight: 700; font-size: 1.02rem;
  line-height: 1.3; color: var(--deep);
}
.pcard__tomtat {
  margin-top: .5rem; flex: 1;
  font-size: .86rem; line-height: 1.5; color: var(--gray-500);
}

.pcard__meta { margin-top: 1rem; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.pcard__budget { font-size: 1rem; font-weight: 800; color: var(--accent); letter-spacing: -.01em; }
.pcard__chip {
  font-size: .72rem; font-weight: 600; color: var(--gray-500);
  background: var(--gray-50); border: 1px solid var(--gray-200);
  padding: .15rem .55rem; border-radius: 999px;
}
.pcard__nentang { margin-left: auto; font-size: .85rem; line-height: 1; }

.pcard__more {
  margin-top: .85rem; padding-top: .7rem; border-top: 1px solid var(--gray-200);
  display: flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 600; color: var(--gray-400);
  transition: color .2s ease;
}
.pcard__more span { transition: transform .2s ease; }
.pcard:hover .pcard__more, .pcard:focus-visible .pcard__more { color: var(--accent); }
.pcard:hover .pcard__more span, .pcard:focus-visible .pcard__more span { transform: translateX(3px); }

/* CRM — xương sống dữ liệu: viền accent thường trực để nổi bật trong lưới. */
.pcard--hub { border-color: var(--accent); }
.pcard--hub .pcard__no { color: var(--accent); }

/* =====================================================================
   DRAWER DEEP-DIVE (Lớp 2 — Phần E) — MODAL GIỮA MÀN HÌNH, NỀN TRẮNG.
   Theo yêu cầu KH: KHÔNG trượt phải nữa — modal canh GIỮA, rộng ~50vw,
   nền trắng cho dễ đọc; accent chỉ chấm phá. Mở = pop (scale + fade).
   Nền tóm tắt mờ phía sau; đóng ✕ / Esc / click nền.
   ===================================================================== */
body.drawer-open { overflow: hidden; }

#drawer-root { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
#drawer-root.is-open { pointer-events: auto; }

.drawer-overlay {
  position: absolute; inset: 0;
  background: rgba(8, 18, 15, 0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .3s ease;
}
#drawer-root.is-open .drawer-overlay { opacity: 1; }

.drawer-panel {
  position: absolute; top: 50%; left: 50%;
  width: 50vw; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: var(--gray-700);
  border: 1px solid var(--gray-200); border-radius: 20px;
  box-shadow: 0 44px 120px -30px rgba(8,18,15,.55);
  transform: translate(-50%, -50%) scale(.96); opacity: 0;
  transition: transform .36s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
  will-change: transform, opacity;
}
#drawer-root.is-open .drawer-panel { transform: translate(-50%, -50%) scale(1); opacity: 1; }
@media (max-width: 900px) { .drawer-panel { width: 94vw; max-height: 92vh; } }

.drawer-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--gray-50); color: var(--gray-500);
  border: 1px solid var(--gray-200);
  font-size: 1rem; cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.drawer-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.drawer-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.drawer-body {
  flex: 1; overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem); padding-top: 3.5rem;
}

.drawer-eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.drawer-title {
  margin-top: .5rem; font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  font-weight: 800; line-height: 1.2; color: var(--deep);
}

.drawer-badges { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.dbadge {
  font-size: .75rem; font-weight: 600; color: var(--gray-700);
  background: var(--gray-50); border: 1px solid var(--gray-200);
  padding: .25rem .6rem; border-radius: 999px;
}
.dbadge--budget { color: #fff; background: var(--accent); border-color: transparent; font-weight: 800; }
.dbadge--hub { color: var(--accent); background: var(--accent-tint); border-color: rgba(47,179,183,.4); }

.drawer-tomtat { margin-top: 1.1rem; font-size: 1rem; line-height: 1.6; color: var(--gray-500); }

.dsec { margin-top: 1.8rem; }
.dsec__h {
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); padding-bottom: .5rem; border-bottom: 1px solid var(--gray-200);
}
.dsec__p { margin-top: .8rem; font-size: .92rem; line-height: 1.65; color: var(--gray-700); }

/* "Nỗi đau" — đối chiếu cách cũ (thủ công/Excel/giấy) ❌ → với hệ thống ✅.
   Palette-safe: vế CŨ = xám dịu (mờ), vế MỚI = accent (nổi bật). */
.dpains { margin-top: 1.1rem; display: grid; gap: .6rem; }
.dpains__head {
  display: grid; grid-template-columns: 1fr 1.6rem 1fr; gap: .5rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.dpains__col--cu  { color: var(--gray-500); }
.dpains__col--moi { color: var(--accent); grid-column: 3; }

.dpain {
  display: grid; grid-template-columns: 1fr 1.6rem 1fr; gap: .5rem; align-items: stretch;
}
.dpain__cu, .dpain__moi {
  display: flex; gap: .5rem; align-items: flex-start;
  padding: .7rem .8rem; border-radius: 10px;
  font-size: .86rem; line-height: 1.5;
}
.dpain__cu {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-left: 3px solid var(--gray-400); color: var(--gray-500);
}
.dpain__moi {
  background: var(--accent-tint); border: 1px solid rgba(47,179,183,.32);
  border-left: 3px solid var(--accent); color: var(--gray-700);
}
.dpain__cu p, .dpain__moi p { margin: 0; }
.dpain__ic { flex: none; font-size: .82rem; line-height: 1.6; }
.dpain__arrow {
  align-self: center; text-align: center; color: var(--accent);
  font-weight: 800; font-size: 1.1rem;
}

/* Hẹp (drawer trên mobile = 94vw) → xếp dọc, mũi tên xoay xuống. */
@media (max-width: 560px) {
  .dpains__head { display: none; }
  .dpain { grid-template-columns: 1fr; gap: .35rem; }
  .dpain__arrow { transform: rotate(90deg); font-size: 1rem; }
}

.dlist { margin-top: .8rem; list-style: none; display: grid; gap: .55rem; }
.dlist li { position: relative; padding-left: 1.4rem; font-size: .92rem; line-height: 1.5; color: var(--gray-700); }
.dlist li::before { content: "▸"; position: absolute; left: 0; color: var(--accent); }

/* Banner "chừa sẵn" (khi SP chưa có đặc tả) — nền sáng */
.drawer-l3 {
  margin-top: 2rem; border: 1.5px dashed var(--gray-200); border-radius: 12px;
  padding: 1rem 1.1rem; background: var(--gray-50);
}
.drawer-l3__tag {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-tint);
  padding: .2rem .6rem; border-radius: 999px;
}
.drawer-l3 p { margin-top: .6rem; font-size: .85rem; line-height: 1.55; color: var(--gray-500); }
.drawer-l3 code { font-size: .8rem; color: var(--gray-400); word-break: break-all; }

/* =====================================================================
   CTA "MỞ ĐẶC TẢ ĐẦY ĐỦ" — KHU VỰC GÂY CHÚ Ý (Lớp 3 gate).
   Theo yêu cầu KH: nổi bật rõ + viền gradient CHẠY liên tục + dải sáng
   LƯỚT qua. Viền chạy = conic-gradient xoay (::before) bị mặt trong
   (::after, inset 2px) che giữa → chỉ chừa vành sáng 2px. Dải sáng =
   gradient trắng quét ngang trên mặt trong (::after). Chạy offline, CSS thuần.
   ===================================================================== */
.drawer-l3--cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-radius: 14px; padding: 1.1rem 1.2rem; background: transparent;
  box-shadow: 0 10px 30px -16px rgba(47,179,183,.6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.drawer-l3--cta:hover, .drawer-l3--cta:focus-visible {
  outline: none; transform: translateY(-1px);
  box-shadow: 0 16px 42px -16px rgba(47,179,183,.75);
}
/* viền chạy — conic xoay phủ kín, bị ::after che giữa nên chỉ lộ vành 2px */
.drawer-l3--cta::before {
  content: ""; position: absolute; z-index: -2;
  left: 50%; top: 50%; width: 230%; aspect-ratio: 1;
  background: conic-gradient(var(--accent) 0deg, var(--accent-hover) 40deg,
    transparent 120deg, transparent 240deg, var(--accent) 320deg, var(--accent) 360deg);
  transform: translate(-50%, -50%);
  animation: l3cta-spin 3.4s linear infinite;
}
/* mặt trong (light cyan, đục) + dải sáng quét ngang */
.drawer-l3--cta::after {
  content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: 12px;
  background:
    linear-gradient(115deg, transparent 36%, rgba(255,255,255,.75) 50%, transparent 64%),
    #e8f9f9;
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: l3cta-sheen 2.8s linear infinite;
}
@keyframes l3cta-spin  { to { transform: translate(-50%, -50%) rotate(1turn); } }
@keyframes l3cta-sheen { 0% { background-position: 220% 0, 0 0; } 100% { background-position: -120% 0, 0 0; } }

.drawer-l3--cta .drawer-l3__tag { position: relative; }
.drawer-l3__cta {
  position: relative; margin-top: .7rem; display: flex; align-items: center; gap: .9rem;
  color: var(--deep); font-size: .9rem; line-height: 1.45; font-weight: 600;
}
.drawer-l3__cta-txt { flex: 1; }
.drawer-l3__arrow {
  flex: none; width: 2rem; height: 2rem; border-radius: 999px;
  display: grid; place-items: center; font-size: 1.05rem;
  color: #fff; background: var(--accent); font-weight: 800;
  box-shadow: 0 4px 12px -4px rgba(47,179,183,.7);
  transition: transform .2s ease;
}
.drawer-l3--cta:hover .drawer-l3__arrow,
.drawer-l3--cta:focus-visible .drawer-l3__arrow { transform: translateX(3px); }

/* =====================================================================
   LỚP 3 — PANEL ĐẶC TẢ VẬN HÀNH (cấp 4) — MODAL GIỮA MÀN HÌNH, NỀN TRẮNG.
   Xếp CHỒNG lên Lớp 2 (sâu hơn 1 lớp): modal canh GIỮA, rộng ~50vw, nền
   trắng. Khi mở, panel Lớp 2 lùi nhẹ ra sau (scale + mờ) → cảm giác "đi sâu".
   ===================================================================== */
.drawer-l3-panel {
  position: absolute; top: 50%; left: 50%;
  width: 50vw; max-height: 92vh;
  background: #fff; color: var(--gray-700);
  border: 1px solid var(--gray-200); border-radius: 20px;
  box-shadow: 0 50px 140px -30px rgba(8,18,15,.6);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translate(-50%, -50%) scale(.96); opacity: 0;
  visibility: hidden; pointer-events: none;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, visibility 0s linear .4s;
  will-change: transform, opacity; z-index: 2;
}
#drawer-root.l3-open .drawer-l3-panel {
  transform: translate(-50%, -50%) scale(1); opacity: 1;
  visibility: visible; pointer-events: auto; transition-delay: 0s;
}
@media (max-width: 900px) { .drawer-l3-panel { width: 94vw; max-height: 94vh; } }
/* Panel Lớp 2 lùi nhẹ ra sau khi Lớp 3 mở → cảm giác "đi sâu hơn" */
#drawer-root.l3-open .drawer-panel { transform: translate(-50%, -50%) scale(.93); opacity: .5; }

.l3-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem clamp(1.1rem, 3vw, 1.6rem);
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.l3-back {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem; font-weight: 600; color: var(--gray-500);
  background: transparent; border: 0; cursor: pointer; padding: .35rem .2rem;
  transition: color .2s ease;
}
.l3-back:hover, .l3-back:focus-visible { color: var(--accent); outline: none; }
.l3-close { position: static; top: auto; right: auto; }

.l3-body {
  flex: 1; overflow-y: auto;
  padding: clamp(1.3rem, 3.5vw, 2.2rem);
}

.l3-eyebrow {
  font-size: .76rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.l3-title {
  margin-top: .45rem; font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 800; line-height: 1.2; color: var(--deep);
}
.l3-lead { margin-top: .7rem; font-size: .9rem; line-height: 1.6; color: var(--gray-500); }

.l3-sec { margin-top: 2rem; }
.l3-sec__h {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); padding-bottom: .5rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--gray-200);
}

/* Vai trò người dùng — thẻ nhỏ */
.l3-roles { display: grid; gap: .7rem; }
@media (min-width: 540px) { .l3-roles { grid-template-columns: 1fr 1fr; } }
.l3-role {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-left: 3px solid var(--accent); border-radius: 10px; padding: .8rem .9rem;
}
.l3-role__ten { font-size: .92rem; font-weight: 700; color: var(--deep); }
.l3-role__dung { margin-top: .35rem; font-size: .82rem; line-height: 1.5; color: var(--gray-700); }
.l3-role__quyen { margin-top: .45rem; font-size: .78rem; line-height: 1.45; color: var(--gray-500); }
.l3-role__quyen span {
  font-weight: 700; color: var(--accent); text-transform: uppercase;
  letter-spacing: .04em; font-size: .68rem; margin-right: .25rem;
}

/* Ma trận Web vs App */
.l3-mx-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--gray-200); }
.l3-mx { width: 100%; border-collapse: collapse; font-size: .85rem; }
.l3-mx thead th {
  text-align: left; font-weight: 700; color: var(--gray-700);
  padding: .6rem .8rem; background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200); white-space: nowrap;
}
.l3-mx thead th:not(:first-child) { text-align: center; width: 5.5rem; }
.l3-mx__nhom td {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-tint);
  padding: .45rem .8rem;
}
.l3-mx__cn { padding: .5rem .8rem; color: var(--gray-700); }
.l3-mx__c  { padding: .5rem .8rem; text-align: center; vertical-align: middle; }
.l3-mx__grp tr { border-top: 1px solid var(--gray-200); }
.l3-yes { font-size: .9rem; }
.l3-no  { color: var(--gray-400); }
.l3-note {
  display: inline-block; font-size: .72rem; font-weight: 600; color: var(--accent);
  background: var(--accent-tint); padding: .1rem .45rem; border-radius: 999px; line-height: 1.4;
}

/* Thẻ chức năng trọng yếu */
.l3-cards { display: grid; gap: .85rem; }
.l3-card {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 12px; padding: 1rem 1.05rem;
}
.l3-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; }
.l3-card__no {
  flex: none; font-size: .7rem; font-weight: 800; color: #fff;
  background: var(--accent); border-radius: 6px; padding: .12rem .4rem;
}
.l3-card__ten { flex: 1; min-width: 8rem; font-size: .95rem; font-weight: 700; color: var(--deep); }
.l3-card__plats { display: flex; flex-wrap: wrap; gap: .35rem; }
.l3-plat {
  font-size: .68rem; font-weight: 600; color: var(--gray-700);
  background: #fff; border: 1px solid var(--gray-200);
  padding: .12rem .45rem; border-radius: 999px; white-space: nowrap;
}
.l3-card__muc { margin-top: .6rem; font-size: .86rem; line-height: 1.55; color: var(--gray-700); }
.l3-card__meta { margin-top: .8rem; display: grid; gap: .5rem; }
.l3-row {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: .6rem;
  font-size: .82rem; line-height: 1.5;
}
.l3-row dt {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); padding-top: .1rem;
}
.l3-row dd { margin: 0; color: var(--gray-700); }
@media (max-width: 420px) {
  .l3-row { grid-template-columns: 1fr; gap: .15rem; }
}

/* Tích hợp liên hệ thống */
.l3-int-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--gray-200); }
.l3-int { width: 100%; border-collapse: collapse; font-size: .84rem; }
.l3-int td { padding: .6rem .8rem; vertical-align: top; border-top: 1px solid var(--gray-200); }
.l3-int tr:first-child td { border-top: 0; }
.l3-int__he { font-weight: 700; color: var(--deep); white-space: nowrap; width: 12rem; }
.l3-int__td { color: var(--gray-700); line-height: 1.5; }
@media (max-width: 480px) {
  .l3-int, .l3-int tbody, .l3-int tr, .l3-int td { display: block; width: auto; }
  .l3-int__he { white-space: normal; padding-bottom: .15rem; }
  .l3-int__td { padding-top: 0; }
  .l3-int tr { padding: .5rem 0; border-top: 1px solid var(--gray-200); }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-panel, .drawer-l3-panel { transition: opacity .2s ease; }
  .drawer-l3--cta::before, .drawer-l3--cta::after { animation: none; }
}

/* =====================================================================
   BẢN ĐỒ LIÊN KẾT SẢN PHẨM (Lớp 1 — Phần D) — nền section SÁNG (muted).
   SVG hub-spoke: CRM = xương sống ở trung tâm (node nền accent), 7 SP còn
   lại quanh ellipse; đường nối xám nhạt khi nghỉ. Rê/focus 1 node → cạnh &
   node liên quan sáng accent + glow, phần còn lại dim (xám mờ). Click node
   → drawer Lớp 2. Mobile (≤767px): ẩn SVG, hiện danh sách kết nối.
   ===================================================================== */
.map-hint { max-width: 66ch; font-size: .95rem; line-height: 1.6; color: var(--gray-500); }
.map-hint em { color: var(--deep); font-style: normal; font-weight: 600; }

.map-svg-wrap { position: relative; margin-top: 1.5rem; }
.map-svg { width: 100%; height: auto; display: block; overflow: visible; }

.map-legend {
  margin-top: .9rem; font-size: .8rem; color: var(--gray-400);
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem;
}
.map-legend__hub {
  font-weight: 700; color: var(--accent);
  background: var(--accent-tint); padding: .15rem .6rem; border-radius: 999px;
}

/* ---- Cạnh ---- */
.mapedge {
  stroke: var(--gray-200); stroke-width: 1.6; fill: none;
  transition: stroke .22s ease, stroke-width .22s ease, opacity .22s ease;
}

/* ---- Node ---- */
.mapnode { cursor: pointer; transition: opacity .22s ease; }
.mapnode__box {
  fill: #fff; stroke: var(--gray-200); stroke-width: 1.6;
  transition: stroke .22s ease, stroke-width .22s ease, fill .22s ease, filter .22s ease;
}
.mapnode__no    { fill: var(--gray-400); font-size: 11px;   font-weight: 700; letter-spacing: .04em; }
.mapnode__label { fill: var(--deep);     font-size: 14.5px; font-weight: 700; }
.mapnode__tag   { fill: rgba(255,255,255,.82); font-size: 10px; font-weight: 600; letter-spacing: .02em; }

/* CRM (hub) — luôn nổi: nền accent, chữ trắng, glow nhẹ */
.mapnode--hub .mapnode__box {
  fill: var(--accent); stroke: var(--accent);
  filter: drop-shadow(0 10px 22px rgba(47,179,183,.40));
}
.mapnode--hub .mapnode__no    { fill: rgba(255,255,255,.85); }
.mapnode--hub .mapnode__label { fill: #fff; font-size: 19px; }

/* Focus bàn phím (a11y) */
.mapnode:focus-visible { outline: none; }
.mapnode:focus-visible .mapnode__box {
  stroke: var(--accent); stroke-width: 2.4;
  filter: drop-shadow(0 0 6px var(--accent));
}

/* ---- Trạng thái ACTIVE (1 node đang rê/chọn) → dim phần còn lại ---- */
.map-svg-wrap.is-active .mapedge { opacity: .12; }
.map-svg-wrap.is-active .mapnode { opacity: .3; }

.map-svg-wrap.is-active .mapedge.is-hot {
  stroke: var(--accent); stroke-width: 2.6; opacity: 1;
  filter: drop-shadow(0 0 5px rgba(47,179,183,.55));
}
.map-svg-wrap.is-active .mapnode.is-hot { opacity: 1; }
.map-svg-wrap.is-active .mapnode.is-hot:not(.mapnode--hub) .mapnode__box {
  stroke: var(--accent); stroke-width: 2.2;
  filter: drop-shadow(0 8px 18px rgba(23,47,41,.18));
}
.map-svg-wrap.is-active .mapnode.is-source .mapnode__box {
  stroke-width: 2.8;
  filter: drop-shadow(0 0 7px rgba(47,179,183,.5));
}
.map-svg-wrap.is-active .mapnode--hub.is-hot .mapnode__box { fill: var(--accent); }

/* ---- Fallback danh sách (mobile ≤767px) ---- */
.map-list { display: none; list-style: none; margin: 1.5rem 0 0; padding: 0; }
@media (max-width: 767px) {
  .map-svg-wrap { display: none; }
  .map-list { display: flex; flex-direction: column; gap: .7rem; }
}
.mrow {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 14px;
  padding: .85rem 1rem;
}
.mrow--hub { border-color: var(--accent); }
.mrow__head {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
}
.mrow__no  { font-size: .7rem; font-weight: 700; color: var(--gray-400); white-space: nowrap; }
.mrow--hub .mrow__no { color: var(--accent); }
.mrow__ten { font-weight: 700; color: var(--deep); font-size: .95rem; }
.mrow__hub {
  margin-left: auto; font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--accent); background: var(--accent-tint);
  padding: .12rem .5rem; border-radius: 999px; white-space: nowrap;
}
/* (Kết nối của mỗi hàng dùng khối .conn-* chung — xem cuối file.) */

/* =====================================================================
   SECTION BỔ TRỢ (Lớp 1.5 — Phần F): timeline · thanh toán · pháp lý ·
   🎁 miễn phí · bảo hành · liên hệ. Nền section sáng (trắng/muted xen kẽ);
   thẻ trắng viền xám; accent CHỈ chấm phá (số, badge, icon, nút, tỷ trọng).
   ===================================================================== */
.sec-lead { max-width: 64ch; font-size: 1rem; line-height: 1.65; color: var(--gray-500); }
.sec-lead em { color: var(--deep); font-style: normal; font-weight: 600; }
.sec-note { margin-top: 1.25rem; font-size: .82rem; line-height: 1.55; color: var(--gray-400); }

/* ---- Timeline 3 giai đoạn + Go-live ---- */
.tl { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .tl { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tl { grid-template-columns: repeat(4, 1fr); } }
.tl-step {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 16px;
  padding: 1.25rem; border-top: 3px solid var(--accent);
}
.tl-step--go { border-top-color: var(--deep); }
.tl-step__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.tl-step__badge { font-weight: 800; font-size: 1.05rem; color: var(--accent); letter-spacing: -.01em; }
.tl-step--go .tl-step__badge { color: var(--deep); }
.tl-step__time { font-size: .78rem; font-weight: 600; color: var(--gray-400); }
.tl-step__sp { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.tl-chip {
  font-size: .74rem; font-weight: 600; color: var(--gray-700);
  background: var(--gray-50); border: 1px solid var(--gray-200);
  padding: .18rem .55rem; border-radius: 999px;
}
.tl-step__ms { margin-top: .9rem; font-size: .86rem; line-height: 1.5; color: var(--gray-500); }
.tl-step__ms::before { content: "▸ "; color: var(--accent); font-weight: 700; }

/* ---- Thanh toán 5 đợt ---- */
.pay-bar { display: flex; gap: 3px; height: 2.4rem; border-radius: 8px; overflow: hidden; }
.pay-seg {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  background: rgba(47,179,183,.12); color: var(--accent);
  font-size: .78rem; font-weight: 700;
}
.pay-seg:nth-child(odd) { background: rgba(47,179,183,.24); }
.pay-seg__pct { white-space: nowrap; }
.pay-list { margin-top: 1.25rem; list-style: none; padding: 0; display: grid; gap: .6rem; }
.pay-row {
  display: flex; align-items: center; gap: .9rem;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: .8rem 1rem;
}
.pay-row__no {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 999px;
  display: grid; place-items: center; font-weight: 800; font-size: .85rem;
  color: #fff; background: var(--accent);
}
.pay-row__body { flex: 1; min-width: 0; }
.pay-row__moc { font-weight: 600; color: var(--deep); font-size: .9rem; line-height: 1.4; }
.pay-row__sum { font-size: .78rem; color: var(--gray-400); margin-top: .1rem; }
.pay-row__pct { flex: none; font-weight: 800; font-size: 1.1rem; color: var(--accent); }

/* ---- Thanh toán: 2 lộ trình (tab switch) ---- */
.pay-tabs {
  display: grid; grid-template-columns: 1fr; gap: .6rem; margin-top: 1.5rem;
}
@media (min-width: 640px) { .pay-tabs { grid-template-columns: 1fr 1fr; } }
.pay-tab {
  display: flex; align-items: center; gap: .75rem; text-align: left;
  background: #fff; border: 1.5px solid var(--gray-200); border-radius: 14px;
  padding: .85rem 1rem; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.pay-tab:hover { border-color: var(--accent); }
.pay-tab.is-active {
  border-color: var(--accent); background: var(--accent-tint);
  box-shadow: 0 1px 0 var(--accent) inset, 0 0 0 1px var(--accent);
}
.pay-tab__badge { font-size: 1.5rem; line-height: 1; flex: none; }
.pay-tab__main { display: flex; flex-direction: column; min-width: 0; }
.pay-tab__ten { font-weight: 700; color: var(--deep); font-size: .95rem; }
.pay-tab__rec {
  display: inline-block; margin-left: .35rem; vertical-align: middle;
  font-size: .62rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: #fff; background: var(--accent); border-radius: 999px; padding: .1rem .45rem;
}
.pay-tab__sodot { font-size: .78rem; color: var(--gray-400); margin-top: .12rem; }
.pay-panel { margin-top: 1.5rem; }
.pay-panel[hidden] { display: none; }
.pay-panel__mo {
  max-width: 70ch; font-size: .9rem; line-height: 1.6; color: var(--gray-500);
  margin-bottom: 1.1rem; padding-left: .8rem; border-left: 3px solid var(--accent);
}

/* ---- Lộ trình B: bảng theo từng sản phẩm ---- */
.payb-list { margin-top: 1.25rem; list-style: none; padding: 0; display: grid; gap: .55rem; }
.payb-row {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: .75rem 1rem;
}
.payb-row__no {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 999px;
  display: grid; place-items: center; font-weight: 800; font-size: .85rem;
  color: var(--accent); background: var(--accent-tint); border: 1.5px solid var(--accent);
}
.payb-row__main { flex: 1 1 14rem; min-width: 0; }
.payb-row__ten { font-weight: 600; color: var(--deep); font-size: .9rem; line-height: 1.4; }
.payb-row__ns { font-size: .76rem; color: var(--gray-400); margin-top: .1rem; }
.payb-row__splits { display: flex; align-items: stretch; gap: .4rem; flex: none; }
.payb-row__plus { display: grid; place-items: center; color: var(--gray-400); font-weight: 700; }
.payb-pill {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-width: 5.2rem; border-radius: 9px; padding: .35rem .6rem;
  font-weight: 800; font-size: .92rem; color: var(--deep);
}
.payb-pill__lbl {
  font-weight: 600; font-size: .64rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--gray-500); margin-bottom: .05rem;
}
.payb-pill--a { background: var(--accent-tint); }
.payb-pill--b { background: rgba(47, 179, 183, 0.24); }
.payb-total {
  margin-top: 1rem; display: grid; gap: .55rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .payb-total { grid-template-columns: repeat(3, 1fr); } }
.payb-total__cell {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px;
  padding: .7rem .9rem; font-size: .82rem; color: var(--gray-500);
  display: flex; flex-direction: column; gap: .15rem;
}
.payb-total__cell b { font-size: 1.15rem; font-weight: 800; color: var(--deep); }
.payb-total__cell--sum { border-color: var(--accent); background: var(--accent-tint); }
.payb-total__cell--sum b { color: var(--accent); }

/* ---- Cơ sở pháp lý ---- */
.legal { margin-top: 1.5rem; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .legal { grid-template-columns: repeat(2, 1fr); } }
.legal-card {
  display: flex; gap: 1rem; background: #fff; border: 1px solid var(--gray-200);
  border-radius: 16px; padding: 1.4rem; border-left: 3px solid var(--accent);
}
.legal-card__ic { font-size: 1.8rem; line-height: 1; }
.legal-card__ma { font-weight: 800; color: var(--deep); font-size: 1.02rem; }
.legal-card__noi { margin-top: .4rem; font-size: .88rem; line-height: 1.55; color: var(--gray-500); }

/* ---- 🎁 Miễn phí + dịch vụ bên thứ 3 ---- */
.free-wrap { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .free-wrap { grid-template-columns: 1fr 1fr; } }
.free-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 16px; padding: 1.4rem; }
.free-card--gift { border-color: var(--accent); background: var(--accent-tint); }
.free-card__h { font-weight: 800; color: var(--deep); font-size: 1rem; }
.gift-list { margin-top: 1rem; list-style: none; padding: 0; display: grid; gap: .7rem; }
.gift { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.gift__val { font-weight: 700; color: var(--gray-400); text-decoration: line-through; }
.gift__name { color: var(--deep); font-weight: 600; font-size: .9rem; }
.gift__tag {
  margin-left: auto; font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--accent); padding: .15rem .55rem; border-radius: 999px; white-space: nowrap;
}
.third-list { margin-top: 1rem; list-style: none; padding: 0; display: grid; gap: .5rem; }
.third-list li { position: relative; padding-left: 1.3rem; font-size: .88rem; color: var(--gray-700); line-height: 1.45; }
.third-list li::before { content: "•"; position: absolute; left: .3rem; color: var(--accent); font-weight: 700; }
.free-card__note { margin-top: 1rem; font-size: .78rem; line-height: 1.5; color: var(--gray-400); }

/* ---- Bảo hành 12 tháng ---- */
.wr { list-style: none; padding: 0; display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .wr { grid-template-columns: repeat(2, 1fr); } }
.wr-item {
  display: flex; align-items: flex-start; gap: .7rem;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 1rem 1.1rem;
  font-size: .9rem; line-height: 1.5; color: var(--gray-700);
}
.wr-item__ic {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 999px; margin-top: .05rem;
  display: grid; place-items: center; font-size: .8rem; font-weight: 800;
  color: #fff; background: var(--accent);
}

/* ---- Liên hệ / CTA cuối ---- */
.cta-final {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 20px;
  padding: clamp(1.75rem, 5vw, 3rem); text-align: center;
}
.cta-final__nums {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem;
  font-size: .85rem; color: var(--gray-500);
}
.cta-final__nums b { color: var(--accent); font-size: 1.4rem; font-weight: 800; margin-right: .35rem; }
.cta-final__h { margin-top: 1.5rem; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; color: var(--deep); }
.cta-final__p { margin: .75rem auto 0; max-width: 52ch; font-size: .95rem; line-height: 1.6; color: var(--gray-500); }
.cta-final__actions { margin-top: 1.5rem; display: flex; justify-content: center; }
.cta-final__meta {
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-200);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem;
}
.cta-final__meta > div { display: flex; flex-direction: column; gap: .2rem; }
.cta-final__lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); font-weight: 600; }
.cta-final__val { font-weight: 700; color: var(--deep); }

/* =====================================================================
   BẢN ĐỒ — TƯƠNG TÁC GHIM LIÊN KẾT (Phần D, bản cập nhật)
   Bấm node = ghim nhánh (không mở chi tiết). Bảng "đang chọn" liệt kê SP
   nối tới (chip bấm để nhảy nhánh). Node đã ghim giữ viền accent đậm.
   ===================================================================== */
.map-hint__aside { color: var(--gray-400); }

/* Node đang được GHIM — luôn nổi, viền accent đậm dù đang xem nhanh node khác. */
.map-svg-wrap.is-active .mapnode[aria-pressed="true"] { opacity: 1; }
.map-svg-wrap.is-active .mapnode[aria-pressed="true"] .mapnode__box { stroke: var(--accent); stroke-width: 3; }

/* Bảng "đang chọn" (hiện khi ghim 1 SP) */
.map-focus {
  margin-top: 1rem; background: #fff; border: 1px solid var(--gray-200);
  border-left: 3px solid var(--accent); border-radius: 14px; padding: 1rem 1.1rem;
}
.map-focus[hidden] { display: none; }
.map-focus__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.map-focus__no { font-size: .72rem; font-weight: 700; color: var(--accent); letter-spacing: .04em; white-space: nowrap; }
.map-focus__ten { font-weight: 800; color: var(--deep); font-size: 1rem; }
.map-focus__clear {
  margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--gray-500);
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 999px;
  padding: .25rem .7rem; cursor: pointer; transition: color .2s ease, border-color .2s ease;
}
.map-focus__clear:hover, .map-focus__clear:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }

/* Khối "kết nối — vì sao & qua gì" (dùng chung: bảng focus desktop + hàng mobile) */
.conn-wrap { margin-top: .8rem; }
.conn-label { display: block; font-size: .78rem; color: var(--gray-500); margin-bottom: .45rem; }
.conn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.conn {
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 10px; padding: .55rem .7rem;
}
.conn__to {
  display: inline-flex; align-items: center; gap: .25rem;
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-weight: 700; font-size: .84rem; color: var(--accent);
}
.conn__to:hover, .conn__to:focus-visible { text-decoration: underline; outline: none; }
.conn__qua { display: block; margin-top: .25rem; font-size: .8rem; line-height: 1.5; color: var(--gray-500); }

/* Mobile: hàng danh sách đang được focus (sau khi chạm) */
.mrow.is-focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }

/* =====================================================================
   CÔNG NGHỆ TIÊN TIẾN & LỢI THẾ CẠNH TRANH (Lớp 1.5) — nền section trắng.
   Lưới công nghệ → lợi ích; bảng so sánh "bài bản vs rẻ" (cột chúng tôi =
   accent tint, cột rẻ = xám trung tính). accent CHỈ chấm phá.
   ===================================================================== */
.tech-grid {
  margin-top: 1.5rem; list-style: none; padding: 0;
  display: grid; gap: .9rem; grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .tech-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tech-grid { grid-template-columns: repeat(4, 1fr); } }
.tech-item {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 14px;
  padding: 1.05rem 1.1rem; border-top: 3px solid var(--accent);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tech-item:hover {
  border-color: var(--accent);
  box-shadow: 0 16px 34px -22px rgba(23,47,41,.42); transform: translateY(-2px);
}
.tech-item__ten { font-weight: 700; color: var(--deep); font-size: .92rem; line-height: 1.35; }
.tech-item__loi { margin-top: .5rem; font-size: .84rem; line-height: 1.55; color: var(--gray-500); }

/* Bảng so sánh — cuộn ngang trên màn nhỏ (giữ bố cục đối chiếu 3 cột) */
.cmp-wrap { margin-top: 2rem; overflow-x: auto; border: 1px solid var(--gray-200); border-radius: 16px; }
.cmp { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .88rem; background: #fff; }
.cmp__cap {
  caption-side: top; text-align: left; padding: 1.1rem 1.15rem .3rem;
  font-size: .95rem; font-weight: 700; color: var(--deep);
}
.cmp-h {
  text-align: left; font-weight: 700; font-size: .82rem; vertical-align: bottom;
  padding: .8rem 1.15rem; border-bottom: 1px solid var(--gray-200); color: var(--gray-500);
}
.cmp-h--ta { color: var(--accent); background: var(--accent-tint); }
.cmp-tc {
  text-align: left; font-weight: 700; color: var(--deep); font-size: .85rem;
  padding: .8rem 1.15rem; white-space: nowrap; background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
}
.cmp-row td {
  padding: .8rem 1.15rem; line-height: 1.5; vertical-align: top;
  border-top: 1px solid var(--gray-200);
}
.cmp-ta { color: var(--gray-700); background: var(--accent-tint); }
.cmp-re { color: var(--gray-500); }
.cmp-ic {
  display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem;
  border-radius: 999px; margin-right: .45rem; font-size: .68rem; font-weight: 800;
  vertical-align: -2px;
}
.cmp-ic--yes { color: #fff; background: var(--accent); }
.cmp-ic--no  { color: var(--gray-500); background: var(--gray-200); }

/* =====================================================================
   AN NINH & BẢO MẬT (Lớp 1.5) — nền section muted. 4 lớp phòng thủ (thẻ
   trắng), cam kết (lưới), callout 🎁 (accent tint). accent chấm phá.
   ===================================================================== */
.sec4 { margin-top: 1.5rem; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .sec4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sec4 { grid-template-columns: repeat(4, 1fr); } }
.seclayer {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 16px;
  padding: 1.25rem; border-top: 3px solid var(--accent);
}
.seclayer__head { display: flex; align-items: center; justify-content: space-between; }
.seclayer__ic { font-size: 1.5rem; line-height: 1; }
.seclayer__no {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gray-400);
}
.seclayer__ten { margin-top: .7rem; font-weight: 700; color: var(--deep); font-size: .98rem; }
.seclayer__list { margin-top: .7rem; list-style: none; padding: 0; display: grid; gap: .45rem; }
.seclayer__list li {
  position: relative; padding-left: 1.1rem; font-size: .82rem;
  line-height: 1.45; color: var(--gray-500);
}
.seclayer__list li::before { content: "▸"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

.sec-subh { margin-top: 2rem; font-size: 1.05rem; font-weight: 800; color: var(--deep); }
.commit { margin-top: 1rem; list-style: none; padding: 0; display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .commit { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .commit { grid-template-columns: repeat(3, 1fr); } }
.commit-item {
  display: flex; align-items: flex-start; gap: .6rem;
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px;
  padding: .85rem 1rem; font-size: .86rem; line-height: 1.45; color: var(--gray-700);
}
.commit-item__ic { flex: none; font-size: 1rem; line-height: 1.3; }

.sec-highlight {
  margin-top: 1.5rem; display: flex; gap: .9rem; align-items: flex-start;
  background: var(--accent-tint); border: 1px solid rgba(47,179,183,.3);
  border-left: 3px solid var(--accent); border-radius: 14px; padding: 1.1rem 1.25rem;
}
.sec-highlight__ic { flex: none; font-size: 1.5rem; line-height: 1.2; }
.sec-highlight p { font-size: .88rem; line-height: 1.6; color: var(--gray-700); }
.sec-highlight strong, .sec-highlight b { color: var(--deep); }