/* ===========================================================================
   FILE MÁY SINH — ĐỪNG SỬA TAY.
   Nguồn: web/index.html (toàn bộ khối <style> của UI thật, nguyên văn).
   Sinh lại: python license_server/scripts/sinh-demo.py
   =========================================================================== */


  :root{
    /* ViralCrawl 2026 SaaS design system (theo spec user): nền near-black xanh + glass tím neon */
    --bg:#070711; --bg2:#111325; --panel:#10162400; --card:#0d0f1f; --card2:#16182c;
    --line:rgba(255,255,255,.08); --text:#ffffff; --muted:#a1a1aa;
    --accent:#ec4899; --accent2:#38bdf8; --ok:#22c55e; --warn:#f59e0b; --purple:#8b5cf6;
    /* Glassmorphism: thẻ kính mờ rgba trắng (nổi trên nền near-black) + blur + viền sáng nhẹ */
    --glass:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
    --glass-bd:rgba(255,255,255,.085);
    --grad:linear-gradient(135deg,#8b5cf6 0%,#a855f7 50%,#ec4899 100%);
    --glow:0 0 35px rgba(139,92,246,.45);
  }
  /* Inter — font thiết kế của app, BUNDLE offline (web/fonts/*.woff2, stage_app copy web/ -Recurse).
     'Inter' đứng đầu stack ở body + #v-render2/.r2-scope + #vcpd ⇒ MỌI tab render CÙNG một font.
     Thiếu file (404) → fallback 'Segoe UI' đồng nhất, không vỡ. Variable wght 400..800 phủ 400/600/650/700/750. */
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
    src:url('/assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
    src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
    src:url('/assets/fonts/inter-vietnamese.woff2') format('woff2');
    unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Inter','Segoe UI',system-ui,Arial,sans-serif;background:
       radial-gradient(circle at 100% 0%, rgba(139,92,246,.18), transparent 38%),
       radial-gradient(900px 560px at 6% -10%, rgba(99,102,241,.12), transparent 55%),
       linear-gradient(135deg, #070711, #111325) fixed;
       color:var(--text);height:100vh;overflow:hidden}
  .app{display:flex;height:100vh}

  /* Sidebar (glass theo spec) */
  .side{width:230px;background:rgba(15,16,32,.72);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
        border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px}
  .brand{display:flex;align-items:center;gap:11px;padding:6px 6px 18px}
  .brand .logo{width:42px;height:42px;border-radius:13px;object-fit:cover;flex-shrink:0;
        box-shadow:0 3px 16px rgba(124,92,255,.40),inset 0 1px 0 rgba(255,255,255,.07)}
  .brand b{font-size:16px;letter-spacing:.2px}
  .nav{display:flex;flex-direction:column;gap:4px;margin-top:6px;flex:1 1 auto;overflow-y:auto;min-height:0}
  .nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;color:var(--muted);
        cursor:pointer;font-size:14px;font-weight:600;transition:.15s}
  .nav a:hover{background:rgba(139,92,246,.15);color:var(--text)}
  .nav a.active{background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(99,102,241,.22));
        color:#fff;border:1px solid rgba(139,92,246,.4);box-shadow:0 0 30px rgba(139,92,246,.25)}
  .nav a .ic{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .nav a .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
        stroke-linecap:round;stroke-linejoin:round;opacity:.9;transition:.15s}
  .nav a:hover .ic svg,.nav a.active .ic svg{opacity:1}
  .nav a.active .ic svg{stroke:#a78bff;filter:drop-shadow(0 0 6px rgba(124,92,255,.6))}
  /* ===== Gói & Bảng giá ===== */
  .nav a.locked{opacity:.5}
  .nav a.locked::after{content:"🔒";margin-left:auto;font-size:12px}
  .goi-lock{opacity:.45;pointer-events:none;filter:grayscale(.45)}
  .plat.plat-khoa{opacity:.42;filter:grayscale(.6);cursor:not-allowed;position:relative}
  .plat.plat-khoa::after{content:"🔒";position:absolute;top:6px;right:8px;font-size:12px;opacity:.9}
  /* P05: badge 🔒 phủ card thứ 4+ (free/expired). pointer-events:auto để click -> bảng giá dù card goi-lock */
  .lock-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
    background:rgba(4,7,14,.5);color:#fff;font-weight:800;font-size:13px;cursor:pointer;pointer-events:auto;z-index:6;border-radius:12px;padding:6px;filter:grayscale(0)}
  /* P06: expired -> disable MỌI nút/input thao tác toàn app (TRỪ tab Gói/Bảng Giá + nút nâng cấp/kiểm-tra-cập-nhật + badge khóa) */
  body.app-expired .content section:not(#v-goi):not(#v-banggia) button:not(.bn-up):not(.bn-x):not([data-keep-expired]),
  body.app-expired .content section:not(#v-goi):not(#v-banggia) input,
  body.app-expired .content section:not(#v-goi):not(#v-banggia) textarea,
  body.app-expired .content section:not(#v-goi):not(#v-banggia) select{
    pointer-events:none!important;opacity:.5;filter:grayscale(.3)}
  body.app-expired .content section:not(#v-goi):not(#v-banggia) .lock-badge{pointer-events:auto!important;opacity:1;filter:none}
  #goiBanner.nhayUp{animation:nhayUp 1.3s ease-in-out infinite}
  @keyframes nhayUp{0%,100%{transform:scale(1)}50%{transform:scale(1.05);box-shadow:0 0 20px 3px rgba(255,45,85,.55)}}
  @keyframes vcspin{to{transform:rotate(360deg)}}
  .vcspin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--purple);border-radius:50%;animation:vcspin .7s linear infinite;flex:none}
  .btn-naicap{animation:nhayUp 1.3s ease-in-out infinite;background:linear-gradient(90deg,#ff2d55,#ff6b3d);color:#fff;border:0;border-radius:12px;padding:12px 24px;font-weight:800;cursor:pointer;font-size:15px}
  #goiBanner{display:none;align-items:center;gap:12px;padding:10px 20px;background:linear-gradient(90deg,rgba(255,45,85,.2),rgba(255,107,61,.08));border-bottom:1px solid rgba(255,45,85,.45);font-size:14px}
  #goiBanner .bn-up{background:linear-gradient(90deg,#ff2d55,#ff6b3d);color:#fff;border:0;border-radius:9px;padding:7px 16px;font-weight:700;cursor:pointer;white-space:nowrap}
  #goiBanner .bn-x{margin-left:auto;cursor:pointer;opacity:.7;font-size:18px;background:none;border:0;color:inherit}
  .bg-grid{display:grid;grid-template-columns:.95fr 1fr 1.09fr;gap:22px;max-width:1240px;margin:18px auto 0;align-items:center}   /* 16/09: 3 gói */
  .bg-tang3d{max-width:520px;margin:16px auto 6px;padding:10px 18px;border-radius:14px;display:flex;gap:12px;align-items:center;   /* 17/09 tối: thu nhỏ, 1 dòng */
    background:linear-gradient(135deg,#3b0764,#6d28d9 45%,#be185d);color:#fff;border:1px solid rgba(251,191,36,.45);
    box-shadow:0 22px 44px -18px rgba(124,58,237,.7),inset 0 1px 0 rgba(255,255,255,.18);transform:perspective(900px) rotateX(5deg);transform-origin:50% 100%}
  .bg-tang3d .g{font-size:26px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
  .bg-tang3d .h{font-size:17px;font-weight:900;color:#fde68a;text-shadow:0 1px 0 #d97706,0 2px 0 #b45309,0 3px 0 #92400e,0 6px 14px rgba(0,0,0,.45)}
  .bg-tang3d .t{margin-left:auto;background:linear-gradient(180deg,#fde68a,#f59e0b);color:#3b2a00;font-weight:900;font-size:12px;padding:7px 11px;border-radius:10px;transform:rotate(-4deg);box-shadow:0 8px 18px rgba(245,158,11,.45)}
  .bg-card{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:24px 22px;position:relative;display:flex;flex-direction:column}
  .bg-card.hot{border-color:#7c5cff;box-shadow:0 8px 30px rgba(124,92,255,.18)}
  .bg-ten{font-size:19px;font-weight:900;letter-spacing:2.5px;background:linear-gradient(90deg,#f5c518,#ffa500,#ffd700,#f5c518);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}
  .bg-gia{font-size:36px;font-weight:900;margin-top:12px;line-height:1}
  .bg-gia small{font-size:15px;font-weight:700;opacity:.8}
  .bg-compare{display:block;font-size:17px;font-weight:700;color:var(--muted);text-decoration:line-through;opacity:.75;margin-bottom:6px;line-height:1.3}
  .bg-tong{font-size:12px;color:var(--muted);margin-top:5px;opacity:.85}
  .bg-card ul{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:8px;font-size:13px;flex:1}
  .bg-card li{display:flex;gap:8px;align-items:flex-start;line-height:1.4}
  .bg-card li::before{content:"✓";color:#3ddc84;font-weight:800}
  .bg-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#7c5cff;color:#fff;font-size:11px;font-weight:800;padding:3px 13px;border-radius:20px;white-space:nowrap}
  .bg-cur{position:absolute;top:-11px;right:14px;background:#3ddc84;color:#04210f;font-size:11px;font-weight:800;padding:3px 11px;border-radius:20px}
  .bg-giam{display:inline-block;vertical-align:middle;margin-left:8px;background:rgba(239,68,68,.18);color:#f87171;font-size:12px;font-weight:800;padding:2px 9px;border-radius:20px}
  .bg-per{display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px}
  .bg-per button{border:0;background:none;color:var(--muted);padding:8px 16px;border-radius:9px;cursor:pointer;font-weight:700;font-size:13px}
  .bg-per button.on{background:linear-gradient(90deg,#7c5cff,#a47bff);color:#fff}
  /* Tính năng Pro KHÓA — gạch ngang + mờ + hover gợi ý nâng gói */
  .bg-card li.bg-lock{opacity:.5;cursor:help}
  .bg-card li.bg-lock::before{content:"🔒";color:#f5c518}
  .bg-card li.bg-lock span{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.4)}
  .bg-card li.bg-lock:hover{opacity:.85}
  .bg-val{color:#f5c518;font-weight:800}
  /* 22/09/2026 — 3 dòng NỔI BẬT đầu thẻ + dòng nền tảng dạng CHIP (nền không thuộc gói = gạch ngang) */
  .bg-card li.bg-noi{background:rgba(245,197,24,.08);border:1px solid rgba(245,197,24,.25);border-radius:8px;padding:6px 8px;font-weight:700}
  .bg-card li.bg-noi.bg-lock{background:transparent;border-color:rgba(255,255,255,.1);font-weight:600}
  .bg-card li.bg-nen>div{flex:1;min-width:0}
  .nen-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
  .nen-chip{font-size:11px;line-height:1.5;padding:1px 7px;border-radius:999px;background:rgba(61,220,132,.12);
    border:1px solid rgba(61,220,132,.32);color:#d6ffe6;font-weight:600;white-space:nowrap}
  .nen-chip.off{background:transparent;border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.38);
    text-decoration:line-through;font-weight:500}
  /* Gói UNLIMITED — viền crom vàng + card 3D nổi bật */
  .bg-card.best{border:2px solid transparent;z-index:2;transform:scale(1.05);
    background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,#fff3b0,#f5c518,#a9781a,#ffe066,#f5c518) border-box;
    box-shadow:0 16px 46px rgba(245,197,24,.28),0 2px 0 rgba(255,255,255,.06) inset;transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s}
  .bg-card.best:hover{transform:scale(1.07) translateY(-6px);box-shadow:0 28px 64px rgba(245,197,24,.44)}
  .bg-card.best .bg-ten{font-size:21px}
  .bg-card.best .bg-gia{font-size:40px}
  .bg-badge.best{background:linear-gradient(90deg,#c8901a,#ffe066,#f5c518);color:#3a2b00;box-shadow:0 4px 14px rgba(245,197,24,.5);font-size:11.5px}
  .btn-naicap.gold{background:linear-gradient(90deg,#c8901a,#f5c518,#ffd700,#c8901a);color:#3a2b00}
  .goi-row{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
  .goi-bar{height:9px;background:rgba(0,0,0,.28);border-radius:6px;overflow:hidden;margin-top:6px}
  .goi-bar i{display:block;height:100%;background:linear-gradient(90deg,#00d4ff,#3ddc84)}
  .goi-bar i.warn{background:linear-gradient(90deg,#ff6b3d,#ff2d55)}
  .side .pro{flex-shrink:0;margin-top:12px;background:linear-gradient(135deg,#1c2742,#141d33);border:1px solid var(--line);
        border-radius:14px;padding:14px}
  .side .pro b{display:block;font-size:13px;margin-bottom:4px}
  .side .pro p{font-size:11px;color:var(--muted);margin-bottom:10px}
  .side .pro button{width:100%;border:0;border-radius:10px;padding:9px;background:linear-gradient(90deg,#7c5cff,#a47bff);
        color:#fff;font-weight:700;cursor:pointer}

  /* Main */
  .main{flex:1;display:flex;flex-direction:column;min-width:0}
  .top{display:flex;align-items:center;justify-content:space-between;padding:12px 22px;border-bottom:1px solid var(--line);flex-wrap:nowrap;gap:14px}
  .top .t{display:flex;align-items:center;gap:10px;font-weight:700;flex:1 1 auto;min-width:0;overflow:hidden}
  .top .r{flex:0 0 auto}
  .badge{background:linear-gradient(90deg,#7c5cff,#a47bff);font-size:10px;padding:2px 7px;border-radius:20px;font-weight:700}
  .top .r{display:flex;align-items:center;gap:12px;color:var(--muted);flex-wrap:wrap;justify-content:flex-end;min-width:0}
  .top .r .chip{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
        padding:5px 10px;border-radius:30px;color:var(--text);font-size:13px}
  .ticon{cursor:pointer;font-size:18px;opacity:.85}
  .ticon:hover{opacity:1}
  /* Nút đăng xuất: to & rõ như nút (trước đây 16px lọt thỏm + bị cắt khi header tràn) */
  #logoutBtn{font-size:17px;padding:4px 9px;border-radius:9px;border:1px solid var(--line);background:var(--card);line-height:1;margin-left:6px}
  #logoutBtn:hover{background:rgba(255,45,85,.18);border-color:var(--accent);opacity:1}
  #meName{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Laptop hẹp: gọn padding, ẩn chữ phụ '(chỉ lần đầu)' để header không tràn */
  @media (max-width:1200px){
    .top{padding:12px 14px}
    .top .r{gap:9px}
    .only-first{display:none}
  }
  .user{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);
        padding:5px 10px;border-radius:30px;color:var(--text);font-size:13px}
  .user .av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#7c5cff,#a47bff);
        display:flex;align-items:center;justify-content:center;font-size:13px}
  .stat .delta-up{color:var(--ok)} .stat .delta-dn{color:var(--accent)}
  .pbar{height:6px;background:#0e1422;border-radius:6px;margin-top:8px;overflow:hidden}
  .pbar i{display:block;height:100%;background:linear-gradient(90deg,#00d4ff,#3ddc84)}
  .content{flex:1;overflow-y:auto;padding:22px 26px}
  h1.page{font-size:22px;display:flex;align-items:center;gap:10px}
  .sub{color:var(--muted);font-size:13px;margin:4px 0 18px}
  .section-label{color:var(--muted);font-weight:700;font-size:13px;margin:18px 0 10px}

  /* Stat cards */
  .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
  @media(max-width:1024px){.stats{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:680px){.stats{grid-template-columns:repeat(2,1fr)}}
  .stat{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
        border:1px solid var(--glass-bd);border-radius:16px;padding:16px;position:relative;overflow:hidden;
        box-shadow:0 6px 22px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05)}
  .stat .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px;
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  .stat .lbl{color:var(--muted);font-size:12px}
  .stat .val{font-size:26px;font-weight:800;margin-top:2px}
  .stat .dn{font-size:11px;color:var(--ok);margin-top:6px}

  /* Cào nhanh: bố cục 2 cột — trái (chọn nền tảng + form), phải (hành động sticky + tiến trình) */
  .caorow{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start;margin-top:6px}
  .caorow.full{grid-template-columns:1fr}
  .caoleft{min-width:0}
  .cao-action{position:sticky;top:14px;margin-top:0}
  .cao-action .btn{width:100%;justify-content:center}
  .cao-action .btn.go.big{font-size:18px;padding:18px 16px;border-radius:14px;
        background:var(--grad);box-shadow:0 10px 30px rgba(124,92,255,.42),0 0 0 1px rgba(255,255,255,.06)}
  /* nút hành động 2 dòng: tiêu đề + mô tả phụ (như mockup) */
  .cao-action .btn.b2{flex-direction:column;gap:3px;line-height:1.25}
  .cao-action .btn.go.big.b2{padding:15px 16px}
  .cao-action .btn.b2 .bsub{font-size:11.5px;font-weight:500;opacity:.92}
  .cao-action .btn.go.big.b2 .bsub{font-size:12px}
  .cao-action .btn.ghost .bsub{color:var(--muted)}
  /* ===== Header wizard 5 bước ===== */
  .wiz{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;overflow:hidden}
  .wiz .ws{display:flex;align-items:center;gap:8px;padding:5px 9px;border-radius:10px;cursor:pointer;
        background:transparent;border:0;color:var(--muted);font:inherit;white-space:nowrap;transition:.18s}
  .wiz .ws:hover{background:#141d33;color:var(--text)}
  .wiz .ws .wn{width:23px;height:23px;border-radius:50%;display:flex;align-items:center;justify-content:center;
        font-size:12px;font-weight:800;flex-shrink:0;background:#1a2238;color:var(--muted);border:1px solid var(--line)}
  .wiz .ws .wt{font-size:12.5px;font-weight:600}
  .wiz .ws.done .wn{background:rgba(61,220,132,.18);color:var(--ok);border-color:transparent}
  .wiz .ws.cur{color:var(--text)}
  .wiz .ws.cur .wn{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 0 0 3px rgba(124,92,255,.18)}
  .wiz .wsep{width:18px;height:2px;border-radius:2px;background:var(--line);flex-shrink:0}
  @media(max-width:1180px){ .wiz .ws .wt{display:none} .wiz .wsep{width:10px} }
  @media(max-width:760px){ .wiz{display:none} }
  body.light .wiz .ws:hover{background:#eef2fb}
  body.light .wiz .ws .wn{background:#eef1f8}
  /* ===== Stepper trong trang (Render / Lồng tiếng) ===== */
  .pwiz{display:flex;align-items:center;margin:14px 0 18px}
  .pwiz .ps{display:flex;align-items:center;gap:10px;flex:0 0 auto;background:transparent;border:0;cursor:pointer;font:inherit;padding:0}
  .pwiz .pn{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;
        font-size:13px;background:#1a2238;color:var(--muted);border:1px solid var(--line);transition:.18s;flex-shrink:0}
  .pwiz .pl{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;transition:.18s}
  .pwiz .pline{flex:1;height:2px;background:var(--line);margin:0 14px;border-radius:2px;min-width:20px}
  .pwiz .ps:hover .pl{color:var(--text)}
  .pwiz .ps.cur .pn{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 0 0 4px rgba(124,92,255,.18)}
  .pwiz .ps.cur .pl{color:var(--text)}
  .pwiz .ps.done .pn{background:rgba(61,220,132,.18);color:var(--ok);border-color:transparent}
  .pwiz .ps.done .pl{color:var(--text)}
  .pwiz .pline.on{background:linear-gradient(90deg,var(--ok),var(--purple))}
  @media(max-width:920px){ .pwiz .pl{display:none} .pwiz .pline{margin:0 8px} }
  body.light .pwiz .pn{background:#eef1f8}
  /* Tùy chọn nâng cao (Lồng tiếng) */
  .dub-adv{border:1px solid var(--line);border-radius:10px;padding:10px 14px;background:rgba(255,255,255,.025)}
  .dub-adv summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--text);user-select:none;list-style:none}
  .dub-adv summary::-webkit-details-marker{display:none}
  .dub-adv summary::before{content:"▸ ";color:var(--muted)}
  .dub-adv[open] summary::before{content:"▾ "}
  .dub-adv input[type=range]{accent-color:var(--purple);height:5px}
  .cao-prog .bar{height:8px;background:#0e1422;border-radius:6px;overflow:hidden;margin:8px 0 6px}
  .cao-prog .bar i{display:block;height:100%;width:0%;background:var(--grad);transition:width .3s}
  @media(max-width:1100px){.caorow{grid-template-columns:1fr}.cao-action{position:static}}

  /* Platform cards */
  /* 17/09/2026: 11 thẻ (thêm YouTube Shorts) vừa MỘT hàng — thu icon 36→30px, đệm/khe nhỏ lại (chủ dự án: "thu bé các icon để vừa") */
  .plats{display:grid;grid-template-columns:repeat(11,1fr);gap:6px}
  @media(max-width:1100px){.plats{grid-template-columns:repeat(6,1fr)}}
  @media(max-width:560px){.plats{grid-template-columns:repeat(3,1fr)}}
  .plat{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
        border:1px solid var(--glass-bd);border-radius:12px;padding:7px 3px;text-align:center;cursor:pointer;
        transition:.18s;position:relative;box-shadow:0 4px 16px rgba(0,0,0,.20)}
  .plat:hover{border-color:rgba(124,92,255,.55);transform:translateY(-3px);box-shadow:0 9px 26px rgba(124,92,255,.18)}
  .plat.sel{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple),0 0 26px rgba(124,92,255,.32)}
  .plat .pic{margin-bottom:4px;display:flex;justify-content:center;line-height:0}
  .plat .pic svg{width:32px;height:32px}
  .plat .pic{height:32px;align-items:center}
  .plat .pic img{height:30px;width:auto;max-width:100%;object-fit:contain;border-radius:8px}
  .plat .pic img[alt="Bilibili"]{height:22px;border-radius:0}
  .plat .pic img[alt="Weibo"]{border-radius:0}
  /* TẠM KHOÁ nền tảng chưa hoàn thiện (Weibo/Twitter/Instagram/Reddit/Threads) — cập nhật ở bản sau. Bật lại = XOÁ dòng dưới. */
  /* 28/08/2026: MỞ Instagram (đã đo: tải theo link OK, theo kênh dùng trình duyệt — xem
       `_ig_liet_ke_kenh`). Các nền còn lại vẫn khoá vì CHƯA đo. */
    .plat[data-p="wb"],.plat[data-p="tw"],.plat[data-p="rd"],.plat[data-p="th"]{display:none}
  .plat b{display:block;font-size:10.5px;line-height:1.2;word-break:break-word}
  .plat span{display:none}
  .plat .tick{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--grad);
        color:#fff;display:none;align-items:center;justify-content:center;font-size:11px;box-shadow:0 0 10px rgba(124,92,255,.6)}
  .plat.sel .tick{display:flex}

  .panel{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
        border:1px solid var(--glass-bd);border-radius:16px;padding:18px;margin-top:14px;
        box-shadow:0 6px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04)}

  /* Segmented */
  .seg{display:flex;background:rgba(255,255,255,.03);border:1px solid var(--glass-bd);border-radius:12px;padding:5px;gap:5px;max-width:560px}
  .seg button{flex:1;border:0;background:transparent;color:var(--muted);padding:9px;border-radius:9px;cursor:pointer;font-weight:600;font-size:13px;transition:.15s}
  .seg button.on{background:linear-gradient(135deg,rgba(124,92,255,.34),rgba(255,61,138,.20));color:#fff;box-shadow:0 2px 10px rgba(124,92,255,.22)}
  /* Thanh lọc nền tảng (File đã tải / Theo dõi): nút co theo nội dung, tự xuống dòng */
  #filNen button,#tdFilter button,#filNguon button,#xlFilNen button{flex:0 1 auto;padding:8px 14px;display:inline-flex;align-items:center;gap:2px}
  #filNen button.on,#tdFilter button.on,#filNguon button.on,#xlFilNen button.on{box-shadow:inset 0 0 0 1px var(--accent)}
  #filNen .sub,#tdFilter .sub,#filNguon .sub,#xlFilNen .sub{margin:0;font-size:11px}
  /* Tab băm nhỏ: nút co theo nội dung, KHÔNG xuống dòng (tránh bị bóp méo khi có hint bên cạnh) */
  #filRender button{flex:0 0 auto;white-space:nowrap;padding:8px 14px}
  .gyico{height:18px;width:auto;vertical-align:middle;margin-right:6px;border-radius:4px;opacity:.6;transition:.15s}
  .gyico-b{height:13px;border-radius:0}
  .seg button.on .gyico{opacity:1}

  /* Chips */
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
  .chip-kw{background:var(--card2);border:1px solid var(--line);border-radius:9px;padding:7px 10px;display:flex;gap:8px;align-items:center;font-size:13px}
  .chip-kw b{cursor:pointer;color:var(--muted)}
  .chip-add{background:transparent;border:1px dashed var(--line);color:var(--muted);border-radius:9px;padding:7px 10px;cursor:pointer;font-size:13px}
  .kw-inp{background:var(--card2);border:1px dashed var(--line);border-radius:9px;padding:7px 10px;color:var(--text);font-size:13px;min-width:160px}
  .kw-inp:focus{outline:none;border-color:var(--accent)}
  textarea.inp,textarea.num{width:100%;margin-top:12px;background:rgba(255,255,255,.06);border:1px solid var(--glass-bd);border-radius:10px;color:var(--text);
        padding:10px;font-size:14px;font-family:inherit;resize:vertical;min-height:70px}
  .row4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
  .fld label{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}
  select,input.num{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--glass-bd);border-radius:10px;color:var(--text);padding:10px;font-size:13px;transition:.15s}
  select:focus,input.num:focus,textarea:focus{outline:none;border-color:rgba(124,92,255,.6);box-shadow:0 0 0 3px rgba(124,92,255,.13)}
  select option{background:#141b2e;color:var(--text)}

  /* Action bar */
  .acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
  .btn{border:0;border-radius:11px;padding:12px 18px;font-weight:700;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:8px}
  .btn.go{background:var(--grad);color:#fff;box-shadow:0 6px 20px rgba(124,92,255,.28)}
  .btn.ghost{background:var(--card2);color:var(--text);border:1px solid var(--line)}
  .toggle{display:flex;align-items:center;gap:9px;color:var(--text);font-size:13px;cursor:pointer}
  .sw{width:42px;height:24px;background:var(--card2);border:1px solid var(--line);border-radius:20px;position:relative;transition:.15s}
  .sw::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#9aa6bd;transition:.15s}
  .toggle.on .sw{background:var(--grad)}
  .toggle.on .sw::after{left:21px;background:#fff}

  /* Log */
  .log{background:#0a0e17;border:1px solid var(--line);border-radius:12px;padding:12px;height:170px;overflow-y:auto;
        font-family:Consolas,monospace;font-size:12px;color:#aeb9cf;white-space:pre-wrap;margin-top:10px}
  .log .ok{color:var(--ok)} .log .wn{color:var(--warn)} .log .inf{color:var(--accent2)}
  .hidden{display:none}
  /* Editor băm nhỏ (CapCut): vạch cắt + playhead trên thanh thời gian */
  .bam-mk{position:absolute;top:0;bottom:0;width:2px;background:#ff5a7a;cursor:ew-resize;z-index:3}
  .bam-mk::before{content:'';position:absolute;top:2px;left:-6px;width:14px;height:14px;border-radius:50%;
        background:#ff5a7a;box-shadow:0 0 0 2px rgba(0,0,0,.4)}
  .bam-mk .bam-mkt{position:absolute;top:20px;left:7px;font-size:10px;color:#ffd0d8;white-space:nowrap;font-weight:700}
  .bam-seg{position:absolute;top:0;bottom:0;border-right:1px dashed rgba(255,255,255,.06)}
  .bam-segn{position:absolute;bottom:4px;font-size:10px;color:#7e8aa3}
  .bam-ph{position:absolute;top:0;bottom:0;width:2px;background:#4ad0ff;z-index:2;pointer-events:none;
        box-shadow:0 0 6px rgba(74,208,255,.6)}
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-thumb{background:#2a3550;border-radius:9px}

  /* ===== THEME SÁNG ===== */
  body.light{--bg:#eef1f8;--card:#ffffff;--card2:#f1f4fa;--line:#e2e7f1;--text:#1b2436;--muted:#5d6b86;
       --glass:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.6));--glass-bd:rgba(20,30,60,.10);
       background:radial-gradient(1200px 600px at 80% -10%, #dde6fb 0%, #eef1f8 55%)}
  body.light .side{background:linear-gradient(180deg,#ffffff,#f2f5fc)}
  body.light .nav a:hover{background:#eef2fb}
  body.light .nav a.active{background:linear-gradient(90deg,rgba(255,45,85,.12),rgba(255,45,85,0));color:#1b2436}
  body.light .stat{background:linear-gradient(160deg,#ffffff,#f4f7fd)}
  body.light .seg{background:#eef2f9}
  body.light .log,body.light #logFull{background:#f4f7fd;color:#42506c}
  body.light .pbar{background:#e3e8f2}
  body.light .fcard video{background:#000}
  body.light ::-webkit-scrollbar-thumb{background:#c3cde0}

  /* Suggest cards */
  .kcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:9px;margin-top:12px;max-height:480px;overflow-y:auto}
  .kcard{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 9px;min-width:0}
  .kcard img{width:40px;height:40px;border-radius:9px;object-fit:cover;background:var(--card2);flex:none}
  .kcard .ki{flex:1;min-width:0;overflow:hidden}.kcard .ki b{font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kcard .ki span{color:var(--muted);font-size:11px}
  .kcard input{width:18px;height:18px;accent-color:var(--accent)}
  .kcard .kx{cursor:pointer;color:var(--warn);font-weight:700;font-size:16px;padding:4px 12px;border-radius:8px}
  .kcard .kx:hover{background:rgba(255,176,32,.15)}
  /* Status banner + nút rõ ràng */
  .statusbar{display:flex;align-items:center;gap:11px;padding:14px 18px;border-radius:13px;font-weight:700;
        font-size:15px;margin-bottom:14px;border:1px solid var(--line)}
  .statusbar .dot{width:13px;height:13px;border-radius:50%;flex-shrink:0}
  .statusbar.on{background:rgba(61,220,132,.13);color:var(--ok);border-color:rgba(61,220,132,.45)}
  .statusbar.on .dot{background:var(--ok);box-shadow:0 0 12px var(--ok)}
  .statusbar.off{background:rgba(139,150,173,.10);color:var(--muted)}
  .statusbar.off .dot{background:var(--muted)}
  .btn.danger{background:linear-gradient(90deg,#ff3b3b,#ff6b6b);color:#fff}
  .btn.dim{opacity:.4;cursor:not-allowed}

  /* File grid */
  .fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:14px}
  .fcard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative}
  .fdel{position:absolute;top:8px;right:8px;z-index:3;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
    background:rgba(10,14,22,.72);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;
    opacity:0;transition:.15s}
  .fcard:hover .fdel{opacity:1}
  .fdel:hover{background:var(--accent)}
  .fcard video{width:100%;height:300px;background:#000;display:block;object-fit:cover}
  .fthumb{position:relative}
  /* Thumbnail sạch: KHÔNG hiện thanh điều khiển; nút ▶ ở giữa, bấm mới play (như lưới Render/mockup) */
  .fplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
    background:rgba(8,11,18,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;
    pointer-events:none;z-index:2;transition:.15s;backdrop-filter:blur(2px);padding-left:3px}
  .fcard:hover .fplay{background:var(--grad);box-shadow:0 0 22px rgba(139,92,246,.5)}
  .fplay.hide{display:none}
  .fcard .meta{padding:9px 11px}
  .fcard .meta b{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fcard .meta span{font-size:11px;color:var(--muted)}
  .tag{display:inline-block;font-size:10px;padding:1px 7px;border-radius:20px;margin-top:5px}
  .tag.r{background:rgba(0,212,255,.15);color:var(--accent2)}
  .tag.g{background:rgba(255,176,32,.15);color:var(--warn)}
  .tag.p{background:rgba(124,92,255,.18);color:#b3a0ff;margin-left:5px}
  .tag.p img{height:11px;width:auto;vertical-align:-1px;margin-right:4px;border-radius:2px}

  /* ===== File đã tải — premium redesign ===== */
  .fpage{display:grid;grid-template-columns:1fr 282px;gap:20px;align-items:start}
  @media(max-width:1200px){.fpage{grid-template-columns:1fr}}
  .fmain{min-width:0}
  .fhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px}
  .fhead-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .fview{display:flex;background:#0e1422;border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
  .fview button{border:0;background:transparent;color:var(--muted);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600}
  .fview button.on{background:var(--purple);color:#fff}
  .fsearch{display:flex;align-items:center;gap:10px;background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:11px 14px;margin-bottom:12px}
  .fsearch .fsi{opacity:.55}
  .fsearch input{flex:1;background:transparent;border:0;color:var(--text);font-size:14px;outline:none}
  .fkbd{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 7px;white-space:nowrap}
  .fchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
  .fchips:empty{display:none}
  .fchip{display:inline-flex;align-items:center;gap:7px;background:rgba(124,92,255,.16);border:1px solid rgba(124,92,255,.42);color:#c4b5fd;border-radius:20px;padding:5px 11px;font-size:12px}
  .fchip i{cursor:pointer;font-style:normal;opacity:.8} .fchip i:hover{opacity:1}
  .fchip.clear{background:transparent;border-color:var(--line);color:var(--muted);cursor:pointer}
  .fpop{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px}
  .ftabs{margin-bottom:12px}
  .fbatch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 13px}
  .fchkall{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
  .fbatch-acts{display:flex;gap:8px;flex-wrap:wrap}
  .btn.go.fbtn{padding:7px 12px;font-size:12px;background:linear-gradient(95deg,#8b5cf6,#b14cff)}
  .chip-add.fdanger{border-color:rgba(255,77,79,.45);color:#ff7d7d}
  .fsort{width:auto!important;margin-left:auto;padding:7px 10px!important;font-size:12px}
  .fpager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:20px;flex-wrap:wrap}
  .fpager button{min-width:34px;height:34px;padding:0 9px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:9px;cursor:pointer;font-size:13px}
  .fpager button.on{background:var(--purple);border-color:var(--purple);color:#fff;font-weight:700}
  .fpager button:disabled{opacity:.35;cursor:default}
  /* Card overlays */
  .fgrid{grid-template-columns:repeat(auto-fill,minmax(206px,1fr))}
  .fcard video{height:172px}
  .fgrid.flist{grid-template-columns:1fr}
  .fgrid.flist .fcard{display:grid;grid-template-columns:210px 1fr}
  .fgrid.flist .fcard video{height:118px}
  .fgrid.flist .meta{display:flex;flex-direction:column;justify-content:center}
  .fgrid.flist .fcardfoot{margin-top:auto}
  .fcard .fdel{top:auto;right:auto;bottom:7px;left:7px}
  .fdur{position:absolute;bottom:7px;right:7px;background:rgba(8,11,18,.82);color:#fff;font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;z-index:2}
  .fsel{position:absolute;top:9px;left:9px;z-index:5;width:23px;height:23px;cursor:pointer;-webkit-appearance:none;appearance:none;
    border-radius:7px;border:2px solid rgba(255,255,255,.7);background:rgba(8,11,18,.6);display:grid;place-items:center;transition:.12s}
  .fsel:hover{border-color:var(--purple);background:rgba(124,92,255,.25)}
  .fsel:checked{background:var(--purple);border-color:var(--purple)}
  .fsel:checked::after{content:"✓";color:#fff;font-size:14px;font-weight:900;line-height:1}
  .fstar{position:absolute;top:7px;right:8px;z-index:5;cursor:pointer;font-size:15px;color:#ffd24a;background:rgba(8,11,18,.55);width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center}
  .fcard.sel{border-color:var(--purple);box-shadow:0 0 0 2px rgba(124,92,255,.5)}
  .fcard .meta b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;min-height:32px}
  .fbadge{display:inline-flex;align-items:center;gap:5px;font-size:11px}
  .fbadge.pend{color:var(--warn)} .fbadge.done{color:var(--ok)}
  .fbadge .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
  .fcardfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
  .fcardfoot .btn{padding:5px 11px;font-size:12px}
  /* Right stats sidebar */
  .fside{display:flex;flex-direction:column;gap:16px;position:sticky;top:6px}
  @media(max-width:1200px){.fside{position:static}}
  .fsbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
  .fsbox h4{font-size:13px;margin:0 0 13px;font-weight:700}
  .fmini{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .fmini .b{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:11px}
  .fmini .v{font-size:20px;font-weight:800;line-height:1.1}
  .fmini .l{font-size:11px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:5px}
  .fdonutwrap{display:flex;align-items:center;gap:14px}
  .fdonut{width:96px;height:96px;border-radius:50%;flex-shrink:0;position:relative}
  .fdonut::after{content:"";position:absolute;inset:13px;background:var(--card);border-radius:50%}
  .fdonut .ct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;font-size:12px;font-weight:800;text-align:center;line-height:1.2}
  .fleg{font-size:11.5px;display:flex;flex-direction:column;gap:8px}
  .fleg .r{display:flex;align-items:center;gap:7px} .fleg .d{width:9px;height:9px;border-radius:3px;flex-shrink:0}
  .fbars{display:flex;align-items:flex-end;gap:6px;height:92px}
  .fbars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
  .fbars .bar{width:100%;background:linear-gradient(180deg,#8b5cf6,#5b8cff);border-radius:5px 5px 0 0;min-height:3px}
  .fbars .bn{font-size:10px;font-weight:700} .fbars .bd{font-size:9px;color:var(--muted)}
  .fkw .r{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
  .fkw .r:first-child{border-top:0}
  .fkw .c{background:var(--card2);border-radius:6px;padding:1px 8px;font-size:11px;color:var(--muted)}
  /* Thẻ trạng thái đăng nhập nền tảng */
  .lcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-top:14px}
  /* Thẻ login KIỂU MOCKUP: logo trái, tên + dòng trạng thái giữa, badge phải, nút full-width đáy */
  .lcard{display:grid;grid-template-columns:auto 1fr auto;
    grid-template-areas:"logo name badge" "logo status badge" "acts acts acts";
    column-gap:10px;row-gap:1px;align-items:center;background:var(--glass);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-bd);
    border-radius:16px;padding:12px 12px;text-align:left;cursor:pointer;transition:.18s;position:relative;
    box-shadow:0 6px 20px rgba(0,0,0,.22);min-width:0}
  .lcard:hover{transform:translateY(-3px);border-color:rgba(124,92,255,.5);box-shadow:0 11px 28px rgba(124,92,255,.16)}
  .lcard img{grid-area:logo;height:36px;width:36px;object-fit:contain;border-radius:10px;flex-shrink:0}
  .lcard .lletter{grid-area:logo;height:36px;width:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
    color:#fff;font-weight:800;font-size:16px;flex-shrink:0}
  .lcard .ln{grid-area:name;font-size:13px;margin:0;font-weight:700;min-width:0;line-height:1.2;align-self:end;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .lcard .ls{grid-area:status;display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:start}
  .lcard .badge2{grid-area:badge;flex-shrink:0;width:20px;height:20px;border-radius:50%;display:flex;
    align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff}
  /* Hàng nút: Đăng nhập/xuất (co giãn) + 👁 Lướt (có thể co khi hẹp) */
  .lcard .lcacts{grid-area:acts;display:flex;gap:6px;margin-top:10px;align-items:stretch}
  .lcard .lcbtn,.lcard .lcbrowse{padding:8px 6px;border-radius:9px;cursor:pointer;font-size:12px;
    font-weight:700;transition:.15s;white-space:nowrap;line-height:1.1;text-align:center;min-width:0}
  .lcard .lcbtn{flex:1 1 0;overflow:hidden;text-overflow:ellipsis}
  .lcard .lcbrowse{flex:0 1 auto;min-width:40px;overflow:hidden;text-overflow:ellipsis;
    border:1px solid rgba(96,165,250,.45);background:rgba(96,165,250,.12);color:#9cc4ff}
  .lcard .lcbtn:hover,.lcard .lcbrowse:hover{filter:brightness(1.15)}
  .lcard.na .lcacts{margin-top:12px}
  /* Màu nút Đăng nhập/xuất theo trạng thái */
  .btnst-in{border:1px solid rgba(34,197,94,.55);background:rgba(34,197,94,.16);color:#7ee0a8}
  .btnst-out{border:1px solid rgba(239,68,68,.55);background:rgba(239,68,68,.16);color:#ff9b9b}
  .btnst-unknown{border:1px solid rgba(245,158,11,.55);background:rgba(245,158,11,.16);color:#ffce80}
  /* Thẻ login TÔ MÀU theo trạng thái (kiểu cũ): xanh=đã login, đỏ=chưa, vàng=chưa rõ */
  .lcard.in{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.10)}
  .lcard.in .badge2{background:var(--ok);color:#053}
  .lcard.out{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.08)}
  .lcard.out .badge2{background:#ef4444}
  .lcard.unknown{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.10)}
  .lcard.unknown .badge2{background:var(--warn);color:#3a2a00}
  /* 23/09/2026 [CHỦ DỰ ÁN] — "không cần đăng nhập" tô XANH LÁ như đã đăng nhập, không còn xám mờ.
     Lý do: xám + opacity làm khách tưởng nền tảng đó CHƯA dùng được / đang hỏng, rồi đi quét QR vô ích
     (đúng ca đã ghi ở chú thích badge đỏ ngay dưới). Không cần đăng nhập = SẴN SÀNG, nên phải xanh.
     Dấu vẫn là "–" (không phải "✓") để vẫn phân biệt được với thẻ đã đăng nhập thật. */
  .lcard.na{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.10)}
  .lcard.na .badge2{background:var(--ok);color:#053;font-size:13px}
  .filters{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 8px}
  .fbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;max-height:170px;overflow:auto}
  .fbox h4{font-size:12px;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between}
  .fbox h4 a{color:var(--accent2);cursor:pointer;font-weight:400}
  .fbox label{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:4px 0;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fbox input{accent-color:var(--accent);width:15px;height:15px;flex:none}
  /* Dấu hỏi trợ giúp + tooltip */
  .help{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
    background:var(--card2);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:700;
    cursor:help;margin-left:10px;vertical-align:middle;position:relative;user-select:none}
  .help:hover{color:#fff;border-color:var(--accent);background:var(--accent)}
  .help::after{content:attr(data-tip);position:absolute;left:0;top:150%;
    width:340px;max-width:78vw;background:#0b1322;border:1px solid var(--line);border-radius:10px;padding:11px 13px;
    color:var(--text);font-size:12.5px;font-weight:500;line-height:1.55;white-space:pre-line;text-align:left;
    box-shadow:0 12px 34px rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:.15s;z-index:60;pointer-events:none}
  .help:hover::after{opacity:1;visibility:visible}
  body.light .help::after{background:#fff;color:#1a2233}
  h1.page .help{font-size:13px}

  /* ── Render: full-height layout ── */
  .content:has(#v-xuly:not(.hidden)){overflow-y:hidden;padding:0}
  #v-xuly:not(.hidden){height:100%;display:flex;flex-direction:column}
  .rdr-layout{flex:1;display:flex;overflow:hidden;min-height:0}
  /* Center main */
  .rdr-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow-y:auto;border-right:1px solid var(--line)}
  .rdr-top-area{flex-shrink:0;padding:14px 18px 10px;background:rgba(9,13,24,.55);border-bottom:1px solid var(--line)}
  .rdr-grid-area{flex:1;overflow-y:auto;padding:14px 18px;min-height:170px}  /* laptop màn ngắn: grid luôn hiện ≥170px, panel config cuộn xuống (vuốt) thay vì che video */
  /* Video grid: 2 hàng cứng, cột auto theo màn hình, scroll ngang */
  .rdr-vid-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
                grid-auto-columns:minmax(190px,220px);gap:12px;overflow-x:auto;overflow-y:hidden;
                padding-bottom:4px}
  .rdr-vid-grid::-webkit-scrollbar{height:4px}
  .rdr-vid-grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
  /* Filter dropdown row */
  .rdr-filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .rdr-fsel{padding:6px 10px;border-radius:9px;font-size:12.5px;min-width:140px;max-width:220px}
  /* Video card */
  .rdr-vc{position:relative;cursor:pointer;border:2px solid var(--line);border-radius:12px;overflow:hidden;
          background:var(--card2);transition:.13s}
  .rdr-vc.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
  .rdr-vc img,.rdr-vc video{width:100%;height:140px;object-fit:cover;background:#000;display:block}
  .rdr-vc .rv-ck{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:6px;
                 background:rgba(0,0,0,.52);border:1.5px solid rgba(255,255,255,.32);color:#fff;
                 display:flex;align-items:center;justify-content:center;font-size:12px;transition:.12s;z-index:2}
  .rdr-vc.sel .rv-ck{background:var(--accent);border-color:var(--accent)}
  .rdr-vc .rv-st{position:absolute;top:8px;right:8px;font-size:10px;padding:2px 7px;border-radius:5px;
                 font-weight:700;letter-spacing:.03em;backdrop-filter:blur(4px)}
  .rv-st.pend{background:rgba(255,176,32,.18);color:#ffb020;border:1px solid rgba(255,176,32,.3)}
  .rv-st.done{background:rgba(61,220,132,.16);color:#3ddc84;border:1px solid rgba(61,220,132,.28)}
  .rv-st.dub{background:rgba(0,212,255,.14);color:#00d4ff;border:1px solid rgba(0,212,255,.26)}
  .rdr-vc .rv-info{padding:9px 11px}
  .rdr-vc .rv-title{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
  .rdr-vc .rv-meta{font-size:10.5px;color:var(--muted)}
  .rdr-vc .rv-tag{display:inline-block;font-size:10px;background:rgba(124,92,255,.18);color:#a78bff;
                  border-radius:4px;padding:1px 6px;margin-top:5px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Bottom settings — card bo góc nổi */
  .rdr-bottom{flex-shrink:0;margin:10px 16px 14px;background:var(--card);
              border:1px solid var(--line);border-radius:16px;padding:14px 18px 12px}
  .rdr-srow{column-width:175px;column-gap:28px;padding-bottom:4px}   /* masonry: dồn theo cột, lấp hết chỗ trống (KHÍT), vẫn dàn ngang */
  .rdr-group{break-inside:avoid;-webkit-column-break-inside:avoid;padding:0;border:none;margin:0 0 13px;min-width:0}
  .rdr-group:last-child{border:none;margin:0;padding:0}
  .rdr-group-hd{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
                margin:0 0 8px;display:flex;align-items:center;gap:5px}
  .rdr-group-hd i{display:block;width:3px;height:11px;border-radius:2px;background:var(--purple);flex-shrink:0}
  .rdr-group label{display:flex;align-items:center;gap:6px;font-size:12.5px;margin-bottom:5px;cursor:pointer}
  .rdr-group label:last-child{margin:0}
  .rdr-sub-lbl{font-size:10.5px;color:var(--muted);margin:5px 0 2px}
  .rdr-inline{display:flex;align-items:center;gap:6px;margin-bottom:5px;font-size:12.5px}
  .rdr-inline span{min-width:52px;flex-shrink:0}
  .rdr-bgname{display:block;font-size:10.5px;color:var(--text);background:rgba(255,255,255,.04);
              border:1px solid var(--line);border-radius:7px;padding:3px 7px;margin:3px 0;
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:158px}
  .rdr-vol{display:flex;align-items:center;gap:5px;margin-top:4px}
  .rdr-vol input[type=range]{flex:1;min-width:50px;accent-color:var(--accent)}
  .rdr-vol span{font-size:10.5px;min-width:26px;text-align:right;color:var(--muted)}
  .rdr-out-row{display:flex;align-items:center;gap:8px;padding-top:10px;margin-top:8px;border-top:1px solid rgba(255,255,255,.05)}
  /* Selection toolbar */
  .rdr-sel-bar{display:flex;align-items:center;gap:8px;padding:8px 0 0;flex-wrap:wrap}
  .rdr-sel-bar .sel-count{font-size:13px;font-weight:700;color:var(--ok);margin-right:4px}
  /* Sidebar right — cột phải: queue cuộn (2/3) trên, tổng quan + nút render cố định dưới */
  .rdr-side{width:300px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;background:rgba(8,12,22,.4)}
  /* Hàng đợi (chiếm phần còn lại, cuộn nội bộ) — card bo góc */
  .rdr-queue{flex:1;min-height:0;display:flex;flex-direction:column;margin:12px 12px 0;padding:14px 14px 10px;
             background:var(--card);border:1px solid var(--line);border-radius:16px}
  .rdr-q-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;flex-wrap:wrap}
  .rdr-q-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
  .rdr-q-num{color:var(--text);font-weight:800}
  .rdr-q-clear{font-size:12px;color:var(--accent);cursor:pointer;white-space:nowrap}
  .rdr-q-clear:hover{text-decoration:underline}
  .rdr-q-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding-right:3px}
  .rdr-q-list::-webkit-scrollbar{width:5px}.rdr-q-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
  /* Tổng quan render (3 cột) — card bo góc */
  .rdr-ovr{flex-shrink:0;margin:12px 12px 0;padding:13px 15px;background:var(--card);
           border:1px solid var(--line);border-radius:16px}
  .rdr-ovr-hd{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:11px}
  .rdr-ovr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .rdr-ovr-cell{text-align:center}
  .rdr-ovr-cell .v{font-size:19px;font-weight:800;line-height:1.1;color:var(--text)}
  .rdr-ovr-cell:nth-child(2) .v{color:var(--accent2)}
  .rdr-ovr-cell .k{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.25}
  .btn-render{width:auto;border:0;padding:0;height:60px;flex-shrink:0;margin:12px;border-radius:16px;
              background:linear-gradient(135deg,#7C3AED 0%,#a855f7 52%,#EC4899 100%);
              color:#fff;font-size:16px;font-weight:800;cursor:pointer;letter-spacing:.06em;
              box-shadow:0 8px 32px rgba(124,58,237,.5),0 4px 16px rgba(236,72,153,.3);
              transition:.2s;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px}
  .btn-render::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.13),transparent);pointer-events:none}
  .btn-render:hover{box-shadow:0 12px 40px rgba(124,58,237,.65),0 6px 20px rgba(236,72,153,.45)}
  /* Queue items — card ngang: [#] [thumb] [nội dung] [nút] */
  .q-item{display:flex;align-items:center;gap:9px;background:rgba(10,15,28,.7);border:1px solid var(--line);
          border-radius:12px;padding:8px;transition:.12s;position:relative}
  .q-item.dang{border-color:rgba(0,212,255,.45);background:rgba(0,212,255,.05)}
  .q-item.xong{border-color:rgba(61,220,132,.38)}
  .q-item.loi{border-color:rgba(255,61,138,.45);background:rgba(255,61,138,.05)}
  .q-item .qi-num{flex-shrink:0;width:22px;height:22px;border-radius:7px;background:rgba(124,92,255,.22);
                  color:#b9a8ff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
  .q-item.dang .qi-num{background:linear-gradient(135deg,#7c5cff,#00d4ff);color:#fff}
  .q-item img,.q-item video{width:54px;height:42px;object-fit:cover;flex-shrink:0;background:#000;border-radius:8px}
  .q-item .qi-body{flex:1;min-width:0}
  .q-item .qi-title{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .q-item .qi-meta{font-size:10.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 26/08 nhịp 27 — nhãn NGUỒN job. `qn-tay` phải khác màu HẲN: đó là dòng khách đang đi tìm
     giữa hàng chục job máy tự sinh. Job nền để xám, đừng tranh mắt. */
  .q-item .qi-ng{display:inline-block;padding:1px 6px;border-radius:5px;font-size:10px;
                 font-weight:700;border:1px solid var(--line);color:var(--muted)}
  .q-item .qi-ng.qn-tay{border-color:rgba(124,92,255,.55);background:rgba(124,92,255,.14);
                        color:#c4b5fd}
  .q-item .qi-ng.qn-nen{opacity:.8}
  .q-item .qi-sub{font-size:10.5px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:5px}
  .q-item.dang .qi-sub{color:var(--accent2)}
  .q-item .qi-bar{height:4px;background:rgba(255,255,255,.08);border-radius:4px;margin-top:5px;overflow:hidden}
  .q-item .qi-bar i{display:block;height:100%;background:linear-gradient(90deg,#7c5cff,#00d4ff);transition:width .4s}
  .q-item .qi-act{flex-shrink:0;width:26px;height:26px;border:none;border-radius:8px;
                  background:rgba(255,255,255,.07);color:var(--muted);font-size:12px;cursor:pointer;
                  display:flex;align-items:center;justify-content:center;align-self:center}
  .q-item .qi-act:hover{background:rgba(255,45,85,.32);color:#fff}

  /* ============ RESPONSIVE — chống vỡ giao diện trên màn nhỏ / cửa sổ hẹp ============ */
  /* Tablet: thu hẹp sidebar + bớt padding nội dung */
  @media(max-width:1100px){
    .side{width:200px;padding:14px 10px}
    .content{padding:18px 16px}
    .nav a{padding:10px 10px;gap:10px}
  }
  /* Mobile/cửa sổ hẹp: sidebar xuống thành THANH NGANG cuộn, nội dung full-width, mọi grid co lại */
  @media(max-width:820px){
    .app{flex-direction:column;height:auto;min-height:100vh}
    .side{width:auto;flex-direction:row;align-items:center;gap:4px;overflow-x:auto;
          border-right:none;border-bottom:1px solid var(--line);padding:8px 10px}
    .brand{padding:2px 8px 2px 2px;flex-shrink:0}
    .nav{flex-direction:row;gap:4px;margin-top:0}
    .nav a{padding:9px 12px;white-space:nowrap;flex-shrink:0}
    .content{padding:14px 12px}
    .top{padding:10px 12px}
    h1.page{font-size:19px}
    /* grid bố cục nhiều cột → 1 cột */
    .bg-grid,.caorow,.caorow.full,.fpage,.row4,.rdr-ovr-grid,.fcard,.filters,.fgrid{grid-template-columns:1fr !important}
    /* lưới thẻ → tự xếp vừa màn (không nhồi cột nhỏ xíu) */
    .lcards{grid-template-columns:repeat(auto-fill,minmax(165px,1fr)) !important}
    .flist,.fmini{grid-template-columns:repeat(auto-fill,minmax(135px,1fr)) !important}
    .plats{grid-template-columns:repeat(3,1fr) !important}
    .seg{max-width:none;flex-wrap:wrap}
    .kw-inp{min-width:0;width:100%}
    /* select/ô nhập trong hàng dài → không tràn */
    select.num,input.num{max-width:100%}
  }
  /* Điện thoại nhỏ */
  @media(max-width:480px){
    .content{padding:10px 9px}
    .lcards{grid-template-columns:repeat(auto-fill,minmax(155px,1fr)) !important}
    .flist,.fmini{grid-template-columns:repeat(auto-fill,minmax(110px,1fr)) !important}
    .plats{grid-template-columns:repeat(2,1fr) !important}
  }



          #v-huongdan{--hdgap:18px}
          #v-huongdan .hd-hero{background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(56,189,248,.12));border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:20px}
          #v-huongdan .hd-hero h1{margin:0 0 6px;font-size:26px}
          #v-huongdan .hd-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
          #v-huongdan .hd-toc a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:var(--card2);border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
          #v-huongdan .hd-toc a:hover{background:rgba(139,92,246,.22);border-color:#8b5cf6}
          #v-huongdan .hd-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:13.5px}
          #v-huongdan .hd-flow .step{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-weight:600}
          #v-huongdan .hd-flow .arr{color:#8b5cf6;font-weight:800}
          #v-huongdan .hd-sec{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:var(--hdgap);scroll-margin-top:16px}
          #v-huongdan .hd-sec h2{margin:0 0 4px;font-size:20px;display:flex;align-items:center;gap:9px}
          #v-huongdan .hd-sec .hd-lead{color:var(--muted);margin:0 0 14px;font-size:14px}
          #v-huongdan .hd-shot{width:100%;border-radius:12px;border:1px solid var(--line);margin:6px 0 16px;box-shadow:0 8px 30px rgba(0,0,0,.28);display:block;background:#0b0f1a;cursor:zoom-in}
          #v-huongdan .hd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
          @media(max-width:820px){#v-huongdan .hd-grid{grid-template-columns:1fr}}
          #v-huongdan .hd-card{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
          #v-huongdan .hd-card h4{margin:0 0 8px;font-size:14.5px;display:flex;align-items:center;gap:7px}
          #v-huongdan .hd-card ol,#v-huongdan .hd-card ul{margin:0;padding-left:20px}
          #v-huongdan .hd-card li{margin:5px 0;font-size:13.5px;line-height:1.55}
          #v-huongdan .hd-tip{border-left:3px solid #f59e0b;background:rgba(245,158,11,.09);border-radius:8px;padding:11px 14px;margin:14px 0 0;font-size:13.5px;line-height:1.6}
          #v-huongdan .hd-tip b{color:#f59e0b}
          #v-huongdan .hd-when{border-left:3px solid #22c55e;background:rgba(34,197,94,.09);border-radius:8px;padding:11px 14px;margin:14px 0 0;font-size:13.5px;line-height:1.6}
          #v-huongdan .hd-when b{color:#22c55e}
          #v-huongdan .hd-when table{width:100%;border-collapse:collapse;margin-top:6px;font-size:13px}
          #v-huongdan .hd-when td{padding:5px 8px;border-top:1px solid var(--line);vertical-align:top}
          #v-huongdan .hd-when td:first-child{white-space:nowrap;font-weight:700;color:var(--text)}
          #v-huongdan kbd{background:var(--card2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:12px}
          #v-huongdan .hd-badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:700;margin-left:6px}
          #v-huongdan .hd-b-new{background:rgba(56,189,248,.2);color:#38bdf8}
          #hdLightbox{position:fixed;inset:0;background:rgba(2,4,9,.9);z-index:400;display:none;align-items:center;justify-content:center;cursor:zoom-out;padding:24px}
          #hdLightbox img{max-width:96vw;max-height:92vh;border-radius:10px;box-shadow:0 20px 70px rgba(0,0,0,.6)}
        


        /* ===== Render: Video nguồn (trái, luôn hiện) + panel cấu hình chia tab Edit/Lồng tiếng (phải). Màu xanh-tím. ===== */
        #v-xuly{padding:16px 20px;overflow-y:auto}
        .vd-head{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:12px}
        .vd-head h1{font-size:20px;margin:0;font-weight:800}
        .vd-ovr-mini{font-size:12px;color:var(--muted);white-space:nowrap}
        .vd-ovr-mini b{color:var(--text)}
        .vd-run-btn{margin-left:auto;border:0;border-radius:11px;height:42px;padding:0 22px;font-weight:800;font-size:14px;color:#fff;cursor:pointer;background:linear-gradient(135deg,#3b82f6,#8b5cf6);box-shadow:0 6px 18px rgba(99,102,241,.42)}
        .vd-cols2{display:grid;grid-template-columns:1.05fr 1fr;gap:16px;align-items:start}
        @media(max-width:1100px){.vd-cols2{grid-template-columns:1fr}}
        .vd-card{background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden}
        .vd-ch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
        .vd-ch h3{font-size:14px;font-weight:700;margin:0}
        .vd-cb{padding:14px}
        .vd-tabhead{display:flex;align-items:center;gap:5px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--card2)}
        .vd-tab{border:0;background:transparent;color:var(--muted);font-weight:700;font-size:13px;padding:8px 16px;border-radius:8px;cursor:pointer}
        .vd-tab.on{background:linear-gradient(135deg,#38bdf8,#8b5cf6);color:#fff;box-shadow:0 4px 13px rgba(99,102,241,.35)}
        .vd-panel{display:none}
        /* Panel cấu hình render (Edit / Lồng tiếng) DÀI (bảng ngôn ngữ + phụ đề + phong cách) → tự CUỘN riêng
           thay vì kéo dài cả trang. max-height theo viewport, chừa chỗ header/nút Render; scroll mượt. */
        .vd-panel.on{display:block;max-height:calc(100vh - 230px);overflow-y:auto;padding-right:4px}
        .vd-panel.on::-webkit-scrollbar{width:8px}
        .vd-panel.on::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
        .vd-panel.on::-webkit-scrollbar-thumb:hover{background:var(--muted)}
        /* hàng nút/ô (Video nguồn) */
        .vd-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
        .vd-row:last-child{margin-bottom:0}
        .vd-row > .num{flex:1;min-width:120px}
        .vd-row > .chip-add{flex:0 0 auto;white-space:nowrap}
        /* nhóm checkbox (ngang, căn giữa) */
        .vd-checks{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:13px}
        .vd-checks:last-child{margin-bottom:0}
        .vd-chk{display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer;white-space:nowrap;margin:0}
        .vd-chk input{width:16px;height:16px;accent-color:#8b5cf6;margin:0}
        /* lưới field có nhãn (đều cột, nhãn thẳng hàng) */
        .vd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:12px;margin-bottom:13px}
        .vd-grid:last-child{margin-bottom:0}
        .vd-f{display:flex;flex-direction:column;gap:5px;min-width:0}
        .vd-f.wide{grid-column:1/-1}
        .vd-lbl{font-size:11.5px;color:var(--muted)}
        .vd-f .num{width:100%}
        #v-xuly input[type=range]{accent-color:#8b5cf6;width:100%}
        .vd-grid-wrap{max-height:min(440px,46vh);overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--card2);padding:8px}
        #v-xuly .sel-count{font-size:12px;color:#a78bfa;font-weight:600}
        .vd-rule{display:flex;align-items:center;gap:6px;margin-top:6px}
        .vd-rule button{flex:1;text-align:left;background:var(--card2);border:1px solid var(--line);color:var(--text);border-radius:7px;padding:6px 9px;cursor:pointer;font-size:11.5px}
        .vd-rule input{accent-color:#8b5cf6;width:16px;height:16px}
        .vd-save{display:flex;gap:4px;align-items:center}
        .vd-save .num{flex:1;min-width:0}
        /* hàng đợi (trong tab Edit) */
        .vd-queue{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
        .vd-queue .qh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px;flex-wrap:wrap}
        #v-xuly #qList{max-height:200px;overflow:auto}
        #v-xuly select.num,#v-xuly input.num{padding:7px 9px;font-size:13px}
        /* ===== Bảng "Ngôn ngữ đầu ra" (voice-per-language) ===== */
        .xl-ltable{width:100%;border-collapse:collapse;font-size:13px}
        .xl-ltable th{text-align:left;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:5px 9px;border-bottom:1px solid var(--line)}
        .xl-ltable td{padding:3px 9px;border-bottom:1px solid var(--line);vertical-align:middle}   /* hàng THẤP hơn → hiện nhiều ngôn ngữ hơn */
        .xl-ltable tbody tr:last-child td{border-bottom:0}
        .xl-ltable tbody tr:hover{background:var(--card2)}
        .xl-ltable tr.on{background:rgba(124,92,255,.06)}
        .xl-ltable .xl-langck{width:17px;height:17px;accent-color:#8b5cf6;margin:0;cursor:pointer}
        .xl-lname{display:flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap}
        .xl-eng{font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px;white-space:nowrap}
        .xl-eng.viral{color:#c4b5ff;background:rgba(124,92,255,.16)}
        .xl-eng.edge{color:#7fb4ff;background:rgba(79,140,255,.16)}
        .xl-ltable .xl-langvoice{background:var(--card2);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:3px 8px;font-size:12.5px;min-width:96px}
        .xl-ltable .xl-langhear{width:26px;height:24px;border-radius:7px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:12px}
        .xl-ltable .xl-langhear:hover{border-color:var(--acc,#7c5cff);color:var(--text)}
        .xl-status .rd{color:#57d9a3;font-weight:600;font-size:12px} .xl-status .off{color:var(--muted);font-size:12px}
        .xl-langnote{display:none;align-items:flex-start;gap:9px;margin-top:9px;padding:9px 12px;border-radius:10px;background:rgba(124,92,255,.09);border:1px solid rgba(124,92,255,.25);font-size:11.5px;line-height:1.45;color:var(--text)}
        .xl-langnote b{color:#c4b5ff}
        /* Bảng ngôn ngữ đầu ra: chỉ hiện ~3.5 dòng rồi SCROLL trong (khỏi đẩy các phần dưới xuống khi ~75 ngôn ngữ) */
        #xlLangBatch{max-height:196px;overflow-y:auto}
        #xlLangBatch table{border-collapse:separate;border-spacing:0}
        #xlLangBatch thead th{position:sticky;top:0;z-index:1;background:var(--card,#12151f)}   /* header dính khi cuộn */
        #xlLangBatch::-webkit-scrollbar{width:7px}#xlLangBatch::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
        /* ===== Panel Video nguồn GỌN (chỉ video đã chọn) + nút mở modal ===== */
        .xl-pickbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:12px;border-radius:12px;cursor:pointer;font-weight:800;font-size:14px;color:#fff;border:0;background:linear-gradient(120deg,var(--purple,#8b5cf6),var(--accent,#ec4899));box-shadow:0 6px 18px rgba(139,92,246,.28)}
        .xl-pickbtn:hover{filter:brightness(1.08)}
        .xl-pickbtn .ic{font-size:16px}
        .xl-chosen{margin-top:13px;display:flex;flex-direction:column;gap:8px;max-height:min(52vh,460px);overflow:auto;padding-right:3px}
        .xl-crow{display:flex;align-items:center;gap:11px;background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:7px 8px}
        .xl-cthumb{width:58px;height:40px;border-radius:8px;flex:none;background:#000;overflow:hidden}
        .xl-cthumb video{width:100%;height:100%;object-fit:cover;display:block}
        .xl-cbody{flex:1;min-width:0}
        .xl-ctitle{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .xl-cmeta{font-size:11px;color:var(--muted);margin-top:2px}
        .xl-cx{flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:12px;line-height:1}
        .xl-cx:hover{border-color:var(--accent);color:var(--accent)}
        .xl-ced{flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;font-size:13px;line-height:1;padding:0}
        .xl-ced:hover{border-color:var(--accent);background:rgba(0,212,255,.10)}
        .xl-ced.on{border-color:var(--accent);background:rgba(0,212,255,.18)}
        .xl-empty{margin-top:4px;text-align:center;color:var(--muted);font-size:12.5px;padding:24px 10px;border:1px dashed var(--line);border-radius:12px;line-height:1.5}
        .xl-chfoot{display:flex;align-items:center;justify-content:space-between;margin-top:11px;font-size:11.5px}
        .xl-chfoot a{color:var(--accent2,#38bdf8);cursor:pointer;text-decoration:none}
        .xl-chfoot a:hover{text-decoration:underline}
        /* ===== Modal chọn video (duyệt/lọc rộng) ===== */
        .xl-backdrop{position:fixed;inset:0;background:rgba(3,4,10,.72);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:99999;padding:22px}
        .xl-backdrop.on{display:flex}
        .xl-modal{width:min(1160px,96vw);height:min(88vh,880px);background:var(--bg2,#111325);border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
        .xl-mhead{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
        .xl-mhead h2{margin:0;font-size:16px;font-weight:800;flex:1;display:flex;align-items:center;gap:9px}
        .xl-mclose{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-size:15px}
        .xl-mclose:hover{color:var(--text);border-color:var(--muted)}
        .xl-mtool{padding:13px 20px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
        .xl-mrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
        .xl-msearch{flex:1;min-width:200px;position:relative}
        .xl-msearch input{width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:10px 12px 10px 36px;font:inherit;font-size:13px;outline:none}
        .xl-msearch input:focus{border-color:var(--purple,#8b5cf6)}
        .xl-msearch .mag{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.5;font-size:13px}
        .xl-mrow2{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
        .xl-mbody{flex:1;overflow:auto;padding:16px 20px}
        #xlPicker .rdr-vid-grid{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));grid-auto-columns:auto;overflow:visible;padding-bottom:0}
        .xl-mfoot{padding:13px 20px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px}
        .xl-mfoot .info{font-size:13px;color:var(--muted)}
        .xl-mfoot .info b{color:var(--text)}
        .xl-done{padding:11px 26px;border-radius:11px;border:0;cursor:pointer;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(120deg,var(--purple,#8b5cf6),var(--accent,#ec4899));box-shadow:0 6px 18px rgba(139,92,246,.3)}
        .xl-done:hover{filter:brightness(1.08)}
        .xl-ghost{padding:11px 18px;border-radius:11px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;font-weight:600;font-size:13px}
        .xl-ghost:hover{color:var(--text);border-color:var(--muted)}
        @media(max-width:720px){.xl-modal{width:96vw;height:92vh}}
        /* ===== Tab Lồng tiếng — header + toggle + mini-card (giống mockup Output Languages) ===== */
        .xl-sect-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
        .xl-sect-h h4{margin:0;font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px}
        .xl-sect-h small{color:var(--muted);font-weight:400;font-size:11px}
        .xl-switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;flex:none}
        .xl-switch-lbl{font-size:12.5px;color:var(--muted)}
        .xl-switch input{position:absolute;opacity:0;width:0;height:0}
        .xl-slider{width:40px;height:22px;border-radius:22px;background:var(--card2);border:1px solid var(--line);position:relative;transition:.18s;flex:none}
        .xl-slider::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#8b90a0;transition:.18s}
        .xl-switch input:checked + .xl-slider{background:linear-gradient(120deg,var(--purple,#8b5cf6),var(--accent,#ec4899));border-color:transparent}
        .xl-switch input:checked + .xl-slider::after{left:20px;background:#fff}
        .xl-lrow{margin-bottom:10px}
        .xl-lsearch{width:100%;box-sizing:border-box;padding:9px 12px;background:var(--card2);border:1px solid var(--line);border-radius:9px;color:inherit;font:inherit;font-size:12.5px;outline:none}
        .xl-lsearch:focus{border-color:var(--purple,#8b5cf6)}
        .xl-lfoot{display:flex;justify-content:space-between;align-items:center;padding:9px 2px 0;font-size:12px;color:var(--muted)}
        .xl-lfoot b{color:var(--text)}
        .xl-minirow{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px}
        .xl-mini{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column}
        .xl-mlbl{font-size:12px;font-weight:700;color:var(--text)}
        .xl-mlbl b{float:right;color:var(--purple,#8b5cf6);font-weight:800}
        .xl-mhint{font-size:10.5px;color:var(--muted);line-height:1.5;margin:8px 0 0}
        .xl-chk2{display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer;margin-top:10px}
        .xl-slider2{width:100%;accent-color:var(--purple,#8b5cf6);margin-top:12px}
        


        /* MẶC ĐỊNH = TỐI (khớp app: app dark là mặc định, không có class). Accent HỒNG #ec4899 đồng bộ app. */
        #v-render2,.r2-scope{--r2-bg:#0d0f1f;--r2-card:#141627;--r2-card2:#10121f;--r2-sunk:#0a0b16;
          --r2-ink:#eceef5;--r2-ink2:#a3a7ba;--r2-ink3:#717690;--r2-line:rgba(255,255,255,.10);--r2-line2:rgba(255,255,255,.06);
          --r2-acc:#ec4899;--r2-acc2:#db2f86;--r2-accw:#3a1830;--r2-grn:#34c98a;--r2-grnw:#15302a;--r2-grnl:#22453b;
          --r2-org:#e8983f;--r2-orgw:#33260f;--r2-blu:#5b9bff;--r2-bluw:#152641;--r2-vio:#a78bfa;--r2-viow:#241a44;
          --r2-red:#f2667f;--r2-redw:#331a22;
          font-family:'Inter','Segoe UI',system-ui,Arial,sans-serif;color:var(--r2-ink)}   /* đồng nhất font với body/Automation (Inter đứng đầu) */
        /* THEME SÁNG (khi app bật body.light) */
        body.light #v-render2,body.light .r2-scope{--r2-bg:#f4f5fb;--r2-card:#fff;--r2-card2:#fafbff;--r2-sunk:#f1f2f9;
          --r2-ink:#1b1e2b;--r2-ink2:#5f6478;--r2-ink3:#9096ab;--r2-line:#e7e9f2;--r2-line2:#eef0f7;
          --r2-acc:#ec4899;--r2-acc2:#db2f86;--r2-accw:#fde8f2;--r2-grn:#22b573;--r2-grnw:#e2f6ee;--r2-grnl:#c5ecda;
          --r2-org:#f5972b;--r2-orgw:#fdefdc;--r2-blu:#3d8bff;--r2-bluw:#e6f0ff;--r2-vio:#8b5cf6;--r2-viow:#f0e9ff;
          --r2-red:#f0506e;--r2-redw:#fde8ec}
        :is(#v-render2,.r2-scope) *{box-sizing:border-box}
        /* 🔴 31/08/2026 — TỈ LỆ 3–7: Video nguồn 3 · Cấu hình render (lồng tiếng/phụ đề/chỉnh
           video) 7. Chủ dự án: *"tại sao lại để phần setup cấu hình render nhỏ thế kia"* — phần
           cấu hình là chỗ làm việc chính nên phải rộng. (Trước: 0.56fr 1fr ≈ 36–64.)
           ⚠ `minmax(0,…)` là BẮT BUỘC, không phải trang trí: track `fr` KHÔNG co được dưới
             min-content, mà cột trái chứa TÊN KÊNH và ĐƯỜNG DẪN rất dài (vd
             `dy-MS4wLjABAAAA…` · `F:\\…\\data\\automation\\dy-MS4wLjABAAAA…`). Thiếu minmax là
             cột trái tự phình, tỉ lệ 3–7 thành vô nghĩa. */
        :is(#v-render2,.r2-scope) .r2-grid{display:grid;
              grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:16px;align-items:start}
        /* 🔴 31/08 — Cột trái hẹp lại (3fr) ⇒ hàng nút trong thẻ kênh PHẢI xuống dòng.
           Đo được ở 1280/1440 khi BẬT đa-kênh: `.r2-ghost` ("➕ mới nhất", "🔕 Tự tải video mới")
           tràn khỏi cột vì `.r2-krow` là flex `nowrap` (style inline không khai `flex-wrap`). */
        :is(#v-render2,.r2-scope) .r2-krow{flex-wrap:wrap}
        /* Cột trái xếp dọc: 2 card (Video nguồn + Danh sách render) TỰ CAO theo nội dung — KHÔNG chia đều
           flex:1 (bug cũ: card ít nội dung vẫn bị kéo cao bằng card kia → khoảng trống thừa; card nhiều
           nội dung bị ép chỉ 50% chiều cao → cuộn sớm dù còn dư chỗ). Mỗi card cuộn RIÊNG khi vượt max-height. */
        :is(#v-render2,.r2-scope) .r2-grid>div:first-child #r2Chosen{overflow-y:auto;min-height:60px;max-height:420px}
        :is(#v-render2,.r2-scope) .r2-grid>div:first-child #r2QList{overflow-y:auto;min-height:60px;max-height:420px}
        @media(max-width:1000px){:is(#v-render2,.r2-scope) .r2-grid{grid-template-columns:1fr;align-items:start}}
        :is(#v-render2,.r2-scope) .r2-panel{background:var(--r2-card);border:1px solid var(--r2-line);border-radius:15px;padding:15px;margin-bottom:14px}
        :is(#v-render2,.r2-scope) .r2-ph{display:flex;align-items:center;gap:9px;margin-bottom:13px}
        :is(#v-render2,.r2-scope) .r2-ph .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex:none}
        :is(#v-render2,.r2-scope) .r2-ph .tt{font-weight:750;font-size:14.5px;flex:1}
        :is(#v-render2,.r2-scope) .r2-badge{background:var(--r2-red);color:#fff;font-size:11px;font-weight:700;border-radius:20px;min-width:19px;height:19px;padding:0 5px;display:grid;place-items:center}
        :is(#v-render2,.r2-scope) .t-grn{background:var(--r2-grnw);color:var(--r2-grn)} :is(#v-render2,.r2-scope) .t-org{background:var(--r2-orgw);color:var(--r2-org)}
        :is(#v-render2,.r2-scope) .t-blu{background:var(--r2-bluw);color:var(--r2-blu)} :is(#v-render2,.r2-scope) .t-vio{background:var(--r2-viow);color:var(--r2-vio)}
        :is(#v-render2,.r2-scope) .t-acc{background:var(--r2-accw);color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .r2-sw{width:42px;height:24px;border-radius:20px;background:var(--r2-sunk);border:1px solid var(--r2-line);position:relative;cursor:pointer;flex:none;transition:.15s}
        :is(#v-render2,.r2-scope) .r2-sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#c3c7d6;transition:.15s}
        :is(#v-render2,.r2-scope) .r2-sw.on{background:var(--r2-grn);border-color:var(--r2-grn)} :is(#v-render2,.r2-scope) .r2-sw.on::after{left:20px;background:#fff}
        :is(#v-render2,.r2-scope) .r2-sw.acc.on{background:var(--r2-acc);border-color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .r2-sw.sm{width:36px;height:21px}:is(#v-render2,.r2-scope) .r2-sw.sm::after{width:15px;height:15px}:is(#v-render2,.r2-scope) .r2-sw.sm.on::after{left:17px}
        :is(#v-render2,.r2-scope) .r2-pick{width:100%;background:var(--r2-accw);border:1px dashed var(--r2-acc);color:var(--r2-acc);border-radius:9px;padding:8px 12px;font-weight:650;font-size:13px;cursor:pointer;font-family:inherit;display:inline-flex;gap:6px;align-items:center;justify-content:center}
        :is(#v-render2,.r2-scope) .r2-pick:hover{background:var(--r2-acc);color:#fff}
        /* video đã chọn — hàng ngang, trượt */
        /* CARD NGANG: mỗi video 1 dòng; cột dọc + SCROLL DỌC khi nhiều (max-height) */
        :is(#v-render2,.r2-scope) .r2-chosen{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-height:min(56vh,520px);overflow-y:auto;padding-right:4px}
        :is(#v-render2,.r2-scope) .r2-chosen::-webkit-scrollbar{width:7px}:is(#v-render2,.r2-scope) .r2-chosen::-webkit-scrollbar-thumb{background:var(--r2-line);border-radius:4px}
        :is(#v-render2,.r2-scope) .r2-th{display:flex;flex:none;align-items:center;gap:9px;border:1px solid var(--r2-line);border-radius:9px;overflow:hidden;background:var(--r2-sunk);position:relative;padding:6px;min-height:56px}
        :is(#v-render2,.r2-scope) .r2-thed{flex:none;background:rgba(0,0,0,.55);border:none;color:#fff;border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:13px;display:grid;place-items:center;padding:0}
        :is(#v-render2,.r2-scope) .r2-thed:hover{background:var(--r2-acc)} :is(#v-render2,.r2-scope) .r2-thed.on{background:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .r2-th .tv{flex:none;width:76px;height:44px;border-radius:6px;display:grid;place-items:center;font-size:18px;background:linear-gradient(150deg,#2a2d3a,#22242f);overflow:hidden}
        :is(#v-render2,.r2-scope) .r2-th .tv video,:is(#v-render2,.r2-scope) .r2-th .tv img{width:100%;height:100%;object-fit:cover;display:block}
        body.light :is(#v-render2,.r2-scope) .r2-th .tv{background:linear-gradient(150deg,#d8dcec,#c3c8de)}
        :is(#v-render2,.r2-scope) .r2-th .tn{flex:1;min-width:0;font-size:12px;color:var(--r2-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :is(#v-render2,.r2-scope) .r2-th .tx{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:11px;display:grid;place-items:center;cursor:pointer}
        /* NHÃN mỗi video sẽ dùng thiết lập NÀO khi render — nhìn danh sách là biết, khỏi mở từng cái ra xem */
        :is(#v-render2,.r2-scope) .r2-tbadge{flex:none;font-size:10px;line-height:1;padding:4px 7px;border-radius:999px;white-space:nowrap;border:1px solid transparent;cursor:default}
        :is(#v-render2,.r2-scope) .r2-tbadge.rieng{background:var(--r2-accw);color:var(--r2-acc);border-color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .r2-tbadge.chung{background:var(--r2-grnw);color:var(--r2-grn);border-color:var(--r2-grnl)}
        :is(#v-render2,.r2-scope) .r2-tbadge.auto{background:var(--r2-line2);color:var(--r2-ink3)}
        /* SRT NGOÀI: khách đã gắn phụ đề của mình → nhãn BẤM ĐƯỢC (bấm = gỡ) nên cursor:pointer, khác 3 nhãn kia. */
        :is(#v-render2,.r2-scope) .r2-tbadge.srt{background:var(--r2-accw);color:var(--r2-acc);border-color:var(--r2-acc);cursor:pointer;font-weight:700}
        :is(#v-render2,.r2-scope) .r2-tbadge.srt:hover{background:var(--r2-acc);color:#fff}
        /* Đang kéo file .srt lơ lửng trên dòng video → viền nhấp nháy cho biết THẢ VÀO ĐÂY được. */
        :is(#v-render2,.r2-scope) .r2-th.drop{outline:2px dashed var(--r2-acc);outline-offset:-2px;background:var(--r2-accw)}
        :is(#v-render2,.r2-scope) .r2-th .tx:hover{background:var(--r2-red)}
        :is(#v-render2,.r2-scope) .r2-vfoot{display:flex;justify-content:space-between;font-size:11.5px;color:var(--r2-ink2);padding-top:8px;border-top:1px solid var(--r2-line2);margin-top:9px}
        :is(#v-render2,.r2-scope) .r2-vfoot a{color:var(--r2-acc);cursor:pointer}
        /* hàng đợi */
        :is(#v-render2,.r2-scope) .r2-qi{padding:9px 10px;border:1px solid var(--r2-line);border-radius:11px;margin-bottom:8px;background:var(--r2-card2)}
        :is(#v-render2,.r2-scope) .r2-qi.run{border-color:var(--r2-acc);background:var(--r2-accw)}
        :is(#v-render2,.r2-scope) .r2-qi.done{border-color:var(--r2-grnl)}
        :is(#v-render2,.r2-scope) .r2-qi.loi{border-color:var(--r2-red)}
        /* 🔴 03/09 — CHO XUỐNG DÒNG. Trước đây `nowrap`: nút đều `flex:none` (không co), nên ô
           chữ `.r2-qb` gánh trọn phần thiếu và trong cột trái Studio (~330px) nó bị bóp còn vài
           chục pixel ⇒ dòng trạng thái đổ DỌC mỗi dòng một ký tự (chủ dự án gửi ảnh). */
        :is(#v-render2,.r2-scope) .r2-qtop{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
        :is(#v-render2,.r2-scope) .r2-qn{flex:none;width:23px;height:23px;border-radius:7px;background:var(--r2-line);color:var(--r2-ink2);font-size:12px;font-weight:700;display:grid;place-items:center}
        :is(#v-render2,.r2-scope) .r2-qth{flex:none;width:56px;height:34px;border-radius:6px;overflow:hidden;background:#1a1c28;display:grid;place-items:center;font-size:15px}
        :is(#v-render2,.r2-scope) .r2-qth video,:is(#v-render2,.r2-scope) .r2-qth img{width:100%;height:100%;object-fit:cover;display:block}
        :is(#v-render2,.r2-scope) .r2-qi.run .r2-qn{background:var(--r2-acc);color:#fff} :is(#v-render2,.r2-scope) .r2-qi.done .r2-qn{background:var(--r2-grn);color:#fff}
        /* SÀN cho ô chữ: `min-width:0` cũ chính là thứ cho phép nó co xuống 0. Hẹp quá thì để
           NÚT rơi xuống hàng dưới, đừng bóp chữ. */
        :is(#v-render2,.r2-scope) .r2-qb{flex:1 1 150px;min-width:150px}
        :is(#v-render2,.r2-scope) .r2-qname{font-size:12px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :is(#v-render2,.r2-scope) .r2-qmeta{font-size:10.5px;color:var(--r2-ink3);margin-top:1px}
        :is(#v-render2,.r2-scope) .r2-qi.run .r2-qmeta{color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .r2-qact{flex:none;width:26px;height:26px;border-radius:7px;border:1px solid var(--r2-line);background:var(--r2-card);cursor:pointer;font-size:12px;color:var(--r2-ink2)}
        :is(#v-render2,.r2-scope) .r2-qbar{height:4px;background:var(--r2-line);border-radius:4px;margin-top:6px;overflow:hidden}
        :is(#v-render2,.r2-scope) .r2-qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--r2-acc),var(--r2-acc2));border-radius:4px}
        /* section phải */
        :is(#v-render2,.r2-scope) .r2-sec{background:var(--r2-card);border:1px solid var(--r2-line);border-radius:15px;padding:15px 16px;margin-bottom:14px}
/* Ô "Phóng to" gộp thành MỘT nút — nhãn nút chính là trạng thái hiện tại (07/09/2026). */
:is(#v-render2,.r2-scope) .r2-zoom-nut{display:block;width:100%;margin-top:8px;padding:9px 12px;
  border:1px dashed var(--r2-line2);background:rgba(96,165,250,.06);color:var(--r2-ink2);
  border-radius:9px;font-size:12.5px;font-weight:600;cursor:pointer;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .13s,color .13s}
:is(#v-render2,.r2-scope) .r2-zoom-nut:hover{border-color:#60a5fa;color:#bfdbfe;
  background:rgba(96,165,250,.11)}
:is(#v-render2,.r2-scope) .r2-zoom-nut:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
/* Thanh Lệch nay chỉnh trong khung xem trước. `_zoomHien` set display INLINE nên phải
   `!important` mới đè được — KHÔNG sửa `_zoomHien` vì nó còn phục vụ đường khác. */
:is(#v-render2,.r2-scope) #r2ZoomLechWrap{display:none!important}
/* Hai hành động của Nhạc nền: đưa ra khỏi dropdown cho nhìn là thấy (07/09/2026). */
:is(#v-render2,.r2-scope) .r2-bg-nut{display:flex;gap:7px;margin-top:7px;flex-wrap:wrap}
:is(#v-render2,.r2-scope) .r2-bg-nut button{flex:1 1 auto;min-width:0;padding:7px 10px;
  border:1px solid var(--r2-line2);background:transparent;color:var(--r2-ink2);
  border-radius:8px;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
:is(#v-render2,.r2-scope) .r2-bg-nut button:hover{border-color:#f472b6;color:#fbcfe8}
:is(#v-render2,.r2-scope) .r2-bg-nut button:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
/* Đang bật thì nút phải NHÌN RA là đang bật — nét liền + accent, khác hẳn trạng thái tắt. */
:is(#v-render2,.r2-scope) .r2-zoom-nut.on{border-style:solid;border-color:#60a5fa;color:#dbeafe;
  background:rgba(96,165,250,.16)}

/* ===== XEM TRƯỚC PHÓNG TO (07/09/2026) ===== */
:is(#v-render2,.r2-scope) .r2-zoom-mo{margin-left:auto;border:1px solid var(--r2-line2);
  background:transparent;color:var(--r2-ink2);border-radius:7px;padding:3px 9px;font-size:11px;
  font-weight:600;cursor:pointer;white-space:nowrap}
:is(#v-render2,.r2-scope) .r2-zoom-mo:hover{border-color:#60a5fa;color:#93c5fd}
.r2-zt-khung{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;
  overflow:hidden;border:1px solid var(--r2-line);cursor:ns-resize;user-select:none;
  /* Nền LƯỚI: chưa chọn video thì khung đen thui, hai dải tối không đọc ra được vùng nào
     bị cắt. Có lưới thì vẫn thấy rõ ranh giới giữ/cắt. */
  background-color:#0a0d18;
  background-image:repeating-linear-gradient(0deg,rgba(148,163,184,.10) 0 1px,transparent 1px 34px),
                   repeating-linear-gradient(90deg,rgba(148,163,184,.10) 0 1px,transparent 1px 34px)}
/* `contain` chứ KHÔNG `cover`: ảnh phải hiện NGUYÊN VẸN thì khung cắt mới có nghĩa —
   `cover` đã tự cắt sẵn một lần rồi, khách chọn vùng trên một bức đã bị xén. */
.r2-zt-khung video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* Zoom cắt CẢ BỐN phía. Bản cũ chỉ vẽ dải trên/dưới nên giấu mất chuyện mép trái/phải cũng bay —
   một `box-shadow` toả ra từ khung cắt phủ đúng cả 4 vùng, khỏi phải đồng bộ 4 thẻ rời. */
.r2-zt-tren,.r2-zt-duoi{display:none}
.r2-zt-trong{position:absolute;pointer-events:none;border:2px solid rgba(96,165,250,.95);
  box-shadow:0 0 0 9999px rgba(3,6,18,.72), 0 0 0 1px rgba(0,0,0,.55) inset}
/* Ảnh mẫu làm nền khung xem trước (07/09/2026): cùng luật hiển thị với <video> để kéo/phóng
   trông y hệt nhau — khác một chút là khách thấy hai hành vi khác nhau cho cùng thao tác. */
.r2-zt-khung img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* Nhãn ở ĐỈNH, không ở đáy: phụ đề gốc luôn nằm 1/3 dưới, mà ảnh mẫu 16:9 được chọn CHÍNH VÌ
   có sẵn dòng chữ đó — để nhãn ở đáy là tự che mất thứ cần khoe. */
.r2-zt-nhan{position:absolute;left:0;right:0;top:0;padding:6px 10px 16px;text-align:center;
  font-size:10.5px;color:var(--r2-ink3);pointer-events:none;
  background:linear-gradient(rgba(3,6,18,.86),transparent)}
.r2-zt-trong-txt{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:0 26px;font-size:11.5px;color:var(--r2-ink3);pointer-events:none}

/* ===== KHỐI "Xoá dấu vết kênh gốc" (07/09/2026) — gộp 3 mục tự dò ===== */
/* 07/09: khối tự-xoá nay là MỘT Ô trong lưới (không còn `.r2-lwbox` chiếm cả hàng).
   Thẻ bọc hai công tắc thật phải `display:contents` — để nó là ô lưới thật thì lưới
   lại thừa một ô rỗng đúng chỗ vừa dọn. */
:is(#v-render2,.r2-scope) .r2-tudo-an{display:contents}
:is(#v-render2,.r2-scope) .r2-tudo{border-left:3px solid #f472b6;margin-top:10px;
  /* 🔴 Khối cha là GRID nhiều cột: không có dòng này thì khối gộp co vào ĐÚNG MỘT Ô,
     lưới 2 cột bên trong tràn ra ngoài và ĐÈ LÊN ô kế bên (đã thấy tận mắt). */
  grid-column:1/-1;min-width:0}
:is(#v-render2,.r2-scope) .r2-tudo .lwh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
:is(#v-render2,.r2-scope) .r2-tudo-note{font-weight:400;font-size:11px;color:var(--r2-ink3);
  letter-spacing:0}
/* 07/09: gộp còn MỘT công tắc ⇒ bỏ lưới 2 cột. Để nguyên `1fr 1fr` thì ô công tắc co về
   nửa trái, nửa phải trống hoác — nhìn như thiếu mất một mục. */
:is(#v-render2,.r2-scope) .r2-tudo-ds{display:grid;gap:7px;margin-top:9px}
/* Giá đặt sau nhãn, cùng dòng — đây là con số quyết định bật/tắt nên cho nó đọc được ngay. */
:is(#v-render2,.r2-scope) .r2-tudo-ba{display:flex;flex-direction:column;gap:5px}
.r2-tudo-hg{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--r2-ink2);line-height:1.35}
.r2-tudo-hg b{color:var(--r2-ink3);font-weight:600}
.r2-tudo-con{margin-left:16px}
.r2-tudo-con.mo{opacity:.42}
.r2-tudo-gia{margin-left:6px;font-size:10.5px;font-weight:600;
  color:#fca5a5;background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.28);
  border-radius:999px;padding:1px 7px;white-space:nowrap;font-variant-numeric:tabular-nums}
:is(#v-render2,.r2-scope) .r2-tudo-ft{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:10px;padding-top:9px;border-top:1px dashed var(--r2-line)}
:is(#v-render2,.r2-scope) .r2-tudo-ft .btn{font-size:12px;padding:5px 11px}
/* Nhãn dài trong ô hẹp bị vỡ 4 dòng (đã thấy tận mắt): cho nhãn ở HÀNG RIÊNG,
   mô tả xuống dưới, thay vì ép cả hai chen ngang với công tắc. */
:is(#v-render2,.r2-scope) .r2-cl-rong{min-width:0;flex:1 1 auto}
:is(#v-render2,.r2-scope) .r2-cl-rong>small{margin-top:2px}
:is(#v-render2,.r2-scope) #r2LogoDuyetInfo{font-size:11px;opacity:.65}

/* ===== TAB RENDER (07/09/2026) — chia khu vực cấu hình thành 5 tab ===== */
.r2-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 14px;padding:4px;
  background:var(--r2-bg2,#0f1424);border:1px solid var(--r2-line);border-radius:11px}
.r2-tab{flex:1 1 auto;min-width:0;padding:9px 12px;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--r2-ink2,#94a3b8);font:600 12.5px/1.25 inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .13s,color .13s}
.r2-tab:hover{background:rgba(255,255,255,.05);color:var(--r2-ink,#e2e8f0)}
.r2-tab.on{background:linear-gradient(135deg,#7c3aed,#db2777);color:#fff;
  box-shadow:0 2px 10px rgba(219,39,119,.28)}
.r2-tab:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
/* Ẩn khối không thuộc tab đang mở. `!important` vì .r2-sec/.r2-adv có display riêng. */
[data-r2tab]{display:none!important}
[data-r2tab].r2-tab-hien{display:block!important}
@media (max-width:760px){ .r2-tab{flex:1 1 100%} }

        :is(#v-render2,.r2-scope) .r2-sh{display:flex;align-items:center;gap:10px;margin-bottom:14px}
        :is(#v-render2,.r2-scope) .r2-sh .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex:none}
        :is(#v-render2,.r2-scope) .r2-sh .tt{font-weight:750;font-size:15px;flex:1}
        :is(#v-render2,.r2-scope) .r2-sh .tt small{display:block;font-weight:400;font-size:11.5px;color:var(--r2-ink2);margin-top:1px}   /* chú thích section: muted như Automation (ink2 ≈ --muted), KHÔNG dùng ink3 dim */
        /* cards ngôn ngữ */
        :is(#v-render2,.r2-scope) .r2-langrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px}
        :is(#v-render2,.r2-scope) .r2-lc{border:1px solid var(--r2-line);border-radius:12px;padding:12px;background:var(--r2-card2)}
        :is(#v-render2,.r2-scope) .r2-lctop{display:flex;align-items:center;gap:8px;margin-bottom:10px}
        :is(#v-render2,.r2-scope) .r2-lcflag{font-size:17px} :is(#v-render2,.r2-scope) .r2-lcname{font-weight:700;font-size:13.5px;flex:1}
        :is(#v-render2,.r2-scope) .r2-lclbl{font-size:11px;color:var(--r2-ink3);margin-bottom:4px}
        :is(#v-render2,.r2-scope) .r2-grow{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:6px 4px 6px 8px;border-radius:9px;border:1px solid var(--r2-line);background:var(--r2-card)}
        :is(#v-render2,.r2-scope) .r2-grow.off{opacity:.5}
        /* 🔴 12/09/2026 — KHOÁ THẺ NGÔN NGỮ THEO CÔNG TẮC TỔNG (lỗi D).
           `nodub`  = tắt "Lồng tiếng" ⇒ phần GIỌNG ĐỌC vô tác dụng (luật 12/09: công tắc tổng tắt =
                      không lồng tiếng, không ngoại lệ). Công tắc BẬT/TẮT ngôn ngữ vẫn sống vì nó còn
                      quyết định danh sách `langs` cho PHỤ ĐỀ.
           `nodich` = tắt CẢ lồng tiếng lẫn phụ đề ⇒ thẻ ngôn ngữ không còn đổi được gì ⇒ khoá hết.
           Câu ".r2-dubtat" CỐ Ý nằm NGOÀI vùng bị mờ — lời giải thích mà cũng mờ thì vô dụng. */
        :is(#v-render2,.r2-scope) .r2-langrow .r2-dubtat{display:none;font-size:11px;color:#ffce80;margin:0 0 7px;line-height:1.45}
        :is(#v-render2,.r2-scope) .r2-langrow.nodub .r2-dubtat{display:block}
        :is(#v-render2,.r2-scope) .r2-langrow.nodub .r2-lclbl,
        :is(#v-render2,.r2-scope) .r2-langrow.nodub .r2-grow,
        :is(#v-render2,.r2-scope) .r2-langrow.nodub .r2-l2note{opacity:.35;pointer-events:none;filter:grayscale(1)}
        :is(#v-render2,.r2-scope) .r2-langrow.nodich .r2-lc,
        :is(#v-render2,.r2-scope) .r2-langrow.nodich .r2-addlang{opacity:.4;pointer-events:none;filter:grayscale(1)}
        :is(#v-render2,.r2-scope) .r2-grow .gt{font-size:11.5px;font-weight:700;flex:none;width:30px}
        :is(#v-render2,.r2-scope) .r2-grow.nam .gt{color:var(--r2-blu)} :is(#v-render2,.r2-scope) .r2-grow.nu .gt{color:var(--r2-red)}
        :is(#v-render2,.r2-scope) .r2-grow select{flex:1;min-width:0;background:var(--r2-sunk);border:1px solid var(--r2-line);color:var(--r2-ink);border-radius:7px;padding:6px 8px;font-size:12px;font-family:inherit;cursor:pointer}
        :is(#v-render2,.r2-scope) .r2-gsw{width:38px;height:22px;border-radius:20px;background:var(--r2-sunk);border:1px solid var(--r2-line);position:relative;cursor:pointer;flex:none;transition:.15s}
        :is(#v-render2,.r2-scope) .r2-gsw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#c3c7d6;transition:.15s}
        :is(#v-render2,.r2-scope) .r2-grow.nam .r2-gsw.on{background:var(--r2-blu);border-color:var(--r2-blu)}
        :is(#v-render2,.r2-scope) .r2-grow.nu .r2-gsw.on{background:var(--r2-red);border-color:var(--r2-red)}
        :is(#v-render2,.r2-scope) .r2-gsw.on::after{left:18px;background:#fff}
        :is(#v-render2,.r2-scope) .r2-hear{width:30px;height:30px;border-radius:50%;background:var(--r2-sunk);border:1px solid var(--r2-line);color:var(--r2-ink);cursor:pointer;flex:none;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.15s}
        :is(#v-render2,.r2-scope) .r2-hear:hover{background:var(--r2-card2);border-color:var(--r2-blu)}
        :is(#v-render2,.r2-scope) .r2-hear:disabled{opacity:.5;cursor:default}
        :is(#v-render2,.r2-scope) .r2-l2note{font-size:10.5px;color:var(--r2-acc);font-weight:600;margin:2px 0 9px;display:none}
        :is(#v-render2,.r2-scope) .r2-lc.two .r2-l2note{display:block}
        :is(#v-render2,.r2-scope) .r2-lcvol{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--r2-ink2)}
        :is(#v-render2,.r2-scope) .r2-lcvol input{flex:1;accent-color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .r2-addlang{position:relative;border:2px dashed var(--r2-line);border-radius:12px;display:grid;place-items:center;cursor:pointer;color:var(--r2-ink3);min-height:120px;font-size:13px;text-align:center}
        :is(#v-render2,.r2-scope) .r2-addlang:hover{border-color:var(--r2-acc);color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .r2-addlang .pl{font-size:26px;margin-bottom:4px}
        :is(#v-render2,.r2-scope) .r2-subline{display:flex;align-items:center;gap:10px;margin-top:13px;padding-top:13px;border-top:1px solid var(--r2-line2)}
        :is(#v-render2,.r2-scope) .r2-subline .txt{flex:1;font-weight:600;font-size:13.5px} :is(#v-render2,.r2-scope) .r2-subline .txt small{font-weight:400;color:var(--r2-ink3)}
        /* mách nước "khoanh vùng phụ đề bằng tay" — dưới hàng Tạo phụ đề (xem chú thích ở markup) */
        :is(#v-render2,.r2-scope) .r2-subhint{margin-top:9px;padding:9px 11px;border-radius:9px;background:var(--r2-sunk);border:1px solid var(--r2-line);border-left:3px solid var(--r2-acc);font-size:12px;line-height:1.55;color:var(--r2-ink2)}
        :is(#v-render2,.r2-scope) .r2-subhint b{color:var(--r2-ink)} :is(#v-render2,.r2-scope) .r2-subhint span{color:var(--r2-ink3)}
        :is(#v-render2,.r2-scope) .r2-ghost{background:var(--r2-sunk);border:1px solid var(--r2-line);color:var(--r2-ink2);border-radius:9px;padding:7px 12px;font-size:12.5px;cursor:pointer;font-family:inherit;font-weight:600}
        :is(#v-render2,.r2-scope) .r2-ghost:hover{border-color:var(--r2-acc);color:var(--r2-acc)}
        /* chỉnh video */
        :is(#v-render2,.r2-scope) .r2-ctrls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
        /* 07/09/2026 — ÉP 4 CỘT: auto-fit theo bề rộng thực tế ra 3 cột, đẩy "Lật gương"
           xuống hàng riêng một mình. minmax(0,1fr) chứ không 1fr — cột lấy min-width theo
           NỘI DUNG sẽ bị select "9:16 (Dọc) — nền đen" phình quá khung. */
        @media (min-width:720px){ :is(#v-render2,.r2-scope) #r2EditCtrls{grid-template-columns:repeat(4,minmax(0,1fr))}
          /* Ô công tắc trong cột hẹp: xếp DỌC (nhãn trên, công tắc canh phải dưới).
             `.r2-cbox.tog` vốn là flex NGANG — ở 4 cột thì nhãn "Lật gương"/"Đậm màu, né
             trùng" vỡ 2-3 dòng và chen với công tắc. Xếp dọc thì mô tả có nguyên bề ngang. */
          :is(#v-render2,.r2-scope) #r2EditCtrls > .r2-cbox.tog{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px}
          /* `.cl` cũng là flex NGANG ⇒ nhãn và <small> đứng cạnh nhau, ép nhãn 'Lật gương'
             vỡ 2 dòng trong cột hẹp. Xếp dọc: nhãn một dòng, mô tả nguyên bề ngang bên dưới. */
          :is(#v-render2,.r2-scope) #r2EditCtrls > .r2-cbox.tog .cl{margin-bottom:0;flex-direction:column;align-items:flex-start;gap:2px}
          :is(#v-render2,.r2-scope) #r2EditCtrls > .r2-cbox.tog .r2-sw{align-self:flex-end}
        }
        :is(#v-render2,.r2-scope) .r2-cbox{border:1px solid var(--r2-line);border-radius:11px;padding:10px 11px;background:var(--r2-card2)}
        :is(#v-render2,.r2-scope) .r2-cbox .cl{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;margin-bottom:7px;color:var(--r2-ink)}
        :is(#v-render2,.r2-scope) .r2-cbox select,:is(#v-render2,.r2-scope) .r2-cbox input[type=number]{width:100%;background:var(--r2-card);border:1px solid var(--r2-line);color:var(--r2-ink);border-radius:8px;padding:7px 9px;font-size:12.5px;font-family:inherit}
        :is(#v-render2,.r2-scope) .r2-cbox.tog{display:flex;align-items:center;justify-content:space-between}
        /* ✂️ 12/09/2026 — HAI Ô NHẬP TRONG MỘT THẺ (Cắt đầu / Cắt cuối). `min-width:0` là BẮT BUỘC:
           không có nó thì input `width:100%` đẩy cột grid phình ra quá khung thẻ. */
        :is(#v-render2,.r2-scope) .r2-cat2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
        :is(#v-render2,.r2-scope) .r2-cat2 label{display:flex;flex-direction:column;gap:4px;min-width:0}
        :is(#v-render2,.r2-scope) .r2-cat2 label>span{font-size:10.5px;font-weight:400;color:var(--r2-ink3)}
        :is(#v-render2,.r2-scope) .r2-cbox.tog .cl{margin-bottom:0}
        :is(#v-render2,.r2-scope) .r2-mrng{display:flex;align-items:center;gap:9px} :is(#v-render2,.r2-scope) .r2-mrng input[type=range]{flex:1;accent-color:var(--r2-acc)}
        /* logo/wm 3 box */
        :is(#v-render2,.r2-scope) .r2-lw3{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
        @media(max-width:900px){:is(#v-render2,.r2-scope) .r2-lw3{grid-template-columns:1fr}}
        :is(#v-render2,.r2-scope) .r2-lwbox{border:1px solid var(--r2-line);border-radius:11px;padding:11px;background:var(--r2-card2)}
        :is(#v-render2,.r2-scope) .r2-lwbox .lwh{display:flex;align-items:center;gap:7px;margin-bottom:9px;font-size:12.5px;font-weight:650}
        :is(#v-render2,.r2-scope) .r2-lwbox .in{display:flex;gap:7px;align-items:center}
        :is(#v-render2,.r2-scope) .r2-lwbox input,:is(#v-render2,.r2-scope) .r2-lwbox select{background:var(--r2-card);border:1px solid var(--r2-line);color:var(--r2-ink);border-radius:8px;padding:6px 9px;font-size:12px;font-family:inherit;min-width:0}
        :is(#v-render2,.r2-scope) .r2-lwbox .tag{flex:1;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--r2-ink2);background:var(--r2-card);border:1px solid var(--r2-line);border-radius:8px;padding:5px 8px}
        /* nâng cao */
        :is(#v-render2,.r2-scope) .r2-advh{display:flex;align-items:center;gap:10px;cursor:pointer}
        :is(#v-render2,.r2-scope) .r2-advh .chev{margin-left:auto;transition:.15s}
        :is(#v-render2,.r2-scope) .r2-adv.open .r2-advh .chev{transform:rotate(180deg)}
        :is(#v-render2,.r2-scope) .r2-advb{display:none;margin-top:13px;padding-top:13px;border-top:1px solid var(--r2-line2);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:11px}
        :is(#v-render2,.r2-scope) .r2-adv.open .r2-advb{display:grid}
        :is(#v-render2,.r2-scope) .r2-advb h5{margin:0 0 7px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--r2-ink3)}
        :is(#v-render2,.r2-scope) .r2-advb .it{font-size:12.5px;color:var(--r2-ink2);padding:4px 0;display:flex;align-items:center;gap:7px;cursor:pointer}
        :is(#v-render2,.r2-scope) .r2-advb .it:hover{color:var(--r2-acc)}
        /* footer */
        :is(#v-render2,.r2-scope) .r2-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--r2-card);border:1px solid var(--r2-line);border-radius:15px;padding:14px 18px}
        :is(#v-render2,.r2-scope) .r2-fstat{display:flex;align-items:center;gap:10px}
        :is(#v-render2,.r2-scope) .r2-fstat .fic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:16px;flex:none}
        :is(#v-render2,.r2-scope) .r2-fstat .fl{font-size:11px;color:var(--r2-ink3)} :is(#v-render2,.r2-scope) .r2-fstat .fv{font-weight:750;font-size:15px}
        :is(#v-render2,.r2-scope) .r2-render{background:linear-gradient(135deg,var(--r2-acc),var(--r2-acc2));color:#fff;border:none;border-radius:12px;padding:13px 30px;font-weight:750;font-size:15px;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:10px;box-shadow:0 6px 18px rgba(236,72,153,.35)}
        :is(#v-render2,.r2-scope) .r2-render small{display:block;font-weight:400;font-size:11px;opacity:.9}
        /* popup ngôn ngữ */
        :is(#v-render2,.r2-scope) .r2-langpop{position:absolute;top:100%;left:0;right:0;margin-top:6px;background:var(--r2-card);border:1px solid var(--r2-line);border-radius:11px;box-shadow:0 12px 34px rgba(0,0,0,.18);z-index:15;padding:6px;display:none;max-height:250px;overflow-y:auto;text-align:left}
        :is(#v-render2,.r2-scope) .r2-addlang.open .r2-langpop{display:block}
        :is(#v-render2,.r2-scope) .r2-langpop input{width:100%;background:var(--r2-sunk);border:1px solid var(--r2-line);border-radius:8px;padding:6px 9px;font-size:12px;font-family:inherit;margin-bottom:5px;color:var(--r2-ink)}
        :is(#v-render2,.r2-scope) .r2-lpit{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--r2-ink)}
        :is(#v-render2,.r2-scope) .r2-lpit:hover{background:var(--r2-accw);color:var(--r2-acc)}
        /* modal style phụ đề */
        /* 🔴 08/09/2026 — z-index 1200 → 100018. Chủ dự án: *"phần zoom … có modal nhưng không được
           lên trên nhất mà bị giấu sau modal"*. 6 modal dùng lớp này (Phóng to · Style phụ đề · Giọng ·
           Văn phong · Nhạc nền · Theo dõi) đều mở ra TỪ cột `#r2CfgCol` — mà cột đó bị **MƯỢN** sang
           `#wizCfgThan` nằm trong modal `.wz-nen` (z 100015) khi kênh bật "xử lý riêng"
           (`_wizHsTach` :20381 · `_wizXlVe` :21853). Con 1200 < cha 100015 ⇒ nền mờ của cha phủ lên và
           ĂN HẾT cú bấm: modal MỞ THẬT (`.open` gắn đúng, `display:flex`) nhưng bấm không tới.
           Đo thật trước vá: `elementFromPoint` tại tâm hộp trả về `.wz-o` / `.wz-ngkhay` của modal cha,
           6/6 modal. Đúng ca `#fdModal` đã vá 23/08 và 27/08 — xem bậc thang lớp ở :9665.
           ⚠ 100018 chứ không cao hơn: phải DƯỚI `promptAn` (100020) · `#fdModal` (100025) ·
             `vcHoi` (100030) — mấy hộp đó là CON, mở ra từ trong chính 6 modal này. */
        :is(#v-render2,.r2-scope) .r2-bd{position:fixed;inset:0;background:rgba(20,22,33,.5);display:none;z-index:100018;align-items:center;justify-content:center;padding:20px}
        :is(#v-render2,.r2-scope) .r2-bd.open{display:flex}
        :is(#v-render2,.r2-scope) .r2-md{background:var(--r2-card);border:1px solid var(--r2-line);border-radius:16px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto}
        /* ===== STUDIO PHỤ ĐỀ (30/08/2026) — bấm "Bán thủ công" là SANG MÀN NÀY =====
           Bản trước chỉ đổi một thanh nhỏ rồi giữ nguyên UI cũ ⇒ chủ dự án báo "chả hiểu gì".
           Nay chế độ bán thủ công có màn riêng: rail bước · khu sửa phụ đề · cột cấu hình.

           🔴 KHÔNG DI CHUYỂN phần tử nào trong DOM. `#r2StuRail`/`#r2StuMain` được thêm vào CUỐI
           `.r2-grid` rồi CSS xếp lại chỗ bằng `grid-column`. Lý do: CSS sẵn có dùng
           `.r2-grid>div:first-child #r2Chosen` để cấp thanh cuộn — chèn rail vào ĐẦU là cướp mất
           `:first-child` ⇒ hỏng luôn cả chế độ tự động. Và di chuyển phần tử thật vào container
           khác đã từng làm chết tính năng im lặng khi `innerHTML` quét container đó. */
        :is(#v-render2,.r2-scope) #r2StuMain{display:none}
        /* 🔴 30/08 — chủ dự án chụp màn VỠ: rail + mép trái bị đẩy khuất, chữ cụt ("a chọn video").
           Nguyên nhân ĐO ĐƯỢC: track thứ 3 ghim CỨNG `372px`, nhưng `#r2CfgCol` được thiết kế cho
           cột ~600px — nhét vào 372px thì khối Logo/Watermark (`.r2-lw3`) lòi ra 77px ⇒ `.content`
           cuộn ngang ⇒ khách kéo sang phải là mất rail. `minmax(auto,372px)` KHÔNG cứu được: cái
           tràn nằm SÂU bên trong, min-content của cột không phản ánh nó.
           ⇒ Thôi ghim số. Dùng lại ĐÚNG tỉ lệ `0.56fr 1fr` mà chế độ Tự động chạy tốt bấy lâu, chỉ
           thêm rail 176px phía trước. Track co giãn thì không có ngưỡng cứng nào để mà vỡ.
           Lưới `thu_bo_cuc_studio.py` chặn tái phát — dựng thẻ ngôn ngữ THẬT rồi đo cuộn ngang. */
        /* rail nay là stepper NGANG nằm ngoài lưới ⇒ lưới về đúng 2 cột như chế độ Tự động */
        #v-render2.studio .r2-grid{grid-template-columns:0.56fr 1fr}
        /* 🔴 ẢNH THẬT 30/08: cột cấu hình hẹp lại thì `.r2-subline` (flex 1 hàng) bóp nhãn
           "Tạo phụ đề" xuống còn ~40px ⇒ chữ rơi dọc từng tiếng. Cho phép XUỐNG DÒNG: nhãn ăn
           trọn một hàng, 2 nút tụt xuống hàng dưới. Chỉ trong studio — không đụng chế độ tự động. */
        #v-render2.studio .r2-subline{flex-wrap:wrap}
        #v-render2.studio .r2-subline .txt{flex:1 1 100%}
        #v-render2.studio .r2-grid>div:first-child{grid-column:1;grid-row:1;min-width:0}
        #v-render2.studio #r2CfgCol{grid-column:2;grid-row:1}
        #v-render2.studio #r2StuMain{grid-column:1;grid-row:1}
        /* Rail chọn bước "Duyệt phụ đề" → khu sửa THAY CHỖ cột Video nguồn (không đẩy nhau xuống,
           không sinh thanh cuộn thứ hai). Đây là cách app mẫu làm: rail đổi VIEW ở giữa. */
        #v-render2.studio.stu-edit .r2-grid>div:first-child{display:none}
        #v-render2.studio.stu-edit #r2StuMain{display:flex}
        /* Đang duyệt ⇒ ẨN cột cấu hình render (Tốc độ / Tỉ lệ / Lật gương… không liên quan việc đang
           làm mà ăn 372px — ở laptop 1366 bảng cue chỉ còn 222px, thấy 2 hàng). Aegisub / Subtitle Edit
           không có panel lạ bên cạnh lúc sửa. Giọng đổi qua bước 5: rail rời khu sửa, cột hiện lại. */
        #v-render2.studio.stu-edit .r2-grid{grid-template-columns:minmax(0,1fr)}
        #v-render2.studio.stu-edit #r2CfgCol{display:none}
        @media(max-width:1180px){#v-render2.studio .r2-grid{grid-template-columns:1fr}
          #v-render2.studio .r2-grid>div:first-child,
          #v-render2.studio #r2CfgCol,#v-render2.studio #r2StuMain{grid-column:1;grid-row:auto}}

        /* --- RAIL BƯỚC --- */
        :is(#v-render2,.r2-scope) .stu-rail{flex-direction:column;gap:3px;background:var(--r2-card);
          border:1px solid var(--r2-line);border-radius:14px;padding:12px 10px;position:sticky;top:12px}
        :is(#v-render2,.r2-scope) .stu-rail h4{margin:0 0 8px;font-size:10.5px;font-weight:700;
          letter-spacing:.5px;text-transform:uppercase;color:var(--r2-ink3);padding:0 6px}
        :is(#v-render2,.r2-scope) .stu-step{display:flex;align-items:center;gap:8px;padding:8px 8px;
          border-radius:9px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--r2-ink2);
          border:1px solid transparent;background:none;font-family:inherit;text-align:left;width:100%}
        :is(#v-render2,.r2-scope) .stu-step:hover{background:var(--r2-card2);color:var(--r2-ink)}
        :is(#v-render2,.r2-scope) .stu-step.on{background:var(--r2-orgw);border-color:var(--r2-org);
          color:var(--r2-org)}
        :is(#v-render2,.r2-scope) .stu-step .k{width:20px;height:20px;border-radius:50%;flex:none;
          display:grid;place-items:center;font-size:10.5px;font-weight:800;background:var(--r2-sunk);
          color:var(--r2-ink3);border:1px solid var(--r2-line)}
        :is(#v-render2,.r2-scope) .stu-step.done .k{background:var(--r2-grn);color:#fff;border-color:transparent}
        :is(#v-render2,.r2-scope) .stu-step.on .k{background:var(--r2-org);color:#fff;border-color:transparent}
        :is(#v-render2,.r2-scope) .stu-step .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
          white-space:nowrap}
        :is(#v-render2,.r2-scope) .stu-rail .tip{font-size:10.5px;color:var(--r2-ink3);line-height:1.45;
          padding:8px 6px 0;margin-top:6px;border-top:1px solid var(--r2-line2)}

        /* --- KHU SỬA PHỤ ĐỀ ---
           Luật ⑧: MỘT vùng cuộn duy nhất = bảng cue. Vỏ và các khối khác đều `flex:none`. */
        :is(#v-render2,.r2-scope) .stu-main{flex-direction:column;background:var(--r2-card);
          border:1px solid var(--r2-line);border-radius:14px;overflow:hidden;
          height:calc(100vh - 192px);min-height:520px}   /* đo thật: 232 bỏ phí 56px đáy ở màn 768 */
        :is(#v-render2,.r2-scope) .stu-hd{display:flex;align-items:center;gap:8px;flex:none;
          padding:11px 14px;border-bottom:1px solid var(--r2-line);background:var(--r2-card2)}
        :is(#v-render2,.r2-scope) .stu-hd .tt{font-size:13.5px;font-weight:750;flex:1;min-width:0;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        /* 🔴 30/08 (ảnh thật 1366×768): 2 cột trái/phải làm bảng cue còn 222px, mỗi hàng 85px, thấy
           2/10 hàng. Chuẩn ngành (Aegisub / Subtitle Edit / app mẫu): video + ô soạn là DẢI TRÊN,
           bảng cue chạy TRỌN bề ngang bên dưới. Ô soạn đứng CẠNH video (Aegisub) để dải trên thấp. */
        :is(#v-render2,.r2-scope) .stu-body{flex:1;min-height:0;display:flex;flex-direction:column}
        :is(#v-render2,.r2-scope) .stu-l{flex:none;display:flex;gap:12px;padding:10px 14px;
          border-bottom:1px solid var(--r2-line);min-height:0}
        :is(#v-render2,.r2-scope) .stu-vid{flex:none;width:min(34%,336px);display:flex;flex-direction:column;gap:6px}
        :is(#v-render2,.r2-scope) .stu-l video{width:100%;aspect-ratio:16/9;background:#000;
          border-radius:10px;flex:none;max-height:170px}
        :is(#v-render2,.r2-scope) .stu-ed{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
        /* Dưới ô soạn: giọng sẽ dùng khi ✅ + bảng phím tắt (Amara in phím tắt ngay góc trái) */
        :is(#v-render2,.r2-scope) .stu-meta{display:flex;flex-wrap:wrap;gap:3px 14px;align-items:center;
          font-size:10.5px;color:var(--r2-ink3);line-height:1.4;margin-top:auto}
        :is(#v-render2,.r2-scope) .stu-meta a{color:var(--r2-acc);cursor:pointer;font-weight:600}
        :is(#v-render2,.r2-scope) .stu-keys{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
        :is(#v-render2,.r2-scope) .stu-cap{font-size:12px;color:var(--r2-ink2);text-align:center;
          padding:6px 8px;background:var(--r2-sunk);border-radius:8px;min-height:30px;flex:none;
          display:grid;place-items:center;line-height:1.4}
        :is(#v-render2,.r2-scope) .stu-lb{font-size:10.5px;font-weight:700;color:var(--r2-ink3);flex:none;
          text-transform:uppercase;letter-spacing:.4px;display:flex;justify-content:space-between}
        :is(#v-render2,.r2-scope) .stu-lb .dem{font-weight:600;text-transform:none;letter-spacing:0}
        :is(#v-render2,.r2-scope) .stu-l textarea{width:100%;background:var(--r2-sunk);color:var(--r2-ink);
          border:1px solid var(--r2-line);border-radius:9px;padding:8px 10px;font-family:inherit;
          font-size:13px;line-height:1.5;resize:none;flex:none}
        :is(#v-render2,.r2-scope) .stu-l textarea[readonly]{color:var(--r2-ink2);background:var(--r2-card2)}
        :is(#v-render2,.r2-scope) .stu-l textarea:focus{outline:none;border-color:var(--r2-acc)}
        /* Bảng cue — grid để 5 cột thẳng hàng mà không cần <table> */
        :is(#v-render2,.r2-scope) .stu-r{flex:1;display:flex;flex-direction:column;min-height:0}
        :is(#v-render2,.r2-scope) .stu-th,
        :is(#v-render2,.r2-scope) .stu-row{display:grid;
          grid-template-columns:34px 68px minmax(0,1fr) minmax(0,1.35fr) 46px;gap:8px;
          padding:7px 13px;align-items:start}
        :is(#v-render2,.r2-scope) .stu-th{font-size:10.5px;font-weight:700;color:var(--r2-ink3);flex:none;
          text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--r2-line)}
        :is(#v-render2,.r2-scope) .stu-rows{flex:1;min-height:0;overflow-y:auto}   /* VÙNG CUỘN DUY NHẤT */
        :is(#v-render2,.r2-scope) .stu-row{font-size:12px;line-height:1.45;cursor:pointer;
          border-bottom:1px solid var(--r2-line2)}
        :is(#v-render2,.r2-scope) .stu-row:hover{background:var(--r2-card2)}
        :is(#v-render2,.r2-scope) .stu-row.on{background:var(--r2-accw);box-shadow:inset 3px 0 0 var(--r2-acc)}
        /* Quy ước Aegisub (chuẩn cộng đồng fansub): VÀNG = câu đang hiện trên khung hình hiện tại,
           ĐỎ = câu chồng thời gian với câu khác. Nhờ nó khách vừa xem vừa biết đang ở hàng nào. */
        :is(#v-render2,.r2-scope) .stu-row.now{background:#facc1522;box-shadow:inset 3px 0 0 #facc15}
        :is(#v-render2,.r2-scope) .stu-row.now.on{background:var(--r2-accw);box-shadow:inset 3px 0 0 var(--r2-acc)}
        :is(#v-render2,.r2-scope) .stu-row.chong .t{color:#f87171;font-weight:700}
        :is(#v-render2,.r2-scope) .stu-row .n{color:var(--r2-ink3);font-variant-numeric:tabular-nums}
        /* 🎭 NHÃN GIỌNG — chấm tròn TRƯỚC số câu. CỐ Ý không dùng nền/viền-trái: hai thứ đó đã gánh
           "đang chọn" (.on) và "đang phát" (.now); chồng thêm là mất nghĩa cả hai. Màu giờ đã là
           đỏ cho "chồng giờ" nên cũng không đụng. */
        :is(#v-render2,.r2-scope) .stu-row .n::before{content:"";display:inline-block;width:7px;height:7px;
          border-radius:50%;margin-right:5px;background:transparent;vertical-align:middle}
        :is(#v-render2,.r2-scope) .stu-row.g-nam .n::before{background:#38bdf8}
        :is(#v-render2,.r2-scope) .stu-row.g-nu .n::before{background:#f472b6}
        :is(#v-render2,.r2-scope) .stu-chugiai{display:flex;gap:12px;align-items:center;font-size:11px;
          color:var(--r2-ink3);padding:3px 8px}
        :is(#v-render2,.r2-scope) .stu-chugiai i{display:inline-block;width:7px;height:7px;border-radius:50%;
          margin-right:4px;vertical-align:middle}
        :is(#v-render2,.r2-scope) .stu-row .t{color:var(--r2-ink3);font-variant-numeric:tabular-nums;font-size:11px}
        :is(#v-render2,.r2-scope) .stu-row .g{color:var(--r2-ink2)}
        :is(#v-render2,.r2-scope) .stu-row .v{color:var(--r2-ink)}
        :is(#v-render2,.r2-scope) .stu-row.sua .v{color:var(--r2-acc);font-weight:600}
        :is(#v-render2,.r2-scope) .stu-row .c{font-size:10.5px;font-weight:700;text-align:right;
          font-variant-numeric:tabular-nums;color:var(--r2-grn)}
        :is(#v-render2,.r2-scope) .stu-row .c.gap{color:var(--r2-org)}
        :is(#v-render2,.r2-scope) .stu-more{padding:10px;text-align:center;flex:none;
          border-top:1px solid var(--r2-line)}
        :is(#v-render2,.r2-scope) .stu-ft{flex:none;display:flex;align-items:center;gap:9px;
          padding:10px 14px;border-top:1px solid var(--r2-line);background:var(--r2-card2)}
        :is(#v-render2,.r2-scope) .stu-sum{flex:1;min-width:0;font-size:11.5px;color:var(--r2-ink2);
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        :is(#v-render2,.r2-scope) .stu-save{background:var(--r2-grn);color:#fff;border:none;border-radius:9px;
          padding:8px 16px;font-weight:700;cursor:pointer;font-family:inherit;font-size:12.5px;flex:none}
        :is(#v-render2,.r2-scope) .stu-save[disabled]{opacity:.45;cursor:not-allowed}
        /* Thanh Tìm & thay (cải tiến B) — bật/tắt bằng class, KHÔNG dùng thuộc tính hidden:
           `display:flex` của class sẽ đè `hidden` của trình duyệt, thanh không bao giờ ẩn được. */
        :is(#v-render2,.r2-scope) .stu-fr{display:none;flex:none;flex-wrap:wrap;gap:6px;align-items:center;   /* ảnh thật: cột hẹp ⇒ nút 'Thay hết' bị cắt — cho xuống dòng */
          padding:7px 13px;border-bottom:1px solid var(--r2-line);background:var(--r2-card2)}
        :is(#v-render2,.r2-scope) .stu-fr.on{display:flex}
        :is(#v-render2,.r2-scope) .stu-fr input{flex:1;min-width:60px;background:var(--r2-sunk);
          border:1px solid var(--r2-line);color:var(--r2-ink);border-radius:7px;font-size:12px;
          padding:5px 8px;font-family:inherit}
        :is(#v-render2,.r2-scope) .stu-fr input:focus{outline:none;border-color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .stu-fr .n{flex:none;font-size:10.5px;color:var(--r2-ink3);white-space:nowrap}
        :is(#v-render2,.r2-scope) .stu-fr button{flex:none;background:var(--r2-sunk);border:1px solid var(--r2-line);
          color:var(--r2-ink2);border-radius:7px;padding:5px 9px;font-size:11.5px;cursor:pointer;
          font-family:inherit;font-weight:600;white-space:nowrap}
        :is(#v-render2,.r2-scope) .stu-fr button:hover{color:var(--r2-ink);border-color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .stu-undo{background:none;border:none;color:var(--r2-ink3);cursor:pointer;
          font-size:13px;padding:0 3px;line-height:1;vertical-align:middle}
        :is(#v-render2,.r2-scope) .stu-undo:hover{color:var(--r2-acc)}

        /* Trạng thái RỖNG — luật ④: nói cả THIẾU GÌ lẫn HỆ QUẢ, và chỉ ra việc kế tiếp phải làm */
        :is(#v-render2,.r2-scope) .stu-empty{flex:1;display:grid;place-items:center;
          text-align:center;padding:30px}
        /* `place-items:center` làm con CO LẠI vừa chữ ⇒ câu dài rơi vụn từng tiếng. Ép đủ bề ngang. */
        :is(#v-render2,.r2-scope) .stu-empty>div{width:100%;max-width:460px}
        :is(#v-render2,.r2-scope) .stu-empty .em{font-size:34px;margin-bottom:10px;opacity:.5}
        :is(#v-render2,.r2-scope) .stu-empty .t1{font-size:14px;font-weight:700;margin-bottom:6px}
        :is(#v-render2,.r2-scope) .stu-empty .t2{font-size:12px;color:var(--r2-ink3);line-height:1.6;
          max-width:420px;margin:0 auto}
        :is(#v-render2,.r2-scope) .r2-mdh{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--r2-line);position:sticky;top:0;background:var(--r2-card)}
        :is(#v-render2,.r2-scope) .r2-mdh h3{margin:0;font-size:16px;font-weight:750;flex:1}
        :is(#v-render2,.r2-scope) .r2-mdh .x{background:var(--r2-sunk);border:1px solid var(--r2-line);color:var(--r2-ink2);border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:15px}
        :is(#v-render2,.r2-scope) .r2-mdb{padding:16px 18px}
        :is(#v-render2,.r2-scope) .r2-mgrph{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--r2-ink3);margin:0 0 10px;display:flex;align-items:center;gap:7px}
        :is(#v-render2,.r2-scope) .r2-mrow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
        :is(#v-render2,.r2-scope) .r2-mrow .ml{font-size:13px;flex:1;font-weight:600}
        :is(#v-render2,.r2-scope) .r2-mrow select{background:var(--r2-sunk);border:1px solid var(--r2-line);color:var(--r2-ink);border-radius:8px;padding:6px 9px;font-size:12.5px;font-family:inherit}
        :is(#v-render2,.r2-scope) .r2-mrow input[type=color]{width:38px;height:30px;border:1px solid var(--r2-line);border-radius:8px;background:var(--r2-sunk);cursor:pointer;padding:2px}
        :is(#v-render2,.r2-scope) .r2-subprev{margin-top:6px;border-radius:10px;height:74px;background:linear-gradient(135deg,#3a4256,#20242f);display:grid;place-items:center}
        :is(#v-render2,.r2-scope) .r2-subprev .txt{font-weight:800;color:#fff;-webkit-text-stroke:2px #000;paint-order:stroke fill}
        :is(#v-render2,.r2-scope) .r2-chemode{display:grid;grid-template-columns:1fr 1fr;gap:9px}
        :is(#v-render2,.r2-scope) .r2-cheopt{border:1.5px solid var(--r2-line);border-radius:11px;padding:11px;cursor:pointer;background:var(--r2-card2)}
        :is(#v-render2,.r2-scope) .r2-cheopt.on{border-color:var(--r2-acc);background:var(--r2-accw)}
        :is(#v-render2,.r2-scope) .r2-cheopt .ct{font-weight:700;font-size:13px;display:flex;align-items:center;gap:7px;margin-bottom:4px}
        :is(#v-render2,.r2-scope) .r2-cheopt.on .ct{color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .r2-cheopt .cd{font-size:11px;color:var(--r2-ink3);line-height:1.4}
        :is(#v-render2,.r2-scope) .r2-mdf{padding:14px 18px;border-top:1px solid var(--r2-line);display:flex;gap:10px;justify-content:flex-end;position:sticky;bottom:0;background:var(--r2-card)}
        :is(#v-render2,.r2-scope) .r2-mdf .save{background:var(--r2-acc);color:#fff;border:none;border-radius:9px;padding:9px 20px;font-weight:650;cursor:pointer;font-family:inherit}
        :is(#v-render2,.r2-scope) .r2-chip2 button{background:var(--r2-sunk);border:1px solid var(--r2-line);color:var(--r2-ink2);border-radius:8px;padding:5px 12px;font-size:12px;cursor:pointer;font-family:inherit;font-weight:600}
        :is(#v-render2,.r2-scope) .r2-chip2 button.on{background:var(--r2-accw);border-color:var(--r2-acc);color:var(--r2-acc)}

        /* ═══ STUDIO PHỤ ĐỀ — MÀN RIÊNG, KIỂU CAPCUT (01/09/2026) ═══
           Chủ dự án: *"nó phải là 1 màn riêng chứ, làm như kiểu capcut ấy, cần gì các bước"*.
           Bản trước nhét khu sửa vào một ô của lưới tab Render ⇒ chật, và stepper 7 bước chỉ cuộn
           trang chứ không đổi nội dung — nhìn vẫn ra app cũ. Nay: phủ TOÀN MÀN HÌNH, bố cục
           CapCut = rail công cụ trái · màn phát giữa · bảng thuộc tính phải · DẢI THỜI GIAN dưới.

           🔴 GIỮ NGUYÊN MỌI ID bên trong (`r2StuRows`, `r2StuVi`, `r2StuGoc`, `r2StuFR*`…) — chỉ
           thay CÁI VỎ. Nhờ vậy toàn bộ JS đã chạy tốt (tìm/thay, lưu nháp, Ctrl+Enter, khôi phục
           câu, đồng bộ video↔bảng) không phải viết lại một dòng nào. */
        /* 01/09: Studio KHÔNG phủ toàn màn — nó thay chỗ `.r2-grid`. Phủ toàn màn thì che mất
           thẻ đổi chế độ ở header ⇒ vào được mà không ra được. Nay header + thanh chân vẫn thấy. */
        #r2Studio{display:none;flex-direction:column;color:var(--r2-ink);
          background:var(--r2-card);border:1px solid var(--r2-line);border-radius:14px;overflow:hidden}
        /* 🔴 Chiều cao KHÔNG tính bằng số trừ cứng. Header cao 71px ở màn rộng nhưng 105px ở 1366
           (chữ xuống dòng) ⇒ mọi hằng số đều sai ở một cỡ màn nào đó: chân Studio (💾/✅) chui
           xuống dưới thanh RENDER và bị che. Cho section thành CỘT FLEX, Studio ăn phần còn lại —
           đúng ở mọi chiều cao header. Thanh RENDER thôi ghim: nó là phần tử cuối, luôn thấy. */
        /* 🔴 TRỪ THANH TRẠNG THÁI ĐÁY. `#mdlBar` là `position:fixed;bottom:0` — nó CHE chứ không
           đẩy. Tab thường cuộn được nên phần bị che vẫn tới được; Studio `overflow:hidden` nên
           phần đó MẤT HẲN — chủ dự án thấy nút "Lưu & Xác nhận" bị cắt. `--mdl-h` do
           ResizeObserver đo (thanh bung "Chi tiết" thì cao hơn nhiều, không ghim số cứng được). */
        /* 🔴 `:not(.hidden)` BẮT BUỘC — chính bài học đã ghi sẵn ở dòng ~3559 của file này:
           `.hidden{display:none}` chỉ là class (0,1,0), THUA selector có ID (1,1,0). Thiếu nó thì
           bật Bán thủ công xong sang tab khác, Studio VẪN HIỆN đè lên tab đó — chủ dự án bắt được
           ở tab "Đã render". */
        /* ② RỘNG HẾT CỠ ở chế độ Studio: `.content` có `padding:22px 26px`; kéo âm hai bên để
           Studio dùng trọn bề ngang (+52px). Chỉ áp cho Studio — tab khác giữ lề như cũ.
           Ba media query của `.content` (18/16 · 14/12 · 10/9) có luật riêng ở dưới. */
        #v-render2.studio:not(.hidden){margin-left:-26px;margin-right:-26px;
          display:flex;flex-direction:column;overflow:hidden;
          height:calc(100vh - 104px - var(--mdl-h,0px))}
        #v-render2.studio #r2Studio{flex:1;min-height:0}   /* con tu lo min-height cua no */
        #v-render2.studio .r2-foot{position:static;flex:none;box-shadow:none}
        /* ⚡ Tự động → giao diện chính CŨ. ✍ Bán thủ công → Studio. Đúng một class quyết định. */
        #v-render2.studio .r2-grid{display:none}
        #v-render2.studio #r2Studio{display:flex}
        :is(#v-render2,.r2-scope) .st-top{flex:none;display:flex;align-items:center;gap:9px;
          padding:9px 14px;background:var(--r2-card);border-bottom:1px solid var(--r2-line)}
        /* Nút HÀNH ĐỘNG — khác hẳn nhóm nút phụ (xám, viền mảnh). Luật: thứ khách cần bấm
           đầu tiên phải khác thứ khách hiếm khi bấm, bằng MÀU chứ không chỉ bằng vị trí. */
        :is(#v-render2,.r2-scope) .st-act{background:var(--r2-sunk);border:1px solid var(--r2-line2);
          color:var(--r2-ink);border-radius:9px;padding:0 14px;height:32px;font-size:12.5px;
          font-weight:650;cursor:pointer;font-family:inherit;white-space:nowrap;flex:none}
        :is(#v-render2,.r2-scope) .st-act:hover{border-color:var(--r2-acc);color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .st-act.chinh{background:linear-gradient(135deg,var(--r2-acc),var(--r2-acc2));
          border-color:transparent;color:#fff;box-shadow:0 3px 12px rgba(236,72,153,.3)}
        :is(#v-render2,.r2-scope) .st-act.chinh:hover{filter:brightness(1.08);color:#fff}
        :is(#v-render2,.r2-scope) .st-act.to{height:40px;padding:0 20px;font-size:13.5px;border-radius:11px}
        :is(#v-render2,.r2-scope) .st-vach{width:1px;height:20px;background:var(--r2-line2);flex:none;margin:0 3px}
        :is(#v-render2,.r2-scope) .st-trong-nut{display:flex;gap:10px;justify-content:center;
          pointer-events:auto}
        /* DẢI TRẠNG THÁI — một chỗ duy nhất trả lời "đang ở đâu / làm gì tiếp".
           Viền trái đổi màu theo trạng thái để nhận ra bằng mắt trước khi đọc chữ. */
        /* 🔴 `flex-wrap` — ĐO ở 1366×768: dải này tràn ngang 170px, hai nút cuối
           ("Render video này", "Nhập SRT có sẵn") bị cắt hẳn khỏi khung. Một hàng flex không cho
           xuống dòng, mà nay có tới ba nút. */
        /* ②③ MỘT DÒNG. Trước: icon + tiêu đề + mô tả + 4 nút ⇒ vỡ xuống dòng thứ hai, ăn
           gần 100px chiều cao chỉ để nói lại thứ nút đã nói. Nay bỏ hai dòng chữ (chuyển vào
           `title` của icon), còn: icon · tên video · nhóm nút — đúng một dòng. */
        /* ⚠ Dùng ID (#r2Studio) chứ KHÔNG `:is(...)` như luật cũ: luật `.st-bang .tx{display:flex}`
           nằm SAU trong file, cùng độ ưu tiên thì nó THẮNG. Đây là lần thứ ba vấp đúng bẫy này
           (media query 840/790 · `.st-pane.dong` · và đây) — nên chốt bằng ID cho hết đường lùi. */
        /* `!important`: luat cu `:is(#v-render2,.r2-scope) .st-bang .tx{display:flex}` cung do
           uu tien (1,2,0) va nam SAU trong file nen van thang. Do do la cach duy nhat chac chan. */
        #r2Studio .st-bang .tx{display:none!important}
        #r2Studio .st-bang .ic{cursor:help}
        #r2Studio .st-bang .nm{flex:1 1 auto;min-width:0;overflow:hidden;
          text-overflow:ellipsis;white-space:nowrap}
        /* 🔴 17/09/2026 — DẢI BỊ CẮT Ở 1920. Phép đo cũ (nút 1032px / 1636px chỗ) đã hết hiệu lực từ khi
           thanh vẽ (Xóa logo · WM chạy · Logo · Chữ · Xóa hết), ô "🖼 Đổi khung" (~340px) và "👁 Xem thử
           5 giây" được gộp vào (04/09+): ảnh khách 1917px ⇒ 📄 ⬇gốc còn thấy, ⬇dịch bị cắt nửa, 🔎 ⚠ MẤT
           HẲN, tên video co còn 0px — khách tưởng Studio KHÔNG có xuất SRT. Ba nấc, rẻ trước:
           (1) ẩn chữ phụ " video" (`.dai`) của 2 nút Chọn/Bỏ ngay từ ≤1930px (tooltip vẫn đủ câu; KHÔNG ẩn
           `.dai` của thanh vẽ — "Xóa logo"/"Xóa hết" mà cùng rút thành "Xóa" thì hai nút trùng tên) · (2) select Đổi khung
           tối đa 132px (đủ "9:16 (Dọc) — nền đen", dài hơn thì … + tooltip) · (3) vẫn chật thì XUỐNG DÒNG
           thay vì cắt: tên video `flex-basis:0` để nó KHÔNG đẩy nút xuống dòng oan, chỉ nở vào chỗ trống.
           ⚠ HAI ID (`#v-render2 #r2Studio`) CÓ CHỦ Ý: luật `:is(#v-render2,.r2-scope) .st-bang{flex-wrap:nowrap}`
           nằm NGAY DƯỚI cùng độ ưu tiên (1,1,0) — một ID thì nó thắng và wrap câm (đo thật: 1366px vẫn tràn 202px).
           Đúng cái bẫy "luật sau thắng" đã ghi ở trên, lần thứ tư. */
        #v-render2 #r2Studio .st-bang{flex-wrap:wrap;gap:9px;row-gap:6px}
        #v-render2 #r2Studio .st-bang .nm{flex:1 1 0;min-width:120px}
        #v-render2 #r2Studio .st-bang #edKhungSel{max-width:132px;text-overflow:ellipsis}
        @media(max-width:1930px){
          #v-render2 #r2Studio .st-bang :is(#r2StChonBtn,#r2StBoVideo) .dai{display:none}
        }
        :is(#v-render2,.r2-scope) .st-bang{flex:none;display:flex;align-items:center;gap:9px;
          flex-wrap:nowrap;
          padding:9px 14px;background:var(--r2-sunk);border-bottom:1px solid var(--r2-line);
          border-left:3px solid var(--r2-ink3);min-width:0}
        /* Câu mô tả chiếm trọn phần còn lại rồi ĐẨY nhóm nút xuống dòng khi chật — nút không bị
           bóp méo, và thứ tự đọc vẫn là: trạng thái → việc cần làm. */
        :is(#v-render2,.r2-scope) .st-bang .tx{flex:1 1 320px}
        :is(#v-render2,.r2-scope) .st-bang .st-act{flex:none}
        :is(#v-render2,.r2-scope) .st-bang.san{border-left-color:var(--r2-grn)}
        :is(#v-render2,.r2-scope) .st-bang.cho{border-left-color:var(--r2-org)}
        :is(#v-render2,.r2-scope) .st-bang .ic{flex:none;font-size:17px;opacity:.9}
        :is(#v-render2,.r2-scope) .st-bang .tx{flex:none;min-width:0;display:flex;flex-direction:column;gap:1px}
        :is(#v-render2,.r2-scope) .st-bang .tx b{font-size:13px;font-weight:700;white-space:nowrap}
        :is(#v-render2,.r2-scope) .st-bang .tx span{font-size:11.5px;color:var(--r2-ink2);line-height:1.35}
        :is(#v-render2,.r2-scope) .st-bang .nm{flex:1;min-width:0;overflow:hidden;text-align:right;
          text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--r2-ink3);direction:rtl}
        :is(#v-render2,.r2-scope) .st-bang .mt{flex:none;color:var(--r2-ink3);font-size:11px}
        /* Nút CHƯA DÙNG ĐƯỢC phải TRÔNG NHƯ chưa dùng được — trước đây bấm vào chỉ ra lỗi. */
        /* 🔴 Luật MỜ khi khoá phải bám theo NƠI NÚT ĐANG NẰM. Nó vốn viết cho `.st-top` — hàng
           đó đã gộp đi (03/09) và 4 nút phụ chuyển xuống chân màn, nên nút khoá mà KHÔNG mờ:
           khách không thấy nó đang khoá, bấm mãi không ăn. */
        :is(#v-render2,.r2-scope) .st-top button[disabled],
        :is(#v-render2,.r2-scope) .st-foot button[disabled],
        :is(#v-render2,.r2-scope) .st-bang button[disabled],
        :is(#v-render2,.r2-scope) .st-act[disabled]{opacity:.38;cursor:not-allowed;filter:grayscale(.6)}
        :is(#v-render2,.r2-scope) .st-top button[disabled]:hover,
        :is(#v-render2,.r2-scope) .st-foot button[disabled]:hover{border-color:var(--r2-line2);color:var(--r2-ink2)}
        /* Panel phải khi chưa chọn câu */
        /* Hàng chỉnh giờ — gọn một dòng, nút ± to vừa tay, ô giờ dùng số đều bề ngang */
        :is(#v-render2,.r2-scope) .st-gio{display:flex;align-items:center;gap:4px;flex-wrap:wrap;
          margin-top:2px}
        :is(#v-render2,.r2-scope) .st-gio .lb{font-size:10.5px;color:var(--r2-ink3);margin-left:2px}
        :is(#v-render2,.r2-scope) .st-gio input{width:76px;background:var(--r2-sunk);
          border:1px solid var(--r2-line2);color:var(--r2-ink);border-radius:6px;padding:3px 5px;
          font-size:11px;font-family:inherit;font-variant-numeric:tabular-nums;text-align:center}
        :is(#v-render2,.r2-scope) .st-gio input:focus{outline:none;border-color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .st-gio button{width:22px;height:22px;flex:none;background:var(--r2-sunk);
          border:1px solid var(--r2-line2);color:var(--r2-ink2);border-radius:6px;cursor:pointer;
          font-family:inherit;font-size:13px;line-height:1;padding:0}
        :is(#v-render2,.r2-scope) .st-gio button:hover{border-color:var(--r2-acc);color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .st-gio .dl{font-size:10.5px;color:var(--r2-ink3);margin-left:2px}
        :is(#v-render2,.r2-scope) .st-gio .st-nghe{width:auto;padding:0 10px;height:24px;font-size:11px;
          font-weight:600;white-space:nowrap;margin-left:auto}
        /* 🔴 17/09/2026 — hàng "Giọng" (🔵 Nam · 🔴 Nữ · 🎭 Phân giọng) và "Câu" (✂ Tách · ⇊ Gộp · ＋ Thêm ·
           🗑 Xoá) MƯỢN `.st-gio` (04/09) — luật `.st-gio button{width:22px}` viết cho nút ± một ký tự ⇒ nút
           có chữ bị bóp còn "Tá / Gộ / Th / Xo", phần chữ tràn ĐÈ lên dòng giọng đọc bên dưới (ảnh khách 17/09,
           cột phải 330px). Hỏng từ ngày sinh vì `.st-nghe` được nới riêng mà 7 nút này thì không. */
        :is(#v-render2,.r2-scope) .st-gio button.st-nut{width:auto;padding:0 8px;font-size:11px;
          font-weight:600;white-space:nowrap}
        :is(#v-render2,.r2-scope) .st-pane-trong{display:none;text-align:center;color:var(--r2-ink3);
          font-size:11.5px;line-height:1.6;padding:18px 6px}
        #r2Studio.chua-chon .st-pane.p-sub>*:not(.st-pane-trong){display:none}
        #r2Studio.chua-chon .st-pane-trong{display:block}
        :is(#v-render2,.r2-scope) .st-top .x{background:var(--r2-sunk);border:1px solid var(--r2-line);
          color:var(--r2-ink2);border-radius:9px;width:32px;height:32px;cursor:pointer;font-size:15px;flex:none}
        :is(#v-render2,.r2-scope) .st-top .x:hover{color:var(--r2-ink);border-color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .st-top .tt{font-size:14px;font-weight:750;flex:1;min-width:0;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        /* Chia chiều cao bằng FLEX: khu xem 3 phần · bảng cue 2 phần. Dùng `max-height:34vh`
           cho bảng thì ở màn thấp nó ăn hết, khu xem bị bóp còn 105px (đo thật). */
        /* HAI cột: màn phát · panel thuộc tính. Cột rail đã gỡ — CapCut không có rail chế độ
           trong trình sửa; panel phải của họ là "cài đặt của thứ đang chọn". */
        /* ĐO sau khi merge: khu xem còn 185px cao, video 329×185 — quá nhỏ để khoanh vùng che.
           Studio nay là màn LÀM VIỆC chính (sửa phụ đề + vẽ che trên cùng một khung) nên dồn
           thêm chỗ cho nó; bảng cue vẫn còn ~3 hàng và tự cuộn. */
        :is(#v-render2,.r2-scope) .st-mid{flex:7;min-height:240px;display:grid;
          grid-template-columns:minmax(0,1fr) 300px}
        /* màn phát */
        :is(#v-render2,.r2-scope) .st-play{display:flex;flex-direction:column;min-width:0;min-height:0;
          padding:12px;gap:9px;background:var(--r2-bg)}
        :is(#v-render2,.r2-scope) .st-stage{flex:1;min-height:0;position:relative;background:#000;
          border-radius:12px;overflow:hidden;display:grid;place-items:center}
        /* 🔴 `inset:0` + `margin:auto` cho khung chứa CHIỀU CAO XÁC ĐỊNH — thiếu nó thì
           `max-height:100%` bị bỏ qua (phần trăm neo vào chiều cao không xác định của grid trong
           flex) và video giữ nguyên cỡ gốc, tràn khỏi sân khấu, cắt mất đáy có phụ đề. */
        :is(#v-render2,.r2-scope) .st-frame{position:absolute;inset:0;margin:auto;
          width:auto;height:auto;max-width:100%;max-height:100%;
          aspect-ratio:var(--ar,16/9);container-type:size}
        :is(#v-render2,.r2-scope) .st-stage video{width:100%;height:100%;display:block;
          object-fit:contain;background:#000}
        /* Video DỌC: nhường thêm chiều cao, không thì nó teo còn một sợi trong sân khấu ngang */
        /* 🔴 07/09/2026 — VIDEO DỌC ĐỔI HẲN BỐ CỤC (chủ dự án: *"kiểm tra nếu video là dọc thì sao"*).
           ĐO THẬT (1600×950): st-mid 418 · thanh sub 89 · **bảng cue 131** · foot 51. Video dọc nằm trong
           stage 1012×360 chỉ chiếm ~202px ngang ⇒ **~810px hai bên BỎ TRỐNG**, trong khi bảng cue lại ăn
           131px CHIỀU CAO của chính video. Nay: dọc ⇒ bảng cue sang CỘT GIỮA, video ăn trọn chiều cao.
           Video NGANG giữ nguyên bảng-dưới (nó đã dùng hết bề ngang, không có chỗ trống để tận dụng).
           ⚠ `display:contents` cho `.st-mid`: nhả `.st-play` + `.st-side` thành con của grid cha để xếp
             được 3 cột. Bỏ nó đi thì bảng cue rơi xuống hàng dưới như cũ. */
        /* ⚠ PHẢI gán ô cho MỌI con — grid tự chèn phần tử chưa gán vào ô trống ĐẦU TIÊN, nên chỉ
           cần bỏ sót `#r2StuTen` (span rỗng, cao 0) là nó chiếm ô (1,1) rồi đẩy trượt toàn bộ:
           đo thật lần đầu ra `stage h=0` (video BIẾN MẤT) và `side` chiếm trọn bề ngang. */
        /* ⚠ PHẢI viết `#v-render2.studio #r2Studio.video-doc` chứ KHÔNG `#r2Studio.video-doc`:
           luật `#v-render2.studio #r2Studio{display:flex}` (dòng ~2405) có độ ưu tiên (2 id,1 class)
           ĐÈ (1 id,1 class). Đã vấp: `grid-template-*` áp được nhưng `display` vẫn là **flex** ⇒ mọi
           `grid-area` bên dưới thành vô nghĩa, bố cục y hệt bản cũ mà không lỗi nào báo. */
        #v-render2.studio #r2Studio.video-doc{display:grid;
          grid-template-columns:minmax(0,1fr) minmax(290px,0.85fr) 300px;
          grid-template-rows:auto auto auto minmax(0,1fr) auto auto}
        #r2Studio.video-doc > #r2StuTen{grid-area:1/1/2/4}
        #r2Studio.video-doc > #r2StBang{grid-area:2/1/3/4}
        #r2Studio.video-doc > #r2StTT{grid-area:3/1/4/4}
        #r2Studio.video-doc > .st-mid{display:contents}
        #r2Studio.video-doc .st-play{grid-area:4/1/5/2;min-height:0}
        #r2Studio.video-doc > #r2StuCueBox{grid-area:4/2/5/3;min-height:0;
          padding:12px 12px 10px;border-left:1px solid var(--r2-line)}
        #r2Studio.video-doc .st-side{grid-area:4/3/5/4;min-height:0}
        #r2Studio.video-doc > .st-time:not(#r2StuCueBox){grid-area:5/1/6/4}
        #r2Studio.video-doc > .st-foot{grid-area:6/1/7/4}
        /* Bảng cue cột dọc: phần danh sách phải CUỘN, không đẩy dài cả cột */
        #r2Studio.video-doc > #r2StuCueBox .stu-r{flex:1;min-height:0;display:flex;flex-direction:column}
        #r2Studio.video-doc > #r2StuCueBox .stu-rows{flex:1;min-height:0;overflow-y:auto}
        /* Chưa có hình thì phụ đề chẳng đè lên cái gì — nó chỉ chồng lên dòng "Chưa có video
           để xem" thành hai lớp chữ rối mắt. */
        #r2Studio:not(.co-video) .st-sub{display:none}
        /* ═══ MERGE BẢNG CHE VÀO STUDIO ═══
           `#edKhung` (khung vẽ của bảng che) được CHUYỂN vào `#r2StEdHo` khi ở Studio. Nó vốn là
           inline-block bám cỡ video; trong Studio phải chiếm trọn khung hình. */
        :is(#v-render2,.r2-scope) .st-edho{position:absolute;inset:0}
        /* Chỗ chứa chỉ CĂN GIỮA; cỡ khung do `edKhungApDung` tính (nó cần tự do để làm tính
           năng "Xem theo khung"). Ép width/height 100% ở đây là giẫm lên inline style của nó. */
        :is(#v-render2,.r2-scope) .st-edho{display:none;align-items:center;justify-content:center}
        #r2Studio.co-ve .st-edho{display:flex}
        #r2Studio.co-ve .st-edho #edKhung{max-width:100%;max-height:100%;border-radius:0}
        /* video gốc của Studio nhường chỗ cho video của bảng — MỘT khung phát duy nhất */
        #r2Studio.co-ve #r2StuVid{display:none}
        /* 03/09: khung che nay KÉO THẲNG được (xem `_stGhiBand`) nên phải HIỆN — luật ẩn cũ
           viết hồi nó chỉ là lớp xem trước, giữ lại thì không còn gì để kéo. */
        /* ③ BỎ TỰ DÒ ở Studio (chủ dự án chốt). Nút 🎯 và hai vạch "vùng tool tự dò" chỉ
           ẩn Ở ĐÂY — modal ở tab Render giữ nguyên, không phá thứ đang chạy. Hai nhãn của vạch
           còn bị CẮT CỤT vì khung trong Studio hẹp hơn modal, nên giữ lại vừa vô dụng vừa vỡ. */
        #r2Studio.co-ve #edAutoLogoBtn{display:none}
        /* hàng nút vẽ — nằm ngay dưới khung phát, cùng một màn */
        /* ④ Hàng nút VẼ nay nằm TRONG dải trạng thái ⇒ không xuống dòng, không chiếm cả
           bề ngang; nó là một nhóm giữa các nhóm khác. */
        /* Thanh tiến trình RIÊNG — mảnh, một dòng, chỉ nói về video đang mở. */
        :is(#v-render2,.r2-scope) .st-tt{flex:none;display:flex;align-items:center;gap:10px;
          padding:6px 14px;background:var(--r2-sunk);border-bottom:1px solid var(--r2-line);
          font-size:11.5px;color:var(--r2-ink2)}
        :is(#v-render2,.r2-scope) .st-tt .ic{flex:none;font-size:13px}
        :is(#v-render2,.r2-scope) .st-tt .chu{flex:0 1 auto;min-width:0;overflow:hidden;
          text-overflow:ellipsis;white-space:nowrap;color:var(--r2-ink)}
        :is(#v-render2,.r2-scope) .st-tt .thanh{flex:1 1 120px;height:5px;border-radius:3px;
          background:var(--r2-line2);overflow:hidden;min-width:60px}
        :is(#v-render2,.r2-scope) .st-tt .thanh i{display:block;height:100%;width:0;
          background:linear-gradient(90deg,var(--r2-acc),var(--r2-vio));transition:width .3s}
        :is(#v-render2,.r2-scope) .st-tt .pct{flex:none;font-variant-numeric:tabular-nums;
          color:var(--r2-acc);font-weight:700}
        :is(#v-render2,.r2-scope) .st-vebar{flex:none;display:flex;flex-wrap:nowrap;gap:6px;
          align-items:center;padding:0;min-width:0}
        /* `margin:0` phải `!important`: `#edNutBar` mang `margin-bottom:10px` INLINE (viết cho
           modal, nơi nó là một khối riêng). Inline thắng mọi luật thường ⇒ hàng nút cao 42px
           trong khi nút chỉ 32px, đội dải lên 61px. */
        :is(#v-render2,.r2-scope) .st-vebar #edNutBar{display:flex;flex-wrap:nowrap;gap:6px;
          align-items:center;margin:0!important}
        /* 🔴 Nhãn tự rút ở màn HẸP. ĐO: nút chiếm 1032px; 1920 có 1636px (thừa) nhưng 1366
           chỉ có 1082px ⇒ tràn, tên video bị co còn 0px. Cắt chữ cứng cho mọi màn là mất chữ vô
           cớ ở màn rộng, nên chỉ ẩn phần đuôi khi thật sự chật. Tooltip giữ nguyên câu đầy đủ. */
        @media(max-width:1400px){
          :is(#v-render2,.r2-scope) .st-bang .dai{display:none}
        }
        /* Nhãn phụ dưới mũi tên tải — nhỏ, chỉ để phân biệt Gốc/Dịch khi đã rút về icon */
        :is(#v-render2,.r2-scope) .st-bang sub{font-size:8.5px;margin-left:1px;opacity:.8;
          vertical-align:baseline}
        /* Cùng một hàng thì các nút phải CÙNG CHIỀU CAO — nút của bảng che vốn cao hơn nút
           của dải (32px), làm dải nhích 51→61px và trông so le. */
        :is(#v-render2,.r2-scope) .st-vebar .chip-add{font-size:11.5px;padding:0 9px;
          height:32px;display:inline-flex;align-items:center;line-height:1}
        /* ③ "Áp cho tất cả video" mang `margin-left:auto` (viết cho modal rộng 920px, để nó dạt
           phải). Trong Studio hẹp hơn, chính nó đẩy 2 nút cuối xuống dòng riêng — hàng nút ăn
           gấp đôi chỗ. Bỏ khi nhúng: các nút xếp liền, hết vỡ dòng. */
        /* ④ "Áp cho tất cả video" là thao tác của LÔ — Studio làm THỦ CÔNG từng video (nút
           render ở đây cũng chỉ gửi đúng video đang mở). Để lại là mời bấm nhầm sang cả lô.
           Modal ở tab Render vẫn giữ nút này: nơi đó đúng là làm hàng loạt. */
        :is(#v-render2,.r2-scope) .st-vebar #edApAll{display:none}
        /* 🖼 04/09 — Ô ĐỔI KHUNG phải NHÌN LÀ THẤY. Nhét trần vào `.st-vebar` thì nó lẫn vào dãy nút
           vẽ (cùng cỡ chữ, cùng nền) và khách không nhận ra đây là một CÀI ĐẶT chứ không phải nút vẽ.
           Đóng khung + nền riêng + kẻ dọc ngăn cách để tách hẳn khỏi nhóm nút bên trái. */
        :is(#v-render2,.r2-scope) .st-vebar #edKhungBar{flex:none;margin:0;padding:3px 9px;
          border:1px solid var(--r2-line,#2b3350);border-radius:9px;background:rgba(255,255,255,.04);
          box-shadow:inset 2px 0 0 0 #8ab4ff;white-space:nowrap}
        /* ⚠ `flex-wrap` KHÔNG đặt được ở đây: thẻ có `flex-wrap:wrap` trong style INLINE, mà inline
           luôn thắng stylesheet. ĐO THẬT: đặt ở CSS xong `getComputedStyle` vẫn trả `wrap`, ô vẫn
           ngắt 3 dòng. Nên phải đặt bằng JS lúc nhúng (và TRẢ LẠI lúc tháo) — xem `r2StNhungEditor`. */
        :is(#v-render2,.r2-scope) .st-vebar #edKhungBar select{font-size:12px;font-weight:600;
          flex:0 0 auto;width:auto;max-width:168px}
        :is(#v-render2,.r2-scope) .st-vebar #edKhungBar #edKhungGhi{display:none}
        /* ① "🌫 Làm mờ" và "📝 Đặt phụ đề" thành THỪA trong Studio: vùng che và thanh phụ đề nay
           kéo THẲNG trên khung, không phải chọn chế độ rồi mới kéo. Modal ở tab Render giữ cả
           hai — nơi đó chưa có thao tác kéo trực tiếp. */
        :is(#v-render2,.r2-scope) .st-vebar #edMBlur,
        :is(#v-render2,.r2-scope) .st-vebar #edMSub{display:none}
        /* Vạch ngăn giữa hai nhóm nút cũng thừa khi đã xếp liền */
        :is(#v-render2,.r2-scope) .st-vebar #edNutBar>span[style*="width:1px"]{display:none}
        /* phụ đề đè lên hình — đúng chỗ nó sẽ nằm khi render (1/3 dưới) */
        :is(#v-render2,.r2-scope) .st-sub{position:absolute;left:6%;right:6%;bottom:7%;text-align:center;
          font-size:clamp(11px,4.6cqw,26px);font-weight:800;color:#fff;line-height:1.3;
          text-shadow:0 2px 5px #000,0 0 3px #000,2px 0 3px #000,-2px 0 3px #000;pointer-events:none;
          z-index:3}   /* TRÊN dải che: render che chữ gốc RỒI mới burn phụ đề lên. Thiếu dòng này
                          thì dải che (đục) nuốt luôn chữ Việt — preview nói dối theo hướng ngược. */
        /* khung ROI (công cụ Che chữ) */
        /* 🔴 TÔ ĐỤC — đúng thứ render sẽ làm. Trước đây chỉ có viền, bên trong TRONG SUỐT nên
           chữ Hán xuyên qua và chữ Việt vẽ đè lên ⇒ preview trông như sản phẩm sẽ hỏng, trong khi
           render vốn đã che (`dai_sub.detect_blur_band` chạy mặc định).
           ĐỤC HẲN — thử 0,82 rồi chụp lại: chữ gốc lộ mờ DƯỚI chữ Việt, vẫn đúng cái rối chủ dự án
           kêu. Cần canh mép thì kéo: lúc KÉO nó tự mờ đi (`.keo`). */
        :is(#v-render2,.r2-scope) .st-roi{position:absolute;border:2px solid var(--r2-vio);border-radius:3px;
          background:rgba(9,11,20,1);
          box-shadow:0 0 0 1px #0009,0 0 14px rgba(167,139,250,.45);display:none;
          cursor:move}   /* ② KÉO THẲNG trên khung — không phải chọn chế độ rồi mới kéo */
        :is(#v-render2,.r2-scope) .st-roi b{position:absolute;width:13px;height:13px;
          background:var(--r2-vio);border-radius:2px}
        :is(#v-render2,.r2-scope) .st-roi b::after{content:"";position:absolute;inset:-7px}
        :is(#v-render2,.r2-scope) .st-roi b:nth-of-type(1){left:-7px;top:-7px;cursor:nwse-resize}
        :is(#v-render2,.r2-scope) .st-roi b:nth-of-type(2){right:-7px;top:-7px;cursor:nesw-resize}
        :is(#v-render2,.r2-scope) .st-roi b:nth-of-type(3){left:-7px;bottom:-7px;cursor:nesw-resize}
        :is(#v-render2,.r2-scope) .st-roi b:nth-of-type(4){right:-7px;bottom:-7px;cursor:nwse-resize}
        /* ② THANH PHỤ ĐỀ ĐÃ DỊCH — kéo dọc để đổi chỗ đặt. Chính chữ khách đang đọc, không phải
           một dải trừu tượng. */
        #r2Studio.co-video .st-sub{pointer-events:auto;cursor:ns-resize}
        #r2Studio .st-sub.keo{outline:2px dashed var(--r2-grn);outline-offset:3px;border-radius:4px}
        /* Đang kéo thì mờ đi để canh mép chữ gốc — thả ra là đục lại như lúc render. */
        :is(#v-render2,.r2-scope) .st-roi.keo{background:rgba(9,11,20,.42)}
        :is(#v-render2,.r2-scope) .st-roi .nhan{position:absolute;left:0;top:-19px;font-size:9.5px;
          font-weight:700;letter-spacing:.06em;color:var(--r2-vio);white-space:nowrap;
          text-shadow:0 1px 3px #000;pointer-events:none}
                /* Khung che hiện khi CÓ VIDEO, không phụ thuộc tab nào nữa. Chưa có video thì ẩn hẳn —
           trước đây vẫn kéo được trên nền đen và báo "đã gắn" cho một video không tồn tại. */
        #r2Studio.co-video .st-roi{display:block}
        /* 🔴 03/09 — BỎ DẢI ĐEN khi bảng che đã nhúng (chủ dự án: *"xóa phần che chữ gốc đen
           đi"*). Lúc đó ô của chính bảng che đã vẽ đúng vùng ấy rồi: hai widget chồng nhau, cùng
           ghi `rdCheBand`, chỉ tổ che mất hình. Chưa nhúng thì `.st-roi` vẫn là chỗ nhìn DUY
           NHẤT — nên chỉ ẩn theo `co-ve`, không xoá luật trên. */
        #r2Studio.co-video.co-ve .st-roi{display:none}
        /* 🔴 03/09 (lượt 3) — TRONG STUDIO, dải che TÔ ĐÚNG NHƯ KHI RENDER (chủ dự án chọn), bỏ
           nhãn "🎯 Vùng che chữ gốc": ở đây khách DUYỆT kết quả, không còn dò vùng nữa. Nền dựng
           bằng `style.cssText` inline nên phải `!important`. Dải có màu riêng (`mau`) vốn đã tô
           đúng màu đó — luật này chỉ đè bản mặc định (xanh nhạt 22%).
           Mọi thao tác kéo giữ nguyên: thân = di chuyển, 4 mép = đổi kích thước.
           Modal ở tab Render KHÔNG đổi — bên đó cần nhìn xuyên qua để canh mép chữ. */
        /* 🔴 03/09 (lượt 4) — THÔI TÔ ĐEN. Tô đục đúng như render thì đúng về kết quả nhưng
           BỊT MẤT chữ gốc bên dưới, khách hết canh được mép (chủ dự án: *"sao nó màu đen thay vì
           kéo mép"*). Nay chỉ còn MÉP: nền trong suốt, viền đứt + 8 tay nắm vẫn nguyên. Lúc ĐANG
           kéo mới tối nhẹ (`.keo`) để thấy phạm vi, thả ra là trong lại. */
        #r2Studio.co-ve .ed-cheband{background:transparent!important;
          border:2px dashed rgba(167,139,250,.95)!important}
        #r2Studio.co-ve .ed-cheband:hover{background:rgba(167,139,250,.10)!important}
        #r2Studio.co-ve .ed-cheband > .nhan{display:none}
        /* Nhãn ẩn, nhưng nút ✕ (xoá dải che) thì LUÔN hiện — nó là thao tác, không phải chú thích. */
        #r2Studio.co-ve .ed-cheband > .xoa-cheband{display:block}
        /* ⚠ `nth-of-type` chứ KHÔNG `nth-child`: trong khung che nay còn có <span class=nhan> và
           <button class=xoa> đứng trước 4 tay nắm, nên `b:nth-child(1)` không khớp con nào — 4 góc
           kéo mất vị trí mà chẳng lỗi nào ném ra. */
        /* Lớp "trống" — cũng bị mất trong lượt lùi file, chèn lại. `place-items` chứ không
           `place-content`: place-content biến MỖI mảnh chữ thành một ô riêng, câu bị bẻ dọc. */
        :is(#v-render2,.r2-scope) .st-trong{position:absolute;inset:0;display:grid;place-items:center;
          padding:20px;pointer-events:none;z-index:2}
        :is(#v-render2,.r2-scope) .st-trong>div{max-width:430px;text-align:center;
          color:var(--r2-ink3);font-size:12px;line-height:1.6}
        #r2Studio.co-video .st-trong{display:none}
        /* ② Lớp "đang tải": chỉ hiện khi ĐÃ có video mà CHƯA có khung hình nào (`.dang-tai`).
           Bám `loadeddata`/`canplay` chứ không `loadedmetadata` — metadata mới chỉ cho thời lượng
           và kích thước, đúng trạng thái "biết 01:10 mà vẫn đen". */
        :is(#v-render2,.r2-scope) .st-tai{position:absolute;inset:0;display:none;z-index:4;
          place-items:center;pointer-events:none;background:rgba(6,8,14,.55)}
        #r2Studio.co-video.dang-tai .st-tai{display:grid}
        :is(#v-render2,.r2-scope) .st-tai>div{display:flex;align-items:center;gap:9px;
          font-size:12.5px;color:var(--r2-ink);background:rgba(10,13,22,.9);
          border:1px solid var(--r2-line2);border-radius:10px;padding:8px 14px}
        :is(#v-render2,.r2-scope) .st-tai .vong{width:14px;height:14px;border-radius:50%;
          border:2px solid var(--r2-line2);border-top-color:var(--r2-acc);
          animation:stQuay .8s linear infinite}
        @keyframes stQuay{to{transform:rotate(360deg)}}
        :is(#v-render2,.r2-scope) .st-tltrong{position:absolute;inset:0;display:grid;place-items:center;
          font-size:11px;color:var(--r2-ink3);pointer-events:none;padding:0 12px;text-align:center}
        :is(#v-render2,.r2-scope) .st-bar{flex:none;display:flex;align-items:center;gap:11px}
        :is(#v-render2,.r2-scope) .st-bar button{background:none;border:none;color:var(--r2-ink);
          font-size:16px;cursor:pointer;padding:2px}
        :is(#v-render2,.r2-scope) .st-bar button:hover{color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .st-bar .tc{font-size:12px;color:var(--r2-ink2);
          font-variant-numeric:tabular-nums;white-space:nowrap}
        /* bảng thuộc tính phải */
        /* MỘT cột CUỘN (panel thuộc tính kiểu CapCut). `overflow:hidden` cũ chỉ đúng hồi mỗi lúc
           một pane hiện; nay hiện cả hai thì nó cắt cụt phần dưới. */
        :is(#v-render2,.r2-scope) .st-side{background:var(--r2-card);border-left:1px solid var(--r2-line);
          display:flex;flex-direction:column;min-height:0;overflow-y:auto}
        :is(#v-render2,.r2-scope) .st-side h5{margin:0;padding:11px 14px 8px;font-size:10.5px;
          font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--r2-ink3)}
        /* Tiêu đề nhóm = nút gập. Cả hai nhóm luôn nằm trong CÙNG một cột nên nhìn là biết có
           gì — khác hẳn tab (phải rời cái này mới tới cái kia). */
        :is(#v-render2,.r2-scope) .st-hnhom{display:flex;align-items:center;gap:7px;cursor:pointer;
          user-select:none}
        :is(#v-render2,.r2-scope) .st-hnhom:hover{color:var(--r2-ink)}
        :is(#v-render2,.r2-scope) .st-hnhom .mt{font-size:9px;opacity:.75;width:9px}
        /* Cột cần 454px mà chỉ có 270–394px ⇒ luôn phải cuộn. Nhóm ĐANG MỞ dính trên, nhóm
           ĐANG GẬP dính dưới — cuộn kiểu gì khách cũng thấy đủ hai nhóm, không như tab. */
        :is(#v-render2,.r2-scope) .st-hnhom{position:sticky;top:0;z-index:2;
          background:var(--r2-card)}
        /* Nhóm CUỐI luôn dính ĐÁY — dù đang mở hay gập. Bỏ điều kiện `.gap` vì khi mở sẵn,
           tiêu đề tụt khỏi tầm nhìn ở màn 768 và khách lại không biết có nhóm đó (đúng cái vừa
           bị bắt). Dính đáy thì cuộn kiểu gì cũng thấy. */
        :is(#v-render2,.r2-scope) .st-side h5.h-che{top:auto;bottom:0;
          box-shadow:0 -9px 13px -11px #000}
        /* 🔴 `flex:1` + `overflow-y:auto` là di sản thời còn TAB (mỗi lúc chỉ một pane hiện ⇒
           flex:1 = chiếm trọn cột). Hiện cả hai thì chúng chia nhau chiều cao: p-che ăn gần hết,
           p-sub còn đúng một cái nhãn — chọn câu mà không có ô nào để sửa. Cao theo NỘI DUNG,
           để `.st-side` lo việc cuộn. */
        :is(#v-render2,.r2-scope) .st-pane{display:none;flex-direction:column;flex:none;
          padding:0 14px 12px;gap:7px}
        /* CẢ HAI khối hiện cùng lúc — không còn đổi tab. Muốn biết khung che đã phủ hết chữ gốc
           chưa thì phải thấy nó CÙNG LÚC với câu đang đọc; tab làm hai thứ che nhau. */
        :is(#v-render2,.r2-scope) .st-pane.p-sub,
        /* `.p-bn` (Banner & chữ, 04/09) PHẢI có tên ở đây: `.st-pane` mặc định `display:none`, chỉ
           những lớp được LIỆT KÊ mới hiện. Thiếu dòng này thì thẻ vẫn nằm trong DOM, `hidden=false`,
           mà khách KHÔNG THẤY GÌ — đúng lớp "bấm ra không gì" mà lưới UI sinh ra để bắt. */
        :is(#v-render2,.r2-scope) .st-pane.p-cv,
        :is(#v-render2,.r2-scope) .st-pane.p-bn,
        :is(#v-render2,.r2-scope) .st-pane.p-wm,
        :is(#v-render2,.r2-scope) .st-pane.p-che{display:flex}
        /* 🔴 PHAI dat SAU cap luat tren: cung do uu tien (1,2,0) thi luat DUNG SAU thang.
           De o truoc thi `display:flex` de len, nhom gap KHONG gap duoc — do da mac 1 lan
           voi media query 840/790, dung mac lai. */
        :is(#v-render2,.r2-scope) .st-pane.dong{display:none}
        :is(#v-render2,.r2-scope) .st-side h5.h-che{border-top:1px solid var(--r2-line);
          margin-top:4px;padding-top:11px}
        /* DẢI THỜI GIAN — thứ làm nên cảm giác CapCut: thấy cả phim trong một dải */
        :is(#v-render2,.r2-scope) .st-time{flex:none;background:var(--r2-card);
          border-top:1px solid var(--r2-line);padding:8px 14px 11px}
        /* 🔴 KHUNG CUỘN: dải nén trọn video vào bề ngang màn ⇒ 34 cue chen nhau ~40px/khối,
           chữ cụt thành "Tr… Chi… Ý…". Nay dải có bề rộng tối thiểu theo SỐ CUE và cuộn ngang —
           đúng cách mọi trình dựng phim làm. Video ngắn ít cue thì `min-width` không nở, dải vẫn
           vừa khít màn như cũ. */
        :is(#v-render2,.r2-scope) .st-tlbox{overflow-x:auto;overflow-y:hidden;
          scrollbar-width:thin;padding-bottom:2px}
        :is(#v-render2,.r2-scope) .st-tl{position:relative;height:52px;background:var(--r2-sunk);
          border:1px solid var(--r2-line2);border-radius:9px;overflow:hidden;cursor:pointer;
          min-width:100%}
        :is(#v-render2,.r2-scope) .st-cue{position:absolute;top:9px;height:34px;min-width:2px;
          background:var(--r2-bluw);border:1px solid var(--r2-blu);border-radius:4px;
          overflow:hidden;font-size:9.5px;color:var(--r2-ink2);padding:2px 3px;line-height:1.15;
          white-space:nowrap;text-overflow:ellipsis}
        /* 🎭 GIỌNG trên THANH SUB (07/09/2026) — vạch màu bên trái khối, KHÔNG đổi nền: nền đã gánh
           `.on` (đang chọn) · `.sua` (đã sửa) · `.gap` (đọc gấp). Cùng bảng màu với chấm ở bảng cue
           (`.stu-row.g-nam/.g-nu`) để hai nơi nói cùng một ngôn ngữ. */
        :is(#v-render2,.r2-scope) .st-cue.g-nam{box-shadow:inset 3px 0 0 #38bdf8}
        :is(#v-render2,.r2-scope) .st-cue.g-nu{box-shadow:inset 3px 0 0 #f472b6}
        :is(#v-render2,.r2-scope) .st-cue.sua{background:var(--r2-accw);border-color:var(--r2-acc);color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .st-cue.gap{background:var(--r2-orgw);border-color:var(--r2-org)}
        :is(#v-render2,.r2-scope) .st-cue.on{background:var(--r2-acc);border-color:#fff;color:#fff;z-index:3}
        :is(#v-render2,.r2-scope) .st-head{position:absolute;top:0;bottom:0;width:2px;background:#fff;
          box-shadow:0 0 6px #fff;pointer-events:none;z-index:4}
        :is(#v-render2,.r2-scope) .st-ruler{display:flex;justify-content:space-between;
          font-size:9.5px;color:var(--r2-ink3);font-variant-numeric:tabular-nums;margin-top:4px}
        :is(#v-render2,.r2-scope) .st-foot{flex:none;display:flex;align-items:center;gap:9px;
          flex-wrap:wrap;row-gap:6px;
          padding:9px 14px;background:var(--r2-card2);border-top:1px solid var(--r2-line)}
        /* ④ câu tóm tắt co lại, ĐẨY hai nút chính ra mép phải; nhóm nút phụ đứng giữa. */
        :is(#v-render2,.r2-scope) .st-foot .stu-sum{flex:1 1 140px;min-width:0}
        :is(#v-render2,.r2-scope) .st-foot #r2StuNhap{margin-left:auto}
        /* Ô nhập trong bảng thuộc tính — thiếu bộ này thì textarea rơi về font mặc định của
           trình duyệt (monospace) và 4 ô X/Y/Rộng/Cao dính vào nhãn. */
        :is(#v-render2,.r2-scope) .st-pane textarea{width:100%;background:var(--r2-sunk);color:var(--r2-ink);
          border:1px solid var(--r2-line2);border-radius:9px;padding:8px 10px;font-family:inherit;
          font-size:13px;line-height:1.5;resize:vertical}
        :is(#v-render2,.r2-scope) .st-pane textarea[readonly]{color:var(--r2-ink2);background:var(--r2-card2)}
        :is(#v-render2,.r2-scope) .st-pane textarea:focus,
        :is(#v-render2,.r2-scope) .st-pane input:focus{outline:none;border-color:var(--r2-acc)}
        :is(#v-render2,.r2-scope) .fr2{display:grid;grid-template-columns:38px 1fr 38px 1fr;
          gap:6px;align-items:center}
        :is(#v-render2,.r2-scope) .fr2>span{font-size:11.5px;color:var(--r2-ink3)}
        :is(#v-render2,.r2-scope) .fr2 input{width:100%;min-width:0;background:var(--r2-sunk);
          border:1px solid var(--r2-line2);color:var(--r2-ink);border-radius:7px;padding:5px 7px;
          font-size:12px;font-family:inherit;font-variant-numeric:tabular-nums}
        :is(#v-render2,.r2-scope) .st-pane .hint{font-size:11px;color:var(--r2-ink3);line-height:1.5}
        /* ③ Chữ dài trong panel phải TỰ XUỐNG DÒNG — panel hẹp lại rồi, cắt cụt là mất thông tin
           (dòng "sẽ đọc bằng: CapCut — Cô Gái Hoạt Ngôn" đang bị cắt giữa chừng). */
        :is(#v-render2,.r2-scope) .st-side,
        :is(#v-render2,.r2-scope) .st-pane,
        :is(#v-render2,.r2-scope) .st-pane *{white-space:normal;overflow-wrap:anywhere}
        :is(#v-render2,.r2-scope) .st-gio{flex-wrap:wrap;row-gap:6px}
        /* MÀN THẤP (laptop 768/800): ngân sách chiều cao eo hẹp — nén các dải PHỤ (thước thời
           gian, đệm) để nhường chỗ cho KHU XEM. Đo thật: không nén thì video còn 126px. */
        /* 1366×768: header cao 105px (chữ xuống dòng) ⇒ còn thiếu ~20px. Nén sâu thêm một nấc.
           ⚠ Khối này PHẢI nằm SAU khối 840px: cùng độ đặc hiệu thì luật đứng sau thắng — để trước
           thì ở màn 768 khối 840 đè ngược lên và phần nén sâu thành vô hiệu (đã vấp đúng thế). */
        @media(max-height:840px){
          :is(#v-render2,.r2-scope) .st-tl{height:40px}
          :is(#v-render2,.r2-scope) .st-ruler{display:none}
          :is(#v-render2,.r2-scope) .st-time{padding:6px 12px 7px}
          :is(#v-render2,.r2-scope) .st-foot{padding:7px 14px}
          :is(#v-render2,.r2-scope) .st-top{padding:7px 14px}
          :is(#v-render2,.r2-scope) .st-play{padding:8px;gap:6px}
          :is(#v-render2,.r2-scope) .st-cue{top:6px;height:26px}
          /* Màn thấp: dồn thêm cho KHU XEM (4 phần thay vì 3) — bảng cue vẫn còn ~3 hàng,
             mà video không bị teo. Đo: 3:2 cho video 137px, 4:2 cho 158px. */
          :is(#v-render2,.r2-scope) .st-mid{flex:5}
          /* 🔴 Cột phải ở 1366×768 chỉ cao 270px, mà nhóm "Câu đang chọn" cần 347px ⇒ Ô BẢN
             DỊCH bị đẩy ra ngoài tầm: chọn câu xong không thấy chỗ mà sửa. Nén hai ô nhập lại
             (đo: 34+20+48+20+92+gap = 221 < 270, còn chỗ thở). Ô Gốc chỉ để đối chiếu nên
             nhường trước. */
          :is(#v-render2,.r2-scope) #r2StuGoc{height:48px;min-height:0}
          :is(#v-render2,.r2-scope) #r2StuVi{height:92px;min-height:0}
        }
        @media(max-height:790px){
          :is(#v-render2,.r2-scope) .st-top{padding:5px 12px}
          :is(#v-render2,.r2-scope) .st-tl{height:34px}
          :is(#v-render2,.r2-scope) .st-cue{top:4px;height:24px;font-size:9px}
          :is(#v-render2,.r2-scope) .st-time{padding:5px 12px 6px}
          :is(#v-render2,.r2-scope) .st-foot{padding:6px 12px}
          :is(#v-render2,.r2-scope) .st-play{padding:6px}
          :is(#v-render2,.r2-scope) .st-bar{gap:8px}
          :is(#v-render2,.r2-scope) .stu-keys{display:none}   /* nhắc phím tắt: bỏ khi quá chật */
        }
        @media(max-width:1100px){:is(#v-render2,.r2-scope) .st-mid{grid-template-columns:minmax(0,1fr) 260px}}
        /* ===== THANH CHẾ ĐỘ RENDER — MỘT HÀNG (thiết kế lại 28/08/2026) =====
           🔴 Bản đầu cao gấp 3 vì `.mt b{display:block}` áp cho MỌI <b>, kể cả <b> trong câu mô tả
           ⇒ mỗi mảnh in đậm nhảy một dòng. Nay: KHÔNG dùng <b> trong mô tả, và nhắm ĐÍCH DANH
           `.r2-mode-t` thay vì bắt theo thẻ — bắt theo thẻ là cách quy tắc rò sang chỗ không định. */
        :is(#v-render2,.r2-scope) .r2-mode{display:flex;align-items:center;gap:14px;margin-bottom:14px;
          padding:9px 14px;border-radius:11px;background:var(--r2-card);border:1px solid var(--r2-line);
          min-height:46px}
        :is(#v-render2,.r2-scope) .r2-mode.tay{border-color:var(--r2-org);background:var(--r2-orgw)}
        :is(#v-render2,.r2-scope) .r2-mode-t{font-size:12.5px;font-weight:700;white-space:nowrap;flex:none}
        /* Câu hệ quả: MỘT dòng, dài quá thì cắt bằng … — không bao giờ đẩy cao thanh */
        /* Đ8 (31/08): bản cũ nowrap+ellipsis CẮT đúng câu giải thích quan trọng nhất ở <~1100px. Cho xuống dòng, kẹp 2 dòng. */
        :is(#v-render2,.r2-scope) .r2-mode-d{flex:1;min-width:0;font-size:11.5px;color:var(--r2-ink2);line-height:1.35;
          display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
        /* 🔴 01/09: công tắc này TỪNG chỉ hiện ở chế độ Bán thủ công. Nay Bán thủ công = màn
           Studio (cột cấu hình ẩn đi, kéo theo nút RENDER NGAY) ⇒ không còn đường nào bấm
           RENDER kèm dừng-chờ-duyệt. Cho hiện ở CẢ HAI chế độ: nó nằm ở header, ngoài lưới. */
        :is(#v-render2,.r2-scope) .r2-mode.tay .r2-mode-d{color:var(--r2-org)}
        /* Nút gạt kiểu SEGMENTED: 2 lựa chọn nhìn thấy cùng lúc, biết ngay đang ở đâu (luật ②) */
        :is(#v-render2,.r2-scope) .r2-seg{display:flex;flex:none;background:var(--r2-sunk);
          border:1px solid var(--r2-line);border-radius:9px;padding:2px;gap:2px}
        :is(#v-render2,.r2-scope) .r2-seg button{background:none;border:none;cursor:pointer;font-family:inherit;
          font-size:11.5px;font-weight:650;color:var(--r2-ink3);padding:5px 12px;border-radius:7px;
          white-space:nowrap;transition:background .12s,color .12s}
        :is(#v-render2,.r2-scope) .r2-seg button:hover{color:var(--r2-ink)}
        :is(#v-render2,.r2-scope) .r2-seg button.on{background:var(--r2-acc);color:#fff}
        :is(#v-render2,.r2-scope) .r2-mode.tay .r2-seg button.on{background:var(--r2-org);color:#fff}
      

.wf-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 15px;transition:.15s}
        /* ── DẢI NGANG (22/08/2026) ─────────────────────────────────────────────────────────────
           Mỗi bước là MỘT thẻ đứng cạnh nhau, nối bằng mũi tên. Cả dây chuyền gói trong ~115px và
           GHIM cố định — khách luôn thấy "đang ở bước nào, còn bước nào, bước nào tắt". Xếp dọc thì
           mở một bước là hai bước kia rơi khỏi màn hình, thành ra chỉ còn một cái form dài. */
        .st-panel{border:1px solid rgba(124,92,255,.45);
          background:linear-gradient(180deg,rgba(124,92,255,.10),rgba(124,92,255,.02));margin-top:12px}
        .st-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
        .st-ic{font-size:24px;line-height:1}
        .st-tt{font-weight:700;font-size:16px}
        .st-sub{font-size:12.5px;opacity:.72;margin-top:2px}
        .st-x{margin-left:auto;font-size:12px;padding:5px 10px}
        .st-row{display:flex;gap:8px;align-items:center}
        .st-row input{flex:1;min-width:0;padding:11px 13px;border-radius:10px;font-size:14.5px;
          background:var(--bg2,#0d1020);border:1px solid var(--line,#2a2d4a);color:inherit}
        .st-vd{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
        .st-chip{font-size:12px;padding:5px 11px;border-radius:999px;cursor:pointer;
          background:var(--bg2,#0d1020);border:1px solid var(--line,#2a2d4a);color:inherit;opacity:.85}
        .st-chip:hover{opacity:1;border-color:rgba(124,92,255,.6)}
        .st-card{background:var(--bg2,#0d1020);border:1px solid var(--line,#2a2d4a);
          border-radius:12px;padding:14px 16px}
        .st-g{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
        .st-f{display:flex;flex-direction:column;gap:5px}
        .st-f>span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.62}
        .st-f input{width:96px;padding:8px 10px;border-radius:8px;background:var(--bg,#0a0c18);
          border:1px solid var(--line,#2a2d4a);color:inherit;font-size:14px}
        .st-f input.rong{width:190px}
        .st-nen{display:flex;gap:5px}
        .st-nen button{font-size:12.5px;padding:8px 12px;border-radius:8px;cursor:pointer;
          background:var(--bg,#0a0c18);border:1px solid var(--line,#2a2d4a);color:inherit}
        .st-nen button.on{border-color:var(--pri,#7c5cff);background:rgba(124,92,255,.20);font-weight:600}
        .st-nhom{display:flex;flex-direction:column;gap:6px;margin-top:4px}
        .st-nhom .h{display:flex;gap:10px;font-size:11px;letter-spacing:.06em;
          text-transform:uppercase;opacity:.62;padding:0 2px}
        .st-nhom .r{display:flex;gap:10px;align-items:center}
        .st-nhom .r input.cd{flex:1;min-width:0}
        .st-nhom .r input.so{width:92px;flex:none}
        .st-nhom input{padding:8px 10px;border-radius:8px;background:var(--bg,#0a0c18);
          border:1px solid var(--line,#2a2d4a);color:inherit;font-size:14px}
        .st-nhom .x{flex:none;width:28px;height:28px;border-radius:8px;cursor:pointer;
          background:transparent;border:1px solid var(--line,#2a2d4a);color:#ff6b81}
        .st-tong{font-size:12.5px;opacity:.72;margin-top:8px}
        .st-tk{font-size:12px;opacity:.7;margin-top:10px}
        .st-cl{display:flex;flex-direction:column;gap:2px}
        .st-b{display:flex;align-items:flex-start;gap:10px;padding:9px 4px;
          border-bottom:1px solid rgba(255,255,255,.05)}
        .st-b:last-child{border-bottom:0}
        .st-b .ic{width:19px;flex:none;text-align:center;font-size:13px}
        .st-b .ten{font-weight:600;font-size:13.5px}
        .st-b .chi{font-size:12px;opacity:.66;margin-top:1px}
        .st-b.cho{opacity:.42}
        .st-b.dang .ten{color:var(--pri,#7c5cff)}
        .st-b.loi .ten{color:#ff6b81}
        .st-can{border-left:3px solid #f0a83c;background:rgba(240,168,60,.08);
          border-radius:0 10px 10px 0;padding:12px 14px;margin-top:12px}
        .st-can b{color:#f0a83c}
        .st-can .sub{font-size:12.5px;opacity:.78;margin:4px 0 10px}
        .st-cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
        .st-loi{color:#ff6b81;font-size:12.5px;margin-top:8px}
        .wf-strip{display:flex;align-items:stretch;margin-top:12px}
        .wf-strip>.wf-card{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:5px;
                           padding:11px 13px 10px;border-radius:12px}
        .wf-strip>.wf-arrow{display:flex;align-items:center;padding:0 7px;font-size:15px;margin:0}
        .wf-s-top{display:flex;align-items:center;gap:8px;min-width:0}
        .wf-s-ic{font-size:17px;line-height:1}
        .wf-s-ten{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .wf-s-chon{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .wf-s-tt{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .wf-s-day{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:3px}
        .wf-s-day>.sub{margin-left:auto;font-size:10.5px}   /* nhãn 'luôn bật' đẩy sang phải, khỏi chen vào đèn */
        .wf-strip>.wf-card .wf-sw{width:34px;height:19px;margin-left:auto}
        .wf-strip>.wf-card .wf-sw::after{width:14px;height:14px}
        .wf-strip>.wf-card .wf-sw.on::after{left:17.5px}
        .wf-strip>.wf-card.off{opacity:.45;border-style:dashed}
        /* thẻ ĐANG MỞ mọc mũi nhọn chỉ xuống khung cấu hình — nối hai thứ lại bằng MẮT, khỏi đoán */
        .wf-strip>.wf-card.sel::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;
                 margin-left:-7px;background:var(--card);border-left:1px solid var(--accent2);
                 border-top:1px solid var(--accent2);transform:rotate(225deg);border-radius:0 0 0 3px}
        .wf-strip>.wf-card.sel{z-index:1}
        .wf-card.off{opacity:.5}
        .wf-card.blocked{border-color:var(--warn);background:rgba(245,158,11,.06)}
        .wf-card.run{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(99,102,241,.25)}
        .wf-card.done{border-color:#16a34a}.wf-sw{position:relative;width:42px;height:23px;border-radius:14px;background:#3a3f55;cursor:pointer;transition:.15s;flex:none}
        .wf-sw.on{background:var(--accent2)}
        .wf-sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}
        .wf-sw.on::after{left:21.5px}.wf-msg{margin-top:9px;font-size:12.5px;color:var(--warn);display:flex;align-items:center;gap:6px}
        .wf-stat{font-size:12px;color:var(--muted)}
        .wf-stat.run{color:var(--accent2)} .wf-stat.done{color:#16a34a} .wf-stat.err{color:var(--warn)}
        .wf-arrow{text-align:center;color:var(--muted);font-size:13px;line-height:1;margin:2px 0}
        .wf-arrow.dim{opacity:.3}
        .wf-log{margin-top:8px;background:#0c1019;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:monospace;font-size:11.5px;max-height:120px;overflow:auto;white-space:pre-wrap;display:none}
        .wf-card{cursor:pointer}
        .wf-card.sel{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(99,102,241,.22)}
        /* 🔵 BỐ CỤC MỚI 21/08/2026 — bỏ 2 cột (thẻ trái · cấu hình phải). Cột phải `position:sticky` làm
           cấu hình trôi tách khỏi bước đang sửa; khách phải liếc qua liếc lại. Nay DỌC: bước nào đang
           chọn thì cấu hình mở NGAY DƯỚI nó. `design-guidelines` §3.1 "1 hành động chính rõ ràng" ⇒
           thanh ▶ Chạy + 🔁 Tự động đưa LÊN ĐẦU, phần lưu/nạp đẩy xuống cuối. */
        .wf-bar{margin-top:10px;padding:12px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:space-between}
        .wf-bar-l{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0}
        .wf-bar-l .btn.go{font-size:15px;padding:11px 24px}
        .wf-bar-l .btn.go.dang{background:linear-gradient(120deg,#ef4444,#b91c1c);
                 box-shadow:0 6px 18px rgba(239,68,68,.3)}
        .wf-phu{background:transparent;border:1px solid var(--line);color:var(--muted);
                font-size:12px;padding:8px 14px;border-radius:10px;cursor:pointer;font-family:inherit}
        .wf-phu:hover{border-color:var(--accent2,#8b5cf6);color:var(--text)}
        .wf-bar-r{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12.5px}
        .wf-auto{display:flex;gap:7px;align-items:center;cursor:pointer;user-select:none}
        .wf-auto-cfg{display:flex;gap:5px;align-items:center;color:var(--muted)}
        .wf-auto-cfg .num{width:56px;padding:4px 6px;font-size:12px;text-align:center}
        .wf-auto-next{font-size:11.5px;color:var(--muted);white-space:nowrap}
        .wf-auto-next b{color:var(--ok,#3ddc84)}
        /* 🔵 22/08/2026 — TAB VỪA ĐÚNG KHUNG, không magic number. `.content` (khung cuộn của app)
           có chiều cao ĐỊNH SẴN ⇒ `height:100%` cho tab là hợp lệ, chỉ dây chuyền cuộn — kể cả
           khi mở bước Render (nó mượn nguyên panel tab Render vào, cao vô chừng).
           ⚠ `:not(.hidden)` là BẮT BUỘC: `.hidden{display:none}` chỉ là class (10), thua ID (100)
              ⇒ viết `#v-quytrinh{display:flex}` trần là tab hiện ở MỌI trang. */
        /* `height:100%` + mọi con `flex:none` = tab bị ép vừa khung, phần dôi ra không cuộn được.
           Đổi sang `max-height` để tab CO theo nội dung nhưng không vượt khung, và tự cuộn. */
        #v-quytrinh:not(.hidden){display:flex;flex-direction:column;max-height:100%;min-height:0}
        /* ═══ WIZARD TUẦN TỰ (25/08/2026) ═══════════════════════════════════════════════
           Chủ dự án: *"giao diện rất khó hiểu và dễ sai — đổi thành kiểu tuần tự từng màn"*.
           Tab này vốn dồn 8 khối lên cùng một màn; khách nontech không biết bắt đầu từ đâu.
           🔴 ẨN BẰNG CSS, KHÔNG XOÁ KHỎI DOM. `wfAutoRender()` ghi thẳng `#wfAutoBody`,
              `wfRender()` cần `#wfFlow`, `wfKenhVe()` cần `#wfKenhBox`. Xoá phần tử đi là
              tính năng chết IM LẶNG — đúng hai ca đã ghi trong memory
              ([[innerhtml-xoa-phan-tu-da-di-chuyen-vao-va-tinh-nang-chet-im-lang]],
               [[tinh-nang-chet-cam-js-doc-id-khong-co-trong-html]]).
           ⚠ `>` (con TRỰC TIẾP) là cố ý: các khối cũ đều nằm ngay dưới `#v-quytrinh`. Dùng
              hậu duệ thì ẩn nhầm cả thứ wizard mượn vào trong nó (vd `#wfConfig` ở màn 4). */
        #v-quytrinh.wiz>.wf-bar, #v-quytrinh.wiz>.wf-sk, #v-quytrinh.wiz>.wf-strip,
        #v-quytrinh.wiz>.wf-lane, #v-quytrinh.wiz>.wf-tomtat, #v-quytrinh.wiz>.wf-kmoi,
        #v-quytrinh.wiz>.wf-logbox, #v-quytrinh.wiz>.wf-xoa, #v-quytrinh.wiz>.wf-luu,
        #v-quytrinh.wiz>.wf-lenh{display:none}
        /* ⚠ Phải là `.wf-lane`: `#wfConfig` NẰM TRONG nó, nên `>.wf-cfg` không bao giờ khớp —
           lưới `thu_wizard` bắt được đúng chỗ này (bấm "Chỉnh cấu hình render" ra không gì). */
        #v-quytrinh.wiz.cfg>.wf-lane{display:block}
        /* 🔴 26/08 nhịp 11 — chủ dự án: *"nút cấu hình này không dùng ở đâu"* (Bộ cấu hình đã
           lưu). Luật ẩn ở trên dùng `>` = con TRỰC TIẾP của `#v-quytrinh`, mà `.wf-luu` /
           `.wf-xoa` / `.wf-logbox` nằm LỒNG trong `.wf-lane` ⇒ mở lane là chúng lòi ra theo.
           · `.wf-luu`   preset quy trình — không có lối vào nào trong Automation, bỏ.
           · `.wf-xoa`   xoá-gốc-sau-render — ĐÃ dời lên khối "Cách xử lý video" (`_wizXgKhoi`).
           · `.wf-logbox` nhật ký — đã có tab "Hoạt động" riêng.
           Ẩn chứ KHÔNG xoá: hàm của chúng (`wfSavePreset`, `xoaGocVe`…) vẫn được gọi nơi khác. */
        #v-quytrinh.wiz .wf-luu,
        #v-quytrinh.wiz .wf-xoa,
        #v-quytrinh.wiz .wf-gap,
        #v-quytrinh.wiz .wf-logbox{display:none}
        #v-quytrinh:not(.wiz)>#wfWiz{display:none}
        #v-quytrinh>#wfWiz{flex:none}

        /* Nguồn chuẩn màu là `:root` NGAY TRÊN, không phải docs/design-guidelines.md (docs còn
           mô tả bảng cũ #ff3d8a/#3ddc84 — đã lỗi thời). Wizard mượn nguyên ngôn ngữ đang dùng:
           thẻ kính `.panel` + nút gradient `.btn.go`. ⚠ KHÔNG có biến `--acc`; tím là `--purple`. */
        .wz{margin-top:8px}
        @keyframes wzIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
        @keyframes wzTho{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.42)}
                         70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}}

        /* ── DẢI 4 BƯỚC: đường nối TỰ ĐẦY theo tiến độ ─────────────────────────────────
           Thanh tiến độ ngầm quan trọng hơn 4 nút rời: khách thấy ngay "còn bao xa nữa". */
        .wz-dai{display:flex;align-items:flex-start;margin:2px 0 18px;gap:0;padding:0 6px}
        .wz-c{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;
              background:none;border:0;padding:0 4px;cursor:pointer;font-family:inherit;
              color:var(--muted);font-size:12.5px;line-height:1.3;text-align:center;
              transition:color .18s ease}
        .wz-c:disabled{cursor:default;opacity:.45}
        .wz-c .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
                 font:700 12.5px/1 system-ui;background:var(--card2);color:var(--muted);
                 border:1px solid var(--glass-bd);flex:none;
                 transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,background .2s ease}
        .wz-c .l{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .wz-c.xong{color:var(--text)}
        .wz-c.xong .n{background:var(--grad);color:#fff;border-color:transparent}
        .wz-c.nay{color:var(--text);font-weight:650}
        .wz-c.nay .n{background:var(--grad);color:#fff;border-color:transparent;
                     transform:scale(1.12);box-shadow:var(--glow)}
        .wz-c:not(:disabled):hover .n{transform:scale(1.08)}
        .wz-m{flex:none;width:34px;height:1px;margin-top:15px;background:var(--line);border-radius:2px}
        .wz-m.day{background:var(--grad)}

        /* ── THẺ MÀN: đúng công thức `.panel` đang dùng toàn app ── */
        .wz-hop{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
                border:1px solid var(--glass-bd);border-radius:16px;padding:24px 26px;
                box-shadow:0 6px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);
                animation:wzIn .22s ease-out both}
        .wz-h{font-size:21px;font-weight:700;margin:0 0 14px;letter-spacing:-.2px}
        .wz-p{font-size:13.5px;color:var(--muted);margin:0 0 18px;line-height:1.6;max-width:62ch}
        .wz-h:has(+ .wz-p){margin-bottom:6px}

        .wz-o{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
        /* 🔴 29/08 — HAI Ô XOÁ dùng khuôn riêng, KHÔNG mượn `.wz-o`. `.wz-o` có `flex-wrap:wrap`
           nên chữ dài hơn chỗ trống là xuống dòng, bỏ ô tick trơ một mình trên dòng riêng —
           chủ dự án gửi ảnh đúng ca đó. Lưới `auto 1fr` thì ô tick và chữ dính nhau vĩnh viễn.
           Cùng một khuôn cho cả hai ô, thay vì mỗi ô một bộ style nội tuyến lệch nhau. */
        .wz-xoa{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
                margin:11px 0 0;padding:11px 13px;border:1px solid var(--line);border-radius:11px;
                cursor:pointer;transition:border-color .12s,background .12s}
        .wz-xoa:hover{border-color:var(--accent2,#8b5cf6)}
        .wz-xoa > input{width:16px;height:16px;margin:2px 0 0;flex:none;
                        accent-color:var(--purple);cursor:pointer}
        .wz-xoa b.t{font-size:13px;display:block;margin-bottom:3px}
        .wz-xoa .wz-xt{margin:0;display:block;line-height:1.55}
        /* Đỏ nhạt = có xoá dữ liệu. Đậm hơn = xoá KHÔNG hoàn tác được. */
        .wz-xoa.canh{border-color:rgba(255,90,110,.32);background:rgba(255,90,110,.05)}
        .wz-xoa.canh2{border-color:rgba(255,90,110,.55);background:rgba(255,90,110,.09)}
        .wz-xoa .canh-d{color:var(--warn,#f59e0b)}
        /* 26/08 nhịp 15 — nới 112 → 160px. Tên mới dài hơn hẳn tên cũ, mà `min-width` chỉ
           giữ được khi nhãn NGẮN HƠN nó; vượt qua là mỗi nhãn tự đẩy ô nhập một kiểu.
           ĐO THẬT (getBoundingClientRect): "📥 Thư mục video tải về" = 150px ·
           "📤 Thư mục video kết quả" = **153px** ⇒ ở 150px hai ô lệch nhau 3px.
           160 > 153 nên cả hai lại về đúng một mốc. Đừng hạ xuống nếu đổi tên dài thêm. */
        .wz-o label{font-size:13px;color:var(--muted);min-width:160px}
        .wz-o input[type=text],.wz-o input[type=number]{padding:10px 13px;border-radius:10px;
                border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);
                font-size:13.5px;font-family:inherit;transition:border-color .16s ease,box-shadow .16s ease}
        .wz-o input:focus{outline:0;border-color:var(--purple);
                box-shadow:0 0 0 3px rgba(139,92,246,.18)}
        .wz-o .duong{flex:1;min-width:210px}
        /* 27/08 — CHIP NGÔN NGỮ. Trước đây khách phải TỰ GÕ "vi, en, th": gõ sai một mã là
           ngôn ngữ đó rụng im lặng (máy chủ lọc theo bảng `LANGS`, không báo). Tick thì không
           gõ sai được. Danh sách phổ biến hiện sẵn, ~60 mã còn lại nằm trong ô chọn thêm. */
        .wz-lgbox{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:210px}
        .wz-lg{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;
               border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);
               border-radius:9px;padding:5px 10px;font-size:12.5px;
               transition:border-color .15s ease,background .15s ease,color .15s ease}
        .wz-lg:hover{background:rgba(255,255,255,.07);color:var(--text)}
        .wz-lg .ma{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
                   letter-spacing:.04em;opacity:.62;text-transform:uppercase}
        .wz-lg.on{border-color:var(--purple);background:rgba(139,92,246,.16);color:var(--text);
                  font-weight:600}
        .wz-lg.on .ma{opacity:.85}
        .wz-lg:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
        .wz-lgthem{padding:6px 10px;border-radius:9px;border:1px solid var(--line);
                   background:rgba(255,255,255,.04);color:var(--muted);font-size:12.5px;
                   font-family:inherit;max-width:210px}
        .wz-xt{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.55}
        .wz-xt code{background:rgba(255,255,255,.06);border:1px solid var(--line);
                    padding:2px 7px;border-radius:6px;font-size:11.5px;
                    font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
        .wz-canh{font-size:12.5px;line-height:1.6;margin-top:14px;padding:11px 14px;
                 border:1px solid rgba(245,158,11,.22);border-left:3px solid var(--warn);
                 background:rgba(245,158,11,.07);border-radius:0 11px 11px 0}
        .wz-phu{margin-top:18px;padding-top:15px;border-top:1px solid var(--line);
                display:flex;gap:9px;flex-wrap:wrap;align-items:center}
        .wz-phu .sub{font-size:12px;color:var(--muted);width:100%;margin:0 0 4px}
        .wz-cuoi{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:17px;
                 border-top:1px solid var(--line)}
        .wz-cuoi .tin{flex:1;font-size:12.5px;color:var(--muted);min-width:0}

        /* ── NÚT: khớp `.btn` / `.btn.go` ── */
        .wz-nut{border:1px solid var(--glass-bd);border-radius:11px;padding:10px 17px;
                background:rgba(255,255,255,.05);color:var(--text);font-size:13.5px;
                font-weight:650;cursor:pointer;font-family:inherit;
                transition:transform .15s ease,box-shadow .18s ease,background .18s ease}
        .wz-nut:hover:not(:disabled){background:rgba(255,255,255,.09);transform:translateY(-1px)}
        .wz-nut:active:not(:disabled){transform:translateY(0)}
        .wz-nut:disabled{opacity:.4;cursor:not-allowed}
        .wz-nut.ch{background:var(--grad);border-color:transparent;color:#fff;
                   box-shadow:0 6px 20px rgba(139,92,246,.28)}
        .wz-nut.ch:hover:not(:disabled){box-shadow:0 9px 26px rgba(139,92,246,.42)}
        /* Khoá mà vẫn gradient thì đọc như "bấm được" — đổi hẳn sang trung tính. */
        .wz-nut.ch:disabled{background:rgba(255,255,255,.05);border-color:var(--glass-bd);
                            color:var(--muted);box-shadow:none}
        .wz-nut.to{padding:14px 28px;font-size:15px;border-radius:13px}
        /* 26/08 nhịp 26 — PHÁ HUỶ HẠNG PHỤ: viền đỏ, không tô đặc.
           Nút "🗑 Xoá hết" nằm ngay cạnh "Bật hết / Tạm dừng hết" — tô đặc như nút "Dừng"
           thì nó hút mắt và hút CẢ CÚ BẤM NHẦM, mà đây là việc không hoàn tác được. */
        .wz-nut.do-v{border-color:rgba(244,63,94,.55);color:#fb7185;background:rgba(244,63,94,.08)}
        .wz-nut.do-v:hover:not(:disabled){background:rgba(244,63,94,.18);color:#fff}
        .wz-nut.do{background:linear-gradient(135deg,#e11d48,#f43f5e);border-color:transparent;
                   color:#fff;box-shadow:0 6px 20px rgba(225,29,72,.26)}
        /* 🔴 31/08/2026 — Nút CAM cho "Tạm dừng": việc có thể lùi được (khác đỏ = xoá, không lùi). */
        .wz-nut.cam{background:linear-gradient(135deg,#d97706,#f59e0b);border-color:transparent;
                    color:#fff;box-shadow:0 6px 20px rgba(245,158,11,.26)}
        .wz-nut.cam:hover:not(:disabled){box-shadow:0 9px 26px rgba(245,158,11,.42)}
        .wz-nut.cam:disabled{background:rgba(255,255,255,.05);border-color:var(--glass-bd);
                             color:var(--muted);box-shadow:none}

        /* ── CHẤM NHỊP TIM ── */
        /* ══ HERO CỦA DASHBOARD (26/08 nhịp 21) ══════════════════════════════════════════
           Một thẻ = một câu chuyện "đang chạy tới đâu": trạng thái · nút · thanh tiến trình.
           Viền trái đổi màu theo trạng thái để liếc là biết, không phải đọc chữ. */
        /* 🔴 30/08/2026 — GỠ HÀN DÍNH (chủ dự án: *"tách riêng từng phần thành từng block riêng có
           border riêng để không bị lẫn vào nhau"*). Trước đây hero + ô đếm + khối MẪU KÊNH MỚI bị
           HÀN thành một mảng liền (bỏ viền trên/dưới + bo góc vuông) để tiết kiệm ~38px chiều cao.
           Nay ưu tiên PHÂN TÁCH THỊ GIÁC: mỗi khối là một thẻ độc lập, có viền + lề riêng.
           ⚠ Đây là ghi đè CÓ CHỦ Ý lên ngân sách "≤360px khung trước hàng dữ liệu đầu" (4237-4238,
             19343-19346) — chủ dự án chốt đổi ưu tiên. */
        .wz-hop>.wz-hero{margin-bottom:12px;border-radius:13px}
        .wz-dem4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 12px;
              border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;overflow:hidden}
        .wz-dem4>*{padding:8px 12px;border-left:1px solid var(--line);background:transparent;
              text-align:left;font:inherit;color:inherit;cursor:pointer;display:flex;
              align-items:baseline;gap:7px}
        .wz-dem4>*:first-child{border-left:0}
        /* 🔴 30/08 — ĐÃ GỠ 2 luật hàn "ô đếm ⇄ MẪU KÊNH MỚI" (xem ghi chú gỡ-hàn-dính ở trên):
             `.wz-dem4:has(+ .md-hop:not(.mo)){border-radius:0;margin-bottom:0}`
             `.wz-dem4 + .md-hop:not(.mo) .md-gon{border-top:0;border-radius:0 0 14px 14px}`
           Nay ô đếm dùng bo góc 12px của `.wz-dem` (bên dưới) và `.md-gon` giữ viền đủ 4 cạnh. */
        .wz-dem4 + .md-hop:not(.mo){margin-bottom:12px}
        .wz-dem4>*:hover{background:rgba(255,255,255,.035)}
        .wz-dem4 b{font-size:17px;line-height:1.1}
        .wz-dem4 span{font-size:11.5px;color:var(--muted)}

        /* ══ 🔴 30/08/2026 — TÁCH BLOCK: mỗi phần một thẻ có viền riêng ══════════════════════
           Chủ dự án: *"tách riêng từng phần thành từng block riêng có border riêng để không bị
           lẫn vào nhau"*. BA nguyên nhân thật khiến cả tab nhìn như MỘT mảng liền:
             (a) hai khung `.wz-hop` + `.xl-gon` DÍNH mép nhau — `.wz-hop` không có margin nào;
             (b) viền trong chỉ `rgba(255,255,255,.08)` ⇒ CÓ viền nhưng mắt không thấy;
             (c) 3 luật hàn hero⇄ô đếm⇄MẪU KÊNH MỚI (đã gỡ ở trên).
           ⚠ BỌC TRONG `#wfWiz` để KHÔNG đụng các màn khác cũng dùng `.wz-hop`/`.wz-hop-2`
             (_wizXlTomKhoi · _wizManHoatDong · _wizManHeThong · modal cấu hình).
           ⚠ `.wz-hero` PHẢI dùng 3 thuộc tính DÀI (top/right/bottom) — TUYỆT ĐỐI không dùng
             `border-color` gọn: `#wfWiz .wz-hero` ưu tiên cao hơn `.wz-hero.chay/.loi` ⇒ dùng
             shorthand là MẤT vạch màu trạng thái ở viền TRÁI (xanh=đang chạy, cam=lỗi).
           ⚠ KHÔNG đụng `.wz-vado` (viền hổ phách, đã khác biệt sẵn) và KHÔNG nâng token `--line`
             toàn cục (nó còn là vạch kẻ hàng của .wz-k/.md-o/.wz-cuoi — nâng là đậm hết). */
        #wfWiz>.wz-hop+.wz-hop,#wfWiz>.wz-hop+.xl-gon{margin-top:14px}
        #wfWiz .wz-dem,#wfWiz .md-gon,#wfWiz .md-hop.mo,#wfWiz .wz-hop-2,
        #wfWiz .xl-gon,#wfWiz .lh-gh,#wfWiz .wz-ren-i{border-color:rgba(255,255,255,.17)}
        #wfWiz .wz-hero{border-top-color:rgba(255,255,255,.17);
              border-right-color:rgba(255,255,255,.17);border-bottom-color:rgba(255,255,255,.17)}
        /* Hàng lọc/tiêu đề "Kênh" là khối DUY NHẤT không có khung nào — cho nó một thẻ TỰ CHỨA.
           KHÔNG nối bằng `+` với #wizDsPg: giữa hai cái còn dòng gợi ý `.wz-xt-an`. */
        #wfWiz .wz-loc1{padding:9px 12px;border:1px solid rgba(255,255,255,.17);
              border-radius:12px;background:rgba(255,255,255,.02);margin:0 0 10px}
        body.light #wfWiz .wz-dem,body.light #wfWiz .md-gon,body.light #wfWiz .md-hop.mo,
        body.light #wfWiz .wz-hop-2,body.light #wfWiz .xl-gon,body.light #wfWiz .lh-gh,
        body.light #wfWiz .wz-ren-i,body.light #wfWiz .wz-loc1{border-color:#cbd4e6}
        body.light #wfWiz .wz-hero{border-top-color:#cbd4e6;border-right-color:#cbd4e6;
              border-bottom-color:#cbd4e6}
        /* Nén hero: 17px/15px xuống 15px/11px. Đo được ~34px — không mất chữ nào, chỉ bớt khoảng. */
        .wz-hero{padding:11px 15px !important}
        .wz-hero>.d>div>b{font-size:15px !important}
        .md-viec{padding:9px 12px !important}
        .md-viec .md-v1{padding:4px 0 !important}
        .wz-hero{margin:0 0 16px;padding:15px 17px;border:1px solid var(--line);
                 border-left:3px solid var(--muted);border-radius:13px;
                 background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
        .wz-hero.chay{border-left-color:var(--ok);background:
                 linear-gradient(180deg,rgba(34,197,94,.09),rgba(255,255,255,.012))}
        .wz-hero.loi{border-left-color:var(--warn);background:
                 linear-gradient(180deg,rgba(245,158,11,.10),rgba(255,255,255,.012))}
        .wz-hero>.d{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
        .wz-hero>.d>div>b{display:block;font-size:17px;letter-spacing:-.2px;line-height:1.3}
        .wz-hero .sub{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
        .wz-hero .nut{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
        /* Thanh tiến trình nằm TRONG hero ⇒ bỏ viền/nền riêng, khỏi thẻ lồng thẻ. */
        .wz-hero .wz-tien{margin:13px 0 0;padding:0;border:0;background:none}
        .wz-cham{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;
                 animation:wzTho 2.1s ease-out infinite}
        .wz-cham.nghi{background:var(--muted);animation:none;box-shadow:0 0 0 4px rgba(161,161,170,.12)}
        .wz-cham.loi{background:var(--warn);animation:none;box-shadow:0 0 0 4px rgba(245,158,11,.16)}
                /* Ba luật này bị cắt nhầm lúc thay khối bảng điều khiển — `wz-hop-2` còn 5 chỗ
           dùng, và thiếu `max-height` là danh sách 200-1000 Page đẩy nút chính ra khỏi màn. */
        .wz-hop-2{margin-top:0;border:1px solid var(--line);border-radius:12px;
                  padding:2px 15px 8px;background:rgba(255,255,255,.02)}
        #wizDs1,#wizDsB{max-height:34vh;overflow:auto}
        .wz-now{color:var(--purple);margin-right:7px;font-size:11px}

        /* `.wz-k` vẫn được DANH SÁCH PAGE ở bước 1 và BẢNG TÓM TẮT ở bước 4 dùng —
           xoá nó đi là hai chỗ đó mất kẻ dòng và mất canh cột. */
        .wz-k{display:grid;grid-template-columns:1fr auto auto;gap:9px 15px;align-items:center;
              font-size:13px;padding:10px 2px;border-top:1px solid var(--line)}
        .wz-k:first-child{border-top:0}
        .wz-k .t{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .wz-k .d{font-size:11.5px;color:var(--muted);max-width:300px;overflow:hidden;
                 text-overflow:ellipsis;white-space:nowrap;
                 font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
        .wz-b{font-size:11.5px;padding:3px 10px;border-radius:20px;border:1px solid var(--line);
              color:var(--muted);white-space:nowrap;font-weight:600}
        .wz-b.ok{color:var(--ok);border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
        .wz-b.cho{color:var(--warn);border-color:rgba(245,158,11,.32);background:rgba(245,158,11,.07)}

        /* ── BẢNG ĐIỀU KHIỂN (25/08) ────────────────────────────────────────────────
           Bốn ô đếm + danh sách Page có màu trạng thái. Màu ngữ nghĩa (ổn/chờ/hỏng) TÁCH
           khỏi màu nhấn của thương hiệu — tím/hồng là accent, không dùng để báo trạng thái. */
        .wz-dem{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0 0 14px;
                border:1px solid var(--line);border-radius:12px;overflow:hidden;
                background:var(--line)}
        .wz-dem>div,.wz-dem>button{background:var(--card);padding:12px 15px}
        /* ══ 26/08 nhịp 20 — Ô ĐẾM BẤM ĐƯỢC ═════════════════════════════════════════════
           Con số nào cũng phải dẫn tới danh sách sinh ra nó — đó là thứ phân biệt một
           dashboard với một tấm ảnh. Bấm ô = lọc bảng Page ngay bên dưới. */
        .wz-dem>button{border:0;font:inherit;text-align:left;cursor:pointer;
                       transition:background .15s}
        .wz-dem>button:hover{background:rgba(255,255,255,.055)}
        .wz-dem>button:focus-visible{outline:2px solid var(--purple);outline-offset:-2px}
        /* Sáu ô: màn hẹp thì xuống 3 cột rồi 2, không bao giờ bóp chữ. */
        .wz-dem6{grid-template-columns:repeat(6,1fr)}
        @media (max-width:900px){ .wz-dem6{grid-template-columns:repeat(3,1fr)} }
        @media (max-width:560px){ .wz-dem6{grid-template-columns:repeat(2,1fr)} }
        .wz-dem b{display:block;font:700 23px/1.2 system-ui;letter-spacing:-.5px;
                  font-variant-numeric:tabular-nums}
        .wz-dem span{font-size:11.5px;color:var(--muted)}
        .wz-dem .c-xanh{color:var(--ok)} .wz-dem .c-lam{color:var(--accent2)}
        .wz-dem .c-do{color:#f43f5e}

        /* video đang render — số liệu THẬT do worker báo */
        .wz-ren{margin:0 0 12px;display:flex;flex-direction:column;gap:7px}
        .wz-ren:empty{display:none}
        .wz-ren-i{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:11px;
                  align-items:center;font-size:12.5px;padding:8px 12px;
                  border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
        .wz-ren-i .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .wz-ren-i .b{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
        .wz-ren-i .b i{display:block;height:100%;background:var(--grad);border-radius:3px;
                       transition:width .45s ease}
        .wz-ren-i .p{color:var(--muted);font-size:11.5px;white-space:nowrap}

        /* ══ THANH TIẾN TRÌNH LƯỢT CHẠY (26/08 nhịp 19) ══════════════════════════════════
           Số liệu THẬT từ `td = {i, n, ten}`. `transition` để mỗi lượt poll thanh TRƯỢT tới
           giá trị mới thay vì nhảy giật — đây là chỗ duy nhất trên màn nói "còn bao lâu nữa". */
        .wz-tien{margin:0 0 14px;padding:11px 14px;border:1px solid var(--line);
                 border-radius:11px;background:rgba(124,92,255,.06)}
        .wz-tien .d{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
                    font-size:12.5px;margin-bottom:8px}
        .wz-tien .d span{color:var(--muted)}
        .wz-tien .d .p{margin-left:auto;color:var(--text);font-weight:700;
                       font-variant-numeric:tabular-nums}
        .wz-tien .b{display:block;height:7px;border-radius:4px;background:var(--line);overflow:hidden}
        .wz-tien .b i{display:block;height:100%;background:var(--grad);border-radius:4px;
                      transition:width .45s ease}

        /* Hàng Page ĐANG LÀM: vạch chạy vô hạn — ta biết Page nào đang được xử lý, nhưng
           KHÔNG biết phần trăm của riêng nó ⇒ không bịa ra con số. `prefers-reduced-motion`
           thì đứng yên, vẫn thấy được là hàng nào đang sáng. */
        .wz-dang{position:relative}
        .wz-dang::after{content:"";position:absolute;left:-2px;top:6px;bottom:6px;width:3px;
                        background:var(--grad);border-radius:2px;animation:wzTho2 1.6s ease-in-out infinite}
        @keyframes wzTho2{0%,100%{opacity:1}50%{opacity:.35}}
        @media (prefers-reduced-motion:reduce){ .wz-dang::after{animation:none} }

        /* một dòng Page — bấm được, mở chi tiết */
        .wz-pg{display:grid;grid-template-columns:20px minmax(0,1fr) 128px 78px 84px;
               gap:10px;align-items:center;width:100%;text-align:left;font-family:inherit;
               font-size:13px;padding:9px 10px;border:0;border-top:1px solid var(--line);
               background:none;color:var(--text);cursor:pointer;border-radius:8px}
        .wz-pg:first-child{border-top:0}
        .wz-pg:hover{background:rgba(255,255,255,.045)}
        .wz-pg .ch{font-size:11px;line-height:1}
        .wz-pg .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .wz-pg .s{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
                  white-space:nowrap}
        .wz-pg .v,.wz-pg .go{font-size:11.5px;color:var(--muted);text-align:right;
                             font-variant-numeric:tabular-nums;white-space:nowrap}
        .wz-pg.wz-do .s{color:#f43f5e} .wz-pg.wz-cam .s{color:var(--warn)}
        .wz-pg.wz-xanh .s{color:var(--ok)} .wz-pg.wz-xanh_d .s{color:var(--accent2)}
        .wz-pg.wz-do{background:rgba(244,63,94,.06)}
        .wz-pg.wz-cam{background:rgba(245,158,11,.06)}
        .wz-pg.wz-xanh_d{background:linear-gradient(90deg,rgba(139,92,246,.13),transparent 62%)}

        /* ── SUB-NAV TRONG TAB AUTOMATION ── */
        .wz-tab{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0 0 14px;
                padding-bottom:10px;border-bottom:1px solid var(--line)}
        .wz-tab button{border:0;background:none;color:var(--muted);font:600 13.5px/1 inherit;
                       padding:8px 13px;border-radius:9px;cursor:pointer;position:relative;
                       font-family:inherit}
        .wz-tab button:hover{background:rgba(255,255,255,.05);color:var(--text)}
        .wz-tab button.on{background:rgba(139,92,246,.15);color:var(--text)}
        /* 🔴 26/08 nhịp 12 — số bước nằm TRONG tab (bỏ dải riêng ở dưới). BA trạng thái phải
           KHÁC NHAU RÕ, vì dải cũ tô "đã xong" và "đang mở" CÙNG màu tím ⇒ chủ dự án đọc ra
           "bước 1 và 4 nối với nhau". Nay: xong = ✓ XANH · chưa = số XÁM · đang mở = nền tím
           đặc + viền dưới (chỉ `.on` mới có màu tím). */
        .wz-tab button .so{display:inline-flex;align-items:center;justify-content:center;
                           width:18px;height:18px;border-radius:50%;margin-right:7px;
                           font-size:10.5px;font-weight:800;vertical-align:-3px}
        .wz-tab button.b-cho  .so{background:rgba(255,255,255,.10);color:var(--muted)}
        .wz-tab button.b-xong .so{background:rgba(34,197,94,.18);color:var(--ok)}
        .wz-tab button.on .so{background:var(--grad);color:#fff}
        .wz-tab button.on{box-shadow:inset 0 -2px 0 var(--purple)}
        .wz-tab button.b-phu{opacity:.82}
        /* 26/08 nhịp 17 — TRANG CHỦ. Nó không mang số bước nên rơi vào cùng nhánh với
           Hoạt động/Hệ thống ⇒ trông như tab phụ, trong khi nó là nơi khách vào đầu tiên
           và là chỗ bấm chạy. Cho nó chữ đậm + vạch ngăn với cụm ba bước bên phải. */
        .wz-tab button.b-nha{font-weight:700;opacity:1;
                margin-right:6px;padding-right:14px;border-right:1px solid var(--line)}
        .wz-tab button .bd{display:inline-block;margin-left:7px;min-width:17px;height:17px;
                           line-height:17px;border-radius:9px;background:#f43f5e;color:#fff;
                           font:700 10.5px/17px system-ui;text-align:center;padding:0 5px}
        .wz-tab .wz-nut.sm{font-weight:600}

        /* ── HOẠT ĐỘNG ── */
        .wz-hd{display:flex;flex-direction:column;gap:1px;max-height:58vh;overflow:auto;
               border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
        .wz-hd-i{display:grid;grid-template-columns:64px 84px minmax(0,1fr);gap:11px;
                 align-items:center;padding:9px 13px;border-top:1px solid var(--line);font-size:12.5px}
        .wz-hd-i:first-child{border-top:0}
        .wz-hd-i .g{color:var(--muted);font-family:ui-monospace,monospace;font-size:11.5px;
                    font-variant-numeric:tabular-nums}
        .wz-hd-i .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .wz-b.lam{color:var(--accent2);border-color:color-mix(in srgb,var(--accent2) 40%,transparent);
                  background:color-mix(in srgb,var(--accent2) 9%,transparent)}

        /* ── HÀNG LỌC + DÒNG PAGE CÓ TICK (Phase 3) ── */
        .wz-loc{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 9px}
        .wz-loc input{flex:1;min-width:150px;max-width:230px;padding:7px 11px;border-radius:9px;
                      border:1px solid var(--line);background:rgba(255,255,255,.04);
                      color:var(--text);font-size:12.5px;font-family:inherit}
        .wz-nut.sm{padding:5px 11px;font-size:12px;border-radius:8px}
        /* Nút KHÔNG BAO GIỜ được xuống hàng — nhãn 2 chữ vỡ làm dòng bảng cao lệch nhau. */
        .wz-nut{white-space:nowrap}
        /* 🔴 26/08 — MỘT bề rộng cho MỌI màn của tab. Trước: wizard ~535px · sub-nav ~700px ·
           panel render ~960px ⇒ đổi màn là khung NHẢY, nhìn như ba trang khác nhau. */
        /* 🔴 30/08/2026 — FIT TOÀN BỀ NGANG (chủ dự án khoanh đỏ hai dải trống hai bên).
           CÓ BA cap lồng nhau, gỡ thiếu một cái là vẫn trống:
             ① `#v-quytrinh{max-width}`  ← cap TO nhất, chốt duy nhất còn giữ (xem chỗ khai báo)
             ② `#wfWiz{max-width:920px}` ← gỡ
             ③ `.wf-lane{max-width:920px}` ← gỡ. ⚠ PHẢI gỡ CÙNG ②: `.wf-lane` là con thứ hai của
                tab và vẫn hiện ở màn này, để nguyên thì phần trên tràn rộng còn nó đứng 920px
                ⇒ LỆCH HÀNG thấy rõ.
           ⚠ `width:100%` PHẢI GIỮ: `.wiz` (trùng tên với stepper ở đầu trang) có
             `align-items:center`, con nào không khai width sẽ co lại bằng nội dung rồi bị căn giữa.
           ⚠ KHÔNG đụng `#r2CfgCol{max-width:980px}`: cap đó có lý do đo được (panel render dàn
             ngang quá 1300px thì công tắc trôi sang phải, xem chú thích tại chỗ). */
        #v-quytrinh.wiz>#wfWiz{width:100%;max-width:none;margin-left:0;margin-right:0}
        #v-quytrinh.wiz.cfg>.wf-lane{width:100%;max-width:none;margin-left:0;margin-right:0}
        /* Hàng nguồn trong modal chi tiết Page: avatar · tên+link · nút */
        .wz-ngh{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;
                align-items:center;padding:7px 8px;border-top:1px solid var(--line)}
        .wz-ngh:first-child{border-top:0}
        .wz-ngh img{width:30px;height:30px;border-radius:50%;object-fit:cover}
        .wz-nut.sm.on{background:var(--grad);border-color:transparent;color:#fff}
        /* 🔴 26/08 — cột hành động cũ CỐ ĐỊNH 74px, mà nút "Gắn nguồn" rộng hơn thế ⇒ chữ XUỐNG
           HÀNG ("Gắn / nguồn"), dòng cao lên, cả bảng lởm chởm. Cho cột tự nới theo nút. */
        /* 🔴 26/08 nhịp 18 — THÊM 2 CỘT (thư mục giao · trạng thái LoHa) khi gộp màn "Thư mục"
           vào đây. Lưới hàng và lưới HEADER `.wz-pgh` phải KHỚP TỪNG CỘT — lệch một cột là
           tiêu đề đứng trên nhầm dữ liệu, mà không có lỗi nào báo ra. Sửa một cái phải sửa cả hai. */
        /* 🔴 28/08 — CỘT HÀNH ĐỘNG rộng ra, và dấu ✕ có Ô RIÊNG cỡ cố định. Cột cũ
           `minmax(58px,auto)` co lại vừa đúng chữ nên nút 'Chọn thư mục' dính liền
           dấu ✕ thành 'Chọn thư mụcX' (ảnh chụp của chủ dự án) — hai hành động khác
           hẳn nhau, một cái sửa một cái XOÁ, mà nhìn như một nút. */
        /* 🔴 28/08 — THÊM CỘT ẢNH (24px) ngay sau đèn trạng thái. Lưới dòng và lưới HEADER
           `.wz-pgh` dùng CHUNG khai báo này, nên phải thêm một `<span></span>` rỗng vào header
           nữa — lệch một cột là tiêu đề đứng trên nhầm dữ liệu mà không lỗi nào báo. */
        /* ══ 28/08 — THẺ KÊNH, DÁNG LẤY TỪ TAB THEO DÕI KÊNH ═══════════════════════════
           Chủ dự án chỉ vào thẻ `vmRender` và chốt "đổi thành thế này cũng được, thêm vài
           trường thống kê, nút bấm là được". Nên: ảnh 40px BÊN TRÁI · tên + 📝 tên dịch xếp
           chồng · huy hiệu phải · ✕ góc trên phải — y hệt thẻ kia. Thêm hai hàng thẻ kia
           không có mà Automation cần: HÀNG SỐ và HÀNG NÚT. */
        #wizDsPg{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:10px}
        .wz-pgl{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;
                padding:10px 11px 9px;border:1px solid var(--line);border-radius:12px;
                background:var(--card);font-size:13px;transition:border-color .15s}
        .wz-pgl:hover{border-color:var(--accent)}
        .wz-pgl.wz-dang{border-color:var(--purple,#7c5cff)}
        .wz-pgl .dau{display:flex;align-items:center;gap:9px;min-width:0;padding-right:22px}
        .wz-pgl .dau .t{flex:1;min-width:0;text-align:left}
        .wz-pgl .wz-ava{width:40px;height:40px;flex:none}
        .wz-pgl .wz-ava img,.wz-pgl .wz-ava .knav{width:40px !important;height:40px !important}
        /* Hàng số: liếc là biết kênh có sống không. Ô nào KHÔNG có dữ liệu thì KHÔNG hiện —
           in "0 video" cho kênh chưa đọc được metadata là bịa một con số khách sẽ tin. */
        /* Dòng "đang làm" chỉ mọc trên thẻ của kênh MÁY CHỦ đang xử lý — câu việc lấy thẳng
           từ nhịp tim `ly_do`, không diễn giải lại. */
        .wz-pgl .dang-lam{display:flex;align-items:center;gap:6px;min-width:0;font-size:11px;
                padding:5px 8px;border-radius:8px;background:rgba(124,92,255,.12);
                border:1px solid rgba(124,92,255,.3)}
        .wz-pgl .dang-lam .ch{flex:none}
        .wz-pgl .dang-lam .t{flex:none;font-weight:700;color:var(--text)}
        .wz-pgl .dang-lam .v{flex:1;min-width:0;color:var(--muted);
                overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .wz-pgl .so{display:flex;gap:9px;flex-wrap:wrap;font-size:11px;color:var(--muted);
                    min-width:0}
        .wz-pgl .so b{color:var(--text);font-weight:600}
        .wz-pgl .duong-hang{display:block;width:100%;min-width:0;text-align:left}
        .wz-pgl .cuoi{display:flex;align-items:center;gap:7px;min-width:0}
        .wz-pgl .cuoi .tm{flex:1;min-width:0}
        .wz-pgl .cuoi .v{margin-left:auto;flex:none}
        .wz-pgl .wz-x{position:absolute;top:6px;right:6px}
        .wz-pgl .tm{background:none;border:0;padding:0;min-width:0;text-align:left;
                font:inherit;color:var(--muted);cursor:pointer}
        .wz-pgl .tm code{font-size:10.5px;display:block;overflow:hidden;
                text-overflow:ellipsis;white-space:nowrap;text-align:left}
        /* rtl = cắt ĐẦU đường dẫn dài để còn thấy tên thư mục cuối — CHỈ cho đường dẫn thật.
           Áp cho chữ thường ("chưa đặt nơi giao") là chữ chạy ngược thành "_ giao ▪". */
        .wz-pgl .tm code.duong{direction:rtl}
        .wz-pgl .tm:hover:not(:disabled) code{color:var(--text);text-decoration:underline}
        .wz-pgl .tm:disabled{opacity:.55;cursor:default}
        .wz-pgl input{width:15px;height:15px;accent-color:var(--purple);cursor:pointer}
        .wz-pgl .ch{font-size:11px;line-height:1}
        .wz-pgl .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .wz-pgl .s{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
                   white-space:nowrap}
        /* ══ CỘT TRẠNG THÁI = PROGRESS 4 CHẶNG (26/08 nhịp 21) ══════════════════════════
           Bốn vạch ĐÚNG BẰNG bốn bước dây chuyền in ở trên trang. Mỗi vạch sáng khi có
           bằng chứng — xem chú thích ở `_wizVePg`. Nhãn chữ giữ nguyên bên dưới: hình cho
           liếc, chữ cho đọc; bỏ chữ đi là khách phải đoán bốn vạch nghĩa gì. */
        .wz-pgl .pr{display:block;min-width:0}
        .wz-pgl .pr .tr{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:4px}
        .wz-pgl .pr .tr i{display:block;height:4px;border-radius:2px;background:var(--line)}
        .wz-pgl .pr .tr i.on{background:var(--grad)}
        .wz-pgl .pr .tr i.di{animation:wzNhap 1.15s ease-in-out infinite}
        @keyframes wzNhap{0%,100%{opacity:1}50%{opacity:.32}}
        @media (prefers-reduced-motion:reduce){ .wz-pgl .pr .tr i.di{animation:none} }
        .wz-pgl .pr .nh{display:block;font-size:11.5px;color:var(--muted);
                        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .wz-pgl.wz-do .pr .nh,.wz-pgl.wz-cam .pr .nh{color:var(--warn)}
        /* ══ 28/08 — KHỐI "CHƯA CHẠY ĐƯỢC" (gộp năm khối cũ) ═══════════════════════════ */
        .wz-vado{border:1px solid rgba(255,176,32,.34);background:rgba(255,176,32,.06);
                 border-radius:13px;padding:13px 15px;margin:0 0 13px}
        .wz-vado-d{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
        .wz-vado-c{display:flex;gap:16px;flex-wrap:wrap;margin:7px 0 0;font-size:12.5px;
                   color:var(--muted)}
        .wz-vado-i b{color:var(--warn,#f59e0b)}
        .wz-vado-t{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 11px}
        .wz-vado-t span{font-size:11.5px;padding:2px 8px;border-radius:999px;
                        background:rgba(255,255,255,.06);border:1px solid var(--glass-bd);
                        max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .wz-vado-t .wz-vado-h{background:none;border:0;color:var(--muted)}
        .wz-vado-n{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
        .wz-xong{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 13px;
                 padding:10px 13px;border-radius:11px;font-size:13px;
                 border:1px solid rgba(34,197,94,.3);background:rgba(34,197,94,.06)}
        .wz-xong span{font-size:12px;color:var(--muted)}
        .wz-vado-x{margin-top:9px;font-size:11px;color:var(--muted)}
        .wz-vado-x code{font-size:10.5px}
        /* Dòng đang hỏng: nói thẳng bằng chữ thay cho bốn vạch tiến độ tắt ngóm. */
        .wz-pgl .nh.wz-thieu{color:var(--warn,#f59e0b);font-weight:600}
        /* Văn xuôi dài → gập lại: đọc một lần lúc setup, không phải nhìn mỗi lần vào màn. */
        .wz-gap{margin-top:12px;font-size:12px;color:var(--muted)}
        .wz-gap summary{cursor:pointer;padding:6px 0;color:var(--muted);
                        text-decoration:underline dotted;text-underline-offset:3px}
        .wz-gap summary:hover{color:var(--text)}
        .wz-gap > div{padding:8px 11px;border-left:3px solid var(--warn,#f59e0b);
                      background:rgba(255,176,32,.06);border-radius:0 9px 9px 0;line-height:1.55}
        /* Hai tên xếp chồng trong CÙNG ô cột KÊNH — tên chính đọc trước, bản dịch là dòng
           phụ mờ hơn. Cả hai cắt bằng ellipsis: tên kênh Trung dài tràn ra là vỡ cả lưới. */
        /* ══ MODAL VIDEO CỦA KÊNH DÂY CHUYỀN — phủ gần kín màn hình (chủ dự án chốt 28/08).
           Bọc hết trong `.vm-day`: khung #vmModal dùng chung với tab Theo dõi kênh, không bọc
           là thu nhỏ/phóng to luôn tab kia. */
        .vm-day{width:min(1680px,96vw) !important;max-width:none !important;
                height:94vh;max-height:94vh !important;padding:0 !important;
                display:flex;flex-direction:column;overflow:hidden !important}
        /* ĐẦU DÍNH TRÊN: 200 video cuộn xuống mà nút Đóng/Làm mới vẫn trong tầm tay. Bản cũ cuộn
           cả đầu đi mất, muốn đóng phải cuộn ngược lên đầu. */
        .vm-day > #vmModalHead{position:sticky;top:0;z-index:2;margin:0 !important;
                padding:13px 18px;background:var(--card);border-bottom:1px solid var(--line);
                flex:none}
        /* `max-height` tính tay là ĐƯỜNG LÙI cho `flex:1;min-height:0` — nếu engine cũ không
           chia chiều cao đúng, khối vẫn cuộn được thay vì nén card cho vừa (đúng nghi ngờ của
           chủ dự án: "hay là bạn chưa cho scroll"). 76px = chiều cao đầu modal + viền. */
        .vm-day > #vmModalBody{flex:1 1 auto;min-height:0;max-height:calc(94vh - 76px);
                overflow-y:auto;overflow-x:hidden;padding:15px 18px 20px;
                display:grid !important;
                grid-template-columns:repeat(auto-fill,minmax(184px,1fr));
                gap:14px !important;align-content:start}
        .vm-day .krv-card{display:flex;flex-direction:column;min-width:0;min-height:330px;
                border:1px solid var(--line);border-radius:12px;overflow:hidden;
                background:var(--bg);transition:border-color .15s}
        .vm-day .krv-card:hover{border-color:var(--accent)}
        .vm-day .krv-card.daxem{opacity:.5}
        .vm-day .krv-card.daxem:hover{opacity:.85}
        /* 🔴 KHUNG ẢNH: CHIỀU CAO PX CỐ ĐỊNH. Đã thử `aspect-ratio` rồi `padding-top` + tuyệt
           đối, cả hai đúng trên Chrome của máy nhưng vẫn bẹt trong Electron (engine app ghim
           riêng). Thôi đoán engine thiếu gì — dùng thứ không thể sai: chiều cao px + object-fit.
           `flex:none` để lưới/flex không nén được nó. */
        .vm-day .krv-th{position:relative;flex:none;height:250px;overflow:hidden;
                background:#0b0b0f;line-height:0}
        .vm-day .krv-th > a{display:block;width:100%;height:100%;line-height:0}
        .vm-day .krv-th img,.vm-day .krv-th a > div,.vm-day .krv-th > div{
                width:100% !important;height:100% !important;object-fit:cover;
                border-radius:0 !important;display:block}
        .vm-day .krv-in{padding:9px 10px 10px;display:flex;flex-direction:column;gap:5px;flex:1}
        /* Cắt 3 dòng: tiêu đề Douyin/Bilibili dài lê thê, để tự do thì card cao thấp so le. */
        .vm-day .krv-tt{font-size:11.5px;line-height:1.35;color:var(--text);
                display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
                overflow:hidden}
        .vm-day .krv-ng{font-size:10.5px;color:var(--muted);margin-top:auto}
        .vm-day .krv-tai{width:100%;padding:5px 0;font-size:11px}
        .vm-day .krv-rong{grid-column:1/-1;padding:26px 4px;color:var(--muted)}
        /* ══ HỘP CẤU HÌNH KÊNH — canh cột (28/08) ═══════════════════════════════════════
           Xem chú thích dài ở bản vá P17: nhãn thẳng cột · chữ phụ xuống cuối hàng · ô nhập giãn
           theo bề ngang thật. KHOANH trong #wizKenhVung vì .wz-o/.wf-kenh-o dùng ở nhiều màn. */
        /* ══ CHẶN TRÀN NGANG trong hộp cấu hình (28/08) ═══════════════════════════════
           Panel render mượn từ tab Render vào đây; bên đó nó có cả bề ngang trang, vào modal
           thì hẹp hơn nhiều. Flex/grid item mặc định KHÔNG co xuống dưới bề rộng nội dung
           (`min-width:auto`) ⇒ một cái `<select>` tên giọng dài là đẩy cả hàng rộng ra, sinh
           thanh cuộn ngang và cắt cụt chữ bên trái — đúng ảnh chủ dự án gửi. */
        /* Modal mở thì TRANG PHÍA SAU thôi cuộn — nếu không, hai thanh cuộn dọc nằm cạnh
           nhau (modal 1413px + trang 1241px), lăn chuột không biết mình đang lăn cái nào. */
        body.wz-khoa-cuon .wiz,body.wz-khoa-cuon #v-quytrinh{overflow:hidden !important}
        #wizCfgVung,#wizCfgThan{max-width:100%;min-width:0}
        #wizCfgThan #r2CfgCol{max-width:100% !important;min-width:0}
        #wizCfgThan .r2-langrow{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
        #wizCfgThan .r2-sec,#wizCfgThan .r2-row,#wizCfgThan .r2-lang{min-width:0}
        #wizCfgThan select,#wizCfgThan input[type="text"],#wizCfgThan .duong{max-width:100%}
        #wizKenhVung,#wizDichVung{padding:2px 2px 4px}
        #wizKenhVung .wz-o,#wizKenhVung .wf-kenh-o,
        #wizDichVung .wz-o,#wizDichVung .wf-kenh-o{
                display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 12px}
        #wizKenhVung .wz-o > label,#wizKenhVung .wz-o > b,
        #wizKenhVung .wf-kenh-o > label,
        #wizDichVung .wz-o > label,#wizDichVung .wz-o > b,
        #wizDichVung .wf-kenh-o > label{
                flex:0 0 186px;max-width:186px;margin:0;font-size:12.5px;font-weight:600;
                color:var(--text);line-height:1.35}
        /* Chữ phụ chiếm TRỌN MỘT DÒNG RIÊNG, thụt vào thẳng hàng với ô nhập. Bản trước để nó
           `flex:0 1 auto` nên nó chen cạnh ô: hàng thì văng ra mép phải, hàng thì ngồi giữa đẩy
           thẻ nguồn sang bên, hàng thì bị ép thành cột hẹp. Một dòng riêng đọc được ngay:
               nhãn | ô nhập
                      chú thích  */
        /* Phủ ĐỦ bốn tổ hợp (hàng .wz-o | .wf-kenh-o) × (chú .wz-xt | .wf-kenh-g | .sub).
           Thiếu một tổ hợp là hàng đó chú thích vẫn nằm cạnh ô — đúng ca "🔗 Kênh nguồn" đã dính.
           `!important` cho margin vì mấy thẻ này mang `style="margin:0"` NỘI TUYẾN, mà nội tuyến
           thắng luật lớp. */
        #wizKenhVung .wz-o > .wz-xt,#wizKenhVung .wz-o > .wf-kenh-g,#wizKenhVung .wz-o > .sub,
        #wizKenhVung .wf-kenh-o > .wz-xt,#wizKenhVung .wf-kenh-o > .wf-kenh-g,
        #wizKenhVung .wf-kenh-o > .sub,
        #wizDichVung .wz-o > .wz-xt,#wizDichVung .wz-o > .wf-kenh-g,#wizDichVung .wz-o > .sub,
        #wizDichVung .wf-kenh-o > .wz-xt,#wizDichVung .wf-kenh-o > .wf-kenh-g,
        #wizDichVung .wf-kenh-o > .sub{
                order:9;flex:1 0 100%;box-sizing:border-box;
                margin:-2px 0 0 0 !important;padding-left:196px;
                font-size:11.5px;color:var(--muted);line-height:1.45}
        /* 🔴 12/09/2026 — CHỮ PHỤ BỊ BÓP THÀNH SỢI DỌC Ở BẢNG ĐA-KÊNH (ảnh chủ dự án).
           `_kenhDichHTML` + khối 🎛 Mẫu cấu hình vẽ ở CẢ HAI tab, nhưng luật "chú thích chiếm trọn
           một dòng" ngay trên chỉ neo `#wizKenhVung`/`#wizDichVung` — tức CHỈ trong modal Automation.
           Ở tab Render, thẻ kênh rộng ~300px mà `<span class="wf-kenh-g">` vẫn nằm CÙNG HÀNG với
           nhãn và ô chọn ⇒ ép còn ~1 ký tự mỗi dòng, đẩy nhãn + ô chọn xuống tận đáy panel.
           Cột hẹp nên KHÔNG thụt 196px như modal: nhãn và chú thích mỗi thứ một dòng trọn vẹn.
           ⚠ Neo `#r2KenhList` (vùng vẽ của `renderKenhPanel`), KHÔNG neo `#v-render2`: cột cấu hình
             bị MƯỢN sang modal Automation, còn bảng kênh thì không — xem bài học 07/09. */
        #r2KenhList .wf-kenh-o{flex-wrap:wrap;align-items:flex-start;gap:5px 8px}
        #r2KenhList .wf-kenh-o > label{flex:1 0 100%;max-width:100%;margin:0}
        #r2KenhList .wf-kenh-o > .wf-kenh-g,
        #r2KenhList .wf-kenh-o > .wz-xt,
        #r2KenhList .wf-kenh-o > .sub{
                order:9;flex:1 0 100%;box-sizing:border-box;padding-left:0;
                margin:-1px 0 0 0 !important;font-size:11px;line-height:1.45;color:var(--r2-ink3)}
        #r2KenhList .wf-kenh-o > select{flex:1 1 auto;min-width:0;max-width:100% !important}
        /* Bản dịch tên là THÔNG TIN, không phải chú thích — cho nó đứng cạnh ô tên. */
        /* Bản dịch tên là THÔNG TIN, không phải chú thích — đứng cạnh ô tên, không xuống dòng. */
        #wizKenhVung .wz-o > .wz-tenvi{order:2;flex:0 1 auto;margin:0 !important}
        #wizKenhVung .wz-o > .duong,#wizKenhVung .wf-kenh-o > .duong,
        #wizDichVung .wz-o > .duong,#wizDichVung .wf-kenh-o > .duong{
                flex:1 1 320px !important;min-width:0;max-width:none !important}
        #wizKenhVung .wz-o > select,#wizKenhVung .wf-kenh-o > select{flex:0 1 260px;min-width:0}
        #wizKenhVung .wz-o > button,#wizKenhVung .wf-kenh-o > button{flex:none}
        /* Hàng 🔗 Kênh nguồn: khối thẻ chiếm trọn cột nội dung, thôi bị dồn ra mép phải. */
        #wizKenhVung .wz-o > div,#wizDichVung .wf-kenh-o > div{flex:1 1 320px;min-width:0}
        #wizKenhVung .wz-tenvi{color:var(--accent2)}
        /* Vạch ngăn mảng: danh tính · thư mục · nguồn · ngôn ngữ — bốn việc khác nhau, có mép
           ngăn thì mắt biết mình đang ở mảng nào. */
        #wizKenhVung > .wz-o + .wz-o{border-top:1px solid var(--line);padding-top:12px}
        .wz-tn1,.wz-tn2{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .wz-moi{display:inline-block;background:#ff2d55;color:#fff;font-size:10px;font-weight:700;
                padding:0 6px;border-radius:9px;margin-left:6px;vertical-align:1px}
        .wz-tn2{font-size:10.5px;color:var(--accent2);font-weight:500;margin-top:1px}
        .wz-tenvi{color:var(--accent2)}
        .wz-ava{display:block;width:24px;height:24px;padding:0;border:0;background:none;
                line-height:0;border-radius:50%}
        button.wz-ava{cursor:pointer}
        button.wz-ava:hover{box-shadow:0 0 0 2px var(--purple,#7c5cff)}
        .wz-pgl .v{font-size:11.5px;color:var(--muted);text-align:right;
                   font-variant-numeric:tabular-nums}
        .wz-pgl:has(input[type="checkbox"]:not(:checked)){opacity:.45}   /* 🔴 Pha 3b — CHỈ mờ khi checkbox tạm-dừng bỏ tick; trước là `input:not(:checked)` nên ô SỬA TÊN (text) cũng làm mờ card */
        /* 🔴 26/08 — Ở TAB PAGES dòng chữ ghi "Bấm tên Page để xem chi tiết" nhưng KHÔNG có
           handler nào: `_wizPageMo` chỉ được gọi từ tab Tổng quan (`.wz-pg`), tab Pages dùng
           `.wz-pgl`. Bấm tên ra KHÔNG GÌ ⇒ cả modal chi tiết (đổi tên · avatar nguồn ·
           thêm/xoá nguồn) KHÔNG AI MỞ ĐƯỢC từ đây. Nút-tên trông như chữ thường, gạch chân khi
           rê để lộ là bấm được.
           ⚠ Hàng là <label> bọc checkbox ⇒ handler PHẢI chặn CẢ `preventDefault` (khỏi tick)
             LẪN `stopPropagation` (khỏi nổi bọt lên label). */
        .wz-tnut{background:none;border:0;padding:0;margin:0;font:inherit;font-weight:600;
                 color:var(--text);text-align:left;cursor:pointer;overflow:hidden;
                 text-overflow:ellipsis;white-space:nowrap}
        .wz-tnut:hover{text-decoration:underline;color:var(--accent2)}
        /* Trong lúc KÉO-QUÉT: tắt bôi đen chữ, kẻo vệt xanh phủ kín danh sách (đúng cái chủ
           dự án chụp lại). Con trỏ đổi sang ô vuông cho biết đang chọn dòng, không phải chọn chữ. */
        .keo,.keo *{user-select:none;-webkit-user-select:none;cursor:cell}
        /* 26/08 — BỐN LỐI ĐẤU NGUỒN. Thẻ chứ không phải tab: khách trộn được giữa các Page. */
        .wz-loi{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:9px;margin-top:9px}
        .wz-lo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
               border:1px solid var(--line2);border-radius:11px;padding:11px 12px;cursor:pointer;
               background:rgba(255,255,255,.032);color:var(--text);font:inherit;transition:.14s}
        .wz-lo:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
        .wz-lo.on{border-color:var(--purple);background:rgba(139,92,246,.14);
                  box-shadow:0 0 0 1px rgba(139,92,246,.35)}
        .wz-lo .ic{font-size:15px;line-height:1}
        .wz-lo .n{font-weight:700;font-size:12.8px}
        .wz-lo .d{font-size:11px;color:var(--muted);line-height:1.35}
        #wizDsPg{max-height:36vh;overflow:auto}

        /* khối "tool làm hộ" — nền nhấn nhẹ để tách khỏi phần khách tự làm */
        .wz-tudo{border:1px solid var(--glass-bd);border-radius:12px;padding:14px 16px;
                 background:linear-gradient(135deg,rgba(139,92,246,.10),rgba(236,72,153,.06))}
        .wz-tudo b{font-family:Archivo,inherit;font-size:14px}
        .wz-tudo p{margin:5px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}

        /* ── KIỂM TRA NƠI NHẬN VIDEO ── */
        .lh-ds{display:flex;flex-direction:column;gap:7px}
        .lh-d{display:grid;grid-template-columns:20px 1fr auto;gap:9px;align-items:center;
              font-size:13.5px;padding:7px 12px;border:1px solid var(--line);border-radius:9px}
        .lh-d.ok{color:var(--ok);border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.07)}
        .lh-d.no{color:var(--warn);border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.07)}
        .lh-d span:last-child{color:var(--text)}
        .lh-d.no span:last-child{color:var(--muted)}
        .lh-nhom{display:flex;flex-direction:column;gap:6px}
        .lh-nhom>div{display:flex;align-items:center;gap:9px;font-size:12.5px}
        .lh-nhom code{flex:1;min-width:0;font-size:11px;overflow:hidden;text-overflow:ellipsis;
                      white-space:nowrap}
        .lh-gh{margin-top:16px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
               background:rgba(255,255,255,.02);font-size:12.5px;line-height:1.65;color:var(--muted)}
        .wz-md-f{padding:13px 18px;border-top:1px solid var(--line);display:flex;
                 justify-content:flex-end;gap:8px}

        /* ── MODAL CHI TIẾT PAGE ── */
        .wz-nen{position:fixed;inset:0;z-index:100015;background:rgba(6,6,14,.6);
                display:flex;align-items:center;justify-content:center;padding:22px}
        .wz-md{background:var(--card);border:1px solid var(--glass-bd);border-radius:15px;
               width:100%;max-width:580px;max-height:86vh;display:flex;flex-direction:column;
               box-shadow:0 18px 60px rgba(0,0,0,.5)}
        /* 🔴 27/08/2026 — chủ dự án: *"đổi thành nút nhấn mở cả modal to ra"*. Khối cấu hình
           dài ~1200px nhét thẳng vào hộp tạo làm hộp thành một dải cuộn dài thượt, mà việc
           tạo chỉ cần 4 ô. Nay cấu hình GẬP sau một nút; bấm thì hộp NỞ RỘNG ra cho đủ chỗ. */
        .wz-md.rong{max-width:1040px}
        .wz-cfgnut{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;
                   background:rgba(139,92,246,.10);border:1px solid rgba(139,92,246,.32);
                   border-radius:12px;padding:12px 15px;color:var(--text);font-family:inherit;
                   font-size:13.5px;font-weight:650;text-align:left;
                   transition:background .16s ease,border-color .16s ease}
        .wz-cfgnut:hover{background:rgba(139,92,246,.17);border-color:rgba(139,92,246,.5)}
        .wz-cfgnut .ic{width:28px;height:28px;border-radius:9px;flex:none;display:grid;
                       place-items:center;background:rgba(139,92,246,.22);font-size:14px}
        .wz-cfgnut .sub{display:block;font-weight:400;font-size:11.5px;color:var(--muted);
                        margin-top:2px}
        .wz-cfgnut .chev{margin-left:auto;flex:none;color:var(--muted);
                         transition:transform .18s ease}
        .wz-cfgnut.mo .chev{transform:rotate(180deg)}
        /* Nút "Lưu thành hồ sơ" nằm NGOÀI vùng `.r2-scope` nên `.r2-ghost` không với tới
           ⇒ nó rơi về nút trắng mặc định của trình duyệt (chủ dự án chụp lại). Cho nó một
           bộ áo riêng, không phụ thuộc phạm vi nào. */
        .wz-hoso{background:rgba(255,255,255,.05);border:1px solid var(--glass-bd);
                 color:var(--text);border-radius:10px;padding:7px 13px;font-size:12.5px;
                 font-weight:650;cursor:pointer;font-family:inherit;
                 transition:background .16s ease}
        .wz-hoso:hover{background:rgba(255,255,255,.10)}
        /* ══ 🔴 29/08 — KHỐI HỒ SƠ Ở CUỐI "Cách xử lý video" ════════════════════════════
           Ba chuyện khác loại phải tách ba tầng, đừng dồn một dòng xám:
             ① VIỆC LÀM ĐƯỢC  → hàng đầu: biểu tượng + tên khối + nút
             ② TRẠNG THÁI     → hàng giữa: đang có hồ sơ nào, mấy kênh dùng
             ③ CẢNH BÁO       → hàng cuối, màu hổ phách, đứng riêng
           ⚠ Class riêng, KHÔNG sửa `.wz-hoso` — 6 nút khác trong app đang dùng chung nó. */
        .hs-day{margin-top:14px;padding:13px 15px;border:1px solid var(--line);
                border-radius:12px;background:rgba(255,255,255,.025)}
        .hs-day-h{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
        .hs-day .ic{width:34px;height:34px;flex:none;display:flex;align-items:center;
                    justify-content:center;border-radius:10px;font-size:16px;
                    background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3)}
        .hs-day .tx{min-width:0;flex:1 1 240px}
        .hs-day .tx b{display:block;font-size:13.5px;font-weight:700}
        .hs-day .tx i{font-style:normal;display:block;color:var(--muted);
                      font-size:11.5px;line-height:1.5;margin-top:2px}
        .hs-day-nut{flex:none;display:inline-flex;align-items:center;gap:7px;
                    padding:9px 15px;border-radius:10px;cursor:pointer;font:inherit;
                    font-size:12.5px;font-weight:700;color:#c4b5fd;
                    background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.45);
                    transition:background .16s ease,color .16s ease}
        .hs-day-nut:hover{background:rgba(139,92,246,.3);color:#e9e2ff}
        .hs-day-ds{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line);
                   font-size:11.5px;color:var(--muted);line-height:1.9}
        .hs-day-c{margin-top:9px;font-size:11px;line-height:1.6;color:#fcd34d;
                  background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.22);
                  border-radius:9px;padding:6px 10px}
        /* Thẻ hồ sơ trong danh sách: tên khách gõ · số kênh đang dùng · ✎ ⧉ ✕ */
        .hs-vien{display:inline-flex;align-items:center;gap:6px;margin:0 6px 5px 0;
                 padding:3px 8px;border:1px solid var(--line);border-radius:999px;
                 background:rgba(255,255,255,.03);font-size:11.5px}
        .hs-vien b{font-weight:650;font-size:12px}
        .hs-vien i{font-style:normal;color:var(--muted);font-size:11px}
        .hs-vien > span{cursor:pointer;color:var(--muted);font-size:11px;padding:0 1px}
        .hs-vien > span:hover{color:var(--text)}
        .hs-vien > span.x:hover{color:var(--r2-red,#ef4444)}
        /* Hộp gán hồ sơ cho nhiều kênh — tầng 100023: trên modal cấu hình (kcf-nen 100000),
           dưới hộp chọn thư mục (100025) và hộp xác nhận (100030). */
        .hs-gan-nen{position:fixed;inset:0;z-index:100023;background:rgba(4,7,14,.62);
                    display:flex;align-items:center;justify-content:center;padding:20px}
        .hs-gan{background:var(--card);border:1px solid var(--line);border-radius:14px;
                width:min(560px,96vw);max-height:86vh;display:flex;flex-direction:column}
        .hs-gan .d{display:flex;align-items:center;gap:10px;padding:14px 18px;
                   border-bottom:1px solid var(--line)}
        .hs-gan .d b{font-size:15px}
        .hs-gan .d .x{margin-left:auto;background:none;border:0;color:var(--muted);
                      font-size:18px;cursor:pointer}
        .hs-gan .tt{padding:10px 18px 0;font-size:12.5px;color:var(--muted)}
        .hs-gan .ds{flex:1 1 auto;overflow:auto;padding:10px 18px}
        .hs-gan .ds label{display:flex;align-items:center;gap:9px;padding:7px 0;
                          border-bottom:1px solid var(--line);cursor:pointer;font-size:13.5px}
        .hs-gan .ds label:last-child{border-bottom:0}
        .hs-gan .ds input{width:16px;height:16px;flex:none;accent-color:var(--purple);cursor:pointer}
        /* 🔴 03/09/2026 — BA NHÓM trong danh sách gán mẫu (xem `hoSoGanNhieu`).
           Nhóm "đang dùng mẫu khác" nằm dưới cùng và phải TRÔNG KHÁC HẲN: tick vào đó là kéo kênh
           khỏi mẫu cũ. Trước đây mọi dòng giống hệt nhau nên không cách nào biết mình sắp làm gì. */
        .hs-gan .ds .nh{display:flex;align-items:center;gap:8px;margin:14px 0 2px;
                        font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
                        color:var(--muted)}
        .hs-gan .ds .nh:first-child{margin-top:2px}
        .hs-gan .ds .nh.canh{color:var(--warn,#f59e0b)}
        .hs-gan .ds label span{min-width:0;display:flex;flex-direction:column;gap:1px}
        .hs-gan .ds label i{font-style:normal;font-size:11px;color:var(--warn,#f59e0b);opacity:.95}
        .hs-gan .ds label.khac{background:rgba(245,158,11,.06);border-radius:8px;
                               padding:7px 9px;margin:3px 0;border-bottom:0}
        .hs-gan .ds label.khac:hover{background:rgba(245,158,11,.12)}
        .hs-gan .c{display:flex;align-items:center;gap:12px;padding:13px 18px;
                   border-top:1px solid var(--line)}
        .hs-gan .c span{flex:1 1 auto;font-size:11.5px;color:var(--warn,#f59e0b);line-height:1.45}
        /* ══ 27/08/2026 — NGUỒN CONTENT Ở BƯỚC TẠO ═══════════════════════════════════════
           Chủ dự án: *"phần tạo kênh là tìm nguồn trước (link kênh từ từ khoá, link kênh có sẵn)
           rồi mới tạo kênh (hiện metadata như phần theo dõi kênh luôn)"* + *"đem lại phần kênh
           nguồn nhưng chỉ lấy giao diện và 1 vài logic"*.
           Thẻ kênh dưới đây mượn ĐÚNG hình thức thẻ tab "Kênh nguồn" (ảnh tròn · tên đậm · nền
           tảng · N video) — cùng một thứ thì phải nhìn giống nhau, kẻo khách tưởng hai khái niệm. */
        /* 🔴 03/09/2026 — HỘP "THÊM KÊNH" TOÀN MÀN HÌNH + HAI TAB (chủ dự án: *"cho phần kênh và
           phần tìm kênh toàn màn hình, chia thành 2 tab"* · *"để phần kênh không bị quá ít không
           gian"*). Hộp cũ rộng 580px: danh sách kênh tìm được chỉ hiện 2-3 dòng rồi phải cuộn,
           trong khi đó CHÍNH LÀ thứ khách cần nhìn để tick chọn. Nay chế độ TẠO dùng gần trọn màn,
           và khay kết quả chiếm hết chỗ còn thừa thay vì bị dồn xuống đáy. */
        /* Chủ dự án (03/09, lượt 2): *"không cần quá to mà tôi cần chia ra làm 2 bên thay vì dọc
           1 dải"*. Bản đầu chỉ phóng to hộp — nội dung vẫn xếp DỌC nên form đẩy danh sách xuống
           dưới màn, phải cuộn qua lại giữa "ô lọc" và "kết quả lọc ra". Nay HAI CỘT:
             trái  = điều kiện tìm (đứng yên, không cuộn theo)
             phải  = danh sách kênh — thứ khách nhìn để tick, chiếm hết chiều cao còn lại
           Kích thước vừa phải (1280px) chứ không chiếm trọn màn — to quá thì mắt phải quét xa. */
        .wz-md.wz-tao-full{max-width:min(1280px,94vw);width:94vw;height:88vh;max-height:88vh}
        .wz-md.wz-tao-full .wz-md-b{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
        .wz-md.wz-tao-full #wzNcVung{flex:1 1 auto;min-height:0;display:flex;
              flex-direction:column}
        .wz-md.wz-tao-full #wzNcPn{flex:1 1 auto;min-height:0;display:flex}
        /* ⚠ CHIA CỘT PHẢI ĐÚNG CHỖ. Lượt đầu tôi chia ở `#wzNcVung` giữa `#wzNcPn` và `#wzNcKhay`
           — SAI: `#wzNcKhay` chỉ là BIÊN NHẬN "kênh đã tạo trong lượt này", còn danh sách kênh
           TÌM ĐƯỢC nằm ở `#wzNcKq` BÊN TRONG `#wzNcPn`. Kết quả: cột phải trống trơn còn danh
           sách vẫn dồn ở cột trái (thấy ngay trên ảnh chụp). Chia ở `.wz-ngpn` mới đúng. */
        .wz-md.wz-tao-full .wz-ngpn{flex:1 1 auto;min-height:0}
        .wz-md.wz-tao-full .wz-ngpn.hai-cot{display:grid;
              /* 03/09 (lượt 4) — chủ dự án: *"chia đôi luôn"*. Trước là 360px / phần còn lại;
                 nay đúng 50-50. Cột trái rộng ra thì các hàng "Lọc thêm / người theo dõi / lượt
                 thích" thôi phải gãy làm hai dòng. */
              grid-template-columns:1fr 1fr;column-gap:20px;
              /* `align-content:start` — KHÔNG có nó thì grid chia đều chiều cao thừa cho MỌI hàng,
                 mà chiều cao tổng do cột phải (`#wzNcKq`, span hết) quyết định ⇒ các ô bên trái bị
                 kéo giãn, hở ~190px giữa "Từ khoá" và "Nền tảng" (đo trên ảnh chụp). */
              align-items:start;align-content:start;row-gap:9px}
        .wz-md.wz-tao-full .wz-ngpn.hai-cot>*{grid-column:1;min-width:0}
        /* ⚠ `grid-row:1/-1` KHÔNG dùng được ở đây: grid này không khai `grid-template-rows` nên
           mọi hàng là IMPLICIT, mà `-1` chỉ trỏ tới đường cuối của grid TƯỜNG MINH ⇒ nó thành
           `1/1`, tức cột phải chỉ chiếm HÀNG 1 và ép hàng đó cao bằng mình (đo được: hàng 1 cao
           276px trong khi ô "Từ khoá" chỉ 82px ⇒ hở 194px trước "Nền tảng"). Dùng `span` thì
           đúng với hàng ngầm. */
        .wz-md.wz-tao-full .wz-ngpn.hai-cot>#wzNcKq{grid-column:2;grid-row:1/span 30;
              align-self:stretch;min-height:0;overflow-y:auto;
              /* `.wz-ngkq` gốc ghim `max-height:250px` — hợp lý hồi nó nằm DƯỚI form (chỉ là cái
                 khay phụ), nhưng ở cột phải nó là NHÂN VẬT CHÍNH: giữ trần 250px thì thẻ hàng thứ
                 hai bị cắt ngang trong khi bên dưới còn trống cả nửa màn (thấy trên ảnh chụp).
                 ⚠ Nhưng bỏ trần HẲN thì nó cao 5734px và kéo dài cả hộp — vì chuỗi `min-height:0`
                   đứt ở HAI div bọc không class trong `_wizMan1`, nên `overflow-y:auto` không có
                   mốc nào để cuộn. Neo theo chiều cao HỘP (88vh) trừ phần đầu cố định (~250px):
                   không phụ thuộc cấu trúc DOM ở trên, nên không vỡ khi ai đó sửa mấy div bọc đó. */
              max-height:calc(88vh - 250px);
              border-left:1px solid var(--line);border-top:0;padding-left:20px;
              padding-top:0;margin-top:0}
        /* Cột trái hẹp ⇒ hàng ngang của form phải xuống dòng thay vì tràn ra ngoài. */
        .wz-md.wz-tao-full .wz-ngpn.hai-cot .wz-o{flex-wrap:wrap;row-gap:8px}
        .wz-md.wz-tao-full .wz-ngpn.hai-cot textarea{min-width:0;width:100%}
        .wz-md.wz-tao-full #wzNcKhay{flex:none;margin-top:10px}
        /* ══ 03/09/2026 — THẺ KÊNH trong kết quả tìm ═══════════════════════════════════════════
           Lưới tự co: `auto-fill` + `minmax(190px,1fr)` nên cột trái rộng hay hẹp, cửa sổ to hay
           nhỏ, thẻ đều tự xếp lại — không phải đặt số cột cứng rồi vỡ ở một cỡ màn nào đó. */
        /* min 150px: ở cột phải rộng ~597px (sau khi chia đôi) cho ra 3 thẻ/hàng. Để 190px thì chỉ
           được 2 thẻ và mỗi thẻ rộng 275px — thừa chỗ trống hai bên ảnh đại diện 56px. */
        .wz-ngkq .wz-lthe{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
                          gap:10px;margin-top:4px}
        .wz-kthe{position:relative;display:flex;flex-direction:column;align-items:center;
                 gap:6px;padding:13px 11px 11px;border:1px solid var(--line);border-radius:13px;
                 background:rgba(255,255,255,.03);cursor:pointer;text-align:center;
                 transition:border-color .15s ease,background .15s ease}
        .wz-kthe:hover{background:rgba(255,255,255,.06);border-color:rgba(139,92,246,.5)}
        /* Ô tick nằm GÓC thẻ: bấm đâu trong thẻ cũng tick được (cả thẻ là `<label>`), ô vuông chỉ
           để MẮT biết thẻ nào đang chọn — không bắt ai nhắm vào nó. */
        .wz-kthe input[type=checkbox]{position:absolute;top:9px;left:9px;width:17px;height:17px;
                 accent-color:var(--purple);cursor:pointer;margin:0}
        .wz-kthe:has(input:checked){border-color:var(--purple);background:rgba(139,92,246,.13)}
        .wz-kthe img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
                     background:rgba(255,255,255,.07)}
        .wz-kthe .t{font-size:12.5px;font-weight:650;color:var(--text);line-height:1.3;
                    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
                    overflow:hidden;word-break:break-word}
        .wz-kthe .s{font-size:10.5px;color:var(--muted);line-height:1.4}
        .wz-kthe .s.dg{color:var(--ok,#22c55e);font-weight:650}
        /* Đã gắn rồi thì mờ đi — còn ở đó để đối chiếu, nhưng không tranh chỗ với việc còn lại. */
        .wz-kthe.dagan{opacity:.5;cursor:default}
        .wz-kthe.dagan:hover{background:rgba(255,255,255,.03);border-color:var(--line)}
        /* Màn hẹp ⇒ về lại MỘT cột: hai cột cùng chật thì tệ hơn một cột rộng. */
        @media (max-width:1080px){
          .wz-md.wz-tao-full .wz-ngpn.hai-cot{display:block}
          .wz-md.wz-tao-full .wz-ngpn.hai-cot>#wzNcKq{border-left:0;padding-left:0;margin-top:10px}
        }
        .wz-ngtab{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
        .wz-ngtab button{background:rgba(255,255,255,.05);border:1px solid var(--glass-bd);
                 color:var(--text);border-radius:10px;padding:8px 14px;font-size:12.5px;
                 font-weight:650;cursor:pointer;font-family:inherit;
                 transition:background .16s ease,border-color .16s ease}
        .wz-ngtab button:hover{background:rgba(255,255,255,.1)}
        .wz-ngtab button.mo{background:rgba(139,92,246,.16);border-color:rgba(139,92,246,.45)}
        .wz-ngpn{border:1px solid var(--line);border-radius:12px;padding:12px 13px;
                 background:rgba(0,0,0,.16);margin-bottom:11px}
        /* Thẻ CO GIÃN chia đều hàng (28/08). Trước đây ghim `width:158px`: một nguồn thì lọt
           thỏm bên trái, hai nguồn thì hai ô nhỏ dính nhau chừa mảng trống to bên phải. Trần
           260px để một nguồn không bị kéo dài hết hàng thành một dải. */
        .wz-ngkhay{display:flex;flex-wrap:wrap;gap:11px;align-items:stretch}
        .wz-ngthe{position:relative;flex:1 1 158px;max-width:260px;min-width:0;
                 background:var(--glass);
                 border:1px solid var(--line);border-radius:13px;padding:12px 10px;
                 text-align:center;display:flex;flex-direction:column;justify-content:flex-start}
        .wz-ngthe .anh{width:52px;height:52px;border-radius:50%;object-fit:cover;
                 margin:0 auto 7px;display:block;background:rgba(255,255,255,.07)}
        .wz-ngthe .ten{font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;
                 text-overflow:ellipsis}
        .wz-ngthe .md{font-size:11px;color:var(--muted);margin-top:3px}
        .wz-ngthe .bo{position:absolute;top:5px;right:6px;background:none;border:0;
                 color:var(--muted);cursor:pointer;font-size:13px;padding:2px 5px;
                 border-radius:6px;font-family:inherit}
        .wz-ngthe .bo:hover{background:rgba(240,80,110,.18);color:#f0506e}
        .wz-ngkq{max-height:250px;overflow:auto;margin-top:9px;
                 border-top:1px solid var(--line);padding-top:8px}
        .wz-ngkq .d{display:flex;align-items:center;gap:9px;padding:6px 4px;
                 border-bottom:1px solid rgba(255,255,255,.05)}
        .wz-ngkq .d img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;
                 background:rgba(255,255,255,.07)}
        .wz-ngkq .d .t{flex:1;min-width:0;font-size:12.5px;overflow:hidden;
                 text-overflow:ellipsis;white-space:nowrap}
        .wz-ngkq .d .s{font-size:11px;color:var(--muted);flex:none}
        .wz-ngkq .d button{flex:none;background:rgba(139,92,246,.16);
                 border:1px solid rgba(139,92,246,.4);color:var(--text);border-radius:8px;
                 padding:4px 10px;font-size:11.5px;cursor:pointer;font-family:inherit}
        .wz-ngkq .d button[disabled]{opacity:.45;cursor:default}
        .wz-md-h{display:flex;align-items:center;gap:11px;padding:16px 18px;
                 border-bottom:1px solid var(--line)}
        .wz-md-h .ch{font-size:14px}
        .wz-md-h b{font-size:15.5px}
        .wz-x{margin-left:auto;background:none;border:0;color:var(--muted);font-size:16px;
              cursor:pointer;padding:2px 6px;border-radius:6px;font-family:inherit}
        .wz-x:hover{background:rgba(255,255,255,.08);color:var(--text)}
        .wz-md-b{padding:17px 18px 20px;overflow-y:auto}
        .wz-md-b h6{font:600 10.5px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:1.1px;
                    text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
        .wz-md-b h6:first-child{margin-top:0}
        .wz-ng>div{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.5px}
        .wz-ng code{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .wz-day{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
        .wz-day>div{flex:1;min-width:88px;border:1px solid var(--line);border-radius:10px;
                    padding:10px 12px;text-align:center;background:rgba(255,255,255,.02)}
        .wz-day b{display:block;font:700 19px/1.2 system-ui;font-variant-numeric:tabular-nums}
        .wz-day span{font-size:11px;color:var(--muted)}
        .wz-day .ar{flex:none;min-width:0;border:0;background:none;color:var(--muted);padding:0}
        .wz-tm>div{display:flex;align-items:center;gap:9px;padding:7px 0;flex-wrap:wrap}
        .wz-tm .l{font-size:12px;color:var(--muted);min-width:104px}
        .wz-tm code{flex:1;min-width:150px;font-size:11.5px;overflow:hidden;
                    text-overflow:ellipsis;white-space:nowrap}
        .wz-tm .wz-nut{padding:4px 11px;font-size:12px}

        /* Máy khách bật "giảm chuyển động" thì bỏ hết hiệu ứng — đây là app chạy nhiều giờ. */
        @media (prefers-reduced-motion:reduce){
          .wz-hop{animation:none}
          .wz-cham{animation:none}
          .wz-nut,.wz-c .n{transition:none}
        }
        #v-quytrinh>h1.page,#v-quytrinh>.sub,#v-quytrinh>.wf-bar,#v-quytrinh>.wf-lenh,
        #v-quytrinh>.wf-tomtat,#v-quytrinh>.wf-strip,#v-quytrinh>.wf-kmoi,
        #v-quytrinh>.wf-sk{flex:none}
        /* ═══ DẢI SỨC KHOẺ — trả lời "đang rảnh hay đã chết?" ═══
           Bình thường CHỈ MỘT DÒNG: hiện diện thường trực mới là nhịp tim; ẩn khi ổn thì
           khách không học được là nó có, và lúc đỏ lên lại tưởng lỗi giao diện. */
        .wf-sk{margin-top:10px;padding:8px 13px;border:1px solid var(--line);border-radius:11px;
               background:var(--card);border-left:3px solid #16a34a;font-size:12.5px;line-height:1.55}
        .wf-sk.vang{border-left-color:var(--warn,#f59e0b)}
        .wf-sk.do{border-left-color:#ef4444;background:rgba(239,68,68,.06)}
        .wf-sk-t{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
        .wf-sk-t b{color:var(--text)}
        .wf-sk-ph{color:var(--muted);font-size:11.5px;margin-left:auto}
        .wf-sk-ds{margin-top:7px;display:flex;flex-direction:column;gap:5px}
        .wf-sk-i{display:flex;gap:8px;align-items:flex-start}
        .wf-sk-i .ic{flex:none}
        .wf-sk-i .gy{color:var(--muted);display:block;font-size:11.5px}
        .wf-tdauto{margin-top:11px;padding:10px 13px;border:1px solid var(--line);border-radius:11px;
                   background:var(--card2,#1b2236);font-size:12.5px;line-height:1.6}
        .wf-tdauto label{display:flex;gap:9px;align-items:flex-start;cursor:pointer}
        .wf-tdauto input{width:17px;height:17px;flex:none;margin-top:1px;cursor:pointer;
                   accent-color:var(--accent2,#8b5cf6)}
        .wf-tdauto b{color:var(--text)}
        .wf-tdauto .gy{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
        /* ── TRỢ LÝ SETUP: bong bóng + panel nổi (24/08) ───────────────────────────── */
        .tl-bong{position:fixed;right:22px;bottom:22px;z-index:99990;width:56px;height:56px;
          border-radius:50%;border:none;cursor:pointer;font-size:24px;color:#fff;
          background:linear-gradient(135deg,#7c5cff,#5b8cff);box-shadow:0 6px 22px rgba(92,76,255,.45)}
        .tl-bong:hover{transform:translateY(-2px)}
        .tl-bong .cham{position:absolute;top:-2px;right:-2px;width:14px;height:14px;
          border-radius:50%;background:#ff5a6e;border:2px solid var(--bg,#0b0f1a)}
        /* `right:22px` + `max-width` đủ để KHÔNG lọt ra ngoài mép phải khi cửa sổ hẹp
           — gặp thật 24/08: nút Gửi bị cắt mất một nửa. */
        .tl-panel{position:fixed;right:16px;bottom:88px;z-index:99991;width:392px;
          max-width:calc(100vw - 32px);height:520px;max-height:calc(100vh - 130px);
          display:flex;flex-direction:column;background:var(--card,#121a2b);
          border:1px solid var(--line,#243049);border-radius:16px;overflow:hidden;
          box-shadow:0 18px 50px rgba(0,0,0,.55)}
        .tl-dau{display:flex;align-items:center;gap:9px;padding:12px 14px;
          border-bottom:1px solid var(--line,#243049)}
        .tl-dau b{font-size:14px}
        .tl-dau .x{margin-left:auto;background:none;border:none;color:var(--muted);
          font-size:18px;cursor:pointer;line-height:1}
        .tl-than{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
        .tl-m{max-width:86%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.5;
          white-space:pre-wrap;word-break:break-word}
        .tl-m.ai{background:rgba(124,92,255,.13);border:1px solid rgba(124,92,255,.28);
          align-self:flex-start;border-bottom-left-radius:4px}
        .tl-m.khach{background:var(--bg2,#1a2237);align-self:flex-end;border-bottom-right-radius:4px}
        .tl-m.loi{background:rgba(255,90,110,.12);border:1px solid rgba(255,90,110,.34);
          align-self:flex-start}
        .tl-nut{align-self:flex-start;margin-top:-2px;padding:8px 14px;border-radius:10px;
          border:none;background:linear-gradient(135deg,#7c5cff,#5b8cff);color:#fff;
          font-weight:650;font-size:13px;cursor:pointer;font-family:inherit}
        .tl-chan{border-top:1px solid var(--line,#243049);padding:10px;display:flex;gap:8px}
        .tl-chan input{flex:1;background:var(--bg2,#12141f);border:1px solid var(--line,#3a3f58);
          border-radius:10px;padding:9px 12px;color:var(--text,#fff);font-size:13px;
          font-family:inherit}
        .tl-chan button{background:#7c5cff;border:none;border-radius:10px;color:#fff;
          padding:0 14px;font-weight:650;cursor:pointer;font-family:inherit}
        .tl-goi{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px}
        .tl-goi button{background:var(--bg2,#1a2237);border:1px solid var(--line,#2a3450);
          color:var(--text,#dfe6f5);border-radius:14px;padding:6px 11px;font-size:12px;
          cursor:pointer;font-family:inherit}
        .wf-nhip{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12.5px;
                 color:var(--muted);padding:8px 0 2px}
        .wf-nhip b{color:var(--text)}
        .wf-nhip input{width:58px;background:var(--card,#141a2b);border:1px solid var(--line);
                 border-radius:8px;color:var(--text);padding:5px 8px;font:inherit;font-size:12.5px;
                 text-align:center;outline:none}
        .wf-nhip input:focus{border-color:var(--accent2,#8b5cf6)}
        /* ĐO 23/08: hàng nhịp KHÔNG có rule cho `select` ⇒ nó ăn style select toàn cục,
           cao 44px trong khi ô số chỉ 23px. Cụm `giao cho <select>` vượt chỗ ⇒ nhãn
           "giao cho" bị đẩy xuống DÒNG RIÊNG, gãy căn hàng cả dải. Khóa cụm lại
           bằng inline-flex + nowrap, và cho mọi ô cùng chiều cao 28px. */
        /* ⚠ `:not(.hidden)` là BẮT BUỘC: `.wf-nhip>span` có độ ưu tiên (0,0,2,1) CAO HƠN
           `.hidden` (0,0,1,0) ⇒ viết trần là ÉP HIỆN luôn hai ô "Nâng cao", phá đúng
           thiết kế "N cơ bản · M/K gập lại". Đã dính 23/08 ngay khi thêm rule này. */
        .wf-nhip>span:not(.hidden){display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
        .wf-nhip input{height:28px;box-sizing:border-box}
        .wf-nhip select{height:28px;box-sizing:border-box;background:var(--card,#141a2b);
                 border:1px solid var(--line);border-radius:8px;color:var(--text);
                 padding:0 8px;font:inherit;font-size:12.5px;outline:none;cursor:pointer}
        .wf-nhip select:focus{border-color:var(--accent2,#8b5cf6)}
        /* "▾ Nâng cao" cao 16px — dưới ngưỡng bấm 24px. */
        .wf-nhip a{display:inline-flex;align-items:center;height:28px;padding:0 4px;
                 border-radius:7px;text-decoration:none}
        .wf-nhip a:hover{background:rgba(255,255,255,.06)}
        .wf-hl-s.xau{color:var(--warn,#f59e0b)}
        .wf-hl-s.tot{color:var(--ok,#16a34a)}
        .wf-hl-s b{color:var(--text)}
        .chip-add.wf-hl-chinh{background:linear-gradient(120deg,#7c5cff,#ff3d8a);border:0;color:#fff;
                 font-weight:700}
        /* ═══ CHỌN NHIỀU KÊNH (ngoài danh sách) ═══ */
        .wf-ksel-xoa{border-color:rgba(255,90,110,.45)!important;color:#ff8fa0!important}
        .wf-ksel-xoa:hover{background:rgba(255,90,110,.14)!important}
        .wf-ksel{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 0 2px}
        .wf-ksel .n{font-size:12px;color:var(--muted)}
        .wf-ksel .n b{color:var(--text)}
        .wf-kchk{width:16px;height:16px;cursor:pointer;accent-color:var(--accent2,#8b5cf6);flex:none}
        .wf-kenh-i.chon{border-color:var(--accent2,#8b5cf6)}

        /* ═══ MODAL CẤU HÌNH KÊNH — bộ giao diện RIÊNG ═══ */
        /* 🔴 TẦNG MODAL — luật: hộp thoại mở TỪ TRONG một modal phải NẰM TRÊN modal đó.
             100000 modal nền (.kcf-nen) · 100010 hộp chọn thư mục (#fdModal) · 100020 promptAn
             · 100030 vcHoi (xác nhận LUÔN trên cùng).
             Đã dính 23/08: #fdModal để z-index **90** ⇒ bấm "Chọn…" trong Cài đặt kênh thì hộp
             chọn thư mục mở PHÍA SAU ⇒ nhìn y hệt "nút không bấm được", không lỗi nào báo.
             vcHoi để 130 cũng bị che y hệt (ví dụ bảng "Đã chia xong" của nút Đấu). */
        .kcf-nen{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
                 padding:24px;background:rgba(4,6,14,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
        .kcf-hop{width:min(1020px,97vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
                 background:var(--card,#141a2b);border:1px solid var(--line);border-radius:16px;
                 box-shadow:0 28px 70px rgba(0,0,0,.6)}
        .kcf-dau{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}
        .kcf-dau h3{margin:0;font-size:16px;font-weight:800;display:flex;align-items:center;gap:9px}
        .kcf-dem{font-size:12px;color:var(--muted);background:rgba(255,255,255,.05);
                 border:1px solid var(--line);border-radius:999px;padding:4px 11px}
        .kcf-dem b{color:var(--accent2,#8b5cf6)}
        .kcf-x{margin-left:auto;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
               background:transparent;color:var(--muted);cursor:pointer;font-size:15px}
        .kcf-x:hover{color:var(--text);border-color:var(--muted)}
        .kcf-than{flex:1;display:grid;grid-template-columns:minmax(280px,1fr) minmax(340px,1.15fr);
                  min-height:0;overflow:hidden}
        .kcf-trai{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
        .kcf-tim{padding:12px 14px 10px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line)}
        .kcf-tim input.o{width:100%;box-sizing:border-box;background:var(--card2,#1b2236);border:1px solid var(--line);
                 border-radius:10px;color:var(--text);padding:9px 12px;font:inherit;font-size:13px;outline:none}
        .kcf-tim input.o:focus{border-color:var(--accent2,#8b5cf6)}
        .kcf-nut{display:flex;gap:6px;flex-wrap:wrap}
        .kcf-nut button{background:var(--card2,#1b2236);border:1px solid var(--line);color:var(--text);
                 font-size:11.5px;padding:5px 11px;border-radius:999px;cursor:pointer}
        .kcf-nut button:hover{border-color:var(--accent2,#8b5cf6)}
        .kcf-ds{flex:1;overflow:auto;padding:8px}
        .kcf-h{display:flex;gap:10px;align-items:center;padding:9px 11px;border-radius:10px;cursor:pointer;
               border:1px solid transparent}
        .kcf-h:hover{background:rgba(255,255,255,.035)}
        .kcf-h.on{background:rgba(139,92,246,.12);border-color:var(--accent2,#8b5cf6)}
        .kcf-h input{width:16px;height:16px;accent-color:var(--accent2,#8b5cf6);cursor:pointer;flex:none}
        .kcf-h .ten{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .kcf-h .ten small{display:block;color:var(--muted);font-size:11px;overflow:hidden;
                 text-overflow:ellipsis;white-space:nowrap}
        .kcf-tt{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.02em;border-radius:999px;
                padding:3px 9px;border:1px solid}
        .kcf-tt.du{color:#3ddc84;border-color:rgba(61,220,132,.45);background:rgba(61,220,132,.09)}
        .kcf-tt.thieu{color:#ffb020;border-color:rgba(255,176,32,.45);background:rgba(255,176,32,.09)}
        .kcf-rong{padding:26px 14px;text-align:center;color:var(--muted);font-size:12.5px}
        .kcf-loai{flex:none;font-size:10px;font-weight:700;letter-spacing:.03em;border-radius:6px;
                  padding:2px 7px;border:1px solid var(--line);color:var(--muted)}
        .kcf-loai.kenh{color:#7c5cff;border-color:rgba(124,92,255,.5)}
        .kcf-loai.tk{color:#00d4ff;border-color:rgba(0,212,255,.45)}
        .kp-nen{display:flex;gap:7px;flex-wrap:wrap}
        /* Dải "đã đăng nhập chưa" — chỉ BÁO, không chặn. Màu theo đúng mức chắc chắn:
           `out` cam (chắc chắn chưa) · `unknown` xám (chưa rõ) — đừng tô đỏ ca không chắc. */
        .kp-dn{font-size:11.5px;padding:3px 9px;border-radius:999px;white-space:nowrap;
               border:1px solid var(--line,#2a3450);color:var(--muted)}
        .kp-dn.ok{color:var(--ok,#3ddc84);border-color:rgba(61,220,132,.35);
               background:rgba(61,220,132,.08)}
        .kp-dn.xau{color:var(--warn,#ffb020);border-color:rgba(255,176,32,.4);
               background:rgba(255,176,32,.09)}
        .kp-dn.na{color:var(--muted)}
        .kp-dn.mo{color:var(--muted);border-style:dashed}
        .kp-nen label{display:flex;align-items:center;gap:7px;background:var(--card,#141a2b);
                 border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer;
                 font-size:12.5px;user-select:none}
        .kp-nen label:hover{border-color:var(--accent2,#8b5cf6)}
        .kp-nen label:has(input:checked){background:rgba(139,92,246,.16);
                 border-color:var(--accent2,#8b5cf6);font-weight:700}
        .kp-nen input{width:15px;height:15px;accent-color:var(--accent2,#8b5cf6);cursor:pointer}
        .kp-nen .khong{opacity:.5}
        .kp-tab{display:flex;flex-direction:column;gap:6px;padding:9px 14px 10px;
                border-bottom:1px solid var(--line)}
        .kp-tab-h{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
        .kp-tab-h>b{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
                    min-width:62px}
        .kp-chip{background:var(--card2,#1b2236);border:1px solid var(--line);color:var(--muted);
                 font-size:11.5px;padding:4px 11px;border-radius:999px;cursor:pointer;white-space:nowrap}
        .kp-chip:hover{border-color:var(--accent2,#8b5cf6);color:var(--text)}
        .kp-chip.on{background:rgba(139,92,246,.16);border-color:var(--accent2,#8b5cf6);color:var(--text);
                    font-weight:700}
        .kp-chip i{font-style:normal;opacity:.65;margin-left:4px;font-variant-numeric:tabular-nums}
        .kp-av{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover;background:var(--card2)}
        .kp-vi{display:block;font-size:11.5px;color:var(--accent2,#8fd4ff);opacity:.92;margin-top:1px;cursor:help}
        .kp-tk{font-size:10.5px;color:var(--muted)}
        .kp-daco{flex:none;font-size:10px;font-weight:700;border-radius:6px;padding:2px 7px;
                 border:1px solid rgba(61,220,132,.45);color:#3ddc84;background:rgba(61,220,132,.09)}
        .kp-log{max-height:120px;overflow:auto;font-size:11.5px;color:var(--muted);line-height:1.7;
                background:var(--card,#141a2b);border:1px solid var(--line);border-radius:10px;
                padding:8px 11px;margin-top:9px;white-space:pre-wrap}
        .kcf-so{flex:none;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
        .kcf-so b{color:var(--text)}
        /* Đệm đáy 22px: thiếu nó thì thẻ cuối bị cắt ngang ngay mép vùng cuộn — ảnh chủ
           dự án 29/08, hàng "Kiểu đăng" của thẻ nhóm mất nửa dưới. */
        .kcf-phai{overflow:auto;padding:14px 18px 22px}
        /* ══ ĐẤU NỐI (28/08) — (kênh × ngôn ngữ) ⟶ nơi nhận của phần mềm đăng bài ══════════
           Dùng lại khung `.kcf-*`; ở đây chỉ là RUỘT hai cột. Cột trái là VIỆC (dòng cần đấu),
           cột phải là KHO (nơi nhận đọc từ LoHa). Không có hộp thoại chọn thư mục trên đường chính. */
        .dn-h{display:flex;align-items:center;gap:9px;padding:9px 11px;border-bottom:1px solid var(--line);
              font-size:12.5px}
        .dn-h.x{background:rgba(34,197,94,.07)}
        .dn-h{flex-wrap:wrap}
        .dn-h .k{min-width:0;flex:1}
        .dn-h .k b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        /* Câu giải thích chiếm CẢ HÀNG DƯỚI. Ép nó vào cột hẹp cạnh ô chọn thì một câu tiếng Việt
           tử tế bị bẻ làm 4 dòng, hàng cao gấp đôi, và nút bên phải bị cắt mất chữ. */
        .dn-say{flex-basis:100%;color:var(--muted);font-size:11.5px;line-height:1.5;margin-top:1px}
        .dn-say b{color:var(--text);font-weight:600}
        .dn-h select{min-width:200px;flex:none}
        .dn-bung{white-space:nowrap;padding:0 9px;width:auto;font-size:11.5px}
        .dn-h select{max-width:210px;background:var(--card2,#1b2236);border:1px solid var(--line);
              border-radius:9px;color:var(--text);padding:7px 9px;font:inherit;font-size:12.5px;outline:none}
        /* Đề xuất của ⚡ — viền tím, để khách thấy NGAY cái gì sắp đổi trước khi bấm Áp dụng. */
        .dn-h select.dx{border-color:var(--accent2,#8b5cf6);box-shadow:0 0 0 2px rgba(139,92,246,.16)}
        .dn-h select.trong{border-color:rgba(239,68,68,.55)}
        .dn-lg{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;
               background:rgba(139,92,246,.16);color:#c4b5fd;text-transform:uppercase}
        .dn-nn{border:1px solid var(--line);border-radius:11px;padding:9px 11px;margin-bottom:8px;
               background:var(--card2,#1b2236);display:flex;align-items:center;gap:9px}
        .dn-nn.doi{border-color:rgba(245,158,11,.5)}      /* 0 kênh nuôi = trang đang đói */
        .dn-nn .t{min-width:0;flex:1}
        /* 🔴 29/08 HƯỚNG A — hai thứ vốn ở cột trái nay về thẻ TRANG, vì cả hai đều là chuyện
           của một trang cụ thể chứ không phải của "thứ tiếng" nói chung. */
        .dn-tron2{flex:1 1 100%;font-size:11.5px;line-height:1.55;color:#fcd34d;margin-top:4px}
        .dn-gan-n{flex:none;white-space:nowrap;background:rgba(139,92,246,.16);
                  border:1px solid rgba(139,92,246,.42);color:#c4b5fd;border-radius:9px;
                  padding:6px 10px;font:inherit;font-size:11.5px;cursor:pointer}
        .dn-gan-n:hover{background:rgba(139,92,246,.3)}
        /* 🔴 03/09/2026 — NÚT "Gán kênh" DUY NHẤT của thẻ trang, thay cho bộ ba cũ
           (nút ⚙ Gán nhiều kênh… · `<select>` nhỏ · nút ＋ thêm kênh). Cùng tông tím với
           `.dn-gan-n` để khách nhận ra ngay là "mở danh sách kênh", nhưng đứng trong hàng
           `Kênh nuôi:` cạnh các chip — đúng chỗ mắt đang nhìn khi hỏi "trang này ai nuôi". */
        .dn-chon-n{flex:none;white-space:nowrap;background:rgba(139,92,246,.16);
                   border:1px solid rgba(139,92,246,.42);color:#c4b5fd;border-radius:9px;
                   padding:5px 11px;font:inherit;font-size:12px;cursor:pointer}
        .dn-chon-n:hover{background:rgba(139,92,246,.3)}
        /* ── KÊNH NUÔI ở từng trang (28/08 khuya — chọn ở phía TRANG) ── */
        .dn-nn{flex-wrap:wrap}
        .dn-nuoi{flex:1 1 100%;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
                 margin-top:5px;font-size:12.5px}
        .dn-nuoi .nh{font-size:11.5px;color:var(--muted);white-space:nowrap}
        .dn-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 6px 2px 9px;
                 border-radius:999px;border:1px solid var(--line);
                 background:rgba(139,92,246,.10);font-size:12px;max-width:168px}
        /* 🔴 29/08 (ảnh chủ dự án) — TRẦN CHIP TỪ 230px XUỐNG 168px. Đo cảnh thật: nhãn
           "Kênh nuôi:" đã ăn 75px nên dòng đầu chỉ nhét nổi MỘT chip 230px ⇒ 4 kênh xuống
           3 dòng ⇒ thẻ cao 192px trong khi thẻ bên cạnh 104px ⇒ hố trống 88px (lưới bắt cả
           hàng cao bằng thẻ cao nhất). Hẹp chip là hạ luôn cả hai cái đó.
           ⚠ Tên bị cắt thì `title` trên `<b>` vẫn giữ nguyên tên đầy đủ để rê chuột đọc. */
        .dn-chip b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .dn-chip button{border:0;background:none;color:var(--muted);cursor:pointer;
                        font-size:13px;line-height:1;padding:0 2px}
        .dn-chip button:hover{color:#ef4444}
        .dn-nuoi select{flex:1 1 170px;min-width:0;max-width:290px}
        .dn-nuoi .them{font-size:12px;padding:2px 8px}
        .dn-nhan{flex:1 1 100%;font-size:11.5px;color:#f59e0b;margin-top:3px}
        /* ── ĐẦU TAB: cách xử lý video gói vào MỘT HÀNG + một nút (28/08 khuya) ── */
        .xl-gon{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 16px;
                border:1px solid var(--line);border-radius:13px;background:var(--card2,#1b2236);
                margin:0 0 12px}
        .xl-gon .tr{min-width:0;flex:1 1 320px}
        /* ⚠ PHẢI là con TRỰC TIẾP. `.tr b` nhắm cả những <b> nằm trong CÂU ("dùng chung",
           "mọi kênh", "✂ Tách riêng") ⇒ mỗi chữ in đậm rơi xuống một dòng, hàng "gọn" cao
           353px thay vì ~90px. Đo được, và ảnh chụp thấy rõ. */
        .xl-gon .tr > b{font-size:15px;display:block;margin-bottom:2px}
        .xl-gon .tr .xt{font-size:12px;color:var(--muted);line-height:1.5;display:block}
        .xl-gon .chip{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
        .xl-gon .wz-b{font-size:11.5px}
        .xl-gon .nut{flex:none;display:flex;gap:8px;flex-wrap:wrap}
        /* Nhóm có HAI kiểu đăng — công tắc ngay trên hàng nhóm (28/08 khuya). */
        .dn-kieu{flex:1 1 100%;display:flex;align-items:center;gap:6px;margin-top:5px;font-size:12px}
        .dn-kieu .nh{font-size:11.5px;color:var(--muted);white-space:nowrap}
        .dn-kieu .seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
        .dn-kieu .seg button{border:0;background:none;color:var(--muted);font:inherit;font-size:12px;
                             padding:3px 9px;cursor:pointer;white-space:nowrap}
        .dn-kieu .seg button.on{background:var(--accent2,#8b5cf6);color:#fff;font-weight:600}
        .dn-nn .t b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .dn-nn .t span{color:var(--muted);font-size:11.5px}
        /* 🔴 29/08 — TÊN NHÓM thành nhãn nhỏ CÙNG DÒNG với tên trang. Trước nó nằm trong dòng
           ghi chú riêng ⇒ 3 trang cùng một nhóm là 3 dòng "thuộc nhóm tu tiên vi", mà thẻ thứ
           tư CHÍNH LÀ nhóm đó. Mỗi dòng thừa là một dòng đẩy thẻ cao lên. */
        .dn-nh{font-style:normal;font-size:10.5px;font-weight:600;padding:1px 6px;
               border-radius:5px;margin-left:6px;white-space:nowrap;
               background:rgba(255,255,255,.06);color:var(--muted)}
        .dn-nn select{width:104px;background:var(--card,#161d2e);border:1px solid var(--line);
               border-radius:8px;color:var(--text);padding:6px 7px;font:inherit;font-size:12px;outline:none}
        .dn-nn select.goi{border-color:rgba(245,158,11,.55)}   /* đang là GỢI Ý, chưa khách xác nhận */
        .dn-chan{display:flex;gap:8px;align-items:center;padding:11px 14px;border-top:1px solid var(--line);
               flex-wrap:wrap}
        .dn-chan .xt{color:var(--muted);font-size:12px;margin-right:auto}
        .dn-thieu{margin:8px 0 0;padding:9px 11px;border-radius:10px;font-size:12.5px;
               background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.28)}
        .dn-suc{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
               padding:11px 16px;border-bottom:1px solid var(--line);
               background:rgba(74,222,128,.07);border-left:3px solid var(--ok,#4ade80)}
        .dn-suc.do{background:rgba(239,68,68,.09);border-left-color:var(--bad,#f43f5e)}
        .dn-suc.vang{background:rgba(245,158,11,.09);border-left-color:var(--warn,#f59e0b)}
        .dn-suc .t{flex:1;min-width:240px}
        .dn-suc .t b{display:block;font-size:14px}
        .dn-suc .t span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
        .dn-suc .n{display:flex;gap:7px;flex-wrap:wrap}
        .dn-suc .x{flex-basis:100%;color:var(--muted);font-size:11.5px}
        .dn-suc .k{flex-basis:100%;display:flex;gap:10px;flex-wrap:wrap;margin-top:9px;
               padding-top:9px;border-top:1px solid var(--line)}
        .dn-suc .k1{display:flex;align-items:center;gap:7px;font-size:12.5px}
        .dn-suc .k1 select{background:var(--card,#161d2e);border:1px solid var(--line);
               border-radius:8px;color:var(--text);padding:5px 7px;font:inherit;font-size:12px}
        .dn-g{border-bottom:1px solid var(--line)}
        .dn-g .dn-h{border-bottom:0}
        .dn-h.con{padding-left:34px;background:rgba(255,255,255,.02);font-size:12px}
        .dn-h.con .k b{font-weight:500}
        /* 🔴 28/08 (khuya) — bỏ khung vuông 26×26 (thời nhãn còn là "⋯"). Nhãn nay nói rõ việc
           ("⚙ Đặt riêng từng kênh (3)") nên khung cứng NUỐT CHỮ: đo được `scrollWidth` vượt
           `clientWidth`, ảnh chụp thấy cụt thành "⚙ Sửa riêng 3". Cho nút tự giãn theo chữ. */
        .dn-bung{width:auto;min-height:26px;flex:none;border-radius:7px;border:1px solid var(--line);
               background:transparent;color:var(--muted);cursor:pointer;font-size:12px;
               padding:3px 9px;white-space:nowrap;max-width:100%;overflow:visible}
        .dn-bung:hover{border-color:var(--accent2,#8b5cf6);color:var(--text)}
        /* ── HỘP GÁN TỪNG KÊNH (28/08 tối) ── tầng 100022: TRÊN màn Đấu nối (kcf-nen 100000),
              DƯỚI hộp chọn thư mục (fdModal 100025) và hộp xác nhận (100030) để hai thứ đó còn
              mở đè lên được. */
        .dng-nen{position:fixed;inset:0;z-index:100022;background:rgba(4,7,14,.62);
                 display:flex;align-items:center;justify-content:center;padding:20px}
        .dng-hop{background:var(--card);border:1px solid var(--line);border-radius:15px;
                 width:min(860px,96vw);max-height:88vh;display:flex;flex-direction:column;
                 box-shadow:0 18px 60px rgba(0,0,0,.5)}
        .dng-dau{display:flex;align-items:center;gap:11px;padding:15px 19px;
                 border-bottom:1px solid var(--line)}
        .dng-dau b{font-size:15.5px}
        .dng-dau .lg{font-size:11px;font-weight:700;letter-spacing:.06em;padding:2px 7px;
                     border-radius:5px;background:var(--accent2,#8b5cf6);color:#fff}
        .dng-dau .x{margin-left:auto;background:none;border:0;color:var(--muted);
                    font-size:19px;cursor:pointer;line-height:1;padding:2px 6px}
        .dng-dau .x:hover{color:var(--text)}
        .dng-tt{padding:0 19px 12px;color:var(--muted);font-size:12.5px}
        /* 🔴 29/08 — THANH GÁN và TỪNG DÒNG dùng CHUNG một lưới, để hai ô chọn (cùng làm một
           việc: chọn trang) nằm ĐÚNG MỘT CỘT. Bản cũ: thanh `flex:1 1 210px` giãn hết chỗ, dòng
           `flex:0 0 290px` cố định ⇒ lệch nhau gần 400px, mắt phải nhảy qua lại; giữa tên kênh
           và ô chọn còn một khoảng trống chết. Bốn cột: [tick] [tên] [ô chọn] [nút] — dòng kênh
           chỉ có 3 ô nên cột 4 bỏ trống, nhờ vậy vẫn thẳng hàng với thanh trên. */
        /* NĂM cột: [tick] [nhãn] [đếm co giãn] [ô chọn] [nút]. Bản 4 cột trước ép cả nhãn
           "Chọn hết" lẫn ô đếm vào CÙNG cột 2 ⇒ ô đếm bị đẩy xuống dòng riêng, nhãn trơ một
           mình — đo bằng ảnh chụp. Dòng kênh: tên trải cột 2-3, ô chọn vào cột 4 nên vẫn
           thẳng hàng với ô chọn của thanh gán. */
        .dng-lo,.dng-h{display:grid;
                grid-template-columns:18px auto minmax(0,1fr) minmax(190px,320px) 150px;
                gap:11px;align-items:center}
        .dng-lo{margin:0 19px 13px;padding:12px 14px;border:1px solid var(--line);
                border-radius:11px;background:var(--bg2,rgba(255,255,255,.02))}
        .dng-lo.co{border-color:var(--accent2,#8b5cf6)}
        .dng-lo label{display:contents;cursor:pointer}
        .dng-lo label > input{grid-column:1}
        .dng-lo label > .nh2{grid-column:2;font-size:13px;white-space:nowrap;
                             overflow:hidden;text-overflow:ellipsis}
        .dng-lo .dem{grid-column:3;justify-self:start;font-size:12.5px;color:var(--muted);
                     white-space:nowrap}
        .dng-lo select,.dng-lo button{width:100%;min-width:0}
        .dng-tim{margin:0 19px 10px}
        .dng-tim input{width:100%}
        .dng-ds{flex:1 1 auto;overflow:auto;border-top:1px solid var(--line)}
        /* Lề 33px = 19 (lề thẻ thanh gán) + 14 (đệm trong thẻ) — để lưới hai bên TRÙNG KHÍT,
           không thì ô chọn vẫn lệch đúng bằng phần chênh đệm (đo được 15px). */
        .dng-h{padding:9px 33px;border-bottom:1px solid var(--line)}
        .dng-h:last-child{border-bottom:0}
        .dng-h.tick{background:rgba(139,92,246,.07)}
        .dng-h input[type=checkbox]{grid-column:1;cursor:pointer}
        .dng-h .k{grid-column:2 / 4;min-width:0;display:flex;flex-direction:column;gap:1px}
        .dng-h .k b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
                    white-space:nowrap}
        .dng-h .k span{font-size:11px;color:var(--muted);overflow:hidden;
                       text-overflow:ellipsis;white-space:nowrap}
        .dng-h select{grid-column:4;width:100%;min-width:0}
        .dng-h select.trong{border-color:var(--warn,#f59e0b)}
        .dng-h select.dx{border-color:var(--accent2,#8b5cf6)}
        /* 🔴 03/09/2026 — Khi modal mở TỪ MỘT TRANG, ô chọn trang ở mỗi dòng bị bỏ (trang đã biết);
           chỗ đó nay chỉ NÓI kênh này đang nuôi trang nào — thông tin để khỏi kéo nhầm, không phải
           ô để điền. Cả dòng bấm được nên tick nhanh, không cần nhắm ô vuông. */
        .dng-h .tt{grid-column:4;font-size:11.5px;color:var(--muted);text-align:right;
                   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .dng-h .tt.trong{color:var(--warn,#f59e0b)}
        .dng-h{cursor:pointer}
        .dng-h:hover{background:rgba(255,255,255,.04)}
        .dng-chan{padding:13px 19px;border-top:1px solid var(--line);display:flex;
                  align-items:center;gap:10px}
        .dng-chan .g{color:var(--muted);font-size:12.5px;margin-right:auto}
        @media(max-width:760px){
          /* Hẹp thì xếp dọc: [tick|tên] rồi [ô chọn] tràn hàng — vẫn giữ tick cạnh tên. */
          .dng-lo,.dng-h{grid-template-columns:18px minmax(0,1fr)}
          .dng-lo select,.dng-lo button,.dng-h select{grid-column:1 / -1}
          .dng-lo .dem,.dng-h .k{grid-column:2}
        }
        .dn-chet{display:block;color:var(--warn,#f59e0b);font-size:11.5px;margin-top:2px}
        .dn-tron{display:block;color:var(--warn,#f59e0b);font-size:11.5px;margin-top:2px}
        .dn-loc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;
               padding-top:8px;border-top:1px solid var(--line);font-size:12px}
        .dn-loc .p{color:var(--muted)}
        .dn-loc .p b{color:var(--text)}
        .dn-loc input.o{flex:1;min-width:130px;background:var(--card,#161d2e);
               border:1px solid var(--line);border-radius:8px;color:var(--text);
               padding:5px 9px;font:inherit;font-size:12px;outline:none}
        .dn-loc .c{display:flex;align-items:center;gap:5px;color:var(--muted);white-space:nowrap}
        .dn-loc .c input{accent-color:var(--accent2,#8b5cf6)}
        /* ── Ô TÌM + ÁP DỤNG HÀNG LOẠT ở cột NƠI NHẬN (28/08 khuya) ── */
        .dn-tim2{display:flex;align-items:center;gap:8px;margin:0 0 10px;flex-wrap:wrap}
        /* 🔴 29/08 HƯỚNG A — ô tìm và khối "khai tiếng cho tất cả" cùng nói về CẢ danh sách bên
           dưới, mà lại chiếm hai hàng ~55px. Một cột thì mọi hàng ngang đều ăn thẳng vào chiều
           cao của danh sách — thứ duy nhất còn lại trên màn. Gộp một hàng. */
        #dnNen .dn-hang2{display:flex;align-items:stretch;gap:9px;flex-wrap:wrap;margin:0 0 10px}
        #dnNen .dn-hang2 .dn-tim2{flex:1 1 240px;margin:0}
        #dnNen .dn-hang2 .dn-het{flex:2 1 420px;margin:0;padding:5px 10px}
        .dn-tim2 input[type=text]{flex:1 1 190px;min-width:0}
        .dn-tim2 .sl{font-size:12px;color:var(--muted);white-space:nowrap}
        .dn-het{display:flex;align-items:center;gap:8px;margin:0 0 11px;padding:9px 11px;
                border:1px solid var(--line);border-radius:11px;flex-wrap:wrap;
                background:rgba(255,255,255,.02)}
        .dn-het b{font-size:12.5px;white-space:nowrap}
        .dn-het select{flex:1 1 150px;min-width:0}
        .dn-co{width:20px;height:15px;flex:none;border-radius:3px;object-fit:cover;
               box-shadow:0 0 0 1px rgba(0,0,0,.25)}
        .dn-lg-o{display:inline-flex;align-items:center;gap:6px}
        /* Nút "Từng kênh" — nói rõ việc thay vì ba chấm cụt. */
        .dn-bung{white-space:nowrap}
        .dn-goc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 11px;
               padding:7px 10px;border:1px dashed var(--line);border-radius:10px;font-size:11.5px}
        .dn-goc .d{color:var(--muted);flex:1;min-width:0;word-break:break-all}
        /* ══ KHỐI MẶC ĐỊNH (28/08) ══ Thu gọn = ĐÚNG MỘT HÀNG. Khối này nằm TRƯỚC dữ liệu, mà
           pha 04 nhắm ≤360px khung trước hàng đầu — nên "một hàng" là ràng buộc, không phải ý thích. */
        .md-hop{margin:0 0 12px}
        .md-gon{display:flex;align-items:center;gap:14px;width:100%;flex-wrap:wrap;text-align:left;
              padding:9px 13px;border:1px solid var(--line);border-radius:12px;background:var(--card2,#1b2236);
              color:var(--text);font:inherit;font-size:12.5px;cursor:pointer}
        .md-gon:hover{border-color:var(--accent2,#8b5cf6)}
        .md-nh{font-size:10px;letter-spacing:.13em;font-weight:800;color:var(--muted);
              border:1px solid var(--line);border-radius:6px;padding:2px 7px;flex:none}
        .md-i{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38ch}
        .md-i code{color:var(--text);font-size:11.5px}
        /* 🔴 29/08 — Ô MỞ RỘNG PHẢI TRÔNG BẤM ĐƯỢC. Trước đây `▾` chỉ là một ký tự mờ, không
           viền không nền: cả hàng bấm được nhưng KHÔNG có gì báo cho khách biết thế. Chủ dự án:
           *"tôi cần nó làm kiểu có thể bấm được ở nút mở rộng"*. Nay là nút thật, có viền, có
           trạng thái rê chuột — vẫn giữ cả hàng bấm được cho tiện. */
        /* 29/08 — ĐẬM HƠN (chủ dự án): bản đầu nền .03 + chữ `--muted` nhạt quá, nhìn vẫn
           như chữ trang trí chứ chưa ra nút. Nay nền dày hơn, chữ màu chính, viền rõ. */
        .md-v{margin-left:auto;color:var(--text);flex:none;display:inline-flex;
              align-items:center;justify-content:center;gap:5px;min-height:26px;padding:3px 11px;
              border:1px solid var(--accent2,#8b5cf6);border-radius:8px;
              background:rgba(139,92,246,.16);font-weight:600;
              font-size:11.5px;white-space:nowrap;transition:background .12s,border-color .12s}
        .md-v .mui{font-size:10px;line-height:1}
        .md-gon:hover .md-v{background:rgba(139,92,246,.30);border-color:var(--accent2,#8b5cf6)}
        .md-hop.mo{border:1px solid var(--line);border-radius:14px;background:var(--card2,#1b2236);padding:12px 14px}
        /* 🔴 30/08 — LƯỚI 2 CỘT 3–7 cho tab Kênh của Automation. `align-items:start` để hai cột
           KHÔNG bị kéo cao bằng nhau (cột trái ngắn hơn nhiều). Dưới 1100px xếp chồng 1 cột. */
        /* 🔴 30/08 — CỘT TRÁI HẸP (~272px): các hàng `.md-o` PHẢI xếp dọc.
           Bệnh đã đo được trên ảnh: `.md-g{padding-left:172px}` (thụt để thẳng hàng với ô nhập ở
           bố cục 1 cột) khiến chú thích chỉ còn ~76px bề ngang ⇒ chữ rơi thành CỘT DỌC từng từ —
           đúng lớp "vỡ chữ dọc" đã có luật phải kiểm. Trong cột hẹp: bỏ thụt, cho mỗi phần một hàng.
           ⚠ Máy dò squish suýt bỏ sót ca này vì bề ngang ~57px, sát ngưỡng cũ (<55px). */
        .wz-c1 .md-o{flex-direction:column;align-items:stretch;gap:6px}
        .wz-c1 .md-o>label{min-width:0}
        .wz-c1 .md-o input{max-width:100%;min-width:0}
        .wz-c1 .md-g{padding-left:0}
        .wz-c1 .md-dau{flex-wrap:wrap}
        .wz-c1 .md-dau .md-xt{flex:1 1 100%}
        /* Dòng MẪU: cụm nút XUỐNG HÀNG RIÊNG (4 nút không đủ chỗ trên 272px). */
        .wz-c1 .md-r{align-items:flex-start}
        .wz-c1 .md-r .i{max-width:100%}
        .wz-c1 .md-r .nut{flex:1 1 100%;margin-top:3px}
        /* Tỉ lệ 3–7 nhưng CÓ CHẶN HAI ĐẦU: `clamp(272px, 30%, 420px)`.
           · Khoảng thường (1150–1400px nội dung): 30% ⇒ đúng 3–7 như chủ dự án kẻ.
           · Màn siêu rộng (2560px): 30% sẽ thành ~720px — cột trái phình vô nghĩa (nội dung là
             mấy ô nhập ngắn) nên chặn ở 420px, phần dôi dồn hết cho lưới thẻ kênh.
           · Màn hẹp: không bao giờ dưới 272px (dưới nữa thì `.md-o` bắt đầu vỡ chữ). */
        /* 🔴 03/09/2026 — "CÀI ĐẶT CHUNG" NẰM NGANG, TRÊN CÙNG (chủ dự án: *"cài đặt chung cho nằm
           ngang, trên tab kênh thay vì để cột dọc gầy quá"*). Ở cột trái ~300px, ô "Thư mục video
           tải về" phải xuống dòng riêng và hai ô nhịp chạy xếp chồng nhau — dải dọc gầy nhẳng cho
           đúng BA thiết lập. Nay trải ngang hết bề ngang: mỗi thiết lập một cụm, đọc một hàng là hết.
           Thư mục cho co giãn (`flex:1`) vì nó là đường dẫn dài; hai ô nhịp giữ nguyên cỡ nhỏ. */
        .md-ngang{margin-bottom:14px}
        .md-ngang .md-hop{margin:0}
        .md-ngang .md-o{display:flex;flex-direction:row;align-items:center;gap:9px;flex-wrap:wrap}
        .md-ngang .md-o>label{flex:none;min-width:0;white-space:nowrap}
        .md-ngang .md-o input[type=text],.md-ngang .md-o input[readonly]{flex:1 1 260px;min-width:0;
                  max-width:none}
        .md-ngang .md-g{flex:1 1 100%;padding-left:0}
        /* Ba thiết lập xếp cạnh nhau; cụm nào chật thì tự xuống hàng chứ không bóp chữ. */
        .md-ngang .md-hop.mo{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 22px}
        .md-ngang .md-dau{flex:1 1 100%;margin-bottom:2px}
        .md-ngang .md-o{flex:1 1 340px}
        .wz-2cot{display:grid;grid-template-columns:clamp(272px,30%,420px) minmax(0,1fr);
                 gap:14px;align-items:start}
        .wz-2cot>.wz-c1,.wz-2cot>.wz-c2{min-width:0;display:flex;flex-direction:column;gap:14px}
        @media (max-width:1100px){ .wz-2cot{grid-template-columns:1fr} }
        /* 🔴 30/08 — DANH SÁCH MẪU CẤU HÌNH: mỗi mẫu MỘT DÒNG có khung riêng + nút Sửa. */
        .md-ds{display:flex;flex-direction:column;gap:6px;margin:2px 0 12px}
        .md-r{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 12px;
              border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.03);font-size:12.5px}
        .md-r .t{font-weight:700;color:var(--text);flex:none}
        .md-r .i{color:var(--muted);font-size:11.5px;min-width:0;overflow:hidden;
                 text-overflow:ellipsis;white-space:nowrap;max-width:40ch}
        .md-r .n{margin-left:auto;color:var(--muted);font-size:11.5px;flex:none;white-space:nowrap}
        .md-r .nut{display:flex;gap:6px;flex:none;flex-wrap:wrap}
        /* 🔴 03/09/2026 — HÀNG NÚT CỦA MỘT MẪU. Ảnh chủ dự án: 4 nút (Sửa · Gán kênh · Đổi tên ·
           Xoá) không đủ bề ngang trong cột trái nên **Xoá rớt xuống dòng riêng** — nút NGUY HIỂM
           NHẤT lại thành nổi nhất và đứng lẻ, trông như thao tác chính của cả dòng.
           Nay: hàng nút chiếm trọn dòng dưới, Xoá bị ĐẨY SANG PHẢI tách hẳn khỏi 3 nút lành, và
           tô nhạt đi — nó là việc hiếm, không phải việc chính. */
        .md-r{row-gap:7px}
        .md-r .nut{flex:1 1 100%;justify-content:flex-start;flex-wrap:nowrap;
                   border-top:1px dashed var(--line);padding-top:7px;margin-top:1px}
        /* Cột trái chỉ ~260px: 4 nút cỡ thường cộng lại ~268px nên Xoá bị CẮT ở mép (đo trên ảnh
           chụp thật). Thu nút trong riêng khối này — không đụng `.wz-nut` dùng chung nơi khác. */
        .md-r .nut .wz-nut{font-size:11.5px;padding:4px 9px;min-width:0}
        .md-r .nut .do-v{margin-left:auto;opacity:.72}
        .md-r .nut .do-v:hover{opacity:1}
        .md-r .n[data-trong="1"]{color:var(--warn,#f59e0b)}
        .md-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
        .md-dau b{font-size:13.5px}
        .md-xt{color:var(--muted);font-size:12px;flex:1;min-width:200px}
        .md-x{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);
              background:transparent;color:var(--muted);cursor:pointer}
        .md-o{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 0;
              border-top:1px solid var(--line)}
        .md-o>label{font-size:12.5px;font-weight:600;min-width:172px}
        .md-o input{flex:1;min-width:180px;max-width:430px;box-sizing:border-box;
              background:var(--card,#161d2e);border:1px solid var(--line);border-radius:9px;
              color:var(--text);padding:7px 10px;font:inherit;font-size:12.5px;outline:none}
        .md-val{font-size:12.5px;color:var(--text)}
        .md-g{flex-basis:100%;color:var(--muted);font-size:11.5px;padding-left:172px}
        .md-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
        .md-chip{border:1px solid var(--line);background:transparent;color:var(--muted);
              border-radius:999px;padding:4px 11px;font:inherit;font-size:12px;cursor:pointer}
        .md-chip.on{border-color:var(--accent2,#8b5cf6);background:rgba(139,92,246,.15);color:var(--text);font-weight:600}
        .md-chip.them{border-style:dashed}
        .wz-loc1{align-items:center}
        /* Dòng "Bỏ tick = tạm dừng" là chú thích một lần, không phải trạng thái — thu nhỏ và
           chỉ để một dòng, đừng chiếm chỗ ngang với dữ liệu. */
        .wz-xt-an{font-size:11.5px;opacity:.72}
        /* ══ Pha 04: cắt phần trang trí trước dữ liệu ══════════════════════════════════════
           Tiêu đề "🔀 Automation" lặp lại đúng mục đang sáng ở thanh bên; thanh sub-nav ngay
           dưới đã nói mình đang ở tab nào. Không xoá (còn dấu ? mở phần giải thích), chỉ nén
           và cho nó nằm CÙNG HÀNG với sub-nav. Đo được: 28px + 16px lề. */
        /* 🔴 ĐÃ THỬ VÀ BỎ: đưa tiêu đề "🔀 Automation" lên NẰM CÙNG HÀNG sub-nav bằng
           `position:absolute` để tiết kiệm 28px. Hỏng hai lần liên tiếp — lần đầu neo nhầm tổ tiên
           (h1 là ANH EM của `.wz-tab`, không phải con) nên bay lên đè logo thanh bên; lần hai neo
           đúng `#v-quytrinh` thì đè lên nhãn "Kênh 7" của chính sub-nav. Cả hai lần chỉ ẢNH CHỤP
           bắt được, assert đều xanh.
           ⇒ 28px không đáng đổi lấy một bố cục chồng nhau theo bề rộng màn. Chỉ NÉN, không dời. */
        #v-quytrinh>h1.page{font-size:16px;margin:0 0 10px;padding:0;line-height:1.25}
        /* ══ Công tắc THEO MẶC ĐỊNH ⇄ RIÊNG trong modal kênh (pha 03) ══ */
        .hs-ct{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:12px;
              background:var(--card2,#1b2236)}
        .hs-ct.rieng{border-color:rgba(139,92,246,.45);background:rgba(139,92,246,.07)}
        .hs-d{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
        .hs-d b{font-size:13px}
        .hs-canh{display:block;margin-top:6px;font-size:11.5px;color:var(--warn,#f59e0b);
                 line-height:1.5}
        .hs-nh{font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--muted);
              border:1px solid var(--line);border-radius:6px;padding:2px 7px;flex:none}
        .hs-ct.rieng .hs-nh{color:#c4b5fd;border-color:rgba(139,92,246,.55)}
        .hs-x{flex-basis:100%;color:var(--muted);font-size:11.5px;margin-top:3px}
        .hs-n{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
        .hs-chep{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;
              padding-top:10px;border-top:1px solid var(--line)}
        .hs-chep label{font-size:12.5px;font-weight:600}
        .hs-chep select{background:var(--card,#161d2e);border:1px solid var(--line);border-radius:9px;
              color:var(--text);padding:7px 9px;font:inherit;font-size:12.5px;outline:none;max-width:230px}
        /* Chip THEO/RIÊNG trên thẻ kênh — nhìn lưới là biết kênh nào đã tách. */
        .wz-hs{font-size:10.5px;padding:1px 7px;border-radius:6px;border:1px solid var(--line);
              color:var(--muted);white-space:nowrap}
        .wz-hs.r{border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.13);color:#c4b5fd}
        /* ── Việc cần làm, đánh số. Chỉ việc KẾ TIẾP có nút — khách không phải tự đoán làm gì trước. */
        .md-viec{border:1px solid rgba(245,158,11,.34);border-radius:14px;padding:11px 13px;margin:0 0 12px;
              background:rgba(245,158,11,.05)}
        .md-viec-d{display:flex;align-items:baseline;gap:9px;margin-bottom:7px;flex-wrap:wrap}
        .md-viec-d b{font-size:13.5px}
        .md-viec-d span{color:var(--muted);font-size:12px}
        .md-v1{display:flex;align-items:center;gap:10px;padding:6px 0}
        .md-v1.xong{opacity:.45}
        .md-v1 .s{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
              font-size:11.5px;font-weight:700;border:1px solid var(--line);color:var(--muted)}
        .md-v1.ke .s{border-color:var(--accent2,#8b5cf6);background:rgba(139,92,246,.18);color:#c4b5fd}
        .md-v1 .t{min-width:0;flex:1}
        .md-v1 .t b{display:block;font-size:13px;font-weight:600}
        .md-v1 .t span{color:var(--muted);font-size:11.5px}
        .kcf-tieu{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
                  font-weight:700;margin:2px 0 10px}
        .kcf-d{border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:10px;
               background:var(--card2,#1b2236)}
        .kcf-d.tat{opacity:.5}
        /* Câu "thiếu gì" phải đọc được HẾT — thà xuống dòng còn hơn cắt cụt giữa chừng. */
        .kcf-d .p{white-space:normal;overflow:visible;text-overflow:clip}
        .kcf-d>label.b{display:flex;gap:9px;align-items:center;font-size:13px;font-weight:600;cursor:pointer}
        .kcf-d>label.b input{width:16px;height:16px;accent-color:var(--accent2,#8b5cf6);cursor:pointer}
        .kcf-in{display:flex;gap:8px;align-items:center;margin-top:9px;flex-wrap:wrap}
        .kcf-in input{background:var(--card,#141a2b);border:1px solid var(--line);border-radius:9px;
                 color:var(--text);padding:8px 11px;font:inherit;font-size:12.5px;outline:none;min-width:0}
        .kcf-in input.duong{flex:1;min-width:150px}
        .kcf-in input:focus{border-color:var(--accent2,#8b5cf6)}
        .kcf-in button{background:var(--card2,#1b2236);border:1px solid var(--line);color:var(--text);
                 font-size:12px;padding:7px 13px;border-radius:9px;cursor:pointer;white-space:nowrap}
        .kcf-in button:hover{border-color:var(--accent2,#8b5cf6)}
        .kcf-xt{margin-top:8px;font-size:11.5px;color:var(--muted);line-height:1.6;word-break:break-all}
        .kcf-xt code{background:rgba(255,255,255,.06);padding:1px 5px;border-radius:5px;color:var(--text)}
        .kcf-cuoi{display:flex;gap:10px;align-items:center;padding:13px 20px;border-top:1px solid var(--line);
                  flex-wrap:wrap}
        .kcf-cuoi .tin{font-size:12.5px;color:var(--muted);flex:1;min-width:150px}
        .kcf-cuoi .tin b{color:var(--text)}
        .kcf-huy{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:13px;
                 padding:9px 16px;border-radius:10px;cursor:pointer}
        /* ══ 26/08 nhịp 22 — BẬC GIỮA giữa `kcf-ok` (chính) và `kcf-huy` (phụ) ═══════════
           Cần ba bậc chứ không phải hai: lối khách TỰ CHỌN là chính, lối TỰ ĐỘNG vẫn phải
           mời gọi (nó nhanh hơn nhiều với 142 Page) nhưng không được tranh chỗ nút chính. */
        .kcf-ok2{cursor:pointer;font-weight:700;font-size:13.5px;padding:10px 20px;
                 border-radius:10px;color:var(--text);
                 border:1px solid rgba(124,92,255,.55);background:rgba(124,92,255,.12)}
        .kcf-ok2:hover:not(:disabled){background:rgba(124,92,255,.2)}
        .kcf-ok2:disabled{opacity:.4;cursor:not-allowed}
        .kcf-ok{border:0;cursor:pointer;font-weight:800;font-size:13.5px;color:#fff;padding:10px 22px;
                border-radius:10px;background:linear-gradient(120deg,#7c5cff,#ff3d8a);
                box-shadow:0 6px 18px rgba(124,92,255,.32)}
        .kcf-ok:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
        /* ══ 🔴 29/08 HƯỚNG A — MÀN ĐẤU NỐI MỘT CỘT ═══════════════════════════════════
           Hai cột chỉ đúng khi mỗi bên là một TRỤC quyết định riêng. Sau khi đổi sang "mỗi trang
           một kênh nuôi" thì chỉ còn MỘT trục — TRANG — nên cột trái tụt xuống thành 4 câu chỉ
           đường sang cột phải. Nay: dải ngang mảnh ở trên (đầu đề · bộ lọc · cảnh báo toàn màn),
           dưới là danh sách trang chiếm trọn bề ngang, xếp 2 thẻ một hàng.
           ⚠ PHẢI bọc trong `#dnNen`: `.kcf-than`/`.kcf-trai` là khung dùng chung của 4 modal. */
        #dnNen .kcf-than{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
        #dnNen .kcf-trai{border-right:0;border-bottom:1px solid var(--line);min-height:0;overflow:auto;
                         max-height:34vh}
        #dnNen .kcf-tim{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:11px 16px}
        #dnNen .kcf-tim .dn-loc{margin:0 0 0 auto;flex:none}
        #dnNen .dn-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));
                      gap:9px;align-items:start;align-content:start}
        /* KHÔNG `height:100%`: nó nuốt `align-items:start` của lưới ⇒ thẻ ít chữ bị kéo cao
           bằng thẻ nhiều cảnh báo, thành hộp rỗng. Thẻ phải cao đúng phần nó nói. */
        #dnNen .dn-ds .dn-nn{margin-bottom:0;align-self:start}
        /* Cảnh báo TOÀN MÀN (đường chết · kênh rảnh) — không thuộc thẻ trang nào nên phải ở dải trên. */
        /* ══ 🔴 29/08 — TIẾN ĐỘ RENDER RIÊNG CỦA AUTOMATION ═══════════════════════════════
           Thanh % cả lô vô dụng với 100 video. Khối này: MỘT dòng "đang làm" (có % của CHÍNH
           video đó, nhích thấy được) + MỘT dải đếm xong/đang/chờ. Không gộp thành một %. */
        .au-rd{margin:10px 0 0;padding:11px 13px;border-radius:12px;
               border:1px solid rgba(139,92,246,.32);background:rgba(139,92,246,.07)}
        .au-rd .d1{display:flex;align-items:center;gap:9px;min-width:0}
        .au-rd .ic{flex:none;font-size:15px}
        .au-rd .tn{flex:1;min-width:0;font-size:12.5px;font-weight:650;
                   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .au-rd .pc{flex:none;font-size:12.5px;font-weight:800;color:#c4b5fd;
                   font-variant-numeric:tabular-nums}
        .au-rd .b{display:block;height:5px;border-radius:999px;margin-top:7px;
                  background:rgba(255,255,255,.09);overflow:hidden}
        .au-rd .b i{display:block;height:100%;border-radius:999px;
                    background:linear-gradient(90deg,#8b5cf6,#22d3ee);transition:width .3s ease}
        .au-rd .b2{margin-top:6px;font-size:11.5px;color:var(--muted);line-height:1.6}
        .au-rd .b2 b{color:var(--text)}
        /* 🔴 29/08 (rút gọn) — BỎ hàng chip ✔/▶/◷/⛔. "Đang render" thì chính cái thanh đã
           nói; "xong" thì cột "đã giao" trên từng thẻ kênh đã nói. Còn lại đúng MỘT dòng:
           còn mấy kênh, còn mấy video. */
        .au-rd .con{margin-top:7px;font-size:11.5px;color:var(--muted)}
        .au-rd .con b{color:var(--text);font-variant-numeric:tabular-nums}
        .au-rd .kn{flex:none;font-size:11.5px;padding:2px 8px;border-radius:6px;
                   background:rgba(139,92,246,.16);color:#c4b5fd;font-weight:650;
                   white-space:nowrap}
        .dn-dai{display:flex;align-items:flex-start;gap:8px;margin:0;padding:8px 16px;font-size:11.5px;
                line-height:1.6;border-top:1px solid var(--line)}
        .dn-dai b{font-weight:700}
        .dn-dai.do{background:rgba(239,68,68,.08);color:#fca5a5}
        .dn-dai.do b{color:#fecaca}
        .dn-dai.vang{background:rgba(245,158,11,.07);color:#fcd34d}
        .dn-dai.vang b{color:#fde68a}
        .dn-dai .ten{color:var(--text);opacity:.85}
        @media(max-width:820px){ .kcf-than{grid-template-columns:1fr;overflow:auto}
                                 .kcf-trai{border-right:0;border-bottom:1px solid var(--line)}
                                 .kcf-ds{max-height:230px} }
        .wf-kmoi{display:none;margin-top:10px;background:var(--card);border:1px solid var(--line);
                 border-left:3px solid #16a34a;border-radius:11px;padding:9px 13px;font-size:12.5px;line-height:1.6}
        .wf-kmoi.show{display:block}
        .wf-kmoi b{color:var(--text)}
        .wf-kmoi .wf-km-ds{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
        .wf-kmoi .wf-km-ds button{background:var(--card2);border:1px solid var(--line);color:var(--text);
                 font-size:11.5px;padding:3px 10px;border-radius:999px;cursor:pointer}
        .wf-kmoi .wf-km-ds button:hover{border-color:var(--accent2)}
        .wf-kmoi .wf-km-ds button.da{opacity:.5;cursor:default}
        .wf-km-i{display:inline-flex;align-items:stretch}
        .wf-km-i>button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
        .wf-km-td{border-left:0!important;border-top-left-radius:0;border-bottom-left-radius:0;padding:3px 8px!important}
        .wf-km-td:hover{border-color:var(--accent2)!important;color:var(--accent2)}
        /* Lane cuộn ôm CẢ dây chuyền LẪN 2 khung gấp (lưu cấu hình · nhật ký) — để chúng ngoài lane
           thì chúng chiếm chỗ cố định ~92px của chính dây chuyền, mà chúng là việc phụ. */
        /* ① Ngăn "Tiến trình" (`#vcpd`) là `position:fixed; right:0` — nó ĐÈ lên nội dung chứ
           không đẩy. Lúc đóng vẫn chừa 48px thanh kéo ⇒ chữ cuối dòng bị che. Chừa chỗ cho nó,
           và chỉ chừa KHI NÓ ĐANG HIỆN (rảnh thì lấy lại trọn bề ngang). */
        body:has(#vcpd.vcpd-show) .content{padding-right:58px}

        /* ② CẢ TAB CUỘN. Trước: chỉ `.wf-lane` cuộn nên 437px phía trên đứng im — lăn chuột ở
           nửa trên không ăn gì ("vùng vuốt được chỉ có 1 nửa"). Nay tab tự cuộn, `.wf-lane`
           thôi làm vùng cuộn riêng (hai vùng cuộn lồng nhau là kiểu khó dùng nhất). */
        #v-quytrinh:not(.hidden){overflow-y:auto;overscroll-behavior:contain}
        .wf-lane{flex:none;min-height:0;overflow:visible;padding-right:4px}

        /* ═══ THU GỌN ═══ Panel cấu hình bước 3 cao ~2300px trong khi tab chỉ 783px.
           Gập từng mục + gập cả panel, dùng lại chevron của panel Render cho đồng ngôn ngữ. */
        .wf-cfg-head{display:flex;align-items:center;gap:10px;padding:2px 2px 12px;
                     border-bottom:1px solid var(--line);margin-bottom:13px}
        .wf-cfg-head .tt{font-weight:750;font-size:13.5px;flex:1;min-width:0;overflow:hidden;
                         text-overflow:ellipsis;white-space:nowrap}
        .wf-cfg-gon{background:var(--card2,#1b2236);border:1px solid var(--line);color:var(--muted);
                    font-size:11.5px;padding:5px 12px;border-radius:999px;cursor:pointer;
                    display:flex;align-items:center;gap:6px;white-space:nowrap}
        .wf-cfg-gon:hover{border-color:var(--accent2,#8b5cf6);color:var(--text)}
        .wf-cfg-gon .chev{transition:transform .18s}
        .wf-cfg.gon .wf-cfg-gon .chev{transform:rotate(-90deg)}
        .wf-cfg.gon>*:not(.wf-cfg-head){display:none!important}
        .wf-cfg.gon{padding-bottom:14px}
        /* từng mục: bấm vào tiêu đề để gập/mở */
        .r2-scope .r2-sec>.r2-sh{cursor:pointer;user-select:none}


        .k-ngc{flex:none;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.35);
          border-radius:7px;color:var(--text,#e8e9f5);font-size:11px;padding:3px 8px;cursor:pointer;
          white-space:nowrap}
        .k-ngc:hover{background:rgba(139,92,246,.22)}
        .k-ngc.rong{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.40)}
        .ng-h{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;
          border:1px solid var(--line,#2a2d4a);margin-bottom:5px}
        /* Hàng nguồn: ẢNH + TÊN + link nhỏ. Bản cũ chỉ in URL trần — nhìn
           `space.bilibili.com/31067102` không ai biết là kênh nào, mà đây đúng là chỗ khách
           quyết giữ hay bỏ nguồn. */
        .ng-h{padding:7px 9px}
        .ng-h .ng-cham{flex:none;font-size:11px}
        .ng-h .ng-av{flex:none;width:34px;height:34px;line-height:0}
        .ng-h .ng-av img,.ng-h .ng-av .knav{width:34px !important;height:34px !important;
                 border-radius:50% !important}
        .ng-h .ng-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
        .ng-h .ng-tt b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .ng-h .ng-tr{font-size:11px;flex:none;color:var(--muted)}
        .ng-h code{flex:none;max-width:100%;font-size:10.5px;color:var(--muted);
                 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        /* Tiêu đề nhóm trong menu ➕. 5/6 mục TẠO KÊNH ĐÍCH, chỉ 1 mục tìm KÊNH NGUỒN —
           để chung một đống thì khách không biết bấm cái nào ra cái gì (chủ dự án báo 24/08). */
        .wf-them-nh{font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--muted);
                 padding:8px 10px 4px;text-transform:uppercase}
        .wf-them-nh span{font-weight:600;letter-spacing:0;text-transform:none;opacity:.75}
        .wf-them-nh+.wf-them-mi{margin-top:0}
        .wf-them-mi{display:block;padding:7px 10px;border-radius:7px;font-size:12.5px;
          color:var(--text,#e8e9f5);text-decoration:none;white-space:nowrap}
        .wf-them-mi:hover{background:rgba(255,255,255,.07)}
        .r2-scope .r2-sec>.r2-sh .sec-chev{margin-left:8px;color:var(--muted);font-size:11px;
                     transition:transform .18s;flex:none}
        .r2-scope .r2-sec.mo>.r2-sh .sec-chev{transform:rotate(180deg)}
        /* CHỈ áp cho mục có tiêu đề `.r2-sh`. Mục "Tùy chọn thêm" dùng cơ chế gập CÓ SẴN
           (`.r2-adv`/`.r2-advh`) — không loại trừ thì luật này ẩn luôn tiêu đề của nó, mục đó
           thành một dải trống bấm không được. */
        .r2-scope .r2-sec:has(> .r2-sh):not(.mo)>*:not(.r2-sh){display:none!important}
        .r2-scope .r2-sec:has(> .r2-sh):not(.mo){padding-bottom:14px}
        /* ô lệnh AI — gập sẵn, chỉ còn một dòng */
        .wf-lenh.gon .wf-lenh-r,.wf-lenh.gon .wf-hieu{display:none}
        .wf-lenh-gon{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px;
                     color:var(--muted)}
        .wf-lenh-gon b{color:var(--text)}
        .wf-lenh-gon .chev{margin-left:auto;transition:transform .18s;font-size:11px}
        .wf-lenh:not(.gon) .wf-lenh-gon .chev{transform:rotate(180deg)}

        /* 🔴 Thanh đáy của tab Render (có nút RENDER NGAY) đi theo cột cấu hình mượn sang đây.
           Nút đó chạy theo LỰA CHỌN CỦA TAB RENDER, không phải theo dây chuyền Automation —
           bấm nhầm là render một lượt hoàn toàn khác mà không lỗi nào báo. Automation chạy
           bằng ▶ Bắt đầu chạy 24/24 ở trên. */
        .r2-scope .r2-foot{display:none!important}
        /* cột mượn: bỏ ràng buộc chiều cao của lưới bên tab Render, kẻo gập xong vẫn chừa
           một mảng trống to bằng phần đã gập */
        /* Cột này vốn là cột PHẢI của lưới `320px 1fr` bên tab Render (~950px). Thả vào khung
           1300px của Automation thì mọi hàng flex giãn ra, công tắc trôi tít bên phải — nhìn
           rời rạc. Giữ đúng bề rộng quen thuộc của nó. */
        .r2-scope #r2CfgCol{height:auto;min-height:0;display:block;max-width:980px}
        .r2-scope .r2-sec:last-child{margin-bottom:0}/* 🔵 22/08/2026 — "UI SIÊU TRỰC QUAN" (yêu cầu chủ dự án). Ba thứ khách nhìn PHÁT là hiểu:
           (1) ô ra lệnh bằng lời  (2) một câu "sẽ chạy gì"  (3) mỗi bước có SỐ + đèn trạng thái.
           Trước đó phải mở từng bước ra mới biết nó sắp làm gì ⇒ "chả hiểu cái gì cả". */
        .wf-lenh{margin-top:12px;padding:12px 15px;display:flex;flex-direction:column;gap:8px}
        .wf-lenh-r{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
        .wf-lenh-r input.num{flex:1;min-width:230px;padding:7px 10px}
        /* ví dụ ĐI CÙNG HÀNG với ô nhập; có kết quả rồi thì ẩn — nó chỉ để mồi lúc chưa biết gõ gì */
        .wf-vd{display:flex;gap:6px;flex-wrap:wrap;font-size:11.5px}
        .wf-lenh:has(.wf-hieu.show) .wf-vd{display:none}
        .wf-lenh-tat{flex:1;min-width:180px;font-size:12px;color:var(--muted);line-height:1.5}
        .wf-lenh-tat b{color:var(--text)}
        .wf-lenh-tat a{color:var(--accent2);font-weight:600;text-decoration:none}
        .wf-lenh-tat a:hover{text-decoration:underline}
        .wf-lenh-r #wfKeyIn{flex:0 1 210px;min-width:150px}
        /* Câu TRẤN AN — phải có, kẻo khách tưởng thiếu key là không dùng được tab này */
        .wf-lenh-ok{font-size:11.5px;color:var(--muted);margin-top:6px}
        .wf-lenh-ok b{color:#16a34a}
        .wf-vd button{background:transparent;border:1px dashed var(--line);color:var(--muted);
                      font-size:11.5px;padding:3px 10px;border-radius:999px;cursor:pointer}
        .wf-vd button:hover{border-style:solid;color:var(--text)}
        .wf-hieu{border:1px solid var(--accent2);background:rgba(99,102,241,.09);border-radius:11px;
                 padding:11px 13px;font-size:13px;line-height:1.6;display:none}
        .wf-hieu.show{display:block}
        .wf-hieu b{color:var(--text)}
        .wf-hieu .wf-hieu-btn{margin-top:9px;display:flex;gap:8px;flex-wrap:wrap}
        /* băng "SẼ CHẠY GÌ" — cả dây chuyền gói trong MỘT câu tiếng Việt */
        .wf-tomtat{margin-top:12px;display:flex;gap:9px;align-items:flex-start;
                   background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent2);
                   border-radius:11px;padding:8px 13px;font-size:13px;line-height:1.5}
        .wf-tomtat .wf-tt-ic{font-size:16px;line-height:1.4}
        .wf-tomtat b{color:var(--accent2)}
        .wf-tomtat.xau{border-left-color:var(--warn)} .wf-tomtat.xau b{color:var(--warn)}
        .wf-tt-loha{display:block;margin-top:3px;font-size:11px;color:var(--muted)}
        .wf-tt-den{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;
                   background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.4);
                   color:#16a34a;font-size:11.5px;max-width:340px;overflow:hidden;
                   text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
        /* SỐ BƯỚC + đèn trạng thái trên từng thẻ */
        .wf-no{flex:none;width:25px;height:25px;border-radius:50%;display:flex;align-items:center;
               justify-content:center;font-size:12.5px;font-weight:700;background:var(--card2);
               border:1px solid var(--line);color:var(--muted)}
        .wf-card:not(.off):not(.blocked) .wf-no{background:var(--accent2);border-color:var(--accent2);color:#fff}
        .wf-den{margin-left:auto;flex:none;font-size:11px;font-weight:600;padding:2.5px 9px;border-radius:999px;
                border:1px solid var(--line);color:var(--muted);white-space:nowrap}
        .wf-den.san{color:#16a34a;border-color:rgba(22,163,74,.5);background:rgba(22,163,74,.10)}
        .wf-den.thieu{color:var(--warn);border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.10)}
        .wf-den.chay{color:var(--accent2);border-color:var(--accent2);background:rgba(99,102,241,.12)}
        .wf-den.xong{color:#16a34a;border-color:rgba(22,163,74,.5);background:rgba(22,163,74,.10)}
        .wf-den.loi{color:var(--warn);border-color:var(--warn);background:rgba(245,158,11,.14)}.wf-luu{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
        .wf-luu .num{width:auto;min-width:160px}
        .wf-luu input.num{flex:1;max-width:230px}
        .wf-cfg{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
        .wf-cfg:empty{display:none}   /* chưa chọn bước nào → khỏi để khung rỗng chiếm chỗ */
        /* 🔵 22/08/2026 — thanh cuộn nằm ở `.wf-flow` (xem dưới), KHÔNG ở đây.
           Đặt `overflow` cho riêng panel cấu hình thì được HAI thanh cuộn lồng nhau (trang + panel):
           lăn chuột trong panel tới đáy là trang bắt đầu trôi — đúng kiểu khó dùng nhất. */
        /* Khung cấu hình nằm DƯỚI dải, ăn màu viền của thẻ đang mở (cùng mũi nhọn ở trên) */
        .wf-cfg{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(99,102,241,.18);margin-top:10px}
        .wf-tt{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;
               background:var(--r2-sunk,rgba(255,255,255,.05));border:1px solid var(--line);
               color:var(--text);font-size:11px}
        #xlCfgHome{display:none}   /* mốc trả panel về tab Render — KHÔNG được tính là item grid .vd-cols2 (kẻo đẩy panel xuống hàng) */
        #wfConfig .vd-card{border:0;background:transparent;margin-top:10px}   /* panel render MƯỢN vào: bỏ viền lồng */
        #wfConfig .vd-card>.vd-tabhead{border-radius:10px;border:1px solid var(--line)}
        #wfConfig .vd-queue{display:none}   /* hàng đợi render (thuộc tab Edit) — thừa trong Quy trình, ẩn đi */
        .wf-cfg h3{margin:0 0 3px;font-size:16px;display:flex;align-items:center;gap:8px}
        .wf-cfg .hint{font-size:12px;color:var(--muted);margin:0 0 15px;line-height:1.5}
        .wf-row{margin-bottom:11px}
        /* hàng NGẮN (select nền tảng, ô số) xếp CẠNH nhau — xếp dọc là phí nửa bề ngang */
        .wf-doi{display:grid;grid-template-columns:1fr 1fr;gap:11px}
        .wf-doi>.wf-row{margin-bottom:0}
        .wf-row>label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
        .wf-seg2{display:flex;gap:7px;flex-wrap:wrap}
        .wf-seg2 button{background:var(--card2);border:1px solid var(--line);color:var(--text);font-size:12.5px;padding:6px 13px;border-radius:9px;cursor:pointer}
        .wf-seg2 button.on{background:var(--accent2);border-color:var(--accent2);color:#fff}
        .wf-cfg input.num,.wf-cfg textarea.num,.wf-cfg select.num{width:100%;box-sizing:border-box}.wf-off-note{font-size:12.5px;color:var(--muted)}
        /* 👥 Đa kênh — bảng CHỈ ĐỌC, sửa vẫn ở tab Render (một nguồn sự thật) */
        .wf-kenh{display:flex;flex-direction:column;gap:8px}
        .wf-kenh-i{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
        .wf-hl{background:linear-gradient(90deg,rgba(124,92,255,.12),transparent);
               border:1px solid var(--line);border-radius:11px;padding:9px 12px;margin-bottom:9px}
        .wf-hl>b{font-size:12.5px}
        .wf-hl-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:6px;font-size:11.5px;color:var(--muted)}
        .wf-hl-r input{width:56px;background:var(--r2-sunk,rgba(255,255,255,.04));border:1px solid var(--line);
               border-radius:7px;color:var(--text);font-size:12px;padding:3px 6px;text-align:center;margin:0 3px}
        .wf-hl-s{color:var(--muted)}
        .wf-hl-s code{background:var(--r2-sunk,rgba(255,255,255,.05));padding:1px 5px;border-radius:5px}
        .wf-kenh-i.thieu{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.05)}
        .wf-kenh-t{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
        .wf-kenh-so{flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent2);color:#fff;
                    font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
        .wf-kenh-ten{flex:1;min-width:90px;background:transparent;border:0;border-bottom:1px dashed var(--line);
                     color:var(--text);font-weight:700;font-size:13.5px;padding:2px 2px 3px;outline:none}
        .wf-kenh-ten:focus{border-bottom-color:var(--accent2)}
        .wf-kenh-xoa{flex:none;background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 4px}
        .wf-kenh-xoa:hover{color:var(--warn)}
        .wf-kenh-o{display:flex;gap:7px;align-items:center;margin-top:7px}
        .wf-kenh-o>label{flex:none;width:150px;font-size:11.5px;color:var(--muted)}
        .wf-kenh-o>input{flex:1;min-width:0;background:var(--r2-sunk,rgba(255,255,255,.04));
                 border:1px solid var(--line);border-radius:8px;color:var(--text);font-size:12px;
                 padding:5px 9px;cursor:pointer;text-overflow:ellipsis}
        .wf-kenh-o>input:hover{border-color:var(--accent2)}
        .wf-kenh-o>input::placeholder{color:var(--warn);opacity:.8}.wf-kenh-n{flex:none;font-size:11.5px;color:var(--muted);white-space:nowrap}
        .wf-kenh-rong{text-align:center;color:var(--muted);font-size:13px;padding:14px 4px}/* ô dán API key ngay trong khung "đã hiểu gì" */
        .wf-key{margin-top:9px;display:flex;flex-direction:column;gap:6px}
        .wf-key-r{display:flex;gap:8px;flex-wrap:wrap}
        .wf-key-r input.num{flex:1;min-width:210px;padding:7px 10px}
        .wf-key-l{font-size:11.5px;color:var(--muted)}
        .wf-key-l a{color:var(--accent2);font-weight:600;text-decoration:none}
        .wf-key-l a:hover{text-decoration:underline}
        .wf-key-m{font-size:12px;color:var(--muted);min-height:1em}
        .wf-logbox{background:#0c1019;border:1px solid var(--line);border-radius:0 0 12px 12px;border-top:0;overflow:hidden;display:flex;flex-direction:column;height:170px}.wf-xoa{margin-top:11px;background:var(--card);border:1px solid var(--line);
                border-left:3px solid var(--warn);border-radius:12px;padding:10px 14px}
        .wf-xoa-l{display:flex;gap:9px;align-items:center;cursor:pointer;font-size:13.5px}
        .wf-xoa-l input{width:17px;height:17px;cursor:pointer;accent-color:var(--warn)}
        .wf-xoa-d{font-size:12px;color:var(--muted);line-height:1.6;margin-top:5px}
        .wf-xoa-d b{color:var(--text)}
        .wf-xoa-w{margin-top:5px;color:var(--warn);font-size:11.5px}
        .wf-xoa-w b{color:var(--text)}
        .wf-gap{margin-top:11px;background:var(--card);border:1px solid var(--line);border-radius:12px}
        .wf-gap>summary{padding:9px 15px;cursor:pointer;font-weight:700;font-size:12.5px;list-style:none;user-select:none}
        .wf-gap>summary::-webkit-details-marker{display:none}
        .wf-gap>summary::before{content:"\25B8 ";color:var(--muted)}
        .wf-gap[open]>summary::before{content:"\25BE "}
        .wf-gap[open]>summary{border-bottom:1px solid var(--line)}
        .wf-gap>.wf-luu{margin-top:0;padding:12px 15px}
        .wf-logbox-b{flex:1;overflow:auto;padding:12px 14px;font-family:monospace;font-size:12px;line-height:1.6;white-space:pre-wrap;color:var(--text)}/* ═══════ THIẾT KẾ LẠI TAB AUTOMATION 22/08/2026 ═══════
   Đặt CUỐI để thắng luật cũ cùng specificity. Luật `.wf-*` cũ phía trên phần lớn
   nay THỪA — chưa xoá vì xoá 292 luật rải rác dễ sai hơn là để lại. */
/* =========================================================
   VIRALCRAWL — AUTOMATION
   UI REDESIGN 22/08/2026
   Không dùng thư viện ngoài.
   Giữ nguyên ID / onclick / onchange của JS hiện tại.
   ========================================================= */

:root{
  /* CHỈ biến MỚI — 14 tab khác dùng chung --bg/--card/--text, sửa một tab
     mà đổi màu cả app là cái giá không đáng. */
  --line2: rgba(255,255,255,.12);
  --muted2: #71717a;
  --danger: #ef4444;
  --cyan: #38bdf8;
  --shadow: 0 12px 32px rgba(0,0,0,.28);
  --shadow-accent: 0 0 0 1px rgba(124,92,255,.24),
                   0 12px 35px rgba(124,92,255,.12);
}


/* =========================================================
   TAB / KHUNG CHÍNH
   ========================================================= */

#v-quytrinh:not(.hidden) {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  width: 100%;
  /* 🔴 30/08/2026 — CAP THẬT NẰM Ở ĐÂY (không phải ở `#wfWiz`). `max-width:1180px` + `margin:auto`
     trên chính SECTION là thứ đẻ ra hai dải trống hai bên mà chủ dự án khoanh đỏ: màn 1920 thừa
     ~550px, màn 2560 thừa ~1190px, trong khi lưới thẻ kênh chỉ vẽ nổi 2 cột.
     Nâng lên 1760px: vẫn chặn cho màn siêu rộng (dòng chữ không dài quá tầm mắt) nhưng dùng hết
     chỗ ở 1440–1920 — dải màn hình thực tế của khách. */
  max-width: 2400px;
  height: 100%;
  min-height: 0;

  margin: 0 auto;
  padding: 18px 20px 28px;

  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) transparent;

  overscroll-behavior: contain;
}

#v-quytrinh::-webkit-scrollbar {
  width: 7px;
}

#v-quytrinh::-webkit-scrollbar-track {
  background: transparent;
}

#v-quytrinh::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.13);
  border-radius: 10px;
}


/* =========================================================
   HEADER
   ========================================================= */

#v-quytrinh > h1.page {
  flex: none;
  margin: 0 0 5px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.02em;
}

#v-quytrinh > h1.page .help {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  margin-left: 7px;

  border: 1px solid var(--line2);
  border-radius: 50%;

  color: var(--muted);
  font-size: 11px;
  vertical-align: middle;
}


/* =========================================================
   CARD CHUNG
   ========================================================= */

.wf-card,
.wf-bar,
.wf-lenh,
.wf-tomtat,
.wf-sk,
.wf-xoa,
.wf-gap,
.wf-cfg{
  box-sizing: border-box;
}

.wf-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.wf-card:hover {
  border-color: rgba(255,255,255,.13);
}

.wf-card.sel {
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
}

.wf-card.off {
  opacity: .45;
}

.wf-card.blocked {
  border-color: rgba(245,158,11,.45);
  background: rgba(245,158,11,.045);
}

.wf-card.run {
  border-color: var(--cyan);
  box-shadow:
    0 0 0 1px rgba(56,189,248,.16),
    0 10px 30px rgba(56,189,248,.08);
}

.wf-card.done {
  border-color: rgba(34,197,94,.55);
}


/* =========================================================
   1. THANH CHẠY 24/24
   ========================================================= */

.wf-bar {
  flex: none;

  display: flex;
  align-items: center;
  gap: 14px;

  margin-top: 16px;
  padding: 12px 14px;

  background:
    linear-gradient(
      90deg,
      rgba(124,92,255,.075),
      rgba(255,61,138,.025) 55%,
      transparent
    );

  border: 1px solid rgba(124,92,255,.18);
  border-radius: 13px;

  box-shadow: var(--shadow);
}

.wf-bar-l {
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;
  flex-wrap: wrap;
}

.wf-bar-l .btn.go {
  position: relative;

  min-width: 225px;
  height: 42px;

  padding: 0 22px;

  border: 0;
  border-radius: 10px;

  background: var(--grad);
  color: #fff;

  font-size: 14px;
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 7px 20px rgba(124,92,255,.22);

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

.wf-bar-l .btn.go:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 9px 25px rgba(124,92,255,.32);
}

.wf-bar-l .btn.go:active {
  transform: translateY(0);
}

.wf-bar-l .btn.go.dang {
  background: linear-gradient(120deg,#ef4444,#b91c1c);
  box-shadow: 0 7px 20px rgba(239,68,68,.25);
}

.wf-phu {
  height: 38px;

  padding: 0 13px;

  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 9px;

  color: var(--muted);

  font: inherit;
  font-size: 12px;

  cursor: pointer;

  transition: .15s;
}

.wf-phu:hover {
  color: var(--text);
  border-color: rgba(124,92,255,.55);
  background: rgba(124,92,255,.07);
}

#wfStopBtn {
  height: 38px;
}

.wf-stat {
  min-width: 0;

  color: var(--muted);
  font-size: 12px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf-stat.run {
  color: var(--cyan);
}

.wf-stat.done {
  color: var(--ok);
}

.wf-stat.err {
  color: var(--warn);
}

.wf-bar-r {
  margin-left: auto;

  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;

  color: var(--muted);
  font-size: 12px;
}


/* =========================================================
   2. SỨC KHỎE
   ========================================================= */

.wf-sk {
  flex: none;

  display: flex;
  align-items: center;

  min-height: 42px;

  margin-top: 9px;
  padding: 8px 12px;

  background: var(--card);

  border: 1px solid var(--line);
  border-left: 3px solid var(--ok);

  border-radius: 10px;

  font-size: 12px;
  line-height: 1.45;
}

.wf-sk.vang {
  border-left-color: var(--warn);
}

.wf-sk.do {
  border-left-color: var(--danger);
  background: rgba(239,68,68,.055);
}

.wf-sk-t {
  display: flex;
  align-items: center;
  gap: 9px;

  width: 100%;
  min-width: 0;

  flex-wrap: wrap;
}

.wf-sk-t b {
  color: var(--text);
}

.wf-sk-ph {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}

.wf-sk-ds {
  display: flex;
  flex-direction: column;
  gap: 4px;

  margin-top: 6px;
}

.wf-sk-i {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.wf-sk-i .ic {
  flex: none;
}

.wf-sk-i .gy {
  color: var(--muted);
  font-size: 11px;
}


/* =========================================================
   3. RA LỆNH BẰNG LỜI
   ========================================================= */

.wf-lenh {
  flex: none;

  margin-top: 9px;
  padding: 0;

  background: rgba(255,255,255,.018);
  border: 1px solid var(--line);
  border-radius: 10px;

  overflow: hidden;
}

.wf-lenh-gon {
  display: flex;
  align-items: center;
  gap: 8px;

  min-height: 40px;

  padding: 0 12px;

  color: var(--muted);

  font-size: 12px;

  cursor: pointer;
  user-select: none;
}

.wf-lenh-gon b {
  color: var(--text);
}

.wf-lenh-gon .chev {
  margin-left: auto;
  transition: transform .18s ease;
}

.wf-lenh:not(.gon) .wf-lenh-gon .chev {
  transform: rotate(180deg);
}

.wf-lenh-r {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;

  padding: 10px 12px;
}

.wf-lenh.gon .wf-lenh-r,
.wf-lenh.gon .wf-hieu {
  display: none;
}

.wf-lenh-r input.num,
.wf-key-r input.num {
  min-width: 0;
  padding: 7px 10px;

  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 8px;

  color: var(--text);
  font: inherit;
  font-size: 12px;

  outline: none;
}

.wf-lenh-r input.num {
  flex: 1;
}

.wf-lenh-r #wfKeyIn {
  flex: 0 1 210px;
  min-width: 150px;
}

.wf-lenh-r input.num:focus,
.wf-key-r input.num:focus {
  border-color: var(--accent);
}

.wf-vd {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;

  font-size: 11px;
}

.wf-vd button {
  padding: 3px 9px;

  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 999px;

  color: var(--muted);
  font-size: 11px;

  cursor: pointer;
}

.wf-vd button:hover {
  color: var(--text);
  border-style: solid;
}

.wf-lenh:has(.wf-hieu.show) .wf-vd {
  display: none;
}

.wf-hieu {
  display: none;

  margin: 0 12px 12px;
  padding: 10px 12px;

  background: rgba(124,92,255,.07);
  border: 1px solid rgba(124,92,255,.4);
  border-radius: 9px;

  color: var(--text);

  font-size: 12px;
  line-height: 1.55;
}

.wf-hieu.show {
  display: block;
}

.wf-hieu-btn {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;

  margin-top: 8px;
}

.wf-lenh-tat {
  flex: 1;
  min-width: 180px;

  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.wf-lenh-tat b {
  color: var(--text);
}

.wf-lenh-tat a,
.wf-key-l a {
  color: var(--cyan);
  font-weight: 600;
  text-decoration: none;
}

.wf-lenh-ok {
  margin-top: 5px;

  color: var(--muted);
  font-size: 11px;
}

.wf-lenh-ok b {
  color: var(--ok);
}


/* =========================================================
   4. KÊNH MỚI
   ========================================================= */

.wf-kmoi {
  display: none;

  margin-top: 9px;
  padding: 9px 12px;

  background: rgba(34,197,94,.035);
  border: 1px solid rgba(34,197,94,.18);
  border-left: 3px solid var(--ok);

  border-radius: 10px;

  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.wf-kmoi.show {
  display: block;
}

.wf-kmoi b {
  color: var(--text);
}

.wf-km-ds {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;

  margin-top: 5px;
}

.wf-km-ds button {
  padding: 3px 9px;

  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 999px;

  color: var(--text);
  font-size: 11px;

  cursor: pointer;
}

.wf-km-ds button:hover {
  border-color: var(--accent);
}

.wf-km-ds button.da {
  opacity: .45;
  cursor: default;
}


/* =========================================================
   5. "SẼ CHẠY GÌ"
   ========================================================= */

.wf-tomtat {
  flex: none;

  display: flex;
  align-items: flex-start;
  gap: 9px;

  min-height: 42px;

  margin-top: 9px;
  padding: 8px 12px;

  background:
    linear-gradient(
      90deg,
      rgba(124,92,255,.075),
      transparent 65%
    );

  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);

  border-radius: 10px;

  font-size: 12.5px;
  line-height: 1.5;
}

.wf-tomtat .wf-tt-ic {
  flex: none;
  font-size: 15px;
}

.wf-tomtat b {
  color: var(--accent2);
}

.wf-tomtat.xau {
  border-left-color: var(--warn);
}

.wf-tomtat.xau b {
  color: var(--warn);
}

.wf-tt-loha {
  display: block;

  margin-top: 2px;

  color: var(--muted);
  font-size: 10.5px;
}

.wf-tt-den {
  display: inline-block;

  max-width: 340px;

  margin-left: 6px;
  padding: 1px 7px;

  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.3);
  border-radius: 999px;

  color: var(--ok);
  font-size: 10.5px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  vertical-align: bottom;
}


/* =========================================================
   6. DÂY CHUYỀN 3 BƯỚC
   ========================================================= */

#wfFlow {
  flex: none;

  display: grid;
  grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr);
  align-items: stretch;

  width: 100%;

  margin-top: 12px;
}

.wf-strip > .wf-card {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 7px;

  padding: 12px 13px;

  border-radius: 12px;
}

.wf-strip > .wf-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--muted2);
  font-size: 15px;

  user-select: none;
}

.wf-strip > .wf-arrow.dim {
  opacity: .3;
}


/* ---------- HEADER CARD ---------- */

.wf-s-top {
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;
}

.wf-no {
  flex: none;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  border-radius: 50%;

  background: var(--card2);
  border: 1px solid var(--line);

  color: var(--muted);

  font-size: 12px;
  font-weight: 800;
}

.wf-card:not(.off):not(.blocked) .wf-no {
  background: linear-gradient(135deg,var(--accent),#9f7cff);
  border-color: transparent;
  color: #fff;
}

.wf-s-ic {
  flex: none;

  font-size: 17px;
  line-height: 1;
}

.wf-s-ten {
  min-width: 0;

  color: var(--text);

  font-size: 13px;
  font-weight: 800;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf-den {
  flex: none;

  margin-left: auto;

  padding: 2px 7px;

  border: 1px solid var(--line);
  border-radius: 999px;

  color: var(--muted);

  font-size: 9.5px;
  font-weight: 700;

  white-space: nowrap;
}

.wf-den.san,
.wf-den.xong {
  color: var(--ok);
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.07);
}

.wf-den.thieu,
.wf-den.loi {
  color: var(--warn);
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.07);
}

.wf-den.chay {
  color: var(--cyan);
  border-color: rgba(56,189,248,.35);
  background: rgba(56,189,248,.07);
}


/* ---------- CARD BODY ---------- */

.wf-s-chon {
  min-width: 0;

  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf-s-tt {
  min-width: 0;

  color: var(--muted);
  font-size: 10.5px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf-s-day {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-top: auto;
  padding-top: 4px;

  min-height: 23px;
}

.wf-s-day > .sub {
  margin-left: auto;

  color: var(--muted);
  font-size: 10px;
}.wf-sw {
  position: relative;

  flex: none;

  width: 34px;
  height: 19px;

  border-radius: 999px;

  background: #36394b;

  cursor: pointer;

  transition: background .15s ease;
}

.wf-sw.on {
  background: var(--accent);
}

.wf-sw::after {
  content: "";

  position: absolute;

  top: 2.5px;
  left: 2.5px;

  width: 14px;
  height: 14px;

  border-radius: 50%;

  background: #fff;

  transition: left .15s ease;
}

.wf-sw.on::after {
  left: 17.5px;
}


/* ---------- CARD ACTIVE POINTER ---------- */

.wf-strip > .wf-card.sel::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -7px;

  width: 12px;
  height: 12px;

  margin-left: -6px;

  background: var(--card);

  border-left: 1px solid var(--accent);
  border-top: 1px solid var(--accent);

  transform: rotate(225deg);

  z-index: 3;
}

.wf-strip > .wf-card.sel {
  z-index: 2;
}


/* =========================================================
   7. VÙNG CẤU HÌNH ĐANG CHỌN
   ========================================================= */

.wf-lane {
  flex: none;

  min-height: 0;

  padding: 0;

  overflow: visible;
}

#wfConfig {
  width: 100%;
  box-sizing: border-box;

  margin-top: 9px;
}

.wf-cfg {
  background: var(--card);

  border: 1px solid rgba(124,92,255,.42);
  border-radius: 12px;

  padding: 14px 15px;

  box-shadow:
    0 0 0 1px rgba(124,92,255,.07),
    0 10px 30px rgba(0,0,0,.18);
}

.wf-cfg:empty {
  display: none;
}

.wf-cfg-head {
  display: flex;
  align-items: center;
  gap: 9px;

  min-height: 28px;

  padding: 0 1px 10px;
  margin-bottom: 11px;

  border-bottom: 1px solid var(--line);
}

.wf-cfg-head .tt {
  flex: 1;
  min-width: 0;

  color: var(--text);

  font-size: 13px;
  font-weight: 800;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wf-cfg-gon {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  padding: 5px 10px;

  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 999px;

  color: var(--muted);

  font-size: 11px;

  cursor: pointer;
  white-space: nowrap;
}

.wf-cfg-gon:hover {
  color: var(--text);
  border-color: var(--accent);
}

.wf-cfg-gon .chev {
  transition: transform .18s ease;
}

.wf-cfg.gon .wf-cfg-gon .chev {
  transform: rotate(-90deg);
}

.wf-cfg.gon > *:not(.wf-cfg-head) {
  display: none !important;
}

.wf-cfg.gon {
  padding-bottom: 12px;
}


/* =========================================================
   8. FORM CẤU HÌNH
   ========================================================= */

.wf-cfg h3 {
  margin: 0 0 3px;

  font-size: 15px;
  line-height: 1.3;
}

.wf-cfg .hint {
  margin: 0 0 13px;

  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.wf-row {
  margin-bottom: 9px;
}

.wf-row > label {
  display: block;

  margin-bottom: 5px;

  color: var(--text);

  font-size: 12px;
  font-weight: 600;
}

.wf-doi {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 9px;
}

.wf-doi > .wf-row {
  margin-bottom: 0;
}

.wf-seg2 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.wf-seg2 button {
  padding: 6px 11px;

  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 8px;

  color: var(--text);

  font-size: 12px;

  cursor: pointer;
}

.wf-seg2 button:hover {
  border-color: rgba(124,92,255,.55);
}

.wf-seg2 button.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.wf-cfg input.num,
.wf-cfg textarea.num,
.wf-cfg select.num {
  width: 100%;
  box-sizing: border-box;

  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 8px;

  color: var(--text);

  outline: none;
}

.wf-cfg input.num:focus,
.wf-cfg textarea.num:focus,
.wf-cfg select.num:focus {
  border-color: var(--accent);
}.wf-off-note {
  color: var(--muted);
  font-size: 11.5px;
}


/* =========================================================
   9. ĐA KÊNH
   ========================================================= */

.wf-kenh {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.wf-kenh-i {
  padding: 8px 10px;

  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.wf-kenh-i.thieu {
  background: rgba(245,158,11,.045);
  border-color: rgba(245,158,11,.35);
}

.wf-kenh-i.chon {
  border-color: var(--accent);
  background: rgba(124,92,255,.06);
}

.wf-kenh-t {
  display: flex;
  align-items: center;
  gap: 7px;

  min-width: 0;
}

.wf-kenh-so {
  flex: none;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  border-radius: 50%;

  background: var(--accent);
  color: #fff;

  font-size: 10px;
  font-weight: 800;
}

.wf-kenh-ten {
  flex: 1;
  min-width: 70px;

  padding: 2px 2px 3px;

  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--line);

  color: var(--text);

  font-size: 12.5px;
  font-weight: 700;

  outline: none;
}

.wf-kenh-ten:focus {
  border-bottom-color: var(--accent);
}

.wf-kenh-xoa {
  flex: none;

  padding: 2px 4px;

  background: transparent;
  border: 0;

  color: var(--muted);

  font-size: 13px;

  cursor: pointer;
}

.wf-kenh-xoa:hover {
  color: var(--warn);
}

.wf-kenh-o {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-top: 6px;
}

.wf-kenh-o > label {
  flex: none;
  width: 140px;

  color: var(--muted);
  font-size: 11px;
}

.wf-kenh-o > input {
  flex: 1;
  min-width: 0;

  padding: 5px 8px;

  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 7px;

  color: var(--text);

  font-size: 11.5px;

  text-overflow: ellipsis;
}

.wf-kenh-o > input:hover {
  border-color: var(--accent);
}

.wf-kenh-o > input::placeholder {
  color: var(--warn);
  opacity: .8;
}.wf-kenh-n {
  flex: none;

  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.wf-kenh-rong {
  padding: 14px 4px;

  color: var(--muted);

  font-size: 12px;
  text-align: center;
}/* =========================================================
   10. HIGHLIGHT / BULK CHANNEL
   ========================================================= */

.wf-hl {
  margin-bottom: 8px;
  padding: 8px 10px;

  background:
    linear-gradient(
      90deg,
      rgba(124,92,255,.09),
      transparent
    );

  border: 1px solid var(--line);
  border-radius: 9px;
}

.wf-hl > b {
  font-size: 12px;
}

/* ── BẢNG 4 BƯỚC (25/08) — chỉ đường cho khách nontech ────────────────────────
   Vì sao có: chụp màn hình thật cho thấy nút to nhất là "▶ Bắt đầu chạy tự động",
   bấm lúc 0 kênh thì không ra gì; còn "🔎 Tìm kênh nguồn theo từ khoá" — bước
   KHÔNG THỂ THIẾU — thì nằm trong `⚙ Cài đặt kênh…`, không ai tự tìm ra.
   Bảng này KHÔNG thêm tính năng nào: mỗi bước gọi đúng hàm đã có sẵn. */
.wf-buoc {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-wrap: wrap;

  margin: 2px 0 9px;
}

.wf-buoc-i {
  flex: 1 1 150px;
  min-width: 0;

  display: flex;
  align-items: flex-start;
  gap: 7px;

  padding: 8px 10px;
  text-align: left;

  background: var(--card2, rgba(255,255,255,.03));
  border: 1px solid var(--line);
  border-radius: 9px;

  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.wf-buoc-i:hover { border-color: var(--accent, #7c5cff); }

/* bước ĐANG TỚI LƯỢT — chỉ MỘT cái sáng, để mắt biết bấm đâu */
.wf-buoc-i.nay {
  background: rgba(124,92,255,.12);
  border-color: var(--accent, #7c5cff);
  color: var(--ink, #e8e8f0);
}

.wf-buoc-i.xong { opacity: .72; }
.wf-buoc-i.xong .wf-buoc-s {
  background: var(--ok, #22c55e);
  border-color: var(--ok, #22c55e);
  color: #04120a;
}

.wf-buoc-s {
  flex: none;

  width: 19px;
  height: 19px;
  margin-top: 1px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;

  font-size: 11px;
  font-weight: 800;
}

.wf-buoc-i.nay .wf-buoc-s {
  background: var(--accent, #7c5cff);
  border-color: var(--accent, #7c5cff);
  color: #fff;
}

.wf-kenh-g {
  display: block;
  margin: -3px 0 3px;
  color: var(--muted);
  font-size: 10.5px;
}

.wf-buoc-t { display: block; font-size: 12px; font-weight: 700; line-height: 1.35; }
.wf-buoc-p { display: block; margin-top: 2px; font-size: 10.5px; opacity: .85; line-height: 1.4; }

/* mũi tên giữa các bước — ẩn khi xuống dòng cho khỏi rối */
.wf-buoc-m {
  flex: none;
  align-self: center;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 760px) { .wf-buoc-m { display: none; } }

/* chú giải HAI NGHĨA của chữ "kênh" — chỗ nontech lẫn nhiều nhất */
.wf-tuvung {
  margin: 0 0 8px;
  padding: 7px 10px;

  background: rgba(255,255,255,.02);
  border-left: 3px solid var(--line);
  border-radius: 0 8px 8px 0;

  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.wf-tuvung b { color: var(--ink, #e8e8f0); }

.wf-hl-r {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;

  margin-top: 5px;

  color: var(--muted);
  font-size: 11px;
}

.wf-hl-r input {
  width: 52px;

  padding: 3px 5px;

  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  border-radius: 6px;

  color: var(--text);

  font-size: 11px;
  text-align: center;
}

.wf-hl-s {
  color: var(--muted);
}

.wf-hl-s.xau {
  color: var(--warn);
}

.wf-hl-s.tot {
  color: var(--ok);
}

.wf-hl-s b {
  color: var(--text);
}

.wf-hl-s code {
  padding: 1px 5px;

  background: rgba(255,255,255,.05);
  border-radius: 4px;
}

/* ---------- 9b. HÀNG KÊNH GỌN (chịu 1000 kênh) --------------------------------------------
   Thẻ béo cũ: 122px/kênh, 4 ô nhập/kênh. Hàng gọn: ~30px, 1 ô tick. Hai thư mục chỉ hiện khi
   BẤM MỞ — mở một hàng tại một thời điểm, nên chiều cao danh sách không bao giờ phình lại. */

.wf-hang {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wf-kenh-i.k-gon {
  padding: 0;

  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
}

.wf-kenh-i.k-gon:hover {
  background: var(--card2);
  border-color: var(--line);
}

.wf-kenh-i.k-gon.mo {
  padding-bottom: 8px;

  background: var(--card2);
  border-color: var(--accent);
}

.wf-kenh-i.k-gon.thieu {
  background: rgba(245,158,11,.05);
  border-color: rgba(245,158,11,.28);
}

.wf-kenh-i.k-gon.chon {
  background: rgba(124,92,255,.08);
  border-color: var(--accent);
}

.wf-kenh-i.k-gon > .wf-kenh-t {
  gap: 8px;
  padding: 4px 8px;

  min-height: 30px;
}

.wf-kenh-i.k-gon .wf-kenh-so {
  width: 18px;
  height: 18px;

  font-size: 10px;
}

.wf-kenh-i.k-gon .k-ten {
  flex: 1 1 auto;

  padding: 2px 2px;

  min-width: 0;
  overflow: hidden;

  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.wf-kenh-i.k-gon .k-ten:hover {
  color: var(--accent);
  text-decoration: underline dotted;
}

.wf-kenh-i.k-gon .wf-kenh-n {
  flex: 0 1 auto;

  max-width: 46%;
  overflow: hidden;

  font-size: 11px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k-nut {
  flex: none;

  /* ĐO 23/08: cao 14px — dưới ngưỡng bấm 24px, mà một trong hai nút là 🗑 XOÁ KÊNH
     (mất cả cấu hình 2 thư mục + danh sách nguồn). Nới vùng bấm, KHÔNG đổi cỡ chữ. */
  min-width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 1px 5px;

  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.k-nut:hover {
  background: rgba(255,255,255,.07);
  color: var(--text);
}

.k-nut.xoa:hover {
  color: var(--warn);
}

.k-than {
  padding: 2px 10px 0 34px;

  border-top: 1px dashed var(--line);
  margin-top: 2px;
}

/* ---------- 9c. TÌM + LỌC ----------------------------------------------------------------- */

.wf-loc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 8px;
}

.wf-loc-tim {
  flex: 1 1 230px;

  padding: 5px 10px;

  min-width: 0;

  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  font-size: 12px;
}

.wf-loc-tim:focus {
  border-color: var(--accent);
  outline: 0;
}

.wf-loc-c {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.wf-chip {
  padding: 4px 9px;

  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.wf-chip b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.wf-chip:hover {
  border-color: var(--accent);
}

.wf-chip.on {
  background: rgba(124,92,255,.16);
  border-color: var(--accent);
  color: var(--text);
}

.wf-chip.xau b {
  color: var(--warn);
}

.wf-chip.tot b {
  color: var(--ok);
}

.wf-them {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  padding: 9px 2px 2px;

  color: var(--muted);
  font-size: 11.5px;
}

.wf-them b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---------- 9d. CHIP TRẠNG THÁI HÀNG KÊNH -------------------------------------------------
   Góp ý ChatGPT: ở 1000 dòng, "chữ xanh nhỏ nép phải" không quét được. Trạng thái phải nhận
   ra bằng MÀU + HÌNH trước khi đọc chữ. Năm trạng thái, mỗi cái một màu, cùng bề rộng tối
   thiểu để mắt dóng thành cột. */

.k-tt {
  flex: none;

  display: inline-block;
  padding: 1px 8px;

  min-width: 104px;

  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.k-tt::before {
  margin-right: 5px;
}

.k-tt.san    { background: rgba(22,163,74,.14);  border-color: rgba(22,163,74,.4);  color: #4ade80; }
.k-tt.san::before    { content: "🟢"; }
.k-tt.het    { background: rgba(234,179,8,.12);  border-color: rgba(234,179,8,.34); color: #eab308; }
.k-tt.het::before    { content: "🟡"; }
.k-tt.thieu  { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.42); color: #f59e0b; }
.k-tt.thieu::before  { content: "🟠"; }
.k-tt.loi    { background: rgba(239,68,68,.14);  border-color: rgba(239,68,68,.42); color: #f87171; }
.k-tt.loi::before    { content: "🔴"; }
.k-tt.dem    { background: rgba(255,255,255,.05); border-color: var(--line); color: var(--muted); }
.k-tt.dem::before    { content: "⋯"; }

.k-phu {
  overflow: hidden;

  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k-phu b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.wf-kenh-i.k-gon .wf-kenh-n {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  max-width: 56%;

  color: inherit;
}

/* ---------- 9e. SỐ VẬN HÀNH TRÊN DẢI SỨC KHOẺ ---------------------------------------------
   "Heartbeat ≠ health": nhịp đập chỉ chứng minh vòng nền còn sống. Đây là mấy con số khách
   thật sự hỏi mỗi ngày. Nhãn nhỏ nằm TRÊN số — một dãy số trần thì không đọc được. */

.wf-sk-so {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;

  padding: 7px 2px 1px;
  margin-top: 6px;

  border-top: 1px dashed var(--line);
}

.wf-sk-so > span {
  display: flex;
  flex-direction: column;
  gap: 1px;

  color: var(--text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.wf-sk-so i {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wf-sk-so b.xau {
  color: var(--warn);
}

/* ---------- 9f. NÉN KHỐI TRÊN --------------------------------------------------------------
   Đo thật: hàng kênh đầu tiên bắt đầu ở 781px. Khách vào tab này để coi hàng trăm kênh, không
   phải đọc hướng dẫn. Ba khối bị nén (KHÔNG bỏ chức năng nào):
     · băng tóm tắt  — nói lại đúng thứ 3 thẻ ngay dưới đã nói ⇒ ép về MỘT dòng
     · thanh ra lệnh — công cụ SETUP, không phải giám sát ⇒ mỏng lại
     · 3 thẻ bước    — 144px chỉ để nói trạng thái 3 bước ⇒ bỏ dòng lặp, siết đệm */

.wf-tomtat {
  align-items: center;
  padding: 5px 12px;

  font-size: 11.5px;
  line-height: 1.45;
}

.wf-lenh.gon .wf-lenh-gon {
  padding: 7px 12px;

  font-size: 11.5px;
}

.wf-strip .wf-card {
  padding: 8px 10px;

  gap: 3px;
}

/* Dòng này lặp lại đúng chữ trên thẻ lựa chọn ngay dưới nó — bỏ đi thì thẻ thấp hẳn mà không
   mất tin nào (chữ vẫn còn ở `.wf-s-chon`). */
.wf-strip .wf-card .wf-s-chon {
  display: none;
}

.wf-strip .wf-s-top {
  gap: 6px;
}

.wf-strip .wf-s-tt {
  font-size: 11px;
}

.wf-strip .wf-s-day {
  margin-top: 2px;
}

.wf-lenh.gon #wfLenhRow {
  display: none;
}

/* Băng này nói lại đúng thứ 3 thẻ ngay dưới đã nói — ép về MỘT dòng, phần dư đưa vào tooltip. */
#wfTomTatTxt {
  display: block;
  overflow: hidden;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Điều khiển của CÙNG một danh sách ⇒ cùng một hàng. */
.wf-ksel {
  padding: 0;
}

.wf-loc {
  row-gap: 6px;
}

/* Chữ trạng thái cạnh ô tick BẬT-MỤC — phân biệt với ô tick CHỌN-KÊNH bên trái. */
.kcf-sd {
  padding: 1px 7px;
  margin-left: 7px;

  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
}

.kcf-sd.on {
  background: rgba(124,92,255,.18);
  border-color: var(--accent);
  color: var(--text);
}

.kcf-dem.canh {
  border-color: var(--warn);
  color: var(--warn);
}

/* Chỗ ĐÃ DỜI ĐI — nói ra nó ở đâu, đừng để khách đi tìm. */
.kcf-di {
  padding: 9px 11px;

  background: rgba(255,255,255,.03);
  border: 1px dashed var(--line);
  border-radius: 9px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.kcf-di b {
  color: var(--text);
}

.chip-add.wf-hl-chinh {
  background: var(--grad);
  border: 0;
  color: #fff;
  font-weight: 700;
}


/* =========================================================
   11. API KEY
   ========================================================= */

.wf-key {
  display: flex;
  flex-direction: column;
  gap: 5px;

  margin-top: 8px;
}

.wf-key-r {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.wf-key-r input.num {
  flex: 1;
  min-width: 200px;
}

.wf-key-l {
  color: var(--muted);
  font-size: 11px;
}

.wf-key-m {
  min-height: 1em;

  color: var(--muted);
  font-size: 11.5px;
}


/* =========================================================
   12. XOÁ GỐC
   ========================================================= */

.wf-xoa {
  margin-top: 10px;
  padding: 9px 12px;

  background: rgba(245,158,11,.025);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);

  border-radius: 10px;
}

.wf-xoa-l {
  display: flex;
  align-items: center;
  gap: 8px;

  color: var(--text);

  font-size: 12.5px;

  cursor: pointer;
}

.wf-xoa-l input {
  flex: none;

  width: 16px;
  height: 16px;

  accent-color: var(--warn);

  cursor: pointer;
}

.wf-xoa-d {
  margin-top: 5px;

  color: var(--muted);

  font-size: 11px;
  line-height: 1.5;
}

.wf-xoa-d b {
  color: var(--text);
}

.wf-xoa-w {
  margin-top: 4px;

  color: var(--warn);

  font-size: 10.5px;
}


/* =========================================================
   13. PRESET / LOG — KHU VỰC PHỤ
   ========================================================= */

.wf-gap {
  margin-top: 8px;

  background: rgba(255,255,255,.015);
  border: 1px solid var(--line);
  border-radius: 10px;

  overflow: hidden;
}

.wf-gap > summary {
  display: flex;
  align-items: center;

  min-height: 38px;

  padding: 0 12px;

  color: var(--muted);

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
  user-select: none;

  list-style: none;
}

.wf-gap > summary::-webkit-details-marker {
  display: none;
}

.wf-gap > summary::before {
  content: "\25B8";

  margin-right: 7px;

  color: var(--muted2);

  transition: transform .15s ease;
}

.wf-gap[open] > summary::before {
  content: "\25BE";
}

.wf-gap[open] > summary {
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.wf-luu {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;

  margin-top: 0;
  padding: 10px 12px;
}

.wf-luu .num {
  min-width: 160px;
}

.wf-luu input.num {
  flex: 1;
  max-width: 230px;
}

.wf-logbox {
  display: flex;
  flex-direction: column;

  height: 165px;

  background: #0b0d16;

  overflow: hidden;
}.wf-logbox-b {
  flex: 1;

  padding: 10px 12px;

  overflow: auto;

  color: #d4d4d8;

  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;

  white-space: pre-wrap;
}


/* =========================================================
   14. LOG CŨ
   ========================================================= */

.wf-log {
  margin-top: 7px;
  padding: 7px 9px;

  max-height: 120px;

  background: #0b0d16;
  border: 1px solid var(--line);
  border-radius: 8px;

  color: var(--muted);

  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10.5px;

  overflow: auto;
  white-space: pre-wrap;
}/* =========================================================
   16. BUTTON / CHIP DÙNG LẠI
   ========================================================= */

.chip-add {
  min-height: 32px;

  padding: 6px 11px;

  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 8px;

  color: var(--text);

  font-size: 11.5px;

  cursor: pointer;

  transition: .15s;
}

.chip-add:hover {
  border-color: rgba(124,92,255,.55);
  background: rgba(124,92,255,.08);
}

.chip-add.fdanger:hover {
  border-color: rgba(239,68,68,.5);
  color: #fca5a5;
}


/* =========================================================
   17. MODAL CẤU HÌNH KÊNH
   ========================================================= */

.kcf-nen {
  position: fixed;
  inset: 0;
  z-index: 100000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(4,6,14,.78);

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.kcf-hop {
  display: flex;
  flex-direction: column;

  width: min(1020px,96vw);
  max-height: 90vh;

  background: var(--card);

  border: 1px solid var(--line2);
  border-radius: 14px;

  box-shadow: 0 28px 70px rgba(0,0,0,.65);

  overflow: hidden;
}

.kcf-dau {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 13px 17px;

  border-bottom: 1px solid var(--line);
}

.kcf-dau h3 {
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 0;

  font-size: 15px;
  font-weight: 800;
}

.kcf-dem {
  padding: 3px 9px;

  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 999px;

  color: var(--muted);

  font-size: 11px;
}

.kcf-dem b {
  color: var(--accent);
}

.kcf-x {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  margin-left: auto;

  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;

  color: var(--muted);

  cursor: pointer;
}

.kcf-x:hover {
  color: var(--text);
  border-color: var(--line2);
}

.kcf-than {
  display: grid;

  grid-template-columns: minmax(260px,.9fr) minmax(340px,1.1fr);

  min-height: 0;

  overflow: hidden;
}

.kcf-trai {
  display: flex;
  flex-direction: column;

  min-height: 0;

  border-right: 1px solid var(--line);
}

.kcf-tim {
  display: flex;
  flex-direction: column;
  gap: 7px;

  padding: 11px 12px;

  border-bottom: 1px solid var(--line);
}

.kcf-tim input.o {
  width: 100%;
  box-sizing: border-box;

  padding: 8px 10px;

  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 8px;

  color: var(--text);

  font: inherit;
  font-size: 12px;

  outline: none;
}

.kcf-tim input.o:focus {
  border-color: var(--accent);
}

.kcf-nut {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.kcf-nut button {
  padding: 4px 9px;

  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 999px;

  color: var(--muted);

  font-size: 10.5px;

  cursor: pointer;
}

.kcf-nut button:hover {
  color: var(--text);
  border-color: var(--accent);
}

.kcf-ds {
  flex: 1;

  padding: 7px;

  overflow: auto;
}

.kcf-h {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 8px 9px;

  border: 1px solid transparent;
  border-radius: 8px;

  cursor: pointer;
}

.kcf-h:hover {
  background: rgba(255,255,255,.03);
}

.kcf-h.on {
  background: rgba(124,92,255,.1);
  border-color: rgba(124,92,255,.45);
}

.kcf-h input {
  flex: none;

  width: 15px;
  height: 15px;

  accent-color: var(--accent);

  cursor: pointer;
}

.kcf-h .ten {
  flex: 1;
  min-width: 0;

  color: var(--text);

  font-size: 12px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kcf-h .ten small {
  display: block;

  margin-top: 1px;

  color: var(--muted);

  font-size: 10px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kcf-tt {
  flex: none;

  padding: 2px 7px;

  border: 1px solid;
  border-radius: 999px;

  font-size: 9.5px;
  font-weight: 700;
}

.kcf-tt.du {
  color: var(--ok);
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.07);
}

.kcf-tt.thieu {
  color: var(--warn);
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.07);
}

.kcf-rong {
  padding: 24px 12px;

  color: var(--muted);

  font-size: 12px;
  text-align: center;
}

.kcf-loai {
  flex: none;

  padding: 2px 6px;

  border: 1px solid var(--line);
  border-radius: 5px;

  color: var(--muted);

  font-size: 9px;
  font-weight: 700;
}

.kcf-loai.kenh {
  color: var(--accent);
  border-color: rgba(124,92,255,.4);
}

.kcf-loai.tk {
  color: #00d4ff;
  border-color: rgba(0,212,255,.35);
}

.kp-tab {
  display: flex;
  flex-direction: column;
  gap: 5px;

  padding: 8px 12px;

  border-bottom: 1px solid var(--line);
}

.kp-tab-h {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.kp-tab-h > b {
  min-width: 55px;

  color: var(--muted);

  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kp-chip {
  padding: 3px 9px;

  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 999px;

  color: var(--muted);

  font-size: 10.5px;

  cursor: pointer;
}

.kp-chip:hover {
  color: var(--text);
  border-color: var(--accent);
}

.kp-chip.on {
  background: rgba(124,92,255,.13);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 700;
}

.kp-chip i {
  margin-left: 3px;
  opacity: .6;
  font-style: normal;
}

.kp-av {
  flex: none;

  width: 28px;
  height: 28px;

  border-radius: 50%;

  object-fit: cover;

  background: var(--card2);
}

.kp-tk {
  color: var(--muted);
  font-size: 10px;
}

.kp-daco {
  padding: 2px 6px;

  border: 1px solid rgba(34,197,94,.35);
  border-radius: 5px;

  color: var(--ok);
  background: rgba(34,197,94,.07);

  font-size: 9px;
  font-weight: 700;
}

.kp-log {
  max-height: 110px;

  margin-top: 7px;
  padding: 7px 9px;

  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;

  color: var(--muted);

  font-size: 10.5px;
  line-height: 1.6;

  overflow: auto;
  white-space: pre-wrap;
}

.kcf-so {
  flex: none;

  color: var(--muted);

  font-size: 10.5px;
}

.kcf-so b {
  color: var(--text);
}

.kcf-phai {
  padding: 12px 15px;

  overflow: auto;
}

.kcf-tieu {
  margin: 2px 0 8px;

  color: var(--muted);

  font-size: 9.5px;
  font-weight: 700;

  letter-spacing: .1em;
  text-transform: uppercase;
}

.kcf-d {
  margin-bottom: 8px;
  padding: 9px 11px;

  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.kcf-d.tat {
  opacity: .5;
}

.kcf-d > label.b {
  display: flex;
  align-items: center;
  gap: 8px;

  color: var(--text);

  font-size: 12px;
  font-weight: 600;

  cursor: pointer;
}

.kcf-d > label.b input {
  width: 15px;
  height: 15px;

  accent-color: var(--accent);
}

.kcf-in {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;

  margin-top: 8px;
}

.kcf-in input {
  min-width: 0;

  padding: 7px 9px;

  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;

  color: var(--text);

  font: inherit;
  font-size: 11.5px;

  outline: none;
}

.kcf-in input.duong {
  flex: 1;
  min-width: 150px;
}

.kcf-in input:focus {
  border-color: var(--accent);
}

.kcf-in button {
  padding: 6px 10px;

  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 8px;

  color: var(--text);

  font-size: 11px;

  cursor: pointer;
}

.kcf-in button:hover {
  border-color: var(--accent);
}

.kcf-xt {
  margin-top: 6px;

  color: var(--muted);

  font-size: 10.5px;
  line-height: 1.5;

  word-break: break-all;
}

.kcf-xt code {
  padding: 1px 4px;

  background: rgba(255,255,255,.05);
  border-radius: 4px;

  color: var(--text);
}

.kcf-cuoi {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 11px 17px;

  border-top: 1px solid var(--line);

  flex-wrap: wrap;
}

.kcf-cuoi .tin {
  flex: 1;
  min-width: 150px;

  color: var(--muted);
  font-size: 11.5px;
}

.kcf-cuoi .tin b {
  color: var(--text);
}

.kcf-huy {
  padding: 8px 13px;

  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;

  color: var(--muted);

  font-size: 12px;

  cursor: pointer;
}

.kcf-huy:hover {
  color: var(--text);
}

.kcf-ok {
  padding: 9px 18px;

  background: var(--grad);
  border: 0;
  border-radius: 8px;

  color: #fff;

  font-size: 12.5px;
  font-weight: 800;

  cursor: pointer;

  box-shadow: 0 5px 15px rgba(124,92,255,.2);
}

.kcf-ok:disabled {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
}


/* =========================================================
   18. RESPONSIVE — KHÔNG TRÀN NGANG
   ========================================================= */

@media (max-width: 1050px) {
  #v-quytrinh:not(.hidden) {
    padding-left: 14px;
    padding-right: 14px;
  }

  #wfFlow {
    grid-template-columns:
      minmax(0,1fr)
      22px
      minmax(0,1fr)
      22px
      minmax(0,1fr);
  }

  .wf-s-tt {
    display: none;
  }

  .wf-s-chon {
    font-size: 11px;
  }
}


@media (max-width: 760px) {
  #v-quytrinh:not(.hidden) {
    padding: 12px 10px 22px;
  }

  .wf-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .wf-bar-l {
    width: 100%;
  }

  .wf-bar-l .btn.go {
    flex: 1;
    min-width: 190px;
  }

  .wf-bar-r {
    width: 100%;
    margin-left: 0;
  }

  #wfFlow {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .wf-strip > .wf-arrow {
    height: 16px;

    transform: rotate(90deg);
  }

  .wf-strip > .wf-card.sel::after {
    display: none;
  }

  .wf-doi {
    grid-template-columns: 1fr;
  }

  .kcf-than {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .kcf-trai {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .kcf-ds {
    max-height: 220px;
  }
}


/* =========================================================
   19. REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}



#vcpd,#vcpd *{box-sizing:border-box}
/* 🔴 08/09/2026 — z-index 99998 → 50. Drawer này TỰ BUNG mỗi khi có render (`:33051`), rộng 398px
   ghim mép PHẢI, trong khi modal canh GIỮA ⇒ nó đè lên và ĂN CÚ BẤM của modal bên dưới. Đo thật
   trước vá (4 khung, `elementFromPoint` tại tâm từng nút): **11 modal bị nuốt nút** —
   `pvModal` mất NÚT DUY NHẤT (✕ đóng) ⇒ modal kẹt · `dbKnPickModal` 1/1 và `dbRenderModal` 2/2 mất
   đúng nút "✓ Xong"/"💾 Lưu & Đóng" ⇒ không chốt được lựa chọn · `edModal` (editor che/logo) 5/15 ·
   `xemModal` 4/8 · càng cửa sổ hẹp càng nặng (1500px hỏng 4 modal, 1024px hỏng 11).
   ⇒ NGUYÊN TẮC: drawer là lớp nổi PHỤ TRỢ (thụ động, để nhìn), modal là thao tác CHỦ ĐỘNG —
     mọi modal phải che được nó. Hạ 1 chỗ thay vì nâng 11 modal.
   50 = trên mọi thứ trong nội dung trang (cao nhất `.r2-langpop` 15) · dưới modal thấp nhất
   (`autoModal` 60) · vẫn dưới `#updBanner` 900 và `#authGate` 1000 (banner cập nhật + cổng đăng
   nhập phải nằm trên). Khoảng 16–199 không có gì nên không đụng ai.
   ⚠ 99998 KHÔNG phải lựa chọn có chủ ý — khối CSS này không một dòng comment nào bảo vệ con số đó,
     khác hẳn 5 env lệch mặc định (đều kèm số đo). Nó là "đặt cho chắc nó nổi".
   ✅ Lợi phụ: bong bóng Trợ lý (`.tl-bong` 99990, chỉ hiện ở tab Automation) trước đây bị chính
     drawer che lúc đang render ⇒ khách KHÔNG bấm được; nay bấm được. Drawer chỉ có 3 nút và đều ở
     ĐẦU panel nên bong bóng (đáy phải) không chắn nút nào của nó. */
#vcpd{position:fixed;top:64px;bottom:14px;right:0;z-index:50;display:none;flex-direction:row;
  width:398px;transform:translateX(350px);font-family:'Inter','Segoe UI',system-ui,Arial,sans-serif;
  --vc-a:#8b7bff;--vc-pan:#171a29;--vc-pan2:#1e2233;--vc-line:#2c3350;--vc-tx:#e9ecf5;--vc-mu:#98a1bd;
  --vc-done:#3fb950;--vc-err:#f0616d;--vc-trk:#262c45;
  transition:transform .33s cubic-bezier(.22,.7,.24,1)}
#vcpd.vcpd-show{display:flex}
#vcpd.vcpd-open{transform:translateX(0)}
#vcpd.vcpd-left{left:0;right:auto;flex-direction:row-reverse;transform:translateX(-350px)}
#vcpd.vcpd-left.vcpd-open{transform:translateX(0)}
#vcpd.vcpd-drag{transition:none}
#vcpd .vcpd-tab{width:48px;flex:0 0 48px;background:var(--vc-pan);border:1px solid var(--vc-line);
  border-radius:14px 0 0 14px;box-shadow:0 18px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:13px;cursor:grab;touch-action:none;user-select:none}
#vcpd.vcpd-left .vcpd-tab{border-radius:0 14px 14px 0}
#vcpd .vcpd-tab:active{cursor:grabbing}
#vcpd .vcpd-grip{display:flex;flex-direction:column;gap:3px}
#vcpd .vcpd-grip i{width:4px;height:4px;border-radius:50%;background:#4a5170}
#vcpd .vcpd-ring{width:36px;height:36px;border-radius:50%;--p:0;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--vc-a) calc(var(--p)*1%),var(--vc-trk) 0)}
#vcpd .vcpd-ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--vc-pan)}
#vcpd .vcpd-ring b{position:relative;font-size:10px;font-weight:800;color:var(--vc-tx);font-variant-numeric:tabular-nums}
#vcpd .vcpd-tlabel{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#727aa0}
#vcpd.vcpd-left .vcpd-tlabel{transform:none}
#vcpd .vcpd-tchev{color:var(--vc-mu);font-size:15px}
#vcpd:not(.vcpd-open) .vcpd-tchev{transform:none}
#vcpd.vcpd-open .vcpd-tchev{transform:scaleX(-1)}
#vcpd .vcpd-panel{width:350px;flex:0 0 350px;background:var(--vc-pan);border:1px solid var(--vc-line);border-left:none;
  box-shadow:0 18px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden}
#vcpd.vcpd-left .vcpd-panel{border-left:1px solid var(--vc-line);border-right:none}
#vcpd .vcpd-head{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--vc-line)}
#vcpd .vcpd-dot{width:9px;height:9px;border-radius:50%;background:var(--vc-a);flex:0 0 auto}
#vcpd .vcpd-dot.done{background:var(--vc-done)}#vcpd .vcpd-dot.err{background:var(--vc-err)}
#vcpd .vcpd-head h4{font-size:13px;margin:0;font-weight:650;color:var(--vc-tx)}
#vcpd .vcpd-sp{margin-left:auto;display:flex;gap:6px}
#vcpd .vcpd-ic{border:1px solid var(--vc-line);background:var(--vc-pan2);color:var(--vc-mu);border-radius:7px;
  width:27px;height:27px;font-size:12px;cursor:pointer;display:grid;place-items:center}
#vcpd .vcpd-ic:hover{color:var(--vc-tx)}
#vcpd .vcpd-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:13px;display:flex;flex-direction:column;gap:13px;-webkit-overflow-scrolling:touch}
#vcpd .vcpd-body::-webkit-scrollbar{width:9px}
#vcpd .vcpd-body::-webkit-scrollbar-thumb{background:var(--vc-line);border-radius:5px}
#vcpd .vcpd-body::-webkit-scrollbar-thumb:hover{background:var(--vc-mu)}
#vcpd .vcpd-big{font-size:32px;font-weight:800;line-height:.9;color:var(--vc-tx);font-variant-numeric:tabular-nums}
#vcpd .vcpd-big small{font-size:15px;color:var(--vc-mu);font-weight:600}
#vcpd .vcpd-ph{font-weight:650;font-size:13px;color:var(--vc-tx);margin-top:7px}
#vcpd .vcpd-eta{font-size:12px;color:var(--vc-mu);margin-top:2px}
#vcpd .vcpd-trk{height:8px;border-radius:5px;background:var(--vc-trk);overflow:hidden}
#vcpd .vcpd-trk i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--vc-a),#5ad1c4);transition:width .35s}
#vcpd .vcpd-feedwrap{border:1px solid var(--vc-line);border-radius:10px;overflow:hidden;background:var(--vc-pan2)}
#vcpd .vcpd-feedbar{padding:7px 11px;border-bottom:1px solid var(--vc-line);font-size:11.5px;color:var(--vc-mu)}
#vcpd .vcpd-feed{padding:8px 11px;max-height:150px;overflow-y:auto;font-size:11.5px;line-height:1.55;display:flex;flex-direction:column;gap:6px}
#vcpd .vcpd-log{max-height:220px;overflow-y:auto;overscroll-behavior:contain;gap:2px;font-size:11px;line-height:1.5}
#vcpd .vcpd-log::-webkit-scrollbar{width:7px}#vcpd .vcpd-log::-webkit-scrollbar-thumb{background:var(--vc-line);border-radius:4px}
#vcpd .vcpd-log>div{color:var(--vc-mu);white-space:pre-wrap;word-break:break-word}
#vcpd .vcpd-log .ok{color:var(--vc-done)}      /* ✔ / hoàn tất */
#vcpd .vcpd-log .wn{color:#e0b34a}             /* ⚠ / lỗi (cls gộp cảnh báo + lỗi) */
#vcpd .vcpd-log .inf{color:var(--vc-tx)}       /* ▶ đang chạy */
#vcpd .vcpd-empty{font-size:12px;color:var(--vc-mu);text-align:center;padding:6px}
#vcpd .vcpd-body::-webkit-scrollbar,#vcpd .vcpd-feed::-webkit-scrollbar{width:7px}
#vcpd .vcpd-body::-webkit-scrollbar-thumb,#vcpd .vcpd-feed::-webkit-scrollbar-thumb{background:var(--vc-line);border-radius:4px}
@media (prefers-reduced-motion:reduce){#vcpd{transition:none}#vcpd .vcpd-trk i{transition:none}}



  #mdlBar{position:fixed;left:0;right:0;bottom:0;z-index:880;display:none;align-items:center;gap:10px;
    padding:7px 14px;background:#0e1524;border-top:1px solid #22304a;font-size:12.5px;color:#c7d2e4;
    box-shadow:0 -4px 18px rgba(0,0,0,.35)}
  #mdlBar .cham{width:9px;height:9px;border-radius:50%;flex:none;background:#475569}
  #mdlBar .cham.chay{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
  #mdlBar .cham.ket{background:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.18)}
  #mdlBar .cau{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #mdlBar .ketno{color:#fca5a5;font-weight:650;flex:none}
  #mdlBar button{background:#1b2740;color:#cbd5e1;border:1px solid #2b3b57;border-radius:7px;
    padding:4px 10px;font-size:12px;cursor:pointer;flex:none}
  #mdlBar button:hover{background:#243354}
  #mdlPanel{position:fixed;left:0;right:0;bottom:36px;z-index:879;display:none;max-height:62vh;
    overflow-y:auto;background:#0b111d;border-top:1px solid #22304a;padding:14px 16px;
    box-shadow:0 -10px 30px rgba(0,0,0,.5)}
  #mdlPanel h4{margin:0 0 9px;font-size:13px;color:#e2e8f0}
  #mdlPanel .vg{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
    border:1px solid #22304a;background:#0e1524;margin-bottom:6px}
  #mdlPanel .vg .t{font-weight:650;color:#e2e8f0;font-size:12.5px;flex:0 0 205px}
  #mdlPanel .vg .l{flex:1;min-width:0;color:#94a3b8;font-size:12px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  #mdlPanel .vg .k{flex:none;color:#64748b;font-size:11.5px}
  #mdlPanel .ketds{margin-top:11px;padding:10px 12px;border-radius:9px;border:1px solid #4c1d24;
    background:#1a1113}
  #mdlPanel .ketds .d{font-size:12.5px;color:#fca5a5;margin-bottom:3px}
  body.mdl-co{padding-bottom:38px}