/* Video slide gallery sản phẩm — dùng chung token màu/bo góc với theme
   (--dx-*), có fallback cứng nếu theme không định nghĩa biến này (site khác).

   aspect-ratio được in ra qua inline style (PHP, tính từ kích thước thật
   của ảnh poster) để cố định khung NGAY từ đầu — không phụ thuộc thời
   điểm <video> load xong metadata. */

.dxl-pv-video-slide{
	position: relative;
	overflow: hidden;
	/* Fallback nếu vì lý do gì đó không có inline aspect-ratio (sản phẩm cũ
	   chưa từng lưu kích thước poster trước khi có bản fix này). */
	aspect-ratio: 1 / 1;
}

.dxl-pv-video-slide .dxl-pv-video{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* KHÔNG crop, KHÔNG zoom — fit vừa khung, giữ nguyên tỷ lệ gốc đã upload. */
	background: var(--dx-charcoal, #16161A);
	border-radius: var(--dx-radius-md, 4px);
}

/*
 * Ép Flatsome: theme có option "Product Images > Gallery Image Ratio" (Square/
 * Portrait/Landscape) và có thể set padding-bottom/height cố định trên chính
 * .woocommerce-product-gallery__image (bằng inline style JS hoặc theme CSS) để
 * ép TẤT CẢ slide vào 1 khung hình đồng nhất theo ảnh đại diện — bất kể
 * aspect-ratio riêng ta khai cho slide video. !important ở đây thắng cả inline
 * style JS gắn sau (vì JS gắn không kèm !important), buộc khung slide video
 * luôn theo đúng tỷ lệ video/poster thật, không bị Flatsome ép theo ảnh khác.
 */
.woocommerce-product-gallery__image.dxl-pv-video-slide{
	height: auto !important;
	padding-bottom: 0 !important;
	padding-top: 0 !important;
}

/* Icon play đè lên poster khi video CHƯA phát — kiểu Etsy, báo cho khách
   biết đây là slide video. Tự mờ dần biến mất khi video bắt đầu phát
   (class .is-playing do gallery-video.js gắn/gỡ). */
.dxl-pv-play-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: opacity 0.2s ease;
	z-index: 2;
}

.dxl-pv-play-icon svg{
	width: 26px;
	height: 26px;
	fill: #fff;
	margin-left: 3px; /* icon tam giác lệch tâm, dịch nhẹ cho cân mắt */
}

.dxl-pv-video-slide.is-playing .dxl-pv-play-icon{
	opacity: 0;
}


/* Icon play nhỏ đè lên thumb video trong dải thumbnail nhỏ (nav-small), để
   phân biệt với thumb ảnh thường. */
.dxl-pv-video-thumb{
	position: relative;
}
.dxl-pv-thumb-play{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.dxl-pv-thumb-play svg{
	width: 10px;
	height: 10px;
	fill: #fff;
	margin-left: 1px;
}


/* Nút zoom (icon-expand) của Flatsome mở lightbox ảnh — không áp dụng được
   cho video (video đã có nút fullscreen riêng trong controls của trình
   duyệt). Ẩn đi khi slide video đang là slide ĐANG ĐƯỢC CHỌN trong Flickity.

   Dùng :has() + class ".is-selected" Flickity TỰ gắn lên đúng cell đang
   active — không cần JS đoán qua IntersectionObserver (cách cũ không đáng
   tin: các cell trong Flickity thường nằm chồng cùng 1 vị trí vật lý trên
   trang, chỉ dịch chuyển bằng transform, nên "có nằm trong khung nhìn màn
   hình" không phản ánh đúng "có đang là slide active hay không"). */
.product-images:has(.dxl-pv-video-slide.is-selected) .zoom-button{
	display: none !important;
}