/* Nút ▶ trên ảnh bìa video (JIG có rule ".justified-image-grid div{position:static}" nên dùng span) */
.xvg-play{
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  pointer-events:none; background:linear-gradient(to top, rgb(0 0 0 / 25%), transparent 40%);
}
.xvg-play i{
  width:58px; height:58px; border-radius:50%; background:rgb(0 0 0 / 55%); backdrop-filter:blur(3px);
  border:2px solid rgb(255 255 255 / 85%); box-shadow:0 4px 18px rgb(0 0 0 / 35%); transition:transform .18s, background .18s;
  position:relative;
}
.xvg-play i::after{
  content:""; position:absolute; left:52%; top:50%; transform:translate(-40%,-50%);
  border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff;
}
.xvg-play em{
  position:absolute; top:8px; left:8px; padding:2px 7px; border-radius:6px; background:rgb(0 0 0 / 65%);
  color:#fff; font:600 11px/1.4 system-ui, sans-serif; font-style:normal;
}
.xvg-co-video:hover .xvg-play i{ transform:scale(1.08); background:rgb(215 25 32 / 85%); }
.xvg-co-video .jig-overflow, .xvg-co-video{ cursor:pointer; }
@media (max-width:600px){ .xvg-play i{ width:46px; height:46px; } .xvg-play i::after{ border-width:9px 0 9px 15px; } }

/* Khung phát */
#xvg-v-hop{
  position:fixed; inset:0; z-index:100000; display:none; align-items:center; justify-content:center;
  background:rgb(0 0 0 / 92%); padding:env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
#xvg-v-hop.on{ display:flex; }
#xvg-v-hop video{ max-width:96vw; max-height:88vh; border-radius:8px; background:#000; outline:none; }
.xvg-v-dong{
  position:absolute; top:calc(env(safe-area-inset-top, 0px) + 10px); right:14px; width:44px; height:44px;
  border:0; border-radius:50%; background:rgb(255 255 255 / 15%); color:#fff; font-size:30px; line-height:1; cursor:pointer;
}
.xvg-v-dong:hover{ background:rgb(255 255 255 / 28%); }
