/*! Green Uni · main.css · v12 — Design tokens ở mục 0. Không đổi mã màu thương hiệu. */
/* =========================================================
   0. DESIGN TOKENS — chỉnh màu / font tại đây
   ========================================================= */
:root{
  --green:#003B30;       /* 60% – Dark Green */
  --forest:#002419;      /* Deep Forest – gradient */
  --white:#FFFFFF;
  --cream:#F5EFE0;       /* 30% */
  --black:#0A0A0A;
  --gold:#B08A3B;        /* 10% – Gold Luxury */
  --gold2:#C8A15A;       /* Gold Premium */
  --muted:#5E6460;
  --line:rgba(176,138,59,.35);
  --gold-ink:#7D5F22;    /* Gold đậm cho chữ nhỏ trên nền sáng – đạt WCAG AA */
  --line-soft:#EEE7D6;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Montserrat",system-ui,sans-serif;
  --r:6px;
  --shadow:0 18px 40px -22px rgba(0,36,25,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 15.5px/1.75 var(--sans);color:var(--black);background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0}
p{margin:0}
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}
.section{padding:clamp(72px,9vw,120px) 0;position:relative}
.eyebrow{display:inline-block;font:600 12px/1.4 var(--sans);letter-spacing:3px;text-transform:uppercase;color:var(--gold-ink)}
.on-dark .eyebrow,.hero .eyebrow,.page-hero .eyebrow{color:var(--gold2)}
.h2{font-size:clamp(32px,3.4vw,40px);color:var(--green);margin-top:12px}
.h2 em{font-style:italic;color:var(--gold)}
.head{text-align:center;max-width:720px;margin:0 auto clamp(40px,5vw,64px)}
.head::after{content:"";display:block;width:40px;height:1px;background:var(--gold);margin:22px auto 0}
.head p{color:var(--muted);margin-top:18px}
.on-dark .h2{color:var(--white)}
.on-dark .head p{color:rgba(255,255,255,.7)}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 12.5px/1 var(--sans);letter-spacing:1.6px;text-transform:uppercase;padding:17px 28px;border-radius:var(--r);border:1px solid var(--gold);transition:all .4s var(--ease);cursor:pointer}
.btn-gold{background:var(--gold2);border-color:var(--gold2);color:var(--forest)}
.btn-gold:hover{background:var(--gold);border-color:var(--gold);color:var(--forest);transform:translateY(-2px)}
.btn-line{color:var(--gold2)}
.btn-line:hover{background:rgba(200,161,90,.1)}
.btn svg{width:16px;height:16px}
.ico{display:block;width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
/* watermark G-leaf 5% */
.wm{position:absolute;pointer-events:none;opacity:.05;width:min(520px,60vw)}
/* fade-up khi cuộn */
.js .fu{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .fu.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .fu{opacity:1;transform:none}html{scroll-behavior:auto}}

/* =========================================================
   1. HEADER
   ========================================================= */
.hdr{position:fixed;inset:0 0 auto;z-index:50;transition:background .4s,box-shadow .4s,padding .4s;padding:22px 0}
.hdr.solid{background:rgba(0,59,48,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding:12px 0}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{height:50px;width:auto}
.nav{display:flex;gap:clamp(18px,2.2vw,34px)}
.nav a{font:500 12.5px/1 var(--sans);letter-spacing:1px;color:rgba(255,255,255,.86);position:relative;padding:8px 0;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold2);transition:right .4s var(--ease)}
.nav a:hover,.nav a.act{color:var(--white)}
.nav a:hover::after,.nav a.act::after{right:0}
.hot{display:flex;align-items:center;gap:12px;color:var(--white)}
.hot i{width:40px;height:40px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold2)}
.hot i svg{width:17px;height:17px}
.hot small{display:block;font:500 10px/1.3 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--gold2)}
.hot b{font:600 15px/1.3 var(--sans);letter-spacing:.5px}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:10px}
.burger span{display:block;height:1px;background:var(--white);margin:6px 0;transition:.4s}
.burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   2. HERO
   ========================================================= */
