/* ===== Thảo Mộc Uyên Nhiên — style dùng chung ===== */
:root{
  --green-900:#233d2a; --green-800:#28492f; --green-700:#2f5d3a; --green-500:#5c8a5a; --green-300:#9cbf95;
  --earth-700:#6b4f38; --earth-500:#8a6d4b; --earth-300:#d9c7ac;
  --honey:#d3a24a; --honey-dark:#b9852f;
  --cream:#f7f3ea; --cream-2:#efe8d8; --paper:#fbf9f3;
  --ink:#2b2a24; --ink-soft:#5a564c;
  --radius:18px; --shadow:0 18px 50px -20px rgba(35,61,42,.35);
  --maxw:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--ink);background:var(--paper);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.serif{font-family:'Playfair Display',Georgia,serif;line-height:1.18;color:var(--green-900)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-700)}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--honey)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:1rem;padding:14px 28px;
  border-radius:999px;cursor:pointer;border:1.5px solid transparent;transition:.25s;white-space:nowrap}
.btn-primary{background:var(--green-700);color:#fff;box-shadow:0 12px 26px -12px rgba(47,93,58,.7)}
.btn-primary:hover{background:var(--green-900);transform:translateY(-2px)}
.btn-ghost{border-color:var(--green-300);color:var(--green-900);background:rgba(255,255,255,.4)}
.btn-ghost:hover{background:#fff;border-color:var(--green-700)}
.btn-zalo{background:#0068ff;color:#fff}.btn-zalo:hover{background:#0055d6;transform:translateY(-2px)}
section{padding:88px 0}.center{text-align:center}
.lead{font-size:1.12rem;color:var(--ink-soft);max-width:640px}.center .lead{margin-left:auto;margin-right:auto}
.sec-title{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:14px 0 12px}

/* HEADER */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:rgba(251,249,243,.85);border-bottom:1px solid rgba(107,79,56,.12)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Playfair Display',serif;font-weight:700;
  font-size:1.28rem;color:var(--green-900)}
.brand .leaf{width:34px;height:34px;flex:0 0 auto}
.menu{display:flex;gap:28px;font-weight:500;font-size:.98rem}
.menu a{color:var(--ink-soft);transition:.2s;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--green-700)}
.menu a.active{color:var(--green-900);border-bottom-color:var(--honey)}
.nav-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;background:none;border:0;cursor:pointer}

/* PAGE HERO (trang con) */
.page-hero{padding:64px 0 54px;background:
  radial-gradient(900px 420px at 82% -20%, rgba(156,191,149,.45), transparent 60%),
  linear-gradient(180deg,var(--cream),var(--paper))}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin:16px 0 14px}
.breadcrumb{font-size:.86rem;color:var(--ink-soft)}
.breadcrumb a:hover{color:var(--green-700)}

/* HERO (trang chủ) */
.hero{position:relative;padding:70px 0 92px;overflow:hidden;background:
  radial-gradient(1100px 520px at 82% -8%, rgba(156,191,149,.5), transparent 60%),
  radial-gradient(900px 500px at -6% 108%, rgba(211,162,74,.22), transparent 55%),
  linear-gradient(180deg,var(--cream),var(--paper))}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero h1{font-size:clamp(2.4rem,5vw,3.9rem);font-weight:700;margin:18px 0 20px}
.hero h1 em{color:var(--honey-dark);font-style:normal}
.hero .lead{font-size:1.18rem}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-trust{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap}
.hero-trust div{font-size:.9rem;color:var(--ink-soft)}
.hero-trust b{display:block;font-family:'Playfair Display',serif;font-size:1.5rem;color:var(--green-800)}
.hero-art{position:relative;aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 38% 32%, #fff6df 0 12%, transparent 12.5%),
  conic-gradient(from 200deg, #37623f, #5c8a5a, #9cbf95, #d9c7ac, #37623f);
  box-shadow:var(--shadow), inset 0 0 0 14px rgba(255,255,255,.35)}
.hero-cup{width:64%;filter:drop-shadow(0 20px 26px rgba(35,61,42,.4))}
.hero-badge{position:absolute;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:10px;font-size:.86rem;font-weight:600;color:var(--green-900)}
.hero-badge .dot{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--cream-2)}
.hero-badge.b1{top:6%;left:-4%}.hero-badge.b2{bottom:8%;right:-6%}

