/* ===== Trang chủ - phần dưới Hero (Tin tức, Carousel, Footer) ===== */
/* Nền nâu nối tiếp cảnh giang hồ. Tách riêng khỏi style.css (Hero). */

.home {
  background: linear-gradient(180deg, #3a2418 0%, #4a3020 45%, #3a2418 100%);
  padding: 0 16px 40px;
}

/* Container chung căn giữa, giới hạn bề ngang giống mẫu */
.news,
.carousel {
  max-width: 1000px;
  margin: 0 auto;
}

/* ===== (1) Bảng Tin tức ===== */
.news { padding-top: 48px; }

/* Khung giấy cổ: ảnh nền tỉ lệ 1425:908, nội dung phủ lên vùng giấy trong */
.news__board {
  position: relative;
  aspect-ratio: 1425 / 908;
  background: url("../assets/home/news-board.png?v=5fbd1aa0") no-repeat center / 100% 100%;
  /* Padding % để nội dung lọt vào vùng giấy (trừ viền gỗ) */
  padding: 5.5% 6% 6%;
  display: flex;
  flex-direction: column;
}

/* Hàng tab lọc */
.news__tabs {
  display: flex;
  gap: 1.5%;
  margin-bottom: 2.4%;
}
.news-tab {
  flex: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  opacity: 0.55;              /* tab chưa chọn: mờ đi */
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.news-tab img { width: 100%; height: auto; display: block; }
.news-tab:hover { opacity: 0.85; transform: translateY(-1px); }
.news-tab.is-active { opacity: 1; }

/* Danh sách tin */
.news__list {
  list-style: none;
  flex: 1;
  overflow-y: auto;
}
.news-row + .news-row { border-top: 1px dashed rgba(120, 80, 40, 0.35); }
.news-row a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1.35% 1%;
  text-decoration: none;
  color: #4a3016;
  font-size: clamp(12px, 1.35vw, 16px);
  transition: background 0.12s ease, color 0.12s ease;
}
/* Dòng so le (vị trí chẵn): dải nâu hồng theo design */
.news-row.is-alt a {
  background: url("../assets/home/row-news-bg.png?v=41848ce0") no-repeat center / 100% 100%;
  color: #fff;
}
.news-row.is-alt .news-row__time,
.news-row.is-alt .news-row__date { color: #f0e0d4; }
.news-row a:hover { background: rgba(150, 96, 96, 0.32); color: #6a1f1f; }
.news-row__title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.news-row__time,
.news-row__date {
  flex: none;
  color: #7a5a34;
  font-variant-numeric: tabular-nums;
}
.news-row__time { width: 68px; text-align: right; }
.news-row__date { width: 92px; text-align: right; }

/* ===== (2) Carousel ===== */
.carousel {
  max-width: 1080px; /* rộng hơn bảng tin (1000px) để khung ảnh to hơn, vẫn chừa chỗ menu dọc phải */
  padding-top: 40px;
  text-align: center;
}

/* Bảng tên "Tin Tức - Sự Kiện" (746:149) */
.carousel__plaque {
  width: min(420px, 62%);
  height: auto;
  display: inline-block;
  margin-bottom: 28px;
}

/* Hàng: mũi tên trái - khung ảnh - mũi tên phải */
.carousel__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.carousel__arrow {
  flex: none;
  position: relative;
  z-index: 1;
  width: 100px;
  aspect-ratio: 231 / 550; /* ảnh mũi tên phát sáng (carousel-arrow-prev/next.png) */
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.carousel__arrow img { width: 100%; height: 100%; display: block; }
/* Vầng sáng trong ảnh nằm phía trong -> lấn 40px vào mép khung, nhường chỗ cho khung ảnh */
.carousel__arrow--prev { margin-right: -40px; }
.carousel__arrow--next { margin-left: -40px; }
.carousel__arrow:hover { transform: scale(1.08); filter: brightness(1.15); }

/* Khung ảnh (1401:756): chỉ vẽ khung tranh cuộn; việc cắt slide do .carousel__viewport đảm nhận */
.carousel__frame {
  position: relative;
  flex: 1;
  aspect-ratio: 1401 / 756;
  /* Khung tranh cuộn phủ trên cùng, không cản chuột */
  background: url("../assets/home/carousel-frame.png?v=eb84c951") no-repeat center / 100% 100%;
}
/* Vùng ảnh bên trong khung tranh cuộn (chừa mép 5% / 6%): cắt slide ngay tại đây
   để hiệu ứng trượt không tràn ra viền khung. margin % tính theo bề ngang khung. */
.carousel__viewport {
  position: absolute;
  inset: 0;
  margin: 5% 6%;
  overflow: hidden;
  border-radius: 4px;
}
/* Track chứa các slide xếp ngang, dịch bằng translateX */
.carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.4s ease;
}
.carousel__slide {
  flex: 0 0 100%;
  height: 100%;
}
.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* Chấm điều hướng */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.carousel__dot {
  width: 12px;
  height: 12px;
  border: none;
  padding: 0;
  transform: rotate(45deg);   /* hình thoi giống mẫu */
  background: rgba(242, 220, 168, 0.35);
  cursor: pointer;
  transition: background 0.15s ease;
}
.carousel__dot.is-active { background: #f2dca8; }

/* ===== (3) Footer ===== */
.home-footer {
  text-align: center;
  padding: 40px 0 12px;
}
.home-footer__brand {
  color: #d9c199;
  letter-spacing: 0.5em;
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 700;
}

/* ===== Mobile ===== */
@media (max-width: 760px) {
  .news__board { padding: 7% 7% 7%; }
  .news-row__time { width: 52px; }
  .news-row__date { width: 74px; }
  .carousel__arrow { width: 56px; }
  .carousel__arrow--prev { margin-right: -24px; }
  .carousel__arrow--next { margin-left: -24px; }
  .carousel__plaque { width: 78%; }
}