/*
Theme Name:   Flatsome Child – Mai Việt Land
Description:  Child theme cho muanhaduan.com. CSS chia vùng theo prefix: .mvl- (website chính, landing chung), .cs-lp- (landing Central Square Thái Nguyên).
Author:       Mai Việt Land
Template:     flatsome
Version:      1.1.0
Text Domain:  mvl
*/

/* ==========================================================================
   LANDING CHUNG – template "Landing – Header/Footer riêng"
   ========================================================================== */

/* Header landing dính đầu trang. Dải trên cùng (topbar) trượt đi, chỉ thanh menu giữ lại:
   top = chiều cao admin bar − chiều cao topbar. */
.mvl-lp-header {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--mvl-lp-topbar-h, 0px));
	z-index: 40;
}

/* Bù chiều cao header dính khi bấm anchor (#vi-tri, #mat-bang...) */
.mvl-landing .section[id],
.mvl-landing section[id] {
	scroll-margin-top: 80px;
}

.mvl-lp-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mvl-lp-nav li {
	margin: 0;
	list-style: none;
}

/* ==========================================================================
   CENTRAL SQUARE – Biến màu, font
   ========================================================================== */

.cs-lp {
	--cs-teal: #1D5F74;
	--cs-teal-dark: #0A4658;
	--cs-copper: #C0643C;
	--cs-terra: #E58C64;
	--cs-peach: #F0C3A6;
	--cs-peach-2: #F3C9AE;
	--cs-cream: #F6E7D6;
	--cs-silk: #F8EDE4;
	--cs-text: #1D1919;
	--cs-muted: #676767;
	--cs-font: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--mvl-lp-topbar-h: 34px;
	font-family: var(--cs-font);
	color: var(--cs-text);
	background: #FFFFFF;
}

.cs-lp h1,
.cs-lp h2,
.cs-lp h3,
.cs-lp h4,
.cs-lp h5,
.cs-lp h6,
.cs-lp .button,
.cs-lp input,
.cs-lp select,
.cs-lp textarea,
.cs-lp button {
	font-family: var(--cs-font);
}

/* Nút pill (CTA chính) – gắn class="cs-lp-pill" cho [button] */
.cs-lp .button.cs-lp-pill {
	background-color: #A9502C;
	background-image: linear-gradient(180deg, #D17C55 0%, #A9502C 100%);
	border: 0;
	border-radius: 999px;
	color: #FFFFFF;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 0 6px 16px rgba(169, 80, 44, .28);
}

.cs-lp .button.cs-lp-pill:hover,
.cs-lp .button.cs-lp-pill:focus {
	filter: brightness(1.06);
	color: #FFFFFF;
	box-shadow: 0 6px 16px rgba(169, 80, 44, .28);
}

/* ==========================================================================
   CENTRAL SQUARE – Header riêng (UX Block: cs-lp-header)
   ========================================================================== */

/* ----- Dải trên cùng ----- */
.cs-lp-topbar {
	background-color: var(--cs-teal-dark);
	color: var(--cs-cream);
	font-size: 13px;
	letter-spacing: .02em;
}

.cs-lp-topbar .col {
	padding-bottom: 0;
}

.cs-lp-topbar p {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	height: var(--mvl-lp-topbar-h);
	line-height: var(--mvl-lp-topbar-h);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
}

.cs-lp-topbar a {
	color: var(--cs-cream);
	font-weight: 700;
}

.cs-lp-topbar a:hover {
	color: var(--cs-peach-2);
}

/* ----- Thanh menu teal ----- */
.cs-lp-header {
	background-color: var(--cs-teal);
	box-shadow: 0 2px 14px rgba(0, 0, 0, .15);
}

.cs-lp-header .col {
	padding-bottom: 0;
}

.cs-lp-header-row {
	min-height: 80px;
}

/* Logo chữ (thay bằng [ux_image] khi có logo chính thức). Desktop: logo giữa, theo thiết kế */
.cs-lp-logo-col {
	text-align: center;
}

.cs-lp-logo-col p {
	margin: 0;
}

.cs-lp-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	color: #FFFFFF;
	text-decoration: none;
}

.cs-lp-logo:hover {
	color: #FFFFFF;
}

.cs-lp-logo__main {
	font-size: 30px;
	font-weight: 500;
	letter-spacing: .08em;
}

.cs-lp-logo__sub {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: -2px;
}

.cs-lp-logo__sub em {
	font-size: 24px;
	color: var(--cs-peach-2);
}

.cs-lp-logo__sub small {
	font-size: 10px;
	letter-spacing: .18em;
	color: #FFFFFF;
}

/* Menu 2 bên (shortcode [mvl_lp_menu class="cs-lp-nav ..."]) */
.cs-lp-nav ul {
	display: flex;
	gap: 30px;
}

.cs-lp-nav--right ul {
	justify-content: flex-end;
}

.cs-lp-nav li {
	position: relative;
}

.cs-lp-nav a {
	display: block;
	padding: 28px 0;
	white-space: nowrap;
	color: #FFFFFF;
	font-size: 15px;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.cs-lp-nav a:hover,
.cs-lp-nav a:focus {
	color: var(--cs-peach-2);
}

/* Dropdown "Bàn giao" */
.cs-lp-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: -20px;
	z-index: 50;
	min-width: 260px;
	flex-direction: column;
	gap: 0;
	padding: 8px 0;
	background: #FFFFFF;
	box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
}

.cs-lp-nav li:hover > .sub-menu,
.cs-lp-nav li:focus-within > .sub-menu {
	display: flex;
}

.cs-lp-nav .sub-menu a {
	padding: 12px 20px;
	font-size: 14px;
	color: var(--cs-teal);
}

.cs-lp-nav .sub-menu a:hover,
.cs-lp-nav .sub-menu a:focus {
	color: var(--cs-copper);
	background: var(--cs-silk);
}

/* Nút mở menu mobile */
.cs-lp .button.cs-lp-burger {
	margin: 0;
	color: #FFFFFF;
	font-size: 14px;
	letter-spacing: .04em;
}

/* Menu trong popup mobile (lightbox id="cs-lp-menu") */
.cs-lp-nav.cs-lp-nav--mobile ul {
	flex-direction: column;
	gap: 0;
}

.cs-lp-nav--mobile a {
	padding: 14px 0;
	color: var(--cs-teal);
	border-bottom: 1px solid rgba(29, 95, 116, .2);
}

.cs-lp-nav--mobile a:hover,
.cs-lp-nav--mobile a:focus {
	color: var(--cs-copper);
}

.cs-lp-nav--mobile .sub-menu {
	display: flex;
	position: static;
	min-width: 0;
	padding: 0 0 0 16px;
	box-shadow: none;
	background: none;
}

.cs-lp-nav--mobile .sub-menu a {
	padding: 12px 0;
	font-size: 13px;
}

/* Màn hẹp hơn 1280px: menu 2 bên chật, thu nhỏ chữ và khoảng cách */
@media (max-width: 1279px) {
	.cs-lp-nav ul {
		gap: 20px;
	}

	.cs-lp-nav a {
		font-size: 14px;
	}
}

@media (max-width: 1080px) {
	.cs-lp-nav ul {
		gap: 14px;
	}

	.cs-lp-nav a {
		font-size: 12px;
	}
}

.cs-lp-nav.cs-lp-nav--mobile a {
	font-size: 15px;
}

.cs-lp-nav.cs-lp-nav--mobile .sub-menu a {
	font-size: 13px;
}

/* Tablet trở xuống: logo bên trái, nút menu bên phải (theo bản mobile) */
@media (max-width: 849px) {
	.cs-lp-header-row {
		min-height: 64px;
	}

	.cs-lp-logo-col {
		text-align: left;
	}

	.cs-lp-logo {
		align-items: flex-start;
	}

	.cs-lp-logo__main {
		font-size: 22px;
	}

	.cs-lp-logo__sub em {
		font-size: 17px;
	}

	.cs-lp-logo__sub small {
		font-size: 8px;
	}
}

@media (max-width: 549px) {
	.cs-lp {
		--mvl-lp-topbar-h: 28px;
	}

	.cs-lp-topbar {
		font-size: 11px;
	}
}

/* ==========================================================================
   CENTRAL SQUARE – Footer riêng (UX Block: cs-lp-footer)
   ========================================================================== */

.cs-lp-footer {
	background-color: var(--cs-teal);
	color: var(--cs-cream);
	font-size: 13px;
	line-height: 1.6;
}

