/*  Thiên Nam Responsive Contract — v1.8.15 | mobile <600 | tablet 600–1024 | desktop >=1025  */
html,body{max-width:100%;overflow-x:clip}
body{min-width:0}
img,svg,video,canvas,iframe{max-width:100%}
.container,.navbar,.grid-2,.grid-3,.brand-grid,.news-grid,.detail,.footer-grid,
.contact-layout,.region-intro,.region-grid,.region-values,.region-journey,
.product-copy-grid,.product-features,.product-steps,.product-gallery,
.product-detail-top,.tn-product-info-panel{min-width:0}
.grid-2>*,.grid-3>*,.brand-grid>*,.news-grid>*,.detail>*,.footer-grid>*,
.contact-layout>*,.region-intro>*,.region-grid>*,.product-detail-top>*{min-width:0}
h1,h2,h3,h4,h5,h6,p,a,button,td,th{overflow-wrap:break-word}
.table{table-layout:fixed}
@media (pointer:coarse){
  .btn,.tn-btn,.tn-menu-toggle,.tn-product-gallery-thumb{min-height:44px}
}
@media (min-width:1025px){
  .container{width:min(1180px,calc(100% - 40px))!important}
  .navbar{min-height:78px!important;gap:clamp(18px,2vw,28px)!important}
  .logo img{height:clamp(50px,4vw,58px)!important}
  .nav .tn-menu{gap:clamp(14px,1.8vw,28px)!important}
  .nav .tn-menu a{font-size:clamp(11px,.9vw,13px)!important;white-space:nowrap!important}
  .section{padding:clamp(64px,5vw,76px) 0!important}

  .product-detail-top.detail{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important;
    gap:clamp(32px,3.2vw,48px)!important;
    align-items:start!important;
  }
  body.single-tn_product .product-detail-top .tn-product-gallery-main{
    aspect-ratio:1/1!important;
  }
  body.single-tn_product .product-detail-top .tn-product-gallery-main-img{
    object-fit:contain!important;
    object-position:center!important;
  }
  .tn-product-info-panel>h2{font-size:clamp(34px,3vw,48px)!important}
  body.tn-page-vung-nguyen-lieu .process-grid,
  body.tn-page-vung-nguyen-lieu .region-journey{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  body.tn-page-tin-tuc .news-featured-image > a.image-detail-link,
  body.tn-page-tin-tuc .news-featured-image > a.image-detail-link > img{
    height:400px!important;
    min-height:400px!important;
  }
  .footer{
    padding:40px 0 16px!important;
  }

  .footer-grid{
    grid-template-columns:minmax(260px,1.25fr) minmax(140px,.82fr) minmax(150px,.9fr) minmax(250px,1.18fr)!important;
    gap:clamp(32px,3vw,48px)!important;
    align-items:start!important;
  }

  .footer-logo{
    width:164px!important;
    max-width:100%!important;
    height:auto!important;
    margin:0 0 9px!important;
    padding:6px!important;
    border-radius:10px!important;
    background:var(--cream2)!important;
  }

  .footer-grid > div:first-child > p{
    max-width:285px!important;
    margin:0!important;
    color:#eef3ef!important;
    font-size:13px!important;
    line-height:1.62!important;
  }

  .footer h3{
    margin:0 0 7px!important;
    color:#f0c96a!important;
    font-size:14px!important;
    line-height:1.3!important;
    letter-spacing:.075em!important;
  }

  .footer ul{
    margin:0!important;
    padding:0!important;
  }

  .footer li{
    padding:3px 0!important;
    font-size:14px!important;
    line-height:1.55!important;
  }

  .footer a{
    transition:color .2s ease,opacity .2s ease!important;
  }

  .footer-grid > div:last-child li:first-child{
    line-height:inherit!important;
    margin-bottom:0!important;
  }

  .footer-bottom{
    margin-top:24px!important;
    padding-top:14px!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
    color:rgba(255,255,255,.82)!important;
    font-size:12px!important;
    line-height:1.45!important;
  }body.tn-page-gioi-thieu .process-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
body.tn-page-vung-nguyen-lieu .steps,body.tn-page-vung-nguyen-lieu .process-grid,body.tn-page-vung-nguyen-lieu .region-journey{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}}
@media (min-width:600px) and (max-width:1024px){
  body.tn-page-gioi-thieu .process-grid{
    display:grid!important;
  }

  body.tn-page-gioi-thieu .grid-3{
    display:grid!important;
    gap:12px!important;
  }

  body.tn-page-gioi-thieu .process-step,
  body.tn-page-gioi-thieu .grid-3 .feature{
    min-width:0!important;
    width:auto!important;
    padding:16px 14px 14px!important;
    border-radius:16px!important;
  }

  body.tn-page-gioi-thieu .process-step b,
  body.tn-page-gioi-thieu .grid-3 .feature-icon{
    margin-bottom:10px!important;
    font-size:var(--tn-card-number-size)!important;
  }

  body.tn-page-gioi-thieu .process-step h3,
  body.tn-page-gioi-thieu .grid-3 .feature h3{
    margin-bottom:8px!important;
    font-size:var(--tn-card-title-size)!important;
    line-height:var(--tn-card-title-line)!important;
  }

  body.tn-page-gioi-thieu .process-step p,
  body.tn-page-gioi-thieu .grid-3 .feature p{
    font-size:var(--tn-card-copy-size)!important;
    line-height:var(--tn-card-copy-line)!important;
  }
  body.tn-page-tin-tuc .news-featured-image > a.image-detail-link,
  body.tn-page-tin-tuc .news-featured-image > a.image-detail-link > img{
    height:clamp(250px,36vw,340px)!important;
    min-height:0!important;
  }
  /* Container / spacing */
  .container{width:min(1180px,calc(100% - 28px))!important}
  .section{padding:clamp(50px,6vw,64px) 0!important}
  .section-head{margin-bottom:30px!important}

  /* Header giống desktop: menu ngang */
  .navbar{min-height:72px!important;gap:8px!important}
  .logo{flex:0 0 auto!important;padding:4px 6px!important}
  .logo img{height:clamp(44px,5.5vw,52px)!important;width:auto!important}
  .tn-menu-toggle{display:none!important}
  .nav{display:flex!important;position:static!important;flex:1 1 auto!important;min-width:0!important;margin-left:6px!important;margin-right:0!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important;justify-content:flex-end!important}
  .nav .tn-menu{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:nowrap!important;gap:clamp(8px,1.25vw,13px)!important;width:auto!important}
  .nav .tn-menu li{width:auto!important;flex:0 0 auto!important}
  .nav .tn-menu a{display:block!important;width:auto!important;padding:8px 0!important;font-size:clamp(9.5px,1.08vw,11.5px)!important;letter-spacing:0!important;white-space:nowrap!important}

  /* Grid/layout chung: cùng số cột desktop */
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important}
  .brand-grid{grid-template-columns:1.05fr .95fr!important;gap:26px!important;align-items:center!important}
  .news-grid{grid-template-columns:1.15fr .85fr!important;gap:22px!important;align-items:center!important}
  .detail{grid-template-columns:1.05fr .95fr!important;gap:24px!important;align-items:start!important}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
  .contact-layout{grid-template-columns:.85fr 1.15fr!important;gap:20px!important}
  .region-intro{grid-template-columns:1.05fr .95fr!important;gap:24px!important;align-items:end!important}
  .region-values{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;margin-top:22px!important}
  .region-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}
  .region-journey{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
  .news-featured{grid-template-columns:1.08fr .92fr!important;gap:22px!important;align-items:center!important}
  .news-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}

  /* Hero các tab: cùng bố cục desktop */
  .tn-hero-v2,.tn-region-hero,.tn-about-hero,.tn-subhero{height:435px!important}
  .tn-hero-photo,.tn-region-photo,.tn-about-photo,.tn-subhero-photo{inset:0 0 0 31%!important}
  .tn-hero-gradient,.tn-region-gradient,.tn-about-gradient,.tn-subhero-gradient{
    background:linear-gradient(90deg,#fff 0%,#fff 24%,rgba(255,255,255,.97) 32%,rgba(255,255,255,.82) 40%,rgba(255,255,255,.53) 48%,rgba(255,255,255,.20) 56%,rgba(255,255,255,0) 67%)!important
  }
  .tn-hero-content,.tn-region-content,.tn-about-content,.tn-subhero-content{height:435px!important}
  .tn-hero-copy,.tn-region-copy,.tn-about-copy,.tn-subhero-copy{width:48%!important;padding-top:25px!important}
  .tn-hero-copy h1 span,.tn-region-copy h1 span,.tn-about-copy h1 span,.tn-subhero-copy h1 span{
    font-size:clamp(34px,5.1vw,48px)!important;white-space:normal!important
  }
  .tn-hero-copy p,.tn-region-copy p,.tn-about-copy p,.tn-subhero-copy p{font-size:14px!important;line-height:1.6!important;margin-top:24px!important;max-width:430px!important}
  .tn-hero-buttons,.tn-region-buttons,.tn-about-buttons,.tn-subhero-buttons{display:flex!important;gap:12px!important;margin-top:28px!important;flex-wrap:nowrap!important}

  /* Trang chủ hero giữ bố cục desktop */
  .hero-demo,.hero-demo-fixed{min-height:445px!important}
  .hero-demo .container,.hero-demo-fixed .hero-demo-inner{min-height:445px!important}
  .hero-demo-copy,.hero-demo-fixed .hero-demo-copy{width:min(600px,52%)!important;padding:28px 0 34px!important}
  .hero-demo-title{font-size:clamp(38px,5.8vw,56px)!important}

  /* Giới thiệu: desktop structure */
  body.tn-page-gioi-thieu .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.tn-page-gioi-thieu .process-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}

  /* Vùng nguyên liệu: desktop structure, ảnh Từ nương trà trở lại cột phải */
  body.tn-page-vung-nguyen-lieu .region-intro{gap:24px!important}
  body.tn-page-vung-nguyen-lieu .region-intro > div{order:0!important}
  body.tn-page-vung-nguyen-lieu .region-value{padding:16px!important}
  body.tn-page-vung-nguyen-lieu .steps,
  body.tn-page-vung-nguyen-lieu .process-grid,
  body.tn-page-vung-nguyen-lieu .region-journey{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}

  /* Tin tức: desktop structure */
  body.tn-page-tin-tuc .news-featured{grid-template-columns:1.08fr .92fr!important}
  body.tn-page-tin-tuc .news-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .news-featured-image img,.news-featured-image>a.image-detail-link,.news-featured-image>a.image-detail-link>img{height:clamp(300px,38vw,390px)!important}

  /* Sản phẩm / chi tiết: desktop structure */
  .product-detail-top.detail{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important;gap:24px!important;align-items:start!important}
  .product-detail-top .tn-product-gallery-shell{width:100%!important;justify-self:stretch!important}
  body.single-tn_product .product-detail-top .tn-product-gallery-main{aspect-ratio:1/1!important}
  body.single-tn_product .product-detail-top .tn-product-gallery-main-img{object-fit:contain!important;object-position:center!important}
  .tn-product-info-panel{width:auto!important;padding-top:0!important}
  .product-copy-grid{grid-template-columns:minmax(0,1.55fr) minmax(220px,.75fr)!important;gap:26px!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-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .product-gallery{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
  .product-gallery-img{height:clamp(210px,27vw,280px)!important}
  .product-cta{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:20px!important}

  /* Card sản phẩm tablet: component ổn định, mọi hành động neo cùng đáy card */
  
  
  
  
  

  /* v1.8.9 — Tablet product-card footer: 2 hàng thật, không transform/chồng chữ. */
  
  
  
  
  
  
  
  
  
  

  /* v1.8.12 — Card không có giá: khoảng thở 15px trước đường kẻ. */
  
  
  
  
  


  /* v1.8.13 — Hover thật trên tablet khi dùng chuột + active khi chạm. */
  

  

  


  /* Footer/contact giữ desktop structure nhưng co padding */
  .contact-info-panel,.contact-form-card{padding:22px!important}
  .google-map-frame iframe{min-height:420px!important}
  .footer-grid h3{font-size:16px!important}
  .footer-grid p,.footer-grid a,.footer-grid li{font-size:12px!important}

  /* Banner V2 tablet dùng đúng layout/kích thước desktop */
  body.single-tn_product .tn-banner-v2{
    top:0!important;right:2.2%!important;bottom:0!important;left:auto!important;
    width:54%!important;display:flex!important;align-items:flex-end!important;
    justify-content:flex-end!important;gap:0!important;padding:6px 0 0!important;overflow:visible!important
  }
  body.single-tn_product .tn-banner-v2-img{height:100%!important}
  body.single-tn_product .tn-banner-v2-count-1 .tn-banner-v2-slot{height:95%!important}
  body.single-tn_product .tn-banner-v2-count-2 .tn-banner-v2-slot{height:91%!important}
  body.single-tn_product .tn-banner-v2-count-3 .tn-banner-v2-slot{height:85%!important}
  body.single-tn_product .tn-banner-v2-count-2 .tn-banner-v2-slot + .tn-banner-v2-slot{margin-left:clamp(-34px,-3.2vw,-20px)!important}
  body.single-tn_product .tn-banner-v2-count-3 .tn-banner-v2-slot + .tn-banner-v2-slot{margin-left:clamp(-42px,-4vw,-26px)!important}
  body.single-tn_product .tn-banner-v2-slot{animation:tnBannerV2DesktopLoop 11.8s ease-in-out infinite both!important}
  body.single-tn_product .tn-banner-v2-slot:nth-child(1){animation-delay:0s!important}
  body.single-tn_product .tn-banner-v2-slot:nth-child(2){animation-delay:1.35s!important}
  body.single-tn_product .tn-banner-v2-slot:nth-child(3){animation-delay:2.7s!important}

  /* Banner chi tiết sản phẩm giữ tỷ lệ desktop */
  .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}
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero>.tn-mobile-hero-banner-title{display:none!important}
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero>.green-tea-hero-copy{display:block!important;visibility:visible!important;opacity:1!important}
  .footer{
    padding:32px 0 16px!important;
  }

  .footer .container{
    width:min(1180px,calc(100% - 32px))!important;
  }

  .footer-grid{
    grid-template-columns:minmax(155px,1.05fr) minmax(92px,.70fr) minmax(104px,.80fr) minmax(190px,1.30fr)!important;
    gap:clamp(14px,2.2vw,24px)!important;
    align-items:start!important;
  }

  .footer-grid > div{
    min-width:0!important;
  }

  .footer-logo{
    width:145px!important;
    max-width:100%!important;
    height:auto!important;
    margin:0 0 8px!important;
    padding:6px!important;
    border-radius:9px!important;
    background:var(--cream2)!important;
  }

  .footer-grid > div:first-child > p{
    max-width:205px!important;
    margin:0!important;
    font-size:11.5px!important;
    line-height:1.55!important;
    color:#eef3ef!important;
  }

  .footer h3{
    margin:0 0 6px!important;
    color:#f0c96a!important;
    font-size:12.5px!important;
    line-height:1.25!important;
    letter-spacing:.065em!important;
  }

  .footer ul{
    margin:0!important;
    padding:0!important;
  }

  .footer li,
  .footer a{
    font-size:12px!important;
    line-height:1.52!important;
  }

  .footer li{
    padding:2px 0!important;
  }

  .footer-grid > div:last-child li:first-child{
    line-height:inherit!important;
    margin-bottom:0!important;
  }

  .footer-bottom{
    margin-top:20px!important;
    padding-top:12px!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    color:rgba(255,255,255,.80)!important;
    font-size:11.5px!important;
    line-height:1.4!important;
  }

  /* Nếu plugin giỏ hàng dùng một trong các selector chuẩn Thiên Nam,
     nâng nút nổi lên để không đè sát hàng copyright. */
  #tn-cart-fab,
  .tn-cart-fab,
  #tn-cart-floating,
  .tn-cart-floating,
  #tn-cart-floating-button,
  .tn-cart-floating-button,
  [data-tn-cart-toggle],
  [data-tn-cart-open]{
    bottom:34px!important;
  }
  .header .navbar{
    min-height:72px!important;
    gap:8px!important;
  }

  .header .logo{
    flex:0 0 auto!important;
  }

  .header .logo img{
    height:clamp(44px,5.5vw,52px)!important;
    width:auto!important;
  }

  .header .nav{
    flex:1 1 auto!important;
    margin-left:6px!important;
    margin-right:0!important;
    min-width:0!important;
    justify-content:flex-end!important;
  }

  .header .nav .tn-menu{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    gap:clamp(8px,1.25vw,13px)!important;
    width:auto!important;
  }

  .header .nav .tn-menu li{
    flex:0 0 auto!important;
    min-width:0!important;
  }

  .header .nav .tn-menu a{
    display:block!important;
    width:auto!important;
    padding:8px 0!important;
    font-size:clamp(9.5px,1.08vw,11.5px)!important;
    line-height:1.2!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
  }
  body.tn-page-gioi-thieu .brand-grid.tinh-hoa-align-bottom{
    grid-template-columns:minmax(0,1fr) minmax(300px,.96fr)!important;
    gap:28px!important;
    align-items:stretch!important;
  }
  body.tn-page-gioi-thieu .brand-grid.tinh-hoa-align-bottom > div:first-child{
    align-self:stretch!important;
  }
  body.tn-page-gioi-thieu .brand-grid.tinh-hoa-align-bottom > a.image-detail-link{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:stretch!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin-top:44px!important;
    margin-bottom:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  body.tn-page-gioi-thieu .brand-grid.tinh-hoa-align-bottom > a.image-detail-link > img.about-half-height{
    display:block!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:100%!important;
    aspect-ratio:auto!important;
  }
  body.tn-page-gioi-thieu .brand-grid.cert-award-align-bottom{
    grid-template-columns:minmax(300px,.96fr) minmax(0,1fr)!important;
    gap:28px!important;
  }

  body.tn-page-gioi-thieu .brand-grid.cert-award-align-bottom > img.cert-award-image{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    margin-top:40px!important;
    margin-bottom:0!important;
  }
  body.tn-page-gioi-thieu .brand-grid.tinh-hoa-align-bottom > a.image-detail-link{
    border:1px solid rgba(201,162,77,.30)!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.18)!important;
    box-shadow:none!important;
    transform:translateY(-8px)!important;
  }
  body.tn-page-gioi-thieu .brand-grid.tinh-hoa-align-bottom > a.image-detail-link > img.about-half-height{
    width:100%!important;
    height:100%!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
    border-radius:11px!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:scale(1.05)!important;
  }
  body.tn-page-gioi-thieu .brand-grid.tinh-hoa-align-bottom > a.image-detail-link{
    padding:5px 10px!important;
    border-color:rgba(201,162,77,.24)!important;
  }

  body.tn-page-gioi-thieu .brand-grid.cert-award-align-bottom > img.cert-award-image{
    border-color:rgba(201,162,77,.24)!important;
  }
  body.home .section > .container > a.image-detail-link,
  body.home .brand-grid > a.image-detail-link{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  body.home .section > .container > a.image-detail-link > img.visual,
  body.home .brand-grid > a.image-detail-link > img.visual{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-width:100%!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center center!important;
  }

  body.home .brand-grid > a.image-detail-link{
    align-self:start!important;
  }
  body.home .news-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important;
    grid-template-rows:auto auto auto auto!important;
    column-gap:22px!important;
    row-gap:8px!important;
    align-items:start!important;
  }

  /* Flatten cột nội dung để ảnh có thể dùng đúng hàng của .news-list. */
  body.home .news-grid > div{
    display:contents!important;
  }

  body.home .news-grid > div > .kicker{
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
  }
  body.home .news-grid > div > h2{
    grid-column:2!important;
    grid-row:2!important;
    margin:0 0 4px!important;
  }
  body.home .news-grid > div > .news-list{
    grid-column:2!important;
    grid-row:3!important;
    align-self:stretch!important;
    display:grid!important;
    gap:16px!important;
  }
  body.home .news-grid > div > .actions{
    grid-column:2!important;
    grid-row:4!important;
    margin-top:10px!important;
  }

  body.home .news-grid > a.image-detail-link{
    grid-column:1!important;
    grid-row:3!important;
    position:relative!important;
    align-self:stretch!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:1px solid var(--tn-frame-border)!important;
    border-radius:18px!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }

  body.home .news-grid > a.image-detail-link > img.home-news-image{
    position:absolute!important;
    inset:5px!important;
    width:calc(100% - 10px)!important;
    height:calc(100% - 10px)!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center center!important;
    border:0!important;
    border-radius:12px!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
  }
  body.tn-page-gioi-thieu .brand-grid.cert-award-align-bottom{
    align-items:stretch!important;
  }

  body.tn-page-gioi-thieu .brand-grid.cert-award-align-bottom > div{
    align-self:stretch!important;
  }

  body.tn-page-gioi-thieu .brand-grid.cert-award-align-bottom > img.cert-award-image{
    align-self:start!important;
    width:100%!important;
    height:calc(100% - 22px)!important;
    min-height:0!important;
    max-height:none!important;
    margin:22px 0 0!important;
    padding:5px 10px!important;
    box-sizing:border-box!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center center!important;
    border:1px solid rgba(201,162,77,.22)!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.08)!important;
    box-shadow:none!important;
    transform:none!important;
  }
  body.home .section.soft > .container.brand-grid > div:first-child > h2 + p{
    margin-top:21px!important;
  }

  body.home .section.soft > .container.brand-grid > div:first-child > .actions{
    margin-top:19px!important;
  }

  body.home .section.soft > .container.brand-grid > .brand-panel{
    padding:28px 26px!important;
  }

  body.home .section.soft > .container.brand-grid > .brand-panel .brand-item{
    padding:16px 0!important;
    border-bottom-color:rgba(255,255,255,.136)!important;
  }

  body.home .section.soft > .container.brand-grid > .brand-panel .brand-item:last-child{
    border-bottom:0!important;
  }
  body.tn-page-vung-nguyen-lieu .region-intro{
    display:grid!important;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;
    grid-template-rows:auto auto auto auto auto!important;
    column-gap:28px!important;
    row-gap:0!important;
    align-items:stretch!important;
  }

  body.tn-page-vung-nguyen-lieu .region-intro > div{
    display:contents!important;
  }

  /* Dòng nhỏ đứng riêng phía trên cả hai cột. */
  body.tn-page-vung-nguyen-lieu .region-intro > div > .kicker{
    grid-column:1 / -1!important;
    grid-row:1!important;
    margin:0 0 3px!important;
  }

  /* Cột chữ chính. */
  body.tn-page-vung-nguyen-lieu .region-intro > div > h2{
    grid-column:1!important;
    grid-row:2!important;
    margin:0 0 16px!important;
  }
  body.tn-page-vung-nguyen-lieu .region-intro > div > p:nth-of-type(1){
    grid-column:1!important;
    grid-row:3!important;
    margin-top:0!important;
  }
  body.tn-page-vung-nguyen-lieu .region-intro > div > p:nth-of-type(2){
    grid-column:1!important;
    grid-row:4!important;
    margin-bottom:0!important;
  }

  /* Khung ảnh: từ đầu h2 tới đáy p thứ hai. */
  body.tn-page-vung-nguyen-lieu .region-intro > a.image-detail-link{
    grid-column:2!important;
    grid-row:2 / 5!important;
    order:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:stretch!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    box-sizing:border-box!important;
    border:1px solid rgba(201,162,77,.22)!important;
    border-radius:18px!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }

  body.tn-page-vung-nguyen-lieu .region-intro .tu-nuong-tra-70-height{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center center!important;
    border:0!important;
    border-radius:12px!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  /* Ba giá trị giữ một hàng phía dưới toàn khối. */
  body.tn-page-vung-nguyen-lieu .region-values{
    grid-column:1 / -1!important;
    grid-row:5!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:12px!important;
    width:100%!important;
    margin:22px 0 0!important;
  }
  body.tn-page-vung-nguyen-lieu .region-intro > a.image-detail-link{
    padding:6px!important;
    border-color:var(--tn-frame-border)!important;
  }
  body.tn-page-vung-nguyen-lieu .region-intro > a.image-detail-link > img.tu-nuong-tra-70-height{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
  body.tn-page-vung-nguyen-lieu .region-values .region-value span{
    text-align:left!important;
    text-justify:auto!important;
  }}
@media (max-width:599px){
  body{font-size:15px;line-height:1.55}
  .container{width:calc(100% - 24px)!important}
  .section{padding:42px 0!important}
  .section-head{margin-bottom:26px!important}

  h1{font-size:clamp(34px,10vw,46px)!important;line-height:1.08!important}
  h2{font-size:clamp(27px,8vw,36px)!important;line-height:1.12!important}
  h3{font-size:clamp(20px,6vw,25px)!important}
  p{max-width:100%}

  /* Header / menu */
  .navbar{min-height:70px!important;gap:10px!important}
  .logo{padding:4px 7px!important;border-radius:7px!important}
  .logo img{height:50px!important;width:auto!important}
  .tn-menu-toggle{display:flex!important;margin-left:auto!important;flex:0 0 44px!important}
  .nav{
    display:none!important;
    position:absolute!important;
    left:0!important;right:0!important;top:calc(100% + 8px)!important;
    z-index:100!important;
    background:var(--green)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    border-radius:12px!important;
    box-shadow:0 18px 36px rgba(0,0,0,.22)!important;
    padding:6px!important;
    overflow:hidden!important;
  }
  .nav.is-open{display:block!important}
  .nav .tn-menu{display:flex!important;flex-direction:column!important;gap:0!important;width:100%!important}
  .nav .tn-menu li{width:100%!important}
  .nav .tn-menu a{display:block!important;width:100%!important;padding:12px 14px!important;font-size:13px!important;white-space:normal!important}

  /* Generic layouts */
  .grid-3,.grid-2,.brand-grid,.news-grid,.detail,.footer-grid,.steps,
  .contact-layout,.region-intro,.region-grid,.region-values,.region-journey,
  .product-copy-grid,.product-features,.product-steps,.product-gallery,
  .news-featured,.news-cards{grid-template-columns:1fr!important;gap:18px!important}
  /* v1.11.53 — generic card media only. Product Card System owns its own 1:1 media. */
  .card:not(.tn-main-product-card) .media{height:clamp(220px,66vw,300px)!important}
  .card .content{padding:18px!important}
  .cta{flex-direction:column!important;align-items:flex-start!important;padding:24px!important}
  .actions{gap:10px!important}
  .actions>.btn,.actions>.tn-btn{width:100%;text-align:center}

  /* Main heroes */
  .page-hero{padding:44px 0!important}
  .tn-hero-v2,.tn-region-hero,.tn-about-hero,.tn-subhero{
    height:clamp(500px,145vw,590px)!important;
  }
  .tn-hero-content,.tn-region-content,.tn-about-content,.tn-subhero-content{height:100%!important}

  /* Product banner keeps its V2 image engine; only text/layout stability is normalized. */
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero{
    height:235px!important;
    min-height:235px!important;
    overflow:hidden!important;
  }
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero>.green-tea-hero-bg{
    width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;
  }
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero>.tn-mobile-hero-banner-title{
    left:14px!important;
    top:50%!important;
    width:44%!important;
    max-width:180px!important;
    font-size:clamp(21px,6.6vw,30px)!important;
    line-height:1.02!important;
  }
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero>.tn-mobile-hero-banner-title span:last-child{
    margin-top:9px!important;
    white-space:nowrap!important;
  }

  /* Product detail */
  body.single-tn_product .product-universal-hero + .section.white{padding-top:32px!important}
  .product-detail-top.detail{grid-template-columns:1fr!important;gap:10px!important}
  .product-detail-top>.tn-mobile-product-title{
    margin:0 0 2px!important;
    padding:0!important;
    font-size:clamp(22px,6.4vw,28px)!important;
    line-height:1.12!important;
    text-align:left!important;
  }
  .product-detail-top .tn-product-gallery-shell{width:100%!important;padding:10px!important;border-radius:16px!important}
  .product-detail-top .tn-product-gallery-main{aspect-ratio:1/1!important;border-radius:12px!important}
  .product-detail-top .tn-product-gallery-main-img{object-fit:contain!important}
  .product-detail-top .tn-product-gallery-thumbs{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    overflow-x:auto!important;
    padding:10px 2px 2px!important;
    scrollbar-width:thin;
  }
  .product-detail-top .tn-product-gallery-thumb{flex:0 0 64px!important;width:64px!important;height:64px!important}
  .tn-product-info-panel{width:100%!important;padding-top:10px!important}
  .tn-product-info-panel>.badge{margin:0 0 12px!important}
  .tn-product-info-panel>p{margin:0 0 16px!important}
  .tn-product-price-box{padding:12px 14px!important;border-radius:12px!important}
  .tn-product-price-value{font-size:clamp(22px,7vw,30px)!important}

  /* Product specification table becomes readable cards instead of squeezed columns. */
  .product-detail-top .table{display:block!important;width:100%!important;margin-top:14px!important;background:transparent!important}
  .product-detail-top .table tbody{display:block!important;width:100%!important}
  .product-detail-top .table tr{display:block!important;margin-bottom:8px!important;border:1px solid #ece4d6!important;border-radius:10px!important;overflow:hidden!important;background:#fff!important}
  .product-detail-top .table th,.product-detail-top .table td{display:block!important;width:100%!important;padding:9px 11px!important;border:0!important}
  .product-detail-top .table th{background:#fbf5e8!important;font-size:13px!important}
  .product-detail-top .table td{font-size:14px!important}

  .product-detail-top .actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  .product-detail-top .actions .btn{width:100%!important;text-align:center!important}

  /* Contact/news/region/footer */
  .contact-info-panel,.contact-form-card{padding:20px!important}
  .google-map-frame iframe{min-height:300px!important;height:300px!important}
  .news-featured-image img{height:auto!important;max-height:none!important}
  .region-card img{height:clamp(220px,62vw,280px)!important}
  body.tn-page-gioi-thieu .process-grid,
  body.tn-page-vung-nguyen-lieu .process-grid,
  body.tn-page-vung-nguyen-lieu .region-journey{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  body.tn-page-gioi-thieu .process-step,
  body.tn-page-vung-nguyen-lieu .process-step,
  body.tn-page-vung-nguyen-lieu .region-journey-item{
    padding:16px 18px 14px!important;
    border-radius:16px!important;
  }
  body.tn-page-gioi-thieu .grid-3 .feature{
    padding:18px 18px 16px!important;
    border-radius:16px!important;
  }
  body.tn-page-tin-tuc .news-card-full > a.image-detail-link{
    width:calc(100% - 16px)!important;
    margin:8px 8px 0!important;
    border-radius:12px!important;
  }
  body.tn-page-tin-tuc .news-card-full > a.image-detail-link > img{
    border-radius:12px!important;
  }
  body.tn-page-tin-tuc .news-featured-image{
    padding:8px!important;
  }
  body.tn-page-tin-tuc .news-featured-image > a.image-detail-link,
  body.tn-page-tin-tuc .news-featured-image > a.image-detail-link > img{
    height:304px!important;
    min-height:304px!important;
    border-radius:12px!important;
  }
  body.tn-page-vung-nguyen-lieu .region-card{
    padding:8px 8px 0!important;
  }
  body.tn-page-vung-nguyen-lieu .region-card img{
    height:220px!important;
    border-radius:12px!important;
  }
  body.tn-page-vung-nguyen-lieu .region-card .content{
    padding:16px 12px 18px!important;
  }
  body.tn-page-vung-nguyen-lieu .region-intro{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    align-items:start!important;
  }

  /* Cho các phần chữ tham gia trực tiếp vào grid để có thể đưa ảnh lên trước 3 card. */
  body.tn-page-vung-nguyen-lieu .region-intro > div{
    display:contents!important;
  }

  body.tn-page-vung-nguyen-lieu .region-intro > div > .kicker,
  body.tn-page-vung-nguyen-lieu .region-intro > div > h2,
  body.tn-page-vung-nguyen-lieu .region-intro > div > p{
    order:0!important;
  }

  body.tn-page-vung-nguyen-lieu .region-intro > a.image-detail-link{
    order:1!important;
    width:100%!important;
    margin:2px 0 0!important;
  }

  body.tn-page-vung-nguyen-lieu .region-intro .tu-nuong-tra-70-height{
    width:100%!important;
    height:auto!important;
    aspect-ratio:4/3!important;
    object-fit:cover!important;
    object-position:center 55%!important;
    border-radius:16px!important;
  }

  body.tn-page-vung-nguyen-lieu .region-values{
    order:2!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    margin:0!important;
  }

  body.tn-page-vung-nguyen-lieu .region-value{
    width:100%!important;
    min-height:0!important;
    padding:15px 17px!important;
    border-radius:14px!important;
    text-align:left!important;
  }

  body.tn-page-vung-nguyen-lieu .region-value b{
    display:block!important;
    margin:0 0 5px!important;
  }

  body.tn-page-vung-nguyen-lieu .region-value span{
    display:block!important;
    line-height:1.5!important;
    text-align:left!important;
  }
  .footer{
    padding:30px 0 14px!important;
  }

  .footer .container{
    width:calc(100% - 28px)!important;
  }

  .footer-grid{
    grid-template-columns:1fr!important;
    gap:18px!important;
    align-items:start!important;
  }

  .footer-grid > div{
    min-width:0!important;
  }

  .footer-logo{
    width:132px!important;
    max-width:48vw!important;
    height:auto!important;
    margin:0 0 9px!important;
    padding:5px!important;
    border-radius:8px!important;
    background:var(--cream2)!important;
  }

  .footer-grid > div:first-child > p{
    max-width:320px!important;
    margin:0!important;
    color:#eef3ef!important;
    font-size:13px!important;
    line-height:1.58!important;
  }

  .footer h3{
    margin:0 0 7px!important;
    color:#f0c96a!important;
    font-size:17px!important;
    line-height:1.2!important;
    letter-spacing:.055em!important;
  }

  .footer ul{
    margin:0!important;
    padding:0!important;
  }

  .footer li,
  .footer a{
    font-size:13px!important;
    line-height:1.5!important;
  }

  .footer li{
    padding:2px 0!important;
  }

  .footer-grid > div:last-child{
    margin-top:1px!important;
  }

  .footer-grid > div:last-child li{
    padding:3px 0!important;
  }

  .footer-grid > div:last-child li:first-child{
    line-height:inherit!important;
    margin-bottom:0!important;
  }

  .footer-bottom{
    margin-top:20px!important;
    padding:12px 82px 0 0!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    color:rgba(255,255,255,.80)!important;
    font-size:11px!important;
    line-height:1.4!important;
    min-height:28px!important;
  }

  /* Nút giỏ hàng nổi: nâng lên và kéo vào trong nhẹ để không đè copyright. */
  #tn-cart-fab,
  .tn-cart-fab,
  #tn-cart-floating,
  .tn-cart-floating,
  #tn-cart-floating-button,
  .tn-cart-floating-button{
    bottom:26px!important;
    right:14px!important;
  }
  body.home .section > .container > a.image-detail-link,
  body.home .brand-grid > a.image-detail-link{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  body.home .section > .container > a.image-detail-link > img.visual,
  body.home .brand-grid > a.image-detail-link > img.visual{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-width:100%!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
    object-position:center center!important;
  }

  body.home .brand-grid > a.image-detail-link{
    align-self:start!important;
  }body.tn-page-gioi-thieu .steps,body.tn-page-gioi-thieu .process-grid,body.tn-page-vung-nguyen-lieu .steps,body.tn-page-vung-nguyen-lieu .process-grid,body.tn-page-vung-nguyen-lieu .region-journey{gap:16px!important}
body.tn-page-vung-nguyen-lieu .region-journey-item{padding:22px 20px 18px!important}}
@media (max-width:380px){
  .container{width:calc(100% - 20px)!important}
  .logo img{height:46px!important}
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero>.tn-mobile-hero-banner-title{
    left:16px!important;width:46%!important;font-size:clamp(19px,6.4vw,24px)!important;
  }
  .product-detail-top .tn-product-gallery-thumb{flex-basis:58px!important;width:58px!important;height:58px!important}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* Product Card legacy overrides removed in v1.10.87; current rules live in product-card-system.css + responsive-tablet.css. */

/* ======================================================================
   PRODUCT HERO PACKSHOT — TABLET BASE
   Header tablet đã chuyển hoàn toàn sang responsive-tablet.css.
   ====================================================================== */
@media (min-width:600px) and (max-width:1024px){
  body.single-tn_product .tn-banner-v2.tn-banner-v2-count-3{right:.5%!important}
  body.single-tn_product .tn-banner-v2-count-3 .tn-banner-v2-slot + .tn-banner-v2-slot{margin-left:clamp(-50px,-4.8vw,-32px)!important}
}

/* ======================================================================
   v1.9.3 — TABLET PRODUCT HERO PACKSHOTS FINAL POSITION
   Chỉ tablet 600–1024px:
   - Đẩy cụm 3 packshot sang phải thêm 22px.
   - Thu khoảng cách giữa các packshot thêm khoảng 7px.
   - Giữ nguyên kích thước và animation hiện tại.
   ====================================================================== */
@media (min-width:600px) and (max-width:1024px){
  body.single-tn_product .tn-banner-v2.tn-banner-v2-count-3{
    right:calc(.5% - 22px)!important;
  }
  body.single-tn_product .tn-banner-v2-count-3 .tn-banner-v2-slot + .tn-banner-v2-slot{
    margin-left:clamp(-57px,calc(-4.8vw - 7px),-39px)!important;
  }
}

/* ======================================================================
   v1.9.5 — TABLET LEFT “TRÀ THIÊN NAM” ARTWORK -10%
   Chỉ tablet 600–1024px:
   - Khôi phục đủ 3 packshot bên phải về cùng kích thước v1.9.3.
   - Chỉ thu nhỏ ảnh chữ “TRÀ THIÊN NAM” bên trái thêm 10%.
   - Giữ nguyên vị trí/gap/animation của cụm 3 sản phẩm.
   ====================================================================== */
@media (min-width:600px) and (max-width:1024px){
  /* 3 packshot bên phải: giữ nguyên, đồng kích thước như v1.9.3 */
  body.single-tn_product .tn-banner-v2-count-3 .tn-banner-v2-slot,
  body.single-tn_product .tn-banner-v2-count-3 .tn-banner-v2-slot:nth-child(1){
    height:85%!important;
  }

  /* Ảnh chữ bên trái: 23% -> 20.7%, max 210px -> 189px = nhỏ hơn 10% */
  body.single-tn_product .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero
  > .green-tea-hero-copy{
    width:20.7%!important;
    max-width:189px!important;
  }
}

/* v1.9.6 — Tablet: justify body copy inside the three region value cards */
@media (min-width:600px) and (max-width:1024px){
  body.tn-page-vung-nguyen-lieu .region-values .region-value span{
    display:block!important;
    text-align:justify!important;
    text-align-last:left!important;
    text-justify:inter-word!important;
  }
}

/* v1.9.7 — Desktop: justify body copy inside the three region value cards */
@media (min-width:1025px){
  body.tn-page-vung-nguyen-lieu .region-values .region-value span{
    display:block!important;
    text-align:justify!important;
    text-align-last:left!important;
    text-justify:inter-word!important;
  }
}

/* v1.10.64 — Header actions chính thức; không còn menu nhóm Khám phá. */
.tn-header-actions{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;margin-left:8px}
@media(max-width:599px){
 .header .navbar{display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;align-items:center!important;gap:4px!important}
 .header .tn-menu-toggle{grid-column:1;grid-row:1;margin:0!important}
 .header .logo{grid-column:2;grid-row:1;justify-self:center!important;margin:0!important}
 .header .tn-header-actions{grid-column:3;grid-row:1;margin:0!important;justify-self:end}
 .header .nav{grid-column:1/-1;grid-row:2}
}

/* v1.10.64 — 7 tab Header cấp 1 + anchor Nguồn nguyên liệu trong Giới thiệu. */
#tn-nguon-nguyen-lieu{scroll-margin-top:110px}
body.tn-page-gioi-thieu #tn-nguon-nguyen-lieu .section-head{max-width:820px;margin-left:auto;margin-right:auto}
/* Tablet Header is owned by responsive-tablet.css. */

/* v1.11.33 — khóa tỷ lệ nguồn ảnh Trang chủ đã chuẩn hóa.
   Tin tức: desktop/mobile dùng 5:4; tablet giữ cơ chế cân chiều cao riêng của .news-grid.
   Điểm bán: 3:4 ở mọi breakpoint. */
body.home img.tn-home-retail-image{
  width:100%!important;
  height:auto!important;
  aspect-ratio:3/4!important;
  object-fit:cover!important;
  object-position:center!important;
}
@media (min-width:1025px), (max-width:599px){
  body.home img.home-news-image{
    width:100%!important;
    height:auto!important;
    aspect-ratio:5/4!important;
    object-fit:cover!important;
    object-position:center!important;
  }
}

/* ======================================================================
   v1.11.54 — PRODUCT DETAIL HERO: LEFT COPY TINH GỌN / CAO CẤP
   - Thay artwork raster kiểu infographic bằng text HTML thật.
   - Không icon lớn, không đường kẻ dọc; tăng khoảng trắng và phân cấp rõ.
   - Desktop/Tablet dùng cùng hệ; Mobile giữ tiêu đề banner riêng hiện tại.
   ====================================================================== */
@media (min-width:1025px){
  body.single-tn_product .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero
  > .green-tea-hero-copy.tn-product-hero-copy{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    left:max(20px,calc((100vw - 1180px)/2))!important;
    top:50%!important;
    z-index:3!important;
    width:min(470px,31vw)!important;
    max-width:470px!important;
    height:auto!important;
    padding:0!important;
    margin:0!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    transform:translateY(-50%)!important;
    object-fit:unset!important;
    pointer-events:none!important;
    filter:none!important;
    color:#173f2d!important;
  }
  body.single-tn_product .tn-product-hero-heading{
    display:inline-flex!important;
    width:max-content!important;
    max-width:100%!important;
    flex-direction:column!important;
    align-items:stretch!important;
    align-self:flex-start!important;
  }
  body.single-tn_product .tn-product-hero-brand{
    margin:0!important;
    font-family:var(--tn-font-display,"Noto Serif","Times New Roman",Georgia,serif)!important;
    font-size:clamp(38px,2.55vw,48px)!important;
    line-height:1.02!important;
    font-weight:650!important;
    letter-spacing:.005em!important;
    color:#0c4a35!important;
    white-space:nowrap!important;
  }
  body.single-tn_product .tn-product-hero-tagline{
    display:block!important;
    width:100%!important;
    margin:9px 0 0!important;
    font-family:var(--tn-font-ui,"Inter",Arial,sans-serif)!important;
    font-size:14px!important;
    line-height:1.45!important;
    font-weight:600!important;
    letter-spacing:.02em!important;
    text-align:center!important;
    color:var(--tn-product-hero-accent,var(--gold,#f4a719))!important;
    white-space:nowrap!important;
  }
  body.single-tn_product .tn-product-hero-tagline span{
    display:inline-block!important;
    padding:0 6px!important;
    color:var(--tn-product-hero-accent,var(--gold,#f4a719))!important;
  }
  body.single-tn_product .tn-product-hero-proofs{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:0!important;
    margin:23px 0 0!important;
    padding:0!important;
    font-family:var(--tn-font-ui,"Inter",Arial,sans-serif)!important;
    font-size:11.5px!important;
    line-height:1.45!important;
    font-weight:600!important;
    letter-spacing:.01em!important;
    color:#5f6f66!important;
    white-space:nowrap!important;
  }
  body.single-tn_product .tn-product-hero-proofs span{
    display:inline-flex!important;
    align-items:center!important;
  }
  body.single-tn_product .tn-product-hero-proofs span:not(:last-child)::after{
    content:'·'!important;
    display:inline-block!important;
    margin:0 11px!important;
    color:var(--tn-product-hero-accent,var(--gold,#f4a719))!important;
    font-size:15px!important;
    line-height:1!important;
  }
}

@media (min-width:600px) and (max-width:1024px){
  body.single-tn_product .product-universal-hero.green-tea-product-hero.tn-dynamic-product-hero
  > .green-tea-hero-copy.tn-product-hero-copy{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    left:20px!important;
    top:50%!important;
    z-index:3!important;
    width:32%!important;
    max-width:300px!important;
    height:auto!important;
    padding:0!important;
    margin:0!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    transform:translateY(-50%)!important;
    object-fit:unset!important;
    pointer-events:none!important;
    filter:none!important;
  }
  body.single-tn_product .tn-product-hero-heading{
    display:inline-flex!important;
    width:max-content!important;
    max-width:100%!important;
    flex-direction:column!important;
    align-items:stretch!important;
    align-self:flex-start!important;
  }
  body.single-tn_product .tn-product-hero-brand{
    font-family:var(--tn-font-display,"Noto Serif","Times New Roman",Georgia,serif)!important;
    font-size:clamp(24px,3.6vw,34px)!important;
    line-height:1.02!important;
    font-weight:650!important;
    letter-spacing:0!important;
    color:#0c4a35!important;
    white-space:nowrap!important;
  }
  body.single-tn_product .tn-product-hero-tagline{
    display:block!important;
    width:100%!important;
    margin:6px 0 0!important;
    font-family:var(--tn-font-ui,"Inter",Arial,sans-serif)!important;
    font-size:10.5px!important;
    line-height:1.4!important;
    font-weight:600!important;
    text-align:center!important;
    color:var(--tn-product-hero-accent,var(--gold,#f4a719))!important;
  }
  body.single-tn_product .tn-product-hero-tagline span{padding:0 3px!important;color:var(--tn-product-hero-accent,var(--gold,#f4a719))!important}
  body.single-tn_product .tn-product-hero-proofs{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:3px!important;
    margin:12px 0 0!important;
    padding:0!important;
    font-family:var(--tn-font-ui,"Inter",Arial,sans-serif)!important;
    font-size:9.5px!important;
    line-height:1.35!important;
    font-weight:600!important;
    color:#5f6f66!important;
  }
  body.single-tn_product .tn-product-hero-proofs span:not(:last-child)::after{display:none!important;content:none!important}
}

@media (max-width:599px){
  body.single-tn_product .product-universal-hero.tn-dynamic-product-hero
  > .green-tea-hero-copy.tn-product-hero-copy{
    display:none!important;
  }
}

/* v1.11.55 — Product hero copy canh đúng mép trái container toàn trang.
   Desktop: max(20px, (100vw - 1180px)/2); Tablet: 14px theo responsive contract. */


/* v1.11.56 — Product hero tagline centered and orange to match main tab banner accent. */
/* v1.11.58 — Product hero tagline exact title centering.
   Heading wrapper shrink-wraps theo bề rộng “TRÀ THIÊN NAM”;
   tagline width:100% nên tâm tagline trùng chính xác tâm tiêu đề. */


/* v1.11.60 — Product hero accent: one source of truth, same orange as main banners. */
body.single-tn_product .product-universal-hero.tn-dynamic-product-hero{
  --tn-product-hero-accent:var(--gold,#f4a719);
}
/* v1.11.59 — tagline line 2 uses main banner orange */
body.single-tn_product .tn-product-hero-tagline,
body.single-tn_product .tn-product-hero-tagline span{
  color:var(--tn-product-hero-accent,var(--gold,#f4a719))!important;
}

/* v1.11.60 final accent lock — tagline + separators share the main-banner orange. */
body.single-tn_product .tn-product-hero-tagline,
body.single-tn_product .tn-product-hero-tagline span,
body.single-tn_product .tn-product-hero-proofs span:not(:last-child)::after{
  color:var(--tn-product-hero-accent,var(--gold,#f4a719))!important;
}