/**
 * Các section trang chủ từ "1 Điểm tựa" tới "Liên hệ".
 *
 * Quy ước:
 * - "a → b" trong ghi chú: px ở màn 1024 → 1920.
 * - Section có ảnh lớn đặt theo bố cục tranh dùng khung .xxx__stage (tối đa 1920px) và
 *   --u = 1px thiết kế, để ảnh nằm đúng tọa độ như PDF ở mọi bề rộng.
 * - Dưới 1280px: bố cục xếp chồng tạm thời, chờ thiết kế mobile.
 */

.project__stage,
.location__stage,
.apply__stage {
	--u: calc(100cqw / 1920);

	container-type: inline-size;
	position: relative;
	width: min(100%, var(--page-max));
	margin-inline: auto;
}

.project,
.location,
.apply {
	overflow: hidden;
}

/* ========================================================================
 * Nền chung phần thân trang chủ (sau hero): ảnh ghép từ các lớp nền Figma,
 * rộng tối đa 1920px; màn rộng hơn thì hai cạnh mờ dần vào màu nền.
 * ====================================================================== */

.home-body {
	position: relative;
	isolation: isolate;
}

.home-body::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: min(100%, var(--page-max));
	background: url("../images/home/home-bg.webp") center top / 100% auto no-repeat;
	transform: translateX(-50%);
	pointer-events: none;
}

/* Desktop: mỗi section cao đúng 1 màn hình. Ảnh nền thiết kế cho section 1000px ở khung 1920 (= 750px ảnh gốc 1440),
   nên co ảnh theo CHIỀU CAO màn hình để mỗi đoạn nền luôn khớp đúng section của nó với mọi tỉ lệ màn hình
   (co theo chiều ngang thì màn "vuông" như 1280×800 bị lệch, lộ dải trắng của ảnh dưới khối 1 Điểm tựa). */
@media (min-width: 1280px) {
	.home .home-body::before {
		background-size: 100% calc(5780 / 750 * 100dvh);
	}

	/* Ảnh phối cảnh 1 Điểm tựa: đáy ảnh mờ dần vào nền (màn tỉ lệ cao như 1280×800 thấy được mép dưới ảnh) */
	.home .project__image {
		-webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
		mask-image: linear-gradient(to bottom, #000 82%, transparent);
	}
}

@media (min-width: 1921px) {
	.home-body::before {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
		mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	}
}

/* Nền phần dưới (Hồ sơ bớt khó + Tin tức): neo theo đầu section Hồ sơ.
   Ảnh bắt đầu sớm hơn 100px thiết kế (1440) để mờ dần nối với nền phía trên.
   --bgu: 1px của thiết kế 1920 theo bề rộng khung nền. */
.home-lower {
	--bgu: calc(min(100vw, var(--page-max)) / 1920);

	position: relative;
	isolation: isolate;
}

.home-lower::before {
	content: "";
	position: absolute;
	top: calc(-83 * var(--bgu));
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: min(100%, var(--page-max));
	background: url("../images/home/home-bg-lower.webp") center top / 100% auto no-repeat;
	transform: translateX(-50%);
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 calc(133 * var(--bgu)));
	mask-image: linear-gradient(to bottom, transparent, #000 calc(133 * var(--bgu)));
}

/* ========================================================================
 * 1 Điểm tựa – Được kiến tạo bài bản
 * ====================================================================== */

.project__media {
	display: contents;
}

.project__image {
	position: absolute;
	top: calc(-188 * var(--u));
	left: calc(-550 * var(--u));
	width: calc(1819 * var(--u));
	max-width: none;
	pointer-events: none;
}

.project__content {
	position: relative;
	padding: calc(114 * var(--u)) 0 var(--space-2xl) calc(875 * var(--u));
}

.project__title {
	display: flex;
	align-items: center;
	font-size: var(--fs-h2);
}

.project__hand {
	flex: none;
	width: clamp(12.5rem, 2.3571rem + 15.8482vw, 21.375rem); /* 200 → 342 */
}

.project__title-text {
	white-space: nowrap;
}

.project__facts {
	margin: clamp(2rem, 0.9286rem + 1.6741vw, 2.9375rem) 0 0 calc(-34 * var(--u)); /* trên 32 → 47; Figma: bảng lệch trái 34px so với tiêu đề */
}

.project__row {
	display: grid;
	grid-template-columns: clamp(9rem, 3.2143rem + 9.0402vw, 14.0625rem) minmax(0, 1fr); /* nhãn 144 → 225 */
	align-items: baseline;
	padding-block: 0.3em;
}

.project__row:has(.project__stats) {
	align-items: start;
}

.project__row dt {
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
}

.project__row dd {
	margin: 0 calc(-40 * var(--u)) 0 0; /* Figma: chữ được tràn nhẹ sang lề phải */
	font-size: var(--fs-md);
	line-height: 1.9;
}

.project__button {
	display: inline-flex;
	align-items: center;
	height: max(calc(57 * var(--u)), 2.5rem);
	margin: var(--space-lg) 0 0 calc(-30 * var(--u));
	padding: 0 calc(18 * var(--u));
	background: var(--color-heading);
	color: var(--color-white);
	font-family: var(--font-title);
	font-size: max(calc(28 * var(--u)), 1rem);
	letter-spacing: 0.04em;
	transition: filter var(--duration) var(--ease);
}

.project__button:hover {
	filter: brightness(1.08);
}

/* Cụm "Quy mô": lưới 2 cột, mỗi số liệu là một ảnh + chú thích chữ thật (tọa độ theo thiết kế 1920) */
.project__stats {
	display: grid;
	grid-template-columns: calc(261 * var(--u)) auto;
	align-items: end;
	gap: calc(28 * var(--u)) 0;
	margin: 0.3em 0 0;
	padding: 0;
	list-style: none;
	line-height: 1.2;
}

.project__stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Số liệu chữ thật (Big Shoulders), cỡ theo Figma ở màn 1920 */
.project__figure {
	--stat-num: calc(78 * var(--u));
	--stat-unit: calc(24 * var(--u));

	color: var(--color-text);
}

.project__figure--small {
	--stat-num: calc(42 * var(--u));
}

.project__stat:nth-child(1) { margin-left: calc(25 * var(--u)); }
.project__stat:nth-child(3) { margin-left: calc(9 * var(--u)); }
.project__stat:nth-child(4) { margin-left: calc(24 * var(--u)); }

.project__stat-badge {
	margin-bottom: calc(7 * var(--u));
	padding: 0.05em 1.3em;
	background: var(--color-text);
	color: var(--color-white);
	font-size: clamp(0.6875rem, 0.4196rem + 0.4185vw, 0.9375rem); /* 11 → 15 */
	font-weight: var(--fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.project__stat-caption {
	margin-top: calc(6 * var(--u));
	font-size: clamp(0.6875rem, 0.3304rem + 0.558vw, 1rem); /* 11 → 16 */
	text-transform: uppercase;
	white-space: nowrap;
}

/* ========================================================================
 * Tâm điểm giao thương
 * ====================================================================== */

.location__stage {
	aspect-ratio: 3840 / 2798; /* dải trục (440) + bản đồ (2358) theo thiết kế 3840px */
}

/* Khung bản đồ phủ kín khung (desktop: nằm dưới dải trục, xem phần desktop): ảnh + lớp SVG động chồng lên nhau */
.location__map {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: 3840 / 2358; /* khi khung không có chiều cao cố định (tablet / mobile) */
}

/* Lớp cuộn + khung vẽ: desktop / tablet phủ kín khung bản đồ; mobile thành khung cuộn có phóng to / thu nhỏ */
.location__map-scroll,
.location__map-canvas {
	position: absolute;
	inset: 0;
}

.location__map-img,
.location__fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.location__fx {
	overflow: hidden;
	pointer-events: none;
}

/* Nét đứt trắng chạy dọc tuyến đường (về phía dự án) */
.location__routes path {
	animation: route-flow 1.4s linear infinite;
}

@keyframes route-flow {
	to {
		stroke-dashoffset: calc(var(--route-step) * -1);
	}
}

/* Marker dự án nảy lên (chậm dần), rơi xuống (nhanh dần), chạm đất hơi bẹt lại; bóng đổ thu nhỏ khi marker lên cao */
.location__pin,
.location__pin-shadow {
	transform-box: fill-box;
	animation: pin-bounce 1.6s infinite;
}

.location__pin {
	transform-origin: 50% 100%;
}

.location__pin-shadow {
	fill: rgb(80 40 10 / 0.3);
	transform-origin: 50% 50%;
	animation-name: pin-shadow;
	animation-timing-function: ease-in-out;
}

/* đơn vị theo ảnh gốc 3840px (trên màn 1920 ≈ một nửa) */
@keyframes pin-bounce {
	0%,
	100% {
		translate: 0 0;
		scale: 1.06 0.92;
		animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); /* lên: chậm dần */
	}

	10% {
		scale: 1;
	}

	50% {
		translate: 0 -30px;
		scale: 1;
		animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); /* xuống: nhanh dần */
	}

	92% {
		scale: 1;
	}
}

@keyframes pin-shadow {
	0%,
	100% {
		scale: 1.1;
		opacity: 1;
	}

	50% {
		scale: 0.5;
		opacity: 0.45;
	}
}

/* Section chưa vào màn hình: dừng hiệu ứng cho nhẹ máy */
.js .location__stage:not(.is-revealed) :is(.location__routes path, .location__pin, .location__pin-shadow) {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	:is(.location__routes path, .location__pin, .location__pin-shadow) {
		animation: none;
	}
}

.location__title {
	position: absolute;
	top: calc(30 * var(--u)); /* nằm trên đường trục cam của ảnh (y≈213) */
	left: calc(160 * var(--u));
	display: flex;
	flex-direction: column;
	width: calc(474 * var(--u));
	min-width: 14rem;
	font-size: var(--fs-h2);
	line-height: 1.1;
}

.location__hand {
	width: clamp(10rem, -2.1429rem + 18.9732vw, 20.625rem); /* 160 → 330 */
}

.location__title-text {
	margin-top: -0.4em;
	white-space: nowrap;
}

.location__button {
	position: absolute;
	top: calc(1115 * var(--u));
	left: calc(1520 * var(--u));
	padding: 0.25em 0.9em;
	border-radius: var(--radius-sm);
	font-family: var(--font-title);
	font-size: var(--fs-title-sm);
	font-weight: var(--fw-regular);
}

/* ========================================================================
 * Không chỉ là chỗ ở – Sống mới (tiện ích)
 * ====================================================================== */

.amenities {
	padding-block: clamp(1.5rem, 2.3438vw, 2.8125rem) var(--section-space); /* trên 24 → 45 */
}

.amenities__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: var(--fs-h2);
	line-height: 1.06;
	text-align: center;
}

