/* ===== CLS FIXES (Flatsome/Woo) ===== */

/* 1) Chừa chỗ cho ảnh sản phẩm (grid/list) */
.woocommerce .product-small .box-image,
.woocommerce-page .product-small .box-image{
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.woocommerce .product-small .box-image img,
.woocommerce-page .product-small .box-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* 2) Chừa chỗ cho slider/banner (Flatsome hay nhảy do flickity/lazyload) */
.ux-slider,
.ux-slider .flickity-viewport,
.ux-slider .flickity-slider,
.banner, .banner-layers, .ux-banner{
  min-height: 240px;
}
@media (min-width: 850px){
  .ux-slider,
  .ux-slider .flickity-viewport,
  .ux-slider .flickity-slider,
  .banner, .banner-layers, .ux-banner{
    min-height: 420px;
  }
}

/* 3) Cookie bar/notice: ép overlay (nếu plugin đang “đẩy” layout) */
#cookie-notice, .cookie-notice, .cc-window, .cnns-cookie-notice{
  position: fixed !important;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 999999;
  max-width: 980px;
  margin: 0 auto;
}

/* 4) Giảm khả năng layout shift do icon/img inline */
img, svg { vertical-align: middle; }

/* ===== CLS FIXES V2 (extra targets) ===== */

/* 5) Slider images / banners: reserve space */
.ux-slider img,
.banner img,
.ux-banner img,
.flickity-slider img{
  width: 100%;
  height: auto;
  display:block;
}

/* 6) Single product gallery (Woo) */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image{
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.woocommerce-product-gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 7) Sticky header: hạn chế “nhảy” khi JS toggle */
.header.has-sticky, .header-wrapper{
  will-change: transform;
}