/* ============================================================================
   10K Video — hệ thiết kế v2 (30/07)
   Sáng/tối chọn qua [data-theme] do ui-prefs.js đặt TRƯỚC khi vẽ trang, nên chỉ cần
   MỘT bộ biến cho tối (không phải viết 2 lần cho @media + [data-theme]).
   Thứ tự file: 1 biến · 2 nền tảng · 3 thành phần dùng chung · 4 khung app
   · 5 bàn dựng (Video gốc) · 6 hàng đợi · 7 bảng Hoàn thành · 8 kho trám/ảnh
   · 9 cài đặt · 10 màn Duyệt · 11 màn Chọn đoạn · 12 bóc sub · 13 hộp thoại
   · 13b popup việc chạy nền · 14 màn hẹp (phải ở CUỐI để đè được các mục trên).
   ========================================================================== */

/* ---------- 1. Biến ---------- */
/* Manrope biến thiên (một file đủ mọi độ đậm 200-800), đóng kèm app nên không cần mạng.
   Đã kiểm cmap: đủ dấu tiếng Việt (Poppins/Sora/Gantari thiếu — đừng đổi bừa). */
@font-face {
  font-family: Manrope;
  src: url("/tinh/fonts/Manrope-var.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* Bộ màu bám theo x.giauco.vn (SanSan): NỀN TRẮNG TINH, phân tách bằng VIỀN chứ không
     bằng mảng xám; accent xanh ngọc. Xám đều trung tính, không ám màu. */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --surface-3: #ebebeb;
  --line: #dedede;
  --line-2: #cacaca;
  --txt: #10171a;
  --txt-2: #485559;
  --txt-3: #727e82;

  --accent: #00a49d;
  --accent-2: #008c89;          /* hover — đậm hơn, không nhạt đi */
  --accent-soft: #d5f6f4;
  --accent-line: #96e1dc;
  --on-accent: #ffffff;

  --ok: #20a04e;   --ok-soft: #def8e2;
  --warn: #c97f00; --warn-soft: #fff0cc;
  --danger: #db0003; --danger-soft: #ffebe7;
  --info: #3284d0; --info-soft: #e2f2ff;

  --r-xs: 4px; --r-sm: 6px; --r: 8px; --r-lg: 10px; --r-xl: 14px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16, 23, 26, .05);
  --sh-2: 0 1px 3px rgba(16, 23, 26, .07), 0 6px 16px rgba(16, 23, 26, .06);
  --sh-3: 0 12px 36px rgba(16, 23, 26, .14);
  --rail: 220px;
  --topbar: 54px;

  --font: Manrope, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Hệ số phóng CHỮ cho cả app. Mọi cỡ chữ trong file này viết dạng
     calc(<số gốc>px * var(--phong-chu)) — giữ con số gốc để đọc code vẫn thấy ngay
     "13px lúc hệ số 1", dễ hiểu hơn đổi hết sang rem lẻ (0.8125rem).
     Đổi MỘT số này là cả app to/nhỏ theo, mọi tỷ lệ giữ nguyên. 1 = cỡ cũ (tới 1/08). */
  --phong-chu: 1.1;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1214;
  --surface: #151d20;
  --surface-2: #1d272a;
  --surface-3: #293437;
  --line: #263033;
  --line-2: #3e4a4e;
  --txt: #e9eeef;
  --txt-2: #a1adb1;
  --txt-3: #778286;

  --accent: #0dcbc3;
  --accent-2: #64ded7;
  --accent-soft: #003636;
  --accent-line: #005a58;
  --on-accent: #0b1214;

  --ok: #59d38c;   --ok-soft: #0f3620;
  --warn: #f7b83d; --warn-soft: #432f07;
  --danger: #fa6863; --danger-soft: #551f1d;
  --info: #6fb5ef; --info-soft: #0f304a;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .38), 0 12px 28px rgba(0, 0, 0, .34);
  --sh-3: 0 18px 50px rgba(0, 0, 0, .55);
}

