/**
 * Bản đồ — kiểu dáng. Mọi selector đóng khung trong .vvbd.
 * Không 100vw, không calc(50% - 50vw): cột RealHomes lệch trái, tràn viền tính sai.
 */

.vvbd { position: relative; }

.vvbd .vvbd-khung {
  width: 100%;
  height: clamp(320px, 55vh, 560px);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(20, 36, 29, .14);
  /* Leaflet đặt z-index nội bộ khá cao; kẹp lại để không đè menu dính của theme. */
  z-index: 0;
}

.vvbd .vvbd-chua-khai {
  padding: 2.5rem 1rem;
  text-align: center;
  color: #7A7A72;
  background: #F4EDE3;
  border-radius: 2px;
  font-size: .9375rem;
}

/* Nhãn tên dự án cạnh ghim */
.vvbd .vvbd-nhan-du-an {
  background: #14241D;
  color: #FFFDF9;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 2px;
  white-space: nowrap;
  width: auto !important;
  height: auto !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

/* Popup */
.vvbd .leaflet-popup-content { margin: 10px 14px; }
.vvbd .vvbd-pop-ten { display: block; font-size: 14px; margin-bottom: 4px; color: #14241D; }
.vvbd .vvbd-pop-dong { display: block; font-size: 12.5px; color: #4a4a44; line-height: 1.5; }
.vvbd .vvbd-pop-dong em { color: #7A7A72; font-style: italic; }

/* v1.1.0 — icon tiện ích dạng emoji trên nền tròn trắng, viền màu nhóm */
.vvbd .vvbd-icon-ti span {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: #FFFDF9;
  border: 2px solid #7A7A72;
  border-radius: 50%;
  font-size: 16px; line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* ==========================================================================
   Ga metro — nhãn tên
   ==========================================================================
   Tooltip mặc định của Leaflet có nền trắng, viền, mũi nhọn: 14 cái như thế
   trên một tuyến là 14 hộp thoại chen nhau. Ở đây bỏ hết khung, chỉ còn chữ
   có viền trắng để đọc được trên mọi nền bản đồ.

   Dùng px chứ KHÔNG dùng rem: site đặt html{font-size:62.5%} nên 1rem = 10px,
   mọi rem ở đây sẽ co lại còn 62,5% — đúng bệnh đã phải vá ở villaverde-blocks.
   ========================================================================== */
.vvbd .vvbd-nhan-ga {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: #2b2b2b;
  white-space: nowrap;
  /* Viền trắng quanh chữ thay cho nền hộp — đọc được cả trên nền sáng lẫn tối */
  text-shadow:
    -1px -1px 0 #fff,  1px -1px 0 #fff,
    -1px  1px 0 #fff,  1px  1px 0 #fff,
     0   -1px 0 #fff,  0    1px 0 #fff,
    -1px  0   0 #fff,  1px  0   0 #fff;
  transition: opacity .15s ease;
}

.vvbd .vvbd-nhan-ga::before { display: none; }  /* mũi nhọn của tooltip */

.vvbd .vvbd-nhan-ga-dau {
  font-size: 12px;
  font-weight: 700;
}

/* Dòng ghi công nguồn trong popup — nhỏ, mờ, nhưng có mặt.
   ODbL đòi ghi công khi dùng lại hình học, không chỉ khi dùng ảnh nền. */
.vvbd .vvbd-pop-nguon {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.3;
  color: #8a8a8a;
}

/* ==========================================================================
   Làm nhạt nền tile
   ==========================================================================
   Nền OSM chuẩn (Carto standard) vẽ rất nhiều: đường nhỏ, ranh phường, nhãn
   khu công nghiệp, ao hồ. Đọc bản đồ hành chính thì tốt, nhưng khi mình thả
   tuyến và ghim lên trên thì chúng chìm lẫn vào đám đó.

   VÌ SAO KHÔNG ĐỔI SANG CARTODB POSITRON — kiểu nền tối giản mà mọi hướng dẫn
   đều khuyên: CARTO đã siết điều khoản, tile của họ nay chỉ dành cho khách
   Enterprise và tổ chức phi lợi nhuận được cấp grant. villaverde.vn là site
   bán hàng, tức thương mại — dùng là sai giấy phép. Stamen cũng loại (đã
   chuyển sang Stadia Maps từ 10/2023, phải đăng ký).

   Nên: giữ nguyên tile OSM đang dùng, chỉ hạ tông bằng CSS. Không thêm phụ
   thuộc, không thêm rủi ro pháp lý, không thêm một máy chủ nữa phải trông.

   FILTER CHỈ ÁP CHO LỚP TILE. Overlay (tuyến, ghim, ga, nhãn) nằm ở pane khác
   nên giữ nguyên màu — đó chính là điều mình muốn: nền lùi, dữ liệu của mình
   tiến lên.
   ========================================================================== */
.vvbd .leaflet-tile-pane {
  filter: grayscale(var(--vvbd-nen-xam, .7))
          brightness(var(--vvbd-nen-sang, 1.04))
          contrast(var(--vvbd-nen-tuong-phan, .9));
}

/* ⚠️ MỨC MẶC ĐỊNH ĐÃ NỚI Ở v1.5.0.
   Bản v1.4.0 để .85/1.08/.82 — Du chụp màn hình và nói đúng: nhạt tới mức đó
   thì ĐƯỜNG VÀNH ĐAI 3 trên nền chìm luôn. Đây là hệ quả tôi không lường:
   làm nhạt nền thì làm nhạt CẢ thông tin nằm trên nền, mà Vành đai 3 lại là
   thứ trước đó tôi vẫn nói "OSM vẽ sẵn rồi, khỏi cần vẽ".

   Cách chữa THẬT không nằm ở đây mà ở nút Nạp: tuyến nào quan trọng với dự án
   thì phải là LỚP CỦA MÌNH, không phải chi tiết trên nền — lớp của mình không
   dính filter, lại có viền trắng. Nới mức mặc định chỉ là đỡ gắt phần nào. */

/* Ba mức đặt sẵn — admin chọn, không phải sửa code.
   Giá trị gắn ở phần tử .vvbd nên mỗi bản đồ tự mang mức của nó. */
.vvbd[data-vvbd-nen="goc"] .leaflet-tile-pane { filter: none; }

.vvbd[data-vvbd-nen="rat-nhat"] {
  --vvbd-nen-xam: 1;
  --vvbd-nen-sang: 1.16;
  --vvbd-nen-tuong-phan: .68;
}

/* ==========================================================================
   v1.6.0 — Chú giải có công tắc
   ==========================================================================
   Thay `L.control.layers` mặc định của Leaflet. Layers control chỉ liệt kê
   TÊN lớp; bản đồ của mình có nét liền/nét đứt mang nghĩa khác nhau, nên chỗ
   bật/tắt cũng phải là chỗ GIẢI THÍCH — nếu không, nét đứt là một quy ước
   không ai nói cho khách biết.
   ========================================================================== */
.vvbd .vvbd-chu-giai {
  background: rgba(255, 253, 249, .95);
  border: 1px solid rgba(20, 36, 29, .18);
  border-radius: 2px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
  font-size: 12px;
  line-height: 1.35;
  max-width: 268px;
  overflow: hidden;
}

.vvbd .vvbd-cg-nut {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(20, 36, 29, .12);
  background: #F4EDE3;
  color: #14241D;
  font: inherit;
  font-weight: 700;
  text-align: left;
  padding: 6px 10px;
  cursor: pointer;
}

.vvbd .vvbd-cg-nut::after { content: " ▾"; opacity: .55; }
.vvbd .vvbd-cg-thu .vvbd-cg-nut::after { content: " ▸"; }
.vvbd .vvbd-cg-thu .vvbd-cg-than { display: none; }

.vvbd .vvbd-cg-than { padding: 5px 9px 7px; max-height: 300px; overflow-y: auto; }

.vvbd .vvbd-cg-dong {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 0;
  cursor: pointer;
}

.vvbd .vvbd-cg-dong input { margin: 3px 0 0; flex: 0 0 auto; }

/* Mẫu nét: một vệt màu đúng bằng màu tuyến, đứt hay liền y như trên bản đồ.
   Đây là phần khiến chú giải giải thích được, chứ không chỉ liệt kê. */
.vvbd .vvbd-cg-mau {
  flex: 0 0 auto;
  width: 20px;
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--vvbd-cg-mau, #7A7A72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9);
}

.vvbd .vvbd-cg-dut {
  background: repeating-linear-gradient(
    to right,
    var(--vvbd-cg-mau, #7A7A72) 0 5px,
    transparent 5px 9px
  );
  box-shadow: none;
}

/* Nhóm tiện ích hiện bằng chấm tròn, không phải vệt — chúng là điểm, không
   phải tuyến; dùng cùng một mẫu là dạy khách một quy ước sai. */
.vvbd .vvbd-cg-cham {
  width: 10px;
  height: 10px;
  margin: 3px 5px 0;
  border-radius: 50%;
}

.vvbd .vvbd-cg-trong { background: none; box-shadow: none; }

.vvbd .vvbd-cg-chu b { display: block; font-weight: 600; color: #14241D; }
.vvbd .vvbd-cg-chu i {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: #7A7A72;
  margin-top: 1px;
}

/* ==========================================================================
   v1.6.0 — Chữ trên bản đồ
   ==========================================================================
   Hai kiểu chữ, hai cơ chế khác nhau:
     .vvbd-chu-doc  — SVG <text> gắn vào <textPath>, chạy dọc đường. Nằm trong
                      overlay SVG nên KHÔNG dính filter làm nhạt nền.
     .vvbd-chu-noi  — divIcon, xoay bằng transform ở span bên trong (xoay ở
                      marker là ghi đè translate3d của Leaflet).
   ========================================================================== */
.vvbd .vvbd-chu-doc {
  font-weight: 700;
  letter-spacing: .2px;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

.vvbd .vvbd-chu-noi { width: auto !important; height: auto !important; }

.vvbd .vvbd-chu-noi > span {
  display: inline-block;
  transform-origin: 0 50%;
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.15;
  text-shadow:
    -1px -1px 0 #fff,  1px -1px 0 #fff,
    -1px  1px 0 #fff,  1px  1px 0 #fff,
     0   -1px 0 #fff,  0    1px 0 #fff,
    -1px  0   0 #fff,  1px  0   0 #fff;
}

/* Nhãn của một vùng khoanh đặt ở tâm vùng — kéo về giữa cả hai chiều để không
   lệch sang phải như nhãn điểm. */
.vvbd .vvbd-chu-vung > span { transform-origin: 50% 50%; }
.vvbd .vvbd-chu-vung { transform: translate(-50%, -50%); }

/* ==========================================================================
   v1.7.0 — Watermark
   ==========================================================================
   ⚠️ RÀNG BUỘC CỨNG: watermark KHÔNG được che dòng ghi công OpenStreetMap.
   Ghi công là nghĩa vụ giấy phép ODbL; che nó là dùng sai phép — cùng loại
   rủi ro đã khiến plugin từ chối tile CARTO và Stamen.

   Leaflet đặt dòng ghi công ở góc DƯỚI-PHẢI. Nên hai vị trí dưới phải chừa
   chỗ cho nó bằng margin-bottom, chứ không phải bằng z-index (đè lên rồi hạ
   độ mờ vẫn là đè).
   ========================================================================== */
.vvbd .vvbd-wm {
  font-size: 12px;
  line-height: 1.2;
  color: #14241D;
  text-align: right;
  padding: 4px 7px;
  border-radius: 2px;
  background: rgba(255, 253, 249, .72);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  /* Chữ để NHÌN, không phải để bấm — bắt chuột là nó nuốt cú bấm lẽ ra thuộc
     về bản đồ, đúng ở cái góc người ta hay bấm. */
  pointer-events: none;
  user-select: none;
}

.vvbd .vvbd-wm b {
  display: block;
  font-weight: 700;
  letter-spacing: .2px;
}

.vvbd .vvbd-wm i {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .3px;
}

/* Chừa chỗ cho dòng ghi công của Leaflet ở hàng dưới cùng. */
.vvbd .vvbd-wm-duoi-phai,
.vvbd .vvbd-wm-duoi-trai { margin-bottom: 22px; }

.vvbd .vvbd-wm-duoi-trai,
.vvbd .vvbd-wm-tren-trai { text-align: left; }

/* ==========================================================================
   v1.8.0 — Bản đồ nhiều dự án
   ========================================================================== */

/* Ô chọn "đo khoảng cách tới dự án nào". Chỉ có ở bản đồ tổng. */
.vvbd .vvbd-cg-chon {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 0 7px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(20, 36, 29, .12);
}
.vvbd .vvbd-cg-chon span { font-size: 11px; color: #7A7A72; }
.vvbd .vvbd-cg-chon select { max-width: 100%; font-size: 12px; }

/* Ghim dự án KHÔNG phải mốc đo: nhạt hơn, nhãn nhỏ hơn. Ba nhãn cùng cỡ thì
   không đọc ra dự án nào đang là gốc của mọi con số trên popup. */
.vvbd .vvbd-nhan-phu {
  background: rgba(20, 36, 29, .72);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 7px;
}

/* Dòng phụ trong popup — km đường chim bay khi đã có km đường bộ. Nó vẫn cần
   có mặt (số tự tính, đúng tuyệt đối) nhưng không được cạnh tranh với số đo. */
.vvbd .vvbd-pop-nhe { color: #8a8a82; font-size: 11.5px; }

/* v1.12.0 — thẻ mọc vào chỗ bản đồ của theme. Chiều cao chép từ thẻ cũ trong
   JS; ở đây chỉ đặt mức sàn phòng khi thẻ cũ chưa có chiều cao lúc đo. */
.vvbd.vvbd-soan { display: block; min-height: 320px; }
.vvbd .vvbd-khung { min-height: 100%; }

/* v1.19.0 — ghim CHỌN vị trí trong admin. Đỏ và có vòng nhịp, để không lẫn với
   ghim vàng của dự án: hai ghim cùng màu thì kéo nhầm cái không kéo được. */
.vvbd .vvbd-ghim-chon > span {
  display: block;
  width: 18px;
  height: 18px;
  margin: 2px;
  border-radius: 50%;
  background: #B0574F;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(176, 87, 79, .5), 0 1px 4px rgba(0, 0, 0, .4);
  cursor: move;
}