/* ═══════════════════════════════════════════════════════════
   HOME TOEIC — video.css
   Trang "Video" (video.html) — video demo bài giảng xem thử.
   ═══════════════════════════════════════════════════════════ */

.vd-page { max-width: 1360px; margin: 0 auto; padding: 0 20px 40px; }
/* Tông tím của nhóm "Khám phá" trên menu (style.css .nav-grp-3) — chữ sáng hơn ở chế độ tối. */
:root { --vd-violet: #6d28d9; }
[data-theme="dark"] { --vd-violet: #c4b5fd; }

/* ── Topbar — dải nhỏ gọn thay cho .pg-hero to (đã bỏ để nhường không gian cho video), có nền
   ấm nhẹ + viền mảnh để vẫn có điểm nhấn thị giác chứ không trơ trọi. ── */
.vd-topbar {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px; padding: 16px 22px; border-radius: 18px;
  background: linear-gradient(120deg, rgba(124,58,237,.11), rgba(139,92,246,.02));
  border: 1px solid rgba(124,58,237,.18);
}
/* Trang trí "có hồn" — 2 khối mờ (blob) ở góc + lưới chấm nhạt phủ mờ dần ra rìa, cùng ngôn ngữ
   hình ảnh với hero trang "Giới thiệu" (gioi-thieu.css) — chỉ trang trí, không ảnh hưởng bố cục. */
.vd-topbar::before, .vd-topbar::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(46px); pointer-events: none; z-index: 0;
}
.vd-topbar::before { width: 200px; height: 200px; background: #8b5cf6; opacity: .22; top: -110px; left: -60px; }
.vd-topbar::after  { width: 170px; height: 170px; background: var(--primary); opacity: .12; bottom: -110px; right: -40px; }
.vd-topbar-pattern {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(124,58,237,.35) 1.3px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 75% 90% at 100% 0%, black 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 90% at 100% 0%, black 0%, transparent 75%);
}
.vd-topbar-left, .vd-topbar-right { position: relative; z-index: 1; }
.vd-topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vd-topbar-icon {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(124,58,237,.35);
}
.vd-topbar-icon svg { width: 23px; height: 23px; }
.vd-topbar-title { font-size: 22px; font-weight: 800; color: var(--text); margin: 0 0 3px; letter-spacing: -.2px; }
.vd-topbar-sub { font-size: 13.5px; color: var(--text-2); margin: 0; }
.vd-topbar-stat {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-size: 12.5px; font-weight: 800; color: var(--vd-violet);
  background: rgba(124,58,237,.12); padding: 8px 15px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.vd-topbar-stat svg { flex-shrink: 0; }
.vd-topbar-stat:empty { display: none; }

.vd-topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
/* Màn hình hẹp: .vd-topbar-right đã tự xuống dòng riêng (do .vd-topbar-left không đủ chỗ chung
   hàng), nhưng mặc định nó vẫn co theo TỔNG bề rộng nội dung bên trong (nút + chip cộng lại rộng
   hơn màn hình) thay vì theo bề rộng dòng đang có — khiến chip bị tràn ra ngoài viewport thay vì
   tự xuống dòng tiếp (lỗi thấy trên Samsung Galaxy S8+, 360px). Ép basis 100% để nó nhận đúng bề
   rộng dòng thật, nhờ đó flex-wrap bên trong mới tự đẩy chip xuống dòng khi không đủ chỗ. */
@media (max-width: 560px) {
  .vd-topbar-right { flex: 1 1 100%; }
}

/* Nút mở modal "tổng quan" — cho thấy toàn bộ tiêu đề/tên video ngay 1 màn hình, không phải bấm
   xổ từng tiêu đề trong sidebar mới thấy hết được lựa chọn. */
.vd-overview-btn {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 10px 17px; border-radius: var(--radius-pill); border: 1.5px solid rgba(124,58,237,.3);
  background: var(--bg-card); color: var(--text); font-family: inherit; font-weight: 700; font-size: 13px;
  cursor: pointer; box-shadow: var(--shadow-sm); transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.vd-overview-btn svg { flex-shrink: 0; color: var(--primary); }
.vd-overview-btn:hover { background: var(--primary-light); border-color: var(--primary); }
.vd-overview-btn:active { transform: scale(.97); }

/* Chuyển đổi "Video dài / Video ngắn" — cho thấy rõ có 2 kênh nội dung, bấm là nhảy trang ngay. */
.vd-toggle { display: inline-flex; background: var(--bg-hover); border-radius: var(--radius-pill); padding: 3px; gap: 2px; flex-shrink: 0; }
.vd-toggle-opt {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 700; color: var(--text-2); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.vd-toggle-opt:hover { color: var(--text); }
.vd-toggle-opt.is-active { background: var(--bg-card); color: var(--primary); box-shadow: var(--shadow-sm); }

.vd-layout {
  display: flex;
  align-items: flex-start;
  gap: 26px;
}
.vd-sidebar    { flex: 0 0 400px; min-width: 0; }
.vd-player-col { flex: 1 1 auto; min-width: 0; }
.vd-player-wrap { position: relative; }
@media (max-width: 900px) {
  /* Chọn video ở mobile tự cuộn tới đây (xem selectItem() trong video.js) — chừa khoảng trống
     phía trên bằng đúng chiều cao thanh nav cố định để video không bị dính sát mép/khuất sau nav. */
  .vd-player-wrap { scroll-margin-top: calc(var(--nav-h, 60px) + 12px); }
}
@media (max-width: 1100px) {
  .vd-sidebar { flex-basis: 340px; }
}
@media (max-width: 900px) {
  .vd-layout { flex-direction: column; gap: 18px; }
  .vd-sidebar { flex: none; width: 100%; }
  .vd-player-col { width: 100%; }
}

/* Quầng sáng mềm phía sau khung video — tạo chiều sâu, cảm giác "rạp chiếu phim" nhẹ nhàng,
   không phô trương. Chỉ trang trí, không ảnh hưởng layout (pointer-events none). Gắn vào
   .vd-player-wrap (video + tên video) chứ không phải .vd-player-col — để không bị kéo dài xuống
   phủ cả khối bình luận bên dưới khi khối đó dài ra. */
.vd-player-wrap::before {
  content: ''; position: absolute; inset: -8% -6%; z-index: -1;
  background: radial-gradient(55% 55% at 50% 38%, rgba(29,111,242,.18), transparent 72%);
  filter: blur(36px); pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR — danh sách tiêu đề / mục con
   ═══════════════════════════════════════════════════════════ */
.vd-cat-list {
  /* Chiều cao được video.js set thẳng bằng JS (khớp đúng chiều cao khung video + tên video bên
     phải, đo bằng ResizeObserver) — đáng tin cậy hơn hẳn CSS stretch/percentage vì không phụ
     thuộc thứ tự tính toán layout của trình duyệt. Nhiều tiêu đề hơn mức vừa thì cuộn bên trong. */
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
@media (min-width: 901px) {
  .vd-cat-list { position: sticky; top: calc(var(--nav-h, 60px) + 16px); overflow-y: auto; }
}

.vd-loading, .vd-empty-state {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 40px 20px; text-align: center;
}
.vd-empty-state svg { color: var(--text-2); opacity: .45; }
.vd-loading p, .vd-empty-state p { font-size: 14px; color: var(--text-2); margin: 0; max-width: 280px; line-height: 1.5; }

/* ── Khung xương lúc tải (thay chữ "Đang tải...") — đúng hình dạng nội dung thật sắp hiện ra, cảm
   giác mượt/chuyên nghiệp hơn hẳn 1 dòng chữ trơ trọi. renderSidebar()/renderPlayer() tự ghi đè
   innerHTML khi dữ liệu về, không cần JS dọn riêng. ── */
@keyframes vdShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.vd-skel-cat, .vd-skel-player, .vd-skel-line {
  background: linear-gradient(90deg, var(--bg-hover) 25%, var(--border) 37%, var(--bg-hover) 63%);
  background-size: 400% 100%; animation: vdShimmer 1.4s ease infinite; border-radius: 10px;
}
.vd-skel-cat { height: 58px; margin: 12px 14px; }
.vd-skel-player { position: absolute; inset: 0; border-radius: var(--radius); }
.vd-skel-line { height: 14px; border-radius: 6px; margin: 8px 2px; }
.vd-skel-line-sm { width: 90px; height: 11px; }
.vd-skel-line-lg { width: 65%; height: 20px; }

.vd-cat { border-bottom: 1px solid var(--border); }
.vd-cat:last-child { border-bottom: none; }

.vd-cat-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 17px 20px; background: none; border: none; cursor: pointer; font-family: inherit;
  text-align: left; -webkit-tap-highlight-color: transparent;
}
.vd-cat-header:hover { background: var(--bg-hover); }
/* Tiêu đề đang mở neo lại trên đầu khi cuộn qua danh sách mục con dài — luôn biết đang xem mục
   con của tiêu đề nào, không bị cuộn mất lên trên. Nhiều tiêu đề cùng mở thì tự xếp chồng theo
   thứ tự cuộn (hành vi mặc định của sticky, không cần tính toán gì thêm). */
.vd-cat.is-open .vd-cat-header {
  position: sticky; top: 0; z-index: 2; background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.vd-cat { --vd-tone: var(--primary); }
.vd-cat-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Vạch màu riêng từng tiêu đề (VD_TONES trong video.js) — nhìn là phân biệt được các chủ đề. */
.vd-cat-title-row::before {
  content: ''; flex-shrink: 0; width: 4px; height: 20px; border-radius: 4px; background: var(--vd-tone);
}
.vd-cat-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.35; }
.vd-cat-count {
  font-size: 12px; font-weight: 700; color: var(--vd-tone);
  background: color-mix(in srgb, var(--vd-tone) 13%, transparent);
  border-radius: var(--radius-pill); padding: 3px 9px; flex-shrink: 0;
}
/* Bọc mũi tên trong khối tròn có nền — tín hiệu rõ ràng "đây là nút bấm để xổ ra danh sách",
   thay vì chỉ 1 icon mảnh dễ bị bỏ qua khi tiêu đề đang đóng gọn. */
.vd-cat-chevron {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%; background: var(--bg-hover); color: var(--text-2);
  transition: transform .2s ease, background .15s ease, color .15s ease;
}
.vd-cat-header:hover .vd-cat-chevron { background: color-mix(in srgb, var(--vd-tone) 14%, transparent); color: var(--vd-tone); }
.vd-cat.is-open .vd-cat-chevron { transform: rotate(180deg); background: color-mix(in srgb, var(--vd-tone) 14%, transparent); color: var(--vd-tone); }

.vd-item-list { display: none; padding: 0 10px 12px; }
.vd-cat.is-open .vd-item-list { display: block; }

.vd-item-btn {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 14px; border: none; background: none; border-radius: var(--radius-sm);
  cursor: pointer; font-family: inherit; color: var(--text-2); font-size: 14.5px; line-height: 1.4;
  transition: background .15s, color .15s, transform .15s;
}
.vd-item-btn:hover { background: var(--bg-hover); color: var(--text); transform: translateX(2px); }
.vd-item-btn.is-active {
  background: color-mix(in srgb, var(--vd-tone) 12%, transparent); color: var(--vd-tone); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--vd-tone);
}
/* Thumbnail thật (ảnh bìa YouTube) thay icon clip đơn điệu — dễ nhận diện video hơn khi lướt danh
   sách. Video khoá không có ảnh bìa (server đã xoá trắng youtubeUrl, xem video.js) nên rơi vào
   nhánh fallback hiện icon ổ khoá trên nền trơn, không suy ra được ID video từ ảnh. */
.vd-item-thumb {
  width: 80px; height: 45px; border-radius: 8px; flex-shrink: 0; position: relative;
  box-shadow: 0 1px 3px rgba(15,23,42,.18);
  background-size: cover; background-position: center; background-color: var(--bg-hover);
}
.vd-item-thumb-fallback { display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.vd-item-btn.is-active .vd-item-thumb-fallback { color: var(--vd-tone); }
.vd-item-title-text {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.vd-item-btn { padding-top: 9px; padding-bottom: 9px; }
/* "5 mốc" — video có mốc thời gian nhảy nhanh tới từng câu */
.vd-item-chap {
  position: absolute; left: 3px; top: 3px; padding: 1px 5px; border-radius: 4px;
  background: rgba(15,23,42,.78); color: #fff; font-size: 9.5px; font-weight: 800; line-height: 1.4;
}
/* Video khoá — vẫn bấm được (để thấy khối mời mua), chỉ khác biệt bằng icon ổ khoá + chữ hơi mờ
   đi, không disable hẳn (disable trông như hỏng, mất luôn cơ hội mời mua). */
.vd-item-btn.is-locked { color: var(--text-3); }
.vd-item-btn.is-locked.is-active { background: var(--bg-hover); color: var(--text-2); }
.vd-item-btn.is-locked.is-active .vd-item-thumb-fallback { color: var(--text-2); }

/* Chấm "đang phát" nhấp nháy nhẹ trên mục con đang chọn — giống chỉ báo "Now playing" của các
   nền tảng nghe/xem, giúp nhận ra ngay đang ở đâu trong danh sách mà không cần đọc lại tiêu đề. */
.vd-item-btn.is-active::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--vd-tone);
  margin-left: auto; flex-shrink: 0; animation: vdPulse 1.6s ease-in-out infinite;
}
@keyframes vdPulse { 0%, 100% { opacity: .35; transform: scale(.75); } 50% { opacity: 1; transform: scale(1); } }

/* ═══════════════════════════════════════════════════════════
   PLAYER
   ═══════════════════════════════════════════════════════════ */
.vd-player {
  position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0f172a;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
}
.vd-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; animation: vdFadeIn .3s ease; }

.vd-player-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; border: none; padding: 0;
  background-size: cover; background-position: center; background-color: #0f172a;
  display: flex; align-items: center; justify-content: center; animation: vdFadeIn .3s ease;
}
.vd-player-poster::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 100%);
}
@keyframes vdFadeIn { from { opacity: 0; } to { opacity: 1; } }