.amenities__line {
	display: flex;
	align-items: flex-start;
	gap: 0.25em;
	white-space: nowrap;
}

.amenities__hand {
	width: clamp(10rem, -1.3214rem + 17.6897vw, 19.9063rem); /* 160 → 318 */
	transform: translate(min(1.0417vw, 20px), max(-1.0417vw, -20px)); /* lệch phải 20px, lên 20px ở màn 1920 */
}

.amenities__carousel {
	position: relative;
	margin-top: clamp(2.5rem, 0.8571rem + 2.567vw, 3.9375rem); /* 40 → 63 */
}

.amenities__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)); /* thẻ thường 1 cột, thẻ rộng 2 cột */
	gap: clamp(0.75rem, 0.25rem + 0.7813vw, 1.1875rem) clamp(1.25rem, 0.5357rem + 1.1161vw, 1.875rem);
}

/* Chỉ hiện 6 ô; thẻ thứ 7 trở đi chờ được xoay vào (site.js) */
.amenities__grid > .acard:nth-child(n + 7) {
	display: none;
}

/* Bản sao thẻ trượt từ ô cũ sang ô mới khi bấm mũi tên (site.js); thẻ thật ẩn trong lúc đó */
.rotate-ghosts {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.rotate-ghosts > .acard {
	position: absolute;
	margin: 0;
	aspect-ratio: auto;
	transform: none;
	transition: none;
	contain: layout paint; /* đổi cỡ thẻ không làm tính lại bố cục bên ngoài */
	will-change: translate, opacity;
}

.acard {
	position: relative;
	aspect-ratio: 398 / 271;
	overflow: hidden;
	border-radius: var(--radius-lg);
	transition: transform 450ms var(--ease-bounce);
}

.acard:hover {
	z-index: 1;
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.acard:hover {
		transform: none;
	}
}

/* Nút xoay: desktop ở 2 lề trái / phải; tablet / mobile ở dưới */
.amenities__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: var(--space-md);
}

.amenities__nav[hidden] {
	display: none;
}

.amenities__arrow {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid #ecd2c2;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-gradient-end);
	box-shadow: 0 2px 10px rgb(116 65 27 / 0.12);
	cursor: pointer;
	transition: transform 450ms var(--ease-bounce), opacity var(--duration) var(--ease);
}

.amenities__arrow:hover:not(:disabled) {
	transform: scale(1.12);
}

.amenities__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.amenities__arrow .icon {
	width: 1.25rem;
	height: 1.25rem;
	stroke-width: 2.4;
}

.amenities__arrow--prev .icon {
	transform: rotate(180deg);
}

@media (min-width: 1280px) {
	/* không thêm chiều cao cho khối (1 màn hình): lớp điều hướng phủ đúng khung thẻ,
	   mũi tên căn giữa theo chiều cao, nằm giữa lề trang 2 bên */
	.amenities__nav {
		position: absolute;
		inset: 0;
		display: block;
		margin: 0;
		pointer-events: none;
	}

	.amenities__nav > * {
		pointer-events: auto;
	}

	.amenities__arrow {
		--arrow-gap: calc((var(--page-gutter) - 2.75rem) / 2);

		position: absolute;
		top: 50%;
		translate: 0 -50%;
	}

	.amenities__arrow--prev {
		right: calc(100% + var(--arrow-gap));
	}

	.amenities__arrow--next {
		left: calc(100% + var(--arrow-gap));
	}
}

/* Ô to: ô 1 (hàng trên, bên trái) và ô 6 (hàng dưới, bên phải) */
:is(.amenities__grid > .acard:is(:nth-child(1), :nth-child(6)), .acard.is-wide) {
	grid-column: span 2;
	aspect-ratio: 832 / 271;
}

.acard__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease);
}

.acard:hover .acard__image {
	transform: scale(1.04);
}

.acard__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 2.75em clamp(0.5rem, 0.1786rem + 0.5022vw, 0.8125rem) clamp(0.5rem, 0.1786rem + 0.5022vw, 0.8125rem);
	background: linear-gradient(to top, rgb(242 114 33 / 0.95) 0%, rgb(242 114 33 / 0.8) 55%, rgb(242 114 33 / 0) 100%);
}

