/* THEME — 06/11/2026 (web/js/theme.js). Hai theme:
   - "hpr" (mặc định, không đặt data-theme): thanh trên teal đậm, trình soạn / timeline nền tối — app.css giữ nguyên.
   - "sang" (<html data-theme="sang">): mọi vùng tối (thanh trên, menu điện thoại, đăng nhập, thanh trình soạn, khung xem trước, timeline) chuyển sang nền sáng.
   Vùng NẰM TRÊN video (tay nắm lớp phủ, vùng an toàn, đầu phát đỏ) giữ màu cũ vì nền là hình video, không phải theme.
   Token "chrome" (--ch-*) là lớp dùng chung để sau này website / dashboard áp cùng một bộ — docs/theme.md. */

:root {
  --ch-bar: var(--c-primary); --ch-bar-text: #fff; --ch-bar-muted: #d6e6e4; --ch-bar-hover: rgba(255,255,255,.12); --ch-bar-on: rgba(255,255,255,.15); --ch-bar-line: transparent;
  --ch-stage: #0a2629;
}

:root[data-theme="sang"] {
  --c-bg: #f6f8f8; --c-soft: #edf2f2;
  --ch-bar: #ffffff; --ch-bar-text: var(--c-primary); --ch-bar-muted: #4a6366; --ch-bar-hover: var(--c-soft); --ch-bar-on: var(--c-info-bg); --ch-bar-line: var(--c-border);
  --ch-stage: #e3eaea;
  --shadow: 0 1px 2px rgba(15,59,64,.05), 0 6px 18px rgba(15,59,64,.06);
  color-scheme: light;
}

/* 06/11/2026 (bảng màu 2027): thanh trên giữ gradient xanh + logo trắng ở cả Sáng lẫn Tối → các luật thanh trên kiểu "sang" cũ tắt (data-bar không bao giờ đặt) */
.logo-xanh { display: none; }
/* logo: bản trắng cho nền teal, bản xanh cho nền sáng (app.js dựng cả hai) */
:root[data-bar="sang"] .logo-trang { display: none; }
:root[data-bar="sang"] .logo-xanh { display: inline-block; }

/* ── THANH TRÊN + MEGA MENU ── */
[data-bar="sang"] .top { background: var(--ch-bar); color: var(--ch-bar-text); box-shadow: inset 0 -1px 0 var(--ch-bar-line); }
[data-bar="sang"] .top .logo { color: var(--ch-bar-text); }
[data-bar="sang"] .top .logo b { border-left-color: var(--c-border); }
[data-bar="sang"] .top .me { color: var(--ch-bar-muted); }
[data-bar="sang"] .mm-top { color: var(--ch-bar-muted); }
[data-bar="sang"] .mm-top:hover, [data-bar="sang"] .mm-li.open > .mm-top { background: var(--ch-bar-hover); color: var(--ch-bar-text); }
[data-bar="sang"] .mm-top.on { background: var(--ch-bar-on); color: var(--ch-bar-text); box-shadow: inset 0 -2px 0 var(--c-primary-2); }
[data-bar="sang"] .mm-top:focus-visible { outline-color: var(--c-primary-2); }
[data-bar="sang"] .mm-panel { border-top: 0; box-shadow: 0 18px 40px rgba(10,38,41,.14); }
[data-bar="sang"] .top .nav-toggle { color: var(--ch-bar-text); }
[data-bar="sang"] .top .nav-toggle:hover { background: var(--ch-bar-hover); color: var(--ch-bar-text); }
@media (max-width: 900px) {
  [data-bar="sang"] .top.mm-open .mm { background: var(--c-bg); box-shadow: 0 12px 24px rgba(10,38,41,.12); border-top: 1px solid var(--c-border); }
  [data-bar="sang"] .mm-panel { border: 1px solid var(--c-border); }
}
[data-bar="sang"] .pill.ok { background: var(--c-ok-bg); color: var(--c-ok); } [data-bar="sang"] .pill.ok .dot { background: var(--c-ok); }