.vd-player-play {
  position: relative; z-index: 1; width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.35); transition: transform .18s ease, background .18s ease;
}
.vd-player-poster:hover .vd-player-play { transform: scale(1.08); background: #fff; }
.vd-player-play svg { color: var(--primary); margin-left: 4px; }

/* ═══════════════════════════════════════════════════════════
   THANH ĐIỀU KHIỂN VIDEO TỰ VẼ — áp dụng cùng ngôn ngữ thiết kế với thanh audio-player của Luyện
   đề (.ap-play/.ap-rewind/.ap-time/.ap-speed-*, xem exams/style.css) cho video YouTube: nút play
   tròn gradient, tua lùi/tới 5 giây, thanh tiến độ, đồng hồ giờ, âm lượng, chọn tốc độ, phóng to
   toàn màn hình. Đè tuyệt đối lên đáy khung video (thay hẳn UI mặc định của YouTube — controls:0
   trong video.js) thay vì nằm rời bên dưới, giữ cảm giác "1 khung phim" gọn gàng.
   Bố cục 2 HÀNG (không nhồi 1 hàng ngang) — hàng trên là tiến độ + giờ (rộng hết cỡ, dễ kéo/bấm),
   hàng dưới chia 2 cụm: trái (tua lùi 5s / play-pause / tua tới 5s), phải (âm lượng / tốc độ /
   phóng to) — đủ chỗ cho trọn bộ nút mà không bị chật, giống bố cục trình phát video chuyên
   nghiệp (Vimeo...) khi có nhiều nút hơn hẳn 1 thanh audio-player đơn giản.
   ═══════════════════════════════════════════════════════════ */
.vd-controls-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
  padding: 26px 12px 10px;
  background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.45) 35%, rgba(15,23,42,.88) 100%);
  animation: vdFadeIn .25s ease;
}
.vd-cb-row { display: flex; align-items: center; gap: 10px; }
.vd-cb-row-buttons { justify-content: space-between; }
.vd-cb-group { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }

