/**
 * ui.css — VỎ DÙNG CHUNG cho mọi trang studio (Hiếu góp ý 17/7: "thanh cuộn với ô
 *   thêm tệp hơi xấu").
 *
 * VÌ SAO 1 FILE RIÊNG mà không dán vào từng trang: channel.html và index.html đang
 *   nhân đôi CSS của nhau -> sửa 1 chỗ quên chỗ kia là lệch. Mấy thứ VỎ CHUNG
 *   (thanh cuộn, ô chọn tệp) để đây, 2 trang cùng <link> vào. Sửa 1 lần ăn cả hai.
 *
 * CHỈ chứa thứ dùng CHUNG. Style riêng của từng trang cứ để nguyên chỗ cũ.
 * 16/9: TOKEN màu + cỡ chữ cũng dời về đây (mục ⓪) — trước đó chép 3 bản, lệch nhau.
 */

/* ══ ⓪ TOKEN — NGUỒN DUY NHẤT CỦA MÀU + CỠ CHỮ (16/9/2026, đợt A) ═══════════════
   TRƯỚC 16/9: khối :root này chép 3 bản (index.html · channel.html · tim-ngach.html) và
   đã lệch nhau (--ink-faint dark: #85858E vs #9EA0A9; tim-ngach nền dark #141416 vs #0F0F12).
   Mã còn đi VÒNG token: 154 mã hex khác nhau, gold #E8B423 viết tay 49 lần dù có --gold.
   ⟹ Token về đây, 4 trang cùng <link> vào. Sửa 1 lần ăn cả bốn. Thước: tools/soi-mau.js.

   LUẬT DÙNG:
   · Màu giao diện CHỈ qua var(--…). Không viết #hex trong .html/.js (trừ DỮ LIỆU — bảng màu
     mode vẽ, brand kit, từ điển tên màu — rào bằng chú thích `soi-mau:bo-qua`).
   · KHÔNG viết fallback `var(--x,#hex)` — token luôn có ở đây; fallback = màu cứng trá hình
     (bệnh cũ: var(--ok,#2e7d32) với --ok chưa từng tồn tại ⟹ fallback chạy 100%).
   · Nền tối cho "hộp nhấn" KHÔNG mượn --sidebar (nó tối ở CẢ light) — dùng --accent-soft /
     --surface-2, chữ --accent-ink. Đó là lỗi hộp đen 16/9.
   · Chữ trên nền màu (nút xanh, nút đỏ): --on-accent. Chữ trên nền vàng: --on-gold.
   · Trạng thái: xanh = xong/nút chính · vàng = đang làm/chờ · ĐỎ CHỈ CHO LỖI (DNA 28/7). */
:root{
  color-scheme:light;
  /* RX MASTER v4 — Emerald chủ đạo + Gold nhấn */
  --accent:#0C7A52;--accent-bright:#15A06A;--accent-soft:#E3F2EA;--accent-ink:#0A5E40;
  --grad:linear-gradient(120deg,#15A06A,#0A5E40);--grad-gold:linear-gradient(135deg,#F4D58A,#C8941A);
  --gold:#E8B423;--gold-soft:#F7EFD9;--gold-ink:#9A7510;
  --sidebar:#0F0F12;--sidebar-2:#1A1A1F;--sidebar-line:#28282F;--sidebar-ink:#ECECEF;--sidebar-mut:#86868E;
  /* 17/9 (B): nền + viền đậm hơn 1 nấc — Hiếu 16/9 "các khối chưa tách biệt": thẻ trắng trên #F6F5F2
     chỉ chênh 1 nấc, viền #E6E4DF quá mảnh. Duyệt trên mockup Cài đặt rồi mới dời về đây. Dark giữ nguyên. */
  --bg:#F1F0EC;--surface:#FFFFFF;--surface-2:#ECEBE6;
  --ink:#18181B;--ink-soft:#54545A;--ink-faint:#9A9A9F;--line:#DEDCD6;
  --green:#1F9D6B;--green-soft:#E6F4EE;--blue:#3D7BD1;--blue-soft:#E8F0FB;--amber:#B8841A;--amber-soft:#F7EFD9;--err:#CB4A39;--err-soft:#FAE9E5;--err-ink:#8C2216;
  --on-accent:#FFFFFF;--on-gold:#3A2A05;
  --input-bg:#FFFFFF;--topbar-bg:rgba(241,240,236,.9);
  --radius:11px;
  /* TYPOGRAPHY — Inter (CÓ tiếng Việt) + mono hệ thống (Consolas/Menlo: CŨNG có tiếng Việt).
     KHÔNG dùng Space Mono: font đó KHÔNG có bộ ký tự tiếng Việt. */
  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Courier New',monospace;
  /* THANG CHỮ 5 CỠ — chốt 16/9 theo mã thật (13px ×317 · 12px ×308 là hai cỡ dùng nhiều nhất):
     tiêu đề 20 · đầu mục 15 · thân 13 · chú thích 12 · nhãn 11. Inter 13 ≈ Roboto 14 (YouTube Studio). */
  --fs-title:20px;--fs-h:15px;--fs-body:13px;--fs-cap:12px;--fs-min:11px;
}
/* ── NIGHT MODE (dark) — chỉ override token, KHÔNG đụng layout. Bật bằng <html data-theme="dark"> ── */
:root[data-theme="dark"]{
  color-scheme:dark;
  --accent:#15A06A;--accent-bright:#1FBE82;--accent-soft:#143A2C;--accent-ink:#7FE3B6;
  --grad:linear-gradient(120deg,#15A06A,#0A5E40);--grad-gold:linear-gradient(135deg,#F4D58A,#C8941A);
  --gold:#E8B423;--gold-soft:#3A300F;--gold-ink:#F0CC5E;
  --sidebar:#0A0A0D;--sidebar-2:#1E1E25;--sidebar-line:#2C2C34;--sidebar-ink:#ECECEF;--sidebar-mut:#9A9AA3;
  --bg:#0F0F12;--surface:#1A1A1F;--surface-2:#26262D;
  /* 26/7 — Hiếu bắt "chữ tối khó nhìn": --ink-faint cũ #85858E trên nền #1A1A1F chỉ ~4.3:1 (sát đáy
     chuẩn), mà .sub + .empty (chú thích khắp app) đều dùng token này. Nâng lên #9EA0A9 (~6.2:1) —
     vẫn nhạt hơn --ink-soft nên thứ bậc chữ KHÔNG bẹt. Chỉ đổi ở chế độ tối; nền sáng giữ nguyên. */
  --ink:#ECECEF;--ink-soft:#B6B6BE;--ink-faint:#9EA0A9;--line:#2E2E36;
  --green:#34C68A;--green-soft:#143A2C;--blue:#6BA6E8;--blue-soft:#16263B;--amber:#E0B040;--amber-soft:#3A300F;--err:#F07A68;--err-soft:#3B1B16;--err-ink:#F5A79A;
  --on-accent:#FFFFFF;--on-gold:#3A2A05;
  --input-bg:#222229;--topbar-bg:rgba(15,15,18,.9);
}
/* Nút/ô nhập KHÔNG được để trình duyệt chọn màu chữ: mặc định là ĐEN, ở Night mode thành
   chữ đen trên nền tối (lỗi thẻ Format "Mascot / Host" mờ gần mất, 16/9). Thừa kế từ cha. */
button,input,select,textarea{color:inherit;font-family:inherit}

/* ══ ① THANH CUỘN ══════════════════════════════════════════════════════════════
   Mặc định Windows: dày ~17px, xám sáng -> ở Night mode chọi hẳn lên nền tối,
   nhìn như vết rách (đúng chỗ Hiếu chê). Nay: mảnh, chìm, hợp tông cả 2 chế độ.

   MÀU: KHÔNG dùng --line — ở Night mode nó là #2E2E36 trên nền #1A1A1F, gần như
     vô hình -> người dùng tưởng hết nội dung, không biết là cuộn được nữa (đổi cái
     xấu lấy cái hỏng). Dùng --ink-faint pha loãng ~50%: đủ thấy, không chói, và tự
     đúng ở CẢ dark lẫn light vì --ink-faint đổi theo theme.
   Dòng scrollbar-color đầu là DỰ PHÒNG cho trình duyệt chưa hiểu color-mix.

   ⚠️ CHỖ DỄ HIỂU NHẦM: Chrome 121+ hễ thấy scrollbar-width là BỎ QUA hết
     ::-webkit-scrollbar. Nên khối webkit dưới CHỈ phục vụ Chrome/Safari cũ —
     đừng thêm bo góc / hiệu ứng vào đó rồi tưởng máy mình sẽ thấy. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-faint) transparent;                              /* dự phòng */
  scrollbar-color: color-mix(in srgb, var(--ink-faint) 50%, transparent) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-faint);
  border-radius: 999px;
  /* viền trong suốt + bo nền = con trượt trông mảnh hơn mà vùng bấm vẫn đủ rộng */
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ══ ② Ô CHỌN TỆP ══════════════════════════════════════════════════════════════
   Mặc định trình duyệt: nút xám + chữ "Không có tệp nào được chọn" -> ở Night mode
   là mảng trắng chói, lạc hẳn khỏi brand.
   Nay: nút trông như .btn của studio, chữ trạng thái chìm xuống.
   KHÔNG giấu input đi rồi tự chế nút — làm vậy là mất luôn tính năng KÉO-THẢ tệp
   thẳng vào ô, mà học viên đổ ảnh hàng loạt rất cần nó. */
input[type="file"] {
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-faint);
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 9px;
  padding: 7px 9px;
  cursor: pointer;
  max-width: 100%;
}
input[type="file"]:hover { border-color: var(--accent); }
input[type="file"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 12px;
  margin-right: 10px;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
}
/* Ô chọn tệp bị giấu (nút riêng tự bấm hộ) -> đừng để mấy luật trên làm nó hiện lại. */
input[type="file"][style*="display:none"],
input[type="file"][style*="display: none"] { display: none !important; }

