/* 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;
}

/* logo: bản trắng cho nền teal, bản xanh cho nền sáng (app.js dựng cả hai) */
.logo-xanh { display: none; }
:root[data-theme="sang"] .logo-trang { display: none; }
:root[data-theme="sang"] .logo-xanh { display: inline-block; }

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

/* góc phải: AI · chuông · con bọ · ảnh đại diện */
[data-theme="sang"] .tb-me, [data-theme="sang"] .tb-bell, [data-theme="sang"] .tb-bug { color: var(--ch-bar-muted); }
[data-theme="sang"] .tb-bell:hover, [data-theme="sang"] .tb-bell[aria-expanded=true], [data-theme="sang"] .tb-bug:hover,
[data-theme="sang"] .tb-ai:hover, [data-theme="sang"] .tb-ai[aria-expanded=true] { background: var(--ch-bar-hover); color: var(--ch-bar-text); }
[data-theme="sang"] .tb-bug:focus-visible { outline-color: var(--c-primary-2); }
[data-theme="sang"] .tb-me:hover .tb-av, [data-theme="sang"] .tb-me[aria-expanded=true] .tb-av { box-shadow: 0 0 0 2px rgba(15,59,64,.35); }
[data-theme="sang"] .tb-count { box-shadow: 0 0 0 2px var(--ch-bar); }
[data-theme="sang"] .tb-ai { background: var(--c-info-bg); color: var(--c-primary); }
[data-theme="sang"] .tb-ai .dot { background: var(--c-ok); } [data-theme="sang"] .tb-ai.none .dot { background: #8aa0a2; }
[data-theme="sang"] .tb-ai.err { background: var(--c-err-bg); color: var(--c-err); }
[data-theme="sang"] .tb-ai-r { color: var(--c-ok); }
[data-theme="sang"] .tb-ai-r.none { color: var(--c-muted); } [data-theme="sang"] .tb-ai-r.warn { color: var(--c-warn); } [data-theme="sang"] .tb-ai-r.over { color: var(--c-err); }
[data-theme="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; align-items: center; gap: 10px; padding: 6px 10px; font-size: 14px; color: var(--c-text); }
.tb-theme .ic { color: var(--c-muted); }
.tb-seg { display: inline-flex; margin-left: auto; padding: 3px; border-radius: 8px; background: var(--c-soft); }
.tb-seg button { border: 0; background: transparent; padding: 4px 10px; 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; }