.cs-lp-footer .col {
	padding-bottom: 0;
}

.cs-lp-footer p {
	margin: 0;
}

.cs-lp-footer strong {
	color: #FFFFFF;
}

.cs-lp-footer .cs-lp-logo {
	align-items: flex-start;
}

.cs-lp-footer .cs-lp-logo__main {
	font-size: 24px;
}

.cs-lp-footer .cs-lp-logo__sub em {
	font-size: 18px;
}

.cs-lp-footer .cs-lp-logo__sub small {
	font-size: 9px;
	color: var(--cs-cream);
}

.cs-lp-footer-legal {
	text-align: right;
}

@media (max-width: 849px) {
	.cs-lp-footer-legal {
		text-align: left;
		padding-top: 16px;
	}

	/* chừa chỗ cho thanh dính đáy */
	.cs-lp-footer {
		padding-bottom: 96px !important;
	}
}

/* ==========================================================================
   CENTRAL SQUARE – Nút nổi (desktop) & thanh dính đáy (mobile)
   ========================================================================== */

/* ----- Nút nổi tròn bên phải ----- */
.cs-lp-float {
	position: fixed;
	right: 20px;
	bottom: 28px;
	z-index: 30;
	align-items: center;
	gap: 10px;
}

.cs-lp .button.cs-lp-float-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--cs-teal);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

.cs-lp .button.cs-lp-float-btn:hover {
	background-color: var(--cs-teal-dark);
	color: #FFFFFF;
}

.cs-lp .button.cs-lp-float-btn i {
	margin: 0;
	font-size: 20px;
}

/* Nút có icon: ẩn chữ bằng mắt, vẫn để lại cho trình đọc màn hình */
.cs-lp .button.cs-lp-float-btn--icon span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.cs-lp .button.cs-lp-float-btn--top {
	width: 40px;
	height: 40px;
	background-color: rgba(120, 120, 120, .55);
	box-shadow: none;
}

.cs-lp .button.cs-lp-float-btn--top i {
	font-size: 16px;
}

/* ----- Thanh dính đáy mobile: Gọi | Zalo | Nhận bảng giá ----- */
.cs-lp-mbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	display: grid;
	grid-template-columns: 1fr 1fr 1.5fr;
	gap: 0;
	background-color: var(--cs-teal);
}

.cs-lp .button.cs-lp-mbar-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: #FFFFFF;
	font-weight: 600;
	box-shadow: none;
}

.cs-lp .button.cs-lp-mbar-btn + .button.cs-lp-mbar-btn {
	border-left: 1px solid rgba(255, 255, 255, .25);
}

.cs-lp .button.cs-lp-mbar-btn.cs-lp-pill {
	background-image: linear-gradient(180deg, #D17C55 0%, #A9502C 100%);
	border-left: 0;
	font-size: 13px;
}

/* Bảo đảm chỉ một trong hai hiện theo breakpoint thiết kế (960px) */
@media (max-width: 960px) {
	.cs-lp-float {
		display: none !important;
	}
}

@media (min-width: 961px) {
	.cs-lp-mbar {
		display: none !important;
	}
}

/* ==========================================================================
   WEBSITE CHÍNH – Biến màu (navy / gold)
   ========================================================================== */

.mvl-site {
	--mvl-navy: #0B1F3A;
	--mvl-navy-2: #16305A;
	--mvl-dark: #081629;
	--mvl-gold: #C9A24B;
	--mvl-gold-2: #E8D5A3;
	--mvl-ivory: #F6F3EC;
	--mvl-line: #E4DED2;
	--mvl-text: #1A1F2B;
	--mvl-muted: #5B6475;
	--mvl-serif: 'Playfair Display', Georgia, serif;
}

/* ----- Chữ ----- */
.mvl-h1,
.mvl-page h1.mvl-h1 {
	margin: 0 0 14px;
	font-family: var(--mvl-serif);
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--mvl-navy);
}

.mvl-h2,
.mvl-sec-title h2 {
	margin: 0 0 24px;
	font-family: var(--mvl-serif);
	font-size: clamp(28px, 3.2vw, 38px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--mvl-navy);
}

.mvl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mvl-muted);
}

.mvl-eyebrow--gold {
	color: var(--mvl-gold-2);
}

.mvl-eyebrow--gold::before {
	content: "";
	width: 40px;
	height: 1px;
	background: var(--mvl-gold);
}

.mvl-lead {
	font-size: 18px;
	line-height: 1.6;
}

.mvl-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 14px;
	color: var(--mvl-muted);
}

.mvl-empty {
	padding: 24px;
	border: 1px dashed var(--mvl-line);
	color: var(--mvl-muted);
	text-align: center;
}

/* ----- Nút ----- */
.mvl-site .button.primary,
.mvl-site .button.mvl-btn-navy {
	background-color: var(--mvl-navy);
	color: #FFFFFF;
	border-radius: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
}

.mvl-site .button.mvl-btn-gold {
	background-color: var(--mvl-gold);
	border-color: var(--mvl-gold);
	color: var(--mvl-navy);
	border-radius: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 700;
}

.mvl-site .button.mvl-btn-outline,
.mvl-site .button.is-outline.mvl-btn-outline {
	border: 1px solid var(--mvl-navy);
	color: var(--mvl-navy);
	border-radius: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
}

.mvl-site .button.mvl-btn-outline:hover {
	background: var(--mvl-navy);
	color: #FFFFFF;
}

.mvl-site .button.mvl-btn-ghost {
	border: 1px solid rgba(255, 255, 255, .5);
	color: #FFFFFF;
	border-radius: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
}

/* ----- Ô chừa ảnh (khi chưa có ảnh thật) ----- */
.mvl-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background-color: #E4DED2;
	background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(11, 31, 58, .06) 14px 15px);
	font-size: 13px;
	color: #5B6475;
}

.mvl-ph--dark {
	background-color: #16305A;
	background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, .05) 18px 19px);
}

/* ----- Section ----- */
.mvl-section {
	padding: 88px 0;
}

.mvl-section--ivory {
	background: var(--mvl-ivory);
}

.mvl-section--navy {
	background: var(--mvl-navy);
	color: #FFFFFF;
}

.mvl-section--navy .mvl-h2,
.mvl-section--navy h2,
.mvl-section--navy h3 {
	color: #FFFFFF;
}

@media (max-width: 849px) {
	.mvl-section {
		padding: 56px 0;
	}
}

/* ----- Breadcrumb ----- */
.mvl-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--mvl-muted);
}

.mvl-breadcrumb li {
	margin: 0;
}

.mvl-breadcrumb li + li::before {
	content: "/";
	margin-right: 8px;
}

.mvl-breadcrumb [aria-current] {
	color: var(--mvl-text);
}

/* ==========================================================================
   WEBSITE CHÍNH – Lưới thẻ, thẻ dự án / bài viết
   ========================================================================== */

.mvl-grid {
	display: grid;
	gap: 28px;
}

.mvl-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

.mvl-grid__item[hidden] {
	display: none;
}

.mvl-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #FFFFFF;
	border: 1px solid var(--mvl-line);
	transition: box-shadow .2s, transform .2s;
}

.mvl-card:hover {
	box-shadow: 0 14px 36px rgba(11, 31, 58, .12);
	transform: translateY(-2px);
}

.mvl-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.mvl-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mvl-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 22px;
}

.mvl-card__title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mvl-navy);
}

.mvl-card__title a {
	color: inherit;
}

.mvl-card__loc {
	margin: 0;
	font-size: 14px;
	color: var(--mvl-muted);
}

.mvl-card__loc::before {
	content: "\25CF";
	margin-right: 6px;
	font-size: 9px;
	color: var(--mvl-gold);
	vertical-align: 2px;
}

.mvl-card__specs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 16px;
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--mvl-line);
	font-size: 14px;
}

.mvl-card__specs dt {
	color: var(--mvl-muted);
	font-weight: 400;
}

.mvl-card__specs dd {
	margin: 0;
	font-weight: 600;
}

.mvl-card__price {
	color: var(--mvl-navy);
	font-weight: 700;
}

.mvl-site .button.mvl-card__cta {
	align-self: flex-end;
	margin: auto 0 0;
}

.mvl-card__excerpt {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--mvl-muted);
}

.mvl-card--post {
	border: 0;
}

.mvl-section--ivory .mvl-card--post {
	background: #FFFFFF;
}

.mvl-card--post .mvl-card__title {
	font-size: 18px;
	line-height: 1.4;
}