/* ══ ③ BỘ THÀNH PHẦN rx- (B · 17/9/2026) — dời từ mockup-cai-dat-2026-09-16.html ═══════════════
   VÌ SAO: kiểm 16/9 đo 1.457 `style=` trong channel.js — "sơn trộn trong gạch": đổi giao diện là phải
   sửa từng chỗ. Mockup Cài đặt (Hiếu duyệt 16/9 tối, f42a301) vẽ ~14 thành phần; đây là bản CHÍNH THỨC
   của chúng. Màn nào làm B thì viết lại bằng class ở đây, không viết inline nữa.
   TIỀN TỐ rx-: channel.html còn .card/.btn/.chip/.field/.label/.badge/.empty/.grp CŨ (Xưởng, Kênh…
   chưa qua B). Trùng tên = màn cũ vỡ. Tên con (.t .s .cap .sp .ck .nm .x) CHỈ có nghĩa BÊN TRONG
   thành phần rx- (luật con cháu) — không đặt tên đó ở cấp gốc.
   LUẬT: màu qua var(--…) · cỡ chữ qua var(--fs-…) · bóng đổ chỉ rgba(0,0,0,·) trung tính (thước cho phép)
   · mỗi màn ĐÚNG 1 nút .primary · đỏ CHỈ cho lỗi · icon = <svg class="rx-i"><use href="/rx-icons.svg#i-…"/></svg>. */
[hidden]{display:none!important}
.rx-i{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.rx-i.sm{width:14px;height:14px;flex-basis:14px}
.rx-i.lg{width:20px;height:20px;flex-basis:20px}

/* — bố cục Cài đặt: ray trái + cột nội dung — */
/* font-size đặt ở vỏ màn: channel.html body KHÔNG có font-size (mã cũ ghi 13px từng chỗ) nên font:inherit ăn 16px
   mặc định. Khi mọi màn qua B thì dời lên body; giờ scope để màn cũ không đổi. */
.rx-settings{display:none;grid-template-columns:212px 1fr;gap:22px;align-items:start;margin-top:18px;font-size:var(--fs-body);line-height:1.5}
.rx-settings.on{display:grid}
.rx-rail{position:sticky;top:8px;display:flex;flex-direction:column;gap:2px}
.rx-rail-i{display:grid;grid-template-columns:16px 1fr;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--ink-soft);border:1px solid transparent;text-align:left;background:transparent;font:inherit;width:100%}
.rx-rail-i:hover{border-color:var(--line);color:var(--ink)}
.rx-rail-i.on{background:var(--surface);border-color:var(--line);color:var(--ink)}
.rx-rail-i .t{font-weight:600;display:block}
.rx-rail-i .s{display:block;font-size:var(--fs-min);color:var(--ink-faint);margin-top:1px;line-height:1.35;font-weight:400}
.rx-rail-i.on .s{color:var(--ink-soft)}
.rx-rail-i .s b{color:var(--gold-ink);font-weight:700}
.rx-rail-i .rx-i{margin-top:3px}
.rx-settings-body{min-width:0}
.rx-stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.rx-sec-h{display:flex;align-items:baseline;gap:10px;margin:6px 0 2px}
.rx-sec-h h2{font-size:var(--fs-h);font-weight:700;margin:0}
.rx-sec-h .s{color:var(--ink-faint);font-size:var(--fs-cap)}
.rx-grp{font-size:var(--fs-min);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin:4px 0 -12px 2px;line-height:1}
.rx-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rx-grid-2>.rx-card{min-width:0}
.rx-hr{height:1px;background:var(--line);margin:14px 0}
.rx-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rx-sp{flex:1}
.rx-mt{margin-top:10px}

/* — thẻ: viền line · trọng tâm = viền gold · nguy hiểm = viền đỏ nhạt · mờ = format không dùng — */
.rx-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 20px 18px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.rx-card.focus{border-color:var(--gold)}
.rx-card.danger{border-color:color-mix(in srgb,var(--err) 45%,transparent)}
.rx-card.dim{opacity:.6}
.rx-card-h{display:flex;align-items:center;gap:9px;padding:0 20px 11px;margin:0 -20px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rx-card-h h3{font-size:var(--fs-body);font-weight:700;display:flex;align-items:center;gap:8px;margin:0}
.rx-card-h h3.err{color:var(--err)}
.rx-card-h .cap{color:var(--ink-faint);font-size:var(--fs-cap);font-weight:400}
.rx-card-h .sp{flex:1}

/* — ô nhập — */
.rx-field{display:flex;flex-direction:column;gap:5px}
.rx-label{font-size:var(--fs-cap);font-weight:600;color:var(--ink-soft)}
.rx-label .hint{font-weight:400;color:var(--ink-faint)}
.rx-input{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 11px;background:var(--input-bg);color:var(--ink);font:inherit;margin:0}
.rx-input::placeholder{color:var(--ink-faint)}
.rx-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rx-input.err{border-color:var(--err)}
.rx-input:disabled{opacity:.6}
textarea.rx-input{min-height:64px;resize:vertical}
.rx-frow{display:flex;gap:8px;align-items:flex-end}
.rx-frow .rx-field{flex:1;min-width:0}
.rx-help{font-size:var(--fs-cap);color:var(--ink-faint);line-height:1.5}
.rx-help.err{color:var(--err)}
.rx-help.ok{color:var(--accent-ink)}
.rx-help b{color:var(--ink-soft)}

/* — nút: mỗi màn đúng 1 nút .primary (việc cần làm NGAY); còn lại xám — */
.rx-btn{display:inline-flex;align-items:center;gap:7px;border-radius:8px;padding:8px 13px;font:inherit;font-weight:600;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink);white-space:nowrap;line-height:1.2;width:auto;margin:0}
.rx-btn:hover{border-color:var(--ink-faint)}
.rx-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rx-btn.primary:hover{background:var(--accent-bright);border-color:var(--accent-bright)}
.rx-btn.ghost{border-color:transparent;background:transparent;color:var(--ink-soft)}
.rx-btn.ghost:hover{background:var(--surface-2);color:var(--ink);border-color:transparent}
.rx-btn.danger{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,transparent)}
.rx-btn.danger:hover{background:var(--err-soft)}
/* 25/9 (G-08b #7): nút xoá / chạy lại dạng nhẹ — xám, rê chuột (hoặc tab tới) mới đỏ. Nhiều nút đỏ một màn là báo động giả. */
.rx-btn.xoa-nhe{color:var(--ink-faint)}
.rx-btn.xoa-nhe:hover,.rx-btn.xoa-nhe:focus-visible{color:var(--err);background:var(--err-soft)}
.rx-btn:disabled,.rx-btn.busy{opacity:.55;cursor:not-allowed}
.rx-btn.sm{padding:5px 9px;font-size:var(--fs-cap)}
.rx-btn.busy .rx-i{animation:rx-spin 1s linear infinite}
.rx-btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
@keyframes rx-spin{to{transform:rotate(360deg)}}

/* — huy hiệu trạng thái: 3 màu, đỏ CHỈ lỗi — */
.rx-badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-cap);font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft);white-space:nowrap}
.rx-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-faint)}
.rx-badge.ok{background:var(--green-soft);color:var(--accent-ink)}.rx-badge.ok::before{background:var(--green)}
.rx-badge.doing{background:var(--gold-soft);color:var(--gold-ink)}.rx-badge.doing::before{background:var(--gold)}
.rx-badge.err{background:var(--err-soft);color:var(--err-ink)}.rx-badge.err::before{background:var(--err)}
.rx-badge.focus{background:var(--gold-soft);color:var(--gold-ink)}.rx-badge.focus::before{display:none}

