/**
 * Trang hồ sơ (hoso.phoenixhomes.vn) – ghi đè giao diện theme Phoenix theo thiết kế trang hồ sơ.
 * Tải sau mobile.css của theme Phoenix. Toạ độ / cỡ chữ ghi "Nu" là px của thiết kế rộng 1920
 * (PDF rộng 1400 → nhân 1.371); --u = 1px thiết kế như trong theme Phoenix.
 */

/* ========================================================================
 * Font tiêu đề: 1FTV VIP Glowing (trang chính đã chuyển sang Montserrat)
 * ====================================================================== */
:root {
	--font-title: "Title-font", var(--font-body);
	--fw-title: 400;
}

/* Cụm liên hệ nhanh: thiết kế trang hồ sơ không có (header đã có nút hotline) */
.hoso .floating-contact {
	display: none;
}

/* ========================================================================
 * Header: logo bên trái, menu, nút hotline
 * ====================================================================== */
.site-header__logo {
	flex: none;
	margin-right: auto;
}

.site-header__logo .site-logo {
	display: block;
	width: auto;
	height: clamp(2.5rem, 1.25rem + 2.2vw, 4.25rem); /* 40 → 68 */
}

.hoso .site-nav {
	flex: 0 1 auto;
	margin-right: clamp(1rem, -3rem + 6vw, 8rem);
}

.hoso .site-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.7em 1.5em;
	font-size: clamp(0.875rem, 0.5rem + 0.6vw, 1.25rem); /* 14 → 20 */
	font-weight: var(--fw-bold);
	letter-spacing: 0.02em;
}

.hoso .site-header__cta .icon {
	width: 1.15em;
	height: 1.15em;
}

/* Điện thoại: header chỉ còn nút menu + nút hotline */
@media (max-width: 599.98px) {
	.site-header__logo {
		display: none;
	}
}

@media (max-width: 1279.98px) {
	.site-header__logo {
		margin-right: 0;
	}

	.site-header__logo .site-logo {
		height: 2.5rem;
	}

	.hoso .site-nav {
		margin-right: 0;
	}
}

/* ========================================================================
 * Hero: chữ thật bên trái, số liệu và nút thấp hơn trang chính
 * ====================================================================== */
.hero__intro {
	position: absolute;
	top: calc(var(--y) * var(--u));
	left: calc(114 * var(--u));
	width: calc(1180 * var(--u));
	--y: 165;
}

.hero__kicker {
	margin: 0;
	color: var(--color-heading);
	font-size: max(calc(18 * var(--u)), 0.75rem);
	font-weight: var(--fw-medium);
}

.hero__heading {
	display: flex;
	flex-direction: column;
	margin: calc(14 * var(--u)) 0 0;
	color: var(--color-heading);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	line-height: 1.12;
}

.hero__heading-1,
.hero__heading-2 {
	white-space: nowrap;
}

.hero__heading-1 {
	font-size: max(calc(64 * var(--u)), 1.5rem);
}

.hero__heading-2 {
	font-size: max(calc(94 * var(--u)), 2rem);
	line-height: 1.08;
}

.hero__desc {
	max-width: calc(720 * var(--u));
	margin: calc(22 * var(--u)) 0 0;
	color: #6b6b6b;
	font-size: max(calc(18 * var(--u)), 0.75rem);
	line-height: 1.4;
}

.hoso .hero__stat:nth-child(1) { --x: 112; --y: 603; }
.hoso .hero__stat:nth-child(2) { --x: 446; --y: 603; }
.hoso .hero__stat:nth-child(3) { --x: 126; --y: 752; }
.hoso .hero__stat:nth-child(4) { --x: 420; --y: 735; }

.hoso .hero__buttons {
	--y: 908;
}

.hoso .hero__stage {
	aspect-ratio: 1920 / 1100;
}

@media (min-width: 1280px) {
	.home.hoso .hero__stage {
		--u: min(100cqw / 1920, 100dvh / 1100);

		height: min(calc(min(100vw, var(--page-max)) * 1100 / 1920), 100dvh);
	}

	.home.hoso .hero__intro {
		top: calc((var(--y) - 40) * var(--u));
	}
}

