html.shorts-reel-open,
body.shorts-reel-open{overflow:hidden!important;background:#000!important}

.shorts-detail-page{position:fixed;z-index:99999;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#000;color:#fff;opacity:1;transition:opacity .12s ease}
.shorts-detail-page.is-leaving{opacity:.82}
.shorts-detail-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.shorts-detail-reel{position:relative;width:min(440px,calc(100vw - 190px));height:min(820px,calc(100dvh - 44px));aspect-ratio:9/16;overflow:hidden;border-radius:10px;background:#000;transition:transform .18s ease,opacity .18s ease;will-change:transform,opacity;--shorts-nav-h:63px;--shorts-controls-h:50px;--plyr-color-main:#ff7900;--plyr-range-fill-background:#ff7900;--plyr-video-background:#000}
.shorts-detail-reel.is-dragging{transition:none}
.shorts-detail-reel.leave-up{transform:translate3d(0,-110%,0)!important;opacity:.45!important}
.shorts-detail-reel.leave-down{transform:translate3d(0,110%,0)!important;opacity:.45!important}

.shorts-video-wrap{position:absolute;z-index:1;inset:0;background:#000;overflow:hidden}
.shorts-video-frame,.shorts-video-native,.shorts-video-poster{width:100%;height:100%;border:0;display:block;object-fit:cover}
.shorts-video-native,.shorts-video-poster{position:absolute;inset:0}

/* Plyr phải chiếm đúng toàn bộ reel. Quan trọng: xóa ratio/padding 16:9 mặc định của embed YouTube. */
.shorts-youtube-player,
.shorts-youtube-player.plyr,
.shorts-video-wrap>.plyr,
.shorts-youtube-player .plyr__video-wrapper,
.shorts-youtube-player .plyr__video-embed,
.shorts-video-wrap>.plyr .plyr__video-wrapper,
.shorts-video-wrap>.plyr .plyr__video-embed{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;padding:0!important;margin:0!important;background:#000!important}
.shorts-youtube-player .plyr__video-embed:before,
.shorts-video-wrap>.plyr .plyr__video-embed:before{display:none!important;padding:0!important}
.shorts-youtube-player iframe,
.shorts-youtube-player .plyr__video-embed iframe,
.shorts-video-wrap>.plyr iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;transform:none!important}

.shorts-detail-gradient{position:absolute;z-index:3;inset:43% 0 0;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 14%,rgba(0,0,0,.72) 73%,rgba(0,0,0,.96) 100%);pointer-events:none}

.shorts-brand{position:absolute;z-index:50;left:11px;top:11px;width:58px;height:48px;display:grid;place-items:center;background:transparent;color:#fff;text-decoration:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.28))}
.shorts-brand img{display:block;width:100%;height:100%;object-fit:contain}
.shorts-close{position:absolute;z-index:50;right:11px;top:11px;width:47px;height:47px;border-radius:50%;display:grid;place-items:center;background:rgba(224,224,224,.86);color:#d20b0b;text-decoration:none}
.shorts-close svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}

/* Content luôn nằm trên player nhưng kết thúc trước control bar Plyr. */
.shorts-detail-content{position:absolute;z-index:35;left:14px;right:14px;bottom:calc(var(--shorts-nav-h) + var(--shorts-controls-h) + 10px);pointer-events:none}
.shorts-detail-content a,.shorts-detail-content button{pointer-events:auto}
.shorts-detail-product{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 10px;align-items:center;padding:9px;border-radius:10px;background:rgba(15,15,15,.74);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.shorts-detail-product-img{width:72px;height:72px;overflow:hidden;border-radius:8px;background:#fff;grid-row:1/span 2}
.shorts-detail-product-img img{width:100%;height:100%;display:block;object-fit:contain}
.shorts-detail-product-info{min-width:0;align-self:end}
.shorts-detail-product-name{display:block;overflow:hidden;color:#fff;text-decoration:none;font-size:16px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.shorts-detail-product-prices{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-top:4px}
.shorts-detail-product-prices span{color:#a8a8a8;text-decoration:line-through;font-size:13px}
.shorts-detail-product-prices strong{color:#ff7a00;font-size:17px}
.shorts-detail-buy{grid-column:2;justify-self:start;padding:9px 13px;border-radius:6px;background:#ff7900;color:#fff;text-decoration:none;white-space:nowrap;font-size:17px;line-height:1}
.shorts-detail-content h1{margin:13px 0 6px;font-size:20px;line-height:1.25;color:#fff;font-weight:700}
.shorts-detail-summary{font-size:15px;line-height:1.42;color:#f1f1f1}

.shorts-detail-bottom{position:absolute;z-index:60;left:0;right:0;bottom:0;height:var(--shorts-nav-h);display:grid;grid-template-columns:repeat(3,1fr);background:rgba(0,0,0,.98)}
.shorts-detail-bottom a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;color:#fff;text-decoration:none;font-size:14px}
.shorts-detail-bottom a.active{color:#ff9a00}
.shorts-detail-bottom svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Plyr controls: nằm đúng sát phía trên nav, không phụ thuộc ratio của iframe. */
.shorts-detail-reel .plyr__controls{position:absolute!important;z-index:45!important;left:0!important;right:0!important;bottom:var(--shorts-nav-h)!important;height:var(--shorts-controls-h)!important;min-height:var(--shorts-controls-h)!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;gap:7px!important;padding:7px 10px!important;background:linear-gradient(to top,rgba(0,0,0,.84),rgba(0,0,0,.20))!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important}
.shorts-detail-reel .plyr--hide-controls .plyr__controls{opacity:1!important;pointer-events:auto!important;transform:none!important}
.shorts-detail-reel .plyr__control{flex:0 0 auto;color:#fff!important;background:transparent!important;padding:5px!important}
.shorts-detail-reel .plyr__control:hover,.shorts-detail-reel .plyr__control:focus{background:rgba(255,121,0,.9)!important}
.shorts-detail-reel .plyr__progress__container{flex:1 1 auto!important;min-width:0!important;margin:0 2px!important;padding:0!important;pointer-events:auto!important}
.shorts-detail-reel .plyr__progress{width:100%!important;min-width:0!important;pointer-events:auto!important}
.shorts-detail-reel .plyr__progress input[type=range]{width:100%!important;pointer-events:auto!important;cursor:pointer!important;touch-action:pan-x!important;color:#ff7900!important}
.shorts-detail-reel .plyr__time{flex:0 0 auto;color:#fff!important;font-size:11px!important;line-height:1!important;text-shadow:0 1px 2px #000;white-space:nowrap}
.shorts-detail-reel .plyr__control--overlaid{display:none!important}

/* Gesture layer được JS chuyển vào trong .plyr khi ready. Vì cùng stacking context nên controls (z45) luôn nằm trên gesture (z20). */
.shorts-gesture-layer{position:absolute;z-index:20;left:0;right:0;top:0;bottom:calc(var(--shorts-nav-h) + var(--shorts-controls-h));background:transparent;touch-action:none;cursor:grab;pointer-events:none}
.shorts-detail-page.is-plyr-ready .shorts-gesture-layer{pointer-events:auto}
.shorts-gesture-layer:active{cursor:grabbing}

.shorts-play-state{position:absolute;z-index:40;left:50%;top:42%;width:68px;height:68px;transform:translate(-50%,-50%) scale(.88);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.shorts-play-state.show-state{opacity:1;transform:translate(-50%,-50%) scale(1)}
.shorts-play-state svg{position:absolute;inset:0;width:100%;height:100%;stroke:#fff;stroke-width:2;fill:rgba(0,0,0,.48);filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.shorts-play-state svg path{fill:#fff;stroke:none}
.shorts-play-state .shorts-play-state-pause{display:none}
.shorts-play-state.is-playing .shorts-play-state-play{display:none}
.shorts-play-state.is-playing .shorts-play-state-pause{display:block}
.shorts-play-state.is-paused .shorts-play-state-play{display:block}
.shorts-play-state.is-paused .shorts-play-state-pause{display:none}

/* Không dùng các progress/seek custom cũ nữa. */
.shorts-video-progress,.shorts-video-seek,.shorts-video-range,.shorts-seek-hitbox{display:none!important}

.shorts-actions{position:absolute;left:calc(50% + 242px);top:50%;transform:translateY(-48%);z-index:70;display:flex;flex-direction:column;align-items:center;gap:10px}
.shorts-action-item{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:transparent;color:#fff;text-decoration:none;cursor:pointer;font:inherit;padding:0}
.shorts-action-circle{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#222;color:#fff;box-sizing:border-box}
.shorts-action-circle svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.shorts-action-item strong{font-size:14px;color:#fff;line-height:1}
.shorts-zalo{background:#fff;color:#087aff;border:1px solid #e7e7e7;font:700 17px/1 Arial,sans-serif}
.shorts-messenger{background:#fff;color:#111}
.shorts-messenger svg{width:34px;height:34px;fill:#fff;stroke:#111;stroke-width:1.6}
.shorts-messenger .messenger-bolt{fill:#111;stroke:none}
.shorts-counter-action .shorts-action-circle svg{fill:transparent}
.shorts-counter-action.is-done .shorts-action-circle{color:#ff8a00}
.shorts-counter-action.is-done .shorts-action-circle svg{fill:rgba(255,138,0,.15)}
.shorts-sound .icon-sound-on,.shorts-sound.is-muted .icon-sound-off{display:block}
.shorts-sound .icon-sound-off,.shorts-sound.is-muted .icon-sound-on{display:none}

.shorts-sequence-nav{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:14px}
.shorts-sequence-button{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#2a2a2a;color:#fff;text-decoration:none;transition:background .18s ease,opacity .18s ease}
.shorts-sequence-button:hover{background:#3a3a3a}
.shorts-sequence-button svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.shorts-sequence-button.is-disabled{opacity:.28;pointer-events:none}

@media(max-width:900px){
  .shorts-detail-reel{width:min(430px,calc(100vw - 112px));height:min(790px,calc(100dvh - 20px))}
  .shorts-actions{left:auto;right:9px;top:47%;transform:translateY(-50%)}
  .shorts-sequence-nav{display:none}
}

@media(max-width:680px){
  .shorts-detail-stage{align-items:stretch}
  .shorts-detail-reel{width:100vw;height:100vh;height:100dvh;max-width:none;min-height:0;aspect-ratio:auto;border-radius:0;--shorts-nav-h:calc(63px + env(safe-area-inset-bottom));--shorts-controls-h:48px}
  .shorts-actions{right:7px;top:47%}
  .shorts-action-circle{width:48px;height:48px;background:rgba(28,28,28,.86)}
  .shorts-action-circle svg{width:26px;height:26px}
  .shorts-action-item strong{font-size:13px;text-shadow:0 1px 2px #000}
  .shorts-detail-content{left:11px;right:62px;bottom:calc(var(--shorts-nav-h) + var(--shorts-controls-h) + 8px)}
  .shorts-detail-product{grid-template-columns:60px minmax(0,1fr);padding:7px}
  .shorts-detail-product-img{width:60px;height:60px}
  .shorts-detail-product-name{font-size:14px}
  .shorts-detail-product-prices strong{font-size:15px}
  .shorts-detail-buy{padding:8px 11px;font-size:15px}
  .shorts-detail-content h1{font-size:19px;margin-top:10px}
  .shorts-detail-summary{font-size:14px}
  .shorts-detail-bottom{padding-bottom:env(safe-area-inset-bottom)}
  .shorts-brand,.shorts-close{top:calc(10px + env(safe-area-inset-top))}
  .shorts-detail-reel .plyr__controls{padding:6px 8px!important}
}

@media(max-width:390px){
  .shorts-action-circle{width:44px;height:44px}
  .shorts-detail-content{right:56px}
  .shorts-detail-product{grid-template-columns:52px minmax(0,1fr);gap:6px}
  .shorts-detail-product-img{width:52px;height:52px}
  .shorts-detail-product-name{font-size:13px}
  .shorts-detail-summary{max-height:58px;overflow:hidden}
}