/* Thẻ rộng: dải màu đậm bên trái, nhạt dần sang phải để lộ ảnh */
:is(.amenities__grid > .acard:is(:nth-child(1), :nth-child(6)), .acard.is-wide) .acard__caption {
	background: linear-gradient(90deg, rgb(242 114 33 / 0.95) 0%, rgb(242 114 33 / 0.75) 35%, rgb(242 114 33 / 0) 70%);
	-webkit-mask-image: linear-gradient(to top, #000 65%, transparent);
	mask-image: linear-gradient(to top, #000 65%, transparent);
}

.acard__label {
	display: inline-block;
	margin-bottom: 0.35em;
	padding: 0.1em 0.35em;
	border-radius: 2px;
	background: var(--color-white);
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: 1.3;
	text-transform: uppercase;
}

.acard__text {
	max-width: 25em;
	color: var(--color-white);
	font-size: var(--fs-base);
	line-height: 1.25;
}

:is(.amenities__grid > .acard:is(:nth-child(1), :nth-child(6)), .acard.is-wide) .acard__text {
	max-width: 20em;
}

/* ========================================================================
 * Vừa tiện ích – đủ công năng (căn hộ)
 * ====================================================================== */

.products {
	padding-block: clamp(3rem, -0.2857rem + 5.1339vw, 5.875rem) var(--space-2xl); /* trên 48 → 94 */
}

.products__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: end;
	column-gap: clamp(2rem, -0.7143rem + 4.2411vw, 4.375rem); /* 32 → 70 */
	padding-left: clamp(1rem, -4.4286rem + 8.4821vw, 5.75rem); /* 16 → 92 */
}

.products__title {
	display: flex;
	flex-direction: column;
	font-size: var(--fs-h2);
	line-height: 1.1;
}

.products__hand {
	width: clamp(14rem, -2.7143rem + 26.1161vw, 28.625rem); /* 224 → 458 */
}

.products__title-text {
	margin: -0.45em 0 0 clamp(2.75rem, -0.4643rem + 5.0223vw, 5.5625rem); /* thụt 44 → 89 */
	white-space: nowrap;
}

.products__intro {
	margin-bottom: 0.35em;
	padding-left: 0.5rem;
	border-left: 1px solid var(--color-gray);
	color: var(--color-gray);
	font-family: var(--font-title);
	font-size: var(--fs-title-lg);
	line-height: var(--lh-heading);
}

.products__tabs {
	display: flex;
	gap: clamp(1rem, -0.8571rem + 2.9018vw, 2.625rem); /* 16 → 42 */
	margin-top: var(--space-md);
	padding-left: clamp(1rem, -2.0714rem + 4.7991vw, 3.6875rem); /* 16 → 59 */
}

.products__tab {
	flex: 0 0 clamp(7.5rem, 0.5714rem + 10.8259vw, 13.5625rem); /* 120 → 217 */
	height: clamp(3rem, 1.2857rem + 2.6786vw, 4.5rem); /* 48 → 72 */
	padding: 0 0.5em;
	border: 1px solid #edd3c3;
	border-radius: 2px;
	background: var(--color-white);
	color: var(--color-brown-dark);
	cursor: pointer;
	font-family: var(--font-title);
	font-size: var(--fs-title-lg);
	white-space: nowrap;
	transition: flex-basis 300ms var(--ease), background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.products__tab:hover {
	border-color: var(--color-heading);
	color: var(--color-heading);
}

.products__tab[aria-selected="true"] {
	flex-basis: clamp(16rem, -2.2857rem + 28.5714vw, 32rem); /* 256 → 512 */
	border-color: transparent;
	background: var(--gradient-primary);
	color: var(--color-white);
}

/* Thẻ căn hộ: kích thước lấy đúng từ Figma (px ở màn 1920, --pu = 1px thiết kế theo bề rộng khung).
   Thẻ thường 414 × 474; thẻ khi hover = thẻ "2PN nổi bật" trong Figma 605 × 694, tức phóng to
   đồng đều 605/414 ≈ 1.4614 (chữ, ảnh, nút trong Figma cũng tăng đúng tỉ lệ này).
   Thẻ cách nhau 40px; khi một thẻ phóng to (mỗi bên rộng thêm ~95px), các thẻ còn lại trượt ra xa
   96px (--pcard-push) để giữ khoảng cách ~40px, không bị đè. */
.products__panel {
	--pu: calc(min(100vw, var(--page-max)) / 1920);

	display: grid;
	grid-template-columns: repeat(3, calc(414 * var(--pu)));
	justify-content: center;
	align-items: center;
	column-gap: calc(40 * var(--pu));
	min-height: calc(694 * var(--pu)); /* đủ chỗ cho thẻ đã phóng to, không xô lệch trang */
	margin-top: calc(48 * var(--pu));
}

.products__panel[hidden] {
	display: none;
}

.pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: calc(474 * var(--pu));
	padding: calc(38 * var(--pu)) calc(24 * var(--pu)) calc(50 * var(--pu)) calc(23 * var(--pu));
	border: 1px solid #ecd2c2;
	border-radius: 12px;
	background: var(--color-white);
	/* Phóng to 1.46 lần là biên độ lớn: kéo dài 550ms, đường cong chậm dần cuối (ease-out) cho mượt */
	transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 550ms ease, border-color 550ms ease;
}

.pcard__media {
	position: relative;
	aspect-ratio: 368 / 195;
}

.pcard__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pcard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: calc(27 * var(--pu));
}

.pcard__name {
	color: var(--color-brown-dark);
	font-family: var(--font-body);
	font-size: max(calc(23 * var(--pu)), 0.75rem);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	white-space: nowrap;
}

.pcard__area {
	padding: 0.15em 0.4em;
	background: var(--color-heading);
	color: var(--color-white);
	font-size: max(calc(14 * var(--pu)), 0.5625rem);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	white-space: nowrap;
}

.pcard__text {
	flex: 1;
	margin-top: calc(14 * var(--pu));
	color: var(--color-brown-dark);
	font-size: max(calc(14 * var(--pu)), 0.625rem); /* 14px: mô tả vừa 2 dòng như Figma */
	line-height: 1.2;
}

.pcard__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	height: calc(51 * var(--pu));
	min-height: 1.75rem;
	margin-top: calc(39 * var(--pu));
	border-radius: 2px;
	background: #fde6d9;
	color: var(--color-gradient-end);
	font-family: var(--font-title);
	font-size: max(calc(19 * var(--pu)), 0.75rem);
}

/* Khi một thẻ được hover, các thẻ còn lại trượt sang hai bên nhường chỗ */
.products__panel {
	--pcard-push: calc(96 * var(--pu));
}

.products__panel:has(.pcard:nth-child(1):is(:hover, :has(:focus-visible))) .pcard:nth-child(n + 2),
.products__panel:has(.pcard:nth-child(2):is(:hover, :has(:focus-visible))) .pcard:nth-child(3) {
	transform: translateX(var(--pcard-push));
}

.products__panel:has(.pcard:nth-child(3):is(:hover, :has(:focus-visible))) .pcard:nth-child(-n + 2),
.products__panel:has(.pcard:nth-child(2):is(:hover, :has(:focus-visible))) .pcard:nth-child(1) {
	transform: translateX(calc(-1 * var(--pcard-push)));
}

/* Hover / di chuyển bằng bàn phím: thành thẻ nổi bật như Figma */
.pcard:hover,
.pcard:has(:focus-visible) {
	z-index: 1;
	border: 2px solid var(--color-gradient-end); /* ×1.46 ≈ viền 3px trong Figma */
	box-shadow: 0 7px 20px rgb(116 65 27 / 0.18);
	transform: scale(1.4614);
}

.pcard:hover .pcard__button,
.pcard:has(:focus-visible) .pcard__button {
	background: var(--gradient-primary);
	color: var(--color-white);
}

/* Đổi tòa: thẻ hiện lại lần lượt để người xem biết nội dung đã đổi */
@keyframes pcard-in {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
}

.products__panel.is-entering .pcard {
	animation: pcard-in 450ms var(--ease) both;
}

.products__panel.is-entering .pcard:nth-child(2) {
	animation-delay: 80ms;
}

.products__panel.is-entering .pcard:nth-child(3) {
	animation-delay: 160ms;
}

@media (prefers-reduced-motion: reduce) {
	.pcard:hover,
	.pcard:has(:focus-visible) {
		transform: none;
	}

	.products__panel.is-entering .pcard {
		animation-duration: 1ms;
	}

	.products__panel {
		--pcard-push: 0px;
	}
}

/* ========================================================================
 * Hồ sơ bớt khó khi có Phượng An
 * ====================================================================== */

.apply__stage {
	padding-bottom: calc(var(--section-space) + min(2.6042vw, 50px)); /* +50px ở 1920: chừa chỗ cho dải hàng cây của nền */
}

.apply__image {
	position: absolute;
	top: calc(28 * var(--u));
	left: calc(867 * var(--u));
	width: calc(1084 * var(--u));
	max-width: none;
	pointer-events: none;
}

.apply__intro {
	position: relative;
	width: max(calc(764 * var(--u)), 28rem);
	margin-left: calc(65 * var(--u));
	padding-top: calc(116 * var(--u));
}

.apply__title {
	display: flex;
	flex-direction: column;
	padding-left: calc(43 * var(--u));
	font-size: var(--fs-h2);
	line-height: 1.06;
}

.apply__line {
	white-space: nowrap;
}

.apply__line:first-child {
	margin-left: calc(74 * var(--u));
}

.apply__line--hand {
	display: flex;
	align-items: flex-start;
	gap: 0.15em;
}

.apply__hand {
	width: clamp(14rem, -2.6786rem + 26.0603vw, 28.5938rem); /* 224 → 457 */
}

.apply__text {
	max-width: 25em;
	margin: var(--space-xs) 0 0 calc(5 * var(--u));
	padding-left: 0.5rem;
	border-left: 1px solid var(--color-brown-dark);
	color: var(--color-brown-dark);
	font-family: var(--font-title);
	font-size: var(--fs-title-md);
	line-height: var(--lh-heading);
}

