:root{
 --green:#173f2d;
 --green2:#21583c;
 --gold:#f4a719;
 --gold2:#c9a24d;
 --cream:#f6f0df;
 --cream2:#fffaf0;
 --paper:#fffdf8;
 --ink:#213128;
 --muted:#667068;
 --line:#ded6c4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--tn-font-ui);background:var(--cream2);color:var(--ink);line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 36px));margin:auto}
.header{background:var(--green);position:sticky;top:0;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.navbar{min-height:82px;display:flex;align-items:center;gap:28px;position:relative}
.logo{margin-right:auto}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:13px;font-weight:800;color:#fff7e4;letter-spacing:.04em}
.nav a:hover,.nav a.active{color:var(--gold)}

.tn-menu-toggle{display:none;width:44px;height:44px;padding:9px;border:1px solid rgba(255,255,255,.35);border-radius:9px;background:rgba(255,255,255,.08);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.tn-menu-toggle span{display:block;width:22px;height:2px;border-radius:999px;background:#fff7e4;transition:transform .22s ease,opacity .22s ease}
.tn-menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tn-menu-toggle.is-open span:nth-child(2){opacity:0}
.tn-menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.icons{display:flex;gap:14px;color:#fff7e4;font-size:20px}

.hero{min-height:560px;position:relative;overflow:hidden;background:#dfe8c7}
.hero:before{
 content:"";position:absolute;inset:0;
 background:
 linear-gradient(90deg,rgba(255,250,240,.94) 0%,rgba(255,250,240,.82) 42%,rgba(255,250,240,.18) 72%,rgba(255,250,240,.08) 100%),
 url("../img/hero-doi-tra.jpg") center/cover no-repeat;
}
.hero .container{position:relative;z-index:2;min-height:560px;display:flex;align-items:center}
.hero-copy{max-width:580px}
.kicker{font-size:13px;font-weight:800;letter-spacing:.17em;color:var(--gold2);text-transform:uppercase}
h1,h2,h3{font-family:var(--tn-font-display);color:var(--green);line-height:1.17;margin:0}
h1{font-size:clamp(46px,6vw,72px);margin-top:12px}
h2{font-size:clamp(30px,4vw,46px)}
h3{font-size:24px}
.hero p{font-size:19px;color:#415046;max-width:570px}
.btn{display:inline-block;padding:13px 22px;border-radius:6px;font-size:13px;font-weight:800;letter-spacing:.03em}
.btn.gold{background:var(--gold);color:#183426}
.btn.green{background:var(--green);color:white}
.btn.outline{border:1px solid var(--green);color:var(--green);background:rgba(255,255,255,.55)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

.section{padding:76px 0}
.section.white{background:var(--paper)}
.section.soft{background:var(--cream)}
.section.green{background:var(--green);color:white}
.center{text-align:center}
.section-head{max-width:760px;margin:0 auto 36px}
.section-head p{color:var(--muted)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.card{background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 10px 28px rgba(23,63,45,.06)}
.card .media{height:310px;background:#f7f1e2;display:grid;place-items:center}
.card .media img{width:100%;height:100%;object-fit:contain;padding:10px}
.card .content{padding:22px}
.badge{display:inline-block;background:#eef4ee;border:1px solid #d7e5da;color:var(--green);padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;margin-bottom:12px}
.card p{color:var(--muted)}
.link{font-weight:800;color:var(--gold2)}

.brand-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.brand-panel{background:var(--green);color:white;border-radius:20px;padding:34px}
.brand-panel h2,.brand-panel h3{color:white}
.brand-item{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.brand-item:last-child{border-bottom:0}
.brand-item b{color:#ffe6a4}

.visual{border-radius:18px;border:1px solid var(--line);box-shadow:0 15px 38px rgba(23,63,45,.12);background:white}
.news-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.news-grid img{border-radius:18px;box-shadow:0 15px 38px rgba(23,63,45,.12);display:block;width:100%}.home-news-image{aspect-ratio:5/4;object-fit:cover;object-position:center;align-self:stretch}.tn-home-retail-image{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center}
.news-list{display:grid;gap:16px}
.news-item{background:white;border:1px solid var(--line);border-radius:14px;padding:20px}
.news-item small{color:var(--gold2);font-weight:800}

.cta{background:var(--gold);padding:38px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.cta h2{color:#173f2d}
.page-hero{background:linear-gradient(135deg,#fffaf0,#efe4ca);padding:72px 0}
.page-hero p{max-width:760px;color:var(--muted)}
.breadcrumb{font-size:12px;color:var(--gold2);font-weight:800;margin-bottom:12px}
.detail{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:start}
.detail-img{background:white;border:1px solid var(--line);padding:16px;border-radius:18px;box-shadow:0 12px 32px rgba(23,63,45,.08)}
.detail-img img{width:100%;height:auto;object-fit:contain}
.table{width:100%;border-collapse:collapse;margin-top:20px;background:white}
.table th,.table td{padding:13px 14px;border-bottom:1px solid #ece4d6;text-align:left;vertical-align:top}
.table th{width:34%;background:#fbf5e8;color:var(--green)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{background:white;border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
.step b{display:block;color:var(--gold2);font-family:var(--tn-font-display);font-size:25px}
.form{display:grid;gap:13px}
.form input,.form textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:9px;font:inherit;background:white}
.form textarea{min-height:145px}
.footer{background:var(--green);color:#dce6df;padding:52px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:28px}
.footer-logo{margin-bottom:14px}
.footer h3{font-family:var(--tn-font-ui);color:#fff3d2;font-size:13px;letter-spacing:.07em}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{padding:5px 0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:30px;padding-top:18px;font-size:12px}


.visual.portrait{max-height:700px;width:auto;margin:auto}
.grid-2 img.visual{width:100%;height:100%;object-fit:cover}

/* Logo chính thức do khách hàng cung cấp */
.logo{background:#fff;border-radius:7px;padding:5px 10px;display:flex;align-items:center}
.logo img{height:58px;width:auto;filter:none!important;object-fit:contain}
.footer-logo{background:#fff;border-radius:8px;padding:8px;filter:none!important;width:220px;height:auto}


/* VÙNG NGUYÊN LIỆU */
.region-hero{color:#fff}.region-card h3{margin-bottom:10px}
.article-meta{margin:10px 0 26px}


/* ===== HERO THEO DEMO NGƯỜI DÙNG GỬI ===== */
.hero-demo{
  position:relative;
  min-height:445px;
  overflow:hidden;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.98) 0%,
      rgba(255,255,255,0.94) 23%,
      rgba(255,255,255,0.76) 39%,
      rgba(255,255,255,0.35) 55%,
      rgba(255,255,255,0.03) 73%),
    url("../img/hero-doi-tra.jpg") center right / cover no-repeat;
}
.hero-demo:before{display:none!important}
.hero-demo .container{
  min-height:445px;
  display:flex;
  align-items:center;
  position:relative;
  z-index:2;
}
.hero-demo-inner{padding-top:10px;padding-bottom:10px}
.hero-demo-copy{
  width:min(600px,52%);
  padding:28px 0 34px;
}
.hero-demo-kicker{
  font-size:11px;
  letter-spacing:.24em;
  color:#e88716;
  font-weight:700;
  margin-bottom:20px;
}
.hero-demo-title{
  font-family:var(--tn-font-display);
  font-size:clamp(46px,4.8vw,70px);
  font-weight:400;
  line-height:1.03;
  color:#18482d;
  letter-spacing:-.025em;
  margin:0;
}
.hero-demo-title span{
  color:#f29a13;
  font-style:normal;
}
.hero-demo-desc{
  max-width:470px;
  margin:31px 0 0;
  color:#243d30;
  font-size:16px;
  line-height:1.6;
}
.hero-demo-actions{
  margin-top:38px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.hero-demo-btn{
  min-width:180px;
  padding:14px 24px;
  border-radius:999px;
  text-align:center;
  font-size:12px;
  letter-spacing:.02em;
  font-weight:800;
  transition:.2s ease;
}
.hero-demo-btn.primary{
  color:#fff;
  background:#3d7436;
  border:2px solid #3d7436;
}
.hero-demo-btn.secondary{
  color:#234631;
  background:rgba(255,255,255,.72);
  border:2px solid #53745e;
}
.hero-demo-btn:hover{transform:translateY(-1px)}


/* FIX HIỂN THỊ ẢNH ĐỒI TRÀ - dùng thẻ IMG thật */
.hero-demo-fixed{
  position:relative!important;
  min-height:445px!important;
  overflow:hidden!important;
  background:#fff!important;
}
.hero-demo-fixed:before{display:none!important}
.hero-demo-photo{
  position:absolute;
  top:0;right:0;bottom:0;
  width:68%;
  z-index:0;
  overflow:hidden;
}
.hero-demo-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}
.hero-demo-fade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
    #ffffff 0%,
    rgba(255,255,255,.98) 23%,
    rgba(255,255,255,.92) 34%,
    rgba(255,255,255,.68) 43%,
    rgba(255,255,255,.25) 53%,
    rgba(255,255,255,0) 67%);
}
.hero-demo-fixed .hero-demo-inner{
  min-height:445px;
  position:relative;
  z-index:2;
}
.hero-demo-fixed .hero-demo-copy{
  width:52%;
}


.tn-hero-v2{position:relative;height:435px;overflow:hidden;background:#fff}
.tn-hero-photo{position:absolute;inset:0 0 0 31%;z-index:0;overflow:hidden}
.tn-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.tn-hero-gradient{position:absolute;inset:0;z-index:1;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%)}
.tn-hero-content{height:435px;position:relative;z-index:2;display:flex;align-items:flex-start}
.tn-hero-copy{width:48%;padding-top:25px}
.tn-hero-kicker{font-size:10px;letter-spacing:.22em;color:#e17f15;font-weight:700;margin-bottom:22px}
.tn-hero-copy h1{color:#18482d;margin:0}
.tn-hero-copy h1 span{display:block;white-space:nowrap;font-size:55px}
.tn-hero-copy h1 span+span{font-size:53px;margin-top:4px}
.tn-hero-copy h1 em{color:#f29a13}
.tn-hero-copy p{max-width:465px;margin:30px 0 0;color:#244233;font-size:15px;line-height:1.65}
.tn-hero-buttons{display:flex;gap:16px;margin-top:36px}
.tn-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:999px;font-size:11px;font-weight:800}
.tn-btn.primary{min-width:179px;background:#3d7436;color:#fff;border:2px solid #3d7436}
.tn-btn.secondary{min-width:136px;background:#fff;color:#2e513b;border:2px solid #56725d}


/* HERO TITLE: cùng kiểu font với "Danh mục trà Thiên Nam" */
.tn-hero-copy h1{
  font-family:var(--tn-font-display)!important;
  font-weight:700!important;
  line-height:1.12!important;
  letter-spacing:0!important;
}
.tn-hero-copy h1 span{
  font-family:inherit!important;
  font-weight:inherit!important;
}
.tn-hero-copy h1 em{
  font-family:inherit!important;
  font-weight:inherit!important;
  font-style:normal!important;
}

/* ===== HOVER EFFECTS - tinh tế, nhẹ, cao cấp ===== */

/* Menu chính */
.nav a{
  position:relative;
  transition:color .22s ease, transform .22s ease;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .24s ease;
}
.nav a:hover{
  color:var(--gold);
  transform:translateY(-1px);
}
.nav a:hover::after,
.nav a.active::after{
  transform:scaleX(1);
}

/* Link chữ trong nội dung */
.link,
.text-link{
  display:inline-block;
  position:relative;
  transition:color .22s ease, transform .22s ease;
}
.link::after,
.text-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
.link:hover,
.text-link:hover{
  color:#e58b12;
  transform:translateX(4px);
}
.link:hover::after,
.text-link:hover::after{
  transform:scaleX(1);
}

/* Nút */
.btn,
.tn-btn,
.hero-demo-btn{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease;
}
.btn:hover,
.tn-btn:hover,
.hero-demo-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(23,63,45,.16);
}
.btn:active,
.tn-btn:active,
.hero-demo-btn:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(23,63,45,.12);
}

/* Nút xanh */
.btn.green:hover,
.tn-btn.primary:hover,
.hero-demo-btn.primary:hover{
  background:#315f2e;
  border-color:#315f2e;
}

/* Nút viền */
.btn.outline:hover,
.tn-btn.secondary:hover,
.hero-demo-btn.secondary:hover{
  background:#f5f1e7;
  border-color:var(--gold2);
  color:var(--green);
}

/* Thẻ sản phẩm */
.card{
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(23,63,45,.13);
  border-color:#d1c5ab;
}
.card .media img{
  transition:transform .36s ease;
}
.card:hover .media img{
  transform:scale(1.035);
}

/* Thẻ vùng nguyên liệu */
.region-card:hover{
  border-color:#d1c5ab;
}
.region-card:hover img{
  filter:saturate(1.05);
}

/* Tin tức */
.news-item,
.news-card{
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.news-item:hover,
.news-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(23,63,45,.10);
}

/* Footer */
.footer a{
  transition:color .2s ease, padding-left .2s ease;
}
.footer a:hover{
  color:#ffd37b;
  padding-left:4px;
}

/* Logo */
.logo{
  transition:transform .22s ease, box-shadow .22s ease;
}
.logo:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

/* Giảm hiệu ứng cho người dùng bật reduced motion */


.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.process-step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px;transition:transform .25s ease,box-shadow .25s ease}
.process-step:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(23,63,45,.10)}
.process-step b{display:block;font-family:var(--tn-font-display);font-size:30px;color:var(--gold2);margin-bottom:12px}
.process-step h3{color:var(--green)}
.feature{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;transition:transform .25s ease,box-shadow .25s ease}
.feature:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(23,63,45,.10)}
.feature-icon{font-family:var(--tn-font-display);font-size:30px;color:var(--gold2);margin-bottom:14px}



/* ===== FIX FONT TIẾNG VIỆT ===== */
html,body,button,input,textarea,select{
  font-family:var(--tn-font-ui)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,
.tn-hero-copy h1,
.section-head h2,
.page-hero h1{
  font-family:var(--tn-font-display)!important;
  font-weight:700;
}
.kicker,.breadcrumb,.badge,.nav a,.btn,.tn-btn{
  font-family:var(--tn-font-ui)!important;
}

/* ===== VÙNG NGUYÊN LIỆU - THEO BẢN DỰNG TRONG CHAT ===== */
.region-hero{
  position:relative;
  min-height:470px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#173f2d;
}
.region-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.region-hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.region-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(17,56,39,.94) 0%,rgba(17,56,39,.78) 36%,rgba(17,56,39,.34) 68%,rgba(17,56,39,.10) 100%);
}
.region-hero .container{
  position:relative;
  z-index:2;
  padding-bottom:58px;
}
.region-hero h1{
  color:#fff;
  font-size:clamp(46px,6vw,70px);
  max-width:760px;
  margin-bottom:18px;
}
.region-hero p{
  color:#eef5ef;
  max-width:760px;
  font-size:18px;
}
.region-intro{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:46px;
}
.region-intro img{
  width:100%;
  border-radius:20px;
  border:1px solid var(--line);
  box-shadow:0 14px 36px rgba(23,63,45,.10);
}
.region-values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:28px;
}
.region-value{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px;
}
.region-value b{
  display:block;
  color:var(--green);
  margin-bottom:8px;
}
.region-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.region-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(23,63,45,.06);
  transition:transform .25s ease,box-shadow .25s ease;
}
.region-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(23,63,45,.13);
}
.region-card img{
  width:100%;
  height:265px;
  object-fit:cover;
  transition:transform .35s ease;
}
.region-card:hover img{
  transform:scale(1.03);
}
.region-card .content{
  padding:24px;
}
.region-card h3{
  margin:6px 0 10px;
}
.region-card p{
  color:var(--muted);
}
.region-journey{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.region-journey-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px;
  text-align:center;
}
.region-journey-item span{
  display:inline-grid;
  place-items:center;
  width:46px;height:46px;
  border-radius:50%;
  background:#eef4ee;
  color:var(--green);
  font-weight:800;
  margin-bottom:14px;
}

/* article detail */
.article-wrap{max-width:900px;margin:auto}
.article-cover{
  width:100%;
  border-radius:20px;
  box-shadow:0 14px 36px rgba(23,63,45,.10);
  margin-bottom:30px;
}
.article-meta{
  font-size:13px;
  color:var(--gold2);
  font-weight:800;
  margin-bottom:24px;
}
.article-content p{
  font-size:17px;
  color:#4e5d53;
  line-height:1.78;
}
.article-content h2{
  margin-top:36px;
  margin-bottom:12px;
}
.article-note{
  border-left:4px solid var(--gold);
  background:#fff7df;
  padding:18px 20px;
  border-radius:0 12px 12px 0;
  margin:26px 0;
}
.article-nav{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-top:42px;
  padding-top:24px;
  border-top:1px solid var(--line);
}




/* HERO VÙNG NGUYÊN LIỆU - GIỐNG TRANG CHỦ */
.tn-region-hero{
  position:relative;
  height:435px;
  overflow:hidden;
  background:#fff;
}
.tn-region-photo{
  position:absolute;
  inset:0 0 0 31%;
  z-index:0;
  overflow:hidden;
}
.tn-region-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.tn-region-gradient{
  position:absolute;
  inset:0;
  z-index:1;
  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%);
}
.tn-region-content{
  height:435px;
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
}
.tn-region-copy{
  width:48%;
  padding-top:25px;
}
.tn-region-kicker{
  font-family:var(--tn-font-ui);
  font-size:10px;
  letter-spacing:.22em;
  color:#e17f15;
  font-weight:700;
  margin-bottom:22px;
}
.tn-region-copy h1{
  margin:0;
  font-family:var(--tn-font-display)!important;
  font-weight:700!important;
  color:#18482d;
  line-height:1.08;
  letter-spacing:0;
}
.tn-region-copy h1 span{
  display:block;
  white-space:nowrap;
  font-size:53px;
}
.tn-region-copy h1 em{
  color:#f29a13;
  font-style:normal;
}
.tn-region-copy p{
  max-width:465px;
  margin:30px 0 0;
  color:#244233;
  font-size:15px;
  line-height:1.65;
}
.tn-region-buttons{
  display:flex;
  gap:16px;
  margin-top:36px;
}


/* HERO GIỚI THIỆU - đồng bộ Trang chủ */
.tn-about-hero{position:relative;height:435px;overflow:hidden;background:#fff}
.tn-about-photo{position:absolute;inset:0 0 0 31%;z-index:0;overflow:hidden}
.tn-about-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.tn-about-gradient{position:absolute;inset:0;z-index:1;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%)}
.tn-about-content{height:435px;position:relative;z-index:2;display:flex;align-items:flex-start}
.tn-about-copy{width:48%;padding-top:25px}
.tn-about-kicker{font-family:var(--tn-font-ui)!important;font-size:10px;letter-spacing:.22em;color:#e17f15;font-weight:700;margin-bottom:22px}
.tn-about-copy h1{margin:0;font-family:var(--tn-font-display)!important;font-weight:700!important;color:#18482d;line-height:1.08;letter-spacing:0}
.tn-about-copy h1 span{display:block;white-space:nowrap;font-size:53px}
.tn-about-copy h1 em{color:#f29a13;font-style:normal}
.tn-about-copy p{max-width:465px;margin:30px 0 0;color:#244233;font-size:15px;line-height:1.65}
.tn-about-buttons{display:flex;gap:16px;margin-top:36px}


/* ===== HERO ĐỒNG BỘ CÁC TAB ===== */
.tn-subhero{position:relative;height:435px;overflow:hidden;background:#fff}
.tn-subhero-photo{position:absolute;inset:0 0 0 31%;z-index:0;overflow:hidden}
.tn-subhero-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.tn-subhero-gradient{position:absolute;inset:0;z-index:1;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%)}
.tn-subhero-content{height:435px;position:relative;z-index:2;display:flex;align-items:flex-start}
.tn-subhero-copy{width:48%;padding-top:25px}
.tn-subhero-kicker{font-family:var(--tn-font-ui)!important;font-size:10px;letter-spacing:.22em;color:#e17f15;font-weight:700;margin-bottom:22px}
.tn-subhero-copy h1{margin:0;font-family:var(--tn-font-display)!important;font-weight:700!important;color:#18482d;line-height:1.08;letter-spacing:0}
.tn-subhero-copy h1 span{display:block;white-space:nowrap;font-size:53px}
.tn-subhero-copy h1 em{color:#f29a13;font-style:normal}
.tn-subhero-copy p{max-width:465px;margin:30px 0 0;color:#244233;font-size:15px;line-height:1.65}
.tn-subhero-buttons{display:flex;gap:16px;margin-top:36px}


/* ===== LIÊN HỆ + GOOGLE MAPS ===== */
.contact-info-panel,
.contact-form-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px;
  box-shadow:0 10px 28px rgba(23,63,45,.06);
}
.contact-info-list{display:grid;gap:8px;margin-top:24px}
.contact-info-item{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:14px;
  align-items:start;
  padding:17px 0;
  border-bottom:1px solid #ece4d6;
}
.contact-info-item:last-child{border-bottom:0}
.contact-info-item b{color:var(--green);display:block;margin-bottom:4px}
.contact-info-item p{margin:0;color:#56645b}
.contact-icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#eef4ee;
  color:var(--green);
  font-size:0;
}
.contact-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact-actions{margin-top:24px}
.contact-form-card h2{margin-bottom:22px}
.contact-form-card select{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  font:inherit;
  color:#56645b;
}
.google-map-frame{
  overflow:hidden;
  border-radius:22px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 14px 36px rgba(23,63,45,.10);
}
.google-map-frame iframe{display:block;width:100%;min-height:520px}
.map-address-bar{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 22px;
}
.map-address-bar strong{display:block;color:var(--green);margin-bottom:3px}
.map-address-bar span{color:#657067}


/* ===== TIN TỨC THEO BẢN DỰNG TRONG CHAT ===== */
.news-tabs{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:34px;
}
.news-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--green);
  font-weight:800;
  font-size:12px;
}
.news-tab.active,
.news-tab:hover{
  background:var(--green);
  color:#fff;
  border-color:var(--green);
}
.news-featured{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:34px;
  align-items:center;
  margin-bottom:34px;
}
.news-featured-image{
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 14px 36px rgba(23,63,45,.10);
}
.news-featured-image img{
  width:100%;
  height:420px;
  object-fit:cover;
}
.news-featured-copy{padding:12px 0}
.news-featured-copy h2{margin:8px 0 16px}
.news-featured-copy p{color:var(--muted)}
.news-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.news-card-full{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(23,63,45,.06);
  transition:transform .25s ease,box-shadow .25s ease;
}
.news-card-full:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 36px rgba(23,63,45,.12);
}
.news-card-full img{
  width:100%;
  height:220px;
  object-fit:cover;
  transition:transform .35s ease;
}
.news-card-full:hover img{transform:scale(1.03)}
.news-card-full .content{padding:22px}
.news-card-full h3{margin:8px 0 10px}
.news-card-full p{color:var(--muted)}
.news-meta{
  font-size:11px;
  letter-spacing:.08em;
  color:var(--gold2);
  font-weight:800;
}
.news-article{max-width:900px;margin:auto}
.news-article-cover{
  width:100%;
  border-radius:20px;
  margin-bottom:26px;
  box-shadow:0 14px 36px rgba(23,63,45,.10);
}
.news-article h2{margin-top:34px;margin-bottom:12px}
.news-article p{
  font-size:17px;
  color:#4e5d53;
  line-height:1.78;
}
.news-article-note{
  background:#fff7df;
  border-left:4px solid var(--gold);
  padding:18px 20px;
  border-radius:0 12px 12px 0;
  margin:26px 0;
}
.news-article-nav{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-top:42px;
  padding-top:24px;
  border-top:1px solid var(--line);
}


/* FIX HIỂN THỊ ẢNH DANH MỤC */
.product-card .media img,.card .media img,.media img{
  width:100%;height:100%;min-height:220px;object-fit:cover;display:block;
}

/* FIX FOOTER ADDRESS + GIFT IMAGE */
.footer li strong{color:#fff3d2}
.footer-grid > div:last-child li:first-child{line-height:1.55;margin-bottom:7px}
.card .media img[src*="hop-qua-do-thien-nam"]{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ===== FIX CUỐI: 2 KHUNG LIÊN HỆ CÙNG CHIỀU CAO ===== */
.contact-layout{
  display:grid!important;
  grid-template-columns:.85fr 1.15fr!important;
  gap:32px!important;
  align-items:stretch!important;
}
.contact-info-panel,
.contact-form-card{
  height:100%!important;
  min-height:100%!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
}
.contact-info-panel .contact-actions{
  margin-top:auto!important;
  padding-top:24px!important;
}
.contact-form-card .form{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
}
.contact-form-card .form textarea{
  flex:1 1 auto!important;
  min-height:140px!important;
}
.contact-form-card .notice{
  margin-top:14px!important;
}

/* v1.11.48 — Liên hệ: nút Gửi thông tin gọn và canh trái. */
.tn-contact-form > button.btn.gold{
  align-self:flex-start!important;
  width:auto!important;
  min-width:178px;
  max-width:100%;
  padding-left:24px!important;
  padding-right:24px!important;
  text-align:center;
}



/* ===== GIỚI THIỆU: GIẢM 50% CHIỀU CAO 2 HÌNH =====
   Ảnh gốc ~3:2; khung 3:1 giữ nguyên chiều rộng và giảm khoảng 1/2 chiều cao.
   object-fit: cover để không méo ảnh. */
.gioi-thieu .about-half-height,
.about-half-height{
  width:100%!important;
  aspect-ratio:3 / 1!important;
  height:auto;
  object-fit:cover!important;
  object-position:center center!important;
  display:block;
}



/* ===== GIỚI THIỆU: TĂNG CHIỀU CAO HÌNH “TINH HOA TRÀ VIỆT TỪ THIÊN NHIÊN” THÊM 1.2 LẦN ===== */
.about-half-height{
  aspect-ratio:25 / 14!important;
  width:100%!important;
  height:auto!important;
  object-fit:cover!important;
  object-position:center center!important;
}



/* ===== VÙNG NGUYÊN LIỆU: GIẢM CHIỀU CAO ẢNH "TỪ NƯƠNG TRÀ" CÒN ~70% ===== */



/* ===== VÙNG NGUYÊN LIỆU: TĂNG CHIỀU CAO ẢNH "TỪ NƯƠNG TRÀ" LÊN 1.2 LẦN ===== */



/* ===== VÙNG NGUYÊN LIỆU: TĂNG CHIỀU CAO ẢNH "TỪ NƯƠNG TRÀ" THÊM 1.5 LẦN ===== */



/* ===== VÙNG NGUYÊN LIỆU: TĂNG ẢNH "TỪ NƯƠNG TRÀ" THÊM 10% ===== */
.tu-nuong-tra-70-height{
  width:100%!important;
  aspect-ratio:250 / 231!important;
  height:auto!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block;
}



/* ===== TỪ NƯƠNG TRÀ: CĂN ĐÁY HÌNH NGANG 3 Ô BÊN TRÁI ===== */
.region-intro{
  align-items:end!important;
}
.region-intro .tu-nuong-tra-70-height{
  align-self:end!important;
}



/* ===== PRODUCT DETAIL ARTICLES ===== */
.product-detail-top .detail-img img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:24px;display:block}
.product-copy-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr);gap:44px;align-items:start}
.product-copy-grid h2{margin:8px 0 18px}
.product-copy-grid>div>p{font-size:17px;line-height:1.85;margin:0 0 16px;color:#3e4b43}
.product-note{background:#fff;border:1px solid rgba(21,72,45,.16);border-radius:22px;padding:26px;box-shadow:0 12px 32px rgba(23,63,45,.06);position:sticky;top:96px}
.product-note p{line-height:1.75;color:#4c574f}
.product-features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.product-feature{padding:26px;border-radius:20px;border:1px solid rgba(21,72,45,.14);background:#fff;box-shadow:0 10px 28px rgba(23,63,45,.05)}
.product-feature h3{margin:0 0 10px;color:#173f2d;font-size:21px}
.product-feature p{margin:0;line-height:1.7;color:#4d5851}
.product-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.product-step{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid rgba(21,72,45,.12);border-radius:20px;padding:22px}
.product-step>b{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;border-radius:50%;background:#173f2d;color:#fff;font-size:15px}
.product-step h3{margin:2px 0 6px;font-size:18px;color:#173f2d}
.product-step p{margin:0;color:#566159;line-height:1.6}
.product-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.product-gallery-img{width:100%;height:320px!important;aspect-ratio:auto!important;object-fit:cover!important;border-radius:22px!important}

.product-cta{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:8px;padding-bottom:8px}
.product-cta h2{margin:6px 0 10px}
.product-cta p{max-width:760px;line-height:1.7;color:#4d5851}




/* ===== TIN TỨC CHI TIẾT: GIỮ ĐÚNG TỶ LỆ ẢNH GỐC ===== */
.news-article .news-article-cover,
.news-article-cover{
  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;
  margin-left:auto!important;
  margin-right:auto!important;
}



/* ===== GIỚI THIỆU: CÂN KHỐI ẢNH VỚI KHỐI CHỮ BÊN CẠNH ===== */



/* ===== GIỚI THIỆU: CĂN HÌNH “TINH HOA TRÀ VIỆT” THEO MÉP DƯỚI KHỐI CHỮ ===== */



/* ===== GIỚI THIỆU: CHỨNG NHẬN – GIẢI THƯỞNG GIẢM CHIỀU CAO ẢNH, CANH MÉP TRÊN ===== */
.brand-grid.cert-award-align-bottom{
  align-items:start!important;
}
.brand-grid.cert-award-align-bottom > img.cert-award-image{
  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:start!important;
}



/* ===== TIN TỨC: CĂN "ĐỌC TIẾP" NGANG HÀNG ===== */
.news-cards{
  align-items:stretch!important;
}
.news-card-full{
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
}
.news-card-full .content{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  height:100%!important;
}
.news-card-full .content .link{
  margin-top:auto!important;
  padding-top:14px!important;
  align-self:flex-start!important;
}

/* ===== TOÀN WEBSITE: ẢNH ĐẠI DIỆN CÓ THỂ BẤM ĐỂ XEM CHI TIẾT ===== */
a.image-detail-link{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:inherit;
  cursor:pointer;
  text-decoration:none;
}
a.image-detail-link img{
  display:block;
  transition:transform .30s ease, filter .30s ease, opacity .30s ease;
}
a.image-detail-link:hover img,
a.image-detail-link:focus-visible img{
  transform:scale(1.025);
  filter:brightness(.96);
}
a.image-detail-link:focus-visible{
  outline:3px solid rgba(201,162,77,.70);
  outline-offset:3px;
}
.card .media > a.image-detail-link{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}
.card .media > a.image-detail-link img{
  width:100%;
  height:100%;
}
.news-card-full > a.image-detail-link,
.region-card > a.image-detail-link{
  width:100%;
}
.news-featured-image > a.image-detail-link img{
  width:100%;
  height:100%;
}
.news-grid > a.image-detail-link{
  align-self:center;
  width:100%;
}



/* ===== TIN TỨC: GIỮ NGUYÊN CHIỀU CAO ẢNH SAU KHI BỌC LINK ===== */
/* Card tin tức: giữ đúng 220px như thiết kế ban đầu */
.news-card-full > a.image-detail-link{
  width:100%!important;
  height:220px!important;
  min-height:220px!important;
  flex:0 0 220px!important;
}
.news-card-full > a.image-detail-link > img{
  width:100%!important;
  height:220px!important;
  object-fit:cover!important;
}

/* Bài nổi bật: giữ đúng 420px như thiết kế ban đầu */
.news-featured-image > a.image-detail-link{
  width:100%!important;
  height:420px!important;
  min-height:420px!important;
}
.news-featured-image > a.image-detail-link > img{
  width:100%!important;
  height:420px!important;
  object-fit:cover!important;
}




/* ===== SẢN PHẨM / TRÀ XANH: HERO FULL-WIDTH GIỐNG TAB CHÍNH ===== */
.product-green-tea-hero img{
  transform:none;
}
.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}



/* ===== VÙNG NGUYÊN LIỆU: ẢNH BÀI CHI TIẾT GIỮ ĐÚNG TỶ LỆ ===== */
.vung-nguyen-lieu-fix-marker{display:none}
.article-wrap > img.article-cover,
.article-wrap .article-cover{
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  max-height:620px!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}


/* ===== TRÀ XANH: WATERMARK MỜ BÊN TRÁI HERO ===== */
.product-green-tea-hero{
  isolation:isolate;
}
.product-green-tea-hero img{
  z-index:0;
}


/* ===== TRÀ XANH V2: HIỆN ĐỦ SẢN PHẨM + WATERMARK RẤT MỜ ===== */


/* ===== TRÀ XANH HERO V5: GIỮ TRỌN ĐẦU + CHÂN BAO BÌ ===== */



/* ===== TRÀ XANH HERO V7: BẢN RỘNG HƠN 30%, GIẢM CẮT ĐẦU CHÂN ===== */


/* ===== TRÀ XANH HERO FINAL 1708 ===== */



/* ===== TRÀ XANH HERO FINAL 1713: GIẢM CHIỀU CAO KHUNG GIỐNG BẢN TRƯỚC ===== */
.product-green-tea-hero img{
  margin:auto !important;
}



/* ===== TRÀ XANH HERO 1920x350 FINAL ===== */
.product-green-tea-hero-overlay,
.product-green-tea-hero::after{
  display:none!important;
}


/* ===== TRÀ XANH HERO 1920x350 - WATERMARK MỜ BÊN TRÁI GIỐNG TAB CHÍNH ===== */
.product-green-tea-hero{
  position:relative!important;
  width:100vw!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1920 / 350!important;
  margin-left:calc(50% - 50vw)!important;
  overflow:hidden!important;
  background:#f7f2e7!important;
}
.product-green-tea-hero img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:fill!important;
  object-position:center center!important;
}
.product-green-tea-hero-overlay{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    rgba(255,250,240,.36) 0%,
    rgba(255,250,240,.22) 16%,
    rgba(255,250,240,.10) 26%,
    rgba(255,250,240,0) 42%,
    rgba(255,250,240,0) 100%)!important;
  z-index:1!important;
}
.product-green-tea-hero::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:4.2%!important;
  top:50%!important;
  width:170px!important;
  height:170px!important;
  transform:translateY(-50%)!important;
  background:url("../img/favicon-uploaded-large-20260812-v6-512.png") center/contain no-repeat!important;
  opacity:.022!important;
  pointer-events:none!important;
  z-index:2!important;
}



/* ===== HERO ĐỒNG BỘ TẤT CẢ MỤC SẢN PHẨM 1920x350 ===== */
.product-universal-hero{
  position:relative!important;
  width:100vw!important;
  max-width:none!important;
  aspect-ratio:1920 / 350!important;
  margin-left:calc(50% - 50vw)!important;
  overflow:hidden!important;
  background:#f7f2e7!important;
}
.product-universal-hero img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  object-position:center center!important;
}
.product-universal-hero::before,
.product-universal-hero::after{
  display:none!important;
  content:none!important;
}



/* ===== TRÀ XANH HERO: ANIMATION NHẸ BẰNG CSS =====
   Không thay kích thước 1920x350, không crop thêm ảnh. */
.product-universal-hero.is-animated-green-tea{
  isolation:isolate;
  animation:tnHeroEnter .9s cubic-bezier(.2,.7,.2,1) both;
}
.product-universal-hero.is-animated-green-tea > img{
  position:relative!important;
  z-index:0;
  transform:none!important;
  animation:tnImageBreathe 12s ease-in-out infinite alternate;
  will-change:filter;
}

/* Lớp sương trắng-be nhẹ ở bên trái, trôi rất chậm */
.product-universal-hero.is-animated-green-tea .tn-hero-mist{
  position:absolute;
  inset:-20% 35% -20% -10%;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 24% 52%,
      rgba(255,250,242,.38) 0%,
      rgba(255,250,242,.22) 28%,
      rgba(255,250,242,.08) 48%,
      rgba(255,250,242,0) 70%);
  filter:blur(12px);
  opacity:.62;
  animation:tnMistMove 10s ease-in-out infinite alternate;
  will-change:transform,opacity;
}

/* Ánh sáng vàng rất nhẹ ở vùng đồi trà, không che sản phẩm */
.product-universal-hero.is-animated-green-tea .tn-hero-sunlight{
  position:absolute;
  inset:-25% -8% -25% 42%;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 68% 20%,
      rgba(255,245,207,.18) 0%,
      rgba(255,245,207,.07) 22%,
      rgba(255,245,207,0) 48%);
  opacity:.48;
  animation:tnSunGlow 9s ease-in-out infinite alternate;
  will-change:transform,opacity;
}

.product-universal-hero.is-animated-green-tea .visually-hidden{
  z-index:2;
}

@keyframes tnHeroEnter{
  from{opacity:.15}
  to{opacity:1}
}
@keyframes tnImageBreathe{
  0%{filter:brightness(1) saturate(1)}
  100%{filter:brightness(1.018) saturate(1.025)}
}
@keyframes tnMistMove{
  0%{transform:translate3d(-1.2%,0,0);opacity:.50}
  100%{transform:translate3d(1.6%,-.6%,0);opacity:.68}
}
@keyframes tnSunGlow{
  0%{transform:translate3d(-.5%,.4%,0);opacity:.36}
  100%{transform:translate3d(.7%,-.3%,0);opacity:.56}
}

/* Tôn trọng người dùng chọn giảm chuyển động */



/* ===== FINAL PRODUCT HERO STRUCTURE 2026-08-13 ===== */
/* Trang Sản phẩm tổng dùng .tn-hero-v2 giống Trang chủ.
   Chỉ trang sản phẩm con dùng banner sản phẩm riêng. */
.product-universal-hero.green-tea-product-hero{
  position:relative!important;
  width:100vw!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1920 / 350!important;
  margin-left:calc(50% - 50vw)!important;
  overflow:hidden!important;
  isolation:isolate;
  background:#f7f2e7!important;
}
.product-universal-hero.green-tea-product-hero::before,
.product-universal-hero.green-tea-product-hero::after{
  display:none!important;
  content:none!important;
}
.product-universal-hero.green-tea-product-hero > .green-tea-hero-bg{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  object-position:center!important;
  filter:none!important;
  animation:none!important;
}

.green-tea-product-hero .green-tea-hero-copy{
  position:absolute!important;
  /* canh tâm ảnh chữ trùng tuyệt đối với trục giữa logo đầu trang */
  left:calc(max(18px, (100vw - 1180px)/2) - 149px)!important;
  top:50%!important;
  z-index:1!important;
  width:408px!important;
  max-width:21.25vw!important;
  height:auto!important;
  object-fit:contain!important;
  transform:translateY(-50%)!important;
  pointer-events:none!important;
  filter:none!important;
}
.green-tea-product-hero .green-tea-hero-products{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.green-tea-product-hero .green-tea-product{
  position:absolute!important;
  width:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  opacity:0;
  transform:translate3d(0,9px,0) scale(.992);
  transform-origin:50% 100%;
  filter:drop-shadow(0 10px 12px rgba(35,45,31,.16));
  animation:tnProductSlowLoop 14s cubic-bezier(.22,.61,.36,1) infinite both!important;
}
.green-tea-product-hero .green-tea-product-can{
  left:56.8%; bottom:5.2%; height:76%!important;
  animation-delay:0s!important;
  z-index:2;
}
.green-tea-product-hero .green-tea-product-pouch{
  left:66.3%; bottom:3.2%; height:90%!important;
  animation-delay:1.35s!important;
  z-index:3;
}
.green-tea-product-hero .green-tea-product-box{
  left:77.4%; bottom:6.2%; width:20.2%!important; height:auto!important;
  animation-delay:2.7s!important;
  z-index:2;
}
@keyframes tnProductSlowLoop{
  0%,8%{opacity:0;transform:translate3d(0,12px,0) scale(.988)}
  20%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  68%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  82%{opacity:0;transform:translate3d(0,7px,0) scale(.995)}
  100%{opacity:0;transform:translate3d(0,12px,0) scale(.988)}
}








/* ===== PRODUCT DETAIL HERO SHARED SYSTEM 2026-08-13 ===== */
.product-universal-hero.tn-product-detail-hero{
  position:relative!important;
}
.product-universal-hero.tn-product-detail-hero .tn-product-hero-panel{
  position:absolute!important;
  right:max(18px, calc((100vw - 1180px)/2))!important;
  top:22px!important;
  bottom:22px!important;
  width:min(30%, 350px)!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  padding:14px 14px 10px!important;
  border-radius:24px!important;
  background:linear-gradient(180deg, rgba(255,248,236,.68) 0%, rgba(255,248,236,.90) 100%)!important;
  border:1px solid rgba(122,90,42,.10)!important;
  box-shadow:0 14px 32px rgba(34,42,24,.12)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;
  z-index:2!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.product-universal-hero.tn-product-detail-hero .tn-product-hero-photo{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  border-radius:18px!important;
}
.product-universal-hero.tn-product-detail-hero.oolong-hero-card .tn-product-hero-panel{
  width:min(33%, 390px)!important;
}
.product-universal-hero.tn-product-detail-hero.gift-hero-card .tn-product-hero-panel,
.product-universal-hero.tn-product-detail-hero.accessory-hero-card .tn-product-hero-panel{
  width:min(31%, 360px)!important;
}



/* ===== OOLONG HERO: GIỮ NGUYÊN NỀN + ẢNH CHỮ, CHỈ THAY 2 SẢN PHẨM ===== */
.oolong-product-hero .oolong-hero-products{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
}
.oolong-product-hero .oolong-product{
  position:absolute!important;
  width:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  opacity:0;
  transform:translate3d(0,9px,0) scale(.992);
  transform-origin:50% 100%;
  filter:drop-shadow(0 10px 12px rgba(35,45,31,.16));
  animation:tnOolongSlowLoop 14s cubic-bezier(.22,.61,.36,1) infinite both!important;
}
.oolong-product-hero .oolong-product-can{
  left:62.5%!important;
  bottom:4.8%!important;
  height:78%!important;
  animation-delay:0s!important;
  z-index:2!important;
}
.oolong-product-hero .oolong-product-pouch{
  left:73.5%!important;
  bottom:3.2%!important;
  height:91%!important;
  animation-delay:1.35s!important;
  z-index:3!important;
}
@keyframes tnOolongSlowLoop{
  0%,8%{opacity:0;transform:translate3d(0,12px,0) scale(.988)}
  20%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  68%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  82%{opacity:0;transform:translate3d(0,7px,0) scale(.995)}
  100%{opacity:0;transform:translate3d(0,12px,0) scale(.988)}
}




/* ===== GALLERY CHI TIẾT SẢN PHẨM 2026-08-13 ===== */
.product-detail-top{
  align-items:start!important;
}
.product-detail-top .tn-product-gallery-shell{
  padding:14px!important;
  overflow:hidden!important;
}
.tn-product-gallery{
  width:100%;
}
.tn-product-gallery-main{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:18px;
  overflow:hidden;
  background:#fffdf8;
}
.tn-product-gallery-zoom{
  position:relative;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:zoom-in;
}
.product-detail-top .tn-product-gallery-main-img{
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:0!important;
  display:block!important;
  transition:opacity .18s ease, transform .25s ease!important;
}
.tn-product-gallery-zoom:hover .tn-product-gallery-main-img{
  transform:scale(1.018);
}
.tn-product-gallery-zoom-hint{
  position:absolute;
  right:12px;
  bottom:12px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(23,63,45,.84);
  color:#fff;
  font-size:11px;
  line-height:1;
  letter-spacing:.04em;
  opacity:.82;
  pointer-events:none;
}
.tn-product-gallery-thumbs{
  display:flex;
  gap:10px;
  margin-top:12px;
  overflow-x:auto;
  padding:2px 1px 5px;
  scrollbar-width:thin;
  scroll-snap-type:x proximity;
}
.tn-product-gallery-thumb{
  flex:0 0 78px;
  width:78px;
  height:78px;
  padding:5px;
  border:1px solid #ded6c4;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  scroll-snap-align:start;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tn-product-gallery-thumb:hover{
  transform:translateY(-1px);
  border-color:#c9a24d;
}
.tn-product-gallery-thumb.is-active{
  border:2px solid #c9a24d;
  box-shadow:0 0 0 2px rgba(201,162,77,.12);
}
.product-detail-top .tn-product-gallery-thumb img{
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  border-radius:8px!important;
  display:block!important;
}

/* Lightbox */
.tn-gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(10,18,14,.90);
  padding:26px;
}
.tn-gallery-lightbox.is-open{
  display:flex;
}
.tn-gallery-lightbox-stage{
  position:relative;
  width:min(1000px,92vw);
  height:min(760px,86vh);
  display:flex;
  align-items:center;
  justify-content:center;
}
.tn-gallery-lightbox-img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.tn-gallery-lightbox-close,
.tn-gallery-lightbox-prev,
.tn-gallery-lightbox-next{
  position:absolute;
  border:0;
  background:rgba(255,255,255,.92);
  color:#173f2d;
  cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.18);
}
.tn-gallery-lightbox-close{
  top:-8px;
  right:-8px;
  width:42px;
  height:42px;
  border-radius:50%;
  font-size:25px;
  line-height:1;
}
.tn-gallery-lightbox-prev,
.tn-gallery-lightbox-next{
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:56px;
  border-radius:12px;
  font-size:30px;
}
.tn-gallery-lightbox-prev{left:-56px}
.tn-gallery-lightbox-next{right:-56px}




/* ===== CANH ĐÁY GALLERY = ĐÁY KHỐI LIÊN HỆ TƯ VẤN ===== */



/* ===== Sản phẩm WordPress động v1.1 ===== */



/* v1.7.3: 2 ảnh banner dùng cùng một tỷ lệ hiển thị.
   File 1000x1000 không còn bị ảnh thứ hai phóng lớn hơn ảnh thứ nhất. */





.tn-product-info-panel{min-width:0}




/* ===== THIÊN NAM – GIÁ SẢN PHẨM v1.3 ===== */
.tn-product-price-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:18px 0 16px;
  padding:14px 16px;
  border:1px solid rgba(201,162,77,.28);
  border-radius:14px;
  background:#fff8e8;
}
.tn-product-price-label{
  color:#66736c;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}
.tn-product-price-value{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:9px;
  color:#b66f00;
  font-weight:800;
}
.tn-price-current,
.tn-price-sale{
  color:#b66f00;
  font-size:25px;
  line-height:1;
  font-weight:800;
}
.tn-price-old{
  color:#8a8f8c;
  font-size:14px;
  font-weight:500;
}
.tn-price-contact{
  color:#173f2d;
  font-size:19px;
  font-weight:800;
}
.tn-table-price .tn-price-current,
.tn-table-price .tn-price-sale{
  font-size:18px;
}
.tn-table-price .tn-price-contact{
  font-size:16px;
}




/* ===== KHỐI NỘI DUNG DƯỚI CHI TIẾT SẢN PHẨM v1.4.3 ===== */
.single-tn_product .product-story,
body.single-tn_product .product-story{border-top:1px solid rgba(23,63,45,.05)}


body.single-tn_product .product-cta .btn.green{
  white-space:nowrap;
}



/* ===== TỪ VÙNG TRÀ ĐẾN TRẢI NGHIỆM THIÊN NAM v1.4.4 ===== */
body.page .article-content + .process-grid{margin-top:28px}
body.page .brand-grid .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}



/* ===== CANH ĐỀU HAI BÊN – BÀI VIẾT CHI TIẾT v1.4.5 ===== */
/* Tin tức, Vùng nguyên liệu và các nội dung bài chi tiết */
.article-content p,
.article-wrap .article-content p,
.entry-content p,
.single-post .entry-content p,
.page .article-content p,
.page .article-wrap p:not(.article-meta),
.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:justify!important;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* Giữ tiêu đề, nút, breadcrumb, metadata và các khối điều hướng không bị justify */
.article-meta,
.breadcrumb,
.kicker,
.section-head,
.actions,
.article-nav,
.btn,
.link,
h1,h2,h3,h4,h5,h6{
  text-align:initial;
}

/* Trên màn hình rất hẹp, giảm hiện tượng khoảng trắng giữa từ quá lớn */



/* ===== v1.5.2 – PRODUCT DETAIL HERO MOBILE TALLER =====
   Chỉ tăng chiều cao banner hero ở trang chi tiết sản phẩm trên mobile.
   Desktop giữ nguyên tỷ lệ 1920x350. */





/* ===== v1.5.3 – MOBILE PRODUCT HERO: ONE PRODUCT AT A TIME =====
   Mobile: mỗi lần chỉ hiện 1 packshot, fade nhẹ và lặp liên tục.
   Desktop giữ nguyên bố cục/animation hiện tại.
*/





/* ===== v1.5.4 – CANH GIỮA ẢNH CHỮ HERO SO VỚI LOGO TRÊN MOBILE =====
   Căn tâm file ảnh chữ “Trà Thiên Nam” theo trục giữa của logo header ở mobile.
   Desktop giữ nguyên. */





/* ===== v1.5.5 – MOBILE: BỎ ẢNH CHỮ “TRÀ THIÊN NAM” TRONG BANNER HERO ===== */



/* ===== v1.5.6 – FIX HERO PRODUCT ROTATION =====
   Gỡ delay inline để mobile có thể chạy đúng từng ảnh riêng biệt.
   Desktop: giữ kiểu xuất hiện lần lượt nhẹ.
   Mobile: mỗi thời điểm chỉ có một sản phẩm; hỗ trợ 1, 2 hoặc 3 ảnh. */

/* Desktop/tablet rộng: khôi phục stagger như trước sau khi bỏ inline style. */







/* ===== v1.5.7 – MOBILE HERO ROTATOR ROBUST =====
   Không phụ thuộc count/keyframes cũ. Ảnh đầu tiên luôn hiện ngay;
   JS chỉ đổi class active để luân phiên ảnh tiếp theo. */




/* ======================================================================
   THIÊN NAM v1.6.0 — RESPONSIVE STABLE
   0–599px    : MOBILE
   600–1024px : TABLET (desktop-like, thu gọn hợp lý)
   >=1025px   : DESKTOP (giữ nguyên desktop nền v1.5.7)
   ====================================================================== */

/* ---------------- TABLET 600–1024 ---------------- */


/* ---------------- MOBILE 0–599 ---------------- */


/* ---------------- DESKTOP >=1024 ----------------
   Không thêm override bố cục: desktop dùng nguyên các rule nền v1.5.7.
   Chỉ bảo đảm menu mobile và rotator không can thiệp. */



/* ======================================================================
   v1.6.1 — TABLET PRODUCT DETAIL BALANCE
   Chỉ sửa 600–1024px. Không tác động mobile <600 hoặc desktop >=1024.
   ====================================================================== */

/* Tablet nhỏ: ảnh trên, thông tin dưới — thoáng và dễ đọc */


/* Tablet lớn: vẫn 2 cột, nhưng gallery vuông độc lập, không kéo tới nút Đặt hàng */



/* ======================================================================
   v1.6.2 — TABLET PRODUCT INFO COMPACT
   Chỉ tablet lớn 768–1024px: rút ngắn chiều cao khối thông tin bên phải.
   Mobile và desktop không thay đổi.
   ====================================================================== */



/* ===== v1.6.3 – GIÁ BÁN TRÊN CARD TRANG SẢN PHẨM ===== */










/* ======================================================================
   v1.6.5 — CARD SẢN PHẨM TỔNG ỔN ĐỊNH
   Giữ nguyên HTML và cơ chế giá v1.6.3.
   ====================================================================== */



/* Giá động của v1.6.3 nằm trước link cũ; margin-top:auto đẩy giá xuống đáy. */

/* Bỏ dòng “Đọc bài chi tiết →” nhưng giữ link trong DOM để JS lấy URL. */











/* ======================================================================
   v1.6.6 — CARD SẢN PHẨM: GIÁ + SỐ LƯỢNG | ĐẶT HÀNG | MUA NGAY
   ====================================================================== */


























/* ======================================================================
   v1.6.7 — GIÁ + HÀNG THAO TÁC NẰM DƯỚI CÙNG CARD
   ====================================================================== */




/* ======================================================================
   v1.6.8 — NÚT THÊM VÀO GIỎ HÀNG + THÔNG BÁO
   ====================================================================== */


.tn-cart-toast{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:99999;
  max-width:min(380px,calc(100vw - 32px));
  padding:14px 18px;
  border-radius:10px;
  background:#173f2d;
  color:#fff8e9;
  box-shadow:0 14px 38px rgba(0,0,0,.22);
  font-size:14px;
  font-weight:800;
  line-height:1.35;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.tn-cart-toast.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}




/* ======================================================================
   v1.6.9 — CARD SẢN PHẨM: GIÁ | THÊM VÀO GIỎ | − 1 +
   ====================================================================== */

/* Cụm dưới cùng của card thành 1 hàng duy nhất. */


/* Giá đặt sát đáy phần nội dung, căn trái như mẫu. */





/* Dòng thao tác nằm ngay dưới giá. */


/* Nút Thêm vào giỏ giống phong cách tối giản của mẫu. */



/* Số lượng: − 1 + nằm bên phải cùng hàng. */






/* Tablet */


/* Mobile */



/* ======================================================================
   v1.6.10 — HÀNG MUA TỐI GIẢN: GIÁ | THÊM VÀO GIỎ | − 1 +
   ====================================================================== */

/* Một hàng duy nhất ở đáy card. */


/* Giá bên trái – nhỏ, rõ, không label. */


/* THÊM VÀO GIỎ: chữ thuần, không khung, không nền. */


/* − 1 + tối giản, bỏ toàn bộ khung bao. */


/* Tablet: thu nhỏ nhẹ nhưng vẫn 1 hàng. */


/* Mobile: vẫn giữ một hàng, tối ưu khoảng cách. */



/* ======================================================================
   v1.6.11 — HÀNG MUA SẠCH HƠN
   - Bỏ gạch ngang trên giá
   - Hover "THÊM VÀO GIỎ" không gạch chân
   ====================================================================== */



/* ======================================================================
   v1.6.12 — THU NGẮN KHOẢNG CÁCH TRƯỚC HÀNG GIÁ
   ====================================================================== */


/* v1.6.13: thông báo thêm giỏ do plugin Thiên Nam – Giỏ hàng quản lý */
#tn-cart-toast{
  display:none!important;
}


/* ======================================================================
   v1.6.14 — CARD SẢN PHẨM FINAL
   Tên → mô tả → 1 line phân cách → Giá | Thêm vào giỏ | − 1 +
   ====================================================================== */

/* Giữ đúng nhịp nội dung, không tạo khoảng trắng quá lớn trước hàng mua. */


/* Chỉ còn MỘT đường phân cách dài: nằm dưới mô tả. */


/* Không có bất kỳ gạch ngắn nào nằm trên giá. */


/* Hàng cuối cùng: 3 cụm cùng một dòng và cân giữa theo chiều dọc. */


/* Giá: serif mềm, nổi bật vừa đủ, không quá nặng. */






/* "Thêm vào giỏ": nhỏ hơn giá, mềm hơn, không viết hoa, không gạch chân. */



/* − 1 +: gọn, cùng trục giữa, khoảng cách vừa phải. */






/* Tablet: giữ cùng một hàng, giảm cỡ để không chật. */


/* Mobile: vẫn 1 hàng, chữ nhỏ hơn nhưng dễ bấm/đọc. */



/* ======================================================================
   v1.6.15 — THU GỌN KHOẢNG TRẮNG QUANH HÀNG GIÁ
   Giữ nguyên 1 line phân cách, chỉ giảm khoảng trên/dưới hàng mua.
   ====================================================================== */






/* v1.6.16 — Sản phẩm giá "Liên hệ" không được thêm vào giỏ */




/* ======================================================================
   v1.6.17 — Thu gọn thêm khoảng trống trên/dưới hàng giá cho hài hòa hơn
   Đề xuất: trên ~6px, dưới ~8px desktop; mobile ngắn hơn nhẹ.
   ====================================================================== */






/* ======================================================================
   v1.6.18 — Thu gọn mạnh hơn khoảng trống trên/dưới hàng giá
   ====================================================================== */






/* ======================================================================
   v1.6.19 — Cố định khoảng cách hàng giá theo yêu cầu
   line -> hàng giá: 4px | hàng giá -> đáy card: 4px
   ====================================================================== */













/* ======================================================================
   v1.6.20 — Làm mềm font giá và cân dọc cụm mua hàng
   ====================================================================== */

















/* ======================================================================
   v1.7.7 — TIN TỨC: TIÊU ĐỀ CLICK ĐƯỢC + HOVER ĐỔI MÀU
   ====================================================================== */
.news-card-full h3 .tn-news-title-link,
.news-featured-copy h2 .tn-news-title-link{
  color:inherit;
  text-decoration:none;
  transition:color .22s ease;
}

.news-card-full h3 .tn-news-title-link:hover,
.news-card-full h3 .tn-news-title-link:focus-visible,
.news-featured-copy h2 .tn-news-title-link:hover,
.news-featured-copy h2 .tn-news-title-link:focus-visible{
  color:var(--gold2);
}

.news-card-full h3 .tn-news-title-link:focus-visible,
.news-featured-copy h2 .tn-news-title-link:focus-visible{
  outline:2px solid rgba(201,162,77,.55);
  outline-offset:3px;
  border-radius:3px;
}

/* Con trỏ cho 3 điểm điều hướng bài viết */
.news-card-full > a.image-detail-link,
.news-card-full h3 .tn-news-title-link,
.news-card-full .content > a.link,
.news-featured-image a.image-detail-link,
.news-featured-copy h2 .tn-news-title-link,
.news-featured-copy a.btn{
  cursor:pointer;
}


/* ===== v1.7.33 – ĐỔI THỨ TỰ TIÊU ĐỀ / BADGE Ở PANEL CHI TIẾT SẢN PHẨM ===== */
.tn-product-info-panel > h2{
  margin-bottom:10px;
}
.tn-product-info-panel > .badge{
  margin-bottom:18px;
}


/* v1.10.67 DEV — Liên hệ: cân lại heading 2 khung */
.contact-info-panel > h3{
  font-size:clamp(20px,1.7vw,22px);
  line-height:1.14;
  font-weight:600;
  letter-spacing:0;
  text-wrap:balance;
}
.contact-form-card > h3{
  font-size:clamp(22px,1.95vw,24px);
  line-height:1.14;
  font-weight:600;
  letter-spacing:0;
  text-wrap:balance;
}
@media (max-width:599px){
  .contact-info-panel > h3{font-size:21px;line-height:1.16}
  .contact-form-card > h3{font-size:23px;line-height:1.16}
}

/* v1.10.68 — official purchase slot for Thiên Nam Cart; fallback remains usable without plugin. */
.tn-product-purchase-slot{display:contents}

/* v1.11.21 PREPROD — Liên hệ: tạo nhịp rõ giữa kicker và tiêu đề 2 panel */
.contact-info-panel > .kicker,
.contact-form-card > .kicker{
  display:block;
  margin:0 0 11px!important;
}
.contact-info-panel > h3,
.contact-form-card > h3{
  margin-top:0!important;
}
@media (max-width:599px){
  .contact-info-panel > .kicker,
  .contact-form-card > .kicker{
    margin-bottom:9px!important;
  }
}