/*
Theme Name: VNSecurity
Theme URI: https://vnsecurity.com.vn
Author: VNSecurity
Author URI: https://vnsecurity.com.vn
Description: Theme landing page Xử Lý Khủng Hoảng Truyền Thông 24/7 — chuyển đổi 1:1 từ bản demo HTML. Dark theme, mobile-first, one-page.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vnsecurity
Tags: one-column, custom-menu, dark
*/

/* ═══════════════════════════════════════
   ROOT VARIABLES
═══════════════════════════════════════ */
:root {
  --black:      #09090b;
  --white:      #f4f1ec;
  --red:        #dc2626;
  --red-dark:   #991b1b;
  --red-light:  #ef4444;
  --orange:     #ea580c;
  --gold:       #ca8a04;
  --gold-light: #fbbf24;
  --surface:    #111113;
  --surface2:   #18181b;
  --surface3:   #27272a;
  --border:     rgba(255,255,255,0.07);
  --border2:    rgba(255,255,255,0.12);
  --muted:      rgba(244,241,236,0.42);
  --mid:        rgba(244,241,236,0.70);
  --glow:       rgba(220,38,38,0.22);
  --radius:     2px;
}

/* ═══════════════════════════════════════
   RESET & BASE (Mobile First)
═══════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior:smooth;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
body {
  background:var(--black);
  color:var(--white);
  font-family:'Be Vietnam Pro', sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  /* ✅ Đảm bảo font không nhỏ hơn 14px trên mobile */
  font-size:14px;
}
a { text-decoration:none; color:inherit; }
button { font-family:inherit; }
/* ✅ Ảnh responsive */
img { display:block; max-width:100%; height:auto; }

/* Noise overlay */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9998;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.028'/%3E%3C/svg%3E");
  opacity:0.5;
}

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--black); }
::-webkit-scrollbar-thumb { background:var(--red); border-radius:2px; }

/* ═══════════════════════════════════════
   TYPOGRAPHY HELPERS
═══════════════════════════════════════ */
.display {
  font-family:'Barlow Condensed', sans-serif;
  font-weight:800;
  letter-spacing:0.01em;
  line-height:0.92;
}
.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--red);
}
.eyebrow::before {
  content:''; width:20px; height:1px; background:var(--red); flex-shrink:0;
}

/* ═══════════════════════════════════════
   BUTTONS — Mobile: full-width tự nhiên
═══════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Be Vietnam Pro', sans-serif;
  font-weight:600; font-size:13px; letter-spacing:0.07em; text-transform:uppercase;
  cursor:pointer; border:none; transition:all 0.22s ease;
  white-space:nowrap;
  /* ✅ Touch target tối thiểu 44px */
  min-height:44px;
  padding:12px 20px;
}
.btn-red {
  background:var(--red); color:#fff;
  clip-path:polygon(6px 0%,100% 0%,100% calc(100% - 6px),calc(100% - 6px) 100%,0% 100%,0% 6px);
}
.btn-red:active { background:var(--red-dark); }
@media (hover:hover) {
  .btn-red:hover { background:var(--red-dark); transform:translateY(-2px); box-shadow:0 8px 24px rgba(220,38,38,0.35); }
}
.btn-outline {
  background:transparent; color:var(--white);
  border:1px solid rgba(255,255,255,0.18);
}
.btn-outline:active { border-color:var(--red); color:var(--red); }
@media (hover:hover) {
  .btn-outline:hover { border-color:var(--red); color:var(--red); }
}
.btn-lg { padding:14px 28px; font-size:14px; }

/* ✅ Full width button trên mobile */
.btn-full { width:100%; }

/* ═══════════════════════════════════════
   HEADER — Mobile First với Hamburger
═══════════════════════════════════════ */
#header {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; height:60px;
  background:rgba(9,9,11,0.92);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
  transition:background 0.3s, border-color 0.3s;
}
#header.scrolled { background:rgba(9,9,11,0.97); border-color:var(--border2); }

.logo {
  display:flex; align-items:center; gap:8px;
  font-family:'Barlow Condensed', sans-serif;
  font-size:20px; font-weight:800; letter-spacing:0.1em; color:var(--white);
}
.logo-mark {
  width:30px; height:30px; background:var(--red); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  font-size:13px; font-weight:900; color:#fff;
}
.logo em { color:var(--red); font-style:normal; }

/* ✅ Desktop nav — ẩn mặc định trên mobile */
.nav-desktop { display:none; }

.header-right { display:flex; align-items:center; gap:8px; }

/* ✅ Số điện thoại — ẩn trên mobile nhỏ */
.header-phone { display:none; }