.apply__buttons {
	display: flex;
	flex-direction: column; /* nút "Nhận tài liệu dự án" nằm dưới nút "Kiểm tra điều kiện" */
	align-items: flex-start;
	gap: clamp(0.625rem, 0.2rem + 0.6vw, 1rem); /* 10 → 16 */
	margin-top: clamp(1.5rem, 0.9196rem + 0.9068vw, 2.3125rem); /* 24 → 37 */
}

.apply__button {
	display: inline-flex;
	align-items: center;
	padding: 0.12em 0.55em;
	border: 1px solid transparent;
	border-radius: 2px;
	font-family: var(--font-title);
	font-size: clamp(1.25rem, 0.4643rem + 1.2277vw, 1.9375rem); /* 20 → 31 */
	letter-spacing: 0.04em;
	line-height: 1.3;
	transition: filter var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.apply__button--solid {
	background: linear-gradient(90deg, var(--color-heading), var(--color-gradient-end));
	color: var(--color-white);
}

.apply__button--solid:hover {
	filter: brightness(1.06);
}

.apply__button--outline {
	border-color: var(--color-brown-dark);
	background: rgb(255 255 255 / 0.5);
	color: var(--color-brown-dark);
}

.apply__button--outline:hover {
	background: var(--color-white);
}

/* nền trắng, viền cam */
.apply__button--light {
	border-color: var(--color-heading);
	background: var(--color-white);
	color: var(--color-heading);
}

.apply__button--light:hover {
	background: #fff4ed;
}

/* "Nhận tài liệu dự án": chỉ trên điện thoại (máy lớn đã có mã QR bên cạnh) */
@media (min-width: 600px) {
	.apply__button--light {
		display: none;
	}
}

.apply__note {
	display: flex;
	align-items: flex-start;
	gap: 0.4em;
	max-width: 19em;
	margin-top: var(--space-sm);
	color: var(--color-heading);
	font-family: var(--font-title);
	font-size: clamp(1rem, 0.7143rem + 0.4464vw, 1.25rem); /* 16 → 20 */
	line-height: 1.2;
}

.apply__note-icon {
	flex: none;
	width: 1.1em;
	height: 1.1em;
	margin-top: 0.05em;
}

.apply__cards {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(0.75rem, -0.25rem + 1.5625vw, 1.625rem); /* 12 → 26 */
	margin-top: clamp(1.25rem, 0.7232rem + 0.8231vw, 2.0625rem); /* 20 → 33 */
}

.mcard {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: clamp(18rem, 12.5rem + 8.5938vw, 22.8125rem); /* 288 → 365 */
	padding: clamp(3.25rem, 1.0357rem + 3.4598vw, 5.25rem) clamp(0.75rem, 0.1071rem + 1.0045vw, 1.3125rem) clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem);
	border-radius: 8px;
	background: var(--color-white);
	box-shadow: 0 4px 16px rgb(116 65 27 / 0.12);
}

/* Khung viền trong */
.mcard::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 2px solid #f6cdb6;
	border-radius: 4px;
	pointer-events: none;
}

.mcard__num {
	position: absolute;
	top: clamp(1.25rem, 0.6786rem + 0.8929vw, 2.0625rem); /* 20 → 33 */
	right: clamp(0.75rem, 0.4821rem + 0.4185vw, 1.125rem);
	display: grid;
	place-items: center;
	width: clamp(2.25rem, 1.1071rem + 1.7857vw, 3.25rem); /* 36 → 52 */
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--color-heading);
	color: var(--color-white);
	font-family: var(--font-title);
	font-size: var(--fs-title-sm);
	line-height: 1;
}

.mcard__title {
	font-size: var(--fs-title-sm);
}

.mcard__text {
	margin-top: 0.5em;
	color: var(--color-ink);
	font-size: var(--fs-md);
	line-height: 1.2;
}

.mcard__text a:hover {
	color: var(--color-heading);
	text-decoration: underline;
}

.mcard__button {
	display: flex;
	justify-content: center;
	margin-top: var(--space-sm);
	padding: 0.35em;
	border-radius: 2px;
	background: linear-gradient(to bottom, var(--color-gradient-start), var(--color-heading));
	color: var(--color-white);
	font-family: var(--font-title);
	font-size: clamp(1rem, 0.7143rem + 0.4464vw, 1.25rem); /* 16 → 20 */
	transition: filter var(--duration) var(--ease);
}

.mcard__button:hover {
	filter: brightness(1.06);
}

.mcard__contacts {
	margin: var(--space-xs) 0 0;
	padding: 0;
	list-style: none;
	color: var(--color-heading);
	font-size: clamp(0.75rem, 0.6071rem + 0.2232vw, 0.875rem); /* 12 → 14 */
	line-height: 1.65;
}

.mcard__contacts li,
.mcard__contacts a {
	display: flex;
	align-items: center;
	gap: 0.3em;
}

.mcard__contacts a:hover {
	text-decoration: underline;
}

.mcard--qr {
	align-items: center;
	justify-content: center;
	padding: clamp(1.25rem, 0.3929rem + 1.3393vw, 2rem);
	text-align: center;
}

.mcard__qr {
	width: 66.5%;
}

.mcard__qr-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin-bottom: var(--space-sm);
}

.mcard__qr-icon {
	flex: none;
	width: clamp(1.25rem, 0.8929rem + 0.558vw, 1.625rem); /* 20 → 26 */
	height: auto;
}

.mcard__qr-caption {
	display: flex;
	flex-direction: column;
	color: var(--color-heading);
	line-height: 1.25;
	text-transform: uppercase;
}

.mcard__qr-caption span {
	font-size: clamp(0.6875rem, 0.5446rem + 0.2232vw, 0.8125rem); /* 11 → 13 */
}

.mcard__qr-caption strong {
	font-size: clamp(0.875rem, 0.6607rem + 0.3348vw, 1.0625rem); /* 14 → 17 */
	font-weight: var(--fw-semibold);
}

/* ========================================================================
 * Tin tức – Bạn về nhà
 * ====================================================================== */

.news {
	padding-bottom: var(--section-space);
}

.news__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: var(--fs-h2-sm);
	line-height: 1.06;
	text-align: center;
}

.news__line {
	white-space: nowrap;
}

.news__hand {
	width: clamp(15rem, -2.8214rem + 27.846vw, 30.5938rem); /* 240 → 490 */
}

.news__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, -3.3571rem + 9.375vw, 6.75rem); /* 24 → 108 */
	max-width: 100rem;
	margin: var(--space-md) auto 0;
}

/* Thẻ tin: xem news-card.css (dùng chung với trang danh sách tin) */

/* ========================================================================
 * Liên hệ + form đăng ký
 * ====================================================================== */

.contact {
	position: relative;
	isolation: isolate;
	padding: clamp(10rem, -3.5714rem + 21.2054vw, 21.875rem) 0 var(--section-space); /* trên 160 → 350: chừa chỗ cho tranh nền (mặt trời mọc) */
}

/* Nền riêng của section (phần mặt trời mọc trong Figma), neo theo đầu section để luôn khớp.
   Kéo lên trên 120px và mờ dần ở mép trên để nối liền với nền phía trên. */
.contact::before {
	content: "";
	position: absolute;
	top: -120px;
	bottom: 0;
	left: 50%;
	z-index: -1;
	width: min(100%, var(--page-max));
	background: url("../images/home/contact-bg.webp") center 0px / cover no-repeat;
	transform: translateX(-50%);
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 120px);
	mask-image: linear-gradient(to bottom, transparent, #000 120px);
}

@media (min-width: 1921px) {
	.contact::before {
		-webkit-mask-image:
			linear-gradient(to bottom, transparent, #000 120px),
			linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
		-webkit-mask-composite: source-in;
		mask-image:
			linear-gradient(to bottom, transparent, #000 120px),
			linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
		mask-composite: intersect;
	}
}

.contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 870fr) minmax(0, 806fr);
	align-items: start;
	column-gap: var(--space-md);
}

.contact__info {
	padding-top: var(--space-xs);
}

.contact__title {
	font-size: var(--fs-h2);
}

.contact__list {
	display: grid;
	gap: clamp(1.5rem, 0.3571rem + 1.7857vw, 2.5rem); /* 24 → 40 */
	margin: clamp(1.5rem, 1.2143rem + 0.4464vw, 1.75rem) 0 0;
	padding: 0;
	list-style: none;
}

.contact__item {
	display: flex;
	align-items: flex-start;
	gap: clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem); /* 16 → 24 */
}

.contact__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: clamp(2.75rem, 1.4643rem + 2.0089vw, 3.875rem); /* 44 → 62 */
	aspect-ratio: 62 / 56;
	border-radius: 6px;
	background: var(--color-heading);
}

