/* === VIDEO GALLERY — SLIDER VERSION === */

.vg-wrap{width:100%;position:relative;z-index:10;height:100%;overflow:hidden;}
.vg-track{display:flex;gap:12px;transition:transform 0.3s ease;padding-bottom:4px;}
/* PC và Mobile: Video chính chiếm ~70%, video tiếp theo hiển thị một phần */
.vg-slide{flex:0 0 calc(70% - 6px);box-sizing:border-box;position:relative;}
.vg-item{height:300px!important;}
.vg-thumb{height:280px!important;}

/* Navigation Buttons */
.vg-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:none;border-radius:80px!important;background:rgba(255,255,255,0.9);color:#333;cursor:pointer;z-index:20;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;box-shadow:0 2px 8px rgba(0,0,0,0.15);backdrop-filter:blur(10px);}
.vg-nav:hover{background:rgba(255,255,255,1);transform:translateY(-50%) scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,0.2);}
.vg-nav:active{transform:translateY(-50%) scale(0.95);}
.vg-nav:disabled{opacity:0.3;cursor:not-allowed;transform:translateY(-50%);}
.vg-nav:disabled:hover{transform:translateY(-50%);background:rgba(255,255,255,0.9);box-shadow:0 2px 8px rgba(0,0,0,0.15);}
.vg-nav svg{transform:scale(3.4);}
.vg-prev{left:16px;}
.vg-next{right:16px;}

/* Gradient Overlays */
.vg-gradient{position:absolute;top:0;bottom:0;width:60px;pointer-events:none;z-index:15;transition:opacity 0.3s ease;}
.vg-gradient-left{left:0;background:linear-gradient(to right,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.4) 50%,transparent 100%);opacity:0;}
.vg-gradient-right{right:0;background:linear-gradient(to left,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.4) 50%,transparent 100%);opacity:0;}
.vg-gradient-left.show{opacity:1;}
.vg-gradient-right.show{opacity:1;}

/* Card */
.vg-item{position:relative;display:block;background-color: #000!important;width:100%;height:100%;max-height:100vh;overflow:hidden;border-radius:10px;cursor:pointer;z-index:11;}
.vg-thumb{width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:transform .3s ease,filter .3s ease;display:block;}
.vg-item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45) 15%,rgba(0,0,0,0) 60%);pointer-events:none;border-radius:inherit;}
.vg-item:hover .vg-thumb{transform:scale(1.03);filter:brightness(1.1);}

/* Play button (YouTube style) */
.vg-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:46px;border-radius:14px;background:#ff0033;box-shadow:0 6px 18px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;transition:transform .15s ease,filter .15s ease,background .15s ease;z-index:2;}
.vg-play::before{content:"";display:block;width:0;height:0;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:2px;}
.vg-item:hover .vg-play{filter:brightness(1.1);transform:translate(-50%,-50%) scale(1.03);}

/* Title overlay */
.vg-desc{position:absolute;left:0;right:0;bottom:0;padding:10px 12px 12px;color:#fff;font-size:.95rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.6);z-index:20;}

.vg-no-scroll{overflow:hidden;}

/* Disable interfering overlays on desktop */
@media (min-width:768px){
  .zoomContainer,.pswp,.mfp-bg,.mfp-wrap,.lg-backdrop,.lg-outer,.elementor-lightbox,.fancybox-container,.fancybox-overlay,.photoswipe,.xzoom-preview,.xzoom-lens,.yith_magnifier_zoom,.woocommerce-product-gallery__trigger{pointer-events:none!important;}
}

/* === WooCommerce main image height on desktop (balanced) === */
@media (min-width:1025px){
  .single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
  .single-product .woocommerce-product-gallery .flex-viewport img{
    height:400px !important;     /* cao cố định desktop */
    width:100%;
    max-width:100%;
    object-fit:cover;            /* giữ tỉ lệ, crop cho đẹp */
    display:block;
  }
  /* Video gallery height on desktop */
  .vg-item{height:400px!important;}
  .vg-thumb{height:380px!important;border-radius: 4px!important;}
  .vg-nav svg {
    transform: scale(10);
}
}