/* ---------- 2. Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* Nhiều thành phần đặt display (grid/flex) ở class, thắng luôn `display:none` mặc định
   của [hidden] — thiếu dòng này là ẩn section bằng JS không ăn. */
[hidden] { display: none !important; }
/* ui-prefs.js gắn class này đúng 1 khung hình lúc đổi sáng/tối (xem lý do ở đó) */
.no-anim, .no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; }
body {
  background: var(--bg);
  color: var(--txt);
  font: calc(14px * var(--phong-chu))/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1 { font-size: calc(21px * var(--phong-chu)); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
h2 { font-size: calc(12px * var(--phong-chu)); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3); margin: 22px 0 9px; }
h3 { font-size: calc(15.5px * var(--phong-chu)); font-weight: 680; letter-spacing: -.01em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font: calc(12.5px * var(--phong-chu))/1.4 var(--mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 1px 5px; }
b, strong { font-weight: 650; }
::selection { background: var(--accent-soft); color: var(--txt); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }

.sub { color: var(--txt-2); font-size: calc(13px * var(--phong-chu)); max-width: 82ch; }
.mut { color: var(--txt-3); font-size: calc(12.5px * var(--phong-chu)); }
.grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer { flex: 1; }

/* Icon SVG (thay emoji ở khung app — emoji mỗi máy vẽ một cỡ, không canh được hàng) */
.ic { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor; fill: none;
      stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic-lg { width: 19px; height: 19px; }
.ic-sm { width: 13px; height: 13px; }

/* ---------- 3. Thành phần dùng chung ---------- */

/* Nút — 4 cấp: chính (đặc) · phụ (viền) · lặng (chữ) · nguy hiểm */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 7px 13px; font: 650 calc(13px * var(--phong-chu))/1.3 var(--font); letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap; transition: background .13s, border-color .13s, color .13s, transform .06s;
}
button:hover:not(:disabled), .btn:hover:not(:disabled) { background: var(--accent-2); }
button:active:not(:disabled) { transform: translateY(.5px); }
button:disabled, .btn:disabled { opacity: .42; cursor: default; }

/* .ghost = cấp phụ (tên cũ giữ nguyên để mọi chỗ JS chưa đổi vẫn đúng kiểu) */
button.ghost, .btn.ghost {
  background: var(--surface); color: var(--txt); border-color: var(--line-2);
}
button.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--txt-3); }
button.quiet {
  background: transparent; color: var(--txt-2); border-color: transparent; padding: 6px 9px;
}
button.quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--txt); }
button.del, button.stopbtn {
  background: transparent; color: var(--danger); border-color: transparent; padding: 6px 9px;
}
button.del:hover:not(:disabled), button.stopbtn:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); }
button.sm { padding: 5px 10px; font-size: calc(12.5px * var(--phong-chu)); }
button.icon { padding: 6px; border-radius: var(--r-xs); }
button.wide { width: 100%; }
button.tall { padding: 10px 16px; font-size: calc(14px * var(--phong-chu)); border-radius: var(--r); }

/* Ô nhập */
input[type=text], input[type=number], input[type=search], textarea, select {
  background: var(--surface); color: var(--txt);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 7px 10px; font: calc(13.5px * var(--phong-chu))/1.45 var(--font); width: 100%;
  transition: border-color .13s, box-shadow .13s;
}
select {
  appearance: none; cursor: pointer; padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b8394' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--txt-3); }
textarea { resize: vertical; min-height: 64px; }
input[type=color] { width: 100%; height: 32px; padding: 2px; cursor: pointer; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); cursor: pointer; margin: 0; }
/* Thanh trượt vẽ tay: để accent-color mặc định thì rãnh ăn theo color-scheme của trình
   duyệt, nền trắng mà rãnh vẫn đen. */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: var(--r-pill);
  background: var(--surface-3); cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(16, 23, 26, .25); cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); cursor: pointer;
}
label { font-size: calc(13px * var(--phong-chu)); }