.contact__icon img {
	width: 46%;
	height: 60%;
	object-fit: contain;
}

.contact__item-title {
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: clamp(1rem, 0.6429rem + 0.558vw, 1.3125rem); /* 16 → 21 */
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
}

.contact__item-text,
.contact__social {
	color: var(--color-heading);
	font-size: clamp(0.9375rem, 0.7946rem + 0.2232vw, 1.0625rem); /* 15 → 17 */
	line-height: 1.25;
}

.contact__social {
	display: block;
}

.contact__social:hover {
	text-decoration: underline;
}

/* Form */
.cform-wrap {
	padding: 5px;
	border-radius: clamp(1.25rem, 0.5357rem + 1.1161vw, 1.875rem);
	background: var(--color-white);
	box-shadow: 0 12px 40px rgb(116 65 27 / 0.15);
}

.cform {
	padding: clamp(1.25rem, 0.1071rem + 1.7857vw, 2.25rem) clamp(1rem, -0.4286rem + 2.2321vw, 2.25rem) clamp(1.75rem, -0.25rem + 3.125vw, 3.5rem) clamp(1rem, -0.1429rem + 2.6786vw, 2.5rem);
	border-radius: clamp(1rem, 0.2857rem + 1.1161vw, 1.5625rem);
	background: linear-gradient(to bottom, #f06424 0%, #f17a25 55%, #f7a91f 100%);
	color: var(--color-cream);
}

.cform :focus-visible {
	outline-color: var(--color-white);
}

.cform__title {
	color: var(--color-cream);
	font-family: var(--font-body);
	font-size: var(--fs-title-md); /* 20 → 28 */
	font-weight: var(--fw-bold);
	text-transform: uppercase;
}

.cform__subtitle {
	max-width: 42em;
	margin-top: 0.4em;
	font-size: clamp(0.8125rem, 0.6696rem + 0.2232vw, 0.9375rem); /* 13 → 15 */
	line-height: 1.2;
}

.cform__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 0.1786rem + 0.8929vw, 1.25rem) clamp(0.75rem, -0.1071rem + 1.3393vw, 1.5rem);
	margin-top: var(--space-md);
}

.cform__field {
	margin: 0;
}

.cform__field--full {
	grid-column: 1 / -1;
}

.cform__field label,
.cform__label {
	display: block;
	margin-bottom: 0.4em;
	font-size: var(--fs-md);
}

.cform input:not([type="checkbox"]):not([type="file"]),
.cform select {
	width: 100%;
	height: clamp(2.75rem, 1.8929rem + 1.3393vw, 3.5rem); /* 44 → 56 */
	padding: 0 1em;
	border: 0;
	border-radius: 4px;
	background-color: var(--color-white);
	color: var(--color-text);
	font: inherit;
	font-size: clamp(0.8125rem, 0.6696rem + 0.2232vw, 0.9375rem);
}

.cform input::placeholder {
	color: var(--color-gray-light);
}

.cform select {
	padding-right: 2.5em;
	background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23919191' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 0.9em center / 1em no-repeat;
	appearance: none;
}

.cform__field .cform__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
	min-height: clamp(5.5rem, 3.8929rem + 2.5112vw, 6.875rem); /* 88 → 110 */
	padding: 0.75rem;
	border: 1.5px dashed #f3b48f;
	border-radius: 8px;
	background: var(--color-white);
	color: var(--color-gray-light);
	cursor: pointer;
	font-size: clamp(0.8125rem, 0.6696rem + 0.2232vw, 0.9375rem);
	text-align: center;
}

.cform__drop .icon {
	width: 2rem;
	height: 2rem;
	color: var(--color-heading);
}

.cform__drop small {
	font-size: 0.6em;
}

.cform__drop.is-dragover,
.cform__drop:focus-within {
	border-color: var(--color-heading);
	background: #fff7f1;
}

.cform__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin-top: var(--space-md);
	cursor: pointer;
	font-size: var(--fs-md);
	line-height: 1.2;
}

.cform__check {
	flex: none;
	color: #ffd84a;
}

.cform__check .icon {
	width: 1.6em;
	height: 1.6em;
}

.cform__check .icon path:last-child {
	opacity: 0;
	transition: opacity var(--duration) var(--ease);
}

.cform__consent input:checked + .cform__check .icon path:last-child {
	opacity: 1;
}

.cform__consent input:focus-visible + .cform__check {
	border-radius: 50%;
	outline: 2px solid var(--color-white);
}

.cform__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	width: 100%;
	height: clamp(3.25rem, 2.1071rem + 1.7857vw, 4.25rem); /* 52 → 68 */
	margin-top: var(--space-sm);
	border: 0;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--color-white) 0%, #fde3cf 100%);
	color: var(--color-heading);
	cursor: pointer;
	font-size: clamp(0.875rem, 0.5893rem + 0.4464vw, 1.125rem); /* 14 → 18 */
	font-weight: var(--fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: box-shadow var(--duration) var(--ease), filter var(--duration) var(--ease);
}

.cform__submit:hover {
	box-shadow: 0 6px 18px rgb(116 65 27 / 0.2);
	filter: brightness(1.02);
}

.cform__submit .icon {
	width: 0.8em;
	height: 0.8em;
}

.cform__message {
	margin-top: 0.75em;
	padding: 0.6em 0.9em;
	border-radius: var(--radius-sm);
	background: rgb(255 255 255 / 0.15);
	color: var(--color-white);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
}

.cform__message[data-type="ok"] {
	background: var(--color-white);
	color: #1f7a3a;
}

.cform__message[data-type="error"] {
	background: #fff1ec;
	color: #b3261e;
}

/* Trường bắt buộc / lỗi */
.cform__req {
	margin-left: 0.15em;
	color: var(--color-white);
	font-weight: var(--fw-bold);
}

.cform__field.is-invalid :is(input, select),
.cform__field.is-invalid .cform__drop {
	outline: 2px solid #ffd3c4;
	outline-offset: 1px;
}

.cform__error {
	display: block;
	margin-top: 0.35em;
	color: #fff4ed;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}

.cform__error::before {
	content: "⚠ ";
}

.cform__consent.is-invalid .cform__check {
	outline: 2px solid #ffd3c4;
	outline-offset: 2px;
	border-radius: 50%;
}

/* Đang gửi */
.cform.is-sending .cform__submit {
	opacity: 0.7;
	cursor: progress;
}

/* Trường bẫy chống spam: ẩn với người dùng */
.cform__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ========================================================================
 * Dưới 1280px: xếp chồng tạm thời (chờ thiết kế mobile)
 * ====================================================================== */

@media (max-width: 1279.98px) {
	.project__image,
	.apply__image {
		position: static;
		width: 100%;
	}

	.project__content {
		padding: var(--space-xl) 0;
	}

	.location__button {
		position: static;
		margin: var(--space-md) var(--page-gutter);
	}

	.amenities__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.acard,
	:is(.amenities__grid > .acard:is(:nth-child(1), :nth-child(6)), .acard.is-wide) {
		grid-column: auto;
		aspect-ratio: 4 / 3;
	}

	.products__head,
	.contact__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-lg);
	}

	.products__tabs {
		flex-wrap: wrap;
		padding-left: 0;
	}

	/* Dưới 1024: thẻ xếp dọc, kích thước theo màn 1024 (tạm, chờ thiết kế mobile), hover chỉ nhích nhẹ */
	.products__panel {
		--pu: calc(1024px / 1920);

		grid-template-columns: minmax(0, 24rem);
		row-gap: var(--space-lg);
		min-height: 0;
	}

	.products__panel {
		--pcard-push: 0px;
	}

	.pcard:hover,
	.pcard:has(:focus-visible) {
		transform: scale(1.03);
	}

	.apply__intro {
		width: auto;
		margin-left: 0;
		padding-top: var(--space-xl);
	}

	.apply__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599.98px) {
	.amenities__grid,
	.apply__cards,
	.cform__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cform__field {
		grid-column: 1 / -1;
	}
}

/* ========================================================================
 * Popup chi tiết căn hộ
 * ====================================================================== */

html.has-modal {
	overflow: hidden; /* khóa cuộn trang phía sau */
}

.pcard__button {
	width: 100%;
	border: 0;
	cursor: pointer;
}

