/* Trang chi tiết tin nhà đất (Mua bán / Thuê nhà). Nạp sau assets/css/bdst-ui.css (token, nút, gallery, popup... dùng chung
   với trang dự án); file này chỉ có phần riêng. Chỉ nạp trên trang nhà đất – xem inc/nha-dat.php. */

.nd-page {
	--nd-thue: #0F5E63;
}

/* ---------- Badge loại tin: ngay trên H1 ----------
   Nền nhạt + viền + vạch màu 4px bên trái + icon; không phải nền đặc nên không tranh với nút CTA crimson.
   Bán: chữ #9C163B trên #FBE9EE (6.94:1). Cho thuê: chữ #0B4F53 trên #E3F1F1 (8.03:1). */
.nd-page .da-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
}

.nd-page .da-badge.nd-badge-loai {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px 6px 13px;
	border: 1px solid #F2C4D1;
	background: var(--brand-soft);
	box-shadow: inset 4px 0 0 var(--brand);
	color: #9C163B;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.nd-page .da-badge.nd-badge-loai--thue {
	border-color: #B9DCDC;
	background: #E3F1F1;
	box-shadow: inset 4px 0 0 var(--nd-thue);
	color: #0B4F53;
}

.nd-page .nd-badge-loai__icon {
	font-size: 12px;
}

/* Đã bán / Đã cho thuê: xám, nổi rõ */
.nd-page .da-badge.nd-badge-xong {
	font-size: var(--fs-small);
	padding: 4px 10px;
}

/* ---------- Khối tiêu đề ---------- */
.nd-page .nd-title {
	margin-bottom: 8px;
}

.nd-page .da-address {
	margin: 0 0 4px;
}

.nd-page .da-developer {
	margin: 0;
	font-size: var(--fs-small);
}

.nd-page .da-head__price {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nd-page .nd-price__unit {
	margin-left: 2px;
	font-size: .55em;
	font-weight: 600;
	color: var(--muted);
}

.nd-page .nd-price__m2 {
	color: var(--muted);
	font-size: var(--fs-small);
	font-variant-numeric: tabular-nums;
}

/* Tin đã bán / đã cho thuê: giá chuyển xám, không dùng màu brand */
.nd-page .da-price.nd-price--xong {
	color: var(--muted);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

/* ---------- Thông số nhanh ---------- */
.nd-page .da-spec__value {
	overflow-wrap: anywhere;
}

/* Tablet trở lên. Class nd-specs--n<số ô thực tế> (chỉ ô có dữ liệu).
   1–5 ô: 1 hàng · 6 ô: 3+3 · 7 ô: 4+3 · 8 ô: 4+4. Hàng thiếu thì các ô giãn đều hết chiều ngang
   (7 ô: lưới 12 cột, ô span 3 / 4) – không bao giờ có ô trống.
   Bỏ quy tắc "ô cuối span theo 4n+k" của bdst-ui.css (giả định lưới 4 cột, làm ô cuối rớt hàng). */
@media (min-width: 768px) {
	.nd-page ul.nd-specs[class] > li.da-spec,
	.nd-page ul.nd-specs[class] > li.da-spec:last-child {
		grid-column: auto;
	}

	.nd-page ul.nd-specs.nd-specs--n1 { grid-template-columns: minmax(0, 1fr); }
	.nd-page ul.nd-specs.nd-specs--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nd-page ul.nd-specs.nd-specs--n3,
	.nd-page ul.nd-specs.nd-specs--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nd-page ul.nd-specs.nd-specs--n4,
	.nd-page ul.nd-specs.nd-specs--n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.nd-page ul.nd-specs.nd-specs--n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

	.nd-page ul.nd-specs.nd-specs--n7 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.nd-page ul.nd-specs.nd-specs--n7[class] > li.da-spec { grid-column: span 3; }
	.nd-page ul.nd-specs.nd-specs--n7[class] > li.da-spec:nth-child(n+5) { grid-column: span 4; }
}

@media (min-width: 1024px) {
	/* Chữ nhỏ hơn trang dự án vì giá trị dài hơn ("Đông Nam - Tây Nam") */
	.nd-page .da-spec__value {
		font-size: 20px;
	}
}

/* ---------- Thông tin chi tiết: ảnh mặt bằng ---------- */
.nd-page .nd-floor {
	display: block;
	margin-top: 8px;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--surface);
}

.nd-page .nd-floor img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Tiện ích / Nội thất: lưới icon gọn ---------- */
.nd-page .nd-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nd-page .nd-features li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--heading);
	font-size: var(--fs-small);
}

.nd-page .nd-features .fas {
	flex: 0 0 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-sm);
	background: var(--bg);
	color: var(--muted);
	font-size: 14px;
}