/* ✅ Nút tư vấn trên header — ẩn trên màn hình nhỏ, để floating CTA thay thế */
.header-cta-btn { display:none; }

/* ═══════════════════════════════════════
   HAMBURGER BUTTON
═══════════════════════════════════════ */
.hamburger {
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:44px; height:44px; background:none; border:1px solid var(--border2);
  cursor:pointer; padding:8px; border-radius:var(--radius);
  transition:border-color 0.2s;
  flex-shrink:0;
}
.hamburger:active, .hamburger.open { border-color:var(--red); }
.ham-line {
  width:20px; height:1.5px; background:var(--white);
  transition:all 0.28s cubic-bezier(0.22,1,0.36,1);
  transform-origin:center;
}
/* ✅ Hamburger → X animation */
.hamburger.open .ham-line:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open .ham-line:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open .ham-line:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ═══════════════════════════════════════
   MOBILE NAV OVERLAY
═══════════════════════════════════════ */
#mobile-nav {
  position:fixed; top:60px; left:0; right:0; bottom:0; z-index:490;
  background:rgba(9,9,11,0.98);
  backdrop-filter:blur(24px);
  display:flex; flex-direction:column;
  padding:24px 20px 40px;
  transform:translateX(100%);
  transition:transform 0.35s cubic-bezier(0.22,1,0.36,1);
  overflow-y:auto;
  border-top:1px solid var(--border);
}
#mobile-nav.open { transform:translateX(0); }

.mobile-nav-links {
  display:flex; flex-direction:column; gap:0; margin-bottom:32px;
}
.mobile-nav-links a {
  display:block; padding:16px 0;
  font-size:18px; font-weight:600; color:var(--mid);
  letter-spacing:0.04em; text-transform:uppercase;
  border-bottom:1px solid var(--border);
  transition:color 0.2s;
}
.mobile-nav-links a:first-child { border-top:1px solid var(--border); }
.mobile-nav-links a:active { color:var(--red); }

.mobile-nav-actions {
  display:flex; flex-direction:column; gap:12px; margin-top:auto;
}
.mobile-phone-link {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px; border:1px solid var(--border2);
  font-size:16px; font-weight:700; color:var(--gold-light);
  letter-spacing:0.04em;
}
.mobile-cta-btn {
  display:flex; align-items:center; justify-content:center;
  padding:16px; background:var(--red); color:#fff;
  font-size:14px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  border:none; cursor:pointer;
  clip-path:polygon(6px 0%,100% 0%,100% calc(100% - 6px),calc(100% - 6px) 100%,0% 100%,0% 6px);
}

/* ═══════════════════════════════════════
   HERO SECTION — Mobile First
═══════════════════════════════════════ */
#hero {
  /* ✅ Mobile: 1 cột, không có visual dashboard */
  min-height:100vh; min-height:100svh;
  padding-top:60px; /* header height */
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 90% 60% at 30% 50%, rgba(220,38,38,0.11) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(202,138,4,0.06) 0%, transparent 55%),
    linear-gradient(160deg, #09090b 0%, #111113 60%, #0d0d10 100%);
}
.hero-grid {
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 100% 80% at 20% 50%, black 20%, transparent 100%);
}

.hero-content {
  padding:40px 20px 52px;
  position:relative; z-index:2;
  width:100%;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(220,38,38,0.1); border:1px solid rgba(220,38,38,0.28);
  padding:6px 14px; margin-bottom:24px;
  font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--red);
  border-radius:var(--radius);
}
.hero-badge::before {
  content:''; width:7px; height:7px; background:var(--red); border-radius:50%;
  animation:blink 1.6s ease-in-out infinite; flex-shrink:0;
}
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.5)} }

h1.htitle {
  font-family:'Barlow Condensed', sans-serif; font-weight:900;
  /* ✅ clamp: tối thiểu 40px trên 320px, tối đa 88px */
  font-size:clamp(40px, 11vw, 88px);
  line-height:0.93; letter-spacing:0.01em;
  color:var(--white); margin-bottom:20px;
}
h1.htitle em { color:var(--red); font-style:normal; display:block; }

.hero-bullets {
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:28px;
}
.hero-bullets li {
  list-style:none; display:flex; align-items:flex-start; gap:10px;
  font-size:14px; color:var(--mid); font-weight:400; line-height:1.5;
}
.hero-bullets li::before {
  content:''; flex-shrink:0; width:18px; height:1px; background:var(--red); margin-top:10px;
}