.apt-modal {
	/* --apt-w: bề rộng vừa đủ cho lưới ảnh khi màn hình thấp (JS tính); tối thiểu 40rem cho phần mô tả */
	width: min(100% - 2rem, 70rem, max(40rem, var(--apt-w, 70rem)));
	max-width: none;
	max-height: min(100dvh - 2rem, 60rem);
	padding: 0;
	border: 0;
	border-radius: var(--radius-xl);
	background: var(--color-white);
	color: var(--color-text);
	box-shadow: 0 24px 60px rgb(0 0 0 / 0.25);
	overflow: hidden;
}

.apt-modal[open] {
	animation: apt-modal-in 300ms var(--ease);
}

.apt-modal::backdrop {
	background: rgb(40 25 15 / 0.6);
	backdrop-filter: blur(3px);
}

@keyframes apt-modal-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.98);
	}
}

.apt-modal__box {
	position: relative;
	max-height: inherit;
	padding: clamp(1.25rem, 0.5357rem + 1.1161vw, 1.875rem) clamp(1.25rem, 0.1071rem + 1.7857vw, 2.25rem) clamp(1.5rem, 0.7857rem + 1.1161vw, 2.125rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.apt-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fde6d9;
	color: var(--color-gradient-end);
	cursor: pointer;
	transition: background-color var(--duration) var(--ease);
}

.apt-modal__close:hover {
	background: #fbd3bd;
}

.apt-modal__close .icon {
	width: 1.25rem;
	height: 1.25rem;
	stroke-width: 2.4;
}

/* Thông tin căn hộ */
.apt-modal__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding-right: 3rem;
}

.apt-modal__title {
	color: var(--color-brown-dark);
	font-family: var(--font-body);
	font-size: clamp(1.375rem, 0.5179rem + 1.3393vw, 2.125rem); /* 22 → 34 */
	font-weight: var(--fw-bold);
	text-transform: uppercase;
}

.apt-modal__switch {
	display: inline-flex;
	gap: 0.375rem;
}

.apt-modal__type-btn {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--color-gradient-end);
	cursor: pointer;
	transition: background-color var(--duration) var(--ease);
}

.apt-modal__type-btn:hover {
	background: #fff4ed;
}

.apt-modal__type-btn .icon {
	width: 1.1rem;
	height: 1.1rem;
	stroke-width: 2.4;
}

.apt-modal__type-btn--prev .icon {
	transform: rotate(180deg);
}

.apt-modal__switch[hidden] {
	display: none;
}

/* Nội dung đổi khi chuyển loại căn */
.apt-modal__box.is-switching .apt-modal__head,
.apt-modal__box.is-switching .apt-modal__grid {
	animation: apt-img-in 350ms var(--ease);
}

.apt-modal__area {
	padding: 0.15em 0.5em;
	background: var(--color-heading);
	color: var(--color-white);
	font-size: clamp(0.8125rem, 0.4554rem + 0.558vw, 1.125rem); /* 13 → 18 */
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	white-space: nowrap;
}

.apt-modal__text {
	flex-basis: 100%;
	max-width: 48em;
	color: var(--color-brown-dark);
	font-size: var(--fs-md);
	line-height: 1.35;
}

/* Lưới ảnh: 3 ảnh / hàng */
.apt-modal__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(0.5rem, 0.2143rem + 0.4464vw, 0.75rem);
	margin-top: var(--space-md);
	margin-inline: auto;
}

.apt-modal__grid[hidden] {
	display: none;
}

.apt-modal__cell {
	position: relative;
	aspect-ratio: 4 / 3;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--radius-sm);
	background: #f6efe9;
	cursor: zoom-in;
}

.apt-modal__cell-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.apt-modal__cell:hover .apt-modal__cell-img {
	transform: scale(1.05);
}

/* Ảnh mặt bằng (ảnh đầu) để nguyên khung, không cắt */
.apt-modal__cell:first-child .apt-modal__cell-img {
	padding: 0.5rem;
	object-fit: contain;
}

/* Carousel */
.apt-modal__viewer {
	margin-top: var(--space-sm);
}

.apt-modal__viewer[hidden] {
	display: none;
}

.apt-modal__back {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-bottom: 0.75rem;
	padding: 0.35em 0.8em 0.35em 0.5em;
	border: 1px solid #ecd2c2;
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-gradient-end);
	cursor: pointer;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.apt-modal__back:hover {
	background: #fff4ed;
}

.apt-modal__back-icon {
	transform: rotate(180deg);
}

.apt-modal__stage {
	position: relative;
	display: grid;
	place-items: center;
	height: min(62dvh, 36rem); /* JS chỉnh lại cho vừa màn hình */
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: #f6efe9;
}

.apt-modal__main {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.apt-modal__main.is-in {
	animation: apt-img-in 350ms var(--ease);
}

@keyframes apt-img-in {
	from {
		opacity: 0;
		transform: scale(0.97);
	}
}

.apt-modal__nav {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.9);
	color: var(--color-gradient-end);
	box-shadow: 0 2px 10px rgb(0 0 0 / 0.15);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color var(--duration) var(--ease);
}

.apt-modal__nav:hover {
	background: var(--color-white);
}

.apt-modal__nav .icon {
	width: 1.4rem;
	height: 1.4rem;
	stroke-width: 2.4;
}

.apt-modal__nav--prev {
	left: 0.75rem;
}

.apt-modal__nav--prev .icon {
	transform: rotate(180deg);
}

.apt-modal__nav--next {
	right: 0.75rem;
}

.apt-modal__count {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	padding: 0.15em 0.6em;
	border-radius: var(--radius-pill);
	background: rgb(40 25 15 / 0.6);
	color: var(--color-white);
	font-size: var(--fs-sm);
}

.apt-modal__thumbs {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding-bottom: 0.25rem;
	overflow-x: auto;
	scrollbar-width: thin;
}

.apt-modal__thumb {
	flex: 0 0 clamp(4.5rem, 3.0714rem + 2.2321vw, 5.75rem); /* 72 → 92 */
	aspect-ratio: 4 / 3;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	background: #f6efe9;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.apt-modal__thumb:hover {
	opacity: 1;
}

.apt-modal__thumb.is-active {
	border-color: var(--color-gradient-end);
	opacity: 1;
}

.apt-modal__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.apt-modal__thumb:first-child .apt-modal__thumb-img {
	object-fit: contain;
}

@media (max-width: 599.98px) {
	.apt-modal__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.apt-modal[open],
	.apt-modal__main.is-in {
		animation: none;
	}
}

/* ========================================================================
 * Desktop (từ 1280px): thu gọn khoảng trống để các section gần vừa 1 màn hình.
 * Chỉ giảm padding / khoảng cách, không đổi cỡ chữ và ảnh.
 * ====================================================================== */
@media (min-width: 1280px) {
	.foundations {
		padding-block: var(--space-lg) var(--space-xl);
	}

	/* 1 Điểm tựa */
	.project__content {
		padding-top: calc(64 * var(--u));
		padding-bottom: var(--space-lg);
	}

	.project__facts {
		margin-top: var(--space-md);
	}

	.project__row {
		padding-block: 0.15em;
	}

	.project__row dd {
		line-height: 1.6;
	}

	.project__stats {
		gap: calc(16 * var(--u)) 0;
	}

	.project__button {
		margin-top: var(--space-md);
	}

	/* Tiện ích */
	.amenities {
		padding-bottom: var(--space-xl);
	}

	.amenities__carousel {
		margin-top: var(--space-md);
	}

	/* Sản phẩm: khung thẻ giữ đủ cao cho thẻ phóng to khi hover */
	.products {
		padding-block: var(--space-lg);
	}

	.products__tabs {
		margin-top: var(--space-sm);
	}

	.products__panel {
		margin-top: calc(8 * var(--u));
	}

	/* Hồ sơ bớt khó: giữ đủ chỗ cho dải hàng cây ở đáy nền */
	.apply__intro {
		padding-top: calc(64 * var(--u));
	}

	.apply__cards {
		margin-top: var(--space-sm);
	}

	.apply__stage {
		padding-bottom: calc(var(--space-xl) + min(2.6042vw, 50px));
	}

	/* Tin tức */
	.news {
		padding-bottom: var(--space-xl);
	}

	/* Liên hệ: vẫn chừa chỗ cho hình mặt trời mọc ở nền, nhưng ít hơn */
	.contact {
		padding-top: clamp(7.5rem, 0.3571rem + 8.9286vw, 13.75rem); /* 120 → 220 */
		padding-bottom: var(--space-xl);
	}

	.contact__list {
		gap: var(--space-md);
	}
}

