:root{--primary:#1d2b7f;--accent:#ff7a00;--ink:#0f172a;--muted:#6b7280;--line:#e5e7eb}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Arial;color:var(--ink);background:#fff}
a{color:inherit;text-decoration:none}.container{max-width:1140px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eef2ff;z-index:20}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;color:var(--primary)}
.logo{width:28px;height:28px;border-radius:6px}
.brand-text{font-weight:800}.brand-slogan{color:var(--muted);font-size:12px;margin-left:6px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;border:2px solid transparent;cursor:pointer;transition:.2s all}
.btn-primary{background:var(--primary);color:#fff}.btn-ghost{background:#fff;border-color:#e5e7eb}.btn-accent{background:var(--accent);color:#fff}
.badge{padding:6px 10px;border-radius:999px;background:#eef2ff;color:var(--primary);font-size:12px;font-weight:800}
.section{padding:36px 0}h2.section-title{font-size:28px;margin:0 0 14px}
.grid{display:grid;gap:18px}.pricing{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{border:1px solid #ffd56e;border-radius:16px;background:#fff;box-shadow:0 8px 30px rgba(29,43,127,.06);padding:18px}
.card .title{font-weight:800;color:#f59e0b}.card .price{font-size:26px;font-weight:800;color:#1f2937}
.card ul{list-style:none;padding:0;margin:10px 0}.card ul li{padding:6px 0;border-bottom:1px solid #f1f5f9}
.notice{border-radius:12px;padding:12px 14px;margin:12px 0;font-weight:700}
.notice.success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}.notice.error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.input,select,textarea{width:100%;padding:12px 14px;border:1px solid #d1d5db;border-radius:12px;background:#fff}
.small{color:var(--muted);font-size:12px}.hero{padding:56px 0;text-align:center}
.hero h1{font-size:40px;line-height:1.2;margin:16px auto 8px;max-width:820px}.hero p{color:var(--muted);max-width:820px;margin:0 auto}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
footer{background:#1d2b7f;color:#e5e7eb;padding:30px 0}footer a{color:#e5e7eb}
/* ── Top tools (lang / coupon / theme) ───────────────────────── */
.top-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lang-switch{display:flex;gap:6px;align-items:center;font-weight:700}
.lang-switch .lang-btn{padding:6px 10px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;cursor:pointer}
.lang-switch .sep{color:#9ca3af}
.coupon-box{display:flex;gap:6px;align-items:center}
.coupon-box input{padding:8px 10px;border:1px solid #d1d5db;border-radius:10px;width:140px}

/* ── Dark mode (toggle .theme-dark trên html) ───────────────── */
html.theme-dark{
  --primary:#9db2ff;
  --accent:#ff9a3c;
  --ink:#e5e7eb;
  --muted:#9ca3af;
  --line:#232a3b;
  background:#0b1220;
}
html.theme-dark body{background:#0b1220;color:var(--ink)}
html.theme-dark header{background:#0b1220;border-bottom-color:#1f2937}
html.theme-dark .card{background:#0f172a;border-color:#334155;box-shadow:none}
html.theme-dark .site-footer{background:#0f172a;color:#cbd5e1}
html.theme-dark .site-footer a{color:#e5e7eb}
html.theme-dark .btn-ghost{background:#111827;border-color:#334155;color:#e5e7eb}
html.theme-dark .coupon-box input{background:#0b1220;color:#e5e7eb;border-color:#334155}
/* Giữ màu nút (kể cả đã click) */
.btn, .btn:link, .btn:visited { 
  text-decoration: none;
}

/* Nút xanh (primary) – ví dụ Vietmap, TSM... */
.btn-primary,
.btn-primary:link,
.btn-primary:visited {
  background: var(--primary);
  color: #fff;
}

/* Nút viền (ghost) – ví dụ “Gói Unlocktool” */
.btn-ghost,
.btn-ghost:link,
.btn-ghost:visited {
  background: #fff;
  color: #111827;
  border: 1px solid #e5e7eb;
}

/* Nếu có .btn-accent (màu cam hotline) */
.btn-accent,
.btn-accent:link,
.btn-accent:visited {
  background: var(--accent);
  color: #fff;
}