/* ==========================================================================
   responsive.css — breakpoint mobile/tablet/desktop
   Mobile-first: mọi CSS mặc định trong style.css đã là bố cục mobile.
   Từ 1024px trở lên mở rộng bố cục cho tablet lớn/desktop; 1280px tinh chỉnh
   thêm cho màn hình rộng.
   ========================================================================== */

@media (min-width: 1024px) {
  /* ---------- Độ rộng nội dung chung ---------- */
  :root { --content-max: 1140px; }

  /* ---------- Tăng nhẹ cỡ chữ tiêu đề/đoạn dẫn cho tương xứng với vùng nội dung rộng hơn ---------- */
  h2 { font-size: clamp(30px, 2.6vw, 38px); }
  .section-lead { font-size: 16.5px; }
  .hero h1 { font-size: clamp(34px, 3.4vw, 46px); }
  .hero__subheadline { font-size: 16.5px; }

  /* Sticky CTA bar chỉ dành cho mobile — desktop đã có CTA + hotline trên Header */
  .sticky-cta { display: none; }
  body.has-sticky-cta { padding-bottom: 0; }

  /* ---------- Header ---------- */
  .site-header { padding: 0 var(--space-xl); }

  .is-desktop-only { display: flex; }

  .site-header__nav {
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--space-md);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-header__nav::-webkit-scrollbar { display: none; }
  .site-header__nav a {
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--color-cream);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .site-header__nav a:hover { color: var(--color-gold); }

  .site-header__logo,
  .site-header__actions { flex-shrink: 0; }

  .site-header__hotline {
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-cream);
    white-space: nowrap;
  }

  .site-header__call-icon { display: none; }

  /* ---------- S1 — Hero: bố cục 2 cột (ảnh trái, nội dung phải) ----------
     Cột nội dung rất dài (badge + bảng giá + form), nếu để ảnh "stretch"
     theo chiều cao của cột đó thì ảnh bị kéo cao bất thường và object-fit:
     cover sẽ crop mất phần lớn chiều ngang. Dùng position:sticky, chiều cao
     theo viewport, để ảnh giữ đúng tỷ lệ và luôn hiển thị trọn vẹn khi cuộn. */
  .hero {
    display: flex;
    align-items: flex-start;
    overflow: visible;
    min-height: 720px;
    padding-bottom: 0;
  }
  .hero__media {
    position: sticky;
    top: var(--header-height);
    flex: 1 1 56%;
    height: calc(100vh - var(--header-height));
    min-height: 640px;
    max-height: 920px;
  }
  /* Ảnh gốc có sẵn watermark logo ở góc trái — ưu tiên crop lệch phải để giữ
     trọn toà nhà và tránh phần watermark bị cắt dở, nhìn như trùng logo Header. */
  .hero__media img { object-position: 100% center; }
  .hero__scrim {
    background: linear-gradient(100deg, rgba(38, 46, 41, 0) 0%, rgba(38, 46, 41, 0.1) 60%, var(--color-navy) 100%);
  }
  .hero__content {
    flex: 1 1 44%;
    max-width: 600px;
    margin: 0;
    padding: var(--space-2xl) var(--space-xl);
    justify-content: center;
  }
  .hero__badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  /* Form chính trong Hero nằm sẵn trong cột đã giới hạn độ rộng, không cần ép lại */
  .hero__content .hero-form { max-width: none; margin: 0; }

  /* ---------- S2 — Lợi ích nổi bật: grid 4 cột ---------- */
  .benefit-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }

  /* ---------- S3 — Tổng quan: stat-grid 3 cột ---------- */
  .stat-grid { grid-template-columns: repeat(3, 1fr); }

  /* ---------- S4 — Vị trí: distance-list 2 cột ---------- */
  .distance-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  /* ---------- S6 — Sản phẩm: grid card tự co giãn ---------- */
  .product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
  }

  /* ---------- S8 — Checklist giá trị ngoài form: 3 cột ---------- */
  .section-inner > .value-checklist {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm) var(--space-lg);
  }

  /* ---------- S9 — Tiện ích: grid 2 cột ---------- */
  .amenity-clusters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }

  /* ---------- S12 — Fact-list chủ đầu tư: 2 cột ---------- */
  .fact-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md) var(--space-lg);
  }

  /* ---------- Cụm CTA cuối section: xếp hàng ngang thay vì xếp chồng ---------- */
  .section-cta-cluster {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .section-cta-cluster .btn { width: auto; flex: 1 1 auto; min-width: 240px; }

  /* ---------- Form độc lập: căn giữa, không kéo dài hết vùng nội dung nhưng
     cũng không quá hẹp gây trống hai bên ---------- */
  .hero-form, .micro-form, .calc {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---------- Footer: nhiều cột ---------- */
  .site-footer .section-inner { max-width: 1140px; }
  .footer-info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg) var(--space-md);
  }
}

@media (min-width: 1280px) {
  :root { --content-max: 1200px; }

  .hero__content { max-width: 640px; }
  .hero__media { max-height: 980px; }
  .site-footer .section-inner { max-width: 1200px; }

  .product-list { grid-template-columns: repeat(3, 1fr); }
  .distance-list { grid-template-columns: repeat(3, 1fr); }
}