@charset "utf-8";

.inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

.visual-slider { height: 544px; background-size: cover; background-position: center; background-repeat: no-repeat; }

.section { padding: 50px 0; }

.page-title { text-align: center; }
.page-title h1 { font-size: 32px; font-weight: 700; margin-bottom: 10px; }
.page-title p { font-size: 16px; color: #666; }

.filter-buttons { text-align: center; margin-bottom: 30px; }
.filter-buttons .btn { display: inline-block; padding: 8px 16px; margin: 3px; border: 1px solid #ddd; border-radius: 9999px; background: #fff; color: #212121; font-size: 14px; cursor: pointer; transition: .2s; }
.filter-buttons .btn:hover, .filter-buttons .btn.active { background: #000; color: #fff; border-color: #000; }

.gallery-masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-bottom: 50px;
}

.gallery-masonry .item { overflow: hidden; }

/* Cột 1 & 4: portrait, span 2 */
.gallery-masonry .item:nth-child(6n+1) { grid-column: 1; grid-row: span 2; }
.gallery-masonry .item:nth-child(6n+4) { grid-column: 4; grid-row: span 2; }

/* Cột 2-3: landscape */
.gallery-masonry .item:nth-child(6n+2) { grid-column: 2; }
.gallery-masonry .item:nth-child(6n+3) { grid-column: 3; }
.gallery-masonry .item:nth-child(6n+5) { grid-column: 2; }
.gallery-masonry .item:nth-child(6n+6) { grid-column: 3; }

.gallery-masonry .item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gallery-masonry .item:nth-child(6n+1) img,
.gallery-masonry .item:nth-child(6n+4) img {
  aspect-ratio: 3 / 4;
}

.gallery-masonry .item:nth-child(6n+2) img,
.gallery-masonry .item:nth-child(6n+3) img,
.gallery-masonry .item:nth-child(6n+5) img,
.gallery-masonry .item:nth-child(6n+6) img {
  aspect-ratio: 3 / 2;
}

.pc-only { display: block; }
.mobile-only { display: none; }

@media (max-width: 991px) {
  .gallery-masonry { grid-template-columns: repeat(3, 1fr); }
  .gallery-masonry .item:nth-child(4n+1) { grid-column: 1; grid-row: span 2; }
  .gallery-masonry .item:nth-child(4n+2) { grid-column: 2; grid-row: span 1; }
  .gallery-masonry .item:nth-child(4n+3) { grid-column: 3; grid-row: span 2; }
  .gallery-masonry .item:nth-child(4n+4) { grid-column: 2; grid-row: span 1; }
  .gallery-masonry .item:nth-child(4n+1) img,
  .gallery-masonry .item:nth-child(4n+3) img { aspect-ratio: 3 / 4; }
  .gallery-masonry .item:nth-child(4n+2) img,
  .gallery-masonry .item:nth-child(4n+4) img { aspect-ratio: 3 / 2; }
}

@media (max-width: 767px) {
  .pc-only { display: none; }
  .mobile-only { display: block; }
  .visual-slider { height: 300px; }
  .section { padding: 30px 0; }
  .page-title h1 { font-size: 24px; }
  .gallery-masonry { grid-template-columns: repeat(2, 1fr); }
  .gallery-masonry .item:nth-child(3n+1) { grid-column: 1; grid-row: span 2; }
  .gallery-masonry .item:nth-child(3n+2) { grid-column: 2; grid-row: span 1; }
  .gallery-masonry .item:nth-child(3n+3) { grid-column: 2; grid-row: span 1; }
  .gallery-masonry .item:nth-child(3n+1) img { aspect-ratio: 3 / 4; }
  .gallery-masonry .item:nth-child(3n+2) img,
  .gallery-masonry .item:nth-child(3n+3) img { aspect-ratio: 3 / 2; }
}

@media (max-width: 575px) {
  .filter-buttons .btn { padding: 8px 12px; font-size: 13px; margin: 2px; }
}