.vd-cb-play {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.35); transition: transform .12s, box-shadow .12s;
}
.vd-cb-play:hover { transform: scale(1.06); box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.vd-cb-play:active { transform: scale(.95); }

/* 2 nút tua lùi/tới 5 giây — dùng CHUNG 1 icon mũi tên cong (cbRewindSvg), nút "tới" chỉ mirror
   riêng phần icon qua CSS (scaleX(-1)) chứ không lật cả số "5" cạnh nó. */
.vd-cb-skip {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.22);
  color: #fff; cursor: pointer; transition: background .15s, border-color .15s;
}
.vd-cb-skip:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.4); }
.vd-cb-skip-icon { display: flex; line-height: 0; }
.vd-cb-skip-fwd .vd-cb-skip-icon { transform: scaleX(-1); }
.vd-cb-skip-num { font-size: 8px; font-weight: 800; line-height: 1; margin-top: 1px; }

.vd-cb-progress-wrap {
  position: relative; flex: 1 1 auto; min-width: 0; height: 22px;
  display: flex; align-items: center; cursor: pointer; touch-action: none;
}
.vd-cb-progress-track {
  position: absolute; left: 0; right: 0; top: 50%; height: 5px; transform: translateY(-50%);
  border-radius: var(--radius-pill); background: rgba(255,255,255,.28);
}
.vd-cb-progress-fill {
  position: absolute; left: 0; top: 50%; height: 5px; width: 0%; transform: translateY(-50%);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.vd-cb-progress-thumb {
  position: absolute; top: 50%; left: 0%; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transform: translate(-50%, -50%) scale(0); transition: transform .12s ease;
  pointer-events: none;
}
.vd-cb-progress-wrap:hover .vd-cb-progress-thumb,
.vd-cb-progress-wrap.is-dragging .vd-cb-progress-thumb { transform: translate(-50%, -50%) scale(1); }
.vd-cb-progress-wrap.is-dragging .vd-cb-progress-fill { transition: none; }

.vd-cb-time {
  flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.vd-cb-vol { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.vd-cb-vol-btn {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  background: transparent; color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.vd-cb-vol-btn:hover { background: rgba(255,255,255,.16); }
.vd-cb-vol-track {
  position: relative; width: 56px; height: 16px; cursor: pointer; touch-action: none;
  display: flex; align-items: center;
}
.vd-cb-vol-track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%);
  border-radius: var(--radius-pill); background: rgba(255,255,255,.28);
}
.vd-cb-vol-fill {
  position: absolute; left: 0; top: 50%; height: 4px; width: 100%; transform: translateY(-50%);
  border-radius: var(--radius-pill); background: #fff;
}

.vd-cb-speed-wrap { flex-shrink: 0; }
.vd-cb-speed-btn {
  background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.22);
  border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; padding: 5px 10px;
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s;
}
.vd-cb-speed-btn:hover, .vd-cb-speed-btn.non-default { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.4); }
/* Teleport ra document.body (giống .ap-speed-dropdown) — toạ độ tính bằng JS lúc mở
   (positionSpeedDrop() trong video.js), mở LÊN TRÊN nút (không phải xuống dưới như .ap-speed-
   dropdown) vì nút nằm sát đáy khung video, mở xuống sẽ tràn ra ngoài viewport. */
