/* ==================================================
WRAPPER NGOÀI – CHO PHÉP CARD THÒ RA
================================================== */
.kt-video-product-slider {
	position: relative;
	max-width: 100%;
	width:100%;
	margin: 0 auto;
	padding: 60px 40px 0px; /* 🔥 chừa chỗ cho product card */
	overflow: hidden;       /* 🔥 QUAN TRỌNG */
	box-sizing: border-box;
}

/* Swiper chỉ hidden bên trong */
.kt-video-product-slider .kt-video-swiper {
	overflow: visible;
}

/* Canh giữa slide */
.kt-video-product-slider .swiper-wrapper {
	align-items: center;
}

/* ==================================================
SLIDE
================================================== */
.kt-video-product-slider .swiper-slide {
	position: relative;
	width: 220px; /* mobile */
	transform: scale(0.86);
	filter: grayscale(1);
	opacity: 0.55;
	transition: transform 0.8s ease, filter 0.8s ease, opacity 0.8s ease;
	will-change: transform;
}

/* Slide ở giữa */
.kt-video-product-slider .swiper-slide-active {
	transform: scale(1);
	filter: grayscale(0);
	opacity: 1;
	z-index: 3;
}

/* Slide kế bên */
.kt-video-product-slider .swiper-slide-prev,
.kt-video-product-slider .swiper-slide-next {
	transform: scale(0.93);
	filter: grayscale(0.5);
	opacity: 0.5;
	z-index: 2;
}

/* ==================================================
VIDEO
================================================== */
.kt-video-product-slider .kt-video-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 22px;
	overflow: hidden;
	background: #000;
}

.kt-video-product-slider .kt-video-wrap video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #000;
}

/* ==================================================
PRODUCT CARD
================================================== */
.kt-video-product-slider .kt-product-card {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: -42px; /* 🔥 thò ra ngoài slide */
	background: #fff;
	border-radius: 16px;
	padding: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	transition: transform 0.4s ease, opacity 0.4s ease;
	z-index: 4;
}

/* Card mờ nếu không active */
.kt-video-product-slider
.swiper-slide:not(.swiper-slide-active)
.kt-product-card {
	opacity: 0.5;
	transform: translateY(6px);
}

/* ==================================================
PRODUCT CONTENT
================================================== */
.kt-video-product-slider .kt-product-thumb img {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	object-fit: cover;
	display: block;
}

.kt-video-product-slider .kt-product-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.kt-video-product-slider .kt-product-title {
	font-size: 14px;
	font-weight: 600;
	color: #111;
	line-height: 1.3;
	text-decoration: none;
}

.kt-video-product-slider .kt-product-title:hover {
	text-decoration: underline;
}

.kt-video-product-slider .kt-product-price {
	font-size: 13px;
	color: #666;
}

/* ==================================================
RESPONSIVE – KIỂM SOÁT SỐ ITEM
================================================== */
@media (min-width: 576px) {
	.kt-video-product-slider .swiper-slide {
		width: 240px!important;
	}
}

@media (min-width: 768px) {
	.kt-video-product-slider .swiper-slide {
		width: 260px!important;
	}
}

@media (min-width: 1200px) {
	.kt-video-product-slider .swiper-slide {
		width: 280px!important; /* ~5 item */
	}
}

@media (min-width: 1440px) {
	.kt-video-product-slider .swiper-slide {
		width: 300px;
	}
}

/* ==================================================
MOBILE
================================================== */
@media (max-width: 480px) {
	.kt-video-product-slider {
		padding: 40px 16px 0px;
	}

	.kt-video-product-slider .kt-product-card {
		left: 12px;
		right: 12px;
		bottom: -36px;
		padding: 12px;
	}
}

.kt-video-nav{
	margin-top:70px;
	width:100%;
	display:flex;
	justify-content:center;
	gap:14px;
}

.kt-video-prev,
.kt-video-next{
	width:40px;
	height:40px;
	border-radius:999px;
	background:#fff;
	border:1px solid var(--fs-color-primary);
	font-size:18px;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	color: var(--fs-color-primary);
	box-shadow:0 8px 25px rgba(0,0,0,.08);
	transition:.2s;
}

.kt-video-prev:hover,
.kt-video-next:hover{
	background:var(--fs-color-primary);
	border:1px solid #fff;
	color:#fff;
}