/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
 * clipEditor.css — Trình cắt nhiều đoạn (tab "Tải từ URL" của Studio Live)
 * Theo ngôn ngữ thiết kế dự án: bo mềm 10–18px, bóng nhẹ nhiều lớp, gradient chỉ ở nút chính,
 * indigo/violet làm màu chủ đạo, chuyển cảnh .15–.22s.
 *
 * ⚠⚠ BA LỖI BỐ CỤC ĐÃ SỬA (23/09):
 *   1. Ô nhập mốc rộng CỨNG 72px, mà mốc của video dài in ra "3:14:42.4" (9 ký tự) ⇒ bị cắt mất.
 *      Nay ô co giãn theo chỗ trống, hàng tự xuống dòng khi cột hẹp.
 *   2. Mở rộng toàn trang: `.ce-body` là grid nhưng KHÔNG khoá chiều cao hàng ⇒ hàng tự phình theo
 *      nội dung, video dọc đẩy khung TRÀN RA NGOÀI MÀN HÌNH. Nay khoá `minmax(0,1fr)` + `min-height:0`.
 *   3. Khung sân khấu rộng cứng 16/9 nên video DỌC bị hai vệt đen to. Nay sân khấu ôm sát khung hình
 *      thật của video (cao cố định, rộng `fit-content`).
 * ═══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ⚠ Tự chứa: trang admin có sẵn reset border-box, nhưng khai lại để khối này không phụ thuộc trang chủ
   (thiếu nó thì `.ce-track` rộng 100% + viền 2px làm trục luôn đẻ ra thanh cuộn ngang thừa). */
.ce-root, .ce-root *, .ce-root *::before, .ce-root *::after { box-sizing: border-box; }

.ce-root {
  margin-top: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .18);
  overflow: hidden;
}