/* Hàng chọn có mô tả (Cài đặt) */
.opt {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); margin-bottom: 8px; transition: border-color .13s, background .13s;
}
.opt:hover { border-color: var(--line-2); }
.opt:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.opt input { margin-top: 2px; }
.opt .t { display: block; font-weight: 620; font-size: calc(13.5px * var(--phong-chu)); }
.opt .d { display: block; color: var(--txt-2); font-size: calc(12.5px * var(--phong-chu)); margin-top: 2px; }
.opt:has(input:checked) .d { color: var(--txt-2); }

/* Thẻ / khung */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 15px 17px; box-shadow: var(--sh-1);
}
.panel + .panel { margin-top: 12px; }
.panel.flat { box-shadow: none; background: transparent; }
.row { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: none; }

/* Nhãn trạng thái */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font: 650 calc(11px * var(--phong-chu))/1 var(--font); letter-spacing: .03em; text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--txt-3); border: 1px solid transparent;
}
.tag.done, .tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.failed { background: var(--danger-soft); color: var(--danger); }
.tag.running { background: var(--accent-soft); color: var(--accent); }
.tag.awaiting_review { background: var(--info-soft); color: var(--info); }
.tag.cancelled, .tag.warn { background: var(--warn-soft); color: var(--warn); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill); font-size: calc(12.5px * var(--phong-chu)); font-weight: 550;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--txt-2);
}

/* Tabs — dạng gạt (segmented) */
.tabs {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); flex-wrap: wrap;
}
.tabs button, .tabs .tab {
  background: transparent; color: var(--txt-2); border: none;
  padding: 6px 12px; border-radius: var(--r-xs); font-size: calc(12.8px * var(--phong-chu)); font-weight: 600;
}
.tabs.fill { display: flex; width: 100%; }
.tabs.fill button { flex: 1; }
.tabs button:hover:not(.active) { background: var(--surface-3); color: var(--txt); }
.tabs button.active, .tabs .active {
  background: var(--surface); color: var(--txt); box-shadow: var(--sh-1);
}
:root[data-theme="dark"] .tabs button.active { background: var(--surface-3); }
.tabs .cnt { font-weight: 500; opacity: .68; margin-left: 2px; }

/* Thanh tiến độ */
.bar { height: 5px; width: 150px; flex: 0 0 auto; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .4s ease; }

/* Khối nhỏ có tiêu đề — thay cho một cột dài liền mạch. Dùng ở cột thiết lập của
   bàn dựng và ở màn Duyệt: mỗi nhóm việc một khối, liếc là biết đang chỉnh gì. */
.blk {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.blk > .h {
  display: flex; align-items: center; gap: 6px; padding: 7px 11px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font: 650 calc(10.5px * var(--phong-chu))/1.35 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3);
}
.blk > .h .ic { width: 13px; height: 13px; }
.blk > .h .n { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 600; }
.blk > .b { padding: 11px; display: flex; flex-direction: column; gap: 10px; }

