/* =========================
   YT LearnAlong — Clean CSS (full)
   ========================= */

/* ==== Base (container 100%) ==== */
.ytla-embed{
  --ytla-ratio:56.25%;
  --ytla-accent:var(--global-palette4,#1976d2);
  --ytla-muted:var(--global-palette6,#667085);
  --ytla-soft:var(--global-palette8,#f5f7fb);
  --ytla-soft-2:rgba(25,118,210,.08);
  --ytla-font:var(--global-font-family,inherit);

  width:100%;
  max-width:none;
  margin:var(--global-md-spacing,1rem) 0;
  border:1px solid var(--global-gray-400,#ddd);
  border-radius:8px;
  background:#fff;
  position:relative;
  font-family:var(--ytla-font);
}
.ytla-embed.align-left{margin-left:0;margin-right:auto}
.ytla-embed.align-center{margin-left:auto;margin-right:auto}
.ytla-embed.align-right{margin-left:0;margin-right:0}
.ytla-embed.is-empty{padding:12px;font-style:italic;color:#666;background:#fafafa;border:1px dashed var(--global-gray-400,#ddd)}

/* ==== Player (intrinsic ratio) ==== */
.ytla-embed-player{position:relative;width:100%;background:#000}
.ytla-spacer{display:block;padding-bottom:var(--ytla-ratio,56.25%);min-height:120px}
.ytla-embed-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;display:block}

/* ==== Layout ==== */
.ytla-embed-content{display:block;gap:16px}

/* Side-by-side: 50/50 */
.ytla-embed-content.layout-side{display:flex;align-items:flex-start;gap:16px}
.ytla-embed-content.layout-side .ytla-embed-player,
.ytla-embed-content.layout-side .ytla-transcript-panel{flex:0 0 50%;max-width:50%;min-width:0}

/* Stacked (below) */
.ytla-embed-content.layout-below{display:block}
.ytla-embed-content.layout-below .ytla-embed-player,
.ytla-embed-content.layout-below .ytla-transcript-panel{width:100%}

/* Desktop/tablet “to vừa” khi layout-below */
@media (min-width:601px){
  .ytla-embed-content.layout-below .ytla-embed-player,
  .ytla-embed-content.layout-below .ytla-transcript-panel{
    max-width:clamp(560px,70vw,900px);
    margin-left:auto;margin-right:auto;
  }
}

/* Mobile: luôn xếp dọc */
@media (max-width:600px){
  .ytla-embed-content.layout-side{display:block}
  .ytla-embed-content.layout-side .ytla-embed-player,
  .ytla-embed-content.layout-side .ytla-transcript-panel{max-width:100%;flex:0 0 auto}
  .ytla-embed-content.layout-below .ytla-embed-player,
  .ytla-embed-content.layout-below .ytla-transcript-panel{max-width:100%}
}

/* ==== Transcript panel & body (≈70vh) ==== */
.ytla-transcript-panel{
  border-left:1px solid var(--global-gray-400,#eee);
  background:#fff;
  border-radius:8px;
}
.ytla-embed-content.layout-below .ytla-transcript-panel{
  margin-top:10px;border-left:none;border-top:1px solid var(--global-gray-400,#eee)
}
.ytla-transcript-body{
  overflow:auto;
  padding:8px 6px;
  max-height:70vh;
  scroll-padding-top:72px; /* JS có thể override tuỳ banner */
  font-size:1.1rem;        /* đọc dễ hơn */
}

/* Sticky cho banner “Chế độ nhấp dòng” trong transcript */
.ytla-transcript-body .ytla-trans-controls{
  position:sticky;top:0;z-index:3;background:#fff
}

/* ==== Cues (typography, states, numbering) ==== */
.ytla-cue{padding:2px}
.ytla-cue .ytla-cue-btn{
  display:grid;
  grid-template-columns:2.4ch 1fr auto; /* num | text | timecode */
  column-gap:12px;row-gap:3px;align-items:start;width:100%;
  padding:8px 10px;border-radius:6px;border:1px solid transparent;background:#fff;
  cursor:pointer;text-align:left;
  font-size:1.1rem;line-height:1.7;color:var(--global-palette4,#2b2f38);
  transition:background .12s ease,border-color .12s ease,box-shadow .12s ease;
  white-space:normal;word-break:break-word;hyphens:auto
}
.ytla-cue .ytla-cue-btn:focus{outline:2px solid var(--ytla-accent);outline-offset:2px}
.ytla-cue .ytla-cue-btn:hover{background:var(--ytla-soft,#f7faff);border-color:var(--ytla-soft-2)}
.ytla-cue.active .ytla-cue-btn{background:var(--ytla-soft,#f5f9ff);border-color:var(--ytla-soft-2);box-shadow:inset 2px 0 0 var(--ytla-accent)}

.ytla-cue .ytla-cue-btn .num{
  grid-column:1;grid-row:1 / span 2;
  min-width:2.2ch;text-align:right;font-variant-numeric:tabular-nums;
  opacity:.66;color:var(--ytla-muted);font-size:.8em;line-height:1.4;margin-right:0
}
.ytla-cue .txt{
  grid-column:2;grid-row:1;margin-right:0;
  white-space:pre-wrap;overflow-wrap:anywhere
}
.ytla-cue .tc{
  grid-column:3;grid-row:1;justify-self:end;
  opacity:.66;font-size:.9em;white-space:nowrap;color:var(--ytla-muted)
}
.ytla-cue .vi{
  grid-column:2;grid-row:2;display:none;margin-top:2px;
  font-size:.9em;color:var(--ytla-muted);white-space:pre-wrap
}
.ytla-transcript-body.vi-on .vi{display:block}

/* Mobile: cỡ chữ lớn hơn chút */
@media (max-width:600px){
  .ytla-transcript-body{font-size:1.2rem}
  .ytla-cue .ytla-cue-btn{font-size:1.2rem;line-height:1.75}
}

/* Auto-scroll hỗ trợ sticky banner */
.ytla-cues{scroll-margin-top:12px}

/* ==== Player column & (subtitle) banner dưới video ==== */
.ytla-player-col{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%
}
.ytla-embed-content.layout-side .ytla-player-col{flex:0 0 50%;max-width:50%;min-width:0}
.ytla-embed-content.layout-below .ytla-player-col{width:100%;max-width:100%}

.ytla-player-controls-below{
  margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:8px 10px;background:#fff;
  border:1px solid rgba(0,0,0,.08);border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.04);
  font-size:12px;width:100%;max-width:100%;align-self:stretch
}
.ytla-player-controls-below .ui-band__inner{width:100%}
.ytla-player-controls-below select{
  font-size:12px;padding:4px 6px;border-radius:6px;border:1px solid rgba(0,0,0,.2);background:#fff
}

/* Mobile banner compact */
@media (max-width:600px){
  .ytla-player-controls-below{gap:8px;padding:6px 8px;font-size:11px}
  .ytla-player-controls-below select{font-size:11px;padding:4px 6px}
}

/* ==== Shared mini UI primitives ==== */
.ui-band{
  background:#fff;border:1px solid rgba(0,0,0,.06);
  border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.ui-band__inner{display:flex;align-items:center;gap:12px;padding:8px 10px;font-size:13px;color:#333}
.ui-select{display:inline-flex;align-items:center;gap:6px}
.ui-select select{font:inherit;font-size:12px;padding:6px 8px;border-radius:8px;border:1px solid rgba(0,0,0,.15);background:#fff}
.ui-select select:focus{outline:2px solid var(--ytla-accent,#1976d2);outline-offset:2px}
.ui-sep{flex:0 0 1px;align-self:stretch;background:rgba(0,0,0,.08);margin:0 8px}
.ui-switch{position:relative;display:inline-flex;align-items:center;gap:10px}
.ui-switch input{position:absolute;opacity:0;pointer-events:none}
.ui-switch span{position:relative;display:inline-flex;align-items:center;gap:8px;padding-left:46px}
.ui-switch span::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:34px;height:18px;border-radius:999px;background:#e5e7eb;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)
}
.ui-switch span::after{
  content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .2s ease
}
.ui-switch input:checked + span::before{background:var(--ytla-accent,#1976d2)}
.ui-switch input:checked + span::after{transform:translate(18px,-50%)}

/* ==== Mobile stacking safety ==== */
@media (max-width:900px){
  .ytla-embed-content.layout-side{display:block !important}
  .ytla-player-col,.ytla-transcript-panel{max-width:100% !important;width:100% !important}
  .ytla-embed-player{width:100% !important}
}

/* ==== Disable text selection in control panels ==== */
.ytla-player-controls-below,
.ytla-player-controls-below .ui-band__inner,
.ytla-player-controls-below .ui-select > span,
.ytla-player-controls-below .ui-switch > span,
.ytla-player-controls-below .ytla-time,
.ytla-trans-controls,
.ytla-trans-controls .ui-band__inner,
.ytla-trans-controls .ui-select > span{
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none
}
.ytla-player-controls-below input,
.ytla-player-controls-below select,
.ytla-trans-controls input,
.ytla-trans-controls select{
  -webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text
}

/* =========================
   Overlay Player Controls (modern)
   ========================= */

/* Root overlay: ẩn/hiện khi hover; JS thêm .ytla-oc-out cho mobile để luôn hiện */
.ytla-oc{
  position:absolute; left:8px; right:8px; bottom:8px;
  z-index:3; pointer-events:none;
  opacity:0; transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
  display:flex; flex-wrap:nowrap;
  /* center inner panel so controls don't stretch to both video edges */
  justify-content:center;
}
.ytla-embed-player:hover .ytla-oc,
.ytla-oc.show{
  opacity:1; transform:none; pointer-events:auto;
}

/* Panel body (glassy) */
.ytla-oc-inner{
  pointer-events:auto;
  display:flex; align-items:center; gap:6px; flex-wrap:nowrap;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  padding:6px 8px;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  backdrop-filter:saturate(120%) blur(4px);
  /* keep panel compact and centered on wide screens */
  width:auto; min-width:0; max-width:min(92%,900px); margin:0 auto;
}

/* Play/Pause + fallback icon */
.ytla-oc-play{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.08);
  cursor:pointer; flex:0 0 32px;
  transition:background .15s ease, box-shadow .15s ease;
  opacity:.60; margin-right:6px; position:relative;
}
.ytla-oc-play:hover{ background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.ytla-oc-play::before{
  content:"";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:0; height:0; border-style:solid;
  border-width:8px 0 8px 12px;
  border-color:transparent transparent transparent #111;
  pointer-events:none;
}
.ytla-oc-play.is-playing::before{
  width:12px; height:12px; border:none;
  background:linear-gradient(90deg,#111 0 40%, transparent 40% 60%, #111 60% 100%);
  border-radius:1px;
}
.ytla-oc-play:focus-visible{ outline:2px solid var(--ytla-accent); outline-offset:2px; }

/* Seek wrapper + tooltip */
.ytla-oc-seekwrap{ position:relative; display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:160px; }
.ytla-oc-tip{
  position:absolute; bottom:36px; left:0;
  padding:4px 6px; font-size:11px; color:#111;
  background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  transform:translateX(-50%); pointer-events:none; opacity:0;
  white-space:nowrap; z-index:5;
}

/* Seek with layered gradients: played + buffered + base */
.ytla-oc-seek{
  --played: 0%;
  --buffered: 0%;

  flex:1 1 0; min-width:0; width:auto;
  appearance:none; height:3px; border-radius:999px; outline:none; cursor:pointer;

  /* base color is darkest, buffered is mid, played is accent (white) */
  background:
    linear-gradient(to right, rgba(255,255,255,.95) 0 var(--played), rgba(255,255,255,0) 0) 0 50% / 100% 3px no-repeat,
    linear-gradient(to right, rgba(255,255,255,.55) 0 var(--buffered), rgba(255,255,255,0) 0) 0 50% / 100% 3px no-repeat,
    rgba(0,0,0,.35);
}
.ytla-oc-seek::-webkit-slider-thumb{
  appearance:none; width:12px; height:12px; border-radius:50%;
  background:#fff; border:0; box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.ytla-oc-seek::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%;
  background:#fff; border:0; box-shadow:0 1px 3px rgba(0,0,0,.35);
}

/* Time compact bên phải */
.ytla-oc-time{
  flex:0 0 auto; min-width:66px; margin-left:6px; text-align:right; white-space:nowrap;
  font-size:12px; line-height:1; color:#222; opacity:.95; font-variant-numeric:tabular-nums;
}

/* Khi controls ra ngoài (mobile/tablet) */
.ytla-oc.ytla-oc-out{
  position:static !important;
  background:transparent !important;
  opacity:1 !important;
  pointer-events:auto !important;
  margin-top:6px;
  transform:none !important;
  padding:0 !important;
  gap:8px;
}

/* When controls are moved outside (mobile/tablet) make inner full-width */
.ytla-oc.ytla-oc-out .ytla-oc-inner{ width:100% !important; max-width:none !important; margin:0 !important; }

/* Mobile tweaks */
@media (max-width:600px){
  .ytla-oc-inner{ gap:8px; padding:7px 9px; }
  .ytla-oc-play{ width:34px; height:34px; border-radius:10px; }
  .ytla-oc-time{ font-size:12px; min-width:60px; }
}