:root{--bg:#f6f3fb;--panel:#fff;--ink:#1d1033;--mut:#6b6086;--line:#e3dcf1;--acc:#d81b5c;--acc-ink:#fff;--ok:#16794c;--warn:#a85d00;--bad:#c0262d;--soft:#f0eaf9;--chart:#7c4dff;--shadow:0 1px 2px rgba(29,16,51,.06),0 6px 24px rgba(29,16,51,.06);color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#130c22;--panel:#1f1534;--ink:#f1ecfb;--mut:#a99dc6;--line:#37294f;--soft:#2a1d42;--chart:#a68bff;--ok:#4cc38a;--warn:#f0a53a;--bad:#ff6b73;--shadow:none;color-scheme:dark}}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,"Segoe UI",Roboto,sans-serif}
h1{font-size:24px;margin:0;letter-spacing:-.01em}h2{font-size:17px;margin:0 0 12px}h3{font-size:15px;margin:0 0 8px}
p{margin:0}.mut{color:var(--mut)}.small{font-size:13px}.right{text-align:right}.nowrap{white-space:nowrap}
a{color:var(--acc)}
button,input,select,textarea{font:inherit;color:inherit}
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100%}
nav.side{background:var(--panel);border-right:1px solid var(--line);padding:18px 12px;position:sticky;top:0;height:100dvh;overflow:auto;display:flex;flex-direction:column;gap:2px}
nav.side .brand{font-weight:800;font-size:18px;padding:4px 10px 14px;letter-spacing:-.02em}
nav.side a{display:block;padding:9px 12px;border-radius:10px;color:var(--ink);text-decoration:none}
nav.side a:hover{background:var(--soft)}nav.side a.on{background:var(--acc);color:var(--acc-ink);font-weight:600}
nav.side .grow{flex:1}
main{padding:24px clamp(16px,3vw,36px) 60px;min-width:0;max-width:1300px}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}.top .grow{flex:1}
.btn.menu-btn{display:none}
@media(max-width:860px){.shell{grid-template-columns:1fr}nav.side{position:fixed;inset:0 auto 0 0;width:240px;z-index:20;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow)}nav.side.open{transform:none}.btn.menu-btn{display:inline-flex}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.kpi .v{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.kpi .l{color:var(--mut);font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);cursor:pointer;text-decoration:none;color:var(--ink);min-height:38px}
.btn:hover{background:var(--soft)}.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 45%,transparent);outline-offset:1px}
.btn.p{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:600}.btn.p:hover{filter:brightness(1.08)}
.btn.d{color:var(--bad)}.btn.sm{padding:4px 10px;min-height:30px;font-size:13px}.btn:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input[type=text],input[type=email],input[type=number],input[type=password],input[type=date],input[type=search],select,textarea{padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);width:100%;min-height:38px}
textarea{min-height:80px;resize:vertical}
label.f{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:14px}label.f .hint{font-weight:400;color:var(--mut);font-size:13px}
label.chk{display:flex;gap:8px;align-items:center;font-weight:500}
label.chk input{width:18px;height:18px;accent-color:var(--acc)}
table{border-collapse:collapse;width:100%}th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700;white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl{overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.tbl table{min-width:640px}.tbl tr:last-child td{border-bottom:0}
.pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:700;background:var(--soft);color:var(--mut);white-space:nowrap}
.pill.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}.pill.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}.pill.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--mut);margin-right:6px}.dot.on{background:var(--ok)}.dot.off{background:var(--bad)}
.tabs{display:flex;gap:6px;flex-wrap:wrap}.tabs .btn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chart{width:100%;height:auto;display:block}.chart text{fill:var(--mut);font-size:11px}.chart .bar{fill:var(--chart)}.chart .bar:hover{opacity:.75}.chart line{stroke:var(--line)}
.thumbs{align-items:start;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.thumb{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.thumb .img{position:relative;overflow:hidden;aspect-ratio:2/3;background:repeating-conic-gradient(var(--soft) 0 25%,transparent 0 50%) 0 0/16px 16px;display:grid;place-items:center}
.thumb .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.thumb .meta{padding:10px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.photos{align-items:start;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.modal-bg{position:fixed;inset:0;background:rgba(10,5,20,.55);display:grid;place-items:center;z-index:50;padding:16px}
.modal{background:var(--panel);border-radius:18px;padding:22px;width:min(560px,100%);max-height:92dvh;overflow:auto;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;box-shadow:var(--shadow);max-width:360px}.toast.err{background:var(--bad);color:#fff}
.login{min-height:100dvh;display:grid;place-items:center;padding:16px}.login .card{width:min(380px,100%);display:flex;flex-direction:column;gap:14px}
code,pre{font-family:ui-monospace,Consolas,monospace;font-size:13px}pre{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;overflow:auto;margin:0;white-space:pre-wrap;word-break:break-all}
.copy{display:flex;gap:8px;align-items:stretch}.copy pre{flex:1}
.empty{padding:34px;text-align:center;color:var(--mut)}
.sec{display:flex;flex-direction:column;gap:12px}.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
/* trình thiết kế bố cục */
.editor{display:grid;grid-template-columns:minmax(0,auto) minmax(300px,1fr);gap:20px;align-items:start}
@media(max-width:1000px){.editor{grid-template-columns:1fr}}
.stagewrap{overflow:auto;padding:4px}
.stage{position:relative;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);touch-action:none;user-select:none;margin:0 auto}
.stage .ovl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.85}
.slot{position:absolute;border:2px solid var(--chart);background:color-mix(in srgb,var(--chart) 22%,transparent);cursor:move;display:grid;place-items:center;font-weight:800;color:var(--chart);font-size:18px}
.slot.sel{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--acc);z-index:3}
.slot .h{position:absolute;right:-7px;bottom:-7px;width:16px;height:16px;border-radius:50%;background:var(--acc);border:2px solid #fff;cursor:nwse-resize}
.slotrow{display:grid;grid-template-columns:22px repeat(4,minmax(0,1fr)) 34px;gap:5px;align-items:center;padding:3px}
.slotrow input{padding:4px 2px;min-height:32px;text-align:center;-moz-appearance:textfield}
.slotrow input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.slotrow .btn{padding:0;min-width:0}
.slotrow.sel{background:var(--soft);border-radius:8px}

/* ---- mã giảm giá: loại mã, bộ lọc, thanh thao tác khi tick chọn ---- */
.cp-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.cp-tab{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:99px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.cp-tab.on{background:var(--acc);border-color:var(--acc);color:#fff}
.cp-tab .cp-n{font-size:12px;font-weight:700;padding:1px 8px;border-radius:99px;background:var(--soft);color:var(--mut)}
.cp-tab.on .cp-n{background:rgba(255,255,255,.25);color:#fff}
.cp-hint{margin:0 0 10px}
.cp-filter{margin:0 0 12px;gap:8px;flex-wrap:wrap}
.cp-filter input[type=search]{min-width:260px;flex:1}
.kind{display:inline-block;padding:2px 10px;border-radius:8px;font-size:12px;font-weight:700;white-space:nowrap}
.kind.k-admin{background:#e9e5f7;color:#4b3b9a}.kind.k-event{background:#ffe9d2;color:#9a5200}.kind.k-telegram{background:#d9f0fb;color:#0a6a97}.kind.k-friend{background:#e0f5e3;color:#1c7a34}
.tbl th.cb,.tbl td.cb{width:40px;padding-right:0}.tbl td.cb input,.tbl th.cb input{width:18px;height:18px;accent-color:var(--acc);cursor:pointer}
.tbl tr.sel td{background:color-mix(in srgb,var(--acc) 7%,transparent)}
.selbar{position:sticky;bottom:12px;z-index:5;margin-top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#1d1033;color:#fff;padding:10px 14px;border-radius:14px;border:1px solid #4b3b9a;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.selbar select{width:auto;min-width:130px;padding:6px 10px}
.selbar .btn{background:#fff;color:var(--ink)}.selbar .btn.d{background:var(--bad);color:#fff;border-color:var(--bad)}
.cp-filter{display:flex}.cp-filter>*{width:auto;flex:0 1 auto}.cp-filter input[type=search]{flex:1 1 260px}
.selbar select{background:#fff;color:#1d1033;border-color:#fff}

.share-grid{display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:18px;align-items:start}.share-prev{position:sticky;top:12px}.phone{width:390px;max-width:100%;height:780px;border:10px solid #151515;border-radius:32px;background:#fff;display:block}textarea{width:100%;font:13px/1.4 ui-monospace,Consolas,monospace;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--bg);color:var(--ink)}input[type=color]{width:64px;height:38px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}@media(max-width:980px){.share-grid{grid-template-columns:1fr}.share-prev{position:static}}

.origs{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px;padding:6px 8px 0;background:var(--panel)}
.origs a{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:6px;background:var(--soft)}
.origs img{width:100%;height:100%;object-fit:cover;display:block}
.origs.big{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));padding:0;gap:6px}
.cmp{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.cmp figure{margin:0;flex:1 1 180px;min-width:0}
.cmp figure>img{width:100%;max-height:260px;object-fit:contain;border-radius:10px;background:var(--soft)}
.cmp figcaption{font-size:12px;color:var(--mut,#667);margin-top:4px}

.hb{display:flex;flex-direction:column;gap:6px}.hbr{display:grid;grid-template-columns:minmax(80px,32%) 1fr auto;gap:8px;align-items:center;font-size:13px}.hbn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hbt{background:var(--soft);border-radius:6px;height:12px;overflow:hidden}.hbt i{display:block;height:100%;background:var(--chart);border-radius:6px}.hbv{text-align:right;white-space:nowrap}
.chkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 16px;margin:8px 0}
/* trang Cài đặt: thanh nhóm, tìm kiếm, thu gọn mục, nút lưu cố định */
.setbar{position:sticky;top:0;z-index:6;background:var(--bg);padding:8px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center;border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.setbar .setq{flex:1 1 260px;min-width:200px}
.card.sec>h2.fold{cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px}.card.sec>h2.fold::before{content:'▾';font-size:.9em;opacity:.6;transition:transform .15s}
.card.sec.collapsed>h2.fold::before{transform:rotate(-90deg)}.card.sec.collapsed>:not(h2){display:none!important}
.card[hidden],.empty[hidden]{display:none!important}
.savebar{position:sticky;bottom:0;z-index:6;background:var(--bg);padding:10px 0;display:flex;gap:12px;align-items:center;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.side a.on .pill{background:#fff;color:var(--acc,#d81b5c)}