/* STRIP */
.strip{background:var(--green-900);color:#eaf1e6;padding:22px 0}
.strip .wrap{display:flex;flex-wrap:wrap;gap:14px 44px;justify-content:center;font-weight:500;font-size:.98rem}
.strip span{display:inline-flex;align-items:center;gap:9px}

/* STORY */
.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.story-art{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;position:relative;
  background:linear-gradient(160deg,#3a6b45,#6b4f38);box-shadow:var(--shadow);display:grid;place-items:center;
  color:#f4ead2;text-align:center;padding:30px}
.story-art .ph{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.sign{margin-top:22px;font-family:'Playfair Display',serif;font-style:italic;font-size:1.25rem;color:var(--green-700)}
.prose p+p{margin-top:16px}

/* PRODUCTS */
.prods{background:linear-gradient(180deg,var(--paper),var(--cream))}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(107,79,56,.1);
  box-shadow:0 14px 40px -26px rgba(35,61,42,.5);transition:.3s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card-top{aspect-ratio:16/12;display:grid;place-items:center;position:relative;font-size:3.4rem}
.card.g1 .card-top{background:radial-gradient(circle at 50% 40%,#cfe3c4,#7ba06f)}
.card.g2 .card-top{background:radial-gradient(circle at 50% 40%,#f0dca6,#d3a24a)}
.card.g3 .card-top{background:radial-gradient(circle at 50% 40%,#e6cdb0,#a67d54)}
.card.g4 .card-top{background:radial-gradient(circle at 50% 40%,#cfe0e6,#6f9aa6)}
.card-top .tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.9);font-size:.74rem;
  font-weight:600;color:var(--green-900);padding:5px 12px;border-radius:999px}
.card-body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:1.3rem;margin-bottom:8px}
.card-body p{color:var(--ink-soft);font-size:.96rem;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.price{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--honey-dark);font-weight:700}
.card .btn{padding:10px 18px;font-size:.9rem}

/* WHY */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:52px}
.why-item{background:#fff;border-radius:var(--radius);padding:30px 24px;text-align:center;border:1px solid rgba(107,79,56,.1)}
.why-ic{width:58px;height:58px;border-radius:16px;margin:0 auto 16px;display:grid;place-items:center;
  background:var(--cream-2);color:var(--green-700);font-size:1.6rem}
.why-item h3{font-size:1.16rem;margin-bottom:8px}
.why-item p{color:var(--ink-soft);font-size:.92rem}

/* PROCESS */
.proc{background:var(--green-900);color:#e9f0e4}.proc h2{color:#fff}.proc .lead{color:#c6d6c0}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:52px}
.step{padding:26px;border-radius:var(--radius);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.step b{font-family:'Playfair Display',serif;font-size:2rem;color:var(--honey)}
.step h3{color:#fff;font-size:1.14rem;margin:8px 0 6px}.step p{color:#c6d6c0;font-size:.92rem}

/* TESTIMONIALS */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.tst{background:#fff;border-radius:var(--radius);padding:30px;border:1px solid rgba(107,79,56,.1);
  box-shadow:0 14px 40px -28px rgba(35,61,42,.5)}
.stars{color:var(--honey);letter-spacing:3px;margin-bottom:12px}
.tst p{font-size:1.02rem;color:var(--ink);font-style:italic}
.tst .who{display:flex;align-items:center;gap:12px;margin-top:18px}
.tst .av{width:46px;height:46px;border-radius:50%;background:var(--green-300);display:grid;place-items:center;
  font-weight:700;color:var(--green-900);font-family:'Playfair Display',serif}
.tst .who b{display:block;color:var(--green-900)}.tst .who span{font-size:.85rem;color:var(--ink-soft)}
.note{margin-top:26px;font-size:.85rem;color:var(--ink-soft);text-align:center}

/* BLOG */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:14px}
.post{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(107,79,56,.1);
  box-shadow:0 14px 40px -26px rgba(35,61,42,.5);transition:.3s;display:flex;flex-direction:column}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post .thumb{aspect-ratio:16/10;display:grid;place-items:center;font-size:3rem}
.post.p1 .thumb{background:radial-gradient(circle at 50% 40%,#cfe3c4,#7ba06f)}
.post.p2 .thumb{background:radial-gradient(circle at 50% 40%,#f0dca6,#d3a24a)}
.post.p3 .thumb{background:radial-gradient(circle at 50% 40%,#e6cdb0,#a67d54)}
.post.p4 .thumb{background:radial-gradient(circle at 50% 40%,#cfe0e6,#6f9aa6)}
.post.p5 .thumb{background:radial-gradient(circle at 50% 40%,#e3cfdd,#a67ba0)}
.post.p6 .thumb{background:radial-gradient(circle at 50% 40%,#d8e0c0,#8a9a5b)}
.post .pb{padding:22px;display:flex;flex-direction:column;flex:1}
.post .cat{font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--honey-dark);margin-bottom:8px}
.post h3{font-size:1.24rem;margin-bottom:8px}
.post p{color:var(--ink-soft);font-size:.94rem;flex:1}
.post .more{margin-top:14px;font-weight:600;color:var(--green-700);font-size:.92rem}

/* CONTACT */
.cta{background:radial-gradient(700px 340px at 85% 0%, rgba(211,162,74,.28), transparent 60%),
  linear-gradient(160deg,var(--cream),var(--cream-2))}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
.contact-card{background:#fff;border-radius:26px;padding:40px;box-shadow:var(--shadow);border:1px solid rgba(107,79,56,.12)}
.contact-list{margin-top:22px;display:grid;gap:14px}
.contact-list a,.contact-list div{display:flex;align-items:center;gap:13px;font-weight:500;color:var(--ink)}
.contact-list .ic{width:44px;height:44px;border-radius:13px;background:var(--cream-2);display:grid;place-items:center;
  color:var(--green-700);flex:0 0 auto}
.form{display:grid;gap:16px}
.form label{font-weight:600;font-size:.92rem;color:var(--green-900);display:block;margin-bottom:6px}
.form input,.form textarea,.form select{width:100%;padding:13px 15px;border:1.5px solid var(--earth-300);
  border-radius:12px;font-family:inherit;font-size:1rem;background:#fff;color:var(--ink);transition:.2s}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--green-500);
  box-shadow:0 0 0 3px rgba(92,138,90,.15)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* FOOTER */
footer{background:var(--green-900);color:#b9cbb2;padding:60px 0 30px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-grid .brand{color:#fff;margin-bottom:14px}
footer h4{color:#fff;font-family:'Be Vietnam Pro';font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
footer a{color:#b9cbb2;display:block;margin-bottom:9px;transition:.2s}footer a:hover{color:var(--honey)}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:22px;color:#8ea486}

/* RESPONSIVE */
@media(max-width:900px){
  section{padding:60px 0}
  .hero-grid,.story-grid,.contact-grid{grid-template-columns:1fr}
  .hero-art{max-width:360px;margin:0 auto}.story-art{order:-1;max-width:420px;margin:0 auto}
  .cards,.why-grid,.steps,.tst-grid,.post-grid{grid-template-columns:1fr 1fr}
  .menu{display:none;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:var(--paper);
    padding:14px 22px;gap:6px;border-bottom:1px solid rgba(107,79,56,.15);box-shadow:var(--shadow)}
  .menu.open{display:flex}
  .burger{display:block}
}
@media(max-width:560px){
  .cards,.why-grid,.steps,.tst-grid,.post-grid,.form .row{grid-template-columns:1fr}
  .hero-trust{gap:18px}.nav-cta .btn-ghost{display:none}.contact-card{padding:28px 22px}
}