.vd-cb-speed-dropdown {
  display: none; position: fixed; background: var(--bg-card, #fff); border: 1.5px solid var(--border);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25); overflow: hidden; z-index: 1100; min-width: 60px;
}
.vd-cb-speed-dropdown.open { display: block; }
.vd-cb-speed-opt {
  display: block; width: 100%; padding: 7px 14px; background: none; border: none; text-align: center;
  font-size: 12.5px; font-weight: 500; cursor: pointer; color: var(--text); transition: background .1s;
}
.vd-cb-speed-opt:hover { background: var(--bg-hover); }
.vd-cb-speed-opt.active { color: var(--primary); font-weight: 700; }

.vd-cb-fullscreen {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px; border: none; cursor: pointer;
  background: transparent; color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.vd-cb-fullscreen:hover { background: rgba(255,255,255,.16); }

/* Toàn màn hình: .vd-player là target requestFullscreen() (trong video.js) — trình duyệt tự giãn
   nó lấp hết màn hình, bỏ aspect-ratio/border-radius để lấp kín, iframe/thanh điều khiển vốn đã
   position:absolute inset/bottom:0 nên tự phủ đúng theo kích thước mới, không cần đo lại bằng JS. */
.vd-player:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.vd-player:fullscreen .vd-controls-bar { padding-bottom: 20px; }
/* Toàn màn hình giả (iPhone không có Fullscreen API) — phủ kín viewport, video tự letterbox 16:9
   nhờ iframe YouTube; xoay ngang điện thoại là video to hết màn hình. */
.vd-player.is-pseudo-fs {
  position: fixed; inset: 0; z-index: 10000; width: 100vw; height: 100vh; height: 100dvh;
  aspect-ratio: auto; border-radius: 0; background: #000;
}
.vd-player.is-pseudo-fs .vd-controls-bar { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
html.vd-pseudo-fs-lock, html.vd-pseudo-fs-lock body { overflow: hidden; }

@media (max-width: 640px) {
  .vd-controls-bar { gap: 5px; padding: 20px 8px 8px; }
  .vd-cb-row { gap: 6px; }
  .vd-cb-group { gap: 3px; }
  .vd-cb-skip { width: 26px; height: 26px; }
  .vd-cb-play { width: 30px; height: 30px; }
  .vd-cb-vol-track { width: 0; overflow: hidden; }
  .vd-cb-vol { gap: 0; }
  .vd-cb-time { font-size: 10.5px; }
  .vd-cb-speed-btn { padding: 5px 8px; }
}

.vd-player-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; color: #94a3b8; text-align: center; padding: 20px;
}
.vd-player-empty svg { opacity: .5; }
.vd-player-empty p { font-size: 14px; margin: 0; max-width: 280px; line-height: 1.5; }

/* Video khoá (chỉ học viên đã mua mới xem) — KHÔNG có ảnh bìa thật (server xoá link, xem video.js),
   thay bằng nền chuyển màu theo tông của tiêu đề (--vd-tone, set trên #vdPlayer) + lưới chấm mờ +
   ổ khoá phát sáng nhẹ — đẹp mà không lộ gì về video. */
.vd-player-locked {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px; color: #fff;
  background:
    radial-gradient(90% 80% at 12% 8%, color-mix(in srgb, var(--vd-tone, #1d6ff2) 55%, transparent), transparent 62%),
    radial-gradient(80% 75% at 92% 100%, color-mix(in srgb, var(--vd-tone, #1d6ff2) 38%, transparent), transparent 60%),
    #0b1224;
}
.vd-player-locked::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.4px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 20%, black 85%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 20%, black 85%);
}
.vd-player-locked > * { position: relative; z-index: 1; }
.vd-player-locked-icon {
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(255,192,0,.12); border: 1.5px solid rgba(255,192,0,.4);
  display: flex; align-items: center; justify-content: center; color: #ffc000;
  box-shadow: 0 0 0 10px rgba(255,192,0,.06), 0 0 42px rgba(255,192,0,.35);
  animation: vdLockGlow 2.8s ease-in-out infinite;
}
.vd-player-locked-icon svg { width: 28px; height: 28px; }
@keyframes vdLockGlow {
  0%, 100% { box-shadow: 0 0 0 10px rgba(255,192,0,.06), 0 0 32px rgba(255,192,0,.25); }
  50%      { box-shadow: 0 0 0 14px rgba(255,192,0,.09), 0 0 52px rgba(255,192,0,.45); }
}
@media (prefers-reduced-motion: reduce) { .vd-player-locked-icon { animation: none; } }
/* Tiêu đề + nút "Xem gói học" nằm chung 1 hàng — chỉ tự xuống dòng khi khung quá hẹp
   (mobile), không cố ép chung 1 hàng bằng mọi giá gây tràn chữ. */
.vd-player-locked-row {
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; max-width: 440px;
}
.vd-player-locked-title { font-size: 16px; font-weight: 800; margin: 0; }
.vd-player-locked-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px;
  background: var(--primary); color: #fff; border-radius: var(--radius-pill); font-weight: 800; font-size: 14px;
  text-decoration: none; transition: transform .15s ease, background .15s ease;
}
.vd-player-locked-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.vd-player-locked-btn { box-shadow: 0 6px 18px rgba(0,0,0,.35); }

.vd-player-info { padding: 16px 2px 0; }
.vd-player-cat   { font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--primary); margin-bottom: 5px; }
.vd-player-title { font-size: 23px; font-weight: 800; color: var(--text); line-height: 1.3; margin: 0 0 7px; }
.vd-player-note  { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin: 0; }

/* Mốc thời gian (chapters) trong video — hàng chip cuộn ngang, bấm nhảy nhanh tới từng câu/phân
   cảnh (mượt qua YouTube Player API, xem video.js). Mốc đang phát tự bôi sáng theo thời gian
   thực. Chỉ hiện khi mục con đang chọn có khai mốc (admin.html > tab "Video xem thử"). */
.vd-chapters {
  display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 4px; margin: 0;
  scrollbar-width: thin;
}
.vd-chapters[hidden] { display: none; }
.vd-chapter-chip {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 7px 13px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg-card);
  cursor: pointer; font-family: inherit; text-align: left; transition: background .15s, border-color .15s;
}
.vd-chapter-chip:hover { background: var(--bg-hover); }
.vd-chapter-chip.is-active { background: var(--primary); border-color: var(--primary); }
.vd-chapter-time  { font-size: 10.5px; font-weight: 800; color: var(--primary); }
.vd-chapter-label { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.vd-chapter-chip.is-active .vd-chapter-time,
.vd-chapter-chip.is-active .vd-chapter-label { color: #fff; }

/* "Xem tiếp theo" — hiện đè lên khung video khi video kết thúc, gợi ý video KẾ trong cùng tiêu đề
   (video.js: findNextItem/showNextUp — hết tiêu đề thì gợi ý sang tiêu đề kế). Không tự đếm ngược/tự chuyển — người xem chủ động
   bấm mới sang video khác, tránh cảm giác bị ép. Chèn trực tiếp vào #vdPlayer (position:relative
   sẵn có) nên không cần thêm markup tĩnh trong HTML — tự dọn khi renderPlayer() ghi đè lần sau. */
.vd-nextup {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.86); backdrop-filter: blur(2px); animation: vdFadeIn .25s ease;
}
.vd-nextup-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; max-width: 320px; text-align: center; }
.vd-nextup-label { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #ffc000; }
.vd-nextup-thumb {
  width: 190px; max-width: 70vw; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; position: relative;
  border: none; padding: 0; cursor: pointer; background-size: cover; background-position: center; background-color: #1e293b;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.vd-nextup-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.28); color: #fff; transition: background .15s;
}
.vd-nextup-thumb:hover .vd-nextup-play { background: rgba(0,0,0,.15); }
.vd-nextup-title { font-size: 14.5px; font-weight: 800; color: #fff; line-height: 1.35; margin: 0; }
.vd-nextup-actions { display: flex; gap: 10px; }
.vd-nextup-btn, .vd-nextup-dismiss {
  padding: 9px 18px; border-radius: var(--radius-pill); font-weight: 800; font-size: 13px; cursor: pointer; font-family: inherit;
}
.vd-nextup-btn { border: none; background: var(--primary); color: #fff; }
.vd-nextup-btn:hover { background: var(--primary-dark); }
.vd-nextup-dismiss { border: 1.5px solid rgba(255,255,255,.3); background: transparent; color: #fff; }
.vd-nextup-dismiss:hover { background: rgba(255,255,255,.1); }

/* ═══════════════════════════════════════════════════════════
   MODAL "TỔNG QUAN" — toàn bộ tiêu đề + tên video trong 1 màn hình (bấm nút "Xem tất cả video"
   ở topbar), có ô tìm nhanh — giúp lướt/chọn video ưng ý mà không phải bấm xổ từng tiêu đề trong
   sidebar. Cùng khuôn modal với ".kh-overlay/.kh-modal" (khoa-hoc.css), đổi tiền tố "vd-ov-".
   ═══════════════════════════════════════════════════════════ */
.vd-ov-overlay {
  position: fixed; inset: 0; z-index: 10000; background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: vdOvFadeIn .2s ease;
}
.vd-ov-overlay[hidden] { display: none; }
@keyframes vdOvFadeIn { from { opacity: 0; } to { opacity: 1; } }

.vd-ov-modal {
  display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: 82vh;
  background: var(--bg-card); border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: vdOvPopIn .25s cubic-bezier(.34,1.56,.64,1); overflow: hidden;
}
@keyframes vdOvPopIn { from { transform: translateY(20px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.vd-ov-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 20px 22px 14px; flex-shrink: 0;
}
.vd-ov-title { font-size: 19px; font-weight: 800; color: var(--text); margin: 0; letter-spacing: -.2px; }
.vd-ov-sub { font-size: 12.5px; color: var(--text-2); margin: 5px 0 0; }
.vd-ov-close {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--bg-hover); color: var(--text-2); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, color .15s;
}
.vd-ov-close:hover { background: var(--primary-light); color: var(--primary); }

.vd-ov-search {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0; margin: 0 22px 16px; padding: 10px 15px;
  background: var(--bg-hover); border: 1.5px solid var(--border); border-radius: var(--radius-pill);
}
.vd-ov-search svg { flex-shrink: 0; color: var(--text-3); }
.vd-ov-search input {
  flex: 1 1 auto; min-width: 0; border: none; background: none; outline: none; color: var(--text);
  font-family: inherit; font-size: 14px;
}
.vd-ov-search input::placeholder { color: var(--text-3); }

.vd-ov-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 22px 22px; scrollbar-width: thin; }

.vd-ov-section { margin-bottom: 26px; }
.vd-ov-section:last-child { margin-bottom: 0; }
/* Tiêu đề nhóm — chữ đủ lớn/đậm, màu chữ chính (không mờ) + gạch màu bên trái để tách rõ từng
   nhóm khi lướt nhanh, thay vì chữ nhỏ viết hoa mờ nhạt trước đây (khó đọc, không nổi bật). */
.vd-ov-section-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 800; color: var(--text);
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1.5px solid var(--border);
}
.vd-ov-section-bar { width: 5px; height: 18px; border-radius: 3px; background: var(--primary); flex-shrink: 0; }
.vd-ov-section-title span:not(.vd-ov-section-bar):not(.vd-ov-section-count) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-ov-section-count {
  font-size: 12px; font-weight: 700; color: var(--text-2); background: var(--bg-hover);
  border-radius: var(--radius-pill); padding: 3px 10px; flex-shrink: 0;
}

/* Danh sách chữ (KHÔNG ảnh bìa) — mục đích modal này là liệt kê được THẬT NHIỀU tên video cùng
   lúc để học viên dễ chọn, ảnh bìa chiếm chỗ làm ít video vừa màn hình hơn hẳn. 2-3 cột tuỳ bề
   rộng, tên video KHÔNG bị cắt bớt/giới hạn dòng — item tự cao theo độ dài tên, align-items:start
   để 1 item dài không kéo giãn các item ngắn cùng hàng theo (mỗi thẻ tự nhiên theo nội dung riêng). */
.vd-ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; align-items: start; }

.vd-ov-item {
  display: flex; align-items: center; gap: 11px; text-align: left; min-width: 0;
  padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg-card);
  cursor: pointer; font-family: inherit; color: var(--text);
  transition: background .15s, border-color .15s, transform .12s;
}
.vd-ov-item:hover { background: var(--bg-hover); border-color: var(--primary); transform: translateX(2px); }
.vd-ov-item.is-active { background: var(--primary-light); border-color: var(--primary); }

.vd-ov-item-icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-hover); color: var(--text-3);
}
.vd-ov-item-icon svg { width: 13px; height: 13px; }
.vd-ov-item.is-active .vd-ov-item-icon { background: var(--primary); color: #fff; }

.vd-ov-item-body { flex: 1 1 auto; min-width: 0; }
.vd-ov-item-title {
  font-size: 13.5px; font-weight: 700; line-height: 1.45; color: inherit;
  white-space: normal; overflow-wrap: break-word;
}
.vd-ov-item.is-locked { color: var(--text-3); }
.vd-ov-item.is-locked.is-active .vd-ov-item-icon { background: var(--bg-hover); color: var(--text-2); }
.vd-ov-item-now {
  display: inline-flex; align-items: center; margin-top: 5px;
  font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: var(--primary); color: #fff;
}

.vd-ov-empty { padding: 30px 10px; text-align: center; color: var(--text-3); font-size: 13.5px; }

@media (max-width: 480px) {
  .vd-ov-overlay { padding: 0; align-items: flex-end; }
  .vd-ov-modal { max-width: none; max-height: 86vh; border-radius: 20px 20px 0 0; }
}

/* ═══════════════════════════════════════════════════════════
   BÌNH LUẬN — riêng từng video (không dùng chung 1 khối cho mọi video), cùng thiết kế với
   ".bl-*" ở blog.css nhưng đổi tiền tố "vd-" cho khớp quy ước đặt tên của file này.
   ═══════════════════════════════════════════════════════════ */
.vd-comments { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.vd-comments-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 16px;
}
.vd-comments-title svg { color: var(--primary); flex-shrink: 0; }

.vd-composer { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 4px; }
.vd-composer-avatar {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--bg-hover);
  margin-top: 2px;
}
.vd-composer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-composer-avatar-sm { width: 30px; height: 30px; }
.vd-composer-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.vd-composer-input {
  width: 100%; resize: vertical; min-height: 44px; max-height: 260px; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text);
  font-family: inherit; font-size: 14px; line-height: 1.5;
}
.vd-composer-input:focus { outline: none; border-color: var(--primary); }
.vd-composer-input[readonly] { cursor: pointer; color: var(--text-3); }
.vd-composer-actions { display: flex; justify-content: flex-end; }
.vd-comment-submit {
  padding: 8px 20px; border-radius: 8px; border: none; background: var(--primary); color: #fff;
  font-weight: 700; font-size: 13.5px; cursor: pointer; transition: background .15s;
}
.vd-comment-submit:hover { background: var(--primary-dark); }
.vd-comment-submit:disabled { opacity: .6; cursor: default; }

.vd-comment-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  font-size: 13.5px; color: var(--text-3); padding: 26px 16px; margin-top: 14px;
  border: 1.5px dashed var(--border); border-radius: 12px;
}
.vd-comment-empty svg { opacity: .5; }
.vd-comment-empty p { margin: 0; }