/* ========================================================================
 * Desktop: form liên hệ gọn hơn để section vừa 1 màn hình.
 * (Cuộn theo từng section do JS xử lý: assets/js/site.js)
 * ====================================================================== */
@media (min-width: 1280px) {
	/* ------------------------------------------------------------------
	 * Liên hệ: form gọn hơn để cả section vừa 1 màn hình
	 * ---------------------------------------------------------------- */
	.contact {
		padding-top: clamp(5rem, 0.5357rem + 5.5804vw, 8.75rem); /* 80 → 140 */
		padding-bottom: var(--space-lg);
	}

	.cform {
		padding: clamp(1rem, 0.4286rem + 0.8929vw, 1.5rem) clamp(1rem, 0.1429rem + 1.3393vw, 1.75rem);
	}

	.cform__grid {
		gap: 0.625rem 1rem;
		margin-top: var(--space-sm);
	}

	.cform__field label,
	.cform__label {
		margin-bottom: 0.25em;
		font-size: var(--fs-base);
	}

	.cform input:not([type="checkbox"]):not([type="file"]),
	.cform select {
		height: clamp(2.375rem, 1.6607rem + 1.1161vw, 3rem); /* 38 → 48 */
	}

	.cform__field .cform__drop {
		flex-direction: row;
		flex-wrap: wrap;
		min-height: clamp(3.5rem, 2.5rem + 1.5625vw, 4.375rem); /* 56 → 70 */
		padding: 0.5rem 0.75rem;
		column-gap: 0.5rem;
	}

	.cform__drop .icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.cform__drop small {
		flex-basis: 100%;
	}

	.cform__consent {
		margin-top: var(--space-sm);
		font-size: var(--fs-base);
	}

	.cform__submit {
		height: clamp(2.75rem, 1.8929rem + 1.3393vw, 3.5rem); /* 44 → 56 */
	}
}

/* ========================================================================
 * Desktop (từ 1280px), trang chủ: mỗi section cao đúng 1 màn hình (100dvh),
 * nội dung căn giữa theo chiều dọc; phần nội dung / ảnh không vừa sẽ bị ẩn.
 * ====================================================================== */
@media (min-width: 1280px) {
	.home main section {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100dvh;
		overflow: hidden;
	}

	/* (trừ popup <dialog> nằm trong section: nó có kích thước riêng) */
	.home main section > :not(dialog) {
		flex: none;
		width: 100%;
	}

	/* khung dạng tranh (tối đa 1920px) vẫn căn giữa ngang */
	.home .hero__stage,
	.home .project__stage,
	.home .apply__stage {
		width: min(100%, var(--page-max));
	}

	/* Tâm điểm giao thương: khung = 1 màn hình, ảnh bản đồ phủ kín, giữ phần trên (trục khoảng cách), cắt phần dưới */
	.home .location__stage {
		width: min(100%, var(--page-max));
		height: 100%;
		aspect-ratio: auto;
	}

	.home .location__button {
		top: auto;
		bottom: clamp(1.5rem, 7dvh, 4.5rem);
	}

	/* Nền phần Hồ sơ + Tin tức phủ kín 2 section (chiều cao giờ cố định theo màn hình) */
	.home-lower::before {
		background-size: cover;
	}

	/* ------------------------------------------------------------------
	 * Liên hệ: khoảng cách trong form co giãn theo chiều cao màn hình
	 * (màn to: các ô thưa hơn; màn thấp: gọn lại), thay cho khoảng cách cố định
	 * ---------------------------------------------------------------- */
	.home .contact {
		padding-block: clamp(3rem, 9dvh, 7rem) clamp(1.5rem, 4dvh, 3rem); /* trên: chừa chỗ cho mặt trời ở nền */
	}

	.cform {
		padding: clamp(1rem, 2.8dvh, 2.25rem) clamp(1rem, 1.6vw, 2.25rem) clamp(1.25rem, 3.4dvh, 2.75rem);
	}

	.cform__grid {
		gap: clamp(0.5rem, 1.8dvh, 1.25rem) 1rem;
		margin-top: clamp(0.75rem, 2.2dvh, 1.75rem);
	}

	.cform__field label,
	.cform__label {
		margin-bottom: clamp(0.2rem, 0.6dvh, 0.5rem);
	}

	.cform input:not([type="checkbox"]):not([type="file"]),
	.cform select {
		height: clamp(2.375rem, 4.6dvh, 3.25rem);
	}

	.cform__field .cform__drop {
		min-height: clamp(3.5rem, 7.5dvh, 5.5rem);
	}

	.cform__consent {
		margin-top: clamp(0.75rem, 2.2dvh, 1.75rem);
	}

	.cform__submit {
		height: clamp(2.75rem, 5.4dvh, 4rem);
		margin-top: clamp(0.5rem, 1.6dvh, 1.25rem);
	}
}

/* ========================================================================
 * Tin tức: chữ viết tay "Bạn về nhà" nằm bên phải, ngang hàng 2 dòng chữ (từ 600px)
 * ====================================================================== */
@media (min-width: 600px) {
	.news__title {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 0.4em;
		text-align: right;
	}

	.news__line {
		grid-column: 1;
	}

	.news__hand {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-top: 0;
	}
}

/* ========================================================================
 * Desktop (từ 1280px): tinh chỉnh theo chiều cao màn hình
 * ====================================================================== */
@media (min-width: 1280px) {
	/* Hero: khung cao tối đa 1 màn hình (màn thấp thì thu nhỏ theo chiều cao),
	   cụm nội dung bên trái nâng lên 40px để nút cuối không sát mép dưới */
	.home .hero__stage {
		--u: min(100cqw / 1920, 100dvh / 1040);

		height: min(calc(min(100vw, var(--page-max)) * 1040 / 1920), 100dvh);
		aspect-ratio: auto;
	}

	.home :is(.hero__logo, .hero__title, .hero__stat, .hero__buttons) {
		top: calc((var(--y) - 40) * var(--u));
	}

	/* 1 Điểm tựa: khoảng cách giữa các mục co giãn theo chiều cao màn hình */
	/* Bảng thông tin: chữ lớn hơn; màn thấp thì cả khối tự thu nhỏ cho vừa nhưng giữ đủ bề ngang cột (site.js, data-fit="fill") */
	.home .project__row {
		grid-template-columns: clamp(11.5rem, 3.9rem + 11.1vw, 17rem) minmax(0, 1fr); /* nhãn ~230 → 272 */
	}

	.home .project__row dt {
		font-size: clamp(1.25rem, 0.8rem + 0.7vw, 1.625rem); /* ~22 → 26 */
	}

	.home .project__row dd {
		font-size: clamp(1.1875rem, 0.75rem + 0.65vw, 1.5rem); /* ~21 → 24 */
	}

	/* tiêu đề nhỏ lại 15% để dành chiều cao cho bảng thông tin (khối thu nhỏ ít hơn → chữ bảng to hơn) */
	.home .project__title {
		font-size: calc(var(--fs-h2) * 0.85);
	}

	.home .project__hand {
		width: calc(clamp(12.5rem, 2.3571rem + 15.8482vw, 21.375rem) * 0.85);
	}

	.home .project__facts {
		margin-top: clamp(1.25rem, 3dvh, 2.5rem);
	}

	.home .project__row {
		padding-block: 0.35em;
	}

	.home .project__row dd {
		line-height: 1.65;
	}

	.home .project__stats {
		gap: clamp(0.75rem, 1.8dvh, 1.75rem) 0;
	}

	.home .project__button {
		margin-top: clamp(1rem, 3dvh, 2.5rem);
	}

	/* Sản phẩm: thẻ hover phóng to 1.12 (thay vì 1.46); khung và khoảng đẩy thẻ bên cạnh tính lại,
	   khoảng cách tab → thẻ gọn hơn */
	.home .products__panel {
		/* thẻ to hơn bản Figma 25% (ảnh, khoảng đệm, nút theo cùng tỉ lệ); chữ tăng riêng bên dưới */
		--pu: calc(min(100vw, var(--page-max)) / 1920 * 1.25);
		--pcard-push: calc(28 * var(--pu)); /* 414 × 0.12 / 2 ≈ 25 + khoảng hở */

		min-height: calc(570 * var(--pu)); /* thẻ 474, khi hover to thêm ~57 (chủ yếu xuống dưới) */
		margin-top: clamp(0.25rem, 1dvh, 1rem);
	}

	.home .pcard:hover,
	.home .pcard:has(:focus-visible) {
		border-width: 2px;
		transform: scale(1.12); /* vừa đủ nổi bật, không đè lên hàng tab tòa nhà */
		transform-origin: 50% 15%; /* phóng to chủ yếu xuống dưới, không chạm hàng tab phía trên */
	}

	.home .pcard__name {
		font-size: max(calc(25 * var(--pu)), 1.0625rem);
	}

	.home .pcard__area {
		font-size: max(calc(16 * var(--pu)), 0.8125rem);
	}

	.home .pcard__text {
		font-size: max(calc(19 * var(--pu)), 1.0625rem); /* tối thiểu 17px */
		line-height: 1.35;
	}

	/* đoạn giới thiệu cạnh tiêu đề nhỏ lại một chút để dành chiều cao cho thẻ */
	.home .products__intro {
		font-size: calc(var(--fs-title-lg) * 0.85);
	}

	/* hàng tab căn giữa cùng trục với 3 thẻ căn hộ */
	.home .products__tabs {
		justify-content: center;
		padding-left: 0;
	}

	/* Nền: dải hàng cây (trước nằm ở khối Tin tức) làm nền đáy khối Hồ sơ;
	   dải hàng cây của khối Liên hệ làm nền đáy khối Tin tức */
	.home-lower::before {
		display: none;
	}

	.home .apply {
		background: url("../images/home/apply-bg.webp") center bottom / 100% auto no-repeat;
	}

	/* Thẻ phương thức: chiều cao tối thiểu co theo màn hình (màn thấp bớt khoảng trống dưới đáy thẻ) */
	.home .mcard {
		min-height: clamp(15rem, 36dvh, 22.8125rem);
	}

	.home .news {
		background: url("../images/home/news-bg.webp") center bottom / 100% auto no-repeat;
	}

	/* Tin tức: tiêu đề cách 3 thẻ xa hơn */
	.home .news__grid {
		margin-top: clamp(2rem, 7dvh, 5rem);
	}

	/* Liên hệ: nền lấy phần đáy ảnh */
	.home .contact::before {
		top: 0;
		background-position: center bottom;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ========================================================================
 * Tâm điểm giao thương (desktop): xe chạy từ trái sang phải dọc trục, tiêu đề và
 * các mốc khoảng cách hiện ra khi xe chạy qua. Chạy lại mỗi lần section vào màn hình
 * (JS gắn .is-revealed lên .location__stage[data-play]).
 * Toạ độ theo ảnh gốc 3840px → px thiết kế 1920 = ×0.5 → × --u.
 * ====================================================================== */
.location__route {
	display: none;
}

/* Các mốc khoảng cách (chữ thật). Mặc định (tablet / mobile): danh sách phía trên bản đồ. */
.location__groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--space-md) var(--space-lg);
	padding: 0 var(--page-gutter) var(--space-md);
}

