/* ═══════════════════════════════════════════════  
   1. DESIGN TOKENS  
   ════════════════════════════════════════════════ */  
:root {  
    --bg:            #050805;  
    --bg-2:          #080d09;  
    --bg-card:       rgba(11, 20, 12, 0.70);  
    --bg-card-solid: #0b140c;  
    --accent:        #b6ff3b;  
    --accent-glow:   rgba(182, 255, 59, 0.20);  
    --accent-glow-s: rgba(182, 255, 59, 0.40);  
    --accent-dim:    rgba(182, 255, 59, 0.08);  
    --accent-border: rgba(182, 255, 59, 0.15);  
    --accent-border-h: rgba(182, 255, 59, 0.40);  
    --text:          #ffffff;  
    --text-2:        #8fa892;  
    --text-3:        #4a5e4d;  
    --border:        rgba(182, 255, 59, 0.12);  
    --border-h:      rgba(182, 255, 59, 0.35);  
    --r:             16px;  
    --r-lg:          20px;  
    --r-sm:          10px;  
    --r-xs:          7px;  
    --transition:    all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  
    --shadow-card:   0 0 40px rgba(182, 255, 59, 0.06),  
                     0 20px 60px rgba(0, 0, 0, 0.40),  
                     inset 0 1px 0 rgba(255,255,255,0.03);  
    --shadow-hot:    0 0 0 1px var(--accent),  
                     0 0 40px rgba(182, 255, 59, 0.25),  
                     0 0 80px rgba(182, 255, 59, 0.10),  
                     0 24px 64px rgba(0, 0, 0, 0.50);  
    --max-w:         1240px;  
    --font:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;  
}  
  
/* ═══════════════════════════════════════════════  
   2. RESET  
   ════════════════════════════════════════════════ */  
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }  
  
html {  
    scroll-behavior: smooth;  
    font-size: 16px;  
    /* FIX 4: overflow-x ở html thay vì body */  
    overflow-x: clip;  
}  
  
body {  
    font-family: var(--font);  
    background: var(--bg);  
    color: var(--text);  
    line-height: 1.6;  
    -webkit-font-smoothing: antialiased;  
    min-height: 100vh;  
    min-height: 100dvh;  
    /* FIX 4: BỎ overflow-x: hidden ở body */  
}  
  
img, svg { display: block; max-width: 100%; }  
a   { color: inherit; text-decoration: none; }  
ul  { list-style: none; }  
button { cursor: pointer; font: inherit; border: none; background: none; }  
  
/* ═══════════════════════════════════════════════  
   3. BACKGROUND EFFECTS  
   ════════════════════════════════════════════════ */  
/* Full-page radial gradient */  
body::before {  
    content: '';  
    position: fixed;  
    inset: 0;  
    background:  
        radial-gradient(ellipse 80% 60% at 20% 10%,  
            rgba(182,255,59,0.04) 0%, transparent 60%),  
        radial-gradient(ellipse 60% 50% at 80% 80%,  
            rgba(182,255,59,0.03) 0%, transparent 55%),  
        linear-gradient(180deg, #060b07 0%, #050805 100%);  
    pointer-events: none;  
    /* FIX 1: z-index -1 để không che content */  
    z-index: -1;  
}  
  
/* Dot grid overlay */  
.dot-grid {  
    position: absolute;  
    inset: 0;  
    background-image: radial-gradient(  
        circle, rgba(182,255,59,0.09) 1px, transparent 1px  
    );  
    background-size: 44px 44px;  
    pointer-events: none;  
    z-index: 0;  
}  
  
/* Ambient hero radial */  
.hero-glow {  
    position: absolute;  
    top: -10%;  
    right: -5%;  
    /* FIX 12: Responsive width thay vì cố định 750px */  
    width: min(750px, 120vw);  
    height: min(750px, 120vw);  
    background: radial-gradient(  
        circle, rgba(182,255,59,0.07) 0%, transparent 65%  
    );  
    pointer-events: none;  
    z-index: 0;  
}  
  
/* ═══════════════════════════════════════════════  
   4. LAYOUT  
   ════════════════════════════════════════════════ */  
.container {  
    max-width: var(--max-w);  
    margin: 0 auto;  
    padding: 0 28px;  
    position: relative;  
    z-index: 1;  
}  
  
/* ═══════════════════════════════════════════════  
   5. ANIMATIONS  
   ════════════════════════════════════════════════ */  
@keyframes float {  
    0%,  100% { transform: translateY(0px); }  
    50%       { transform: translateY(-18px); }  
}  
  
@keyframes pulseDot {  
    0%,  100% { box-shadow: 0 0 0 0   rgba(182,255,59,0.7); }  
    60%       { box-shadow: 0 0 0 9px rgba(182,255,59,0);   }  
}  
  
@keyframes glowPulse {  
    0%,  100% { box-shadow: 0 0 22px rgba(182,255,59,0.30); }  
    50%       { box-shadow: 0 0 40px rgba(182,255,59,0.55); }  
}  
  
@keyframes scanLine {  
    0%   { transform: translateY(0);    opacity: 0.06; }  
    50%  { opacity: 0.14; }  
    100% { transform: translateY(225px); opacity: 0.04; }  
}  
  
@keyframes borderGlow {  
    0%,  100% { box-shadow: var(--shadow-hot); }  
    50%       { box-shadow: 0 0 0 1px var(--accent),  
                            0 0 60px rgba(182,255,59,0.35),  
                            0 0 100px rgba(182,255,59,0.15),  
                            0 24px 64px rgba(0,0,0,0.50); }  
}  
  
/* Scroll reveal */  
.fade-up {  
    opacity: 0;  
    transform: translateY(30px);  
    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),  
                transform 0.7s cubic-bezier(0.4,0,0.2,1);  
    transition-delay: var(--delay, 0s);  
}  
.fade-up.is-visible {  
    opacity: 1;  
    transform: translateY(0);  
}  
.fade-up--delay { --delay: 0.18s; }  
  
