/*
 * THIÊN NAM — RESPONSIVE CLEAN
 * v1.7.0
 *
 * Breakpoints chính:
 *   Mobile : 0–599px
 *   Tablet : 600–1024px
 *   Desktop: >=1025px
 *
 * File này được nạp SAU style.css và là nơi duy nhất nên thêm
 * các chỉnh sửa responsive mới về sau.
 */

/* ===== TỪ TABLET TRỞ LÊN: >=600px ===== */
@media (min-width:600px){
.brand-grid{
    align-items:stretch!important;
  }
  .brand-grid > div:first-child{
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .brand-grid > img.about-half-height{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:center center!important;
    align-self:stretch!important;
  }
.brand-grid.tinh-hoa-align-bottom{
    align-items:end!important;
  }
  .brand-grid.tinh-hoa-align-bottom > div:first-child{
    display:block!important;
  }
  .brand-grid.tinh-hoa-align-bottom > img.about-half-height{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:25 / 14!important;
    object-fit:cover!important;
    object-position:center center!important;
    align-self:end!important;
  }
.product-detail-top .tn-product-gallery-shell{
    box-sizing:border-box!important;
  }
  .product-detail-top .tn-product-gallery{
    height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
  }
  .product-detail-top .tn-product-gallery-main{
    flex:1 1 auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
  }
  .product-detail-top .tn-product-gallery-thumbs{
    flex:0 0 auto!important;
  }

  
  
}

/* ===== MOBILE: 0–599px ===== */
@media (max-width:599px){
.navbar{min-height:72px}
 .tn-menu-toggle{display:flex;margin-left:auto;flex:0 0 44px}
 .nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:80;background:var(--green);border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 18px 36px rgba(0,0,0,.22);padding:8px 0;overflow:hidden}
 .nav.is-open{display:block}
 .nav .tn-menu{display:flex!important;flex-direction:column;align-items:stretch;gap:0;width:100%}
 .nav .tn-menu li{width:100%}
 .nav .tn-menu a{display:block;width:100%;padding:13px 18px;font-size:13px}
 .nav .tn-menu a:hover,.nav .tn-menu a.active{background:rgba(255,255,255,.08)}
 .hero,.hero .container{min-height:500px}
 .hero:before{background:linear-gradient(rgba(255,250,240,.91),rgba(255,250,240,.91)),url("../img/hero-doi-tra.jpg") center/cover no-repeat}
 .cta{display:block}
.logo img{height:48px}
.hero-demo{
    min-height:560px;
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.89) 52%,
        rgba(255,255,255,.38) 100%),
      url("../img/hero-doi-tra.jpg") center / cover no-repeat;
  }
  .hero-demo .container{min-height:560px;align-items:flex-start}
  .hero-demo-copy{width:100%;padding-top:55px}
  .hero-demo-title{font-size:clamp(42px,10vw,62px)}
  .hero-demo-desc{max-width:560px}
.hero-demo-fixed{min-height:570px!important}
  .hero-demo-photo{width:100%;top:230px}
  .hero-demo-fade{
    background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.97) 37%,rgba(255,255,255,.75) 58%,rgba(255,255,255,.08) 83%);
  }
  .hero-demo-fixed .hero-demo-copy{width:100%}
  .hero-demo-fixed .hero-demo-inner{min-height:570px;align-items:flex-start}