/* Nhãn trạng thái */
.mvl-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	background: var(--mvl-navy);
	color: #FFFFFF;
	border: 1px solid var(--mvl-navy);
}

.mvl-badge--sap-mo-ban {
	background: var(--mvl-gold);
	border-color: var(--mvl-gold);
	color: var(--mvl-navy);
}

.mvl-badge--da-ban-giao {
	background: #FFFFFF;
	border-color: var(--mvl-line);
	color: var(--mvl-text);
}

.mvl-project__head .mvl-badge {
	position: static;
	display: inline-block;
	margin-bottom: 12px;
}

/* Tab */
.mvl-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.mvl-tab,
.mvl-tabs--links a {
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--mvl-line);
	background: #FFFFFF;
	color: var(--mvl-text);
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.mvl-tab[aria-selected="true"] {
	background: var(--mvl-navy);
	border-color: var(--mvl-navy);
	color: #FFFFFF;
}

.mvl-tabs--links {
	gap: 0;
	border-bottom: 1px solid var(--mvl-line);
}

.mvl-tabs--links a {
	display: inline-flex;
	align-items: center;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--mvl-muted);
}

.mvl-tabs--links a[aria-current] {
	border-bottom-color: var(--mvl-gold);
	color: var(--mvl-navy);
}

/* ==========================================================================
   TRANG CHỦ
   ========================================================================== */

.mvl-hero {
	background-color: var(--mvl-dark);
	background-image: linear-gradient(rgba(8, 22, 41, .62), rgba(8, 22, 41, .62)), repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, .05) 18px 19px);
	color: #FFFFFF;
}

.mvl-hero h1 {
	max-width: 760px;
	margin: 0 0 20px;
	font-family: var(--mvl-serif);
	font-size: clamp(34px, 5vw, 56px);
	font-weight: 600;
	line-height: 1.12;
	color: #FFFFFF;
	text-wrap: balance;
}

.mvl-hero .mvl-lead {
	max-width: 620px;
	color: rgba(255, 255, 255, .86);
}

/* Ô tìm kiếm */
.mvl-search {
	max-width: 960px;
	margin: 12px 0 40px;
	background: #FFFFFF;
	color: var(--mvl-text);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

.mvl-search__tabs {
	display: flex;
	border-bottom: 1px solid var(--mvl-line);
}

.mvl-search__tabs button {
	flex: 1;
	min-height: 52px;
	margin: 0;
	border: 0;
	border-bottom: 3px solid transparent;
	background: var(--mvl-ivory);
	color: var(--mvl-muted);
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.mvl-search__tabs button[aria-selected="true"] {
	background: #FFFFFF;
	color: var(--mvl-navy);
	border-bottom-color: var(--mvl-gold);
}

.mvl-search__form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
	gap: 16px;
	align-items: end;
	padding: 20px;
}

.mvl-search__form[hidden] {
	display: none;
}

.mvl-search__form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--mvl-muted);
}

.mvl-search__form select {
	height: 48px;
	margin: 0;
	border: 1px solid var(--mvl-line);
	font-size: 15px;
	color: var(--mvl-text);
	box-shadow: none;
}

.mvl-site .button.mvl-search__submit {
	min-height: 48px;
	margin: 0;
}

/* Số liệu */
.mvl-stats dl,
dl.mvl-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	margin: 0;
	padding-top: 28px;
	border-top: 1px solid rgba(232, 213, 163, .3);
}

.mvl-stats dl > div,
dl.mvl-stats > div {
	display: flex;
	flex-direction: column-reverse;
	gap: 6px;
	padding-right: 24px;
}

.mvl-stats dt {
	font-size: 14px;
	font-weight: 400;
	color: rgba(255, 255, 255, .78);
}

.mvl-stats dd {
	margin: 0;
	font-family: var(--mvl-serif);
	font-size: 40px;
	color: var(--mvl-gold);
}

.mvl-stats--light {
	border-top-color: var(--mvl-line);
}

.mvl-stats--light dt {
	color: var(--mvl-muted);
}

.mvl-stats--light dd {
	color: var(--mvl-navy);
}

/* BĐS công nghiệp – khối giới thiệu */
.mvl-cn-promo .mvl-lead {
	color: rgba(255, 255, 255, .84);
}

.mvl-langs {
	display: flex;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--mvl-gold-2);
}

.mvl-langs li {
	margin: 0;
	padding: 6px 10px;
	border: 1px solid rgba(232, 213, 163, .45);
}

.mvl-cn-types .col {
	padding: 0;
}

.mvl-cn-types {
	gap: 1px;
	background: rgba(232, 213, 163, .25);
	border: 1px solid rgba(232, 213, 163, .25);
}

.mvl-cn-type a {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 28px;
	background: var(--mvl-navy);
	color: #FFFFFF;
}

.mvl-cn-type a::before {
	content: "";
	width: 32px;
	height: 2px;
	background: var(--mvl-gold);
}

.mvl-cn-type strong {
	font-size: 17px;
	font-weight: 600;
}

.mvl-cn-type span {
	font-size: 14px;
	color: rgba(255, 255, 255, .72);
}

.mvl-cn-type a:hover strong {
	color: var(--mvl-gold-2);
}

/* Khu vực */
.mvl-grid--regions {
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
	gap: 20px;
}

.mvl-region {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	color: #FFFFFF;
}

.mvl-region .mvl-ph,
.mvl-region__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mvl-region::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 22, 41, .85), rgba(8, 22, 41, 0) 60%);
}

.mvl-region__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px;
}

.mvl-region__name {
	font-size: 22px;
	font-weight: 700;
}

.mvl-region__count {
	font-size: 14px;
	color: var(--mvl-gold-2);
}

.mvl-region:hover {
	color: #FFFFFF;
	box-shadow: 0 14px 36px rgba(11, 31, 58, .2);
}

/* Chủ đầu tư */
.mvl-devs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mvl-devs li {
	margin: 0;
}

.mvl-devs a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 88px;
	padding: 12px;
	border: 1px solid var(--mvl-line);
	font-size: 17px;
	font-weight: 700;
	color: var(--mvl-navy);
	text-align: center;
}

.mvl-devs img {
	max-height: 56px;
	width: auto;
}

.mvl-devs--card a {
	height: 140px;
}

.mvl-devs__count {
	font-size: 13px;
	font-weight: 400;
	color: var(--mvl-muted);
}

/* Vì sao chọn */
.mvl-why .col-inner {
	padding-top: 20px;
	border-top: 2px solid var(--mvl-gold);
}

.mvl-why__no {
	display: block;
	margin-bottom: 8px;
	font-family: var(--mvl-serif);
	font-size: 28px;
	color: var(--mvl-navy-2);
}

.mvl-why h3 {
	margin: 0 0 8px;
	font-size: 19px;
	color: var(--mvl-navy);
}

.mvl-why p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--mvl-muted);
}

/* Tiêu đề section + liên kết "Xem tất cả" cùng hàng */
.mvl-sec-head .col {
	padding-bottom: 0;
}

.mvl-sec-head .mvl-h2 {
	margin-bottom: 0;
}

.mvl-sec-head__link a {
	font-size: 15px;
	font-weight: 600;
	color: var(--mvl-navy-2);
}

.mvl-sec-head__link {
	text-align: right;
}

@media (max-width: 549px) {
	.mvl-sec-head__link {
		text-align: left;
	}
}

/* ==========================================================================
   FORM (Contact Form 7)
   ========================================================================== */

.mvl-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mvl-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mvl-form--grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 16px;
}

.mvl-form--grid .mvl-field--full,
.mvl-form--grid .wpcf7-response-output {
	grid-column: 1 / -1;
}

.mvl-form p,
.mvl-form .mvl-field {
	margin: 0;
}

.mvl-form label,
.mvl-form .mvl-label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

.mvl-form input[type="text"],
.mvl-form input[type="tel"],
.mvl-form input[type="email"],
.mvl-form input[type="date"],
.mvl-form select {
	height: 48px;
	margin: 0;
	border: 1px solid var(--mvl-line);
	background: #FFFFFF;
	box-shadow: none;
	font-weight: 400;
}

.mvl-form textarea {
	min-height: 0;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--mvl-line);
	background: #FFFFFF;
	box-shadow: none;
	font-weight: 400;
}

.mvl-form input:focus,
.mvl-form select:focus,
.mvl-form textarea:focus {
	border-color: var(--mvl-navy-2);
	box-shadow: 0 0 0 1px var(--mvl-navy-2);
}