/* ═══════════════════════════════════════════════  
   6. BUTTONS  
   ════════════════════════════════════════════════ */  
.btn {  
    display: inline-flex;  
    align-items: center;  
    gap: 9px;  
    padding: 14px 26px;  
    border-radius: var(--r-sm);  
    font-size: 15px;  
    font-weight: 600;  
    letter-spacing: 0.1px;  
    border: 1px solid transparent;  
    transition: var(--transition);  
    white-space: nowrap;  
    position: relative;  
    cursor: pointer;  
}  
.btn i { font-size: 14px; transition: transform 0.25s ease; }  
.btn:hover i { transform: translateX(3px); }  
  
/* Primary */  
.btn-primary {  
    background: var(--accent);  
    color: #060b07;  
    border-color: var(--accent);  
    box-shadow: 0 0 24px rgba(182,255,59,0.35),  
                0 4px 16px rgba(0,0,0,0.30);  
    font-weight: 700;  
}  
.btn-primary:hover {  
    box-shadow: 0 0 40px rgba(182,255,59,0.55),  
                0 0 80px rgba(182,255,59,0.20),  
                0 8px 24px rgba(0,0,0,0.30);  
    transform: translateY(-2px) scale(1.025);  
}  
  
/* Ghost */  
.btn-ghost {  
    background: transparent;  
    color: var(--text-2);  
    border-color: var(--border);  
}  
.btn-ghost:hover {  
    background: var(--accent-dim);  
    border-color: var(--border-h);  
    color: var(--text);  
    transform: translateY(-2px);  
}  
  
/* Outline */  
.btn-outline {  
    background: transparent;  
    color: var(--text);  
    border-color: var(--border);  
}  
.btn-outline:hover {  
    background: var(--accent-dim);  
    border-color: var(--accent);  
    color: var(--accent);  
    box-shadow: 0 0 20px rgba(182,255,59,0.18);  
    transform: translateY(-2px);  
}  
  
/* Full width */  
.btn--full { width: 100%; justify-content: center; }  
  
/* Circle arrow */  
.btn-circle {  
    display: inline-flex;  
    align-items: center;  
    justify-content: center;  
    width: 46px;  
    height: 46px;  
    border-radius: 50%;  
    background: var(--accent);  
    color: #060b07;  
    border: none;  
    font-size: 15px;  
    cursor: pointer;  
    transition: var(--transition);  
    box-shadow: 0 0 18px rgba(182,255,59,0.30);  
    flex-shrink: 0;  
}  
.btn-circle:hover {  
    box-shadow: 0 0 32px rgba(182,255,59,0.55);  
    transform: scale(1.12) translateX(2px);  
}  
  
/* ═══════════════════════════════════════════════  
   7. HEADER  
   ════════════════════════════════════════════════ */  
.site-header {  
    position: fixed;  
    top: 0; left: 0; right: 0;  
    z-index: 900;  
    padding: 16px 0;  
    background: rgba(5, 8, 5, 0.70);  
    backdrop-filter: blur(18px);  
    -webkit-backdrop-filter: blur(18px);  
    border-bottom: 1px solid var(--border);  
    transition: padding 0.3s ease, background 0.3s ease;  
}  
.site-header.scrolled {  
    padding: 11px 0;  
    background: rgba(5, 8, 5, 0.90);  
    border-bottom-color: var(--border-h);  
}  
  
.header-inner {  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    gap: 20px;  
}  
  
.header-contact {  
    display: flex;  
    align-items: center;  
    gap: 8px;  
    font-size: 13px;  
    color: var(--text-3);  
}  
.header-contact i { color: var(--accent); font-size: 12px; }  
.header-contact a {  
    color: var(--text-2);  
    transition: color 0.2s;  
}  
.header-contact a:hover { color: var(--accent); }  
  
