/* =========================
   FILTER UI (Batdongsan-like)
   ========================= */

:root{
--font-sans: "Be Vietnam Pro","Inter","Roboto",system-ui,-apple-system,"Segoe UI",Arial,"Noto Sans","Liberation Sans",sans-serif;
  --bd-border:#e7e7e7;
  --bd-muted:#6b7280;
  --bd-text:#111827;
  --bd-bg:#ffffff;
  --bd-soft:#f7f7f8;
  --bd-primary:#e03c31; /* đỏ giống portal */
  --bd-primary-2:#c92f26;
  --bd-shadow:0 10px 24px rgba(0,0,0,.06);
  --bd-radius:12px;
}

html, body{
  font-family: var(--font-sans);
}


.filter-layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:16px;
  align-items:start;
}

@media (max-width: 1024px){
  .filter-layout{ grid-template-columns: 1fr; }
}

/* ====== FIX DESKTOP: allow full filter by scrolling inside panel ====== */
@media (min-width: 1025px){
  .filter-panel{
    max-height: calc(100vh - 24px); /* top 12px + bottom 12px */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Optional: nicer scrollbar (non-intrusive) */
@media (min-width: 1025px){
  .filter-panel::-webkit-scrollbar{ width: 10px; }
  .filter-panel::-webkit-scrollbar-track{ background: transparent; }
  .filter-panel::-webkit-scrollbar-thumb{
    background: rgba(17,24,39,.12);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  .filter-panel::-webkit-scrollbar-thumb:hover{
    background: rgba(17,24,39,.18);
    border: 3px solid transparent;
    background-clip: padding-box;
  }
}

.filter-panel{
  background:var(--bd-bg);
  border:1px solid var(--bd-border);
  border-radius:var(--bd-radius);
  padding:12px;
  position:sticky;
  top:12px;
  box-shadow: var(--bd-shadow);
}

@media (max-width:1024px){
  .filter-panel{
    position:relative;
    top:auto;
    box-shadow:none;
  }
}

.filter-panel h2{
  font-size:15px;
  margin:0 0 10px;
  color:var(--bd-text);
}

.filter-block{
  border-top:1px dashed var(--bd-border);
  padding-top:12px;
  margin-top:12px;
}

.filter-block:first-of-type{
  border-top:none;
  padding-top:0;
  margin-top:0;
}

.filter-label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.filter-label strong{
  font-size:14px;
  color:var(--bd-text);
}

.filter-label .hint{
  font-size:12px;
  color:var(--bd-muted);
}

.filter-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

@media (max-width: 1024px){
  .filter-row{ grid-template-columns:1fr; }
}

/* Selects / inputs */
.filter-panel select,
.filter-panel input[type="text"],
.filter-panel input[type="number"]{
  width:100%;
  height:40px;
  border:1px solid var(--bd-border);
  border-radius:10px;
  padding:0 10px;
  outline:none;
  background:#fff;
  color:var(--bd-text);
}

.filter-panel select:focus,
.filter-panel input:focus{
  border-color: rgba(224,60,49,.55);
  box-shadow: 0 0 0 3px rgba(224,60,49,.12);
}

/* Buttons */
.btn-apply{
  width:100%;
  height:42px;
  border:none;
  border-radius:12px;
  background:var(--bd-primary);
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.btn-apply:hover{ background:var(--bd-primary-2); }

.btn-reset{
  display:block;
  text-align:center;
  margin-top:10px;
  color:var(--bd-muted);
  text-decoration:none;
  font-size:13px;
}
.btn-reset:hover{ color:var(--bd-text); }

/* =========================
   CHECKBOX (like batdongsan)
   ========================= */
.checkbox-group{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.checkbox-group label{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  font-size:14px;
  color:var(--bd-text);
}

.checkbox-group input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border:2px solid #cfd4dc;
  border-radius:4px;
  display:inline-grid;
  place-content:center;
  background:#fff;
  margin:0;
}

.checkbox-group input[type="checkbox"]::before{
  content:"";
  width:10px;
  height:10px;
  transform:scale(0);
  transition:.12s transform ease-in-out;
  box-shadow: inset 1em 1em var(--bd-primary);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

.checkbox-group input[type="checkbox"]:checked{
  border-color: rgba(224,60,49,.65);
  box-shadow: 0 0 0 3px rgba(224,60,49,.10);
}

.checkbox-group input[type="checkbox"]:checked::before{
  transform:scale(1);
}

.checkbox-group .sub{
  font-size:12px;
  color:var(--bd-muted);
}

/* =========================
   RANGE (dual slider) + preset chips
   ========================= */
.dual-range{
  background: var(--bd-soft);
  border:1px solid var(--bd-border);
  border-radius:12px;
  padding:10px;
}

.dual-range .preset-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--bd-border);
  background:#fff;
  font-size:13px;
  color:var(--bd-text);
  cursor:pointer;
  transition: .12s ease;
}

.chip:hover{
  border-color: rgba(224,60,49,.55);
}

.chip.active{
  background: rgba(224,60,49,.09);
  border-color: rgba(224,60,49,.55);
  color: var(--bd-primary);
  font-weight:600;
  
}

.chip .x{
  display:none;
}

.dual-range .range-io{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}

.dual-range .range-io .box label{
  display:block;
  font-size:12px;
  color:var(--bd-muted);
  margin-bottom:6px;
}

.dual-range .range-io input{
  height:38px;
  border-radius:10px;
}

.dual-range .range-label{
  font-size:13px;
  color:var(--bd-text);
  margin-bottom:8px;
  font-weight:700;
}

/* Slider track */
.dual-range .slider{
  position:relative;
  height:34px;
}

.dual-range .track{
  position:absolute;
  left:4px; right:4px;
  top:50%;
  transform:translateY(-50%);
  height:6px;
  border-radius:999px;
  background:#e5e7eb;
}

.dual-range .fill{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  height:6px;
  border-radius:999px;
  background: var(--bd-primary);
  left:0;
  width:0;
}

/* Two overlapped range inputs */
.dual-range input[type="range"]{
  position:absolute;
  left:0; right:0;
  top:0;
  width:100%;
  height:34px;
  background:transparent;
  pointer-events:none;
  -webkit-appearance:none;
  appearance:none;
  margin:0;
}

.dual-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--bd-primary);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
  pointer-events:auto;
  cursor:pointer;
}

.dual-range input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--bd-primary);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
  pointer-events:auto;
  cursor:pointer;
}

