/* ==========================================================
   style.css — hero slider trang chủ (không dùng Swiper)
   Markup: template.php | Logic: script.js
   ========================================================== */
.vpb-hero {
  /* ----- Kích thước: khung theo TỶ LỆ ẢNH, bị chặn bởi chiều cao màn hình ----- */
  --vpb-ratio: 2576 / 778;           /* desktop; tablet/mobile ghi đè bên dưới, khớp kích thước ảnh gốc */
  --vpb-header-h: 81px;              /* chiều cao header (chỉnh nếu header đổi) */
  --vpb-peek: 64px;                  /* chừa lại dưới hero để lộ mép section kế tiếp */
  --vpb-h-min: 280px;                /* không thấp hơn mức này (laptop thấp / xoay ngang) */
  /* ----- Phân trang ----- */
  --vpb-accent: 227 30 36;           /* #e31e24 đỏ logo VietPhone */
  --vpb-bar-idle: rgb(255 255 255 / .4);
  --vpb-bar-past: #fff;
  --vpb-bar-w: 40px;
  --vpb-bar-h: 4px;
  --vpb-bar-gap: 6px;                /* khoảng hở nhìn thấy giữa 2 thanh (vùng bấm vẫn liền nhau) */
  --vpb-hit-h: 28px;                 /* chiều cao vùng bấm */
  /* ----- Chuyển slide ----- */
  --vpb-speed: .6s;
  --vpb-ease: cubic-bezier(.65, 0, .35, 1);
  --vpb-delay: 5000ms;               /* JS ghi đè theo data-autoplay */

  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: var(--vpb-ratio);
  min-height: var(--vpb-h-min);      /* min thắng max khi mâu thuẫn */
  max-height: calc(100vh - var(--vpb-header-h) - var(--vpb-peek));
  overflow: hidden;
  background: #eef6ea;
  touch-action: pan-y;               /* cuộn dọc vẫn được, vuốt ngang do JS xử lý */
  -webkit-user-select: none;
  user-select: none;
}
@supports (height: 100svh) {
  /* svh: thanh địa chỉ mobile co giãn không làm hero nhảy */
  .vpb-hero { max-height: calc(100svh - var(--vpb-header-h) - var(--vpb-peek)); }
}
.vpb-hero:focus-visible { outline: 2px solid rgb(var(--vpb-accent)); outline-offset: -3px; }

/* Lớp tối nhẹ ở đáy để phân trang luôn đọc được trên ảnh sáng */
.vpb-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 96px;
  background: linear-gradient(to top, rgb(0 0 0 / .28), rgb(0 0 0 / 0));
  pointer-events: none;
  z-index: 4;
}

/* ----- Slide: xếp chồng, chỉ slide đang chọn và slide đang rời mới nhìn thấy ----- */
.vpb-hero__track { position: absolute; inset: 0; }
.vpb-hero__slide {
  position: absolute;
  inset: 0;
  transform: translate3d(100%, 0, 0);             /* mặc định: đỗ bên phải, ẩn */
  visibility: hidden;
  transition: transform var(--vpb-speed) var(--vpb-ease), visibility 0s linear var(--vpb-speed);
}
.vpb-hero__slide.is-before { transform: translate3d(-100%, 0, 0); }   /* đã trượt ra bên trái */
.vpb-hero__slide.is-active {
  transform: none;
  visibility: visible;
  transition: transform var(--vpb-speed) var(--vpb-ease), visibility 0s;
}
.vpb-hero__slide.is-instant { transition: none; }                     /* đặt vị trí tức thì, không animation */

.vpb-hero__slide > a,
.vpb-hero__slide > picture,
.vpb-hero__slide > a > picture,
.vpb-hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
}
.vpb-hero__slide img {
  max-width: none;
  object-fit: cover;
  -webkit-user-drag: none;
}

/* ----- Phân trang: viên thuốc mờ chứa các thanh; thanh đang chọn chạy đầy theo thời gian autoplay ----- */
.vpb-hero__dots {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 5;                         /* trên lớp tối ::after (z-index 4) */
  display: flex;
  align-items: center;
  box-sizing: border-box;
  max-width: calc(100% - 32px);
  padding: 0 calc(var(--vpb-bar-gap) / 2 + 6px);
  border-radius: 999px;
  background: rgb(0 0 0 / .28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.vpb-hero .vpb-hero__dots button {
  /* reset: tránh style button toàn cục của Avada */
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 1 calc(var(--vpb-bar-w) + var(--vpb-bar-gap));
  width: calc(var(--vpb-bar-w) + var(--vpb-bar-gap));
  height: var(--vpb-hit-h);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* ::after = nền thanh, ::before = phần tô chạy đầy bên trên */
.vpb-hero .vpb-hero__dots button::before,
.vpb-hero .vpb-hero__dots button::after {
  content: "";
  position: absolute;
  left: calc(var(--vpb-bar-gap) / 2);
  right: calc(var(--vpb-bar-gap) / 2);
  top: 50%;
  height: var(--vpb-bar-h);
  margin-top: calc(var(--vpb-bar-h) / -2);
  border-radius: 999px;
}
.vpb-hero .vpb-hero__dots button::after { background: var(--vpb-bar-idle); transition: background-color .2s; }
.vpb-hero .vpb-hero__dots button::before {
  z-index: 1;
  background: rgb(var(--vpb-accent));
  transform: scaleX(0);
  transform-origin: left center;
}
.vpb-hero .vpb-hero__dots button.is-past::before { background: var(--vpb-bar-past); transform: scaleX(1); }
.vpb-hero .vpb-hero__dots button.is-active::before { animation: vpb-hero-fill var(--vpb-delay) linear forwards; }
.vpb-hero.is-paused .vpb-hero__dots button.is-active::before { animation-play-state: paused; }
/* Không autoplay: thanh đang chọn đầy luôn */
.vpb-hero:not(.has-autoplay) .vpb-hero__dots button.is-active::before { animation: none; transform: scaleX(1); }
@media (hover: hover) {
  .vpb-hero .vpb-hero__dots button:hover::after { background: rgb(255 255 255 / .7); }
}
.vpb-hero .vpb-hero__dots button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@keyframes vpb-hero-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ----- Responsive: ratio khớp ảnh art-direction trong template.php (≤768 mobile, ≤1024 tablet) ----- */
@media (max-width: 1024px) {
  .vpb-hero { --vpb-ratio: 1536 / 768; }
}
@media (max-width: 768px) {
  .vpb-hero { --vpb-ratio: 750 / 1050; --vpb-bar-w: 28px; }
  .vpb-hero__dots { bottom: 12px; }
  .vpb-hero::after { height: 72px; }
}
@media (pointer: coarse) {
  .vpb-hero { --vpb-bar-h: 5px; --vpb-hit-h: 36px; }   /* ngón tay: thanh dày hơn, vùng bấm cao hơn */
}
@media (prefers-reduced-motion: reduce) {
  .vpb-hero__slide { transition: none; }
}