/* ============================================================
   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="/portal/#/models"] { --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 ---------- */
/* Cân đối lại 2026-08-05: hero giờ chỉ còn logo → eyebrow → h1 → sub → CTA
   (đã bỏ hàng hbadge). Padding dưới thu lại để CTA không bị lơ lửng giữa
   khoảng trắng, và CTA phóng to hơn vì nó là hành động duy nhất của khối. */
.hero {
  position: relative;
  padding: clamp(52px, 8vw, 100px) clamp(18px, 4vw, 40px) clamp(52px, 7vw, 88px);
  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: clamp(15px, 1.4vw, 17px); font-weight: 400;
  line-height: 1.65; color: var(--text-2); max-width: 730px; margin: 0 auto;
}
.hero-sub strong { color: var(--text); font-weight: 700; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* CTA duy nhất của hero — khung vàng sáng, to hơn vì không còn hbadge chia
   sự chú ý bên dưới. */
.usage-cta {
  margin-top: clamp(28px, 3.4vw, 40px); text-align: center;
  display: inline-block; padding: 20px 30px;
  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: 14px; font-weight: 600; color: #ffd98a; margin-bottom: 14px; }
.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; }
/* Nút CTA hero: to hơn nút cùng class trong các section dưới. */
.usage-cta .btn-usage { font-size: 15.5px; padding: 13px 26px; }
.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;
}

/* CTA "Tạo API Key Ngay" dưới hero — thay hero-note cũ, dẫn vào portal login. */
.hero-portal-cta { margin: 22px auto 0; text-align: center; }

/* 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; }
}

/* Ngưỡng chuyển sang menu ☰.
 *
 * 1240px chứ không 980px: body có zoom: 0.9 nên bố cục tự coi mình rộng hơn cửa
 * sổ ~11%, và cách căn giữa bằng grid đòi hai cột biên BẰNG NHAU — tức mỗi bên
 * phải rộng bằng khối lớn hơn (hàng nút 306px), không phải bằng nội dung của
 * chính nó. Đo 05/08/2026: ở cửa sổ 985px tràn 107px, ở 1200px vẫn tràn 7px vì
 * cột biên chỉ được 296px. Nav ẩn từ 1240px là mốc đo được không còn tràn ở mọi
 * độ rộng nhỏ hơn, kể cả khi đã đăng nhập (1231px còn dư 2px nên phải nới thêm).
 *
 * Ngưỡng cũ 980px là hợp lý cho bản flex (khối phải chỉ cần đủ chỗ cho chính nó);
 * đổi cách căn thì ngưỡng phải đổi theo — đây là cái giá của việc căn giữa thật.
 */
@media (max-width: 1240px) {
  .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 giữa THẬT cho menu: grid 3 cột, cột giữa nằm đúng tâm trang.
 *
 * Bản flex trước đây (.topnav { flex: 1 1 auto; justify-content: center })
 * chỉ căn giữa PHẦN CÒN LẠI sau khi trừ hai khối hai bên, nên menu lệch đúng
 * bằng nửa hiệu độ rộng của chúng. Đo 05/08/2026 ở 1440px và 1920px: khối phải
 * (Đăng nhập + Liên Hệ + Mở Bot) rộng 306px, logo trái 168px ⇒ menu lệch TRÁI
 * (306−168)/2 = 69px, giống nhau ở cả hai độ rộng vì đây là hiệu cố định chứ
 * không phải lỗi co giãn.
 *
 * Hai cột biên CÙNG một giá trị (1fr) nên luôn chiếm chỗ bằng nhau ⇒ cột giữa ở
 * đúng tâm bất kể bên trong rộng bao nhiêu. Nhờ đó khối phải đổi độ rộng — khách
 * đăng nhập xong "Đăng nhập" thành chip email (đo: 340px → 456px) — menu vẫn
 * không xê dịch; bản bù trừ cứng thì phải tính lại mỗi lần.
 *
 * minmax(0, 1fr) chứ không 1fr trơn: cột grid mặc định không co nhỏ hơn nội
 * dung, đủ hẹp là đẩy tràn ngang.
 *
 * Cột giữa là minmax(0, max-content) và các nút nav được phép co (min-width: 0
 * + overflow ẩn ở .topnav): chỗ hẹp thì grid bóp CỘT GIỮA trước, giữ nguyên hai
 * cột biên bằng nhau. Hai lần thử trước đều sai theo hai kiểu ngược nhau và đã
 * đo được: để cột giữa `auto` thì nút phải bị đẩy tràn 9px ở 1280px; cho cột
 * biên sàn max-content thì hết tràn nhưng hai biên không còn bằng nhau nên menu
 * lệch lại 44px. Bóp cột giữa là cách duy nhất giữ được cả hai tính chất.
 */
.topbar {
  display: grid;
  /* Hai cột biên dùng CHUNG một giá trị (1fr) ⇒ luôn bằng nhau ⇒ cột giữa ở đúng
   * tâm trang, bất kể bên trong rộng bao nhiêu. Đây là điểm khác bản flex cũ:
   * flex chỉ căn giữa phần còn lại nên menu lệch nửa hiệu hai bên.
   *
   * Cột giữa minmax(0, max-content): trần là bề rộng menu cần, SÀN là 0 nên khi
   * hẹp grid được phép bóp nó thay vì đẩy hàng nút ra ngoài. Sàn 0 là chi tiết
   * quyết định — `max-content` trơn (không minmax) không co, đo được tràn ngang
   * 211px ở cửa sổ 1000px, tức cả khoảng 980–1200px đều vỡ.
   *
   * Menu không bị cắt chữ nhờ `flex-shrink` của các nút bằng 0 và quy tắc thu gọn
   * (gap/đệm/cỡ chữ) bên dưới; khi vẫn không đủ, nav ẩn hẳn ở 980px và nhường
   * cho nút ☰.
   */
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, max-content)
    minmax(0, 1fr);
  gap: 12px;
}
.topnav {
  flex: 0 1 auto;
  justify-content: center;
  grid-column: 2;
  min-width: 0;
  /* KHÔNG overflow: hidden — nó cắt cụt chữ trong nút thay vì báo hết chỗ (đo:
   * nút "Hỏi đáp" mất một phần ở 1280px). Thu gọn bằng media query thay vì cắt.
   */
  flex-wrap: nowrap;
}
/* Chỗ hẹp: thu gap + đệm ngang + cỡ chữ nút nav, vì mất vài px đệm không ảnh
 * hưởng khả năng đọc, còn cắt chữ hay tràn ngang thì có.
 *
 * Ngưỡng tính theo px CỬA SỔ, không phải px bố cục: body có zoom: 0.9 nên ở cửa
 * sổ 1265px bố cục tự coi mình rộng 1406px, còn media query đo cửa sổ. Cần chặn
 * từ mức bố cục ~1460px ⇒ viết 1460 × 0,9 ≈ 1314px. Bản đầu tôi ghi thẳng 1180px
 * nên quy tắc không chạy ở đúng khoảng cần nó.
 *
 * Trên 1314px thì mọi thứ vừa thoải mái nên không cần thu.
 */
