:root{
--bg:#0b0f1a; --bg2:#0f1525; --panel:#141b2d; --panel2:#1a2236;
--line:#243049; --line2:#2e3a54;
--txt:#e7ecf5; --muted:#8a97b2; --muted2:#7c8aa8; /* muted2 cu (#5d6b89) chi dat 3.2:1 */
--brand:#6d5efc; --brand2:#8b7bff; --brand-soft:rgba(109,94,252,.14);
--green:#27d088; --green-soft:rgba(39,208,136,.14);
--red:#ff5c6c; --red-soft:rgba(255,92,108,.14);
--amber:#ffb23e; --amber-soft:rgba(255,178,62,.14);
--cyan:#36c5f0; --cyan-soft:rgba(54,197,240,.14);
--radius:14px; --radius-sm:10px;
--sbw:240px; /* be rong sidebar, thu nho dan theo breakpoint */
--gap:18px; /* khoang cach giua cac panel */
--padx:26px; --pady:24px; /* padding vung noi dung */
--sat:0px; --sab:0px; --sal:0px; --sar:0px;
--shadow:0 12px 40px rgba(0,0,0,.35);
--font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
--mono:'JetBrains Mono',ui-monospace,monospace;
}
@supports (padding:env(safe-area-inset-top)){
:root{
--sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
--sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
}
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--txt);font-size:14px;-webkit-font-smoothing:antialiased;
overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img,svg,video{max-width:100%}
:focus-visible{outline:2px solid var(--brand2);outline-offset:2px}
a{color:inherit;text-decoration:none;cursor:pointer}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
.muted{color:var(--muted);font-weight:400}
[hidden]{display:none!important}
/* ============ BUTTONS / INPUTS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
border-radius:var(--radius-sm);padding:10px 16px;font-weight:600;font-size:13.5px;cursor:pointer;
transition:.15s;white-space:nowrap;font-family:var(--font);min-height:38px;line-height:1.2;
-webkit-appearance:none;appearance:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 6px 18px rgba(109,94,252,.35)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--panel2);border-color:var(--line);color:var(--txt)}
.btn-ghost:hover{border-color:var(--line2);background:var(--line)}
.btn-danger{background:var(--red-soft);color:var(--red);border-color:transparent}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:8px}
.btn-block{width:100%}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px;min-height:30px;min-width:30px;
background:var(--panel2);border:1px solid var(--line);border-radius:8px;cursor:pointer;font-family:var(--font)}
.btn-icon:hover{border-color:var(--line2)}
input,select,textarea{width:100%;max-width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--txt);
border-radius:var(--radius-sm);padding:10px 12px;font-size:13.5px;font-family:var(--font);transition:.15s;
-webkit-appearance:none;appearance:none}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
textarea{resize:vertical}
label{display:block;font-size:12px;color:var(--muted);margin:10px 0 5px;font-weight:500}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a97b2' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
/* ============ LOGIN ============ */
.auth-wrap{min-height:100vh;min-height:100dvh;display:grid;place-items:center;position:relative;overflow:hidden;
padding:calc(20px + var(--sat)) calc(20px + var(--sar)) calc(20px + var(--sab)) calc(20px + var(--sal))}
.auth-bg{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:
radial-gradient(700px 500px at 20% 10%,rgba(109,94,252,.22),transparent),
radial-gradient(700px 500px at 85% 90%,rgba(54,197,240,.14),transparent),var(--bg);z-index:0}
.auth-card{position:relative;z-index:1;width:100%;max-width:400px;background:var(--panel);
border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}
.auth-brand{display:flex;gap:14px;align-items:center;margin-bottom:22px}
.auth-brand h1{font-size:19px;font-weight:800}
.auth-brand p{font-size:12.5px;color:var(--muted)}
.logo-badge{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--cyan));
display:grid;place-items:center;font-weight:800;font-size:22px;color:#fff;flex:0 0 auto}
.auth-tabs{display:flex;gap:6px;background:var(--bg2);padding:5px;border-radius:12px;margin-bottom:18px}
.auth-tab{flex:1;padding:9px;border-radius:8px;background:transparent;border:none;color:var(--muted);font-weight:600;font-size:13px;cursor:pointer}
.auth-tab.active{background:var(--panel2);color:var(--txt);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.auth-form label:first-child{margin-top:0}
.auth-form .btn{margin-top:18px}
.auth-error{margin-top:14px;padding:10px 12px;background:var(--red-soft);color:var(--red);border-radius:8px;font-size:13px}
.auth-hint{margin-top:16px;text-align:center;font-size:12px;color:var(--muted2)}
/* ============ APP SHELL ============ */
#app{display:grid;grid-template-columns:var(--sbw) 1fr;height:100vh;height:100dvh}
.sidebar{background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;
padding:calc(18px + var(--sat)) 14px calc(18px + var(--sab));overflow-y:auto;overscroll-behavior:contain}
.sb-brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:16px;padding:4px 6px 20px}
.sb-brand>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-close{display:none;flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--panel2);
border:1px solid var(--line);color:var(--muted);font-size:15px;cursor:pointer;align-items:center;justify-content:center}
.sb-close:hover{color:var(--txt);border-color:var(--line2)}
.sb-brand .logo-badge{width:34px;height:34px;font-size:17px;border-radius:9px}
.sb-nav{display:flex;flex-direction:column;gap:3px;flex:1}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--muted);font-weight:600;font-size:13.5px;transition:.14s}
.nav-item:hover{background:var(--panel);color:var(--txt)}
.nav-item.active{background:var(--brand-soft);color:var(--brand2)}
.nav-item i{width:18px;height:18px;display:inline-block;flex:0 0 auto}
.nav-item{min-width:0}
.sb-foot{border-top:1px solid var(--line);padding-top:14px;margin-top:10px;flex:0 0 auto;
display:flex;flex-wrap:wrap;gap:6px}
.sb-user{display:flex;align-items:center;gap:10px;margin-bottom:4px;flex:1 1 100%;min-width:0}
/* Nút ở chân sidebar (🔑 Tài khoản / Đăng xuất / ↩ Quay lại admin): vừa 1 hàng thì
chia đôi bằng nhau, không vừa thì mỗi nút rớt xuống thành 1 hàng full-width. */
.sb-foot .btn{flex:1 1 0;min-width:max-content;white-space:nowrap}
.avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--cyan));display:grid;place-items:center;font-weight:700;color:#fff;flex:0 0 auto}
.sb-user-info{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.sb-user-info strong{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role-pill{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--cyan);font-weight:700}
.main{overflow:hidden;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
border-bottom:1px solid var(--line);background:var(--bg2);
padding:calc(18px + var(--sat)) calc(var(--padx) + var(--sar)) 18px calc(var(--padx) + var(--sal))}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}
.topbar-title{min-width:0}
.topbar h2{font-size:18px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-title p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-right{display:flex;align-items:center;gap:9px;min-width:0;flex:0 1 auto}
.chip-rail{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:6px 13px;font-size:12px;
font-weight:600;color:var(--muted);white-space:nowrap}
.chip-live{color:var(--green);border-color:var(--green-soft)}
.btn-refresh{flex:0 0 auto;min-width:38px}
/* hamburger - chi hien khi sidebar thanh drawer */
.burger{display:none;flex:0 0 auto;width:40px;height:40px;border-radius:10px;background:var(--panel2);
border:1px solid var(--line);cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.burger:hover{border-color:var(--line2)}
.burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--txt);transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* lop phu sau drawer */
.sb-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:45;background:rgba(4,7,14,.62);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
opacity:0;pointer-events:none;transition:opacity .22s}
.sb-backdrop.show{opacity:1;pointer-events:auto}
.content{flex:1;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;min-width:0;
padding:var(--pady) calc(var(--padx) + var(--sar)) calc(var(--pady) + var(--sab)) calc(var(--padx) + var(--sal))}
/* ============ STAT CARDS ============ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:20px}
.stat .s-val{overflow-wrap:anywhere}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-20px;top:-20px;width:90px;height:90px;border-radius:50%;opacity:.1;background:var(--accent,var(--brand))}
.stat .s-label{font-size:12px;color:var(--muted);font-weight:500;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.stat .s-val{font-size:27px;font-weight:800;letter-spacing:-.5px}
.stat .s-sub{font-size:11.5px;color:var(--muted2);margin-top:4px}
.stat .s-dot{width:9px;height:9px;border-radius:50%;background:var(--accent,var(--brand))}
/* ============ PANELS ============ */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;
margin-bottom:var(--gap);min-width:0}
.panel-row{display:flex;gap:var(--gap);align-items:flex-start;flex-wrap:wrap;margin-bottom:var(--gap)}
.panel-row>.panel{flex:1 1 340px;margin-bottom:0;min-width:0}
.grow{flex:2 1 520px!important}
/* Tổng quan: khung biểu đồ credit cao bằng khung donut bên cạnh, không để khoảng trống bên dưới */
@media (min-width:761px){
#page-dashboard .panel-row{align-items:stretch}
#page-dashboard .panel-row>.panel.grow{display:flex;flex-direction:column}
#page-dashboard .panel-row>.panel.grow>.chart{flex:1 1 180px;min-height:180px}
}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.panel-head h3{font-size:15px;font-weight:700;min-width:0}
.create-panel{flex:0 0 340px!important;max-width:340px}
/* Trang Proxy: cột trái là form, cột phải xếp chồng 2 bảng —
form cao hơn một bảng nên nếu để 2 cột ngang hàng sẽ hở một mảng trống to. */
.proxy-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:var(--gap);align-items:start;margin-bottom:var(--gap)}
.proxy-grid>.panel,.proxy-col>.panel{margin-bottom:0}
.proxy-grid>.create-panel{max-width:none;width:100%}
.proxy-col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
/* Trang Proxy admin: cột phải chỉ còn 1 bảng (Cổng luồng đã ra hàng riêng) —
kéo 2 cột cao bằng nhau cho khít, không hở mảng trống dưới form. */
#page-proxy .proxy-grid{align-items:stretch}
#page-proxy .proxy-col>.panel{flex:1 1 auto}
/* ============ TABLE ============ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;padding:11px 12px;color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:hover{background:var(--panel2)}
.tbl tbody tr:last-child td{border-bottom:none}
.seq-badge{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--bg2);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--muted)}
.u-cell{display:flex;align-items:center;gap:8px}
.u-dot{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--cyan));display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff}
.mono{font-family:var(--mono);font-size:12px;color:var(--muted)}
/* status badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:700}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.b-live{background:var(--green-soft);color:var(--green)}
.b-die{background:var(--red-soft);color:var(--red)}
.b-unknown{background:var(--panel2);color:var(--muted)}
.b-checking{background:var(--cyan-soft);color:var(--cyan)}
.b-queued{background:var(--panel2);color:var(--muted)}
.b-idle{background:var(--panel2);color:var(--muted2)}
.b-running{background:var(--amber-soft);color:var(--amber)}
.b-done{background:var(--green-soft);color:var(--green)}
.b-failed{background:var(--red-soft);color:var(--red)}
/* progress */
.prog{height:8px;background:var(--bg2);border-radius:20px;overflow:hidden;min-width:90px;position:relative}
.prog-bar{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:width .5s ease}
.prog-bar.run{background:linear-gradient(90deg,var(--amber),#ffca6e);background-size:200% 100%;animation:flow 1.4s linear infinite}
.prog-bar.done{background:linear-gradient(90deg,var(--green),#52e3a4)}
.prog-bar.fail{background:var(--red)}
@keyframes flow{0%{background-position:0 0}100%{background-position:-40px 0}}
.prog-row{display:flex;align-items:center;gap:8px}
.prog-row .pct{font-size:11.5px;color:var(--muted);font-weight:600;min-width:32px;font-family:var(--mono)}
.credit-chip{font-family:var(--mono);font-weight:600;color:var(--amber)}
/* Bảng Thống kê theo người dùng: cookie đã dùng (chờ nạp) / còn đủ credit */
.ck-split{font-family:var(--mono);white-space:nowrap}
.ck-split .ck-used{color:var(--muted)}
.ck-split .ck-left{color:var(--green);font-weight:600}
/* Bộ lọc thời gian của bảng đó: tiêu đề + khoảng đang xem bên trái, chip + ô ngày bên phải */
.pu-title{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;min-width:0}
.pu-title .muted{font-size:12.5px;font-variant-numeric:tabular-nums}
.pu-range{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-width:0}
.pu-custom{display:flex;align-items:center;gap:6px}
.pu-custom input{width:auto;padding:5px 9px;font-size:12.5px;border-radius:8px;color-scheme:dark}
.pu-note{font-size:12px;margin:-8px 0 12px}
.pu-new{display:block;margin-top:2px;font-size:11px;font-weight:500;color:var(--muted2);white-space:nowrap}
.pu-new.on{color:var(--green)}
.pu-note:empty{display:none}
#tbl-peruser.pu-loading tbody{opacity:.5;transition:opacity .15s}
.ck-split .ck-sep{margin:0 .5ch;color:var(--muted2)}
/* Desktop: cột cố định bề ngang, cột số căn giữa cả tiêu đề lẫn ô, badge Live/Die cùng bề ngang,
"đã dùng / còn lại" là lưới 3 ô để dấu "/" thẳng một hàng dọc. Điện thoại (≤760px) là thẻ, xem css/m/dashboard.css */
@media (min-width:761px){
#tbl-peruser{table-layout:fixed;min-width:660px;font-variant-numeric:tabular-nums}
#tbl-peruser .pu-c-stt{width:64px}
#tbl-peruser .pu-c-user{width:auto}
#tbl-peruser .pu-c-num{width:10.5%}
#tbl-peruser .pu-c-split{width:17%}
#tbl-peruser th,#tbl-peruser td{text-align:center}
#tbl-peruser th:nth-child(2),#tbl-peruser td:nth-child(2){text-align:left}
#tbl-peruser th{white-space:normal;line-height:1.35;vertical-align:bottom}
#tbl-peruser .u-cell{min-width:0}
#tbl-peruser .u-dot{flex:0 0 auto}
#tbl-peruser .u-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tbl-peruser .badge{min-width:56px;justify-content:center;font-variant-numeric:tabular-nums}
#tbl-peruser .ck-split{display:inline-grid;grid-template-columns:5ch auto 5ch;align-items:baseline}
#tbl-peruser .ck-split .ck-used{text-align:right}
#tbl-peruser .ck-split .ck-left{text-align:left}
}
/* ============ TOOLBAR ============ */
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.toolbar .spacer{flex:1 1 0;min-width:0}
.search{max-width:240px;flex:1 1 180px;min-width:0}
/* Hàng lọc My Video còn phải gánh 6 tab + dropdown cookie, nên ô tìm ở đó lấy
bề ngang cơ sở nhỏ hơn: flex wrap xuống dòng trước khi chịu co, cơ sở to là
cả hàng bị bẻ đôi ở màn 1024–1280 dù chỗ vẫn còn. */
#mv-search{flex-basis:110px}
/* ============ CHART ============ */
.chart{display:flex;align-items:flex-end;gap:6px;height:180px;padding-top:10px;overflow-x:auto;
-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.chart .bar{flex:1 0 20px;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.chart .bar .b-fill{width:100%;max-width:28px;background:linear-gradient(180deg,var(--brand2),var(--brand));border-radius:6px 6px 0 0;min-height:3px;transition:height .5s;position:relative}
.chart .bar:hover .b-fill{filter:brightness(1.2)}
.chart .bar .b-lbl{font-size:10px;color:var(--muted2);white-space:nowrap}
.chart .bar .b-val{font-size:10px;color:var(--muted);font-weight:600;opacity:0;transition:.2s}
.chart .bar:hover .b-val{opacity:1}
/* Cột chồng "Video ra 14 ngày theo cookie của từng user": mỗi khúc = một chủ cookie,
khúc đầu nằm đáy; khe 2px màu nền tách khúc; con số chính xác nằm ở tooltip + chú thích. */
#panel-video-owners{position:relative}
/* Xu hướng phát bắn: MỘT biểu đồ nhiều đường, khung 1d…1h (17/09/2026) */
#panel-trend{position:relative}
#panel-trend .tr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:14px}
#panel-trend .tr-title{display:flex;flex-direction:column;gap:3px;min-width:0}
#panel-trend .tr-title h3{font-size:15px;font-weight:700}
#panel-trend .tr-title .muted{font-size:12.5px}
.tr-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.seg button{background:transparent;border:0;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:6px;cursor:pointer;line-height:1.2;font-variant-numeric:tabular-nums}
.seg button:hover{color:var(--txt)}
.seg button.active{background:var(--panel2);color:var(--txt);box-shadow:0 0 0 1px var(--line2) inset}
.seg button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.tr-legend{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.tr-lg{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);border-radius:8px;padding:5px 10px;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;line-height:1.3}
.tr-lg i{width:14px;height:2px;border-radius:1px;flex:0 0 auto}
.tr-lg b{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}
.tr-lg:hover{border-color:var(--line2);color:var(--txt)}
.tr-lg.off{opacity:.42}
.tr-lg.off i{background:var(--line2)!important}
.tr-lg.off b{color:var(--muted)}
.tr-lg:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.tr-chart{position:relative;min-height:240px;outline:none;transition:opacity .18s}
.tr-chart.is-loading{opacity:.45}
.tr-chart:focus-visible{box-shadow:0 0 0 2px var(--brand);border-radius:8px}
.tr-chart svg{display:block;overflow:visible;touch-action:pan-y}
.tr-chart .tr-grid{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.tr-chart .tr-grid.base{stroke:var(--line2)}
.tr-chart .tr-ax{fill:var(--muted2);font-size:11px;font-variant-numeric:tabular-nums}
.tr-chart .tr-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tr-chart .tr-dash{stroke-dasharray:4 4}
.tr-chart .tr-dl{fill:var(--muted);font-size:12px}
.tr-chart .tr-s{transition:opacity .15s}
.tr-chart.is-focus .tr-s:not(.on){opacity:.15}
.tr-chart .tr-x{stroke:var(--muted);stroke-width:1;opacity:0;shape-rendering:crispEdges}
.tr-chart.is-hover .tr-x{opacity:.5}
.tr-chart .tr-hd{opacity:0}
.tr-chart.is-hover .tr-hd{opacity:1}
.tr-chart .tr-msg-svg{fill:var(--muted2);font-size:12.5px}
.tr-chart .tr-msg{color:var(--muted2);padding:40px 0;text-align:center}
.tr-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-top:8px}
.tr-hint{color:var(--muted2);font-size:11.5px;margin:0}
#trend-tip{min-width:230px}
#trend-tip .vt-r i{width:12px;height:2px;border-radius:1px}
#trend-tip .vt-r em{font-style:normal;color:var(--muted2);font-size:11px;min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
#trend-tip .vt-r b{padding-left:12px}
#trend-tip .tr-live{color:var(--muted2);font-size:11px;margin:-2px 0 4px}
.tr-table{margin-left:auto}
.tr-table summary{cursor:pointer;color:var(--muted);font-size:12.5px;width:max-content;margin-left:auto}
.tr-table[open]{flex:1 1 100%;margin-left:0}
.tr-table[open] summary{margin-left:0}
.tr-table-wrap{overflow-x:auto;margin-top:8px;max-height:320px;overflow-y:auto}
.tr-table table{border-collapse:collapse;font-size:12px;min-width:100%}
.tr-table th,.tr-table td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tr-table th:first-child,.tr-table td:first-child{text-align:left}
.tr-table th{color:var(--muted);font-weight:600;position:sticky;top:0;background:var(--panel)}
/* Xu hướng: zoom / dời bằng kéo (17/09/2026) */
.tr-chart .tr-zone{fill:transparent}
.tr-chart .tr-zone-p{cursor:grab}
.tr-chart .tr-zone-x{cursor:ew-resize}
.tr-chart .tr-zone-y{cursor:ns-resize}
.tr-chart.is-drag{user-select:none;-webkit-user-select:none}
.tr-chart.drag-p,.tr-chart.drag-p .tr-zone-p{cursor:grabbing}
.tr-chart.drag-x,.tr-chart.drag-x *{cursor:ew-resize}
.tr-chart.drag-y,.tr-chart.drag-y *{cursor:ns-resize}
.tr-chart .tr-grid,.tr-chart .tr-ax,.tr-chart .tr-s,.tr-chart .tr-x,.tr-chart .tr-hd,.tr-chart .tr-dl,.tr-chart .tr-msg-svg{pointer-events:none}
.tr-chart .tr-ax-note{font-size:10px;letter-spacing:.3px;text-transform:uppercase}
.tr-foot-r{display:flex;align-items:flex-start;gap:12px;margin-left:auto;flex-wrap:wrap}
.tr-reset{background:transparent;border:1px solid var(--line2);color:var(--txt);border-radius:7px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
.tr-reset:hover{border-color:var(--brand);color:var(--brand2)}
.tr-foot-r .tr-table{margin-left:0}
/* Xu hướng: ô số của đoạn đang xem, nhãn giờ chạy theo vạch dọc, tooltip neo dưới (điện thoại) */
.tr-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:12px}
.tr-kpis:empty{display:none}
.tr-kpi{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:7px;row-gap:2px;
background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-width:0}
.tr-kpi i{width:12px;height:3px;border-radius:2px;grid-row:1}
.tr-kpi span{grid-row:1;grid-column:2;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-kpi span:first-child{grid-column:1/-1}
.tr-kpi b{grid-column:1/-1;font-size:20px;font-weight:700;line-height:1.15;color:var(--txt);font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.tr-kpi em{grid-column:1/-1;font-style:normal;color:var(--muted2);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-chart .tr-xpill{pointer-events:none;opacity:0}
.tr-chart.is-hover .tr-xpill{opacity:1}
.tr-chart .tr-xpill rect{fill:var(--panel2);stroke:var(--line2);stroke-width:1}
.tr-chart .tr-xpill text{fill:var(--txt);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.tr-lg-all{color:var(--brand2);border-style:dashed}
#trend-tip.dock{right:12px;max-width:none;min-width:0}
.chart .bar .vo-stack{display:flex;flex-direction:column-reverse;gap:2px;background:none;
max-width:24px;border-radius:4px 4px 0 0;overflow:hidden}
.chart .bar .vo-stack i{display:block;flex:1 1 0;min-height:1px}
.chart .bar.b-zero .vo-stack{background:var(--line2)}
.chart.vo-chart .bar{cursor:default;outline:none}
.chart.vo-chart .bar:focus-visible .b-lbl{color:var(--txt);text-decoration:underline}
.chart.vo-chart .bar.is-on .b-val{opacity:1}
.chart.vo-chart .bar.is-on .vo-stack{filter:brightness(1.2)}
.vo-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.vo-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-width:0}
.vo-legend i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.vo-legend b{color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}
.vo-tip{position:absolute;z-index:6;pointer-events:none;min-width:180px;max-width:280px;
background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:9px 12px;
font-size:12px;box-shadow:var(--shadow)}
.vo-tip .vt-h{display:flex;gap:10px;justify-content:space-between;color:var(--txt);font-weight:700;margin-bottom:5px}
.vo-tip .vt-r{display:flex;align-items:center;gap:7px;color:var(--muted);line-height:1.75;min-width:0}
.vo-tip .vt-r span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vo-tip .vt-r i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.vo-tip .vt-r b{margin-left:auto;padding-left:14px;color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}
.vo-tip .vt-e{color:var(--muted2)}
/* donut */
.donut-wrap{display:flex;align-items:center;gap:20px;justify-content:center;padding:10px 0;flex-wrap:wrap}
.donut{flex:0 0 auto}
.donut{width:130px;height:130px;border-radius:50%;position:relative;display:grid;place-items:center}
.donut::after{content:"";position:absolute;top:18px;right:18px;bottom:18px;left:18px;inset:18px;background:var(--panel);border-radius:50%}
.donut .d-center{position:relative;z-index:1;text-align:center}
.donut .d-center b{font-size:22px;font-weight:800}
.donut .d-center span{font-size:11px;color:var(--muted);display:block}
.donut-legend{display:flex;flex-direction:column;gap:9px;font-size:12.5px}
.donut-legend div{display:flex;align-items:center;gap:8px}
.donut-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
/* Donut kép (app.js renderCookieDonut): vòng trong cookie, vòng ngoài phát bắn 24h. SVG viewBox 100. */
.ring2{flex:0 0 auto;width:156px;height:156px;position:relative;display:grid;place-items:center}
.ring2 svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible}
.ring2 circle{fill:none;transition:opacity .15s}
.ring2 .rg-track{stroke:var(--line)}
.ring2 .d-center{position:relative;z-index:1;text-align:center;pointer-events:none}
.ring2 .d-center b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.ring2 .d-center span{font-size:11px;color:var(--muted);display:block}
#cookie-donut .dim,#cookie-donut li.dim>*{opacity:.3}
.donut-legend .lg-h,.shot-legend .lg-h{margin:0;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.3px;text-transform:uppercase}
.shot-legend{display:flex;flex-direction:column;gap:7px;font-size:12.5px;min-width:0}
.shot-legend .lg-h b{color:var(--txt);font-weight:700;margin-left:4px;font-variant-numeric:tabular-nums}
.shot-legend ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:10px minmax(0,auto) auto auto;gap:6px 8px;align-items:center}
.shot-legend li{display:contents;cursor:default}
.shot-legend li i{width:10px;height:10px;border-radius:3px;display:inline-block}
.shot-legend li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-legend li b{text-align:right;font-variant-numeric:tabular-nums}
.shot-legend li em{font-style:normal;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;min-width:40px}
.shot-legend .sl-note{margin:0;color:var(--muted)}
/* proxy summary */
.proxy-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.psum{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:14px}
.psum .k{font-size:11.5px;color:var(--muted)}
.psum .v{font-size:18px;font-weight:700;margin-top:4px}
/* job form */
.job-form .form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.job-form .btn{margin-top:16px}
/* ---- Trang Tạo Video: form lên HÀNG TRÊN, bảng hàng đợi full bề ngang ---- */
.panel-row.stack{flex-direction:column;flex-wrap:nowrap}
.panel-row.stack>.panel{width:100%;max-width:none!important;flex:0 0 auto!important}
/* Nằm ngang thì xếp các cụm thành lưới cho khỏi cao lêu nghêu. */
.panel-row.stack .job-form{display:grid;gap:12px 16px;align-items:end;
grid-template-columns:minmax(190px,1fr) minmax(260px,1.7fr) minmax(290px,1.2fr) auto}
.panel-row.stack .job-form>.jf-field{display:flex;flex-direction:column;min-width:0}
.panel-row.stack .job-form textarea{min-height:38px;height:38px;padding-top:9px;padding-bottom:9px}
/* Thu gon o "Tao video moi": no la mot thanh nhap lieu, khong phai mot khung
noi dung — moi milimet chieu cao o day la mot dong bang Hang doi bi day khuat. */
.panel-row.stack>.create-panel{padding:12px 14px}
.panel-row.stack>.create-panel .panel-head{margin-bottom:10px}
.panel-row.stack>.create-panel .panel-head h3{font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.panel-row.stack .job-form label{margin:0 0 3px;font-size:11px}
.panel-row.stack .job-form{gap:8px 14px}
.panel-row.stack .job-form .form-row{gap:8px}
.panel-row.stack .job-form .btn{margin-top:0;width:auto;white-space:nowrap;align-self:end}
@media (max-width:1180px){
.panel-row.stack .job-form{grid-template-columns:minmax(190px,1fr) minmax(240px,1.4fr)}
.panel-row.stack .job-form .form-row{grid-column:1/-1}
.panel-row.stack .job-form .btn{grid-column:1/-1;width:100%}
}
@media (max-width:640px){
.panel-row.stack .job-form{grid-template-columns:1fr}
}
/* ============ LOG FEED ============ */
.log-feed{display:flex;flex-direction:column;gap:2px;max-height:560px;overflow-y:auto}
.log-item{display:flex;gap:12px;padding:10px 12px;border-radius:9px;font-size:13px;align-items:flex-start}
.log-item:hover{background:var(--panel2)}
.log-item .lt{font-family:var(--mono);font-size:11px;color:var(--muted2);flex:0 0 auto;padding-top:2px}
.log-item .lb{width:6px;align-self:stretch;border-radius:4px;flex:0 0 auto;background:var(--brand)}
.log-item.error .lb{background:var(--red)}
.log-item.job .lb{background:var(--cyan)}
.log-item.cookie .lb{background:var(--green)}
.log-item.health .lb{background:var(--amber)}
.log-item.system .lb{background:var(--muted2)}
/* ============ MODAL ============ */
.modal{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;background:rgba(4,7,14,.7);display:grid;place-items:center;z-index:100;
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
padding:calc(20px + var(--sat)) calc(20px + var(--sar)) calc(20px + var(--sab)) calc(20px + var(--sal))}
.modal-card{background:var(--panel);border:1px solid var(--line2);border-radius:16px;width:100%;max-width:500px;
box-shadow:var(--shadow);max-height:90vh;max-height:90dvh;overflow:auto;overscroll-behavior:contain}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px;
border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;background:var(--panel)}
.modal-head h3{font-size:16px}
.modal-x{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;border-radius:9px}
.modal-x:hover{color:var(--txt)}
.modal-body{padding:20px}
/* ============ POPUP "VIDEO MỚI HOÀN THÀNH" (18/09/2026) ============
Nổi bật hơn popup thường: viền sáng + vầng nhấp nháy quanh biểu tượng, để nhân viên
không lướt qua. Chip 🎬 trên thanh trên là dạng "notification alert" sau khi bấm Đã xem. */
.vid-pop .vp-card{max-width:600px;border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset,0 24px 60px rgba(0,0,0,.55)}
.vp-hero{display:flex;align-items:center;gap:16px;padding:20px;border-bottom:1px solid var(--line);
background:linear-gradient(135deg,rgba(90,120,255,.22),rgba(90,120,255,0) 65%)}
.vp-ring{flex:0 0 auto;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
background:var(--panel2);box-shadow:0 0 0 3px rgba(90,120,255,.35);animation:vpRing 1.6s ease-in-out infinite}
@keyframes vpRing{0%,100%{box-shadow:0 0 0 3px rgba(90,120,255,.35)}50%{box-shadow:0 0 0 10px rgba(90,120,255,0)}}
.vp-emo{font-size:28px;line-height:1}
.vp-title{font-size:19px;font-weight:800;line-height:1.25}
.vp-title b{color:var(--brand2);font-size:22px}
.vp-sub{color:var(--muted);font-size:12.5px;margin-top:3px}
.vp-hero .modal-x{margin-left:auto;align-self:flex-start}
.vp-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.vp-row{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px;
background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:12.5px}
.vp-time{color:var(--brand2);font-weight:700;font-variant-numeric:tabular-nums}
.vp-ck{color:var(--txt);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.vp-ck em{font-style:normal;color:var(--amber);font-size:11.5px}
.vp-pr{color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-tip{background:rgba(201,133,0,.10);border:1px solid rgba(201,133,0,.45);border-radius:11px;padding:12px 14px;font-size:13px;line-height:1.55}
.vp-tip ul{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:5px}
.vp-tip b{color:var(--txt)}
.vp-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.vp-actions .btn-lg{padding:12px 20px;font-size:14.5px;font-weight:700;flex:1 1 auto}
.vp-note{margin-top:10px;color:var(--muted2);font-size:11.5px;line-height:1.5}
/* Popup "X2 tốc độ" (18/09/2026) — dùng chung khung .vid-pop, đổi tông sang xanh lá cho khác việc */
.x2-pop .vp-card{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset,0 24px 60px rgba(0,0,0,.55)}
.x2-pop .vp-hero{background:linear-gradient(135deg,rgba(0,190,120,.20),rgba(0,190,120,0) 65%)}
.x2-pop .vp-ring{box-shadow:0 0 0 3px rgba(0,190,120,.35);animation:x2Ring 1.8s ease-in-out infinite}
@keyframes x2Ring{0%,100%{box-shadow:0 0 0 3px rgba(0,190,120,.35)}50%{box-shadow:0 0 0 10px rgba(0,190,120,0)}}
.x2-pop .vp-title b{color:var(--green)}
.x2-tip{background:rgba(0,190,120,.10);border-color:rgba(0,190,120,.45)}
.x2-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.x2-fact{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:center}
.x2-fact b{display:block;color:var(--green);font-size:15px;font-weight:800;line-height:1.2}
.x2-fact span{display:block;color:var(--muted2);font-size:11.5px;margin-top:3px;line-height:1.35}
.chip-newvid{cursor:pointer;color:#fff;background:var(--brand);border-color:var(--brand);font-weight:700;
animation:vpBlink 1.4s ease-in-out infinite}
.chip-newvid:hover{filter:brightness(1.12)}
@keyframes vpBlink{0%,100%{opacity:1}50%{opacity:.55}}
/* toast */
.toast{position:fixed;z-index:200;bottom:calc(24px + var(--sab));right:calc(24px + var(--sar));
max-width:min(420px,calc(100vw - 32px));background:var(--panel2);border:1px solid var(--line2);border-radius:12px;
padding:13px 18px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);animation:slideIn .25s}
.toast.ok{border-left:4px solid var(--green)}
.toast.err{border-left:4px solid var(--red)}
@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.empty{text-align:center;color:var(--muted2);padding:34px;font-size:13px}
/* (he breakpoint day du nam o cuoi file) */
/* ============ MY VIDEO ============ */
.worker-panel{background:linear-gradient(135deg,var(--panel),var(--panel2))}
.worker-panel .panel-head .row-actions{align-items:center;gap:8px;flex-wrap:wrap}
.mv-scope{width:auto;min-width:150px;max-width:100%;padding:6px 30px 6px 11px;font-size:12.5px;border-radius:8px}
/* Hẹp hơn .mv-scope: dropdown này đứng cạnh 6 tab trong cùng một hàng, mỗi chục
pixel ở đây quyết định hàng lọc có bị bẻ đôi ở màn ~1024 hay không. */
.mv-ckfilter{width:auto;min-width:132px;max-width:100%;padding:6px 26px 6px 10px;font-size:12.5px;border-radius:8px}
.btn.btn-warn{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.worker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:12px}
.wcell{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px 13px}
.wcell .k{font-size:11px;color:var(--muted);margin-bottom:6px}
.wcell .v{font-size:15px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ok-txt{color:var(--green)}
.err-txt{color:var(--red);font-size:11.5px;font-family:var(--mono)}
/* dải hàng đợi của worker */
.queue-strip{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px;
padding-top:14px;border-top:1px solid var(--line)}
.queue-strip .qlabel{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600;margin-right:4px}
.queue-strip .qlabel.empty-q{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted2)}
.qchip{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:8px;
font-size:11.5px;font-family:var(--mono);border:1px solid var(--line)}
.qchip.run{background:var(--amber-soft);color:var(--amber);border-color:transparent;
animation:pulseq 1.6s ease-in-out infinite}
.qchip.wait{background:var(--bg2);color:var(--muted)}
@keyframes pulseq{0%,100%{opacity:1}50%{opacity:.55}}
/* segmented filter */
.seg{display:inline-flex;gap:4px;background:var(--bg2);padding:4px;border-radius:10px;border:1px solid var(--line);
max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg-btn{flex:0 0 auto}
.seg-btn{display:inline-flex;align-items:center;gap:5px;
padding:6px 10px;border:none;border-radius:7px;background:transparent;color:var(--muted);
font-weight:600;font-size:12.5px;cursor:pointer;font-family:var(--font);transition:.14s}
.seg-btn:hover{color:var(--txt)}
.seg-btn.active{background:var(--panel2);color:var(--brand2);box-shadow:0 2px 6px rgba(0,0,0,.25)}
/* Số đếm để trần, không bọc pill như .fc-n bên trang Cookie: nền pill là
var(--bg2) trùng đúng nền của .seg nên sẽ tàng hình, mà 6 tab bọc pill nữa
thì thanh lọc tràn ngang trên màn hình hẹp. */
.seg-n{font-size:11px;font-weight:700;opacity:.55;font-variant-numeric:tabular-nums}
.seg-btn:hover .seg-n{opacity:.8}
.seg-btn.active .seg-n{opacity:1}
/* bảng my video */
.tbl-myvideo td{vertical-align:top;padding-top:13px;padding-bottom:13px}
.tbl-myvideo .u-cell{align-items:flex-start}
.vid-cell{max-width:212px;min-width:0}
.vid-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35;margin-bottom:3px}
.prog-note{margin-top:6px;font-size:11.5px}
.q-pos{color:var(--cyan);font-weight:600;font-size:11.5px}
.badge-xs{padding:1px 7px;font-size:10px}
.badge-xs::before{width:5px;height:5px}
.b-cancelled{background:var(--panel2);color:var(--muted2)}
.dl-size{font-family:var(--mono);font-size:10.5px;font-weight:500;color:rgba(255,255,255,.93)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.tbl-myvideo tr.row-running{background:rgba(255,178,62,.05)}
.tbl-myvideo tr.row-failed td:first-child .seq-badge{border-color:var(--red);color:var(--red)}
.tbl-myvideo tr.row-done td:first-child .seq-badge{border-color:var(--green);color:var(--green)}
/* ============ COOKIE FORM — full features (thêm/kiểm tra LIVE-DIE) ============ */
/* Checkbox tuy bien: rule chung o tren dat appearance:none cho moi ,
nen phai tu ve lai o tick + dau check, khong dung duoc accent-color. */
input[type="checkbox"]{
-webkit-appearance:none;appearance:none;position:relative;
flex:none;width:18px;height:18px;min-width:18px;padding:0;margin:0;
border:1.5px solid var(--muted2);border-radius:5px;background:var(--bg2);
cursor:pointer;vertical-align:middle;transition:.15s}
input[type="checkbox"]:hover{border-color:var(--brand2)}
input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate{background:var(--brand);border-color:var(--brand)}
input[type="checkbox"]:checked::after{content:"";position:absolute;left:50%;top:46%;
width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
transform:translate(-50%,-50%) rotate(43deg)}
input[type="checkbox"]:indeterminate::after{content:"";position:absolute;left:50%;top:50%;
width:9px;height:2px;border-radius:1px;background:#fff;transform:translate(-50%,-50%)}
input[type="checkbox"]:disabled{opacity:.45;cursor:not-allowed}
.toolbar-sub{margin-top:-6px}
.col-check{width:34px;text-align:center}
.tbl .ck-check{margin:0}
/* status filter chips */
.filter-chips{display:flex;gap:7px;flex-wrap:wrap}
.fchip{background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:20px;
padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s}
.fchip:hover{border-color:var(--line2);color:var(--txt)}
.fchip.active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand2)}
.fc-n{background:var(--bg2);border-radius:20px;padding:1px 8px;font-size:11px;font-weight:700;min-width:20px;text-align:center}
.fchip.active .fc-n{background:var(--brand);color:#fff}
/* Dải lọc của bảng "Hàng đợi & Tiến độ" nằm TRONG panel chứ không phải thanh
công cụ đầu trang: panel-head đã chừa 16px nên kéo sát lại, và bớt khoảng
dưới cho bảng lên gần chip. */
.panel>.jobs-filter{margin-top:-8px;margin-bottom:12px}
/* STT + phân trang bảng "Hàng đợi & Tiến độ" */
.tbl .col-stt{width:1%;white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
.pager{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.pager b{color:var(--txt)}
.pager-btns{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-left:auto}
.pg-btn{min-width:30px;height:30px;padding:0 9px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);
color:var(--txt);font-size:12.5px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.pg-btn:hover:not(:disabled){border-color:var(--line2)}
.pg-btn.active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand2)}
.pg-btn:disabled{opacity:.4;cursor:default}
.pg-gap{padding:0 2px}
.pager-size{display:flex;align-items:center;gap:6px;white-space:nowrap;margin:0}
.pager-size select{width:auto;padding:4px 8px;min-height:30px}
/* tag + format badges in table */
.tag-chip{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:20px;font-size:10.5px;font-weight:700;
background:var(--amber-soft);color:var(--amber)}
.fmt-badge{display:inline-block;padding:1px 7px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.3px;
text-transform:uppercase;background:var(--cyan-soft);color:var(--cyan);border:1px solid var(--cyan-soft)}
/* modal form bits */
.modal-body .form-row{display:flex;gap:10px;flex-wrap:wrap}
.modal-body .form-row>div{flex:1 1 140px;min-width:0}
.modal-body label{display:block;margin:12px 0 6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.modal-actions .btn{flex:1}
.chk-inline{display:flex!important;gap:9px;align-items:center;margin-top:14px;font-weight:600;color:var(--txt);cursor:pointer}
.cv-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;font-size:12px}
.file-btn{margin:0!important;padding:6px 11px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
font-size:12px;font-weight:600;color:var(--txt);cursor:pointer;white-space:nowrap}
.file-btn:hover{border-color:var(--line2)}
/* live/die verify result card */
.verify-slot{margin-top:12px}
.verify-card{border-radius:10px;padding:12px 14px;font-size:13px;border:1px solid var(--line);animation:slideIn .2s}
.verify-card .vc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.verify-card .vc-meta{margin-top:6px;color:var(--muted);font-size:12.5px}
.verify-card.live{background:var(--green-soft);border-color:var(--green)}
.verify-card.live .vc-top b{color:var(--green)}
.verify-card.die{background:var(--red-soft);border-color:var(--red)}
.verify-card.die .vc-top b{color:var(--red)}
.verify-card.checking{background:var(--cyan-soft);border-color:var(--cyan);color:var(--cyan);display:flex;align-items:center;gap:9px}
/* spinner */
.spin{width:15px;height:15px;border:2px solid var(--cyan);border-top-color:transparent;border-radius:50%;
display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* bulk verify progress list */
.vsummary{margin-top:12px;font-size:13px;color:var(--txt)}
.vlist{margin-top:10px;max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:5px}
.vrow{display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;font-size:12px}
.vr-i{color:var(--muted2);font-family:var(--mono);min-width:34px}
.vr-t{flex:1;font-family:var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vr-s{font-weight:700;white-space:nowrap}
.vr-s.checking{color:var(--cyan)}
.vr-s.live{color:var(--green)}
.vr-s.die{color:var(--red)}
/* widen modal a touch for the rich cookie forms */
.modal-card{max-width:560px}
/* ---- hàng nhập nhanh trong bảng My Video ---- */
#mv-quickadd .qa-row{background:linear-gradient(90deg,var(--brand-soft),transparent 60%)}
#mv-quickadd .qa-row:hover{background:linear-gradient(90deg,var(--brand-soft),transparent 60%)}
#mv-quickadd td{border-bottom:1px solid var(--line2);vertical-align:top;padding-top:14px;padding-bottom:14px}
.qa-plus{border-color:var(--brand);color:var(--brand2);font-size:14px}
.qa-input{background:var(--bg2);border:1px solid var(--line2);font-size:13px;padding:9px 11px}
#qa-cookie{min-width:148px;max-width:186px}
.qa-prompt-cell{min-width:236px}
.qa-group{display:flex;gap:8px;align-items:stretch}
.qa-group #qa-prompt{flex:1;min-width:150px}
.qa-group .btn{flex:0 0 auto;white-space:nowrap}
.qa-group #qa-prompt:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.qa-opts{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.qa-mini{width:auto;padding:5px 26px 5px 9px;font-size:11.5px;border-radius:7px;background:var(--bg2);border-color:var(--line)}
.qa-num{padding:5px 7px;width:52px;text-align:center;font-family:var(--mono)}
.qa-lbl{display:inline-flex;align-items:center;gap:5px;margin:0;font-size:11px;color:var(--muted)}
.qa-hint{font-size:11.5px;color:var(--muted);line-height:1.5;max-width:210px}
.qa-hint b{color:var(--txt)}
.badge{white-space:nowrap}
.qa-opts{row-gap:6px}
.qa-prompt-cell{min-width:236px}
.tbl-myvideo .u-cell .mono{white-space:nowrap}
/* ---- 4 nút điều hướng mỗi dòng: chạy / dừng / huỷ / xoá ---- */
.row-ctrl{gap:4px;flex-wrap:nowrap} /* cum 4 nut luon nam tren 1 hang */
.row-ctrl .btn-icon{min-width:27px;padding:5px 6px;line-height:1;font-size:12px;transition:.14s}
.btn-icon[disabled]{opacity:.28;cursor:not-allowed;background:var(--bg2)}
.btn-icon[disabled]:hover{border-color:var(--line)}
.ic-start{color:var(--green)}
.ic-start:hover{background:var(--green-soft);border-color:var(--green)}
.ic-stop{color:var(--amber)}
.ic-stop:hover{background:var(--amber-soft);border-color:var(--amber)}
.ic-cancel{color:var(--muted)}
.ic-cancel:hover{background:var(--panel2);border-color:var(--line2);color:var(--txt)}
.ic-del:hover{background:var(--red-soft);border-color:var(--red)}
.tbl-myvideo thead th:last-child,#mv-body td:last-child{white-space:nowrap}
/* bang My Video nhieu cot -> thu gon padding ngang cho vua man hinh */
.tbl-myvideo th,.tbl-myvideo td{padding-left:9px;padding-right:9px}
.tbl-myvideo thead th:nth-child(7),#mv-body td:nth-child(7){text-align:right} /* Credit (cột 7 từ khi thêm cột Tag 18/09) */
/* bo avatar trong cot Cookie cua My Video cho gon */
.tbl-myvideo .u-cell .u-dot{display:none}
/* ============ IMPORT — kéo-thả nhiều file + lịch sử ============ */
.modal-card.modal-wide{max-width:720px}
.dropzone{border:2px dashed var(--line2);border-radius:12px;padding:26px 18px;text-align:center;cursor:pointer;
background:var(--bg2);transition:.15s;color:var(--muted)}
.dropzone:hover{border-color:var(--brand);color:var(--txt)}
.dropzone.drag{border-color:var(--brand);background:var(--brand-soft);color:var(--txt)}
.dropzone .dz-ic{font-size:26px;margin-bottom:6px}
.dropzone .dz-link{color:var(--brand2);font-weight:700;text-decoration:underline}
.imp-files{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.imp-file{display:flex;align-items:center;gap:10px;padding:8px 11px;background:var(--bg2);border:1px solid var(--line);border-radius:9px;font-size:12.5px}
.imp-file .if-ic{font-size:15px}
.imp-file .if-name{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-file .if-meta{color:var(--muted);font-family:var(--mono);font-size:11.5px;white-space:nowrap}
.imp-file .btn-icon{padding:3px 8px}
/* lịch sử nhập */
.hist-row{padding:11px 13px;background:var(--bg2);border:1px solid var(--line);border-radius:10px}
.hist-top{font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hist-meta{margin-top:5px;font-size:12.5px;color:var(--muted)}
.hist-files{margin-top:7px;display:flex;gap:5px;flex-wrap:wrap}
/* ---- ô xem trước video trong cột Trạng thái ---- */
.st-cell{line-height:1.4}
.vprev{position:relative;margin-top:8px;width:118px;height:66px;aspect-ratio:16/9;border-radius:8px;
overflow:hidden;background:#000;border:1px solid var(--line2);cursor:pointer;
display:block;transition:.15s}
.vprev:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.vprev video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.vprev-play{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;display:grid;place-items:center;font-size:17px;
color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.42));transition:.15s}
.vprev:hover .vprev-play{opacity:0}
/* modal xem to */
.vprev{max-width:100%}
.vprev-big{width:100%;max-height:62vh;max-height:62dvh;border-radius:12px;background:#000;display:block}
.vprev-meta{margin-top:12px}
.vprev-meta .vid-title{-webkit-line-clamp:3;font-size:13.5px}
/* ==========================================================================
TIỆN ÍCH Ô BẢNG — cắt chữ ở chế độ bảng, thả tự do ở chế độ thẻ
========================================================================== */
/* ==========================================================================
HỆ BREAKPOINT — desktop rộng → laptop → tablet → điện thoại
Mốc chính:
1280px thu gọn sidebar + padding
1080px panel "tạo mới" chiếm cả dòng
960px sidebar chuyển thành drawer (hiện hamburger)
760px bảng chuyển sang dạng thẻ (card), form chữ 16px chống iOS zoom
480px nén tiếp cho điện thoại nhỏ
========================================================================== */
/* ---------- ≤1280px: laptop nhỏ ---------- */
@media (max-width:1280px){
:root{--sbw:214px;--padx:20px;--pady:20px;--gap:16px}
.topbar h2{font-size:17px}
.stat .s-val{font-size:25px}
}
/* ---------- ≤1080px: form tạo mới trải hết chiều ngang ---------- */
@media (max-width:1080px){
.create-panel{flex:1 1 100%!important;max-width:100%}
.proxy-grid{grid-template-columns:minmax(0,1fr)}
.create-panel .job-form .form-row{grid-template-columns:repeat(auto-fit,minmax(124px,1fr))}
.grow{flex:1 1 100%!important}
}
/* ---------- ≤960px: SIDEBAR → DRAWER ---------- */
@media (max-width:960px){
#app{grid-template-columns:1fr}
.burger{display:flex}
.sb-close{display:inline-flex}
.sidebar{
position:fixed;top:0;left:0;z-index:50;
width:min(284px,86vw);height:100vh;height:100dvh;
transform:translateX(-100%);transition:transform .24s ease;box-shadow:none;
padding-left:calc(14px + var(--sal))
}
.sidebar.open{transform:none;box-shadow:18px 0 48px rgba(0,0,0,.5);will-change:transform}
/* khoá cuộn trang khi drawer mở */
body.nav-open{overflow:hidden}
.sb-nav{gap:4px}
.nav-item{padding:12px 12px;font-size:14px}
.topbar{padding-top:calc(14px + var(--sat));padding-bottom:14px}
.topbar-title p{display:none} /* phụ đề nhường chỗ cho chip */
.chart{height:160px}
}
/* ---------- ≤760px: ĐIỆN THOẠI — bảng thành thẻ ---------- */
@media (max-width:760px){
:root{--padx:14px;--pady:16px;--gap:14px}
/* ---- chữ 16px cho mọi ô nhập: iOS không tự zoom khi focus ---- */
input,select,textarea{font-size:16px}
.qa-mini{font-size:15px;padding:8px 26px 8px 10px}
.qa-num{width:66px;padding:8px 6px}
label{font-size:12.5px}
/* ---- topbar: tiêu đề 1 dòng, chip cuộn ngang ---- */
.topbar{gap:10px}
.topbar h2{font-size:16px}
.topbar-right{flex:1 1 100%;order:3;justify-content:space-between}
.chip-rail{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chip-rail::-webkit-scrollbar{display:none}
.chip{padding:5px 11px;font-size:11.5px}
/* ---- thống kê: 2 cột thay vì 1 ---- */
.stat-grid{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin-bottom:16px}
.stat{padding:14px}
.stat .s-val{font-size:22px}
.stat .s-label{font-size:11.5px}
.panel{padding:14px;border-radius:12px}
.panel-head{margin-bottom:12px}
.panel-head h3{font-size:14px}
.worker-grid{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px}
.wcell{padding:10px}
.proxy-summary{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.donut-wrap{gap:14px}
.donut{width:112px;height:112px}
.donut::after{top:16px;right:16px;bottom:16px;left:16px;inset:16px}
.chart{height:150px}
.search{max-width:100%;flex:1 1 100%}
.toolbar{gap:8px}
.toolbar .spacer{display:none}
/* =====================================================================
BẢNG → THẺ
Mỗi
thành 1 thẻ; nhãn cột lấy từ data-label, đặt ở cột trái.
Dùng position:absolute cho nhãn nên nội dung ô vẫn chảy bình thường
(không bị flex/grid xé các thẻ con ra thành nhiều cột).
===================================================================== */
.table-wrap{overflow-x:visible}
.tbl{display:block;width:100%;font-size:13px}
.tbl thead{display:none}
.tbl tbody{display:block}
.tbl tr{display:block;background:var(--bg2);border:1px solid var(--line);border-radius:12px;
padding:10px 12px;margin:0 0 10px}
.tbl tbody tr:hover{background:var(--bg2)}
.tbl tbody tr:last-child{margin-bottom:0}
.tbl td{display:block;position:relative;width:auto;max-width:none;min-width:0;text-align:left;
border-bottom:1px dashed var(--line);padding:9px 0 9px 38%;min-height:34px;vertical-align:top}
.tbl tr td:first-child{padding-top:2px}
.tbl tr td:last-child{border-bottom:none;padding-bottom:2px}
.tbl td::before{content:attr(data-label);position:absolute;left:0;top:11px;width:35%;
color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
line-height:1.35;overflow-wrap:anywhere}
.tbl tr td:first-child::before{top:4px}
/* ô không có nhãn (trạng thái rỗng, ô đệm) thì trải hết chiều ngang */
.tbl td:not([data-label]){padding-left:0}
.tbl td:not([data-label])::before{display:none}
/* vô hiệu các ràng buộc chiều rộng vốn dành cho chế độ bảng */
.col-check{width:auto;text-align:left}
.vid-cell{max-width:none}
.tbl-myvideo th,.tbl-myvideo td{padding-left:0;padding-right:0}
.tbl-myvideo td{padding-left:38%}
.tbl-myvideo tr td:not([data-label]){padding-left:0}
.tbl-myvideo thead th:nth-child(6),#mv-body td:nth-child(6),
.tbl-myvideo thead th:nth-child(7),#mv-body td:nth-child(7),
.tbl-myvideo thead th:last-child,#mv-body td:last-child{
width:auto;max-width:none;min-width:0;text-align:left;white-space:normal}
.tbl-myvideo td{vertical-align:top;padding-top:9px;padding-bottom:9px}
.tbl-myvideo .u-cell .u-dot{display:grid} /* trả lại avatar, thẻ đủ chỗ */
/* tiến độ & thao tác trong thẻ */
.prog{min-width:0}
.prog-row{gap:10px}
/* ô thao tác: nhãn nằm trên, cụm nút dùng hết bề ngang thẻ */
.tbl td.cell-act,.tbl-myvideo td.cell-act{padding-left:0}
.tbl td.cell-act::before{position:static;display:block;width:auto;margin-bottom:7px}
.row-actions{justify-content:flex-start}
.row-ctrl{gap:6px;flex-wrap:wrap}
/* ô xem trước video: to hơn cho ngón tay, không còn dựa vào hover */
.vprev{width:148px;height:83px;margin-top:9px}
.vprev-play{opacity:1}
.vprev:hover .vprev-play{opacity:1}
.vprev-big{max-height:48vh;max-height:48dvh}
/* =====================================================================
HÀNG NHẬP NHANH trong thẻ: nhãn nằm TRÊN, ô nhập rộng hết thẻ
===================================================================== */
#mv-quickadd .qa-row{background:linear-gradient(160deg,var(--brand-soft),transparent 70%);
border-color:var(--brand)}
#mv-quickadd .qa-row:hover{background:linear-gradient(160deg,var(--brand-soft),transparent 70%)}
#mv-quickadd td{border-bottom:1px dashed var(--line2);padding-left:0;padding-right:0}
#mv-quickadd td::before{position:static;display:block;width:auto;margin-bottom:6px}
#mv-quickadd .qa-cell-plus{min-height:0;padding-bottom:4px}
#mv-quickadd .qa-cell-pad{display:none}
.qa-cell-plus .qa-plus{width:auto;min-width:26px;padding:0 8px;height:26px}
#qa-cookie{min-width:0;max-width:none;width:100%}
.qa-prompt-cell{min-width:0}
.qa-group{flex-wrap:wrap}
.qa-group #qa-prompt{flex:1 1 100%;min-width:0}
.qa-group .btn{flex:1 1 100%}
.qa-opts{gap:8px}
.qa-hint{max-width:none;font-size:12px}
/* bộ lọc & log */
.filter-chips{gap:6px}
.fchip{padding:7px 12px}
.log-feed{max-height:none}
.log-item{padding:9px 10px;gap:9px;flex-wrap:wrap}
.log-item .lt{margin-left:auto}
/* =====================================================================
MODAL → bottom sheet
===================================================================== */
.modal{place-items:end stretch;padding:0}
.modal-card,.modal-card.modal-wide{max-width:none;border-radius:16px 16px 0 0;border-bottom:none;
max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
.modal-head{padding:15px 16px}
.modal-body{padding:16px 16px calc(16px + var(--sab))}
.modal-actions{flex-wrap:wrap}
.modal-actions .btn{flex:1 1 140px}
.modal-body .form-row>div{flex:1 1 100%}
.dropzone{padding:20px 14px}
/* login */
.auth-card{padding:24px 20px;border-radius:16px}
.auth-brand{gap:12px;margin-bottom:18px}
.auth-brand h1{font-size:17px}
/* toast sát mép dưới, không che nút */
.toast{left:12px;right:12px;bottom:calc(12px + var(--sab));max-width:none;text-align:center}
}
/* ---------- ≤480px: điện thoại nhỏ ---------- */
@media (max-width:480px){
:root{--padx:11px;--pady:13px;--gap:12px}
.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat .s-val{font-size:20px}
.tbl td{padding-left:42%}
.tbl-myvideo td{padding-left:42%}
.tbl td::before{width:39%;font-size:10px}
.worker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.btn{padding:9px 13px;font-size:13px}
.btn-sm{padding:7px 10px}
.seg-btn{padding:7px 11px;font-size:12px}
.sidebar{width:min(272px,88vw)}
.donut{width:100px;height:100px}
.donut .d-center b{font-size:18px}
.chart{height:132px}
}
/* ---------- ≤360px: cực nhỏ — nhãn xuống trên giá trị ---------- */
@media (max-width:359px){
.stat-grid{grid-template-columns:1fr}
.tbl td,.tbl-myvideo td{padding-left:0;padding-top:8px;padding-bottom:8px}
.tbl td::before{position:static;display:block;width:auto;margin-bottom:4px}
.tbl tr td:first-child::before,.tbl td::before{top:auto}
.worker-grid{grid-template-columns:1fr}
}
/* ---------- điện thoại nằm ngang / cửa sổ thấp ---------- */
@media (max-height:480px) and (min-width:761px){
.chart{height:130px}
.log-feed{max-height:46vh}
}
@media (max-height:440px){
.modal-card,.modal-card.modal-wide{max-height:calc(100vh - 8px);max-height:calc(100dvh - 8px)}
.auth-wrap{place-items:start center}
}
/* ---------- thiết bị cảm ứng: vùng chạm to hơn ---------- */
@media (hover:none) and (pointer:coarse){
.btn-icon{min-height:38px;min-width:38px;padding:8px 10px}
.btn-sm{min-height:36px}
.nav-item{padding:13px 12px}
.modal-x{width:40px;height:40px}
.fchip{min-height:36px}
.seg-btn{min-height:34px}
/* hover-only nhãn cột biểu đồ -> luôn hiện */
.chart .bar .b-val{opacity:1}
}
/* ---------- tôn trọng cài đặt giảm chuyển động ---------- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* ===== Cách ly theo người dùng =====
Phần tử .admin-only chỉ hiện với admin. Dùng class trên (is-admin) để
những ô bảng được render động (cột "User") cũng được ẩn đúng, không chỉ các
phần tử có sẵn lúc đăng nhập. */
body:not(.is-admin) .admin-only { display: none !important; }
/* ==========================================================================
DỌN STYLE INLINE KHI BẢNG Ở CHẾ ĐỘ THẺ
Vài template đặt max-width / nowrap ngay trong thuộc tính style, thứ này
thắng mọi rule CSS thường — nên phải ghi đè bằng !important, và chỉ trong
phạm vi chế độ thẻ. Chừa .prog-bar (inline width là chiều dài thanh).
========================================================================== */
@media (max-width:760px){
.tbl td[style],
.tbl td [style]:not(.prog-bar){
max-width:none!important;min-width:0!important;
white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere}
/* prompt dài: trong thẻ cho xem trọn thay vì cắt 2 dòng (mobile không có hover) */
.vid-cell .vid-title{-webkit-line-clamp:4}
}
/* ==========================================================================
TINH CHỈNH SAU KHI ĐO THỰC TẾ TRÊN TRÌNH DUYỆT
========================================================================== */
@media (max-width:760px){
/* Dải lọc trạng thái: cuộn ngang 1 hàng thay vì xuống 2–3 hàng,
lấy lại ~60px chiều cao trước khi thấy dữ liệu. */
.filter-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
scrollbar-width:none;padding-bottom:2px}
.filter-chips::-webkit-scrollbar{display:none}
.fchip{flex:0 0 auto}
/* Hàng công cụ phụ (xuất / xoá / lịch sử): nút gọn hơn để bớt số hàng. */
.toolbar-sub{gap:7px}
.toolbar-sub .btn{padding:7px 11px;font-size:12.5px;min-height:34px}
}
/* Ô tick: WCAG 2.2 yêu cầu vùng chạm tối thiểu 24×24 trên thiết bị cảm ứng. */
@media (hover:none) and (pointer:coarse){
input[type="checkbox"]{width:24px;height:24px;min-width:24px;min-height:24px}
}
/* ==========================================================================
Ô TICK / RADIO / NUMBER — trả lại giao diện gốc của trình duyệt.
Rule chung `input,select,textarea{appearance:none}` phía trên là để chuẩn
hoá ô nhập chữ trên iOS, nhưng nó cũng xoá luôn DẤU TICK của checkbox và
nút tăng/giảm của input number. Ở đây bật lại đúng ba loại đó.
========================================================================== */
/* Checkbox do phien khac tu ve (dong ~321) da dep va dung tong mau — giu nguyen,
o day chi lo phan radio + number ma rule chung `appearance:none` lam hong. */
input[type="radio"]{
-webkit-appearance:auto;appearance:auto;
width:16px;height:16px;min-width:16px;flex:0 0 auto;
padding:0;border:0;background:none;border-radius:0;box-shadow:none;
accent-color:var(--brand);cursor:pointer;vertical-align:middle}
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{
outline:2px solid var(--brand2);outline-offset:2px}
input[type="number"]{-webkit-appearance:auto;appearance:auto}
/* Vùng chạm 24×24 theo WCAG 2.2 trên khổ điện thoại/tablet.
Không dựa vào (pointer:coarse) vì nhiều trình duyệt/thiết bị lai báo sai. */
@media (max-width:760px){
input[type="checkbox"],input[type="radio"]{width:24px;height:24px;min-width:24px}
.tbl .ck-check{margin:2px 0}
}
/* =====================================================================
PHẦN BỔ SUNG — trang Cài đặt, sức khoẻ proxy, lọc nhật ký, tài khoản
(đi kèm public/js/features.js)
===================================================================== */
/* ---- băng cảnh báo chế độ giả lập ---- */
.sim-banner{display:flex;gap:10px;align-items:flex-start;margin-bottom:var(--gap);
padding:12px 14px;border-radius:var(--radius-sm);font-size:13px;line-height:1.55;
background:var(--amber-soft);border:1px solid rgba(255,178,62,.35);color:#ffd79a}
.sim-banner b{color:var(--amber)}
/* ---- trang cài đặt ---- */
.set-group{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px;background:var(--bg2)}
.set-group>summary{cursor:pointer;padding:12px 14px;font-weight:600;font-size:13.5px;
list-style:none;display:flex;gap:8px;align-items:center;user-select:none}
.set-group>summary::-webkit-details-marker{display:none}
.set-group>summary::before{content:'▸';color:var(--muted);transition:transform .15s}
.set-group[open]>summary::before{transform:rotate(90deg)}
.set-group[open]>summary{border-bottom:1px solid var(--line)}
.set-items{padding:6px 14px 14px}
.set-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;
align-items:start;padding:11px 0;border-bottom:1px dashed var(--line)}
.set-row:last-child{border-bottom:none}
.set-row.locked{opacity:.55}
.set-label strong{display:block;font-size:13px;font-weight:600}
.set-label code{font-family:var(--mono);font-size:11px;color:var(--muted2)}
.set-hint{font-size:11.5px;margin-top:3px;line-height:1.5}
.set-field{padding-top:2px}
.set-field input,.set-field select,.set-field textarea{margin:0}
.set-field textarea{font-family:var(--mono);font-size:12px;resize:vertical}
.badge.warn{background:var(--amber-soft);color:var(--amber);border-color:rgba(255,178,62,.3)}
/* công tắc bật/tắt cho cài đặt kiểu boolean */
.switch{display:inline-flex;align-items:center;cursor:pointer;margin:0}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch span{width:44px;height:24px;border-radius:999px;background:var(--line);
position:relative;transition:background .18s;display:block;border:1px solid var(--line2)}
.switch span::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;
border-radius:50%;background:var(--muted);transition:transform .18s,background .18s}
.switch input:checked+span{background:var(--brand-soft);border-color:var(--brand)}
.switch input:checked+span::after{transform:translateX(20px);background:var(--brand2)}
.switch input:disabled+span{opacity:.5;cursor:not-allowed}
/* khung kết quả các nút kiểm tra */
.test-out{margin-top:12px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);
border-radius:var(--radius-sm);font-family:var(--mono);font-size:11.5px;line-height:1.65;
white-space:pre-wrap;word-break:break-word;max-height:340px;overflow:auto;color:var(--muted)}
/* ---- viên trạng thái dùng chung (bảng sức khoẻ proxy) ---- */
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;
background:var(--line);color:var(--muted)}
.pill.live{background:var(--green-soft);color:var(--green)}
.pill.die{background:var(--red-soft);color:var(--red)}
/* ---- lưới form trong modal ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.form-grid label{margin-top:8px}
.acct-head{margin-bottom:14px;line-height:1.7}
.modal-body hr{border:none;border-top:1px solid var(--line);margin:16px 0}
/* ---- lọc nhật ký (ẩn/hiện bằng CSS, không đụng vào code render) ---- */
#log-filters{margin-left:auto}
.log-feed[data-filter="job"] .log-item:not(.job),
.log-feed[data-filter="cookie"] .log-item:not(.cookie),
.log-feed[data-filter="error"] .log-item:not(.error),
.log-feed[data-filter="health"] .log-item:not(.health),
.log-feed[data-filter="system"] .log-item:not(.system){display:none}
@media (max-width:820px){
.set-row{grid-template-columns:1fr;gap:6px}
.form-grid{grid-template-columns:1fr}
#log-filters{margin-left:0;width:100%;overflow-x:auto}
}
/* ==========================================================================
VÁ HIỂN THỊ CHO TRANG CÀI ĐẶT / BĂNG CẢNH BÁO (features.js)
========================================================================== */
/* .sim-banner là một ĐOẠN VĂN, không phải hàng "icon + chữ". Với display:flex,
mỗi text node và mỗi / trong đó thành một flex item riêng, nên trên màn
hẹp cả băng bị xé thành các cột chỉ vừa một từ. Trả lại luồng chữ bình thường. */
.sim-banner{display:block}
@media (max-width:760px){
.sim-banner{padding:11px 12px;font-size:12.5px}
/* nhóm cài đặt: tiêu đề đủ lớn để chạm bằng ngón tay */
.set-group>summary{padding:13px 12px;min-height:44px}
.set-items{padding:4px 12px 12px}
.set-row{padding:12px 0}
/* khung kết quả kiểm tra: cao theo màn hình thay vì cố định 340px */
.test-out{max-height:52vh;max-height:52dvh;font-size:11px;padding:10px 12px}
/* công tắc: giữ nguyên bề ngang, không bị co khi ô hẹp */
.switch span{flex:0 0 auto}
}
/* cảnh báo bảo mật trong trang Cài đặt */
.sec-warn{display:flex;gap:11px;align-items:flex-start;margin-bottom:10px;padding:12px 14px;
border-radius:var(--radius-sm);font-size:13px;line-height:1.55;
background:var(--amber-soft);border:1px solid rgba(255,178,62,.35)}
.sec-warn.crit{background:var(--red-soft);border-color:rgba(255,92,108,.4)}
.sec-warn strong{display:block;margin-bottom:2px}
.sec-warn .muted{font-size:12.5px}
.sec-warn-i{font-size:16px;line-height:1.3}
/* ==========================================================================
VÒNG REVIEW 1 — SỬA LỖI
========================================================================== */
/* --- HỒI QUY PC 1: cụm nút trong ô bảng bị xuống dòng thành cột dọc ---
`.row-actions{flex-wrap:wrap}` khiến 3–5 nút trong ô hẹp xếp chồng, đẩy
chiều cao dòng lên ~128px. Ở chế độ BẢNG phải giữ 1 hàng; chỉ chế độ THẺ
(nơi ô rộng cả thẻ) mới cho xuống dòng. */
.row-actions{flex-wrap:nowrap}
.worker-panel .panel-head .row-actions{flex-wrap:wrap} /* đây là thanh công cụ, không phải ô bảng */
/* --- HỒI QUY PC 2: min-height:38px của .btn làm .btn-sm phình từ 30px lên 38px --- */
.btn-sm{min-height:30px}
/* --- Lưới KPI: 6 thẻ / 5 cột ở ~1280px để hở nguyên một hàng --- */
@media (min-width:1024px) and (max-width:1500px){
.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* --- Ô chọn cookie ở hàng nhập nhanh bị cắt chữ ngay cả trên màn 1920 --- */
#qa-cookie{min-width:150px;max-width:230px}
/* --- Form 4 ô (tỉ lệ / độ dài / chất lượng / số lượng): tự co theo chỗ trống
thay vì ép 2 hoặc 4 cột, tránh select bị bóp thành "16:!" / "72C" --- */
.job-form .form-row{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));align-items:end}
/* --- Chân sidebar (avatar + Đăng xuất) phải luôn thấy được:
cho phần menu tự cuộn thay vì đẩy chân ra ngoài khung. --- */
.sidebar{overflow:hidden}
.sb-brand{flex:0 0 auto}
.sb-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* --- Bảng rộng hơn khung (768–1400px): ghim cột thao tác để luôn bấm được.
Chỉ bật khi JS đã đo thấy thật sự cuộn ngang (.is-scroll-x), nên bảng
vừa khung sẽ không bị bóng thừa. `th:last-child:empty` để không dính
nhầm vào bảng không có cột thao tác (vd bảng thống kê theo người dùng). --- */
/* Cột thao tác từng được ghim bằng position:sticky — đã gỡ ở vòng review 2 vì
ô ghim luôn nổi đè lên cột kề bên. Thay bằng "bóng cuộn" ở cuối file. */
/* --- Dải cuộn ngang: làm mờ mép phải để lộ ra là "còn nữa" --- */
.chip-rail.is-scroll-x,.filter-chips.is-scroll-x{
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
@media (max-width:760px){
/* Nhãn cột luôn dùng font giao diện — ô .mono từng làm nhãn thành font mã. */
.tbl td::before{font-family:var(--font)}
/* Chặn máng nhãn phình quá rộng trên máy 414px+: giá trị bị đẩy xa nhãn. */
.tbl td,.tbl-myvideo td{padding-left:min(38%,118px)}
.tbl td::before{width:min(35%,106px)}
/* Thanh tiến độ chiếm hết chỗ còn lại -> mọi dòng % thẳng một trục. */
.prog{flex:1 1 auto;min-width:56px}
/* Ô thao tác rỗng (proxy tự sinh không có nút) thì bỏ hẳn, đừng để
nhãn "THAO TÁC" trơ trọi không có gì bên dưới. */
.tbl td.cell-empty-act{display:none}
/* Hàng công cụ phụ: cuộn ngang 1 hàng thay vì tràn 2–3 hàng. */
.toolbar-sub{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.toolbar-sub::-webkit-scrollbar{display:none}
.toolbar-sub>*{flex:0 0 auto}
/* Nhãn trục X của biểu đồ rộng hơn cột -> chừa chỗ để không cụt "09-1". */
.chart{padding-right:10px}
.chart .bar{flex:1 0 26px}
/* Ô tuỳ chọn của hàng nhập nhanh: lưới 2 cột thay vì wrap lởm chởm. */
.qa-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:center}
.qa-opts>*{width:100%;justify-content:space-between}
.qa-mini{width:100%}
.qa-num{width:100%;max-width:none}
/* MODAL: tách vùng cuộn — đầu và cụm nút luôn thấy, thân cuộn ở giữa.
Trước đây cả thẻ modal cuộn nên trường đầu tiên chui xuống dưới tiêu đề
dính, còn nút hành động thì nằm sát mép dưới màn hình. */
.modal-card,.modal-card.modal-wide{display:flex;flex-direction:column;overflow:hidden}
.modal-head{position:static}
.modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
overscroll-behavior:contain}
.modal-actions{position:sticky;bottom:0;z-index:1;background:var(--panel);
margin:16px -16px 0;padding:14px 16px calc(6px + var(--sab))}
}
/* --- Khối trang trí tròn của thẻ KPI ăn vào chữ trên màn rất hẹp --- */
@media (max-width:400px){
.stat::after{display:none}
}
/* ==========================================================================
VÒNG REVIEW 1 — SỬA XUNG ĐỘT ĐỘ ƯU TIÊN Ở CHẾ ĐỘ THẺ
Các rule của chế độ BẢNG có specificity cao hơn nên vẫn thắng trong thẻ;
ở đây khai báo lại với specificity đủ mạnh.
========================================================================== */
@media (max-width:760px){
/* `.tbl tbody tr:last-child td{border-bottom:none}` (0,2,3) thắng `.tbl td`
(0,1,1) -> THẺ CUỐI của mọi bảng mất sạch vạch ngăn giữa các ô, trông
khác hẳn thẻ phía trên (rõ nhất khi bảng chỉ có 1 dòng). */
.tbl tbody tr:last-child td{border-bottom:1px dashed var(--line)}
.tbl tbody tr td:last-child{border-bottom:none;padding-bottom:2px}
/* Chuỗi dài không dấu cách (token cookie, URL proxy, thông báo lỗi) tràn khỏi
thẻ rồi bị body{overflow-x:hidden} cắt mất — không có thanh cuộn để đọc tiếp. */
.tbl td{overflow-wrap:anywhere;word-break:break-word}
.tbl-myvideo .u-cell .mono{white-space:normal;overflow-wrap:anywhere}
/* Trạng thái rỗng: 34px padding làm thẻ cao ~90px trên điện thoại. */
.tbl td .empty{padding:18px 6px}
/* Hàng nhập nhanh ＋:
- 2 ô không có data-label vẫn sinh hộp ::before rỗng + margin 6px thừa
- ô cuối thật bị display:none nên ô hiển thị cuối còn vạch ngăn lửng */
#mv-quickadd td{padding-top:10px;padding-bottom:10px}
#mv-quickadd td:not([data-label])::before{display:none;margin:0}
#mv-quickadd .qa-row td:nth-last-child(2){border-bottom:none;padding-bottom:2px}
}
/* Vùng chạm 24×24 trên thiết bị cảm ứng khổ tablet (761–960px) — khối coarse
phía trên nằm TRƯỚC các rule kích thước nên bị ghi đè; khai báo lại ở cuối. */
@media (hover:none) and (pointer:coarse){
input[type="checkbox"],input[type="radio"]{width:24px;height:24px;min-width:24px}
}
/* nhãn nhỏ trong trang Cài đặt / bảng proxy — không mượn .badge vì .badge trần
không có nền, chỉ dùng được khi đi kèm .b- */
.tagx{display:inline-block;padding:2px 7px;border-radius:6px;font-size:10.5px;font-weight:600;
background:var(--panel2);color:var(--muted);border:1px solid var(--line);vertical-align:middle}
.tagx.warn{background:var(--amber-soft);color:var(--amber);border-color:rgba(255,178,62,.3)}
.tagx.ok{background:var(--green-soft);color:var(--green);border-color:rgba(39,208,136,.3)}
.tagx.err{background:var(--red-soft);color:var(--red);border-color:rgba(255,92,108,.3)}
/* công tắc ẩn input đi nên vòng focus mặc định vẽ vào ô 0x0 — vẽ lên phần nhìn thấy */
.switch input:focus-visible+span{outline:2px solid var(--brand2);outline-offset:2px}
label.set-label{margin:0;cursor:pointer;color:inherit;font-size:inherit;font-weight:inherit}
label.set-label .set-hint{display:block}
/* ==========================================================================
VÒNG REVIEW 2 — SỬA LỖI
========================================================================== */
/* --- B2: cột thao tác ghim NỔI ĐÈ lên cột dữ liệu kề bên khi bảng chưa cuộn
hết (header rụng còn "K", "CR", "TIẾN Đ"). JS đo bề rộng thật của cột ghim
và đặt vào --act-w; ở đây chừa đúng chỗ đó ra để không ô nào bị che.
Bảng không có cột thao tác thì --act-w không được đặt -> về 0, y như cũ. --- */
/* --- B3: ô ghim phải ăn theo nền của dòng (hover / dòng đang chạy), nếu không
nó là một mảng tối lệch màu cắt dọc qua dòng đang tô sáng. --- */
/* Mờ mép phải cho cả biểu đồ khi nó cuộn ngang (màn rất hẹp). */
.chart.is-scroll-x{
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
/* --- B4: cửa sổ THẤP (điện thoại nằm ngang, cửa sổ desktop bị kéo dẹt) cũng
cần tách vùng cuộn như bottom-sheet, nếu không cả thẻ modal cuộn và cụm nút
trôi mất hút. Trước đây chỉ áp cho màn HẸP (≤760px). --- */
@media (max-height:560px) and (min-width:761px){
.modal-card,.modal-card.modal-wide{display:flex;flex-direction:column;overflow:hidden}
.modal-head{position:static}
.modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
overscroll-behavior:contain}
.modal-actions{position:sticky;bottom:0;z-index:1;background:var(--panel);
margin:14px -20px 0;padding:12px 20px calc(6px + var(--sab))}
}
/* --- B9: hàng soạn job ở My Video bị bóp trong dải 761–1100px, nhãn nút đứt
giữa từ ("Nhập prompt rồi nhá"). Cho ô prompt và nút mỗi thứ một hàng. --- */
@media (max-width:1100px){
.qa-group{flex-wrap:wrap}
.qa-group #qa-prompt{flex:1 1 100%}
.qa-group .btn{flex:1 1 100%}
#qa-cookie{min-width:0}
}
/* --- B10: nhãn nội tuyến "độ dài" / "số lượng" gãy làm 2 dòng --- */
.qa-lbl{white-space:nowrap}
.qa-lbl .qa-num{flex:1 1 auto;min-width:0}
/* --- B11 + B14: cửa sổ thấp — nén sidebar để đủ 8 mục menu, và nén thẻ đăng
nhập để không phải cuộn ở điện thoại nằm ngang. --- */
@media (max-height:480px){
.sb-brand{padding-bottom:10px}
.sb-brand .logo-badge{width:28px;height:28px;font-size:14px}
.nav-item{padding:8px 12px;font-size:13px}
.sb-nav{gap:2px}
.sb-foot{padding-top:10px;margin-top:6px}
.avatar{width:30px;height:30px}
.auth-card{padding:18px 20px}
.auth-brand{margin-bottom:12px}
.auth-tabs{margin-bottom:12px}
.auth-form .btn{margin-top:12px}
.auth-hint{margin-top:10px}
}
/* ==========================================================================
BẢNG CUỘN NGANG — DẤU HIỆU "CÒN NỮA" MÀ KHÔNG CHE CHỮ
Cách cũ (ghim cột thao tác bằng position:sticky) sai về bản chất: ô ghim
luôn NỔI ĐÈ lên cột kề bên mọi lúc bảng chưa cuộn hết, làm header rụng còn
"K" / "CR". Chừa padding cũng vô ích vì ô ghim neo theo mép khung nhìn.
Thay bằng kỹ thuật "bóng cuộn": 2 lớp nền phủ (local) trôi theo nội dung và
2 lớp bóng (scroll) đứng yên ở hai mép — bóng chỉ lộ ra khi còn nội dung
phía đó, và tự tắt khi đã cuộn tới đầu/cuối. Bóng nằm ở lớp NỀN nên không
che chữ. Kèm thanh cuộn luôn nhìn thấy được.
========================================================================== */
.table-wrap.is-scroll-x{
background:
linear-gradient(90deg,var(--panel) 40%,rgba(20,27,45,0)) left center/28px 100% no-repeat local,
linear-gradient(270deg,var(--panel) 40%,rgba(20,27,45,0)) right center/28px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.5),rgba(0,0,0,0)) left center/12px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.5),rgba(0,0,0,0)) right center/12px 100% no-repeat scroll;
scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.table-wrap.is-scroll-x::-webkit-scrollbar{height:9px}
.table-wrap.is-scroll-x::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
.table-wrap.is-scroll-x::-webkit-scrollbar-thumb:hover{background:var(--muted2)}
.table-wrap.is-scroll-x::-webkit-scrollbar-track{background:transparent}
/* ==========================================================================
VÒNG REVIEW 2 — KHÔI PHỤC CÁC RULE MOBILE BỊ GHI ĐÈ
Media query KHÔNG cộng độ ưu tiên: rule cùng specificity đặt sau trong file
sẽ thắng, kể cả khi nó nằm ngoài media query. Mấy bản vá vòng 1 đặt ở cuối
file vì vậy đã vô tình giết một loạt rule mobile khai báo trước đó.
Khối này khai báo lại chúng — và phải là khối CUỐI CÙNG của file.
========================================================================== */
/* .btn-sm{min-height:30px} (bản sửa hồi quy PC) đã giết mức 36px cho cảm ứng */
@media (hover:none) and (pointer:coarse){
.btn-sm{min-height:36px}
/* .row-ctrl .btn-icon{min-width:27px} (0,2,0) thắng .btn-icon (0,1,0) nên cụm
4-5 nút vẫn là 27px; khai lại với đủ độ ưu tiên. */
.row-ctrl .btn-icon{min-width:38px}
}
/* Công tắc boolean của trang Cài đặt: input của nó phải giữ kích thước 0,
nếu không rule ô tick 24px ở trên biến nó thành hộp vô hình 24×24 đè lên. */
.switch input{width:0;height:0;min-width:0;min-height:0}
/* Trình duyệt chưa hỗ trợ :focus-visible thì vẫn phải thấy công tắc đang chọn */
.switch input:focus + span{outline:2px solid var(--brand2);outline-offset:2px}
@media (max-width:760px){
/* Ô chọn cookie ở hàng ＋ phải trải hết bề ngang thẻ — bản vá vòng 1
(#qa-cookie{max-width:230px} cho desktop) đã chặn mất. */
#qa-cookie{min-width:0;max-width:none;width:100%}
/* Cụm 4–5 nút được phép xuống dòng trong thẻ (ô rộng cả thẻ) —
.row-actions{flex-wrap:nowrap} của bản sửa hồi quy PC đã chặn. */
.tbl td.cell-act .row-ctrl{flex-wrap:wrap}
/* Nhãn 2 dòng chỉ cần 36px nếu kéo nó lên sát và bó dòng lại; 40px trước đó
cộng ~4,5px cho MỌI ô => +50px mỗi thẻ cookie (11 ô). */
.tbl td{min-height:36px}
.tbl td::before{top:9px;line-height:1.25}
/* Ô thao tác rỗng bị ẩn => ô hiển thị cuối vẫn còn vạch ngăn lửng ở đáy thẻ.
JS đánh dấu ô đứng ngay trước ô bị ẩn bằng .cell-last-visible. */
.tbl td.cell-last-visible{border-bottom:none;padding-bottom:2px}
/* Khoá cuộn trang nền khi bottom-sheet đang mở, nếu không vuốt quá đầu/cuối
thân modal là trang phía sau trôi mất vị trí đang đọc. */
body.modal-open{overflow:hidden}
}
/* Máy rất nhỏ (≤359px): nhãn nằm HẲN TRÊN giá trị. Khối gốc ở trên đã bị
.tbl td{padding-left:min(38%,118px)} của vòng 1 ghi đè, nên khai lại đây. */
@media (max-width:359px){
.tbl td,.tbl-myvideo td{padding-left:0}
.tbl td::before{position:static;width:auto;margin-bottom:4px;top:auto}
.tbl td{min-height:0}
}
/* Chỉ dành cho trình đọc màn hình — không chiếm chỗ, không nhìn thấy */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Chế độ tương phản cao của Windows: các thành phần vẽ tay bị hệ thống ép màu
sẽ mất hết trạng thái bật/tắt nếu không trả về hình dạng gốc. */
@media (forced-colors:active){
input[type="checkbox"]{-webkit-appearance:auto;appearance:auto;border:0}
.switch span{border:1px solid CanvasText}
.switch input:checked + span::after{background:Highlight}
.badge,.pill,.chip,.fchip{border:1px solid CanvasText}
.sb-backdrop{background:Canvas}
}
/* Giảm chuyển động: vòng quay "đang xử lý" mà đứng im thì trông như lỗi render,
nên cho nó quay chậm đều thay vì đóng băng ở một góc ngẫu nhiên. */
@media (prefers-reduced-motion:reduce){
.spin{animation-duration:1.6s!important;animation-iteration-count:infinite!important}
}
/* ==========================================================================
VÒNG REVIEW 3 — SỬA LỖI CHẶN BÀN GIAO
========================================================================== */
/* --- A. MODAL: chân cố định thật, không phải khối sticky nổi ---
JS đưa .modal-actions ra làm anh em của #modal-body. Thẻ modal thành 3 tầng:
đầu cố định · thân cuộn · chân cố định. Hết cảnh cụm nút đè lên ô "Ghi chú"
và hết cảnh nội dung lòi ra dưới thanh nút rồi bị đáy cắt ngang. */
.modal-card{display:flex;flex-direction:column;overflow:hidden}
.modal-head{flex:0 0 auto;position:static}
.modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
overscroll-behavior:contain}
.modal-card > .modal-actions{flex:0 0 auto;position:static;
margin:0;padding:14px 20px calc(14px + var(--sab));
border-top:1px solid var(--line);background:var(--panel)}
@media (max-width:760px){
.modal-card > .modal-actions{padding:12px 16px calc(12px + var(--sab))}
.modal-body{padding-bottom:14px}
}
/* --- B. Cửa sổ RẤT thấp (điện thoại nằm ngang): nén đủ để thấy trọn 8 mục menu
+ avatar + Đăng xuất mà không phải cuộn. --- */
@media (max-height:430px){
.sidebar{padding-top:calc(10px + var(--sat));padding-bottom:calc(10px + var(--sab))}
.sb-brand{padding:2px 6px 8px;font-size:14px}
.sb-brand .logo-badge{width:24px;height:24px;font-size:12px;border-radius:7px}
.sb-close{width:28px;height:28px}
.sb-nav{gap:1px}
.nav-item{padding:6px 10px;font-size:12.5px;border-radius:8px}
.nav-item i{width:16px;height:16px}
.sb-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:8px;margin-top:6px}
.sb-user{margin-bottom:0;flex:1 1 auto;min-width:0}
.avatar{width:26px;height:26px;border-radius:8px}
.role-pill{display:none}
.sb-foot .btn{flex:0 0 auto}
}
/* Nếu vẫn không đủ chỗ thì ít nhất phải thấy là "còn mục ở trên/dưới" */
.sb-nav.is-scroll-y{
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)}
/* --- C. Hàng nhập nhanh My Video: trong dải 761–1100px nó bị nhồi vào ô bảng
hẹp nên ô chọn cookie cụt còn "★ Tạ". Cho nó thoát khỏi lưới bảng. --- */
@media (min-width:761px) and (max-width:1100px){
#mv-quickadd,#mv-quickadd .qa-row,#mv-quickadd .qa-row > td{display:block;width:auto;max-width:none}
#mv-quickadd .qa-row{border-bottom:1px solid var(--line2);padding:4px 9px 10px}
#mv-quickadd .qa-row > td{border-bottom:none;padding:5px 0}
#mv-quickadd .qa-cell-plus,#mv-quickadd .qa-cell-pad{display:none}
#mv-quickadd .qa-cell-hint{padding-top:0}
#qa-cookie{min-width:0;max-width:340px;width:100%}
.qa-prompt-cell{min-width:0}
.qa-hint{max-width:none}
}
/* --- D. Thanh tiến độ tàng hình trong thẻ: máng của nó dùng đúng màu nền thẻ.
Cho máng một màu độc lập với nền cha. --- */
@media (max-width:760px){
.prog{background:var(--line)}
}
/* --- E. Bóng cuộn của bảng quá nhạt, gần như không thấy --- */
@media (min-width:761px){
.table-wrap.is-scroll-x{
background:
linear-gradient(90deg,var(--panel) 45%,transparent) left center/30px 100% no-repeat local,
linear-gradient(270deg,var(--panel) 45%,transparent) right center/30px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.62),transparent) left center/18px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.62),transparent) right center/18px 100% no-repeat scroll}
}
/* --- F. Nhãn giá trị trên cột biểu đồ chỉ hiện khi rê chuột -> trên mọi khổ
không có chuột thì mất hẳn, mà lúc hiện thì lại quá mờ. --- */
@media (max-width:1024px){
.chart .bar .b-val{opacity:1;color:var(--muted)}
}
/* ==========================================================================
VÒNG REVIEW 3 — LỖI ĐỘ ƯU TIÊN HAI VÒNG TRƯỚC BỎ SÓT
Lần này không phải "rule sau ghi đè rule trước" mà là SPECIFICITY: rule cũ
có độ ưu tiên cao hơn nên thắng dù bản sửa đứng sau. Khối này là khối CUỐI
CÙNG của file và mọi selector đều đủ mạnh để không phụ thuộc vị trí.
========================================================================== */
@media (max-width:760px){
/* E1: `.tbl tbody tr:last-child td` (0,2,3) thắng `.tbl td.cell-last-visible`
(0,2,1) -> thẻ CUỐI của bảng Proxy / Tạo Video vẫn còn vạch gạch lửng ở đáy
(proxy tự sinh và job đang chạy đều có ô thao tác rỗng bị ẩn). */
.tbl tbody tr td.cell-last-visible{border-bottom:none;padding-bottom:2px}
/* E2: `.tbl-myvideo tr.row-running` (0,2,1) thắng `.tbl tr` (0,1,2) -> thẻ của
job đang chạy mất nền --bg2, hoà vào nền panel, chỉ còn trơ cái viền. */
.tbl-myvideo tbody tr.row-running{
background:linear-gradient(rgba(255,178,62,.07),rgba(255,178,62,.07)),var(--bg2)}
/* E3: nhãn 2 dòng ("Tên Cookie / Định dạng") ở dải 481–760px cao 35,25px trong
ô 36px — chạm đúng vạch viền, không còn biên an toàn nào. Bó dòng lại. */
.tbl td::before{top:8px;line-height:1.2}
/* E15: mới chỉ .row-ctrl trong ô thao tác được xuống dòng; các bảng khác
(Cookie, Jobs, Users) vẫn nowrap và sẽ tràn ngay khi thêm nút thứ tư. */
.tbl td.cell-act .row-actions{flex-wrap:wrap}
/* E6: `.toolbar-sub>*{flex:0 0 auto}` làm .filter-chips rộng bằng nội dung
nên overflow-x của chính nó KHÔNG bao giờ cuộn -> chip lọc và nút xuất/xoá
dồn chung một dải rất dài. Trả .filter-chips về làm vùng cuộn riêng. */
.toolbar-sub{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
.toolbar-sub > .filter-chips{flex:1 1 100%;min-width:0}
/* E7: hàng ＋ là :last-child của tbody riêng nó nên mất khoảng cách với thẻ
dữ liệu đầu tiên. */
#mv-quickadd tr:last-child{margin-bottom:10px}
}
/* E10: `.switch input` (0,1,1) ngang bằng `input[type=checkbox]` (0,1,1) nên chỉ
thắng nhờ đứng sau — thêm bất kỳ rule checkbox nào ở cuối file là công tắc
trang Cài đặt lại thành hộp vô hình 24×24 đè lên UI. Nâng độ ưu tiên. */
label.switch > input{width:0;height:0;min-width:0;min-height:0;border:0;padding:0}
/* E17: forced-colors bật lại checkbox gốc nhưng dấu tick tự vẽ vẫn còn. */
@media (forced-colors:active){
input[type="checkbox"]::after{display:none}
}
/* E19: khối máy cực nhỏ tự chứa, không phụ thuộc `display:block` khai cách đó
~480 dòng ở khối ≤359px phía trên. */
@media (max-width:359px){
.tbl td,.tbl-myvideo td{padding-left:0}
.tbl td{min-height:0}
.tbl td::before{position:static;display:block;width:auto;margin-bottom:4px;top:auto}
}
/* Chip trạng thái (DOLA / Proxy / Worker) là thông tin để liếc mắt, không phải
danh sách để cuộn. Dải cuộn ngang làm chúng bị cắt giữa từ ("Wor…") — cả hai
vòng review đều báo là trông như lỗi. Cho xuống dòng: tốn ~30px chiều cao
nhưng đọc được trọn vẹn. */
@media (max-width:760px){
.chip-rail{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}
.chip-rail.is-scroll-x{-webkit-mask-image:none;mask-image:none}
}
/* Bảng 10–11 cột ở khổ laptop rộng hơn khung nên cột thao tác phải cuộn mới tới.
Nén padding ngang + cho tiêu đề cột xuống dòng thì bảng VỪA TRỌN KHUNG từ
1240px trở lên. Chỉ áp trong dải 1240–1600px: dưới 1240 cột hẹp lại vẫn không
đủ chỗ mà còn làm dòng cao gấp đôi (56px -> 104px), trên 1600 bảng vốn đã vừa. */
@media (min-width:1240px) and (max-width:1600px){
.tbl th{white-space:normal;line-height:1.25}
.tbl th,.tbl td{padding-left:8px;padding-right:8px}
.tbl-myvideo th,.tbl-myvideo td{padding-left:7px;padding-right:7px}
}
/* Bảng "Video của tôi" là một dòng cho MỖI cookie, kể cả cookie chưa tạo video
lần nào: dòng trống phải nhạt hẳn đi để không bị nhầm là job đang chờ. */
.tbl-myvideo tr.row-idle{opacity:.62}
.tbl-myvideo tr.row-idle td:first-child .seq-badge{border-color:var(--line);color:var(--muted2)}
.vid-empty{color:var(--muted2);font-style:italic}
/* ---- Cột VIDEO: nút ✎ + ô sửa tại chỗ ---- */
.vid-meta{display:flex;align-items:center;gap:7px;margin-top:2px}
.vid-meta .mono{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Nút nhỏ hơn nút thao tác cuối dòng: nó đứng chung với chữ, không phải một cụm. */
.vid-edit{min-width:24px;min-height:22px;padding:2px 6px;font-size:11px;line-height:1;
flex:0 0 auto;color:var(--cyan);opacity:.72;transition:.14s}
tr:hover .vid-edit,.vid-edit:focus-visible{opacity:1}
.vid-edit:hover{opacity:1;border-color:var(--cyan)}
.vid-edit[disabled]{opacity:.28}
/* Dòng trống bị làm nhạt cả dòng — đang sửa thì phải rõ mặt chữ trở lại. */
.tbl-myvideo tr.row-idle.row-editing{opacity:1}
.vid-cell.vid-editing{max-width:none;min-width:264px}
.vid-edit-box .ve-prompt{font-size:12.5px;padding:7px 9px;line-height:1.4;resize:vertical}
.vid-edit-box .qa-opts{margin-top:6px}
.ve-act{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ve-rerun{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.ve-rerun:hover{background:var(--amber);color:#0b0f16}
.ve-hint{margin-top:6px;font-size:11px;color:var(--muted2);line-height:1.45}
@media (max-width:760px){
.vid-cell.vid-editing{min-width:0}
.vid-edit{min-width:30px;min-height:28px;padding:4px 8px;font-size:13px;opacity:1}
}
/* ---- Trang Proxy: ba khối tách bạch ---- */
.panel-actions{display:flex;gap:8px;flex-wrap:wrap}
.px-note{margin-top:12px;line-height:1.6;font-size:12px}
.px-hint{margin-top:10px;font-size:11.5px;line-height:1.55}
/* Dòng hai trong ô: địa chỉ kỹ thuật đứng dưới tên cho dễ đọc */
.px-sub{display:block;font-size:11px;color:var(--muted);margin-top:3px;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.px-port{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:700}
.px-lane-job{background:var(--blue-soft,rgba(90,150,255,.14));color:var(--blue,#5a96ff)}
.px-lane-check{background:var(--amber-soft);color:var(--amber)}
/* ==========================================================================
BẢNG "VIDEO CỦA TÔI" — LƯỚI CỘT CỐ ĐỊNH
Bản cũ để bảng tự chia cột: tên cookie (chuỗi `sessionid:` 40 ký tự) kéo
cột Cookie phình lên 335px, cột Video — phần đáng đọc nhất — chỉ còn 290px,
và tổng bề ngang vượt khung nên cột thao tác bị cắt mất ở mép phải. Giờ mỗi
cột có bề ngang khai báo sẵn:
• sáu cột "hộp" (STT, Tiến độ, Trạng thái, Credit, Tải về, Thao tác) lấy
đúng số đo thật của thứ nằm trong nó — đo trên trình duyệt, không ước;
• hai cột chữ (Cookie 18%, Video phần còn lại) chia nhau chỗ dư, màn hình
càng rộng thì cột Video càng được thêm.
Nhờ vậy bề ngang cột không nhảy theo nội dung từng dòng: job đổi trạng thái,
video tải xong hiện thêm nút — bảng vẫn đứng yên.
========================================================================== */
@media (min-width:761px){
/* 1030px = vừa khít khung bảng trên màn 1366 (khung rộng 1036) — mức máy
hay gặp nhất, để không phải kéo ngang chỉ vì thiếu vài chục pixel. */
.tbl-myvideo{table-layout:fixed;min-width:1030px}
.tbl-myvideo .c-stt{width:42px} /* ô số thứ tự 24px + đệm */
.tbl-myvideo .c-ck{width:18%}
.tbl-myvideo .c-vid{width:auto} /* phần dư dồn hết về đây */
.tbl-myvideo .c-prog{width:128px} /* thanh 70 + khe 8 + số % 30 + đệm */
.tbl-myvideo .c-st{width:142px} /* badge + ô xem trước 118px */
.tbl-myvideo .c-cr{width:62px} /* bằng bề ngang chữ "CREDIT" ở tiêu đề */
.tbl-myvideo .c-dl{width:122px} /* nút "⬇ Tải về 655 KB" đo được 116px */
.tbl-myvideo .c-act{width:160px} /* 5 nút × 25px + 4 khe + đệm = 159px */
/* Sáu cột hộp đã siết sát số đo thật, nên siết luôn mấy thứ bên trong. */
.tbl-myvideo .row-ctrl{gap:4px}
.tbl-myvideo .row-ctrl .btn-icon{min-width:25px;padding:5px 5px}
.tbl-myvideo .prog-row .pct{min-width:30px}
/* Cột đã cố định thì chữ dài phải tự xuống dòng/cắt trong ô, không được
đẩy cột rộng ra nữa. */
.tbl-myvideo td{overflow-wrap:anywhere}
.tbl-myvideo .prog{min-width:70px}
.vid-cell{max-width:none}
/* Tên cookie cắt gọn một dòng (rê chuột xem đủ), thay vì kéo dài cả cột.
Chỉ phần CHỮ bị cắt: nhãn live/die luôn phải thấy được, cắt mất nó thì
không còn biết cookie nào đang sống. */
.tbl-myvideo .ck-ident{min-width:0;flex:1 1 auto}
.tbl-myvideo .ck-ident b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl-myvideo .ck-sub{display:flex;align-items:center;gap:6px;min-width:0}
.tbl-myvideo .ck-acc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl-myvideo .ck-sub .badge{flex:0 0 auto}
/* Tiêu đề bám theo nội dung bên dưới: số căn phải, cụm nút căn phải. */
.tbl-myvideo .th-num,.tbl-myvideo .th-act{text-align:right}
/* Hàng ＋: ô ghi chú ăn 2 cột, chip credit đẩy sát mép phải nên rơi đúng
dưới cột Credit của các dòng bên dưới. */
.qa-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qa-hint{max-width:none;min-width:0}
.qa-prompt-cell{min-width:0}
/* `overflow-wrap:anywhere` ở trên cho phép bẻ chữ giữa chừng — con số credit
mà bị bẻ thì thành ba dòng "~/2/4". Chip luôn giữ nguyên một dòng. */
.credit-chip{white-space:nowrap}
.qa-foot .credit-chip{flex:0 0 auto}
}
/* Khổ thẻ (<=760px) không có cột để căn: chip credit về lại dưới ghi chú. */
@media (max-width:760px){
.qa-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
}
/* ---- Hai bảng trang Proxy: cột hẹp phải bó sát, cột tên ăn hết chỗ còn lại ----
Mẹo width:100% + width:1%: trình duyệt cho cột 100% nuốt hết khoảng trống, các
cột còn lại co đúng bằng nội dung. Không có nó, bảng 1 dòng để hở một mảng lớn
bên phải rồi dồn mấy cột số vào một góc chật.
Cũng ghi đè media query 1240–1600px (nó cho tiêu đề xuống dòng cho bảng dày) —
ở đây tiêu đề ngắn, xuống dòng chỉ làm rối. */
#tbl-proxy-src th, #tbl-proxy-lane th{white-space:nowrap}
#tbl-proxy-src th:first-child,#tbl-proxy-src td:first-child{width:100%;min-width:230px}
#tbl-proxy-src th:not(:first-child),#tbl-proxy-src td:not(:first-child){width:1%;white-space:nowrap}
#tbl-proxy-lane th:last-child,#tbl-proxy-lane td:last-child{width:100%;min-width:180px}
#tbl-proxy-lane th:not(:last-child),#tbl-proxy-lane td:not(:last-child){width:1%;white-space:nowrap}
/* Dòng phụ dưới tên: cho phép xuống dòng vì địa chỉ có thể dài. */
#tbl-proxy-src td:first-child .px-sub{white-space:normal}
#tbl-proxy-lane td .px-sub{white-space:nowrap}
/* ---- Credit: số dư cookie ngay trong cột Cookie + cảnh báo khi thiếu ---- */
.ck-cr{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--amber);
background:var(--amber-soft);border-radius:6px;padding:1px 6px;line-height:1.5}
.ck-cr::before{content:'⚡';margin-right:2px;font-size:9px}
.ck-cr-low{color:var(--red);background:var(--red-soft)}
.credit-chip.credit-est{color:var(--muted)} /* "~N" = ước tính, chưa tiêu */
.credit-chip.credit-short{color:var(--red)}
.credit-chip.credit-cd{color:var(--cyan);font-weight:500;white-space:nowrap} /* đếm ngược tới lúc nạp lại credit */
.qa-warn{color:var(--red)}
.ve-cost{margin-top:7px;font-size:11.5px;color:var(--muted);line-height:1.45}
.ve-cost b{color:var(--txt)}
/* ==========================================================================
NHÃN LIVE / DIE CỦA COOKIE — phải đọc được khi chỉ liếc qua
Nhãn cũ dùng cỡ chữ phụ, màu nhạt, nằm lẫn giữa tên tài khoản và số credit
nên quét mắt dọc bảng gần như không thấy. Bản này: chữ IN HOA có giãn cách,
viền cùng màu trạng thái, chấm phát sáng — và cookie LIVE thì chấm thở nhẹ
để phân biệt ngay với DIE mà không cần đọc chữ.
(Khối reduced-motion chung ở trên đã tự tắt animation cho ai cần.)
========================================================================== */
.st-chip{text-transform:uppercase;letter-spacing:.06em;font-weight:800;
padding:2px 9px;font-size:10.5px;line-height:1.6;border:1px solid transparent}
.st-chip::before{width:6px;height:6px;box-shadow:0 0 5px currentColor}
.b-live.st-chip{background:rgba(39,208,136,.2);border-color:rgba(39,208,136,.5)}
.b-live.st-chip::before{animation:ckPulse 1.9s ease-in-out infinite}
.b-die.st-chip{background:rgba(255,92,108,.2);border-color:rgba(255,92,108,.5)}
.b-checking.st-chip{background:rgba(54,197,240,.18);border-color:rgba(54,197,240,.45)}
.b-unknown.st-chip{border-color:var(--line2)}
@keyframes ckPulse{0%,100%{opacity:1}50%{opacity:.35}}
/* Bảng Cookie: cột Trạng thái không chật, cho nhãn to hơn một bậc. */
#tbl-cookies .st-chip{font-size:11px;padding:3px 11px}
/* Cookie DIE: làm mờ cả dòng để các dòng LIVE nổi lên trước; rê chuột vào thì
dòng rõ lại để còn bấm nút thao tác (kiểm tra / sửa / xoá). */
#tbl-cookies tbody tr.row-die{opacity:.42;transition:opacity .15s ease}
#tbl-cookies tbody tr.row-die:hover{opacity:1}
/* My Video: thêm vạch màu dọc theo tên cookie. Cột này hẹp và ở khổ rộng thì
avatar bị ẩn, nên vạch là thứ duy nhất nhìn thấy được ở mọi khổ màn hình —
dòng nào xanh là cookie còn chạy được, đỏ là cookie chết. */
.tbl-myvideo .ck-ident{border-left:2px solid var(--line2);padding-left:8px}
.tbl-myvideo .u-cell.ck-live .ck-ident{border-left-color:var(--green)}
.tbl-myvideo .u-cell.ck-die .ck-ident{border-left-color:var(--red)}
/* Cookie chết thì tên mờ đi, để các dòng còn dùng được nổi lên trước. */
.tbl-myvideo .u-cell.ck-die .ck-ident>b{color:var(--muted)}
.tbl-myvideo .u-cell.ck-die .u-dot{background:linear-gradient(135deg,#7a3440,#a33a49)}
.tbl-myvideo .u-cell.ck-live .u-dot{background:linear-gradient(135deg,var(--green),#12a2b8)}
/* Job đang dở: dòng sessionid được thay bằng câu "Cookie sẵn sàng, chờ hệ thống
làm việc". Câu dài hơn sessionid nên cho xuống dòng thay vì cắt thành "…". */
.tbl-myvideo .ck-ident b.ck-wait{white-space:normal;overflow:visible}
/* ============ ĐĂNG NHẬP HỘ (admin vào tài khoản user) ============ */
.imp-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;flex:0 0 auto;
background:var(--amber-soft);border-bottom:1px solid var(--amber);color:var(--amber);font-size:13px;
padding:calc(8px + var(--sat)) calc(var(--padx) + var(--sar)) 8px calc(var(--padx) + var(--sal))}
.imp-bar b{color:var(--txt)}
.imp-bar .btn{background:var(--amber);color:#1a1300;font-weight:700}
.imp-bar .btn:hover{filter:brightness(1.08)}
.imp-bar + .topbar{padding-top:18px}
/* Chip "Hôm nay" (hạn mức video/ngày): xanh = còn nhiều, vàng = sắp hết, đỏ = hết lượt */
.chip-quota{cursor:help}
.chip-warn{color:var(--amber);border-color:var(--amber-soft)}
.chip-empty{color:var(--red);border-color:var(--red-soft)}
/* ==========================================================================
BẢNG "VIDEO CỦA TÔI" — CĂN HÀNG & CỘT
Bản trước: ảnh xem trước nằm dưới badge ở cột Trạng thái nên dòng xong cao
125px còn dòng chờ 87px; mọi ô dính mép trên nên số thứ tự 24px, thanh tiến
độ 8px, badge 24px, nút 30px đứng lệch nhau từng vài pixel; nút "Tải về
1007 KB" rộng hơn cột (122px) nên dính sát nút ↗, còn "⬇ +1" rớt xuống dưới.
Bản này:
• ảnh xem trước là khung cố định 45×60 đầu cột Video (dòng chưa có video
để khung trống cùng cỡ) -> dòng nào cũng cao như nhau, prompt thẳng hàng;
• mọi ô căn GIỮA theo chiều dọc -> các thứ trong một dòng chung một trục;
• cột Tải về là chồng nút cùng bề ngang "Biến thể 1 / 2…", dung lượng căn
phải; chưa có video thì chỉ một gạch "—" thay cho nút mờ ở mọi dòng.
========================================================================== */
.vid-row{display:flex;align-items:center;gap:11px;min-width:0}
.vid-body{flex:1 1 auto;min-width:0}
.vthumb{flex:0 0 auto;width:45px;height:60px;border-radius:7px}
.vprev.vthumb{width:45px;height:60px;margin-top:0;aspect-ratio:auto}
.vprev.vthumb .vprev-play{font-size:12px}
/* Dòng có nhiều biến thể: các ô xem trước xếp DỌC (cột ảnh vẫn rộng đúng 45px
nên prompt thẳng hàng với mọi dòng khác), góc trái ghi số biến thể khớp với
nút "Biến thể N" ở cột Tải về. */
.vthumbs{display:flex;flex-direction:column;gap:5px;flex:0 0 auto}
.vthumb-no{position:absolute;left:3px;top:3px;z-index:1;min-width:15px;height:15px;padding:0 4px;
border-radius:4px;background:rgba(11,15,26,.78);border:1px solid rgba(139,123,255,.55);
color:#fff;font:700 9.5px/13px var(--mono);text-align:center;pointer-events:none}
.vthumb-empty{display:grid;place-items:center;background:var(--bg2);border:1px dashed var(--line);color:var(--muted2)}
.vthumb-empty::after{content:'▶';font-size:10px;opacity:.35}
.vid-body .vid-title{margin-bottom:2px}
.dl-list{display:flex;flex-direction:column;gap:5px}
/* Mỗi biến thể đều có ô xem trước: giãn nút ra đúng nhịp ô (ô 60 + khe 5 − nút
30 = 35px). Hai ô cùng căn giữa theo chiều dọc nên nút N nằm ngang hàng ảnh N. */
@media (min-width:761px){ .dl-list.dl-align{gap:35px} }
@media (min-width:761px) and (hover:none) and (pointer:coarse){ .dl-list.dl-align{gap:29px} }
.dl-btn{display:flex;justify-content:space-between;align-items:center;gap:6px;width:100%;
min-height:30px;padding:5px 9px;font-size:12px;
background:var(--brand-soft);border-color:rgba(139,123,255,.38);color:var(--brand2)}
.dl-btn:hover{background:linear-gradient(135deg,var(--brand),var(--brand2));border-color:transparent;color:#fff}
.dl-btn .dl-name{white-space:nowrap}
.dl-btn .dl-size{color:inherit;opacity:.75;font-size:10.5px;white-space:nowrap}
/* Biến thể đã tải: nút lui về viền xám + dấu ✓, vẫn bấm tải lại được. */
.dl-btn.dl-done{background:transparent;border-color:var(--line2);color:var(--muted)}
.dl-btn.dl-done:hover{background:var(--panel2);border-color:var(--brand);color:var(--txt)}
/* Dòng mờ dần theo tỉ lệ biến thể đã tải (--dl = đã tải / tổng, JS gắn lên
):
1 video: tải xong là 0.4 (mờ hẳn); 2 biến thể: tải 1 -> 0.7, tải đủ 2 -> 0.4.
Rê chuột vào thì rõ lại để còn đọc và bấm tải biến thể còn lại. */
#mv-body tr.row-dl{opacity:calc(1 - .6 * var(--dl, 0));transition:opacity .2s ease}
#mv-body tr.row-dl:hover{opacity:1}
/* Gạch "—" đứng đúng chỗ chữ "⬇" của các nút phía trên/dưới, và cách xa số
credit "~4" ngay cột bên trái để không đọc dính thành "~4 —". */
.dl-none{font-size:12px;padding-left:10px}
@media (min-width:761px){
/* Trạng thái không còn gánh ảnh 118px: 142 -> 140 (vừa "thứ 19 trong hàng đợi"
trên một dòng). Tải về phải vừa
"⬇ Biến thể 1 · 1007 KB": 122 -> 150. Cookie 18% -> 17% bù lại cho cột Video. */
.tbl-myvideo .c-stt{width:44px}
.tbl-myvideo .c-ck{width:17%}
.tbl-myvideo .c-prog{width:122px}
.tbl-myvideo .c-st{width:140px}
.tbl-myvideo .c-cr{width:62px}
.tbl-myvideo .c-dl{width:150px}
.tbl-myvideo .c-act{width:160px}
#mv-body td{vertical-align:middle;padding-top:12px;padding-bottom:12px}
#mv-body .u-cell{align-items:center}
#mv-body .prog-note{margin-top:5px}
/* Đang mở ô sửa thì dòng cao vọt: các ô khác bám mép trên cho dễ đối chiếu. */
#mv-body tr.row-editing td{vertical-align:top}
}
/* Màn laptop (bảng rộng ~1030–1170px): sáu cột hộp siết lại để cột Video còn
đủ chỗ đọc prompt sau khi nhường 56px cho ảnh. Dung lượng file ẩn khỏi nút
(vẫn nằm trong tooltip) để nút "⬇ Biến thể N" vừa cột 122px. */
@media (min-width:761px) and (max-width:1500px){
.tbl-myvideo .c-ck{width:16%}
.tbl-myvideo .c-prog{width:98px}
.tbl-myvideo .c-st{width:132px}
.tbl-myvideo .c-cr{width:58px}
.tbl-myvideo .c-dl{width:122px}
.tbl-myvideo .prog{min-width:44px}
.dl-btn .dl-size{display:none}
.dl-btn{justify-content:flex-start}
}
@media (max-width:760px){
.vid-row .vthumb{width:54px;height:72px}
.dl-list{max-width:240px}
}
@media (hover:none) and (pointer:coarse){
.dl-btn{min-height:36px}
}
/* ==========================================================================
BẢNG COOKIE — CĂN CỘT + PHÂN TRANG
Bản trước để trình duyệt tự chia bề ngang: cột Tên phình to đẩy Tài khoản ra
giữa bảng, các cột giá trị ngắn (Credit / Video / Kiểm tra) lệch trái dưới
tiêu đề, cụm nút cuối dòng không có tiêu đề cột.
Bản này: table-layout:fixed — mọi cột (trừ Tên) có bề ngang cố định, cột giá
trị ngắn căn GIỮA cả tiêu đề lẫn ô; cột chữ (User, Tên, Tài khoản) căn trái,
một dòng, dài quá thì "…" (rê chuột xem đủ) -> mọi dòng cao bằng nhau. Cột Tên
ăn phần còn lại; bảng có min-width để khổ hẹp thì cuộn ngang chứ không bóp nát.
(Đừng đổi về auto + width:100% cho cột Tên: auto layout ưu tiên cột %, bóp các
cột cố định về bề ngang tối thiểu — Tài khoản còn 91px, tên rớt 2 dòng.)
Chỉ áp ở khổ bảng (>760px) — dưới đó mỗi dòng là một thẻ, căn trái như cũ.
========================================================================== */
@media (min-width:761px){
#tbl-cookies{table-layout:fixed;min-width:960px}
body.is-admin #tbl-cookies{min-width:1020px}
/* Số đo thật (14/09/2026) + 24px đệm: chip "kiểm tra" 96, đồng hồ "⏳ 23:59:59"
84, cụm 3 nút 112, avatar + tên user 126. Đổi số nào ở đây thì tính lại hai
ngưỡng container ở khối "BẢNG RỘNG" ngay dưới. */
#tbl-cookies .col-check{width:44px}
#tbl-cookies .ck-c-stt{width:56px}
#tbl-cookies .ck-c-user{width:150px}
#tbl-cookies .ck-c-acc{width:180px}
#tbl-cookies .ck-c-st{width:124px}
#tbl-cookies .ck-c-cr{width:112px}
#tbl-cookies .ck-c-vid{width:80px}
#tbl-cookies .ck-c-chk{width:96px}
#tbl-cookies .ck-c-act{width:140px}
#tbl-cookies :is(th,td):is(.ck-c-stt,.ck-c-st,.ck-c-cr,.ck-c-vid,.ck-c-chk,.ck-c-act){text-align:center}
#tbl-cookies td.ck-c-act .row-actions{justify-content:center}
#tbl-cookies th:not(.col-check){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tbl-cookies td.ck-c-acc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tbl-cookies td.ck-c-user .u-cell{white-space:nowrap;overflow:hidden}
#tbl-cookies .ck-name{display:flex;align-items:center;gap:7px;min-width:0}
#tbl-cookies .ck-name b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tbl-cookies .ck-name .fmt-badge{flex:0 0 auto}
#tbl-cookies .ck-idn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* Khổ laptop: siết các cột hộp để cột Tên còn đủ chỗ đọc. */
@media (min-width:761px) and (max-width:1500px){
#tbl-cookies .ck-c-stt{width:52px}
#tbl-cookies .ck-c-user{width:120px}
#tbl-cookies .ck-c-acc{width:150px}
#tbl-cookies .ck-c-st{width:112px}
#tbl-cookies .ck-c-cr{width:104px}
#tbl-cookies .ck-c-vid{width:64px}
#tbl-cookies .ck-c-chk{width:84px}
#tbl-cookies .ck-c-act{width:124px}
}
/* BẢNG RỘNG — rải phần dư cho MỌI cột thay vì dồn hết vào cột Tên.
Cột Tên để auto thì màn 1920 nó rộng ~690px trong khi tên dài nhất (sessionid
40 ký tự + nhãn JSON) chỉ cần ~400px: hở một mảng ~300px rồi mới tới Tài khoản,
còn các cột số bó sát nhau ở mép phải. Khi bảng đã đủ chỗ cho cột Tên 400px thì
khai luôn nó bằng px: table-layout:fixed không còn cột auto sẽ chia phần dư
THEO TỈ LỆ cho mọi cột (đã thử trên Chrome) -> tỉ lệ cột giữ nguyên ở mọi khổ.
Ngưỡng = tổng các cột cố định + 400, nên đúng tại ngưỡng cột Tên auto cũng bằng
400px -> qua ngưỡng bảng không giật.
không có cột User: 44+56+180+124+112+80+96+140 + 400 = 1232
admin (+ User 150): 1382
Đo theo bề ngang KHUNG BẢNG (container query), không theo màn hình: chiều
rộng sidebar/đệm trang đổi theo khổ nên media query sẽ lệch ngưỡng. */
@media (min-width:761px){
#page-cookies .table-wrap{container:ck-table / inline-size}
}
@container ck-table (min-width:1232px){
body:not(.is-admin) #tbl-cookies .ck-c-name{width:400px}
}
@container ck-table (min-width:1382px){
#tbl-cookies .ck-c-name{width:400px}
}
/* Tên dạng "sessionid:": tiền tố giống hệt ở mọi dòng nên lùi màu, phần
giá trị mới là thứ phân biệt cookie. Khổ laptop cột Tên chỉ ~180px — giữ tiền tố
thì chỉ còn thấy "sessionid:d019…", nên ẩn hẳn (rê chuột vẫn thấy tên đủ). */
#tbl-cookies .ck-key{color:var(--muted);font-weight:500}
@media (min-width:761px) and (max-width:1500px){
#tbl-cookies .ck-key{display:none}
}
/* Card mode (≤760px): cột Tên là một ô thường, không cắt chữ. */
@media (max-width:760px){
#tbl-cookies .ck-name{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#tbl-cookies .ck-name b{min-width:0;overflow-wrap:anywhere}
}
/* Thanh phân trang cookie: nền .pager / .pg-btn / .pg-gap dùng CHUNG với bảng
Hàng đợi (khai ở mục "STT + phân trang") cho hai bảng cùng một kiểu; ở đây
chỉ thêm phần riêng, và mọi thứ gói trong #cookie-pager để không đè bảng kia. */
#cookie-pager{justify-content:space-between;gap:10px 18px}
#cookie-pager .pg-info{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;min-width:0}
#cookie-pager .pg-sel{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
#cookie-pager .pg-sel:empty{display:none}
#cookie-pager .pg-sel::before{content:"|";color:var(--line2);margin-right:4px}
#cookie-pager .pg-dot{color:var(--muted2)}
#cookie-pager .pg-link{background:none;border:0;padding:0;min-height:0;color:var(--brand2);font:inherit;font-weight:600;cursor:pointer}
#cookie-pager .pg-link:hover{text-decoration:underline}
#cookie-pager .pg-ctrl{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
#cookie-pager label.pg-size{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12.5px;white-space:nowrap}
#cookie-pager .pg-size select{width:auto;min-height:30px;padding:4px 28px 4px 8px;font-size:12.5px;background-position:right 9px center}
#cookie-pager .pg-nav{display:flex;align-items:center;gap:5px}
#cookie-pager .pg-gap{min-width:18px;text-align:center}
@media (max-width:760px){
#cookie-pager{justify-content:center}
#cookie-pager .pg-info{width:100%;justify-content:center;text-align:center}
#cookie-pager .pg-ctrl{justify-content:center}
}
@media (hover:none) and (pointer:coarse){
#cookie-pager .pg-btn{min-width:38px;height:38px}
}
/* Proxy riêng từng user (14/09/2026): dải báo trên form Tạo video + trang Proxy của tôi */
.px-banner{margin:0 0 12px;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.55;border:1px solid var(--line);background:var(--bg2)}
.px-banner.warn{border-color:var(--red);background:var(--red-soft);color:var(--txt)}
.px-banner.ok{border-color:var(--line)}
.px-banner .btn{margin-left:8px;vertical-align:middle}
#page-myproxy .proxy-summary{margin-bottom:10px}
/* ---- Nhập proxy kiểu novivo: dán 1 dòng, tự tra kho (14/09/2026) ---- */
.px-paste{font-family:var(--mono);font-size:12.5px}
textarea.px-paste{min-height:84px}
.px-detect{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.px-det{border:1px solid var(--line);background:var(--bg2);border-radius:8px;padding:7px 10px;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.px-det b{font-weight:600}
.px-det.ok{border-color:rgba(46,204,113,.55)}
.px-det.warn{border-color:var(--amber)}
.px-det.err{border-color:var(--red);background:var(--red-soft)}
.px-det .mono{color:var(--txt)}
.px-manual{margin-top:12px;border:1px dashed var(--line);border-radius:10px;padding:0 12px}
.px-manual>summary{cursor:pointer;padding:9px 0;font-size:12.5px;color:var(--muted);list-style:none}
.px-manual>summary::-webkit-details-marker{display:none}
.px-manual>summary::before{content:'▸ ';display:inline-block;transition:transform .15s}
.px-manual[open]>summary::before{transform:rotate(90deg)}
.px-manual[open]{padding-bottom:12px}
.px-check{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-right:8px;white-space:nowrap}
.px-check input{width:auto}
.px-exp{display:block;font-size:11px;margin-top:3px}
.px-exp.soon{color:var(--amber)}
.px-exp.gone{color:var(--red)}
#tbl-px-stock .row-actions{justify-content:flex-end}
#tbl-px-stock td{vertical-align:middle}
/* ===== NHẬT KÝ HOẠT ĐỘNG đủ tính năng (14/09/2026): thanh công cụ + nhãn dòng ===== */
.log-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.log-tools .search{max-width:320px}
.log-tools .log-user-sel{width:auto;min-width:150px;max-width:220px;padding-top:6px;padding-bottom:6px}
.log-tools .log-info{font-size:11.5px;margin-left:auto}
.log-tools #log-live.active{border-color:var(--amber);color:var(--amber)}
.log-job-chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);
border-radius:20px;padding:2px 4px 2px 11px;font-size:12px}
.log-job-chip .btn-icon{min-height:24px;min-width:24px;padding:2px 6px;border-radius:12px}
#log-filters .lf-n{font-weight:500;font-size:11px;color:var(--muted2);margin-left:2px}
#log-filters .lf-n:empty{display:none}
.log-item .lm{flex:1;min-width:0;line-height:1.5;overflow-wrap:anywhere}
.log-item .lg-type{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.02em;padding:1px 7px;border-radius:10px;
margin-right:6px;vertical-align:1px;background:var(--panel2);color:var(--muted)}
.log-item .lg-type.lg-error{color:var(--red);background:rgba(255,92,108,.12)}
.log-item .lg-type.lg-job{color:var(--cyan)}
.log-item .lg-type.lg-cookie{color:var(--green)}
.log-item .lg-type.lg-health{color:var(--amber)}
.log-item .lg-user,.log-item .lg-job{font:inherit;font-size:11.5px;background:none;border:1px solid var(--line);color:var(--txt);
border-radius:10px;padding:0 7px;margin-right:6px;cursor:pointer;vertical-align:1px;line-height:18px}
.log-item .lg-job{font-family:var(--mono);color:var(--muted)}
.log-item .lg-user:hover,.log-item .lg-job:hover{border-color:var(--brand);color:var(--brand)}
.log-feed .log-more{align-self:center;margin:8px 0 4px}
@media (max-width:760px){
.log-tools .search{max-width:100%;flex:1 1 100%}
.log-tools .log-user-sel{flex:1 1 auto;max-width:none}
.log-tools .log-info{margin-left:0;flex:1 1 100%}
.log-item .lg-user,.log-item .lg-job{line-height:22px}
}
/* ===== Popup cảnh báo proxy của chính tài khoản (15/09/2026) ===== */
.px-alert p{margin:0 0 10px;line-height:1.55}
.px-alert-list{margin:0 0 12px;padding-left:20px;line-height:1.6}
.px-alert-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
@media (max-width:760px){ .px-alert-actions .btn{flex:1 1 100%} }
/* Popup thông báo (hạn mức ngày) đè lên #modal đang mở, vẫn dưới toast */
.modal.notice-pop{z-index:150}
.px-alert p.muted{font-size:12.5px}
/* Cookie ảo (server/virtualCookies.js): viền nét đứt + đồng hồ tự xoá, nhìn là biết không phải cookie thật */
#tbl-cookies tbody tr.row-virtual td{background:rgba(109,94,252,.05)}
#tbl-cookies tbody tr.row-virtual td:first-child{box-shadow:inset 3px 0 0 var(--brand2)}
.b-virtual{background:var(--brand-soft);color:var(--brand2)}
.b-virtual.st-chip{border:1px dashed rgba(139,123,255,.55)}
.virt-cd{display:inline-block;font-family:var(--mono);font-weight:600;font-size:12px;color:var(--brand2);background:var(--brand-soft);border:1px dashed rgba(139,123,255,.55);border-radius:999px;padding:2px 8px;white-space:nowrap}
.virt-cd.badge-xs{font-size:11px;padding:1px 6px;margin-left:6px}
.virt-sub{color:var(--muted)}
/* Bản sao cùng tài khoản DOLA đã tắt (server/cookieDedup.js) */
.tag-chip.dup-chip{background:var(--amber-soft);color:var(--amber);border:1px dashed rgba(255,178,62,.5);margin-left:4px}
.px-alert .gift-n{font-size:22px;color:var(--green);font-variant-numeric:tabular-nums;margin-left:4px}
/* Cột TAG của My Video (18/09/2026): ghi chú riêng của nhân viên trên từng dòng — bấm vào là sửa tại chỗ.
Chữ dài xuống tối đa 2 dòng rồi cắt (rê chuột xem đủ); ô trống chỉ hiện mờ "＋ tag", rõ lên khi rê vào dòng. */
.mv-tag{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:100%;
padding:3px 7px;border-radius:6px;border:1px solid var(--line2);background:var(--bg2);color:var(--txt);
font:inherit;font-size:12px;line-height:1.35;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.mv-tag:hover,.mv-tag:focus-visible{border-color:var(--brand)}
.mv-tag-empty{border-style:dashed;background:transparent;color:var(--muted2);opacity:.5;white-space:nowrap}
#mv-body tr:hover .mv-tag-empty,.mv-tag-empty:focus-visible{opacity:1}
.mv-tag-input{width:100%;min-width:0;padding:4px 6px;font-size:12px;border-radius:6px}
/* Ô Tag ở hàng ＋ (tag gắn kèm video sắp tạo) — nằm đúng cột Tag. */
#qa-tag{width:100%;min-width:0;padding:9px 8px}
/* Laptop: cột Cookie còn 14% (~145px ở 1366) < min-width 150 cũ của ô chọn cookie -> nó tràn đè ô prompt. Co vừa cột. */
@media (min-width:761px) and (max-width:1500px){
#qa-cookie{min-width:0;max-width:none;width:100%}
}
@media (min-width:761px){
.tbl-myvideo .c-tag{width:92px}
}
/* Laptop: cột Tag lấy bớt của cột Cookie (16% -> 14%) để cột Video không hẹp đi. */
@media (min-width:761px) and (max-width:1500px){
.tbl-myvideo .c-tag{width:84px}
.tbl-myvideo .c-ck{width:14%}
}
/* ===== Kho video admin: khung tự động admingridmedia (gọn, cuộn trong khung) ===== */
.agm{margin-bottom:14px}
.agm-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.agm-head h3{margin:0;font-size:15px}
.agm-actions{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.agm-switch{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;user-select:none}
.agm-switch input{position:absolute;opacity:0;pointer-events:none}
.agm-switch span{width:30px;height:17px;border-radius:9px;background:var(--line2);position:relative;transition:.15s;flex:0 0 auto}
.agm-switch span::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:.15s}
.agm-switch input:checked + span{background:var(--green)}
.agm-switch input:checked + span::after{left:15px}
.agm-switch input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.agm-sum{font-size:12px;margin:6px 0 10px}
.agm-filter{margin-bottom:8px}
.agm-wrap{max-height:380px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.agm-tbl{margin:0}
.agm-tbl thead th{position:sticky;top:0;z-index:1;background:var(--panel)}
.agm-tbl td{padding-top:7px;padding-bottom:7px;vertical-align:middle;font-size:12.5px}
.agm-t{max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.agm-id{font-size:11px;color:var(--muted);font-family:var(--mono,monospace)}
.agm-note{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.agm-time{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
.agm-time b{color:var(--txt);font-weight:600}
.agm-foot{margin-top:8px}
.agm-foot:empty,.agm-foot:has(> [hidden]:only-child){display:none}
@media (max-width:640px){
.agm-actions{margin-left:0;width:100%;flex-wrap:nowrap}
.agm-actions .btn{flex:1 1 auto;padding-left:8px;padding-right:8px;white-space:nowrap}
.agm-t{max-width:180px}
.agm-tbl th:nth-child(4),.agm-tbl td:nth-child(4){display:none}
}