/* template-parts/section/what_adh_do.php */
/* ----------------------------------------------------------
   Trang Features — override section what_adh_do (base styles:
   assets/css/sections/what_adh_do.css). Full-bleed breakout khỏi cột nội dung.
---------------------------------------------------------- */

body.page-features {
	overflow-x: clip;
	scrollbar-gutter: stable;
}

.main--features {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
}

.main--features .what-adh-do-section {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	position: relative;
	overflow-x: clip;
}

/* Full-bleed swiper — slide width is controlled per-slide, not via swiper container */
.main--features .what-adh-do-swiper {
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	overflow: visible;
	box-sizing: border-box;
}

/*
 * Khoảng 900 / 130 / 115px: chỉnh Swiper trong template-parts/section/what_adh_do.php,
 * không dùng margin CSS trên .swiper-slide.
 */

/* EDIT */
@media (max-width: 1024px) {
    .main--features .what-adh-do-swiper {
		overflow: hidden;
    	position: relative;
		padding-bottom: 80px;
	}
	
	.main--features .what-adh-do-swiper.swiper .swiper-slide.what-adh-do-slide {
		margin-right: 16px !important;
	}
}

@media (max-width: 767.9px) {
    .main--features .what-adh-do-swiper {
		padding-bottom: 96px;
	}
}