@media (max-width: 1314px) {
  .topnav { gap: 2px; }
  .topnav a { padding-left: 11px; padding-right: 11px; font-size: 14px; }
}
/* Nút nav không tự bóp: cột giữa co được (sàn 0) là để grid khỏi tràn, nhưng nếu
 * bản thân nút co theo thì chữ bị nén/cắt. flex-shrink: 0 giữ nút nguyên kích
 * thước — thừa ra thì đã có mốc 980px ẩn cả nav và bật nút ☰.
 */
.topnav a { flex: 0 0 auto; }
/* Cân chỉnh: logo trái, menu giữa tâm trang, nhóm nút phải */
.topbar-actions { gap: 12px; justify-content: flex-end; min-width: 0; }
/* nav-toggle (hiện dưới 980px) nằm cùng ô với nhóm nút để không tạo cột thứ 4. */
.nav-toggle { grid-column: 3; justify-self: end; }

/* Chiều cao đều nhau cho mọi thứ trong topbar.
 *
 * Đo được: menu 47,7px — Đăng nhập/Liên Hệ 42,2px — Mở Bot 40px, lệch tới 7,7px
 * nên cạnh trên/dưới các nút không thành một đường. Nguyên nhân là mỗi loại có
 * line-height riêng (menu 25,5px vs nút 18px) cộng padding dọc bằng nhau, chứ
 * không phải padding sai — nên chốt CHIỀU CAO chung và căn nội dung bằng flex,
 * thay vì đi vá padding từng nút (vá padding sẽ lệch lại khi đổi cỡ chữ).
 *
 * .brand để yên: nó là logo, không phải nút, và cao 35,7px < 40px nên không phá
 * hàng.
 */
.topnav a,
.topbar-cta,
.topbar-cta-2,
.topbar-account {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}

/* 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;
}
/* Việc căn giữa cụm nav đã được giải quyết bằng grid 3 cột ở khối .topbar phía
   trên (tìm "Căn giữa THẬT cho menu"). Khối override cũ ở đây — neo .topnav bằng
   position: absolute + translateX(-50%) — đã bỏ hẳn:

   - Nó từng bị comment lại kèm ghi chú "TẠM TẮT cùng lúc với
     PORTAL_AUTH_ENABLED = false", nhưng cờ đó nay đã là true, nên ghi chú sai và
     dễ khiến lần sau bật lại một cách vô hại-nhìn-thì-đúng.
   - Neo tuyệt đối căn đúng tâm nhưng lấy .topnav ra khỏi luồng, nên nó không còn
     chiếm chỗ: hai khối hai bên tự do giãn vào giữa và ĐÈ LÊN menu ở màn hẹp mà
     không có dấu hiệu nào báo. Grid giữ nav trong luồng nên chật là bố cục tự
     ẩn nav (mốc 1240px), thấy được và đo được.
*/
/* 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". */
/* Chặn tràn ở trạng thái ĐÃ ĐĂNG NHẬP — xem ghi chú ở .topbar (grid 3 cột).
 *
 * Cách căn giữa bằng grid buộc CẢ HAI cột biên rộng bằng khối lớn hơn, nên khối
 * phải phình là cả hai bên phình theo. Khi khách đăng nhập, "Đăng nhập" (124px)
 * thành chip email ⇒ khối phải 340px → 456px, và 456×2 + menu 629px vượt chỗ:
 * đo được tràn ngang 97px ở 1231px, 72px ở 1280px, 35px ở 1440px (bản flex cũ
 * không tràn vì nó không đòi hai bên bằng nhau).
 *
 * clamp/bóp chip KHÔNG phải cách chữa: xuống ~110px thì email chỉ còn vài ký tự
 * cộng "…", mất tác dụng nhận biết (đã thử và đo). Cách dùng ở đây là bỏ nút "Mở
 * Bot" trong khoảng chật — bot vẫn tới được từ nhiều chỗ khác trong trang, còn
 * email thì chỉ có chỗ này hiển thị.
 *
 * Sàn 120px để chip không teo thành vô nghĩa; trên màn rộng vẫn đạt trần 240px
 * như thiết kế gốc.
 */
