/* OneCAD Academy — trình phát video riêng (public/js/player.js), ảnh DT-53 / DT-54. Tệp riêng vì khu quản trị (admin.css) cũng dùng trình phát này.
   Không mốc chương trên thanh tua (anh Tâm chốt 17/10/2026). Vị trí tô thanh tua: biến --p (đã xem) / --b (đã tải) đặt qua CSSOM. */
.vp{--vp-bg:#0a1b33;--vp-ink:#fff;--vp-dim:#b8c6db;--vp-teal:#2fc4a5;--vp-cyan:#38bdf8;--vp-blue:#0b6bff;--vp-panel:rgba(10,24,46,.94);--vp-line:rgba(255,255,255,.18);
  position:relative;border-radius:14px;overflow:hidden;background:var(--vp-bg);color:var(--vp-ink);font-family:inherit;outline:none;-webkit-tap-highlight-color:transparent}
.vp:focus-visible{box-shadow:0 0 0 3px #7fb3ff}
.vp [hidden]{display:none!important}
.vp button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.vp-i{width:20px;height:20px;flex:none}
.vp-banner{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;background:var(--vp-blue);color:#fff;font-size:14px;font-weight:600;padding:9px 14px;text-align:center}
.vp-banner a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.vp-stage{position:relative;aspect-ratio:16/9;background:var(--vp-bg);overflow:hidden}
.vp-video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain;display:block}
.vp-video::cue{opacity:0}

/* Đầu khung: dấu Academy (luôn hiện), tên bài + nút đóng (chỉ khi toàn màn hình) */
.vp-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:14px;padding:14px 16px;pointer-events:none;z-index:2}
.vp-wm{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.vp-wm img{width:24px;height:24px;border-radius:6px;background:#fff;padding:2px;object-fit:contain}
.vp-ttl{display:none;min-width:0;font-size:15px}
.vp-ttl b{font-weight:600}
.vp-ttl small{color:var(--vp-dim);margin-left:8px;font-size:13px}
.vp-sp{flex:1}
.vp-close{pointer-events:auto}
.vp:not(.fs) .vp-close{display:none}

/* Lớp trạng thái: đang tải / bài sắp có / lỗi phát */
.vp-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;background:rgba(8,20,40,.72);z-index:3}
.vp-ov b{font-size:20px;font-weight:700}
.vp-ov p{color:#d5e0ef;font-size:14.5px;max-width:440px;line-height:1.5}
.vp-spin{width:52px;height:52px;border-radius:50%;border:4px solid rgba(255,255,255,.18);border-top-color:var(--vp-cyan);animation:vp-spin .9s linear infinite;margin-bottom:6px}
.vp.buffering[data-state=ready] .vp-stage::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:4px solid rgba(255,255,255,.18);border-top-color:var(--vp-cyan);animation:vp-spin .9s linear infinite;z-index:2;pointer-events:none}
@keyframes vp-spin{to{transform:rotate(360deg)}}
.vp-ic{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.1);margin-bottom:6px}
.vp-ic .vp-i{width:28px;height:28px;color:var(--vp-cyan)}
.vp-ic.bad{background:rgba(220,60,60,.22)}
.vp-ic.bad .vp-i{color:#ff9a8f}
.vp-retry{display:inline-flex;align-items:center;gap:8px;margin-top:8px;background:#fff!important;color:#0b1f3d!important;font-weight:600!important;border-radius:10px!important;padding:10px 18px!important}

/* Nút phát lớn giữa khung */
.vp-big{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%!important;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--vp-cyan),var(--vp-blue))!important;box-shadow:0 0 0 10px rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.35);z-index:2}
.vp-big .vp-i{width:30px;height:30px;fill:#fff;stroke:none;margin-left:3px}

/* Phụ đề (chữ do trình phát hiện — nằm trên thanh điều khiển) */
.vp-cue{position:absolute;left:50%;transform:translateX(-50%);bottom:96px;max-width:86%;background:rgba(0,0,0,.78);color:#fff;font-size:19px;line-height:1.4;
  padding:6px 14px;border-radius:8px;text-align:center;white-space:pre-line;z-index:2;pointer-events:none}
.vp.idle .vp-cue{bottom:28px}

/* Mời xem tiếp */
.vp-resume{position:absolute;left:16px;bottom:84px;display:flex;align-items:center;gap:4px;background:rgba(10,24,46,.88);border:1px solid var(--vp-line);border-radius:12px;padding:4px;z-index:3}
.vp:not([data-state=ready]) .vp-resume{display:none}
.vp-rs{display:inline-flex;align-items:center;gap:8px;padding:8px 12px!important;border-radius:9px!important;font-weight:600!important;font-size:14.5px}
.vp-rs:hover{background:rgba(255,255,255,.08)!important}
.vp-rs.from0{color:var(--vp-cyan)!important}

/* Thanh điều khiển */
.vp-ctrl{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 10px;background:linear-gradient(transparent,rgba(4,12,26,.9));z-index:2;transition:opacity .25s}
.vp.idle .vp-ctrl,.vp.idle .vp-top{opacity:0;pointer-events:none}
.vp.idle{cursor:none}
.vp:not([data-state=ready]) .vp-ctrl{opacity:.35;pointer-events:none}
.vp-seek{position:relative;height:18px;display:flex;align-items:center;--p:0%;--b:0%}
.vp-range{-webkit-appearance:none;appearance:none;width:100%;height:18px;margin:0;background:transparent;cursor:pointer}
.vp-range:focus{outline:none}
.vp-range::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(90deg,var(--vp-teal),var(--vp-cyan)) 0/var(--p) 100% no-repeat,linear-gradient(rgba(255,255,255,.38),rgba(255,255,255,.38)) 0/var(--b) 100% no-repeat,rgba(255,255,255,.18)}
.vp-range::-moz-range-track{height:5px;border-radius:5px;background:linear-gradient(90deg,var(--vp-teal),var(--vp-cyan)) 0/var(--p) 100% no-repeat,linear-gradient(rgba(255,255,255,.38),rgba(255,255,255,.38)) 0/var(--b) 100% no-repeat,rgba(255,255,255,.18)}
.vp-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--vp-cyan);margin-top:-5.5px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.vp-range::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--vp-cyan)}
.vp-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(56,189,248,.45)}
.vp-tip{position:absolute;bottom:22px;transform:translateX(-50%);background:var(--vp-panel);border:1px solid var(--vp-line);border-radius:7px;padding:3px 8px;font-size:12.5px;font-weight:600;white-space:nowrap;pointer-events:none}
.vp-row{display:flex;align-items:center;gap:6px;margin-top:4px}
.vp-b{width:36px;height:36px;border-radius:8px!important;display:grid;place-items:center}
.vp-b:hover,.vp-chip:hover{background:rgba(255,255,255,.1)!important}
.vp-b.play .vp-i-play{fill:#fff;stroke:none}
.vp-vol{display:flex;align-items:center;gap:2px}
.vp-vol-r{-webkit-appearance:none;appearance:none;width:76px;height:16px;background:transparent;cursor:pointer;--p:100%}
.vp-vol-r::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(#fff,#fff) 0/var(--p) 100% no-repeat,rgba(255,255,255,.25)}
.vp-vol-r::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(#fff,#fff) 0/var(--p) 100% no-repeat,rgba(255,255,255,.25)}
.vp-vol-r::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;margin-top:-4px}
.vp-vol-r::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#fff;border:0}
.vp-time{font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:8px}
.vp-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px!important;border:1px solid var(--vp-line)!important;border-radius:8px!important;font-size:13.5px!important;font-weight:600!important;white-space:nowrap;font-variant-numeric:tabular-nums}
.vp-chip .vp-i{width:17px;height:17px}
.vp-chip.cc.on{background:#fff!important;color:#0b1f3d!important;border-color:#fff!important}
.vp-b.gear{display:none}
.vp-chip.next{display:none}

/* Bảng chọn tốc độ / độ nét (máy tính) */
.vp-menu{position:absolute;bottom:62px;min-width:128px;background:var(--vp-panel);border:1px solid var(--vp-line);border-radius:12px;padding:8px;z-index:4;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.vp-menu.speed{right:120px}
.vp-menu.qual{right:52px}
.vp-menu b{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--vp-dim);padding:4px 10px 6px}
.vp-mi{display:flex!important;align-items:center;gap:8px;width:100%;padding:8px 10px!important;border-radius:8px!important;font-size:14.5px;font-variant-numeric:tabular-nums}
.vp-mi .vp-i,.vp-mi .vp-ck{width:16px;height:16px;flex:none}
.vp-mi:hover{background:rgba(255,255,255,.08)!important}
.vp-mi.on{background:rgba(255,255,255,.12)!important;font-weight:700}

/* Bảng trượt từ đáy (điện thoại, DT-54 ảnh 2) */
.vp-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:#fff;color:#0b1f3d;border-radius:18px 18px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 34px rgba(11,31,61,.22)}
.vp-sheet b{display:block;font-size:16px;font-weight:700;margin:12px 0 10px}
.vp-grab{display:block;width:44px;height:4px;border-radius:4px;background:#d3dfef;margin:0 auto}
.vp-sx{position:absolute;right:10px;top:8px;color:#4f627f!important}
.vp-opts{display:flex;flex-wrap:wrap;gap:6px}
.vp-opt{min-width:50px;height:44px;padding:0 11px!important;border:1px solid #d3dfef!important;border-radius:10px!important;font-size:15.5px!important;font-weight:600!important;background:#fff!important;font-variant-numeric:tabular-nums}
.vp-opt.on{border-color:#7fb0ff!important;background:#edf4ff!important;color:#0b6bff!important}

/* Toàn màn hình */
.vp.fs{border-radius:0;display:flex;flex-direction:column;background:#000}
.vp.fs .vp-stage{flex:1;aspect-ratio:auto}
.vp.fs .vp-ttl{display:block}
.vp.fs .vp-top{background:linear-gradient(rgba(4,12,26,.8),transparent);transition:opacity .25s}
.vp.fs .vp-close{display:grid}
.vp.fs .vp-chip.next{display:inline-flex}
.vp.fs .vp-sheet{position:absolute}

@media (max-width:900px){
  .vp{border-radius:0}
  .vp-top{padding:10px 12px}
  .vp-wm{font-size:13px}
  .vp-wm img{width:20px;height:20px}
  .vp-ctrl{padding:18px 10px 6px}
  .vp-row{gap:2px}
  .vp-b{width:34px;height:34px}
  .vp-vol,.vp-chip.qual{display:none!important}
  .vp-b.gear{display:grid}
  .vp-time{font-size:13px;margin-left:4px}
  .vp-chip{height:28px;padding:0 8px!important;font-size:12.5px!important}
  .vp-chip.cc .vp-i{display:none}
  .vp-cue{font-size:15px;bottom:70px;max-width:92%}
  .vp-resume{left:10px;bottom:64px}
  .vp.resuming .vp-big{display:none}
  .vp-rs{padding:6px 9px!important;font-size:13px}
  .vp-big{width:60px;height:60px;margin:-30px 0 0 -30px}
  .vp-ov b{font-size:17px}
  .vp-ov p{font-size:13.5px}
  .vp-banner{font-size:13px;padding:7px 10px}
}
@media (prefers-reduced-motion:reduce){.vp-spin,.vp.buffering .vp-stage::after{animation-duration:2.4s}}