/* Logo */  
.logo {  
    display: flex;  
    align-items: center;  
    gap: 10px;  
}  
.logo-cloud {  
    width: 32px;  
    height: 24px;  
    color: var(--accent);  
    filter: drop-shadow(0 0 8px rgba(182,255,59,0.5));  
}  
.logo span {  
    font-size: 20px;  
    font-weight: 800;  
    letter-spacing: -0.5px;  
    background: linear-gradient(135deg, #fff 50%, var(--accent));  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  
  
/* Hamburger */  
.nav-toggle {  
    display: none;  
    flex-direction: column;  
    gap: 5px;  
    padding: 5px;  
}  
.nav-toggle span {  
    display: block;  
    width: 22px;  
    height: 2px;  
    background: var(--text-2);  
    border-radius: 2px;  
    transition: var(--transition);  
}  
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }  
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }  
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }  
  
/* Mobile nav */  
.mobile-nav {  
    position: fixed;  
    inset: 0;  
    top: 61px;  
    background: rgba(5,8,5,0.97);  
    backdrop-filter: blur(20px);  
    -webkit-backdrop-filter: blur(20px);  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
    gap: 32px;  
    z-index: 800;  
    opacity: 0;  
    pointer-events: none;  
    transition: opacity 0.3s ease;  
}  
.mobile-nav.open {  
    opacity: 1;  
    pointer-events: all;  
}  
.mobile-nav a {  
    font-size: 26px;  
    font-weight: 700;  
    color: var(--text-2);  
    transition: color 0.2s;  
}  
.mobile-nav a:hover { color: var(--accent); }  
  
/* ═══════════════════════════════════════════════  
   8. HERO  
   ════════════════════════════════════════════════ */  
.hero {  
    /* FIX 6: dvh cho mobile Safari */  
    min-height: 100vh;  
    min-height: 100dvh;  
    display: flex;  
    align-items: center;  
    padding: 130px 0 90px;  
    /* FIX 5: position relative cho absolute children */  
    position: relative;  
    /* FIX 5: clip chỉ ngang, giữ dọc */  
    overflow-x: clip;  
    overflow-y: visible;  
}  
  
.hero-inner {  
    display: grid;  
    /* FIX 3: minmax(0, 1fr) */  
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);  
    gap: 60px;  
    align-items: center;  
}  
  
/* Badge */  
.hero-badge {  
    display: inline-flex;  
    align-items: center;  
    gap: 10px;  
    padding: 7px 16px;  
    border-radius: 100px;  
    background: var(--accent-dim);  
    border: 1px solid var(--accent-border);  
    font-size: 13px;  
    font-weight: 500;  
    color: var(--accent);  
    margin-bottom: 28px;  
    letter-spacing: 0.2px;  
}  
.badge-pulse {  
    width: 8px;  
    height: 8px;  
    border-radius: 50%;  
    background: var(--accent);  
    box-shadow: 0 0 8px var(--accent);  
    animation: pulseDot 2s infinite;  
    flex-shrink: 0;  
}  
  