/* Tablet: hero dùng bố cục PC thu nhỏ theo bề ngang, đoạn mô tả nhỏ lại để không chạm hàng số liệu */
@media (min-width: 600px) and (max-width: 1279.98px) {
	.hero__desc {
		max-width: calc(800 * var(--u));
		font-size: max(calc(18 * var(--u)), 0.625rem);
		line-height: 1.3;
	}
}

/* Điện thoại: xếp dọc như hero trang chính, khối chữ căn giữa ở trên */
@media (max-width: 599.98px) {
	.hoso .hero__stage {
		height: auto;
		min-height: 100dvh;
		padding-bottom: 38dvh;
	}

	.hero__intro {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		text-align: center;
	}

	.hero__heading-1,
	.hero__heading-2 {
		white-space: normal;
		text-wrap: balance;
	}

	.hero__heading-2 br {
		display: none;
	}

	.hero__kicker {
		font-size: 0.75rem;
	}

	.hero__heading {
		margin-top: 0.4rem;
	}

	.hero__heading-1 {
		font-size: clamp(1.5rem, 7vw, 2rem);
	}

	.hero__heading-2 {
		font-size: clamp(2rem, 9.5vw, 2.75rem);
	}

	.hero__desc {
		max-width: none;
		margin-top: 0.5rem;
		font-size: 0.8125rem;
	}
}

/* ========================================================================
 * 6 nền tảng: thẻ chỉ có tiêu đề (không có nhãn nhỏ)
 * ====================================================================== */
.hoso .fcard__tag:empty {
	display: none;
}

/* ========================================================================
 * Ai được mua NOXH Phoenix Homes? (3 điều kiện + ô kiểm tra nhanh)
 * ====================================================================== */
.conditions {
	padding-block: var(--section-space);
}

.conditions__inner {
	display: grid;
	grid-template-columns: minmax(0, 700fr) minmax(0, 516fr);
	align-items: center;
	gap: var(--space-xl) clamp(1rem, 0.2rem + 1.25vw, 1.75rem);
}

.conditions__title {
	color: var(--color-heading);
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 0.4rem + 3.85vw, 4.5rem); /* 36 → 72 */
	font-weight: var(--fw-extrabold);
	line-height: 1.1;
}

.conditions__subtitle {
	margin-top: 0.5em;
	color: #6b6b6b;
	font-size: var(--fs-lg);
}

.conditions__list {
	display: grid;
	gap: clamp(0.75rem, 0.3rem + 0.75vw, 1.25rem);
	margin: clamp(1.5rem, 0.6rem + 1.6vw, 3rem) 0 0;
	padding: 0;
	list-style: none;
}

.conditions__item {
	padding: clamp(1rem, 0.6rem + 0.7vw, 1.5rem) clamp(1rem, 0.3rem + 1.3vw, 2.25rem);
	border: 1px solid #c9b9ad;
	border-radius: 12px;
	background: var(--color-white);
	transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.conditions__item:hover {
	border-color: var(--color-heading);
	box-shadow: 0 6px 18px rgb(116 65 27 / 0.1);
}

.conditions__item-title {
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 0.75rem + 0.55vw, 1.5rem); /* 17 → 24 */
	font-weight: var(--fw-semibold);
	line-height: 1.3;
}

.conditions__item-text {
	margin-top: 0.4em;
	color: #5c5c5c;
	font-size: clamp(0.875rem, 0.7rem + 0.3vw, 1.0625rem); /* 14 → 17 */
	line-height: 1.4;
}

/* PC: ô kiểm tra cao bằng cột bên trái (đỉnh ngang tiêu đề, đáy ngang ô điều kiện cuối), các nhóm giãn đều */
@media (min-width: 1024px) {
	.conditions__inner {
		align-items: stretch;
	}

	.conditions__check {
		display: flex;
		flex-direction: column;
	}

	.conditions__groups {
		flex: 1;
		grid-auto-rows: 1fr;
	}
}

.conditions__check {
	padding: clamp(1.25rem, 0.5rem + 1.3vw, 2.25rem) clamp(1rem, 0.3rem + 1.3vw, 2rem) clamp(1rem, 0.6rem + 0.7vw, 1.5rem);
	border: 2px solid #f4a77a;
	border-radius: 16px;
	background: var(--color-white);
}