/* ✅ Hero search — mobile: stacked layout */
.hero-search {
  display:flex; flex-direction:column; gap:0; margin-bottom:18px;
}
.hero-input {
  width:100%;
  background:rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.13);
  padding:14px 16px; font-size:14px; color:var(--white);
  font-family:'Be Vietnam Pro', sans-serif; outline:none; transition:border-color 0.2s;
  border-radius:var(--radius);
  /* ✅ touch target */
  min-height:48px;
}
.hero-input::placeholder { color:var(--muted); }
.hero-input:focus { border-color:var(--red); background:rgba(255,255,255,0.08); }
.hero-search-btn {
  width:100%;
  background:var(--red); color:#fff; padding:14px 20px;
  font-family:'Be Vietnam Pro', sans-serif;
  font-size:13px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  border:none; cursor:pointer; transition:background 0.2s;
  min-height:48px;
}
.hero-search-btn:active { background:var(--red-dark); }

.hero-link {
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:500; color:var(--mid);
  background:none; border:none; cursor:pointer; transition:color 0.2s;
  padding:4px 0;
}
.hero-link:active { color:var(--white); }
.hero-link-circle {
  width:36px; height:36px; border:1px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center; font-size:12px;
  transition:all 0.22s; flex-shrink:0;
}

/* ✅ Stats: 2x2 grid trên mobile */
.hero-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-top:32px; padding-top:28px;
  border-top:1px solid var(--border);
}
.hstat-val {
  font-family:'Barlow Condensed', sans-serif; font-size:32px; font-weight:800;
  color:var(--white); line-height:1; margin-bottom:4px;
}
.hstat-val em { color:var(--red); font-style:normal; }
.hstat-label { font-size:11px; color:var(--muted); letter-spacing:0.05em; text-transform:uppercase; }

/* Hero visual — ẩn hoàn toàn trên mobile */
.hero-visual { display:none; }

/* ═══════════════════════════════════════
   TICKER STRIP
═══════════════════════════════════════ */
.ticker-wrap {
  background:var(--red); overflow:hidden;
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding:10px 0;
}
.ticker-track {
  display:flex; gap:40px;
  animation:ticker 28s linear infinite; white-space:nowrap;
}
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item {
  font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#fff;
  flex-shrink:0;
}
.ticker-item::before { content:'◆  '; }

/* ═══════════════════════════════════════
   SECTION BASE — Mobile First
═══════════════════════════════════════ */
/* ✅ Padding nhỏ trên mobile, tăng dần theo màn hình lớn */
.section { padding:56px 20px; max-width:1380px; margin:0 auto; }
.section-alt { background:var(--surface); }
.section-full { max-width:100%; padding:56px 0; }
.section-full .section-inner { max-width:1380px; margin:0 auto; padding:0 20px; }

h2.stitle {
  font-family:'Barlow Condensed', sans-serif; font-weight:800;
  font-size:clamp(32px, 8vw, 62px); line-height:0.95; letter-spacing:0.01em;
  color:var(--white); margin-bottom:14px; margin-top:12px;
}
h2.stitle em { color:var(--red); font-style:normal; }
.sdesc {
  font-size:14px; color:var(--mid); line-height:1.75;
  margin-bottom:36px;
}

/* ═══════════════════════════════════════
   PROBLEM SECTION — Mobile: 1 cột
═══════════════════════════════════════ */
.problem-grid {
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--border); margin-top:36px;
}
.prob-card {
  background:var(--black); padding:28px 20px;
  transition:background 0.25s; position:relative; overflow:hidden;
}
.prob-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--red); transform:scaleX(0); transition:transform 0.28s;
}
.prob-card:active { background:var(--surface2); }
.prob-card:active::after { transform:scaleX(1); }
.prob-icon { font-size:32px; margin-bottom:14px; display:block; }
.prob-card h3 {
  font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size:20px;
  letter-spacing:0.04em; margin-bottom:10px;
}
.prob-card p { font-size:14px; color:var(--mid); line-height:1.7; }

/* ═══════════════════════════════════════
   SOLUTIONS — Mobile: 1 cột
═══════════════════════════════════════ */
.sol-grid {
  display:grid; grid-template-columns:1fr; gap:14px; margin-top:36px;
}
.sol-card {
  background:var(--surface); border:1px solid var(--border);
  padding:28px 20px; transition:all 0.28s; position:relative; overflow:hidden;
}
.sol-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--red),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform 0.3s;
}
.sol-card:active { border-color:rgba(220,38,38,0.28); }
.sol-card:active::before { transform:scaleX(1); }
.sol-card.featured {
  background:linear-gradient(140deg,rgba(220,38,38,0.08),rgba(234,88,12,0.05));
  border-color:rgba(220,38,38,0.25);
}
.sol-num {
  font-family:'Barlow Condensed',sans-serif; font-size:42px; font-weight:900;
  color:rgba(220,38,38,0.1); line-height:1; margin-bottom:8px;
}
.sol-icon { font-size:26px; margin-bottom:14px; display:block; }
.sol-card h3 { font-size:16px; font-weight:700; margin-bottom:10px; color:var(--white); }
.sol-card p { font-size:14px; color:var(--mid); line-height:1.75; }
.sol-tag {
  display:inline-block; margin-top:14px;
  font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--red);
}
.sol-card.featured .sol-tag { color:var(--gold-light); }