/* Hero title */  
.hero-title {  
    font-size: clamp(68px, 9vw, 96px);  
    font-weight: 900;  
    letter-spacing: -3px;  
    line-height: 0.95;  
    margin-bottom: 18px;  
    display: flex;  
    align-items: center;  
    gap: 20px;  
    background: linear-gradient(140deg, #ffffff 55%, #c8ffaa 75%, var(--accent) 100%);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  
.title-cloud {  
    width: clamp(56px, 7vw, 76px);  
    height: auto;  
    color: var(--accent);  
    filter: drop-shadow(0 0 18px rgba(182,255,59,0.65));  
    flex-shrink: 0;  
    -webkit-text-fill-color: initial;  
}  
  
.hero-sub {  
    font-size: clamp(18px, 2.5vw, 24px);  
    font-weight: 400;  
    color: var(--text-2);  
    margin-bottom: 16px;  
    letter-spacing: -0.2px;  
}  
  
.hero-desc {  
    font-size: 16px;  
    color: var(--text-3);  
    max-width: 460px;  
    line-height: 1.75;  
    margin-bottom: 40px;  
}  
  
.hero-actions {  
    display: flex;  
    gap: 14px;  
    flex-wrap: wrap;  
    margin-bottom: 36px;  
}  
  
/* Trust row */  
.hero-trust {  
    display: flex;  
    gap: 24px;  
    flex-wrap: wrap;  
}  
.trust-item {  
    display: flex;  
    align-items: center;  
    gap: 7px;  
    font-size: 13px;  
    color: var(--text-3);  
}  
.trust-item i {  
    color: var(--accent);  
    font-size: 11px;  
}  
  
/* Server visual */  
.hero-visual {  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    position: relative;  
}  
  
.server-wrap {  
    position: relative;  
    width: 100%;  
    max-width: 480px;  
}  
.server-wrap--sm { max-width: 380px; }  
  
.server-aura {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    width: 340px;  
    height: 340px;  
    background: radial-gradient(  
        circle, rgba(182,255,59,0.12) 0%, transparent 68%  
    );  
    border-radius: 50%;  
    pointer-events: none;  
    z-index: 0;  
}  
.server-aura--sm {  
    width: 240px;  
    height: 240px;  
}  
  
.server-svg {  
    width: 100%;  
    position: relative;  
    z-index: 1;  
    filter: drop-shadow(0 0 30px rgba(182,255,59,0.14));  
    animation: float 5s ease-in-out infinite;  
}  
  
.server-wrap--sm .server-svg {  
    animation-delay: -2.5s;  
}  
  
/* Scan-line animation */  
.srv-scan {  
    animation: scanLine 4s linear infinite;  
}  
  
/* ═══════════════════════════════════════════════  
   9. SECTION COMMONS  
   ════════════════════════════════════════════════ */  
.section {  
    padding: 110px 0;  
    position: relative;  
}  
  
.section-label {  
    display: inline-flex;  
    align-items: center;  
    gap: 10px;  
    margin-bottom: 16px;  
    font-size: 12px;  
    font-weight: 700;  
    letter-spacing: 3px;  
    text-transform: uppercase;  
    color: var(--accent);  
}  
  
/* FIX 2: Một display duy nhất — inline-flex */  
.label-num {  
    display: inline-flex;  
    align-items: center;  
    justify-content: center;  
    width: 26px;  
    height: 26px;  
    border-radius: 6px;  
    background: var(--accent-dim);  
    border: 1px solid var(--accent-border);  
    font-size: 11px;  
    font-weight: 800;  
    color: var(--accent);  
    letter-spacing: 0;  
}  
  
.section-title {  
    font-size: clamp(32px, 4.5vw, 52px);  
    font-weight: 800;  
    letter-spacing: -1.2px;  
    line-height: 1.12;  
    margin-bottom: 16px;  
}  
.section-title .accent { color: var(--accent); }  
  
.section-sub {  
    font-size: 16px;  
    color: var(--text-2);  
    max-width: 520px;  
    margin-bottom: 64px;  
}  
  
/* ═══════════════════════════════════════════════  
   10. PRICING  
   ════════════════════════════════════════════════ */  
.pricing {  
    background: linear-gradient(  
        180deg,  
        transparent,  
        rgba(182,255,59,0.015),  
        transparent  
    );  
}  
  
.pricing-grid {  
    display: grid;  
    /* FIX 3: minmax(0, 1fr) */  
    grid-template-columns: repeat(3, minmax(0, 1fr));  
    gap: 22px;  
    align-items: start;  
}  
  
/* FIX 8: Stacking context kiểm soát */  
.price-card {  
    background: var(--bg-card);  
    border: 1px solid var(--border);  
    border-radius: var(--r-lg);  
    padding: 30px;  
    position: relative;  
    isolation: isolate;  
    overflow: visible;  
    backdrop-filter: blur(10px);  
    -webkit-backdrop-filter: blur(10px);  
    box-shadow: var(--shadow-card);  
    transition: var(--transition);  
}  
.price-card:hover {  
    border-color: var(--border-h);  
    transform: translateY(-6px) scale(1.01);  
    box-shadow: 0 0 40px rgba(182,255,59,0.12),  
                0 28px 60px rgba(0,0,0,0.45);  
}  
  
/* Highlighted card */  
/* FIX 9: Smooth animation pause on hover */  
.price-card--hot {  
    border-color: var(--accent);  
    background: linear-gradient(145deg, #0d1f0f, #0a170b);  
    animation: borderGlow 3.5s ease-in-out infinite;  
    transform: translateY(-8px);  
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),  
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);  
}  
.price-card--hot:hover {  
    animation-play-state: paused;  
    transform: translateY(-14px) scale(1.02);  
    box-shadow: 0 0 0 1px var(--accent),  
                0 0 60px rgba(182,255,59,0.40),  
                0 32px 80px rgba(0,0,0,0.50);  
}  
  
/* Popular badge */  
.popular-badge {  
    position: absolute;  
    top: -15px;  
    left: 50%;  
    transform: translateX(-50%);  
    background: var(--accent);  
    color: #060b07;  
    font-size: 11px;  
    font-weight: 800;  
    padding: 5px 15px;  
    border-radius: 100px;  
    text-transform: uppercase;  
    letter-spacing: 0.8px;  
    white-space: nowrap;  
    display: flex;  
    align-items: center;  
    gap: 6px;  
    /* FIX 8: Badge luôn trên card content */  
    z-index: 10;  
}  
.popular-badge i { font-size: 10px; }  
  
/* Bolts */  
.price-bolts {  
    display: flex;  
    gap: 3px;  
    margin-bottom: 10px;  
}  
.price-bolts i { color: var(--accent); font-size: 13px; }  
  
.price-header { margin-bottom: 26px; }  
.price-name {  
    font-size: 20px;  
    font-weight: 700;  
    letter-spacing: -0.3px;  
}  
  
/* Specs */  
.price-specs { margin-bottom: 28px; }  
.price-specs li {  
    display: flex;  
    align-items: center;  
    gap: 12px;  
    padding: 10px 0;  
    border-bottom: 1px solid rgba(255,255,255,0.04);  
    font-size: 14px;  
    color: var(--text-2);  
}  
.price-specs li:last-child { border-bottom: none; }  
.price-specs i {  
    width: 18px;  
    color: var(--accent);  
    font-size: 13px;  
    opacity: 0.8;  
    flex-shrink: 0;  
}  
  
/* Price display */  
.price-footer {  
    padding-top: 6px;  
    border-top: 1px solid rgba(255,255,255,0.05);  
}  
.price-amount {  
    display: flex;  
    align-items: baseline;  
    gap: 3px;  
    margin-bottom: 16px;  
}  
.price-dollar {  
    font-size: 22px;  
    font-weight: 700;  
    color: var(--accent);  
}  
.price-num {  
    font-size: 48px;  
    font-weight: 900;  
    letter-spacing: -2px;  
    line-height: 1;  
    color: var(--text);  
}  
.price-period {  
    font-size: 14px;  
    color: var(--text-3);  
    font-weight: 400;  
}  
  
/* ═══════════════════════════════════════════════  
   11. FEATURES  
   ════════════════════════════════════════════════ */  
.features-inner {  
    display: grid;  
    /* FIX 3: minmax(0, 1fr) */  
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);  
    gap: 72px;  
    align-items: center;  
    margin-bottom: 70px;  
}  
  