.hero{background:var(--green);color:var(--white);padding:150px 0 90px;overflow:hidden;position:relative}
.hero .wm{right:-120px;top:60px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,5vw,80px);align-items:center}
.hero h1{font-size:clamp(42px,4.6vw,64px);font-weight:600;margin:20px 0 22px;letter-spacing:-.5px}
.hero h1 em{font-style:italic;color:var(--gold2)}
.hero .lead{color:rgba(255,255,255,.76);max-width:520px;font-weight:300;font-size:16px}
.promise4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:38px 0 40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.promise4 div{padding:20px 14px 18px;text-align:center;border-right:1px solid var(--line)}
.promise4 div:last-child{border-right:0}
.promise4 .ico{color:var(--gold2);margin:0 auto 10px;width:30px;height:30px}
.promise4 span{font:500 12px/1.45 var(--sans);color:rgba(255,255,255,.86)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.hero-img{position:relative;justify-self:end;width:100%;max-width:450px}
.hero-img::after{content:"";position:absolute;inset:-18px 18px 18px -18px;border:1px solid var(--line);border-radius:var(--r);z-index:-1}
.hero-img .cut{--c:40px}
.hero-img img{position:relative;width:100%;aspect-ratio:619/1100;object-fit:cover;object-position:center top;border-radius:var(--r);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.hero-tag{position:absolute;left:-34px;bottom:44px;background:rgba(0,36,25,.82);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r);padding:16px 22px}
.hero-tag small{display:block;font:500 10px/1.4 var(--sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--gold2)}
.hero-tag b{font:italic 600 21px/1.3 var(--serif)}

/* =========================================================
   3. TRUST BAR
   ========================================================= */
.trust{padding:44px 0;border-bottom:1px solid #EEE7D6;background:var(--white)}
.trust p{text-align:center;font:500 12px/1.5 var(--sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1000px;margin:0 auto}
.logos .lg{height:96px;display:grid;place-items:center;border-right:1px solid #EEE7D6;padding:0 24px}
.logos .lg:last-child{border-right:0}
.logos img{width:auto;opacity:.72;transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.logos .seal img{max-height:78px}.logos .word img{max-height:46px;max-width:100%}
.logos .lg:hover img{opacity:1;transform:scale(1.04)}

/* =========================================================
   4. DANH MỤC SẢN PHẨM
   ========================================================= */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.cat{position:relative;border-radius:var(--r);aspect-ratio:3/4;background:var(--cream);box-shadow:var(--shadow);transition:transform .45s var(--ease)}
.cat>img{overflow:hidden}
.cat img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .9s var(--ease)}
.cat::after{content:"";position:absolute;inset:0;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);background:linear-gradient(180deg,rgba(0,36,25,0) 45%,rgba(0,36,25,.88) 100%)}
.cat-cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:var(--white)}
.cat-cap small{font:500 11px/1 var(--serif);font-style:italic;color:var(--gold2);font-size:16px}
.cat-cap h3{font-size:23px;margin-top:4px}
.cat-cap span{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font:500 10.5px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--gold2);opacity:0;transform:translateX(-8px);transition:.45s var(--ease)}
.cat:hover{transform:translateY(-4px)}
.cat:hover img{filter:brightness(1.06)}
.cat:hover .cat-cap span{opacity:1;transform:none}
/* khung placeholder ảnh */
.ph{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#EFE7D3 0 12px,#F5EFE0 12px 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px;text-align:center;color:var(--green)}
.ph svg{width:34px;height:34px;color:var(--gold);margin-bottom:12px}
.ph b{font:600 10.5px/1.4 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.ph i{font:italic 500 15px/1.45 var(--serif);margin-top:8px;color:#3d4a44}

/* =========================================================
   5. VÌ SAO CHỌN GREEN UNI
   ========================================================= */
.why{background:var(--green);color:var(--white);overflow:hidden}
.why .wm{left:-160px;bottom:-140px}
.why-grid{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line)}
.why-grid div{padding:38px 20px 10px;text-align:center;border-right:1px solid var(--line);transition:background .4s}
.why-grid div:last-child{border-right:0}
.why-grid div:hover{background:rgba(200,161,90,.06)}
.why-grid .ico{width:42px;height:42px;color:var(--gold2);margin:0 auto 18px}
.why-grid h3{font:600 15px/1.35 var(--sans);letter-spacing:.3px}
.why-grid p{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.66);margin-top:10px}

/* =========================================================
   6. GREEN PROMISE (độc quyền)
   ========================================================= */
.promise{background:var(--cream);overflow:hidden}
.promise .wm{right:-100px;top:-80px;opacity:.06}
.pr-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center}
.pr-imgs{position:relative;padding:0 60px 80px 0}
.pr-imgs .a{width:100%;aspect-ratio:754/1100;object-fit:cover;object-position:center top;border-radius:var(--r)}
.pr-imgs .b{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:13/16;object-fit:cover;object-position:center top;border-radius:var(--r);border:8px solid var(--cream);box-shadow:var(--shadow)}
.pr-imgs .leaf{position:absolute;left:-30px;bottom:24px;width:120px;color:var(--gold)}
.pr-text .h2{text-align:left}
.manifesto{font:italic 600 clamp(26px,2.6vw,34px)/1.3 var(--serif);color:var(--gold);margin:22px 0 18px}
.pr-text>p{color:#3D4743}
.g3{margin-top:36px;border-top:1px solid var(--line)}
.g3>div{display:grid;grid-template-columns:70px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.g3 b{font:600 44px/1 var(--serif);color:var(--gold)}
.g3 b small{font-size:22px;color:var(--green)}
.g3 h3{font-size:24px;color:var(--green)}
.g3 p{font-size:14px;color:var(--muted)}
.values{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.values span{font:500 11px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--green);border:1px solid var(--line);border-radius:40px;padding:11px 18px;background:rgba(255,255,255,.5)}

/* =========================================================
   7. DỰ ÁN TIÊU BIỂU (carousel)
   ========================================================= */
.pj-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px}
.pj-top .head{margin:0;text-align:left}
.pj-top .head::after{margin-left:0}
.arrows{display:flex;gap:10px}
.arrows button{width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--green);cursor:pointer;transition:.35s;display:grid;place-items:center}
.arrows button:hover{background:var(--green);color:var(--gold2);border-color:var(--green)}
.arrows svg{width:18px;height:18px}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px)/4);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.track::-webkit-scrollbar{display:none}
.pj{scroll-snap-align:start}
.pj figure{margin:0;border-radius:var(--r);aspect-ratio:3/4;position:relative}
.pj figure>img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .9s var(--ease)}
.pj:hover figure>img{filter:brightness(1.06)}
.pj-cap{padding:18px 2px 0;border-bottom:1px solid var(--line);padding-bottom:16px}
.pj-cap small{font:600 10.5px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--gold-ink)}
.pj-cap h3{font-size:22px;color:var(--green);margin-top:8px}
.pj-cap p{font-size:13.5px;color:var(--muted)}

