/* ============================================================
   HH Tech API Gateway · Trang hướng dẫn khách hàng
   Theme: dark developer-console — neon gradient, dot-grid, glass
   ============================================================ */

:root {
  /* Base dark surfaces (pha giữa navy dịu và đen gốc) */
  --bg: #0d1321;
  --bg-2: #11192c;
  --panel: #151e32;
  --panel-2: #1a263d;
  --panel-3: #20304c80;
  --line: #293654;
  --line-strong: #37486f;
  --line-glow: #5b8dff55;

  /* Text */
  --text: #e6edf9;
  --text-2: #b6c2da;
  --muted: #7d8bab;
  --dim: #55627e;

  /* Accents — neon */
  --cyan: #38e8ff;
  --blue: #5b8dff;
  --indigo: #7c6cff;
  --violet: #b06cff;
  --green: #2ee6a6;
  --amber: #ffb454;
  --danger: #ff6b6b;

  --grad: linear-gradient(120deg, #38e8ff 0%, #5b8dff 45%, #b06cff 100%);
  --grad-green: linear-gradient(120deg, #38e8ff, #5bc8ff);
  --grad-gold: linear-gradient(120deg, #ffe08a 0%, #ffc24d 50%, #f0a020 100%);
  --grad-magenta: linear-gradient(120deg, #f078ff 0%, #c86bff 50%, #a24bff 100%);
  --grad-text: linear-gradient(120deg, #7ff3ff, #9db4ff 55%, #d0a8ff);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow: 0 20px 50px rgba(0, 0, 0, .5);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .6);
  --glow: 0 0 0 1px var(--line-glow), 0 8px 40px rgba(59, 91, 219, .18);

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  --display: "Barlow Condensed", "Be Vietnam Pro", sans-serif;
  --hero: "Anton", "Barlow Condensed", sans-serif;

  --topbar-h: 72px;
}

* { box-sizing: border-box; }

/* Fix cốt lõi: tôn trọng thuộc tính hidden (author CSS đè [hidden] của UA) */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  line-height: 1.7;
  background: var(--bg);
  background-image:
    radial-gradient(900px 500px at 82% -8%, rgba(124, 108, 255, .16), transparent 60%),
    radial-gradient(760px 460px at 4% 2%, rgba(56, 232, 255, .12), transparent 55%),
    radial-gradient(circle at center, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px;
  overflow-x: hidden;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--cyan); text-decoration: none; }

/* ---------- Nền động: canvas particle + đốm sáng trôi (mang từ shop cũ) ---------- */
.bg-particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; }
.bg-orbs { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.bg-orbs span {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5;
}
.bg-orbs .orb1 { width: 460px; height: 460px; top: -120px; left: -80px; background: radial-gradient(circle, rgba(56,232,255,.5), transparent 70%); animation: float1 26s ease-in-out infinite; }
.bg-orbs .orb2 { width: 520px; height: 520px; top: 30%; right: -140px; background: radial-gradient(circle, rgba(176,108,255,.42), transparent 70%); animation: float2 32s ease-in-out infinite; }
.bg-orbs .orb3 { width: 400px; height: 400px; bottom: -120px; left: 30%; background: radial-gradient(circle, rgba(91,141,255,.4), transparent 70%); animation: float3 29s ease-in-out infinite; }
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(80px,60px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-70px,50px)} }
@keyframes float3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,-60px)} }

code {
  font-family: var(--mono);
  font-size: .86em;
  background: rgba(91, 141, 255, .1);
  border: 1px solid var(--line-strong);
  padding: .1em .44em;
  border-radius: 6px;
  color: #a9c4ff;
  word-break: break-word;
}

/* ---------- Progress bar ---------- */
.read-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--grad);
  box-shadow: 0 0 12px rgba(91, 141, 255, .8);
  z-index: 200; transition: width .1s linear;
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 20px;
  padding: 0 clamp(14px, 3vw, 34px);
  background: rgba(19, 27, 46, .8);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--hero); font-weight: 400; font-size: 21px; color: var(--text); letter-spacing: .01em; text-transform: uppercase; }
.brand:hover { color: var(--text); }
.brand-logo {
  width: 34px; height: 34px; flex: 0 0 34px; object-fit: cover; border-radius: 10px;
  box-shadow: 0 0 22px rgba(91, 141, 255, .46), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.brand-text { display: inline-flex; align-items: baseline; white-space: nowrap; }
.brand-mark {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--grad); color: #05070f; font-size: 15px;
  box-shadow: 0 0 20px rgba(91, 141, 255, .5);
}
.brand-dim { color: var(--muted); font-weight: 600; font-size: 13px; margin-left: 2px; padding-left: 9px; border-left: 1px solid var(--line-strong); }
.topnav { display: flex; gap: 8px; flex: 1 1 auto; justify-content: center; }
/* 3 nút nav: khung + màu đặc trưng giống style Liên Hệ cũ.
   Trang Chính = cyan, List Model = xanh dương, Hướng dẫn cài đặt = vàng. */