.features-copy .section-title { margin-bottom: 24px; }  
  
.feat-list { margin-bottom: 36px; }  
.feat-list li {  
    display: flex;  
    align-items: center;  
    gap: 12px;  
    padding: 11px 0;  
    font-size: 15px;  
    color: var(--text-2);  
    border-bottom: 1px solid rgba(255,255,255,0.035);  
}  
.feat-list li:last-child { border-bottom: none; }  
.feat-list i {  
    color: var(--accent);  
    font-size: 14px;  
    background: var(--accent-dim);  
    width: 26px;  
    height: 26px;  
    border-radius: 50%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    flex-shrink: 0;  
}  
  
.features-cta {  
    display: flex;  
    align-items: center;  
    gap: 22px;  
}  
.from-price {  
    font-size: 14px;  
    color: var(--text-3);  
}  
.from-price strong {  
    font-size: 22px;  
    font-weight: 800;  
    color: var(--accent);  
    letter-spacing: -0.5px;  
}  
  
/* ─── Stats ─── */  
.stats-row {  
    display: grid;  
    /* FIX 3: minmax(0, 1fr) */  
    grid-template-columns: repeat(3, minmax(0, 1fr));  
    gap: 20px;  
}  
  
.stat-card {  
    background: var(--bg-card);  
    border: 1px solid var(--border);  
    border-radius: var(--r);  
    padding: 26px 28px;  
    display: flex;  
    align-items: center;  
    gap: 20px;  
    transition: var(--transition);  
    backdrop-filter: blur(10px);  
    -webkit-backdrop-filter: blur(10px);  
}  
.stat-card:hover {  
    border-color: var(--border-h);  
    transform: translateY(-4px);  
    box-shadow: 0 0 30px rgba(182,255,59,0.10),  
                0 16px 40px rgba(0,0,0,0.35);  
}  
  
.stat-icon {  
    width: 50px;  
    height: 50px;  
    border-radius: var(--r-sm);  
    background: var(--accent-dim);  
    border: 1px solid var(--accent-border);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    flex-shrink: 0;  
}  
.stat-icon i {  
    color: var(--accent);  
    font-size: 20px;  
}  
  
.stat-num {  
    font-size: 32px;  
    font-weight: 900;  
    letter-spacing: -1px;  
    color: var(--accent);  
    line-height: 1;  
    margin-bottom: 4px;  
}  
.stat-desc {  
    font-size: 13px;  
    color: var(--text-3);  
}  
  
/* ═══════════════════════════════════════════════  
   12. WHY US  
   ════════════════════════════════════════════════ */  
.why-us {  
    background: linear-gradient(  
        180deg, transparent, rgba(182,255,59,0.015), transparent  
    );  
}  
  
.why-us .section-sub { margin-bottom: 56px; }  
  