.mvl-form .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.mvl-form .wpcf7-radio label {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-weight: 400;
}

.mvl-form .wpcf7-list-item {
	margin: 0;
}

.mvl-consent,
.mvl-consent label {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--mvl-muted);
}

.mvl-consent label {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}

.mvl-consent input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.mvl-form .button.mvl-submit {
	width: 100%;
	min-height: 52px;
	margin: 0;
	font-size: 16px;
}

.mvl-form--inline .mvl-consent {
	font-size: 12px;
}

.mvl-form--row {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: end;
	gap: 12px;
}

.mvl-form--row .mvl-consent,
.mvl-form--row .wpcf7-response-output {
	grid-column: 1 / -1;
}

@media (max-width: 549px) {
	.mvl-form--row {
		grid-template-columns: 1fr;
	}
}

.mvl-form-box {
	padding: 32px;
	background: var(--mvl-ivory);
}

.mvl-contact-list {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 12px;
	margin: 12px 0 0;
	font-size: 16px;
}

.mvl-contact-list dt {
	font-weight: 400;
	color: var(--mvl-muted);
}

.mvl-contact-list dd {
	margin: 0;
	font-weight: 700;
	color: var(--mvl-navy);
}

/* ==========================================================================
   HEADER (Flatsome) – nút hotline, logo chữ
   ========================================================================== */

.mvl-hotline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 18px;
	background: #C9A24B;
	color: #0B1F3A;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.mvl-hotline:hover {
	background: #0B1F3A;
	color: #FFFFFF;
}

@media (max-width: 849px) {
	.mvl-hotline {
		width: 44px;
		padding: 0;
		justify-content: center;
	}

	.mvl-hotline__num {
		display: none;
	}
}

/* ==========================================================================
   FOOTER (UX Block mvl-footer) + khối toàn cục (mvl-global)
   ========================================================================== */

.mvl-footer {
	background: #081629;
	color: rgba(255, 255, 255, .8);
	font-size: 14px;
}

.mvl-footer a {
	color: rgba(255, 255, 255, .8);
}

.mvl-footer a:hover {
	color: #E8D5A3;
}

.mvl-footer h3,
.mvl-footer .mvl-footer__title {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	color: #E8D5A3;
	text-transform: uppercase;
}

.mvl-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mvl-footer li {
	margin: 0 0 10px;
}

.mvl-footer .mvl-term-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
}

.mvl-footer .mvl-term-links li {
	margin: 0;
}

.mvl-footer__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	color: #FFFFFF;
}

.mvl-logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: #C9A24B;
	color: #0B1F3A;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
}

.mvl-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: 13px;
	color: rgba(255, 255, 255, .66);
}

.mvl-footer__bottom p {
	margin: 0;
}

.mvl-socials {
	display: flex;
	gap: 8px;
}

.mvl-site .button.mvl-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .25);
	background: none;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

/* Nút nổi desktop */
.mvl-float {
	position: fixed;
	right: 20px;
	bottom: 28px;
	z-index: 30;
	gap: 10px;
}

.mvl-site .button.mvl-float-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #0B1F3A;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}

.mvl-site .button.mvl-float-btn i {
	margin: 0;
	font-size: 20px;
}

.mvl-site .button.mvl-float-btn--gold {
	background: #C9A24B;
	color: #0B1F3A;
}

.mvl-site .button.mvl-float-btn--text {
	width: auto;
	height: 44px;
	padding: 0 12px;
	border-radius: 0;
	background: #FFFFFF;
	color: #0B1F3A;
}

.mvl-float-btn--icon span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Thanh dính đáy mobile */
.mvl-mbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	display: grid;
	grid-template-columns: 1fr 1fr 1.4fr;
	gap: 0;
	background: #FFFFFF;
	border-top: 1px solid #E4DED2;
}

.mvl-site .button.mvl-mbar-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: #0B1F3A;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.mvl-site .button.mvl-mbar-btn + .button.mvl-mbar-btn {
	border-left: 1px solid #E4DED2;
}

.mvl-site .button.mvl-mbar-btn--cta {
	background: #C9A24B;
	color: #0B1F3A;
	font-weight: 700;
}

@media (max-width: 960px) {
	.mvl-float {
		display: none !important;
	}

	.mvl-site .mvl-footer__bottom {
		padding-bottom: 72px !important;
	}
}

@media (min-width: 961px) {
	.mvl-mbar {
		display: none !important;
	}
}

/* Popup form */
.mvl-popup h2,
.mvl-popup .mvl-popup__title {
	margin: 0 0 6px;
	font-family: var(--mvl-serif);
	font-size: 26px;
	font-weight: 600;
	color: #0B1F3A;
}

.mvl-popup p {
	font-size: 14px;
	color: #5B6475;
}

/* ==========================================================================
   DANH SÁCH DỰ ÁN (/du-an/, /khu-vuc/..., /loai-hinh/...)
   ========================================================================== */

.mvl-page {
	padding-top: 24px;
}

.mvl-listing__head {
	max-width: 860px;
}

.mvl-listing__intro {
	font-size: 16px;
	line-height: 1.7;
	color: var(--mvl-muted);
}

.mvl-more.is-collapsed {
	max-height: 110px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 60%, transparent);
	mask-image: linear-gradient(#000 60%, transparent);
}

.mvl-more__btn {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mvl-navy-2);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: underline;
}

.mvl-listing__search {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 860px;
	height: 56px;
	margin: 20px 0 28px;
	padding: 0 6px 0 16px;
	border: 1px solid var(--mvl-line);
}

.mvl-listing__search input {
	flex: 1;
	height: 100%;
	margin: 0;
	border: 0;
	box-shadow: none;
	font-size: 16px;
}

.mvl-site .mvl-listing__search .button {
	margin: 0;
}

.mvl-listing__layout {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	margin-bottom: 64px;
}

.mvl-filter {
	flex: 0 0 280px;
	border: 1px solid var(--mvl-line);
}

.mvl-filter__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 18px;
	border-bottom: 1px solid var(--mvl-line);
}

.mvl-filter__head strong {
	font-size: 16px;
	color: var(--mvl-navy);
}

.mvl-filter__group {
	margin: 0;
	padding: 16px 18px;
	border: 0;
	border-bottom: 1px solid var(--mvl-line);
}

.mvl-filter__group legend,
.mvl-filter__label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
}

.mvl-filter__group label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
}

.mvl-filter__group select,
.mvl-filter__group input[type="number"] {
	height: 44px;
	margin: 0;
	border: 1px solid var(--mvl-line);
	box-shadow: none;
	font-weight: 400;
}

.mvl-filter__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 12px;
}

.mvl-filter .mvl-check {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	margin: 0;
	font-size: 15px;
	font-weight: 400;
}

.mvl-check input {
	width: 18px;
	height: 18px;
	margin: 0;
}

.mvl-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mvl-filter .mvl-pill {
	position: relative;
	margin: 0;
}

.mvl-pill input {
	position: absolute;
	opacity: 0;
}

.mvl-pill span {
	display: inline-block;
	padding: 8px 12px;
	border: 1px solid var(--mvl-line);
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

.mvl-pill input:checked + span {
	background: var(--mvl-navy);
	border-color: var(--mvl-navy);
	color: #FFFFFF;
}

.mvl-pill input:focus-visible + span {
	outline: 2px solid var(--mvl-gold);
}

.mvl-site .button.mvl-filter__submit {
	margin: 16px 18px;
	width: calc(100% - 36px);
}

.mvl-results {
	flex: 1;
	min-width: 0;
}

.mvl-results__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.mvl-results__sort label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

.mvl-results__sort select {
	height: 44px;
	margin: 0;
	border: 1px solid var(--mvl-line);
	box-shadow: none;
}

.mvl-site .button.mvl-results__filter-btn {
	display: none;
	margin: 0;
}

.mvl-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.mvl-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 6px 6px 12px;
	background: var(--mvl-ivory);
	font-size: 14px;
}

.mvl-chip a {
	padding: 0 6px;
	font-size: 16px;
	color: var(--mvl-text);
}

.mvl-chips__clear {
	font-size: 14px;
}

.mvl-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.mvl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--mvl-line);
	color: var(--mvl-text);
	font-weight: 600;
}

.mvl-pagination .page-numbers.current {
	background: var(--mvl-navy);
	border-color: var(--mvl-navy);
	color: #FFFFFF;
}

