.elementor-3633 .elementor-element.elementor-element-dda4a93{--display:flex;--min-height:400px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3633 .elementor-element.elementor-element-dda4a93:not(.elementor-motion-effects-element-type-background), .elementor-3633 .elementor-element.elementor-element-dda4a93 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://vilacogroup.vn/wp-content/uploads/2026/08/vilaco-banner-scaled.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-3633 .elementor-element.elementor-element-da73d9c .elementor-heading-title{font-family:var( --e-global-typography-346b81a-font-family ), Sans-serif;font-size:var( --e-global-typography-346b81a-font-size );font-weight:var( --e-global-typography-346b81a-font-weight );line-height:var( --e-global-typography-346b81a-line-height );color:var( --e-global-color-b2d82aa );}.elementor-3633 .elementor-element.elementor-element-c1ac576{--display:flex;--padding-top:48px;--padding-bottom:48px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-3633 .elementor-element.elementor-element-c1ac576{--content-width:1200px;}}@media(min-width:1025px){.elementor-3633 .elementor-element.elementor-element-dda4a93:not(.elementor-motion-effects-element-type-background), .elementor-3633 .elementor-element.elementor-element-dda4a93 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}@media(max-width:1024px){.elementor-3633 .elementor-element.elementor-element-da73d9c .elementor-heading-title{font-size:var( --e-global-typography-346b81a-font-size );line-height:var( --e-global-typography-346b81a-line-height );}.elementor-3633 .elementor-element.elementor-element-c1ac576{--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}}@media(max-width:767px){.elementor-3633 .elementor-element.elementor-element-dda4a93{--min-height:150px;}.elementor-3633 .elementor-element.elementor-element-da73d9c .elementor-heading-title{font-size:var( --e-global-typography-346b81a-font-size );line-height:var( --e-global-typography-346b81a-line-height );}}/* Start custom CSS for html, class: .elementor-element-ca30189 *//* Thư ngỏ — dán vào Elementor → Site Settings → Custom CSS (hoặc Custom CSS của trang).
   Breakpoint theo Elementor: tablet ≤1024px, mobile ≤767px. */

.hd-letter {
	--hd-letter-font: "Manrope", sans-serif;
	--hd-letter-text: #1c1f2a;
	--hd-letter-accent: #ff8200;                       /* vòng tròn icon quote */
	--hd-letter-card-border: rgba(138, 21, 56, 0.12);  /* viền khung trích dẫn */
	--hd-letter-card-shadow: 0 10px 20px rgba(0, 174, 239, 0.15);
	--hd-letter-divider: rgba(0, 0, 0, 0.1);

	--hd-letter-gap: 30px;               /* khoảng cách 2 cột */
	--hd-letter-aside-width: 360px;      /* chiều rộng cột ảnh */
	--hd-letter-icon-size: 54px;
	--hd-letter-quote-icon: 22px;
	--hd-letter-title-size: 22px;
	--hd-letter-body-size: 14px;
	--hd-letter-quote-size: 16px;

	display: grid;
	grid-template-columns: var(--hd-letter-aside-width) 1fr;
	align-items: start;
	gap: var(--hd-letter-gap);
	color: var(--hd-letter-text);
	font-family: var(--hd-letter-font);
}

.hd-letter :is(h2, p, blockquote, span, strong) {
	font-family: inherit;
}

/* Cột trái: ảnh + khung trích dẫn */
.hd-letter__card {
	margin: 0;
}

.hd-letter__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.hd-letter__card-body {
	position: relative;
	padding: 45px 30px 45px;
	border: 10px solid var(--hd-letter-card-border);
	border-radius: 10px;
	box-shadow: var(--hd-letter-card-shadow);
	text-align: center;
}

/* Vòng tròn quote đè lên mép trên khung */
.hd-letter__quote-icon {
	position: absolute;
	top: -10px;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--hd-letter-icon-size);
	height: var(--hd-letter-icon-size);
	box-sizing: border-box;
	border: 2px solid var(--hd-letter-accent);
	border-radius: 50%;
	background: var(--hd-letter-accent);
	transform: translate(-50%, -50%);
}

.hd-letter__quote-icon img {
	display: block;
	width: var(--hd-letter-quote-icon);
	height: var(--hd-letter-quote-icon);
}

.hd-letter__quote {
	margin: 0;
	padding: 0;
	border: 0;
}

.hd-letter__quote p {
	margin: 0;
	font-size: var(--hd-letter-quote-size);
	font-style: italic;
	line-height: 1.6;
}

.hd-letter__divider {
	display: block;
	width: 100px;
	height: 1px;
	margin: 16px auto;
	background: var(--hd-letter-divider);
}

.hd-letter__author {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hd-letter__author-name {
	font-size: 16px;
	font-weight: 600;
}

.hd-letter__author-role {
	font-size: 12px;
	line-height: 1.5;
}

/* Cột phải: nội dung thư */
.hd-letter__title {
	margin: 0 0 12px;
	color: var(--hd-letter-text);
	font-size: var(--hd-letter-title-size);
	font-weight: 700;
	line-height: 1.3;
}

.hd-letter__content p {
	margin: 0 0 18px;
	font-size: var(--hd-letter-body-size);
	line-height: 1.6;
}

.hd-letter__content .hd-letter__signature {
	margin: 28px 0 0;
	text-align: right;
}

/* Tablet ≤1024px */
@media (max-width: 1024px) {
	.hd-letter {
		--hd-letter-aside-width: 300px;
		--hd-letter-gap: 24px;
		--hd-letter-icon-size: 48px;
		--hd-letter-quote-icon: 20px;
	}

	.hd-letter__card-body {
		padding: 40px 20px 36px;
	}
}

/* Mobile ≤767px: xếp chồng, ảnh + trích dẫn lên trên */
@media (max-width: 767px) {
	.hd-letter {
		--hd-letter-gap: 32px;
		--hd-letter-title-size: 20px;
		--hd-letter-body-size: 15px;

		grid-template-columns: 1fr;
	}

	.hd-letter__aside {
		width: 100%;
		max-width: 420px;
		margin: 0 auto;
	}
}/* End custom CSS */