/**
 * BK DMSP Widget Stylesheet
 * Plugin: BK Tech (Author: Bùi Đức Hạnh - https://buhaweb.com/)
 * Kit 4 Global Design System Compliant (Tông Xanh Lá Chủ Đạo)
 * Core Web Vitals (CrUX) Optimized: Zero-CLS, Low INP, High LCP
 */

/* ====================================================
   GRID CONTAINER (Zero-CLS & Responsive)
   ==================================================== */
.bdh-bk-dmsp-grid {
	--bdh-bk-dmsp-columns: 3;
	--bdh-bk-dmsp-scale: 1.08;
	--bdh-bk-dmsp-duration: 0.45s;
	display: grid;
	grid-template-columns: repeat(var(--bdh-bk-dmsp-columns, 3), 1fr);
	gap: 24px;
	width: 100%;
	box-sizing: border-box;
	contain: layout style;
}

/* ====================================================
   CARD ITEM
   ==================================================== */
.bdh-bk-dmsp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--e-global-color-8d5d81d, #FFFFFF);
	border: 1px solid var(--e-global-color-fcc82ce, #E5E7EB);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	box-sizing: border-box;
	height: 100%;
}

.bdh-bk-dmsp-card:hover {
	border-color: var(--e-global-color-1070229, #2CAC55);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* ====================================================
   IMAGE CONTAINER & SCALE IN/OUT EFFECT
   ==================================================== */
.bdh-bk-dmsp-card__image-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: var(--e-global-color-14ec4f2, #F8F9FA);
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	line-height: 0;
}

.bdh-bk-dmsp-card__image-link {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
	text-decoration: none;
}

/* Aspect Ratio Containment to prevent CLS */
.bdh-bk-dmsp-card__image-box {
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.bdh-bk-dmsp-card__image-box--1-1 {
	aspect-ratio: 1 / 1;
}

.bdh-bk-dmsp-card__image-box--4-3 {
	aspect-ratio: 4 / 3;
}

.bdh-bk-dmsp-card__image-box--16-9 {
	aspect-ratio: 16 / 9;
}

.bdh-bk-dmsp-card__image-box--3-4 {
	aspect-ratio: 3 / 4;
}

/* Image element with GPU hardware acceleration for smooth INP */
.bdh-bk-dmsp-card__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform var(--bdh-bk-dmsp-duration, 0.45s) cubic-bezier(0.25, 1, 0.5, 1);
	will-change: transform;
	transform: scale(1) translateZ(0);
	backface-visibility: hidden;
	pointer-events: none;
}

/* Scale effect on box hover */
.bdh-bk-dmsp-card:hover .bdh-bk-dmsp-card__img {
	transform: scale(var(--bdh-bk-dmsp-scale, 1.08)) translateZ(0);
}

/* ====================================================
   CONTENT & INNER TEXT
   ==================================================== */
.bdh-bk-dmsp-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 24px 20px 22px;
	box-sizing: border-box;
}

.bdh-bk-dmsp-card__title {
	display: block;
	width: 100%;
	margin: 0 0 14px;
	font-size: var(--e-global-typography-8dc9564-font-size, 24px);
	font-weight: var(--e-global-typography-8dc9564-font-weight, 600);
	line-height: var(--e-global-typography-8dc9564-line-height, 1.4em) !important;
	color: var(--e-global-color-d27c3cc, #1F2328);
	transition: color 0.25s ease;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.bdh-bk-dmsp-card__title a,
.bdh-bk-dmsp-card__title-link {
	display: inline;
	color: inherit;
	line-height: inherit !important;
	text-decoration: none;
	transition: color 0.25s ease;
}

.bdh-bk-dmsp-card:hover .bdh-bk-dmsp-card__title a,
.bdh-bk-dmsp-card:hover .bdh-bk-dmsp-card__title-link,
.bdh-bk-dmsp-card__title a:hover,
.bdh-bk-dmsp-card__title-link:hover {
	color: var(--e-global-color-938e6c1, #2A9150);
}

/* Description / Bullet Points List (Luôn căn trái theo quy chuẩn) */
.bdh-bk-dmsp-card__content,
.bdh-bk-dmsp-card__list {
	font-size: var(--e-global-typography-afd6f4d-font-size, 16px);
	font-weight: var(--e-global-typography-afd6f4d-font-weight, 400);
	line-height: var(--e-global-typography-afd6f4d-line-height, 1.65em);
	color: var(--e-global-color-76ff1c6, #4B5563);
	margin-bottom: 20px;
	flex-grow: 1;
	text-align: left !important;
	width: 100%;
}

.bdh-bk-dmsp-card__list,
.bdh-bk-dmsp-card__content ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left !important;
	width: 100%;
}

.bdh-bk-dmsp-card__list-item,
.bdh-bk-dmsp-card__content li {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start !important;
	text-align: left !important;
	gap: 10px;
	margin: 0;
	padding: 0;
	line-height: 1.5;
	width: 100%;
	box-sizing: border-box;
}

/* Gạch kẻ phân cách giữa các hàng li (Divider) */
.bdh-bk-dmsp-card__list--has-divider {
	gap: 0 !important;
}

.bdh-bk-dmsp-card__list--has-divider .bdh-bk-dmsp-card__list-item {
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.bdh-bk-dmsp-card__list--has-divider .bdh-bk-dmsp-card__list-item:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
}

.bdh-bk-dmsp-card__list--has-divider .bdh-bk-dmsp-card__list-item:not(:last-child)::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	border-bottom: 1px solid var(--e-global-color-fcc82ce, #E5E7EB);
	pointer-events: none;
	box-sizing: border-box;
}

.bdh-bk-dmsp-card__list-icon,
.bdh-bk-dmsp-card__content li i,
.bdh-bk-dmsp-card__content li svg {
	color: var(--e-global-color-1070229, #2CAC55);
	font-size: 15px;
	margin-top: 4px;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bdh-bk-dmsp-card__list-text {
	flex: 1;
	text-align: left !important;
}

/* Ẩn Icon theo thiết bị Tablet & Mobile */
@media (max-width: 1024px) {
	.bdh-bk-dmsp--hide-icon-tablet .bdh-bk-dmsp-card__list-icon {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.bdh-bk-dmsp--hide-icon-mobile .bdh-bk-dmsp-card__list-icon {
		display: none !important;
	}
}

/* ====================================================
   BUTTON (XEM CHI TIẾT - OUTLINE / PILL)
   ==================================================== */
.bdh-bk-dmsp-card__btn-wrap {
	margin-top: auto;
	padding-top: 6px;
	width: 100%;
	text-align: left;
}

.bdh-bk-dmsp-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 24px;
	border-radius: 45px;
	font-size: var(--e-global-typography-79e5d5b-font-size, 14px);
	font-weight: var(--e-global-typography-79e5d5b-font-weight, 600);
	line-height: var(--e-global-typography-79e5d5b-line-height, 1.5em);
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--e-global-color-938e6c1, #2A9150);
	background-color: transparent;
	color: var(--e-global-color-97923db, #1E6B3A);
	transition: all 0.25s ease;
	box-sizing: border-box;
}

.bdh-bk-dmsp-card__btn i,
.bdh-bk-dmsp-card__btn svg {
	font-size: 13px;
	color: inherit;
	fill: currentColor;
	transition: color 0.25s ease, fill 0.25s ease, transform 0.25s ease;
}

/* Nền xanh thì chữ PHẢI TRẮNG (SKILL.md) */
.bdh-bk-dmsp-card__btn:hover,
.bdh-bk-dmsp-card:hover .bdh-bk-dmsp-card__btn--hover-sync {
	background-color: var(--e-global-color-938e6c1, #2A9150);
	border-color: var(--e-global-color-938e6c1, #2A9150);
	color: var(--e-global-color-8d5d81d, #FFFFFF);
}

.bdh-bk-dmsp-card__btn:hover i,
.bdh-bk-dmsp-card__btn:hover svg,
.bdh-bk-dmsp-card:hover .bdh-bk-dmsp-card__btn--hover-sync i,
.bdh-bk-dmsp-card:hover .bdh-bk-dmsp-card__btn--hover-sync svg {
	transform: translateX(3px);
}

/* ====================================================
   RESPONSIVE FALLBACKS
   ==================================================== */
@media (max-width: 1024px) {
	.bdh-bk-dmsp-grid {
		gap: 20px;
	}

	.bdh-bk-dmsp-wrap--arrows-sides {
		padding: 0 8px;
	}

	.bdh-bk-dmsp-wrap--arrows-sides .bdh-bk-dmsp-arrow--prev {
		left: -4px;
	}

	.bdh-bk-dmsp-wrap--arrows-sides .bdh-bk-dmsp-arrow--next {
		right: -4px;
	}
}

@media (max-width: 767px) {
	.bdh-bk-dmsp-grid {
		gap: 16px;
	}

	.bdh-bk-dmsp-card__body {
		padding: 18px 16px 16px;
	}

	.bdh-bk-dmsp-arrow {
		width: 38px;
		height: 38px;
		font-size: 14px;
	}
}

/* ====================================================
   SLIDER & CAROUSEL (Adaptive Grid vs Swiper)
   ==================================================== */
.bdh-bk-dmsp-wrap {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.bdh-bk-dmsp-container {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

/* Swiper Active State */
.bdh-bk-dmsp-container.swiper-initialized {
	overflow: hidden;
	padding: 6px 4px 16px;
}

.bdh-bk-dmsp-container.swiper-initialized .bdh-bk-dmsp-grid {
	display: flex !important;
	grid-template-columns: none !important;
	gap: 0 !important;
	transform: translate3d(0, 0, 0);
	transition-property: transform;
	box-sizing: content-box;
	contain: none;
}

.bdh-bk-dmsp-container.swiper-initialized .bdh-bk-dmsp-card {
	flex-shrink: 0;
	height: auto;
	box-sizing: border-box;
}

/* Navigation Arrows */
.bdh-bk-dmsp-navigation {
	display: none;
}

.is-slider-active .bdh-bk-dmsp-navigation {
	display: flex;
}

/* Sides Positioned Arrows */
.bdh-bk-dmsp-wrap--arrows-sides {
	position: relative;
	padding: 0 16px;
}

.bdh-bk-dmsp-wrap--arrows-inside {
	padding-left: 0;
	padding-right: 0;
}

.bdh-bk-dmsp-wrap--arrows-sides .bdh-bk-dmsp-navigation {
	position: static;
	margin: 0;
}

.bdh-bk-dmsp-wrap--arrows-sides .bdh-bk-dmsp-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}

.bdh-bk-dmsp-wrap--arrows-sides .bdh-bk-dmsp-arrow--prev {
	left: -8px;
}

.bdh-bk-dmsp-wrap--arrows-sides .bdh-bk-dmsp-arrow--next {
	right: -8px;
}

.bdh-bk-dmsp-wrap--arrows-inside .bdh-bk-dmsp-arrow--prev {
	left: 12px;
}

.bdh-bk-dmsp-wrap--arrows-inside .bdh-bk-dmsp-arrow--next {
	right: 12px;
}

/* Bottom Positioned Arrows */
.bdh-bk-dmsp-wrap--arrows-bottom .bdh-bk-dmsp-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 24px;
	width: 100%;
}

.bdh-bk-dmsp-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: #FFFFFF;
	color: var(--e-global-color-1070229, #2CAC55);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 50%;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	outline: none;
	user-select: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.bdh-bk-dmsp-arrow svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	transition: transform 0.25s ease;
}

.bdh-bk-dmsp-arrow:hover:not(.swiper-button-disabled) {
	background-color: var(--e-global-color-938e6c1, #2A9150);
	color: #FFFFFF;
	border-color: var(--e-global-color-938e6c1, #2A9150);
	box-shadow: 0 6px 20px rgba(42, 145, 80, 0.32);
}

.bdh-bk-dmsp-wrap--arrows-sides .bdh-bk-dmsp-arrow:hover:not(.swiper-button-disabled) {
	transform: translateY(-50%) scale(1.08);
}

.bdh-bk-dmsp-arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

/* Pagination Dots */
.bdh-bk-dmsp-pagination {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
	width: 100%;
}

.is-slider-active .bdh-bk-dmsp-pagination {
	display: flex;
}

.bdh-bk-dmsp-pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0 !important;
	background-color: var(--e-global-color-fcc82ce, #E5E7EB);
	opacity: 1;
	border-radius: 4px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
}

.bdh-bk-dmsp-pagination .swiper-pagination-bullet-active {
	width: 24px;
	background-color: var(--e-global-color-1070229, #2CAC55);
}