.mvl-term-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mvl-term-links li {
	margin: 0;
}

.mvl-section .mvl-term-links a {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--mvl-line);
	color: var(--mvl-text);
}

@media (max-width: 849px) {
	.mvl-listing__layout {
		display: block;
	}

	.mvl-filter {
		display: none;
		margin-bottom: 24px;
	}

	.mvl-filter.is-open {
		display: block;
	}

	.mvl-site .button.mvl-results__filter-btn {
		display: inline-block;
	}
}

/* ==========================================================================
   CHI TIẾT DỰ ÁN / MẶT BẰNG, CHỦ ĐẦU TƯ
   ========================================================================== */

.mvl-project__hero,
.mvl-dev__hero {
	padding-bottom: 40px;
	background: var(--mvl-ivory);
	border-bottom: 1px solid var(--mvl-line);
}

.mvl-page.mvl-project,
.mvl-page.mvl-dev {
	padding-top: 0;
}

.mvl-project__hero .container,
.mvl-dev__hero .container {
	padding-top: 24px;
}

.mvl-project__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}

.mvl-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: 1px;
	margin: 28px 0 0;
	background: var(--mvl-line);
	border: 1px solid var(--mvl-line);
}

.mvl-specs > div {
	padding: 16px 18px;
	background: #FFFFFF;
}

.mvl-specs dt {
	font-size: 13px;
	font-weight: 400;
	color: var(--mvl-muted);
}

.mvl-specs dd {
	margin: 4px 0 0;
	font-weight: 700;
	color: var(--mvl-navy);
}

.mvl-dev__intro {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
}

.mvl-dev__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 120px;
	background: #FFFFFF;
	border: 1px solid var(--mvl-line);
	font-weight: 700;
	color: var(--mvl-navy);
}

.mvl-dev__desc {
	max-width: 760px;
	color: var(--mvl-muted);
}

.mvl-subscribe__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.mvl-subscribe .mvl-form--inline {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	min-width: min(460px, 100%);
}

.mvl-subscribe .mvl-consent,
.mvl-subscribe .mvl-consent label,
.mvl-subscribe .mvl-consent a {
	grid-column: 1 / -1;
	color: rgba(255, 255, 255, .78);
}

.mvl-subscribe .mvl-submit {
	background: var(--mvl-gold);
	color: var(--mvl-navy);
}

/* BĐS công nghiệp: bộ lọc ngang */
.mvl-cn__filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin: 0 0 28px;
}

.mvl-cn__filter label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--mvl-muted);
}

.mvl-cn__filter select,
.mvl-cn__filter input {
	height: 44px;
	margin: 0;
	border: 1px solid var(--mvl-line);
	box-shadow: none;
}

.mvl-site .mvl-cn__filter .button {
	min-height: 44px;
	margin: 0;
}

/* ==========================================================================
   TIN TỨC, BÀI VIẾT
   ========================================================================== */

.mvl-feature {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	margin: 0 0 40px;
	background: var(--mvl-ivory);
	color: var(--mvl-text);
}

.mvl-feature__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.mvl-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mvl-feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: 32px;
}

.mvl-feature__title {
	font-family: var(--mvl-serif);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mvl-navy);
}

@media (max-width: 849px) {
	.mvl-feature {
		grid-template-columns: 1fr;
	}
}

.mvl-news {
	padding-bottom: 72px;
}

.mvl-article__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 56px;
	align-items: start;
	padding-bottom: 72px;
}

.mvl-article__main {
	max-width: 760px;
}

.mvl-article__title {
	font-size: clamp(30px, 4vw, 42px);
	line-height: 1.22;
}

.mvl-article__sapo {
	margin: 20px 0;
	font-size: 19px;
	line-height: 1.65;
	font-weight: 500;
	color: var(--mvl-text);
}

.mvl-article__content {
	font-size: 17px;
	line-height: 1.8;
}

.mvl-article__content h2 {
	margin: 40px 0 14px;
	font-family: var(--mvl-serif);
	font-size: 28px;
	color: var(--mvl-navy);
	scroll-margin-top: 100px;
}

.mvl-article__content h3 {
	margin: 28px 0 10px;
	font-size: 20px;
	color: var(--mvl-navy);
	scroll-margin-top: 100px;
}

.mvl-article__content table {
	width: 100%;
	font-size: 15px;
}

.mvl-article__content caption {
	caption-side: bottom;
	padding-top: 8px;
	font-size: 13px;
	color: var(--mvl-muted);
	text-align: left;
}

.mvl-article__figure figcaption {
	font-size: 13px;
	color: var(--mvl-muted);
}

.mvl-toc {
	margin: 24px 0;
	padding: 20px 24px;
	background: var(--mvl-ivory);
	border-left: 3px solid var(--mvl-gold);
}

.mvl-toc__title {
	display: block;
	margin-bottom: 8px;
	color: var(--mvl-navy);
}

.mvl-toc ol {
	margin: 0 0 0 18px;
}

.mvl-toc li {
	margin: 4px 0;
}

.mvl-related-project {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 20px;
	margin: 32px 0;
	padding: 16px;
	border: 1px solid var(--mvl-line);
}

.mvl-related-project > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mvl-related-project__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.mvl-related-project__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mvl-site .mvl-related-project__cta .button {
	margin: 0;
}

.mvl-author {
	display: flex;
	gap: 16px;
	margin: 40px 0;
	padding: 20px;
	background: var(--mvl-ivory);
}

.mvl-author > span {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	color: var(--mvl-muted);
}

.mvl-author img {
	border-radius: 50%;
}

.mvl-side-box {
	margin-bottom: 24px;
	padding: 22px;
	border: 1px solid var(--mvl-line);
}

.mvl-side-box--sticky {
	position: sticky;
	top: 100px;
	background: var(--mvl-ivory);
	border: 0;
}

.mvl-side-box__title {
	display: block;
	margin-bottom: 12px;
	font-size: 17px;
	color: var(--mvl-navy);
}

.mvl-side-post {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 12px;
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mvl-text);
}

.mvl-side-post .mvl-ph,
.mvl-side-post img {
	width: 72px;
	height: 54px;
	min-height: 0;
	object-fit: cover;
}

@media (max-width: 849px) {
	.mvl-article__layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.mvl-related-project {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   GIỚI THIỆU, LIÊN HỆ
   ========================================================================== */

.mvl-page-hero {
	background-color: #081629;
	background-image: linear-gradient(rgba(8, 22, 41, .7), rgba(8, 22, 41, .7)), repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, .05) 18px 19px);
	color: #FFFFFF;
}

.mvl-page-hero h1 {
	margin: 0 0 16px;
	font-family: var(--mvl-serif);
	font-size: clamp(34px, 5vw, 52px);
	font-weight: 600;
	line-height: 1.15;
	color: #FFFFFF;
}

.mvl-page-hero .mvl-breadcrumb ol,
.mvl-page-hero .mvl-breadcrumb a,
.mvl-page-hero .mvl-breadcrumb [aria-current] {
	color: rgba(255, 255, 255, .78);
}

.mvl-timeline ol {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--mvl-gold);
}

.mvl-timeline li {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	margin: 0;
	padding: 14px 0 14px 24px;
}

.mvl-timeline li strong {
	font-family: var(--mvl-serif);
	font-size: 22px;
	color: var(--mvl-navy);
}

.mvl-team .mvl-ph {
	aspect-ratio: 1;
	margin-bottom: 12px;
}

.mvl-team p {
	margin: 0;
}

.mvl-legal dl {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 12px 24px;
	margin: 0;
}

.mvl-legal dt {
	font-weight: 400;
	color: rgba(255, 255, 255, .72);
}

.mvl-legal dd {
	margin: 0;
	font-weight: 600;
	color: #FFFFFF;
}

.mvl-hotlines .col-inner {
	height: 100%;
	padding: 24px;
	border: 1px solid var(--mvl-line);
}

.mvl-hotlines p {
	margin: 0 0 6px;
}

.mvl-hotlines .mvl-hotlines__num {
	font-family: var(--mvl-serif);
	font-size: 26px;
	font-weight: 600;
	color: var(--mvl-navy);
}

.mvl-office address {
	font-style: normal;
	line-height: 1.7;
}

.mvl-office .mvl-ph {
	aspect-ratio: 4 / 3;
	margin-bottom: 16px;
}

.mvl-prose {
	max-width: 760px;
	font-size: 17px;
	line-height: 1.8;
}