/* Ô số liệu — hàng thông tin nén, kẻ chỉ 1px giữa các ô.
   Đường kẻ vẽ bằng box-shadow của TỪNG ô (không phải nền của lưới): số ô lẻ so với số
   cột thì ô trống còn lại vẫn trắng, không thành mảng xám cụt. */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 1px;
  background: var(--surface); border-radius: var(--r); overflow: hidden;
}
.stats > div { padding: 7px 10px; min-width: 0; box-shadow: 0 0 0 1px var(--line); }
.stats .k {
  font: 620 calc(10px * var(--phong-chu))/1.3 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3);
}
.stats .v {
  font-size: calc(13.5px * var(--phong-chu)); font-weight: 640; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stats .v.ok { color: var(--ok); }
.stats .v.mut { color: var(--txt-3); font-weight: 500; }

/* Thanh hạn mức gói ChatGPT. Vẽ phần CÒN LẠI chứ không phải phần đã dùng: câu hỏi của
   người dùng là "còn bao nhiêu", thanh vơi dần trả lời đúng câu đó — thanh đầy dần lại
   đọc thành "sắp xong việc", ngược nghĩa. */
.hm-hang { display: flex; flex-direction: column; gap: 5px; }
.hm-nhan {
  display: flex; align-items: baseline; gap: 6px;
  font-size: calc(12.5px * var(--phong-chu)); color: var(--txt-2);
}
.hm-nhan b { font-size: calc(15px * var(--phong-chu)); color: var(--txt); }
.hm-nhan .r { margin-left: auto; color: var(--txt-3); font-size: calc(11.5px * var(--phong-chu)); }
.hm-thanh {
  display: block;   /* thẻ ở thanh ray dựng bằng <span> — thiếu dòng này là mất chiều cao */
  height: 7px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden;
}
.hm-thanh > i { display: block; height: 100%; border-radius: var(--r-pill); transition: width .3s; }
.hm-thanh > i.ok { background: var(--ok); }
.hm-thanh > i.warn { background: var(--warn); }
.hm-thanh > i.danger { background: var(--danger); }

/* Trạng thái rỗng */
.empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 44px 20px; text-align: center; color: var(--txt-3);
}
.empty .ic { width: 26px; height: 26px; opacity: .5; }
.empty b { color: var(--txt-2); font-size: calc(14px * var(--phong-chu)); }

/* ---------- 4. Khung app: thanh ray trái + thanh đầu ---------- */
.app { display: flex; min-height: 100vh; }

.rail {
  width: var(--rail); flex: 0 0 var(--rail);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 3px;
  padding: 15px 12px; background: var(--surface); border-right: 1px solid var(--line);
}
.rail .brand {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 4px 16px 8px; font-size: calc(15px * var(--phong-chu)); font-weight: 720; letter-spacing: -.02em;
}
.rail .brand .nm { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.railbtn {
  flex: 0 0 auto; background: transparent; border: none; color: var(--txt-3);
  padding: 5px; border-radius: var(--r-sm);
}
.railbtn:hover:not(:disabled) { background: var(--surface-2); color: var(--txt); }
.railbtn .ic { transform: rotate(180deg); transition: transform .16s; }  /* « = thu gọn */
.rail .brand .dot {
  width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; color: #fff;
}
.rail .brand .dot .ic { width: 15px; height: 15px; stroke-width: 2.1; }
.rail .grp { font: 650 calc(10.5px * var(--phong-chu))/1 var(--font); letter-spacing: .09em; text-transform: uppercase;
             color: var(--txt-3); padding: 15px 10px 6px; }
.rail nav a {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--txt-2); font-size: calc(13.4px * var(--phong-chu)); font-weight: 580; text-decoration: none;
  transition: background .13s, color .13s;
}
.rail nav a:hover { background: var(--surface-2); color: var(--txt); text-decoration: none; }
.rail nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.rail nav a .ic { opacity: .85; }
.rail nav a .n {
  margin-left: auto; font: 600 calc(11px * var(--phong-chu))/1 var(--font); padding: 3px 6px;
  border-radius: var(--r-pill); background: var(--surface-3); color: var(--txt-3);
}
.rail nav a.active .n { background: var(--accent); color: var(--on-accent); }
.rail .foot { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding-top: 10px; }
.rail .foot > .row2 { display: flex; gap: 6px; }
.rail .foot > .row2 button { flex: 1; }

/* Thẻ hạn mức gói ChatGPT ở đáy thanh ray — thấy ngay mà không phải vào Cài đặt.
   Bấm vào là sang ⚙️ Cài đặt xem đủ (gói gì, mấy cửa sổ, đo cách đây bao lâu). */
.hmcard {
  display: block; width: 100%; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px;
}
.hmcard:hover { background: var(--surface-2); text-decoration: none; }
/* Dòng đầu phải nói "CỦA BẠN": ghi trống không "Hạn mức tuần" thì khách đọc thành app
   phát cho họ một suất dùng có hạn, chứ không hiểu đây là gói ChatGPT của chính họ. */
