/* ==========================================================
   CLS fixes — load AFTER the main stylesheet
   Target: CLS <= 0.01
   ========================================================== */

/* ---------- 1. Banner (pushes .focus-wrap down) ---------- */

/* Before Swiper initialises, show only the first slide so the
   banner doesn't render all slides stacked and then collapse. */
.banner .swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  overflow: hidden;
}
.banner .swiper:not(.swiper-initialized) .swiper-slide {
  flex-shrink: 0;
  width: 100%;
}
.banner .swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
  display: none;
}

/* Reserve space for banner media before it loads.
   !! Replace 1440 / 600 with your real banner image/video size. */
.banner-img img,
.banner-picture video,
.banner-picture img {
  aspect-ratio: 1440 / 600;
  height: auto;
  display: block;
}
@media screen and (max-width: 575.98px) {
  .banner-picture video,
  .banner-picture img {
    aspect-ratio: auto;
    height: 36rem;          /* matches the existing mobile max/min-height */
    width: 100%;
    max-height: none;
    object-fit: cover;
  }
}

/* ---------- 2. Focus icons ---------- */
.focus-item a > span { flex-shrink: 0; }
.focus-item a > span img { aspect-ratio: 1; object-fit: contain; }
@media screen and (max-width: 767.98px) {
  .focus-item a > span img { width: 5.6rem; height: 5.6rem; }
}

/* ---------- 3. .list-entire (.js-height) ---------- */
/* Equal-height cards with CSS instead of JS:
   flex rows already stretch; reserve the 2-line title height
   so cards don't resize when text/fonts load. */
.list-entire .list-items { align-items: stretch; }
.list-entire .items-inner { display: flex; flex-direction: column; }
.list-entire .items-content { flex: 1; }
.list-entire .items-title {
  min-height: calc(2.4rem * 2);   /* 2 lines x line-height */
}
@media screen and (max-width: 575.98px) {
  .list-entire .items-title { min-height: calc(2rem * 2); }
}

/* ---------- 4. Floating contact bar ---------- */
/* Give every image a fixed box so the bar's height (and therefore
   its centred position) never changes while images load.
   !! Set the icon size to the real size of your arrow icon. */
.contact-fixed .icon {
  height: 3.2rem;
}
.contact-fixed .icon img {
  width: 2.4rem;
  height: 2.4rem;
  display: block;
}
.contact-fixed .content a {
  height: 5rem;                    /* 0.9rem padding x2 + 3.2rem icon */
}
.contact-fixed .content a img {
  display: block;
  flex-shrink: 0;
}
/* Only animate transform, never layout properties */
.contact-fixed,
.contact-fixed .content {
  transition: transform 0.3s ease-in-out;
}

/* ---------- 4b. Header / footer icons ---------- */
/* Header nằm trên cùng: nếu logo/icon đổi chiều cao khi tải,
   toàn bộ trang bên dưới bị đẩy xuống. */
.nav-logo img { display: block; height: auto; }
.nav-sear button img { width: 2rem; height: 2rem; display: block; }
.nav-action .btn img { width: 2rem; height: 2rem; flex-shrink: 0; }
.footer-fixed .icon img { width: 2.4rem; height: 2.4rem; display: block; }
.footer-fixed .icon .is-hide { display: none; }
.footer-fixed .menu-item.current-menu-item .icon .is-hide { display: block; }
.footer-fixed .menu-item.current-menu-item .icon .is-show { display: none; }

/* Banner trang dịch vụ (.banner-sec) */
.banner-sec .banner-img img { display: block; height: auto; max-width: 100%; }

/* ---------- 4c. Trang bác sĩ: select2 & main ---------- */
/* Trước khi select2 khởi tạo, <select> gốc hiển thị với chiều cao khác
   -> khi select2 thay thế, .doctors-wrap / .btn-action / footer bị đẩy.
   Ép <select> gốc có đúng kích thước của select2 (5.2rem + 2 viền). */
.bk-form select:not(.select2-hidden-accessible) {
  display: block;
  width: 100%;
  height: 5.4rem;
  margin: 0.8rem 0 1.6rem;
  padding: 0 1.6rem;
  border: 0.1rem solid #e5e5e5;
  border-radius: 5rem;
  background: #fff;
  font: 500 1.6rem/2.4rem var(--font-pri);
  color: #002244;
  -webkit-appearance: none;
  appearance: none;
}
.sort-item .bk-form select:not(.select2-hidden-accessible),
.clinic .bk-form select:not(.select2-hidden-accessible),
.rec-main .bk-form select:not(.select2-hidden-accessible) {
  margin: 0;
}
.box-option .bk-form select:not(.select2-hidden-accessible) {
  height: 4.2rem;
}

/* .main có transition 0.3s: nếu JS đổi padding-top của main,
   layout bị dịch chuyển nhiều lần trong lúc animate. Tắt đi. */
.main { transition: none; }

/* ---------- 4d. Header desktop: bỏ absolute + padding JS ---------- */
/* Desktop (>=1200px): .header-box đang position:absolute, nên JS phải
   tính chiều cao header rồi đặt padding-top cho <main> sau khi tải
   -> breadcrumb, nội dung, footer bị đẩy xuống (shift ~0.23).
   Đưa header về lại luồng trang bằng position:sticky: header tự chiếm
   chỗ ngay từ đầu, vẫn dính trên cùng khi cuộn, không cần JS. */
@media screen and (min-width: 1200px) {
  .header-box,
  .header-box.is-fixed {
    position: sticky !important;
    top: 0;
    left: auto;
    width: 100%;
    z-index: 100;
  }
  .admin-bar .header-box,
  .admin-bar .header-box.is-fixed {
    top: 32px;               /* chừa chỗ thanh admin khi đăng nhập */
  }
  .main {
    padding-top: 0 !important;   /* ghi đè padding-top inline do JS đặt */
  }
}
/* Mobile/tablet: header cố định cao 8.2rem -> giữ padding cố định,
   không cho JS thay đổi. */
@media screen and (max-width: 1199.98px) {
  .main {
    padding-top: 8.2rem !important;
  }
}

/* ---------- 4e. Banner đầu trang (.clinic-banner) ---------- */
/* Dùng chung cho trang Bác sĩ, Tuyển dụng, Phòng khám...
   Ảnh có width/height (từ hàm mona_static_img) -> giữ đúng tỉ lệ. */
.clinic-banner-bg img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 5. Font swap ---------- */
/* Metric-matched fallback so the Inter swap doesn't reflow text.
   Values are the commonly used Inter→Arial overrides; tweak if needed. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.1%;
  ascent-override: 90.4%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
:root {
  --font-pri: "Inter", "Inter Fallback", sans-serif;
}