/* === DESIGN TOKENS (USER 2026-06-20, agent main) — nguồn chân lý màu/khoảng cách/độ rộng.
       Giá trị KHỚP hard-code đang dùng → thêm token KHÔNG đổi diện mạo; code mới xài token, code cũ
       migrate dần. CSS thuần (không Tailwind) theo CLAUDE §2. === */
    :root { --bd:#d4d7dd; --pri:#1a73e8; --pri-d:#1558b8; --bg:#f7f8fa; --txt:#1f2330;
            --ok:#1a9d57; --info-bg:#eef4ff; --info-bd:#cfe0ff;
            /* Màu ngữ nghĩa (khớp giá trị có sẵn) */
            --pri-bg:#eef4ff; --ok-d:#157e46; --ok-bg:#dff5e1;
            --danger:#c0262e; --danger-d:#9e1f26; --danger-bg:#fde2e2; --danger-bd:#f0a3a3;
            --warn:#e0a800; --warn-bd:#e0c000; --warn-bg:#fff3cd; --warn-txt:#8a6d00;
            --ai:#6d28d9; --ai-bg:#f1ecfe;
            /* Bề mặt + chữ phụ + viền nhạt */
            --surface:#fff; --surface-2:#f5f8fc; --surface-3:#f6f8fc; --bd-2:#eef0f3;
            --txt-2:#5a6678; --txt-mut:#667085;
            /* Thang khoảng cách (4px base) */
            --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
            /* Bo góc + đổ bóng */
            --r-sm:6px; --r:8px; --r-lg:10px; --r-xl:12px; --r-pill:999px;
            --sh-1:0 1px 3px rgba(20,40,80,.08); --sh-2:0 6px 20px rgba(20,40,80,.16);
            /* Độ rộng trang chuẩn — chống lệch max-width (báo cáo A2). Bảng nặng dùng --w-xwide,
               nội dung thường --w, dashboard/grid --w-wide, form hẹp --w-narrow. */
            --w:980px; --w-wide:min(1360px,95vw); --w-xwide:min(1680px,96vw); --w-narrow:680px;
            /* Lớp z thống nhất */
            --z-sticky:5; --z-nav:50; --z-fab:40; --z-toast:9999; }
    * { box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
           color: var(--txt); margin: 0; background: var(--bg); line-height: 1.5; }
    header { padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--bd); }
    header a { color: var(--pri); text-decoration: none; }
    /* Độ rộng trang chuẩn hoá (báo cáo A2): mặc định --w (980); trang chọn lớp qua
       {% block main_class %}. Lớp (specificity 0,1,1) thắng base main (0,0,1) → áp được mà
       KHÔNG cần inline <style>main{} ở từng trang. */
    main { max-width: var(--w); margin: 0 auto; padding: var(--sp-4); }
    main.is-narrow { max-width: var(--w-narrow); }
    main.is-wide   { max-width: var(--w-wide); }
    main.is-xwide  { max-width: var(--w-xwide); }
    main.is-full   { max-width: none; }
    h1 { font-size: 1.4rem; margin: 8px 0 12px; }
    a { color: var(--pri); }
    hr { border: none; border-top: 1px solid var(--bd); margin: 0; }
    input[type=text], input[type=search], input[type=url], input[type=number],
    input[type=password], input[type=email], textarea, select {
      padding: 9px 11px; border: 1px solid var(--bd); border-radius: 8px;
      font: inherit; width: 100%; max-width: 520px; background: #fff; color: var(--txt);
      transition: border-color .12s, box-shadow .12s; }
    /* Focus: viền xanh + quầng nhẹ — đồng nhất MỌI ô (gồm mật khẩu). */
    input:focus, textarea:focus, select:focus { outline: none; border-color: var(--pri);
      box-shadow: 0 0 0 3px rgba(26,115,232,.15); }
    textarea { resize: vertical; }
    button { font: inherit; padding: 8px 14px; border: 1px solid var(--pri); border-radius: 8px;
      background: var(--pri); color: #fff; cursor: pointer; }
    button:hover { background: var(--pri-d); }
    button.ghost { background: #fff; color: var(--pri); }
    /* Nút hành động chính (nổi bật): go = xanh lá (Gửi duyệt / Duyệt), danger = đỏ (Loại). */
    button.go { background: #1a9d57; border-color: #1a9d57; }
    button.go:hover { background: #157e46; }
    button.danger { background: #c0262e; border-color: #c0262e; }
    button.danger:hover { background: #9e1f26; }
    button.big { padding: 11px 20px; font-size: 1.02rem; font-weight: 600; }
    /* Nút BỊ KHOÁ: hiện rõ không bấm được (site-wide — USER 2026-06-06, trước chỉ mờ chữ). */
    button:disabled, button[disabled] { opacity: .5; cursor: not-allowed; }
    /* Hàng CTA (nút chính 1 bước): caption XUỐNG DÒNG riêng, không tràn cạnh nút (hết loạn). */
    .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px;
      padding-top: 10px; border-top: 1px dashed var(--bd); }
    .cta-row .hint { flex-basis: 100%; margin: 4px 0 0; }
    /* Hàng toggle gom chung (Sóng/Auto…) — đồng nhất, cùng 1 hàng. */
    .toggle-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
    /* === Hàng HÀNH ĐỘNG NGANG có ô nhập (vd Duyệt + Loại): FIX lệch dòng (USER 2026-06-04).
       Lỗi cũ: ô input thừa hưởng `width:100%` toàn cục → chiếm hết hàng → nút bị đẩy xuống
       dòng dưới + lệch nút bên cạnh. Cách chữa: trong các thanh này, ô nhập CO GIÃN theo chỗ
       trống (flex), KHÔNG ép full-width. Áp cho mọi hàng tương tự (review + thêm thẻ). === */
    .review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .review-actions form { display: flex; align-items: center; gap: 8px; margin: 0; }
    .review-actions .reject-form { flex: 1 1 300px; min-width: 0; }
    .review-actions .reject-reason { flex: 1 1 auto; width: auto; min-width: 0; }
    fieldset { border: 1px solid var(--bd); border-radius: 10px; margin: 0 0 12px; padding: 10px 12px;
      background: #fff; }
    legend { font-weight: 600; padding: 0 6px; font-size: .95rem; }
    label { display: inline-block; }
    .field { margin-bottom: 12px; }
    .field > label { font-weight: 600; display: block; margin-bottom: 4px; }
    /* === Lưới chip bấm-chọn: native checkbox/radio + :has(), KHÔNG cần JS === */
    .chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
    .chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px;
      border: 1px solid var(--bd); border-radius: 999px; background: #fff; cursor: pointer;
      user-select: none; font-size: .92rem; transition: background .1s, border-color .1s; }
    .chip:hover { border-color: var(--pri); }
    .chip input { position: absolute; opacity: 0; width: 0; height: 0; }
    .chip:has(input:checked) { background: var(--pri); color: #fff; border-color: var(--pri); }
    .chip:has(input:checked)::before { content: "\2713\00a0"; font-weight: 700; }
    .chip.empty { color: #888; border-style: dashed; cursor: default; }
    /* ADR-0049: Sự việc CHÍNH đa-trị (Kiểu 2) — badge số thứ tự ưu tiên thay dấu ✓.
       JS (event_primary.js) điền số 1,2,3…; chưa tick badge "+" (ẩn). */
    .chip.ranked:has(input:checked)::before { content: ""; }
    .chip.ranked .rank { display: none; }
    .chip.ranked:has(input:checked) .rank { display: inline-flex; align-items: center;
      justify-content: center; min-width: 17px; height: 17px; border-radius: 999px;
      background: #fff; color: var(--pri-d); font-size: .72rem; font-weight: 800;
      margin-right: 2px; padding: 0 4px; }
    /* Nhạy cảm: chip chọn = ĐỎ (cờ rủi ro — SPEC §0). */
    .chip.sensitive:has(input:checked) { background: #c0262e; border-color: #c0262e; }
    .chip.sensitive:has(input:checked)::before { content: "\26A0\00a0"; }
    /* Ô bắt buộc: viền trái đỏ + dấu * đỏ. */
    fieldset.req { border-left: 3px solid #c0262e; }
    .req-star { color: #c0262e; font-weight: 700; }
    /* Cascade Sự việc: nhãn nhóm chủ đề. */
    .group-label { font-size: .82rem; color: #555; font-weight: 600; margin: 6px 0 2px; }
    /* Hàng "Hay dùng" (Đối tượng). */
    .frequent-row { background: #fffbe6; border: 1px dashed #e0c000; border-radius: 8px;
      padding: 6px 8px; margin-bottom: 6px; }
    .frequent-label { font-size: .82rem; font-weight: 600; color: #8a6d00; display: block; margin-bottom: 4px; }
    /* Indicator còn thiếu. */
    .missing-box { background: #fff3cd; border: 1px solid #e0c000; border-radius: 8px;
      padding: 6px 10px; margin-bottom: 10px; font-size: .9rem; }
    .missing-ok { background: #dff5e1; border: 1px solid #0a0; border-radius: 8px;
      padding: 6px 10px; margin-bottom: 10px; font-size: .9rem; color: #0a6b1e; }
    /* Khối gập "thêm chi tiết". */
    details.more-block > summary { cursor: pointer; color: var(--pri); font-weight: 600;
      padding: 6px 0; user-select: none; }
    .btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .hint { color: #666; font-size: .85rem; }
    /* "Giống clip trước" đưa LÊN ĐẦU (hành động bắt đầu): bar nhấn nhẹ, dễ thấy khi mở clip. */
    .quickstart { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
      background: #eef4ff; border: 1px solid #cfe0ff; border-radius: 10px;
      padding: 8px 12px; margin-bottom: 12px; }
    /* === §7 Cụm chip: gom nhóm theo CỘT + ô gõ-để-lọc + chip 3 trạng thái === */
    /* O tim NOI BAT (USER 2026-06-10): to hon + vien + nen nhe + icon kinh lup -> de thay khi
       phai loc trong nhom lon ("Khac" ~713 chip). */
    .chip-filter { max-width: 360px; width: 100%; margin: 2px 0 10px; padding: 7px 11px 7px 30px;
      border: 1px solid #c7d0db; border-radius: 8px; font-size: .95rem; background:
      #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a8699' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E")
      no-repeat 8px center; }
    .chip-filter:focus { border-color: var(--pri); outline: none; background-color: #fff; }
    /* Nhom THU GON (<details.grp-collapsible>, vd "Khac"): summary la nhan bam duoc; mo ra hien chip. */
    .grp-collapsible > summary { cursor: pointer; list-style: revert; user-select: none; }
    .grp-collapsible > summary:hover { color: var(--pri); }
    .grp-count { color: #888; font-weight: 600; }
    .grp-hint { color: #9aa6b6; font-weight: 400; font-size: .76rem; }
    .grp-collapsible[open] > summary .grp-hint { display: none; }
    .grp-collapsible > .chip-col { margin-top: 6px; }
    /* USER 2026-06-01 (v2): nhóm xếp DỌC (nhãn trên), chip trong nhóm DÀN NGANG kín bề rộng
       (flex-wrap) → tận dụng tối đa chiều ngang, KHÔNG thừa khoảng trống, trang ngắn lại.
       (Trang nhập nới rộng max-width để dùng hết màn — xem detail.html.) */
    .chip-groups { display: flex; flex-direction: column; gap: 12px; }
    .chip-groups .grp { min-width: 0; }
    .chip-col { display: flex; flex-wrap: wrap; gap: 5px; }
    /* Chip "đang gợi ý" (§7.3/§7.4): CHƯA chọn nhưng liên quan → viền nét đứt + nền nhạt.
       Đã chọn (:has(:checked)) giữ style chọn (đậm) — gợi ý chỉ cho chip chưa chọn. */
    .chip.suggested:not(:has(input:checked)) { border-style: dashed; border-color: var(--pri);
      background: #eef4ff; }
    /* Nhóm đang gợi ý: nhãn nhóm kèm nguồn "liên quan Chủ đề". */
    .grp.suggested > .group-label::after { content: " · liên quan Chủ đề"; color: var(--pri);
      font-weight: 600; font-size: .76rem; }
    /* USER 2026-06-03 — LÀM MỜ THÔNG MINH: khi 1 mục có nhóm "liên quan Chủ đề"
       (.grp.suggested), các nhóm KHÔNG liên quan mờ đi (bớt rối, đỡ bấm nhầm) NHƯNG vẫn
       bấm được — giữ nguyên tắc §7.4 "không khoá". Rê chuột HOẶC nhóm đang có chip được chọn
       → sáng lại (không che lựa chọn lai). Mục chưa có nhóm gợi ý nào → KHÔNG mờ gì cả. */
    .chip-groups:has(.grp.suggested) .grp:not(.suggested) { opacity: .38; transition: opacity .15s; }
    .chip-groups:has(.grp.suggested) .grp:not(.suggested):hover,
    .chip-groups:has(.grp.suggested) .grp:not(.suggested):has(input:checked) { opacity: 1; }
    /* USER 2026-06-03: làm mờ CHIP-LEVEL (Cảm xúc — list phẳng) khi có chip "liên quan Chủ đề"
       (chip_suggest.js đánh dấu .suggested). Chip đang chọn / rê chuột → sáng lại. */
    .chip-grid.dim-target:has(.chip.suggested) .chip:not(.suggested):not(:has(input:checked)) {
      opacity: .38; transition: opacity .15s; }
    .chip-grid.dim-target:has(.chip.suggested) .chip:not(.suggested):hover { opacity: 1; }
    /* Thanh hành động dính đáy — nút quan trọng (Lưu/Lưu&tiếp/Gửi duyệt) LUÔN thấy
       khi cuộn danh sách chip dài (SPEC: tập trung nút hay bấm). */
    .action-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap;
      gap: 8px; align-items: center; padding: 10px 8px; margin-top: 8px;
      background: rgba(255,255,255,.97); border-top: 1px solid var(--bd);
      box-shadow: 0 -2px 8px rgba(20,40,80,.06); }
    .action-bar .spacer { flex: 1; }
    table { border-collapse: collapse; background: #fff; }
    .platform-badge { display: inline-block; padding: 2px 10px; border-radius: 999px;
      background: #e8f0fe; color: var(--pri-d); font-size: .85rem; font-weight: 600; }
    /* Badge trạng thái footage (dùng chung kho + detail). */
    .badge { font-size: .74rem; padding: 2px 9px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
    .st-draft { background: #eceff3; color: #566; }
    .st-pending { background: #fff3cd; color: #8a6d00; }
    .st-approved { background: #dff5e1; color: #0a6b1e; }
    .st-rejected { background: #fde2e2; color: #c0262e; }
    .st-used { background: #e2ecfd; color: #1558b8; }
    .st-picked { background: #dff5e1; color: #0a6b1e; }  /* VideoPlan "Đã pick" (USER 2026-06-20) */
    .badge.q { background: #f0ebff; color: #5b3fbf; }
    .badge.flag { background: #fff0e6; color: #b35900; }
    /* === Badge AI nhất quán (USER 2026-06-03) — pill mềm, icon gọn. Provenance: bot tự thêm ·
       AI gắn nhãn · đã người kiểm · AI kiểm lại. Mỗi loại 1 màu nhạt riêng. Dùng `_ai_badges.html`. */
    .ai-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem;
      font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid transparent;
      white-space: nowrap; line-height: 1.6; }
    .ai-badge.bot { background: #f1ecfe; color: #6d28d9; border-color: #e4d8fb; }      /* bot tự thêm */
    .ai-badge.tagged { background: #eef2ff; color: #4338ca; border-color: #e0e7ff; }   /* AI gắn nhãn */
    .ai-badge.verified { background: #ecfdf3; color: #047857; border-color: #c7f0d9; } /* NGƯỜI đã kiểm (xanh) */
    .ai-badge.aichecked { background: #f1f3f5; color: #64748b; border-color: #dde1e6; } /* MÁY/AI tự kiểm — xám, KHÁC người (USER 2026-06-15) */
    .ai-badge.recheck { background: #eff6ff; color: #1d4ed8; border-color: #d8e7fe; }  /* AI kiểm lại */
    .ai-badge.reddit { background: #fff0eb; color: #cc3700; border-color: #ffd3c2; }   /* tải từ Reddit */
    .ai-badge.xplat { background: #eceef0; color: #15202b; border-color: #cfd9de; }    /* tải từ X/Twitter */
    .ai-badge.ytplat { background: #fdeaea; color: #c00; border-color: #f6c4c4; }      /* nguồn YouTube */
    .ai-badge.ttplat { background: #e6fbfb; color: #0a7a78; border-color: #b8eef0; }   /* nguồn TikTok */
    .ai-badge.srcplat { background: #f1f3f5; color: #566; border-color: #dde1e6; }     /* nguồn khác */
    .ai-badge.vertex { background: #f3ebff; color: #7c3aed; border-color: #e3d3fb; }   /* phân tích Vertex (tím) */
    .ai-badge.gas { background: #e8f1fe; color: #1a56db; border-color: #c9defb; }      /* phân tích GAS (xanh dương) */
    .ai-badge.edge { background: #fff7e6; color: #b45309; border-color: #f5d99a; }     /* phân tích Edge (cam) */
    .ai-badge.apipaid { background: #fdecef; color: #be123c; border-color: #f6c6d2; } /* phân tích API paid (đỏ) */
    /* Bình luận GỐC Reddit (USER 2026-06-09) — "mô tả 1→N" CÔNG KHAI mọi editor. Gọn: hiện 2, ẩn
       phần còn lại trong <details> để KHÔNG phình trang (10 comment). */
    .srccmt { margin: 10px 0 0; border: 1px solid #ffd3c2; border-left: 4px solid #ff4500;
      background: #fff6f2; border-radius: 8px; padding: 8px 11px; }
    .srccmt-head { font-size: .9rem; color: #cc3700; font-weight: 700; margin-bottom: 6px; }
    .srccmt-list { margin: 0; padding-left: 0; list-style: none; display: flex;
      flex-direction: column; gap: 5px; }
    .srccmt-list li { font-size: .9rem; line-height: 1.5; color: #3a2c25; }
    .srccmt-n { display: inline-block; font-size: .72rem; font-weight: 700; color: #ff4500;
      background: #ffe7dd; border-radius: 5px; padding: 0 6px; margin-right: 5px; }
    /* USER 2026-06-24: badge lượt like (thay "@@username" rối mắt) — gọn, trực quan. */
    .srccmt-like { flex: none; display: inline-block; font-size: .72rem; font-weight: 700;
      color: #1565c0; background: #e3f0fd; border-radius: 5px; padding: 0 7px; margin-right: 4px;
      white-space: nowrap; align-self: flex-start; }
    .srccmt-more > summary { cursor: pointer; color: #cc3700; font-weight: 600;
      font-size: .85rem; margin-top: 6px; }
    .srccmt-more .srccmt-list { margin-top: 6px; }
    /* USER 2026-06-10 (task #4 Pha 1): nút ➕ thêm comment nguồn vào "mô tả riêng". */
    .srccmt-list li { display: flex; align-items: flex-start; gap: 6px; }
    .srccmt-t { flex: 1; }
    .srccmt-add { flex: none; padding: 1px 8px; font-size: .8rem; line-height: 1.5;
      border: 1px solid #ffd3c2; background: #fff; color: #cc3700; border-radius: 6px; cursor: pointer; }
    .srccmt-add:hover { background: #ffe7dd; }
    /* === B1/R0: phát file gốc LOCAL (File System Access) — thanh kết nối + player === */
    .drive-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
      background: #f0f6ff; border: 1px solid #cfe0ff; border-radius: 10px;
      padding: 7px 12px; margin-bottom: 12px; font-size: .88rem; }
    .drive-connect.unsupported { background: #f6f6f6; border-color: #ddd; color: #888; }
    .drive-connect .dc-status { color: #345; }
    .drive-connect button { padding: 5px 12px; font-size: .85rem; }
    /* Note hướng dẫn chọn ĐÚNG thư mục (xuống dòng riêng dưới thanh — flex-basis:100%). */
    .drive-connect .dc-hint { flex-basis: 100%; color: #5a6678; font-size: .82rem; margin-top: 2px; }
    .drive-connect .dc-hint b { color: #34425a; }
    /* USER 2026-06-07 — Dải kết nối GLOBAL (mọi trang, ngay dưới header): mảnh, dễ thấy, full bề
       ngang; chỉ hiện khi CHƯA kết nối (local_player.js autohide). Kết nối 1 lần → ẩn mọi trang. */
    .drive-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
      background: #eef4ff; border-bottom: 1px solid #cdddff; padding: 8px 20px; font-size: .88rem; }
    .drive-strip .dc-icon { font-size: 1.05rem; }
    .drive-strip .dc-status { color: #2a3b57; font-weight: 600; }
    .drive-strip button { padding: 5px 14px; font-size: .85rem; }
    .drive-strip .dc-hint { color: #5a6678; font-size: .8rem; }
    @media (max-width: 700px) { .drive-strip .dc-hint { flex-basis: 100%; } }
    .local-video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
    /* USER 2026-06-07: hover-scrub NGAY TRÊN video — nhãn gợi ý (USER 2026-06-08: BỎ vạch dọc xanh
       .scrub-line cho đỡ rối). pointer-events:none để KHÔNG chặn click video / điều khiển native. */
    .scrub-hint { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); opacity: 0;
      background: rgba(0,0,0,.6); color: #dce6f5; font-size: .74rem; padding: 2px 10px;
      border-radius: 999px; pointer-events: none; z-index: 4; transition: opacity .15s; }
    .local-actions { margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .local-note { color: #c0262e; font-size: .8rem; margin: 4px 0 0; }
    /* ADR-0017: nút "Nạp vào kho" + trạng thái tải (CaoVideo auto-poll). */
    .dl-box { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .dl-box button.go { padding: 6px 14px; }
    .dl-state { font-size: .85rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; }
    .dl-state.ok { background: #dff5e1; color: #0a6b1e; }
    .dl-state.wait { background: #fff3cd; color: #8a6d00; }
    .dl-state.none { background: #eceff3; color: #566; font-weight: 500; }
    /* === ADR-0026 (USER 2026-06-04): badge CaoVideo Online/Offline trên thanh trên cùng —
       icon nhỏ, rõ, tự kiểm 60s/lần (caovideo_status.js). Chấm pulse khi offline để dễ thấy. === */
    .cv-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600;
      padding: 3px 11px; border-radius: 999px; border: 1px solid var(--bd); background: #fff;
      vertical-align: middle; line-height: 1.4; white-space: nowrap; cursor: default; }
    .cv-badge .cv-dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa7b6; flex: none; }
    .cv-badge.is-online { background: #e9f9ef; border-color: #b6e3c4; color: #0a7a30; }
    .cv-badge.is-online .cv-dot { background: #1ca846; box-shadow: 0 0 0 3px rgba(28,168,70,.20); }
    .cv-badge.is-offline { background: #fdecec; border-color: #f3b9b9; color: #b3261e; cursor: help; }
    .cv-badge.is-offline .cv-dot { background: #e0352b; animation: cvBlink 1.2s ease-in-out infinite; }
    .cv-badge.is-idle { background: #fff8e6; border-color: #ecd9a3; color: #8a6d00; }
    .cv-badge.is-idle .cv-dot { background: #e0a800; }
    .cv-badge.is-none { color: #7a8696; }
    @keyframes cvBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
    /* Nút "Bật CaoVideo" (caovideo://) — mở app local từ web (USER 2026-06-05). Hiện khi offline. */
    .cv-launch { display: none; font-size: .78rem; font-weight: 600; text-decoration: none;
      padding: 3px 10px; border-radius: 999px; border: 1px solid var(--pri, #1a73e8);
      color: var(--pri, #1a73e8); background: #eef3ff; margin-left: 4px; vertical-align: middle; }
    .cv-launch:hover { background: var(--pri, #1a73e8); color: #fff; }
    .cv-launch.cv-show { display: inline-flex; align-items: center; }
    /* Trang Thêm footage GỘP (add-merge): bảng nhiều link điền tiêu đề/ghi chú. */
    .add-table-wrap { overflow-x: auto; margin: 4px 0 12px; }
    .add-table { width: 100%; border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; }
    .add-table th, .add-table td { padding: 6px 8px; border-bottom: 1px solid #eef0f3; text-align: left;
      font-size: .9rem; vertical-align: middle; }
    .add-table thead th { background: #f5f8fc; font-weight: 600; }
    .add-table tbody tr:last-child td { border-bottom: 0; }
    .add-table tr.dup { background: #fff6f6; }
    .add-table .urlcell { color: #345; max-width: 260px; display: inline-block; overflow: hidden;
      text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
    .add-table input { width: 100%; box-sizing: border-box; padding: 5px 8px; }
    .add-table .dup-tag { color: #c0262e; font-size: .72rem; font-weight: 700; }
    .add-table .rmrow { padding: 2px 8px; background: #fff; color: #c0262e; border-color: #e2c2c2; }
    .add-table .rmrow:hover { background: #fde2e2; }
    .single-prev { margin: 2px 0 8px; }
    /* P2 (ADR-0023) — card "Thêm video đã tải sẵn từ máy" (File System Access ghi Drive). */
    .add-local-box { border: 1px solid var(--bd); border-radius: 10px; background: #fff;
      padding: 2px 12px 12px; margin: 14px 0; }
    .add-local-box > summary { cursor: pointer; font-weight: 600; color: var(--pri-d);
      padding: 9px 0; user-select: none; }
    .local-add-status { margin-top: 8px; font-size: .9rem; word-break: break-word; }
    .local-add-status.err { color: #c0262e; }
    .local-add-status.ok { color: #0a6b1e; font-weight: 600; }
    /* ADR-0038 #2 (USER 2026-06-09) — "Tải file lên từ máy" gắn vào clip đã có. Show/hide bằng
       <details> NATIVE (mặc định thu gọn), style giống thẻ "Công cụ CaoVideo" (.cv-get): viền xanh
       nhạt + mũi tên ▸ xoay khi mở. */
    .local-upload { border: 1px solid #cfe0ff; background: #f5f9ff; border-radius: 10px;
      padding: 8px 12px; margin-top: 8px; }
    .local-upload > summary { cursor: pointer; font-weight: 600; color: #1558b8; list-style: none;
      display: flex; align-items: center; gap: 8px; font-size: .88rem; }
    .local-upload > summary::-webkit-details-marker { display: none; }
    .local-upload > summary::before { content: "▸"; transition: transform .15s; }
    .local-upload[open] > summary::before { transform: rotate(90deg); }
    .local-upload-body { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px;
      align-items: center; }
    .local-upload-body .lu-label { flex-basis: 100%; margin: 0; color: #345; font-size: .84rem; }
    .local-upload-body input[type=file] { flex: 1 1 200px; font-size: .82rem; min-width: 0; }
    .local-upload-body button.go { padding: 6px 14px; }
    .local-upload-status { flex-basis: 100%; margin: 0; font-size: .82rem; word-break: break-word;
      color: #666; }
    .local-upload-status.err { color: #c0262e; }
    .local-upload-status.ok { color: #0a6b1e; font-weight: 600; }
    /* === T2: nút + banner "Phân tích AI" (đồng bộ tím AI #6d28d9 — USER 2026-06-03) === */
    .ai-btn { border-color: #6d28d9; color: #6d28d9; }
    .ai-btn:hover { background: #f1ecfe; }
    /* Nút Phân tích AI lúc ĐANG chạy (USER 2026-06-04): dim + đổi nhãn "Đang phân tích…" + con trỏ
       chờ. Bấm lại bị ai_guard.js chặn + cảnh báo. (.htmx-request = đang có request của chính nút.) */
    .ai-btn .ai-running { display: none; }
    .ai-btn.htmx-request { opacity: .7; cursor: progress; }
    .ai-btn.htmx-request .ai-label { display: none; }
    .ai-btn.htmx-request .ai-running { display: inline; }
    .ai-panel { border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; font-size: .9rem; }
    .ai-panel.ok { background: #eef9f0; border: 1px solid #1a9d57; }
    .ai-panel.err { background: #fff3cd; border: 1px solid #e0c000; }
    .ai-panel .ai-head { font-weight: 600; margin-bottom: 4px; }
    .ai-panel p { margin: 4px 0 0; }
    .ai-panel .wow-chip, .ai-panel .newtag { display: inline-block; background: #fff;
      border: 1px solid var(--bd); border-radius: 999px; padding: 1px 9px; margin: 2px 3px 0 0;
      font-size: .82rem; }
    .ai-panel .newtag { border-style: dashed; border-color: var(--pri); color: var(--pri-d); }
    /* HM4: nút "➕ thêm" nhanh ngay trong chip nhãn AI đề xuất. */
    .ai-panel .newtag .ai-addchip { margin-left: 6px; padding: 1px 8px; font-size: .76rem;
      background: var(--pri); color: #fff; border: none; border-radius: 999px; cursor: pointer; }
    .ai-panel .newtag .ai-addchip:hover { background: var(--pri-d); }
    /* HM4 — nút "Thêm tất cả" nhãn AI (nổi bật hơn chip lẻ). */
    .ai-panel .ai-addall { margin-left: 8px; padding: 3px 12px; font-size: .82rem; font-weight: 600;
      background: #1a9d57; color: #fff; border: none; border-radius: 999px; cursor: pointer; }
    .ai-panel .ai-addall:hover { background: #157e46; }
    /* T7: khu "Nhạy cảm" cạnh Hook — viền trái đỏ nhạt để nổi bật là cờ RỦI RO. */
    .sensitive-box { border-left: 3px solid #c0262e; }
    /* ADR-0014: thêm nhanh chip vocab + chip đề xuất chờ duyệt. */
    .vocab-add-block > summary { cursor: pointer; color: #7b3fbf; font-weight: 600; padding: 6px 0; user-select: none; }
    /* Nút "➕ thêm thẻ mới" cuối MỖI mục (USER 2026-06-03) — nhỏ, mờ, không chiếm chú ý. */
    .vocab-add-inline { margin-top: 6px; }
    .vocab-add-inline > summary { cursor: pointer; color: #7b3fbf; font-size: .82rem;
      padding: 2px 0; user-select: none; list-style: none; }
    .vocab-add-inline > summary:hover { text-decoration: underline; }
    .vocab-add-inline .vocab-add { margin-top: 4px; }
    .vocab-add-inline input[type=text] { max-width: 220px; }
    .vocab-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0; }
    /* Ô gõ nhãn co giãn (nút "Kiểm tra" luôn cùng dòng, không rớt) — cùng fix lệch dòng. */
    .vocab-add input[type=text] { flex: 1 1 180px; width: auto; min-width: 0; }
    .vocab-rv { border-radius: 8px; padding: 6px 10px; margin-top: 6px; font-size: .9rem; }
    .vocab-rv.ok { background: #eef9f0; border: 1px solid #1a9d57; }
    .vocab-rv.warn { background: #fff3cd; border: 1px solid #e0c000; }
    .pending-box { border-left: 3px solid #7b3fbf; background: #faf7ff; }
    /* HM6 — Lời bình AI (dưới Mô tả VN): 4 nút phong cách + kết quả 1 câu. */
    .comment-box { border-left: 3px solid #6d28d9; background: #faf7ff; }
    .comment-styles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .comment-btn.active { background: #6d28d9; color: #fff; border-color: #6d28d9; }
    .comment-result { margin: 8px 0 0; padding: 8px 10px; background: #fff; border: 1px solid var(--bd);
      border-radius: 8px; font-size: .95rem; line-height: 1.5; }
    .htmx-indicator { display: none; }
    .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
    /* === Toast thông báo (USER 2026-06-04): mọi hành động → toast GÓC DƯỚI PHẢI, tự rụng 5s.
       column-reverse = toast mới nhất ở dưới cùng (gần góc), cũ hơn xếp lên trên → hiện nhiều
       toast cùng lúc gọn gàng. Render qua toast.js (CSP-safe). === */
    /* bottom 84px: nổi TRÊN nút FAB góc dưới-phải (USER 2026-06-20) để không đè nhau. */
    #toast-root { position: fixed; bottom: 84px; right: 14px; z-index: var(--z-toast);
      display: flex; flex-direction: column-reverse; gap: 8px; max-width: min(380px, 92vw);
      pointer-events: none; }
    .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 8px;
      padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bd);
      background: #fff; color: var(--txt); font-size: .9rem; line-height: 1.45;
      box-shadow: 0 6px 20px rgba(20,40,80,.16);
      opacity: 0; transform: translateX(16px); transition: opacity .18s, transform .18s; }
    .toast.toast-in { opacity: 1; transform: translateX(0); }
    .toast.toast-out { opacity: 0; transform: translateX(16px); }
    .toast .toast-msg { flex: 1; word-break: break-word; }
    .toast .toast-close { pointer-events: auto; background: transparent; border: none;
      color: inherit; font-size: 1.1rem; line-height: 1; padding: 0 2px; cursor: pointer;
      opacity: .6; }
    .toast .toast-close:hover { opacity: 1; background: transparent; }
    .toast.toast-success { border-left: 4px solid #1a9d57; background: #f1faf4; }
    .toast.toast-error   { border-left: 4px solid #c0262e; background: #fdf2f2; }
    .toast.toast-warning { border-left: 4px solid #e0a800; background: #fffaf0; }
    .toast.toast-info    { border-left: 4px solid var(--pri); background: #f3f8ff; }
    /* === Bảng dữ liệu (queue / QC / thống kê) — khung CUỘN NGANG mọi màn (mobile KHÔNG tràn trang) === */
    .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--bd);
      border-radius: 10px; margin: 8px 0; background: #fff; }
    .tbl { border-collapse: collapse; width: 100%; background: #fff; font-size: .9rem; }
    .tbl th, .tbl td { padding: 7px 10px; border-bottom: 1px solid #eef0f3; text-align: left; vertical-align: middle; }
    .tbl th { background: #f5f8fc; font-weight: 600; white-space: nowrap; }
    .tbl tbody tr:last-child td { border-bottom: 0; }
    .tbl td a { word-break: break-word; }
    /* === Mobile (USER 2026-06-06): chống TRÀN NGANG toàn site === */
    @media (max-width: 640px) {
      main { padding: 12px 10px; }
      h1 { font-size: 1.25rem; }
      header { font-size: .92rem; }
      /* Bảng KHÔNG bọc .tbl-wrap (admin/demo/cũ) → tự cuộn trong khung, không đẩy tràn cả trang. */
      table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
      /* Thanh hành động dính đáy gọn lại. */
      .action-bar { padding: 8px 6px; gap: 6px; }
    }

/* Cảnh báo LINK TRÙNG khi add footage (USER 2026-06-06) — nổi bật, đỏ. */
.dup-warn { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px;
  background: #fde2e2; border: 1px solid #f0a3a3; border-left: 4px solid #d9342b;
  border-radius: 8px; padding: 9px 12px; color: #9b1c17; font-size: .92rem; }
.dup-warn-ico { font-size: 1.1rem; line-height: 1.2; }
.dup-warn a { color: #9b1c17; font-weight: 700; text-decoration: underline; }
.dup-warn-block { margin: 10px 0 14px; }
.dup-warn-block code { background: #fff0f0; padding: 0 4px; border-radius: 4px; }

/* === HEADER nav gom 4 NHÓM (USER 2026-06-20) — 2 nút chính + dropdown <details> + hamburger. === */
.site-header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 8px 14px; border-bottom: 2px solid var(--pri); margin-bottom: var(--sp-3);
  background: var(--surface); position: relative; }
.site-header .brand { font-weight: 800; font-size: 1.05rem; color: var(--pri-d); text-decoration: none; }

/* 2 NÚT CHÍNH (dùng nhiều nhất) — solid, nổi bật, tách khỏi menu thường. */
.site-header .nav-primary { display: flex; gap: var(--sp-2); align-items: center; }
.np-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 13px; border-radius: var(--r-pill);
  font-weight: 700; font-size: .9rem; text-decoration: none; color: #fff; white-space: nowrap;
  border: 1px solid transparent; box-shadow: var(--sh-1); transition: filter .12s, transform .06s; }
.np-btn:hover { filter: brightness(1.06); }
.np-btn:active { transform: translateY(1px); }
.np-add { background: var(--ok); }
.np-plan { background: var(--pri); }

/* Hamburger — ẩn ở desktop, hiện <1024px. */
.nav-burger { display: none; padding: 4px 11px; font-size: 1.15rem; line-height: 1; background: var(--surface);
  color: var(--txt); border: 1px solid var(--bd); border-radius: var(--r); cursor: pointer; }
.nav-burger:hover { background: var(--surface-2); }

/* Nav + nhóm. */
.site-header .main-nav { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.nav-flat { padding: 6px 10px; border-radius: var(--r); text-decoration: none; color: #234;
  font-weight: 600; font-size: .92rem; }
.nav-flat:hover { background: var(--info-bg); }

/* Dropdown nhóm = <details> CSS thuần (nav_toggle.js chỉ thêm tiện ích đóng-ngoài). */
.nav-group { position: relative; }
.nav-group > summary { list-style: none; cursor: pointer; padding: 6px 10px; border-radius: var(--r);
  color: #234; font-weight: 600; font-size: .92rem; user-select: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: "▾"; font-size: .7rem; color: var(--txt-2); }
.nav-group > summary:hover, .nav-group[open] > summary { background: var(--info-bg); }
.nav-group .nav-menu { position: absolute; top: 100%; left: 0; z-index: var(--z-nav); margin-top: 4px;
  min-width: 190px; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--bd); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.nav-group .nav-menu a { padding: 7px 10px; border-radius: var(--r-sm); text-decoration: none; color: #234;
  font-weight: 600; font-size: .9rem; white-space: nowrap; }
.nav-group .nav-menu a:hover { background: var(--info-bg); }
.nav-group .nav-menu .nav-admin { color: #8a5a00; }

.site-header .user-area { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.site-header .user-name { font-size: .85rem; color: var(--txt-2); }
.site-header .nav-icon { text-decoration: none; font-size: 1.05rem; }
.site-header .logout-form { display: inline; margin: 0; }
.site-header .logout-form button { padding: 3px 12px; font-size: .85rem; }

/* Responsive: <1024px → hamburger. Nav ẩn → mở thành panel dọc; dropdown thành tĩnh (mở sẵn). */
@media (max-width: 1023px) {
  .nav-burger { display: inline-block; order: 3; }
  .site-header .main-nav { display: none; order: 10; flex-basis: 100%; flex-direction: column;
    align-items: stretch; gap: 4px; padding: 8px 0 4px; }
  .site-header.nav-open .main-nav { display: flex; }
  .nav-group, .nav-flat { width: 100%; }
  .nav-group > summary::after { margin-left: auto; }
  .nav-group .nav-menu { position: static; box-shadow: none; border: none; min-width: 0;
    margin: 2px 0 4px 14px; padding: 0; }
}
@media (max-width: 560px) {
  .site-header { gap: 6px 8px; }
  .site-header .user-name { display: none; }
  .np-btn span { display: none; }   /* màn rất hẹp: chỉ còn icon ➕/🎬 */
  .np-btn { padding: 6px 10px; }
}

/* === FAB (nút nổi) góc dưới-phải — luôn thấy khi cuộn. <details> xoè 2 hành động (USER 2026-06-20).
   Ẩn ở trang có thanh hành động dính (.action-bar: detail/pick/result) để KHÔNG đè nút. === */
.fab { position: fixed; right: 18px; bottom: 18px; z-index: var(--z-fab); }
body:has(.action-bar) .fab { display: none; }
.fab > .fab-main { list-style: none; cursor: pointer; width: 52px; height: 52px; border-radius: 50%;
  background: var(--pri); color: #fff; font-size: 1.5rem; line-height: 1; display: flex;
  align-items: center; justify-content: center; box-shadow: var(--sh-2); user-select: none;
  transition: transform .15s, background .12s; }
.fab > .fab-main::-webkit-details-marker { display: none; }
.fab > .fab-main:hover { background: var(--pri-d); }
.fab[open] > .fab-main { transform: rotate(45deg); background: var(--danger); }  /* ➕ → ✕ */
.fab .fab-menu { position: absolute; right: 0; bottom: 62px; display: flex; flex-direction: column;
  gap: 8px; align-items: flex-end; }
.fab .fab-item { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
  background: var(--surface); color: var(--txt); font-weight: 700; font-size: .9rem; text-decoration: none;
  border: 1px solid var(--bd); border-radius: var(--r-pill); box-shadow: var(--sh-2); white-space: nowrap; }
.fab .fab-item:hover { background: var(--info-bg); border-color: var(--pri); }
.fab .fab-ico { font-size: 1.05rem; }
@media (max-width: 560px) { .fab { right: 12px; bottom: 12px; } }

/* Footer khẳng định chủ quyền team — mọi trang (USER 2026-06-07). Đơn giản mà đẹp. */
.site-footer { margin-top: 36px; padding: 18px 16px 22px; text-align: center;
  border-top: 1px solid var(--bd); color: #9aa0ab; font-size: .84rem; letter-spacing: .2px; }
.site-footer .sf-brand { font-weight: 800; letter-spacing: .6px;
  background: linear-gradient(90deg, var(--pri), #d6336c); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.site-footer .sf-sep { color: var(--bd); margin: 0 2px; }

/* Flow B (USER 2026-06-07) — trạng thái TẢI LIVE inline ở khu Add (pha + % bar). */
.dlb { border:1px solid var(--bd); border-radius:9px; padding:8px 11px; margin:8px 0;
  font-size:.88rem; background:#f7f9fc; }
.dlb-run { border-color:#cfe0ff; background:#f5f9ff; }
.dlb-warn { border-color:#fcd34d; background:#fffaf0; }
.dlb-done { border-color:#bfe6c8; background:#eef9f1; color:#0a6b1e; }
.dlb-err { border-color:#f0b3b3; background:#fde2e2; color:#9b1c17; }
.dlb-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.dlb-msg { flex:1; }
.dlb-pct { font-weight:700; color:var(--pri-d); font-variant-numeric:tabular-nums; }
.dlb-retry { padding:2px 10px; font-size:.82rem; margin-left:8px; }
.dl-pbar { height:8px; border-radius:999px; background:#e3e9f2; overflow:hidden; }
.dl-pfill { display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--pri),#34a853); transition:width .4s ease; }
/* Chưa có % thật (CaoVideo chưa gửi) → animation chạy qua lại cho biết "đang tải". */
.dl-pbar.indet .dl-pfill { width:38% !important; animation:dlindet 1.25s ease-in-out infinite; }
@keyframes dlindet { 0%{margin-left:-40%} 100%{margin-left:100%} }

/* Ô "Mô tả (tiếng Việt)" — dùng ở CẢ trang Add lẫn Detail (USER 2026-06-07). Trước CSS chỉ nằm
   trong detail.html → trang Add (_tag_form) thiếu → textarea bị global max-width:520 ép hẹp +
   rows=2 chật khi AI điền mô tả dài. Đưa vào app.css cho đồng nhất + min-height thoáng. */
.caption-box { border-left: 3px solid var(--pri); }
/* USER 2026-06-15: textarea AI Mô tả tự cao bằng nội dung (js-autogrow) → hiện hết text, không kéo. */
.caption-input { width: 100%; max-width: 100%; min-height: 84px; line-height: 1.55; padding: 9px 11px;
  font: inherit; font-size: .95rem; border: 1px solid #d8cef0; border-radius: 8px; resize: vertical;
  background: #fff; color: #1e2330; box-sizing: border-box; }
.caption-input:focus { outline: none; border-color: #7b5cd6; box-shadow: 0 0 0 3px rgba(123,92,214,.18); }

/* USER 2026-06-10 — "AI Mô tả" (vi_caption) sửa/lưu inline; USER 2026-06-15 — khung gọn đẹp. */
.ai-caption { margin: 10px 0; padding: 10px 12px; background: #faf8ff; border: 1px solid #e8e1f6;
  border-radius: 10px; }
.ai-cap-label { font-size: .9rem; font-weight: 700; margin-bottom: 6px; color: #4a3b6b; }
.ai-cap-bar { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.ai-cap-save { padding: 4px 14px; font-size: .84rem; }
.ai-cap-ok { color: #1a9d57; font-size: .82rem; font-weight: 600; }

/* Sửa nhanh TIÊU ĐỀ footage (nút bút chì + auto-lưu) — USER 2026-06-16. Dùng ở Kho + trang chi tiết. */
.ftitle-box { display: flex; align-items: center; gap: 4px; min-height: 1.3em; }
.ftitle-box--h { display: inline-flex; gap: 6px; }  /* trang chi tiết: bọc <h1> + bút chì thành 1 cụm */
.ttl-edit { flex: none; background: none; border: none; cursor: pointer; font-size: .78rem;
  line-height: 1; padding: 2px 4px; border-radius: 5px; opacity: .4;
  transition: opacity .12s, background .12s; }
.ttl-edit:hover { opacity: 1; background: #eef4ff; }
.ttl-input { width: 100%; font-weight: 600; font-size: .9rem; padding: 2px 6px;
  border: 1px solid var(--pri); border-radius: 6px; outline: none; box-sizing: border-box; }
.ftitle-box--h .ttl-input { font-size: 1.1rem; min-width: 240px; }