.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; overflow: hidden; text-overflow: ellipsis;
  /* Trần 240px giữ nguyên như thiết kế gốc; chỗ chật được giải quyết bằng cách
   * ẩn nút "Mở Bot" (quy tắc riêng bên dưới) chứ không bóp chip, vì bóp chip
   * xuống ~110px thì email chỉ còn 3–4 ký tự + "…", mất tác dụng nhận biết. */
  max-width: 240px;
  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; }
/* Khoảng chật (nav còn hiện nhưng chip email đã chiếm chỗ của nút "Đăng nhập"):
 * bỏ nút "Mở Bot" để khối phải không đẩy vỡ bố cục căn giữa. 1540px là mốc đo
 * được không còn tràn ở mọi độ rộng nhỏ hơn khi đã đăng nhập (chip 240px). Chỉ
 * áp khi CÓ chip — chưa đăng nhập thì khối phải hẹp hơn 116px nên vẫn đủ chỗ và
 * nút Bot được giữ.
 */
@media (max-width: 1540px) {
  .topbar-actions:has(.topbar-account:not([hidden])) .js-bot { display: none; }
}
@media (max-width: 980px) {
  #topbarLogin, .topbar-account { display: none; }
}

/* ============================================================
   SECTION: "Hai cách gọi model AI"
   2026-08-05 · Editorial split. Khối 1 (apps) text-trái/ảnh-phải,
   khối 2 (web) ảnh-trái/text-phải để tạo nhịp không đối xứng.
   ============================================================ */
.ways {
  position: relative;
  /* Padding-top nhỏ hơn padding-bottom của .hero: hero đã có khoảng thở riêng,
     cộng dồn cả hai thì CTA vàng bị đẩy quá xa khối nội dung tiếp theo. */
  padding: clamp(40px, 5vw, 76px) 20px clamp(56px, 8vw, 112px);
  border-top: 1px solid var(--line);
}
.ways-inner { max-width: 1240px; margin: 0 auto; }

.ways-head { max-width: 880px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.ways-eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan);
  padding: 6px 12px; border-radius: 999px;
  background: rgba(56, 232, 255, .08); border: 1px solid rgba(56, 232, 255, .28);
  margin-bottom: 18px;
}
.ways-head h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 4vw, 46px); line-height: 1.15;
  color: var(--text); margin: 0 0 18px; text-transform: none;
  letter-spacing: -.01em;
}
.ways-head h2 em {
  font-style: normal;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ways-lead {
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6;
  color: var(--text-2); margin: 0;
}

/* Khối chung -------------------------------------------------- */
.way-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(32px, 4vw, 56px) 0;
}
.way-block + .way-block { border-top: 1px dashed var(--line); }
.way-web .way-copy { order: 2; }
.way-web .way-visual { order: 1; }

.way-tag {
  display: inline-block; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 6px; margin-bottom: 14px;
}
.way-tag-blue {
  color: #b5ccff; background: rgba(91, 141, 255, .12);
  border: 1px solid rgba(91, 141, 255, .35);
}
.way-tag-gold {
  color: #ffd98a; background: rgba(255, 190, 60, .12);
  border: 1px solid rgba(255, 190, 60, .35);
}
.way-copy h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2;
  color: var(--text); margin: 0 0 12px; letter-spacing: -.005em;
}
.way-copy > p {
  font-size: 15px; line-height: 1.65; color: var(--text-2); margin: 0 0 22px;
}
.way-cta-row { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }

/* App list (khối 1) ----------------------------------------- */
.way-apps-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
}
.way-apps-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(21, 30, 50, .55);
  border: 1px solid var(--line);
  transition: .18s;
}
.way-apps-list li:hover {
  border-color: rgba(91, 141, 255, .4);
  background: rgba(21, 30, 50, .85);
  transform: translateY(-1px);
}
.way-apps-list img {
  width: 44px; height: 44px; border-radius: 9px; flex-shrink: 0;
  background: rgba(255, 255, 255, .04);
  object-fit: contain;
}
.way-apps-list b {
  display: block; font-size: 14.5px; color: var(--text); font-weight: 600;
  margin-bottom: 2px;
}
.way-apps-list span {
  display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35;
}
.way-apps-fallback {
  width: 44px; height: 44px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 20px;
  color: #06232b; background: linear-gradient(135deg, #4fe3f5, #7c6cff);
}

/* Use-case list (khối 2) ------------------------------------ */
.way-usecases {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
}
.way-usecases li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border-radius: 12px;
  background: rgba(21, 30, 50, .55);
  border: 1px solid var(--line);
}
.way-usecases li:hover {
  border-color: rgba(255, 190, 60, .4);
  background: rgba(28, 22, 8, .55);
}
.way-usecase-ico {
  font-size: 22px; line-height: 1; flex-shrink: 0;
  padding-top: 2px;
}
.way-usecases b {
  display: block; font-size: 14.5px; color: var(--text); font-weight: 600;
  margin-bottom: 3px;
}
.way-usecases span {
  display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4;
}

/* Visual layered composition ------------------------------- */
.way-visual { position: relative; min-height: 320px; }
.way-visual-stack { min-height: clamp(340px, 32vw, 460px); }

.way-shot {
  position: relative; margin: 0;
  border-radius: 16px; overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
}
.way-shot img {
  display: block; width: 100%; height: auto;
}
.way-shot figcaption {
  position: absolute; left: 12px; bottom: 12px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--text); background: rgba(5, 7, 15, .78);
  padding: 6px 10px; border-radius: 8px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .08);
}
.way-shot figcaption code {
  color: var(--cyan); background: transparent; padding: 0;
  font-family: var(--mono); font-size: 11.5px;
}