/* ── Mở rộng toàn trang ─────────────────────────────────────────────────────────────────────────── */
.ce-root.ce-rong {
  position: fixed;
  inset: 0;
  z-index: 3000;
  margin: 0;
  border-radius: 0;
  border: 0;
  display: flex;
  flex-direction: column;
}
/* ⚠ `minmax(0,1fr)` + `min-height:0` là chỗ NGĂN TRÀN: thiếu nó thì hàng grid phình theo nội dung. */
.ce-root.ce-rong .ce-body { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.ce-root.ce-rong .ce-left {
  display: grid;
  grid-template-rows: minmax(120px, 1fr) auto auto auto auto;   /* sân khấu · thanh tua · điều khiển · trục · gợi ý */
  min-height: 0;
  overflow: hidden;
}
.ce-root.ce-rong .ce-stage { height: 100%; }
body.ce-khoa-cuon { overflow: hidden; }

/* ── Thanh tiêu đề ──────────────────────────────────────────────────────────────────────────────── */
.ce-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.ce-bar-l { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ce-bar-ic {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px; color: #fff; font-size: .85rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 4px 12px -4px rgba(99, 102, 241, .6);
}
.ce-bar-tx { min-width: 0; }
.ce-bar-t {
  font-weight: 700; font-size: .84rem; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ce-bar-m { font-size: .7rem; color: #64748b; margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ce-bar-r { display: flex; gap: 6px; flex-shrink: 0; }

.ce-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px;
  background: #eef2ff; color: #4338ca; font-weight: 600; font-size: .64rem;
}
.ce-chip-live { background: #fee2e2; color: #b91c1c; }
.ce-chip-live i { font-size: .45rem; }

/* ── Nút ────────────────────────────────────────────────────────────────────────────────────────── */
.ce-b {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 10px;
  border: 1.5px solid transparent; border-radius: 10px;
  background: #e2e8f0; color: #334155;
  font-size: .72rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
}
.ce-b:hover { background: #cbd5e1; }
.ce-b:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99, 102, 241, .22); }
.ce-b:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.ce-b-out { background: #fff; border-color: #e2e8f0; color: #475569; }
.ce-b-out:hover { background: #f8fafc; border-color: #c7d2fe; color: #4338ca; }
.ce-b-ic { min-width: 32px; padding: 0 8px; justify-content: center; }
.ce-b-on { background: #eef2ff; border-color: #6366f1; color: #4338ca; }
.ce-b-pri {
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
  min-width: 36px; justify-content: center;
}
.ce-b-pri:hover { transform: translateY(-1px); background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.ce-b-x:hover { background: #fee2e2; color: #b91c1c; }
.ce-b-sm { min-height: 28px; padding: 0 8px; font-size: .68rem; }
.ce-b kbd {
  font: 600 .6rem/1 ui-monospace, monospace;
  padding: 2px 4px; border-radius: 4px;
  background: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b;
}

/* ── Thân: video trái · danh sách phải ──────────────────────────────────────────────────────────── */
.ce-body { display: grid; grid-template-columns: minmax(0, 1fr) 336px; }
.ce-left { min-width: 0; padding: 14px; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; }

/* Sân khấu ÔM SÁT khung hình thật: cao cố định, rộng tự suy ra theo tỉ lệ video.
   ⚠ Chiều cao PHẢI xác định (không dùng `auto`) để `video{height:100%}` giải được — nhờ vậy video dọc
   không bao giờ tràn, và cũng không còn hai vệt đen rộng hai bên. */
.ce-stage {
  position: relative;
  background: #0f172a;
  border-radius: 14px;
  overflow: hidden;
  height: clamp(190px, 42vh, 520px);
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ce-stage video {
  display: block;
  height: 100%; width: auto;
  max-width: 100%; max-height: 100%;
  background: #000;
}
.ce-stage:fullscreen { height: 100%; width: 100%; border-radius: 0; }
.ce-stage:fullscreen video { object-fit: contain; width: 100%; }

.ce-spin {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  color: #e0e7ff; font-size: 1.6rem;
  background: rgba(15, 23, 42, .28);
  pointer-events: none;
}

.ce-ovl {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .82); backdrop-filter: blur(4px);
  padding: 20px;
}
.ce-ovl-box {
  max-width: 460px; text-align: center;
  color: #e2e8f0; font-size: .78rem; line-height: 1.6;
  background: rgba(30, 41, 59, .9);
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 14px; padding: 16px 18px;
}
.ce-ovl-err { border-color: rgba(239, 68, 68, .5); color: #fecaca; }

/* ── Thanh tiến trình (kéo được) ────────────────────────────────────────────────────────────────── */
.ce-seek-row { display: flex; align-items: center; gap: 9px; margin-top: 11px; flex-shrink: 0; }
.ce-t {
  font: 600 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #64748b; white-space: nowrap; min-width: 52px; text-align: center;
}
.ce-seek {
  position: relative; flex: 1; min-width: 0;
  padding: 9px 0;                    /* vùng bấm cao 30px — thừa sức cho ngón tay */
  cursor: pointer; touch-action: none; user-select: none;
}
.ce-seek-rail {
  position: relative; height: 8px; border-radius: 999px;
  background: #e2e8f0; overflow: visible;
}
.ce-seek-buf { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: #cbd5e1; }
.ce-seek-play {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}
.ce-seek-marks { position: absolute; inset: 0; pointer-events: none; }
.ce-seek-marks i {
  position: absolute; top: -3px; bottom: -3px;
  border-radius: 3px; opacity: .75; min-width: 2px;
}
.ce-seek-knob {
  position: absolute; top: 50%; left: 0;
  width: 15px; height: 15px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff; border: 3px solid #6366f1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .28);
  transition: transform .15s cubic-bezier(.34, 1.56, .64, 1);
}
.ce-seek:hover .ce-seek-knob, .ce-seek-keo .ce-seek-knob { transform: translate(-50%, -50%) scale(1.25); }
.ce-seek:focus-visible { outline: 0; }
.ce-seek:focus-visible .ce-seek-rail { box-shadow: 0 0 0 3px rgba(99, 102, 241, .22); }

.ce-seek-tip {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 5px; border-radius: 10px;
  background: rgba(15, 23, 42, .94); color: #f1f5f9;
  font: 600 .65rem/1 ui-monospace, monospace;
  pointer-events: none; z-index: 5;
  box-shadow: 0 8px 20px -8px rgba(15, 23, 42, .6);
}
.ce-seek-tip i {
  display: block; width: 88px; height: 56px; border-radius: 6px;
  background-size: cover; background-position: center; background-color: #1e293b;
}
.ce-seek-tip span { padding: 0 3px 1px; }

/* ── Hàng điều khiển ───────────────────────────────────────────────────────────────────────────── */
.ce-ctrl { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; flex-shrink: 0; }
.ce-clock {
  font: 600 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #334155; padding: 0 4px; white-space: nowrap;
}
.ce-sel {
  min-height: 32px; padding: 0 6px;
  border: 1.5px solid #e2e8f0; border-radius: 10px;
  background: #fff; color: #475569; font-size: .7rem; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
.ce-sel:focus { outline: 0; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.ce-sep { width: 1px; height: 20px; background: #e2e8f0; margin: 0 2px; }

.ce-vol-wrap { display: inline-flex; align-items: center; gap: 5px; }
.ce-vol { width: 70px; accent-color: #6366f1; cursor: pointer; }

.ce-zoom { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.ce-zoom-l { font: 600 .66rem/1 ui-monospace, monospace; color: #64748b; min-width: 34px; text-align: center; }

/* ── Trục thời gian ────────────────────────────────────────────────────────────────────────────── */
.ce-scroll { margin-top: 10px; overflow-x: auto; overflow-y: hidden; border-radius: 12px; flex-shrink: 0; }
.ce-track {
  position: relative;
  width: 100%;
  height: 96px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  cursor: crosshair;
  touch-action: none;          /* để pointermove kéo được trên cảm ứng */
  user-select: none;
  overflow: hidden;
}
.ce-track:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #818cf8; }
.ce-strip { position: absolute; inset: 0 0 24px 0; display: flex; opacity: .6; pointer-events: none; }
.ce-strip i { flex: 1; background-size: cover; background-position: center; }

.ce-segs { position: absolute; inset: 0 0 24px 0; pointer-events: none; }
.ce-seg {
  position: absolute; top: 0; bottom: 0;
  background: color-mix(in srgb, var(--c) 26%, transparent);
  border: 2px solid var(--c);
  border-radius: 8px;
  pointer-events: auto; cursor: grab;
  transition: background .15s ease;
  min-width: 4px;
}
.ce-seg:hover { background: color-mix(in srgb, var(--c) 38%, transparent); }
.ce-seg-on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 32%, transparent); z-index: 2; }
.ce-seg-lb {
  position: absolute; top: 3px; left: 5px;
  font: 700 .62rem/1 Inter, sans-serif; color: #fff;
  background: var(--c); border-radius: 5px; padding: 2px 5px;
  pointer-events: none;
}
.ce-seg-h {
  position: absolute; top: 0; bottom: 0; width: 10px;
  cursor: ew-resize; background: transparent;
}
.ce-seg-h::after {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  left: 3px; width: 4px; height: 26px; border-radius: 3px;
  background: var(--c); opacity: .9;
}
.ce-seg-l { left: -5px; }
.ce-seg-r { right: -5px; }

/* Cái kim: TO HƠN và BẮT ĐƯỢC CHUỘT để kéo tua — bản cũ `pointer-events:none` nên không cầm được. */
.ce-head {
  position: absolute; top: 0; bottom: 24px; width: 2px;
  background: #ef4444; z-index: 3;
  cursor: ew-resize; pointer-events: auto;
}
.ce-head::before {
  content: ''; position: absolute; top: -1px; left: -7px;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 11px solid #ef4444;
}
.ce-head::after {           /* vùng bắt chuột rộng 16px, trong suốt */
  content: ''; position: absolute; top: 0; bottom: 0; left: -7px; width: 16px;
}

.ce-ruler {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24px;
  border-top: 1px solid #e2e8f0; background: #f8fafc;
  cursor: ew-resize;         /* báo hiệu: dải này để TUA */
}
.ce-tick {
  position: absolute; top: 5px;
  font: 500 .6rem/1 ui-monospace, monospace; color: #94a3b8;
  transform: translateX(-50%); white-space: nowrap; pointer-events: none;
}
/* ⚠ Vạch đầu/cuối bị `translateX(-50%)` cắt mất một nửa ở hai mép trục — neo lại theo mép. */
.ce-tick-dau { transform: translateX(0); }
.ce-tick-cuoi { transform: translateX(-100%); }
.ce-tick::before {
  content: ''; position: absolute; left: 50%; top: -6px; width: 1px; height: 5px; background: #cbd5e1;
}

.ce-hint {
  margin-top: 8px; font-size: .66rem; color: #94a3b8;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex-shrink: 0;
}
.ce-hint span { display: inline-flex; align-items: center; gap: 5px; }
.ce-hint b { color: #64748b; }
.ce-hint kbd {
  font: 600 .6rem/1 ui-monospace, monospace; padding: 2px 4px; border-radius: 4px;
  background: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b;
}

/* Thẻ <video> ẩn để lấy dải hình — PHẢI nằm trong tài liệu mới được giải mã, nhưng không chiếm chỗ. */
.ce-hidden { position: absolute; left: -9999px; top: 0; width: 2px; height: 2px; overflow: hidden; }
.ce-vid-an { width: 2px; height: 2px; }

/* ── Cột phải: danh sách đoạn ──────────────────────────────────────────────────────────────────── */
.ce-right { display: flex; flex-direction: column; min-width: 0; background: #f8fafc; }
.ce-rhd {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid #e2e8f0;
  font-size: .74rem; font-weight: 700; color: #334155;
}
.ce-rhd b {
  display: inline-block; min-width: 20px; text-align: center;
  background: #6366f1; color: #fff; border-radius: 999px; padding: 1px 7px;
  font-size: .68rem; margin-left: 4px;
}
.ce-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 140px; max-height: 40vh; }
.ce-root.ce-rong .ce-list { max-height: none; }

.ce-empty { text-align: center; padding: 26px 14px; color: #94a3b8; }
.ce-empty i { color: #cbd5e1; }
.ce-empty-t { margin-top: 10px; font-weight: 700; font-size: .76rem; color: #64748b; }
.ce-empty-s { margin-top: 6px; font-size: .68rem; line-height: 1.7; }
.ce-empty-s kbd {
  font: 600 .62rem/1 ui-monospace, monospace; padding: 2px 5px; border-radius: 4px;
  background: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b;
}

.ce-item {
  border: 1.5px solid #e2e8f0; border-left: 4px solid var(--c);
  border-radius: 11px; background: #fff; padding: 9px 10px;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ce-item:hover { border-color: #c7d2fe; transform: translateY(-1px); }
.ce-item-on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent); }
.ce-item-hd { display: flex; align-items: center; gap: 6px; }
.ce-item-no {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px;
  background: var(--c); color: #fff;
  font: 700 .64rem/20px Inter, sans-serif; text-align: center;
}
.ce-item-name {
  flex: 1; min-width: 0;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  padding: 3px 5px; font: 600 .72rem/1.3 inherit; color: #0f172a;
}
.ce-item-name::placeholder { color: #cbd5e1; font-weight: 500; }
.ce-item-name:hover { background: #f8fafc; }
.ce-item-name:focus { outline: 0; background: #fff; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }

.ce-ib {
  flex-shrink: 0; width: 26px; height: 26px; border: 0; border-radius: 8px;
  background: #f1f5f9; color: #64748b; cursor: pointer; font-size: .64rem;
  transition: background .15s ease, color .15s ease;
}
.ce-ib:hover { background: #e2e8f0; color: #334155; }
.ce-ib:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99, 102, 241, .22); }
.ce-ib-x:hover { background: #fee2e2; color: #dc2626; }

/* ⚠ Hàng mốc thời gian: ô nhập CO GIÃN (không rộng cứng 72px) và hàng tự xuống dòng — mốc dài kiểu
   "3:14:42.4" của video 16 tiếng phải đọc được ĐỦ, đây chính là lỗi "ô thời gian bị che mất". */
.ce-item-tm { display: flex; align-items: center; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.ce-ar { color: #cbd5e1; font-size: .6rem; flex-shrink: 0; }
.ce-tin {
  flex: 1 1 82px; min-width: 0; width: auto; max-width: 150px;
  border: 1.5px solid #e2e8f0; border-radius: 8px; background: #fff;
  padding: 4px 4px; text-align: center;
  font: 600 .68rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: #334155;
}
.ce-tin:focus { outline: 0; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.ce-in-err { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
.ce-mini {
  flex-shrink: 0; width: 22px; height: 24px; border: 0; border-radius: 7px;
  background: #f1f5f9; color: #94a3b8; cursor: pointer; font-size: .58rem;
  transition: background .15s ease, color .15s ease;
}
.ce-mini:hover { background: #eef2ff; color: #4f46e5; }
.ce-mini:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99, 102, 241, .22); }
.ce-dur {
  flex: 0 0 auto; margin-left: auto;
  font: 700 .66rem/1 ui-monospace, monospace;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
  padding: 4px 7px; border-radius: 7px;
}

/* ── Chân cột phải ─────────────────────────────────────────────────────────────────────────────── */
.ce-foot { border-top: 1px solid #e2e8f0; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.ce-tot { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; color: #64748b; }
.ce-tot b { font: 700 .8rem/1 ui-monospace, monospace; color: #0f172a; }

.ce-opt { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ce-rad { position: relative; cursor: pointer; }
.ce-rad input { position: absolute; opacity: 0; width: 0; height: 0; }
.ce-rad span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 6px; border: 1.5px solid #e2e8f0; border-radius: 10px;
  background: #fff; color: #64748b; font-size: .68rem; font-weight: 600;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  text-align: center;
}
.ce-rad:hover span { border-color: #c7d2fe; }
.ce-rad input:checked + span { border-color: #6366f1; background: #eef2ff; color: #4338ca; }
.ce-rad input:focus-visible + span { box-shadow: 0 0 0 3px rgba(99, 102, 241, .22); }

.ce-chk { display: flex; align-items: center; gap: 8px; font-size: .71rem; color: #475569; cursor: pointer; }
.ce-chk input { width: 16px; height: 16px; accent-color: #6366f1; cursor: pointer; flex-shrink: 0; }

.ce-warn {
  font-size: .67rem; line-height: 1.65; color: #3730a3;
  background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 10px; padding: 8px 10px;
}
.ce-warn-am { color: #92400e; background: #fef9c3; border-color: #fde68a; }
.ce-warn-sub {
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed currentColor;
  opacity: .92;
}

.ce-cut {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 40px; border: 0; border-radius: 12px;
  background: linear-gradient(135deg, #10b981, #059669); color: #fff;
  font: 700 .78rem/1 inherit; cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(16, 185, 129, .6);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.ce-cut:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.ce-cut:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(16, 185, 129, .3); }
.ce-cut:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Nền tối ───────────────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .ce-root { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .ce-bar { background: linear-gradient(135deg, #1e293b, #172033); border-bottom-color: #334155; }
[data-theme="dark"] .ce-bar-t { color: #f1f5f9; }
[data-theme="dark"] .ce-left { border-right-color: #334155; }
[data-theme="dark"] .ce-right { background: #172033; }
[data-theme="dark"] .ce-rhd { color: #cbd5e1; border-bottom-color: #334155; }
[data-theme="dark"] .ce-foot { background: #1e293b; border-top-color: #334155; }
[data-theme="dark"] .ce-track { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .ce-ruler { background: #172033; border-top-color: #334155; }
[data-theme="dark"] .ce-item { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .ce-item-name { color: #f1f5f9; }
[data-theme="dark"] .ce-item-name:hover { background: #0f172a; }
[data-theme="dark"] .ce-tin { background: #0f172a; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .ce-mini { background: #0f172a; color: #64748b; }
[data-theme="dark"] .ce-mini:hover { background: #312e81; color: #c7d2fe; }
[data-theme="dark"] .ce-ib { background: #0f172a; color: #94a3b8; }
[data-theme="dark"] .ce-ib:hover { background: #334155; color: #e2e8f0; }
[data-theme="dark"] .ce-b { background: #334155; color: #cbd5e1; }
[data-theme="dark"] .ce-b:hover { background: #475569; }
[data-theme="dark"] .ce-b-out { background: #1e293b; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .ce-b-on { background: #312e81; border-color: #6366f1; color: #c7d2fe; }
[data-theme="dark"] .ce-sel { background: #0f172a; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .ce-rad span { background: #1e293b; border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .ce-rad input:checked + span { background: #312e81; border-color: #6366f1; color: #c7d2fe; }
[data-theme="dark"] .ce-clock, [data-theme="dark"] .ce-tot b { color: #e2e8f0; }
[data-theme="dark"] .ce-warn { background: #312e81; border-color: #4338ca; color: #c7d2fe; }
[data-theme="dark"] .ce-warn-am { background: #422006; border-color: #92400e; color: #fde68a; }
[data-theme="dark"] .ce-seek-rail { background: #334155; }
[data-theme="dark"] .ce-seek-buf { background: #475569; }
[data-theme="dark"] .ce-seek-knob { background: #1e293b; }

/* ── Đáp ứng: 1024 / 768 / 480 ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .ce-body { grid-template-columns: 1fr; }
  .ce-left { border-right: 0; border-bottom: 1px solid #e2e8f0; }
  [data-theme="dark"] .ce-left { border-bottom-color: #334155; }
  .ce-stage { height: clamp(180px, 36vh, 420px); }
  .ce-list { max-height: 30vh; }
  /* Toàn trang trên tablet: xếp dọc + cuộn, KHÔNG khoá 1 hàng nữa (không đủ chỗ) */
  .ce-root.ce-rong .ce-body { grid-template-rows: auto auto; overflow-y: auto; }
  .ce-root.ce-rong .ce-left { display: flex; overflow: visible; }
  .ce-root.ce-rong .ce-stage { height: clamp(180px, 40vh, 460px); }
}
@media (max-width: 767px) {
  .ce-left, .ce-foot, .ce-rhd { padding: 11px; }
  .ce-track { height: 82px; }
  .ce-zoom { margin-left: 0; }
  .ce-opt { grid-template-columns: 1fr; }
  .ce-b { min-height: 34px; }
  .ce-vol { width: 54px; }
  .ce-hint { gap: 10px; }
}
@media (max-width: 480px) {
  .ce-root { border-radius: 14px; }
  .ce-xs, .ce-b kbd { display: none; }        /* nút chỉ còn biểu tượng */
  .ce-b { padding: 0 9px; min-height: 36px; min-width: 34px; justify-content: center; }
  .ce-ctrl { gap: 5px; }
  .ce-clock { font-size: .64rem; padding: 0 2px; }
  .ce-vol { display: none; }                  /* còn nút tắt/bật tiếng là đủ trên điện thoại */
  .ce-track { height: 74px; }
  .ce-stage { height: clamp(160px, 30vh, 320px); }
  .ce-t { min-width: 44px; font-size: .62rem; }
  .ce-seek-tip i { width: 68px; height: 44px; }
  .ce-tin { flex-basis: 74px; font-size: .64rem; }
  .ce-hint { font-size: .62rem; }
}