:root{--bg:#0f172a;--card:#1e293b;--cy:#06b6d4;--sky:#38bdf8;--tx:#e2e8f0;--mut:#94a3b8;--bd:rgba(56,189,248,.18)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font-family:Inter,system-ui,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Space Grotesk',Inter,sans-serif;line-height:1.2;margin:0 0 .6em}
h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
h3{font-size:1.1rem}
a{color:var(--sky)}
img{max-width:100%;height:auto}
.sp-wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.sp-narrow{max-width:820px}
.sp-header{position:sticky;top:0;z-index:20;background:rgba(15,23,42,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd)}
.sp-header-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.sp-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--tx);font:700 1.1rem 'Space Grotesk',sans-serif}
.sp-brand b{color:var(--cy)}
.sp-nav{display:none;gap:18px;font-size:.9rem}
.sp-nav a{color:#cbd5e1;text-decoration:none;white-space:nowrap}
.sp-nav a:hover{color:var(--cy)}
@media(min-width:960px){.sp-nav{display:flex}}
.sp-btn{display:inline-block;padding:11px 20px;border-radius:12px;border:1px solid var(--bd);color:var(--tx);text-decoration:none;font-weight:600;background:transparent;cursor:pointer;font-size:.95rem}
.sp-btn-p{background:linear-gradient(135deg,#06b6d4,#38bdf8);color:#082f49;border-color:transparent}
.sp-btn:disabled{opacity:.6;cursor:wait}
.sp-hero{padding:56px 0 40px;background:radial-gradient(ellipse at top,rgba(6,182,212,.18),transparent 60%)}
.sp-eyebrow{color:var(--cy);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.8rem;margin:0 0 .8em}
.sp-lead{color:#cbd5e1;font-size:1.1rem}
.sp-hero .sp-btn{margin:6px 8px 6px 0}
.sp-section{padding:48px 0}
.sp-alt{background:rgba(2,6,23,.45)}
.sp-sub{color:var(--mut)}
.sp-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.sp-card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:20px}
.sp-card p{margin:0;color:#cbd5e1}
.sp-checks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.sp-checks li{padding-left:30px;position:relative}
.sp-checks li:before{content:"✓";position:absolute;left:0;top:0;color:var(--cy);font-weight:700}
.sp-steps{display:grid;gap:14px;padding-left:20px;margin:0}
.sp-faq{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:14px 18px;margin:0 0 10px}
.sp-faq summary{cursor:pointer;font-weight:600}
.sp-faq p{margin:.7em 0 0;color:#cbd5e1}
.sp-form{display:grid;gap:14px;grid-template-columns:1fr;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:20px;margin-top:16px}
@media(min-width:640px){.sp-form{grid-template-columns:1fr 1fr}.sp-full{grid-column:1/-1}}
.sp-form label{display:grid;gap:6px;font-size:.9rem;color:var(--mut)}
.sp-form input,.sp-form textarea{background:#0f172a;border:1px solid #334155;border-radius:10px;padding:11px 12px;color:var(--tx);font:inherit}
.sp-form input:focus,.sp-form textarea:focus{outline:2px solid var(--cy);outline-offset:1px}
.sp-hp{position:absolute;left:-9999px;opacity:0}
.sp-msg{margin:0;min-height:1.4em;font-size:.9rem}
.sp-ok{color:#4ade80}.sp-err{color:#f87171}
.sp-plans{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.sp-price{font:700 1.6rem 'Space Grotesk',sans-serif;color:var(--cy);margin:.3em 0}
.sp-plan ul{padding-left:18px;color:#cbd5e1;font-size:.9rem}
.sp-footer{border-top:1px solid var(--bd);background:rgba(2,6,23,.7);padding:32px 0 20px;font-size:.9rem}
.sp-footer-in{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sp-footer ul{list-style:none;padding:0;margin:.5em 0 0;display:grid;gap:6px}
.sp-footer p{color:var(--mut);margin:.5em 0 0}
.sp-copy{margin-top:24px!important;font-size:.8rem}

/* Nền chuyển động (seo-bg.js) */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bgfx .orb{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.bgfx .o1{width:480px;height:480px;background:#06b6d4;opacity:.20;top:-140px;left:-120px;animation:orb1 18s ease-in-out infinite}
.bgfx .o2{width:420px;height:420px;background:#38bdf8;opacity:.16;bottom:-140px;right:-100px;animation:orb2 22s ease-in-out infinite}
.bgfx .o3{width:300px;height:300px;background:#8b5cf6;opacity:.12;top:40%;left:55%;animation:orb1 26s ease-in-out infinite reverse}
@keyframes orb1{50%{transform:translate(90px,60px) scale(1.18)}}
@keyframes orb2{50%{transform:translate(-80px,-70px) scale(1.12)}}
#bgc{position:absolute;inset:0;width:100%;height:100%}
@media(prefers-reduced-motion:reduce){.bgfx .orb{animation:none}}
.sp-alt{background:rgba(2,6,23,.35)}
.sp-footer{background:rgba(2,6,23,.6)}
html{scroll-padding-top:76px}

/* Demo tương tác */
.sp-small{font-size:.8rem}
.sp-note{background:rgba(245,158,11,.08);border:1px dashed rgba(245,158,11,.5);color:#fde68a;border-radius:12px;padding:10px 14px;font-size:.85rem;margin:12px 0 20px}
.sp-demo{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.sp-demo.cols3{grid-template-columns:340px 1fr 1fr}.sp-demo.cols2{grid-template-columns:1fr 1fr}}
.dm-card{background:rgba(30,41,59,.85);border:1px solid var(--bd);border-radius:16px;padding:16px;backdrop-filter:blur(6px)}
.dm-card h3{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 12px;font-size:1rem}
.dm-card h3 small{color:var(--mut);font:400 .72rem Inter,sans-serif}
.dm-phone{width:100%;max-width:340px;margin:0 auto;border:6px solid #334155;border-radius:2.2rem;background:#020617;padding:8px;box-shadow:0 0 0 1px rgba(6,182,212,.4),0 0 32px rgba(6,182,212,.18)}
.dm-screen{border-radius:1.6rem;background:#0f172a;height:520px;display:flex;flex-direction:column;overflow:hidden}
.dm-bar{padding:12px 18px 8px;font-size:.7rem;color:var(--mut);border-bottom:1px solid #1e293b}
.dm-bar b{color:var(--cy)}
.dm-bar strong{display:block;color:var(--tx);font:700 1rem 'Space Grotesk',sans-serif}
.dm-body{flex:1;overflow:auto;padding:12px;font-size:.88rem}
.dm-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.dm-chip{border:1px solid #334155;background:transparent;color:#cbd5e1;border-radius:999px;padding:5px 12px;font:inherit;font-size:.78rem;cursor:pointer}
.dm-chip.on{border-color:var(--cy);color:var(--cy);background:rgba(6,182,212,.12)}
.dm-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #1e293b}
.dm-row small{display:block;color:var(--mut)}
.dm-price{color:var(--sky);font-weight:600}
.dm-add,.dm-b{border:0;border-radius:10px;padding:7px 12px;font:600 .8rem Inter,sans-serif;cursor:pointer;background:linear-gradient(135deg,#06b6d4,#38bdf8);color:#082f49}
.dm-add{width:30px;height:30px;padding:0;border-radius:50%;font-size:1rem}
.dm-b.alt{background:#334155;color:var(--tx)}
.dm-b:disabled{opacity:.45;cursor:not-allowed}
.dm-empty{color:var(--mut);text-align:center;padding:36px 8px;font-size:.88rem}
.dm-ticket{background:#0f172a;border:1px solid #334155;border-radius:12px;padding:12px;margin-bottom:10px}
.dm-ticket header{display:flex;justify-content:space-between;gap:8px;font-weight:600;margin-bottom:6px}
.dm-st{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.72rem;font-weight:600;border:1px solid transparent;cursor:pointer;background:transparent;font-family:inherit}
.st0{color:#fbbf24;background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.4)}
.st1{color:#38bdf8;background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.4)}
.st2{color:#4ade80;background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.4)}
.dm-total{display:flex;justify-content:space-between;font-weight:700;padding:10px 0}
.dm-foot{padding:10px 12px;border-top:1px solid #1e293b}
.dm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dm-room{border:1px solid #334155;border-radius:12px;padding:10px;text-align:center;cursor:pointer;background:#0f172a;color:var(--tx);font:inherit;font-size:.82rem}
.dm-room b{display:block;font-size:1.05rem}
.dm-kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.dm-kpi div{background:#0f172a;border:1px solid #334155;border-radius:12px;padding:10px;font-size:.75rem;color:var(--mut)}
.dm-kpi b{display:block;font:700 1.2rem 'Space Grotesk',sans-serif;color:var(--cy)}
.dm-field{display:grid;gap:4px;margin-bottom:10px;font-size:.8rem;color:var(--mut)}
.dm-field select,.dm-field input{background:#0f172a;border:1px solid #334155;border-radius:10px;padding:9px 10px;color:var(--tx);font:inherit}
.dm-opt{display:flex;justify-content:space-between;gap:10px;border:1px solid #334155;border-radius:12px;padding:10px 12px;margin-bottom:8px;cursor:pointer;background:#0f172a;color:var(--tx);width:100%;font:inherit;text-align:left}
.dm-opt.on{border-color:var(--cy);background:rgba(6,182,212,.1)}
.dm-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.dm-slot{border:1px solid #334155;background:#0f172a;color:var(--tx);border-radius:10px;padding:7px 0;font:inherit;font-size:.82rem;cursor:pointer}
.dm-slot.on{border-color:var(--cy);background:rgba(6,182,212,.15);color:var(--cy)}
.dm-slot:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.dm-center{min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:0 8px}
.dm-qr{width:130px;height:130px;border-radius:16px;background:#fff;color:#0f172a;display:grid;place-items:center;font-size:5rem;line-height:1}
.dm-ok{font-size:3.2rem;color:#34d399;line-height:1}
.dm-bill{background:#1e293b;border-radius:12px;padding:16px;text-align:center;font-size:.75rem;color:var(--mut)}
.dm-bill strong{display:block;font:700 1.9rem 'Space Grotesk',sans-serif;color:#67e8f9;margin:4px 0}
.dm-c{text-align:center}
.dm-link{background:none;border:0;color:var(--sky);font:inherit;font-size:.8rem;cursor:pointer;margin-top:8px}
.dm-h{font-size:.78rem;font-weight:600;color:#cbd5e1;margin:14px 0 6px}
.dm-prog{display:flex;gap:4px;margin:8px 0 4px}.dm-prog i{flex:1;height:6px;border-radius:99px;background:#334155}.dm-prog i.on{background:#22d3ee}
.dm-cy{color:var(--sky)}
.dm-qty{display:flex;align-items:center;gap:8px}
.dm-add.alt{background:#334155;color:var(--tx)}
.dm-pay{border-color:rgba(52,211,153,.4);background:rgba(16,185,129,.1)}
.dm-pay>*{display:block}
.dm-big{font:700 1.6rem 'Space Grotesk',sans-serif;margin:4px 0}
