/*
 * 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; } /* v2.216.0: không còn phát sinh ở markup mới (Xóa lọc nằm chung .vvtc-loc-hang), giữ luật phòng khi shortcode cũ cache lại — vô hại nếu không khớp gì. */

/* ---------- 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: 12px; }

/*
 * v2.215.0 — Du 14/09: bản đồ "ngắn quá, không tương ứng với thông tin bên
 * trái" — cột bản đồ trước đây chỉ cao theo --vvbd-cao-khung mặc định của
 * ban-do (clamp 320–560px), trong khi cột danh sách bên trái dài theo số
 * căn. Ghi đè biến CSS NGAY TRÊN chính .vvbd (không phải lên .vvtc-ban-do
 * cha) — custom property tự khai trên .vvbd ở ban-do.css (dòng ~48) LUÔN
 * thắng giá trị kế thừa từ tổ tiên bất kể độ đặc trưng của tổ tiên, nên
 * phải đấu bằng một luật CÙNG NHẮM .vvbd với độ đặc trưng cao hơn (2 lớp
 * > 1 lớp) — bài học "hai luật cùng độ đặc trưng, luật cụ thể hơn thắng"
 * đã ghi trong TINH_TRANG_HE_THONG (mục 4, phiên 12/09).
 */
.vvtc-ban-do { position: sticky; top: 90px; }
.vvtc-ban-do .vvbd { --vvbd-cao-khung: clamp(480px, calc(100vh - 160px), 760px); }

/*
 * v2.215.0 — thẻ căn: Du báo "ghi liền khách khó nhìn — phân biệt". Tách rõ
 * 3 tầng thông tin bằng khoảng cách + đường kẻ mảnh thay vì dựa mỗi cỡ chữ:
 * (1) mã căn + thông số (PN/m²) — dòng đầu, đậm; (2) giá — nổi bật, tách
 * cột phải; (3) meta dự án/tầng/hướng — dòng phụ, nhạt; (4) badge chính
 * sách — hàng chip riêng, có viền để không lẫn vào nền thẻ.
 */
