.hk-hero-slider {
	--hk-hero-radius: 37px;

	display: flex;
	align-items: center;
	gap: 15px;
}

.hk-hero-slider__viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--hk-hero-radius);
}

.hk-hero-slider__slide {
	height: auto;
}

.hk-hero-slider__media {
	display: block;
	width: 100%;
	aspect-ratio: 1301 / 611;
	overflow: hidden;
	border-radius: var(--hk-hero-radius);
	background: var(--hk-beige);
}

.hk-hero-slider__img,
.hk-hero-slider__media img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.hk-hero-slider__nav {
	--hk-nav-size: 40px;

	flex: none;
}

/* Trước khi Swiper khởi tạo: chỉ hiện slide đầu */
.hk-hero-slider__viewport:not(.swiper-initialized) .swiper-slide:not(:first-child) {
	display: none;
}

.hk-hero-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.hk-hero-slider__dots .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	margin: 0 !important;
	background: var(--hk-white);
	opacity: .6;
}

.hk-hero-slider__dots .swiper-pagination-bullet-active {
	width: 28px;
	border-radius: 6px;
	background: var(--hk-yellow);
	opacity: 1;
}

@media (max-width: 1024px) {
	.hk-hero-slider {
		--hk-hero-radius: 28px;

		gap: 8px;
	}
}

@media (max-width: 767px) {
	.hk-hero-slider {
		--hk-hero-radius: 20px;

		position: relative;
		gap: 0;
	}

	.hk-hero-slider__media {
		aspect-ratio: 4 / 3;
	}

	.hk-hero-slider__nav {
		--hk-nav-size: 34px;
		--hk-nav-bg: rgba(255, 255, 255, .85);

		position: absolute;
		top: 50%;
		z-index: 3;
		margin-top: -17px;
	}

	.hk-hero-slider__nav.hk-nav--prev {
		left: 8px;
	}

	.hk-hero-slider__nav.hk-nav--next {
		right: 8px;
	}
}

/* Figma: chuyển slide 0.8s ease */
.hk-hero-slider .swiper-wrapper {
	transition-timing-function: cubic-bezier(.45, .05, .25, 1);
}