.dual-range .range-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
  gap:10px;
}

.dual-range .btn-mini{
  height:34px;
  border-radius:10px;
  border:1px solid var(--bd-border);
  background:#fff;
  padding:0 10px;
  cursor:pointer;
  font-size:13px;
  color:var(--bd-text);
}
.dual-range .btn-mini:hover{
  border-color: rgba(224,60,49,.55);
}

.dual-range .note{
  font-size:12px;
  color:var(--bd-muted);
}

/* Make range blocks fit filter column width */
.dual-range{ width:100%; }

/* =========================
   ACTIVE FILTER CHIPS (top of results)
   ========================= */
.active-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 12px;
}

.active-chips .chip{
  background:#fff;
}

.active-chips .chip .x{
  display:inline-flex;
  width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#f3f4f6;
  color:#111827;
  font-weight:600;
  line-height:1;
}

.active-chips .chip:hover .x{
  background: rgba(224,60,49,.10);
  color: var(--bd-primary);
}

/* =========================
   SKELETON cards (lazy load)
   ========================= */
.skeleton-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
@media (max-width:1024px){ .skeleton-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .skeleton-grid{ grid-template-columns: 1fr; } }

.skeleton-card{
  border:1px solid var(--bd-border);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  padding:10px;
}

.skel-img{
  height:150px;
  border-radius:10px;
  background:#efefef;
  margin-bottom:10px;
}
.skel-line{
  height:12px;
  border-radius:8px;
  background:#efefef;
  margin-bottom:8px;
}
.skel-line.w90{ width:90%; }
.skel-line.w70{ width:70%; }
.skel-line.w60{ width:60%; }