/* ==========================================================================
   CENTRAL SQUARE – Nền, tiêu đề, nút dùng chung trong các section
   ========================================================================== */

.cs-lp-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background-color: #C9D6D2;
	background-image: linear-gradient(180deg, rgba(255, 236, 214, .65), rgba(255, 236, 214, 0) 40%), repeating-linear-gradient(135deg, transparent 0 16px, rgba(14, 94, 119, .08) 16px 17px);
	font-size: 13px;
	color: var(--cs-teal);
	text-align: center;
}

.cs-lp-ph--dark {
	background-color: #2C5E6E;
	background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 240, 211, .07) 18px 19px);
	color: var(--cs-cream);
}

.cs-lp-silk,
.cs-lp-overview,
.cs-lp-products,
.cs-lp-gallery,
.cs-lp-contact {
	background-color: #F8EDE4;
	background-image: radial-gradient(ellipse at 12% 8%, rgba(229, 140, 100, .30), transparent 42%), radial-gradient(ellipse at 92% 90%, rgba(229, 140, 100, .22), transparent 48%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .38) 0 2px, transparent 2px 6px);
}

.cs-lp-teal {
	background-color: #1D5F74;
	background-image: radial-gradient(ellipse at 18% 25%, rgba(255, 255, 255, .10), transparent 50%), radial-gradient(ellipse at 85% 75%, rgba(0, 0, 0, .22), transparent 55%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px);
	color: #FFFFFF;
}

.cs-lp .cs-lp-title {
	margin: 0 0 24px;
	font-size: 44px;
	font-weight: 500;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--cs-copper);
}

.cs-lp .cs-lp-title--light {
	color: var(--cs-peach-2);
}

.cs-lp-center {
	text-align: center;
}

.cs-lp-muted {
	color: var(--cs-muted);
}

.cs-lp .button.cs-lp-pill,
.cs-lp .button.cs-lp-ghost,
.cs-lp .button.cs-lp-outline {
	min-height: 50px;
	padding: 0 28px;
	font-size: 14px;
	line-height: 50px;
}

.cs-lp .button.cs-lp-ghost {
	border: 1px solid rgba(255, 255, 255, .8);
	background: rgba(255, 255, 255, .08);
	color: #FFFFFF;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.cs-lp .button.cs-lp-outline {
	border: 1px solid var(--cs-teal);
	color: var(--cs-teal);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.cs-lp .button.cs-lp-outline:hover {
	background: var(--cs-teal);
	color: #FFFFFF;
}

@media (max-width: 549px) {
	.cs-lp .cs-lp-title {
		font-size: 32px;
	}
}

/* ----- Khung viền kép (Chính sách, Tin tức) ----- */
.cs-lp-frame {
	padding: 80px 24px;
	border: 1px solid rgba(243, 201, 174, .55);
	outline: 1px solid rgba(243, 201, 174, .3);
	outline-offset: 5px;
}

.cs-lp-news {
	padding-bottom: 24px !important;
}

.cs-lp-news .cs-lp-frame {
	padding: 72px 24px;
}

@media (max-width: 549px) {
	.cs-lp-frame,
	.cs-lp-news .cs-lp-frame {
		padding: 48px 8px;
	}
}

/* ==========================================================================
   CENTRAL SQUARE – Hero
   ========================================================================== */

.cs-lp-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 820px;
	background-color: #C9D6D2;
	background-image: linear-gradient(to top, rgba(10, 40, 52, .78), rgba(10, 40, 52, 0) 45%), linear-gradient(180deg, rgba(255, 236, 214, .65), rgba(255, 236, 214, 0) 40%), repeating-linear-gradient(135deg, transparent 0 16px, rgba(14, 94, 119, .08) 16px 17px);
	background-size: cover;
	background-position: center;
}

.cs-lp-hero .section-content {
	width: 100%;
	padding-bottom: 40px;
}

.cs-lp-hero__row {
	align-items: flex-end;
}

.cs-lp-hero__text h1 {
	margin: 0 0 12px;
	font-size: clamp(38px, 5vw, 64px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: .01em;
	color: #FFFFFF;
}

.cs-lp-hero__text p {
	margin: 0;
	font-size: 20px;
	font-style: italic;
	color: var(--cs-cream);
}

.cs-lp-hero__ctas {
	text-align: right;
}

.cs-lp-hero__ctas .button {
	margin: 0 0 10px 10px;
}

@media (max-width: 549px) {
	.cs-lp-hero {
		min-height: 520px;
	}

	.cs-lp-hero__text h1 {
		font-size: 36px;
	}

	.cs-lp-hero__text p {
		font-size: 16px;
	}

	.cs-lp-hero__ctas {
		text-align: left;
	}

	.cs-lp-hero__ctas .button {
		display: block;
		width: 100%;
		margin: 0 0 12px;
	}
}

/* ==========================================================================
   CENTRAL SQUARE – Slogan + giới thiệu
   ========================================================================== */

.cs-lp-slogan h2 {
	margin: 0;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
}

.cs-lp-slogan__l1,
.cs-lp-slogan__l2 {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.cs-lp-slogan__l2 {
	padding-left: 64px;
}

.cs-lp-slogan__big {
	font-size: 76px;
	color: var(--cs-copper);
}

.cs-lp-slogan__small {
	font-size: 36px;
	font-style: italic;
	color: var(--cs-teal);
}

.cs-lp-intro__text p {
	margin: 0;
	font-size: 19px;
	line-height: 1.8;
	color: var(--cs-teal);
	text-align: justify;
}

@media (max-width: 549px) {
	.cs-lp-slogan__big {
		font-size: 48px;
	}

	.cs-lp-slogan__small {
		font-size: 22px;
	}

	.cs-lp-slogan__l2 {
		padding-left: 36px;
	}

	.cs-lp-intro__text p {
		font-size: 16px;
	}
}

/* ==========================================================================
   CENTRAL SQUARE – Khối 2 nửa: ảnh bo cong + dải lụa (Tổng quan, Liên hệ)
   ========================================================================== */

.cs-lp-split > .col {
	padding: 0;
}

.cs-lp-ribbon {
	height: 100%;
	padding-right: 40px;
	border-radius: 0 340px 0 0 / 0 100% 0 0;
	background-image: repeating-linear-gradient(90deg, #E7B092 0 2px, #F9E4D6 2px 6px);
}

.cs-lp-ribbon__img {
	align-items: flex-end;
	justify-content: flex-start;
	min-height: 780px;
	height: 100%;
	border-radius: 0 320px 0 0 / 0 100% 0 0;
}

.cs-lp-split__body > .col-inner {
	max-width: 600px;
	padding: 88px 56px;
}

.cs-lp-dl {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 10px 16px;
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--cs-teal);
}

.cs-lp-dl dt {
	font-weight: 400;
}

.cs-lp-dl dd {
	margin: 0;
	font-weight: 700;
}

.cs-lp-figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 0 20px;
	padding: 18px 0;
	border-top: 1px solid var(--cs-teal);
	border-bottom: 1px solid var(--cs-teal);
}

.cs-lp-figures dt {
	font-size: 14px;
	font-weight: 400;
	color: var(--cs-teal);
}

.cs-lp-figures dd {
	margin: 4px 0 0;
	font-size: 40px;
	line-height: 1;
	color: var(--cs-copper);
}

.cs-lp-figures dd small {
	font-size: 20px;
}

.cs-lp-figures .cs-lp-figures__word {
	font-size: 26px;
	line-height: 1.5;
}

@media (max-width: 549px) {
	.cs-lp-ribbon {
		padding: 0 0 18px;
		border-radius: 0 0 180px 0 / 0 0 90px 0;
	}

	.cs-lp-ribbon__img {
		min-height: 240px;
		border-radius: 0 0 170px 0 / 0 0 80px 0;
	}

	.cs-lp-split__body > .col-inner {
		padding: 36px 20px 48px;
	}

	.cs-lp-dl {
		grid-template-columns: 112px 1fr;
		font-size: 14px;
	}

	.cs-lp-figures dd {
		font-size: 28px;
	}

	.cs-lp-figures dd small {
		font-size: 14px;
	}

	.cs-lp-figures .cs-lp-figures__word {
		font-size: 18px;
	}
}

/* ==========================================================================
   CENTRAL SQUARE – Vị trí
   ========================================================================== */

.cs-lp-location {
	background-color: var(--cs-cream);
}

.cs-lp-twoline {
	display: flex;
	flex-direction: column;
	margin: 0 0 28px;
	font-weight: 500;
	line-height: 1.05;
	text-transform: none;
}

.cs-lp-twoline > span {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.cs-lp-twoline .cs-lp-twoline__indent {
	padding-left: 64px;
}

.cs-lp-twoline__s {
	font-size: 38px;
	color: var(--cs-teal);
}

.cs-lp-twoline__b {
	font-size: 62px;
	color: var(--cs-copper);
}

.cs-lp-location__text p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--cs-teal);
	text-align: justify;
}

