/* Web con: popup Mua key (live/site-buy.php + site-buy.mjs). Tự đủ, dùng được cả ở trang LIVE lẫn trang nhập key. 2026-11-10, Claude */
.sb-dlg,.sb-chip{--sb-a:#2563eb;--sb-on:#fff;--sb-bg:#fff;--sb-ink:#0f172a;--sb-mut:#55627a;--sb-line:#dfe5ee;--sb-soft:#f3f6fa;--sb-ok:#047857;--sb-bad:#b91c1c;--sb-warn:#fff7e6;--sb-warn-ink:#7a4a00}
:root[data-theme="dark"] .sb-dlg,:root[data-theme="dark"] .sb-chip{--sb-bg:#111a2e;--sb-ink:#e8eef8;--sb-mut:#a3b1c6;--sb-line:#27344d;--sb-soft:#0b1220;--sb-ok:#34d399;--sb-bad:#fca5a5;--sb-warn:#2a2210;--sb-warn-ink:#f5d38a}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .sb-dlg,:root:not([data-theme]) .sb-chip{--sb-bg:#111a2e;--sb-ink:#e8eef8;--sb-mut:#a3b1c6;--sb-line:#27344d;--sb-soft:#0b1220;--sb-ok:#34d399;--sb-bad:#fca5a5;--sb-warn:#2a2210;--sb-warn-ink:#f5d38a}}
.sb-dlg{position:fixed;inset:0;margin:auto;width:min(460px,calc(100vw - 24px));height:fit-content;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--sb-line);border-radius:16px;overflow:hidden;background:var(--sb-bg);color:var(--sb-ink);font:400 15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;box-shadow:0 24px 70px rgba(15,23,42,.3);text-align:left}
.sb-dlg:not([open]){display:none}
.sb-dlg[open]{display:flex;flex-direction:column}
.sb-dlg::backdrop{background:rgba(8,13,24,.62)}
html:has(.sb-dlg[open]){overflow:hidden}
.sb-dlg *{box-sizing:border-box}
.sb-dlg [hidden]{display:none!important}
.sb-head{flex:none;display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--sb-line)}
.sb-head h2{flex:1;min-width:0;margin:0;font:700 17px/1.3 inherit;color:var(--sb-ink);letter-spacing:0;text-transform:none}
.sb-x{flex:none;width:36px;height:36px;border:0;border-radius:10px;background:var(--sb-soft);color:var(--sb-ink);font:400 22px/1 system-ui,sans-serif;cursor:pointer}
.sb-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px}
.sb-body section>*:first-child{margin-top:0}
.sb-lead{margin:0 0 12px;color:var(--sb-mut);font-size:14.5px}
.sb-hint{margin:10px 0 0;color:var(--sb-mut);font-size:13px}
.sb-err{margin:0 0 12px;padding:10px 12px;border-radius:10px;border:1px solid var(--sb-bad);color:var(--sb-bad);background:transparent;font-size:14px;font-weight:600}
.sb-pkgs{display:grid;gap:8px}
.sb-pkg{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 14px;border:2px solid var(--sb-line);border-radius:12px;cursor:pointer}
.sb-pkg input{position:absolute;opacity:0;pointer-events:none}
.sb-pkg-in{flex:1;min-width:0}
.sb-pkg-in b{display:inline-block;padding:1px 9px;border-radius:999px;background:var(--sb-soft);font-size:13px;font-weight:700;letter-spacing:.02em}
.sb-pkg.sb-pro .sb-pkg-in b{background:var(--sb-a);color:var(--sb-on)}
.sb-pkg-in small{display:block;margin-top:3px;font-size:15px;font-weight:600;color:var(--sb-ink)}
.sb-pkg strong{flex:none;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-pkg:has(input:checked){border-color:var(--sb-a);background:color-mix(in srgb,var(--sb-a) 7%,transparent)}
.sb-pkg:has(input:focus-visible){outline:2px solid var(--sb-a);outline-offset:2px}
.sb-btn{display:block;width:100%;min-height:48px;margin-top:14px;padding:12px 16px;border:0;border-radius:12px;background:var(--sb-a);color:var(--sb-on);font:700 15.5px/1.2 inherit;letter-spacing:0;text-transform:none;cursor:pointer}
.sb-btn:hover{filter:brightness(.94)}
.sb-btn:disabled{opacity:.6;cursor:wait}
.sb-btn.sb-ghost{background:transparent;color:var(--sb-ink);border:1px solid var(--sb-line)}
.sb-btn:focus-visible,.sb-x:focus-visible,.sb-mini:focus-visible,.sb-link:focus-visible,.sb-tabs button:focus-visible,.sb-contact:focus-visible{outline:2px solid var(--sb-a);outline-offset:2px}
.sb-sum{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;padding:11px 14px;border-radius:12px;background:var(--sb-soft)}
.sb-sum span{font-weight:600}
.sb-sum strong{font-size:19px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sb-tabs{display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;scrollbar-width:none}
.sb-tabs::-webkit-scrollbar{display:none}
.sb-tabs button{flex:none;min-height:38px;padding:7px 13px;border:1px solid var(--sb-line);border-radius:999px;background:transparent;color:var(--sb-ink);font:600 13.5px inherit;cursor:pointer;white-space:nowrap;text-transform:none;letter-spacing:0}
.sb-tabs button[aria-selected=true]{background:var(--sb-a);border-color:var(--sb-a);color:var(--sb-on)}
.sb-qr{margin:0 0 10px;text-align:center}
.sb-qr img{display:block;width:min(220px,62vw);height:auto;aspect-ratio:1;margin:0 auto 6px;border-radius:12px;background:#fff;border:1px solid var(--sb-line)}
.sb-qr small{display:block;color:var(--sb-mut);font-size:12.5px}
.sb-row{display:flex;align-items:center;gap:10px;min-height:46px;padding:7px 0;border-bottom:1px solid var(--sb-line)}
.sb-row:last-child{border-bottom:0}
.sb-k{flex:none;width:104px;color:var(--sb-mut);font-size:13.5px}
.sb-v{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.sb-mini{flex:none;min-height:34px;padding:5px 11px;border:1px solid var(--sb-line);border-radius:9px;background:transparent;color:var(--sb-ink);font:600 13px inherit;cursor:pointer;text-transform:none;letter-spacing:0}
.sb-mini:hover{border-color:var(--sb-a)}
.sb-mtitle{margin:0 0 6px;font:700 15.5px/1.3 inherit;color:var(--sb-ink)}
.sb-text{margin:0 0 8px;padding:11px 13px;border-radius:12px;background:var(--sb-soft);white-space:pre-line;overflow-wrap:anywhere;font-size:14.5px}
.sb-note{margin:12px 0 0;padding:10px 13px;border-radius:12px;background:var(--sb-warn);color:var(--sb-warn-ink);font-size:14px;overflow-wrap:anywhere}
.sb-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 0}
.sb-foot small{color:var(--sb-mut);font-size:13px}
.sb-link{min-height:36px;padding:6px 2px;border:0;background:none;color:var(--sb-mut);font:600 13.5px inherit;text-decoration:underline;cursor:pointer;text-transform:none;letter-spacing:0}
.sb-state{text-align:center;padding:6px 4px 2px}
.sb-state h3{margin:10px 0 6px;font:700 18px/1.3 inherit;color:var(--sb-ink)}
.sb-state p{margin:0 0 8px;color:var(--sb-mut);font-size:14.5px}
.sb-code{font-size:14.5px}
.sb-code b{color:var(--sb-ink);font:700 16px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em}
.sb-reason{padding:9px 12px;border-radius:10px;background:var(--sb-soft);color:var(--sb-ink)!important;overflow-wrap:anywhere}
.sb-spin{display:inline-block;width:38px;height:38px;border-radius:50%;border:4px solid var(--sb-line);border-top-color:var(--sb-a);animation:sb-spin .9s linear infinite}
.sb-tick{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--sb-ok);color:#fff;font:700 24px/1 system-ui,sans-serif}
.sb-bad .sb-tick{background:var(--sb-bad)}
:root[data-theme="dark"] .sb-tick{color:#06281c}
.sb-key{display:flex;align-items:center;gap:10px;margin-top:10px;padding:12px 14px;border:2px dashed var(--sb-a);border-radius:12px}
.sb-key code{flex:1;min-width:0;background:none;padding:0;color:var(--sb-ink);font:700 16px/1.4 ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.sb-help{margin-top:14px;padding-top:12px;border-top:1px solid var(--sb-line);display:grid;gap:8px}
.sb-help-h{margin:0;font-size:13.5px;font-weight:600;color:var(--sb-mut)}
.sb-contact{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-height:46px;padding:10px 13px;border:1px solid var(--sb-line);border-radius:12px;color:var(--sb-ink);text-decoration:none}
.sb-contact:hover{border-color:var(--sb-a)}
.sb-contact b{font-size:14.5px}
.sb-contact small{min-width:0;color:var(--sb-mut);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-chip{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:inline-flex;align-items:center;gap:9px;max-width:calc(100vw - 24px);min-height:42px;padding:8px 16px 8px 12px;border:1px solid var(--sb-a);border-radius:999px;background:var(--sb-bg);color:var(--sb-ink);font:600 14px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;box-shadow:0 8px 26px rgba(15,23,42,.26);cursor:pointer;text-transform:none;letter-spacing:0}
.sb-chip[hidden]{display:none}
.sb-chip .sb-spin{width:18px;height:18px;border-width:3px}
.gate~.sb-chip{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.sb-drop{position:relative;display:grid;place-items:center;gap:8px;min-height:120px;margin:0 0 10px;padding:14px;border:2px dashed var(--sb-line);border-radius:12px;cursor:pointer;text-align:center;color:var(--sb-mut);font-size:14.5px;font-weight:600}
.sb-drop:hover,.sb-drop:focus-within{border-color:var(--sb-a)}
.sb-drop img{display:block;max-width:100%;max-height:240px;border-radius:8px;object-fit:contain}
.sb-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.sb-input{display:block;width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--sb-line);border-radius:10px;background:transparent;color:var(--sb-ink);font:400 15px inherit}
.sb-input:focus{outline:2px solid var(--sb-a);outline-offset:1px}
.sb-sent{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--sb-ok) 12%,transparent);color:var(--sb-ok);font-size:14px;font-weight:600;text-align:center}
@keyframes sb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sb-spin{animation-duration:2.4s}}
@media (prefers-reduced-motion:no-preference){.sb-dlg[open]{animation:sb-in .18s cubic-bezier(.2,.9,.3,1)}@keyframes sb-in{from{transform:translateY(14px);opacity:.6}}}
@media (max-width:560px){
  .sb-dlg{width:100vw;max-width:100vw;max-height:92vh;max-height:92dvh;margin:auto 0 0;border-radius:18px 18px 0 0;border-width:1px 0 0}
  .sb-body{padding:14px 14px calc(16px + env(safe-area-inset-bottom,0px))}
  .sb-k{width:92px}
}