body {
	font-family: 'Roboto', sans-serif;
}

.ldp-frame-footer-img,
.text-center {
	text-align: center;
}

.text-caption {
	font-size: var(--ldp-text-caption-size, 11px);

	color: var(--ldp-text-caption-color, #044897);

	margin-top: var(--ldp-caption-mt, 8px);

	font-weight: var(--ldp-caption-fw, 500);
}

.frame-main-section {
	min-height: 100vh;
}

.ldp-frame-display-block-text {
	display: flex;

	flex-direction: column;

	align-items: center;

	margin: 0 auto;

	margin-block: var(--ldp-block-text-my, 30px);

	max-width: var(--ldp-block-text-max-w, 100%);

	width: var(--ldp-block-text-w, 100%);
}

/* Voucher images */
.ldp-frame-display-block-text figure {
	display: flex;

	justify-content: center;
}
/* Voucher button */
.ldp-frame-display-block-text img {
	width: 100%;

	height: auto;

	object-fit: contain;
}

.ldp-frame-vouchers img {
	width: 100%;

	height: auto;

	object-fit: contain;
}

.ldp-frame-vouchers img.voucher {
	opacity: 1;
	transform: translateY(0);
}

.ldp-frame-vouchers img.voucher.in-view {
	opacity: 1;
	transform: translateY(0);
}

.ldp-frame-display-block .ldp-frame-gallery {
	display: flex;

	flex-wrap: wrap;

	max-width: 600px;

	margin: 0;

	padding: 0;

	list-style: none;

	text-align: center;
}

.ldp-frame-gallery li {
	flex: 1 1 50%;

	min-width: 280px;
}

.ldp-item {
	display: block;
	max-width: 100%;
}

.ldp-frame-jwtmch-img-sale {
	max-width: 600px;

	width: 100%;

	height: 460px;

	object-fit: contain;

	text-align: center;
}

.ldp-frame-main-display-block-text img:first-of-type {
	max-height: 330px;
}

.ldp-frame-main-display-block-text img:nth-of-type(2) {
	max-width: 430px;

	height: 110px;
}

.ldp-frame-display-block-expand {
	margin: 0;

	padding: 0;
}

.ldp-frame-display-block-expand img {
	max-width: 600px;

	width: 100%;

	height: auto;
}

.ldp-frame-display-block-expand li img {
	width: 600px;

	object-fit: contain;
}

.ldp-frame-footer-img img {
	max-width: 580px;

	height: 425px;
}

.btn-dangky {
	transition:
		transform 0.15s,
		box-shadow 0.15s;
}

.btn-dangky:hover {
	transform: translateY(2px);
}

.sortBtnLabelAll {
	text-align: var(--ldp-select-label-text, start);
	font-weight: var(--ldp-select-label-fw, 600);
	font-size: var(--ldp-select-label-fs, inherit);
	font-style: var(--ldp-select-label-fst, normal);
	color: var(--ldp-select-label-color, inherit);
}

.btn-submit {
	border: none;

	cursor: pointer;

	background: #f5f5f5;
}

/* Meso Baby Skin */

#ldp-frame-block-meso-baby-skin .headline,
#ldp-frame-block-meso-baby-skin .headline-note {
	font-size: 24px;
	font-weight: 700;
	color: white;
	text-align: center;
	margin-block: 0;
	line-height: 1.5;
}

/* Attention-grabbing headline number styling */
#ldp-frame-block-meso-baby-skin .headline__number {
	display: inline-block;
	font-size: 1.8em;
	font-weight: 900;
	color: #ffffff;
	background: linear-gradient(135deg, #004c5c 0%, #006a7a 50%, #004c5c 100%);
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	position: relative;
	padding: 0.2em 0.4em;
	border-radius: 8px;
	box-shadow:
		0 4px 12px rgba(0, 76, 92, 0.3),
		inset 0 1px 3px rgba(255, 255, 255, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.3);
	transform-origin: center;
}

#ldp-frame-block-meso-baby-skin .headline__number {
	animation-iteration-count: infinite;
}

#ldp-frame-block-meso-baby-skin .customer-images-container {
	padding-block: var(--frame-block-py, 30px);
	padding-inline: var(--frame-block-px, 38px);
	background: var(--frame-block-bg, #fff);
	display: grid;
	justify-items: center;
	gap: 20px;
	padding-bottom: 0;
}

#ldp-frame-block-meso-baby-skin
	.customer-images-container
	.customer-images-swiper {
	width: 100%;
}

#ldp-frame-block-meso-baby-skin .swiper-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
#ldp-frame-block-meso-baby-skin .customer-promotion-cta figure > img {
	display: block;
	width: 100%;
}

#ldp-frame-block-meso-baby-skin .customer-promotion-cta .btn-img-wrapper {
	text-align: center;
}

#ldp-frame-block-meso-baby-skin .subheadline-container {
	display: grid;
	grid-template: 1fr / 1fr;
}

#ldp-frame-block-meso-baby-skin .subheadline-container figure {
	grid-area: 1 / 1 / 2 / 2;
	justify-self: center;
	align-self: center;
}

#ldp-frame-block-meso-baby-skin .subheadline-container .btn-img-wrapper {
	grid-area: 1 / 1 / 2 / 2;
	justify-self: center;
	align-self: center;
	margin-top: 20px;
	position: relative;
	top: 40px;
}

#ldp-frame-block-meso-baby-skin {
	--swiper-navigation-size: 24px;
}