.why-grid {  
    display: grid;  
    /* FIX 3: minmax(0, 1fr) */  
    grid-template-columns: repeat(3, minmax(0, 1fr));  
    gap: 18px;  
}  
  
.why-card {  
    background: var(--bg-card);  
    border: 1px solid var(--border);  
    border-radius: var(--r);  
    padding: 28px;  
    position: relative;  
    backdrop-filter: blur(10px);  
    -webkit-backdrop-filter: blur(10px);  
    transition: var(--transition);  
    overflow: hidden;  
}  
.why-card::before {  
    content: '';  
    position: absolute;  
    top: 0; left: 0; right: 0;  
    height: 1px;  
    background: linear-gradient(  
        90deg, transparent, rgba(182,255,59,0.25), transparent  
    );  
    opacity: 0;  
    transition: opacity 0.3s;  
}  
.why-card:hover {  
    border-color: var(--border-h);  
    transform: translateY(-5px) scale(1.01);  
    box-shadow: 0 0 40px rgba(182,255,59,0.10),  
                0 20px 50px rgba(0,0,0,0.40);  
}  
.why-card:hover::before { opacity: 1; }  
  
.why-icon {  
    width: 48px;  
    height: 48px;  
    border-radius: var(--r-sm);  
    background: var(--accent-dim);  
    border: 1px solid var(--accent-border);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    margin-bottom: 18px;  
    transition: var(--transition);  
}  
.why-icon i {  
    color: var(--accent);  
    font-size: 20px;  
}  
.why-card:hover .why-icon {  
    background: rgba(182,255,59,0.15);  
    box-shadow: 0 0 20px rgba(182,255,59,0.25);  
}  
  
.why-title {  
    font-size: 16px;  
    font-weight: 700;  
    margin-bottom: 10px;  
    letter-spacing: -0.2px;  
}  
.why-desc {  
    font-size: 13.5px;  
    color: var(--text-3);  
    line-height: 1.65;  
}  
.why-tag {  
    display: inline-block;  
    background: var(--accent);  
    color: #060b07;  
    font-size: 12px;  
    font-weight: 700;  
    padding: 4px 12px;  
    border-radius: var(--r-xs);  
    margin-top: 14px;  
}  
  
