/* ═══════════════════════════════════════════════════════════════════════════════════════════════════ * 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; } .ce-chip-q { background: #0f172a; color: #fff; } .ce-chip-ok { background: #d1fae5; color: #047857; } .ce-chip-warn { background: #fef3c7; color: #92400e; } .ce-m-it { display: inline-flex; align-items: center; gap: 4px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ce-m-it i { color: #94a3b8; font-size: .62rem; } /* Ảnh bìa ở thanh tiêu đề */ .ce-thumb { position: relative; flex-shrink: 0; display: block; width: 64px; height: 40px; border-radius: 9px; overflow: hidden; background: #e2e8f0; box-shadow: 0 2px 8px -3px rgba(15, 23, 42, .35); transition: transform .15s ease, box-shadow .15s ease; } .ce-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ce-thumb:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -6px rgba(99, 102, 241, .55); } .ce-thumb:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(99, 102, 241, .3); } /* Bảng thông tin chi tiết */ .ce-info { padding: 12px 16px; border-bottom: 1px solid #e2e8f0; background: #fcfdff; animation: ce-hien .18s ease; } @keyframes ce-hien { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .ce-if { display: flex; gap: 14px; align-items: flex-start; } .ce-if-bia { position: relative; flex-shrink: 0; width: 200px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #e2e8f0; display: block; } .ce-if-bia img { width: 100%; height: 100%; object-fit: cover; display: block; } .ce-if-bia span { position: absolute; left: 6px; bottom: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(15, 23, 42, .78); color: #fff; font-size: .62rem; font-weight: 700; } .ce-if-main { flex: 1; min-width: 0; } .ce-if-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; } .ce-if-it { display: flex; align-items: baseline; gap: 6px; font-size: .7rem; min-width: 0; } .ce-if-it i { color: #818cf8; width: 13px; text-align: center; font-size: .66rem; flex-shrink: 0; } .ce-if-it span { color: #64748b; flex-shrink: 0; } .ce-if-it b { color: #0f172a; font-weight: 700; min-width: 0; overflow-wrap: anywhere; } /* xuống dòng thay vì cắt — ô hẹp vẫn đọc đủ */ .ce-if-it b a { color: #4f46e5; text-decoration: none; } .ce-if-it b a:hover { text-decoration: underline; } .ce-if-it small { color: #94a3b8; font-weight: 600; } .ce-if-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; } .ce-if-tags span { padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #4338ca; font-size: .62rem; font-weight: 600; } .ce-if-desc { margin-top: 8px; font-size: .68rem; line-height: 1.5; color: #475569; white-space: pre-line; max-height: 5.2em; overflow-y: auto; } /* ── 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%; } /* ── Toàn màn hình: phóng KHỐI BỌC (hình + thanh thời gian) — bình thường khối này vô hình với bố cục ── */ .ce-player { display: contents; } .ce-fs-only { display: none; } .ce-player:fullscreen { display: flex; flex-direction: column; position: relative; width: 100%; height: 100%; background: #000; } .ce-player:-webkit-full-screen { display: flex; flex-direction: column; position: relative; width: 100%; height: 100%; background: #000; } .ce-player:fullscreen .ce-stage, .ce-player:-webkit-full-screen .ce-stage { flex: 1; width: 100%; height: auto !important; max-width: none; border-radius: 0; } .ce-player:fullscreen .ce-stage video, .ce-player:-webkit-full-screen .ce-stage video { width: 100%; height: 100%; object-fit: contain; } /* ══ TOÀN MÀN HÌNH — bố cục theo Vidstack Default Layout (github.com/vidstack/player) + quy ước YouTube ══ Trên: tiêu đề + nút phụ · Giữa: nút phát lớn khi dừng, chạm đúp 2 bên tua ∓10s, bảng báo nhanh · Dưới: thanh tua dày lên khi rê + hàng nút; tốc độ/chất lượng gom vào menu Cài đặt (không lộ dropdown). */ .ce-player:fullscreen .ce-seek-row, .ce-player:-webkit-full-screen .ce-seek-row { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 72px 20px 12px; gap: 4px 12px; flex-wrap: wrap; z-index: 6; /* ⚠ PHẢI nổi trên lớp phủ/xoay chờ của khung hình (z 2–3) — thiếu nó là nút lúc bấm được lúc không */ background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, 0) 100%); transition: opacity .28s ease, transform .28s ease; } .ce-player:fullscreen .ce-fs-bar, .ce-player:-webkit-full-screen .ce-fs-bar, .ce-player:fullscreen .ce-fs-top, .ce-player:-webkit-full-screen .ce-fs-top { display: flex; } .ce-player:fullscreen .ce-fs-mid, .ce-player:-webkit-full-screen .ce-fs-mid { display: block; } .ce-player:fullscreen .ce-t { display: none; } /* giờ đã có ở hàng nút */ .ce-player:fullscreen .ce-spin { font-size: 2.4rem; color: rgba(255, 255, 255, .9); } .ce-player.ce-an-dk .ce-seek-row { opacity: 0; transform: translateY(10px); pointer-events: none; } .ce-player.ce-an-dk .ce-fs-top { opacity: 0; transform: translateY(-10px); pointer-events: none; } .ce-player.ce-an-dk { cursor: none; } /* Thanh tua: mảnh 4px, rê vào dày 7px + hiện núm (Vidstack/YouTube) */ .ce-player:fullscreen .ce-seek { padding: 8px 0; margin: 0 2px; } .ce-player:fullscreen .ce-seek-rail { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .22); transition: height .15s ease; } .ce-player:fullscreen .ce-seek:hover .ce-seek-rail, .ce-player:fullscreen .ce-seek-keo .ce-seek-rail { height: 7px; } .ce-player:fullscreen .ce-seek-buf { background: rgba(255, 255, 255, .38); } .ce-player:fullscreen .ce-seek-play { background: linear-gradient(90deg, #818cf8, #a78bfa); } .ce-player:fullscreen .ce-seek-knob { width: 15px; height: 15px; background: #fff; border: 0; box-shadow: 0 0 0 4px rgba(167, 139, 250, .35); transform: translate(-50%, -50%) scale(0); transition: transform .15s ease; } .ce-player:fullscreen .ce-seek:hover .ce-seek-knob, .ce-player:fullscreen .ce-seek-keo .ce-seek-knob { transform: translate(-50%, -50%) scale(1); } .ce-player:fullscreen .ce-seek-tip i { width: 176px; height: 99px; border-radius: 8px; } .ce-player:fullscreen .ce-seek-tip { padding: 4px; border-radius: 10px; background: rgba(15, 23, 42, .9); font-size: .78rem; } /* Tiêu đề nổi phía trên */ .ce-fs-top { position: absolute; left: 0; right: 0; top: 0; z-index: 6; pointer-events: none; padding: 18px 22px 64px; align-items: flex-start; justify-content: space-between; gap: 16px; background: linear-gradient(to bottom, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); transition: opacity .28s ease, transform .28s ease; } .ce-fs-top-t { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .ce-fs-top-t b { color: #fff; font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 72vw; text-shadow: 0 1px 4px rgba(0, 0, 0, .55); } .ce-fs-top-t small { color: rgba(226, 232, 240, .82); font-size: .76rem; font-weight: 500; } .ce-fs-top-r { display: flex; gap: 4px; pointer-events: auto; } /* Hàng nút */ .ce-fs-bar { flex-basis: 100%; order: 10; align-items: center; justify-content: space-between; gap: 8px; } .ce-fs-g { display: flex; align-items: center; gap: 2px; min-width: 0; } .ce-fs-b { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #fff; font-size: 1.08rem; cursor: pointer; text-decoration: none; transition: background .15s ease, color .15s ease; } .ce-fs-b:hover, .ce-fs-b.ce-on { background: rgba(255, 255, 255, .14); } .ce-fs-b:active { background: rgba(255, 255, 255, .22); } .ce-fs-b:focus-visible { outline: 0; box-shadow: 0 0 0 2px #a5b4fc; } #ce-fs-play { font-size: 1.22rem; } #ce-fs-set i { transition: transform .3s ease; } #ce-fs-set.ce-on i { transform: rotate(60deg); } /* Tooltip (thay title mặc định của trình duyệt — hiện nhanh, cùng phong cách) */ .ce-fs-b[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px); padding: 5px 9px; border-radius: 7px; white-space: nowrap; pointer-events: none; background: rgba(15, 23, 42, .92); color: #f8fafc; font: 600 .7rem/1.2 Inter, system-ui, sans-serif; opacity: 0; transition: opacity .15s ease .25s, transform .15s ease .25s; } .ce-fs-b[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); } .ce-fs-b.ce-on[data-tip]::after { display: none; } .ce-fs-g:first-child > .ce-fs-b:first-child::after { left: 0; transform: translate(0, 4px); } .ce-fs-g:first-child > .ce-fs-b:first-child:hover::after { transform: none; } .ce-fs-g-r > .ce-fs-b:last-child::after { left: auto; right: 0; transform: translate(0, 4px); } .ce-fs-g-r > .ce-fs-b:last-child:hover::after { transform: none; } .ce-fs-top .ce-fs-b[data-tip]::after { bottom: auto; top: calc(100% + 10px); left: auto; right: 0; transform: translate(0, -4px); } .ce-fs-top .ce-fs-b[data-tip]:hover::after { transform: none; } /* Âm lượng: thanh trượt ra khi rê (YouTube/Vidstack) */ .ce-fs-vol { display: inline-flex; align-items: center; } .ce-fs-vol input { -webkit-appearance: none; appearance: none; width: 0; opacity: 0; height: 4px; margin: 0; border-radius: 99px; cursor: pointer; background: linear-gradient(90deg, #fff var(--pct, 100%), rgba(255, 255, 255, .28) var(--pct, 100%)); transition: width .2s ease, opacity .2s ease, margin .2s ease; } .ce-fs-vol:hover input, .ce-fs-vol:focus-within input { width: 84px; opacity: 1; margin: 0 10px 0 4px; } .ce-fs-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); } .ce-fs-vol input::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; } .ce-fs-clock { margin-left: 8px; color: rgba(255, 255, 255, .72); font: 500 .84rem/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; } .ce-fs-clock b { color: #fff; font-weight: 600; } .ce-fs-clock i { font-style: normal; margin: 0 3px; opacity: .6; } .ce-fs-badge { margin-right: 6px; padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, .16); color: #fff; font: 800 .64rem/1 Inter, system-ui, sans-serif; letter-spacing: .04em; } /* Menu Cài đặt — kính mờ, 2 tầng */ .ce-fs-menu-wrap { position: relative; display: inline-flex; } .ce-fs-menu { position: absolute; right: 0; bottom: calc(100% + 12px); width: 290px; max-height: min(62vh, 440px); overflow-y: auto; padding: 6px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(17, 24, 39, .8); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .7); color: #f1f5f9; font: 500 .82rem/1.2 Inter, system-ui, sans-serif; transform-origin: bottom right; animation: ce-mn-in .16s cubic-bezier(.34, 1.56, .64, 1); } .ce-fs-menu[hidden] { display: none; } @keyframes ce-mn-in { from { opacity: 0; transform: scale(.94) translateY(6px); } to { opacity: 1; transform: none; } } .ce-mn-it { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 9px; cursor: pointer; transition: background .12s ease; } .ce-mn-it:hover { background: rgba(255, 255, 255, .09); } .ce-mn-it > i:first-child { width: 18px; text-align: center; color: #a5b4fc; } .ce-mn-it span { flex: 1; } .ce-mn-it b { font-weight: 500; color: rgba(226, 232, 240, .7); font-size: .78rem; } .ce-mn-go { color: rgba(226, 232, 240, .5); font-size: .7rem; } .ce-mn-hd { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-weight: 700; cursor: pointer; border-radius: 9px 9px 0 0; } .ce-mn-hd:hover { background: rgba(255, 255, 255, .06); } .ce-mn-opt .ce-mn-ck { visibility: hidden; color: #a5b4fc !important; } .ce-mn-opt.on .ce-mn-ck { visibility: visible; } .ce-mn-opt.on span { font-weight: 700; color: #fff; } .ce-mn-opt small { color: rgba(226, 232, 240, .5); font-size: .68rem; } .ce-mn-opt em { font-style: normal; font-size: .58rem; font-weight: 800; padding: 2px 5px; border-radius: 4px; background: #6366f1; color: #fff; } .ce-mn-opt.dis { opacity: .4; cursor: not-allowed; } .ce-mn-note { padding: 8px 12px 6px; font-size: .66rem; color: rgba(226, 232, 240, .5); border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 4px; } .ce-mn-sw { position: relative; width: 34px; height: 20px; border-radius: 99px; background: rgba(255, 255, 255, .22); transition: background .15s ease; } .ce-mn-sw i { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .18s ease; } .ce-mn-sw.on { background: #6366f1; } .ce-mn-sw.on i { transform: translateX(14px); } /* Giữa màn hình */ .ce-fs-mid { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; } .ce-fs-bigplay { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding-left: 4px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(15, 23, 42, .5); color: #fff; font-size: 1.7rem; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; opacity: 0; transform: translate(-50%, -50%) scale(.85); pointer-events: none; transition: opacity .2s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1), background .15s ease; } .ce-player.ce-dang-dung .ce-fs-bigplay { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; } .ce-fs-bigplay:hover { background: rgba(99, 102, 241, .85); } .ce-fs-flash { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; border-radius: 50%; margin: -32px 0 0 -32px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.4rem; opacity: 0; } .ce-fs-flash.on { animation: ce-flash .55s ease-out; } @keyframes ce-flash { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.45); } } .ce-fs-osd { position: absolute; left: 50%; top: 14%; transform: translate(-50%, -6px); padding: 9px 16px; border-radius: 12px; background: rgba(15, 23, 42, .78); color: #fff; font: 700 .95rem/1 Inter, system-ui, sans-serif; opacity: 0; transition: opacity .18s ease, transform .18s ease; } .ce-fs-osd.on { opacity: 1; transform: translate(-50%, 0); } .ce-fs-osd i { margin-right: 6px; color: #a5b4fc; } .ce-fs-fx { position: absolute; top: 0; bottom: 0; width: 34%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; font: 700 .82rem/1 Inter, system-ui, sans-serif; opacity: 0; } .ce-fs-fx i { font-size: 1.5rem; } .ce-fs-fx-l { left: 0; border-radius: 0 50% 50% 0 / 0 50% 50% 0; background: rgba(255, 255, 255, .1); } .ce-fs-fx-r { right: 0; border-radius: 50% 0 0 50% / 50% 0 0 50%; background: rgba(255, 255, 255, .1); } .ce-fs-fx.on { animation: ce-fx .65s ease-out; } @keyframes ce-fx { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } } @media (max-width: 767px) { .ce-player:fullscreen .ce-seek-row { padding: 56px 10px 8px; } .ce-fs-b { width: 38px; height: 38px; font-size: 1rem; } .ce-fs-clock { font-size: .74rem; margin-left: 4px; } #ce-fs-back, #ce-fs-fwd, .ce-fs-badge { display: none; } .ce-fs-b[data-tip]::after { display: none; } /* cảm ứng không có hover */ .ce-fs-vol:hover input { width: 0; opacity: 0; margin: 0; } .ce-fs-menu { width: min(290px, 86vw); } .ce-fs-top { padding: 12px 14px 48px; } .ce-fs-top-t b { font-size: .92rem; } } @media (max-width: 480px) { #ce-fs-shot, #ce-fs-link { display: none; } .ce-fs-bigplay { width: 64px; height: 64px; font-size: 1.4rem; } } .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; opacity: .62; pointer-events: none; overflow: hidden; } /* Mỗi ô là 1 lát trục; khung bên trong giữ ĐÚNG tỉ lệ và cắt giữa (kiểu cover) — kể cả khung cắt từ ảnh ghép storyboard */ /* Các lát ĐÈ MÉP nhau (xem DE_MEP trong clipEditor.js) nên bỏ đường kẻ chia ô — có kẻ thì chỗ chồng thành vạch đôi. */ .ce-strip i { position: absolute; top: 0; bottom: 0; overflow: hidden; } .ce-strip b { position: absolute; top: 0; left: 50%; height: 100%; transform: translateX(-50%); background-repeat: no-repeat; background-color: #cbd5e1; } .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ẻ