.shimmer{
  background: linear-gradient(90deg, #efefef 0%, #f7f7f7 35%, #efefef 70%);
  background-size: 200% 100%;
  animation: shimmer 1.1s infinite;
}
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* =========================
   MOBILE BOTTOM SHEET (ADD-ON)
   Keep existing design/colors
   ========================= */

.sheet-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(1px);
  z-index:9998;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}

body.sheet-open .sheet-overlay{
  opacity:1;
  pointer-events:auto;
}

/* Mobile filter bar (sticky bottom) */
.mobile-filter-bar{
  position:fixed;
  left:0; right:0;
  bottom:0;
  z-index:9997;
  padding:10px 12px;
  background:rgba(255,255,255,.92);
  border-top:1px solid var(--bd-border);
  backdrop-filter: blur(8px);
  display:none;
}

.mobile-filter-bar .bar-inner{
  display:flex;
  gap:10px;
  align-items:center;
}

.mobile-filter-bar .btn-open{
  flex:1;
  height:44px;
  border-radius:14px;
  border:1px solid var(--bd-border);
  background:#fff;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.mobile-filter-bar .btn-open .count{
  display:inline-flex;
  min-width:22px;
  height:22px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background: rgba(224,60,49,.12);
  color: var(--bd-primary);
  font-weight:900;
  font-size:12px;
  padding:0 8px;
}

.mobile-filter-bar .btn-apply-mini{
  height:44px;
  padding:0 14px;
  border-radius:14px;
  border:none;
  background: var(--bd-primary);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.mobile-filter-bar .btn-apply-mini:hover{ background: var(--bd-primary-2); }

/* Sheet header inside filter panel (only mobile) */
.sheet-head{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 2px 10px;
  border-bottom:1px dashed var(--bd-border);
  margin-bottom:10px;
}

.sheet-head strong{
  font-size:14px;
  color:var(--bd-text);
}

.sheet-head .btn-close{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--bd-border);
  background:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  display:grid;
  place-items:center;
}

/* Turn existing filter-panel into bottom-sheet on mobile */
@media (max-width: 1024px){
  /* show mobile bar */
  .mobile-filter-bar{ display:block; }

  /* keep results not hidden behind bar */
  body.has-mobile-filterbar main.container{
    padding-bottom: 84px;
  }

  /* filter panel becomes sheet */
  .filter-panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    z-index:9999;
    border-radius: 18px 18px 0 0;
    max-height: 85vh;
    overflow:auto;
    box-shadow: 0 -16px 40px rgba(0,0,0,.14);
    transform: translateY(105%);
    transition: transform .22s ease;
    padding:12px 12px 14px;
  }

  body.sheet-open .filter-panel{
    transform: translateY(0);
  }

  .sheet-head{ display:flex; }

  /* slightly taller button on mobile */
  .btn-apply{ height:46px; border-radius:14px; }
}

/* =========================
   QUICK CHIPS (enhanced)
   ========================= */

.quick-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.quick-chips .chip{
  padding:7px 10px;
  font-weight:600;
}


/* =========================
   BREADCRUMBS + LIST TOOLBAR (ADD-ON)
   ========================= */
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  font-size:13px;
  color: var(--bd-muted);
  margin: 0 0 10px;
}
.breadcrumbs a{
  color: var(--bd-muted);
  text-decoration:none;
}
.breadcrumbs a:hover{ color: var(--bd-text); }
.breadcrumbs .sep{ color: #c0c4cc; }

/* Toolbar above results */
.list-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin: 8px 0 10px;
}
.list-toolbar .left,
.list-toolbar .right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.list-toolbar .view-toggle .chip{
  font-weight:600;
  padding:8px 12px;
}
.list-toolbar select{
  height:38px;
  border-radius:10px;
  border:1px solid var(--bd-border);
  padding:0 10px;
  background:#fff;
  color:var(--bd-text);
}
.list-toolbar .meta-count{
  font-size:13px;
  color:var(--bd-muted);
}