/* Custom SVG approach - hide default Swiper arrows since we use inline SVGs */
#ldp-frame-block-meso-baby-skin
	:is(.swiper-button-next, .swiper-button-prev)::after {
	display: none !important;
}

#ldp-frame-block-meso-baby-skin :is(.swiper-button-next, .swiper-button-prev) {
	background: rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#ldp-frame-block-meso-baby-skin
	:is(.swiper-button-next, .swiper-button-prev):hover {
	background: #004c5c;
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 76, 92, 0.3);
}

/* Style for img elements (if using external SVG files) */
#ldp-frame-block-meso-baby-skin
	:is(.swiper-button-next, .swiper-button-prev)
	img {
	width: var(--swiper-navigation-size, 24px);
	height: var(--swiper-navigation-size, 24px);
	filter: brightness(0) saturate(100%) invert(19%) sepia(50%) saturate(2196%)
		hue-rotate(183deg) brightness(94%) contrast(101%);
	transition: filter 0.3s ease;
	pointer-events: none;
}

#ldp-frame-block-meso-baby-skin
	:is(.swiper-button-next, .swiper-button-prev):hover
	img {
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
		hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Alternative CSS-only approach with data URLs (commented out - uncomment to use instead of inline SVG)
#ldp-frame-block-meso-baby-skin .swiper-button-next::after {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23333' d='M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: var(--swiper-navigation-size, 24px);
	height: var(--swiper-navigation-size, 24px);
	display: block;
}

#ldp-frame-block-meso-baby-skin .swiper-button-prev::after {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23333' d='M169.4 297.4C156.9 309.9 156.9 330.2 169.4 342.7L361.4 534.7C373.9 547.2 394.2 547.2 406.7 534.7C419.2 522.2 419.2 501.9 406.7 489.4L237.3 320L406.6 150.6C419.1 138.1 419.1 117.8 406.6 105.3C394.1 92.8 373.8 92.8 361.3 105.3L169.3 297.3z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: var(--swiper-navigation-size, 24px);
	height: var(--swiper-navigation-size, 24px);
	display: block;
}
*/

#ldp-frame-block-meso-baby-skin
	.customer-images-swiper
	:is(.swiper-button-next, .swiper-button-prev) {
	--swiper-navigation-sides-offset: 2px;
}

#ldp-frame-block-meso-baby-skin
	.certificatates-swiper
	:is(.swiper-button-next, .swiper-button-prev) {
	--swiper-navigation-sides-offset: 40px;
}

/* Hotline phone ring styles */

#ldp-frame-main-section-nang-nguc-noi-soi + #ldp-with-source-adword {
	display: grid;
	gap: 10px;
	justify-items: center;
}

#ldp-frame-main-section-nang-nguc-noi-soi ~ .zalo-chat-widget {
	bottom: 35px;
	left: 30px;
	right: 0;
	position: fixed;
}

@media (min-width: 1024px) {
	.ldp-frame-vouchers img.voucher {
		opacity: 0;
		transform: translateY(40px);
		transition:
			opacity 0.6s ease-out,
			transform 0.6s ease-out;
		will-change: opacity, transform;
	}
}

@media (min-width: 769px) {
	.ldp_btn_fixed {
		--ldp-btn-fixed-bottom: 35px;
		--ldp-btn-fixed-right: 30px;
	}
}

/* Reduce animation on mobile for better performance */
@media (max-width: 768px) {
	#ldp-frame-block-meso-baby-skin .headline__number {
		animation-duration: 3s; /* Slower on mobile */
		font-size: 1.6em; /* Slightly smaller on mobile */
	}

	.ldp_btn_fixed {
		right: var(--ldp-btn-fixed-right, 10px) !important;
		bottom: var(--ldp-btn-fixed-bottom, 5%);
	}

	#ldp-frame-main-section-nang-nguc-noi-soi + #ldp-with-source-adword {
		--ldp-btn-fixed-bottom: 4px;
	}
}

@media (min-width: 361px) and (max-width: 490px) {
	.sortBtnLabelAll {
		padding-left: 7px;
	}

	.ldp-frame-footer-img,
	.ldp-frame-jwtmch-img-sale,
	.ldp-frame-display-block-expand li {
		max-width: 430px;
	}

	.ldp-frame-jwtmch-img-sale img,
	.ldp-frame-gallery li img,
	.ldp-frame-display-block-expand li img {
		width: 100%;
	}

	.ldp-frame-gallery li {
		min-width: 160px;
	}

	.ldp-frame-footer-img img {
		max-width: 430px;

		width: 100%;

		padding: 10px;

		height: 300px;
	}

	.ldp-hotline-phone-ring-wrap {
		bottom: 3%;

		left: 0;

		z-index: 9999;
	}

	div > .ldp-playout-form-main {
		display: flex;

		justify-content: center;
	}

	.ldp-frame-main-page-form .ldp-playout-form-main {
		min-height: var(--ldp-frame-main-page-form-min-h, 390px);
	}

	.ldp-images-main {
		max-width: 430px;

		width: 100%;

		max-height: 500px;

		height: 100%;
	}

	.ldp-frame-jwtmch-img-sale {
		height: 380px;
	}
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
	#ldp-frame-block-meso-baby-skin .headline__number {
		animation: none;
		transform: none;
	}

	#ldp-frame-block-meso-baby-skin .headline__number:hover {
		animation: none;
		transform: scale(1.02);
		transition: transform 0.2s ease;
	}
}