/* Khối 1: 2 shot xếp chồng lệch để tạo depth */
.way-shot-primary {
  position: relative; z-index: 2;
  transform: rotate(-1.2deg);
  max-width: 88%;
}
.way-shot-secondary {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  transform: rotate(2deg);
  width: 55%;
  border-color: rgba(255, 190, 60, .35);
  box-shadow: 0 20px 60px rgba(255, 190, 60, .18), var(--shadow);
}
.way-shot-primary::after,
.way-shot-secondary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 16px;
  background: linear-gradient(180deg, transparent 60%, rgba(5, 7, 15, .5));
}

/* Khối 2: 1 shot lớn */
.way-shot-wide { max-width: 100%; }
.way-shot-wide figcaption b { color: var(--cyan); }

/* Responsive ------------------------------------------------ */
@media (max-width: 1024px) {
  .way-block {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 40px);
  }
  .way-web .way-copy { order: 1; }
  .way-web .way-visual { order: 2; }
  .way-visual-stack { min-height: clamp(280px, 60vw, 420px); }
  .way-shot-primary { max-width: 82%; }
  .way-shot-secondary { width: 58%; }
}

@media (max-width: 640px) {
  .ways { padding: 36px 16px 48px; }
  .ways-head h2 br { display: none; }
  .way-apps-list,
  .way-usecases { grid-template-columns: 1fr; }
  .way-shot-primary { transform: rotate(-.6deg); max-width: 92%; }
  .way-shot-secondary { transform: rotate(1deg); width: 68%; }
  .way-visual-stack { min-height: clamp(240px, 66vw, 360px); }
  .way-shot figcaption { font-size: 10.5px; padding: 5px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .way-shot-primary,
  .way-shot-secondary { transform: none; }
  .way-apps-list li:hover { transform: none; }
}

/* ============================================================
   SECTION: "Về chúng tôi" + Catalog model gộp
   2026-08-05 · Gateway pitch + live catalog (không Uptime, không
   bảng giá chi tiết, không Grok).
   ============================================================ */
.about {
  padding: clamp(56px, 8vw, 112px) 20px;
  border-top: 1px solid var(--line);
}
.about-inner { max-width: 1240px; margin: 0 auto; }

.about-head { max-width: 900px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.about-eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: #ffd98a;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 190, 60, .1); border: 1px solid rgba(255, 190, 60, .32);
  margin-bottom: 18px;
}
.about-head h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 4vw, 46px); line-height: 1.15;
  color: var(--text); margin: 0 0 20px; text-transform: none;
  letter-spacing: -.01em;
}
.about-head h2 em {
  font-style: normal;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-lead {
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.65;
  color: var(--text-2); margin: 0 auto 28px; max-width: 780px;
}
.about-lead b { color: var(--text); font-weight: 600; }
.about-highlights {
  list-style: none; margin: 0 auto; padding: 0; max-width: 820px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
  text-align: left;
}
.about-highlights li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(21, 30, 50, .5); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--text-2); line-height: 1.5;
}
.about-highlights li span {
  font-size: 22px; line-height: 1; flex-shrink: 0;
}
.about-highlights li b { color: var(--text); font-weight: 600; }

/* Catalog block ------------------------------------------------- */
.catalog {
  margin-top: clamp(32px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 36px);
  background: linear-gradient(180deg, rgba(21, 30, 50, .6), rgba(13, 19, 33, .4));
}
.catalog-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  flex-wrap: wrap; margin-bottom: 24px;
}
.catalog-eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan);
  padding: 4px 10px; border-radius: 6px; margin-bottom: 10px;
  background: rgba(56, 232, 255, .08); border: 1px solid rgba(56, 232, 255, .28);
}
.catalog-head h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 2.3vw, 28px); line-height: 1.2;
  color: var(--text); margin: 0 0 6px; letter-spacing: -.005em;
}
.catalog-note { font-size: 13.5px; color: var(--text-2); margin: 0; max-width: 560px; }
.catalog-note b { color: var(--text); }

/* Cột phải của catalog-head: khung tỷ lệ nạp + CTA. */
.catalog-aside {
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  flex-shrink: 0;
}
.catalog-more { flex-shrink: 0; }

.rate-card {
  padding: 12px 16px; border-radius: 14px; text-align: right;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(255, 190, 60, .14), transparent 65%),
    linear-gradient(180deg, rgba(32, 26, 14, .6), rgba(13, 16, 26, .5));
  border: 1px solid rgba(255, 190, 60, .32);
  box-shadow: 0 0 0 1px rgba(255, 190, 60, .06), 0 10px 26px rgba(255, 160, 32, .08);
}
.rate-label {
  display: block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  color: #ffd98a; margin-bottom: 4px;
}
.rate-eq {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
  margin: 0 0 3px;
}
.rate-eq b {
  font-family: var(--display); font-weight: 700; font-size: 27px; line-height: 1;
  letter-spacing: -.01em;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(255, 190, 60, .3));
}
.rate-sign {
  font-family: var(--display); font-weight: 600; font-size: 20px;
  color: var(--muted); line-height: 1;
}
.rate-eq em {
  font-style: normal; font-family: var(--mono); font-size: 12px;
  color: var(--text-2); letter-spacing: .04em;
}
.rate-sub { display: block; font-size: 11.5px; color: var(--muted); }