.vd-comment-list { margin-top: 20px; display: flex; flex-direction: column; }
.vd-comment { display: flex; gap: 10px; padding: 14px 0; }
.vd-comment-list > .vd-comment + .vd-comment { border-top: 1px solid var(--border); }
.vd-comment-avatar {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--border);
}
.vd-comment-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-avatar-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--border); color: var(--text-2); font-weight: 800; font-size: 15px;
}
.vd-comment-main { flex: 1; min-width: 0; padding-top: 2px; }
.vd-comment-author { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 3px; }
/* Huy hiệu bình luận của admin (author_email khớp is_admin()) — chỉ admin mới có, để học viên
   nhận ra ngay đâu là phản hồi chính thức, khác bình luận thường. */
.vd-admin-badge {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; padding: 2px 8px 2px 6px;
  border-radius: 999px; background: var(--primary-light); color: var(--primary);
  font-size: 10.5px; font-weight: 800; letter-spacing: .2px; vertical-align: 1px;
}
/* Link trong bình luận admin — CHỈ admin mới có link bấm được, học viên khác không được gắn link. */
.vd-comment-link { color: var(--primary); font-weight: 700; text-decoration: underline; }
.vd-comment-text { font-size: 14px; color: var(--text); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.vd-comment-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.vd-comment-readmore {
  border: none; background: none; color: var(--primary); font-weight: 700; font-size: 12.5px;
  cursor: pointer; padding: 4px 0 0; display: block;
}
.vd-comment-actions { display: flex; align-items: center; gap: 18px; margin: 8px 0 0; }
.vd-like-btn, .vd-reply-btn, .vd-del-btn {
  display: flex; align-items: center; gap: 5px; border: none; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--text-2); padding: 2px 0;
}
.vd-like-btn:hover, .vd-reply-btn:hover { color: var(--primary); }
.vd-like-btn.is-liked { color: #e11d48; }
.vd-del-btn { color: #e11d48; }
.vd-del-btn:hover { color: #be123c; }

.vd-load-more-comments {
  display: block; width: 100%; margin-top: 16px; padding: 11px; border: none; border-radius: 999px;
  background: var(--primary-light); color: var(--primary); font-size: 13.5px; font-weight: 800;
  cursor: pointer; transition: background .15s;
}
.vd-load-more-comments:hover { background: var(--primary); color: #fff; }

.vd-reply-composer { margin: 12px 0 0; }
/* Trả lời thụt vào dưới bình luận gốc — 1 tầng phẳng, không lồng tiếp bên trong trả lời. */
.vd-replies {
  margin: 14px 0 0 16px; padding-left: 16px; border-left: 2px solid var(--border);
  display: flex; flex-direction: column; gap: 14px;
}
.vd-comment-reply .vd-comment-avatar { width: 30px; height: 30px; }

/* ═══════════════════════════════════════════════════════════
   ĐÃ XEM / ĐANG XEM DỞ (video.js: vdProg, lưu localStorage tts_vd_progress)
   ═══════════════════════════════════════════════════════════ */
.vd-item-thumb { overflow: hidden; }
.vd-item-done {
  position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.vd-item-done svg { width: 10px; height: 10px; }
.vd-item-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.35); }
.vd-item-prog i { display: block; height: 100%; background: #ef4444; }
.vd-item-btn.is-done:not(.is-active) .vd-item-title-text { color: var(--text-3); }
.vd-cat-count.is-complete { color: var(--success); background: var(--success-light); }
.vd-ov-item.is-done:not(.is-active) .vd-ov-item-icon { background: var(--success-light); color: var(--success); }

.vd-poster-badge {
  position: absolute; z-index: 1; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--radius-pill); background: rgba(15,23,42,.72); color: #fff;
  font-size: 12.5px; font-weight: 700; backdrop-filter: blur(4px);
}
.vd-poster-badge.is-done { background: rgba(16,185,129,.9); }
.vd-poster-prog { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.25); }
.vd-poster-prog i { display: block; height: 100%; background: #ef4444; }

.vd-resume {
  position: absolute; z-index: 2; left: 14px; top: 14px; display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 13px; border-radius: var(--radius-pill); background: rgba(15,23,42,.82); color: #fff;
  font-size: 12.5px; font-weight: 600; backdrop-filter: blur(4px);
  animation: vdFadeIn .25s ease; transition: opacity .3s ease;
}
.vd-resume.is-leaving { opacity: 0; }
.vd-resume button {
  border: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: var(--radius-pill); background: rgba(255,255,255,.18); color: #fff;
}
.vd-resume button:hover { background: rgba(255,255,255,.3); }

/* Tên chủ đề mới trong thẻ "Sang chủ đề tiếp theo" */
.vd-nextup-cat { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.75); margin-top: -6px; }

/* Nút "Luyện ngay" dưới tên video (admin gắn link riêng từng video) */
.vd-practice-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 10px 18px; border-radius: var(--radius-pill); text-decoration: none;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff;
  font-size: 14px; font-weight: 700; box-shadow: 0 4px 14px rgba(29,111,242,.28);
  transition: transform .12s ease, box-shadow .15s ease;
}
.vd-practice-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(29,111,242,.36); }
@media (max-width: 560px) {
  .vd-poster-badge, .vd-resume { left: 10px; top: 10px; font-size: 11.5px; }
}