.cs-lp-dist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-lp-dist li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 14px;
	line-height: 1.3;
	color: var(--cs-teal);
}

.cs-lp-dist__num {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	padding-top: 13px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #DE8B63, #A9502C);
	box-shadow: 0 0 0 4px rgba(229, 140, 100, .25);
	box-sizing: border-box;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
}

.cs-lp-dist__num small {
	font-size: 8px;
}

.cs-lp-map__img {
	position: relative;
	min-height: 600px;
	border-radius: 4px;
}

.cs-lp-map__pin {
	position: absolute;
	top: 46%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border-radius: 50%;
	background: var(--cs-copper);
	box-shadow: 0 0 0 10px rgba(192, 100, 60, .25), 0 0 0 22px rgba(192, 100, 60, .12);
}

@media (max-width: 549px) {
	.cs-lp-twoline__s {
		font-size: 26px;
	}

	.cs-lp-twoline__b {
		font-size: 42px;
	}

	.cs-lp-twoline .cs-lp-twoline__indent {
		padding-left: 30px;
	}

	.cs-lp-dist {
		gap: 14px 10px;
	}

	.cs-lp-dist li {
		gap: 8px;
		font-size: 12.5px;
	}

	.cs-lp-map__img {
		min-height: 220px;
	}
}

/* ==========================================================================
   CENTRAL SQUARE – Mặt bằng
   ========================================================================== */

.cs-lp-plan__inner {
	position: relative;
	min-height: 780px;
	overflow: hidden;
}

.cs-lp-plan__stage {
	position: absolute;
	inset: 0;
	transform: scale(var(--cs-zoom, 1));
	transform-origin: 40% 50%;
	transition: transform .25s;
}

.cs-lp-plan__img {
	height: 100%;
}

.cs-lp-plan__zoom {
	position: absolute;
	left: 24px;
	bottom: 24px;
	display: flex;
	gap: 8px;
}

.cs-lp-plan__zoom button {
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #FFFFFF;
	border-radius: 50%;
	background: rgba(29, 95, 116, .85);
	color: #FFFFFF;
	font-size: 22px;
	line-height: 1;
}

.cs-lp-legend {
	position: absolute;
	top: 60px;
	right: 0;
	width: 320px;
	padding: 24px 28px;
	background: rgba(15, 52, 64, .72);
	color: #FFFFFF;
}

.cs-lp-legend__title {
	margin: 0 0 12px;
	font-size: 22px;
}

.cs-lp-legend ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cs-legend;
}

.cs-lp-legend li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 7px;
	font-size: 12.5px;
	letter-spacing: .02em;
	text-transform: uppercase;
	counter-increment: cs-legend;
}

.cs-lp-legend li::before {
	content: counter(cs-legend);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--cs-teal);
	font-size: 11px;
	font-weight: 700;
}

@media (max-width: 849px) {
	.cs-lp-plan__inner {
		min-height: 0;
	}

	.cs-lp-plan__stage {
		position: relative;
		height: 300px;
	}

	.cs-lp-plan__zoom {
		top: 236px;
		bottom: auto;
	}

	.cs-lp-legend {
		position: static;
		width: 100%;
		background: var(--cs-teal);
	}

	.cs-lp-legend ol {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 12px;
	}
}

/* ==========================================================================
   CENTRAL SQUARE – Tiện ích (slider)
   ========================================================================== */

.cs-lp-amen {
	background-color: #EAF1F1;
}

.cs-lp-amen__slider {
	width: 100%;
}

.cs-lp-amen__slide {
	width: 100%;
	text-align: center;
}

.cs-lp-amen__img {
	aspect-ratio: 2.2 / 1;
	border-radius: 22px;
	box-shadow: 0 24px 50px rgba(15, 52, 64, .28);
}

.cs-lp-amen__slide h3 {
	margin: 28px 0 40px;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--cs-teal);
}

.cs-lp-amen .flickity-page-dots .dot {
	background: var(--cs-terra);
	opacity: 1;
	border: 0;
}

.cs-lp-amen .flickity-page-dots .dot.is-selected {
	background: var(--cs-teal);
}

@media (max-width: 549px) {
	.cs-lp-amen__img {
		aspect-ratio: 16 / 10;
		border-radius: 16px;
	}

	.cs-lp-amen__slide h3 {
		font-size: 22px;
	}
}

/* ==========================================================================
   CENTRAL SQUARE – 6 điểm nổi bật (slider thẻ viền đồng, 4 góc tròn)
   ========================================================================== */

.cs-lp-cards .flickity-viewport {
	overflow: visible;
}

.cs-lp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 250px;
	height: 340px;
	margin: 30px 20px;
	padding: 28px;
	border: 3px solid var(--cs-peach);
	background: var(--cs-teal);
	box-sizing: border-box;
	color: #FFFFFF;
	text-align: center;
	opacity: .75;
	transform: scale(.86);
	transition: transform .45s, opacity .45s, box-shadow .45s;
}

.cs-lp-cards .is-selected .cs-lp-card,
.cs-lp-cards .is-selected.cs-lp-card {
	opacity: 1;
	transform: scale(1);
	box-shadow: 0 0 40px rgba(243, 201, 174, .55);
}

.cs-lp-card::before,
.cs-lp-card::after {
	content: "";
	position: absolute;
	top: -14px;
	left: -14px;
	width: 26px;
	height: 26px;
	border: 3px solid var(--cs-peach);
	border-radius: 50%;
	background: var(--cs-teal);
	box-shadow: 247px 0 0 -3px var(--cs-teal), 247px 0 0 0 var(--cs-peach), 0 337px 0 -3px var(--cs-teal), 0 337px 0 0 var(--cs-peach), 247px 337px 0 -3px var(--cs-teal), 247px 337px 0 0 var(--cs-peach);
}

.cs-lp-card::after {
	display: none;
}

.cs-lp-card__no {
	font-size: 64px;
	line-height: 1;
	color: var(--cs-cream);
}

.cs-lp-card h3 {
	margin: 18px 0 10px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--cs-cream);
}

.cs-lp-card p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(246, 231, 214, .85);
}

.cs-lp-cards .flickity-prev-next-button {
	background: var(--cs-copper);
	color: #FFFFFF;
}

/* ==========================================================================
   CENTRAL SQUARE – Shophouse (tab 4 mẫu căn)
   ========================================================================== */

.cs-lp-products {
	border-radius: 120px 120px 0 0 / 60px 60px 0 0;
}

.cs-lp-tabs .nav {
	margin-bottom: 32px;
}

.cs-lp-tabs .nav > li > a {
	min-height: 40px;
	padding: 0 16px;
	border-radius: 3px;
	background: var(--cs-teal);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
}

.cs-lp-tabs .nav > li.active > a,
.cs-lp-tabs .nav > li > a:hover {
	background: var(--cs-copper);
	color: #FFFFFF;
}

.cs-lp-tabs--light .nav > li > a {
	background: transparent;
	border: 1px solid rgba(243, 201, 174, .6);
	color: var(--cs-cream);
}

.cs-lp-tabs--light .nav > li.active > a {
	background: linear-gradient(180deg, #F6E7D6, #F0C3A6);
	color: var(--cs-teal);
}

.cs-lp-product__img {
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(15, 52, 64, .18);
}

.cs-lp-product h3 {
	margin: 0 0 18px;
	font-size: 32px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--cs-teal);
}

.cs-lp-product__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 0 22px;
	border-top: 1px solid var(--cs-teal);
}

.cs-lp-product__specs > div {
	padding: 16px 0;
	border-bottom: 1px solid rgba(29, 95, 116, .3);
}

.cs-lp-product__specs dt {
	font-size: 14px;
	font-weight: 400;
	color: var(--cs-teal);
}

.cs-lp-product__specs dd {
	margin: 4px 0 0;
	font-size: 24px;
	color: var(--cs-copper);
}

.cs-lp-products .button {
	margin: 0 10px 10px 0;
}