/* List view layout for cards */
#listingGrid.is-list{
  grid-template-columns: 1fr !important;
}
#listingGrid.is-list .listing-card{
  display:flex;
  gap:12px;
  align-items:stretch;
  
}
.listing-card{
  margin-bottom: 8px;
}
#listingGrid.is-list .listing-card .thumb{
  flex: 0 0 260px;
  max-width:260px;
  border-radius:12px;
  overflow:hidden;
}
#listingGrid.is-list .listing-card .thumb img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
}
#listingGrid.is-list .listing-card .card-body{
  flex:1;
  padding: 10px 10px 10px 0;
}
@media (max-width: 640px){
  #listingGrid.is-list .listing-card{
    flex-direction:column;
  }
  #listingGrid.is-list .listing-card .thumb{
    max-width:100%;
    flex: 0 0 auto;
  }
  #listingGrid.is-list .listing-card .thumb img{
    height: 180px;
  }
  #listingGrid.is-list .listing-card .card-body{
    padding: 10px;
  }
}


/* =========================
   ICONS (shared)
   ========================= */
.icon{
  width:16px;height:16px;
  display:inline-block;
  vertical-align:-3px;
}
.icon svg{width:100%;height:100%;display:block}

/* make icon + text align nicer */


/* =========================
   LISTING CARD v3 (BĐS style)
   ========================= */
.listing-card{
  overflow:hidden;
}

.listing-card .thumb{
  position:relative;
  display:block;
  border-radius:12px 12px 0 0;
  overflow:hidden;
}

.listing-card .thumb img{
  width:100%;
  height:170px;
  object-fit:cover;
  display:block;
}

@media (max-width:640px){
  .listing-card .thumb img{ height: 185px; }
  .view-toggle{display:none;}
}

/* vip ribbon / pill */
.vip-pill{
  position:absolute;
  left:10px;
  top:10px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.2px;
  background: rgba(255,255,255,.92);
  border:1px solid var(--bd-border);
  backdrop-filter: blur(6px);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.vip-pill .dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--bd-muted);
}

/* VIP tiers - keep your palette (primary + neutral) */
.listing-card.vip_diamond{
  border:1px solid rgba(224,60,49,.55);
  box-shadow: 0 12px 26px rgba(224,60,49,.12);
}
.listing-card.vip_gold{
  border:1px solid rgba(224,60,49,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.listing-card.vip_silver{
  border:1px solid rgba(17,24,39,.12);
}
.listing-card.normal{
  border:1px solid var(--bd-border);
}

/* pill dots */
.vip-pill.diamond .dot{ background: rgba(224,60,49,.9); }
.vip-pill.gold .dot{ background: rgba(224,60,49,.65); }
.vip-pill.silver .dot{ background: rgba(17,24,39,.35); }

/* body */
.listing-card .card-body{
  padding:10px 12px 12px;
}

.listing-card .card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.listing-card .card-title{
  font-size:14px;
  line-height:1.35;
  margin:0;
}

.listing-card .card-title a{
  color:var(--bd-text);
  text-decoration:none;
}
.listing-card .card-title a:hover{
  color: var(--bd-primary);
}

/* meta row (price / area / location) */
.listing-card .meta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  color:var(--bd-muted);
  font-size:13px;
  margin-top:6px;
}

.listing-card .meta-row strong{

  color: var(--bd-primary);
}

/* divider */
.listing-card .divider{
  height:1px;
  background:rgba(17,24,39,.08);
  margin:10px 0 10px;
}

/* seller + contact row */
.listing-card .seller-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.listing-card .seller{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.listing-card .avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(17,24,39,.10);
  background:#fff;
}

.listing-card .seller-info{
  min-width:0;
}

.listing-card .seller-name{
  font-weight:900;
  font-size:13px;
  color:var(--bd-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 190px;
}

.listing-card .seller-sub{
  font-size:12px;
  color:var(--bd-muted);
}

/* phone */
.listing-card .contact{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.listing-card .btn-call{
  height:34px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid var(--bd-border);
  background:#fff;
  font-weight:900;
  color:var(--bd-text);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}

.listing-card .btn-call:hover{
  border-color: rgba(224,60,49,.55);
}

.listing-card .btn-reveal{
  height:34px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid rgba(224,60,49,.28);
  background: rgba(224,60,49,.06);
  color: var(--bd-primary);
  font-weight:600;
  cursor:pointer;
}
.listing-card .btn-reveal:hover{
  background: rgba(224,60,49,.10);
}

/* LIST VIEW compatibility (kept) */
#listingGrid.is-list .listing-card .thumb{
  border-radius:12px;
}
#listingGrid.is-list .listing-card .thumb img{
  height:160px;
}

/* =========================
   LIST VIEW: description + amenities (ADD-ON)
   Keep existing colors/layout
   ========================= */

/* show only in list view */
/* =========================
   SHOW LIST CONTENT IN GRID VIEW TOO (OVERRIDE)
   ========================= */

/* before: .only-list{display:none} + #listingGrid.is-list .only-list{display:block}
   now: always show (grid + list) */
.only-list{ display:block !important; }
#listingGrid.is-list .only-list{ display:block !important; } /* keep harmless */

/* Optional: tighten spacing in grid so card not too tall */
#listingGrid:not(.is-list) .listing-card .desc{
  margin-top: 6px;
}
#listingGrid:not(.is-list) .listing-card .amenities{
  margin-top: 8px;
}
#listingGrid:not(.is-list) .listing-card .submeta,
#listingGrid:not(.is-list) .listing-card .loc-bc{
  margin-top: 6px;
}