/* Model cards — thẻ cao cấp: tên model là điểm neo (vàng phát sáng), thanh
   accent trên đỉnh, hairline grid nền, badge cấp bậc theo giá. */
.mcards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 14px;
}
.mcard {
  position: relative;
  display: flex; flex-direction: column;
  padding: 20px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(91, 141, 255, .1), transparent 62%),
    linear-gradient(180deg, rgba(21, 30, 50, .78), rgba(11, 16, 29, .9));
  overflow: hidden;
  transition: transform .2s var(--ease, cubic-bezier(.16, 1, .3, 1)), border-color .2s, box-shadow .2s;
}
/* Hairline grid rất mờ — chất "console" mà không ồn. */
.mcard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
}
.mcard:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 190, 60, .42);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 190, 60, .16);
}

/* Thanh accent trên đỉnh — sáng lên khi hover. */
.mcard-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 190, 60, .5), transparent);
  opacity: .4; transition: opacity .2s;
}
.mcard:hover .mcard-bar { opacity: 1; }
.mcard.is-hero .mcard-bar { opacity: .9; background: var(--grad-gold); }

/* Thẻ flagship: khung vàng luxury để nổi khỏi phần còn lại. */
.mcard.is-hero {
  border-color: rgba(255, 190, 60, .38);
  background:
    radial-gradient(130% 100% at 50% -25%, rgba(255, 190, 60, .16), transparent 60%),
    linear-gradient(180deg, rgba(32, 26, 14, .8), rgba(13, 16, 26, .92));
  box-shadow: 0 0 0 1px rgba(255, 190, 60, .1), 0 16px 40px rgba(255, 160, 32, .1);
}