.conditions__check-title {
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: clamp(1.375rem, 0.6rem + 1.4vw, 2.625rem); /* 22 → 42 */
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

.conditions__question {
	margin: 1.1em 0 0.8em;
	color: var(--color-heading);
	font-size: clamp(1.0625rem, 0.75rem + 0.55vw, 1.625rem); /* 17 → 26 */
	font-weight: var(--fw-semibold);
}

.conditions__groups {
	display: grid;
	gap: clamp(0.625rem, 0.3rem + 0.55vw, 1.125rem);
}

.conditions__group {
	display: flex;
	align-items: center;
	min-height: clamp(3rem, 1.9rem + 1.9vw, 4.375rem); /* 48 → 70 */
	padding: 0.5rem clamp(0.875rem, 0.5rem + 0.6vw, 1.5rem);
	border: 1px solid #b9a493;
	border-radius: 4px;
	background: #f3e2d0;
	color: #5a4a3f;
	font-size: clamp(0.875rem, 0.7rem + 0.3vw, 1.125rem); /* 14 → 18 */
	line-height: 1.3;
	transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.conditions__group:hover,
.conditions__group:focus-visible {
	border-color: var(--color-heading);
	background: #fde6d4;
	color: var(--color-heading);
}

.conditions__note {
	margin-top: 1rem;
	color: #6b6b6b;
	font-size: clamp(0.6875rem, 0.6rem + 0.15vw, 0.8125rem);
	font-style: italic;
	text-align: center;
}

@media (max-width: 1023.98px) {
	.conditions__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ========================================================================
 * Vị trí: tiêu đề "Sát khu …" phía trên bản đồ; góc trái dải trục là địa chỉ dự án
 * ====================================================================== */
.location__heading {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.3em;
	margin: 0;
	padding: var(--space-xl) var(--page-gutter) var(--space-md);
	font-size: var(--fs-h2);
	line-height: 1.12;
}

.location__heading-hand {
	flex: none;
	width: clamp(8.5rem, 1.5rem + 11vw, 18.5rem); /* 136 → 296 */
	height: auto;
}

.location__address {
	color: #5c5c5c;
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	white-space: normal;
}

@media (min-width: 1280px) {
	.home.hoso .location {
		justify-content: flex-start;
	}

	/* nền chuyển dần sang màu xám của dải trục bản đồ, che mép trắng ở đầu ảnh dải trục */
	/* Gọn để bản đồ có nhiều chỗ hơn: chữ nhỏ hơn, sát header; dải trục kéo lên đè phần nền trống ở đầu ảnh
	   (các mốc khoảng cách bắt đầu ở ~49px thiết kế) */
	.home.hoso .location__heading {
		margin-bottom: calc(-46 * min(100vw, var(--page-max)) / 1920);
		background: linear-gradient(to bottom, rgb(239 239 239 / 0) 0, #efefef 70%);
		padding: clamp(0.75rem, 2.5dvh, 1.75rem) var(--page-gutter) 0; /* không chừa chỗ cho header (header nền mờ đè lên được) */
		font-size: calc(var(--fs-h2) * 0.75);
	}

	.home.hoso .location__heading-hand {
		width: calc(clamp(8.5rem, 1.5rem + 11vw, 18.5rem) * 0.75);
	}

	.home.hoso .location__stage {
		flex: 1 1 auto;
		min-height: 0;
		height: auto;
	}

	/* địa chỉ: chỗ tiêu đề cũ ở góc trái dải trục */
	.home.hoso .location__address {
		top: calc(70 * var(--u));
		left: calc(114 * var(--u));
		width: calc(420 * var(--u));
		min-width: 0;
		font-size: max(calc(24 * var(--u)), 0.875rem);
		line-height: 1.45;
	}
}

@media (max-width: 1279.98px) {
	.location__address {
		position: static;
		width: auto;
		margin: 0;
		padding: 0 var(--page-gutter) var(--space-md);
		font-size: var(--fs-md);
		text-align: center;
	}
}

@media (max-width: 599.98px) {
	/* chữ viết tay ở trên, 2 dòng chữ bên dưới */
	.location__heading {
		flex-direction: column;
		gap: 0.15em;
		font-size: clamp(1.375rem, 6.5vw, 1.875rem);
		text-align: center;
	}

	.location__heading-hand {
		width: 42vw;
	}
}

/* ========================================================================
 * Chọn căn theo số người trong nhà: thẻ 2PN nổi bật sẵn, nút dẫn tới form
 * ====================================================================== */
.hoso .products__hand {
	width: clamp(12rem, 1.5rem + 16.5vw, 21.5rem); /* 192 → 344 */
}

.hoso .products__title-text {
	margin-top: -0.2em;
}

.hoso .pcard__button {
	text-align: center;
}

@media (min-width: 1280px) {
	/* chưa rê chuột vào thẻ nào: thẻ giữa (2PN) ở trạng thái nổi bật, 2 thẻ bên dạt ra như khi hover */
	.home.hoso .products__panel:not(:has(.pcard:is(:hover, :focus-within))) .pcard:nth-child(2) {
		z-index: 1;
		border: 2px solid var(--color-gradient-end);
		box-shadow: 0 7px 20px rgb(116 65 27 / 0.18);
		transform: scale(1.12);
		transform-origin: 50% 15%;
	}

	.home.hoso .products__panel:not(:has(.pcard:is(:hover, :focus-within))) .pcard:nth-child(2) .pcard__button {
		background: var(--gradient-primary);
		color: var(--color-white);
	}

	.home.hoso .products__panel:not(:has(.pcard:is(:hover, :focus-within))) .pcard:nth-child(1) {
		transform: translateX(calc(-1 * var(--pcard-push)));
	}

	.home.hoso .products__panel:not(:has(.pcard:is(:hover, :focus-within))) .pcard:nth-child(3) {
		transform: translateX(var(--pcard-push));
	}
}

/* ========================================================================
 * Hồ sơ bớt khó: dòng 2 số hotline dưới 4 thẻ
 * ====================================================================== */
.apply__hotlines {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem clamp(1.5rem, 0.5rem + 2vw, 3rem);
	margin: clamp(1.25rem, 0.5rem + 1.5vw, 2.5rem) 0 0;
	color: #6b6b6b;
	font-family: var(--font-title);
	font-size: var(--fs-title-md);
}

.apply__hotlines a {
	color: var(--color-heading);
}

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

/* ========================================================================
 * Liên hệ: lời mời + văn phòng + hotline bên trái, form rút gọn bên phải
 * ====================================================================== */
.hoso .contact__inner {
	align-items: center;
}

/* màn nhỏ (khối thông tin của theme Phoenix xếp lại: tiêu đề → form → thông tin): lời mời + hotline nằm sau form */
.contact__lines {
	order: 3;
	margin-top: clamp(1.5rem, 0.5rem + 2vw, 3.5rem);
	color: var(--color-heading);
	font-size: clamp(0.9375rem, 0.7rem + 0.45vw, 1.375rem); /* 15 → 22 */
	line-height: 1.5;
}

.contact__lines p {
	margin: 0 0 0.6em;
}

.contact__lines strong {
	font-weight: var(--fw-bold);
}

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

.hoso .cform__grid {
	margin-top: 0;
}

.hoso .cform__field label {
	color: var(--color-white);
	font-size: clamp(0.875rem, 0.7rem + 0.3vw, 1.125rem);
}

.hoso .cform__consent {
	align-items: center;
	color: var(--color-white);
}

.hoso .cform__check {
	position: relative;
	flex: none;
	width: clamp(1.75rem, 1.2rem + 0.9vw, 2.25rem);
	height: clamp(1.75rem, 1.2rem + 0.9vw, 2.25rem);
	border: 2px solid var(--color-white);
	border-radius: 2px;
}

.hoso .cform__consent input:checked + .cform__check::after {
	content: "";
	position: absolute;
	top: 18%;
	left: 34%;
	width: 28%;
	height: 50%;
	border: solid var(--color-white);
	border-width: 0 3px 3px 0;
	rotate: 45deg;
}

.hoso .cform__consent input:focus-visible + .cform__check {
	outline: 2px solid var(--color-white);
	outline-offset: 2px;
}

.cform__policy {
	color: inherit;
	text-decoration: underline;
}

.hoso .cform__submit {
	justify-content: center;
	width: 100%;
	border-radius: 2px;
	background: linear-gradient(90deg, #fff 0%, #fde2cc 100%);
	color: var(--color-heading);
	font-family: var(--font-body);
	font-size: clamp(1.125rem, 0.7rem + 0.75vw, 1.75rem); /* 18 → 28 */
	font-weight: var(--fw-bold);
	letter-spacing: 0.03em;
	text-transform: none;
}