/* --- Thiết lập Container --- */
.container-component {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* --- Khởi tạo CSS Grid --- */
.gallery-masonry {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Chia 2 cột bằng nhau */
  grid-auto-rows: 250px;                 /* Chiều cao cố định cho 1 ô nhỏ (có thể tùy chỉnh) */
  gap: 24px;                             /* Khoảng cách giữa các ảnh */
}

/* --- Định dạng chung cho khối ảnh --- */
.masonry-item {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.masonry-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

/* --- Định dạng thẻ img (Rất quan trọng) --- */
.masonry-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Chìa khóa để ảnh vừa vặn ô lưới mà không bị méo */
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.masonry-item:hover img {
  transform: scale(1.04);
}

/* =========================================
   SẮP XẾP BỐ CỤC THEO THỨ TỰ ẢNH (SO LE)
   ========================================= */

/* Cụm 1: 2 ảnh nhỏ bên trái, 1 ảnh to bên phải */
.masonry-item:nth-child(1) { grid-column: 1; grid-row: 1; }
.masonry-item:nth-child(2) { grid-column: 1; grid-row: 2; }
.masonry-item:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; } /* Ảnh to chiếm 2 hàng */

/* Cụm 2: So le lại - 1 ảnh to bên trái, 2 ảnh nhỏ bên phải */
.masonry-item:nth-child(4) { grid-column: 1; grid-row: 3 / span 2; } /* Ảnh to chiếm 2 hàng */
.masonry-item:nth-child(5) { grid-column: 2; grid-row: 3; }
.masonry-item:nth-child(6) { grid-column: 2; grid-row: 4; }

/* Cụm 3: 2 ảnh to nằm cạnh nhau ở dưới cùng (để chứa ảnh dọc) */
.masonry-item:nth-child(7) { grid-column: 1; grid-row: 5 / span 2; }
.masonry-item:nth-child(8) { grid-column: 2; grid-row: 5 / span 2; }

/* --- Thích ứng đa màn hình (Responsive) --- */

/* Máy tính bảng (Tablet) */
@media (max-width: 992px) {
  .gallery-masonry {
    grid-auto-rows: 200px; /* Thu nhỏ chiều cao ảnh một chút trên tablet */
    gap: 16px;
  }
}

/* Điện thoại (Mobile) - Chuyển về 1 cột dọc */
@media (max-width: 576px) {
  .container-component {
    padding: 20px;
  }
  .gallery-masonry {
    grid-template-columns: 1fr; /* 1 cột duy nhất */
    grid-auto-rows: auto;
  }
  
  /* Hủy bỏ các thiết lập span nhiều hàng/cột trên mobile */
  .masonry-item:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 4 / 3; /* Cắt tất cả ảnh về tỷ lệ khung hình thống nhất */
  }
}