@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{--bg:#f5f6f3;--paper:#fff;--ink:#192b29;--muted:#60706a;--line:#dce3de;--brand:#E85D04;--accent:#c44d03;--accent-soft:#fff0e4;--danger:#b53535;--ease:cubic-bezier(.22,1,.36,1);--font:'Be Vietnam Pro','Segoe UI',sans-serif;--mono:Consolas,monospace;--t1:var(--ink);--t2:var(--muted);--t3:var(--muted);--cyan:var(--accent);--red:var(--danger);--border:var(--line)}
*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);font-size:14px;line-height:1.6;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{ -webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:var(--accent);text-underline-offset:4px}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #329b80;outline-offset:4px}input:focus,select:focus{outline:3px solid #bce2d1;border-color:var(--accent)}[hidden]{display:none!important}.hp{position:absolute;left:-9999px;width:0;height:0;opacity:0}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:700}.muted{color:var(--muted)}.brand-mark{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#fff0e4;color:#18372d;font-size:23px;font-weight:800;flex-shrink:0}.portal-brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;font-size:23px;font-weight:700;letter-spacing:-1px}.portal-brand small{font-size:11px;font-weight:500;color:#b9cbc2;letter-spacing:0;display:block}.skip-link{position:fixed;top:-80px;left:16px;z-index:100;background:white;padding:12px}.skip-link:focus{top:16px}
.auth-layout{display:grid;grid-template-columns:1.05fr 1fr;min-height:100svh}.auth-story{background:#211a16;color:#f3f8f4;padding:48px clamp(32px,5vw,88px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.auth-story:after{content:'';position:absolute;right:-180px;bottom:-240px;width:650px;height:650px;border:1px solid #ffffff13;border-radius:50%;box-shadow:0 0 0 70px #ffffff04,0 0 0 140px #ffffff03;pointer-events:none}.auth-story>*{position:relative;z-index:1}.story-copy{margin:64px 0 42px;max-width:520px}.story-copy .eyebrow{color:#bedcae;margin-bottom:24px}.story-copy h1{font-size:clamp(36px,4.4vw,64px);font-weight:500;line-height:1.16;letter-spacing:-2.8px;margin-bottom:24px}.story-copy h1 em{font-style:normal;color:#c8eda7}.story-copy>p{color:#b8ccc2;max-width:390px;font-size:15px;line-height:1.9}.story-preview{margin-top:36px;max-width:390px;border:1px solid #ffffff24;border-radius:16px;padding:20px 24px;background:#ffffff05;transform:rotate(-2deg)}.preview-top{display:flex;justify-content:space-between;align-items:center;color:#c5d6ce;font-size:12px}.preview-key{font-family:var(--mono);font-size:19px;letter-spacing:3px;color:#eff8e8;margin:18px 0}.preview-bottom{display:flex;justify-content:space-between;font-size:11px;color:#bbcec4}.status-dot:before{content:'';display:inline-block;width:6px;height:6px;background:#bce398;border-radius:50%;margin-right:8px}.story-footer{font-size:11px;color:#a8c1b5;display:flex;justify-content:space-between;gap:20px}.auth-panel{display:flex;align-items:center;justify-content:center;padding:48px 32px}.auth-form-wrap{width:100%;max-width:390px;animation:enter .6s var(--ease) both}.auth-switch{display:flex;background:#e8ece7;border-radius:10px;padding:4px;margin-bottom:44px;gap:4px}.auth-switch a,.auth-switch span{flex:1;text-align:center;text-decoration:none;padding:10px;color:#56675f;font-size:12px;font-weight:600;border-radius:7px}.auth-switch .selected{background:white;color:var(--ink);box-shadow:0 2px 5px #192b2909}.auth-form-wrap h2{font-size:30px;letter-spacing:-1px;line-height:1.3;margin-bottom:10px;font-weight:600}.auth-intro{color:var(--muted);font-size:13px;margin-bottom:30px}.mf,.form-group{margin-bottom:18px}.mf label,.form-label{display:block;font-size:12px;font-weight:600;margin-bottom:8px}.mf input,.mf select,.form-input{width:100%;display:block;min-height:48px;border:1px solid #cdd7ce;border-radius:9px;padding:12px 14px;background:white;color:var(--ink);transition:border-color .18s,box-shadow .18s}.mf label input{margin-top:8px}.input-wrap{position:relative}.input-wrap .form-input{padding-right:78px}.toggle-pw{position:absolute;right:8px;top:3px;min-height:42px;min-width:54px;background:none;border:0;color:var(--muted);font-size:11px;font-weight:600}.btn,.btn-login{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:44px;border:1px solid var(--line);border-radius:9px;padding:10px 16px;font-size:12px;font-weight:600;text-decoration:none;transition:background .18s,transform .18s,box-shadow .18s;color:var(--ink);background:#fff}.btn:hover,.btn-login:hover{transform:translateY(-1px);box-shadow:0 3px 9px #211a1610}.btn:active,.btn-login:active{transform:translateY(0)}.btn-c,.btn-login{background:var(--accent);border-color:var(--accent);color:white}.btn-c:hover,.btn-login:hover{background:#a94102}.btn-login,.auth-submit{width:100%;margin-top:6px;min-height:49px}.btn-r{color:var(--danger)}.auth-help{display:flex;justify-content:flex-end;font-size:11px;margin:-6px 0 20px}.err,.error-msg{font-size:12px;color:var(--danger);margin-top:14px;white-space:pre-wrap}.err:empty{display:none}.auth-register{border-top:1px solid var(--line);margin-top:28px;padding-top:22px}.auth-register summary{cursor:pointer;font-size:12px;font-weight:500;min-height:32px}.auth-register form{margin-top:20px;animation:enter .25s var(--ease)}.auth-note{font-size:11px;color:var(--muted);margin-top:26px;line-height:1.8}.auth-note a{font-weight:600}.auth-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px;margin-top:32px;font-size:11px;color:var(--muted)}
#app{display:none;min-height:100svh;padding-left:228px}.sidebar{position:fixed;inset:0 auto 0 0;width:228px;background:#211a16;color:#f2f7f3;display:flex;flex-direction:column;padding:28px 20px;z-index:10}.sidebar .portal-brand{font-size:21px;margin:4px 8px 52px}.nav-caption{font-size:10px;color:#a6bdb1;letter-spacing:.14em;padding:0 14px;margin-bottom:14px}.side-link{display:flex;align-items:center;gap:12px;border-radius:9px;padding:13px 14px;color:#c2d0c8;text-decoration:none;min-height:48px;font-size:12px;margin-bottom:7px}.side-link.active{background:#f8dec7;color:#213d2b;font-weight:600}.side-link svg{width:19px;height:19px;flex-shrink:0}.side-link:hover:not(.active){background:#ffffff0a}.side-bottom{margin-top:auto}.side-note{border:1px solid #ffffff20;border-radius:12px;margin:24px 4px;padding:16px;font-size:11px;color:#b9cec2;line-height:1.8}.side-note strong{display:block;color:#e6f0e9;margin-bottom:5px;font-weight:500}.side-bottom button{width:100%;background:transparent;color:#d3e2d8;border:1px solid #ffffff28}.top{height:86px;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 40px;border-bottom:1px solid var(--line);background:#ffffff70}.breadcrumb{font-size:12px;color:var(--muted)}.breadcrumb span{margin:0 10px;color:#9aa69e}.breadcrumb b{font-weight:500;color:var(--ink)}.user-chip{display:flex;align-items:center;gap:12px;min-width:0}.avatar{background:#e4ecdf;color:#385945;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;font-weight:600;font-size:12px}.user-chip small{font-size:10px;color:var(--muted);display:block}.user-chip #who{display:block;font-size:11px;max-width:260px;overflow:hidden;text-overflow:ellipsis}.content{max-width:1450px;margin:0 auto;padding:40px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}.page-heading .eyebrow{color:var(--muted);margin-bottom:8px}.page-heading h1{font-size:30px;letter-spacing:-1.2px;font-weight:600;line-height:1.4}.page-heading p{font-size:12px;color:var(--muted);margin-top:8px}.page-heading .btn{min-height:47px}.stat-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px;margin-bottom:32px}.stat-card{border:1px solid var(--line);background:white;padding:24px;border-radius:13px;position:relative}.stat-card.wallet{background:#fff3e9;border-color:#ecd2ba}.stat-label{font-size:11px;color:#52685a;font-weight:500;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}.stat-label svg{width:18px;height:18px}.stat-value{font-size:29px;letter-spacing:-1px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3}.stat-card p{font-size:10px;color:var(--muted);margin-top:10px}.table-card{border:1px solid var(--line);border-radius:14px;background:white;overflow:hidden}.table-heading{padding:24px 24px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}.table-heading h2{font-size:16px;font-weight:600;letter-spacing:-.3px}.table-heading p{font-size:11px;color:var(--muted);margin-top:4px}.toolbar{display:flex;gap:12px;padding:0 24px 22px;flex-wrap:wrap}.search-field{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:9px;padding:0 12px;flex:1;min-width:190px}.search-field svg{width:17px;color:var(--muted)}.search-field input{border:0;background:transparent;width:100%;padding:11px 0;min-height:44px;font-size:12px;outline-offset:3px}.toolbar select{border:1px solid var(--line);border-radius:9px;background:white;padding:10px 12px;font-size:12px;color:var(--ink);min-height:44px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{background:#f6f8f5;font-size:10px;font-weight:500;color:var(--muted);padding:14px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}td{padding:19px 24px;border-bottom:1px solid #edf0ec;font-size:12px}tbody tr:hover{background:#fafcf9}.key-code{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.4px}.key-note{font-size:10px;color:var(--muted);margin-top:5px;max-width:200px;overflow:hidden;text-overflow:ellipsis}.status-pill{display:inline-flex;align-items:center;gap:7px;border-radius:20px;background:#eef3ef;color:#51685a;padding:5px 10px;font-size:10px}.status-pill:before{content:'';width:5px;height:5px;background:currentColor;border-radius:50%}.status-pill.active{background:#e7f5ed;color:#256a47}.status-pill.expired,.status-pill.suspended{background:#fceeed;color:#a13c3a}.status-pill.not_activated{background:#fff4dd;color:#805c1d}.copy-btn{font-size:10px;min-height:36px;padding:7px 12px}.table-footer{padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted)}#seller-key-pages{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#seller-key-pages .btn{font-size:11px;min-height:38px;padding:7px 11px}#seller-key-update{font-size:10px;width:100%;text-align:right;color:var(--muted)}.empty-cell{text-align:center;padding:64px 24px;white-space:normal}.empty-cell strong{display:block;font-size:15px;font-weight:500;margin:10px 0}.empty-cell p{font-size:12px;color:var(--muted)}.page-foot{display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted);margin-top:24px}.overlay{display:none;position:fixed;inset:0;background:#10251ed0;z-index:50;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(4px)}.overlay.open{display:flex;animation:fade .18s ease}.modal{background:var(--paper);border:1px solid var(--line);border-radius:18px;width:min(480px,100%);max-height:90svh;overflow:auto;padding:28px;box-shadow:0 32px 90px #0003;animation:enter .3s var(--ease)}.modal .mf label{font-size:12px}.modal h2{font-size:20px;font-weight:600;letter-spacing:-.5px}.price{font-size:28px;font-weight:600;letter-spacing:-1px;background:#edf4e8;border:1px solid #d8e7cd;padding:16px;border-radius:10px;color:#28583a}.price:before{content:'Thanh toán dự kiến';display:block;font-size:11px;font-weight:400;letter-spacing:0;color:var(--muted);margin-bottom:4px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#183d30;color:white;padding:12px 20px;border-radius:10px;font-size:12px;z-index:100;box-shadow:0 6px 30px #0002;max-width:90vw;pointer-events:none}.toast:empty{display:none}.toast:not(:empty){animation:fade .2s ease}.screen-enter{animation:enter .45s var(--ease) both}.modal .duration-preset[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes fade{from{opacity:0}to{opacity:1}}

@media(max-width:1100px){#app{padding-left:192px}.sidebar{width:192px;padding:24px 14px}.content{padding:28px}.top{padding:20px 28px}.stat-value{font-size:24px}td,th{padding-left:18px;padding-right:18px}.story-copy h1{font-size:46px}}
@media(max-width:800px){.auth-layout{grid-template-columns:1fr}.auth-story{padding:24px 28px}.story-copy,.story-footer{display:none}.auth-panel{padding:32px 24px}.auth-switch{margin-bottom:30px}.auth-form-wrap{max-width:430px}#app{padding-left:0}.sidebar{position:relative;width:100%;padding:16px 20px;flex-direction:row;align-items:center;gap:16px}.sidebar .portal-brand{margin:0;font-size:19px}.sidebar .portal-brand small,.nav-caption,.side-note,.sidebar>.side-link,.side-bottom{display:none}.sidebar .side-mobile{display:block;margin-left:auto;font-size:11px;color:#d1e5d7;text-decoration:none}.top{height:auto;min-height:68px;padding:16px 22px}.content{padding:28px 20px}.stat-grid{gap:12px}.stat-card{padding:18px}.stat-value{font-size:23px}.stat-card p{font-size:10px}.page-heading h1{font-size:27px}.page-heading .btn{font-size:11px}.user-chip #who{max-width:200px}.table-heading,.toolbar{padding-left:18px;padding-right:18px}.page-foot span:last-child{display:none}}
@media(min-width:801px){.side-mobile,.mobile-logout{display:none}}
@media(max-width:550px){.stat-grid{grid-template-columns:1fr 1fr}.stat-card.wallet{grid-column:1/-1}.wallet .stat-value{font-size:32px}.wallet .stat-label{margin-bottom:8px}.page-heading{align-items:flex-start}.page-heading h1{font-size:25px}.page-heading .btn{padding:10px 12px;white-space:nowrap}.page-heading p{max-width:220px}.breadcrumb{display:none}.top{justify-content:flex-end}.content{padding:24px 16px}.stat-card{padding:18px}.stat-value{font-size:25px}.table-heading{align-items:flex-start}.table-heading p{max-width:200px}.toolbar{gap:8px}.search-field{flex-basis:100%}.toolbar select{flex:1}.table-footer{padding:16px}.auth-panel{padding-top:28px}.auth-form-wrap h2{font-size:27px}.auth-bottom{margin-top:24px}.page-foot{line-height:1.8}.modal{padding:22px}.overlay{padding:12px}.table-heading .btn{padding:8px 10px;font-size:11px}}
@media(max-width:550px){.table-scroll{overflow:visible}table{white-space:normal}thead{display:none}tbody{display:block;padding:0 16px}tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:10px;margin-bottom:14px;overflow:hidden}td{display:block;border:0;padding:9px 14px;font-size:12px;overflow-wrap:anywhere}td[data-label]:before{content:attr(data-label);display:block;font-size:10px;color:var(--muted);margin-bottom:5px}td:first-child{grid-column:1/-1;padding-top:16px;border-bottom:1px solid #edf0ec;padding-bottom:12px}.key-code{font-size:13px}td:first-child:before{display:none}td:last-child{padding-bottom:16px;display:flex;align-items:center;justify-content:flex-start}.copy-btn{min-height:44px;width:100%}.empty-cell{grid-column:1/-1;padding:32px 16px!important;border:0!important}.table-footer{border-top:1px solid var(--line)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
.seller-key-actions .btn+.btn{margin-left:8px}.seller-reset-dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:28px;width:min(460px,calc(100% - 32px));box-shadow:0 24px 70px #10251e33}.seller-reset-dialog::backdrop{background:#10251eb0}.seller-reset-dialog h2{font-size:21px;font-weight:600;margin-bottom:18px}.seller-reset-dialog p{font-size:13px;line-height:1.8;margin:12px 0;overflow-wrap:anywhere}.reset-dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.seller-reset-dialog{margin:auto;max-height:calc(100svh - 40px);overflow:auto}.seller-key-actions .btn{white-space:nowrap}
@media(max-width:550px){td.seller-key-actions{grid-column:1/-1;gap:8px}.seller-key-actions .btn{width:auto;flex:1}.seller-key-actions .btn+.btn{margin-left:0}}