/* description clamp */
.listing-card .desc{
  margin-top:8px;
  color: var(--bd-muted);
  font-size:13px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* amenities row */
.listing-card .amenities{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.amenity{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.10);
  background:#fff;
  color: var(--bd-text);
  font-size:12px;
  font-weight:800;
}

.amenity .icon{
  width:14px;
  height:14px;
  opacity:.9;
  vertical-align:-2px;
}

/* small tag chips (optional) */
.listing-card .tags{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(224,60,49,.22);
  background: rgba(224,60,49,.06);
  color: var(--bd-primary);
  font-size:12px;
  font-weight:900;
}
.tag .icon{ width:14px; height:14px; }

/* =========================
   LIST VIEW: time / views / mini location breadcrumb (ADD-ON)
   ========================= */

.listing-card .submeta{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  color: var(--bd-muted);
  font-size:12.5px;
}

.submeta .item{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.submeta .icon{
  width:14px;
  height:14px;
  opacity:.85;
}

.listing-card .loc-bc{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  font-size:12.5px;
  color: var(--bd-muted);
}

.loc-bc .sep{
  color:#c0c4cc;
}

/* =========================
   LISTING CARD v4 (collage + seller + vip)
   ========================= */

.listing-card{ overflow:hidden; }
.listing-card .card-body{ padding:12px; }

.listing-card .thumb{
  display:block;
  position:relative;
  border-radius:12px 12px 0 0;
  overflow:hidden;
}

/* VIP border/shadow (giữ tone hiện tại) */
.listing-card.vip_diamond{
  border:1px solid rgba(224,60,49,.55);
  box-shadow: 0 12px 26px rgba(224,60,49,.12);
}
.listing-card.vip_gold{
  border:1px solid rgba(224,60,49,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.listing-card.vip_silver{ border:1px solid rgba(17,24,39,.12); }
.listing-card.normal{ border:1px solid var(--bd-border); }

/* VIP pill */
.vip-pill{
  position:absolute;
  left:10px; top:10px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.2px;
  background: rgba(255,255,255,.92);
  border:1px solid var(--bd-border);
  backdrop-filter: blur(6px);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.vip-pill .dot{ width:8px;height:8px;border-radius:50%; background: var(--bd-muted); }
.vip-pill.diamond .dot{ background: rgba(224,60,49,.95); }
.vip-pill.gold .dot{ background: rgba(224,60,49,.70); }
.vip-pill.silver .dot{ background: rgba(17,24,39,.35); }

/* ----- PHOTO COLLAGE (>=3 images) ----- */
.photo-collage{
  display:grid;
  grid-template-columns: 1.15fr 1fr .85fr;
  grid-template-rows: 1fr 1fr;
  gap:4px;
  height:190px;
  background:#fff;
}

.photo-collage .tile{
  position:relative;
  overflow:hidden;
  border-radius:0;
}
.photo-collage .tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.photo-collage .t0{ grid-column:1/2; grid-row:1/3; }
.photo-collage .t1{ grid-column:2/3; grid-row:1/3; }
.photo-collage .t2{ grid-column:3/4; grid-row:1/2; }
.photo-collage .t3{ grid-column:3/4; grid-row:2/3; }

.photo-collage .count{
  position:absolute;
  right:10px; bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  color:#fff;
  font-weight:900;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* overlay +N on last tile */
.photo-collage .more{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.35);
  color:#fff;
  font-weight:900;
  font-size:18px;
}

/* Mobile: collage gọn */
@media (max-width:640px){
  .photo-collage{
    grid-template-columns: 1.2fr .8fr;
    grid-template-rows: 1fr 1fr;
    height:210px;
  }
  .photo-collage .t0{ grid-column:1/2; grid-row:1/3; }
  .photo-collage .t1{ grid-column:2/3; grid-row:1/2; }
  .photo-collage .t2{ grid-column:2/3; grid-row:2/3; }
  .photo-collage .t3{ display:none; }
}

/* ----- text layout ----- */
.listing-card .title{
  margin:10px 0 6px;
  font-size:15px;
  line-height:1.35;
  font-weight:900;
}
.listing-card .title a{ text-decoration:none; color:var(--bd-text); }
.listing-card .title a:hover{ color:var(--bd-primary); }

.listing-card .row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
}

.listing-card .price{
  font-weight:1000;
  font-size:16px;
  color: var(--bd-primary);
}
.listing-card .muted{ color: var(--bd-muted); font-size:13px; }

.listing-card .meta{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  color:var(--bd-muted);
  font-size:13px;
}
.badge-mini{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.10);
  background:#fff;
  font-weight:800;
  font-size:12px;
  color:var(--bd-text);
}

.divider{ height:1px; background:rgba(17,24,39,.08); margin:10px 0; }

/* seller + phone */
.seller-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.seller{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(17,24,39,.10);
  background:#fff;
}
.seller-info{ min-width:0; }
.seller-name{
  font-weight:900;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 200px;
}
.seller-sub{ font-size:12px; color:var(--bd-muted); }

.contact{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.btn-call{
  height:34px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid var(--bd-border);
  background:#fff;
  font-weight:900;
  color:var(--bd-text);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.btn-call:hover{ border-color: rgba(224,60,49,.55); }

.btn-reveal{
  height:34px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid rgba(224,60,49,.28);
  background: rgba(224,60,49,.06);
  color: var(--bd-primary);
  font-weight:900;
  cursor:pointer;
}
.btn-reveal:hover{ background: rgba(224,60,49,.10); }

/* small icon */
.icon{ width:16px;height:16px; display:inline-block; vertical-align:-3px; }
.icon svg{ width:100%; height:100%; display:block; }
.photo-single{
  width: 100%;
  aspect-ratio: 4/3; /* muốn 16/9 thì đổi 16/9 */
  overflow: hidden;
  border-radius: 12px;
}
.photo-single img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


select.is-placeholder { color: #9ca3af; }   /* nhạt */
select:not(.is-placeholder) { color: #111827; }

/* FIX: select bị trống chữ khi đóng (do CSS khác set color: transparent) */
.filter-panel .filter-row select{
  color: var(--bd-text, #111) !important;
  -webkit-text-fill-color: var(--bd-text, #111) !important;
}

/* placeholder/empty state */
.filter-panel .filter-row select.is-empty,
.filter-panel .filter-row select:disabled{
  color: #9aa0a6 !important;
  -webkit-text-fill-color: #9aa0a6 !important;
}

/* option colors */
.filter-panel .filter-row select option{
  color: #111;
}
.filter-panel .filter-row select option[value=""]{
  color: #9aa0a6;
}