/* =========================================================
   8. QUY TRÌNH 5 BƯỚC
   ========================================================= */
.process{background:var(--white);border-top:1px solid #EEE7D6}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;top:56px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 8%,var(--gold) 92%,transparent)}
.step{text-align:center;position:relative}
.ring{width:112px;height:112px;border-radius:50%;margin:0 auto 26px;border:1px solid var(--line);background:var(--white);display:grid;place-items:center;position:relative;transition:.45s var(--ease)}
.ring .ico{width:36px;height:36px;color:var(--green)}
.ring em{text-align:center;position:absolute;top:-4px;right:-4px;width:34px;height:34px;border-radius:50%;background:var(--gold2);color:var(--forest);font:600 15px/34px var(--serif);font-style:normal;box-shadow:0 6px 14px -6px rgba(176,138,59,.9)}
.step:hover .ring{background:var(--green);border-color:var(--green)}
.step:hover .ring .ico{color:var(--gold2)}
.step h3{font:600 16px/1.35 var(--sans);color:var(--green)}
.step p{font-size:13.5px;color:var(--muted);margin-top:8px;padding:0 6px}

/* =========================================================
   9. TESTIMONIALS
   ========================================================= */
.tst{background:linear-gradient(160deg,var(--forest),var(--green));overflow:hidden}
.tst .wm{right:-120px;bottom:-160px}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.t-card{clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%);background:rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:8px;padding:40px 34px 32px;color:var(--white);position:relative;transition:.45s var(--ease)}
.t-card:hover{transform:translateY(-4px);border-color:var(--gold2)}
.t-card .q{font:600 70px/0.6 var(--serif);color:var(--gold2);height:32px}
.t-card blockquote{margin:0;font:italic 500 20px/1.55 var(--serif);color:rgba(255,255,255,.9)}
.t-who{display:flex;align-items:center;gap:14px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.t-who i{width:48px;height:48px;border-radius:50%;border:1px dashed var(--gold);display:grid;place-items:center;font:500 9px/1.2 var(--sans);color:var(--gold2);text-align:center;font-style:normal}
.t-who b{display:block;font:600 14px/1.4 var(--sans)}
.t-who small{font-size:12.5px;color:rgba(255,255,255,.6)}

/* =========================================================
   10. CTA + FORM
   ========================================================= */
.cta{background:var(--cream)}
.cta-box{clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%);display:grid;grid-template-columns:.95fr 1.05fr;align-items:stretch;background:var(--white);border-radius:8px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(0,36,25,.5)}
.cta-img{position:relative;aspect-ratio:4/5;align-self:stretch}
.cta-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.cta-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,36,25,0) 58%,rgba(0,36,25,.82) 100%)}
.cta-img p{position:absolute;left:34px;right:34px;bottom:30px;z-index:2;color:var(--white);font:italic 600 24px/1.35 var(--serif)}
.cta-img p small{display:block;font:500 11px/1.5 var(--sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--gold2);font-style:normal;margin-top:10px}
.form{padding:clamp(34px,4.5vw,60px);align-self:center}
.form .h2{font-size:clamp(28px,2.8vw,36px)}
.form>p{color:var(--muted);margin:14px 0 30px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-grid .full{grid-column:1/-1}
.form label{display:block;font:600 11px/1 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.form input,.form select{width:100%;font:400 15px/1.4 var(--sans);padding:14px 16px;border:1px solid #E1D8C4;border-radius:var(--r);background:#FCFAF5;color:var(--black);transition:border .3s,box-shadow .3s;appearance:none}
.form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B08A3B' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.form input:focus,.form select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,138,59,.15)}
.form .btn{margin-top:24px;width:100%;justify-content:center}
.f-note{font-size:12.5px;color:var(--muted);margin-top:14px;text-align:center}
.f-ok{display:none;margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:#FBF7EC;font-size:14px;color:var(--green);text-align:center}

/* =========================================================
   11. FOOTER
   ========================================================= */
.ftr{background:var(--forest);color:rgba(255,255,255,.7);padding:80px 0 0;font-size:14px}
.f-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:56px;border-bottom:1px solid rgba(200,161,90,.2)}
.f-brand img{height:64px;width:auto}
.f-brand p{font:italic 500 19px/1.45 var(--serif);color:var(--gold2);margin:20px 0 6px}
.f-brand small{color:rgba(255,255,255,.55)}
.ftr h4{font:600 11px/1 var(--sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--gold2);margin:8px 0 22px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:11px}
.ftr li a:hover{color:var(--white)}
.f-contact li{display:flex;gap:12px}
.f-contact svg{flex:0 0 16px;width:16px;height:16px;color:var(--gold2);margin-top:5px}
.social{display:flex;gap:10px;margin-top:20px}
.social a{width:40px;height:40px;border:1px solid rgba(200,161,90,.4);border-radius:50%;display:grid;place-items:center;color:var(--gold2);transition:.35s;font:700 10px/1 var(--sans)}
.social a:hover{background:var(--gold);color:var(--white);border-color:var(--gold)}
.social svg{width:16px;height:16px}
.legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 0 30px;font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.3px}
.legal b{color:rgba(255,255,255,.75);font-weight:500}

/* =========================================================
   12. NÚT NỔI
   ========================================================= */
.float{position:fixed;right:20px;bottom:22px;z-index:60;display:flex;flex-direction:column;gap:12px}
.float a{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:0 12px 28px -10px rgba(0,0,0,.45);transition:transform .3s}
.float a:hover{transform:scale(1.08)}
.fz{background:var(--white);border:1px solid var(--line);color:#0068FF;font:700 13px/1 var(--sans)}
.fc{background:var(--gold2);color:var(--forest)}
.fc svg{width:22px;height:22px}



/* =========================================================
   SIGNATURE · CHỮ G CẮT GÓC (điểm nhấn riêng của Green Uni)
   ========================================================= */
/* 1. G khổng lồ tràn khỏi góc section – bị "cắt góc" bởi mép section */
.gcut{position:absolute;pointer-events:none;z-index:0;width:clamp(420px,52vw,760px);aspect-ratio:437/459}
.gcut svg{width:100%;height:100%}
.gcut.fill svg{fill:currentColor;opacity:.05}
.gcut.line svg{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.32}
.gcut.br{right:-14%;bottom:-22%}
.gcut.bl{left:-16%;bottom:-24%}
.gcut.tr{right:-12%;top:-20%}
.gcut.tl{left:-14%;top:-18%}
.gcut.gold{color:var(--gold2)}
.gcut.green{color:var(--green)}
.section>.wrap,.hero>.wrap,.ftr>.wrap{position:relative;z-index:1}
/* 2. Khung ảnh cắt góc vát + đường chỉ vàng song song với vết cắt */
.cut{--c:28px;position:relative}
.cut>img,.cut>.ph,.cut.self{clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
.cut::before{content:"";position:absolute;z-index:3;left:calc(100% - var(--c) + 2px);top:-6px;width:calc(var(--c) * 1.4142 + 4px);height:1px;background:var(--gold2);transform-origin:0 0;transform:rotate(45deg) translateY(-1px);pointer-events:none}
.btn{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);border-radius:2px}
/* 3. QR Zalo OA */
.qr{display:flex;gap:16px;align-items:center;margin-top:22px;padding:14px;border:1px solid rgba(200,161,90,.3);border-radius:var(--r);max-width:300px}
.qr img{width:92px;height:92px;border-radius:4px;flex:0 0 92px;background:#fff;padding:4px}
.qr b{display:block;font:600 11px/1.4 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--gold2)}
.qr small{display:block;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.65);margin-top:4px}
.qr.light{border-color:#E8DFCB;background:#FCFAF5;max-width:none;margin:18px 0 0}
.qr.light small{color:var(--muted)}
.qr.light b{color:var(--gold)}
.fz{position:relative}
.fz .pop{position:absolute;right:66px;bottom:-6px;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:12px;width:150px;text-align:center;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateX(8px);transition:.35s var(--ease)}
.fz .pop img{width:126px;height:126px}
.fz .pop small{display:block;font:500 10px/1.4 var(--sans);letter-spacing:1.5px;color:var(--green);margin-top:6px;text-transform:uppercase}
.fz:hover .pop{opacity:1;visibility:visible;transform:none}
@media (max-width:960px){.fz .pop{display:none}.gcut{width:min(560px,110vw)}.gcut.line svg{opacity:.2}}


/* =========================================================
   v8 · Trình chiếu hero, ảnh đội ngũ, chuyển động mượt
   ========================================================= */
.slides{position:relative;aspect-ratio:900/1602;border-radius:var(--r);overflow:hidden;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);background:var(--forest)}
.slides .sl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;transform:scale(1.04);transition:opacity 1.6s cubic-bezier(.4,0,.2,1),transform 7s linear;will-change:opacity,transform}
.slides .sl.on{opacity:1;transform:scale(1)}
.hero-tag b{display:inline-block;transition:opacity .6s,transform .6s}
.hero-tag b.swap{opacity:0;transform:translateY(6px)}
.cutln{position:absolute;z-index:3;left:calc(100% - 38px);top:-6px;width:61px;height:1px;background:var(--gold2);transform-origin:0 0;transform:rotate(45deg) translateY(-1px)}
.dots{position:absolute;right:0;bottom:-30px;display:flex;gap:8px}
.dots button{width:26px;height:2px;border:0;padding:0;background:rgba(255,255,255,.25);cursor:pointer;transition:background .5s,width .5s}
.dots button.on{background:var(--gold2);width:44px}
.team{margin:0}
.team img{width:100%;aspect-ratio:1400/933;object-fit:cover;object-position:center top;border-radius:var(--r);box-shadow:var(--shadow)}
.team figcaption{margin-top:14px;text-align:right;font:italic 500 17px/1.3 var(--serif);color:var(--gold)}
.pr-imgs{padding:0 0 40px 0}
.pr-grid{grid-template-columns:1.1fr .9fr}
/* chuyển động mượt hơn */
.js .fu{transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.fu img{transition:transform 1.4s cubic-bezier(.16,1,.3,1),filter .6s}
.js .fu:not(.in) img{transform:scale(1.04)}
a,button,.btn,.cat,.pj,.t-card,.ring,.arrows button{transition-timing-function:cubic-bezier(.16,1,.3,1)}
.section,.hero,.trust,.ftr{transition:background-color .6s}
@media (prefers-reduced-motion:reduce){.slides .sl{transition:opacity .01s}.fu img{transform:none!important}}


/* =========================================================
   v9 · Bộ icon ngành may (duotone, nét mảnh)
   ========================================================= */
.ico.gi{stroke-width:1.15;overflow:visible}
.hero{--icbg:#003B30}.promise4 .ico.gi{width:34px;height:34px}
.why{--icbg:#00301F}
.why-grid div{position:relative;padding-top:44px}
.wi{position:relative;display:grid;place-items:center;width:84px;height:84px;margin:0 auto 22px;border-radius:50%;border:1px solid rgba(200,161,90,.45);background:radial-gradient(circle at 50% 40%,rgba(200,161,90,.14),rgba(200,161,90,0) 70%);transition:background .6s cubic-bezier(.16,1,.3,1),border-color .6s,transform .6s cubic-bezier(.16,1,.3,1)}
.wi::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed rgba(200,161,90,.28);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.why-grid .wi .ico{width:46px;height:46px;margin:0;color:var(--gold2);transition:color .5s}
.wn{position:absolute;top:18px;right:18px;font:italic 500 15px/1 var(--serif);color:rgba(200,161,90,.6)}
.why-grid div:hover .wi{background:var(--gold2);border-color:var(--gold2);transform:translateY(-4px);--icbg:var(--gold2)}
.why-grid div:hover .wi::after{transform:rotate(90deg)}
.why-grid div:hover .wi .ico{color:var(--forest)}
.process{--icbg:#FFFFFF}
.ring .ico.gi{width:50px;height:50px;color:var(--green)}
.step:hover .ring{--icbg:var(--green)}
.ring::after{content:"";position:absolute;inset:8px;border-radius:50%;border:1px dashed rgba(176,138,59,.35)}


/* v10 · thẻ Bệnh viện – Y tế */
.ph.med{background:radial-gradient(circle at 50% 38%,#0B4A3D 0%,var(--green) 55%,var(--forest) 100%);color:#fff;justify-content:flex-start;padding-top:22%}
.ph.med .ico{width:96px;height:96px;color:var(--gold2);margin-bottom:22px;--icbg:var(--green)}
.ph.med b{color:var(--gold2)}
.ph.med i{color:rgba(255,255,255,.72);max-width:230px}
.cat .badge{position:absolute;top:18px;left:18px;z-index:3;font:600 10px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;background:var(--gold2);color:var(--forest);padding:7px 12px;border-radius:2px}
.cat-cap h3{font-size:26px}


/* v11 · Bối cảnh thực tế */
.real{background:var(--cream);overflow:hidden}
.rgrid{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:22px}
.rgrid figure{margin:0;position:relative;overflow:hidden}
.rgrid .r1{grid-row:1/3}
.rgrid img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.rgrid .r1 img{aspect-ratio:auto;min-height:100%}
.rgrid figure:hover img{transform:scale(1.04)}
.rgrid figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 24px 18px;background:linear-gradient(180deg,transparent,rgba(0,36,25,.82));color:#fff;font:600 21px/1.2 var(--serif)}
.rgrid figcaption small{display:block;font:500 10px/1.6 var(--sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--gold2)}
@media (max-width:960px){.rgrid{grid-template-columns:1fr;grid-template-rows:auto}.rgrid .r1{grid-row:auto}.rgrid .r1 img{aspect-ratio:3/2}}

/* =========================================================
   v12 · HỆ THỐNG ĐA TRANG — component dùng chung
   ========================================================= */
/* Trợ năng */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold2);color:var(--forest);padding:12px 18px;font:600 13px/1 var(--sans);border-radius:2px;transition:top .2s}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{flex:none}

/* Header — mega menu Sản phẩm */
.nav .has-sub{position:relative;display:flex;align-items:center}
.nav .sub{position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%,8px);min-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;padding:26px 30px;background:var(--forest);border:1px solid var(--line);border-radius:2px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.nav .sub::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav .sub a{display:block;padding:12px 0;border-bottom:1px solid rgba(200,161,90,.16);font-size:13px;letter-spacing:.3px}
.nav .sub a small{display:block;margin-top:5px;font:400 11.5px/1.4 var(--sans);color:rgba(255,255,255,.55);letter-spacing:0}
.nav .sub a::after{display:none}
.nav .sub .all{grid-column:1/-1;border:0;padding-top:16px;color:var(--gold2);text-transform:uppercase;font-size:11px;letter-spacing:2px}

/* Page hero (trang con) */
.page-hero{position:relative;overflow:hidden;background:var(--green);color:var(--white);padding:168px 0 84px}
.page-hero h1{font-size:clamp(38px,4.4vw,58px);margin:16px 0 18px;max-width:880px}
.page-hero h1 em{font-style:italic;color:var(--gold2)}
.page-hero .lead{max-width:680px;color:rgba(255,255,255,.78);font-weight:300;font-size:16.5px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px;padding:0;list-style:none;font:500 11.5px/1.4 var(--sans);letter-spacing:1px;color:rgba(255,255,255,.6)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--gold2)}
.crumbs a:hover{color:var(--white)}
.crumbs [aria-current]{color:var(--gold2)}

/* Bố cục chung */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:center}
.split.rev>:first-child{order:2}
.split figure{margin:0}
.split figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:var(--r)}
.txt .h2{text-align:left}
.txt>p{color:#3D4743;margin-top:18px}
.txt>p.big{font:italic 500 clamp(22px,2.2vw,28px)/1.45 var(--serif);color:var(--green)}
.bg-cream{background:var(--cream)}
.bg-green{background:var(--green);color:var(--white)}
.bg-green .h2{color:var(--white)}
.bg-green .txt>p{color:rgba(255,255,255,.76)}
.bt{border-top:1px solid var(--line-soft)}
.center{text-align:center}
.mt-l{margin-top:clamp(36px,5vw,56px)}

/* Danh sách đặc điểm */
.ticks{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px}
.ticks li::before{content:"";width:9px;height:9px;margin-top:9px;border:1px solid var(--gold);transform:rotate(45deg)}
.ticks b{color:var(--green);font-weight:600}
.bg-green .ticks b{color:var(--gold2)}

/* Lưới thẻ thông tin */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);padding:34px 30px 30px;transition:border-color .4s,transform .4s var(--ease)}
.card:hover{border-color:var(--gold);transform:translateY(-3px)}
.bg-cream .card{border-color:#E6DCC4}
.card .num{font:italic 500 15px/1 var(--serif);color:var(--gold-ink)}
.card h3{font-size:24px;color:var(--green);margin:12px 0 10px}
.card p{font-size:14.5px;color:var(--muted)}
.card .ico{width:40px;height:40px;color:var(--gold);margin-bottom:16px}
.bg-green .card{background:rgba(255,255,255,.04);border-color:var(--line)}
.bg-green .card h3{color:var(--white)}
.bg-green .card p{color:rgba(255,255,255,.68)}
.bg-green .card .num{color:var(--gold2)}

/* Thông số */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{padding:30px 20px;text-align:center;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats b{display:block;font:600 clamp(34px,3.4vw,46px)/1 var(--serif);color:var(--gold2)}
.stats span{display:block;margin-top:10px;font-size:13px;color:rgba(255,255,255,.72)}

/* Gallery sản phẩm */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;border-radius:var(--r)}
.gallery figcaption{margin-top:12px;font-size:13px;color:var(--muted)}
.gallery.wide img{aspect-ratio:3/2}

/* Ghi chú trung thực / thông báo */
.note{border:1px solid var(--line);border-left:3px solid var(--gold);background:#FBF7EC;padding:22px 26px;border-radius:2px;color:#3D4743;font-size:14.5px}
.note b{color:var(--green)}

/* Dải CTA */
.cta-band{background:var(--forest);color:var(--white);position:relative;overflow:hidden;padding:clamp(64px,8vw,96px) 0}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(28px,3vw,40px);max-width:640px}
.cta-band h2 em{font-style:italic;color:var(--gold2)}
.cta-band p{color:rgba(255,255,255,.7);margin-top:12px;max-width:600px}

/* Bài viết */
.acard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;transition:border-color .4s,transform .4s var(--ease)}
.acard:hover{border-color:var(--gold);transform:translateY(-3px)}
.acard .ab{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1}
.acard .tag{font:600 10.5px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--gold-ink)}
.acard h3{font-size:24px;color:var(--green);margin:12px 0 12px}
.acard p{font-size:14.5px;color:var(--muted);flex:1}
.acard .more{margin-top:20px;font:600 11px/1 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--green);display:inline-flex;gap:8px;align-items:center}
.acard .more .ico{width:14px;height:14px}
.acard .art{height:150px;background:var(--green);position:relative;overflow:hidden;display:grid;place-items:center;color:var(--gold2)}
.acard .art svg.ico{width:56px;height:56px}
.acard .art .gm{position:absolute;right:-30px;bottom:-50px;width:170px;height:170px;fill:var(--gold2);opacity:.08}