@media (min-width: 768px) {
	.nd-page .nd-features {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Vị trí: khung nền + nút "Xem bản đồ" (bản đồ tải khi bấm / cuộn tới) ---------- */
.nd-page .nd-map {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(90deg, rgba(134, 141, 151, .12) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(rgba(134, 141, 151, .12) 1px, transparent 1px) 0 0 / 32px 32px,
		var(--neutral-bg);
}

.nd-page .nd-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	font-size: var(--fs-small);
}

/* ---------- Tính vay ---------- */
.nd-page .nd-loan__wait {
	min-height: 120px;
	margin: 0;
}

/* ---------- Sidebar: giá, người phụ trách, Gọi + Zalo, form ----------
   Gọn để vừa màn hình laptop khi dính (sticky); cao hơn màn hình thì du-an.js cho dính đáy. */
.nd-page .nd-aside.da-card {
	gap: 10px;
}

@media (min-width: 1024px) {
	.nd-page .nd-aside.da-card {
		padding: 20px;
	}
}

.nd-page .nd-aside .da-aside__price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

/* "17,9 tỷ  ≈ 511,4 tr/m²": cùng dòng, hẹp thì đơn giá xuống dòng */
.nd-page .nd-price__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
}

.nd-page .nd-aside .nd-price__m2 {
	white-space: nowrap;
}

.nd-page .nd-aside .nd-badge-xong {
	margin-top: 4px;
}

.nd-page .nd-agent {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.nd-page .nd-agent__img {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--bg);
}

/* Phòng Kinh doanh: logo, không cắt tròn */
.nd-page .nd-agent--chung .nd-agent__img {
	padding: 4px;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	object-fit: contain;
	background: var(--surface);
}

.nd-page .nd-agent__name {
	margin: 0;
	color: var(--heading);
	font-weight: 700;
	line-height: 1.3;
}

.nd-page .nd-agent__title {
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-meta);
	line-height: 1.3;
}

/* Gọi + Zalo cùng 1 hàng nếu đủ chỗ (chữ không bao giờ bị cắt: nowrap + tự xuống hàng) */
.nd-page .nd-aside__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nd-page .nd-aside__actions .da-btn {
	flex: 1 1 auto;
	--btn-px: 10px;
}

.nd-page .nd-aside__xong .da-btn {
	width: 100%;
}

/* Form cột phải: ô 44px, khoảng cách nhỏ, Nhu cầu 1 hàng */
.nd-page .nd-aside .da-aside__form {
	gap: 8px;
}

.nd-page .nd-aside .da-aside__title {
	padding-top: 10px;
	line-height: 1.3;
}

.nd-page .nd-aside .wpcf7 form .hidden-fields-container {
	margin: 0;
	padding: 0;
	border: 0;
}

.nd-page .nd-aside.da-formbox .da-field {
	margin-bottom: 8px;
}

.nd-page .nd-aside.da-formbox .da-field > span:first-child {
	margin-bottom: 2px;
}

.nd-page .nd-aside.da-formbox input[type="text"],
.nd-page .nd-aside.da-formbox input[type="tel"],
.nd-page .nd-aside.da-formbox input[type="email"] {
	height: 44px;
}

.nd-page .nd-aside.da-formbox .wpcf7-radio .wpcf7-list-item {
	flex: 1 1 auto;
}

.nd-page .nd-aside.da-formbox .wpcf7-radio label {
	width: 100%;
	padding: 4px 10px;
}

.nd-page .nd-aside.da-formbox input[type="submit"] {
	margin-top: 0;
}

.nd-page .nd-aside.da-formbox .wpcf7 form .wpcf7-response-output {
	margin-top: 8px;
}

.nd-page .nd-aside .da-aside__trust {
	margin: 0;
	line-height: 1.4;
}

.nd-page .nd-aside__xong p {
	margin: 0 0 10px;
	font-size: var(--fs-small);
}

/* Form: lựa chọn Nhu cầu không thuộc loại tin bị nha-dat.js ẩn */
.nd-page .wpcf7-list-item[hidden] {
	display: none !important;
}

/* ---------- Tin tương tự: mobile vuốt ngang, tablet / desktop lưới 3 cột ---------- */
.nd-page .nd-similar__grid {
	grid-auto-flow: column;
	grid-template-columns: none;
	grid-auto-columns: 82%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	scrollbar-width: thin;
}

.nd-page .nd-card {
	scroll-snap-align: start;
}

/* Badge trên ảnh thẻ: luôn nền đặc để đọc được trên ảnh */
.nd-page .da-pcard__img .da-badge.nd-badge-loai {
	padding: 3px 10px;
	border: 0;
	background: var(--brand);
	box-shadow: none;
	color: #fff;
	font-size: 13px;
}

.nd-page .da-pcard__img .da-badge.nd-badge-loai--thue {
	background: var(--nd-thue);
}

.nd-page .da-pcard__img .nd-badge-loai__icon {
	display: none;
}

.nd-page .nd-card .da-pcard__price small {
	margin-left: 2px;
	font-size: .75em;
	color: var(--muted);
}

.nd-page .nd-card__meta {
	margin: 4px 0 0;
	color: var(--heading);
	font-size: var(--fs-small);
	font-variant-numeric: tabular-nums;
}

.nd-page .nd-card__noi {
	margin: 4px 0 0;
	font-size: var(--fs-meta);
}

@media (min-width: 768px) {
	.nd-page .nd-similar__grid {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-columns: auto;
		overflow: visible;
	}
}