:root{
  --bg:#0b1020; --card:#141a32; --muted:#c7cbe3; --text:#f5f7ff;
  --accent:#4da3ff; --ok:#39d98a; --warn:#ffcc66; --err:#ff6b6b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#0e1530;border-bottom:1px solid #1f2747}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 18px var(--ok)}
.logo-text{font-weight:800;letter-spacing:.3px}
.nav{display:flex;align-items:center;gap:12px}
.nav a{color:#dbe2ff;text-decoration:none;font-weight:600;opacity:.9}
.nav a:hover{opacity:1}
.btn{border:0;border-radius:12px;padding:10px 12px;font-weight:700;cursor:pointer;background:#24305a;color:#cbd3ff}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border:1px dashed #2a335e;color:#cbd3ff}
.btn.primary{background:var(--accent);color:#001431}
.btn.green{background:var(--ok);color:#001a10}
.hello{color:#cbd3ff;margin-right:8px}

/* Hero */
.hero{padding:40px 0;border-bottom:1px solid #1f2747;background:linear-gradient(180deg,#0b1020 0%,#0c132b 100%)}
.hero h1{margin:0 0 8px;font-size:28px}
.hero p{margin:0 0 16px;color:var(--muted)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-actions input{flex:1;min-width:220px;padding:12px;border-radius:12px;border:1px solid #2a335e;background:#0c132b;color:var(--text)}
.hero-stats{display:flex;gap:18px;margin-top:16px}
.stat{background:#0c132b;border:1px solid #2a335e;border-radius:12px;padding:12px 16px}
.stat span{font-size:20px;font-weight:800;display:block}
.stat small{color:var(--muted)}

/* Section heads */
.section-head{display:flex;align-items:end;justify-content:space-between;margin:18px 0 10px}
.section-head h2{margin:0}
.legend{color:var(--muted);font-size:12px}

/* Map section */
.map-section{padding:24px 0 6px}
.map-canvas{width:100%;height:420px;border-radius:16px;border:1px solid #2a335e;background:#0c132b;overflow:hidden}

/* Listings */
.listings-section{padding:10px 0 48px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters input,.filters select{padding:10px 12px;border-radius:12px;border:1px solid #2a335e;background:#0c132b;color:var(--text)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
@media (max-width: 992px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.cards{grid-template-columns:1fr}}
.card{background:#0c132b;border:1px solid #2a335e;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;height:180px;object-fit:cover;border-bottom:1px solid #2a335e}
.card .body{padding:10px}
.card .title{font-weight:800}
.card .meta{font-size:12px;color:#c7cbe3;margin:4px 0 6px}
.card .actions{display:flex;gap:8px;margin-top:auto;padding:10px}
.card .btn{width:100%}

/* Empty */
.empty{color:var(--muted);text-align:center;margin:24px 0}

/* Footer */
.site-footer{border-top:1px solid #1f2747;padding:18px 0;background:#0e1530;color:#cbd3ff}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.small{color:#94a3c4;font-size:12px}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-card{width:min(760px,94vw);background:#0c132b;border:1px solid #2a335e;border-radius:16px;padding:14px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.icon-btn{background:transparent;border:1px dashed #2a335e;color:#cbd3ff;border-radius:10px;padding:6px 10px;cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width: 640px){.grid2{grid-template-columns:1fr}}
.modal input,.modal select,.modal textarea{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid #2a335e;background:#0c132b;color:var(--text)
}
.form-actions{display:flex;gap:8px;align-items:center;margin-top:10px}
.error{color:var(--err);font-size:12px}

/* Leaflet tooltip label */
.leaflet-tooltip.lot-label{
  background:#0c132b;color:#f5f7ff;border:1px solid #2a335e;border-radius:10px;
  padding:6px 8px;font-weight:700;font-size:12px;box-shadow:0 4px 16px rgba(0,0,0,.35);pointer-events:none
}
.leaflet-tooltip.lot-label .sub{display:block;font-weight:600;font-size:11px;color:#c7cbe3;margin-top:2px}
/* === Map resizable wrapper === */
#mapWrap{
  position: relative;
  height: 420px;           /* chiều cao mặc định */
  min-height: 260px;
  max-height: 90vh;
  border-radius: 16px;
  border: 1px solid #2a335e;
  overflow: hidden;
}

/* Tay nắm kéo chiều cao (ở cạnh dưới) */
#mapResizer{
  position: absolute; left:0; right:0; bottom:0;
  height: 10px; cursor: ns-resize;
  background: linear-gradient(to bottom, transparent, rgba(77,163,255,.15));
}
#mapResizer::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:64px; height:4px; top:2px; border-radius:4px; background:#2a335e;
}

/* Đảm bảo modal nằm trên tất cả */
.modal{ z-index: 2000; }           /* modal container + backdrop */
.modal-card{ z-index: 2001; }      /* khung nội dung trong modal */

/* “Dìm” Leaflet xuống dưới modal (phòng khi pane có z-index cao) */
.leaflet-container{ position: relative; z-index: 1; }
/* --- Map mặc định VUÔNG (1:1), vẫn kéo cao/thấp khi cần --- */
/* Khung bản đồ: desktop = 16:9, mobile = 1:1 */
#mapWrap{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* MẶC ĐỊNH: HÌNH CHỮ NHẬT (desktop) */
  height: auto;           /* để aspect-ratio quyết định chiều cao */
  min-height: 320px;
  max-height: 90vh;
  border: 1px solid #2a335e;
  border-radius: 14px;
  overflow: hidden;
  flex: 0 0 auto;
  align-self: stretch;
}

/* Bản thân thẻ map lấp đầy wrapper */
#mapHome{ width: 100%; height: 100%; }

/* Điện thoại (≤ 640px): đổi sang hình VUÔNG */
@media (max-width: 640px){
  #mapWrap{
    aspect-ratio: 1 / 1;  /* HÌNH VUÔNG trên mobile */
    min-height: 260px;
  }
}

/* Full màn vẫn ưu tiên 100vh */
#mapWrap.map-full{
  position: fixed; inset: 0;
  width: 100vw; height: 100vh !important;
  max-height: none; border-radius: 0;
  z-index: 1500;
}

/* (Tùy chọn) Tối ưu kích thước nút + tay nắm trên mobile */
@media (max-width: 640px){
  #mapFullscreen{ padding: 8px 12px; font-size: 14px; }
  #mapResizer{ height: 12px; }
}
/* Nút "Vị trí của tôi" nằm trong map (kiểu control của Leaflet) */
.leaflet-control.myloc-control a{
  width: 34px; height: 34px; display: block;
  line-height: 34px; text-align: center; font-size: 16px;
  background: rgba(12,19,43,.92); color: #fff;
  border: 1px solid #2a335e; border-radius: 8px;
  text-decoration: none; cursor: pointer;
}
.leaflet-control.myloc-control a:hover{ filter: brightness(1.06); }

/* Biểu tượng tròn ở giữa nút */
.leaflet-control.myloc-control a .loc-icon{
  position: relative; display: inline-block;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #fff;
}
.leaflet-control.myloc-control a .loc-icon::after{
  content:""; position:absolute; left:50%; top:50%;
  width: 4px; height: 4px; border-radius: 50%; background:#fff;
  transform: translate(-50%, -50%);
}

/* Vùng sai số của vị trí (vòng tròn xanh nhạt) */
.myloc-accuracy{
  fill: rgba(77,163,255,.2);
  stroke: rgba(77,163,255,.6);
  stroke-width: 2;
}
/* ===== Thanh tìm kiếm dưới map ===== */
.search-bar{
  margin-top: 12px;
  background: #0c132b;
  border: 1px solid #2a335e;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

/* Hàng tìm nhanh: ô input chiếm rộng, nút nằm bên phải */
.search-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

/* Hàng bộ lọc: lưới 5 cột trên desktop, tự co trên mobile */
.filter-row{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto auto; /* type | min | max | apply | reset */
  gap: 8px;
}

.search-bar input,
.search-bar select{
  background: #0e1733;
  color: #e8ecff;
  border: 1px solid #2a335e;
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}
.search-bar input::placeholder{ color:#91a0c7; }

.search-bar .btn{
  background: #1a48ff;
  color:#fff;
  border: 1px solid #1f2747;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
}
.search-bar .btn:hover{ filter: brightness(1.05); }

.search-bar .btn.ghost{
  background: transparent;
  color:#c7cbe3;
}

/* Mobile: xếp dọc gọn gàng */
@media (max-width: 640px){
  .search-row{
    grid-template-columns: 1fr; /* input trên, nút dưới */
  }
  .search-row .btn{ width: 100%; }

  .filter-row{
    grid-template-columns: 1fr 1fr; /* 2 cột */
  }
  .filter-row .btn,
  .filter-row .btn.ghost{
    grid-column: span 1; /* mỗi nút chiếm 1 cột */
  }
}
/* Popup gallery inside Leaflet popup */
.popup-card .hero{
  width:100%; height:220px; object-fit:cover;
  border-radius:10px; border:1px solid #2a335e; margin-bottom:8px;
  cursor:pointer;
}
.popup-card .thumbs{ display:flex; gap:6px; margin-bottom:8px; overflow-x:auto; }
.popup-card .thumbs img{
  width:64px; height:64px; object-fit:cover;
  border-radius:8px; border:1px solid #2a335e;pointer-events: auto; cursor:pointer;
  flex: 0 0 auto;
}
.popup-card .thumbs img.active{ outline:2px solid var(--accent); }
/* === Nút FULL màn nằm trong khung map (góc trên-phải) === */
#mapFullscreen{
  position: absolute;
  top: 10px; right: 10px;
  z-index: 31;
  border: 1px solid #2a335e;
  background: rgba(12,19,43,.9);
  color:#fff;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

/* Ẩn tay nắm kéo khi đang full màn */
#mapWrap.map-full #mapResizer{ display: none; }

/* Tránh đụng "tai thỏ" iOS khi full màn */
#mapWrap.map-full #mapFullscreen{
  top:  calc(env(safe-area-inset-top, 0px)  + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
}

/* Bảo đảm tay nắm kéo nổi trên control của Leaflet */
#mapResizer{
  z-index: 30;
  pointer-events: auto;
}
.map-tools{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin:8px 0 0;   /* sát ngay dưới map */
}
@media (max-width: 768px){
  .map-tools{ justify-content:stretch; }
}
/* ===== Map tools under map: layout polish ===== */
.map-tools.under-map{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0 8px;
  align-items: stretch;
}

@media (max-width: 380px){
  .map-tools.under-map{ grid-template-columns: 1fr; }
}

.map-tools .btn{
  width: 100%;
  height: 44px;
  border-radius: 12px;
  font-weight: 700;
}

/* Giữ tông dark của site */
.map-tools .btn.ghost{
  background:#0c132b;
  border:1px solid #2a335e;
  color:var(--text);
}
.map-tools .btn.green{
  background:#34d399;
  border:1px solid rgba(52,211,153,.35);
  color:#05321f;
}

/* Đảm bảo <a class="btn"> nhìn như nút */
.map-tools a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* Nhỏ gọn control Leaflet trên mobile */
.leaflet-top .leaflet-control,
.leaflet-bottom .leaflet-control{ margin:8px; }
/* Căn giữa nội dung Hero */
.hero .container{
  max-width: 900px;         /* tùy ý */
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

/* Căn giữa hàng thống kê */
.hero-stats{
  justify-content: center;  /* vì .hero-stats đang là flex */
}

/* Nhìn gọn hơn khi căn giữa */
.hero h1{ margin-bottom: 8px; }
.hero p{  margin-left: auto; margin-right: auto; max-width: 680px; }
/* ===== Listings filters: 2 fields/row on mobile, 3 when wider ===== */
.listings-section .section-head{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 16px;
  align-items: end;
}
.listings-section .section-head h2{ margin:0; }

/* Lưới bộ lọc */
#searchBar.filters{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 cột mặc định */
  gap: 12px;
  align-items: end;
}

/* Rất hẹp -> 1 cột để không bị chật */
@media (max-width: 360px){
  #searchBar.filters{ grid-template-columns: 1fr; }
}

/* Màn rộng -> 3 cột cho gọn chiều cao */
@media (min-width: 860px){
  #searchBar.filters{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Kích thước control đồng bộ */
#searchBar select,
#searchBar input,
#searchBar .btn{
  height: 44px;
  border-radius: 12px;
  width: 100%;
}

/* 2 nút cuối cùng nằm cùng một hàng, cân nhau */
#btnApply, #btnReset{ width: 100%; }

/* Nếu sau này muốn một ô trải rộng cả hàng, thêm class .full vào ô đó */
#searchBar .full{ grid-column: 1 / -1; }
/* ===== Center the listings header + filters ===== */
.listings-section .section-head{
  display: grid !important;           /* ghi đè flex cũ */
  grid-template-columns: 1fr;         /* xếp dọc: tiêu đề trên, lọc dưới */
  justify-items: center;              /* căn giữa nội dung */
  gap: 10px;
  text-align: center;
}
.listings-section .section-head h2{ margin: 0; }

/* Lưới bộ lọc ở giữa, rộng vừa phải */
#searchBar.filters{
  width: 100%;
  max-width: 760px;                   /* tùy chỉnh */
  margin: 0 auto;                     /* căn giữa container */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* 2 ô mỗi hàng */
  gap: 12px;
  align-items: end;
}

/* Màn cực hẹp -> 1 cột; màn rộng -> 3 cột */
@media (max-width: 360px){
  #searchBar.filters{ grid-template-columns: 1fr; }
}
@media (min-width: 860px){
  #searchBar.filters{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Control đồng bộ kích thước */
#searchBar select,
#searchBar input,
#searchBar .btn{ height: 44px; border-radius: 12px; width: 100%; }

/* Hai nút cuối đứng cạnh nhau, nhưng vẫn căn giữa theo container */
#btnApply, #btnReset{ width: 100%; }

/* (tùy chọn) Nếu có ô cần trải rộng cả hàng: thêm class .full vào phần tử đó */
#searchBar .full{ grid-column: 1 / -1; }
/* ===== BDS LIST CARDS (scoped) ===== */
.bds-card__title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bds-card__meta  { opacity:.85; font-size:.95rem; margin:2px 0 6px; }
.bds-card__addr  { opacity:.95; font-size:.95rem; margin:4px 0 6px; }

/* Mô tả: preview 4 dòng; khi mở rộng thì hiện toàn bộ */
.bds-card__desc{
  margin-top:6px;
  font-size:.95rem; line-height:1.5; opacity:.92;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word; max-height:6.2em;
}
.bds-card.is-expanded .bds-card__desc{
  -webkit-line-clamp:initial; max-height:none; overflow:visible; white-space:pre-wrap;
}

/* Nút xem thêm/thu gọn – dạng link để gọn gàng */
.bds-card__toggle{
  margin-top:6px; font-size:.9rem; background:transparent; border:0; padding:0;
  cursor:pointer; text-decoration:underline; opacity:.9;
}
.bds-card__toggle:hover{ opacity:1; }
/* ===== Cards: địa chỉ, ngày đăng & gallery (scoped) ===== */
.bds-card .bds-hero{
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-bottom: 1px solid #2a335e;
  display: block;
}
.bds-card .bds-thumbs{
  display: flex;
  gap: 6px;
  padding: 6px 10px 0;
  overflow-x: auto;
}
.bds-card .bds-thumb{
  width: 56px; height: 56px; flex: 0 0 auto;
  border: 1px solid #2a335e;
  border-radius: 8px;
  object-fit: cover; cursor: pointer;
  outline: 2px solid transparent;
}
.bds-card .bds-thumb.is-active{ outline-color: rgba(120,160,255,.9); }

.bds-card .bds-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bds-card .bds-meta{ opacity:.85; font-size:.95rem; margin:2px 0 6px; }
.bds-card .bds-addr{ opacity:.95; font-size:.95rem; margin:4px 0 2px; }
.bds-card .bds-date{ opacity:.8; font-size:.9rem; }

/* === BĐS CARD — Title vàng nổi + Phone đỏ có nền ôm chữ === */
:root{
  --bds-title-yellow: #ffd24d;   /* vàng nổi trên nền xanh-đen */
  --bds-phone-red:    #ef4444;   /* đỏ 500 */
  --bds-phone-bg:     rgba(239,68,68,.14);  /* nền đỏ nhạt ôm sát chữ */
  --bds-phone-bd:     rgba(239,68,68,.35);  /* viền mảnh cho chip */
}

/* Tiêu đề: vàng, đậm, hơi lớn một nhịp để “bật” lên */
.bds-card .bds-title{
  color: var(--bds-title-yellow) !important;
  font-weight: 800;
  font-size: 1.15rem;            /* vừa phải, không quá to */
  letter-spacing: .2px;
  text-shadow: 0 0 .8px rgba(0,0,0,.25), 0 2px 10px rgba(255,210,70,.12);
  display: -webkit-box;          /* giữ 2 dòng như cũ */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Số điện thoại: đỏ, nền ôm chữ, không “phồng” quá */
.bds-card .meta a[href^="tel:"]{
  display: inline-block;         /* để nền ôm sát chữ */
  color: var(--bds-phone-red) !important;
  background: var(--bds-phone-bg);
  border: 1px solid var(--bds-phone-bd);
  padding: 6px 10px;             /* gọn, không dày */
  line-height: 1.1;
  font-weight: 700;
  font-size: .95rem;             /* không to quá */
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(239,68,68,.12);
  transition: transform .15s ease, filter .15s ease;
  vertical-align: middle;
}

.bds-card .meta a[href^="tel:"]:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* Giãn cách tổng thể phần meta cho thoáng mắt */
.bds-card .bds-meta{ opacity:.88; margin:4px 0 6px; }
.bds-card .bds-addr{ opacity:.95; margin:4px 0 2px; }
.bds-card .bds-date{ opacity:.85; font-size:.9rem; }
/* === BĐS CARD — Tiêu đề xanh lá nổi bật === */
.bds-card .bds-title{
  /* chữ */
  color:#34d399 !important;            /* xanh lá chủ đạo */
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:.2px;

  /* nền + khung */
  padding:8px 10px;
  margin:6px 0 4px;
  background:linear-gradient(180deg, rgba(52,211,153,.16), rgba(52,211,153,.08));
  border:1px solid rgba(52,211,153,.35);
  border-radius:10px;
  box-shadow:0 6px 18px rgba(52,211,153,.12);

  /* giữ 2 dòng + cắt gọn */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* === Share button layout tweaks === */
.actions .btn{ width:auto; flex:1; }
.actions .btn.ghost{ border-style:dashed; }