.topnav a {
  color: var(--text-2); font-weight: 700; font-size: 14px;
  padding: 9px 16px; border-radius: 11px; transition: .15s; white-space: nowrap;
  border: 1.5px solid var(--nav-accent, rgba(148,180,220,.35));
  background: linear-gradient(180deg, var(--nav-bg-1, rgba(148,180,220,.10)), var(--nav-bg-2, rgba(148,180,220,.04)));
  box-shadow: 0 0 16px var(--nav-glow, transparent);
}
.topnav a:hover {
  color: #fff; transform: translateY(-1px);
  border-color: var(--nav-accent-strong, rgba(148,180,220,.7));
  background: linear-gradient(180deg, var(--nav-bg-1, rgba(148,180,220,.22)), var(--nav-bg-2, rgba(148,180,220,.12)));
  box-shadow: 0 0 24px var(--nav-glow-strong, rgba(148,180,220,.3));
}
.topnav a[href="#top"] { --nav-accent: rgba(56,232,255,.55); --nav-accent-strong: rgba(120,240,255,.95); --nav-bg-1: rgba(56,232,255,.14); --nav-bg-2: rgba(56,232,255,.05); --nav-glow: rgba(56,232,255,.18); --nav-glow-strong: rgba(56,232,255,.4); color: #bdf6ff; }
.topnav a[href="#list-model"] { --nav-accent: rgba(91,141,255,.6); --nav-accent-strong: rgba(120,170,255,.95); --nav-bg-1: rgba(91,141,255,.16); --nav-bg-2: rgba(91,141,255,.06); --nav-glow: rgba(91,141,255,.2); --nav-glow-strong: rgba(91,141,255,.42); color: #c9d8ff; }
.topnav a[href="/setup.html"] { --nav-accent: rgba(255,190,60,.6); --nav-accent-strong: rgba(255,210,110,.95); --nav-bg-1: rgba(255,190,60,.14); --nav-bg-2: rgba(255,190,60,.05); --nav-glow: rgba(255,190,60,.18); --nav-glow-strong: rgba(255,190,60,.4); color: #ffe2a8; }
.topbar-cta {
  margin-left: 0;
  background: var(--grad); color: #05070f; font-weight: 700; font-size: 15px;
  padding: 11px 20px; border-radius: 11px;
  box-shadow: 0 0 24px rgba(91, 141, 255, .45), 0 0 0 1px rgba(255,255,255,.1) inset;
  transition: .18s;
}
.topbar-cta:hover { color: #05070f; transform: translateY(-1px); box-shadow: 0 0 32px rgba(91, 141, 255, .7), 0 0 0 1px rgba(255,255,255,.18) inset; }
/* Nút phụ: Liên Hệ — viền vàng, nền tối (giữ style cũ) */
.topbar-cta-2 {
  margin-left: 0;
  background: transparent; color: #ffd98a; cursor: pointer;
  border: 1px solid rgba(255,190,60,.5); box-shadow: none; font-family: var(--sans);
}
.topbar-cta-2:hover { color: #2a1c00; background: var(--grad-gold); border-color: transparent; box-shadow: 0 0 24px rgba(255,190,60,.5); }

/* ── Popup QR nhóm hỗ trợ ─────────────────────────────── */
.qr-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; }
.qr-backdrop { position: absolute; inset: 0; background: rgba(5,8,15,.72); backdrop-filter: blur(6px); }
.qr-dialog {
  position: relative; z-index: 1; width: min(560px, 100%); text-align: center;
  background: linear-gradient(180deg, rgba(255,190,60,.08), var(--panel-2));
  border: 1px solid rgba(255,190,60,.4); border-radius: var(--r-lg);
  padding: 26px 24px; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,190,60,.3);
  animation: qr-pop .22s ease;
}
@keyframes qr-pop { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
.qr-close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line-strong); color: var(--text-2);
  font-size: 20px; line-height: 1; cursor: pointer; transition: .15s;
}
.qr-close:hover { color: #ffd98a; border-color: rgba(255,190,60,.5); }
.qr-dialog h3 { font-family: var(--display); font-weight: 700; font-size: 21px; color: #ffd98a; margin: 4px 0 4px; letter-spacing: -.01em; }
.qr-sub { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.qr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qr-item { display: flex; flex-direction: column; align-items: center; }
.qr-img { width: 100%; max-width: 220px; height: auto; border-radius: 14px; background: #fff; padding: 8px; box-shadow: 0 12px 34px rgba(0,0,0,.4); }
.qr-cap { font-size: 13px; color: var(--text-2); margin: 10px 0 6px; }
.qr-link { font-size: 13px; font-weight: 700; color: #ffd98a; }
.qr-link:hover { color: #fff; }
.qr-link-note { font-size: 12.5px; color: var(--muted); }
.qr-hint { font-size: 13px; color: var(--text-2); margin: 18px 0 0; }
@media (max-width: 480px) { .qr-grid { grid-template-columns: 1fr; } }

/* ── Popup THÔNG BÁO (admin bật/tắt) ──────────────────── */
.announce-modal { position: fixed; inset: 0; z-index: 360; display: grid; place-items: center; padding: 20px; }
.announce-backdrop { position: absolute; inset: 0; background: rgba(5,8,15,.74); backdrop-filter: blur(6px); }
.announce-dialog {
  position: relative; z-index: 1; width: min(520px, 100%);
  background: linear-gradient(180deg, rgba(56,232,255,.08), var(--panel-2));
  border: 1px solid rgba(56,232,255,.38); border-radius: var(--r-lg);
  padding: 30px 26px 26px; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(56,232,255,.25);
  animation: qr-pop .22s ease;
}
.announce-close {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line-strong); color: var(--text-2);
  font-size: 20px; line-height: 1; cursor: pointer; transition: .15s;
}
.announce-close:hover { color: var(--cyan); border-color: rgba(56,232,255,.5); }
.announce-badge {
  display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--cyan);
  background: rgba(56,232,255,.1); border: 1px solid rgba(56,232,255,.28);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 12px;
}
.announce-dialog h3 {
  font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1.2;
  color: var(--text); margin: 0 0 12px; letter-spacing: -.01em;
}
.announce-body {
  font-size: 15px; line-height: 1.62; color: var(--text-2);
  max-height: 46vh; overflow-y: auto; white-space: normal;
}
.announce-body a { color: var(--cyan); font-weight: 600; }
.announce-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 20px; padding: 12px 22px; border-radius: 12px;
  font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .01em;
  color: #06232b; background: var(--grad); border: none;
  box-shadow: 0 10px 26px rgba(56,232,255,.28); transition: transform .15s, box-shadow .15s;
}
.announce-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(56,232,255,.4); }
.announce-dismiss {
  display: block; width: 100%; margin-top: 16px; padding: 11px 18px; border-radius: 11px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-strong);
  color: var(--text-2); font-family: var(--sans); font-weight: 600; font-size: 14px;
  cursor: pointer; transition: .15s;
}
.announce-dismiss:hover { color: var(--text); border-color: rgba(56,232,255,.4); background: rgba(56,232,255,.06); }
@media (max-width: 480px) {
  .announce-dialog { padding: 26px 18px 22px; }
  .announce-dialog h3 { font-size: 21px; }
}

.nav-toggle {
  display: none; margin-left: auto;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--text);
  width: 42px; height: 42px; border-radius: 11px; font-size: 20px; cursor: pointer;
}

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: sticky; top: var(--topbar-h); z-index: 99;
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 8px clamp(14px, 3vw, 34px);
  display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.mobile-menu a { padding: 12px 6px; border-bottom: 1px solid var(--line); color: var(--text-2); font-weight: 600; }
.mobile-menu a:last-child { border-bottom: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(56px, 9vw, 110px) clamp(18px, 4vw, 40px) clamp(34px, 5vw, 64px);
  max-width: 1180px; margin: 0 auto; text-align: center; overflow: hidden;
}
.hero-inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; }
.hero-logo {
  display: block; width: clamp(120px, 20vw, 190px); height: auto; margin: 0 auto 20px;
  border-radius: 24px;
  filter: drop-shadow(0 0 40px rgba(56, 232, 255, .35));
  animation: logo-float 6s ease-in-out infinite;
}
@keyframes logo-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-weight: 500; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cyan);
  background: rgba(56, 232, 255, .08); border: 1px solid rgba(56, 232, 255, .25);
  padding: 7px 15px; border-radius: 999px;
}
.eyebrow::before { content: "●"; font-size: 8px; color: var(--green); }
.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(38px, 6.6vw, 68px); line-height: 1.04; letter-spacing: 0;
  margin: 22px 0 18px; color: var(--text); text-transform: uppercase;
}
.hero h1 em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub {
  font-family: var(--sans); font-size: 15px; font-weight: 400;
  line-height: 1.65; color: var(--text-2); max-width: 730px; margin: 0 auto 30px;
}
.hero-sub strong { color: var(--text); font-weight: 700; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* Usage realtime CTA — khung vàng sáng nổi bật */
.usage-cta {
  margin-top: 22px; text-align: center;
  display: inline-block; padding: 16px 22px;
  background: linear-gradient(180deg, rgba(255,190,60,.14), rgba(255,190,60,.04));
  border: 1px solid rgba(255,190,60,.5); border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px rgba(255,190,60,.25), 0 10px 30px rgba(255,190,60,.15);
}
.usage-cta-label { display: block; font-size: 13.5px; font-weight: 600; color: #ffd98a; margin-bottom: 12px; }
.usage-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-usage {
  font-family: var(--sans); font-weight: 800; font-size: 14px;
  padding: 10px 18px; border-radius: 11px;
  background: linear-gradient(180deg, #22d3ee, #06b6d4);
  color: #06232b; border: 1px solid rgba(34,211,238,.65);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-usage::before { content: "●"; font-size: 10px; color: #06232b; }
.btn-usage:hover { color: #06232b; background: linear-gradient(180deg, #4fe3f5, #0fc7e0); border-color: transparent; box-shadow: 0 0 26px rgba(34,211,238,.55); transform: translateY(-1px); }
.btn-usage:hover::before { color: #06232b; }
.hero-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.hbadge {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--text-2);
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px;
}
.hero-glow {
  position: absolute; inset: -30% 25% auto 25%; height: 480px; z-index: 1;
  background: radial-gradient(circle, rgba(91, 141, 255, .28), transparent 60%),
              radial-gradient(circle at 70% 40%, rgba(176, 108, 255, .22), transparent 62%);
  filter: blur(50px);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 800; font-size: 14px; border-radius: 12px; cursor: pointer;
  padding: 11px 20px; border: 1px solid transparent; transition: .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--grad); color: #05070f; box-shadow: 0 0 26px rgba(91, 141, 255, .4); }
.btn-primary:hover { color: #05070f; box-shadow: 0 0 38px rgba(91, 141, 255, .65); }
.btn-ghost { background: var(--panel); color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { color: var(--cyan); border-color: var(--cyan); }
.btn-setup-gold {
  background: linear-gradient(135deg, #ffe08a 0%, #ffc24d 52%, #f0a020 100%);
  color: #201400; border-color: rgba(255,224,138,.75);
  box-shadow: 0 0 28px rgba(255,190,60,.34), 0 0 0 1px rgba(255,255,255,.14) inset;
}
.btn-setup-gold:hover {
  color: #201400; border-color: rgba(255,224,138,.95);
  box-shadow: 0 0 40px rgba(255,190,60,.56), 0 10px 28px rgba(240,160,32,.22);
}

/* ---------- Font normalization: nội dung khách hàng dùng font sans chung ---------- */
.hero-sub,
.hero-actions .btn,
.usage-cta,
.hero-badges,
.sec p,
.callout,
.benefit-card,
.example-card,
.plan-note-card,
.buy-cta-note,
.faq-body,
.footer {
  font-family: var(--sans);
}

.buy-cta {
  margin-top: 22px; padding: 22px; text-align: center;
  background: linear-gradient(135deg, rgba(56,232,255,.06), rgba(176,108,255,.06));
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
}
.buy-cta .btn { font-size: 16px; padding: 15px 30px; }
.buy-cta-note { font-size: 13.5px; color: var(--muted); margin: 14px auto 0; max-width: 560px; }

.setup-gold-cta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  margin: 22px auto 0; width: min(720px, 100%); min-height: 92px; padding: 18px 28px;
  border-radius: var(--r-lg); border: 1px solid rgba(255,201,90,.62);
  background: linear-gradient(135deg, rgba(255,224,138,.96), rgba(255,194,77,.92) 48%, rgba(240,160,32,.94));
  color: #1f1400; box-shadow: 0 18px 50px rgba(255,190,60,.24), 0 0 0 1px rgba(255,255,255,.16) inset;
  text-align: center; transition: transform .18s, box-shadow .18s;
}
.setup-gold-cta span { font-family: var(--sans); font-weight: 900; font-size: clamp(18px, 2.8vw, 26px); }
.setup-gold-cta small { font-family: var(--sans); font-weight: 800; font-size: 13px; color: rgba(31,20,0,.78); }
.setup-gold-cta:hover { color: #1f1400; transform: translateY(-2px); box-shadow: 0 24px 64px rgba(255,190,60,.34), 0 0 0 1px rgba(255,255,255,.2) inset; }

/* ---------- Layout ---------- */
.layout {
  max-width: 1180px; margin: 0 auto;
  padding: 20px clamp(16px, 5vw, 44px) 40px;
  display: block;
}

/* ---------- TOC: luôn hiện, trượt từ trái vào khi load ---------- */
.toc {
  position: fixed; top: calc(var(--topbar-h) + 28px); left: 24px;
  z-index: 80; width: 232px;
  max-height: calc(100vh - var(--topbar-h) - 56px); overflow-y: auto;
  background: rgba(14, 21, 36, .6); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px;
  animation: toc-slide-in .65s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes toc-slide-in {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toc-title { font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; padding-left: 14px; }
.toc-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-strong); }
.toc-list a {
  display: block; padding: 8px 14px; margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--muted); font-size: 13.5px; font-weight: 600; transition: .15s;
}
.toc-list a:hover { color: var(--text); }
.toc-list a.is-active { color: var(--cyan); border-left-color: var(--cyan); background: linear-gradient(90deg, rgba(56,232,255,.08), transparent); }
.toc-support { margin-top: 22px; padding: 16px; border-radius: var(--r); background: var(--panel-2); border: 1px solid var(--line); }
.toc-support-title { margin: 0 0 4px; font-weight: 700; color: var(--text); font-size: 14px; }
.toc-support-line { margin: 0; font-size: 12.5px; color: var(--muted); }
.toc-support-phone { display: inline-block; margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--green); }
.toc-support-phone:hover { color: #7ff3d9; }

/* ---------- Sections ---------- */
.content { min-width: 0; }
.sec { padding: 40px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.sec:first-child { border-top: 0; padding-top: 8px; }
.sec-kicker {
  display: inline-block; font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px;
}
.sec h2 { font-family: var(--display); font-weight: 700; font-size: clamp(27px, 3.8vw, 40px); line-height: 1.1; letter-spacing: 0; color: var(--text); margin: 0 0 14px; text-transform: uppercase; }
.sec p { margin: 0 0 14px; color: var(--text-2); }
.sec h3 { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--text); margin: 0 0 6px; }
.sec b, .sec strong { color: var(--text); }

/* ---------- Flow ---------- */
.flow { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin: 24px 0; }
.flow-step {
  flex: 1 1 160px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,190,60,.12), var(--panel));
  border: 1px solid transparent; border-radius: var(--r);
  box-shadow: 0 0 0 1px rgba(255,190,60,.3);
  padding: 18px 16px; transition: .18s;
}
.flow-step::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--grad-gold);
}
.flow-step:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(255,190,60,.24); }
.flow-num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--grad-gold); border: 0; color: #2a1c00;
  font-family: var(--display); font-weight: 700; font-size: 17px; margin-bottom: 10px;
  box-shadow: 0 4px 14px rgba(255,190,60,.4);
}
.flow-step h3 { font-size: 16px; margin-bottom: 3px; color: var(--text); }
.flow-step p { font-size: 13.5px; margin: 0; color: var(--text-2); }
.flow-arrow { align-self: center; font-size: 20px; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Callouts ---------- */
.callout {
  border-radius: var(--r); padding: 16px 18px; margin: 18px 0;
  border: 1px solid var(--line); background: var(--panel); font-size: 14.5px; color: var(--text-2);
}
.callout ul { margin: 8px 0 0; padding-left: 20px; }
.callout li { margin: 4px 0; }
.callout-info { border-left: 3px solid var(--blue); }
/* Legacy list styles (giữ để tương thích, không còn dùng ở nội dung Unified Credit) */
.product-lines { list-style: none; margin: 10px 0 8px; padding: 0; }
.product-lines li { margin: 8px 0; padding: 10px 14px; border-radius: 10px; border-left: 3px solid transparent; font-size: 14px; }
.pl-claude { background: rgba(224,129,87,.1); border-left-color: #e08157; }
.pl-claude b { color: #f0a06b; }
.pl-codex { background: rgba(56,232,255,.09); border-left-color: #38e8ff; }
.pl-codex b { color: #5bc8ff; }
.model-hl { color: #ffd98a; font-weight: 700; }
.callout-tip { border-left: 3px solid var(--green); }
.callout-warn { border-left: 3px solid var(--amber); }

/* ---------- Steps ---------- */
.steps { list-style: none; counter-reset: step; margin: 22px 0; padding: 0; }
.steps > li { position: relative; counter-increment: step; padding: 4px 0 24px 56px; margin: 0; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--cyan);
  font-family: var(--display); font-weight: 700; font-size: 16px;
  display: grid; place-items: center; box-shadow: 0 0 16px rgba(56,232,255,.14);
}
.steps > li::after { content: ""; position: absolute; left: 18px; top: 46px; bottom: 6px; width: 1px; background: linear-gradient(var(--line-strong), transparent); }
.steps > li:last-child::after { display: none; }
.steps p { font-size: 14.5px; }

/* Chips */
.chip {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  background: rgba(91,141,255,.1); border: 1px solid var(--line-strong); color: #a9c4ff;
  padding: 3px 10px; border-radius: 999px; margin: 2px 3px;
}
.chip-buy { background: rgba(46,230,166,.12); border-color: rgba(46,230,166,.3); color: #7ff3d9; }

.provider-claude-callout {
  color: #ffe8a8;
  border-color: rgba(255, 201, 90, .72);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,224,138,.22), transparent 34%),
    linear-gradient(180deg, rgba(255,190,60,.17), rgba(255,190,60,.055));
  box-shadow: 0 0 0 1px rgba(255,224,138,.18) inset, 0 18px 46px rgba(255,190,60,.16);
}
.provider-claude-callout strong,
.provider-claude-callout b { color: #fff2c2; }
.provider-usage-link {
  color: #38e8ff;
  font-weight: 900;
  text-decoration: none;
  border-bottom: 1px solid rgba(56,232,255,.55);
  text-shadow: 0 0 16px rgba(56,232,255,.45);
}
.provider-usage-link:hover {
  color: #9ff6ff;
  border-bottom-color: rgba(159,246,255,.9);
}

/* ---------- Mini cards ---------- */
.mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.mini-card { background: linear-gradient(180deg, rgba(255,190,60,.06), var(--panel)); border: 1px solid rgba(255,190,60,.3); border-radius: var(--r); padding: 16px; transition: .16s; }
.mini-card:hover { border-color: var(--line-strong); }
.mini-card .mini-ic { font-size: 22px; }
.mini-card b { display: block; margin: 6px 0 4px; color: var(--text); }
.mini-card p { font-size: 13.5px; color: var(--muted); margin: 0; }

/* ---------- Group explain ---------- */
.group-explain { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.ge-row { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.ge-tag { font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 10px; align-self: start; }
.ge-vip { background: rgba(255,180,84,.12); color: var(--amber); border: 1px solid rgba(255,180,84,.28); }
.ge-month { background: rgba(91,141,255,.12); color: #a9c4ff; border: 1px solid var(--line-strong); }
.ge-bulk { background: rgba(46,230,166,.12); color: #7ff3d9; border: 1px solid rgba(46,230,166,.28); }
.ge-row p { margin: 0; font-size: 14px; }

/* ---------- Tabs (price + os) ---------- */
.price-tabs, .os-tabs {
  display: inline-flex; gap: 4px; flex-wrap: wrap; margin: 18px 0 16px;
  padding: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
}
.ptab, .ostab {
  border: 0; background: transparent; color: var(--muted);
  font-family: var(--sans); font-weight: 600; font-size: 13.5px; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: .15s;
}
.ptab:hover, .ostab:hover { color: var(--text); }
.ptab.is-active, .ostab.is-active { background: var(--grad); color: #05070f; box-shadow: 0 0 18px rgba(91,141,255,.35); }

/* Shared purchase-card selectors remain because shop.html still renders plan-grid and plan-card. */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 14px; margin: 4px 0;
}
.plan-card {
  position: relative; background: linear-gradient(180deg, rgba(255,190,60,.1), var(--panel));
  border: 1px solid transparent; border-radius: var(--r-lg);
  padding: 24px 18px 20px; text-align: center; overflow: hidden; transition: .2s ease;
  box-shadow: 0 0 0 1px rgba(255,190,60,.28);
}
.plan-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad-gold); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .9; transition: opacity .2s;
}
.plan-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(255,190,60,.28); }
.plan-card:hover::before { opacity: 1; }
.plan-ic { font-size: 30px; display: block; line-height: 1; margin-bottom: 8px; }
.plan-name { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--text); margin: 0 0 12px; letter-spacing: -.01em; }
.plan-card .plan-price {
  font-family: var(--display); font-weight: 700; font-size: 27px; letter-spacing: -.03em; margin: 0;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.plan-card .plan-price span { font-size: 15px; -webkit-text-fill-color: #ffc24d; }
.plan-card .plan-quota { font-size: 14px; font-weight: 700; color: #ffd98a; margin: 12px 0 3px; }
.plan-card .plan-term { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: #ffc24d; margin: 0; letter-spacing: .04em; text-transform: uppercase; }
.plan-gift {
  margin: 12px -18px -20px; padding: 9px 12px;
  background: rgba(46,230,166,.12); border-top: 1px solid rgba(46,230,166,.28);
  color: #7ff3d9; font-size: 12px; font-weight: 600; line-height: 1.35;
}
.plan-gift b { color: #a6ffe0; }
.plan-card.plan-codex .plan-gift { background: rgba(56,232,255,.1); border-top-color: rgba(56,232,255,.28); color: #9fe9ff; }
.plan-card.plan-codex .plan-gift b { color: #cdf4ff; }

.plan-card.is-featured { border-color: transparent; box-shadow: 0 0 0 1px rgba(255,190,60,.4), 0 18px 44px rgba(255,190,60,.2); background: linear-gradient(180deg, rgba(255,190,60,.1), var(--panel)); }
.plan-card.is-featured::before { opacity: 1; }
.plan-ribbon {
  position: absolute; top: 13px; right: -34px; transform: rotate(45deg);
  background: var(--grad-gold); color: #2a1c00; font-size: 10px; font-weight: 800;
  letter-spacing: .03em; padding: 4px 38px; box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.plan-badge {
  position: absolute; top: 13px; right: 13px;
  background: rgba(255,190,60,.16); color: #ffd98a; border: 1px solid rgba(255,190,60,.35);
  font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
}
/* VIP — vàng hoàng kim như các gói Claude khác (bỏ mọi override tối) */
.plan-card.plan-dark { }
/* Codex — xanh cyan (nền + viền + glow cyan, khác Claude vàng) */
.plan-card.plan-codex { background: linear-gradient(180deg, rgba(56,232,255,.1), var(--panel)); box-shadow: 0 0 0 1px rgba(56,232,255,.28); }
.plan-card.plan-codex::before { background: var(--grad-green); }
.plan-card.plan-codex:hover { box-shadow: 0 18px 44px rgba(56,232,255,.28); }
.plan-card.plan-codex .plan-price { background: var(--grad-green); -webkit-background-clip: text; background-clip: text; }
.plan-card.plan-codex.is-featured { box-shadow: 0 0 0 1px rgba(56,232,255,.45), 0 18px 44px rgba(56,232,255,.22); background: linear-gradient(180deg, rgba(56,232,255,.14), var(--panel)); }
.plan-card.plan-codex .plan-ribbon { background: var(--grad-green); color: #05070f; }
.plan-card.plan-codex .plan-badge { background: rgba(56,232,255,.14); color: #7ff3ff; border-color: rgba(56,232,255,.35); }
.plan-card.plan-codex .plan-quota { color: #7ff3ff; }
.plan-card.plan-codex .plan-term { color: #38e8ff; }
.plan-card.plan-codex .plan-price span { -webkit-text-fill-color: #38e8ff; }
/* VIP Opus 4.7 — tím magenta (nhóm model riêng) */
.plan-card.plan-op47 { background: linear-gradient(180deg, rgba(200,107,255,.1), var(--panel)); box-shadow: 0 0 0 1px rgba(200,107,255,.3); }
.plan-card.plan-op47::before { background: var(--grad-magenta); }
.plan-card.plan-op47:hover { box-shadow: 0 18px 44px rgba(200,107,255,.3); }
.plan-card.plan-op47 .plan-price { background: var(--grad-magenta); -webkit-background-clip: text; background-clip: text; }
.plan-card.plan-op47.is-featured { box-shadow: 0 0 0 1px rgba(200,107,255,.45), 0 18px 44px rgba(200,107,255,.22); background: linear-gradient(180deg, rgba(200,107,255,.14), var(--panel)); }
.plan-card.plan-op47 .plan-ribbon { background: var(--grad-magenta); color: #1a0524; }
.plan-card.plan-op47 .plan-badge { background: rgba(200,107,255,.16); color: #e6b3ff; border-color: rgba(200,107,255,.4); }
.plan-card.plan-op47 .plan-quota { color: #e6b3ff; }
.plan-card.plan-op47 .plan-term { color: #d08aff; }
.plan-card.plan-op47 .plan-price span { -webkit-text-fill-color: #d08aff; }
.plan-card.plan-op47 .plan-gift { background: rgba(200,107,255,.1); border-top-color: rgba(200,107,255,.28); color: #e6c6ff; }
.plan-card.plan-op47 .plan-gift b { color: #f2ddff; }
/* VIP Opus 4.6 — cyan (nhóm model riêng) */
.plan-card.plan-op46 { background: linear-gradient(180deg, rgba(56,232,255,.1), var(--panel)); box-shadow: 0 0 0 1px rgba(56,232,255,.28); }
.plan-card.plan-op46::before { background: var(--grad-green); }
.plan-card.plan-op46:hover { box-shadow: 0 18px 44px rgba(56,232,255,.28); }
.plan-card.plan-op46 .plan-price { background: var(--grad-green); -webkit-background-clip: text; background-clip: text; }
.plan-card.plan-op46.is-featured { box-shadow: 0 0 0 1px rgba(56,232,255,.45), 0 18px 44px rgba(56,232,255,.22); background: linear-gradient(180deg, rgba(56,232,255,.14), var(--panel)); }
.plan-card.plan-op46 .plan-ribbon { background: var(--grad-green); color: #05070f; }
.plan-card.plan-op46 .plan-badge { background: rgba(56,232,255,.14); color: #7ff3ff; border-color: rgba(56,232,255,.35); }
.plan-card.plan-op46 .plan-quota { color: #7ff3ff; }
.plan-card.plan-op46 .plan-term { color: #38e8ff; }
.plan-card.plan-op46 .plan-price span { -webkit-text-fill-color: #38e8ff; }
.plan-card.plan-op46 .plan-gift { background: rgba(56,232,255,.1); border-top-color: rgba(56,232,255,.28); color: #9fe9ff; }
.plan-card.plan-op46 .plan-gift b { color: #cdf4ff; }

/* Grok 4.5 — nhận diện cam/gold, tách khỏi Codex (xanh) & VIP (magenta). */
.plan-card.plan-grok { background: linear-gradient(180deg, rgba(255,160,60,.1), var(--panel)); box-shadow: 0 0 0 1px rgba(255,160,60,.3); }
.plan-card.plan-grok::before { background: var(--grad-gold); }
.plan-card.plan-grok:hover { box-shadow: 0 18px 44px rgba(255,160,60,.28); }
.plan-card.plan-grok .plan-price { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; }
.plan-card.plan-grok.is-featured { box-shadow: 0 0 0 1px rgba(255,160,60,.45), 0 18px 44px rgba(255,160,60,.22); background: linear-gradient(180deg, rgba(255,160,60,.14), var(--panel)); }
.plan-card.plan-grok .plan-ribbon { background: var(--grad-gold); color: #2a1c00; }
.plan-card.plan-grok .plan-quota { color: #ffd08a; }
.plan-card.plan-grok .plan-term { color: #f0a020; }
.plan-card.plan-grok .plan-price span { -webkit-text-fill-color: #f0a020; }
.plan-note-grok { border-color: rgba(255,160,60,.4); background: linear-gradient(180deg, rgba(255,160,60,.07), var(--panel)); }

.plan-note-card {
  grid-column: 1 / -1; background: var(--panel); border: 1px dashed var(--line-strong);
  border-radius: var(--r); padding: 14px 18px; font-size: 13.5px; color: var(--text-2);
}
.km { display: inline-block; font-size: 11px; font-weight: 700; color: #7ff3d9; background: rgba(46,230,166,.14); padding: 1px 6px; border-radius: 6px; margin-left: 4px; }

/* ---------- Wizard ---------- */
.wizard {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  padding: clamp(16px, 3vw, 26px); margin: 22px 0; box-shadow: var(--shadow);
}
.wizard-step { padding: 16px 0; border-top: 1px solid var(--line); }
.wizard-step:first-child { border-top: 0; padding-top: 0; }
.wizard-label { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--text); margin: 0 0 12px; }
.wizard-hint { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.wizard-warn { display: none; color: var(--danger); font-weight: 600; font-size: 13.5px; margin: 8px 0 0; }
.wizard-warn.is-visible { display: block; }

/* Bộ chọn công cụ (Claude ⇆ Codex) ở đầu Bước 3 — card đứng riêng, ngoài .wizard. */
.tool-picker {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  padding: clamp(16px, 3vw, 26px); margin: 22px 0 0; box-shadow: var(--shadow);
  border-top: 1px solid var(--line-strong);
}
.tool-body-intro { margin: 22px 0 0; color: var(--muted); }

.model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.model-opt {
  text-align: left; cursor: pointer; transition: .16s;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 15px 16px; color: var(--text-2);
}
.model-opt b { display: block; font-family: var(--display); font-size: 15px; color: var(--text); }
.model-opt small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.model-opt small code { font-size: 11.5px; }
.model-opt:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.model-opt.is-selected { border-color: transparent; box-shadow: var(--glow); background: linear-gradient(180deg, rgba(91,141,255,.1), var(--panel)); }
.model-opt.is-selected b { color: var(--cyan); }

/* Tag màu nhận diện trong nút chọn (server / gói) — pill nhỏ cạnh tiêu đề. */
.opt-tag {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  border: 1px solid transparent; line-height: 1.5; white-space: nowrap;
}
.tag-net    { background: rgba(56,232,255,.14);  color: #7ff3ff; border-color: rgba(56,232,255,.4); }
.tag-com    { background: rgba(200,107,255,.16); color: #e6b3ff; border-color: rgba(200,107,255,.42); }
.tag-credit { background: rgba(255,201,90,.16);  color: #ffd98a; border-color: rgba(255,201,90,.42); }
.tag-v47    { background: rgba(200,107,255,.16); color: #e6b3ff; border-color: rgba(200,107,255,.42); }
.tag-v46    { background: rgba(56,232,255,.14);  color: #7ff3ff; border-color: rgba(56,232,255,.4); }

/* Viền trái màu để mỗi lựa chọn dễ phân biệt kể cả khi chưa chọn. */
.model-opt.srv-net        { border-left: 3px solid rgba(56,232,255,.6); }
.model-opt.srv-com        { border-left: 3px solid rgba(200,107,255,.6); }
.model-opt.plan-tag-credit{ border-left: 3px solid rgba(255,201,90,.7); }
.model-opt.plan-tag-v47   { border-left: 3px solid rgba(200,107,255,.7); }
.model-opt.plan-tag-v46   { border-left: 3px solid rgba(56,232,255,.7); }

.key-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.key-input {
  width: 100%; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text);
  border-radius: 11px; padding: 13px 15px; font: 14px/1.5 var(--mono); outline: none;
}
.key-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(56,232,255,.15); }
.key-input::placeholder { color: var(--dim); }

/* ---------- Code blocks ---------- */
.code-block { border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; margin: 12px 0; background: #0f1830; }
.code-block.code-sm { margin: 8px 0; }
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; color: var(--muted);
}
.code {
  margin: 0; padding: 14px 16px; overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.7; color: #cdd9f0;
  white-space: pre-wrap; word-break: break-word;
}
.code code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.copy-btn {
  border: 1px solid var(--line-strong); background: var(--panel); color: #a9c4ff;
  font-family: var(--mono); font-size: 11.5px; padding: 5px 12px; border-radius: 8px; cursor: pointer; transition: .15s;
}
.copy-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.copy-btn.copied { background: var(--green); border-color: var(--green); color: #05070f; }
.cmd-hint { font-size: 13.5px; color: var(--muted); margin: 4px 0 0; }
.cmd-panel { margin-top: 4px; }

/* ---------- Tool cards ---------- */
.tool-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 20px 0; }
.tool-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; padding-left: 22px; transition: .18s; overflow: hidden; }
.tool-card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
.tool-card-wide { grid-column: 1 / -1; }
.tool-card-wide ol ul { margin: 6px 0 0; padding-left: 20px; }
.tool-card-wide ol ul li { margin: 4px 0; }

/* ── Màu nhận diện từng app ─────────────────────────────────── */
.tc-vscode { --tc: #3aa0ff; --tc2: #0a63c9; }   /* VS Code · xanh dương */
.tc-cline  { --tc: #21d07a; --tc2: #0a9c56; }   /* Cline · xanh lục */
.tc-cursor { --tc: #a06bff; --tc2: #6f3ce0; }   /* Cursor · tím */
.tc-claude { --tc: #e08157; --tc2: #cc6b3d; }   /* Claude · cam Anthropic */
.tc-deepseek { --tc: #2ee6a6; --tc2: #12b981; } /* DeepSeek tặng · xanh lục */
.tool-card[class*="tc-"] {
  border-color: color-mix(in srgb, var(--tc) 38%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tc) 9%, transparent), transparent 42%),
    var(--panel);
}
.tool-card[class*="tc-"]::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--tc), var(--tc2));
}
.tool-card[class*="tc-"]:hover {
  border-color: var(--tc);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--tc) 26%, transparent), 0 0 0 1px color-mix(in srgb, var(--tc) 40%, transparent);
}
.tool-card[class*="tc-"] .tool-ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  background: color-mix(in srgb, var(--tc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--tc) 30%, transparent);
}
.tool-card[class*="tc-"] .tool-head h3 { color: color-mix(in srgb, var(--tc) 72%, #ffffff); }
.tool-card[class*="tc-"] code { background: color-mix(in srgb, var(--tc) 14%, transparent); border-color: color-mix(in srgb, var(--tc) 40%, transparent); color: color-mix(in srgb, var(--tc) 78%, #ffffff); }

.tool-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tool-ic { font-size: 22px; }
.tool-head h3 { margin: 0; font-size: 17px; }
.tool-card ol { margin: 0; padding-left: 20px; color: var(--text-2); }
.tool-card ol li { margin: 7px 0; font-size: 14px; }
.tool-card ul.cli-lines { margin: 6px 0 0; padding-left: 20px; color: var(--text-2); list-style: disc; }
.tool-card ul.cli-lines li { margin: 10px 0; font-size: 14px; }
.tool-card p { font-size: 14px; color: var(--text-2); }
.tool-note { font-size: 13px; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 12px 0 0; }

/* ---------- Cards 2 / info ---------- */
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.info-card { background: linear-gradient(180deg, rgba(255,190,60,.06), var(--panel)); border: 1px solid rgba(255,190,60,.3); border-radius: var(--r); padding: 16px 18px; }
.info-card h3 { font-size: 16px; margin-bottom: 6px; }
.info-card p { font-size: 14px; margin: 0; color: var(--muted); }

/* ---------- Cmd cards ---------- */
.cmd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 16px 0; }
.cmd-card { background: linear-gradient(180deg, rgba(255,190,60,.06), var(--panel)); border: 1px solid rgba(255,190,60,.3); border-radius: var(--r); padding: 16px; transition: .16s; }
.cmd-card:hover { border-color: var(--cyan); transform: translateY(-2px); }
.cmd-card code { font-size: 15px; font-weight: 700; background: rgba(56,232,255,.1); border-color: rgba(56,232,255,.25); color: var(--cyan); }
.cmd-card p { font-size: 13.5px; color: var(--muted); margin: 8px 0 0; }

/* ---------- Details ---------- */
.disc { margin: 14px 0; border: 1px solid rgba(255,190,60,.3); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.disc summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; gap: 10px; }
.disc summary::-webkit-details-marker { display: none; }
.disc summary::before { content: "▸"; color: var(--cyan); font-size: 13px; transition: .2s; }
.disc[open] summary::before { transform: rotate(90deg); }
.disc-body { padding: 0 18px 16px; }
.disc-body p { font-size: 14px; color: var(--text-2); }

/* ---------- Hướng dẫn chi tiết Claude Desktop (có ảnh) ---------- */
.guide-disc { margin-top: 16px; border-color: var(--line-strong); background: var(--panel-2); }
.guide-disc > summary { font-family: var(--display); font-size: 15px; color: var(--cyan); }
.guide-steps { list-style: none; counter-reset: g; margin: 8px 0 0; padding: 0; }
.guide-steps > li { position: relative; counter-increment: g; padding: 0 0 22px 0; margin: 0; border-top: 1px dashed var(--line); padding-top: 18px; }
.guide-steps > li:first-child { border-top: 0; padding-top: 4px; }
.guide-steps h4 { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--text); margin: 0 0 8px; }
.guide-steps p, .guide-steps ul { font-size: 14px; color: var(--text-2); margin: 0 0 10px; }
.guide-steps ul { padding-left: 20px; }
.guide-steps ul li { margin: 4px 0; }
.guide-shot { margin: 10px 0; }
.guide-shot img {
  display: block; width: 100%; max-width: 560px; height: auto;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  box-shadow: var(--shadow); background: #0f1830;
}
.guide-shot figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; font-style: italic; }
.guide-fields { counter-reset: gf; margin: 0 0 10px; padding-left: 0; list-style: none; }
.guide-fields > li { position: relative; counter-increment: gf; padding: 6px 0 6px 30px; font-size: 14px; color: var(--text-2); border-bottom: 1px solid var(--line); }
.guide-fields > li:last-child { border-bottom: 0; }
.guide-fields > li::before {
  content: counter(gf); position: absolute; left: 0; top: 6px;
  width: 20px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 700;
  background: rgba(56,232,255,.12); border: 1px solid var(--line-strong); color: var(--cyan);
  display: grid; place-items: center;
}
.req { color: var(--danger); font-weight: 700; }
.ok-line { display: inline-block; background: rgba(46,230,166,.12); border: 1px solid rgba(46,230,166,.3); color: #7ff3d9; border-radius: 8px; padding: 1px 8px; font-size: 13px; font-weight: 600; margin: 2px 0; }
kbd {
  font-family: var(--mono); font-size: 11.5px; background: var(--bg-2);
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px;
  padding: 1px 7px; color: var(--text-2);
}

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.faq-item { border: 1px solid rgba(255,190,60,.28); border-radius: var(--r); background: var(--panel); overflow: hidden; transition: .15s; }
.faq-item[open] { border-color: var(--line-strong); }
.faq-item summary { cursor: pointer; padding: 16px 20px; font-weight: 600; color: var(--text); font-size: 15px; list-style: none; display: flex; align-items: center; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 300; color: var(--cyan); transition: .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-body { padding: 0 20px 18px; }
.faq-body p { font-size: 14.5px; margin: 0 0 8px; color: var(--text-2); }

/* ---------- Support ---------- */
.support {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center;
  background: linear-gradient(135deg, var(--panel-2), #231a3a);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); padding: clamp(22px, 4vw, 40px);
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.support::after { content: ""; position: absolute; inset: -40% 40% auto -10%; height: 300px; background: radial-gradient(circle, rgba(46,230,166,.18), transparent 60%); filter: blur(40px); }
.support > * { position: relative; z-index: 1; }
.support .sec-kicker { color: var(--green); }
.support h2 { color: var(--text); }
.support p { color: var(--text-2); }
.support-phone { display: inline-block; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); color: var(--green); margin: 8px 0; }
.support-phone:hover { color: #7ff3d9; }
.support-note { font-size: 13.5px; color: var(--muted) !important; }
.support-qr { display: flex; justify-content: center; }
.support-qr img { width: auto; height: clamp(200px, 30vw, 320px); border-radius: var(--r); box-shadow: 0 16px 40px rgba(0,0,0,.5); background: #fff; padding: 8px; }

/* ---------- Footer ---------- */
.site-foot { text-align: center; padding: 40px 20px 60px; color: var(--muted); font-size: 13.5px; border-top: 1px solid var(--line); margin-top: 20px; }
.site-foot p { margin: 6px 0; }
.foot-links a { color: var(--muted); font-weight: 600; }
.foot-links a:hover { color: var(--cyan); }

/* ---------- To-top ---------- */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--grad); color: #05070f; border: 0; font-size: 20px; cursor: pointer;
  box-shadow: 0 0 24px rgba(91,141,255,.5); transition: .2s;
}
.to-top:hover { transform: translateY(-3px); }

/* ---------- Unified Credit V1: hero note, ba quyền lợi, bảng giá ---------- */
.hero-note {
  max-width: 640px; margin: 22px auto 0; font-size: 13.5px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--amber);
  border-radius: var(--r); padding: 12px 16px; text-align: left;
}

/* Ba quyền lợi — mỗi card một màu accent (credit=green, VIP=gold, DeepSeek=violet) */
.benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 20px 0; }
.benefit-card {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 20px 20px; transition: .18s;
}
.benefit-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--bc, var(--blue)); }
.benefit-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--bc) 40%, var(--line)); box-shadow: 0 16px 40px color-mix(in srgb, var(--bc) 20%, transparent); }
.benefit-card h3 { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--text); margin: 10px 0 8px; }
.benefit-card p { font-size: 14px; color: var(--text-2); margin: 0 0 10px; }
.benefit-badge {
  display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--bc, var(--blue));
  background: color-mix(in srgb, var(--bc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc) 32%, transparent);
  border-radius: 999px; padding: 4px 11px;
}
.benefit-card .btn { margin-top: 6px; }
.benefit-ids { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.benefit-ids code { font-size: 11.5px; }
.benefit-note { font-size: 12.5px !important; color: var(--muted) !important; background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; }
.bc-credit { --bc: var(--green); }
.bc-vip { --bc: var(--amber); }
.bc-deepseek { --bc: var(--violet); }

/* Cách quy đổi & tính phí */
.convert-block {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  background: linear-gradient(135deg, rgba(46,230,166,.08), rgba(91,141,255,.06));
  border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 22px; margin: 6px 0 18px;
}
.convert-main { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.convert-eq { font-family: var(--hero); font-weight: 400; font-size: clamp(24px, 4vw, 34px); line-height: 1.05;
  background: var(--grad-green); -webkit-background-clip: text; background-clip: text; color: transparent; }
.convert-eq-2 { font-size: clamp(16px, 2.4vw, 20px); color: var(--text-2); background: none; -webkit-text-fill-color: currentColor; }
.convert-note { flex: 1 1 320px; margin: 0; font-size: 14px; color: var(--text-2); }
.example-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 12px 0; }
.example-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px; }
.example-card h4 { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--cyan); margin: 0 0 6px; }
.example-card p { font-size: 13.5px; color: var(--text-2); margin: 0; }
.fine-note { font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }

/* Bảng giá tham chiếu credit-v1 */
.price-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: 6px 0 4px; }
.price-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.price-table caption {
  caption-side: top; text-align: left; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 0 0 8px;
}
.price-table th, .price-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.price-table thead th { background: rgba(91,141,255,.08); color: var(--text-2); font-weight: 700; font-size: 12.5px; }
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table tbody tr:hover { background: rgba(255,255,255,.03); }
.price-table .num { text-align: right; font-family: var(--mono); color: #ffd98a; font-weight: 600; }
.price-table th.num { color: var(--text-2); }
.price-table code { font-size: 12.5px; }

.foot-disclaimer { font-size: 12px; color: var(--dim); margin: 12px 0 0; max-width: 620px; margin-inline: auto; }

/* ---------- Responsive ---------- */
/* Thu toàn trang còn 90% trên tablet/desktop (điện thoại giữ 100% cho dễ đọc) */
@media (min-width: 741px) {
  body { zoom: 0.9; }
}

/* TOC chỉ hiện trên màn đủ rộng để không đè nội dung căn giữa; hẹp hơn thì ẩn */
@media (max-width: 1279px) {
  .toc { display: none; }
}

@media (max-width: 980px) {
  .topnav { display: none; }
  .nav-toggle { display: block; }
  .topbar-cta { display: none; }
}

/* Tablet nhỏ / điện thoại ngang */
@media (max-width: 740px) {
  .hero { padding: 40px 16px 30px; }
  .hero h1 { font-size: clamp(30px, 8vw, 44px); }
  .hero-sub { font-size: 15.5px; }
  .layout { padding: 16px 16px 32px; }
  .sec { padding: 30px 0; }
  .sec h2 { font-size: clamp(24px, 6.5vw, 30px); }
  .plan-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tool-cards { grid-template-columns: 1fr; }
  .cmd-cards { grid-template-columns: 1fr 1fr; }
}

/* Điện thoại dọc */
@media (max-width: 560px) {
  :root { --topbar-h: 56px; }
  .topbar { gap: 10px; padding: 0 14px; }
  .brand { font-size: 18px; }
  .brand-dim { display: none; }
  .flow-arrow { display: none; }
  .flow-step { flex-basis: 100%; }
  .mini-cards, .cards-2, .cmd-cards { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; }
  .benefit-grid, .example-grid, .price-wrap { grid-template-columns: 1fr; }
  .convert-block { flex-direction: column; align-items: flex-start; }
  .price-table { font-size: 13px; }
  .price-table th, .price-table td { padding: 8px 10px; }
  .ge-row { grid-template-columns: 1fr; gap: 8px; }
  .key-row { grid-template-columns: 1fr; }
  .key-row .btn { width: 100%; }
  .support { grid-template-columns: 1fr; text-align: center; }
  .support-qr { order: -1; }

  /* Tabs cuộn ngang thay vì tràn dòng */
  .price-tabs, .os-tabs { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }
  .ptab, .ostab { white-space: nowrap; flex: 0 0 auto; }

  /* Wizard & code gọn hơn */
  .wizard { padding: 16px; }
  .steps > li { padding-left: 46px; }
  .steps > li::before { width: 32px; height: 32px; font-size: 14px; }
  .steps > li::after { left: 15px; }
  .code { font-size: 12px; }
  .sec h3 { font-size: 16.5px; }
  .to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}


/* ---------- Homepage redesign: live catalog, rate v2, and quick starts ---------- */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.topbar-actions .topbar-cta { margin-left: 0; white-space: nowrap; }

/* Model cards stay horizontal inside a responsive two-column catalog grid. */
.model-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 12px;
}
.model-chip {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  background: linear-gradient(145deg, rgba(91,141,255,.09), rgba(21,30,50,.92));
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.model-chip:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 16px 36px rgba(0,0,0,.28), 0 0 0 1px rgba(91,141,255,.14);
}
.model-chip-loading { grid-template-columns: 48px minmax(0, 1fr); opacity: .8; }
.model-chip-main { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.model-chip-main strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.15;
}
.model-id {
  display: block;
  width: 100%;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: rgba(91,141,255,.08);
  color: #a9c4ff;
  font: 11.5px/1.45 var(--mono);
  text-align: left;
  overflow-wrap: anywhere;
  cursor: copy;
  transition: color .15s, border-color .15s, background .15s;
}
.model-id::after { content: ' ⧉'; color: var(--muted); }
.model-id:hover { color: var(--cyan); border-color: var(--line-strong); background: rgba(56,232,255,.08); }
.model-id.is-copied { color: #7ff3d9; border-color: rgba(46,230,166,.45); background: rgba(46,230,166,.1); }
.model-id.is-copied::after { content: ''; }
.model-meta { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.model-brand-logo {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 8px;
  flex: 0 0 46px;
  object-fit: initial;
  border-radius: 13px;
  box-shadow: 0 0 22px rgba(91,141,255,.22), 0 0 0 1px rgba(255,255,255,.1) inset;
}
.model-brand-logo svg { display: block; width: 100%; height: 100%; }
.provider-claude { background: rgba(255,139,102,.1); border-color: rgba(255,139,102,.32); }
.provider-gpt { background: rgba(46,230,166,.09); border-color: rgba(46,230,166,.32); }
.provider-grok { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
.provider-glm { background: rgba(91,141,255,.11); border-color: rgba(91,141,255,.36); }
.provider-deepseek { background: rgba(56,232,255,.1); border-color: rgba(56,232,255,.35); }
.status-badge {
  align-self: start;
  justify-self: end;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 700 10.5px/1.25 var(--mono);
  letter-spacing: .03em;
  white-space: nowrap;
}
.st-avail, .st-available { color: #7ff3d9; background: rgba(46,230,166,.12); border-color: rgba(46,230,166,.34); }
.st-vip { color: #ffd98a; background: rgba(255,180,84,.14); border-color: rgba(255,180,84,.42); }
.st-gift { color: #e6b3ff; background: rgba(176,108,255,.14); border-color: rgba(176,108,255,.4); }
.st-media { color: #9fe9ff; background: rgba(56,232,255,.12); border-color: rgba(56,232,255,.38); }
.st-down { color: #ff9a9a; background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.38); }

/* The status strip makes live-versus-fallback provenance visible without blocking the catalog. */
.status-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 11px;
  min-height: 48px;
  margin: 18px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(21,30,50,.82);
  color: var(--text-2);
}
.status-strip strong { color: var(--text); font-size: 13.5px; }
.status-strip > span:last-child { color: var(--muted); font-size: 12px; }
.status-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 14px currentColor; }
.status-strip.is-live { border-color: rgba(46,230,166,.34); background: rgba(46,230,166,.07); }
.status-strip.is-live .status-dot { color: var(--green); background: var(--green); }
.status-strip.is-fallback { border-color: rgba(255,180,84,.34); background: rgba(255,180,84,.07); }
.status-strip.is-fallback .status-dot { color: var(--amber); background: var(--amber); }
.status-strip.is-loading .status-dot { color: var(--blue); background: var(--blue); animation: catalog-pulse 1.2s ease-in-out infinite; }
@keyframes catalog-pulse { 0%,100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

/* Pricing panels keep wide tables scrollable on narrow screens instead of overflowing the page. */
.price-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 20px 0 18px;
  padding: 20px 22px;
  border: 1px solid rgba(255,201,90,.54);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(255,224,138,.14), rgba(255,180,84,.04));
  box-shadow: 0 0 0 1px rgba(255,224,138,.12) inset, 0 16px 38px rgba(255,190,60,.12);
}
.price-top-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.price-top-label { color: #ffd98a; font: 700 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.price-ratio {
  color: #fff2c2;
  font-family: var(--hero);
  font-size: clamp(28px, 4.6vw, 44px);
  font-weight: 400;
  line-height: 1.05;
}
.price-top-copy small { color: var(--muted); font-size: 12.5px; }
.price-wrap-live { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(91,141,255,.06), var(--panel));
}
.price-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.price-panel-head > div > span { color: var(--cyan); font: 700 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.price-panel-head h3 { margin: 4px 0 0; font-size: 21px; }
.price-source-note { color: var(--muted); font: 10.5px/1.3 var(--mono); white-space: nowrap; }
.price-table-scroll { width: 100%; overflow-x: auto; border-radius: var(--r); }
/* Desktop pricing tables use fixed columns so both panels fit without internal scrollbars. */
.pricing-section .price-table { min-width: 0; margin: 0; table-layout: fixed; font-size: 12.5px; }
.pricing-section .price-table th, .pricing-section .price-table td { padding: 8px 7px; overflow-wrap: anywhere; }
.pricing-section .price-table th:first-child, .pricing-section .price-table td:first-child { width: 46%; min-width: 0; }
.pricing-section .price-table th.num, .pricing-section .price-table td.num { width: 27%; }
.price-model-name { display: block; color: var(--text); font-weight: 700; }
.pricing-section .price-table td:first-child code { display: inline-block; margin-top: 3px; color: var(--muted); background: transparent; border: 0; padding: 0; font-size: 10.5px; }
.price-footnote { color: var(--muted); font-size: 12.5px; }

/* The quick-start card is the homepage replacement for the removed purchase-plan section. */
.setup-feature-card {
  margin-top: 20px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(255,201,90,.48);
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, rgba(255,224,138,.1), rgba(21,30,50,.9) 55%, rgba(176,108,255,.08));
  box-shadow: 0 18px 54px rgba(0,0,0,.24), 0 0 0 1px rgba(255,224,138,.1) inset;
}
.setup-feature-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.setup-feature-eyebrow { color: #ffd98a; font: 700 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.setup-feature-head h3 { margin: 6px 0 4px; font-size: clamp(21px, 3vw, 29px); }
.setup-feature-head p { margin: 0; color: var(--text-2); font-size: 14px; }
.setup-feature-head .btn { justify-self: end; white-space: nowrap; }
.quick-start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 22px; }
.quick-start-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: rgba(13,19,33,.62);
  color: var(--text);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.quick-start-card:hover { color: var(--text); transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 12px 30px rgba(56,232,255,.14); }
.quick-start-card > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.quick-start-card strong { font-family: var(--display); font-size: 17px; line-height: 1.1; }
.quick-start-card small { margin-top: 3px; color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.quick-start-card > b { color: var(--cyan); font-size: 20px; }
.quick-start-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font: 700 21px/1 var(--display); }
.qs-claude .quick-start-icon { color: #ffb08c; background: rgba(255,139,102,.13); border: 1px solid rgba(255,139,102,.35); }
.qs-codex .quick-start-icon { color: #7ff3d9; background: rgba(46,230,166,.13); border: 1px solid rgba(46,230,166,.35); }
.qs-desktop .quick-start-icon { color: #a9c4ff; background: rgba(91,141,255,.13); border: 1px solid rgba(91,141,255,.35); }

@media (max-width: 980px) {
  .topbar-actions { display: none; }
}
@media (max-width: 740px) {
  .model-list { grid-template-columns: 1fr; }
  .price-wrap-live { grid-template-columns: 1fr; }
  .setup-feature-head { grid-template-columns: 1fr; }
  .setup-feature-head .btn { justify-self: start; }
  .quick-start-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .model-chip { grid-template-columns: 46px minmax(0, 1fr); align-items: start; }
  .model-chip .status-badge { grid-column: 2; justify-self: start; }
  .price-top { align-items: flex-start; flex-direction: column; }
  .price-top .btn { width: 100%; }
  .price-panel-head { flex-direction: column; gap: 6px; }
  .price-source-note { white-space: normal; }
  /* Narrow phones keep every rate column accessible through deliberate horizontal scrolling. */
  .pricing-section .price-table { min-width: 520px; table-layout: auto; }
  .pricing-section .price-table th:first-child, .pricing-section .price-table td:first-child { width: auto; min-width: 190px; }
  .pricing-section .price-table th.num, .pricing-section .price-table td.num { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ── Redesign 20260719: topbar lớn hơn, nút giữa, khối provider màu ── */
.topbar { height: 72px; padding: 0 clamp(16px, 3vw, 40px); }
.topnav { gap: 4px; }
.topnav a { font-size: 15px; padding: 10px 16px; }
.topbar-cta, .topbar-cta-2 { padding: 11px 20px; font-size: 15px; border-radius: 11px; }
/* Cân chỉnh: brand + nav trái, 2 CTA phải, đều giữa dọc */
.topbar-actions { gap: 12px; }

/* Hero actions / usage gọn: 1 nút giữa, không tách server */
.usage-cta-btns .btn { min-width: 240px; }

/* Catalog: mỗi provider là một khối màu riêng, grid chip trong khối */
.model-list { display: flex; flex-direction: column; gap: 18px; margin: 22px 0 14px; }
.provider-block {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, rgba(20,31,54,.55), rgba(15,24,42,.35));
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
}
.provider-block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.provider-block-head .brand-logo { width: 30px; height: 30px; flex: 0 0 30px; }
.provider-block-headtext { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.provider-block-title { font: 700 18px/1.2 var(--display); letter-spacing: .02em; color: var(--text); }
.provider-block-desc { font: 400 13.5px/1.5 var(--sans); color: var(--text-2); max-width: 760px; white-space: pre-line; }
.provider-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
/* Màu viền/khối theo provider */
.provider-claude { border-color: rgba(255,139,102,.35); box-shadow: 0 14px 40px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,139,102,.08); }
.provider-claude .provider-block-title { color: #ffb08c; }
.provider-gpt { border-color: rgba(46,230,166,.35); box-shadow: 0 14px 40px rgba(0,0,0,.22), inset 0 0 0 1px rgba(46,230,166,.08); }
.provider-gpt .provider-block-title { color: #2ee6a6; }
.provider-glm { border-color: rgba(91,141,255,.35); box-shadow: 0 14px 40px rgba(0,0,0,.22), inset 0 0 0 1px rgba(91,141,255,.08); }
.provider-glm .provider-block-title { color: #8fb4ff; }
.provider-deepseek { border-color: rgba(56,232,255,.35); box-shadow: 0 14px 40px rgba(0,0,0,.22), inset 0 0 0 1px rgba(56,232,255,.08); }
.provider-deepseek .provider-block-title { color: #38e8ff; }
.provider-grok { border-color: rgba(243,247,255,.25); box-shadow: 0 14px 40px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.06); }
.provider-grok .provider-block-title { color: #eef4ff; }

/* Chip gọn: không còn logo riêng (logo ở head khối), 2 cột tên+giá / badge */
.model-chip {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(26,38,61,.5), rgba(16,27,48,.35));
  border: 1px solid var(--line);
  transition: .15s;
}
.model-chip:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 8px 22px rgba(0,0,0,.25); }
.model-chip-main { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.model-chip-main strong { font-size: 14.5px; color: var(--text); }
.model-id {
  font: 500 11.5px/1.3 var(--mono); color: var(--text-2);
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: 7px; padding: 4px 8px; cursor: pointer; align-self: flex-start;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: .15s;
}
.model-id:hover { color: var(--text); border-color: var(--line-strong); background: rgba(255,255,255,.07); }
.model-price {
  font: 700 13px/1.3 var(--mono); color: #ffd98a; letter-spacing: .01em;
  margin-top: 2px;
}
.model-chip.status-vip .model-price { color: var(--amber); }
.model-chip.status-gift .model-price { color: var(--violet); }
.model-chip.status-media .model-price { color: var(--blue); }

/* Ẩn khối bảng giá cũ (đã gộp vào list) */
.pricing-section[hidden] { display: none; }

/* Nút "Mua ngay" cuối mỗi nhóm — căn giữa, gọn */
.cat-buy-cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 16px auto 2px; padding: 11px 26px;
  font-size: 15px; font-weight: 700; border-radius: 11px;
  white-space: nowrap;
}
.provider-block { display: flex; flex-direction: column; align-items: stretch; }
.provider-block .cat-buy-cta { align-self: center; }

/* Setup card gọn (chỉ 1 CTA) */
.setup-feature-head { grid-template-columns: minmax(0, 1fr) auto; gap: 18px; }


/* ===== LUXURY GOLD — nhóm Claude VIP + gói Fable 5 (21/07/2026) =====
   Hướng: dark luxury, vàng champagne kỷ luật — sang nhờ gradient tinh + glow mềm,
   không đổ vàng đặc. Khối VIP nổi hơn mọi nhóm; card VIP/Fable ánh kim nhẹ. */

/* Khối nhóm VIP (Opus VIP + Fable 5 VIP): viền vàng 2 lớp + hào quang ấm + nền ám vàng rất nhạt */
.cat-claude-vip,
.cat-claude-fable-vip {
  border-color: rgba(232, 194, 104, .55);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(232,194,104,.10), transparent 55%),
    linear-gradient(180deg, rgba(28,25,16,.72), rgba(15,24,42,.42));
  box-shadow:
    0 18px 52px rgba(0,0,0,.30),
    0 0 0 1px rgba(232,194,104,.14),
    0 0 34px rgba(232,194,104,.10),
    inset 0 1px 0 rgba(255,226,150,.18);
}
.cat-claude-vip .provider-block-head,
.cat-claude-fable-vip .provider-block-head { border-bottom-color: rgba(232,194,104,.28); }
.cat-claude-vip .provider-block-title,
.cat-claude-fable-vip .provider-block-title {
  background: linear-gradient(92deg, #f6dc9a 0%, #e8c268 38%, #fff3cf 52%, #d9ab4f 70%, #f2d488 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: .03em;
  text-shadow: none;
}
.cat-claude-vip .provider-block-desc,
.cat-claude-fable-vip .provider-block-desc { color: #cdbd97; }
.cat-claude-vip .brand-logo svg g,
.cat-claude-vip .brand-logo svg path,
.cat-claude-fable-vip .brand-logo svg g,
.cat-claude-fable-vip .brand-logo svg path { stroke: #e8c268; }
.cat-claude-vip .brand-logo svg circle,
.cat-claude-fable-vip .brand-logo svg circle { fill: #f6dc9a; }

/* Card VIP (mọi model trong nhóm VIP + card nào status-vip): ánh kim + viền vàng */
.model-chip.status-vip {
  border-color: rgba(232,194,104,.45);
  background:
    linear-gradient(115deg, rgba(232,194,104,.10) 0%, rgba(26,38,61,.55) 34%, rgba(16,27,48,.45) 72%, rgba(232,194,104,.07) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,226,150,.16),
    0 6px 18px rgba(0,0,0,.28);
  position: relative;
  overflow: hidden;
}
/* Vệt kim loại quét chéo tĩnh — gợi chất liệu, không animation gây rẻ tiền */
.model-chip.status-vip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,236,180,.055) 50%, transparent 58%);
}
.model-chip.status-vip:hover {
  border-color: rgba(240,208,126,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,226,150,.22),
    0 10px 26px rgba(0,0,0,.32),
    0 0 22px rgba(232,194,104,.16);
}
.model-chip.status-vip .model-chip-main strong { color: #f6e3b0; letter-spacing: .01em; }
.model-chip.status-vip .model-id {
  color: #d9c48b; border-color: rgba(232,194,104,.35);
  background: rgba(232,194,104,.07);
}
.model-chip.status-vip .model-id:hover { color: #f6e3b0; border-color: rgba(240,208,126,.6); background: rgba(232,194,104,.13); }
.model-chip.status-vip .model-price { color: #ffdf94; text-shadow: 0 0 14px rgba(232,194,104,.35); }
.model-chip.status-vip .st-vip {
  color: #1d1503;
  background: linear-gradient(180deg, #f6dc9a, #d9ab4f);
  border-color: rgba(255,236,180,.85);
  font-weight: 800;
  box-shadow: 0 1px 6px rgba(232,194,104,.4);
}

/* Card "nổi" trong nhóm credit (Opus 5): ánh vàng kim như card VIP nhưng vẫn giữ
   nhãn trạng thái Available (không đổi thành VIP) — vàng ở đây là dấu "model mới
   nhất / mạnh nhất trong nhóm", không phải tier VIP. */
.model-chip.is-gold {
  border-color: rgba(232,194,104,.5);
  background:
    linear-gradient(115deg, rgba(232,194,104,.13) 0%, rgba(26,38,61,.55) 34%, rgba(16,27,48,.45) 72%, rgba(232,194,104,.09) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,226,150,.18),
    0 6px 20px rgba(0,0,0,.3),
    0 0 18px rgba(232,194,104,.12);
  position: relative;
  overflow: hidden;
}
.model-chip.is-gold::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,236,180,.07) 50%, transparent 58%);
}
.model-chip.is-gold:hover {
  border-color: rgba(240,208,126,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,226,150,.24),
    0 10px 28px rgba(0,0,0,.34),
    0 0 24px rgba(232,194,104,.22);
}
.model-chip.is-gold .model-chip-main strong {
  color: #ffe6ad; letter-spacing: .01em;
  text-shadow: 0 0 16px rgba(232,194,104,.3);
}
.model-chip.is-gold .model-id {
  color: #dcc891; border-color: rgba(232,194,104,.38);
  background: rgba(232,194,104,.08);
}
.model-chip.is-gold .model-id:hover { color: #f6e3b0; border-color: rgba(240,208,126,.62); background: rgba(232,194,104,.14); }
.model-chip.is-gold .model-price { color: #ffdf94; text-shadow: 0 0 14px rgba(232,194,104,.38); }
.model-chip.is-gold .status-badge {
  color: #1d1503;
  background: linear-gradient(180deg, #f6dc9a, #d9ab4f);
  border-color: rgba(255,236,180,.85);
  font-weight: 800;
  box-shadow: 0 1px 6px rgba(232,194,104,.4);
}

/* CTA Mua ngay trong 2 nhóm vàng: nút vàng kim thay gradient tím mặc định */
.cat-claude-vip .cat-buy-cta,
.cat-claude-fable-vip .cat-buy-cta {
  background: linear-gradient(180deg, #f2d488 0%, #d9ab4f 100%);
  color: #201703;
  border: 1px solid rgba(255,236,180,.9);
  box-shadow: 0 4px 18px rgba(232,194,104,.35), inset 0 1px 0 rgba(255,246,214,.8);
  text-shadow: none;
}
.cat-claude-vip .cat-buy-cta:hover,
.cat-claude-fable-vip .cat-buy-cta:hover {
  background: linear-gradient(180deg, #f8e0a4 0%, #e2b65e 100%);
  box-shadow: 0 6px 24px rgba(232,194,104,.5), inset 0 1px 0 rgba(255,246,214,.9);
}

/* ---------- Auth portal trên topbar (nút Đăng nhập ↔ chip account) ---------- */
/* Cân hàng nút topbar: <a> kế thừa line-height 1.7 của body nên cao hơn
   <button> vài px — ép cùng line-height để Đăng nhập / Liên Hệ / Mở Bot
   thẳng hàng và đều chiều cao. */
.topbar-actions .topbar-cta,
.topbar-actions .topbar-account {
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}
/* Cân GIỮA TRANG cho cụm nav: flex "justify-content:center" chỉ cân giữa
   khoảng trống còn lại giữa brand và cụm nút phải — cụm phải rộng thêm (nút
   Đăng nhập) là nav dạt trái. Ở màn đủ rộng, neo nav tuyệt đối vào tâm topbar
   để luôn đúng giữa trang bất kể hai bên nặng nhẹ ra sao.

   TẠM TẮT cùng lúc với PORTAL_AUTH_ENABLED = false: bù lệch này chỉ cần khi có
   nút Đăng nhập. Auth đang khóa nên cụm nút phải rộng đúng như bản cũ, giữ
   override sẽ làm header lệch so với bản đang chạy trên server. Bật lại chung
   với cờ portal.
@media (min-width: 1280px) {
  .topbar { position: sticky; }
  .topnav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
*/
/* Chip tên account — bấm vào mở trang quản lý /portal. Cùng ngôn ngữ pill với
   topbar-cta nhưng nền tối viền cyan để phân biệt "trạng thái" với "hành động". */
.topbar-account {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 11px;
  background: rgba(56, 232, 255, .08);
  border: 1px solid rgba(56, 232, 255, .4);
  color: var(--cyan); font-weight: 700; font-size: 14.5px;
  white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  transition: .18s;
}
.topbar-account:hover {
  color: #05070f; background: var(--grad-green); border-color: transparent;
  box-shadow: 0 0 24px rgba(56, 232, 255, .5);
}
.topbar-account-ico { font-size: 15px; line-height: 1; }
@media (max-width: 980px) {
  #topbarLogin, .topbar-account { display: none; }
}