/**
 * Style hiển thị banner slider ngoài frontend.
 */

:root {
	--jw-banner-slider-brand-color: #004250;
	--jw-banner-slider-secondary-color: #a3b260;
	--jw-banner-slider-brand-spectrum: 0, 66, 80;
}

.jw-banner-sliders-swiper {
	min-height: clamp(480px, 50vh, 606px);
}

main .jw-banner-sliders-swiper .swiper-button-next,
main .jw-banner-sliders-swiper .swiper-button-prev {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
	box-sizing: border-box;
}

main
	.jw-banner-sliders-swiper
	:is(.swiper-button-next, .swiper-button-prev):hover
	svg {
	transform: scale(1.2);
	transition: transform 0.3s ease;
}

main
	.jw-banner-sliders-swiper
	:is(.swiper-button-next, .swiper-button-prev):hover
	svg
	path {
	fill: var(--jw-banner-slider-secondary-color);
}

.jw-banner-sliders-swiper .swiper-button-next::after,
.jw-banner-sliders-swiper .swiper-button-prev::after {
	font-family:
		system-ui,
		-apple-system,
		Segoe UI,
		Roboto,
		Arial,
		sans-serif;
	font-size: 80px;
	color: white;
	content: unset;
}

.jw-banner-sliders-swiper .swiper-button-next:hover::after,
.jw-banner-sliders-swiper .swiper-button-prev:hover::after {
	color: var(--jw-banner-slider-brand-color);
}

.jw-banner-sliders-swiper .swiper-pagination .swiper-pagination-bullet {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid var(--jw-banner-slider-secondary-color, #c04242);
	background-color: transparent;
	color: var(--jw-banner-slider-secondary-color, #fff);
	font-size: 14px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 6px;
	padding: 0;
	cursor: pointer;
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		border-color 0.3s ease;
}

.jw-banner-sliders-swiper .swiper-pagination .swiper-pagination-bullet:hover {
	background-color: var(--jw-banner-slider-secondary-color, #c04242);
}

.jw-banner-sliders-swiper
	.swiper-pagination
	.swiper-pagination-bullet:focus-visible {
	outline: 3px solid rgba(var(--jw-banner-slider-brand-spectrum), 0.3);
	outline-offset: 2px;
}

.jw-banner-sliders-swiper
	.swiper-pagination
	.swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: var(--jw-banner-slider-secondary-color, #c04242);
	border-color: var(--jw-banner-slider-secondary-color, #c04242);
	color: var(--jw-banner-slider-brand-color);
}

@media (min-width: 768px) {
	.jw-banner-sliders-swiper .swiper-pagination {
		--swiper-pagination-bottom: 30px;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.jw-banner-sliders-swiper .swiper-button-next,
	.jw-banner-sliders-swiper .swiper-button-prev {
		display: none !important;
	}

	.jw-banner-sliders-swiper .swiper-pagination {
		--swiper-pagination-bottom: 80px;
	}
}

@media (max-width: 767.98px) {
	.jw-banner-sliders-swiper .swiper-button-next,
	.jw-banner-sliders-swiper .swiper-button-prev {
		display: none !important;
	}

	.jw-banner-sliders-swiper .swiper-pagination {
		--swiper-pagination-bottom: 10px;
	}

	.jw-banner-sliders-swiper .swiper-pagination .swiper-pagination-bullet {
		width: 24px;
		height: 24px;
		font-size: 12px;
		border-color: var(--jw-banner-slider-brand-color, #c04242);
		color: var(--jw-banner-slider-brand-color, #c04242);
	}

	.jw-banner-sliders-swiper
		.swiper-pagination
		.swiper-pagination-bullet:hover {
		background-color: var(--jw-banner-slider-brand-color, #c04242);
	}

	.jw-banner-sliders-swiper
		.swiper-pagination
		.swiper-pagination-bullet:focus-visible {
		outline: 3px solid rgba(var(--jw-banner-slider-brand-spectrum), 0.3);
		outline-offset: 2px;
	}

	.jw-banner-sliders-swiper
		.swiper-pagination
		.swiper-pagination-bullet.swiper-pagination-bullet-active {
		background-color: var(--jw-banner-slider-brand-color, #c04242);
		color: #fff;
	}
}