html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{background:#f9fcff}
body::before{content:"";position:fixed;inset:0;z-index:-1;background-color:#f9fcff;background-position:center center;background-size:cover;background-repeat:no-repeat}
.section-title::before{content:"";display:block;width:4px;height:21px;border-radius:8px;background:#1577ff}
.glass{background:rgba(255,255,255,.9);backdrop-filter:blur(12px)}
.hero-bg{background:linear-gradient(90deg,#eaf4ff 0%,#f7fbff 48%,#eef5ff 100%)}
.card-border{border:1px solid #e4edf9}
html{color-scheme:light}
html.dark{color-scheme:dark}
html.dark body{background:#0b1020}
html.dark body::before{background-color:#0b1020;filter:brightness(.3) saturate(.6)}
html.dark .glass{background:rgba(11,16,32,.88)}
html.dark .hero-bg{background:linear-gradient(90deg,#121a33 0%,#0f1630 48%,#111a36 100%)}
html.dark .card-border{border-color:#252d4a}
html.dark .section-title::before{background:#6fb0ff}
html.dark .hero-dot.is-active{background:#6fb0ff}
html.dark .shadow-card{--tw-shadow:0 8px 28px rgba(0,0,0,.35);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

.hero-slide{position:absolute;inset:0;z-index:1;opacity:0;visibility:hidden;transition:opacity .62s cubic-bezier(.22,.61,.36,1),visibility 0s linear .62s}
.hero-slide.is-active{z-index:2;opacity:1;visibility:visible;transition:opacity .62s cubic-bezier(.22,.61,.36,1),visibility 0s}
.hero-media{transform:scale(1.07);transform-origin:60% 50%;transition:transform 0s linear .62s}
.hero-slide.is-active .hero-media{transform:scale(1);transition:transform 7s cubic-bezier(.16,.62,.3,1)}
.hero-copy{opacity:0;transform:translate3d(0,16px,0);transition:opacity 0s linear .62s,transform 0s linear .62s}
.hero-slide.is-active .hero-copy{opacity:1;transform:none;transition:opacity .5s ease .14s,transform .62s cubic-bezier(.22,.61,.36,1) .14s}
.hero-dot{position:relative;width:8px;background:rgba(255,255,255,.7);cursor:pointer;transition:width .35s cubic-bezier(.22,.61,.36,1),background-color .35s ease}
.hero-dot.is-active{width:26px;background:#0877ff}
.hero-dot::after{content:"";position:absolute;inset:-11px -4px}
.hero-dot:focus-visible{outline:2px solid #0877ff;outline-offset:3px}
@media (prefers-reduced-motion: reduce){
.hero-slide,.hero-slide.is-active{transition:opacity .01s linear,visibility 0s}
.hero-media,.hero-slide.is-active .hero-media{transform:none;transition:none}
.hero-copy,.hero-slide.is-active .hero-copy{opacity:1;transform:none;transition:none}
.hero-dot{transition:none}
}

/* ---- Trang con (nạp NEO, shop, đơn hàng) --------------------------------------------- */
.np-card{background:#fff;border:1px solid #e4edf9;border-radius:16px;box-shadow:0 8px 28px rgba(31,94,178,.08)}
.np-card-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #eef3fb;font-size:15px;font-weight:800;color:#0b124c}
.np-card-body{padding:18px}
.np-step{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:999px;background:#0877ff;color:#fff;font-size:12px;font-weight:800}
.np-muted{color:#6d7d9f}
.np-label{display:block;font-size:12px;font-weight:700;color:#283466;margin-bottom:6px}
.np-field{width:100%;border:1px solid #d9e4f5;border-radius:10px;padding:11px 13px;font-size:14px;background:#fff;color:#0b124c;outline:none;transition:border-color .15s,box-shadow .15s}
.np-field:focus{border-color:#0877ff;box-shadow:0 0 0 3px rgba(8,119,255,.14)}
.np-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:12px 20px;font-size:14px;font-weight:800;cursor:pointer;border:1px solid transparent;transition:background-color .15s,color .15s,transform .15s}
.np-btn-primary{background:#0877ff;color:#fff}
.np-btn-primary:hover{background:#0b124c}
.np-btn-primary[disabled]{opacity:.5;cursor:not-allowed}
.np-btn-ghost{background:#f5f9ff;color:#0877ff;border-color:#e4edf9}
.np-btn-ghost:hover{background:#eaf2ff}
.np-btn-danger{background:#fff1f2;color:#dc2626;border-color:#fecdd3}
.np-btn-sm{padding:6px 12px;font-size:12px;border-radius:9px}
.np-choice{position:relative;display:block;cursor:pointer;border:1.5px solid #e4edf9;border-radius:14px;padding:14px;background:#fff;transition:border-color .15s,transform .15s,box-shadow .15s}
.np-choice:hover{border-color:#9cc4ff;transform:translateY(-1px)}
.np-choice input{position:absolute;opacity:0;pointer-events:none}
.np-choice.is-selected{border-color:#0877ff;background:linear-gradient(135deg,rgba(8,119,255,.08),rgba(8,119,255,.02));box-shadow:0 0 0 3px rgba(8,119,255,.12)}
.np-choice.is-disabled{opacity:.45;cursor:not-allowed;transform:none}
.np-choice.is-dim{opacity:.55}
.np-choice-title{font-size:14px;font-weight:800;color:#0b124c}
.np-choice-sub{font-size:12px;color:#6d7d9f;margin-top:3px}
.np-choice-price{font-size:14px;font-weight:800;color:#0877ff;margin-top:6px;white-space:nowrap}
.np-pack{--pack-bg:#fff;--pack-body:linear-gradient(135deg,#f3ad78,#c9682f);--pack-glow:rgba(233,138,70,.5);--pack-tint:rgba(233,138,70,.12)}
.np-pack--silver{--pack-body:linear-gradient(135deg,#b9c8dc,#6f86a6);--pack-glow:rgba(111,134,166,.45);--pack-tint:rgba(120,150,190,.13)}
.np-pack--gold{--pack-body:linear-gradient(135deg,#ffd54f,#f0a500);--pack-glow:rgba(255,184,0,.55);--pack-tint:rgba(255,193,7,.15)}
.np-pack--diamond{--pack-body:linear-gradient(135deg,#8b5cf6,#3b82f6 60%,#22d3ee);--pack-glow:rgba(139,92,246,.55);--pack-tint:rgba(139,92,246,.14)}
.np-choice.np-pack{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 10px 14px;overflow:hidden;background:linear-gradient(135deg,var(--pack-bg) 40%,var(--pack-tint))}
.np-choice.np-pack.is-selected{background:linear-gradient(135deg,var(--pack-bg) 30%,var(--pack-tint));box-shadow:0 0 0 3px rgba(8,119,255,.14),0 12px 24px -14px var(--pack-glow)}
.np-pack:has(input:focus-visible){outline:2px solid #0877ff;outline-offset:2px}
.np-pack-icon{position:absolute;left:-10px;bottom:-14px;font-size:68px;line-height:1;background:var(--pack-body);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.2;transform:rotate(14deg);transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s ease;pointer-events:none}
.np-pack:hover .np-pack-icon{opacity:.28;transform:rotate(6deg) scale(1.05)}
.np-pack.is-selected .np-pack-icon{opacity:.38;transform:rotate(4deg) scale(1.12)}
.np-pack--diamond::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-100%);animation:np-pack-shine 3.2s ease-in-out infinite}
.np-pack-title,.np-pack-price{position:relative;z-index:1}
.np-pack-title{font-size:clamp(15px,4.2vw,18px);font-weight:800;line-height:1.25;color:#0b124c;text-wrap:balance}
.np-pack-price{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:999px;background:rgba(8,119,255,.1);color:#0877ff;font-size:12px;font-weight:700;white-space:nowrap}
.np-pack-badge{position:absolute;z-index:3;top:0;right:0;padding:2px 8px;border-radius:0 0 0 8px;background:linear-gradient(135deg,#ff6b6b,#e53935);color:#fff;font-size:10px;font-weight:800;line-height:1.4;white-space:nowrap}
.np-pack-qty{position:relative;z-index:1;display:flex;align-self:flex-end;align-items:center;gap:10px;margin:16px 0 -6px}
.np-pack-qty-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;border:1.5px solid #cfe0f7;background:#fff;color:#0877ff;font-size:11px;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.np-pack-qty-btn::after{content:"";position:absolute;inset:-5px}
.np-pack-qty-btn:hover:not(:disabled){background:#0877ff;border-color:#0877ff;color:#fff}
.np-pack-qty-btn:disabled{opacity:.35;cursor:not-allowed}
.np-pack-qty-btn:focus-visible{outline:2px solid #0877ff;outline-offset:2px}
.np-pack-qty-val{min-width:20px;font-size:15px;font-weight:800;color:#0b124c;font-variant-numeric:tabular-nums}
.np-pack.is-selected[data-qty]::before{content:"×" attr(data-qty);position:absolute;z-index:3;top:0;left:0;padding:2px 8px;border-radius:0 0 8px 0;background:#0877ff;color:#fff;font-size:11px;font-weight:800;line-height:1.4}
.np-tip{position:relative;display:inline-flex}
.np-tip-btn{display:inline-grid;place-items:center;width:28px;height:28px;border:0;border-radius:999px;background:none;color:#6d7d9f;font-size:17px;cursor:pointer;transition:color .15s,background-color .15s}
.np-tip-btn:hover,.np-tip-btn[aria-expanded="true"]{color:#0877ff;background:rgba(8,119,255,.08)}
.np-tip-btn:focus-visible{outline:2px solid #0877ff;outline-offset:2px}
.np-tip-body{position:absolute;z-index:30;top:calc(100% + 8px);right:0;width:280px;max-width:calc(100vw - 48px);padding:10px 12px;border-radius:10px;background:#0b124c;color:#fff;font-size:12.5px;font-weight:500;line-height:1.5;box-shadow:0 10px 24px rgba(11,18,76,.25)}
.np-tip-body::before{content:"";position:absolute;top:-5px;right:10px;width:10px;height:10px;background:inherit;transform:rotate(45deg)}
@keyframes np-pack-shine{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media (prefers-reduced-motion: reduce){.np-pack-icon{transition:none}.np-pack--diamond::after{animation:none;display:none}}
.np-kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed #e4edf9;font-size:13px}
.np-kv:last-child{border-bottom:none}
.np-kv-k{color:#6d7d9f}
.np-kv-v{font-weight:700;color:#0b124c;text-align:right;word-break:break-all}
.np-pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
.np-pill-ok{background:#dcfce7;color:#15803d}
.np-pill-wait{background:#fef3c7;color:#b45309}
.np-pill-bad{background:#fee2e2;color:#b91c1c}
.np-flash{border-radius:12px;padding:12px 14px;font-size:13px;font-weight:600}
.np-flash-ok{background:#dcfce7;color:#15803d}
.np-flash-bad{background:#fee2e2;color:#b91c1c}
.np-spinner{width:38px;height:38px;border:4px solid #e4edf9;border-top-color:#0877ff;border-radius:999px;animation:np-spin 1s linear infinite;margin:0 auto}
@keyframes np-spin{to{transform:rotate(360deg)}}
.np-copy{font-size:11px;font-weight:800;color:#0877ff;background:#f5f9ff;border:1px solid #e4edf9;border-radius:8px;padding:3px 9px;cursor:pointer}
.np-balance{background:linear-gradient(135deg,#0877ff,#6fb0ff);color:#fff;border-radius:16px;padding:18px 20px;box-shadow:0 12px 30px rgba(8,119,255,.25)}
.np-balance-label{font-size:12px;font-weight:600;opacity:.85}
.np-balance-value{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:4px}
.np-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(8,119,255,.1);color:#0877ff;font-size:18px;flex-shrink:0}
.np-title{font-size:24px;font-weight:800;letter-spacing:-.02em;color:#0b124c}
.np-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#6d7d9f}
.np-back:hover{color:#0877ff}

/* ---- Stepper (nạp NEO) ---------------------------------------------------------------- */
.np-stepper{display:flex;align-items:center;margin-bottom:16px}
.np-stepper-item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#6d7d9f;background:none;border:0;padding:0;cursor:default;white-space:nowrap}
.np-stepper-item .np-step{background:#e4edf9;color:#6d7d9f;flex-shrink:0}
.np-stepper-item.is-active{color:#0b124c}
.np-stepper-item.is-active .np-step{background:#0877ff;color:#fff}
.np-stepper-item.is-done{cursor:pointer;color:#0877ff}
.np-stepper-item.is-done .np-step{background:#0877ff;color:#fff}
.np-stepper-item.is-done:hover{color:#0b124c}
.np-stepper-item:focus-visible{outline:2px solid #0877ff;outline-offset:3px;border-radius:999px}
.np-stepper-line{flex:1;height:2px;background:#e4edf9;margin:0 10px;border-radius:2px}
.np-stepper-line.is-done{background:#0877ff}
@media (max-width:640px){.np-stepper-item:not(.is-active) .np-stepper-label{display:none}}
.np-step-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid #eef3fb;padding-top:16px;margin-top:16px}
.np-field-error{font-size:12px;color:#dc2626;margin-top:4px}
.np-swal{border-radius:16px;font-family:inherit}
.np-swal .swal2-title{font-size:18px;font-weight:800;color:#0b124c}
.np-swal .swal2-html-container{font-size:14px;color:#283466;line-height:1.5}
.np-swal .swal2-actions{gap:10px}

html.dark .np-card{background:#141a2e;border-color:#252d4a;box-shadow:0 8px 28px rgba(0,0,0,.35)}
html.dark .np-card-head{border-bottom-color:#252d4a;color:#e6ecfb}
html.dark .np-step{background:#6fb0ff;color:#0b1020}
html.dark .np-muted{color:#a3b1d3}
html.dark .np-label{color:#a3b1d3}
html.dark .np-field{background:#0f1630;border-color:#252d4a;color:#e6ecfb}
html.dark .np-field:focus{border-color:#6fb0ff;box-shadow:0 0 0 3px rgba(111,176,255,.18)}
html.dark .np-btn-primary{background:#6fb0ff;color:#0b1020}
html.dark .np-btn-primary:hover{background:#9ccaff}
html.dark .np-btn-ghost{background:#1b2340;color:#6fb0ff;border-color:#252d4a}
html.dark .np-btn-ghost:hover{background:#222b4c}
html.dark .np-btn-danger{background:rgba(220,38,38,.12);color:#f87171;border-color:rgba(220,38,38,.3)}
html.dark .np-choice{background:#141a2e;border-color:#252d4a}
html.dark .np-choice:hover{border-color:#6fb0ff}
html.dark .np-choice.is-selected{border-color:#6fb0ff;background:linear-gradient(135deg,rgba(111,176,255,.16),rgba(111,176,255,.04));box-shadow:0 0 0 3px rgba(111,176,255,.16)}
html.dark .np-choice-title{color:#e6ecfb}
html.dark .np-choice-sub{color:#a3b1d3}
html.dark .np-choice-price{color:#6fb0ff}
html.dark .np-pack{--pack-bg:#141a2e}
html.dark .np-pack:has(input:focus-visible){outline-color:#6fb0ff}
html.dark .np-pack--diamond::after{background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%)}
html.dark .np-pack-title{color:#e6ecfb}
html.dark .np-pack-price{background:rgba(111,176,255,.16);color:#6fb0ff}
html.dark .np-pack-qty-btn{background:#1b2340;border-color:#252d4a;color:#6fb0ff}
html.dark .np-pack-qty-btn:hover:not(:disabled){background:#6fb0ff;border-color:#6fb0ff;color:#0b1020}
html.dark .np-pack.is-selected[data-qty]::before{background:#6fb0ff;color:#0b1020}
html.dark .np-pack-qty-val{color:#e6ecfb}
html.dark .np-tip-btn{color:#a3b1d3}
html.dark .np-tip-btn:hover,html.dark .np-tip-btn[aria-expanded="true"]{color:#6fb0ff;background:rgba(111,176,255,.12)}
html.dark .np-tip-body{background:#e6ecfb;color:#0b1020;box-shadow:0 10px 24px rgba(0,0,0,.45)}
html.dark .np-kv{border-bottom-color:#252d4a}
html.dark .np-kv-k{color:#a3b1d3}
html.dark .np-kv-v{color:#e6ecfb}
html.dark .np-pill-ok{background:rgba(34,197,94,.18);color:#4ade80}
html.dark .np-pill-wait{background:rgba(245,158,11,.18);color:#fbbf24}
html.dark .np-pill-bad{background:rgba(239,68,68,.18);color:#f87171}
html.dark .np-flash-ok{background:rgba(34,197,94,.16);color:#4ade80}
html.dark .np-flash-bad{background:rgba(239,68,68,.16);color:#f87171}
html.dark .np-spinner{border-color:#252d4a;border-top-color:#6fb0ff}
html.dark .np-copy{background:#1b2340;color:#6fb0ff;border-color:#252d4a}
html.dark .np-stepper-item{color:#a3b1d3}
html.dark .np-stepper-item .np-step{background:#252d4a;color:#a3b1d3}
html.dark .np-stepper-item.is-active{color:#e6ecfb}
html.dark .np-stepper-item.is-active .np-step{background:#6fb0ff;color:#0b1020}
html.dark .np-stepper-item.is-done{color:#6fb0ff}
html.dark .np-stepper-item.is-done .np-step{background:#6fb0ff;color:#0b1020}
html.dark .np-stepper-item.is-done:hover{color:#e6ecfb}
html.dark .np-stepper-line{background:#252d4a}
html.dark .np-stepper-line.is-done{background:#6fb0ff}
html.dark .np-step-nav{border-top-color:#252d4a}
html.dark .np-field-error{color:#f87171}
html.dark .np-swal{background:#141a2e}
html.dark .np-swal .swal2-title{color:#e6ecfb}
html.dark .np-swal .swal2-html-container{color:#a3b1d3}
html.dark .np-balance{background:linear-gradient(135deg,#1f4fd6,#6fb0ff);box-shadow:0 12px 30px rgba(0,0,0,.4)}
html.dark .np-icon{background:rgba(111,176,255,.14);color:#6fb0ff}
html.dark .np-title{color:#e6ecfb}
html.dark .np-back{color:#a3b1d3}
html.dark .np-back:hover{color:#6fb0ff}
html.dark .g-recaptcha{filter:invert(.9) hue-rotate(180deg)}

/* ---- Cài đặt tài khoản (/account) ---------------------------------------------------- */
.np-avatar{position:relative;display:inline-block;width:112px;height:112px;border-radius:999px;padding:0;border:0;background:none;cursor:pointer;box-shadow:0 0 0 4px #fff,0 8px 24px rgba(31,94,178,.16)}
.np-avatar img{width:100%;height:100%;border-radius:999px;object-fit:cover;display:block}
.np-avatar-edit{position:absolute;right:2px;bottom:2px;display:grid;place-items:center;width:32px;height:32px;border-radius:999px;background:#0877ff;color:#fff;font-size:13px;box-shadow:0 0 0 3px #fff;transition:transform .15s,background-color .15s}
.np-avatar:hover .np-avatar-edit{transform:scale(1.08);background:#0b124c}
.np-avatar:focus-visible{outline:2px solid #0877ff;outline-offset:4px}
.np-progress{height:10px;border-radius:999px;background:#e4edf9;overflow:hidden}
.np-progress-bar{height:100%;border-radius:999px;background:#dc2626;transition:width .4s cubic-bezier(.22,.61,.36,1),background-color .3s}
.np-progress[data-level="medium"] .np-progress-bar{background:#f59e0b}
.np-progress[data-level="strong"] .np-progress-bar{background:#16a34a}
[data-security-label][data-level="weak"]{color:#dc2626}
[data-security-label][data-level="medium"]{color:#b45309}
[data-security-label][data-level="strong"]{color:#15803d}
.np-check-list{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#6d7d9f}
.np-check-list li{display:flex;align-items:center;gap:8px}
.np-check-list li i{color:#cbd5e1;font-size:14px}
.np-check-list li.is-ok{color:#0b124c;font-weight:600}
.np-check-list li.is-ok i{color:#16a34a}
.np-table-wrap{overflow-x:auto}
.np-table{width:100%;border-collapse:collapse;font-size:13px}
.np-table th{padding:10px 14px;text-align:left;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#6d7d9f;background:#f5f9ff;border-bottom:1px solid #eef3fb;white-space:nowrap}
.np-table td{padding:12px 14px;border-bottom:1px solid #eef3fb;color:#0b124c;vertical-align:middle}
.np-table tr:last-child td{border-bottom:0}
.np-table tbody tr:nth-child(odd) td{background:#f7faff}
.np-table tbody tr:hover td{background:#eaf2ff}
.np-table .np-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:800}
.np-table .np-muted{font-size:12px}
html.dark .np-table th{background:#1b2340;border-bottom-color:#252d4a;color:#a3b1d3}
html.dark .np-table td{border-bottom-color:#252d4a;color:#e6ecfb}
html.dark .np-table tbody tr:nth-child(odd) td{background:#171e38}
html.dark .np-table tbody tr:hover td{background:#1f2846}
.np-tabs{display:flex;gap:4px;padding:6px 6px 0;box-shadow:inset 0 -1px 0 #eef3fb;overflow-x:auto;overflow-y:hidden}
.np-tab{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border:0;border-bottom:2px solid transparent;background:none;font-size:13px;font-weight:700;color:#6d7d9f;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.np-tab:hover{color:#0877ff}
.np-tab.is-active{color:#0877ff;border-bottom-color:#0877ff}
.np-tab:focus-visible{outline:2px solid #0877ff;outline-offset:-2px;border-radius:8px}
.np-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}
.np-modal[hidden]{display:none}
.np-modal-backdrop{position:absolute;inset:0;background:rgba(11,18,76,.45);backdrop-filter:blur(3px)}
.np-modal-panel{position:relative;width:100%;max-height:calc(100vh - 32px);overflow-y:auto;background:#fff;border:1px solid #e4edf9;border-radius:18px;box-shadow:0 24px 60px rgba(11,18,76,.25);animation:np-modal-in .18s cubic-bezier(.22,.61,.36,1)}
@keyframes np-modal-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.np-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid #eef3fb}
.np-modal-title{font-size:16px;font-weight:800;color:#0b124c}
.np-modal-x{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;border:0;background:#f5f9ff;color:#6d7d9f;cursor:pointer;font-size:14px}
.np-modal-x:hover{background:#eaf2ff;color:#0877ff}
.np-modal-body{padding:18px}
body.np-modal-open{overflow:hidden}
.np-field-group{margin-bottom:14px}
.np-field-group:last-child{margin-bottom:0}
.np-btn[disabled],.np-btn.is-loading{opacity:.55;cursor:not-allowed}
.np-btn.is-loading .np-btn-spinner{display:inline-block}
.np-btn-spinner{display:none;width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:999px;animation:np-spin .8s linear infinite}
.np-btn-ghost .np-btn-spinner{border-color:#c7dcff;border-top-color:#0877ff}
@media (max-width:767px){.np-modal{align-items:flex-end;padding:0}.np-modal-panel{max-width:100%;border-radius:18px 18px 0 0;max-height:92vh;animation:np-modal-up .2s cubic-bezier(.22,.61,.36,1)}@keyframes np-modal-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}}
@media (prefers-reduced-motion: reduce){.np-modal-panel{animation:none}.np-progress-bar{transition:none}}

html.dark .np-avatar{box-shadow:0 0 0 4px #141a2e,0 8px 24px rgba(0,0,0,.4)}
html.dark .np-avatar-edit{background:#6fb0ff;color:#0b1020;box-shadow:0 0 0 3px #141a2e}
html.dark .np-avatar:hover .np-avatar-edit{background:#9ccaff}
html.dark .np-progress{background:#252d4a}
html.dark .np-progress-bar{background:#f87171}
html.dark .np-progress[data-level="medium"] .np-progress-bar{background:#fbbf24}
html.dark .np-progress[data-level="strong"] .np-progress-bar{background:#4ade80}
html.dark [data-security-label][data-level="weak"]{color:#f87171}
html.dark [data-security-label][data-level="medium"]{color:#fbbf24}
html.dark [data-security-label][data-level="strong"]{color:#4ade80}
html.dark .np-check-list{color:#a3b1d3}
html.dark .np-check-list li i{color:#3b4670}
html.dark .np-check-list li.is-ok{color:#e6ecfb}
html.dark .np-check-list li.is-ok i{color:#4ade80}
html.dark .np-tabs{box-shadow:inset 0 -1px 0 #252d4a}
html.dark .np-tab{color:#a3b1d3}
html.dark .np-tab:hover,html.dark .np-tab.is-active{color:#6fb0ff}
html.dark .np-tab.is-active{border-bottom-color:#6fb0ff}
html.dark .np-modal-backdrop{background:rgba(0,0,0,.6)}
html.dark .np-modal-panel{background:#141a2e;border-color:#252d4a;box-shadow:0 24px 60px rgba(0,0,0,.6)}
html.dark .np-modal-head{border-bottom-color:#252d4a}
html.dark .np-modal-title{color:#e6ecfb}
html.dark .np-modal-x{background:#1b2340;color:#a3b1d3}
html.dark .np-modal-x:hover{background:#222b4c;color:#6fb0ff}
html.dark .np-btn-ghost .np-btn-spinner{border-color:#252d4a;border-top-color:#6fb0ff}
.np-btn:focus-within{outline:2px solid #0877ff;outline-offset:2px}
.np-modal-panel:focus{outline:none}
.np-avatar-preview{width:128px;height:128px;border-radius:999px;overflow:hidden;background:#f5f9ff;border:1px solid #e4edf9;box-shadow:0 8px 24px rgba(31,94,178,.12)}
.np-avatar-preview img{width:100%;height:100%;object-fit:cover;display:block}
html.dark .np-avatar-preview{background:#1b2340;border-color:#252d4a}
html.dark .np-btn:focus-within{outline-color:#6fb0ff}
.np-qr{display:flex;justify-content:center}
.np-qr svg{width:200px;height:200px;border-radius:12px;background:#fff;padding:8px;border:1px solid #e4edf9}
.np-secret{text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;font-weight:700;letter-spacing:.08em;color:#0b124c;word-break:break-all;margin-top:4px}
.np-recovery-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;font-weight:700;color:#0b124c}
.np-recovery-codes li{background:#f5f9ff;border:1px solid #e4edf9;border-radius:10px;padding:8px 10px;text-align:center;letter-spacing:.06em}
.np-btn-danger .np-btn-spinner{border-color:#fecdd3;border-top-color:#dc2626}
html.dark .np-qr svg{border-color:#252d4a}
html.dark .np-secret{color:#e6ecfb}
html.dark .np-recovery-codes{color:#e6ecfb}
html.dark .np-recovery-codes li{background:#1b2340;border-color:#252d4a}
.np-history{display:flex;flex-direction:column;gap:8px}
.np-history-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #e4edf9;border-radius:14px;background:#fff}
.np-history-item.is-current{border-color:#9cc4ff;background:linear-gradient(135deg,rgba(8,119,255,.06),rgba(8,119,255,.01))}
html.dark .np-history-item{background:#141a2e;border-color:#252d4a}
html.dark .np-history-item.is-current{border-color:#6fb0ff;background:linear-gradient(135deg,rgba(111,176,255,.14),rgba(111,176,255,.03))}

/* ---- Đăng nhập / đăng ký (/login, /register, /verify-phone) --------------------------- */
.np-divider{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:12px;font-weight:600;color:#6d7d9f}
.np-divider::before,.np-divider::after{content:"";flex:1;height:1px;background:#e4edf9}
.np-social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
.np-social{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;border:1px solid #d9e4f5;border-radius:12px;background:#fff;font-size:13px;font-weight:700;color:#283466;transition:border-color .15s,background-color .15s,transform .15s}
.np-social:hover{border-color:#0877ff;background:#f5f9ff;transform:translateY(-1px)}
.np-social svg{width:18px;height:18px;flex-shrink:0}
.np-social-label{display:none}
@media (min-width:420px){.np-social-label{display:inline}}
.np-check{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#283466;cursor:pointer;user-select:none}
.np-check input{width:16px;height:16px;accent-color:#0877ff;cursor:pointer}
.np-field-wrap{position:relative}
.np-field-wrap .np-field{padding-right:44px}
.np-field-eye{position:absolute;top:0;right:0;height:100%;width:44px;display:grid;place-items:center;border:0;background:none;color:#6d7d9f;cursor:pointer;font-size:14px}
.np-field-eye:hover{color:#0877ff}
.np-captcha{display:flex;justify-content:center;min-height:78px}
.np-captcha-slot{display:flex;justify-content:center;min-height:78px}
@media (max-width:380px){.np-captcha,.np-captcha-slot{transform:scale(.88);transform-origin:center top;min-height:69px}}
.np-otp-boxes{display:flex;justify-content:center;gap:8px}
.np-otp-box{flex:0 1 48px;min-width:0;width:48px;height:56px;border:1px solid #d9e4f5;border-radius:12px;background:#fff;color:#0b124c;text-align:center;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;outline:none;transition:border-color .15s,box-shadow .15s}
.np-otp-box:focus{border-color:#0877ff;box-shadow:0 0 0 3px rgba(8,119,255,.14)}
.np-otp-box:disabled{opacity:.6}
@media (max-width:380px){.np-otp-boxes{gap:6px}.np-otp-box{height:48px;font-size:20px;border-radius:10px}}
.np-auth-foot{margin-top:16px;text-align:center;font-size:13px;color:#6d7d9f}
.np-auth-foot a{font-weight:700;color:#0877ff}
.np-auth-foot a:hover{text-decoration:underline}
html.dark .np-divider{color:#a3b1d3}
html.dark .np-divider::before,html.dark .np-divider::after{background:#252d4a}
html.dark .np-social{background:#0f1630;border-color:#252d4a;color:#e6ecfb}
html.dark .np-social:hover{border-color:#6fb0ff;background:#1b2340}
html.dark .np-check{color:#e6ecfb}
html.dark .np-check input{accent-color:#6fb0ff}
html.dark .np-field-eye{color:#a3b1d3}
html.dark .np-otp-box{background:#0f1630;border-color:#252d4a;color:#e6ecfb}
html.dark .np-otp-box:focus{border-color:#6fb0ff;box-shadow:0 0 0 3px rgba(111,176,255,.18)}
html.dark .np-field-eye:hover{color:#6fb0ff}
html.dark .np-auth-foot{color:#a3b1d3}
html.dark .np-auth-foot a{color:#6fb0ff}
.np-faq-head-icon{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:999px;background:rgba(8,119,255,.1);color:#0877ff;font-size:12px;flex-shrink:0}
.np-faq-list{padding-top:2px;padding-bottom:2px}
.np-faq{border-bottom:1px solid #eef3fb}
.np-faq:last-child{border-bottom:0}
.np-faq-q{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 0;cursor:pointer;font-size:15px;font-weight:700;color:#0b124c;list-style:none}
.np-faq-q::-webkit-details-marker{display:none}
.np-faq-q:hover{color:#0877ff}
.np-faq-icon{color:#7283a6;font-size:14px;padding-top:3px;transition:transform .2s ease}
.np-faq[open] .np-faq-icon{transform:rotate(135deg)}
.np-faq-a{padding-bottom:16px;font-size:14px;line-height:1.7;color:#283466}
.np-faq-a p+p,.np-faq-a ol,.np-faq-a ol+p{margin-top:10px}
.np-faq-a ol{padding-left:20px;list-style:decimal}
.np-faq-a li+li{margin-top:6px}
.np-faq-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.np-faq-links .np-btn{gap:6px}
.np-faq-channels{display:grid;gap:12px;margin-top:14px}
.np-faq-channel{display:flex;align-items:center;gap:10px}
.np-faq-channel-body{display:flex;flex-direction:column;line-height:1.4;min-width:0}
.np-faq-channel-label{font-size:12px;font-weight:700;color:#7283a6}
.np-faq-channel-body a{color:#0877ff;font-weight:700;word-break:break-word}
.np-faq-channel-body a:hover{text-decoration:underline}
.np-faq-channel-body span:last-child{font-weight:700;color:#0b124c}
html.dark .np-faq-head-icon{background:rgba(111,176,255,.14);color:#6fb0ff}
html.dark .np-faq{border-bottom-color:#252d4a}
html.dark .np-faq-q{color:#e6ecfb}
html.dark .np-faq-q:hover{color:#6fb0ff}
html.dark .np-faq-icon{color:#a3b1d3}
html.dark .np-faq-a{color:#a3b1d3}
html.dark .np-faq-channel-label{color:#a3b1d3}
html.dark .np-faq-channel-body a{color:#6fb0ff}
html.dark .np-faq-channel-body span:last-child{color:#e6ecfb}