.tn-hero-v2{height:590px}.tn-hero-photo{inset:245px 0 0 0}
.tn-hero-gradient{background:linear-gradient(180deg,#fff 0%,#fff 38%,rgba(255,255,255,.9) 53%,rgba(255,255,255,.25) 78%,rgba(255,255,255,0) 100%)}
.tn-hero-content{height:590px}.tn-hero-copy{width:100%;padding-top:35px}
.tn-hero-copy h1 span{white-space:normal;font-size:45px}.tn-hero-copy h1 span+span{font-size:42px}
.process-grid{grid-template-columns:1fr}
.region-intro,.region-grid{grid-template-columns:1fr}
  .region-values{grid-template-columns:1fr}
  .region-hero{min-height:430px}
.region-journey{grid-template-columns:1fr}
  .article-nav{display:block}
  .article-nav a{display:block;margin:10px 0}
.tn-region-hero{height:590px}
  .tn-region-photo{inset:245px 0 0 0}
  .tn-region-gradient{
    background:linear-gradient(180deg,#fff 0%,#fff 38%,rgba(255,255,255,.9) 53%,rgba(255,255,255,.25) 78%,rgba(255,255,255,0) 100%);
  }
  .tn-region-content{height:590px}
  .tn-region-copy{width:100%;padding-top:35px}
  .tn-region-copy h1 span{white-space:normal;font-size:44px}
.tn-about-hero{height:590px}
  .tn-about-photo{inset:245px 0 0 0}
  .tn-about-gradient{background:linear-gradient(180deg,#fff 0%,#fff 38%,rgba(255,255,255,.9) 53%,rgba(255,255,255,.25) 78%,rgba(255,255,255,0) 100%)}
  .tn-about-content{height:590px}
  .tn-about-copy{width:100%;padding-top:35px}
  .tn-about-copy h1 span{white-space:normal;font-size:44px}
.tn-subhero{height:590px}
  .tn-subhero-photo{inset:245px 0 0 0}
  .tn-subhero-gradient{background:linear-gradient(180deg,#fff 0%,#fff 38%,rgba(255,255,255,.9) 53%,rgba(255,255,255,.25) 78%,rgba(255,255,255,0) 100%)}
  .tn-subhero-content{height:590px}
  .tn-subhero-copy{width:100%;padding-top:35px}
  .tn-subhero-copy h1 span{white-space:normal;font-size:44px}
  .map-address-bar{display:block}
  .map-address-bar .btn{margin-top:16px}
  .google-map-frame iframe{min-height:420px}
.news-featured,.news-cards{grid-template-columns:1fr}
  .news-featured-image img{height:320px}
.contact-layout{
    grid-template-columns:1fr!important;
  }
  .contact-info-panel,
  .contact-form-card{
    height:auto!important;
    min-height:0!important;
  }
.gioi-thieu .about-half-height,
  .about-half-height{
    aspect-ratio:16 / 7!important;
  }
.about-half-height{
    aspect-ratio:80 / 49!important;
  }
.tu-nuong-tra-70-height{
    aspect-ratio:125 / 121!important;
  }
.region-intro{
    align-items:stretch!important;
  }
  .region-intro .tu-nuong-tra-70-height{
    align-self:auto!important;
  }
.product-copy-grid{gap:26px}
  .product-features{grid-template-columns:1fr}
  .product-steps{grid-template-columns:1fr}
.product-gallery{grid-template-columns:1fr}
  .product-gallery-img{height:270px!important}
  .product-step{padding:18px}
.news-article .news-article-cover,
  .news-article-cover{
    width:100%!important;
    height:auto!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
  }
.brand-grid.cert-award-align-bottom > img.cert-award-image{
    aspect-ratio:4 / 3!important;
  }
.news-card-full .content .link{
    margin-top:12px!important;
  }
.news-featured-image > a.image-detail-link{
    height:320px!important;
    min-height:320px!important;
  }
  .news-featured-image > a.image-detail-link > img{
    height:320px!important;
  }
.article-wrap > img.article-cover,
  .article-wrap .article-cover{
    width:100%!important;
    max-height:520px!important;
  }.product-green-tea-hero img{object-position:center center!important;}
.product-green-tea-hero{
    height:auto!important;
    min-height:0!important;
  }
  .product-green-tea-hero img{
    width:100%!important;
    height:100%!important;
    object-fit:fill!important;
  }
.product-green-tea-hero{
    aspect-ratio:1920 / 350!important;
  }
  .product-green-tea-hero-overlay{
    background:linear-gradient(90deg,
      rgba(255,250,240,.30) 0%,
      rgba(255,250,240,.18) 18%,
      rgba(255,250,240,.08) 28%,
      rgba(255,250,240,0) 44%,
      rgba(255,250,240,0) 100%)!important;
  }
  .product-green-tea-hero::after{
    left:3.2%!important;
    width:108px!important;
    height:108px!important;
    opacity:.02!important;
  }
.product-universal-hero{
    aspect-ratio:1920 / 350!important;
  }
.product-universal-hero.green-tea-product-hero{aspect-ratio:1920 / 350!important;}
  .green-tea-product-hero .green-tea-product-can{left:55.5%;}
  .green-tea-product-hero .green-tea-product-pouch{left:65.2%;}
  .green-tea-product-hero .green-tea-product-box{left:77%;width:21%!important;}
.green-tea-product-hero .green-tea-hero-copy{
    width:24%!important;
    max-width:none!important;
    left:18px!important;
    top:50%!important;
  }
.product-universal-hero.tn-product-detail-hero .tn-product-hero-panel{
    right:18px!important;
    top:18px!important;
    bottom:18px!important;
    width:38%!important;
    padding:12px!important;
  }
  .product-universal-hero.tn-product-detail-hero.oolong-hero-card .tn-product-hero-panel{
    width:40%!important;
  }
.oolong-product-hero .oolong-product-can{left:61.5%!important;height:76%!important;}
  .oolong-product-hero .oolong-product-pouch{left:72.5%!important;height:88%!important;}
.tn-product-gallery-thumb{
    flex-basis:70px;
    width:70px;
    height:70px;
  }
  .tn-gallery-lightbox{
    padding:16px;
  }
  .tn-gallery-lightbox-stage{
    width:94vw;
    height:80vh;
  }
  .tn-gallery-lightbox-prev{
    left:6px;
  }
  .tn-gallery-lightbox-next{
    right:6px;
  }
  .tn-gallery-lightbox-close{
    top:6px;
    right:6px;
  }
.product-detail-top .tn-product-gallery-shell{
    height:auto!important;
  }
  .product-detail-top .tn-product-gallery{
    height:auto!important;
  }
  .product-detail-top .tn-product-gallery-main{
    aspect-ratio:1 / 1!important;
  }
.tn-product-price-box{padding:12px 13px}
  .tn-price-current,.tn-price-sale{font-size:22px}

body.page .brand-grid .actions .btn{width:100%;text-align:center}

  .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero > .green-tea-hero-bg{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }

  /* Các packshot bên phải banner */
  .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero
  .green-tea-hero-products > *{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:50%!important;
    transform:translate(-50%,-50%) translateY(8px) scale(.96)!important;
    opacity:0!important;
    max-height:118px!important;
    width:auto!important;
    max-width:44vw!important;
    animation:tnMobileHeroSingle 12s ease-in-out infinite!important;
    pointer-events:none!important;
  }

  .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero
  .green-tea-hero-products > *:nth-child(1){
    animation-delay:0s!important;
  }

  .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero
  .green-tea-hero-products > *:nth-child(2){
    animation-delay:4s!important;
  }

  .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero
  .green-tea-hero-products > *:nth-child(3){
    animation-delay:8s!important;
  }

  @keyframes tnMobileHeroSingle{
    0%, 8%{
      opacity:0;
      transform:translate(-50%,-50%) translateY(8px) scale(.96);
    }
    15%, 28%{
      opacity:1;
      transform:translate(-50%,-50%) translateY(0) scale(1);
    }
    35%, 100%{
      opacity:0;
      transform:translate(-50%,-50%) translateY(-4px) scale(.98);
    }
  }
.product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero .green-tea-hero-copy{
    width:96px!important;
    max-width:none!important;
    left:58px!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
  }


  /* 1 ảnh: hiện ổn định, không cần chờ animation. */
  

  /* 2 ảnh: mỗi ảnh chiếm nửa chu kỳ 10 giây. */
  
  

  
  

  /* 3 ảnh: chia ba khoảng rõ ràng, không chồng nhau. */
  
  
  

  
  
  

  
/* Quy ước cuối cùng cho hero chi tiết sản phẩm */
  .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero{
    height:235px!important;
    min-height:235px!important;
    aspect-ratio:auto!important;
    overflow:hidden!important;
  }
  .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero>.green-tea-hero-bg{
    width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important
  }
  .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero .green-tea-hero-copy{display:none!important}
  

  .section{padding:52px 0}
  .container{width:min(1180px,calc(100% - 28px))}
  .grid-3,.grid-2,.brand-grid,.news-grid,.detail,.footer-grid,.steps{grid-template-columns:1fr!important}
  .news-cards,.product-features,.product-steps,.product-gallery{grid-template-columns:1fr!important}
  .contact-layout,.region-intro,.region-grid,.region-values,.region-journey{grid-template-columns:1fr!important}
  .product-copy-grid{grid-template-columns:1fr!important}
  .product-note{position:static!important}
  .product-cta{display:block!important}
  .product-cta .actions{margin-top:18px!important}

  


  

  .tn-cart-toast{
    left:16px;
    right:16px;
    bottom:16px;
    max-width:none;
    text-align:center;
  }

  
  

  
  
  

  

  
  
  
  
}

/* ===== MOBILE NHỎ: 0–520px ===== */
@media (max-width:520px){
.article-content p,
  .entry-content p,
  .single-tn_product .product-story p,
  .single-tn_product .product-note p,
  .single-tn_product .product-feature p,
  .single-tn_product .product-step p{
    text-align:left!important;
    hyphens:none;
    -webkit-hyphens:none;
  }
.product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero
  .green-tea-hero-products > *{
    max-height:112px!important;
    max-width:42vw!important;
  }
.product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero .green-tea-hero-copy{
    width:92px!important;
    left:56px!important;
  }


}

/* ===== TABLET: 600–1024px ===== */
@media (min-width:600px) and (max-width:1024px){
.container{width:min(1180px,calc(100% - 28px))!important}
  .section{padding:56px 0}

  /* Header tablet được quản lý duy nhất ở responsive-tablet.css. */

  /* Grid chung: vẫn có cảm giác desktop nhưng không ép 3–4 cột quá chật */
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important}
  .brand-grid{grid-template-columns:1.05fr .95fr!important;gap:28px!important}
  .news-grid{grid-template-columns:1.08fr .92fr!important;gap:24px!important}
  .detail{grid-template-columns:1.02fr .98fr!important;gap:24px!important}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px!important}
  .steps,.process-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .region-intro{grid-template-columns:1.04fr .96fr!important;gap:28px!important}
  .region-values{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
  .region-value{padding:18px!important}
  .region-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
  .region-journey{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
  .news-featured{grid-template-columns:1.05fr .95fr!important;gap:24px!important}
  .news-featured-image img,.news-featured-image>a.image-detail-link,.news-featured-image>a.image-detail-link>img{height:clamp(270px,38vw,360px)!important;min-height:0!important}
  .news-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
  .contact-layout{grid-template-columns:.9fr 1.1fr!important;gap:20px!important}
  .contact-info-panel,.contact-form-card{padding:22px!important;height:auto!important;min-height:0!important}
  .google-map-frame iframe{min-height:380px!important}

  /* Hero các tab: bố cục ngang như desktop, chỉ thu tỷ lệ */
  .tn-hero-v2,.tn-region-hero,.tn-about-hero,.tn-subhero{height:clamp(350px,45vw,420px)!important}
  .tn-hero-photo,.tn-region-photo,.tn-about-photo,.tn-subhero-photo{inset:0 0 0 38%!important}
  .tn-hero-gradient,.tn-region-gradient,.tn-about-gradient,.tn-subhero-gradient{
    background:linear-gradient(90deg,#fff 0%,#fff 28%,rgba(255,255,255,.96) 37%,rgba(255,255,255,.78) 46%,rgba(255,255,255,.38) 57%,rgba(255,255,255,0) 72%)!important
  }
  .tn-hero-content,.tn-region-content,.tn-about-content,.tn-subhero-content{height:clamp(350px,45vw,420px)!important}
  .tn-hero-copy,.tn-region-copy,.tn-about-copy,.tn-subhero-copy{width:52%!important;padding-top:clamp(22px,3vw,30px)!important}
  .tn-hero-copy h1 span,.tn-region-copy h1 span,.tn-about-copy h1 span,.tn-subhero-copy h1 span{font-size:clamp(31px,5.2vw,46px)!important;white-space:normal!important}
  .tn-hero-copy h1 span+span{font-size:clamp(30px,5vw,44px)!important}
  .tn-hero-copy p,.tn-region-copy p,.tn-about-copy p,.tn-subhero-copy p{font-size:14px!important;line-height:1.55!important;margin-top:20px!important;max-width:390px!important}
  .tn-hero-buttons,.tn-region-buttons,.tn-about-buttons,.tn-subhero-buttons{gap:10px!important;margin-top:22px!important}
  .tn-btn{height:42px!important;padding:0 17px!important;min-width:0!important}

  .hero-demo,.hero-demo-fixed{min-height:400px!important}
  .hero-demo .container,.hero-demo-fixed .hero-demo-inner{min-height:400px!important}
  .hero-demo-copy,.hero-demo-fixed .hero-demo-copy{width:52%!important;padding-top:20px!important}
  .hero-demo-title{font-size:clamp(36px,6vw,52px)!important}

  /* Product detail: giữ hai cột như desktop */
  .product-copy-grid{grid-template-columns:minmax(0,1.4fr) minmax(220px,.8fr)!important;gap:28px!important}
  .product-note{position:sticky!important;top:86px!important;padding:20px!important}
  .product-features{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
  .product-feature{padding:18px!important}
  .product-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .product-gallery{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
  .product-gallery-img{height:260px!important}
  .product-cta{display:flex!important;gap:24px!important}

  /* Banner chi tiết sản phẩm: giống desktop, không chạy rotator mobile */
  .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero{height:auto!important;min-height:0!important;aspect-ratio:1920/350!important}
  .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero>.green-tea-hero-bg{width:100%!important;height:100%!important;object-fit:fill!important;object-position:center!important}
  .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero .green-tea-hero-copy{display:block!important;left:16px!important;top:50%!important;width:23%!important;max-width:210px!important;transform:translateY(-50%)!important}
  
  
  
  

  /* v1.7.4: Tablet only - giãn 2 ảnh banner, giữ nguyên chiều cao */
  
  

  /* v1.7.2: Tablet - giãn 3 packshot để không đè/chồng lên nhau */
  
  
  

  /* Gallery chi tiết: tablet cũng căn đáy như desktop */
  .product-detail-top .tn-product-gallery-shell{height:auto}
  .product-detail-top .tn-product-gallery-main{aspect-ratio:auto!important}

  /* CTA / nút không ép full width trên tablet */
  body.page .brand-grid .actions .btn{width:auto!important;text-align:center}

  

  

  
  

  
  
  

  

  
  
  
}

/* ===== TABLET NHỎ: 600–767px ===== */
@media (min-width:600px) and (max-width:767px){
.product-detail-top.detail{
    grid-template-columns:1fr!important;
    gap:26px!important;
    align-items:start!important;
  }
  .product-detail-top .tn-product-gallery-shell{
    width:min(100%,560px)!important;
    height:auto!important;
    align-self:start!important;
    justify-self:center!important;
  }
  .product-detail-top .tn-product-gallery{
    display:block!important;
    height:auto!important;
    min-height:0!important;
  }
  .product-detail-top .tn-product-gallery-main{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    flex:none!important;
  }
  .product-detail-top .tn-product-gallery-thumbs{
    flex:none!important;
  }
  .product-detail-top .tn-product-info-panel{
    width:100%!important;
  }
}

/* ===== TABLET LỚN: 768–1024px ===== */
@media (min-width:768px) and (max-width:1024px){
.product-detail-top.detail{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
    gap:24px!important;
    align-items:start!important;
  }
  .product-detail-top .tn-product-gallery-shell{
    height:auto!important;
    align-self:start!important;
    min-height:0!important;
  }
  .product-detail-top .tn-product-gallery{
    display:block!important;
    height:auto!important;
    min-height:0!important;
  }
  .product-detail-top .tn-product-gallery-main{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    flex:none!important;
  }
  .product-detail-top .tn-product-gallery-thumbs{
    flex:none!important;
  }
  .product-detail-top .tn-product-info-panel{
    align-self:start!important;
    min-width:0!important;
  }
.product-detail-top .tn-product-info-panel{
    line-height:1.42!important;
  }

  .product-detail-top .tn-product-info-panel .badge{
    margin-bottom:7px!important;
    padding:5px 9px!important;
  }

  .product-detail-top .tn-product-info-panel > p{
    margin:7px 0 9px!important;
    line-height:1.42!important;
  }

  .product-detail-top .tn-product-price-box{
    margin:9px 0 10px!important;
    padding:10px 12px!important;
    gap:12px!important;
  }

  .product-detail-top .table{
    margin-top:9px!important;
  }

  .product-detail-top .table th,
  .product-detail-top .table td{
    padding:8px 10px!important;
    line-height:1.34!important;
    font-size:14px!important;
  }

  .product-detail-top .table th{
    width:32%!important;
  }

  .product-detail-top .actions{
    margin-top:13px!important;
    gap:9px!important;
  }

  .product-detail-top .actions .btn{
    padding:10px 15px!important;
  }
}

/* ===== DESKTOP: >=1025px ===== */
@media (min-width:1025px){
.tn-menu-toggle{display:none!important}
  .nav{display:flex!important}
}

/* ===== ACCESSIBILITY: REDUCED MOTION ===== */
@media (prefers-reduced-motion:reduce){
*{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
.product-universal-hero.is-animated-green-tea,
  .product-universal-hero.is-animated-green-tea > img,
  .product-universal-hero.is-animated-green-tea .tn-hero-mist,
  .product-universal-hero.is-animated-green-tea .tn-hero-sunlight{
    animation:none!important;
  }
.green-tea-product-hero .green-tea-product{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
.oolong-product-hero .oolong-product{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}

/* ===== GIỮ NGUYÊN HIỂN THỊ ĐÃ DUYỆT SAU KHI GOM MEDIA ===== */
@media (max-width:599px){
  .region-grid{grid-template-columns:repeat(2,1fr)}
  
  
}

@media (max-width:520px){
  .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero{
    height:235px!important;
    min-height:235px!important;
  }
}




/* ======================================================================
   v1.7.8 — TABLET 600–1024: banner packshot cao đều, tự chia cột
   Chỉ áp dụng tablet; desktop và mobile giữ nguyên.
   ====================================================================== */



/* ======================================================================
   v1.7.10 — DESKTOP >=1024: ẢNH BANNER CAO ĐỀU, KHÔNG SCALE RIÊNG
   File ảnh đã được chuẩn hóa trước khi tải lên; theme chỉ chia vị trí đều.
   Tablet và mobile không thay đổi.
   ====================================================================== */


/* Chỉ fade + trượt nhẹ; tuyệt đối không scale ảnh. */



/* ======================================================================
   v1.7.11 — DESKTOP >=1024: 3 ẢNH BANNER LỚN 1.6 LẦN
   Chỉ áp dụng khi banner đang chọn đúng 3 ảnh.
   Không scale(), không đổi tablet/mobile.
   68% x 1.6 = 108.8%.
   ====================================================================== */


/* ======================================================================
   v1.7.12 — DESKTOP >=1024: 3 ẢNH GẦN NHAU HƠN + DỊCH CẢ CỤM SANG PHẢI
   Giữ nguyên kích thước 1.6x của v1.7.11, không scale lại ảnh.
   Chỉ thay vị trí tương đối từng ảnh, tablet/mobile không thay đổi.
   ====================================================================== */


/* ======================================================================
   v1.7.13 — DESKTOP >=1024: KÉO 3 ẢNH GẦN NHAU THÊM
   Giữ nguyên kích thước 1.6x và không đổi tablet/mobile.
   ====================================================================== */


/* ======================================================================
   v1.7.14 — DESKTOP >=1024: GOM 3 ẢNH THÀNH MỘT CỤM CÂN ĐỐI
   Mục tiêu thị giác: khoảng cách giữa các cụm xấp xỉ 45px.
   Giữ nguyên kích thước 1.6x, không scale(), không đổi tablet/mobile.
   ====================================================================== */



/* ======================================================================
   v1.7.40 — KHÔNG CÓ ẢNH BANNER: VẪN GIỮ “TRÀ THIÊN NAM”
   Chính sách mới thay hẳn v1.7.16 / v1.7.17 cũ:
   - Mobile <=599: nền + .tn-mobile-hero-banner-title.
   - Tablet 600–1024: nền + .green-tea-hero-copy.
   - Không tự hiện ảnh sản phẩm nếu không có ảnh banner được chọn.
   ====================================================================== */
@media (max-width:1024px){
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero.tn-hero-no-product-images
  > *:not(.green-tea-hero-bg):not(.tn-hero-mist):not(.tn-hero-sunlight):not(.tn-mobile-hero-banner-title):not(.green-tea-hero-copy){
    display:none!important;
  }

  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero.tn-hero-no-product-images
  > .green-tea-hero-bg{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
}

@media (min-width:600px) and (max-width:1024px){
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero.tn-hero-no-product-images
  > .green-tea-hero-copy{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero.tn-hero-no-product-images
  > .tn-mobile-hero-banner-title{
    display:none!important;
  }
}

@media (max-width:599px){
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero.tn-hero-no-product-images
  > .tn-mobile-hero-banner-title{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero.tn-hero-no-product-images
  > .green-tea-hero-copy{
    display:none!important;
  }
}

/* ======================================================================
   v1.7.22 — MOBILE <=599: HERO TRÀ XANH DÙNG CHỮ “TRÀ THIÊN NAM”
   Đồng thời giữ cụm tiêu đề + gallery gọn hơn trên mobile.
   Tablet và desktop giữ nguyên.
   ====================================================================== */
.tn-mobile-product-title,
.tn-mobile-hero-banner-title{
  display:none;
}

@media (max-width:599px){
  body.single-tn_product .product-universal-hero + .section.white{
    padding-top:38px!important;
  }

  body.single-tn_product .product-detail-top{
    row-gap:8px!important;
  }

  body.single-tn_product .product-detail-top > .tn-mobile-product-title{
    display:block!important;
    width:100%!important;
    margin:0 0 -2px!important;
    padding:0!important;
    font-size:clamp(22px,6.2vw,28px)!important;
    line-height:1.1!important;
    font-weight:700!important;
    text-align:left!important;
    color:var(--green)!important;
  }

  body.single-tn_product .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero .tn-mobile-hero-banner-title{
    display:block!important;
    position:absolute!important;
    left:32px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:3!important;
    width:42%!important;
    max-width:175px!important;
    color:var(--green)!important;
    font-family:var(--tn-font-display)!important;
    font-size:clamp(20px,6.4vw,31px)!important;
    line-height:1.04!important;
    font-weight:700!important;
    text-align:left!important;
    pointer-events:none!important;
  }

  body.single-tn_product .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero .tn-mobile-hero-banner-title span{
    display:block!important;
    color:var(--green)!important;
  }

  body.single-tn_product .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero .tn-mobile-hero-banner-title span:last-child{
    margin-top:10px!important;
    color:var(--gold)!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
  }

  /* v1.7.24: Trà xanh mobile chỉ giữ chữ mới, bỏ mọi lớp chữ cũ trong banner. */
  body.single-tn_product .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero .tn-mobile-hero-banner-title + .green-tea-hero-copy,
  body.single-tn_product .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero > .visually-hidden,
  body.single-tn_product .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero > h1{
    display:none!important;
  }

  /* Tránh lặp lại cùng một tiêu đề ở khối thông tin phía dưới gallery. */
  body.single-tn_product .product-detail-top .tn-product-info-panel > h2{
    display:none!important;
  }
}

/* ======================================================================
   v1.7.25 — MOBILE <=599: BỎ DỨT ĐIỂM TIÊU ĐỀ CŨ “TRÀ XANH THIÊN NAM”
   Chỉ áp dụng hero Trà xanh. Giữ duy nhất .tn-mobile-hero-banner-title.
   ====================================================================== */
@media (max-width:599px){
  body.single-tn_product .tn-hero-tra-xanh .green-tea-hero-copy,
  body.single-tn_product .tn-hero-tra-xanh [class*="hero-title"]:not(.tn-mobile-hero-banner-title),
  body.single-tn_product .tn-hero-tra-xanh [class*="product-title"]:not(.tn-mobile-hero-banner-title),
  body.single-tn_product .tn-hero-tra-xanh [class*="mobile-title"]:not(.tn-mobile-hero-banner-title),
  body.single-tn_product .tn-hero-tra-xanh [class*="hero-name"],
  body.single-tn_product .tn-hero-tra-xanh > h1:not(.visually-hidden),
  body.single-tn_product .tn-hero-tra-xanh > h2,
  body.single-tn_product .tn-hero-tra-xanh > h3{
    display:none!important;
  }

  body.single-tn_product .tn-hero-tra-xanh .tn-mobile-hero-banner-title{
    display:block!important;
  }
}



/* ======================================================================
   v1.7.27 — MOBILE <=599: KHÔI PHỤC ẢNH SẢN PHẨM TRÊN BANNER
   Quy tắc cuối cùng: ảnh đã chọn luôn được render; ảnh active hiện ngay.
   Nhiều ảnh tiếp tục luân phiên bằng rotator JS hiện có.
   Tablet và desktop không thay đổi.
   ====================================================================== */


/* ======================================================================
   v1.7.31 — GALLERY CHI TIẾT + PACKSHOT BANNER THEO % CHIỀU CAO
   - Khôi phục gallery chi tiết 1:1 để không bị collapse.
   - Ảnh banner dùng chiều cao tương đối với banner, không dùng px / 108.8%.
   ====================================================================== */

/* Gallery: quy tắc cuối cùng áp dụng mọi kích thước màn hình. */
body.single-tn_product .product-detail-top .tn-product-gallery-shell{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
}
body.single-tn_product .product-detail-top .tn-product-gallery{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
}
body.single-tn_product .product-detail-top .tn-product-gallery-main{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1 / 1!important;
  flex:none!important;
  overflow:hidden!important;
}
body.single-tn_product .product-detail-top .tn-product-gallery-zoom{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
}
body.single-tn_product .product-detail-top .tn-product-gallery-main-img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
}
body.single-tn_product .product-detail-top .tn-product-gallery-shell > img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:1 / 1!important;
  object-fit:contain!important;
  object-position:center center!important;
}

/* Desktop: packshot = 82% chiều cao banner. */

/* Tablet: packshot = 76% chiều cao banner. */

/* Mobile: packshot = 74% chiều cao banner; không scale làm thay đổi kích thước. */


/* ======================================================================
   v1.7.32 — FIX CẮT ẢNH BANNER DESKTOP/TABLET
   Ảnh packshot vẫn theo % chiều cao banner nhưng được neo xuống đáy banner,
   đồng thời object-position ưu tiên đáy để tránh cắt phần trên.
   ====================================================================== */

/* ======================================================================
   v1.7.35 — CHỈ TRÀ ĐEN / DESKTOP: FIX PACKSHOT KHÔNG ẢNH HƯỞNG SẢN PHẨM KHÁC
   Các trang khác quay về bố cục v1.7.33. Tablet + mobile không thay đổi.
   ====================================================================== */


/* ======================================================================
   v1.7.36 — BANNER SẢN PHẨM 1000x1000: TÁCH 3 TRƯỜNG HỢP ĐỘC LẬP
   - Tất cả ảnh banner sản phẩm đã cố định 1000x1000px.
   - Banner chỉ hiển thị tối đa 3 ảnh.
   - Desktop / Tablet / Mobile dùng 3 bộ quy tắc riêng biệt.
   - Chỉnh một trường hợp sẽ không ảnh hưởng hai trường hợp còn lại.
   ====================================================================== */

/* Reset cuối cùng cho vùng banner sản phẩm có ảnh được chọn. */


/* =========================
   1) DESKTOP >=1025px
   ========================= */

/* =========================
   2) TABLET 600–1024px
   ========================= */

/* =========================
   3) MOBILE <=599px
   - Chỉ hiện 1 ảnh active tại một thời điểm.
   - Nếu có 2 hoặc 3 ảnh thì JS hiện có sẽ luân phiên.
   ========================= */


/* ======================================================================
   v1.7.37 — ĐỒNG NHẤT CHỮ BANNER TẤT CẢ TRANG SẢN PHẨM = “TRÀ THIÊN NAM”
   - Desktop/Tablet dùng khối chữ banner chung (green-tea-hero-copy).
   - Mobile dùng .tn-mobile-hero-banner-title.
   - Chặn các lớp chữ cũ theo tên sản phẩm riêng.
   ====================================================================== */
@media (min-width:600px){
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero .green-tea-hero-copy{
    display:block!important;
  }

  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero [class*="hero-title"]:not(.green-tea-hero-copy),
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero [class*="product-title"],
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero [class*="mobile-title"],
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero [class*="hero-name"],
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero > h1:not(.visually-hidden),
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero > h2,
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero > h3{
    display:none!important;
  }
}

@media (max-width:599px){
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero .tn-mobile-hero-banner-title{
    display:block!important;
  }

  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero .green-tea-hero-copy,
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero [class*="hero-title"]:not(.tn-mobile-hero-banner-title),
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero [class*="product-title"]:not(.tn-mobile-hero-banner-title),
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero [class*="mobile-title"]:not(.tn-mobile-hero-banner-title),
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero [class*="hero-name"],
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero > h1:not(.visually-hidden),
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero > h2,
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero > h3{
    display:none!important;
  }
}


/* ======================================================================
   v1.7.39 — KHÔNG CÓ ẢNH BANNER VẪN HIỆN CHỮ “TRÀ THIÊN NAM”
   - Desktop + Tablet: hiện lại green-tea-hero-copy.
   - Mobile: hiện lại .tn-mobile-hero-banner-title.
   - Chỉ khôi phục chữ, không bật lại ảnh banner sản phẩm.
   ====================================================================== */
@media (min-width:600px){
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero.tn-hero-no-product-images .green-tea-hero-copy{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }
}

@media (max-width:599px){
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero.tn-hero-no-product-images > .tn-mobile-hero-banner-title{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero.tn-hero-no-product-images > .green-tea-hero-copy{
    display:none!important;
  }
}


/* ======================================================================
   v1.7.46 — MOBILE <=599: CÔ LẬP NỘI DUNG BANNER SẢN PHẨM
   Chỉ giữ nền + chữ Trà Thiên Nam + Banner V2. Không tác động tablet/desktop.
   ====================================================================== */
@media (max-width:599px){
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero > *:not(.green-tea-hero-bg):not(.tn-mobile-hero-banner-title):not(.tn-banner-v2):not(.green-tea-hero-copy):not(.visually-hidden){
    display:none!important;
  }

  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero > .green-tea-hero-copy,
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero > .visually-hidden{
    display:none!important;
  }

  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero > .tn-mobile-hero-banner-title{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:20!important;
  }

  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero > .tn-banner-v2{
    display:block!important;
    visibility:visible!important;
  }
}