.mcard-head {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
.mcard-ico {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.mcard-ico svg { width: 18px; height: 18px; }
.mcard-brand {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  flex: 1; min-width: 0;
}
.mcard-tier {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; flex-shrink: 0;
}
.mcard-tier.is-flagship { color: #2b1c00; background: var(--grad-gold); }
.mcard-tier.is-premium  { color: #ffd98a; background: rgba(255, 190, 60, .12); border: 1px solid rgba(255, 190, 60, .38); }
.mcard-tier.is-pro      { color: #b5ccff; background: rgba(91, 141, 255, .12); border: 1px solid rgba(91, 141, 255, .38); }
.mcard-tier.is-fast     { color: #8ff0d6; background: rgba(46, 230, 166, .1);  border: 1px solid rgba(46, 230, 166, .32); }
.mcard-tier.is-media    { color: #e6bcff; background: rgba(176, 108, 255, .12); border: 1px solid rgba(176, 108, 255, .38); }

/* Tên model — điểm neo thị giác: lớn, display font, vàng phát sáng.
   Glow dùng filter drop-shadow chứ KHÔNG dùng text-shadow: với
   background-clip:text + color:transparent, text-shadow vẽ phía sau glyph
   trong suốt nên lọt qua chữ làm nó đục; drop-shadow bám đúng pixel gradient. */
.mcard-title {
  position: relative; z-index: 1;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(21px, 1.7vw, 26px); line-height: 1.15;
  margin: 0 0 7px; letter-spacing: -.005em;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(255, 190, 60, .32));
}
.mcard-id {
  position: relative; z-index: 1;
  display: block; font-family: var(--mono); font-size: 11.5px;
  color: var(--muted); word-break: break-all; line-height: 1.4;
  margin-bottom: 16px;
}

.mcard-price {
  position: relative; z-index: 1; margin-top: auto;
  display: flex; align-items: baseline; gap: 7px;
  padding: 11px 13px; border-radius: 11px;
  background: linear-gradient(180deg, rgba(56, 232, 255, .09), rgba(56, 232, 255, .03));
  border: 1px solid rgba(56, 232, 255, .24);
}
.mcard-price b {
  font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--cyan);
  letter-spacing: -.02em; text-shadow: 0 0 18px rgba(56, 232, 255, .35);
}
.mcard-price span {
  font-size: 11px; color: var(--text-2); font-family: var(--mono); letter-spacing: .02em;
}
.mcard.is-hero .mcard-price {
  background: linear-gradient(180deg, rgba(255, 190, 60, .12), rgba(255, 190, 60, .04));
  border-color: rgba(255, 190, 60, .32);
}
.mcard.is-hero .mcard-price b { color: #ffd98a; text-shadow: 0 0 20px rgba(255, 190, 60, .4); }

/* Tông màu brand — lấy đúng hex từ portal.css để nhận diện thống nhất. */
.mcard-ico.tone-claude   { background: #d97757; }
.mcard-ico.tone-gpt      { background: #171a22; border: 1px solid rgba(255, 255, 255, .12); }
.mcard-ico.tone-deepseek { background: #4d6bfe; }
.mcard-ico.tone-qwen     { background: #615ced; }

.catalog-empty {
  padding: 24px; text-align: center;
  font-size: 13.5px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: 12px;
}
.catalog-empty a { color: var(--cyan); }

@media (max-width: 640px) {
  .about { padding: 48px 16px; }
  .about-head h2 br { display: none; }
  .catalog { padding: 18px; }
  .catalog-head { flex-direction: column; align-items: flex-start; }
  .catalog-aside { align-items: stretch; width: 100%; }
  .rate-card { text-align: left; }
  .rate-eq { justify-content: flex-start; }
  .catalog-more { text-align: center; }
  .mcards { grid-template-columns: 1fr; gap: 12px; }
  .mcard { padding: 18px 16px 16px; }
  .mcard-title { font-size: 22px; }
}

/* ============================================================
   SECTION: Tài liệu API (curl)
   2026-08-05 · Khối code kiểu terminal, Base URL tự điền theo origin.
   ============================================================ */
.docs {
  padding: clamp(56px, 8vw, 104px) 20px;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.docs-inner { max-width: 1240px; margin: 0 auto; }

.docs-head { max-width: 880px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.docs-eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan);
  padding: 6px 12px; border-radius: 999px;
  background: rgba(56, 232, 255, .08); border: 1px solid rgba(56, 232, 255, .28);
  margin-bottom: 18px;
}
.docs-head h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.15;
  color: var(--text); margin: 0 0 16px; text-transform: none; letter-spacing: -.01em;
}
.docs-head h2 em {
  font-style: normal;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.docs-lead {
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.65;
  color: var(--text-2); margin: 0 auto 26px; max-width: 720px;
}
.docs-lead b { color: var(--text); font-weight: 600; }

.docs-base {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px 10px 16px; border-radius: 12px;
  background: rgba(13, 19, 33, .7);
  border: 1px solid var(--line-strong);
}
.docs-base-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.docs-base-value {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  color: var(--cyan); user-select: all; word-break: break-all;
}

.docs-copy {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  padding: 5px 11px; border-radius: 8px; cursor: pointer;
  color: var(--text-2); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line); transition: .16s;
  flex-shrink: 0;
}
.docs-copy:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(56, 232, 255, .08); }
.docs-copy.is-copied { color: #06232b; background: var(--grad-green); border-color: transparent; }

.docs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 16px;
}
.docblock {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(21, 30, 50, .6), rgba(11, 16, 29, .8));
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.docblock:hover {
  border-color: rgba(56, 232, 255, .32);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.docblock-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(56, 232, 255, .04);
}
.docblock-head h3 {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-family: var(--display); font-weight: 600; font-size: 15.5px;
  color: var(--text); letter-spacing: 0;
}
.docblock-num {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: #06232b; background: var(--grad-green);
  padding: 3px 7px; border-radius: 6px; letter-spacing: .04em;
}
/* Khối code: nền tối hơn thân card để tách rõ vùng "terminal". */
.docs .docs-code {
  margin: 0; padding: 16px;
  background: rgba(6, 9, 17, .82);
  border: 0; border-radius: 0;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  color: #dce6f5;
  overflow-x: auto; white-space: pre;
}
.docs .docs-code code { font-family: inherit; font-size: inherit; background: none; padding: 0; color: inherit; }
.docs .docs-code [data-doc-base] { color: var(--cyan); }

/* ---------- Terminal gõ dần + tô màu cú pháp ----------------------------------
 *
 * Mỗi khối code tự "gõ" TỪNG KÝ TỰ khi khách cuộn tới, trên nền đã tô màu cú pháp
 * kiểu editor. Cách dựng, ba lớp span lồng nhau:
 *
 *   .dcl  = một dòng   (giữ ngắt dòng, không đặt màu)
 *   .dtok = một token  (mang MÀU cú pháp: lệnh / chuỗi / khóa / số / ghi chú…)
 *   .dch  = một ký tự  (đơn vị GÕ; không đặt màu, thừa hưởng từ .dtok)
 *
 * Tách màu (.dtok) khỏi đơn vị gõ (.dch) để hai việc không đụng nhau: bộ tô màu
 * không phải biết gì về hoạt hoá, và đổi tốc độ gõ không ảnh hưởng màu.
 *
 * - Text gốc KHÔNG bị thay đổi về mặt nội dung, nên nút Copy vẫn lấy đúng lệnh
 *   (nó đọc textContent của <code>). Đây là lý do dùng span lồng thay vì viết
 *   lại innerHTML bằng chuỗi khác.
 * - Chiều cao khối được ghim trước khi gõ (JS đo rồi set min-height), và ký tự
 *   chưa tới lượt chỉ bị ẩn bằng visibility nên vẫn chiếm chỗ ⇒ trang không giật
 *   và chữ đã gõ không bị đẩy chạy ngang.
 *
 * Không dùng animation "cắt chiều rộng" (width/clip) như hiệu ứng typewriter
 * kinh điển: nó chỉ đúng với MỘT dòng, còn khối nhiều dòng sẽ bị cắt sai và mất
 * khả năng chọn text. Hiện dần từng ký tự giữ được cả wrap lẫn selection.
 */
.docs .docs-code .dcl {
  /* KHÔNG display:block. Khối <pre> đã có white-space: pre nên ký tự "\n" giữa các
   * .dcl chính là ngắt dòng; thêm block nữa là ngắt HAI lần. Nút Copy không thấy
   * (nó đọc textContent) nhưng khách BÔI CHUỘT rồi Ctrl+C thì nhận code cách dòng
   * — đo được 306 ký tự / 17 dòng thay vì 298 / 9. Giữ inline để bôi tay và Copy
   * cho ra cùng một thứ. */
  display: inline;
}

/* Ký tự chưa tới lượt: ẩn bằng visibility (KHÔNG display:none) để nó vẫn chiếm
 * chỗ — nhờ vậy khối không phình dần và chữ đã gõ không bị đẩy chạy ngang trong
 * lúc gõ. Đây là điều kiện để trang không giật (đo được: 0px xê dịch).
 *
 * .dch không đặt color: nó thừa hưởng màu của .dtok bao ngoài, nên tô màu cú pháp
 * và hiệu ứng gõ không đụng nhau. */
.docs .docs-code .dch[data-pending="1"] { visibility: hidden; }

/* Con trỏ nháy: đứng ở KÝ TỰ vừa gõ, tắt hẳn khi xong cả khối.
 *
 * Đặt ở .dch (ký tự) chứ không .dcl (dòng): gõ theo ký tự thì con trỏ phải chạy
 * theo từng chữ, để ở cuối dòng là nó đứng yên một chỗ suốt cả dòng. */
.docs .docs-code .dch[data-cursor="1"]::after {
  content: "";
  display: inline-block;
  width: 7px; height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(56, 232, 255, .75);
  animation: dcaret .9s steps(2, start) infinite;
}
@keyframes dcaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Bảng màu cú pháp — lấy từ biến neon của site để cùng một ngôn ngữ thị giác với
 * phần còn lại của trang, thay vì bê nguyên theme editor ngoài vào. */
.docs .docs-code .dtok[data-t="cmd"]     { color: #4ce0a5; font-weight: 700; }  /* curl, claude, export... */
.docs .docs-code .dtok[data-t="flag"]    { color: #b98cff; }                    /* -H, -d, --flag */
.docs .docs-code .dtok[data-t="str"]     { color: #ffcf7a; }                    /* "chuỗi" */
.docs .docs-code .dtok[data-t="key"]     { color: #79a9ff; }                    /* "khóa": trong JSON/TOML */
.docs .docs-code .dtok[data-t="num"]     { color: #c79bff; }                    /* 1024 */
/* #6f82a8 chứ không #66779b: bản đầu chỉ đạt tương phản 4,38 trên nền khối code,
 * dưới ngưỡng WCAG AA cho chữ thường (4,5). Comment ở đây không phải chữ trang
 * trí — nó chỉ ra file nào ("# ~/.codex/config.toml") và hệ nào ("# Windows
 * (PowerShell)"), tức khách PHẢI đọc được mới làm đúng. */
.docs .docs-code .dtok[data-t="comment"] { color: #6f82a8; font-style: italic; }
.docs .docs-code .dtok[data-t="url"]     { color: var(--cyan); }
.docs .docs-code .dtok[data-t="punct"]   { color: #8fa2c4; }                    /* { } [ ] , : \ */
.docs .docs-code .dtok[data-t="var"]     { color: #7fe7ff; }                    /* $env:..., [section] */

/* Vệt sáng chạy ngang mép trên khối trong lúc đang gõ — tín hiệu "đang chạy"
 * quen thuộc của terminal, tự tắt khi gõ xong nên không hút mắt lâu. */
.docs .docblock.is-typing .docs-code {
  position: relative;
}
.docs .docblock.is-typing .docs-code::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation: dscan 1.4s linear infinite;
}
@keyframes dscan {
  0%   { opacity: 0; transform: translateX(-100%); }
  50%  { opacity: .9; }
  100% { opacity: 0; transform: translateX(100%); }
}
/* Viền khối sáng lên đúng lúc đang gõ, để mắt biết khối nào đang chạy. */
.docs .docblock.is-typing {
  border-color: rgba(56, 232, 255, .38);
  box-shadow: 0 0 0 1px rgba(56, 232, 255, .12), 0 12px 32px rgba(0, 0, 0, .35);
}

/* Tôn trọng "giảm chuyển động": hiện đủ ngay, không gõ, không nháy, không quét.
 * JS cũng kiểm cờ này và bỏ qua phần hoạt hoá — CSS ở đây là lớp chặn thứ hai
 * cho trường hợp khách đổi cài đặt sau khi trang đã tải. */
@media (prefers-reduced-motion: reduce) {
  .docs .docs-code .dch[data-pending="1"] { visibility: visible; }
  .docs .docs-code .dch[data-cursor="1"]::after { display: none; }
  .docs .docblock.is-typing .docs-code::before { display: none; }
  .docs .docblock.is-typing { border-color: var(--line); box-shadow: none; }
}

.docs-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  margin-top: 22px; padding: 16px 20px; border-radius: 14px;
  background: rgba(21, 30, 50, .45);
  border: 1px solid var(--line);
}
.docs-foot p { margin: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.docs-foot b { color: var(--text); }
.docs-foot code {
  font-family: var(--mono); font-size: 12px;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(255, 255, 255, .06); color: #ffd98a;
}
.docs-foot a:not(.btn) { color: var(--cyan); }

@media (max-width: 900px) {
  .docs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .docs { padding: 48px 16px; }
  .docs .docs-code { font-size: 11.5px; padding: 14px; }
  .docs-foot { flex-direction: column; align-items: stretch; }
  .docs-foot .btn { text-align: center; }
}

/* ============================================================
   SECTION: Hỏi đáp nhanh (2 cột, accordion độc lập)
   2026-08-05 · Không dùng #faqList nên KHÔNG bị ràng "mở 1 đóng hết"
   của FAQ cũ — khách so sánh nhiều câu cùng lúc được.
   ============================================================ */
.faqs {
  padding: clamp(56px, 8vw, 104px) 20px;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.faqs-inner { max-width: 1240px; margin: 0 auto; }

.faqs-head { max-width: 820px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.faqs-eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: #ffd98a;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 190, 60, .1); border: 1px solid rgba(255, 190, 60, .32);
  margin-bottom: 18px;
}
.faqs-head h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.15;
  color: var(--text); margin: 0 0 14px; text-transform: none; letter-spacing: -.01em;
}
.faqs-head h2 em {
  font-style: normal;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.faqs-lead { font-size: 15px; line-height: 1.65; color: var(--text-2); margin: 0; }
.faqs-lead b { color: var(--cyan); font-family: var(--mono); font-size: 14.5px; }

.faqs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  align-items: start;
}
.faqs-col { display: flex; flex-direction: column; gap: 12px; }

.faq2 {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(21, 30, 50, .5);
  overflow: hidden;
  transition: border-color .18s, background .18s;
}
.faq2:hover { border-color: var(--line-strong); background: rgba(21, 30, 50, .72); }
.faq2[open] {
  border-color: rgba(255, 190, 60, .34);
  background: rgba(21, 30, 50, .78);
}
.faq2 summary {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; cursor: pointer;
  list-style: none;
}
.faq2 summary::-webkit-details-marker { display: none; }
.faq2-q {
  flex: 1; font-family: var(--display); font-weight: 600;
  font-size: 16.5px; line-height: 1.35; color: var(--text);
  letter-spacing: 0;
}
/* Dấu +/− tự vẽ để không phụ thuộc marker mặc định của từng trình duyệt. */
.faq2 summary::after {
  content: ""; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 7px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(currentColor, currentColor) center/9px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 9px no-repeat;
  color: var(--muted);
  transition: .18s;
}
.faq2:hover summary::after { color: var(--cyan); border-color: var(--cyan); }
/* Khi mở: nền vàng, chỉ còn gạch ngang (dấu trừ). */
.faq2[open] summary::after {
  border-color: transparent;
  background-image:
    linear-gradient(#2b1c00, #2b1c00),
    var(--grad-gold);
  background-size: 9px 1.5px, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.faq2[open] .faq2-q {
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.faq2-a {
  padding: 0 18px 17px;
  font-size: 14px; line-height: 1.7; color: var(--text-2);
  border-top: 1px dashed rgba(41, 54, 84, .7);
  margin-top: -2px; padding-top: 14px;
}
.faq2-a p { margin: 0 0 10px; }
.faq2-a p:last-child { margin-bottom: 0; }
.faq2-a b { color: var(--text); font-weight: 600; }
.faq2-a code {
  font-family: var(--mono); font-size: 12.5px;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(255, 255, 255, .06); color: #ffd98a;
}
.faq2-a ul { margin: 0 0 10px; padding-left: 20px; }
.faq2-a li { margin: 5px 0; }
.faq2-note {
  font-size: 12.5px !important; color: var(--muted) !important;
  padding: 9px 12px; border-radius: 9px;
  background: rgba(13, 19, 33, .6);
  border-left: 2px solid rgba(255, 190, 60, .5);
}

.faqs-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
  margin-top: 24px; padding: 22px 26px; border-radius: 18px;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(255, 190, 60, .1), transparent 62%),
    linear-gradient(180deg, rgba(21, 30, 50, .6), rgba(13, 19, 33, .5));
  border: 1px solid rgba(255, 190, 60, .28);
}
.faqs-cta h3 {
  font-family: var(--display); font-weight: 700; font-size: 21px;
  color: var(--text); margin: 0 0 5px; letter-spacing: 0;
}
.faqs-cta p { margin: 0; font-size: 13.5px; color: var(--text-2); }
.faqs-cta-btns { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.faqs-cta .support-phone {
  font-family: var(--mono); font-size: 16px; font-weight: 700;
  color: var(--cyan); white-space: nowrap;
}
.faqs-cta .support-phone:hover { color: #7ff3ff; }

@media (max-width: 900px) {
  .faqs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .faqs { padding: 48px 16px; }
  .faq2-q { font-size: 15.5px; }
  .faqs-cta { flex-direction: column; align-items: stretch; text-align: left; }
  .faqs-cta-btns { justify-content: space-between; }
}

/* ============================================================
   Lightbox xem ảnh showcase — click phóng to, scroll/pinch zoom, kéo pan.
   ============================================================ */
.way-shot img { cursor: zoom-in; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(3, 5, 12, .92);
  backdrop-filter: blur(6px);
}
.lightbox-stage {
  position: relative; z-index: 1;
  width: min(96vw, 1600px); height: min(92vh, 1100px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.lightbox-img {
  max-width: 100%; max-height: 100%;
  transform-origin: center center;
  transition: transform .12s ease-out;
  cursor: grab;
  border-radius: 10px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .7);
  user-select: none; -webkit-user-drag: none;
}
.lightbox-img.is-dragging { transition: none; cursor: grabbing; }
.lightbox-close {
  position: absolute; top: 8px; right: 10px;
  width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  color: var(--text); background: rgba(13, 19, 33, .8);
  border: 1px solid var(--line-strong); cursor: pointer;
  transition: .16s;
}
.lightbox-close:hover { color: #05070f; background: var(--grad-green); border-color: transparent; }
.lightbox-tools {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 12px;
  background: rgba(13, 19, 33, .88);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px);
}
.lightbox-tools button {
  width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; font-family: var(--sans);
  color: var(--text); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line); cursor: pointer;
  transition: .16s;
}
.lightbox-tools button:hover { color: var(--cyan); border-color: var(--cyan); }
.lightbox-zoom {
  min-width: 54px; text-align: center;
  font-family: var(--mono); font-size: 12px; color: var(--text-2);
}
.lightbox-cap {
  position: absolute; top: 12px; left: 14px; margin: 0;
  max-width: calc(100% - 80px);
  font-family: var(--mono); font-size: 12px; color: var(--text-2);
  padding: 6px 10px; border-radius: 8px;
  background: rgba(13, 19, 33, .8);
  border: 1px solid var(--line);
}

@media (max-width: 640px) {
  .lightbox-stage { width: 100vw; height: 100vh; }
  .lightbox-cap { font-size: 10.5px; top: 8px; left: 8px; }
  .lightbox-close { top: 6px; right: 6px; width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox-img { transition: none; }
  .mcard:hover { transform: none; }
}