/*
 * tim-can.css — mọi luật scope trong .vvtc; selector nhắm thẻ chung luôn
 * dùng child combinator ">" (luật rút từ vụ child theme RealHomes đè màu
 * bằng descendant selector). Không !important trừ nơi phải thắng theme.
 */

.vvtc { font-family: inherit; color: #14241d; }

.vvtc-loi { padding: 12px 16px; background: #fcebeb; border: 1px solid #f0c1c1; border-radius: 8px; color: #7a1f1f; }

/* ---------- thanh chọn dùng chung ---------- */

.vvtc-hero-hang,
.vvtc-loc-hang { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }

.vvtc-hero { background: #ffffff; border: 1px solid #e3e1d9; border-radius: 12px; padding: 10px 12px; box-shadow: 0 2px 10px rgba(20, 36, 29, 0.06); }

/*
 * ---------- v2.209.0 — 2 biến thể hero, Du 12/09 (lượt 3):
 * 1. "full" full-bleed 100vw (trang /bat-dong-san) — Du báo THANH quá dày,
 *    cần MỎNG như RealHomes.
 * 2. "khung" — hộp GỌN trong khung nội dung theme (như bản gốc trước
 *    2.207.0), dùng cho trang chủ vì full-bleed làm vỡ layout hero-slider
 *    ở đó (ảnh chụp: thanh full-bleed đè lệch, cắt nửa trái). VẪN có đủ
 *    nút + bảng "Tìm kiếm nâng cao" — chỉ khác khung chiều ngang.
 * `[tim_can_hero]` mặc định `rong="full"` (giữ nguyên hành vi các trang
 * đã nhúng sẵn); `[tim_can_hero rong="khung"]` cho trang chủ.
 *
 * Kích thước ô/nút giờ DÙNG CHUNG cho cả hai biến thể (trước đây chỉ khai
 * trong .vvtc-hero-full nên biến thể khung không thấp xuống theo) — đây
 * là nguyên nhân bar "cao" Du báo: chiều cao đến từ padding ô 6px 12px 8px
 * + select cao 30px + nút cao HẲN 54px cộng dồn, không phải do full-bleed.
 * Hạ xuống mức mỏng một lần, áp cho cả full lẫn khung.
 */
.vvtc-hero-full,
.vvtc-hero-khung { display: block; }

.vvtc-hero-full .vvtc-hero-hang,
.vvtc-hero-khung .vvtc-hero-hang { gap: 8px; }

/*
 * v2.210.0 — Du 12/09 (lượt 4): "chữ khu vực/phòng ngủ/ngân sách ghi vào
 * chỗ Tất cả á" — bỏ hẳn caption <span> riêng phía trên mỗi ô (PHP đã đổi
 * sang gộp tên ô vào chính option/placeholder rỗng). Mỗi ô giờ MỘT DÒNG
 * duy nhất, kiểu RealHomes ("All Status" không có nhãn phía trên) — viền
 * + nền nằm NGAY TRÊN chính select/input, không còn div bọc ngoài có
 * padding riêng cộng dồn với padding của select bên trong (đó là nguồn
 * gốc "vẫn dày" dù đã hạ số ở 2.209.0: hai lớp padding chồng nhau).
 */
.vvtc-hero-full .vvtc-o,
.vvtc-hero-khung .vvtc-o,
.vvtc .vvtc-hero-nang-cao .vvtc-o { flex: 1 1 150px; }
.vvtc-hero-full .vvtc-o-gia-hero,
.vvtc-hero-khung .vvtc-o-gia-hero { flex: 1 1 170px; }

.vvtc-hero-full .vvtc-o > select,
.vvtc-hero-khung .vvtc-o > select,
.vvtc .vvtc-hero-nang-cao .vvtc-o > select,
.vvtc-hero-full .vvtc-o > input[type="text"],
.vvtc-hero-khung .vvtc-o > input[type="text"],
.vvtc .vvtc-hero-nang-cao .vvtc-o > input[type="text"] {
	box-sizing: border-box; width: 100%; height: 42px; padding: 0 14px;
	border: 1px solid #d7d5cc; border-radius: 8px; background: #fff;
	font-size: 15px; color: #14241d;
}

/*
 * v2.213.0 — Du báo nút "Tìm căn" "hơi tối/chìm so với màu khung tìm
 * kiếm": màu xanh lá #2f8f5b định sẵn ở đây CHƯA BAO GIỜ thật sự hiện ra
 * — luật `.vvtc .vvtc-nut-tim { background:#14241d }` (thiết kế cũ của
 * trang kết quả, ở dưới file) có ĐỘ ĐẶC TRƯNG BẰNG NHAU (2 lớp class) và
 * đứng SAU trong file nên THẮNG theo thứ tự khai báo — nút hero luôn
 * hiện màu đen #14241d cũ chứ không phải xanh lá đã định. Sửa: gộp thêm
 * lớp `.vvtc-hero` vào chính selector này (phần tử ngoài cùng vốn đã
 * mang cả `vvtc-hero` lẫn `vvtc-hero-full`/`vvtc-hero-khung`) để nâng độ
 * đặc trưng lên 3 lớp — thắng dứt điểm, không phụ thuộc thứ tự file nữa.
 */
.vvtc-hero.vvtc-hero-full .vvtc-nut-tim,
.vvtc-hero.vvtc-hero-khung .vvtc-nut-tim {
	background: #2f8f5b; color: #fff !important; height: 42px; padding: 0 22px; border: 0;
	border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; flex: 0 0 auto;
}
.vvtc-hero.vvtc-hero-full .vvtc-nut-tim:hover,
.vvtc-hero.vvtc-hero-khung .vvtc-nut-tim:hover { background: #257249; }

.vvtc-hero-full .vvtc-nut-nang-cao,
.vvtc-hero-khung .vvtc-nut-nang-cao {
	height: 42px; padding: 0 16px; border-radius: 8px; font-size: 13px; cursor: pointer;
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.vvtc-hero-full .vvtc-nut-nang-cao > .dashicons,
.vvtc-hero-khung .vvtc-nut-nang-cao > .dashicons { font-size: 16px; width: 16px; height: 16px; }

/*
 * v2.214.0 (lượt 8) — Du: (1) nền thanh full đang xanh ĐẬM, đổi sang
 * xanh lá THẬT NHẠT; (2) nút "Nâng cao" phải cùng màu với nút "Tìm căn"
 * — trước đây nút Nâng cao viền trắng/nền trong suốt (biến thể full) hay
 * viền xám/nền trắng chữ đen (biến thể khung), không đồng bộ và chữ đen
 * trên nền có thể ngả xanh nhìn khó chịu ("chữ đen nhìn ghê quá"). Giờ
 * DÙNG CHUNG một luật màu cho CẢ HAI nút — cùng nền xanh lá #2f8f5b,
 * chữ trắng — ở CẢ HAI biến thể, không phân biệt full/khung nữa.
 */
.vvtc-hero-full .vvtc-nut-nang-cao,
.vvtc-hero-khung .vvtc-nut-nang-cao {
	background: #2f8f5b; color: #fff; border: 0;
}
.vvtc-hero-full .vvtc-nut-nang-cao:hover,
.vvtc-hero-khung .vvtc-nut-nang-cao:hover { background: #257249; }
.vvtc-hero-full .vvtc-nut-nang-cao > .dashicons,
.vvtc-hero-khung .vvtc-nut-nang-cao > .dashicons { color: #fff; }

/* biến thể FULL — thanh xanh lá THẬT NHẠT, full-bleed, MỎNG (Du 12/09
   lượt 8: "màu nền đang xanh đậm, chuyển thành xanh lá thật nhạt thôi"). */
.vvtc-hero-full {
	width: 100vw; position: relative; left: 50%; right: 50%;
	margin-left: -50vw; margin-right: -50vw;
	box-sizing: border-box; border-radius: 0;
	background: #eaf5ee;
	border: 0; border-bottom: 1px solid #d6ead9; padding: 10px 5vw; box-shadow: 0 2px 8px rgba(47, 143, 91, 0.08);
}
.vvtc-hero-full .vvtc-hero-ghi-chu { color: #a32d2d; padding: 0 5vw; }

/* biến thể KHUNG — hộp gọn trong nội dung theme (trang chủ), Du 12/09 lượt 3.
 * v2.211.0 (lượt 5) — BỎ `overflow: hidden` đã thêm ở lượt 3: nó CẮT MẤT
 * phần panel nâng cao full-bleed (âm margin thò ra ngoài khung) mới thêm
 * ở lượt 4, gây vỡ giao diện cả web lẫn di động (Du báo qua ảnh chụp
 * trang chủ: các ô bị cắt cụt bên trái). `overflow: hidden` và full-bleed
 * escape KHÔNG đi chung được — đây chính là bẫy kinh điển của kỹ thuật
 * full-bleed (100vw + margin âm): bất kỳ tổ tiên nào có overflow:hidden
 * đều cắt mất phần thò ra. `max-width:100%` + `box-sizing:border-box` đã
 * đủ để .vvtc-hero-khung không tự tràn ngang, không cần overflow:hidden. */
.vvtc-hero-khung {
	background: #ffffff; border: 1px solid #e3e1d9; border-radius: 12px;
	padding: 10px 14px; box-shadow: 0 2px 10px rgba(20, 36, 29, 0.06);
	max-width: 100%; box-sizing: border-box;
}
.vvtc-hero-khung .vvtc-hero-ghi-chu { color: #a32d2d; }

/*
 * Bảng "Nâng cao" — DÙNG CHUNG cho cả hai biến thể, luôn NỀN TRẮNG NHẸ
 * NHÀNG kiểu RealHomes (ảnh 3: panel trắng tách khỏi thanh màu bên trên)
 * — Du 12/09 (lượt 3): "nhấn vào tìm kiếm nâng cao nó có nền trắng nhẹ
 * nhàng như realhome nha".
 *
 * Mở/đóng bằng thuộc tính [hidden].
 *
 * BUG v2.207.0 (Du báo 12/09 lượt 2, ảnh chụp thấy bảng hiện sẵn dù chưa
 * bấm nút): luật đặt display cho .vvtc-hero-nang-cao có độ đặc trưng CAO
 * HƠN `[hidden]{display:none}` của trình duyệt nên LUÔN THẮNG bất kể thứ
 * tự khai báo. Sửa: chỉ áp `display:flex` khi KHÔNG có `[hidden]`.
 */
.vvtc .vvtc-hero-nang-cao {
	margin-top: 8px; background: #fff; border: 1px solid #e3e1d9; border-radius: 10px;
	padding: 12px 14px; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end;
	box-shadow: 0 2px 8px rgba(20, 36, 29, 0.05);
}
.vvtc .vvtc-hero-nang-cao:not([hidden]) { display: flex; }
.vvtc .vvtc-hero-nang-cao .vvtc-o > .vvtc-o-nhan { color: #6b7a72; font-size: 12px; }
.vvtc .vvtc-hero-nang-cao .vvtc-cong-tac {
	background: #f5f6f3; border: 1px solid #e3e1d9; border-radius: 8px; padding: 0 12px;
	height: 42px; display: flex; flex-direction: row; align-items: center; gap: 6px; color: #14241d;
}

/*
 * v2.212.0 (lượt 6) — Du báo ảnh: bảng "Nâng cao" full-bleed (2.210.0/
 * 2.211.0) làm VỠ GIAO DIỆN — trên di động thấy panel không liền mạch với
 * thanh tìm kiếm phía trên (như đè lên), còn thấy cả viền khung tìm kiếm
 * lộ ra bên dưới nó; trên desktop CSS lỗi hẳn (ảnh chụp trang chủ: núm
 * trượt trôi ra lề trái ngoài cột nội dung, các ô nâng cao tràn ra ngoài
 * bên phải). Du: *"tôi chỉ bảo bạn làm gần full ngang thôi mà"* — tức
 * chỉ cần panel rộng bằng chính thanh hero phía trên (100% khung cha),
 * KHÔNG phải phá ra tận mép trình duyệt.
 *
 * BỎ HẲN kỹ thuật full-bleed (100vw + margin âm) cho panel — nó vốn giả
 * định panel là con trực tiếp của luồng trang bình thường; nhưng hero có
 * thể bị nhúng sâu trong slider/widget riêng của theme (trang chủ), nơi
 * `100vw` tính theo TOÀN VIEWPORT chứ không theo bề ngang thật của
 * slider — sai lệch đúng như ảnh Du chụp. Quay về CSS thường: panel là
 * khối con bình thường, rộng bằng 100% khung cha (.vvtc-hero-full hoặc
 * .vvtc-hero-khung) — luôn đúng bằng thanh tìm kiếm phía trên nó trong
 * MỌI ngữ cảnh nhúng, không còn phụ thuộc vị trí DOM/viewport.
 */

/* ô "Khoảng giá (thanh kéo)" — Du: "cho cái thanh trượt kéo giá vào nhé".
   Dùng lại nguyên khối .vvtc-gia-keo đã có ở trang kết quả, chỉ nới rộng
   flex-basis vì cần đủ chỗ cho thanh kéo hai đầu. */
.vvtc .vvtc-hero-nang-cao .vvtc-o-gia-nc { flex: 2 1 260px; }
.vvtc .vvtc-hero-nang-cao .vvtc-o-gia-nc > .vvtc-o-nhan { display: block; margin-bottom: 4px; }
.vvtc .vvtc-hero-nang-cao .vvtc-o-gia-nc > .vvtc-o-nhan > strong { color: #14241d; }


.vvtc .vvtc-o { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; min-width: 130px; margin: 0; }
.vvtc .vvtc-o > .vvtc-o-nhan { font-size: 12px; color: #6b7a72; line-height: 1.2; }
.vvtc .vvtc-o > select {
	width: 100%; height: 42px; padding: 6px 10px;
	border: 1px solid #d7d5cc; border-radius: 8px;
	background: #fff; font-size: 15px; color: #14241d;
}

.vvtc .vvtc-nut-tim {
	height: 42px; padding: 0 22px; border: 0; border-radius: 8px;
	background: #14241d; color: #fff !important; font-size: 15px; font-weight: 600;
	cursor: pointer; flex: 0 0 auto;
}
.vvtc .vvtc-nut-tim:hover { background: #1f3a2e; }

.vvtc .vvtc-nut-xoa {
	height: 42px; padding: 0 16px; border: 1px solid #c9a06a; border-radius: 8px;
	background: #fff; color: #8a5a1d; font-size: 14px; cursor: pointer; flex: 0 0 auto;
}

.vvtc-hero-ghi-chu { margin: 8px 0 0; font-size: 13px; color: #a32d2d; }

/* ---------- slider giá hai đầu ---------- */

.vvtc .vvtc-o-gia { flex: 2 1 280px; }
.vvtc .vvtc-o-gia > .vvtc-o-nhan { font-size: 13px; color: #43524a; }
.vvtc .vvtc-o-gia > .vvtc-o-nhan > strong { color: #14241d; }

/*
 * v2.211.0 (lượt 5) — Du báo núm bên trái (min) "nằm dưới cái thanh":
 * gốc bệnh là dùng CHÍNH track của input (`::-webkit-slider-runnable-track`,
 * 4px cao) làm luôn đường kẻ hiển thị — hai input xếp chồng đều tự vẽ
 * track riêng, input SAU (max) vẽ đè lên input TRƯỚC (min) ở đúng dải 4px
 * đó, cộng với offset `margin-top:-8px` không khớp đều giữa hai input
 * (khác build/khác trình duyệt) làm núm min lệch xuống dưới đường kẻ.
 * SỬA ĐÚNG CÁCH: đường kẻ hiển thị tách hẳn ra một lớp `::before` TĨNH,
 * duy nhất — không phải track thật của input nào cả. Track thật của cả
 * hai input trong suốt (`background: transparent`) và CAO BẰNG NÚM
 * (20px) — nhờ vậy không còn cần margin-top âm để "đoán" độ lệch, núm
 * tự căn giữa hộp input, cả hai input luôn khớp nhau tuyệt đối. Màu núm
 * đổi sang xanh lá (#2f8f5b, cùng tông nút Tìm căn) theo yêu cầu.
 */
.vvtc .vvtc-gia-keo { position: relative; height: 42px; }
.vvtc .vvtc-gia-keo::before {
	content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px;
	margin-top: -2px; background: #e3e1d9; border-radius: 2px; pointer-events: none;
}
.vvtc .vvtc-gia-keo > input[type="range"] {
	position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
	width: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none;
	pointer-events: none; height: 20px;
}
.vvtc .vvtc-gia-keo > input[type="range"]::-webkit-slider-runnable-track {
	-webkit-appearance: none; height: 20px; background: transparent;
}
.vvtc .vvtc-gia-keo > input[type="range"]::-moz-range-track {
	height: 20px; background: transparent; border: 0;
}
.vvtc .vvtc-gia-keo > input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; pointer-events: auto;
	width: 20px; height: 20px; margin-top: 0; border-radius: 50%;
	background: #2f8f5b; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25); cursor: pointer;
}
.vvtc .vvtc-gia-keo > input[type="range"]::-moz-range-thumb {
	pointer-events: auto; width: 20px; height: 20px; border-radius: 50%;
	background: #2f8f5b; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25); cursor: pointer;
}

.vvtc .vvtc-o-sap { flex: 0 1 200px; }

/* ---------- chip dự án ---------- */

.vvtc-chip-hang { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.vvtc .vvtc-chip {
	border: 1px solid #d7d5cc; border-radius: 999px; background: #fff;
	padding: 5px 14px; font-size: 13px; color: #43524a; cursor: pointer;
}
.vvtc .vvtc-chip:hover { border-color: #b08d57; }
.vvtc .vvtc-chip-chon { background: #14241d; border-color: #14241d; color: #fff !important; }

.vvtc .vvtc-o > input[type="text"] {
	width: 100%; height: 42px; padding: 6px 10px;
	border: 1px solid #d7d5cc; border-radius: 8px;
	background: #fff; font-size: 15px; color: #14241d;
}

.vvtc-hang-hai { margin-top: 10px; }

/* ---------- trang kết quả ---------- */

.vvtc-dem { margin: 14px 0 10px; font-size: 14px; color: #43524a; }

.vvtc-than { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.vvtc-than.vvtc-khong-ban-do { grid-template-columns: minmax(0, 1fr); }

.vvtc-ds { display: flex; flex-direction: column; gap: 10px; }

.vvtc-ban-do { position: sticky; top: 90px; }

.vvtc-the { background: #fff; border: 1px solid #e3e1d9; border-radius: 12px; padding: 12px 14px; }
.vvtc-the:hover { border-color: #b08d57; }

.vvtc-the-dau { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vvtc-the-dau > .vvtc-the-ma { font-weight: 600; font-size: 15px; }
.vvtc-the-dau > .vvtc-the-gia { font-weight: 700; font-size: 16px; color: #a3402d; white-space: nowrap; }

.vvtc .vvtc-the > .vvtc-the-meta { margin: 4px 0 0; font-size: 13px; color: #6b7a72; }
.vvtc .vvtc-the-meta > .vvtc-the-m2 { background: #eef3f9; color: #185fa5; border-radius: 6px; padding: 1px 6px; font-size: 12px; }

.vvtc .vvtc-the > .vvtc-the-hanh-dong { margin: 8px 0 0; font-size: 13px; }
.vvtc .vvtc-the-hanh-dong > a { color: #185fa5; text-decoration: none; }
.vvtc .vvtc-the-hanh-dong > a:hover { text-decoration: underline; }

.vvtc-them { font-size: 13px; color: #6b7a72; margin: 6px 0 0; }
.vvtc-chan { margin: 16px 0 0; font-size: 12px; color: #8a978f; }

@media (max-width: 860px) {
	.vvtc-than { grid-template-columns: minmax(0, 1fr); }
	.vvtc-ban-do { position: static; order: -1; }
}

/* ---------- v1.2.0: lọc dự án + badge hồ sơ ---------- */

.vvtc-hang-du-an { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e3e1d9; align-items: center; }
.vvtc .vvtc-nhan-hang { font-size: 13px; color: #6b7a72; flex: 0 0 auto; }
.vvtc .vvtc-cong-tac { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #14241d; margin: 0; flex: 0 0 auto; cursor: pointer; }
.vvtc .vvtc-o-gon { flex: 0 1 170px; min-width: 150px; }
.vvtc .vvtc-chip-ti { background: #f4f7f5; }
.vvtc .vvtc-the > .vvtc-the-badge { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vvtc .vvtc-the-badge > span { background: #e9f3ee; color: #0f6e56; border-radius: 6px; padding: 2px 8px; font-size: 12px; }

/* ---------- v1.5.0: cả thẻ là link ---------- */
.vvtc .vvtc-the-link { display: block; text-decoration: none; color: inherit; }
.vvtc .vvtc-the-link:hover { border-color: #b08d57; box-shadow: 0 2px 8px rgba(20,36,29,0.08); }
.vvtc .vvtc-the-hanh-dong > span { color: #185fa5; font-size: 13px; }

/* ---------- [tim_can_phap_ly] — bảng bằng chứng trên trang dự án ---------- */
.vvtc-phap-ly > table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vvtc-phap-ly > table th, .vvtc-phap-ly > table td { border: 1px solid #e3e1d9; padding: 8px 10px; text-align: left; vertical-align: top; }
.vvtc-phap-ly > table > thead th { background: #f4f7f5; color: #14241d; }
.vvtc-phap-ly > .vvtc-phap-ly-nguon { font-size: 12px; color: #6b7a72; margin: 8px 0 0; }