:root{
/* ── Thang cỡ chữ: 7 bậc, bước ~1,2 lần ──
xs nhãn trang trí (badge, tag, đơn vị đo)
sm nhãn phụ, chú thích, giá gạch
md CHỮ ĐỌC CHÍNH
lg chữ nhấn, tiêu đề nhỏ
xl tiêu đề khối
2xl tiêu đề lớn, số nổi bật
3xl chữ hero
Trước đây trang dùng 20 cỡ rời rạc từ 11px tới 46px, không theo thang nào. */
--fs-xs:12px; --fs-sm:14px; --fs-md:15px; --fs-lg:18px;
--fs-xl:22px; --fs-2xl:28px; --fs-3xl:40px;
/* Ô nhập KHÔNG dùng --fs-md: dưới 16px là Safari iOS tự phóng to cả trang
khi khách chạm vào ô. Đây là ràng buộc kỹ thuật, không phải lựa chọn cỡ chữ. */
--fs-input:16px;
--green-900:#0a3d20;
--green-700:#166534;
--green-600:#1a5c35;
--green-grad:linear-gradient(135deg,#0a3d20 0%,#166534 100%);
--gold-500:#c9a84c;
--gold-300:#f0d070;
--gold-100:#f0dfa0;
--red-700:#b91c1c;
--red-900:#7f1d1d;
--cream-50:#faf8f3;
--cream-100:#f4f1eb;
--cream-200:#ddd8ce;
--ink-900:#0d1f0e;
--ink-700:#333;
/* #888 cũ chỉ đạt tương phản 3,5:1 trên nền trắng — dưới chuẩn AA (4,5:1) và
mờ hẳn với mắt lão thị. #5c5c5c đạt ~6,7:1 mà vẫn nhạt hơn chữ chính. */
--ink-500:#5c5c5c;
/* Dành riêng cho chữ phụ trợ đã bị gạch ngang (giá cũ) — vẫn đạt 4,5:1 */
--ink-400:#767676;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Chia dòng đều cho tiêu đề, tránh cảnh rơi một chữ lẻ xuống dòng cuối */
h1,h2,h3,.hero-h1,.hero-h1-big,.hero-hook,.compare-title,.symptom-title,.steps-title,.form-h2,.showcase-header-text,.section-header h2,.popup-title{text-wrap:balance}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',sans-serif;font-size:var(--fs-md);background:#fff;max-width:460px;margin:0 auto;color:var(--ink-900);overflow-x:hidden;padding-bottom:92px;-webkit-font-smoothing:antialiased}
input,select,button{font-family:'Be Vietnam Pro',sans-serif}
input[type=radio]{accent-color:var(--green-900);width:20px;height:20px;flex-shrink:0}
img{max-width:100%}
ul{list-style:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Visible keyboard focus for every interactive element */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
outline:3px solid var(--gold-500);outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
@keyframes popIn{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes fadeSlide{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:translateY(0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes shimmerGold{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes shimmerRed{0%{background-position:200% center}100%{background-position:-200% center}}
details>summary{list-style:none;-webkit-appearance:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
details>summary>span{display:inline-block;transition:transform .25s ease;font-style:normal}
details[open]>summary>span{transform:rotate(45deg);color:var(--red-700)}
details>div{animation:fadeSlide .22s ease}
/* ───────── Buttons: 2 conversion tiers + 1 quiet secondary ─────────
.btn-primary = every "order / get a quote" action (hero, products, combos, popup, main form)
.btn-urgent = quick phone-only callback forms (mini form, sticky bar)
.btn-outline = quiet secondary links, never competes with the above two */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;border-radius:12px;cursor:pointer;font-size:var(--fs-md);font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;text-align:center;padding:16px}
.btn-sm{padding:13px;font-size:var(--fs-md);border-radius:10px}
.btn-lg{padding:20px;font-size:var(--fs-lg);border-radius:14px}
.btn-primary{background:linear-gradient(90deg,#9a7530,var(--gold-500),var(--gold-300),#e0b84a,#9a7530);background-size:300% auto;color:var(--green-900);animation:shimmerGold 2.8s linear infinite;box-shadow:0 6px 24px rgba(201,168,76,.4)}
.btn-urgent{background:linear-gradient(90deg,var(--red-900),var(--red-700),#ef4444,var(--red-700),var(--red-900));background-size:300% auto;color:#fff;animation:shimmerRed 2.8s linear infinite}
.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:rgba(255,255,255,.9);font-weight:700;text-transform:none;letter-spacing:0}
.btn-outline-dark{background:#fff;border:1.5px solid rgba(255,255,255,.3);color:rgba(255,255,255,.85);font-weight:700;text-transform:none;letter-spacing:0;background:transparent}
.submitted{background:var(--green-700)!important;animation:none!important;font-size:var(--fs-md)!important}
/* ───────── Topbar ───────── */
.topbar{position:sticky;top:0;z-index:300;background:var(--green-900);display:flex;align-items:center;justify-content:space-between;padding:13px 16px;gap:10px;border-bottom:3px solid var(--gold-500);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.topbar-brand{color:#fff;line-height:1.3;display:flex;align-items:center;gap:9px;min-width:0}
/* Logo trên nền trắng: chữ trong logo là rgb(14,101,73), đặt thẳng lên nền
topbar #0a3d20 chỉ đạt tương phản 1,75:1 — y như trường hợp ở footer. */
.topbar-logo{flex-shrink:0;display:flex;background:#fff;border-radius:8px;padding:5px 7px}
.topbar-logo img{display:block;width:58px;height:auto}
.topbar-name{font-size:var(--fs-lg);font-weight:900;letter-spacing:.04em}
/* Hai tầng: số hotline đọc được, bên dưới là câu gỡ nỗi sợ. Cả khối cao 35px,
vẫn thấp hơn logo 52px nên không làm topbar cao thêm. */
.topbar-tag{min-width:0}
.topbar-hotline{display:block;font-size:var(--fs-md);font-weight:700;color:#fff;letter-spacing:.02em;line-height:1.25;white-space:nowrap}
.topbar-sub{display:block;font-size:var(--fs-xs);color:rgba(255,255,255,.7);line-height:1.3;margin-top:1px}
.topbar-sub strong{color:var(--gold-300);font-weight:700}
.topbar-call{background:var(--gold-500);color:var(--green-900);min-height:44px;padding:8px 13px;border-radius:10px;font-size:var(--fs-sm);font-weight:700;text-decoration:none;white-space:nowrap;letter-spacing:.02em;display:flex;align-items:center;gap:6px}
/* ───────── Ticker ───────── */
.ticker-wrap{background:var(--cream-100);border-bottom:1px solid var(--cream-200);overflow:hidden;padding:11px 0}
.ticker{display:inline-flex;align-items:center;gap:0;animation:ticker 22s linear infinite;white-space:nowrap}
.ticker-item{font-size:var(--fs-md);font-weight:700;color:var(--ink-700);padding:0 20px}
.ticker-dot{color:var(--gold-500);font-size:var(--fs-md);font-weight:900}
/* ───────── Hero ───────── */
.hero{background:var(--green-900);padding:0;position:relative;overflow:hidden}
.hero-glow{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:340px;height:340px;background:radial-gradient(circle,rgba(201,168,76,.22) 0%,transparent 70%);pointer-events:none}
.hero-inner{padding:24px 20px 0}
.badge-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(201,168,76,.18);border:1px solid rgba(201,168,76,.5);color:var(--gold-100);font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;padding:5px 12px;border-radius:4px;margin-bottom:14px}
.hero-hook{font-size:var(--fs-md);color:rgba(255,255,255,.7);font-weight:700;margin-bottom:10px;line-height:1.4}
.hero-h1{font-size:var(--fs-2xl);font-weight:900;color:#fff;line-height:1.2;margin-bottom:4px;letter-spacing:-.01em}
.hero-h1-big{font-size:var(--fs-3xl);font-weight:900;line-height:1;margin-bottom:6px;letter-spacing:-.03em;background:linear-gradient(90deg,var(--gold-300),var(--gold-500),var(--gold-300));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:var(--fs-md);color:rgba(255,255,255,.75);line-height:1.6;margin-bottom:20px}
.hero-sub strong{color:var(--gold-100);font-weight:700}
.timeline-row{display:flex;gap:0;margin:0 20px 22px;border:2px solid rgba(201,168,76,.4);border-radius:14px;overflow:hidden}
.timeline-item{flex:1;padding:14px 8px;text-align:center;background:rgba(255,255,255,.05);border-right:1px solid rgba(201,168,76,.25)}
.timeline-item:last-child{border-right:none}
.timeline-item--alt{background:rgba(201,168,76,.1)}
.timeline-num{font-size:var(--fs-3xl);font-weight:900;color:var(--gold-300);line-height:1}
.timeline-unit{font-size:var(--fs-sm);color:rgba(255,255,255,.6);font-weight:700;letter-spacing:.08em}
.timeline-desc{font-size:var(--fs-sm);color:#fff;margin-top:6px;line-height:1.4;font-weight:700}
.stats-row{display:flex;align-items:stretch;gap:0;margin:0 20px 22px;border-radius:12px;overflow:hidden}
.stat-item{flex:1;padding:12px 6px;text-align:center;background:var(--green-600);border-right:1px solid rgba(255,255,255,.1)}
.stat-item:last-child{border-right:none}
.stat-num{font-size:var(--fs-xl);font-weight:900;color:var(--gold-300);line-height:1}
.stat-label{font-size:var(--fs-sm);color:rgba(255,255,255,.85);margin-top:3px;font-weight:700}
.hero-ctas{padding:0 20px 36px;display:flex;flex-direction:column;gap:10px}
.hero-curve{position:absolute;bottom:-1px;left:0;right:0;height:28px;background:var(--red-700);clip-path:ellipse(55% 100% at 50% 100%)}
/* ───────── Urgency bar ───────── */
.urgency{background:var(--red-700);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.urgency-label{font-size:var(--fs-sm);font-weight:700;color:rgba(255,255,255,.8);margin-bottom:4px;letter-spacing:0}
.countdown{font-size:var(--fs-2xl);font-weight:900;letter-spacing:5px;color:#fff;line-height:1;animation:blink 2s ease-in-out infinite}
.stock-wrap{text-align:right}
.stock-text{font-size:var(--fs-md);color:rgba(255,255,255,.85);margin-bottom:6px;font-weight:700}
.stock-num{color:var(--gold-100);font-size:var(--fs-lg);font-weight:900}
.stock-bar{background:rgba(255,255,255,.2);border-radius:20px;height:10px;width:110px;overflow:hidden}
/* width khởi tạo 0: script.js đặt đúng % theo số suất. Trước đây cứng 22% nên nó
đứng yên bất kể số suất đổi, và khớp với số 22 cũng cứng trong HTML. */
.stock-bar-fill{height:100%;background:var(--gold-500);border-radius:20px;width:0;transition:width .5s}
/* ───────── Section header (icon bar + heading) ───────── */
.section-header{display:flex;align-items:center;gap:10px;padding:24px 20px 14px}
.section-header-bar{width:4px;height:24px;background:var(--gold-500);border-radius:2px;flex-shrink:0}
.section-header h2{font-size:var(--fs-lg);font-weight:700;color:var(--green-900);letter-spacing:0;text-transform:uppercase}
.section-rule{height:1px;background:var(--cream-200);margin:0 20px}
/* ───────── Product showcase ───────── */
.showcase{background:var(--green-900);padding:0 0 4px}
.showcase-header{padding:18px 20px 10px;display:flex;align-items:center;gap:10px}
.showcase-header-bar{width:4px;height:22px;background:var(--gold-500);border-radius:2px;flex-shrink:0}
.showcase-header-text{font-size:var(--fs-md);font-weight:700;color:var(--gold-500);letter-spacing:.01em;text-transform:uppercase}
.showcase-img-wrap{padding:0 14px 14px}
.showcase-img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.showcase-cta-wrap{padding:0 14px 18px}
/* ───────── Comparison table ───────── */
.compare{background:var(--green-900);padding:26px 20px 28px}
.compare-head{text-align:center;margin-bottom:20px}
.compare-title{font-size:var(--fs-xl);font-weight:900;color:var(--gold-500);margin-bottom:5px}
.compare-sub{font-size:var(--fs-md);color:rgba(255,255,255,.65);line-height:1.5}
.compare-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.compare-col-head{padding:10px 12px;text-align:center;border-radius:10px 10px 0 0}
.compare-col-head--us{background:var(--gold-500)}
.compare-col-head--them{background:rgba(255,255,255,.1)}
.compare-col-head-title{font-size:var(--fs-md);font-weight:900;color:var(--green-900)}
.compare-col-head--them .compare-col-head-title{font-weight:700;color:rgba(255,255,255,.6)}
.compare-col-head-sub{font-size:var(--fs-sm);color:rgba(10,61,32,.7);margin-top:2px;font-weight:700}
.compare-col-head--them .compare-col-head-sub{color:rgba(255,255,255,.35);font-weight:400}
.compare-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:7px}
.compare-cell{border-radius:10px;padding:12px}
.compare-cell--us{background:rgba(201,168,76,.13);border:1.5px solid rgba(201,168,76,.35)}
.compare-cell--them{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1)}
.compare-num{font-size:var(--fs-xl);font-weight:900;line-height:1}
.compare-cell--us .compare-num{color:var(--gold-500)}
.compare-cell--them .compare-num{color:rgba(255,255,255,.35)}
.compare-text{font-size:var(--fs-md);margin-top:4px;line-height:1.5}
.compare-cell--us .compare-text{color:rgba(255,255,255,.88)}
.compare-cell--them .compare-text{color:rgba(255,255,255,.45)}
/* ───────── Symptom selector ───────── */
.symptom{background:var(--cream-50);padding:22px 20px 20px;border-bottom:2px solid var(--cream-200)}
.symptom-title{font-size:var(--fs-xl);font-weight:900;color:var(--green-900);margin-bottom:5px}
.symptom-sub{font-size:var(--fs-md);color:var(--ink-500);margin-bottom:16px;line-height:1.45}
.symptom-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.symptom-btn{font-size:var(--fs-md);background:#fff;border:2px solid var(--cream-200);border-radius:14px;padding:16px 12px;cursor:pointer;text-align:left;transition:all .15s}
.symptom-emoji{font-size:var(--fs-2xl);margin-bottom:8px}
.sym-title{font-size:var(--fs-md);font-weight:700;color:var(--green-900);line-height:1.2;margin-bottom:5px}
.sym-desc{font-size:var(--fs-md);color:var(--ink-500);line-height:1.45}
.symptom-btn.active{background:var(--green-900);border-color:var(--gold-500);transform:scale(1.03)}
.symptom-btn.active .sym-title,.symptom-btn.active .sym-desc{color:#fff}
.symptom-rec{display:none;margin-top:14px;background:linear-gradient(135deg,var(--green-900),var(--green-600));border-radius:14px;padding:16px 18px;animation:fadeSlide .3s ease}
.symptom-rec-label{font-size:var(--fs-md);font-weight:700;color:var(--gold-500);margin-bottom:7px}
.symptom-rec-text{font-size:var(--fs-md);color:rgba(255,255,255,.92);line-height:1.65}
.symptom-rec-ctas{display:flex;gap:8px;margin-top:12px}
/* ───────── Products carousel ───────── */
.products-section{background:var(--cream-100);padding:12px 0 4px}
.carousel-hint{text-align:center;font-size:var(--fs-md);color:var(--ink-500);margin-bottom:12px;font-weight:700;letter-spacing:.04em}
#carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;padding:0 20px 14px;scrollbar-width:none}
#carousel::-webkit-scrollbar{display:none}
.product-card{flex:0 0 calc(100% - 40px);scroll-snap-align:start;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--cream-200);box-shadow:0 2px 14px rgba(0,0,0,.07);display:flex;flex-direction:column}
.product-media{position:relative;aspect-ratio:4/3;overflow:hidden}
.product-media img{width:100%;height:100%;object-fit:cover;display:block}
.product-media-overlay{position:absolute;inset:0}
.product-badge{position:absolute;top:10px;left:12px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;padding:4px 10px;border-radius:5px}
.product-badge--hot{background:var(--red-700);color:#fff}
.product-badge--bestseller{background:var(--gold-500);color:var(--green-900)}
.product-media-text{position:absolute;bottom:12px;left:14px;right:14px}
.product-formula{font-size:var(--fs-2xl);font-weight:900;color:#fff;line-height:1;letter-spacing:-.02em}
.product-usecase{font-size:var(--fs-md);font-weight:700;color:rgba(255,255,255,.8);margin-top:3px}
.crop-tags{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.crop-tag{background:rgba(255,255,255,.18);color:#fff;font-size:var(--fs-xs);padding:3px 9px;border-radius:20px}
.product-info{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column}
/* Cụm giá trước đây không co cũng không xuống dòng nên badge "-32%" đè lên
chữ "/ chai" và tràn ra ngoài thẻ 19px. */
.price-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.price-group{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.price-now{font-size:var(--fs-xl);font-weight:900;color:var(--red-700);line-height:1}
.price-old{font-size:var(--fs-md);color:var(--ink-400);text-decoration:line-through}
.price-unit{font-size:var(--fs-md);color:var(--ink-500)}
.price-discount{background:var(--red-700);color:#fff;font-size:var(--fs-md);font-weight:700;padding:5px 10px;border-radius:6px;flex-shrink:0;white-space:nowrap}
.product-features{display:flex;flex-direction:column;gap:7px;flex:1;margin-bottom:14px}
.product-features li{font-size:var(--fs-md);color:#333;line-height:1.5;display:flex;gap:8px}
.product-features li::before{content:"→";color:var(--green-900);font-weight:700;flex-shrink:0}
/* Chấm nhìn vẫn nhỏ 10px nhưng vùng chạm là 44x44 nhờ padding + background-clip,
trước đây chỉ 10x10 — nhỏ nhất trang mà lại là nút điều hướng. */
.dots{display:flex;justify-content:center;gap:0;padding:0 0 8px}
.dot{width:44px;height:44px;flex-shrink:0;padding:17px;box-sizing:border-box;background-clip:content-box;border:none;cursor:pointer;transition:background .2s;background-color:var(--cream-200);border-radius:50%}
/* Không đổi width nữa: width:28px + padding 34px làm ô chạm co còn 34px.
Bóp padding ngang để phần thấy được dài ra mà khung chạm vẫn đủ 44x44. */
.dot.active{background-color:var(--green-900);padding:17px 8px;border-radius:9px}
/* ───────── Combo cards ───────── */
.combo-list{display:flex;flex-direction:column;gap:10px;padding:8px 20px 20px}
.combo-card{border:1.5px solid var(--cream-200);border-radius:14px;overflow:hidden;background:#fff;position:relative}
.combo-card--featured{border:2px solid var(--gold-500);background:#fffaed}
.combo-tag{position:absolute;top:14px;right:14px;font-size:var(--fs-xs);font-weight:700;padding:4px 10px;border-radius:6px;letter-spacing:.05em}
.combo-tag--hot{background:var(--red-700);color:#fff}
.combo-tag--value{background:var(--green-900);color:var(--gold-500)}
.combo-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 12px}
/* Cột trái phải cho phép co, nếu không nó giữ bề rộng nội dung và ép cột giá */
.combo-row>div:first-child{min-width:0}
/* Thẻ nào có badge góc phải thì đẩy nội dung xuống, không thì badge (absolute)
đè lên giá gạch — đúng chỗ bà con nhìn để so giá. */
.combo-card:has(.combo-tag) .combo-row{padding-top:44px}
.combo-name{font-size:var(--fs-md);font-weight:700;color:var(--ink-900);margin-bottom:4px}
.combo-detail{font-size:var(--fs-sm);color:var(--ink-500);line-height:1.4}
/* Không co và không vắt dòng: "tiết kiệm 864.000₫" từng bị bẻ làm hai dòng */
.combo-price{text-align:right;flex-shrink:0;white-space:nowrap}
.combo-price-old{font-size:var(--fs-md);color:var(--ink-400);text-decoration:line-through;line-height:1.3}
/* xl chứ không 2xl: ở 2xl thì "1.536.000₫" tràn khỏi lề phải 20px.
xl cũng khớp với .price-now của thẻ sản phẩm. */
.combo-price-now{font-size:var(--fs-xl);font-weight:900;color:var(--red-700);line-height:1.1}
.combo-save{font-size:var(--fs-xs);color:var(--ink-500);margin-top:2px}
.combo-cta-wrap{padding:0 14px 14px}
/* ───────── Trust badges ───────── */
.trust-section{background:#fff;padding:20px 20px 22px;border-top:1px solid var(--cream-200);border-bottom:1px solid var(--cream-200)}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Icon xếp TRÊN chứ không bên trái: ở 2 cột 163px, icon 28px + gap ăn mất gần
nửa bề ngang nên tiêu đề chỉ còn 95px và vỡ 2 dòng, mô tả vỡ 3-4 dòng. */
.trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 10px;background:var(--cream-50);border:1.5px solid var(--cream-200);border-radius:12px}
.trust-icon{font-size:var(--fs-xl);flex-shrink:0;line-height:1}
.trust-title{font-size:var(--fs-md);font-weight:700;color:var(--green-900);line-height:1.3}
.trust-desc{font-size:var(--fs-md);color:var(--ink-500);margin-top:2px;line-height:1.4}
/* ───────── Mini form ───────── */
.mini-form{background:var(--cream-50);border-top:1px solid var(--cream-200);border-bottom:1px solid var(--cream-200);padding:20px}
.mini-form-title{font-size:var(--fs-lg);font-weight:700;color:var(--green-900);margin-bottom:14px;line-height:1.4}
.field-input{display:block;width:100%;padding:15px 16px;margin-bottom:12px;border:2px solid var(--cream-200);border-radius:10px;font-size:var(--fs-input);background:#fff;color:var(--ink-900);outline:none}
.field-input.invalid{border-color:var(--red-700);margin-bottom:4px}
.field-error{display:none;color:var(--red-700);font-size:var(--fs-xs);font-weight:700;margin:-8px 0 10px;line-height:1.4}
.field-error.visible{display:block}
/* ───────── Steps ───────── */
.steps-section{background:var(--green-900);padding:24px 20px 26px}
.steps-title{font-size:var(--fs-xl);font-weight:900;color:var(--gold-500);text-align:center;margin-bottom:18px}
.step-row{display:flex;gap:14px;align-items:flex-start}
.step-icon-col{display:flex;flex-direction:column;align-items:center;gap:0;flex-shrink:0}
.step-icon{width:44px;height:44px;border-radius:50%;background:var(--gold-500);display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg)}
.step-connector{width:2px;height:20px;background:rgba(255,255,255,.15)}
.step-body{padding-bottom:18px;flex:1}
.step-body--last{padding-bottom:0;padding-top:10px}
.step-title{font-size:var(--fs-md);font-weight:700;color:var(--gold-500);margin-bottom:2px}
.step-desc{font-size:var(--fs-md);color:rgba(255,255,255,.85);line-height:1.55}
.step-desc strong{color:var(--gold-100)}
/* ───────── Proof / video / photos ───────── */
.proof-video-wrap{padding:14px 20px 4px}
.proof-video{border-radius:14px;overflow:hidden;border:2px solid var(--gold-500);box-shadow:0 4px 18px rgba(0,0,0,.12);position:relative;aspect-ratio:1/1;background:#000}
.proof-video iframe,.proof-video-target{position:absolute;inset:0;width:100%;height:100%;border:none}
/* Lớp chờ phủ khung video — thay khối đen tuyền của YouTube trong lúc nạp player */
.proof-video-poster{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;background:linear-gradient(160deg,var(--green-700) 0%,var(--green-900) 100%);transition:opacity .3s ease}
.proof-video-poster--done{opacity:0;pointer-events:none}
.proof-video-poster-play{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid var(--gold-500);color:var(--gold-300);font-size:var(--fs-xl);padding-left:4px}
.proof-video-poster-text{font-size:var(--fs-md);font-weight:700;color:rgba(255,255,255,.8)}
.proof-video-poster-loading{display:none;font-size:var(--fs-md);font-weight:700;color:rgba(255,255,255,.7)}
.proof-video-poster--loading .proof-video-poster-text{display:none}
.proof-video-poster--loading .proof-video-poster-loading{display:block}
.proof-video-unmute{position:absolute;bottom:12px;right:12px;z-index:2;background:rgba(0,0,0,.65);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:20px;padding:8px 14px;font-size:var(--fs-sm);font-weight:700;cursor:pointer}
.proof-video-caption-icon{font-size:var(--fs-lg);line-height:1}
.proof-video-caption{display:flex;align-items:center;gap:7px;margin-top:10px;padding:10px 12px;background:#f0fdf4;border-radius:10px;border:1px solid #bbf7d0}
.proof-video-caption-title{font-size:var(--fs-md);font-weight:700;color:var(--green-700)}
.proof-video-caption-sub{font-size:var(--fs-md);color:#555;margin-top:2px}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 20px 20px}
.proof-photo{border-radius:12px;overflow:hidden;border:1px solid var(--cream-200)}
.proof-photo--wide{grid-column:1/-1}
/* cover chứ không phải contain: ảnh nhà vườn là ảnh dọc/ngang lẫn lộn, contain
để lại hai dải trắng dày trên dưới — đúng chỗ cần tạo niềm tin lại trông như lỗi.
object-position lệch lên trên để giữ mặt người và chai phân trong khung. */
.proof-photo img{width:100%;height:220px;object-fit:cover;object-position:center 25%;background:var(--cream-100);display:block}
.proof-photo--wide img{height:240px;object-position:center 20%}
.proof-caption{padding:10px 12px;background:var(--cream-50)}
.proof-caption--wide{display:flex;align-items:center;justify-content:space-between;padding:10px 14px}
.proof-name{display:block;font-size:var(--fs-md);font-weight:700;color:var(--green-900)}
.proof-loc{font-size:var(--fs-md);color:var(--ink-500)}
.proof-duration{font-size:var(--fs-sm);background:var(--green-900);color:var(--gold-500);padding:4px 10px;border-radius:6px;font-weight:700}
/* ───────── Reviews ───────── */
.reviews-section{background:var(--cream-100);padding:4px 0 6px}
.review-card{margin:0 20px 12px;border:1px solid var(--cream-200);border-radius:12px;padding:16px;background:#fff}
.review-card:last-child{margin-bottom:6px}
.review-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.review-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:top center;flex-shrink:0;border:2px solid var(--gold-500)}
.review-meta{flex:1}
.review-name{font-size:var(--fs-md);font-weight:700;color:var(--ink-900)}
.review-loc{font-size:var(--fs-md);color:var(--ink-500);margin-top:2px}
.review-stars{color:#d97706;font-size:var(--fs-md);margin-top:2px}
.review-likes{font-size:var(--fs-md);color:var(--ink-400)}
.review-tag{display:inline-block;background:var(--cream-50);border:1px solid var(--cream-200);color:var(--green-900);font-size:var(--fs-md);font-weight:700;padding:4px 10px;border-radius:5px;margin-bottom:10px}
.review-text{font-size:var(--fs-md);color:#444;line-height:1.7;font-style:italic}
.review-reply{margin-top:10px;padding:10px 12px;background:var(--cream-100);border-radius:8px;font-size:var(--fs-md);color:#555;line-height:1.5}
.review-reply strong{color:var(--green-900)}
/* ───────── FAQ ───────── */
.faq-section{background:var(--cream-50);border-top:1px solid var(--cream-200);padding:24px 20px 26px}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{background:#fff;border:1.5px solid var(--cream-200);border-radius:12px;overflow:hidden}
.faq-question{padding:15px 16px;font-size:var(--fs-md);font-weight:700;color:var(--green-900);display:flex;align-items:center;justify-content:space-between;gap:10px}
.faq-icon{font-size:var(--fs-lg);color:var(--gold-500);flex-shrink:0;line-height:1}
.faq-answer{padding:12px 16px 15px;font-size:var(--fs-md);color:#555;line-height:1.7;border-top:1px solid #ebe7e0}
.faq-answer strong{color:var(--green-900)}
.faq-answer strong.warn{color:var(--red-700)}
/* ───────── Main form ───────── */
.form-section{background:var(--red-700);padding:0;border-top:5px solid var(--red-700)}
.form-header{padding:22px 20px 38px}
.form-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:var(--fs-xs);font-weight:700;padding:6px 13px;border-radius:20px;margin-bottom:14px}
.form-badge-dot{display:inline-block;width:7px;height:7px;background:#fde68a;border-radius:50%;flex-shrink:0;animation:blink 1.4s ease-in-out infinite}
.form-h2{font-size:var(--fs-2xl);font-weight:900;color:#fff;line-height:1.35;margin-bottom:8px}
.form-h2 em{color:#fde68a;font-style:normal}
.form-sub{font-size:var(--fs-md);color:rgba(255,255,255,.75);line-height:1.5}
.form-symptom-note{display:flex;align-items:center;gap:7px;margin-bottom:12px;padding:10px 12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:9px;font-size:var(--fs-sm);font-weight:700;color:var(--green-700);line-height:1.4}
.form-card{background:#faf5ea;border-radius:20px 20px 0 0;margin-top:-20px;padding:24px 20px 0}
.form-card .field-input{margin-bottom:12px}
.field-input--accent{border:2px solid var(--green-900);margin-bottom:18px}
.option-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.option-row{display:flex;align-items:center;gap:14px;padding:16px;border-radius:12px;cursor:pointer;background:#fff;border:1.5px solid #e5e7eb}
.option-row--selected{background:#fefce8;border:2px solid var(--gold-500)}
.option-title{font-size:var(--fs-md);font-weight:700;color:#111;line-height:1.3}
.option-row--selected .option-title{font-weight:700;color:var(--green-900)}
.option-sub{font-size:var(--fs-md);color:#888;margin-top:3px}
.option-row--selected .option-sub{color:var(--red-700);font-weight:700}
.form-trust-row{display:flex;justify-content:space-around;margin-bottom:18px;padding:14px;background:#f0fdf4;border-radius:12px;border:1.5px solid #bbf7d0}
.form-trust-item{text-align:center}
.form-trust-icon{font-size:var(--fs-lg);margin-bottom:4px}
.form-trust-label{font-size:var(--fs-xs);color:var(--green-700);font-weight:700}
.form-disclaimer{font-size:var(--fs-sm);color:#bbb;text-align:center;margin-top:12px;padding-bottom:24px;line-height:1.6}
/* ───────── Footer ───────── */
/* Căn giữa toàn bộ: trước đây logo và tên công ty căn giữa còn 4 hàng liên hệ
căn trái, nhìn như hai khối rời nhau. */
.footer{background:var(--green-900);padding:24px 20px;border-top:3px solid var(--gold-500);text-align:center}
/* Tấm nền cho logo — không phải trang trí: chữ trong logo là rgb(14,101,73),
đặt thẳng lên nền footer #0a3d20 chỉ đạt tương phản 1,75:1 nên coi như mất chữ.
width:fit-content + margin auto để canh giữa mà tấm nền vẫn ôm sát logo.
backdrop-filter chỉ có tác dụng khi phía sau có hoa văn/ảnh — nền footer đang
là màu phẳng nên hiện tại nó không đổi gì, để sẵn cho sau này. */
.footer-logo-wrap{display:flex;width:fit-content;margin:0 auto 12px;background:rgba(255,255,255,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:12px;padding:10px 16px}
.footer-logo{display:block;width:150px;height:auto}
.footer-brand{font-size:var(--fs-md);font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.04em;margin-bottom:16px;line-height:1.5;text-align:center}
/* min-height 44px cho CẢ hàng chứ không chỉ cho thẻ bên trong: trước đây
hàng có link cao 44px, hàng địa chỉ không link cao 45px nhưng lệch trục,
nên nhịp dọc giữa các hàng so le. */
/* Hàng căn giữa nhưng NỘI DUNG căn trái trong một cột hẹp: nếu để mỗi hàng tự
căn giữa theo độ dài chữ thì 4 icon rơi vào 4 vị trí ngang khác nhau. */
.footer-row{display:flex;gap:9px;margin-bottom:2px;align-items:center;justify-content:flex-start;min-height:44px;max-width:286px;margin-left:auto;margin-right:auto;text-align:left}
.footer-icon{font-size:var(--fs-md);flex-shrink:0;line-height:1}
.footer-text{font-size:var(--fs-md);color:rgba(255,255,255,.75);line-height:1.5}
/* inline nên chiều cao chỉ bằng dòng chữ; đổi sang inline-flex + min-height
để đạt ngưỡng chạm 44px mà không phá bố cục hàng có icon. */
.footer-text a{display:inline-flex;align-items:center;min-height:44px;color:rgba(255,255,255,.85);text-decoration:underline}
.footer-links{display:flex;gap:4px 20px;flex-wrap:wrap;justify-content:center;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.15)}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-md);color:rgba(255,255,255,.65);text-decoration:underline}
.footer-copy{font-size:var(--fs-xs);color:rgba(255,255,255,.45);margin-top:6px}
/* ───────── Nút Zalo nổi ─────────
Bọc trong wrap căn giữa theo cột 460px như sticky bar, để trên màn rộng nút
không dạt ra sát mép trình duyệt. Wrap không nhận chuột, chỉ cái nút nhận. */
.zalo-fab-wrap{position:fixed;bottom:82px;left:50%;transform:translateX(-50%);width:100%;max-width:460px;padding:0 14px;display:flex;justify-content:flex-end;z-index:390;pointer-events:none;transition:opacity .25s ease,visibility .25s}
/* Ẩn khi còn ở hero: màn đầu đã có nút gọi ở topbar + sticky bar, thêm nút thứ
ba là rối, mà nút này lại đè đúng ô "862 Reviews". Mặc định để hiện —
script.js gắn class ẩn ngay lúc chạy, nên trình duyệt không có
IntersectionObserver thì vẫn thấy nút. */
.zalo-fab-wrap--hidden{opacity:0;visibility:hidden}
/* Chỉ mỗi logo, không bọc ô tròn: ruột logo Zalo đã là trắng đục (chỉ 4 góc là
trong suốt) nên nó tự mang nền cho chữ "Zalo" — thêm đĩa trắng phía sau là dư.
Thẻ giữ 56px để vùng chạm vẫn trên ngưỡng 44px. */
.zalo-fab{pointer-events:auto;display:block;width:56px;height:56px;text-decoration:none}
/* drop-shadow ôm theo đúng hình logo (khác box-shadow là bóng của khối vuông),
để logo còn tách được nền khi trôi qua các khối ảnh nhà vườn và ảnh banner. */
.zalo-fab-icon{width:56px;height:56px;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}
/* ───────── Sticky bar ───────── */
.sticky-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:460px;z-index:400;background:var(--green-900);border-top:3px solid var(--gold-500);box-shadow:0 -2px 12px rgba(0,0,0,.25);transition:transform .25s ease,visibility .25s}
/* Trượt xuống khi form chính đã ở trên màn hình — nếu không, bà con nhìn thấy
hai ô SĐT cùng lúc và phân vân không biết điền ô nào mới đúng.
visibility:hidden để bàn phím Tab không lạc vào ô đang bị giấu. */
.sticky-bar--hidden{transform:translate(-50%,100%);visibility:hidden}
.sticky-bar-inner{display:flex;align-items:center;gap:8px;padding:10px 12px}
/* Nút gọi: khối vàng có chữ, tối thiểu 48px — trước đây chỉ là emoji 23×30px,
nhỏ hơn ngưỡng chạm 44px dù gọi điện là hành động chuyển đổi mạnh nhất. */
.sticky-call{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;flex-shrink:0;min-width:52px;min-height:48px;padding:4px 6px;border-radius:8px;background:var(--gold-500);color:var(--green-900);text-decoration:none}
.sticky-call-icon{font-size:var(--fs-lg);line-height:1}
.sticky-call-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.03em;line-height:1}
/* font-size 16px là bắt buộc: Safari iOS tự phóng to cả trang khi focus input
nhỏ hơn 16px, làm layout nhảy ngay lúc bà con định gõ số. */
.sticky-input{flex:1;min-width:0;min-height:48px;padding:11px 12px;border:1.5px solid rgba(255,255,255,.25);border-radius:8px;background:rgba(255,255,255,.1);color:#fff;font-size:var(--fs-input);outline:none;caret-color:#fff}
.sticky-input::placeholder{font-size:var(--fs-input);color:rgba(255,255,255,.65)}
.sticky-input.invalid{border-color:#ef4444;background:rgba(239,68,68,.15)}
@keyframes shakeError{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.shake{animation:shakeError .3s ease}
.sticky-bar .btn{width:auto;flex-shrink:0;min-height:48px;padding:11px 12px;border-radius:8px;font-size:var(--fs-sm);white-space:nowrap}
@media (max-width:380px){
.sticky-bar-inner{gap:6px;padding:8px 10px}
.sticky-call{min-width:48px;padding:4px}
.sticky-input{padding:10px 10px}
.sticky-input::placeholder{font-size:var(--fs-sm)}
.sticky-bar .btn{padding:11px 9px;font-size:var(--fs-sm);letter-spacing:0}
}
/* ───────── Popup ───────── */
.popup-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:500;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
/* Khóa cuộn nền khi popup mở — trước đây cuộn thì nền chạy mà popup đứng yên giữa
màn hình, bà con tưởng trang bị treo. */
body.popup-open{overflow:hidden}
.popup-card{background:#fff;border-radius:16px;width:360px;max-width:100%;max-height:calc(100vh - 40px);overflow-y:auto;position:relative;animation:popIn .3s ease}
/* Nút đóng đủ 44px: bà con phải thoát được popup dễ như mở nó ra, nếu không
phản xạ duy nhất còn lại là bấm nút Back của trình duyệt = mất khách. */
.popup-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:var(--fs-2xl);line-height:1;cursor:pointer;color:rgba(255,255,255,.85);background:rgba(0,0,0,.25);border:none;border-radius:50%;font-weight:700;z-index:2}
.popup-head{background:var(--green-900);padding:22px 24px 20px;border-radius:16px 16px 0 0}
.popup-eyebrow{font-size:var(--fs-xs);font-weight:700;color:var(--gold-500);letter-spacing:.08em;margin-bottom:10px}
.popup-title{font-size:var(--fs-3xl);font-weight:900;color:#fff;line-height:1.05;letter-spacing:-.01em;margin-bottom:6px}
.popup-price-line{font-size:var(--fs-md);color:rgba(255,255,255,.75);line-height:1.5}
.popup-price-line strong{color:var(--gold-500);font-size:var(--fs-lg);font-weight:900}
.popup-body{background:#faf5ea;padding:20px 24px 22px;border-radius:0 0 16px 16px}
.popup-social-proof{display:flex;align-items:center;gap:8px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:10px 12px;margin-bottom:14px}
.popup-avatars{display:flex}
.popup-avatars img{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid #fff;flex-shrink:0;margin-left:-8px}
.popup-avatars img:first-child{margin-left:0}
.popup-social-text{font-size:var(--fs-sm);color:var(--green-700);font-weight:700;line-height:1.4}
.popup-social-text span{color:#d97706}
.popup-call-note{font-size:var(--fs-md);color:#333;font-weight:700;margin-bottom:12px}
.popup-call-note strong{color:var(--red-700);font-weight:900}
.popup-input{display:block;width:100%;padding:15px 16px;border:2px solid var(--green-900);border-radius:10px;font-size:var(--fs-input);color:var(--ink-900);outline:none;margin-bottom:12px;background:#fff}
.popup-input.invalid{border-color:var(--red-700);margin-bottom:4px}
.popup-trust-row{display:flex;justify-content:space-around;margin-top:14px}
.popup-trust-row div{font-size:var(--fs-sm);color:#666;font-weight:700}
/* ───── Honeypot: bẫy bot — người thật không bao giờ thấy/điền field này ───── */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}