/* ============================================================
   DETAILS PANEL (từ draggable-grid)
   ============================================================ */

/* Setup cho GSAP SplitText */
.line,
.char {
  transform: translate3d(0, 100%, 0);
}

.details {
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100vh;
  padding: 3vw 4vw;
  background-color: #ffffff; /* Đổi thành màu trắng tinh */
  color: #333; /* Đảm bảo chữ dễ đọc trên nền sáng */
  transform: translate3d(50vw, 0, 0);
  z-index: 3000; /* Đặt cao hơn cả footer (2000) để luôn nổi lên trên cùng */
  box-shadow: -10px 0 30px rgba(0,0,0,0.1);

  @media (max-width: 600px) {
    width: 90%;
    padding: 8vw 7vw;
    transform: translate3d(90%, 0, 0);
  }
}

.details__title {
  margin-bottom: 2.5vw; /* Điều chỉnh lại theo ý muốn */
  position: relative;
  display: grid;

  @media (max-width: 600px) {
    margin-bottom: 8vw;
  }
}

.details__title p {
  grid-area: 1 / -1;
  overflow: hidden;
  font-size: 3vw;
  margin: 0;
  font-family: inherit;

  @media (max-width: 600px) {
    font-size: 2rem;
  }
}

.details__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* Đổi từ end sang flex-start để ảnh và text căn bằng nhau ở trên cùng */
  gap: 1.5vw; /* Đã giảm từ 2vw xuống để kéo text gần card hơn */
  max-height: 80vh; /* Giới hạn chiều cao cho toàn bộ body để có thể cuộn cả ảnh và text */
  overflow-y: auto; /* Thêm thanh cuộn cho toàn bộ phần thân */
  padding-right: 1vw; /* Khoảng cách với thanh cuộn */
  padding-bottom: 5vw; /* Khoảng cách phía dưới khi cuộn kịch kim */
}

.details__texts {
  position: relative;
  height: auto;
  line-height: 1.6;
  display: grid; /* Sử dụng grid để các đoạn chữ đè lên nhau cùng 1 vị trí */
  flex: 1; /* Tự động co giãn để chiếm hết phần không gian còn lại */
  min-width: 300px; /* Chỉ rớt dòng (wrap) khi màn hình quá nhỏ (vd: mobile) */
}

.details__texts [data-text] {
  grid-area: 1 / -1; /* Đảm bảo tất cả các thẻ p đều nằm đè lên nhau ở cùng gốc tọa độ */
}

.details__texts span.section-title {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #333;
  padding-bottom: 0.3rem;
  width: auto;
}

.details__texts button {
  appearance: none;
  border: none;
  display: block;
  background-color: transparent;
  margin-top: 1.5rem;
  border: 1px solid #333;
  color: #333;
  border-radius: 1rem;
  padding: 0.25rem 1rem;
  cursor: pointer;
  transition: all 0.2s ease;

  @media (max-width: 600px) {
    margin-top: 5vw;
  }
}

.details__texts button:hover {
  background-color: #333;
  color: #fff;
}

.details__texts [data-text] {
  grid-area: 1 / -1;
  bottom: 0;
  left: 0;
}

.details__thumb {
  position: relative;
  width: 20vw; /* Kích thước cố định cho bề ngang của ảnh */
  aspect-ratio: 5 / 7; /* Tỉ lệ dọc tiêu chuẩn giống các thẻ bài ngoài vòng xoay */
  z-index: 3;
  will-change: transform;

  @media (max-width: 600px) {
    width: 60vw;
  }
}

.details__thumb div,
.details__thumb img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Đổ đầy toàn bộ khung cố định, không bị thừa khoảng trống */
  object-position: center; /* Căn giữa nội dung ảnh */
  border-radius: 15px; /* Giữ bo góc giống card */
  border: 1px solid #4db849; /* Viền mỏng 1px màu xanh */
}

.details__texts p {
  font-size: 1rem;
  margin-top: 0; /* Xóa margin top để căn bằng tuyệt đối với mép trên của ảnh */
  margin-bottom: 1vw;
  font-family: 'Roboto', sans-serif; /* Đổi font chữ giống trong ảnh */
}

.cross {
  position: fixed;
  width: 3vw;
  height: 3vw;
  transform: translate(-50%, -50%) scale(0);
  z-index: 3001; /* Trái lên trên cùng */
  pointer-events: none;
}

.cross svg {
  width: 3vw;
  height: 3vw;
}

/* Các state classes */
.--is-details-showing {
  cursor: pointer;
}

/* Bỏ pointer-events: none để người dùng có thể click vào phần thẻ bài ở background */
.--is-details-showing .cards {
}

/* Thêm transition cho các card chỉ khi đang bật/tắt bảng chi tiết */
.transition-filters .card {
  transition: filter 1.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Làm mờ các card còn lại trong background (giảm độ blur theo yêu cầu) */
.--is-details-showing .card {
  filter: blur(2px) brightness(0.7) !important;
}

.details.--is-showing {
  opacity: 1;
}

.details__galleries {
  width: 100%;
  margin-top: 2vw;
  padding-right: 1.5vw;
}

.gallery {
  display: none; /* Hide by default */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5vw;
  width: 100%;
}

.gallery img {
  width: 100%;
  aspect-ratio: 1; /* Make them square */
  object-fit: cover;
  border-radius: 12px; /* Slightly rounded corners */
  border: 1px solid rgba(0,0,0,0.05);
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}