/* — chip: từ khoá / khuôn / câu hỏi — */
.rx-chips{display:flex;flex-wrap:wrap;gap:6px}
.rx-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-cap);padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink);border:1px solid transparent;line-height:1.4}
.rx-chip.q{border-radius:8px;padding:6px 10px}
.rx-chip.more{background:transparent;border-color:var(--line);color:var(--ink-soft);cursor:pointer}
.rx-chip.more:hover{border-color:var(--ink-faint)}
.rx-chip.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* — khối vấn đề (DNA 28/7): DƯỚI nút, mỗi dòng có nút xử · ghi chú = Studio nói cho biết — */
.rx-problem{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid color-mix(in srgb,var(--err) 40%,transparent);background:var(--err-soft);color:var(--err-ink);line-height:1.5}
.rx-problem.warn{border-color:color-mix(in srgb,var(--gold) 55%,transparent);background:var(--gold-soft);color:var(--gold-ink)}
.rx-problem .rx-i{flex:none}
.rx-problem .sp{flex:1;min-width:0}
.rx-problem b{font-weight:700}
.rx-note{padding:10px 12px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.rx-note.plain{background:var(--surface-2);color:var(--ink-soft)}
.rx-note .rx-i{flex:none;margin-top:2px}
.rx-note a{color:inherit;font-weight:600}
.rx-empty{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px dashed var(--line);border-radius:8px;color:var(--ink-soft);line-height:1.5}
.rx-empty .sp{flex:1;min-width:0}
.rx-empty b{color:var(--ink)}

/* — chọn 1 trong N: thẻ chọn (radio-card) · segmented — */
.rx-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rx-opt{border:1px solid var(--line);border-radius:9px;padding:11px 13px;cursor:pointer;background:var(--surface);display:grid;grid-template-columns:1fr 18px;gap:6px;text-align:left;font:inherit;color:inherit;width:100%;margin:0}
.rx-opt:hover{border-color:var(--ink-faint)}
.rx-opt.on{border-color:var(--accent);background:var(--accent-soft)}
.rx-opt .t{font-weight:700}
.rx-opt .s{color:var(--ink-soft);font-size:var(--fs-cap);grid-column:1;font-weight:400}
.rx-opt .ck{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center}
.rx-opt.on .ck{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.rx-opt .ck .rx-i{width:11px;height:11px;stroke-width:3}
.rx-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;padding:2px;background:var(--surface-2)}
.rx-seg button{border:0;background:transparent;font:inherit;font-weight:600;color:var(--ink-soft);padding:6px 12px;border-radius:6px;cursor:pointer;width:auto;margin:0}
.rx-seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* — cặp nhãn–giá trị — */
.rx-kv{display:grid;grid-template-columns:110px 1fr;gap:8px 16px;align-items:baseline;margin:0}
.rx-grid-2 .rx-kv{grid-template-columns:1fr;gap:3px 0}
.rx-grid-2 .rx-kv dt{margin-top:8px}
.rx-grid-2 .rx-kv dt:first-child{margin-top:0}
.rx-kv dt{font-size:var(--fs-cap);font-weight:600;color:var(--ink-soft)}
.rx-kv dd{min-width:0;margin:0;line-height:1.5}
.rx-kv dd.trong{color:var(--ink-faint)}

/* — ô ảnh (kho bối cảnh · nhân vật) + swatch — */
.rx-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.rx-tiles.sm{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.rx-tile{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface-2);cursor:pointer;padding:0;font:inherit;color:inherit;text-align:left;margin:0}
.rx-tile:hover{border-color:var(--ink-faint)}
.rx-tile img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.rx-tile.wide img{aspect-ratio:16/9}
.rx-tile.sq img{aspect-ratio:1/1}
.rx-tile .nm{padding:7px 9px;font-weight:600;font-size:var(--fs-cap);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-tile .nm .warn{color:var(--gold-ink)}
.rx-tile .no{display:grid;place-items:center;aspect-ratio:16/9;color:var(--ink-faint);font-size:var(--fs-cap)}
.rx-tile .x{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:6px;background:rgba(0,0,0,.55);color:var(--on-accent);display:none;place-items:center;border:0;cursor:pointer;padding:0;margin:0}
.rx-tile:hover .x{display:grid}
.rx-tile .x.sao.on{display:grid;background:var(--gold);color:var(--on-gold)}
.rx-tile .x.busy{opacity:.5}
/* 24/9 (G-08 việc 2): nút "Thay ảnh / Nạp ảnh" hiện THẲNG trên ô (không chờ rê chuột — điện thoại không có hover). Trước: giấu trong hộp chi tiết. */
.rx-tile .thay{position:absolute;left:6px;bottom:36px;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.62);color:var(--on-accent);font-size:var(--fs-cap);font-weight:600;line-height:1.6;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.rx-tile .thay:hover,.rx-tile .thay:focus-visible{background:var(--accent);outline:none}
.rx-tile .thay.busy{opacity:.55;pointer-events:none}
/* 24/9 (G-08 mắt người mới #14): ô nhỏ (88px) — nút gãy 2 dòng, che gần hết ảnh vừa nạp → 1 dòng, bỏ biểu tượng, nằm sát góc dưới */
.rx-tile .thay{white-space:nowrap}
.rx-tiles.sm .rx-tile .thay{left:4px;padding:1px 6px}
.rx-tiles.sm .rx-tile .thay .rx-i{display:none}
.rx-tile.add{display:grid;place-items:center;min-height:96px;border-style:dashed;background:transparent;color:var(--ink-soft);font-weight:600;font-size:var(--fs-cap);text-align:center;width:100%}
.rx-tile.add:hover{background:var(--surface-2)}
.rx-tile.add:disabled{opacity:.55;cursor:wait}
.rx-tile.still{cursor:default}
.rx-swatches{display:flex;gap:6px}
.rx-swatches i{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.08);display:block}

/* — bảng gọn — */
.rx-tbl{width:100%;border-collapse:collapse}
.rx-tbl th{text-align:left;font-size:var(--fs-min);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;padding:0 10px 8px 0}
.rx-tbl td{padding:9px 10px 9px 0;border-top:1px solid var(--line);vertical-align:top;line-height:1.5}
.rx-tbl td.k{font-weight:600;white-space:nowrap}
.rx-tbl td.q{color:var(--ink-soft);font-style:italic}
.rx-tbl.hook td:first-child,.rx-tbl.hook th:first-child{width:230px}.rx-tbl.hook td:nth-child(2),.rx-tbl.hook th:nth-child(2){width:220px}
.rx-tbl tr.an{display:none}
.rx-tbl.mo tr.an{display:table-row}

/* — ngăn Nâng cao (details) — */
details.rx-adv{border:1px solid var(--line);border-radius:10px;background:var(--surface)}
details.rx-adv>summary{list-style:none;cursor:pointer;padding:12px 18px;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
details.rx-adv>summary::-webkit-details-marker{display:none}
details.rx-adv>summary .rx-i.chev{transition:transform .15s}
details.rx-adv[open]>summary .rx-i.chev{transform:rotate(90deg)}
details.rx-adv>.body{padding:0 18px 16px}

/* — đang chạy: dòng tiến độ ngay dưới nút + xương chờ kết quả — */
.rx-progress{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;background:var(--surface-2);color:var(--ink)}
.rx-progress>.rx-i{animation:rx-spin 1s linear infinite;color:var(--accent)}
.rx-progress .tx{flex:1;min-width:0}
.rx-progress .tx .s{font-size:var(--fs-cap);color:var(--ink-faint);display:flex;gap:8px}
.rx-progress .bar{height:3px;background:var(--line);border-radius:2px;margin-top:6px;overflow:hidden}
.rx-progress .bar i{display:block;height:100%;width:38%;background:var(--accent);border-radius:2px;animation:rx-grow 1.6s ease-in-out infinite alternate}
@keyframes rx-grow{from{width:20%}to{width:85%}}
.rx-skel{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.rx-skel i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:rx-shine 1.4s linear infinite}
.rx-skel i:nth-child(2){width:80%}.rx-skel i:nth-child(3){width:55%}
@keyframes rx-shine{from{background-position:200% 0}to{background-position:-200% 0}}

/* — hộp thoại (rxConfirm / rxPrompt) — tiêu đề là CÂU HỎI · thân nói mất gì/giữ gì · 2 nút, nút phải là việc — */
.rx-mask{position:fixed;inset:0;background:rgba(12,12,18,.45);z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px;animation:rx-in .15s ease}
.rx-modal{font-size:var(--fs-body);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;width:100%;max-width:440px;box-shadow:0 20px 60px rgba(0,0,0,.28)}
.rx-modal h3{font-size:var(--fs-h);font-weight:700;display:flex;align-items:center;gap:8px;margin:0 0 8px}
.rx-modal .bd{color:var(--ink-soft);line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:46vh;overflow:auto}
.rx-modal .bd .rx-kv{margin-top:10px}
.rx-modal .ft{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.rx-modal input{margin-top:10px}
.rx-modal.pay h3{color:var(--err)}
@keyframes rx-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* — toast góc dưới phải: "Đã lưu" 3,5 giây · lỗi ở lại tới khi bấm — */
/* 25/9 (G-08b #7 · mắt người mới #17): thông báo nhỏ dời lên GÓC TRÊN PHẢI (dưới thanh đầu trang) — trước nằm góc dưới, che nút
   chính của thanh dưới ("Chốt danh sách · chép pro…"). Thanh dưới (.rx-dock) dính theo nội dung nên đáy của nó đổi theo từng màn
   (máy soát đo: nâng lên 88px vẫn đè ở ô 5) → góc trên là chỗ duy nhất không bao giờ đè nút chính. */
.rx-toasts{position:fixed;right:20px;top:76px;z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:flex-end;max-width:420px}
.rx-toast{font-size:var(--fs-body);display:inline-flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;border-radius:10px;background:var(--ink);color:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.2);font-weight:500;max-width:420px;line-height:1.45;animation:rx-in .18s ease}
.rx-toast .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.rx-toast.warn .dot{background:var(--gold)}.rx-toast.err .dot{background:var(--err)}.rx-toast.info .dot{background:var(--blue)}
.rx-toast .tx{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}
.rx-toast .rx-btn{padding:4px 9px;font-size:var(--fs-cap);background:transparent;color:inherit;border-color:color-mix(in srgb,var(--bg) 25%,transparent)}
.rx-toast .x{opacity:.6;cursor:pointer;background:none;border:0;color:inherit;font:inherit;padding:0 2px;width:auto;margin:0}
.rx-toast .x:hover{opacity:1}

/* — dấu ? : câu giải thích ≤ 2 dòng + 1 link guide; dài hơn là việc của guide — */
.rx-tip{position:relative;display:inline-flex;align-items:center;gap:4px}
.rx-qm{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--ink-faint);color:var(--ink-faint);font-size:var(--fs-min);font-weight:700;cursor:help;line-height:1}
.rx-tipbox{position:absolute;left:0;top:22px;width:300px;background:var(--ink);color:var(--bg);padding:9px 11px;border-radius:8px;font-size:var(--fs-cap);line-height:1.5;font-weight:400;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:3;display:none}
.rx-tip:hover .rx-tipbox,.rx-tip.on .rx-tipbox{display:block}
.rx-tipbox a{color:var(--gold);font-weight:600}

/* — nạp file + trình phát (màn con Giọng) — */
.rx-drop{border:1.5px dashed var(--line);border-radius:10px;padding:18px;text-align:center;color:var(--ink-soft);background:var(--surface);cursor:pointer}
.rx-drop:hover{border-color:var(--accent);background:var(--accent-soft)}
/* 24/9 (G-08 việc 5): đang kéo file qua ô thả (rx-ui.js rxThaVaoO) — sáng như hover, viền liền */
.rx-drop.keo,[data-tha].keo{border-color:var(--accent);border-style:solid;background:var(--accent-soft)}
[data-tha]{border-radius:10px}
.rx-drop b{color:var(--ink)}
.rx-drop .s{font-size:var(--fs-cap);color:var(--ink-faint);margin-top:3px}
.rx-filerow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.rx-filerow .fi{width:36px;height:36px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;flex:none}
.rx-filerow .tx{flex:1;min-width:0}
.rx-filerow .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rx-filerow .s{font-size:var(--fs-cap);color:var(--ink-faint)}
.rx-player{display:flex;align-items:center;gap:10px;margin-top:10px}
.rx-player .pl{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;border:0;cursor:pointer;flex:none;padding:0}
.rx-player .tl{flex:1;height:4px;background:var(--line);border-radius:2px;position:relative}
.rx-player .tl i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--accent);border-radius:2px}
.rx-player .t{font-size:var(--fs-cap);color:var(--ink-soft);font-variant-numeric:tabular-nums;flex:none}