/* Accent "–%" card */  
.why-card--accent {  
    background: linear-gradient(145deg, #0d220f, #081508);  
    border-color: rgba(182,255,59,0.22);  
}  
.accent-pct {  
    font-size: 68px;  
    font-weight: 900;  
    letter-spacing: -3px;  
    line-height: 1;  
    color: var(--accent);  
    margin-bottom: 16px;  
    filter: drop-shadow(0 0 24px rgba(182,255,59,0.40));  
}  
.why-card--accent .why-desc { color: var(--text-2); font-size: 14px; }  
  
/* ═══════════════════════════════════════════════  
   13. SERVER PLANS  
   ════════════════════════════════════════════════ */  
.srv-section {  
    background: linear-gradient(180deg, transparent, rgba(182,255,59,0.014), transparent);  
}  
.srv-section .section-sub { margin-bottom: 56px; }  
  
.srv-grid {  
    display: grid;  
    /* FIX 3: minmax(0, 1fr) */  
    grid-template-columns: repeat(2, minmax(0, 1fr));  
    gap: 20px;  
}  
  
.srv-card {  
    background: var(--bg-card);  
    border: 1px solid var(--border);  
    border-radius: var(--r);  
    padding: 28px;  
    backdrop-filter: blur(10px);  
    -webkit-backdrop-filter: blur(10px);  
    transition: var(--transition);  
}  
.srv-card:hover {  
    border-color: var(--border-h);  
    transform: translateY(-5px);  
    box-shadow: 0 0 36px rgba(182,255,59,0.12),  
                0 20px 50px rgba(0,0,0,0.40);  
}  
  
.srv-top {  
    display: flex;  
    justify-content: space-between;  
    align-items: flex-start;  
    margin-bottom: 20px;  
}  
.srv-name {  
    font-size: 18px;  
    font-weight: 700;  
    color: var(--text-2);  
    letter-spacing: -0.2px;  
}  
.srv-icon {  
    width: 60px;  
    height: 58px;  
    opacity: 0.8;  
    transition: opacity 0.3s;  
    flex-shrink: 0;  
}  
.srv-card:hover .srv-icon { opacity: 1; }  
  
.srv-specs { margin-bottom: 22px; }  
.srv-specs li {  
    display: flex;  
    align-items: center;  
    gap: 10px;  
    padding: 7px 0;  
    border-bottom: 1px solid rgba(255,255,255,0.035);  
    font-size: 13.5px;  
    color: var(--text-3);  
}  
.srv-specs li:last-child { border-bottom: none; }  
.srv-specs i {  
    color: var(--accent);  
    font-size: 12px;  
    width: 16px;  
    opacity: 0.75;  
    flex-shrink: 0;  
}  
  
.srv-foot {  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    padding-top: 16px;  
    border-top: 1px solid rgba(255,255,255,0.04);  
}  
.srv-price {  
    font-size: 28px;  
    font-weight: 900;  
    letter-spacing: -1px;  
}  
.srv-dollar { color: var(--accent); font-size: 18px; font-weight: 700; }  
.srv-mo     { font-size: 13px; color: var(--text-3); font-weight: 400; }  
  
/* ═══════════════════════════════════════════════  
   14. HOW TO START  
   ════════════════════════════════════════════════ */  
.how-to {  
    background: linear-gradient(180deg, transparent, rgba(182,255,59,0.013), transparent);  
}  
.how-to .section-sub { margin-bottom: 56px; }  
  
.steps-grid {  
    display: grid;  
    /* FIX 3: minmax(0, 1fr) */  
    grid-template-columns: repeat(3, minmax(0, 1fr));  
    gap: 22px;  
    position: relative;  
    /* FIX 7: Clip connector overflow */  
    overflow: clip;  
}  
  
/* Connector line */  
.steps-grid::before {  
    content: '';  
    position: absolute;  
    top: 80px;  
    left: calc(33.33% + 10px);  
    right: calc(33.33% + 10px);  
    height: 1px;  
    background: linear-gradient(  
        90deg, transparent 0%, var(--border-h) 30%, var(--border-h) 70%, transparent 100%  
    );  
    pointer-events: none;  
    z-index: 0;  
}  
  
.step-card {  
    background: var(--bg-card);  
    border: 1px solid var(--border);  
    border-radius: var(--r-lg);  
    padding: 36px 28px;  
    text-align: center;  
    backdrop-filter: blur(10px);  
    -webkit-backdrop-filter: blur(10px);  
    transition: var(--transition);  
    position: relative;  
    z-index: 1;  
}  
.step-card:hover {  
    border-color: var(--border-h);  
    transform: translateY(-6px);  
    box-shadow: 0 0 36px rgba(182,255,59,0.12),  
                0 20px 50px rgba(0,0,0,0.40);  
}  
  
.step-num {  
    font-size: 11px;  
    font-weight: 800;  
    letter-spacing: 3px;  
    color: var(--accent);  
    margin-bottom: 20px;  
    opacity: 0.85;  
}  
  
.step-icon {  
    width: 72px;  
    height: 72px;  
    border-radius: 50%;  
    background: var(--accent-dim);  
    border: 1px solid var(--accent-border);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    margin: 0 auto 22px;  
    transition: var(--transition);  
}  
.step-icon i {  
    font-size: 28px;  
    color: var(--accent);  
}  
.step-card:hover .step-icon {  
    background: rgba(182,255,59,0.15);  
    box-shadow: 0 0 28px rgba(182,255,59,0.30);  
    transform: scale(1.05);  
}  
  
.step-title {  
    font-size: 18px;  
    font-weight: 700;  
    margin-bottom: 12px;  
    letter-spacing: -0.2px;  
}  
.step-desc {  
    font-size: 14px;  
    color: var(--text-3);  
    line-height: 1.65;  
}  
  
/* Step connector arrow (decorative) */  
.step-connector {  
    position: absolute;  
    top: 72px;  
    right: -18px;  
    color: var(--accent);  
    opacity: 0.45;  
    font-size: 18px;  
    z-index: 2;  
}  
/* FIX 7: Ẩn connector ở card cuối */  
.step-card:last-child .step-connector {  
    display: none;  
}  
  
/* ═══════════════════════════════════════════════  
   15. FOOTER  
   ════════════════════════════════════════════════ */  
.footer {  
    border-top: 1px solid var(--border);  
    padding: 70px 0 30px;  
    background: rgba(182,255,59,0.006);  
    position: relative;  
}  
  
.footer-grid {  
    display: grid;  
    /* FIX 3: minmax(0, 1fr) */  
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);  
    gap: 48px;  
    margin-bottom: 56px;  
}  
  
.footer-brand .logo { margin-bottom: 16px; }  
.footer-brand p {  
    font-size: 14px;  
    color: var(--text-3);  
    max-width: 260px;  
    line-height: 1.65;  
    margin-bottom: 24px;  
}  
  
/* Payment badges */  
.footer-payments { display: flex; gap: 10px; flex-wrap: wrap; }  
.pay-badge {  
    background: rgba(255,255,255,0.06);  
    border: 1px solid var(--border);  
    border-radius: 8px;  
    padding: 8px 14px;  
    display: flex;  
    align-items: center;  
    height: 38px;  
    transition: border-color 0.2s;  
}  
.pay-badge:hover { border-color: var(--border-h); }  
.pay-badge svg { height: 16px; width: auto; }  
.pay-badge--mc svg { height: 24px; }  
  
