/* =========================================================
   PVS v6.2.8 - responsive watch controls + safe server dropdown
   Mobile/tablet only. Desktop keeps watch-desktop.css.
   Clean source for:
   - row 1: Chuyển / Auto / Intro left, prev/next icons right
   - row 2: server selector/dropdown
   Important: dropdown parents must stay overflow:visible.
   ========================================================= */

@media (max-width:1180px){
  body .pvs-watch-desktop .pvs-watch-player-card{
    overflow:visible!important;
  }

  body .pvs-watch-desktop .pvs-watch-controlbar{
    position:relative!important;
    z-index:30!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "toggles nav"
      "server server"!important;
    align-items:center!important;
    column-gap:8px!important;
    row-gap:7px!important;
    padding:8px!important;
    background:linear-gradient(180deg,rgba(22,30,48,.96),rgba(15,22,36,.98))!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    overflow:visible!important;
  }

  body .pvs-watch-desktop .pvs-watch-control-left{
    display:contents!important;
  }

  body .pvs-watch-desktop .pvs-watch-toggles{
    grid-area:toggles!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    justify-self:start!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    gap:4px!important;
    margin:0!important;
    overflow:hidden!important;
  }

  body .pvs-watch-desktop .pvs-watch-nav-actions{
    grid-area:nav!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    justify-self:end!important;
    width:auto!important;
    min-width:0!important;
    gap:5px!important;
    margin:0!important;
    flex:none!important;
    overflow:visible!important;
  }

  body .pvs-watch-desktop .pvs-watch-toggle{
    height:30px!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    flex:0 0 auto!important;
    padding:0 6px!important;
    border-radius:8px!important;
    font-size:0!important;
    line-height:1!important;
    display:inline-flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:3px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    background:rgba(255,255,255,.065)!important;
    border:1px solid rgba(255,255,255,.11)!important;
    color:#e7edf7!important;
    box-shadow:none!important;
  }

  body .pvs-watch-desktop .pvs-watch-toggle[data-toggle="next-episode"]::before{
    content:"Chuyển";
    font-size:10px;
    font-weight:900;
    line-height:1;
  }

  body .pvs-watch-desktop .pvs-watch-toggle[data-toggle="autoplay"]::before{
    content:"Auto";
    font-size:10px;
    font-weight:900;
    line-height:1;
  }

  body .pvs-watch-desktop .pvs-watch-toggle[data-toggle="skip-intro"]::before{
    content:"Intro";
    font-size:10px;
    font-weight:900;
    line-height:1;
  }

  body .pvs-watch-desktop .pvs-watch-toggle b{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:18px!important;
    height:14px!important;
    padding:0 3px!important;
    border-radius:4px!important;
    font-size:7px!important;
    font-weight:900!important;
    line-height:1!important;
    background:#333844!important;
    color:#cfd6e3!important;
  }

  body .pvs-watch-desktop .pvs-watch-toggle.is-on b{
    background:#08753a!important;
    color:#fff!important;
  }

  body .pvs-watch-desktop .pvs-watch-nav{
    width:32px!important;
    height:30px!important;
    flex:0 0 32px!important;
    padding:0!important;
    border-radius:8px!important;
    font-size:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(255,255,255,.065)!important;
    border:1px solid rgba(255,255,255,.11)!important;
    color:#e7edf7!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }

  body .pvs-watch-desktop .pvs-watch-nav[data-watch-prev]::before{
    content:"⏮";
    font-size:14px;
    font-weight:900;
    line-height:1;
  }

  body .pvs-watch-desktop .pvs-watch-nav[data-watch-next]::before{
    content:"⏭";
    font-size:14px;
    font-weight:900;
    line-height:1;
  }

  body .pvs-watch-desktop .pvs-watch-nav:disabled{
    opacity:.38!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-switch{
    grid-area:server!important;
    position:relative!important;
    z-index:80!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    overflow:visible!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-switch-label{
    flex:0 0 auto!important;
    font-size:11px!important;
    line-height:1.2!important;
    color:#aeb8c9!important;
    white-space:nowrap!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-dropdown{
    position:relative!important;
    z-index:90!important;
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-dropdown-toggle{
    position:relative!important;
    z-index:2!important;
    height:32px!important;
    width:100%!important;
    padding:0 9px!important;
    border-radius:8px!important;
    font-size:12px!important;
    background:rgba(255,255,255,.06)!important;
    border:1px solid rgba(255,255,255,.09)!important;
    color:#eef3fb!important;
    box-shadow:none!important;
    pointer-events:auto!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-dropdown-menu{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:calc(100% + 7px)!important;
    z-index:100000!important;
    display:block!important;
    width:auto!important;
    min-width:100%!important;
    max-height:min(290px,45vh)!important;
    overflow:auto!important;
    padding:8px!important;
    border-radius:10px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    background:#171a22!important;
    box-shadow:0 20px 60px rgba(0,0,0,.50)!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-dropdown-menu[hidden]{
    display:none!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-dropdown.is-open .pvs-watch-server-dropdown-menu{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }


  body .pvs-watch-desktop .pvs-watch-source-option{
    width:100%!important;
    border:0!important;
    border-radius:8px!important;
    background:transparent!important;
    color:#e6ebf5!important;
    text-align:left!important;
    padding:10px 12px!important;
    font-weight:900!important;
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
  }

  body .pvs-watch-desktop .pvs-watch-source-option:hover,
  body .pvs-watch-desktop .pvs-watch-source-option.is-active{
    background:rgba(255,255,255,.08)!important;
  }
}

/* Very small phones: keep 5 buttons on one row */
@media (max-width:374px){
  body .pvs-watch-desktop .pvs-watch-controlbar{
    column-gap:5px!important;
    padding:7px!important;
  }

  body .pvs-watch-desktop .pvs-watch-toggles{
    gap:3px!important;
  }

  body .pvs-watch-desktop .pvs-watch-toggle{
    height:28px!important;
    padding:0 4px!important;
    gap:2px!important;
  }

  body .pvs-watch-desktop .pvs-watch-toggle[data-toggle="next-episode"]::before,
  body .pvs-watch-desktop .pvs-watch-toggle[data-toggle="autoplay"]::before,
  body .pvs-watch-desktop .pvs-watch-toggle[data-toggle="skip-intro"]::before{
    font-size:9px!important;
  }

  body .pvs-watch-desktop .pvs-watch-toggle b{
    min-width:16px!important;
    height:13px!important;
    font-size:6.5px!important;
    padding:0 2px!important;
  }

  body .pvs-watch-desktop .pvs-watch-nav-actions{
    gap:3px!important;
  }

  body .pvs-watch-desktop .pvs-watch-nav{
    width:29px!important;
    height:28px!important;
    flex-basis:29px!important;
  }

  body .pvs-watch-desktop .pvs-watch-nav[data-watch-prev]::before,
  body .pvs-watch-desktop .pvs-watch-nav[data-watch-next]::before{
    font-size:13px!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-switch-label{
    font-size:10px!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-dropdown-toggle{
    height:30px!important;
    font-size:11px!important;
  }
}

/* Phone landscape: do not stretch buttons or server selector */
@media (max-width:1180px) and (orientation:landscape){
  body .pvs-watch-desktop .pvs-watch-controlbar{
    padding:7px 9px!important;
    row-gap:6px!important;
  }

  body .pvs-watch-desktop .pvs-watch-toggle{
    height:28px!important;
    padding:0 7px!important;
  }

  body .pvs-watch-desktop .pvs-watch-nav{
    height:28px!important;
    width:32px!important;
    flex-basis:32px!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-switch{
    width:auto!important;
    justify-self:start!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-dropdown{
    flex:0 0 240px!important;
    max-width:56vw!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-dropdown-toggle{
    height:30px!important;
  }
}

/* iPad / tablet portrait: bigger and balanced */
@media (min-width:768px) and (max-width:1180px) and (orientation:portrait){
  body .pvs-watch-desktop .pvs-watch-controlbar{
    padding:11px 12px!important;
    column-gap:14px!important;
    row-gap:9px!important;
  }

  body .pvs-watch-desktop .pvs-watch-toggles{
    gap:8px!important;
  }

  body .pvs-watch-desktop .pvs-watch-toggle{
    height:40px!important;
    padding:0 12px!important;
    border-radius:10px!important;
    gap:6px!important;
  }

  body .pvs-watch-desktop .pvs-watch-toggle[data-toggle="next-episode"]::before,
  body .pvs-watch-desktop .pvs-watch-toggle[data-toggle="autoplay"]::before,
  body .pvs-watch-desktop .pvs-watch-toggle[data-toggle="skip-intro"]::before{
    font-size:13px!important;
  }

  body .pvs-watch-desktop .pvs-watch-toggle b{
    min-width:24px!important;
    height:18px!important;
    font-size:9px!important;
    border-radius:5px!important;
  }

  body .pvs-watch-desktop .pvs-watch-nav-actions{
    gap:8px!important;
  }

  body .pvs-watch-desktop .pvs-watch-nav{
    width:42px!important;
    height:40px!important;
    flex-basis:42px!important;
    border-radius:10px!important;
  }

  body .pvs-watch-desktop .pvs-watch-nav[data-watch-prev]::before,
  body .pvs-watch-desktop .pvs-watch-nav[data-watch-next]::before{
    font-size:18px!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-switch{
    width:auto!important;
    justify-self:start!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-switch-label{
    font-size:13px!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-dropdown{
    flex:0 0 310px!important;
    max-width:52vw!important;
  }

  body .pvs-watch-desktop .pvs-watch-server-dropdown-toggle{
    height:38px!important;
    font-size:13px!important;
    border-radius:10px!important;
  }
}