/* — gallery chọn bằng mắt (chọn chất vẽ): bấm ảnh là chọn — */
.rx-gal{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.rx-gal-card{cursor:pointer;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;background:transparent;font:inherit;color:inherit;text-align:left;margin:0;width:100%}
.rx-gal-card:hover{border-color:var(--line)}
.rx-gal-card.on{border-color:var(--accent)}
.rx-gal-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:8px;background:var(--surface-2)}
.rx-gal-card .t{font-weight:700;margin-top:8px;display:flex;align-items:center;gap:6px;padding:0 4px}
.rx-gal-card .s{font-size:var(--fs-cap);color:var(--ink-soft);padding:0 4px;font-weight:400}
.rx-gal-card .sw{display:flex;gap:4px;margin:6px 4px 4px}.rx-gal-card .sw i{width:14px;height:14px;border-radius:4px;display:block}
.rx-gal-card .ck{margin-left:auto;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:none;place-items:center;flex:none}
.rx-gal-card.on .ck{display:grid}.rx-gal-card .ck .rx-i{width:11px;height:11px;stroke-width:3}
.rx-gal-card.write{border:1.5px dashed var(--line);border-radius:10px;display:grid;place-items:center;text-align:center;color:var(--ink-soft);padding:16px 10px;min-height:100%}
.rx-gal-card.write:hover{background:var(--surface-2)}