/* ═══════════════════════════════════════
   PROCESS — Mobile: 1 cột
═══════════════════════════════════════ */
.process-wrap {
  display:grid; grid-template-columns:1fr; gap:0; margin-top:36px; position:relative;
}
/* ✅ Đường kẻ ngang ẩn trên mobile */
.process-wrap::before { display:none; }

.proc-step {
  display:flex; align-items:flex-start; gap:20px;
  padding:20px 0; border-bottom:1px solid var(--border);
  position:relative;
}
.proc-step:last-child { border-bottom:none; }
.proc-num {
  width:64px; height:64px; flex-shrink:0;
  background:var(--black); border:1px solid rgba(220,38,38,0.35);
  display:flex; align-items:center; justify-content:center;
  font-family:'Barlow Condensed',sans-serif; font-size:28px; font-weight:800; color:var(--red);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  transition:all 0.28s;
}
.proc-step-text { flex:1; }
.proc-step h3 { font-size:15px; font-weight:700; margin-bottom:6px; }
.proc-step p { font-size:14px; color:var(--muted); line-height:1.6; }

/* ═══════════════════════════════════════
   CASE STUDY — Mobile: 1 cột
═══════════════════════════════════════ */
.case-grid {
  display:grid; grid-template-columns:1fr; gap:16px; margin-top:36px;
}
.case-card {
  background:var(--surface); border:1px solid var(--border); overflow:hidden;
  transition:border-color 0.25s;
}
.case-card:active { border-color:rgba(220,38,38,0.3); }
.case-head {
  background:var(--surface2); padding:18px 20px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--border);
}
.case-tag {
  flex-shrink:0; font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold-light); background:rgba(202,138,4,0.1); padding:4px 10px;
  border:1px solid rgba(202,138,4,0.28);
}
.case-head h3 { font-size:14px; font-weight:600; line-height:1.5; color:var(--white); }
.case-body { padding:20px; }
.case-kpis { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.ckpi {
  text-align:center; padding:14px 10px;
  background:var(--black); border:1px solid var(--border);
}
.ckpi-val {
  font-family:'Barlow Condensed',sans-serif; font-size:28px; font-weight:800;
  color:var(--red); line-height:1; margin-bottom:5px;
}
.ckpi.after .ckpi-val { color:#22c55e; }
.ckpi-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.09em; }
.case-body p { font-size:14px; color:var(--mid); line-height:1.75; }

/* ═══════════════════════════════════════
   PRICING — Mobile: 1 cột, stacked
═══════════════════════════════════════ */
.price-toggle {
  display:flex; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border);
  margin-bottom:32px; width:100%;
}
.ptoggle {
  flex:1; min-width:0;
  padding:12px 8px; font-size:11px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  background:transparent; border:none; color:var(--muted); cursor:pointer; transition:all 0.2s;
  font-family:'Be Vietnam Pro', sans-serif;
  text-align:center;
  /* ✅ Touch target */
  min-height:44px;
}
.ptoggle.active { background:var(--red); color:#fff; }

.price-grid {
  display:grid; grid-template-columns:1fr;
  border:1px solid var(--border);
}
.price-card {
  padding:32px 20px; border-bottom:1px solid var(--border);
  position:relative; transition:background 0.25s;
}
.price-card:last-child { border-bottom:none; }
.price-card.hot {
  background:linear-gradient(150deg,rgba(220,38,38,0.09),rgba(234,88,12,0.05));
  border-top:3px solid var(--red);
}
.price-badge {
  position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  background:var(--red); padding:5px 16px;
  font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#fff;
  white-space:nowrap;
}
.price-tier {
  font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;
}
.price-amount {
  font-family:'Barlow Condensed',sans-serif; font-size:clamp(36px,9vw,54px);
  font-weight:800; line-height:1; margin-bottom:6px;
}
.price-amount em { font-style:normal; color:var(--red); }
.price-period { font-size:13px; color:var(--muted); margin-bottom:24px; }
.price-feats {
  list-style:none; margin-bottom:28px;
  display:flex; flex-direction:column; gap:10px;
}
.price-feats li {
  font-size:14px; color:var(--mid);
  display:flex; align-items:flex-start; gap:10px; line-height:1.5;
}
.price-feats li::before {
  content:'✓'; color:var(--red); font-weight:700; font-size:12px;
  flex-shrink:0; margin-top:2px;
}
.price-btn {
  /* ✅ Full width trên mobile */
  width:100%; padding:14px; font-size:13px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.16); background:transparent; color:var(--white);
  cursor:pointer; transition:all 0.22s; font-family:'Be Vietnam Pro',sans-serif;
  min-height:48px;
}
.price-btn:active, .price-card.hot .price-btn { background:var(--red); border-color:var(--red); color:#fff; }

/* ═══════════════════════════════════════
   TRUST / REVIEWS
═══════════════════════════════════════ */
.trust-logos {
  display:flex; align-items:center; justify-content:center;
  gap:20px; flex-wrap:wrap; margin:36px 0;
}
.tlogo {
  font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:700; letter-spacing:0.1em;
  color:rgba(255,255,255,0.18); transition:color 0.25s; cursor:default;
}
.tlogo:active { color:rgba(255,255,255,0.55); }

/* ✅ Reviews: 1 cột trên mobile */
.review-grid {
  display:grid; grid-template-columns:1fr; gap:14px; margin-top:36px;
}
.rev-card {
  background:var(--surface); border:1px solid var(--border);
  padding:24px 20px; transition:border-color 0.22s;
}
.rev-card:active { border-color:rgba(220,38,38,0.28); }
.rev-stars { color:var(--gold-light); font-size:14px; margin-bottom:14px; letter-spacing:2px; }
.rev-text {
  font-size:14px; color:var(--mid); line-height:1.75;
  margin-bottom:18px; font-style:italic;
}
.rev-author { display:flex; align-items:center; gap:12px; }
.rev-avatar {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--red),var(--orange));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:#fff;
}
.rev-name { font-size:13px; font-weight:700; margin-bottom:2px; }
.rev-role { font-size:11px; color:var(--muted); }