.prose{max-width:760px;margin:0 auto;font-size:16.5px;line-height:1.85;color:#26302C}
.prose>*+*{margin-top:20px}
.prose h2{font-size:clamp(28px,2.6vw,34px);color:var(--green);margin-top:46px}
.prose h3{font-size:23px;color:var(--green);margin-top:34px}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:8px}
.prose strong{color:var(--green)}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.prose th{font:600 11px/1.4 var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-ink);border-bottom-color:var(--gold)}
.prose .meta{font-size:13px;color:var(--muted)}
.prose a{color:var(--green);border-bottom:1px solid var(--gold)}
.tblwrap{overflow-x:auto}

/* Liên hệ */
.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,56px);align-items:start}
.panel{background:var(--white);border-radius:var(--r);box-shadow:0 40px 80px -50px rgba(0,36,25,.45);padding:clamp(28px,4vw,52px)}
.aside{position:sticky;top:110px;display:grid;gap:20px}
.info{background:var(--green);color:var(--white);border-radius:var(--r);padding:34px 30px;position:relative;overflow:hidden}
.info h2{font-size:28px}
.info ul{list-style:none;margin:20px 0 0;padding:0}
.info li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid rgba(200,161,90,.2);font-size:14.5px}
.info li:last-child{border-bottom:0}
.info li svg{width:18px;height:18px;color:var(--gold2);margin-top:4px}
.info small{display:block;font:600 10px/1.4 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--gold2)}
.info a:hover{color:var(--gold2)}
.map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line-soft);aspect-ratio:4/3;background:var(--cream)}
.map iframe{width:100%;height:100%;border:0;display:block}

