/*
 * BestVinhomes Listings — Grid (Giỏ hàng)
 * Port từ: File thiết kế mẫu/Listing Grid.html
 *
 * Scope: mọi rule dưới .bvl-grid
 * Variables: dùng --bvl-* từ design-system.css
 * Hover: PHẲNG — chỉ border-color + mũi tên translateX.
 *        KHÔNG transform card, KHÔNG box-shadow, KHÔNG zoom ảnh.
 * Chống theme Houzez: !important cho font-size / color / margin / text-decoration.
 *
 * Version: 1.0.33
 */

/* ═══════════════════════════════════════════════
   SECTION WRAPPER
═══════════════════════════════════════════════ */
.bvl-grid .bvl-grid-sec {
  background: transparent;   /* bỏ nền — để trang chứa shortcode tự quyết */
  padding: clamp(40px, 6vw, 88px) 0;
}

.bvl-grid .bvl-grid-inner {
  max-width: var(--bvl-maxw);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 48px);
}

/* ═══════════════════════════════════════════════
   CARD GRID — 3 cột desktop
═══════════════════════════════════════════════ */
.bvl-grid .bvl-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}

@media (max-width: 1080px) {
  .bvl-grid .bvl-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

@media (max-width: 560px) {
  .bvl-grid .bvl-card-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ═══════════════════════════════════════════════
   LISTING CARD (thẻ <a>)
═══════════════════════════════════════════════ */
.bvl-grid .bvl-lcard {
  display: flex !important;
  flex-direction: column !important;
  background: #ffffff;   /* thân card trắng như mẫu (--bg-card gốc) */
  border: 1px solid var(--bvl-line);
  border-radius: 18px;   /* khớp --r-card file gốc */
  overflow: hidden;   /* clip ảnh vào border-radius card */
  text-decoration: none !important;
  color: var(--bvl-ink) !important;
  transition: border-color .22s ease;
  cursor: pointer;
}

/* Chống a:hover { color: cam } của Houzez ở mọi trạng thái */
.bvl-grid .bvl-lcard:hover,
.bvl-grid .bvl-lcard:focus,
.bvl-grid .bvl-lcard:active,
.bvl-grid .bvl-lcard:visited {
  color: var(--bvl-ink) !important;
  text-decoration: none !important;
}

/* Hover phẳng: chỉ đổi border */
.bvl-grid .bvl-lcard:hover {
  border-color: var(--bvl-gold-line) !important;
}

/* ═══════════════════════════════════════════════
   CARD IMAGE — aspect ratio 4:3
═══════════════════════════════════════════════ */
.bvl-grid .bvl-lcard-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bvl-gold-tint);
  overflow: hidden;
  flex-shrink: 0;
}

.bvl-grid .bvl-lcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* KHÔNG transition transform — không zoom ảnh khi hover */
}

/* ═══════════════════════════════════════════════
   CARD BODY
═══════════════════════════════════════════════ */
.bvl-grid .bvl-lcard-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* ── Pills ── */
.bvl-grid .bvl-lcard-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px !important;
}

.bvl-grid .bvl-lcard-pills span {
  font-family: var(--bvl-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  color: var(--bvl-ink) !important;
  background: var(--bvl-paper-card);
  border: 1px solid var(--bvl-line);
  border-radius: 999px;
  padding: 6px 13px;
  line-height: 1.5 !important;
}

/* ── Title ── */
.bvl-grid .bvl-lcard h4 {
  font-family: var(--bvl-serif) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  color: var(--bvl-ink) !important;
  margin: 0 0 10px !important;
}

/* ── Short desc — clamp 2 dòng ── */
.bvl-grid .bvl-lcard p {
  font-family: var(--bvl-sans) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--bvl-ink-soft) !important;
  margin: 0 !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Rule — đẩy footer xuống đáy ── */
.bvl-grid .bvl-lcard-rule {
  flex: 1 1 auto;
  min-height: 16px;
  border: 0;
  margin: 0;
}

/* ── Card footer ── */
.bvl-grid .bvl-lcard-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--bvl-line-soft);
}

/* ── Price ── */
.bvl-grid .bvl-lcard-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.bvl-grid .bvl-lcard-price b {
  font-family: var(--bvl-serif) !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--bvl-gold-deep) !important;
  letter-spacing: -.01em;
}

