/* ============================================================
   video-lessons.css — Khóa học video
   - Trang list (video-lessons.html): card bài học giống blog
   - Trang học (video-lesson.html): layout học tuần tự kiểu Coursera
   ============================================================ */

/* ===== Hero (dùng chung tông với blog) ===== */
.vl-hero {
  color: #fff;
  padding: clamp(44px, 7vw, 72px) 0 clamp(48px, 6vw, 72px);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 320px at 80% 0%, rgba(232, 119, 46, 0.55) 0%, rgba(232, 119, 46, 0) 60%),
    linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, #40916C 100%);
}
.vl-hero .container { position: relative; z-index: 1; }
.vl-hero .badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff; padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; margin-bottom: 14px;
}
.vl-hero h1 {
  font-size: clamp(26px, 4vw, 42px); font-weight: 800;
  margin: 0 0 10px; letter-spacing: -0.02em;
}
.vl-hero p {
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(255, 255, 255, 0.9); max-width: 720px; margin: 0;
}

/* ===== List body ===== */
.vl-body { background: #fff; padding: clamp(28px, 5vw, 48px) 0 64px; }
.vl-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 24px); }
.vl-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 22px;
}
.vl-head h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 800; margin: 0; color: #0f172a; }
.vl-head .count { color: #64748b; font-size: 14px; font-weight: 600; }

.vl-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.vl-card {
  display: flex; flex-direction: column;
  border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden;
  background: #fff; cursor: pointer; text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.vl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  border-color: #c7d2fe;
}
.vl-cover {
  position: relative; aspect-ratio: 16/9; background: #0f172a;
  display: flex; align-items: center; justify-content: center;
}
.vl-cover img { width: 100%; height: 100%; object-fit: cover; }
.vl-cover .vl-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.28);
}
.vl-cover .vl-play svg { width: 56px; height: 56px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.vl-badge-count {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(15, 23, 42, 0.82); color: #fff;
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
}
.vl-card-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vl-card-body .vl-pin { color: #f59e0b; font-size: 12px; font-weight: 700; }
.vl-card-body h3 { font-size: 17px; font-weight: 700; margin: 0; color: #0f172a; line-height: 1.35; }
.vl-card-body p { font-size: 14px; color: #64748b; margin: 0; line-height: 1.5; }
.vl-card-cta {
  margin-top: auto; font-size: 14px; font-weight: 700; color: #2563eb;
  display: inline-flex; align-items: center; gap: 6px;
}

.vl-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: #94a3b8; }
.vl-empty .e { font-size: 44px; margin-bottom: 8px; }
.vl-empty .t { font-size: 18px; font-weight: 700; color: #475569; }

.vl-skeleton {
  border-radius: 16px; height: 280px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 400% 100%; animation: vl-shimmer 1.3s ease infinite;
}
@keyframes vl-shimmer { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }

/* ============================================================
   Trang HỌC (video-lesson.html) — layout Coursera
   ============================================================ */
.learn { background: #f1f5f9; min-height: 100vh; }
.learn-top {
  background: #0f172a; color: #fff; padding: 14px 0;
  position: sticky; top: 0; z-index: 30;
}
.learn-top .container {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.learn-back {
  color: #cbd5e1; text-decoration: none; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.learn-back:hover { color: #fff; }
.learn-top h1 { font-size: clamp(16px, 2.4vw, 20px); font-weight: 700; margin: 0; flex: 1; min-width: 200px; }
.learn-progress { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.learn-progress .bar { flex: 1; height: 8px; background: rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; }
.learn-progress .fill { height: 100%; width: 0%; background: linear-gradient(90deg, #22c55e, #16a34a); transition: width .35s ease; }
.learn-progress .pct { font-size: 13px; font-weight: 700; color: #e2e8f0; white-space: nowrap; }

.learn-grid {
  max-width: 1280px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 24px);
  display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 360px; align-items: start;
}
@media (max-width: 960px) { .learn-grid { grid-template-columns: 1fr; } }

/* Player */
.player-wrap {
  background: #000; border-radius: 14px; overflow: hidden;
  aspect-ratio: 16/9; position: relative;
}
.player-wrap iframe, .player-wrap #yt-player { width: 100%; height: 100%; border: 0; display: block; }
.player-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #64748b; font-size: 15px; background: #0f172a;
}

.now-playing { margin-top: 18px; background: #fff; border-radius: 14px; border: 1px solid #e2e8f0; padding: 20px 22px; }
.now-playing .np-step { font-size: 13px; font-weight: 700; color: #2563eb; text-transform: uppercase; letter-spacing: .04em; }
.now-playing h2 { font-size: clamp(18px, 2.6vw, 24px); font-weight: 800; margin: 6px 0 8px; color: #0f172a; }
.now-playing p { color: #475569; font-size: 15px; line-height: 1.6; margin: 0; }

.np-actions { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn-complete {
  border: 0; cursor: pointer; border-radius: 10px; padding: 12px 20px;
  font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, #16a34a, #22c55e);
  display: inline-flex; align-items: center; gap: 8px;
  transition: filter .15s ease, transform .1s ease;
}
.btn-complete:hover { filter: brightness(1.05); }
.btn-complete:active { transform: translateY(1px); }
.btn-complete.done { background: #e2e8f0; color: #16a34a; }
.btn-next {
  border: 1px solid #cbd5e1; background: #fff; cursor: pointer; border-radius: 10px;
  padding: 12px 18px; font-size: 15px; font-weight: 700; color: #334155;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-next:hover { background: #f8fafc; }
.btn-next:disabled { opacity: .45; cursor: not-allowed; }

/* Playlist sidebar */
.playlist {
  background: #fff; border-radius: 14px; border: 1px solid #e2e8f0;
  overflow: hidden; position: sticky; top: 80px;
}
.playlist-head { padding: 16px 18px; border-bottom: 1px solid #f1f5f9; }
.playlist-head .pl-title { font-size: 16px; font-weight: 800; color: #0f172a; margin: 0; }
.playlist-head .pl-sub { font-size: 13px; color: #64748b; margin: 4px 0 0; }
.playlist-list { max-height: 70vh; overflow-y: auto; }

.pl-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid #f1f5f9;
  cursor: pointer; transition: background .12s ease; position: relative;
}
.pl-item:hover { background: #f8fafc; }
.pl-item.active { background: #eff6ff; }
.pl-item.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #2563eb; }
.pl-item.locked { cursor: not-allowed; opacity: .6; }

.pl-state {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; margin-top: 1px;
  background: #e2e8f0; color: #64748b;
}
.pl-item.done .pl-state { background: #16a34a; color: #fff; }
.pl-item.active .pl-state { background: #2563eb; color: #fff; }
.pl-state svg { width: 15px; height: 15px; }

.pl-meta { flex: 1; min-width: 0; }
.pl-meta .pl-name { font-size: 14px; font-weight: 600; color: #1e293b; line-height: 1.4; }
.pl-item.active .pl-meta .pl-name { color: #1d4ed8; }
.pl-meta .pl-info { font-size: 12px; color: #94a3b8; margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.pl-lock { flex-shrink: 0; color: #94a3b8; margin-top: 3px; }
.pl-lock svg { width: 15px; height: 15px; }

.learn-loading, .learn-error {
  max-width: 600px; margin: 80px auto; text-align: center; color: #64748b; padding: 0 20px;
}
.learn-error .e { font-size: 48px; margin-bottom: 12px; }
.learn-error h2 { color: #334155; }