/* ---- FILE GALLERY.CSS (ĐÃ CẬP NHẬT) ---- */

/* HIỆU ỨNG 1: NỀN GRADIENT HỒNG ĐỘNG
  Nền sẽ chuyển động nhẹ nhàng
*/
body {
  /* Màu gradient lãng mạn */
  background: linear-gradient(
    300deg, /* Góc chéo */
    #fff1f2, /* rose-50 */
    #fbcfe8, /* pink-200 */
    #fce7f3, /* pink-100 */
    #ffe4e6  /* rose-100 */
  );
  background-size: 240% 240%; /* Kích thước lớn để có chỗ di chuyển */
  animation: gradient-flow 16s ease infinite;
  font-family: 'Inter', sans-serif; /* Giữ font chữ từ trang chính */
  overflow-x: hidden; /* Tránh thanh cuộn ngang */
}

/* Keyframes cho nền gradient động */
@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Container chính, nằm bên trên hiệu ứng nền */
.main-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px; /* Giới hạn chiều rộng */
  margin: 0 auto;
  padding: 0 1rem;
}

/* Style cho tiêu đề lãng mạn (ĐÃ CẬP NHẬT) */
.romantic-title {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  color: #be185d; /* pink-700 */
  text-shadow: 2px 2px 0px #fff, 4px 4px 0px #fbcfe8; /* Đổ bóng 2 lớp */
  
  /* Căn chỉnh chữ và trái tim */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem; /* Khoảng cách giữa tim và chữ */
}

/* Style cho chữ (desktop) */
.romantic-title .title-text {
  font-size: 4.5rem; /* Cỡ chữ siêu to cho chữ */
}

/* Style cho trái tim (desktop) - nhỏ hơn chữ 1 chút */
.romantic-title .heart-emoji {
  font-size: 3rem; 
  line-height: 1; /* Giúp căn trái tim thẳng hàng */
}


/* HIỆU ỨNG 2: TRÁI TIM BAY (SẮC SẢO)
  Hiệu ứng nền các hạt trái tim bay từ dưới lên
*/
#heart-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0; /* Nằm dưới nội dung */
  pointer-events: none; /* Không cho phép click */
}

/* Style để vẽ một trái tim bằng CSS */
.heart {
  position: absolute;
  bottom: -50px; /* Bắt đầu bên ngoài màn hình */
  opacity: 0;
  width: 20px;
  height: 20px;
  background: #f43f5e; /* rose-500 */
  transform: rotate(-45deg);
  animation: float-heart 12s infinite;
}
.heart::before,
.heart::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #f43f5e; /* rose-500 */
  border-radius: 50%;
}
.heart::before { top: -10px; left: 0; }
.heart::after { top: 0; left: 10px; }

/* Keyframes cho trái tim bay lên và mờ dần */
@keyframes float-heart {
  0% {
    transform: translateY(0) rotate(-45deg) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 1; /* Xuất hiện */
  }
  90% {
    opacity: 1; /* Giữ nguyên */
  }
  100% {
    transform: translateY(-120vh) rotate(-45deg) scale(1.2); /* Bay lên cao và to ra */
    opacity: 0; /* Biến mất */
  }
}

/* Tạo ngẫu nhiên vị trí, thời gian delay, kích thước cho 10 trái tim */
.heart:nth-child(1) { left: 10%; animation-delay: 0s; transform: scale(0.8); }
.heart:nth-child(2) { left: 20%; animation-delay: 1.5s; transform: scale(1.2); }
.heart:nth-child(3) { left: 30%; animation-delay: 3s; transform: scale(0.7); }
.heart:nth-child(4) { left: 40%; animation-delay: 4.5s; transform: scale(1.1); }
.heart:nth-child(5) { left: 50%; animation-delay: 6s; transform: scale(0.9); }
.heart:nth-child(6) { left: 60%; animation-delay: 7.5s; transform: scale(1.3); }
.heart:nth-child(7) { left: 70%; animation-delay: 9s; transform: scale(0.8); }
.heart:nth-child(8) { left: 80%; animation-delay: 10.5s; transform: scale(1.1); }
.heart:nth-child(9) { left: 90%; animation-delay: 12s; transform: scale(0.9); }
.heart:nth-child(10) { left: 5%; animation-delay: 5s; transform: scale(1); }


/* HIỆU ỨNG 3: GALLERY ẢNH POLAROID LUNG LINH
  Layout ảnh kiểu masonry (lệch nhau) và hiệu ứng "lấp lánh" khi hover
*/

