/* ============================================
   06b-dock.css — Dock recommend TRONG PLAYER
   Chỉ hiện khi video PAUSE/END. Vị trí trái/phải/dưới.
   ============================================ */

/* pstage = khung video + dock. Khung video LUÔN chiếm phần chính,
   dock có kích thước cố định, neo cạnh — không bị trôi ra giữa.   */
.pstage{display:flex;gap:16px;align-items:stretch;justify-content:center;
  flex:1;width:100%;min-height:0}

/* khung video luôn giữ chỗ với tỉ lệ 16:9, không co về 0 dù chưa load */
.pframe{flex:1 1 auto;min-width:0;align-self:center;
  width:100%;max-width:1000px;aspect-ratio:16/9;position:relative}
.pframe #ytplayer,.pframe #ytplayer iframe{position:absolute;inset:0;width:100%;height:100%}

/* ---- DOCK chung — mặc định ẨN ---- */
.dock{display:none;flex:0 0 auto;background:rgba(255,255,255,.10);border-radius:20px;
  overflow:auto;-webkit-overflow-scrolling:touch;
  animation:dockIn .25s cubic-bezier(.34,1.4,.6,1)}
.dock.dock-show{display:block}
.dock.hide{display:none !important}
@keyframes dockIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dock::-webkit-scrollbar{width:6px;height:6px}
.dock::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:3px}

.dock-sec{padding:14px}
.dock-sec + .dock-sec{padding-top:0}
.dock-title{color:#fff;font-weight:700;font-size:15px;margin-bottom:10px;opacity:.95}
.dock-empty{color:#fff;opacity:.8;text-align:center;padding:30px 12px;font-weight:600}

.dock-card{display:block;width:100%;border:0;background:rgba(255,255,255,.95);
  border-radius:14px;overflow:hidden;cursor:pointer;font-family:inherit;text-align:left;
  margin-bottom:12px;box-shadow:0 3px 0 rgba(0,0,0,.18);transition:transform .12s}
.dock-card:last-child{margin-bottom:0}
.dock-card:active{transform:scale(.95)}
.dock-thumb{position:relative;aspect-ratio:16/9;background:#ccc}
.dock-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dock-dur{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.8);color:#fff;
  font-size:11px;font-weight:700;padding:2px 6px;border-radius:6px}
.dock-pbar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.25)}
.dock-pbar i{display:block;height:100%;background:#EC407A}
.dock-info{padding:8px 10px 10px}
.dock-name{font-weight:700;font-size:13px;color:#2A2438;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* =====================================================
   VỊ TRÍ DOCK — chỉ áp dụng khi màn đủ RỘNG (>=900px)
   ===================================================== */
@media(min-width:900px){
  /* dọc phải */
  .pstage[data-dpos="phai"]{flex-direction:row}
  /* dọc trái */
  .pstage[data-dpos="trai"]{flex-direction:row-reverse}
  /* cả hai: dock cột cố định 300px, cao theo khung */
  .pstage[data-dpos="phai"] .dock,
  .pstage[data-dpos="trai"] .dock{width:300px;align-self:stretch;max-height:100%}

  /* dưới: xếp dọc, dock thành dải ngang cuộn */
  .pstage[data-dpos="duoi"]{flex-direction:column}
  .pstage[data-dpos="duoi"] .pframe{flex:1 1 auto;width:100%;align-self:stretch}
  .pstage[data-dpos="duoi"] .dock{width:100%;flex:0 0 auto;max-height:200px}
  .pstage[data-dpos="duoi"] .dock-list{display:flex;gap:12px}
  .pstage[data-dpos="duoi"] .dock-card{flex:0 0 150px;margin-bottom:0}
  .pstage[data-dpos="duoi"] .dock-sec + .dock-sec{padding-top:14px}
}

/* =====================================================
   MÀN HẸP (<900px): dock LUÔN nằm dưới, dải ngang cuộn
   Bất kể cấu hình trái/phải. Khung video full ngang.
   ===================================================== */
@media(max-width:899px){
  .pstage{flex-direction:column;gap:12px}
  .pstage .pframe{flex:0 0 auto;width:100%;align-self:stretch}
  .pstage .dock{width:100%;flex:0 0 auto;max-height:180px}
  .dock-sec{padding:12px}
  .dock-sec + .dock-sec{padding-top:0}
  .pstage .dock-list{display:flex;gap:10px}
  .pstage .dock-card{flex:0 0 132px;margin-bottom:0}
}

/* khi END: dock nổi bật hơn */
.dock.dock-end{background:rgba(255,255,255,.16);box-shadow:0 0 0 3px rgba(255,255,255,.25)}