/* — 17/9 (B · Nhân vật): biến thể nhỏ khi ráp màn drill-in — KHÔNG thành phần mới, chỉ biến thể của thứ đã có — */
.rx-i.flip{transform:scaleX(-1)}
.rx-crumb{display:flex;align-items:center;gap:8px;color:var(--ink-faint);font-size:var(--fs-cap);margin-top:2px}
.rx-crumb b{color:var(--ink-soft);font-weight:600}
.rx-side{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start}
.rx-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rx-mb{margin-bottom:12px}
.rx-opts.two{grid-template-columns:1fr 1fr}
.rx-opts.one{grid-template-columns:1fr}  /* 21/9 mascot: 3 chế độ trong cảnh xếp dọc (mockup) */
/* 21/9 mascot Đợt 2 — lưới 4×4 hình dán: thiếu đỏ · lẹm vàng · ổn xanh (mockup mục 1) */
.rx-tile.dan-thieu{border-color:var(--err);border-style:dashed}
.rx-tile.dan-lem{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.rx-tile.dan-ok{border-color:var(--accent)}
.rx-tiles.dan16{grid-template-columns:repeat(4,1fr)}  /* lưới 4×4 đúng mockup */
.rx-tiles.dan16 .rx-tile img{object-fit:contain;aspect-ratio:3/4}  /* hình dán toàn thân: không cắt đầu */
.rx-tile.dan-ok img,.rx-tile.dan-lem img{background:repeating-conic-gradient(var(--line) 0 25%,var(--surface) 0 50%) 0 0/16px 16px}
.rx-note .sp{flex:1;min-width:0}
.rx-note .rx-btn{flex:none}
.rx-problem .rx-btn{flex:none}
.rx-tile.free img{aspect-ratio:auto}
.rx-tile img.hong{opacity:.15}
.rx-tile.sq.add{aspect-ratio:1/1;min-height:0;gap:6px;padding:10px;line-height:1.45}
.rx-tile.add .rx-i{color:var(--ink-faint)}
.rx-tile.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rx-tile .bd{padding:10px 11px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;cursor:default}
.rx-tile .bd .tx{line-height:1.5;color:var(--ink-soft);max-height:96px;overflow:auto;align-self:stretch}
.rx-tile .nm .mut{color:var(--ink-faint);font-weight:400}
.rx-kv dd.rx-row{gap:12px}
/* — 17/9 (B · Giọng): ô nạp file là <label> bọc input ẩn (bấm cả ô là mở chọn tệp) · thẻ chọn bọc radio ẩn — */
.rx-drop{display:block}
.rx-drop input[type=file]{display:none}
.rx-drop.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.rx-drop.on b{color:var(--accent-ink)}
.rx-drop .rx-i.lg{color:var(--ink-faint)}
.rx-opt{position:relative}
.rx-opt input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.rx-filerow .rx-badge{flex:none}
/* — 17/9 (B · Kênh): ô số (bảng điều khiển) · cột số trong bảng · thanh tiến độ mảnh · hàng phiên bấm được · khung chữ dài — */
.rx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.rx-stat{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.rx-stat .k{font-size:var(--fs-cap);color:var(--ink-faint)}
.rx-stat .v{font-size:var(--fs-title);font-weight:800;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.rx-stat .s{font-size:var(--fs-cap);color:var(--ink-faint);margin-top:2px}
.rx-tbl th.num,.rx-tbl td.num{text-align:right;font-variant-numeric:tabular-nums;padding-right:0;padding-left:10px}
.rx-tbl td.ok{color:var(--green)}.rx-tbl td.bad{color:var(--err)}.rx-tbl td.mut{color:var(--ink-faint)}
.rx-tbl td.ellip{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rx-bar{height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden;margin-top:7px}
.rx-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px}
.rx-bar.bar0{margin-top:0}
.rx-stack.sm{gap:10px}
.rx-filerow.click{cursor:pointer}.rx-filerow.click:hover{border-color:var(--ink-faint)}
.rx-filerow.on{border-color:var(--accent)}
.rx-filerow .fi.err{background:var(--err-soft);color:var(--err-ink)}
.rx-filerow .rx-row{flex:none}
.rx-chip.ok{background:var(--green-soft);color:var(--accent-ink)}.rx-chip.err{background:var(--err-soft);color:var(--err-ink)}
.rx-pre{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--surface)}
a.rx-btn{text-decoration:none}
/* — 17/9 (B · Dựng kênh): bảng Angle (bang-ghe-ui) · khung cuộn ngang · thẻ chọn dùng như <button> — */
.rx-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:9px}
.rx-scroll .rx-tbl td{padding-left:10px}
/* 17/9 (B): ô tạm ngoài màn (textarea chép clipboard) — thay ta.style.position/opacity trong mã cũ */
.rx-offscreen{position:fixed;left:-9999px;top:0;opacity:0;pointer-events:none}
.rx-scroll .rx-tbl th{padding-left:10px;padding-top:8px}
.rx-tbl.dim{opacity:.55}
.rx-tbl tr.hl td{background:var(--accent-soft)}
.rx-tbl td.warn{color:var(--gold-ink)}
.rx-tbl.ghe{min-width:560px}
.rx-tbl.ghe td:first-child{padding-left:10px}
.rx-help.err{color:var(--err)}
button.rx-opt{display:grid}
.rx-opt .s:empty{display:none}
/* — 17/9 (B · Lộ trình): thanh tìm + chip lọc (mockup "Bày nội dung" 5) · ô tick · hàng chủ đề sửa thẳng · số to — */
.rx-toolrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rx-search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--input-bg);color:var(--ink-faint);cursor:text}
.rx-search input{flex:1;border:0;background:transparent;font:inherit;color:var(--ink);outline:none;padding:0;margin:0;min-width:0}
.rx-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rx-ck{width:16px;height:16px;flex:none;margin:0;cursor:pointer;accent-color:var(--accent)}
/* 18/9 (A1): `.rx-ck` là kiểu Ô TICK 16px (Lộ trình), nhưng channel.js dùng `<label class="rx-ck">` làm CẢ DÒNG ở 8 cổng
   (Research "Chọn góc kể", nhạc, chia cảnh…) → nhãn bị bóp 16px, mỗi từ một dòng đè nhau. Tách: label = dòng flex, input trong label = ô 16px. */
label.rx-ck{width:auto;height:auto;display:flex;align-items:center;gap:8px;cursor:pointer;flex:initial}
label.rx-ck input[type=checkbox],label.rx-ck input[type=radio]{width:16px;height:16px;flex:none;margin:0;accent-color:var(--accent);cursor:pointer}
label.rx-ck .rx-input{flex:1;min-width:0}
label.rx-ck.sm{font-size:var(--fs-cap)}
/* 18/9 (A7): chip chủ đề ô 1 mang nhãn nguồn mờ (· lộ trình / · kho) */
.rx-chip .mut{color:var(--ink-faint);font-weight:400}
/* 18/9 tối (B1): ô 6 một màn hai pha — ô chờ gộp (bấm ô thứ hai), dấu ? máy nghi cùng người, dòng vẽ-khi-dựng */
.rx-tile.gop-cho{outline:2px dashed var(--accent);outline-offset:2px;cursor:copy}
.rx-tile .x.nghi{display:grid;background:var(--gold);color:var(--on-gold);font-weight:800;font-size:var(--fs-body)}
.rx-tile .no.nho{aspect-ratio:auto;padding:14px 8px}
.cd-row .nm{font-weight:600;font-size:var(--fs-cap);min-width:0;overflow:hidden;text-overflow:ellipsis}
#cdInline summary .rx-big{font-size:var(--fs-title);margin-right:4px}
.rx-chips.sm .rx-chip{font-size:var(--fs-min);padding:2px 8px}
.rx-chip.doing{background:var(--gold-soft);color:var(--gold-ink)}
.rx-filerow .fi.n{font-weight:700;font-size:var(--fs-cap);font-variant-numeric:tabular-nums;background:var(--surface-2);color:var(--ink-soft)}
.rx-filerow .fi.n.ok{background:var(--green-soft);color:var(--accent-ink)}
.rx-filerow.bo{opacity:.45}
.rx-filerow.done .nm{color:var(--ink-soft)}
.rx-filerow .nm[contenteditable]{white-space:normal;border:1px solid transparent;border-radius:6px;padding:2px 5px;margin:-2px -5px;cursor:text}
.rx-filerow .nm[contenteditable]:focus{outline:none;border-color:var(--accent);background:var(--bg)}
.rx-filerow.rm .rx-chips{margin-top:4px}
.rx-side.sm{grid-template-columns:150px 1fr;gap:12px}
.rx-big{font-size:var(--fs-title);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rx-big.ok{color:var(--green)}.rx-big.warn{color:var(--gold-ink)}.rx-big.mut{color:var(--ink-faint)}
.rx-pre.mono{font-family:var(--mono);font-size:var(--fs-cap);line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--ink-soft);margin:0;max-height:220px}
details.rx-adv>.body.rx-stack{padding-top:4px}
@media (max-width:980px){.rx-side,.rx-grid-3,.rx-grid-2{grid-template-columns:1fr}}

/* ── ③b XƯỞNG (B · 18/9/2026) — dời từ mockup-xuong-2026-09-17.html <style> (bản nháp Hiếu chốt 17/9) ──────
   rx-steps (ray 9 ô có số đo, nằm trong ray trái chung) · rx-dock (thanh quyết dính đáy: 1 nút xanh) · rx-composer (thanh soạn)
   · rx-checks (preflight 3 mức) · rx-foot (chân tab) · rx-mrows/rx-mrow (dòng media sống) · rx-hsteps (làn G-Labs 3 bước)
   · rx-reader (đọc kịch bản) · rx-tlbar (nhạc theo đoạn) · rx-card.gate · rx-modal.wide (xem lại) · rx-lo/rx-lo-the (3 lô Veo).
   Tên con (.n .t .s .tx .th .no .h .gl .bar .hd .bd .cost .tien) chỉ có nghĩa trong thành phần. Chữ đè ảnh tối = --on-accent, không mã màu cứng. */
/* ray 9 ô — nằm DƯỚI mục "Làm video" trong ray trái. Mỗi ô: số/tích · tên · 1 dòng SỐ ĐO. done/lock chỉ mờ, không teo. */
.rx-steps{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 6px;padding-left:12px;border-left:1px solid var(--line)}
.rx-step{display:grid;grid-template-columns:20px 1fr;gap:9px;align-items:start;padding:6px 8px;border-radius:7px;cursor:pointer;color:var(--ink-soft);border:1px solid transparent;background:transparent;font:inherit;text-align:left;width:100%;margin:0}
.rx-step:hover{border-color:var(--line);color:var(--ink)}
.rx-step .n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-min);font-weight:700;background:var(--surface-2);color:var(--ink-faint);font-variant-numeric:tabular-nums;margin-top:1px}
.rx-step .n .rx-i{width:11px;height:11px;stroke-width:2.5}
.rx-step.done .n{background:var(--green-soft);color:var(--green)}
.rx-step.now{background:var(--surface);border-color:var(--line);color:var(--ink)}
.rx-step.now .n{background:var(--accent);color:var(--on-accent)}
.rx-step.gate .n{background:var(--gold-soft);color:var(--gold-ink)}
.rx-step.err .n{background:var(--err-soft);color:var(--err)}
.rx-step.lock{opacity:.55;cursor:default}
.rx-step .t{font-weight:600;display:flex;align-items:center;gap:5px;line-height:1.3}
.rx-step .t .rx-i.sm{color:var(--ink-faint)}
.rx-step .s{display:block;font-size:var(--fs-min);color:var(--ink-faint);margin-top:1px;line-height:1.35;font-variant-numeric:tabular-nums}
.rx-step.now .s{color:var(--ink-soft)}
.rx-step.gate .s{color:var(--gold-ink)}
.rx-step.err .s{color:var(--err)}

