/* ============================================================
   style-cls-fix.css — CLS remediation cho tramtue.vn
   ------------------------------------------------------------
   Mục đích: reserve space (CSS aspect-ratio) cho ảnh thiếu dims,
   đặc biệt HERO SLIDER — thủ phạm CLS desktop 0.16 (24% poor).
   Dùng aspect-ratio CSS (KHÔNG width/height attribute) vì Haravan
   dùng lazyload JS (data-src) → attribute HTML vô dụng khi ảnh
   chưa load; chỉ CSS reserve được không gian sớm → 0 CLS.

   Include: snippets/master-include.liquid (sau style-themes.scss.css)
   Rollback: xóa 1 dòng include master-include.liquid:30
   Nguồn chẩn đoán: plans/reports/psi-diagnosis-260618-1731-tramtue-rootcause.md
   ============================================================ */

/* ---- 1. HERO SLIDER (CLS chính — .slide--image KHÔNG reserve) ----
   slide_1_mb/img.jpg đều 1600x967; slide 2-6 dùng owl-lazy (data-src)
   load async → height = 0 ban đầu → jump khi load = CLS 0.16. */
.section-home-slider .slide--image {
  position: relative;
  aspect-ratio: 1600 / 967;
  overflow: hidden;
}
.section-home-slider .slide--image > a {
  display: block;
  width: 100%;
  height: 100%;
}
.section-home-slider .slide--image picture,
.section-home-slider .slide--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Override style-themes.scss.liquid:265 `.owl-item img { width:auto!important }`
   để hero fill khung aspect-ratio thay vì auto-width căn giữa. */
.owl-carousel.slider-owl .owl-item .slide--image img {
  width: 100% !important;
}

/* ---- 2. MEGA-MENU banner (lazy, ratio 1200x450) ----
   Chỉ reserve khi dropdown mở (hover) — giảm CLS field khi user tương tác. */
.menuBanner img.lazyload {
  aspect-ratio: 1200 / 450;
  object-fit: cover;
}

/* ---- 3. FOOTER logo (logo-footer.png 300x50) ---- */
.footer .logoimg {
  aspect-ratio: 300 / 50;
  object-fit: contain;
}