/* ═══════════════════════════════════════
   CONTACT / LEAD FORM — Mobile: 1 cột
═══════════════════════════════════════ */
.contact-grid {
  display:grid; grid-template-columns:1fr; gap:36px;
}

.contact-info h3 {
  font-family:'Barlow Condensed',sans-serif; font-weight:800;
  font-size:clamp(32px, 8vw, 52px); line-height:0.95;
  margin:12px 0 16px;
}
.contact-info h3 em { color:var(--red); font-style:normal; }
.contact-info > p { font-size:14px; color:var(--mid); line-height:1.75; margin-bottom:28px; }

.cinfo-list { display:flex; flex-direction:column; gap:14px; }
.cinfo-item { display:flex; align-items:flex-start; gap:14px; }
.cinfo-icon {
  width:42px; height:42px; flex-shrink:0;
  background:rgba(220,38,38,0.1); border:1px solid rgba(220,38,38,0.25);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.cinfo-label {
  font-size:10px; color:var(--muted); letter-spacing:0.12em;
  text-transform:uppercase; margin-bottom:4px;
}
.cinfo-val { font-size:14px; font-weight:600; line-height:1.5; }

/* ✅ Form box */
.form-box {
  background:var(--surface2); border:1px solid var(--border2); padding:28px 20px;
}
.form-row { margin-bottom:16px; }
.form-row label {
  display:block; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.form-row input, .form-row select, .form-row textarea {
  width:100%; background:var(--surface); border:1px solid var(--border2);
  /* ✅ Touch target: min-height 48px */
  padding:13px 16px; font-size:14px; color:var(--white);
  font-family:'Be Vietnam Pro',sans-serif; outline:none; transition:border-color 0.2s;
  border-radius:var(--radius); min-height:48px;
}
.form-row input::placeholder, .form-row textarea::placeholder { color:var(--muted); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  border-color:var(--red); background:rgba(255,255,255,0.04);
}
.form-row textarea { resize:vertical; min-height:96px; }
.form-row select option { background:var(--surface2); color:var(--white); }

/* ✅ Form 2 cột → 1 cột trên mobile */
.form-2col { display:grid; grid-template-columns:1fr; gap:0; }

.form-submit {
  /* ✅ Full width */
  width:100%; padding:16px; background:var(--red); color:#fff;
  font-size:14px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  border:none; cursor:pointer; transition:background 0.22s; margin-top:6px;
  font-family:'Be Vietnam Pro',sans-serif; min-height:52px;
}
.form-submit:active { background:var(--red-dark); }
.form-note {
  font-size:12px; color:var(--muted); text-align:center;
  margin-top:14px; line-height:1.6;
}

/* ═══════════════════════════════════════
   FAQ
═══════════════════════════════════════ */
.faq-list { max-width:780px; margin:36px auto 0; }
.faq-item { border-bottom:1px solid var(--border); overflow:hidden; }
.faq-q {
  width:100%; background:none; border:none; color:var(--white);
  padding:18px 0;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-size:14px; font-weight:600; text-align:left; cursor:pointer;
  font-family:'Be Vietnam Pro',sans-serif; transition:color 0.2s;
  /* ✅ Touch target */
  min-height:52px;
}
.faq-q:active { color:var(--red); }
.faq-icon {
  font-size:18px; color:var(--red); flex-shrink:0; transition:transform 0.3s;
}
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-a {
  font-size:14px; color:var(--mid); line-height:1.78;
  padding:0 0 18px; display:none;
}
.faq-item.open .faq-a { display:block; }

/* ═══════════════════════════════════════
   FOOTER — Mobile: 1 cột
═══════════════════════════════════════ */
footer.site-footer {
  background:var(--black); border-top:1px solid var(--border);
  padding:44px 20px 28px;
}
.footer-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  margin-bottom:36px;
}
.footer-brand .logo { margin-bottom:14px; }
.footer-brand p { font-size:13px; color:var(--muted); line-height:1.75; max-width:280px; }
.footer-socials { display:flex; gap:10px; margin-top:18px; }
.social-link {
  width:40px; height:40px; border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center; font-size:13px;
  color:var(--muted); transition:all 0.22s; border-radius:var(--radius);
}
.social-link:active { border-color:var(--red); color:var(--red); }
.footer-col h5 {
  font-size:11px; font-weight:700; letter-spacing:0.17em; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px;
}
.footer-col a {
  display:block; font-size:14px; color:var(--muted);
  /* ✅ Khoảng cách bấm dễ */
  margin-bottom:12px; padding:2px 0;
  transition:color 0.2s;
}
.footer-col a:active { color:var(--white); }

/* ✅ Footer links: 2 cột trên mobile */
.footer-links-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}