/* thanh quyết dính đáy — MỘT nút xanh của cả màn nằm đây; trái là bước + số đo */
.rx-dock{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;gap:14px;margin-top:22px;padding:11px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 -6px 24px rgba(0,0,0,.06)}
.rx-dock .tx{flex:1;min-width:0}
.rx-dock .tx b{font-weight:700}
.rx-dock .tx .s{color:var(--ink-faint);font-size:var(--fs-cap);margin-top:1px}
.rx-dock .rx-row{flex:none}
.rx-dock.busy{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}

/* thanh soạn nổi — khung Làm video thành 1 viên: chip gợi ý · ô chủ đề · tuỳ chọn inline · giá · nút chạy */
.rx-composer{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.10);padding:14px 16px 12px}
.rx-composer .sug{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.rx-composer .sug .rx-chip{cursor:pointer;background:var(--surface);border-color:var(--line)}
.rx-composer .sug .rx-chip:hover{border-color:var(--ink-faint)}
.rx-composer .sug .rx-chip .rx-i{color:var(--gold-ink)}
.rx-composer .in{display:flex;align-items:center;gap:8px}
.rx-composer .in input{flex:1;border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink);outline:none;padding:6px 2px}
.rx-composer .in input::placeholder{color:var(--ink-faint)}
.rx-composer .opts{display:flex;align-items:center;gap:2px;margin-top:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:8px}
.rx-composer .op{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:8px;font-size:var(--fs-cap);font-weight:600;color:var(--ink-soft);cursor:pointer;border:0;background:transparent;font-family:inherit;margin:0;width:auto}
.rx-composer .op:hover{background:var(--surface-2);color:var(--ink)}
.rx-composer .op.warn{color:var(--gold-ink)}
.rx-composer .cost{margin-left:auto;font-size:var(--fs-cap);color:var(--ink-faint);font-variant-numeric:tabular-nums}
.rx-composer .go{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--on-accent);border:0;display:grid;place-items:center;cursor:pointer;padding:0;margin:0 0 0 8px}
.rx-composer .go:hover{background:var(--accent-bright)}
.rx-composer .go:disabled{background:var(--line);color:var(--ink-faint);cursor:not-allowed}
.rx-composer-wrap{padding:44px 0 10px}
.rx-composer-wrap .lead{text-align:center;color:var(--ink-soft);margin-bottom:16px}
.rx-composer-wrap .lead b{display:block;font-size:var(--fs-title);color:var(--ink);font-weight:800;letter-spacing:-.02em;margin-bottom:2px}
/* tuỳ chọn inline mở popover nhỏ (bảng luật "Composer") — details.op-pop: summary = nút .op, .pop = hộp nhỏ rơi xuống */
.rx-composer details.op-pop{position:relative}
.rx-composer details.op-pop>summary{list-style:none}
.rx-composer details.op-pop>summary::-webkit-details-marker{display:none}
.rx-composer details.op-pop[open]>summary{background:var(--surface-2);color:var(--ink)}
.rx-composer details.op-pop>.pop{position:absolute;top:calc(100% + 6px);left:0;z-index:6;min-width:280px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:8px;text-align:left}
.rx-composer .pop .rx-row{flex-wrap:wrap;gap:8px}
.rx-composer .pop .rx-input{width:84px}
.rx-composer .sug button.rx-chip{font:inherit;margin:0;cursor:pointer}
.rx-composer .cost.chan{color:var(--err)}
.rx-checks .h b.chan-n{color:var(--err)}
.rx-composer .go.busy{opacity:.6;cursor:progress}

/* dòng media sống — ô 7: mỗi cảnh một dòng, thông báo NẰM TRONG danh sách */
.rx-mrows{border-top:1px solid var(--line)}
.rx-mrow{display:grid;grid-template-columns:28px 104px 1fr 60px 150px;gap:14px;align-items:center;padding:9px 6px;border-bottom:1px solid var(--line)}
.rx-mrow:hover{background:var(--surface-2)}
.rx-mrow .n{font-size:var(--fs-cap);color:var(--ink-faint);font-variant-numeric:tabular-nums;text-align:right}
.rx-mrow img{width:104px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block;background:var(--surface-2)}
.rx-mrow .no{width:104px;aspect-ratio:16/9;border-radius:6px;border:1.5px dashed var(--line);display:grid;place-items:center;color:var(--ink-faint);font-size:var(--fs-min)}
.rx-mrow .tx{min-width:0}.rx-mrow .tx b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.rx-mrow .tx .s{font-size:var(--fs-cap);color:var(--ink-faint);display:flex;gap:6px;flex-wrap:wrap}
.rx-mrow .num{text-align:right;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:var(--fs-cap)}
.rx-mrow .acts{display:flex;justify-content:flex-end;gap:4px;opacity:.5}
.rx-mrow:hover .acts{opacity:1}
.rx-mrow.notice{grid-template-columns:28px 1fr auto;background:var(--gold-soft);color:var(--gold-ink)}
.rx-mrow.notice .rx-i{color:var(--gold-ink)}
.rx-mrow.notice.err{background:var(--err-soft);color:var(--err-ink)}
.rx-mrow.notice.err .rx-i{color:var(--err)}
.rx-mrow.more{grid-template-columns:1fr;text-align:center;color:var(--ink-soft);cursor:pointer;font-weight:600}

/* 3 bước làn G-Labs (ngang) — ô 6 và ô 7 dùng chung: Xuất prompt → Vẽ ở G-Labs → Nạp ảnh về */
.rx-hsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rx-hstep{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface);display:flex;flex-direction:column;gap:8px;min-width:0}
.rx-hstep .h{display:flex;align-items:center;gap:8px;font-weight:700}
.rx-hstep .h .n{width:20px;height:20px;border-radius:50%;background:var(--surface-2);color:var(--ink-soft);display:grid;place-items:center;font-size:var(--fs-min);flex:none}
.rx-hstep.done .h .n{background:var(--green-soft);color:var(--green)}
.rx-hstep.now{border-color:var(--accent)}
.rx-hstep.now .h .n{background:var(--accent);color:var(--on-accent)}
.rx-hstep.lock{opacity:.55}
.rx-hstep .s{font-size:var(--fs-cap);color:var(--ink-soft);line-height:1.5}
.rx-hstep .rx-row{margin-top:auto}

/* đọc kịch bản — cột chữ hẹp dễ đọc, không mono */
.rx-reader{max-width:680px;line-height:1.75;color:var(--ink)}
.rx-reader p{margin:0 0 14px}
.rx-reader p:first-child::first-letter{font-weight:800}
.rx-reader .hook{font-weight:600}
.rx-reader mark{background:var(--gold-soft);color:var(--gold-ink);border-radius:3px;padding:0 2px}

/* nhạc theo đoạn cảm xúc — thanh chia đoạn + nhãn */
.rx-tlbar{display:flex;gap:2px;height:22px;border-radius:6px;overflow:hidden}
.rx-tlbar i{display:grid;place-items:center;min-width:0;overflow:hidden;white-space:nowrap;font-size:var(--fs-min);font-weight:700;color:var(--on-accent);background:var(--ink-soft);font-style:normal}
.rx-tlbar i.tense{background:var(--gold)}.rx-tlbar i.serious{background:var(--ink-soft)}.rx-tlbar i.reveal{background:var(--accent)}.rx-tlbar i.calm{background:var(--blue)}
.rx-tlbar-t{display:flex;justify-content:space-between;font-size:var(--fs-min);color:var(--ink-faint);margin-top:3px;font-variant-numeric:tabular-nums}
.rx-tlbar-wrap{position:relative;margin-top:14px}
.rx-tlbar-wrap .rut{position:absolute;top:-12px;transform:translateX(-50%) rotate(90deg);color:var(--ink-faint);width:12px;height:12px}
.rx-tlbar i.playful{background:var(--accent)}.rx-tlbar i.any{background:var(--ink-faint)}
.rx-tlbar i.mo{opacity:.7}.rx-tlbar i.trong{opacity:.35}
.rx-input.sm{width:auto;padding:4px 8px;font-size:var(--fs-cap)}
.rx-ck.top{align-items:flex-start}.rx-ck .w70{min-width:70px}
.err{color:var(--err)}
.rx-filerow .tx .rx-player{margin-top:6px}