.hmcard .hd {
  display: block; font: 650 calc(9.5px * var(--phong-chu))/1.3 var(--font);
  letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3);
}
.hmcard .l {
  display: flex; align-items: baseline; gap: 5px; margin-top: 2px;
  font: 600 calc(11px * var(--phong-chu))/1.3 var(--font); color: var(--txt-3);
}
.hmcard .l b { font-size: calc(13.5px * var(--phong-chu)); color: var(--txt); }
.hmcard .hm-thanh { margin-top: 6px; height: 5px; }
/* Thu gọn còn 64px: bỏ chữ, giữ số % trên thanh mảnh — vẫn đọc được ở liếc mắt.
   Chỗ này không đủ rộng cho câu giải thích, nên tooltip phải gánh (xem ui-prefs.js). */
:root.rail-min .hmcard { padding: 7px 5px; text-align: center; }
:root.rail-min .hmcard .hd { display: none; }
:root.rail-min .hmcard .l { display: block; margin: 0; }
:root.rail-min .hmcard .l span { display: none; }
:root.rail-min .hmcard .l b { font-size: calc(11.5px * var(--phong-chu)); }

/* Thẻ "có bản mới" ở góc dưới trái — chỉ hiện khi thật sự có bản mới */
.updcard {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: var(--r);
  padding: 8px 10px; font: 620 calc(12.5px * var(--phong-chu))/1.35 var(--font); cursor: pointer;
}
.updcard:hover:not(:disabled) { background: var(--accent-soft); filter: brightness(.97); }
.updcard .ic { flex: 0 0 auto; }
.updcard .tx { flex: 1; min-width: 0; }
.updcard .tx small { display: block; font-weight: 500; opacity: .8; font-size: calc(11px * var(--phong-chu)); }
/* Thu gọn menu: co còn một chấm nhấp nháy trên icon */
:root.rail-min .updcard { justify-content: center; padding: 9px 0; }
:root.rail-min .updcard .tx { display: none; }
.updcard .ic { animation: updpulse 2.4s ease-in-out infinite; }
@keyframes updpulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---- Thanh ray THU GỌN (chỉ còn icon) ----
   MỘT class .rail-min trên <html> lo cả hai đường: nút bấm tay và màn hẹp (<900px do
   ui-prefs.js gắn). Để @media lo phần màn hẹp thì bộ quy tắc này phải viết hai lần,
   sửa một chỗ là quên chỗ kia. */
:root.rail-min { --rail: 64px; }
:root.rail-min .rail { padding: 15px 10px; }
:root.rail-min .rail .brand { flex-direction: column; gap: 6px; padding: 2px 0 12px; }
:root.rail-min .rail .brand .nm,
:root.rail-min .rail nav a .t,
:root.rail-min .rail .foot button .t { display: none; }
/* Nhãn nhóm co thành một vạch kẻ — vẫn thấy được ranh giới Làm việc / Kho */
:root.rail-min .rail .grp {
  height: 1px; padding: 0; margin: 12px 8px; background: var(--line);
  overflow: hidden; text-indent: -999px;
}
:root.rail-min .rail nav a { justify-content: center; padding: 10px 0; }
/* Số việc còn lại thu về góc icon — thu gọn mà mất luôn con số thì hụt thông tin */
:root.rail-min .rail nav a .n {
  position: absolute; top: 2px; right: 6px; margin: 0; padding: 0 3px;
  min-width: 15px; height: 15px; display: grid; place-items: center; font-size: calc(9.5px * var(--phong-chu));
  background: var(--accent); color: var(--on-accent);
}
:root.rail-min .rail .foot { flex-direction: column; }
:root.rail-min .rail .foot button { width: 100%; padding: 9px 0; }
:root.rail-min .railbtn .ic { transform: none; }   /* » = mở lại */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar); flex: 0 0 auto; position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px; padding: 0 22px;
  background: var(--bg);   /* nền đục làm mức nền — trình duyệt cũ không có color-mix
                              thì thanh này trong suốt, chữ cuộn lên chồng lên nhau */
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
/* Tên bản dựng dài (dài nhất là ngày-giờ + tít đầy đủ) phải CO ĐƯỢC và cắt bằng "…":
   để flex:0 0 auto thì nó đẩy nhóm nút bên phải văng khỏi thanh, nút Cắt đoạn mất hẳn. */
