/* ==========================================================================
   Banner trang chủ dạng ảnh chạy qua lại
   Chỉ nạp ở trang chủ và chỉ khi đã có ảnh banner (xem functions.php).

   KHỔ ẢNH CHUẨN (phải khớp với ghi chú trong inc/hero-slider.php):
     - Máy tính : 1920 × 640 px  (tỉ lệ 3 : 1)
     - Điện thoại: 1200 × 900 px  (tỉ lệ 4 : 3)
   Đổi tỉ lệ ở đây thì phải sửa luôn ghi chú bên Customize, nếu không người
   thiết kế sẽ cắt ảnh sai khổ.
   ========================================================================== */

.hero-slider{
  position:relative;
  overflow:hidden;
  background:var(--green-dark,#145c18);
}

/* Khung ảnh có TỈ LỆ CỐ ĐỊNH: chiều cao suy ra từ chiều rộng nên khi đổi banner
   trang không bị giật lên xuống, kể cả các ảnh có kích thước khác nhau. */
.hero-slider__viewport{
  position:relative;
  aspect-ratio:1920 / 640;
  min-height:260px;
  max-height:78vh;
}

.hero-slider__slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .55s ease;
}
.hero-slider__slide.is-active{
  opacity:1;
  visibility:visible;
}

.hero-slider__media,
.hero-slider__media img{
  display:block;
  width:100%;
  height:100%;
}
.hero-slider__media img{
  object-fit:cover;
  object-position:center;
}

/* Lớp chữ đè lên ảnh — chỉ hiện khi banner có nhập tiêu đề/mô tả/nút.
   Có nền chuyển màu tối dần để chữ đọc được trên mọi tấm ảnh. */
.hero-slider__caption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:64px 0 40px;
  color:#fff;
  background:linear-gradient(to top, rgba(8,32,10,.86) 0%, rgba(8,32,10,.55) 45%, rgba(8,32,10,0) 100%);
}
.hero-slider__title{
  margin:0 0 10px;
  font-size:38px;
  line-height:1.2;
  font-weight:800;
  color:#fff;
  max-width:760px;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.hero-slider__text{
  margin:0;
  font-size:16px;
  line-height:1.55;
  max-width:620px;
  color:rgba(255,255,255,.94);
}
.hero-slider__btn{margin-top:18px;}

/* Mũi tên qua lại */
.hero-slider__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.82);
  color:var(--green-dark,#145c18);
  font-size:30px;line-height:1;
  cursor:pointer;
  transition:background .15s, transform .15s;
}
.hero-slider__nav:hover{background:#fff;}
.hero-slider__nav:focus-visible{outline:3px solid var(--orange,#fe9b05);outline-offset:2px;}
.hero-slider__nav--prev{left:18px;}
.hero-slider__nav--next{right:18px;}
.hero-slider__nav span{margin-top:-4px;}

/* Chấm tròn chỉ vị trí */
.hero-slider__dots{
  position:absolute;
  left:0;right:0;bottom:16px;
  z-index:3;
  display:flex;justify-content:center;gap:9px;
}
.hero-slider__dot{
  width:10px;height:10px;padding:0;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.55);
  cursor:pointer;
  transition:width .2s, background .2s, border-radius .2s;
}
.hero-slider__dot.is-active{
  width:28px;
  border-radius:999px;
  background:var(--orange,#fe9b05);
}
.hero-slider__dot:focus-visible{outline:2px solid #fff;outline-offset:2px;}

@media (max-width:900px){
  .hero-slider__caption{padding:48px 0 34px;}
  .hero-slider__title{font-size:26px;}
  .hero-slider__text{font-size:14.5px;}
  .hero-slider__nav{width:38px;height:38px;font-size:24px;}
  .hero-slider__nav--prev{left:10px;}
  .hero-slider__nav--next{right:10px;}
}

@media (max-width:700px){
  /* Ảnh ngang dài mà để nguyên tỉ lệ trên điện thoại thì chỉ còn một dải mỏng
     -> đổi sang khổ 4:3. Banner nào có ảnh riêng cho điện thoại sẽ tự dùng ảnh đó;
     banner nào không có thì ảnh máy tính bị cắt bớt hai bên khá nhiều. */
  .hero-slider__viewport{aspect-ratio:4 / 3;max-height:none;}

  /* Màn hình hẹp thì mũi tên nằm đè lên chữ -> bỏ đi, khách vuốt ngang
     hoặc bấm chấm tròn bên dưới. */
  .hero-slider__nav{display:none;}

  .hero-slider__caption{padding:36px 0 32px;}
  .hero-slider__title{font-size:22px;line-height:1.25;}
  .hero-slider__text{
    font-size:13.5px;
    /* Giới hạn 2 dòng để chữ không phủ kín cả tấm ảnh */
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .hero-slider__btn{margin-top:14px;padding:11px 20px;font-size:14px;}
  .hero-slider__dots{bottom:10px;}
}

/* Người dùng bật "giảm chuyển động" trong hệ điều hành thì bỏ hiệu ứng mờ dần.
   Việc dừng tự chạy do JS lo. */
@media (prefers-reduced-motion: reduce){
  .hero-slider__slide{transition:none;}
}