/* ==========================================================================
   Homepage — Hero Image (no slider)
   Order: Base → Visibility → Desktop (≥64rem) → Tablet (40.0625–64rem) → Mobile (≤40rem)
   ========================================================================== */

/* =========================
   BASE
   ========================= */
.home-hero{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.home-hero .hero-media,
.home-hero .hero-media img{
  display: block;
  width: 100%;
  height: 100%;
}
.home-hero .hero-media{ position: relative; }
.home-hero .hero-media img{
  object-fit: cover;
  object-position: center;
}

/* mode-full: full viewport (fallback = vh) */
.home-hero.mode-full .hero-box{
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-h, 3.75rem) - var(--adminbar-h, 0rem));
}
/* Ưu tiên dvh/svh để sửa bug 100vh trên mobile */
@supports (height: 100dvh){
  .home-hero.mode-full .hero-box{
    height: calc(100dvh - var(--header-h, 3.75rem) - var(--adminbar-h, 0rem));
  }
}
@supports (height: 100svh){
  .home-hero.mode-full .hero-box{
    height: calc(100svh - var(--header-h, 3.75rem) - var(--adminbar-h, 0rem));
  }
}

/* mode-fixed: khung trong .container (desktop mặc định) */
.home-hero.mode-fixed .hero-box{
  position: relative;
  width: 100%;           /* theo chiều ngang .container */
  aspect-ratio: 12 / 5;  /* 1200 : 500 */
  margin: 3.75rem auto 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}


/* =========================
   VISIBILITY (ẩn/hiện theo thiết bị)
   - Ẩn DESKTOP chỉ khi ≥64rem
   - Ẩn MOBILE chỉ khi ≤40rem
   ========================= */

/* ≥64rem (Desktop): cho phép ẩn desktop */
@media (min-width: 64rem){
  .home-hero.is-hidden-desktop{ display: none !important; }
}


/* =========================
   DESKTOP (≥64rem)
   ========================= */
/* (không cần rule bổ sung ngoài visibility ở trên) */


/* =========================
   TABLET (40.0625rem – 64rem)
   ========================= */
@media (max-width: 64rem) and (min-width: 40.0625rem){
  /* Giảm khoảng cách top cho fixed khớp layout tablet */
  .home-hero.mode-fixed .hero-box{
    margin: 1.875rem auto 0;
  }
}


/* =========================
   MOBILE (≤40rem)
   ========================= */
@media (max-width: 40rem){
  /* Nếu có admin bar WP trên mobile → dùng 46px để trừ chính xác */
  body.admin-bar{ --adminbar-h: 46px; }

  /* Ẩn mobile chỉ áp dụng ở mobile, không ảnh hưởng tablet */
  .home-hero.is-hidden-mobile{ display: none !important; }

  /* Bỏ giới hạn .container để mode-fixed thật sự full-bleed */
  .home-hero.mode-fixed .container{
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  /* Trên mobile: CẢ 2 MODE đều full màn hình (trừ header + adminbar) */
  .home-hero .hero-box{
    width: 100vw;
    margin: 0;
    border-radius: 0;
    height: calc(100vh - var(--header-h, 3.75rem) - var(--adminbar-h, 0rem));
  }
  /* mode-fixed: khung trong .container (desktop mặc định) */
  .home-hero.mode-fixed .hero-box{
    margin: 0;
    border-radius: 0;
  }
  
  @supports (height: 100dvh){
    .home-hero .hero-box{
      height: calc(100dvh - var(--header-h, 3.75rem) - var(--adminbar-h, 0rem));
    }
  }
  @supports (height: 100svh){
    .home-hero .hero-box{
      height: calc(100svh - var(--header-h, 3.75rem) - var(--adminbar-h, 0rem));
    }
  }

  .bg-white, .bg-gray {
        padding: 3.75rem 0;
  }
  .section-sub {
        margin: 0 0 1.875rem;
  }
}