/* Block tìm kiếm tài sản (thẻ hero + dải strip + modal Bộ lọc) */

/* ------- Thẻ tìm kiếm hero ------- */
.mb-search-card {
	width: 100%;
	min-width: 0;
	max-width: 680px;
	background: rgba(255, 255, 255, .62);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(8, 25, 64, .22);
	overflow: hidden;
}
.mb-search-tabs {
	display: flex;
	border-bottom: 1px solid #e9edf4;
	padding: 0 6px;
}
.mb-search-tab {
	padding: 11px 16px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	color: #566072;
	border-bottom: 3px solid transparent;
}
.mb-search-tab.mb-on { color: var(--mb-navy); border-bottom-color: var(--mb-red); }
.mb-search-body { padding: 12px 14px; }
.mb-search-row { display: flex; gap: 8px; align-items: stretch; }
.mb-search-input {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 5px 0 14px;
	border: 1px solid var(--mb-border-2);
	border-radius: 9px;
	background: var(--mb-input-bg);
}
.mb-search-input span { color: var(--mb-muted-2); }
.mb-search-input input {
	flex: 1;
	min-width: 0; /* tránh min-content của placeholder làm tràn ngang trên mobile */
	border: 0;
	background: transparent;
	font-size: 13.5px;
	padding: 10px 0;
	outline: none;
	color: var(--mb-text);
	font-family: inherit;
}
.mb-search-input input::placeholder { color: #707a8c; opacity: 1; }
/* Kính lúp trong suốt nằm trong ô nhập (không phải nút riêng) */
.mb-search-go {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: #566072;
	cursor: pointer;
	padding: 0;
}
.mb-search-go:hover { color: var(--mb-red); }
/* Nút phễu bộ lọc — nằm cạnh các bộ lọc nhanh */
.mb-filter-icon {
	flex: 0 0 auto;
	width: 42px;
	align-self: stretch;
	min-height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	border: 1px solid var(--mb-border-2);
	background: var(--mb-input-bg);
	color: #566072;
	font-size: 15px;
	cursor: pointer;
}
.mb-filter-icon:hover { border-color: var(--mb-blue); color: var(--mb-blue); }
.mb-filter-icon.mb-active-filter { background: var(--mb-chip-bg); border-color: var(--mb-blue); color: var(--mb-blue); }
/* Desktop: phễu + 4 bộ lọc trên MỘT hàng, các select chia đều, không tự nới rộng
   theo option dài nhất (vd "Thành phố Hồ Chí Minh") nữa */
.mb-search-filters { display: flex; gap: 8px; margin-top: 10px; flex-wrap: nowrap; align-items: stretch; }
.mb-search-filters .mb-select { flex: 1 1 0; min-width: 0; width: auto; padding: 9px 12px; font-size: 13px; color: #2b3340; }
.mb-search-row .mb-btn-red { padding: 10px 22px; font-size: 13.5px; }
.mb-filter-btn {
	padding: 11px 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 10px;
	border: 1px solid var(--mb-border-2);
	background: var(--mb-input-bg);
	color: var(--mb-text-2);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
}
.mb-filter-btn.mb-active-filter { background: var(--mb-chip-bg); border-color: var(--mb-blue); color: var(--mb-blue); }

/* ------- Dải strip trên trang tìm kiếm ------- */
.mb-search-strip { background: #fff; border-bottom: 1px solid var(--mb-border); padding: 16px 0 14px; }
.mb-crumb { font-size: 12.5px; color: var(--mb-muted); margin-bottom: 10px; }

/* ------- Modal Bộ lọc ------- */
.mb-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 900;
	background: rgba(8, 20, 48, .5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	animation: mbFadeIn .18s ease;
}
@keyframes mbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mbPopIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.mb-modal {
	animation: mbPopIn .22s cubic-bezier(.2, .8, .3, 1);
}
.mb-modal {
	width: 640px;
	max-width: 100%;
	max-height: 86vh;
	background: #fff;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(6, 18, 44, .4);
	font-family: var(--mb-font);
	font-size: 14px;
	color: var(--mb-text);
}
.mb-modal *, .mb-modal { box-sizing: border-box; }
.mb-modal-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 24px;
	border-bottom: 1px solid #eef1f6;
}
.mb-modal-title { font-size: 18px; font-weight: 800; color: var(--mb-navy); flex: 1; }
.mb-modal-back { font-size: 20px; color: var(--mb-text-2); cursor: pointer; line-height: 1; }
.mb-modal-close { font-size: 22px; color: var(--mb-muted-2); cursor: pointer; line-height: 1; }
.mb-modal-body { flex: 1; overflow: auto; }
.mb-modal-foot {
	display: flex;
	gap: 12px;
	padding: 16px 24px;
	border-top: 1px solid #eef1f6;
	background: #fff;
}
.mb-flex1 { flex: 1; }

.mb-pane[data-pane="root"] { padding: 20px 24px 26px; }
.mb-pane-row-label { font-size: 14.5px; font-weight: 700; margin: 0 0 9px; }
.mb-pane-row-label:not(:first-child) { margin-top: 22px; }
.mb-pane-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 16px;
	border: 1px solid var(--mb-border-2);
	border-radius: 10px;
	cursor: pointer;
	background: #fff;
}
.mb-pane-ico { color: var(--mb-muted-2); font-size: 15px; }
.mb-pane-value { flex: 1; font-size: 14px; color: var(--mb-muted-2); }
.mb-pane-value.mb-set { color: var(--mb-text); font-weight: 600; }
.mb-pane-arrow { color: var(--mb-muted-3); font-size: 15px; }
.mb-pane-pad { padding: 20px 24px; }

.mb-field-label { font-size: 14px; font-weight: 600; margin: 14px 0 8px; }
.mb-field-label:first-child { margin-top: 0; }
.mb-field-hint { font-size: 12.5px; color: var(--mb-muted-2); margin-top: 7px; }
.mb-w100 { width: 100%; }

.mb-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.mb-chip {
	padding: 9px 14px;
	border-radius: 20px;
	font-size: 13.5px;
	cursor: pointer;
	border: 1px solid var(--mb-border-2);
	background: #fff;
	color: var(--mb-text-2);
}
.mb-chip.mb-on { background: var(--mb-chip-bg); border-color: var(--mb-blue); color: var(--mb-blue); }

.mb-range-row { display: flex; gap: 16px; align-items: flex-end; }
.mb-range-row > div { flex: 1; }
.mb-range-arrow { color: var(--mb-muted-2); padding-bottom: 12px; }
.mb-range-sliders { display: flex; gap: 10px; margin-top: 16px; }
.mb-range-sliders input { flex: 1; accent-color: #0f8a8a; }

.mb-opt-list { padding: 8px 0 12px; }
.mb-opt-sep { border-top: 1px solid #eef1f6; margin-top: 14px; }
.mb-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 24px;
	cursor: pointer;
	font-size: 14.5px;
	color: var(--mb-text-2);
}
.mb-opt:hover { background: #f5f7fb; }
.mb-opt input { accent-color: var(--mb-red); }
.mb-opt input:checked + span { font-weight: 600; color: var(--mb-text); }

@media (max-width: 768px) {
	.mb-modal-overlay { padding: 0; align-items: stretch; }
	.mb-modal { width: 100%; max-height: 100vh; border-radius: 0; }
	/* Mobile: cho phép xuống dòng, phễu + các bộ lọc dạng lưới */
	.mb-search-filters { flex-wrap: wrap; }
	.mb-search-filters .mb-select,
	.mb-search-filters .select2-container { min-width: 0; width: auto !important; flex: 1 1 calc(50% - 8px); }
	/* Hàng tìm kiếm: ô nhập full chiều rộng, rồi nút Tìm kiếm dòng dưới */
	.mb-search-row { flex-wrap: wrap; }
	.mb-search-input { flex: 1 1 100%; }
	.mb-filter-icon { flex: 0 0 auto; }
	.mb-search-row .mb-btn-red { flex: 1; padding: 12px; }
	.mb-search-input input { padding: 11px 0; }
	.mb-search-tabs {
		overflow-x: auto;
		scrollbar-width: none;
	}
	.mb-search-tabs::-webkit-scrollbar { display: none; }
	.mb-search-tab { padding: 11px 13px; font-size: 12.5px; white-space: nowrap; }
}

/* ---- Select2 cho bộ lọc nhanh: đồng bộ với .mb-select nhỏ gọn ---- */
.mb-search-filters .select2-container { flex: 1 1 0; min-width: 0; }
.mb-search-filters .select2-container--default .select2-selection--single {
	height: 36px;
	border: 1px solid var(--mb-border-2);
	border-radius: 9px;
	background: var(--mb-input-bg);
	display: flex;
	align-items: center;
}
.mb-search-filters .select2-selection__rendered {
	color: #2b3340 !important;
	font-size: 13px;
	line-height: 1.2;
	padding: 0 22px 0 12px;
}
.mb-search-filters .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; right: 6px; }
/* Dropdown + ô tìm kiếm */
.select2-dropdown { border: 1px solid var(--mb-border-2); border-radius: 10px; box-shadow: 0 12px 28px rgba(8, 25, 64, .16); overflow: hidden; z-index: 3000; }
.select2-search--dropdown .select2-search__field { border: 1px solid var(--mb-border-2); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit; outline: none; }
.select2-results__option { font-size: 13px; padding: 8px 12px; color: var(--mb-text-2); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted { background: var(--mb-red); color: #fff; }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--mb-chip-bg); color: var(--mb-text); }