.bvl-grid .bvl-lcard-price small {
  font-family: var(--bvl-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--bvl-ink-soft) !important;
}

/* ── "Xem →" ── */
.bvl-grid .bvl-lcard-view {
  font-family: var(--bvl-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--bvl-gold-deep) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.bvl-grid .bvl-arr {
  display: inline-block;
  transition: transform .2s ease;
}

/* Chỉ mũi tên translateX — card không nhấc, ảnh không zoom */
.bvl-grid .bvl-lcard:hover .bvl-arr {
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════
   SCROLL REVEAL
   Chỉ áp khi người dùng KHÔNG prefer reduced motion
═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .bvl-grid .bvl-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .45s ease, transform .45s ease;
  }

  .bvl-grid .bvl-reveal.bvl-in {
    opacity: 1;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE FINE-TUNE
═══════════════════════════════════════════════ */
@media (max-width: 560px) {
  /* Ảnh giữ tỉ lệ gốc — thẻ co/giãn theo ảnh, không crop 4:3 */
  .bvl-grid .bvl-lcard-img {
    aspect-ratio: auto !important;
  }
  .bvl-grid .bvl-lcard-img img {
    height: auto !important;
    object-fit: contain;
  }

  /* Mô tả hiện đầy đủ — bỏ clamp 2 dòng */
  .bvl-grid .bvl-lcard p {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
  }

  .bvl-grid .bvl-lcard-body {
    padding: 16px 18px 18px;
  }

  .bvl-grid .bvl-lcard h4 {
    font-size: 16px !important;
  }

  .bvl-grid .bvl-lcard-price b {
    font-size: 19px !important;
  }
}

/* ═══ Theme Thuê — grid emerald ═══
   .bvl-grid--rent (đặt trên wrapper bởi [bds_rent_grid]) ghi đè biến gold → emerald.
   Đổi màu 4 chỗ accent: viền hover, nền tint, số giá, mũi tên "Xem →". */
.bvl-grid--rent {
  --bvl-gold:      #1b6b5a;
  --bvl-gold-deep: #145446;
  --bvl-gold-tint: rgba(27,107,90,.12);
  --bvl-gold-line: rgba(27,107,90,.34);
}

/* Pill grid Thuê: nền xanh nhẹ theo theme (thay nền trung tính của Bán) */
.bvl-grid--rent .bvl-lcard-pills span {
  background: var(--bvl-gold-tint);
  border-color: var(--bvl-gold-line);
}

/* EN Cho thuê — accent xanh lá #639922 (đè emerald khi lang="en") */
.bvl-grid--rent.bvl-grid--en {
  --bvl-gold:      #639922;
  --bvl-gold-deep: #4D7A1A;
  --bvl-gold-tint: rgba(99,153,34,.12);
  --bvl-gold-line: rgba(99,153,34,.34);
}

/* Ngắn hạn (Short-Term) — accent xanh dương #378ADD (slug short-term-*) */
.bvl-grid--rent.bvl-grid--st {
  --bvl-gold:      #378ADD;
  --bvl-gold-deep: #2B6EB3;
  --bvl-gold-tint: rgba(55,138,221,.12);
  --bvl-gold-line: rgba(55,138,221,.34);
}

/* ═══════════════════════════════════════════════
   FILTER BAR — tab lọc số phòng ngủ (filter="true")
   Pill Inter 600 ~13px; active = nền var(--bvl-gold).
   Nhịp dọc thang 8px; mobile cuộn ngang khi chật.
═══════════════════════════════════════════════ */
.bvl-grid .bvl-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(24px, 4vw, 40px);
}

.bvl-grid .bvl-filter-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--bvl-ink-soft);
  background: transparent;
  border: 1px solid var(--bvl-line);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.bvl-grid .bvl-filter-btn:hover {
  border-color: var(--bvl-gold-line);
  color: var(--bvl-gold-deep);
}

.bvl-grid .bvl-filter-btn.is-active {
  background: var(--bvl-gold);
  border-color: var(--bvl-gold);
  color: #fff;
}

