/* nh-bds map: trang /ban-do/ — bố cục 2 cột, tấm đáy mobile (thẻ đang chọn thay popup, mở thì giấu control), thanh lớp (≤640px gập vào nút "Lớp"), chú giải, cụm, popup. */
/* Thang 5 bậc một màu (xanh site, sáng → đậm, bậc nhạt nhất ≥ 2:1 trên nền tile sáng) dùng chung cho điểm, cụm, đường, chú giải. */
:root { --nh-scale-1: #1a9850; --nh-scale-2: #91cf60; --nh-scale-3: #eab308; --nh-scale-4: #f46d1f; --nh-scale-5: #d7191c; --nh-top-h: 108px; }
.nh-mapwrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; height: calc(100dvh - var(--nh-top-h)); min-height: 480px; }
.nh-mapwrap__map { position: relative; min-width: 0; }
.nh-map { position: absolute; inset: 0; background: var(--nh-surface-2); font: inherit; }
.nh-map__bar { position: absolute; z-index: 500; top: 10px; left: 56px; right: 10px; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.nh-map__bar > * { pointer-events: auto; }
.nh-map__opts-btn { display: none; }
.nh-map__opts { display: contents; }
.nh-map__layers { display: inline-flex; background: var(--nh-bg); border-radius: var(--r-pill); box-shadow: var(--sh-1); padding: 3px; }
.nh-map__layers button { border: 0; background: none; min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); font: inherit; font-size: var(--fs-sm); color: var(--nh-text-2); cursor: pointer; white-space: nowrap; }
.nh-map__layers button:hover { background: var(--nh-surface-2); }
.nh-map__layers button[aria-pressed="true"] { background: var(--nh-primary-tint); color: var(--nh-on-tint); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--nh-primary); }
.nh-map__layers [data-nh-layer][aria-pressed="true"]::before, .nh-map__layers [data-nh-mode][aria-pressed="true"]::before { content: "✓ "; }
.nh-map__layers [data-nh-fit] { gap: 6px; } .nh-map__layers [data-nh-fit] svg { flex: none; }
/* Control Leaflet (zoom, ghi nguồn, nút Vị trí tôi) nằm dưới tấm đáy (600) và tấm lọc, chỉ trên bản đồ. */
.nh-map .leaflet-top, .nh-map .leaflet-bottom { z-index: 450; }
.nh-map__legend { position: absolute; z-index: 500; left: 10px; bottom: 26px; width: 236px; background: rgb(255 255 255 / .94); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 8px 10px; font-size: var(--fs-xs); color: var(--nh-text-2); }
.nh-map__legend-title { margin: 0 0 4px; font-weight: 700; color: var(--nh-text); }
.nh-map__legend-row { display: flex; gap: 2px; }
.nh-map__legend-row i { flex: 1; height: 10px; border-radius: 2px; }
.nh-map__legend-row i:first-child { border-radius: 5px 2px 2px 5px; }
.nh-map__legend-row i:last-child { border-radius: 2px 5px 5px 2px; }
.nh-map__legend-labels { position: relative; height: 15px; margin: 2px 0 0; color: var(--nh-text-3); font-variant-numeric: tabular-nums; }
.nh-map__legend-labels span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.nh-map__legend-note { margin: 5px 0 0; color: var(--nh-text-3); }
.nh-map__status { position: absolute; z-index: 500; top: 58px; left: 50%; transform: translateX(-50%); margin: 0; background: var(--nh-bg); padding: 6px 14px; border-radius: var(--r-pill); box-shadow: var(--sh-1); font-size: var(--fs-sm); white-space: nowrap; }
.nh-map__status a { margin-left: 6px; }
.nh-map .leaflet-container { font: inherit; }
.nh-map .leaflet-control-attribution { font-size: 10px; background: rgb(255 255 255 / .8); }
.nh-map .leaflet-bar a { color: var(--nh-text); }
/* Lớp điểm/cụm vẽ trên canvas (bds-map-points.js); màu lấy từ --nh-scale-* qua JS. */
.nh-points { position: absolute; left: 0; top: 0; pointer-events: none; }
.nh-map__popup .leaflet-popup-content-wrapper { border-radius: var(--r-lg); padding: 0; box-shadow: var(--sh-2); }
.nh-map__popup .leaflet-popup-content { margin: 0; width: 236px !important; }
.nh-map__popup .nh-card { border: 0; }
.nh-map__popup .leaflet-popup-close-button { top: 4px; right: 4px; width: 28px; height: 28px; font-size: 20px; line-height: 28px; border-radius: 50%; background: var(--nh-bg); z-index: 1; }
.nh-map__popup-street { width: 220px; padding: 10px 12px; font-size: var(--fs-sm); }
.nh-map__popup-street strong { font-size: var(--fs-base); }
.nh-map__popup-street p { margin: 4px 0; }
/* Cột phải. */
.nh-mapwrap__side { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-left: 1px solid var(--nh-line); background: var(--nh-bg); }
.nh-mapwrap__handle { display: none; }
.nh-mapwrap__head { padding: 12px 16px 0; }
.nh-mapwrap__h1 { font-size: var(--fs-lg); line-height: var(--lh-head); }
.nh-mapwrap__intro { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--nh-text-3); }
.nh-mapwrap__side .nh-search { padding: 0 16px; }
.nh-mapwrap__side .nh-tools { margin-top: 10px; }
.nh-mapwrap__side .nh-pill--select select { max-width: 150px; }
.nh-mapwrap__bar { border-bottom: 1px solid var(--nh-line); }
.nh-mapwrap__count { margin: 0; padding: 10px 16px 8px; font-size: var(--fs-sm); color: var(--nh-text-2); }
.nh-mapwrap__filter { display: none; }
.nh-mapwrap__count b { color: var(--nh-text); }
.nh-mapwrap__pick { display: none; }
.nh-mapwrap__list { flex: 1; min-height: 0; overflow: auto; padding: 12px 16px; display: grid; align-content: start; gap: 10px; overscroll-behavior: contain; }
.nh-mapwrap__list .nh-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; gap: 2px 10px; padding: 8px; content-visibility: auto; contain-intrinsic-size: auto 110px; }
.nh-mapwrap__list .nh-card__img { grid-row: 1 / 5; aspect-ratio: 4 / 3; margin: 0; align-self: start; }
.nh-mapwrap__list .nh-card > :not(.nh-card__img) { margin: 0; }
.nh-mapwrap__list .nh-card__price { font-size: var(--fs-md); }
.nh-mapwrap__list .nh-card > .nh-card__crumb { align-self: end; padding: 0; }
.nh-mapwrap__list .nh-card.is-hover { border-color: var(--nh-primary); box-shadow: 0 0 0 1px var(--nh-primary); }
.nh-mapwrap__empty { margin: 0; color: var(--nh-text-3); }
.nh-mapwrap__more { margin: 0; }
.nh-mapwrap__noscript { padding: 16px; }
body.nh-bds--map .nh-foot { margin-top: 0; }
@media (max-width: 960px) {
	:root { --nh-top-h: 148px; }
	.nh-mapwrap { display: block; height: auto; min-height: 0; }
	.nh-mapwrap__map { height: calc(100dvh - var(--nh-top-h)); }
	/* Tấm đáy thu gọn: chỉ tay cầm + dải "N tin · Bộ lọc" (+ bộ lọc khi bấm, + thẻ đang chọn) → cao theo nội dung, bản đồ rộng nhất.
	   Kéo tay cầm / bấm dải để mở danh sách. Chú giải, nút zoom đẩy lên trên tấm theo --nh-sheet-h (bds-map-sheet.js đo). */
	.nh-mapwrap__side { position: fixed; left: 0; right: 0; bottom: 0; z-index: 600; height: auto; max-height: 86dvh; border-left: 0; border-top: 1px solid var(--nh-line); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--sh-2); transition: height .2s; }
	.nh-mapwrap__side:not(.is-open) .nh-mapwrap__list, .nh-mapwrap__side:not(.is-open) .nh-mapwrap__more { display: none; }
	.nh-mapwrap__side:not(.is-filter) .nh-search { display: none; }
	.nh-mapwrap__head { order: 0; } .nh-mapwrap__bar { order: 1; } .nh-mapwrap__side .nh-search { order: 2; padding-bottom: 10px; } .nh-mapwrap__pick { order: 3; } .nh-mapwrap__list { order: 4; }
	.nh-mapwrap__bar { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; border-bottom: 0; }
	.nh-mapwrap__side.is-open .nh-mapwrap__bar, .nh-mapwrap__side.is-filter .nh-mapwrap__bar { border-bottom: 1px solid var(--nh-line); }
	.nh-mapwrap__count { flex: 1; min-width: 0; padding: 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.nh-mapwrap__count::after { content: " ▴"; color: var(--nh-text-3); } .nh-mapwrap__side.is-open .nh-mapwrap__count::after { content: " ▾"; }
	.nh-mapwrap__filter { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 0 14px; border: 1px solid var(--nh-field); border-radius: var(--r-pill); background: var(--nh-bg); color: var(--nh-primary); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
	.nh-mapwrap__filter[aria-expanded="true"], .nh-mapwrap__filter.is-on { background: var(--nh-primary-tint); border-color: var(--nh-primary-tint); color: var(--nh-on-tint); }
	.nh-mapwrap__pick { padding-bottom: 10px; }
	/* Mở: cao tới sát mép dưới header (không chui dưới header, tay cầm luôn thấy). Mở ra thì giấu thanh lớp, chú giải, control để không đè lên danh sách. */
	.nh-mapwrap__side.is-open { height: calc(100dvh - var(--nh-top-h)); }
	.nh-mapwrap.is-sheet-open .nh-map__bar, .nh-mapwrap.is-sheet-open .nh-map__legend, .nh-mapwrap.is-sheet-open .leaflet-control-container { visibility: hidden; }
	.nh-mapwrap__side.is-drag { transition: none; }
	.nh-mapwrap__handle { display: block; width: 100%; min-height: 24px; border: 0; background: none; padding: 8px 0 4px; cursor: grab; touch-action: none; }
	.nh-mapwrap__handle::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto; border-radius: 2px; background: var(--nh-line); }
	.nh-mapwrap__head { padding-top: 0; }
	.nh-mapwrap__h1 { font-size: var(--fs-md); }
	.nh-mapwrap__intro { display: none; }
	/* Bộ lọc (khi bấm "Bộ lọc") xuống dòng để thấy đủ 6 ô. */
	.nh-mapwrap__side .nh-tools { flex-wrap: wrap; overflow: visible; margin-top: 0; }
	.nh-mapwrap__side .nh-tools::after { display: none; }
	/* Thẻ đang chọn: thay popup, nằm ngay dưới dòng đếm; nút × góc phải trên. */
	.nh-mapwrap__pick { display: block; position: relative; flex: none; padding: 10px 16px 0; }
	.nh-mapwrap__pick[hidden] { display: none; }
	.nh-mapwrap__pick .nh-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; gap: 2px 10px; padding: 8px; border-color: var(--nh-primary); box-shadow: 0 0 0 1px var(--nh-primary); }
	.nh-mapwrap__pick .nh-card__img { grid-row: 1 / 5; aspect-ratio: 4 / 3; margin: 0; align-self: start; }
	.nh-mapwrap__pick .nh-card > :not(.nh-card__img) { margin: 0; }
	.nh-mapwrap__pick .nh-card__title { padding-right: 28px; }
	.nh-mapwrap__pick-close { position: absolute; top: 14px; right: 20px; z-index: 1; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--nh-surface-2); color: var(--nh-text-2); font-size: 20px; line-height: 32px; cursor: pointer; }
	.nh-map__legend { bottom: calc(var(--nh-sheet-h, 72px) + 10px); width: auto; max-width: 236px; }
	.nh-map .leaflet-bottom.leaflet-right { bottom: var(--nh-sheet-h, 72px); }
	.nh-mapwrap__more { padding: 0; }
	.nh-map__layers button { min-height: 44px; }
	.nh-mapwrap__side .nh-tools::after { background: linear-gradient(to right, transparent, var(--nh-bg)); }
	body.nh-bds--map .nh-foot { display: none; }
}
@media (max-width: 640px) {
	/* Header trang bản đồ bỏ hàng tab (đã có nút Bản đồ / Nhà đất bán ở trên) để bản đồ cao thêm 44 px. */
	body.nh-bds--map .nh-top__in { grid-template-rows: 56px 48px; grid-template-areas: "logo cta" "search search"; }
	body.nh-bds--map .nh-tabs { display: none; }
	/* Thanh lớp: chỉ 2 nút — "Lớp ▾" (mở bảng chọn lớp + thang màu) và icon Vừa khung; nút zoom/Vị trí tôi đã xuống góc dưới phải (JS). */
	.nh-map__bar { left: 8px; right: 8px; top: 8px; flex-wrap: nowrap; gap: 6px; }
	.nh-map__opts-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--nh-bg); box-shadow: var(--sh-1); font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--nh-text); cursor: pointer; max-width: 70vw; }
	.nh-map__opts-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.nh-map__opts-btn::after { content: ""; flex: none; border: 4px solid transparent; border-top: 5px solid currentColor; margin-top: 4px; opacity: .7; }
	.nh-map__opts-btn[aria-expanded="true"] { background: var(--nh-primary-tint); color: var(--nh-on-tint); }
	.nh-map__opts { display: none; position: absolute; top: 52px; left: 0; right: 0; flex-direction: column; gap: 6px; padding: 8px; background: var(--nh-bg); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
	.nh-map__opts.is-open { display: flex; }
	.nh-map__opts .nh-map__layers { display: flex; flex-wrap: wrap; gap: 4px; box-shadow: none; padding: 0; }
	.nh-map__opts .nh-map__layers + .nh-map__layers { border-top: 1px solid var(--nh-line); padding-top: 6px; border-radius: 0; }
	.nh-map__layers { flex: none; }
	.nh-map__layers button { padding: 0 12px; font-size: var(--fs-sm); }
	.nh-map__layers [data-nh-fit] { width: 44px; padding: 0; justify-content: center; } .nh-map__layers [data-nh-fit] span { display: none; }
	.nh-map__legend { width: 150px; padding: 5px 8px; bottom: calc(var(--nh-sheet-h, 72px) + 8px); }
	.nh-map__legend-title { font-size: 11px; }
	.nh-map__legend-note { display: none; }
	.nh-mapwrap__head { padding: 0; } .nh-mapwrap__h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.nh-map .leaflet-top.leaflet-right .leaflet-control-attribution { font-size: 9px; }
	.nh-mapwrap__list .nh-card { grid-template-columns: 96px minmax(0, 1fr); }
	/* Popup thấp hơn để không bị tấm đáy che: ảnh 16:9, chữ gọn. */
	.nh-map__popup .leaflet-popup-content { width: 220px !important; }
	.nh-map__popup .nh-card__img { aspect-ratio: 16 / 9; }
	.nh-map__popup .nh-card__title { -webkit-line-clamp: 1; }
}
@media (prefers-reduced-motion: reduce) { .nh-mapwrap__side { transition: none; } }
/* "Vị trí tôi": khoảng cách trên thẻ tin, nút đang bật / đang định vị, nút chuyển vào góc dưới phải trên màn hẹp (bds-map-locate.js). */
.nh-card__dist { font-size: var(--fs-xs); color: #c5221f; font-weight: 700; font-variant-numeric: tabular-nums; }
.nh-mapwrap__list .nh-card > .nh-card__dist { margin: 0; }
[data-nh-locate][aria-pressed="true"] { color: #c5221f; }
[data-nh-locate][aria-busy="true"] { opacity: .6; cursor: progress; }
.nh-map__locate-ctl { background: var(--nh-bg); border-radius: var(--r-pill) !important; }
.nh-map__locate-ctl button { border: 0; background: none; height: 36px; padding: 0 12px; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; border-radius: var(--r-pill); }
@media (max-width: 960px) { .nh-map__locate-ctl { margin-bottom: 8px !important; } .nh-map__locate-ctl button { min-height: 44px; } }
/* Khung nhìn quá rộng: tóm tắt số tin theo quận thay danh sách thẻ (bds-map-side.js). */
.nh-mapwrap__wide p { margin: 0 0 8px; color: var(--nh-text-2); font-size: var(--fs-sm); }
.nh-mapwrap__wide ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nh-mapwrap__wide .nh-chip { font: inherit; font-size: var(--fs-sm); cursor: pointer; min-height: 36px; }
.nh-mapwrap__wide .nh-chip:hover { background: var(--nh-surface-2); }