/* Layout: công cụ vận hành — thanh điều hướng trái, thanh lọc cố định trên, nội dung dạng bảng/ô số */
:root{
  --bg:#f5f6f8; --panel:#ffffff; --ink:#18202b; --muted:#5d6878; --line:#e2e5eb;
  --accent:#c2185b; --accent-soft:#fbe7ef; --ink-soft:#eef0f4;
  --good:#1f7a4d; --good-soft:#e3f3ea; --warn:#a35d00; --warn-soft:#fdf0dc; --bad:#b3261e; --bad-soft:#fbe5e3;
  --f-body:"Be Vietnam Pro",system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12161c; --panel:#1a2029; --ink:#e7eaf0; --muted:#9aa4b2; --line:#2a313c;
  --accent:#f06292; --accent-soft:#3a1d29; --ink-soft:#222a35;
  --good:#5fd39a; --good-soft:#163024; --warn:#f2b15c; --warn-soft:#33270f; --bad:#ff8a80; --bad-soft:#3a1b19; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12161c; --panel:#1a2029; --ink:#e7eaf0; --muted:#9aa4b2; --line:#2a313c;
  --accent:#f06292; --accent-soft:#3a1d29; --ink-soft:#222a35;
  --good:#5fd39a; --good-soft:#163024; --warn:#f2b15c; --warn-soft:#33270f; --bad:#ff8a80; --bad-soft:#3a1b19; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--f-body)}
.app{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
nav.side{background:var(--panel);border-right:1px solid var(--line);padding:20px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.brand{padding:0 10px 16px;display:flex;flex-direction:column}
.brand b{font-size:17px;letter-spacing:.02em}
.brand span{font-size:12px;color:var(--muted)}
.side button{all:unset;cursor:pointer;padding:9px 10px;border-radius:8px;color:var(--muted);font-weight:500;display:flex;justify-content:space-between;align-items:center}
.side button:hover{background:var(--ink-soft);color:var(--ink)}
.side button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.side button:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.side .count{font:600 11px var(--f-mono);background:var(--bad-soft);color:var(--bad);padding:1px 7px;border-radius:99px}
.side .foot{margin-top:auto;font-size:11px;color:var(--muted);padding:0 10px}
main{min-width:0;padding-block:0 40px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:16px 0 12px;border-bottom:1px solid var(--line);margin-bottom:20px}
.bar h1{font-size:20px;margin:0 auto 0 0;text-wrap:balance}
select,input[type=search]{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
input[type=search]{min-width:0;width:220px}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{all:unset;cursor:pointer;padding:6px 10px;font-size:13px;color:var(--muted);background:var(--panel)}
.seg button.on{background:var(--ink);color:var(--bg)}
.proto{font-size:12px;color:var(--warn);background:var(--warn-soft);padding:4px 10px;border-radius:99px;font-weight:600}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.tile .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.tile .v{font:600 22px var(--f-mono);font-variant-numeric:tabular-nums}
.tile .s{font-size:12px;color:var(--muted)}
.tile.hl{border-color:var(--accent)} .tile.hl .v{color:var(--accent)}
.grid2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;margin-bottom:20px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;min-width:0}
.panel h2{font-size:14px;margin:0 0 12px;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.panel h2 small{font-weight:400;color:var(--muted);font-size:12px}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
td.n,th.n{text-align:right;font-family:var(--f-mono);font-size:13px;white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--ink-soft)}
.handle{font-weight:600}
.rank{font:600 12px var(--f-mono);color:var(--muted);width:32px}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:99px;white-space:nowrap}
.p-good{background:var(--good-soft);color:var(--good)} .p-warn{background:var(--warn-soft);color:var(--warn)}
.p-bad{background:var(--bad-soft);color:var(--bad)} .p-mute{background:var(--ink-soft);color:var(--muted)}
.chip{display:inline-block;font:600 11px var(--f-mono);padding:1px 7px;border-radius:5px;background:var(--ink-soft);color:var(--ink);margin:1px 4px 1px 0}
.bars{display:flex;flex-direction:column;gap:10px}
.brow{display:grid;grid-template-columns:64px 1fr 92px;gap:10px;align-items:center;font-size:13px}
.track{height:14px;background:var(--ink-soft);border-radius:4px;overflow:hidden}
.fill{height:100%;background:var(--accent);border-radius:4px}
.brow .n{font-family:var(--f-mono);text-align:right}
.alerts{display:flex;flex-direction:column;gap:10px}
.alert{border-left:3px solid var(--warn);background:var(--warn-soft);padding:10px 12px;border-radius:0 8px 8px 0;font-size:13px}
.alert.bad{border-color:var(--bad);background:var(--bad-soft)}
.alert b{display:block;margin-bottom:2px}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px;font-size:13px;color:var(--muted)}
.pager button{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:4px 10px;cursor:pointer}
.pager button:disabled{opacity:.4;cursor:default}
a{color:var(--accent)}
.empty{color:var(--muted);padding:20px;text-align:center}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  nav.side{position:static;height:auto;flex-direction:row;overflow-x:auto;padding:10px max(16px,env(safe-area-inset-left,0px));border-right:0;border-bottom:1px solid var(--line)}
  .brand,.side .foot{display:none}
  .side button{white-space:nowrap}
  main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .grid2{grid-template-columns:1fr}
  .bar{position:static}
  input[type=search]{width:100%}
}
@media (prefers-reduced-motion:no-preference){.fill{transition:width .4s ease}}
/* ===== Ứng dụng thật: nhập liệu ===== */
.teamtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.teamtabs button{all:unset;cursor:pointer;padding:6px 12px;border:1px solid var(--line);border-radius:99px;background:var(--panel);font-weight:500;font-size:13px}
.teamtabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tools{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;align-items:center}
.btn{font:inherit;font-weight:600;cursor:pointer;border-radius:8px;padding:7px 14px;border:1px solid var(--accent);background:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.sm{padding:3px 10px;font-size:12px}
.btn.danger{border-color:var(--bad);color:var(--bad);background:transparent}
.btn:disabled{opacity:.5;cursor:default}
.bk{border:1px solid var(--line);border-radius:10px;background:var(--panel);margin-bottom:8px}
.bk-head{display:grid;grid-template-columns:28px minmax(140px,1.4fr) minmax(90px,.8fr) 140px 110px 80px minmax(120px,1fr) 70px 110px;gap:10px;align-items:center;padding:10px 12px}
.bk-head .tog{all:unset;cursor:pointer;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;color:var(--muted)}
.bk-head .tog:hover{background:var(--ink-soft)}
.bk-head .tog[aria-expanded=true]{transform:rotate(90deg)}
.bk-head input,.bk-head select,.vt input,.vt select{font:inherit;font-size:13px;color:var(--ink);background:transparent;border:1px solid transparent;border-radius:6px;padding:4px 6px;width:100%;min-width:0}
.bk-head input:hover,.bk-head select:hover,.vt input:hover,.vt select:hover{border-color:var(--line)}
.bk-head input:focus,.bk-head select:focus,.vt input:focus,.vt select:focus{border-color:var(--accent);background:var(--panel)}
.bk-head .n{font-family:var(--f-mono);font-size:13px;text-align:right}
.bk-head .lbl{display:none}
.bk-body{border-top:1px dashed var(--line);padding:10px 12px 12px 50px}
.vt{width:100%}
.vt td{padding:4px 6px;border-bottom:1px solid var(--line)}
.vt th{padding:6px}
.vhead{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:0 12px 6px;display:grid;grid-template-columns:28px minmax(140px,1.4fr) minmax(90px,.8fr) 140px 110px 80px minmax(120px,1fr) 70px 110px;gap:10px}
.vhead span.n{text-align:right}
.meta{font-size:12px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}
dialog{border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);padding:20px;width:min(560px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(10,14,20,.45)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:600}
.form label.full{grid-column:1/-1}
.form input,.form select,.form textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.form .warn{grid-column:1/-1}
.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.toast{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:600;z-index:50}
.toast.err{background:var(--bad);color:#fff}
.owner{font-size:11px;color:var(--warn)}
@media (max-width:1100px){
  .vhead{display:none}
  .bk-head{grid-template-columns:28px 1fr 1fr;row-gap:6px}
  .bk-head .lbl{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
  .bk-head > div{min-width:0}
  .bk-body{padding-left:12px}
}
.deal{margin-bottom:14px}
.deal h3,.bk-body h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 12px}
.dgrid label{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--muted);font-weight:600;min-width:0}
.dgrid label.wide{grid-column:span 2}
.dgrid input,.dgrid textarea{font:inherit;font-size:13px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:5px 8px;min-width:0}
.dgrid input:focus,.dgrid textarea:focus{border-color:var(--accent);outline:none}
@media (max-width:560px){.dgrid label.wide{grid-column:auto}}
/* ===== Duyệt >10tr, ngân sách, code ads, trùng ===== */
:root{--boss:#5b3cc4;--boss-soft:#ece7fb}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--boss:#b9a6ff;--boss-soft:#2a2340}}
:root[data-theme="dark"]{--boss:#b9a6ff;--boss-soft:#2a2340}
.p-boss{background:var(--boss-soft);color:var(--boss)}
.bk.boss{border-left:3px solid var(--boss)}
.muted{color:var(--muted);font-size:13px}
td.note{max-width:260px;font-size:12px;color:var(--muted);white-space:pre-line}
input.inl{font:inherit;font-size:13px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:4px 6px;width:110px;min-width:0}
input.inl.wide{width:220px}
input.inl:focus{border-color:var(--accent);outline:none}
input.inl:disabled{background:transparent;border-color:transparent}
.mbar{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:80px}
.mbar i{display:block;height:5px;border-radius:3px;background:var(--good);align-self:stretch;max-width:100%}
.mbar i.warn{background:var(--warn)} .mbar i.bad{background:var(--bad)}
td.neg{color:var(--bad)}
tr.total td{font-weight:700;border-top:2px solid var(--line)}
.crow{min-height:24px;display:flex;align-items:center;gap:4px;justify-content:inherit}
td.n .crow{justify-content:flex-end}
tr.sub > td{background:var(--ink-soft);padding:8px}
td.code code{font:12px var(--f-mono);word-break:break-all;background:var(--ink-soft);padding:2px 5px;border-radius:4px}
td.code{max-width:320px}
.form .full{grid-column:1/-1}
.bk-body h3{margin-top:4px}
.req{margin-top:4px;font-size:12px;font-weight:600;color:var(--boss);background:var(--boss-soft);padding:2px 8px;border-radius:6px;display:inline-block}
/* Biểu đồ tỷ trọng GMV */
:root{--c1:#c2185b;--c2:#2f6fdb;--c3:#1f9d7a;--c4:#e08a00;--c5:#7b4fd6;--c6:#8a94a6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--c1:#f06292;--c2:#6ea2ff;--c3:#4fd1a8;--c4:#ffb547;--c5:#b39bff;--c6:#a7b0bf}}
:root[data-theme="dark"]{--c1:#f06292;--c2:#6ea2ff;--c3:#4fd1a8;--c4:#ffb547;--c5:#b39bff;--c6:#a7b0bf}
.share-body{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.donut{width:200px;max-width:100%;height:auto;flex:none}
.donut .d-big{font:700 15px var(--f-mono);fill:var(--ink)}
.donut .d-small{font:600 11px var(--f-body);fill:var(--muted);letter-spacing:.06em}
.legend{display:flex;flex-direction:column;gap:8px;flex:1;min-width:220px}
.lg{display:grid;grid-template-columns:12px 1fr 64px 90px;gap:10px;align-items:center;font-size:14px}
.lg i{width:12px;height:12px;border-radius:3px}
.lg b{font:600 14px var(--f-mono);text-align:right}
.lg .n{font-family:var(--f-mono);font-size:13px;color:var(--muted);text-align:right}
.stack{display:flex;height:10px;border-radius:5px;overflow:hidden;margin-top:16px;background:var(--ink-soft)}
.stack span{display:block;height:100%}
/* Đăng nhập */
.login{min-height:100vh;display:grid;place-items:center;padding-block:24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:32px;width:min(420px,100%);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.login-brand{font-size:20px;letter-spacing:.04em;color:var(--accent)}
.login-card h1{font-size:22px;margin:12px 0 0}
.login-card p{margin:0 0 8px;line-height:1.6}
.login-msg{color:var(--bad);font-size:13px;min-height:18px}
.side .foot a{color:var(--accent)}
tr.off td{opacity:.5}
/* Chọn sản phẩm */
.picker{all:unset;box-sizing:border-box;cursor:pointer;width:100%;min-width:0;font-size:13px;padding:4px 6px;border:1px solid transparent;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.picker:hover{border-color:var(--line)}
.picker:focus-visible{outline:2px solid var(--accent)}
.picker:disabled{cursor:default}
.form .picker{border:1px solid var(--line);background:var(--bg);padding:8px 10px;font-size:14px;color:var(--ink)}
.pick-pop{position:fixed;z-index:60;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:8px;max-height:340px;overflow:auto;min-width:240px;display:flex;flex-direction:column;gap:2px}
.pick-pop label{display:flex;gap:8px;align-items:center;padding:5px 6px;border-radius:6px;font-size:13px;cursor:pointer}
.pick-pop label:hover{background:var(--ink-soft)}
.pick-act{display:flex;justify-content:flex-end;padding-top:6px;border-top:1px solid var(--line);margin-top:4px;position:sticky;bottom:-8px;background:var(--panel)}
/* Bảng video: đủ rộng để đọc được lựa chọn */
.vt select[data-v="status"]{min-width:130px}
.vt select[data-v="product_id"]{min-width:150px}
.vt select[data-v="content_format"]{min-width:140px}
.vt input[data-v="posted_at"]{min-width:130px}
.vt input[data-g],.vt input[data-v="views"],.vt input[data-v="orders"]{min-width:100px}
.vt th{white-space:nowrap}
.form .sub-h{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-top:1px solid var(--line);padding-top:10px}
.dupact{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.dupact select{max-width:260px}