@charset "UTF-8";
/* ============================================================
   Section 4 — Bento grid địa điểm
   Nguồn: section-4/style.css — toàn bộ scope trong .section-4
   (Bỏ .test-cases — thanh test chỉ phục vụ demo/dev, không thuộc thiết kế)
   ============================================================ */
.section-4 {
  /* Biến :root gốc → scope theo section */
  --ink: #000000;
  --surface: #ffffff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
}
.section-4,
.section-4 *,
.section-4 *::before,
.section-4 *::after {
  box-sizing: border-box;
}
.section-4.location-section {
  background: var(--surface);
  padding: 0 20px 100px;
  padding-top: 90px;
}
.section-4 .location-section__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.section-4 .location-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.section-4 .location-section__title {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
}
.section-4 .location-section__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  text-decoration: none;
}
.section-4 .location-section__cta img {
  width: 22px;
  height: 22px;
}
.section-4 {
  /* ---------- Bento grid ảnh ---------- */
  /* Cột trái/phải co giãn theo đúng TỈ LỆ 460:620 của desktop (dùng fr thay vì
     width cố định px) — nhờ vậy ở khoảng tablet (768–1100px), toàn bộ lưới ảnh
     thu nhỏ lại theo đúng tỉ lệ thay vì 2 ảnh vuông bên dưới bị bóp méo/nhỏ lố. */
}
.section-4 .location-grid {
  display: grid;
  grid-template-columns: 460fr 620fr;
  gap: 20px;
}
.section-4 .location-grid__side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.section-4 .location-grid__row {
  display: flex;
  gap: 20px;
}
.section-4 .location-card {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
}
.section-4 .location-card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.section-4 {
  /* aspect-ratio (thay vì width/height cố định) giữ đúng tỉ lệ mỗi thẻ ở mọi
     bề rộng, để cả cụm co giãn nhất quán theo container. */
}
.section-4 .location-card--tall {
  width: 100%;
  aspect-ratio: 460/600;
}
.section-4 .location-card--wide {
  width: 100%;
  aspect-ratio: 620/280;
}
.section-4 .location-card--square {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1/1;
}
.section-4 {
  /* ---- Biến thể 2 địa điểm: 2 thẻ lớn bằng nhau, cạnh nhau ---- */
}
.section-4 .location-grid--2 {
  grid-template-columns: 1fr 1fr;
}
.section-4 .location-card--big {
  width: 100%;
  aspect-ratio: 540/600;
}
.section-4 {
  /* ---- Biến thể 3 địa điểm: hero + 2 thẻ xếp chồng cùng bề rộng bên phải ---- */
}
.section-4 .location-grid--3 .location-grid__side {
  flex-direction: column;
}
.section-4 .location-grid--3 .location-card--pair {
  width: 100%;
}
.section-4 .location-grid--3 {
  /* aspect-ratio (không phải height cố định) để vẫn co giãn đúng tỉ lệ ở tablet,
     giống cách xử lý các thẻ khác. */
}
.section-4 .location-grid--3 .location-card--pair:first-child {
  aspect-ratio: 620/280;
}
.section-4 .location-grid--3 .location-card--pair:last-child {
  aspect-ratio: 620/300;
}
.section-4 {
  /* Desktop lớn (>1025px): hover phóng to nhẹ ảnh trong thẻ. Dưới mốc này (tablet/
     mobile, không có hover thật) không áp dụng, tránh hiệu ứng "dính" trên cảm ứng. */
}
@media (min-width: 1025px) {
  .section-4 .location-card img {
    transition: transform 0.4s ease;
  }
  .section-4 .location-card:hover img {
    transform: scale(1.08);
  }
}
.section-4 .location-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);
  color: #ffffff;
}
.section-4 .location-card__overlay h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}
.section-4 .location-card__overlay p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .section-4.location-section {
    padding: 0 20px 60px;
  }
  .section-4 {
    /* Mobile: tiêu đề và "Xem tất cả" xếp DỌC (khác desktop nằm ngang) */
  }
  .section-4 .location-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .section-4 .location-section__title {
    font-size: 28px;
  }
  .section-4 .location-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .section-4 .location-grid__side {
    gap: 15px;
  }
  .section-4 .location-grid__row {
    gap: 15px;
  }
  .section-4 .location-card--tall,
  .section-4 .location-card--wide,
  .section-4 .location-card--big {
    width: 100%;
    height: 205px;
    aspect-ratio: auto;
  }
  .section-4 {
    /* Biến thể 3 địa điểm trên mobile: 2 thẻ "pair" gộp thành cặp vuông cạnh
       nhau (giống hệt cặp .location-card--square của biến thể 4), thay vì xếp
       chồng dạng ngang như trên desktop. */
  }
  .section-4 .location-grid--3 .location-grid__side {
    flex-direction: row;
  }
  .section-4 .location-grid--3 .location-card--pair {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  .section-4 .location-grid--3 .location-card--pair:first-child,
  .section-4 .location-grid--3 .location-card--pair:last-child {
    aspect-ratio: 1/1;
  }
  .section-4 .location-card__overlay {
    padding: 15px;
  }
  .section-4 .location-card__overlay h3 {
    font-size: 18px;
    font-weight: 500;
  }
  .section-4 .location-card__overlay p {
    font-size: 14px;
    line-height: 1.2;
  }
  .section-4 .location-section__inner {
    gap: 20px;
  }
}/*# sourceMappingURL=section-4.css.map */