/*
 * Thiên Nam Tea — Product Banner V2
 * v1.7.49
 * Clean isolated packshot system for standardized 1000x1000 transparent images.
 * IMPORTANT: selectors intentionally use NEW class names only so legacy banner CSS cannot interfere.
 */

/* Shared base: only the product packshots, not the background/text. */
body.single-tn_product .tn-banner-v2{
  position:absolute;
  z-index:2;
  pointer-events:none;
  box-sizing:border-box;
}
body.single-tn_product .tn-banner-v2-slot{
  box-sizing:border-box;
  aspect-ratio:1 / 1;
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  min-width:0;
  min-height:0;
}
body.single-tn_product .tn-banner-v2-img{
  display:block;
  width:100%;
  height:98%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 10px 12px rgba(35,45,31,.16));
}

/* ================================================================
   1) DESKTOP >= 1025px — independent from tablet/mobile
   1 image: 95% banner height
   2 images: 91% banner height each
   3 images: 85% banner height each
   ================================================================ */
@media (min-width:1025px){
  body.single-tn_product .tn-banner-v2{
    top:0;
    right:2.2%;
    bottom:0;
    left:auto;
    width:54%;
    display:flex;
    align-items:flex-end;
    justify-content:flex-end;
    gap:0;
    padding:6px 0 0;
    overflow:visible;
  }

  /* v1.7.45 — Desktop only: kích thước theo đúng % chiều cao banner. */
  body.single-tn_product .tn-banner-v2-img{
    height:100%;
  }
  body.single-tn_product .tn-banner-v2-count-1 .tn-banner-v2-slot{
    height:95%;
  }
  body.single-tn_product .tn-banner-v2-count-2 .tn-banner-v2-slot{
    height:91%;
  }
  body.single-tn_product .tn-banner-v2-count-3 .tn-banner-v2-slot{
    height:85%;
  }

  /* Kéo các canvas lại gần nhau để bù khoảng trong suốt bên trong ảnh 1000x1000. */
  body.single-tn_product .tn-banner-v2-count-2 .tn-banner-v2-slot + .tn-banner-v2-slot{
    margin-left:clamp(-42px,-2.4vw,-28px);
  }
  /* v1.7.48 — Desktop 3 ảnh: giãn ra xa hơn một chút nhưng vẫn giữ cụm gọn. */
  body.single-tn_product .tn-banner-v2-count-3 .tn-banner-v2-slot + .tn-banner-v2-slot{
    margin-left:clamp(-52px,-2.9vw,-34px);
  }

  /* Desktop: fade + trượt nhẹ, lặp lại; từng ảnh lệch nhịp. */
  body.single-tn_product .tn-banner-v2-slot{
    animation:tnBannerV2DesktopLoop 11.8s ease-in-out infinite both;
    will-change:opacity,transform;
  }
  body.single-tn_product .tn-banner-v2-slot:nth-child(1){animation-delay:0s;}
  body.single-tn_product .tn-banner-v2-slot:nth-child(2){animation-delay:1.35s;}
  body.single-tn_product .tn-banner-v2-slot:nth-child(3){animation-delay:2.7s;}
}

@keyframes tnBannerV2DesktopLoop{
  0%,6%{opacity:.12;transform:translateY(10px);}
  18%,74%{opacity:1;transform:translateY(0);}
  88%,100%{opacity:.12;transform:translateY(7px);}
}

/* ================================================================
   2) TABLET 600–1024px — independent from desktop/mobile
   1 image: 80% banner height
   2 images: 70% banner height each
   3 images: 62% banner height each
   ================================================================ */
@media (min-width:600px) and (max-width:1024px){
  body.single-tn_product .tn-banner-v2{
    top:0;
    right:2.5%;
    bottom:0;
    left:auto;
    width:46%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:0;
    padding:7px 0 0;
    overflow:visible;
  }
  body.single-tn_product .tn-banner-v2-count-1 .tn-banner-v2-slot{
    height:80%;
  }
  body.single-tn_product .tn-banner-v2-count-2 .tn-banner-v2-slot{
    height:70%;
  }
  body.single-tn_product .tn-banner-v2-count-3 .tn-banner-v2-slot{
    height:62%;
  }

  /* Gom các canvas 1000x1000 lại gần nhau để khoảng cách sản phẩm bớt loãng. */
  body.single-tn_product .tn-banner-v2-count-2 .tn-banner-v2-slot + .tn-banner-v2-slot{
    margin-left:clamp(-16px,-1.2vw,-8px);
  }
  body.single-tn_product .tn-banner-v2-count-3 .tn-banner-v2-slot + .tn-banner-v2-slot{
    margin-left:clamp(-24px,-2vw,-12px);
  }

  /* Tablet: fade + trượt nhẹ, lặp lại; mỗi ảnh lệch nhịp riêng. */
  body.single-tn_product .tn-banner-v2-slot{
    animation:tnBannerV2TabletLoop 10.8s ease-in-out infinite both;
    will-change:opacity,transform;
  }
  body.single-tn_product .tn-banner-v2-slot:nth-child(1){animation-delay:0s;}
  body.single-tn_product .tn-banner-v2-slot:nth-child(2){animation-delay:1.25s;}
  body.single-tn_product .tn-banner-v2-slot:nth-child(3){animation-delay:2.5s;}
}

@keyframes tnBannerV2TabletLoop{
  0%,7%{opacity:.18;transform:translateY(8px);}
  18%,72%{opacity:1;transform:translateY(0);}
  86%,100%{opacity:.18;transform:translateY(6px);}
}

/* ================================================================
   3) MOBILE <= 599px — independent from desktop/tablet
   Only one standardized 1000x1000 image is visible at a time.
   2–3 selected images rotate every 4.2 seconds via product-banner-v2.js.
   ================================================================ */
@media (max-width:599px){
  body.single-tn_product .tn-banner-v2{
    inset:0;
    display:block;
    overflow:visible;
  }
  body.single-tn_product .tn-banner-v2-slot{
    position:absolute;
    right:-1%;
    bottom:6px;
    width:auto;
    height:80%;
    aspect-ratio:1 / 1;
    opacity:0;
    visibility:hidden;
    transform:translateY(5px);
    transition:opacity .7s ease, transform .7s ease, visibility .7s ease;
  }
  body.single-tn_product .tn-banner-v2-count-1 .tn-banner-v2-slot{
    height:84%;
  }
  body.single-tn_product .tn-banner-v2-slot.is-mobile-active,
  body.single-tn_product .tn-banner-v2-count-1 .tn-banner-v2-slot:first-child{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  body.single-tn_product .tn-banner-v2-img{
    filter:drop-shadow(0 8px 10px rgba(35,45,31,.14));
  }
}

@media (prefers-reduced-motion:reduce){
  body.single-tn_product .tn-banner-v2-slot{
    transition:none!important;
    animation:none!important;
  }
}