/* Ẩn card khi lọc — !important để thắng .bvl-lcard{display:flex!important}. */
.bvl-grid .bvl-lcard.bvl-card-hide { display: none !important; }

@media (max-width: 560px) {
  .bvl-grid .bvl-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 24px;
    padding-bottom: 2px;
  }
  .bvl-grid .bvl-filter::-webkit-scrollbar { display: none; }
  .bvl-grid .bvl-filter-btn { flex: 0 0 auto; }
}

/* ── Pagination số trang ───────────────────────────── */
.bvl-pagination { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:36px; font-family:'Inter',sans-serif; }
.bvl-pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px; border:1px solid #e4e4e4; border-radius:10px; background:#fff; color:#333; font-size:15px; font-weight:500; text-decoration:none; transition:border-color .15s ease, background .15s ease; }
.bvl-pagination a.page-numbers:hover { border-color:#b5b5b5; }
.bvl-pagination .page-numbers.current { color:#fff; border-color:transparent; }
.bvl-pagination--sale .page-numbers.current { background:#B85030; }
.bvl-pagination--rent .page-numbers.current { background:#1B6B5A; }
.bvl-pagination--rent.bvl-pagination--en .page-numbers.current { background:#639922; }
.bvl-pagination--rent.bvl-pagination--st .page-numbers.current { background:#378ADD; }
.bvl-pagination .page-numbers.dots { border:none; background:transparent; }

/* ═══════════════════════════════════════════════
   NEWS GRID — [bds_tin_ban_grid]
   Layout: 2 cột desktop, 1 cột mobile
   Card: date-block | divider | title + excerpt (flex row)
   Version: 1.0.26
═══════════════════════════════════════════════ */

.bvl-news-wrap {
  box-sizing: border-box;
  max-width: var(--bvl-maxw);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 48px);
}

.bvl-news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 700px) {
  .bvl-news-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Card ── */
.bvl-ncard {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  background: #ffffff;
  border: 1px solid var(--bvl-line);
  border-radius: 14px;
  padding: 20px 22px;
  text-decoration: none !important;
  color: var(--bvl-ink) !important;
  transition: border-color .22s ease;
  cursor: pointer;
}

.bvl-ncard:hover,
.bvl-ncard:focus,
.bvl-ncard:visited,
.bvl-ncard:active {
  color: var(--bvl-ink) !important;
  text-decoration: none !important;
}

.bvl-ncard:hover { border-color: var(--bvl-gold-line) !important; }

/* ── Date block ── */
.bvl-ncard-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  text-align: center;
}

.bvl-ncard-day {
  font-family: var(--bvl-serif) !important;
  font-size: 38px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--bvl-gold-deep) !important;
  letter-spacing: -.02em;
}

.bvl-ncard-dow {
  font-family: var(--bvl-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--bvl-ink-soft) !important;
  margin-top: 5px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Divider dọc ── */
.bvl-ncard-divider {
  width: 1px;
  align-self: stretch;
  background: var(--bvl-line);
  flex-shrink: 0;
  margin: 0 18px;
}

/* ── Body ── */
.bvl-ncard-body {
  flex: 1 1 auto;
  min-width: 0;
}

.bvl-ncard-body h4 {
  font-family: var(--bvl-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--bvl-ink) !important;
  margin: 0 0 7px !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bvl-ncard-body p {
  font-family: var(--bvl-sans) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--bvl-ink-soft) !important;
  margin: 0 !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Mobile ── */
@media (max-width: 700px) {
  .bvl-ncard { padding: 16px 18px; }
  .bvl-ncard-date { width: 44px; }
  .bvl-ncard-day  { font-size: 32px !important; }
  .bvl-ncard-divider { margin: 0 14px; }
  .bvl-ncard-body h4 { font-size: 14px !important; }
}

/* ── Scroll reveal ── */
@media (prefers-reduced-motion: no-preference) {
  .bvl-news-grid .bvl-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .45s ease, transform .45s ease;
  }
  .bvl-news-grid .bvl-reveal.bvl-in {
    opacity: 1;
    transform: none;
  }
}

/* ── Pagination news ── */
.bvl-pagination--news .page-numbers.current { background: var(--bvl-gold-deep); color: #fff; }