.footer-bottom {
  border-top:1px solid var(--border); padding-top:20px;
  display:flex; flex-direction:column; gap:8px;
}
.footer-copy { font-size:12px; color:var(--muted); }

/* ═══════════════════════════════════════
   FLOATING CTA — Mobile Optimized
═══════════════════════════════════════ */
.float-cta {
  position:fixed; bottom:0; left:0; right:0; z-index:400;
  display:flex; gap:0;
  /* ✅ Full width bottom bar trên mobile */
  background:var(--black);
  border-top:1px solid var(--border2);
  padding:10px 16px 10px;
  /* Safe area cho iPhone */
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.float-btn {
  flex:2; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--red); color:#fff;
  padding:12px 16px; border:none; cursor:pointer;
  font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  font-family:'Be Vietnam Pro',sans-serif;
  min-height:48px;
  clip-path:polygon(6px 0%,100% 0%,100% calc(100% - 6px),calc(100% - 6px) 100%,0% 100%,0% 6px);
  margin-right:8px;
}
.float-btn:active { background:var(--red-dark); }
.float-phone {
  flex:1;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface2); border:1px solid var(--border2); color:var(--mid);
  padding:12px 10px; font-size:12px; cursor:pointer;
  font-family:'Be Vietnam Pro',sans-serif; font-weight:600;
  min-height:48px;
}
.float-phone:active { border-color:var(--red); color:var(--white); }

/* ✅ Thêm padding-bottom cho body để tránh floating bar che content */
body { padding-bottom:80px; }

