/* ==========================================================
   home.css — trang chủ
   1. Biến          4. Home swiper (cao theo tỉ lệ ảnh)
   2. Layout        5. About / Office / List office
   3. Banner/Hero   6. News swiper
   ========================================================== */

/* ===== 1. Biến ===== */
:root {
  --header-h: 80px;   /* chiều cao header thật, đo bằng F12 rồi chỉnh lại */
  --hero-h: 180px;
}
@media (min-width: 641px) {
  :root {
    --hero-h: calc(100dvh - 160px);
  }
}

/* ===== 2. Layout trang chủ ===== */
.home {
  #content .post-content > .fusion-fullwidth {
    padding-inline: 0;
    padding-top: 0;

    > .fusion-builder-row > .fusion-layout-column {
      margin-block: 0;
    }
  }

  #sliders-container {
    display: none;
  }
}

/* ===== 3. Banner / Hero / Avada Slider ===== */
.banner-wrapper {
  margin-block: 0;

  .swiper-wrapper {
    padding-block: 0 !important;
  }
}

.banner-image-carousel .fusion-image-wrapper img {
  /* Banner trừ header 200px thay vì 160px như hero */
  height: 275px !important;

  @media (max-width: 640px) {
    height: 180px !important;
  }
  @media (min-width: 641px) {
    height: calc(100dvh - 200px) !important;
  }
}

.hero .fusion-imageframe {
  width: 100%;

  img {
    height: var(--hero-h);
  }
}

/* Avada Slider (các trang khác trang chủ) */
#sliders-container {
  padding-top: 0;

  .flexslider {
    position: relative !important;
  }

  :is(.fusion-slider-container, .tfs-slider, .background.background-image) {
    height: 500px !important;
    max-width: 100% !important;
    max-height: 500px !important;
  }
}

@media (max-width: 640px) {
  #fusion-slider-75,
  #fusion-slider-75 .tfs-slider {
    height: 225px !important;
  }
}

/* ===== 4. Home swiper (cao theo tỉ lệ ảnh, không vượt quá màn hình) ===== */
.home-swiper {
  /* Tỉ lệ rộng/cao của ảnh, đổi cho khớp ảnh thật: 1920x1080 → 16/9, 1920x800 → 12/5 */
  --ratio-mobile: 4 / 3;
  --ratio-tablet: 16 / 9;
  --ratio-desktop: 16 / 9;

  --swiper-pagination-color: var(--secondary);
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: var(--ratio-mobile);
}

/* Tablet */
@media (min-width: 641px) {
  .home-swiper {
    aspect-ratio: var(--ratio-tablet);
  }
}

/* Laptop / PC: theo tỉ lệ ảnh, trừ header và một khoảng chừa thêm */
@media (min-width: 1025px) {
  .home-swiper {
    --banner-gap: 60px; /* khoảng chừa thêm: tăng = banner thấp hơn */
    aspect-ratio: auto;
    height: min(
      calc(100vw / (16 / 9)),
      calc(100dvh - var(--header-h) - var(--banner-gap))
    );
    min-height: 480px;
  }
}

.home-swiper .swiper-wrapper,
.home-swiper .swiper-slide,
.home-swiper .swiper-slide picture {
  height: 100%;
}

.home-swiper .swiper-slide {
  width: 100%;
}

.home-swiper .swiper-slide picture {
  display: block;
}

/* Ảnh lấp đầy khung */
.home-swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Nút điều hướng (đang ẩn, muốn bật thì xóa dòng display: none) */
.home-swiper :is(.swiper-button-next, .swiper-button-prev) {
  display: none;
  --swiper-navigation-size: 33px;
}
.home-swiper :is(.swiper-button-next, .swiper-button-prev):hover {
  color: var(--secondary);
}
@media (min-width: 769px) {
  .home-swiper :is(.swiper-button-next, .swiper-button-prev) {
    --swiper-navigation-size: 44px;
  }
}

/* Pagination home: căn giữa */
.home-swiper .home-swiper-pagination {
  position: absolute !important;
  inset: auto 0 14px 0 !important;   /* left:0; right:0; bottom:14px */
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  z-index: 20;
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  gap: 8px;
  text-align: center;
  pointer-events: none;              /* vùng trống không chặn kéo/vuốt slide */
}

/* Chấm thường: tròn */
.home-swiper .home-swiper-pagination .swiper-pagination-bullet {
  display: block;
  flex: 0 0 auto;                    /* không cho flex co chấm lại */
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
  border-radius: 999px;
  background: #fff;
  opacity: 1;
  box-shadow: 0 0 0 1.5px rgb(0 0 0 / 0.35), 0 1px 4px rgb(0 0 0 / 0.4);
  cursor: pointer;
  pointer-events: auto;
  transition: width 0.25s ease, background-color 0.25s ease;
}

/* Chấm đang chọn: bè ra */
.home-swiper .home-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--secondary);
}

/* Pagination news */
.news-card--swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

/* ===== 5a. About section ===== */
@media (max-width: 640px) {
  .about-section .about-section__left .fusion-content-boxes .content-box-column-1 .icon i {
    width: 24px !important;
    font-size: 1.5rem !important;
  }
  .about-section .about-section__left .fusion-content-boxes .content-box-column-2 .about-logo {
    display: none;
  }
}
@media (min-width: 641px) {
  .about-section .about-section__left .fusion-content-boxes .content-box-column-2 .about-logo-mobile {
    display: none;
  }
}

.about-section .about-section__left .fusion-content-boxes .content-box-column-1 h1.content-box-heading {
  font-size: 1.5rem !important;
}
@media (min-width: 640px)  { .about-section .about-section__left .fusion-content-boxes .content-box-column-1 h1.content-box-heading { font-size: 1.75rem !important; } }
@media (min-width: 768px)  { .about-section .about-section__left .fusion-content-boxes .content-box-column-1 h1.content-box-heading { font-size: 2rem !important; } }
@media (min-width: 1024px) { .about-section .about-section__left .fusion-content-boxes .content-box-column-1 h1.content-box-heading { font-size: 2.25rem !important; } }
@media (min-width: 1280px) { .about-section .about-section__left .fusion-content-boxes .content-box-column-1 h1.content-box-heading { font-size: 2.5rem !important; } }

/* ===== 5b. Office section ===== */
@media (max-width: 840px) {
  .office-section {
    margin-top: 2rem !important;
  }
  .office-section > .fusion-builder-row {
    gap: 1.5rem;
  }
}
.office-section .office-card .office-card__title h2 {
  font-size: 1.25rem !important;
}
.office-section .office-card .office-card__description {
  font-size: 0.875rem;
}
@media (min-width: 640px) {
  .office-section .office-card .office-card__title h2 { font-size: 1.5rem !important; }
  .office-section .office-card .office-card__description { font-size: 1rem; }
}

/* ===== 5c. List office ===== */
.list-office-section .list-office__card .awb-image-frame {
  width: 100%;
}
.list-office-section .list-office__card img {
  height: 270px;
  width: 100%;
}

/* ===== 6. News card swiper ===== */
.news-card-swiper {
  margin-top: 1rem;
  width: 100%;
  max-width: 100%;
  height: auto;
  padding-inline: 2.5rem;
}
.news-card-swiper .swiper-slide {
  width: calc(100% / 3);
  margin-right: 32px;
}
.news-card-swiper .news-card--swiper-pagination {
  bottom: -5%;
}