.vvtc-the {
	background: #fff; border: 1px solid #e3e1d9; border-radius: 14px;
	padding: 14px 16px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.vvtc-the:hover { border-color: #b08d57; }

.vvtc-the-dau {
	display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
	padding-bottom: 10px; border-bottom: 1px solid #f0efe8;
}
.vvtc-the-dau > .vvtc-the-ma { font-weight: 700; font-size: 16px; color: #14241d; letter-spacing: .01em; }
.vvtc-the-dau > .vvtc-the-ma > .vvtc-the-thong-so { margin-left: 8px; font-weight: 500; font-size: 13px; color: #6b7a72; }
.vvtc-the-dau > .vvtc-the-gia { font-weight: 700; font-size: 18px; color: #a3402d; white-space: nowrap; }

.vvtc .vvtc-the > .vvtc-the-meta { margin: 10px 0 0; font-size: 13px; color: #6b7a72; line-height: 1.5; }
.vvtc .vvtc-the-meta > .vvtc-the-m2 { background: #eef3f9; color: #185fa5; border-radius: 6px; padding: 1px 7px; font-size: 12px; font-weight: 600; }

.vvtc .vvtc-the > .vvtc-the-hanh-dong { margin: 10px 0 0; font-size: 13px; padding-top: 10px; border-top: 1px dashed #f0efe8; }
.vvtc .vvtc-the-hanh-dong > a { color: #185fa5; text-decoration: none; font-weight: 600; }
.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; }

/* ---------- v2.216.0: nút + bảng "Nâng cao" của [tim_can_trang] ---------- */
.vvtc-trang .vvtc-nut-trang-nang-cao {
	background: #2f8f5b; color: #fff; border: 0; border-radius: 8px;
	height: 42px; padding: 0 16px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px;
}
.vvtc-trang .vvtc-nut-trang-nang-cao:hover { background: #257249; }
.vvtc-trang .vvtc-nut-trang-nang-cao > .dashicons { color: #fff; font-size: 16px; width: 16px; height: 16px; }
.vvtc-trang-nang-cao {
	width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e3e1d9;
}
/*
 * v2.219.0 — Du 14/09: bug 2.217.0 sửa CHƯA ĐỦ — vẫn hiện sẵn trên mobile.
 * Nguyên nhân THẬT: panel mang class KÉP `vvtc-loc-hang vvtc-trang-nang-cao`
 * (để "mượn" flex/gap có sẵn của .vvtc-loc-hang) — luật [hidden] ở desktop
 * chỉ nhắm riêng `.vvtc-trang-nang-cao[hidden]` nên ăn, nhưng khối
 * @media(max-width:640px) có RIÊNG một luật `.vvtc-trang .vvtc-loc-hang{
 * display:grid}` KHÔNG kèm :not([hidden]) — luật này áp cho MỌI phần tử
 * mang class .vvtc-loc-hang, và panel VẪN mang class đó, nên ở mobile nó
 * lại khớp và thắng lần nữa (cùng độ đặc trưng 2 lớp, đứng sau trong
 * file). Y HỆT bài học "mỗi khi thêm một class mới cho phần tử mà class
 * đó cũng khớp một luật đã có ở nơi khác trong file, PHẢI kiểm tra luật
 * nào thắng" — lần này chính luật MỚI (2.216.0) mắc lại lỗi cũ vì
 * KHÔNG NGỜ chính class dùng để "mượn style" cũng bị một luật khác nhắm
 * tới ở một khối @media khác trong CÙNG file.
 *
 * SỬA TẬN GỐC: bỏ hẳn class `vvtc-loc-hang` khỏi panel (xem dung_trang()),
 * panel giờ CHỈ mang `vvtc-trang-nang-cao` — không còn phần tử nào khác
 * trong file có thể "vô tình khớp" cùng lúc. Tự khai `display` ngay trên
 * chính class riêng này, luôn kèm `:not([hidden])`, không dựa vào bất kỳ
 * class dùng chung nào khác nữa.
 */
.vvtc-trang-nang-cao:not([hidden]) { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }

@media (max-width: 860px) {
	.vvtc-than { grid-template-columns: minmax(0, 1fr); }
	.vvtc-ban-do { position: static; order: -1; }
	/* Trên di động cột bản đồ không còn "kéo dài theo cột trái" — chiều
	 * cao cố định gọn vừa màn hình, khách vuốt/zoom thay vì cuộn trang dài. */
	.vvtc-ban-do .vvbd { --vvbd-cao-khung: clamp(320px, 52vh, 440px); }
	.vvtc-the { padding: 12px 14px; }
	.vvtc-the-dau > .vvtc-the-ma { font-size: 15px; }
	.vvtc-the-dau > .vvtc-the-gia { font-size: 16px; }
}

/*
 * v2.216.0 — Du 14/09: "kích thước trường thông tin chưa đồng đều" trên di
 * động — nguyên nhân là mỗi ô có flex-basis riêng (.vvtc-o 140px,
 * .vvtc-o-gon 170px…) nên flex-wrap xếp mỗi hàng một số ô khác nhau tuỳ độ
 * dài nhãn, không đứng thẳng cột. Dưới 640px CHUYỂN HẲN sang lưới 2 cột đều
 * nhau cho MỌI ô lọc (không phân biệt .vvtc-o/.vvtc-o-gon nữa) — phần tử
 * cần rộng nguyên hàng (thanh kéo giá, nút Nâng cao, nút Xóa lọc) tự
 * `grid-column: 1 / -1`.
 */
@media (max-width: 640px) {
	.vvtc-trang .vvtc-loc-hang,
	.vvtc-trang .vvtc-trang-nang-cao:not([hidden]) {
		display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end;
	}
	.vvtc-trang .vvtc-loc-hang > .vvtc-o,
	.vvtc-trang .vvtc-loc-hang > .vvtc-o-gon,
	.vvtc-trang .vvtc-trang-nang-cao > .vvtc-o,
	.vvtc-trang .vvtc-trang-nang-cao > .vvtc-o-gon {
		flex: none; min-width: 0; width: auto;
	}
	.vvtc-trang .vvtc-loc-hang > .vvtc-cong-tac { grid-column: 1 / -1; }
	.vvtc-trang .vvtc-loc-hang > .vvtc-o-gia,
	.vvtc-trang .vvtc-loc-hang > .vvtc-nut-xoa,
	.vvtc-trang .vvtc-loc-hang > .vvtc-nut-trang-nang-cao {
		grid-column: 1 / -1;
	}
}

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

.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: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vvtc .vvtc-the-badge > span { background: #e9f3ee; color: #0f6e56; border: 1px solid #d3e8de; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 500; }

/* ---------- 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 4px 14px rgba(20,36,29,0.10); transform: translateY(-1px); }
.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; }