.topbar h1 {
  font-size: calc(16.5px * var(--phong-chu)); font-weight: 680;
  flex: 0 1 auto; min-width: 4ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar > .chip { flex: 0 0 auto; white-space: nowrap; }
.topbar .crumb { color: var(--txt-3); font-size: calc(13px * var(--phong-chu)); }
/* Nhóm nút của clip đang chọn. Rỗng thì KHÔNG chiếm chỗ (không có gap thừa) nhờ
   :empty — thanh vẫn gọn ở những màn không dùng tới nó. */
.topact { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 0 auto; }
.topact:empty { display: none; }
/* Dấu Đã đăng / Không đăng trên thanh đầu trang duyệt. `flex:0 0 auto` để cửa sổ hẹp
   thì tên video co lại chứ không bóp dẹp hai nút; :empty vì JS chỉ đổ nút sau khi tải
   xong — không có nó thì hiện một mẩu viền 4px trống giữa thanh. */
.topbar > .post { flex: 0 0 auto; }
.topbar > .post:empty { display: none; }
.topact .nm {
  max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--txt-2); font-size: calc(12.5px * var(--phong-chu)); font-weight: 600;
  padding-left: 12px; border-left: 1px solid var(--line);
}
/* Nút Xoá trên thanh này chỉ đỏ khi rê vào — đỏ sẵn giữa thanh đầu trang thì lúc nào
   nhìn lên cũng thấy báo động, mà đây là nút hiếm dùng. */
.topact button.del { color: var(--txt-2); }
.topact button.del:hover { color: var(--danger); border-color: var(--danger); }
/* Nút việc-lẻ trên thanh đầu trang (mở thư mục · sửa chữ sub · cắt đoạn): XANH DƯƠNG để
   không lẫn với xanh ngọc của Lưu / Render lại — hai nhóm này khác hẳn nhau về hậu quả,
   nút xanh ngọc là nút ghi đè bản dựng, nút xanh dương chỉ mở bảng hoặc mở Finder. */
/* Hai màn dẫn sang nhau bằng thẻ <a> (Chi tiết dựng ⇄ Màn duyệt) — chọn `a` thay vì
   `button` để giữ được bấm-giữa mở tab mới. Thẻ `a` KHÔNG thừa hưởng kiểu của `button`
   nên phải chép lại phần khung (inline-flex + gap), thiếu là icon dính vào chữ. */