/* Lưới ảnh, tự động chia cột */
.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px; /* Khoảng cách giữa các ảnh */
}

/* Style cho mỗi thẻ ảnh (kiểu polaroid) */
.photo-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px; /* Khoảng đệm trắng xung quanh ảnh */
  padding-bottom: 8px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
  position: relative; /* Cần cho hiệu ứng lấp lánh */
  overflow: hidden; /* Cần cho hiệu ứng lấp lánh */
  
  /* Tạo hiệu ứng nghiêng ngẫu nhiên */
  transform: rotate(-2deg);
}

/* Thẻ chẵn sẽ nghiêng ngược lại */
.photo-card:nth-child(even) {
  transform: rotate(2deg);
}

/* Khi hover vào ảnh */
.photo-card:hover {
  /* Ảnh sẽ đứng thẳng lại và phóng to lên, nổi bật */
  transform: scale(1.08) rotate(0deg) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 10px 15px rgba(0, 0, 0, 0.1);
  z-index: 20; /* Nằm đè lên các ảnh khác */
}

.photo-card img {
  width: 100%;
  height: auto;
  border-radius: 8px; /* Bo góc ảnh bên trong */
  object-fit: cover;
  border: 1px solid #f3f4f6; /* Viền mỏng cho ảnh */
}

/* Chú thích ảnh (dùng font viết tay) */
.caption {
  font-family: 'Dancing Script', cursive;
  font-weight: 500;
  text-align: center;
  margin-top: 12px;
  font-size: 1.25rem;
  color: #4b5563; /* gray-600 */
}

/* HIỆU ỨNG 4: ÁNH SÁNG LẤP LÁNH (SHINE) KHI HOVER
  Một lớp phủ gradient sẽ quét qua ảnh khi hover
*/
.photo-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%; /* Bắt đầu ở bên trái (ẩn) */
  width: 100%;
  height: 100%;
  /* Đây là vệt sáng */
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  transform: skewX(-25deg); /* Nghiêng vệt sáng */
  transition: left 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.photo-card:hover::after {
  left: 150%; /* Di chuyển vệt sáng qua phải khi hover */
}

/* --- CSS MỚI CHO NÚT BACK --- */

.back-button {
  display: inline-block;
  padding: 10px 24px;
  
  /* Hiệu ứng Glassmorphism */
  background: rgba(255, 255, 255, 0.6); /* Nền trắng mờ */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  border: 1px solid rgba(190, 24, 93, 0.3); /* Viền hồng mờ (rose-700) */
  border-radius: 999px; /* Bo tròn */
  
  color: #be185d; /* Màu chữ hồng đậm (rose-700) */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(190, 24, 93, 0.1);
  transition: all 0.3s ease;
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.9); /* Nền trắng rõ hơn khi hover */
  border-color: #be185d; /* Viền rõ hơn */
  color: #9d174d; /* Chữ đậm hơn (rose-800) */
  transform: translateY(-2px) scale(1.03); /* Nhấc lên 1 chút */
  box-shadow: 0 8px 20px rgba(190, 24, 93, 0.2); /* Bóng đổ đậm hơn */
}

/* CSS cho thiết bị di động (ĐÃ CẬP NHẬT) */
@media (max-width: 640px) {
  
  /* --- ĐÃ CẬP NHẬT THEO YÊU CẦU --- */
  .romantic-title {
    gap: 0.25rem; /* Giảm khoảng cách tim và chữ trên mobile */
  }
  .romantic-title .title-text {
    font-size: 2.2rem; /* Chữ "Ảnh Của Ẻm" nhỏ lại */
  }
  .romantic-title .heart-emoji {
    font-size: 1.5rem; /* Trái tim nhỏ lại (nhỏ hơn cả chữ) */
  }
  /* --- KẾT THÚC CẬP NHẬT --- */

  .gallery-container {
    /* 3 cột trên di động */
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; /* Giảm gap */
  }
  
  /* Thu nhỏ thẻ ảnh để vừa 3 cột */
  .photo-card {
    padding: 8px; /* Giảm padding thẻ */
    padding-bottom: 4px;
    border-radius: 8px;
  }
  
  .photo-card img {
    border-radius: 4px; /* Bo góc ảnh bên trong nhỏ hơn */
  }

  /* Thu nhỏ chữ caption */
  .caption {
    font-size: 0.875rem; /* ~14px */
    margin-top: 8px; /* Giảm margin */
  }
}