/* ----------------------------------------------------------
   WHAT ADH DO SECTION
---------------------------------------------------------- */
.what-adh-do-section {
	background: var(--color-white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: visible;
	position: relative;
	padding: 80px 0;
}

.what-adh-do-title {
	font-size: var(--fs-3xl);
	font-weight: 700;
	color: var(--color-text-dark);
	margin-bottom: 50px;
}

.what-adh-do-title span {
	color: var(--color-primary);
}

.what-adh-do-swiper {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	overflow: visible;
}

.what-adh-do-swiper .swiper-wrapper {
	align-items: center;
}

.what-adh-do-swiper.swiper .swiper-slide.what-adh-do-slide {
	display: flex !important;
	justify-content: center !important;
	height: auto !important;
	box-sizing: border-box !important;
	padding: 0 clamp(83px, 5.764vw, 0px);
	width: var(--slide-w) !important;
	background: var(--color-white) !important;
	flex-direction: column !important;
	align-items: stretch !important;
	flex-shrink: 0 !important;
}

.what-adh-do-swiper.swiper .swiper-slide-active.what-adh-do-slide {
	opacity: 1 !important;
}

.what-adh-do-media {
	width: 100%;
	aspect-ratio: 752 / 441;
	overflow: hidden;
}

.what-adh-do-video-container {
	position: relative;
	width: 100%;
	height: 100%;
}

.what-adh-do-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.what-adh-do-description {
	color: var(--color-text-muted);
	font-size: var(--fs-md);
	margin-top: 30px;
	text-align: center;
}

.what-adh-navigation {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	padding: 0;
	box-sizing: border-box;
	z-index: var(--z-sticky);
	pointer-events: none;
	max-width: var(--container-max);
	margin:0 auto;
}

.what-adh-do-swiper.swiper .swiper-button-prev.what-adh-do-prev-btn,
.what-adh-do-swiper.swiper .swiper-button-next.what-adh-do-next-btn {
	width: 48px !important;
	height: 48px !important;
	position: absolute !important;
	top: 50% !important;
	margin-top: 0 !important;
	transform: translateY(-50%) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	z-index: 2 !important;
}

.what-adh-do-swiper.swiper .swiper-button-prev.what-adh-do-prev-btn {
	left: 5vw !important;
	right: auto !important;
}

.what-adh-do-swiper.swiper .swiper-button-next.what-adh-do-next-btn {
	right: 5vw !important;
	left: auto !important;
}

.what-adh-do-prev-btn img,
.what-adh-do-next-btn img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.what-adh-do-swiper .swiper-button-next::after,
.what-adh-do-swiper .swiper-button-prev::after {
	display: none;
}

.what-adh-pagination {
	display: none;
}

/* TABLET */
@media (max-width: 1024px) {
	.what-adh-do-section {
		height: auto;
		padding: var(--section-py) var(--section-px);
	}
	.what-adh-do-title {
		font-size: var(--fs-3xl);
		line-height: var(--lh-2xl);
		text-align: center;
		margin-bottom: 20px;
	}
	.what-adh-do-swiper {
		width: 100%;
		overflow: hidden;
		padding-bottom: 80px;
		position: relative;
	}
	.what-adh-do-swiper.swiper .swiper-slide.what-adh-do-slide {
		opacity: 1 !important;
		padding: 0 !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 auto !important;
		background: transparent !important;
	}
	.what-adh-do-media {
		aspect-ratio: unset;
		height: 460px;
	}
	.what-adh-do-video-container {
		width: 100%;
		height: 100%;
	}
	.what-adh-do-video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.what-adh-navigation {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		transform: none;
		pointer-events: none;
		margin:0 auto;
	}
	.what-adh-do-swiper.swiper .swiper-button-prev.what-adh-do-prev-btn,
	.what-adh-do-swiper.swiper .swiper-button-next.what-adh-do-next-btn {
		width: 48px !important;
		height: 48px !important;
		top: auto !important;
		bottom: 0 !important;
		margin-top: 0 !important;
		transform: none !important;
	}
	.what-adh-do-swiper.swiper .swiper-button-prev.what-adh-do-prev-btn {
		left: 0 !important;
		right: auto !important;
	}
	.what-adh-do-swiper.swiper .swiper-button-next.what-adh-do-next-btn {
		right: 0 !important;
		left: auto !important;
	}
	.what-adh-do-prev-btn img,
	.what-adh-do-next-btn img {
		width: 40px;
		height: 40px;
	}
	.what-adh-pagination {
		display: block;
		position: absolute;
		bottom: 14px;
		left: 45%;
		transform: translateX(-50%);
		width: auto;
	}
	.what-adh-pagination .swiper-pagination-bullet {
		width: 6px;
		height: 6px;
		background: #d9d9d9;
		opacity: 1;
	}
	.what-adh-pagination .swiper-pagination-bullet-active {
		width: 24px;
		border-radius: var(--radius-full);
		background: #333;
	}
}

/* MOBILE */
@media (max-width: 767.9px) {
	.what-adh-do-section {
		padding: var(--section-py) var(--section-px);
		overflow: hidden;
	}
	.what-adh-do-title {
		max-width: 340px;
		margin-bottom: 20px;
        font-size: var(--fs-xl);
        line-height: var(--lh-xl);		
	}
	.what-adh-do-swiper {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		position: relative;
		padding-bottom: 96px;
	}
	.what-adh-do-swiper .swiper-wrapper {
		align-items: stretch;
	}
	.what-adh-do-swiper.swiper .swiper-slide.what-adh-do-slide {
		width: 100% !important;
		flex-shrink: 0 !important;
		opacity: 1 !important;
		padding: 0 !important;
		margin: 0 auto !important;
		box-sizing: border-box !important;
	}
	.what-adh-do-media {
		aspect-ratio: 340 / 190;
		height: auto;
	}
	.what-adh-do-video-container {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.what-adh-do-video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.what-adh-navigation {
		width: 100%;
		left: 0;
		bottom: 20px;
		transform: none;
	}
	.what-adh-do-swiper.swiper .swiper-button-prev.what-adh-do-prev-btn,
	.what-adh-do-swiper.swiper .swiper-button-next.what-adh-do-next-btn {
		width: 48px !important;
		height: 48px !important;
		top: auto !important;
		bottom: 0 !important;
		margin-top: 0 !important;
		transform: none !important;
	}
	.what-adh-do-swiper.swiper .swiper-button-prev.what-adh-do-prev-btn {
		left: 0 !important;
		right: auto !important;
	}
	.what-adh-do-swiper.swiper .swiper-button-next.what-adh-do-next-btn {
		right: 0 !important;
		left: auto !important;
	}
	.what-adh-pagination {
		bottom: 30px;
		left: 50%;
		transform: translateX(-50%);
		width: auto;
	}
}