/* ═══════════════════════════════════════════════════════════
   KHUNG CHÀO khi chưa chọn video (máy tính) — video.js welcomeHtml()
   Khung tự cao theo nội dung (tối thiểu 16:9) để khung video hẹp (màn 900–1100px) không cắt mất
   thẻ chủ đề.
   ═══════════════════════════════════════════════════════════ */
.vd-page.is-idle .vd-player { aspect-ratio: auto; }
.vd-welcome {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  display: flex; align-items: center; justify-content: center; padding: 32px 28px;
  color: #fff; animation: vdFadeIn .3s ease;
}
.vd-welcome-bg {
  position: absolute; inset: -12px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
  filter: blur(6px) saturate(1.1); opacity: .45; pointer-events: none;
}
.vd-welcome-bg span { background-size: cover; background-position: center; }
.vd-welcome::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(70% 70% at 50% 45%, rgba(11,18,36,.7), rgba(11,18,36,.94)),
    linear-gradient(180deg, rgba(124,58,237,.18), rgba(29,111,242,.12));
}
.vd-welcome-bg { z-index: 0; }
.vd-welcome::before { z-index: 0; }
.vd-welcome-inner { position: relative; z-index: 1; width: 100%; max-width: 560px; text-align: center; }
.vd-welcome-kicker {
  display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  font-size: 12px; font-weight: 700; letter-spacing: .3px; color: rgba(255,255,255,.9);
}
.vd-welcome-title { margin: 0 0 20px; font-size: 27px; font-weight: 800; line-height: 1.25; letter-spacing: -.3px; color: #fff; }
.vd-welcome-resume {
  display: flex; align-items: center; gap: 12px; margin: 0 auto 16px; max-width: 460px; width: 100%;
  padding: 10px 16px 10px 10px; border-radius: 14px; cursor: pointer; font-family: inherit; text-align: left;
  background: rgba(255,255,255,.95); border: none; color: #0f172a;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .15s ease;
}
.vd-welcome-resume:hover { transform: translateY(-2px); }
.vd-welcome-resume-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff;
}
.vd-welcome-resume-icon svg { width: 18px; height: 18px; margin-left: 2px; }
.vd-welcome-resume-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vd-welcome-resume-text small { font-size: 11.5px; font-weight: 700; color: #dc2626; }
.vd-welcome-resume-text b { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-welcome-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.vd-welcome-cat {
  --vd-tone: var(--primary);
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0;
  padding: 13px 15px; border-radius: 12px; cursor: pointer; font-family: inherit; text-align: left; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 3px 0 0 var(--vd-tone); backdrop-filter: blur(6px);
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.vd-welcome-cat:hover {
  background: color-mix(in srgb, var(--vd-tone) 30%, rgba(255,255,255,.06));
  border-color: color-mix(in srgb, var(--vd-tone) 60%, transparent); transform: translateY(-2px);
}
.vd-welcome-cat-name { max-width: 100%; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-welcome-cat-meta { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7); }
.vd-welcome-more { --vd-tone: rgba(255,255,255,.5); }
@media (max-width: 1100px) {
  .vd-welcome { padding: 24px 18px; }
  .vd-welcome-title { font-size: 22px; margin-bottom: 14px; }
}

/* ═══════════════════════════════════════════════════════════
   ĐIỆN THOẠI (≤900px) — xếp lại: video (dính đầu màn hình khi cuộn) → mốc thời gian → tên video →
   danh sách → bình luận, giống ứng dụng YouTube: vừa xem vừa lướt chọn video khác / đọc bình luận.
   display:contents bỏ 2 lớp bọc để các khối trên thành con trực tiếp của .vd-layout, nhờ đó sắp
   được thứ tự và khung video dính suốt cả trang. Chưa chọn video → ẩn hẳn khung video, chỉ còn
   danh sách (không còn ô đen trơn).
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .vd-layout { align-items: stretch; gap: 0; scroll-margin-top: calc(var(--nav-h, 60px) + 12px); }
  .vd-player-col, .vd-player-wrap { display: contents; }
  .vd-player-wrap::before { display: none; }
  .vd-player { order: 1; }
  .vd-chapters { order: 2; }
  .vd-player-info { order: 3; }
  .vd-sidebar { order: 4; margin-top: 18px; }
  .vd-comments { order: 5; }
  .vd-player:not(.is-pseudo-fs) {
    position: sticky; top: var(--nav-h, 60px); z-index: 6;
    box-shadow: 0 10px 24px rgba(15,23,42,.28);
  }
  .vd-page.is-idle .vd-player,
  .vd-page.is-idle .vd-chapters,
  .vd-page.is-idle .vd-player-info { display: none; }
  .vd-page.is-idle .vd-sidebar { margin-top: 0; }
}