/* thẻ cổng duyệt — rx-card + huy hiệu "Chờ bạn duyệt"; ruột tuỳ cổng */
.rx-card.gate{border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
.rx-card.gate>.rx-card-h .rx-badge.focus{margin-left:auto}
.rx-card-h .rx-sp{flex:1}

/* xem lại — hộp rộng: thanh việc (Sửa tay · Chạy lại) + hiện vật */
.rx-modal.wide{max-width:1040px;max-height:88vh;display:flex;flex-direction:column;padding:0;overflow:hidden}
.rx-modal.wide .hd{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.rx-modal.wide .hd h3{margin:0}
.rx-modal.wide .hd .x{margin-left:auto}
.rx-modal.wide .bd{padding:16px 18px;overflow:auto;max-height:none;white-space:normal}
.rx-modal.wide .bar{display:flex;align-items:center;gap:8px;padding:8px 18px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:var(--fs-cap);color:var(--ink-soft)}
.rx-modal.wide .bar b{color:var(--ink)}
.rx-modal.wide .rx-pre.mono{max-height:none}
.rx-modal.wide .bar .rx-sp{flex:1}
.rx-kv dd.trong{color:var(--ink-faint)}
.rx-tile.thieu{border-color:color-mix(in srgb,var(--err) 45%,transparent)}
.rx-tile.thieu .no{color:var(--err)}
.rx-tile .nm .mut{color:var(--ink-faint);font-weight:400}
.rx-tile.sq .no{aspect-ratio:1/1}
.rx-tile .lb.err{background:var(--err)}
.rx-tile.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.rx-input.mono{font-family:var(--mono);font-size:var(--fs-cap);line-height:1.55}
.rx-tiles.sm .rx-tile.add{min-height:0;aspect-ratio:1/1}

/* thumbnail ứng viên — ô ảnh 16/9 chọn 1, có nút vẽ thêm */
.rx-tiles.thumb{grid-template-columns:repeat(3,1fr)}
.rx-opt .ck .rx-i{display:none}.rx-opt.on .ck .rx-i{display:block}
.rx-tile .no{aspect-ratio:4/3}.rx-tile.wide .no{aspect-ratio:16/9}
.rx-tile .lb{position:absolute;left:8px;bottom:8px;font-size:var(--fs-min);font-weight:700;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.6);color:var(--on-accent)}
/* 29/9 (G-13): nhãn thêm trên ô thumbnail — góc trên (tên khung / ngoài khung) · góc phải (chữ sai / chưa so chữ / chữ chưa chuẩn) */
.rx-tile .lb.tren{top:8px;bottom:auto}
.rx-tile .lb.phai{left:auto;right:8px}
/* 29/9 (G-13 K2): "Xem như trên feed" — ảnh mẫu đang chọn, hoặc khung tạm mang chữ đang gõ khi chưa vẽ */
.pg-feed-anh{flex:0 0 auto;width:172px;aspect-ratio:16/9;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.pg-feed-tam{flex:0 0 auto;width:172px;aspect-ratio:16/9;border-radius:9px;border:1px dashed var(--line);background:var(--surface-2);display:flex;align-items:center;justify-content:center;text-align:center;padding:6px}
.pg-feed-tam b{font-size:var(--fs-h);line-height:1.1;color:var(--ink)}

/* cảnh hỏng trong danh sách */
.rx-mrow img.hong{opacity:.3}

/* kiểm trước khi chạy (preflight 7 kiểm · 3 mức ok / nhắc / chặn) — nằm ngay dưới thanh soạn */
.rx-checks{max-width:760px;margin:14px auto 0;border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.rx-check{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--line);font-size:var(--fs-cap);color:var(--ink-soft)}
.rx-check:first-child{border-top:0}
.rx-check .rx-i{width:14px;height:14px}
.rx-check.ok .rx-i{color:var(--green)}.rx-check.nhac .rx-i{color:var(--gold-ink)}.rx-check.chan{background:var(--err-soft);color:var(--err-ink)}.rx-check.chan .rx-i{color:var(--err)}
.rx-check b{color:var(--ink)}.rx-check.chan b{color:var(--err-ink)}
.rx-check .tx{min-width:0}
.rx-checks .h{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:var(--fs-min);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;background:var(--surface-2)}
.rx-checks .h .rx-sp{flex:1}
/* hàng chân tab — nhật ký kỹ thuật · báo lỗi · góp ý · tiền lượt này (bugStation cũ) — mờ, trên dock */
.rx-foot{display:flex;align-items:center;gap:6px;justify-content:flex-end;color:var(--ink-faint);font-size:var(--fs-cap);margin-top:14px}
.rx-foot .rx-btn.ghost{color:var(--ink-faint)}
.rx-foot .cost{margin-right:auto;font-variant-numeric:tabular-nums}
details.rx-adv.nhat-ky:not([open]){display:none}   /* nhật ký chỉ mở bằng nút ở chân tab — không bày dòng gập thứ hai */
details.rx-adv.nhat-ky>.body{padding-top:14px}
/* dòng media: cảnh có CLIP Veo — huy hiệu phim trên ảnh khung đầu */
.rx-mrow .th{position:relative;width:104px}
.rx-mrow .th .clip{position:absolute;left:5px;bottom:5px;display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-min);font-weight:700;padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.65);color:var(--on-accent)}
.rx-mrow .th .clip .rx-i{width:10px;height:10px;stroke-width:2.5}
.rx-mrow .tx .s .goiy{display:inline-flex;align-items:center;gap:3px;color:var(--gold-ink);font-weight:600}.rx-mrow .tx .s .goiy .rx-i{width:11px;height:11px}
.rx-mrow .tx .s .thieugoc{display:inline-flex;align-items:center;gap:3px;color:var(--err-ink);font-weight:600}.rx-mrow .tx .s .thieugoc .rx-i{width:11px;height:11px}
/* bàn casting (cổng GATE_REFS nhịp A) — 19/9 X5: thay ruột inline */
.cd-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.cd-sum .box{padding:9px 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface)}
.cd-sum .box.ok{background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 30%,transparent)}
.cd-sum .k{font-size:var(--fs-cap);font-weight:800;font-family:var(--font-ui);letter-spacing:.05em;color:var(--gold-ink)}.cd-sum .box.ok .k{color:var(--accent-ink)}
.cd-sum .v{font-weight:700;margin-top:3px}.cd-sum .s{font-size:var(--fs-min);color:var(--ink-faint);margin-top:2px}
.cd-row{display:flex;gap:8px;align-items:center;padding:7px 8px;border:1px solid var(--line);border-radius:9px;background:var(--surface);margin-bottom:6px;flex-wrap:wrap}
.cd-row.inline{border-style:dashed;background:transparent;padding:5px 8px;margin-bottom:5px}
.cd-row input[type=checkbox],details.cd-cast summary input[type=checkbox]{width:15px;height:15px;cursor:pointer;margin:0}
.cd-row .rx-input{flex:1;min-width:160px}.cd-row img{height:36px;border-radius:5px;border:1px solid var(--line)}
.cd-row .meta,details.cd-cast .meta,.cd-goiy .meta{font-size:var(--fs-cap);color:var(--ink-faint)}.cd-row .meta.ok{color:var(--accent-ink)}
.cd-row .full{flex-basis:100%}
details.cd-cast{border:1px solid var(--line);border-radius:9px;background:var(--surface);margin-bottom:6px}
details.cd-cast.reuse{border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
details.cd-cast summary{display:flex;gap:8px;align-items:center;padding:8px 10px;cursor:pointer;list-style:none;flex-wrap:wrap}
details.cd-cast summary::-webkit-details-marker{display:none}
details.cd-cast summary b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.cd-cast summary .sua{margin-left:auto;font-size:var(--fs-min);color:var(--ink-faint)}
details.cd-cast .body{display:flex;gap:8px;align-items:flex-start;padding:0 10px 9px 33px}
details.cd-cast .body .f{flex:1;min-width:0}details.cd-cast .body .rx-input.sm{width:180px}
details.cd-cast textarea.rx-input{width:100%;min-height:46px;margin-top:5px}
.cd-goiy{margin-bottom:9px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:9px;background:var(--gold-soft)}
.cd-goiy .pair{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:5px}
.cd-ev{font-size:var(--fs-cap);margin-top:3px}.cd-ev.line{color:var(--ink-soft);font-style:italic}.cd-ev .err{color:var(--err);font-weight:700}.cd-ev .nghi{color:var(--gold-ink);font-weight:700}.cd-ev .cu{color:var(--ink-faint)}
.rx-help.rx-block{display:block}
/* dock: tiền theo thời gian thực */
.rx-dock .tien{color:var(--ink-faint);font-variant-numeric:tabular-nums}
.rx-dock .tien b{color:var(--ink-soft)}
.rx-grid-3 .rx-kv{grid-template-columns:1fr;gap:4px}.rx-grid-3 .rx-kv dt{margin-bottom:2px}
/* lô Veo (4s · 6s · 8s) — 3 thẻ ngang, mỗi thẻ: đếm cảnh → 2 nút tải → 1 dòng G-Labs → ô thả clip + tiến độ */
.rx-lo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rx-lo-the{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:9px;min-width:0}
.rx-lo-the .h{display:flex;align-items:center;gap:8px}
.rx-lo-the .h b{font-size:var(--fs-h)}
.rx-lo-the .h .rx-badge{margin-left:auto}
.rx-lo-the .gl{font-size:var(--fs-cap);color:var(--ink-soft);padding:7px 9px;border-radius:7px;background:var(--surface-2);line-height:1.5}
.rx-lo-the .gl b{color:var(--ink)}
.rx-lo-the .rx-drop{padding:12px}
.rx-lo-the.done{border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.rx-lo-the.lock{opacity:.55}
.rx-card.lock{opacity:.6}
.rx-card.lock .rx-card-h{border-bottom:0;margin-bottom:0;padding-bottom:0}

/* ══ ④ VỎ CHUNG — THANH BÊN · THANH TRÊN (17/9/2026 · B Trang chủ) ══════════════════════════════
   Dời từ index.html + channel.html: hai bản chép đã lệch (chấm trạng thái, ellipsis tên kênh, canh nút). Nay MỘT nguồn,
   markup ở hai trang giữ tên class cũ (.side .navitem .chitem …) vì không đụng thành phần rx- nào; emoji → icon nét.
   LUẬT (vấp A1 16/9): trong thanh bên CHỈ dùng --sidebar-* (nền tối ở cả light) — không --ink, không --line. */
.app{display:grid;grid-template-columns:248px 1fr;height:100vh;transition:grid-template-columns .18s ease}
.app.sb-collapsed{grid-template-columns:0 1fr}
.app.sb-collapsed .side{overflow:hidden;opacity:0;pointer-events:none}
.side{background:var(--sidebar);color:var(--sidebar-ink);padding:20px 14px;display:flex;flex-direction:column;border-right:1px solid var(--sidebar-line);overflow:auto;font-size:var(--fs-body)}
.brand{display:flex;align-items:center;gap:9px;padding:4px 8px 18px;text-decoration:none}
.brand .mk{width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.brand .mk svg{display:block;width:30px;height:30px}
.brand .nm{font-weight:800;font-size:var(--fs-h);letter-spacing:-.02em;color:var(--on-accent)}
.newbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--accent);color:var(--on-accent);border:0;border-radius:9px;padding:10px 12px;font:inherit;font-weight:700;cursor:pointer;margin-bottom:8px;text-decoration:none}
.newbtn:hover{background:var(--accent-bright)}
.navitem{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:8px;color:var(--sidebar-mut);cursor:pointer;font:inherit;font-weight:500;text-decoration:none;background:none;border:0;text-align:left}
.navitem:hover{background:var(--sidebar-2);color:var(--sidebar-ink)}
.navitem.on{background:var(--sidebar-2);color:var(--on-accent)}
.sidelabel{font-size:var(--fs-min);letter-spacing:.14em;text-transform:uppercase;color:var(--sidebar-mut);margin:18px 8px 8px}
.chitem{display:flex;align-items:center;gap:9px;min-width:0;padding:8px 11px;border-radius:8px;color:var(--sidebar-mut);cursor:pointer;text-decoration:none}
.chitem:hover{background:var(--sidebar-2);color:var(--sidebar-ink)}
.chitem.on{background:var(--sidebar-2);color:var(--on-accent)}
.chitem .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chitem .hv{display:inline-flex;opacity:.6}
.chitem .dot{width:7px;height:7px;border-radius:50%;background:var(--sidebar-mut);flex:0 0 7px}
/* chấm trạng thái lượt (BACKLOG⑥c): chạy = xanh nhấp · chờ duyệt = vàng · nghỉ = xám */
.chitem .dot.st-running{background:var(--green);animation:rx-dotpulse 1.6s infinite}
.chitem .dot.st-awaiting_gate{background:var(--gold)}
@keyframes rx-dotpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent)}70%{box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 0%,transparent)}}
.chitem-wrap{position:relative;display:flex;align-items:center}
.chitem-wrap .chitem{flex:1}
.chitem-wrap .ch-trash{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:none;place-items:center;background:transparent;border:0;color:var(--sidebar-mut);cursor:pointer;padding:4px;border-radius:6px;line-height:1}
.chitem-wrap:hover .ch-trash{display:grid}
.chitem-wrap .ch-trash:hover{background:color-mix(in srgb,var(--err) 18%,transparent);color:var(--err)}
.side .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--sidebar-line);font-size:var(--fs-cap);color:var(--sidebar-mut);line-height:1.6}
.side .foot b{display:flex;align-items:center;gap:6px;color:var(--sidebar-ink);font-weight:700;font-size:var(--fs-body)}
.side .foot a{display:inline-flex;align-items:center;gap:5px;color:inherit;margin:6px 10px 0 0}
.side .foot a:hover{color:var(--sidebar-ink)}
.themebtn{display:flex;align-items:center;gap:8px;width:100%;background:var(--sidebar-2);color:var(--sidebar-ink);border:1px solid var(--sidebar-line);border-radius:8px;padding:8px 11px;font:inherit;font-weight:600;cursor:pointer;margin-top:12px}
.themebtn:hover{border-color:var(--accent)}
.themebtn .rx-i{color:var(--gold)}
/* 24/9 (G-08 việc 10): nút "Có gì mới" ở thanh bên — chấm đỏ khi có đợt chưa xem; hộp danh sách thay đổi (rx-ui.js rxCoGiMoi) */
#cgmBtn{position:relative}
.cgm-cham{width:9px;height:9px;border-radius:50%;background:var(--err);margin-left:auto;box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 25%,transparent)}
.rx-modal.cgm{max-width:640px;width:calc(100% - 32px)}
.rx-modal.cgm .cgm-bd{white-space:normal;max-height:62vh}
.cgm-dot+.cgm-dot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.cgm-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.cgm-ds{margin:0;padding-left:18px}
.cgm-ds li{margin:5px 0;line-height:1.5;color:var(--ink)}
.cgm-o{display:inline-block;font-size:var(--fs-cap);font-weight:700;color:var(--accent);margin-right:6px}
/* 24/9 (G-08): lớp nhỏ thay style= viết thẳng trong channel.js (ô .srt · SEO · hướng dẫn Mac · hộp Thêm nhân vật) */
.rx-drop.sm{padding:10px}
.rx-help.inl{display:inline}
.rx-help.mt7{margin-top:7px}
.rx-ol{margin:6px 0 0 18px;padding:0;line-height:1.7}
.rx-grow{flex:1}
.rx-scroll.cao{max-height:220px}
.themebtn+.themebtn{margin-top:8px}
.main{overflow:auto;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 28px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--topbar-bg);backdrop-filter:blur(6px);z-index:5}
.topbar .l,.topbar .r{display:flex;align-items:center;gap:10px}
.crumb{font-size:var(--fs-body);color:var(--ink-faint)}
.crumb b{color:var(--ink);font-weight:700}
.sb-toggle{display:grid;place-items:center;width:34px;height:34px;flex:none;padding:0;background:none;border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--ink-soft)}
.sb-toggle:hover{background:var(--surface)}
.modebtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:999px;padding:6px 13px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;line-height:1.2}
.modebtn:hover{background:var(--surface-2)}
/* — ô ảnh điều hướng (mockup "Bày nội dung" 1): ảnh + nhãn đè, bấm cả ô — trang chủ · trạng thái hub — */
.rx-navtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rx-navtile{position:relative;display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--surface-2);border:1px solid var(--line);padding:0;margin:0;text-align:left;font:inherit;color:inherit;width:100%}
.rx-navtile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.rx-navtile:hover img{transform:scale(1.04)}
/* chữ đè trên ảnh tối: --on-accent (trắng ở cả 2 chế độ) — không #fff (thước soi-mau) */
.rx-navtile .lb{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 11px;background:linear-gradient(transparent,rgba(0,0,0,.74));color:var(--on-accent);display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.rx-navtile .lb .t{display:flex;align-items:center;gap:7px;font-weight:700;font-size:var(--fs-h)}
.rx-navtile .lb .rx-i{color:var(--on-accent);flex:none}
.rx-navtile .lb .s{font-size:var(--fs-cap);font-weight:400;line-height:1.35;opacity:.85}
.rx-navtile.focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rx-navtile .st{position:absolute;top:9px;right:9px}
.rx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.rx-card.click{cursor:pointer;transition:box-shadow .15s,transform .15s;text-decoration:none;color:inherit;display:block}
.rx-card.click:hover{box-shadow:0 6px 20px rgba(20,20,30,.09);transform:translateY(-1px)}
@media (max-width:1100px){.rx-navtiles{grid-template-columns:repeat(2,1fr)}}