@media (max-width: 549px) {
	.cs-lp-products {
		border-radius: 60px 60px 0 0 / 30px 30px 0 0;
	}

	.cs-lp-product h3 {
		font-size: 24px;
	}

	.cs-lp-product__specs dd {
		font-size: 18px;
	}
}

/* ==========================================================================
   CENTRAL SQUARE – Chính sách, công cụ tính vay, bảng giá khóa
   ========================================================================== */

.cs-lp-pay h3 {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--cs-cream);
}

.cs-lp-steps {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.cs-lp-steps li {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid rgba(243, 201, 174, .35);
}

.cs-lp-steps li:last-child {
	border-bottom: 0;
}

.cs-lp-steps small {
	display: block;
	font-size: 13px;
	color: rgba(246, 231, 214, .8);
}

.cs-lp-steps__no {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--cs-peach-2);
	border-radius: 50%;
	color: var(--cs-peach-2);
}

.cs-lp-steps__pct {
	font-size: 24px;
	color: var(--cs-peach-2);
}

.cs-lp-pay p {
	font-size: 14px;
	line-height: 1.7;
	color: rgba(246, 231, 214, .9);
}

/* Công cụ tính vay [mvl_loan_calc] trong landing */
.cs-lp .mvl-calc {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
	border-radius: 6px;
	background-color: #F8EDE4;
	background-image: radial-gradient(ellipse at 12% 8%, rgba(229, 140, 100, .30), transparent 42%), radial-gradient(ellipse at 92% 90%, rgba(229, 140, 100, .22), transparent 48%);
	color: var(--cs-teal);
}

.cs-lp .mvl-calc__title {
	margin: 0;
	font-size: 22px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--cs-copper);
}

.mvl-calc__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
}

.mvl-calc__label {
	display: flex;
	justify-content: space-between;
}

.mvl-calc input[type="range"] {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	accent-color: #C0643C;
}

.mvl-calc__result {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 14px;
	border-top: 1px solid currentColor;
	font-size: 13px;
}

.mvl-calc__result strong {
	font-size: 34px;
	font-weight: 500;
	color: #C0643C;
}

.mvl-calc__note {
	margin: 0;
	font-size: 12px;
	color: #676767;
}

/* Bảng giá làm mờ */
.cs-lp-lock {
	position: relative;
	margin-top: 48px;
	overflow: hidden;
	border-radius: 6px;
	background: #FFFFFF;
}

.cs-lp-lock__table {
	overflow-x: auto;
	filter: blur(5px);
	user-select: none;
}

.cs-lp-lock table {
	min-width: 760px;
	margin: 0;
	font-size: 15px;
	color: var(--cs-text);
}

.cs-lp-lock th {
	padding: 14px 18px;
	background: var(--cs-cream);
	color: var(--cs-teal);
}

.cs-lp-lock td {
	padding: 14px 18px;
}

.cs-lp-lock__title,
.cs-lp-lock__date {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	color: var(--cs-teal);
}

.cs-lp-lock__title {
	top: 28%;
	font-size: 22px;
	text-transform: uppercase;
}

.cs-lp-lock__date {
	bottom: 18%;
	font-size: 13px;
}

.cs-lp .button.cs-lp-lock__btn {
	display: table;
	margin: -150px auto 110px;
	position: relative;
	z-index: 2;
}

/* ==========================================================================
   CENTRAL SQUARE – Tin tức (thẻ bài viết trên nền teal), Thư viện, FAQ
   ========================================================================== */

.cs-lp-news .mvl-card {
	border: 0;
	background: transparent;
	color: #FFFFFF;
}

.cs-lp-news .mvl-card__media {
	border-radius: 12px;
}

.cs-lp-news .mvl-card__body {
	padding: 14px 0 0;
}

.cs-lp-news .mvl-card__title,
.cs-lp-news .mvl-card__title a {
	font-family: var(--cs-font);
	color: #FFFFFF;
}

.cs-lp-news .mvl-eyebrow,
.cs-lp-news .mvl-card__excerpt {
	color: rgba(246, 231, 214, .85);
}

.cs-lp-news .mvl-empty {
	border-color: rgba(243, 201, 174, .5);
	color: var(--cs-cream);
}

.cs-lp-gallery {
	margin-top: -2px;
	border-radius: 160px 160px 0 0 / 70px 70px 0 0;
}

.cs-lp-gal__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 18px;
}

.cs-lp-gal__grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

.cs-lp-gal__grid .cs-lp-ph {
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	box-shadow: 0 10px 24px rgba(15, 52, 64, .15);
}

.cs-lp-docs .col-inner {
	height: 100%;
	padding: 22px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .75);
}

.cs-lp-docs__type {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--cs-copper);
}

.cs-lp-docs__name {
	font-size: 17px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--cs-teal);
}

.cs-lp-faq {
	background-color: var(--cs-cream);
}

.cs-lp-faq .row {
	max-width: 900px;
}

.cs-lp-acc {
	border-top: 1px solid var(--cs-teal);
}

.cs-lp-acc .accordion-item {
	border-bottom: 1px solid rgba(29, 95, 116, .35);
}

.cs-lp-acc .accordion-title {
	display: flex;
	align-items: center;
	min-height: 62px;
	padding: 12px 44px 12px 0;
	border: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--cs-teal);
}

.cs-lp-acc .accordion-title.active {
	color: var(--cs-copper);
}

.cs-lp-acc .accordion-inner {
	padding: 0 0 20px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--cs-text);
}

.cs-lp-acc .toggle {
	right: 0;
	left: auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--cs-teal);
	color: #FFFFFF;
}

.cs-lp-acc .accordion-title.active .toggle {
	background: var(--cs-copper);
}

/* ==========================================================================
   CENTRAL SQUARE – Liên hệ + form trong landing
   ========================================================================== */

.cs-lp-contact__body > .col-inner {
	text-align: right;
}

.cs-lp-contact__text p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--cs-teal);
}

.cs-lp-contact__text strong {
	font-size: 17px;
}

.cs-lp-contact__text .cs-lp-contact__org {
	margin: 14px 0 8px;
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
}

.cs-lp-contact__map .cs-lp-ph {
	height: 200px;
	margin-top: 16px;
	border-radius: 8px;
}

.cs-lp .mvl-form {
	text-align: left;
}

.cs-lp .mvl-form input[type="text"],
.cs-lp .mvl-form input[type="tel"],
.cs-lp .mvl-form input[type="email"],
.cs-lp .mvl-form input[type="date"] {
	height: 44px;
	padding: 0 18px;
	border: 1px solid var(--cs-teal);
	border-radius: 22px;
	background: rgba(255, 255, 255, .4);
	color: var(--cs-teal);
}

.cs-lp .mvl-form label {
	color: var(--cs-teal);
	font-weight: 400;
}

.cs-lp .mvl-consent,
.cs-lp .mvl-consent label {
	font-size: 12px;
	color: var(--cs-teal);
}

.cs-lp .mvl-consent input {
	accent-color: var(--cs-copper);
}

.cs-lp .mvl-form .button.mvl-submit {
	width: auto;
	min-height: 46px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background-image: linear-gradient(180deg, #D17C55 0%, #A9502C 100%);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: 0 6px 16px rgba(169, 80, 44, .28);
}

.cs-lp .mvl-form--grid .mvl-field--full:last-of-type {
	text-align: right;
}

@media (max-width: 549px) {
	.cs-lp-contact__body > .col-inner {
		text-align: left;
	}
}

/* Popup */
.cs-lp-popup {
	border: 3px solid var(--cs-peach);
	border-radius: 6px;
	background-color: #F8EDE4;
	background-image: radial-gradient(ellipse at 12% 8%, rgba(229, 140, 100, .30), transparent 42%), radial-gradient(ellipse at 92% 90%, rgba(229, 140, 100, .22), transparent 48%);
}

.cs-lp-popup .ux-text,
.cs-lp-popup .wpcf7 {
	padding: 0 32px;
}

.cs-lp-popup__head {
	padding-top: 40px !important;
	text-align: center;
}

.cs-lp-popup__head p {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cs-teal);
}

.cs-lp-popup__head .cs-lp-popup__title {
	font-size: 26px;
	font-weight: 500;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--cs-copper);
}

.cs-lp-popup .wpcf7 {
	padding-bottom: 32px;
}

.cs-lp-popup .mvl-form .button.mvl-submit {
	width: 100%;
	min-height: 50px;
}