/* ═══════════════════════════════════════
   REVEAL ANIMATIONS
═══════════════════════════════════════ */
.reveal {
  opacity:0; transform:translateY(24px);
  transition:opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.reveal.show { opacity:1; transform:translateY(0); }
.reveal-left {
  opacity:0; transform:translateX(-24px);
  transition:opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.reveal-left.show { opacity:1; transform:translateX(0); }

/* ✅ Giảm animation cho người dùng yêu cầu */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left { transition:none; opacity:1; transform:none; }
  .ticker-track { animation:none; }
  @keyframes blink { 0%,100%{ opacity:1; } }
}

/* ═══════════════════════════════════════
   RESPONSIVE — TABLET (≥ 600px)
═══════════════════════════════════════ */
@media (min-width:600px) {
  body { font-size:15px; }

  .hero-content { padding:52px 32px 60px; }

  /* Hero search: ngang */
  .hero-search { flex-direction:row; }
  .hero-input {
    flex:1; border-bottom:1px solid rgba(255,255,255,0.13);
    border-right:none; border-radius:var(--radius) 0 0 var(--radius);
  }
  .hero-search-btn {
    width:auto; white-space:nowrap;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
    border-radius:0;
  }

  .problem-grid { grid-template-columns:1fr 1fr; }
  .sol-grid { grid-template-columns:1fr 1fr; }
  .review-grid { grid-template-columns:1fr 1fr; }
  .form-2col { grid-template-columns:1fr 1fr; gap:16px; }

  /* Process: 2 cột */
  .process-wrap { grid-template-columns:1fr 1fr; gap:0; }
  .proc-step {
    flex-direction:column; align-items:center; text-align:center;
    padding:24px 16px;
    border-bottom:none;
    border-right:1px solid var(--border);
  }
  .proc-step:nth-child(even) { border-right:none; }

  .section { padding:72px 32px; }
  .section-full { padding:72px 0; }
  .section-full .section-inner { padding:0 32px; }
  footer.site-footer { padding:52px 32px 28px; }

  /* Float CTA: column style trên tablet */
  .float-cta {
    bottom:24px; left:auto; right:24px; width:auto;
    flex-direction:column; align-items:flex-end;
    background:transparent; border:none; padding:0;
    gap:10px;
  }
  body { padding-bottom:0; }
  .float-btn { flex:none; width:auto; clip-path:polygon(7px 0%,100% 0%,100% calc(100% - 7px),calc(100% - 7px) 100%,0% 100%,0% 7px); margin-right:0; }
  .float-phone { flex:none; width:auto; }

  /* Header phone hiện trên tablet+ */
  .header-phone {
    display:block;
    font-size:13px; font-weight:700; color:var(--gold-light);
    letter-spacing:0.04em;
  }
  .header-phone span { font-weight:400; color:var(--muted); margin-right:4px; font-size:11px; }
}

/* ═══════════════════════════════════════
   RESPONSIVE — DESKTOP (≥ 1024px)
═══════════════════════════════════════ */
@media (min-width:1024px) {
  body { font-size:16px; padding-bottom:0; }

  /* Header */
  #header { padding:0 48px; height:70px; }
  .hamburger { display:none; }
  #mobile-nav { display:none !important; } /* Luôn ẩn mobile nav trên desktop */
  .nav-desktop {
    display:flex; align-items:center; gap:28px;
  }
  .nav-desktop a {
    color:var(--mid); font-size:13px; font-weight:500;
    letter-spacing:0.05em; text-transform:uppercase;
    transition:color 0.2s; position:relative; padding-bottom:2px;
  }
  .nav-desktop a::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
    background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform 0.22s;
  }
  .nav-desktop a:hover { color:var(--white); }
  .nav-desktop a:hover::after { transform:scaleX(1); }
  .header-cta-btn { display:inline-flex; }

  /* Hero: 2 cột */
  #hero {
    display:grid; grid-template-columns:55% 45%;
    align-items:center; min-height:100vh; padding-top:70px;
  }
  .hero-content { padding:80px 60px 80px 80px; }
  .hero-visual {
    display:flex; padding:70px 60px 70px 20px;
    align-items:center; justify-content:center; position:relative; z-index:2;
  }

  /* Sections */
  .section { padding:100px 80px; }
  .section-full { padding:100px 0; }
  .section-full .section-inner { padding:0 80px; }

  /* Problem: 4 cột */
  .problem-grid { grid-template-columns:repeat(4,1fr); }

  /* Solutions: 3 cột */
  .sol-grid { grid-template-columns:repeat(3,1fr); gap:18px; }
  .sdesc { max-width:540px; margin-bottom:56px; }

  /* Process: 5 cột ngang */
  .process-wrap {
    grid-template-columns:repeat(5,1fr);
    position:relative;
  }
  .process-wrap::before {
    display:block;
    content:''; position:absolute; top:48px; left:9%; right:9%; height:1px;
    background:linear-gradient(90deg,transparent,rgba(220,38,38,0.5),rgba(234,88,12,0.5),rgba(220,38,38,0.5),transparent);
    z-index:0;
  }
  .proc-step {
    flex-direction:column; align-items:center; text-align:center;
    padding:0 12px; border-bottom:none; border-right:none;
  }
  .proc-num { width:96px; height:96px; font-size:38px; margin:0 auto 24px; }
  .proc-step:hover .proc-num { background:var(--red); color:#fff; border-color:var(--red); }

  /* Case: 2 cột */
  .case-grid { grid-template-columns:1fr 1fr; gap:20px; }

  /* Pricing: 3 cột */
  .price-grid { grid-template-columns:1fr 1fr 1fr; }
  .price-card { border-bottom:none; border-right:1px solid var(--border); }
  .price-card:last-child { border-right:none; }
  .price-toggle { width:auto; }

  /* Reviews: 3 cột */
  .review-grid { grid-template-columns:repeat(3,1fr); }

  /* Contact: 2 cột */
  .contact-grid { grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
  .form-box { padding:46px 40px; }
  .form-2col { grid-template-columns:1fr 1fr; gap:16px; }

  /* Footer: 4 cột */
  footer.site-footer { padding:64px 80px 32px; }
  .footer-grid { grid-template-columns:2fr 1.8fr 1.2fr; gap:48px; }
  .footer-links-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .footer-bottom { flex-direction:row; justify-content:space-between; }

  /* Float CTA: column */
  .float-cta { bottom:26px; right:26px; }
  .float-btn { animation:floatUp 3s ease-in-out infinite; }
  @keyframes floatUp { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
}

/* Dashboard Visual (chỉ hiện trên desktop) */
.dash {
  width:100%; max-width:500px;
  background:var(--surface); border:1px solid var(--border2);
  box-shadow:0 40px 80px rgba(0,0,0,0.7), 0 0 80px var(--glow), inset 0 1px 0 rgba(255,255,255,0.06);
  transform:perspective(1100px) rotateY(-7deg) rotateX(4deg);
  transition:transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.dash:hover { transform:perspective(1100px) rotateY(0deg) rotateX(0deg); }
.dash-bar {
  background:var(--surface2); padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.dash-bar-title { font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--mid); }
.dash-live { display:flex; align-items:center; gap:6px; font-size:11px; color:#22c55e; }
.dash-live::before { content:''; width:6px; height:6px; background:#22c55e; border-radius:50%; animation:blink 2s infinite; }
.dash-body { padding:20px; }
.dash-kpis { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:18px; }
.kpi { background:var(--surface2); padding:14px 10px; text-align:center; border:1px solid var(--border); }
.kpi-num { font-family:'Barlow Condensed',sans-serif; font-size:30px; font-weight:800; line-height:1; margin-bottom:4px; }
.kpi-num.r { color:var(--red); }
.kpi-num.g { color:#22c55e; }
.kpi-num.o { color:var(--gold-light); }
.kpi-name { font-size:10px; color:var(--muted); letter-spacing:0.09em; text-transform:uppercase; }
.dash-ba { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.ba { background:var(--surface2); padding:14px; border:1px solid var(--border); }
.ba-head { font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:10px; }
.ba-head.neg { color:var(--red); }
.ba-head.pos { color:#22c55e; }
.kw-item { font-size:11px; padding:5px 8px; background:rgba(255,255,255,0.03); border-left:2px solid; margin-bottom:5px; }
.kw-item:last-child { margin-bottom:0; }
.kw-item.bad { border-color:var(--red); color:rgba(255,255,255,0.6); }
.kw-item.ok { border-color:#22c55e; color:#22c55e; font-style:italic; }
.kw-item.good { border-color:#22c55e; color:rgba(255,255,255,0.8); }
.pbar-row { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.pbar-label { font-size:11px; color:var(--muted); width:72px; flex-shrink:0; }
.pbar-track { flex:1; height:4px; background:rgba(255,255,255,0.07); overflow:hidden; border-radius:2px; }
.pbar-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--red),var(--orange)); animation:growBar 2.2s ease forwards; }
@keyframes growBar { from{width:0} to{width:var(--w)} }
.pbar-pct { font-size:11px; color:var(--muted); width:30px; text-align:right; }

/* ═══════════════════════════════════════
   WORDPRESS — Admin bar & blog fallback
═══════════════════════════════════════ */
body.admin-bar #header { top:32px; }
body.admin-bar #mobile-nav { top:92px; }
@media (max-width:782px) {
  body.admin-bar #header { top:46px; }
  body.admin-bar #mobile-nav { top:106px; }
}

/* Trang con / blog fallback (index.php, page.php, single.php) */
.wp-content-page { padding-top:60px; min-height:70vh; }
@media (min-width:1024px) { .wp-content-page { padding-top:70px; } }
.wp-content-page .entry-title {
  font-family:'Barlow Condensed', sans-serif; font-weight:800;
  font-size:clamp(32px, 8vw, 62px); line-height:0.95; letter-spacing:0.01em;
  color:var(--white); margin:12px 0 24px;
}
.wp-content-page .entry-content { color:var(--mid); font-size:15px; line-height:1.8; }
.wp-content-page .entry-content p,
.wp-content-page .entry-content ul,
.wp-content-page .entry-content ol { margin-bottom:18px; }
.wp-content-page .entry-content h2,
.wp-content-page .entry-content h3 {
  font-family:'Barlow Condensed', sans-serif; color:var(--white);
  margin:28px 0 12px; letter-spacing:0.02em;
}
.wp-content-page .entry-content a { color:var(--red-light); }
.wp-content-page article + article { margin-top:40px; border-top:1px solid var(--border); padding-top:40px; }