/* Footer columns */  
.footer-col h4 {  
    font-size: 12px;  
    font-weight: 700;  
    text-transform: uppercase;  
    letter-spacing: 2px;  
    color: var(--text-2);  
    margin-bottom: 18px;  
}  
.footer-col ul li { margin-bottom: 10px; }  
.footer-col ul li a {  
    font-size: 14px;  
    color: var(--text-3);  
    transition: color 0.2s;  
}  
.footer-col ul li a:hover { color: var(--accent); }  
  
/* Footer bottom */  
.footer-bottom {  
    border-top: 1px solid var(--border);  
    padding-top: 28px;  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    flex-wrap: wrap;  
    gap: 14px;  
}  
.footer-contacts {  
    display: flex;  
    gap: 24px;  
    flex-wrap: wrap;  
}  
.footer-contacts a {  
    display: flex;  
    align-items: center;  
    gap: 8px;  
    font-size: 13px;  
    color: var(--text-3);  
    transition: color 0.2s;  
}  
.footer-contacts a:hover { color: var(--accent); }  
.footer-contacts i { color: var(--accent); font-size: 12px; }  
  
.footer-copy {  
    font-size: 12.5px;  
    color: var(--text-3);  
}  
  
/* ═══════════════════════════════════════════════  
   16. RESPONSIVE — 1100px  
   ════════════════════════════════════════════════ */  
@media (max-width: 1100px) {  
    .footer-grid {  
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);  
        gap: 32px;  
    }  
    .footer-brand { grid-column: 1 / -1; }  
}  
  
/* ═══════════════════════════════════════════════  
   17. RESPONSIVE — 900px  
   ════════════════════════════════════════════════ */  
@media (max-width: 900px) {  
    .section { padding: 80px 0; }  
  
    .pricing-grid {  
        grid-template-columns: minmax(0, 1fr);  
        max-width: 440px;  
        margin: 0 auto;  
    }  
    .price-card--hot { transform: none; }  
  
    .features-inner {  
        grid-template-columns: minmax(0, 1fr);  
        gap: 44px;  
    }  
    .features-visual { order: -1; display: flex; justify-content: center; }  
  
    /* FIX 10: Center features copy content */  
    .features-copy {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        text-align: center;  
    }  
    .features-cta { justify-content: center; }  
    .feat-list {  
        max-width: 400px;  
        width: 100%;  
    }  
    .feat-list li { text-align: left; }  
  
    .stats-row { grid-template-columns: minmax(0, 1fr); }  
  
    .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }  
  
    .srv-grid {  
        grid-template-columns: minmax(0, 1fr);  
        max-width: 480px;  
        margin: 0 auto;  
    }  
  
    .steps-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }  
    .steps-grid::before { display: none; }  
    .step-connector { display: none; }  
  
    .hero-inner {  
        grid-template-columns: minmax(0, 1fr);  
        text-align: center;  
    }  
    .hero-visual { order: -1; margin: 0 auto; max-width: 380px; width: 100%; }  
    .hero-title { justify-content: center; }  
    .hero-desc, .hero-badge { margin-left: auto; margin-right: auto; }  
    .hero-actions { justify-content: center; }  
    .hero-trust { justify-content: center; }  
  
    .section-sub { margin-left: auto; margin-right: auto; text-align: center; }  
    .section-label { display: flex; justify-content: center; }  
    .section-title { text-align: center; }  
}  
  
/* ═══════════════════════════════════════════════  
   18. RESPONSIVE — 600px  
   ════════════════════════════════════════════════ */  
@media (max-width: 600px) {  
    .container { padding: 0 18px; }  
    .header-contact { display: none; }  
    .nav-toggle { display: flex; }  
  
    .hero { padding: 108px 0 64px; }  
    .hero-title {  
        font-size: 60px;  
        letter-spacing: -2px;  
        flex-direction: column;  
        gap: 8px;  
    }  
  
    /* FIX 11: Button sizing — constrained width */  
    .hero-actions {  
        flex-direction: column;  
        align-items: stretch;  
        max-width: 320px;  
        width: 100%;  
        margin-left: auto;  
        margin-right: auto;  
    }  
    .hero-actions .btn {  
        width: 100%;  
        justify-content: center;  
    }  
    .hero-actions .btn-circle {  
        width: 46px;  
        min-width: 46px;  
        align-self: center;  
    }  
  
    .why-grid { grid-template-columns: minmax(0, 1fr); }  
  
    .footer-grid {  
        grid-template-columns: minmax(0, 1fr);  
        gap: 28px;  
    }  
    .footer-bottom { flex-direction: column; text-align: center; }  
    .footer-contacts { justify-content: center; }  
    .footer-brand p { max-width: 100%; }  
  
    .features-cta {  
        flex-direction: column;  
        align-items: center;  
        width: 100%;  
    }  
    .features-cta .btn { width: 100%; justify-content: center; }  
}