.topact button.tool, .topact a.tool {
  background: var(--info-soft); color: var(--info); border: 1px solid transparent;
  font-weight: 620;
}
.topact a.tool {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  border-radius: var(--r-sm); padding: 7px 13px;
  font: 620 calc(13px * var(--phong-chu))/1.3 var(--font); letter-spacing: -.005em;
  white-space: nowrap; transition: background .13s, color .13s;
}
.topact button.tool:hover:not(:disabled), .topact a.tool:hover { background: var(--info); color: #fff; }
/* "Chi tiết dựng" là đường đi tiếp CHÍNH từ màn Duyệt (Giang chốt 16/08) — tô đỏ đặc cho
   nổi hẳn khỏi mấy nút việc-lẻ. Đây là ngoại lệ CÓ CHỦ Ý của luật "đỏ = nguy hiểm" trong
   app: nút này không xoá gì, nó chỉ dẫn sang bàn dựng. Đừng nhân ngoại lệ này ra nút khác,
   không thì màu đỏ hết còn nghĩa. */
.topact a.tool.noi, .topact button.tool.noi {
  background: var(--danger); color: #fff; border-color: transparent;
}
.topact a.tool.noi:hover, .topact button.tool.noi:hover { filter: brightness(1.08); }
.topact a.tool.noi .ic, .topact button.tool.noi .ic { opacity: 1; }
.topact button.tool .ic, .topact a.tool .ic { opacity: .9; }
.view { padding: 18px 22px 20px; flex: 1; min-width: 0; }
.view > header { margin-bottom: 16px; }
.view > header .sub { margin-top: 3px; }

/* Chỉ báo job đang chạy trên thanh đầu */
.jobpip {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent); font-size: calc(12.5px * var(--phong-chu)); font-weight: 620;
}
.jobpip:hover { text-decoration: none; filter: brightness(1.04); }
.jobpip .spin { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Hộp trợ giúp gập được — thay đoạn văn xám dài dưới mỗi tiêu đề */
details.help { margin-top: 4px; }
details.help > summary {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; list-style: none;
  color: var(--txt-3); font-size: calc(12.5px * var(--phong-chu)); font-weight: 580; padding: 2px 0;
}
details.help > summary::-webkit-details-marker { display: none; }
details.help > summary::after { content: "▸"; font-size: calc(10px * var(--phong-chu)); transition: transform .15s; }
details.help[open] > summary::after { transform: rotate(90deg); }
details.help > summary:hover { color: var(--txt-2); }
details.help .body {
  margin-top: 7px; padding: 12px 14px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--txt-2); font-size: calc(12.8px * var(--phong-chu)); line-height: 1.6; max-width: 88ch;
}
details.help .body b { color: var(--txt); }

/* ---------- 14. Màn hẹp ---------- */
/* Chưa đủ bề ngang cho ba cột: ô giữa tụt xuống DƯỚI cột video, cột phải cao suốt hai
   hàng — đúng thứ tự cũ. Bỏ dính-đầu-màn ở dải này: cột 1 nay dài gấp đôi, để dính thì
   ô giữa nằm ngoài vùng cuộn của nó, không bao giờ với tới. */
@media (max-width: 1280px) {
  .rv { grid-template-columns: minmax(300px, 372px) minmax(0, 1fr); }
  .rv .left { grid-row: 1; grid-column: 1; }
  .rv .mid { grid-row: 2; grid-column: 1; }
  .rv .right { grid-row: 1 / span 2; grid-column: 2; }
  .rv .left, .rv .mid {
    position: static; max-height: none; overflow: visible; padding-right: 0;
  }
}
@media (max-width: 1180px) {
  .wb { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); height: auto; }
  .wb .insp-col { grid-column: 1 / -1; height: auto; }
  .wb > * { height: auto; }
  .wb .list-col, .wb .stage-col { height: calc(100vh - var(--topbar) - 60px); }
  .rv { grid-template-columns: 1fr; }
  /* Một cột: gỡ hẳn ô đã đặt ở dải trên, không thì .right rơi sang cột 2 ngầm */
  .rv .left, .rv .mid, .rv .right { grid-row: auto; grid-column: 1; }
}
@media (max-width: 900px) {
  /* Thanh ray tự thu gọn dưới 900px do ui-prefs.js gắn class .rail-min — xem mục 4 */
  /* Màn hẹp không đủ chỗ cho hai cột: khung sửa phủ gần hết, nội dung không đẩy nữa */
  :root { --drawer: min(560px, 100vw); }
  body.has-drawer .main { padding-right: 0; }
  .setwrap { grid-template-columns: 1fr; }
  .setnav { position: static; flex-direction: row; flex-wrap: wrap; }
  .setnav button { width: auto; }
  .cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wb { grid-template-columns: 1fr; }
  .wb .list-col, .wb .stage-col { height: auto; max-height: 62vh; }
  .view { padding: 14px; }
  .topbar { padding: 0 14px; }
  .mergebar { left: 0; padding: 10px 14px; }
}