/* góc phải: AI · chuông · con bọ · ảnh đại diện */
[data-bar="sang"] .tb-me, [data-bar="sang"] .tb-bell, [data-bar="sang"] .tb-bug { color: var(--ch-bar-muted); }
[data-bar="sang"] .tb-bell:hover, [data-bar="sang"] .tb-bell[aria-expanded=true], [data-bar="sang"] .tb-bug:hover,
[data-bar="sang"] .tb-ai:hover, [data-bar="sang"] .tb-ai[aria-expanded=true] { background: var(--ch-bar-hover); color: var(--ch-bar-text); }
[data-bar="sang"] .tb-bug:focus-visible { outline-color: var(--c-primary-2); }
[data-bar="sang"] .tb-me:hover .tb-av, [data-bar="sang"] .tb-me[aria-expanded=true] .tb-av { box-shadow: 0 0 0 2px rgba(15,59,64,.35); }
[data-bar="sang"] .tb-count { box-shadow: 0 0 0 2px var(--ch-bar); }
[data-bar="sang"] .tb-ai { background: var(--c-info-bg); color: var(--c-primary); }
[data-bar="sang"] .tb-ai .dot { background: var(--c-ok); } [data-bar="sang"] .tb-ai.none .dot { background: #8aa0a2; }
[data-bar="sang"] .tb-ai.err { background: var(--c-err-bg); color: var(--c-err); }
[data-bar="sang"] .tb-ai-r { color: var(--c-ok); }
[data-bar="sang"] .tb-ai-r.none { color: var(--c-muted); } [data-bar="sang"] .tb-ai-r.warn { color: var(--c-warn); } [data-bar="sang"] .tb-ai-r.over { color: var(--c-err); }
[data-bar="sang"] .tb-panel { box-shadow: 0 16px 40px rgba(10,38,41,.16); }

/* ── ĐĂNG NHẬP ── */
[data-theme="sang"] .login { background: radial-gradient(120% 80% at 50% 0%, #e2eeed, var(--c-bg) 60%); }
[data-theme="sang"] .login .brand { color: var(--c-muted); }
[data-theme="sang"] .login .brand b { color: var(--c-primary); }
[data-theme="sang"] .login form { border: 1px solid var(--c-border); box-shadow: 0 12px 36px rgba(15,59,64,.10); }

/* ── THANH TRÌNH SOẠN (video + Image) ── */
[data-theme="sang"] .ed-bar { background: var(--ch-bar); color: var(--ch-bar-text); border-bottom: 1px solid var(--ch-bar-line); }
[data-theme="sang"] .ed-bar .title input { color: var(--c-text); }
[data-theme="sang"] .ed-bar .title input:hover, [data-theme="sang"] .ed-bar .title input:focus { border-color: var(--c-border); background: var(--c-bg); }
[data-theme="sang"] .ed-bar .title small, [data-theme="sang"] .ed-bar .saved, [data-theme="sang"] .ed-bar .sync { color: var(--c-muted); }
[data-theme="sang"] .ed-bar .saved.err { color: var(--c-err); }
[data-theme="sang"] .ed-bar .sync.s-synced { color: var(--c-ok); } [data-theme="sang"] .ed-bar .sync.s-modified { color: var(--c-warn); }
[data-theme="sang"] .ed-bar .icon-btn { color: var(--c-muted); } [data-theme="sang"] .ed-bar .icon-btn:hover { background: var(--c-soft); color: var(--c-text); }
[data-theme="sang"] .btn.on-dark { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }
[data-theme="sang"] .btn.on-dark:hover:not(:disabled) { background: var(--c-soft); border-color: #b8c9c8; }
[data-theme="sang"] .ie-proj { border-color: var(--c-border); color: var(--c-muted); }
[data-theme="sang"] .ie-proj:hover { background: var(--c-soft); color: var(--c-text); }

/* ── KHUNG XEM TRƯỚC ── */
[data-theme="sang"] .stagebox { background: var(--ch-stage); }
[data-theme="sang"] .stage-tabs .seg { background: rgba(15,59,64,.07); }
[data-theme="sang"] .stage-tabs .seg button { color: var(--c-muted); }
[data-theme="sang"] .stage-tabs .seg button.on { background: var(--c-surface); color: var(--c-primary); box-shadow: 0 1px 2px rgba(15,59,64,.12); }
[data-theme="sang"] .stage-tabs .note, [data-theme="sang"] .stage-tabs .seg.scope > span { color: var(--c-muted); }
[data-theme="sang"] .ie-tg { background: rgba(15,59,64,.07); color: var(--c-muted); }
[data-theme="sang"] .controls { color: var(--c-text); }
[data-theme="sang"] .controls .play { background: var(--c-primary); color: #fff; }
[data-theme="sang"] .controls .play:hover { background: var(--c-primary-2); }
[data-theme="sang"] .controls input[type=range] { accent-color: var(--c-primary); }
[data-theme="sang"] .controls .st-safe-btn { color: var(--c-muted); }
[data-theme="sang"] .controls .st-safe-btn:hover { background: rgba(15,59,64,.08); color: var(--c-text); }
[data-theme="sang"] .controls .st-safe-btn[aria-pressed=true] { background: var(--c-primary); color: #fff; }
[data-theme="sang"] .stage-frame.multi .fc-lab { color: var(--c-muted); }
[data-theme="sang"] .stage-frame.multi .fc-lab b { color: var(--c-text); }
[data-theme="sang"] .stage-frame.multi .fc-lab i { color: var(--c-warn); }
[data-theme="sang"] .stage-frame.multi .fc-screen { outline-color: rgba(15,59,64,.15); }
[data-theme="sang"] .stage-frame.multi .fc.main .fc-screen { outline-color: var(--c-primary-2); }

/* ── TIMELINE ── */
[data-theme="sang"] .tl { --tl-bg: #f3f6f6; --tl-row: #fff; --tl-line: #dbe4e3; --tl-text: var(--c-text); --tl-muted: var(--c-muted); border-top-color: var(--c-border); }
[data-theme="sang"] .tl-btn:hover:not(:disabled) { background: rgba(15,59,64,.08); }
[data-theme="sang"] .tl-btn.on { background: var(--c-info-bg); color: var(--c-primary); }
[data-theme="sang"] .tl-btn.help { background: var(--c-primary); color: #fff; }
[data-theme="sang"] .tl-btn:focus-visible { outline-color: var(--c-primary-2); }
[data-theme="sang"] .tl-scroll { scrollbar-color: #b8c9c8 transparent; }
[data-theme="sang"] .tl-row.ruler { background: rgba(15,59,64,.04); }
[data-theme="sang"] .tl-row.ruler .tick { background: rgba(15,59,64,.22); }
[data-theme="sang"] .tl-row.ruler .tick.M { background: rgba(15,59,64,.45); }
[data-theme="sang"] .tl-sc { background: #d9e9e7; border-color: #a9c3c1; color: var(--c-text); }
[data-theme="sang"] .tl-sc:hover { border-color: var(--c-primary-2); }
[data-theme="sang"] .tl-sc.cur { border-color: var(--c-primary-2); box-shadow: inset 0 0 0 1px var(--c-primary-2); }
[data-theme="sang"] .tl-sc.sel { background: #bcd8d5; border-color: var(--c-primary); }
[data-theme="sang"] .tl-sc.drag { box-shadow: 0 10px 24px rgba(15,59,64,.25); }
[data-theme="sang"] .tl-edge { background: linear-gradient(90deg, transparent, rgba(15,59,64,.18)); }
[data-theme="sang"] .tl-edge.l { background: linear-gradient(270deg, transparent, rgba(15,59,64,.18)); }
[data-theme="sang"] .tl-edge:hover, [data-theme="sang"] .tl-ins { background: var(--c-primary-2); }
[data-theme="sang"] .tl-tr-band { background: repeating-linear-gradient(135deg, rgba(21,81,88,.12) 0 4px, transparent 4px 8px); }
[data-theme="sang"] .tl-tr { background: #fff; border-color: var(--c-primary-2); }
[data-theme="sang"] .tl-tr.mine { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
[data-theme="sang"] .tl-tr:hover, [data-theme="sang"] .tl-tr:focus-visible { outline-color: var(--c-primary-2); }
[data-theme="sang"] .tl-clip.c-text { background: #fbecc4; border-color: #d9b25a; color: #5c4300; }
[data-theme="sang"] .tl-clip.c-logo, [data-theme="sang"] .tl-clip.c-image { background: #e1e7fa; border-color: #8ea0d4; color: #263a73; }
[data-theme="sang"] .tl-clip.cur { box-shadow: inset 0 0 0 1px var(--c-primary); }
[data-theme="sang"] .tl-clip.sel { outline-color: var(--c-primary); }
[data-theme="sang"] .tl-au.ok { background: #d9efe0; color: #1f5a33; }
[data-theme="sang"] .tl-au.need { background: repeating-linear-gradient(135deg, #fbeac2 0 6px, #f5dfa8 6px 12px); color: #6b4b00; }
[data-theme="sang"] .tl-au.mu { background: #e6e1fb; color: #3b3070; }
[data-theme="sang"] .tl-au.none { border-color: rgba(15,59,64,.25); }
[data-theme="sang"] .tl-au.rec.ok { background: #d5eef2; color: #134c55; }
[data-theme="sang"] .tl-snap { background: #d9a400; }
[data-theme="sang"] .tl-tip { background: var(--c-text); }

/* hộp lệnh / máy nhắc chữ: giữ nền tối (đọc chữ lớn, giống terminal) — chỉ dịu lại */
[data-theme="sang"] .cmd { background: #1d3a3e; }

/* ── ĐỔI THEME (menu ảnh đại diện) ── */
.tb-theme { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px; font-size: 14px; color: var(--c-text); }
.tb-theme .ic { color: var(--c-muted); }
.tb-seg { display: flex; flex: 1 0 100%; padding: 3px; border-radius: 8px; background: var(--c-soft); } /* nhãn một dòng, nút một dòng đủ rộng (06/11/2026 — Giao diện có 4 lựa chọn) */
.tb-seg button { flex: 1; white-space: nowrap; border: 0; background: transparent; padding: 5px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--c-muted); cursor: pointer; }
.tb-seg button[aria-pressed=true] { background: var(--c-surface); color: var(--c-primary); box-shadow: 0 1px 2px rgba(15,59,64,.14); }
.tb-seg button:focus-visible { outline: 2px solid var(--c-primary-2); outline-offset: 1px; }

/* ══ BẢNG MÀU 2027 (06/11/2026 — người dùng chọn: xanh HPR + vàng champagne, mặc định Sáng; artifact "Bảng màu HPR 2027") ══
   Thang xanh: 50 #eef7f6 · 100 #d5edea · 200 #b0dad5 · 300 #82c1ba · 400 #4fa49c · 500 #2b8a83 · 600 #1d716c · 700 #165b58 · 800 #0f3b40 (logo) · 900 #0b2c30 · 950 #071d20
   Vàng champagne: 100 #f5e9c9 · 300 #debb6c · 400 #cfa24a · 500 #b88a35 · 700 #775722 — nút chính (.btn.cta, chữ tối), nhãn nổi bật
   Nguyên tắc: khung làm việc trung tính, xanh cho điều hướng / mục chọn, vàng một nút chính mỗi màn hình, gradient chỉ ở thanh trên + nút chính. */
:root {
  --c-brand: #0f3b40; --c-gold: #cfa24a; --c-gold-2: #b88a35; --c-gold-hi: #debb6c; --c-on-gold: #14282b; --c-gold-text: #775722; --c-gold-bg: #f5e9c9;
  --g-brand: linear-gradient(105deg, #0f3b40 0%, #1d716c 62%, #2b8a83 100%);
  --g-cta: linear-gradient(135deg, #e3c37a 0%, #cfa24a 100%);
}
:root[data-theme="sang"] {
  --c-primary: #165b58; --c-primary-2: #1d716c; --c-primary-3: #0f3b40;
  --c-bg: #f7fafa; --c-surface: #ffffff; --c-soft: #eff4f4; --c-border: #dce5e4; --c-text: #14282b; --c-muted: #5d7072; --c-info-bg: #eef7f6;
  --ch-stage: #e6eded;
}
:root[data-theme="toi"] {
  --c-primary: #4fa49c; --c-primary-2: #82c1ba; --c-primary-3: #2b8a83; --c-accent: #82c1ba; --c-moss: #6b8f4e;
  --c-bg: #0b1517; --c-surface: #111f21; --c-soft: #172a2d; --c-border: #24393c; --c-text: #e4eeed; --c-muted: #93a8a9; --c-info-bg: #13302f;
  --c-ok: #5fd3a5; --c-ok-bg: #0f3327; --c-warn: #f2c46b; --c-warn-bg: #3a2c10; --c-err: #ff8a8a; --c-err-bg: #3d1717;
  --c-gold: #debb6c; --c-gold-2: #cfa24a; --c-gold-text: #ebd49a; --c-gold-bg: #3f2e13;
  --g-brand: linear-gradient(105deg, #071d20 0%, #0f3b40 60%, #165b58 100%);
  --ch-bar: #111f21; --ch-stage: #0a1214;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}
/* thanh trên: gradient thương hiệu (cả hai theme) */
:root[data-theme] .top { background: var(--g-brand); }
/* nút chính vàng champagne — một nút mỗi màn hình (Nộp, Tạo video…) */
.btn.cta { background: var(--g-cta); border-color: var(--c-gold); color: var(--c-on-gold); font-weight: 700; }
.btn.cta:hover:not(:disabled) { background: var(--c-gold); border-color: var(--c-gold-2); }
.btn.cta:focus-visible { outline: 2px solid var(--c-gold-2); outline-offset: 2px; }
.btn.cta .ic { color: var(--c-on-gold); }
/* nút xanh trên nền tối: chữ tối cho đủ tương phản */
:root[data-theme="toi"] .btn.primary { color: #071d20; }
:root[data-theme="toi"] .btn.primary .ic { color: #071d20; }

/* ── Sáng: trình soạn nhẹ — thanh trình soạn trắng có vạch gradient mảnh, cột icon sáng ── */
[data-theme="sang"] .ed-bar { box-shadow: inset 0 3px 0 #1d716c; }
[data-theme="sang"] .ar-rail { background: #eaf1f1; border-right: 1px solid var(--c-border); }
[data-theme="sang"] .ar-tab { color: var(--c-muted); }
[data-theme="sang"] .ar-tab:hover { background: #dbe7e6; color: var(--c-text); }
[data-theme="sang"] .ar-tab.on { background: var(--c-primary); color: #fff; }
[data-theme="sang"] .ar-tile.shape { background: var(--c-soft); color: var(--c-primary-3); }
[data-theme="sang"] .ie-stage, [data-theme="sang"] .ie-center { background: var(--ch-stage); }

/* ── Tối: bề mặt, ô nhập, hộp thoại theo token ── */
:root[data-theme="toi"] input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]), :root[data-theme="toi"] select, :root[data-theme="toi"] textarea { background: var(--c-soft); color: var(--c-text); border-color: var(--c-border); }
:root[data-theme="toi"] .ar-drop:hover, :root[data-theme="toi"] .ar-drop.over { background: #13302f; }
:root[data-theme="toi"] .ar-seg button.on { background: var(--c-surface); }
:root[data-theme="toi"] .cm { background: var(--c-surface); color: var(--c-text); box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 0 1px var(--c-border); }
:root[data-theme="toi"] .cm-i:hover:not(:disabled), :root[data-theme="toi"] .cm-i:focus-visible { background: var(--c-soft); }
:root[data-theme="toi"] .cm-k { background: var(--c-soft); color: var(--c-muted); }
:root[data-theme="toi"] .cm-sep { background: var(--c-border); }
:root[data-theme="toi"] .ie-qb { background: var(--c-surface); }
:root[data-theme="toi"] .ie-qb-b { color: var(--c-text); }
:root[data-theme="toi"] .ie-qb-b:hover { background: var(--c-soft); }
:root[data-theme="toi"] .sb { background: #172a2d; border-color: #2e4649; }
:root[data-theme="toi"] .sb-in { color: var(--c-text) !important; }
:root[data-theme="toi"] .ie-wrap { background: repeating-conic-gradient(#1c2c2e 0 25%, #142225 0 50%) 0 0 / 20px 20px; }
/* Tối: thanh trình soạn nền bề mặt tối + vạch xanh mảnh (không lấy màu nút làm nền) */
:root[data-theme="toi"] .ed-bar { background: #0e1a1c; color: var(--c-text); border-bottom: 1px solid var(--c-border); box-shadow: inset 0 3px 0 #2b8a83; }
:root[data-theme="toi"] .ed-bar .title input { color: var(--c-text); background: transparent; border-color: transparent; }
:root[data-theme="toi"] .ed-bar .title input:hover, :root[data-theme="toi"] .ed-bar .title input:focus { border-color: var(--c-border); background: var(--c-soft); }
:root[data-theme="toi"] .stagebox { background: var(--ch-stage); }
:root[data-theme="toi"] .controls .play { background: var(--c-primary); color: #071d20; }
/* Sáng: nút bật / tắt trên khung ảnh (Vùng an toàn, Lưới, Bám) rõ ràng */
[data-theme="sang"] .ie-tg { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); opacity: 1; }
[data-theme="sang"] .ie-tg.on { background: var(--c-info-bg); color: var(--c-primary); border-color: #b0dad5; }
:root[data-theme] { accent-color: var(--c-primary); } /* ô chọn / radio / thanh trượt theo màu thương hiệu (không xanh dương mặc định) */
:root[data-theme="toi"] img[src*="logo-hpr"][src*="-xanh"]:not(.logo-xanh) { filter: brightness(0) invert(.92); } /* logo HPR xanh trên nền tối → trắng (thẻ brand kit, danh sách logo) */