.route-ms {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.route-ms__badge {
	display: grid;
	flex: none;
	place-items: center;
	min-height: 6.5rem;
	padding: 0.6rem 0.3rem;
	border-radius: 4px;
	background: linear-gradient(to top, #fcba23, #f5711e); /* nhãn xoay 180°: hiển thị vàng ở trên, cam ở dưới */
	color: var(--color-white);
	font-family: var(--font-body);
	font-size: 1.25rem;
	font-weight: var(--fw-bold);
	line-height: 1;
	white-space: nowrap;
	/* chữ dọc, đọc từ dưới lên */
	writing-mode: vertical-rl;
	rotate: 180deg;
}

.route-ms__line {
	display: none;
}

.route-ms__list {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #f07a27;
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: 1.6;
}

/* chữ chuyển màu cam → vàng như thiết kế */
.route-ms__list li {
	position: relative;
	width: fit-content;
	padding-left: 1.3em;
	background: linear-gradient(90deg, #f0661f, #f7a41f);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	caret-color: #f07a27;
}

/* gạch đầu dòng: vòng tròn rỗng */
.route-ms__list li::before {
	content: "";
	position: absolute;
	top: 0.8em; /* giữa dòng đầu (line-height 1.6) khi tên dài xuống dòng */
	left: 0;
	width: 0.55em;
	height: 0.55em;
	border: 0.15em solid #f5841f;
	border-radius: 50%;
	translate: 0 -50%;
}

@media (min-width: 1280px) {
	.location__route {
		position: absolute;
		inset: 0;
		display: block;
		pointer-events: none;
	}

	/* Mốc khoảng cách: đặt theo toạ độ thiết kế, kích thước theo --u (giống dải trục) */
	.location__groups {
		position: absolute;
		inset: 0;
		display: block;
		padding: 0;
		pointer-events: none;
	}

	.route-ms {
		position: absolute;
		top: calc(var(--y) * 0.5 * var(--u));
		left: calc(var(--x) * 0.5 * var(--u));
		display: block;
		height: calc(161 * var(--u)); /* tới giữa dải trục */
		pointer-events: auto;
	}

	.route-ms__badge {
		position: absolute;
		top: calc(6 * var(--u));
		left: calc(21 * var(--u));
		width: calc(28 * var(--u));
		height: calc(101 * var(--u));
		min-height: 0;
		padding: 0;
		font-size: calc(26 * var(--u));
	}

	.route-ms__line {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: calc(40 * var(--u));
		height: 100%;
		overflow: visible;
		color: #f5841f;
	}

	.route-ms__list {
		position: absolute;
		top: calc(4 * var(--u));
		left: calc(68 * var(--u));
		font-size: max(9px, calc(13 * var(--u)));
		line-height: calc(24 * var(--u));
		white-space: nowrap;
	}

	.route-ms__list li {
		padding-left: calc(17 * var(--u));
	}

	.route-ms__list li::before {
		top: 50%;
		width: calc(7 * var(--u));
		height: calc(7 * var(--u));
		border-width: max(1px, calc(1.5 * var(--u)));
	}

	.route-part {
		position: absolute;
		top: calc(var(--y) * 0.5 * var(--u));
		left: calc(var(--x) * 0.5 * var(--u));
		width: calc(var(--w) * 0.5 * var(--u));
		max-width: none;
		height: auto;
	}

	@keyframes route-drive {
		from {
			translate: calc(-3800 * 0.5 * var(--u)) 0;
		}
	}

	/* Chưa chạy: mốc ẩn, xe nằm ngoài mép trái */
	.js .location__stage[data-play]:not(.is-revealed) .route-ms {
		opacity: 0;
	}

	.js .location__stage[data-play]:not(.is-revealed) .route-truck {
		translate: calc(-3800 * 0.5 * var(--u)) 0;
	}

	.location__stage.is-revealed .route-truck {
		animation: route-drive 4.5s linear backwards;
	}

	.location__stage.is-revealed .route-ms {
		animation: reveal-fade 700ms var(--ease) var(--t) backwards;
	}

	/* Tiêu đề hiện ra sau khi xe chạy qua (~1.4s) */
	.location__stage.is-revealed .location__title {
		animation: reveal-fade 700ms var(--ease) 1.4s backwards;
	}
}

@media (min-width: 1280px) and (prefers-reduced-motion: reduce) {
	.js .location__stage[data-play]:not(.is-revealed) .route-ms {
		opacity: 1;
	}

	.js .location__stage[data-play]:not(.is-revealed) .route-truck {
		translate: none;
	}

	.location__stage.is-revealed :is(.route-truck, .route-ms, .location__title) {
		animation: none;
	}
}

/* ========================================================================
 * Desktop: tinh chỉnh
 * ====================================================================== */
@media (min-width: 1280px) {
	/* 1 Điểm tựa: nút cuối cách đáy màn hình đủ xa */
	.home .project__content {
		padding-top: clamp(0.5rem, 2dvh, 2.5rem);
		padding-bottom: clamp(2.5rem, 7dvh, 5rem);
	}

	/* Tâm điểm giao thương: dải trục ở trên cùng; bản đồ phía dưới phủ phần còn lại, lấy khoảng giữa */
	.route-band {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}

	.home .location__map {
		top: calc(440 * 0.5 * var(--u));
		height: calc(100% - 440 * 0.5 * var(--u)); /* ảnh + lớp SVG phủ kín, lấy phần giữa (object-fit / slice) */
	}

	/* Tiện ích: nền màu chung thay cho dải trắng của ảnh nền ghép */
	.home .amenities {
		background-color: var(--color-bg);
	}
}