/* Form mở rộng */
.form textarea{width:100%;min-height:130px;resize:vertical;font:400 15px/1.55 var(--sans);padding:14px 16px;border:1px solid #E1D8C4;border-radius:var(--r);background:#FCFAF5;color:var(--black)}
.form textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,138,59,.15)}
.form .req{color:#A3341F}
.form .hint{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.form .err{display:none;margin-top:6px;font-size:12.5px;color:#A3341F}
.form .bad input,.form .bad select,.form .bad textarea{border-color:#C0563F;background:#FFF8F5}
.form .bad .err{display:block}
.file{position:relative;border:1px dashed #D8CCAE;border-radius:var(--r);background:#FCFAF5;padding:20px;text-align:center;transition:border-color .3s,background .3s}
.file:hover,.file.drag{border-color:var(--gold);background:#FBF6EA}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.file .ico{width:30px;height:30px;color:var(--gold);margin:0 auto 8px}
.file b{display:block;font-size:14px;color:var(--green);font-weight:600}
.file small{font-size:12px;color:var(--muted)}
.file-list{list-style:none;margin:10px 0 0;padding:0;font-size:13px;color:var(--green)}
.file-list li{padding:6px 0;border-bottom:1px solid var(--line-soft)}
.check{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:13.5px;color:#3D4743;text-transform:none;letter-spacing:0}
.form .check{font:400 13.5px/1.6 var(--sans);letter-spacing:0;text-transform:none;color:#3D4743}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--green);appearance:auto;padding:0}
.check a{color:var(--green);border-bottom:1px solid var(--gold)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.f-status{display:none;margin-top:18px;padding:16px 18px;border-radius:var(--r);font-size:14.5px}
.f-status.ok{display:block;border:1px solid var(--line);background:#F4F8F2;color:var(--green)}
.f-status.no{display:block;border:1px solid #E7B9AC;background:#FFF6F3;color:#8A2A16}
.btn[disabled]{opacity:.6;cursor:wait}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font:600 11px/1 var(--sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-ink);margin:30px 0 16px;padding:0}
legend+.f-grid{margin-top:0}

/* Logo khách hàng (dự án) */
.clients{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-soft);border-radius:var(--r);background:var(--white)}
.clients figure{margin:0;padding:30px 20px;text-align:center;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:16px}
.clients figure:last-child{border-right:0}
.clients img{max-height:86px;width:auto}
.clients figcaption{font-size:12.5px;color:var(--muted);line-height:1.5}

/* 404 */
.e404{min-height:100vh;display:grid;place-items:center;text-align:center;background:var(--green);color:var(--white);padding:140px 24px 80px;position:relative;overflow:hidden}
.e404 b{display:block;font:600 clamp(90px,14vw,170px)/1 var(--serif);color:var(--gold2)}

/* Header trên trang con: luôn nền đặc khi menu mở */
.hdr .nav a[aria-current="page"]{color:var(--white)}
.hdr .nav a[aria-current="page"]::after{right:0}

@media (max-width:1180px){
  .nav.open{overflow-y:auto;justify-content:flex-start;padding:110px 24px 40px}
  .nav .has-sub{flex-direction:column}
  .nav .sub{position:static;transform:none;opacity:1;visibility:visible;min-width:0;grid-template-columns:1fr;background:none;border:0;box-shadow:none;padding:6px 0 0;gap:0;text-align:center}
  .nav .sub a{font:400 15px/1.3 var(--sans)!important;color:rgba(255,255,255,.72)!important;border:0;padding:8px 0}
  .nav .sub a small,.nav .sub .all{display:none}
  .nav:not(.open) .sub{display:none}
}
@media (max-width:960px){
  .split,.contact-grid{grid-template-columns:1fr}
  .split.rev>:first-child{order:0}
  .cards,.cards.c4{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stats div:nth-child(2){border-right:0}
  .stats div:nth-child(n+3){border-top:1px solid var(--line)}
  .clients{grid-template-columns:1fr 1fr}
  .clients figure:nth-child(2){border-right:0}
  .clients figure:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .aside{position:static}
  .page-hero{padding:140px 0 64px}
}
@media (max-width:640px){
  .cards,.cards.c2,.cards.c4,.gallery{grid-template-columns:1fr}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .cta-band .btn{width:100%;justify-content:center}
  .page-hero{padding:120px 0 52px}
}
@media print{.hdr,.float,.cta-band,.ftr .social,.burger{display:none!important}.js .fu{opacity:1;transform:none}}

/* =========================================================
   RESPONSIVE — tablet 768 / mobile 375
   ========================================================= */
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:block}
  .hot div{display:none}
  .nav.open{display:flex;position:fixed;inset:0;top:0;flex-direction:column;justify-content:center;align-items:center;gap:26px;background:rgba(0,36,25,.97);backdrop-filter:blur(12px);z-index:-1}
  .nav.open a{font:500 30px/1 var(--serif);letter-spacing:0;color:var(--white)}
  .why-grid{grid-template-columns:repeat(3,1fr)}
  .why-grid div:nth-child(3){border-right:0}
  .why-grid div:nth-child(n+4){border-top:1px solid var(--line)}
  .f-cols{grid-template-columns:1fr 1fr 1fr}
  .f-brand{grid-column:1/-1}
}
@media (max-width:960px){
  .hero{padding:120px 0 70px}
  .hero-grid,.pr-grid,.cta-box{grid-template-columns:1fr}
  .hero-img{justify-self:center;max-width:380px}
  .hero-tag{left:-10px}
  .logos{grid-template-columns:repeat(4,1fr)}
  /* card chuyển sang cuộn ngang */
  .cats,.t-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:42%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}
  .cats::-webkit-scrollbar,.t-grid::-webkit-scrollbar{display:none}
  .cat,.t-card{scroll-snap-align:start}
  .t-grid{grid-auto-columns:70%}
  .track{grid-auto-columns:46%}
  .steps{grid-template-columns:1fr;gap:0;max-width:520px;margin:0 auto}
  .steps::before{top:20px;bottom:20px;left:56px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,transparent,var(--gold) 6%,var(--gold) 94%,transparent)}
  .step{display:grid;grid-template-columns:112px 1fr;gap:24px;text-align:left;align-items:center;padding:10px 0}
  .ring{margin:0}
  .step p{padding:0}
  .cta-img{max-width:520px;width:100%;justify-self:center}
  .pr-imgs{max-width:560px}
}
@media (max-width:640px){
  body{font-size:15px}
  .wrap{width:calc(100% - 40px)}
  .hdr{padding:14px 0}
  .logo img{height:42px}
  .promise4{grid-template-columns:1fr 1fr}
  .promise4 div:nth-child(2){border-right:0}
  .promise4 div:nth-child(n+3){border-top:1px solid var(--line)}
  .cta-row .btn{flex:1;justify-content:center;padding:16px 14px;font-size:11.5px}
  .hero-tag{display:none}
  .cta-row .btn{flex:1 1 100%}
  .hero-img{max-width:330px}
  .hero-img::after{inset:-10px 10px 10px -10px}
  .logos{grid-template-columns:repeat(2,1fr)}
  .logos .lg{height:84px;border-right:0}
  .logos .lg:nth-child(odd){border-right:1px solid #EEE7D6}
  .logos .lg:nth-child(-n+2){border-bottom:1px solid #EEE7D6}
  .cats{grid-auto-columns:72%}
  .why-grid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .why-grid div{scroll-snap-align:start;border-top:0!important;border-right:1px solid var(--line)!important}
  .track{grid-auto-columns:84%}
  .t-grid{grid-auto-columns:88%}
  .pj-top{flex-direction:column;align-items:flex-start}
  .step{grid-template-columns:88px 1fr;gap:18px}
  .ring{width:88px;height:88px}
  .steps::before{left:44px}
  .pr-imgs{padding:0 40px 60px 0}
  .pr-imgs .leaf{width:80px;left:-14px}
  .f-grid{grid-template-columns:1fr}
  .f-cols{grid-template-columns:1fr 1fr;gap:32px 20px}
  .f-contact-col{grid-column:1/-1}
  .float{right:14px;bottom:16px}
  .float a{width:50px;height:50px}
}
/* v12 · bổ sung */
.ftr .h4{font:600 11px/1 var(--sans);letter-spacing:2.5px;text-transform:uppercase;color:var(--gold2);margin:8px 0 22px}
.panel .form,.cta-box .form .form{padding:0}
.cta-box .form>.form{margin-top:0}
.pj>a{display:block}
.pj-cap p{color:var(--gold-ink)!important;font-weight:500}
.ftr{position:relative;overflow:hidden}
html,body{overflow-x:clip}
/* Menu mobile: bỏ backdrop-filter để lớp phủ fixed phủ toàn màn hình */
.hdr.menu-open{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--forest)}
body:has(.nav.open) .float{display:none}
/* Trợ năng: vàng đậm hơn cho chữ lớn trên nền sáng (≥3:1), giữ vàng chuẩn trên nền xanh */
:root{--gold-deep:#967430}
.h2 em,.team figcaption,.manifesto,.g3 b,.cat-cap small{color:var(--gold-deep)}
.on-dark .h2 em,.bg-green .h2 em,.page-hero h1 em,.hero h1 em,.cta-band h2 em,.cat-cap small{color:var(--gold2)}
.qr.light b{color:var(--gold-ink)}
.wn{color:var(--gold2)!important}
.team figcaption{color:var(--gold-ink)}
/* v12.1 · Gallery theo loại ảnh */
.gallery.c2{grid-template-columns:repeat(2,1fr)}
.gallery.wide img{aspect-ratio:3/2;object-position:center 25%}
.gallery.wide figure:first-child img{object-position:center 12%}
.gallery.fit figure{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:18px}
.gallery.fit img{aspect-ratio:auto;object-fit:contain;height:auto}
.fit-lead img{object-fit:contain!important;background:var(--green);object-position:center!important}
.gcap{margin-top:12px;font-size:13px;color:var(--muted)}
@media (max-width:640px){.gallery.c2{grid-template-columns:1fr}}