/* RICH COENZYME Q10 — mobile-first */
:root{
  --rose:#e75480; --rose-dark:#c73a68; --gold:#b8934a; --gold-light:#e6cf9a;
  --ink:#241a1e; --ink-soft:#5a4a50; --bg:#fffdfb; --bg-soft:#faf4ee;
  --line:#eadfd6; --green:#1e7d43; --red:#c0392b; --amber:#9a6b00;
  --radius:14px; --shadow:0 4px 24px rgba(60,20,40,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:var(--rose-dark)}
.container{max-width:960px;margin:0 auto;padding:0 16px}
section{padding:44px 0}
h1{font-size:clamp(26px,6vw,42px);line-height:1.25;margin:0 0 12px}
h2{font-size:clamp(22px,5vw,32px);line-height:1.3;margin:0 0 8px;color:var(--ink)}
h3{font-size:18px;margin:0 0 6px}
.kicker{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-dark);background:#fdeef4;border-radius:99px;padding:4px 14px;margin-bottom:10px}
.section-sub{color:var(--ink-soft);max-width:640px;margin:0 auto 24px}
.center{text-align:center}
.alt{background:var(--bg-soft)}

/* Buttons */
.btn{display:inline-block;border:0;cursor:pointer;text-decoration:none;text-align:center;font-weight:700;border-radius:99px;transition:transform .15s ease,box-shadow .15s ease;font-size:17px;padding:15px 28px}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--rose),var(--rose-dark));color:#fff;box-shadow:0 6px 18px rgba(199,58,104,.35)}
.btn-outline{background:#fff;color:var(--rose-dark);border:2px solid var(--rose)}
.btn-lg{font-size:18px;padding:17px 34px;width:100%;max-width:420px}

/* Topbar */
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{font-weight:800;color:var(--rose-dark);font-size:17px;letter-spacing:.02em}
.brand small{display:block;font-size:10px;letter-spacing:.18em;color:var(--gold);font-weight:600}
.topbar a.hotline small{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--ink-soft);font-weight:700;text-align:right;line-height:1.1}
.hotline{font-size:14px;font-weight:700;text-decoration:none}

/* Hero */
.hero{background:linear-gradient(180deg,#fdf2f6 0%,var(--bg) 90%);padding:36px 0 44px}
.hero-grid{display:grid;gap:24px;align-items:center}
.hero .badges{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.badge{font-size:12.5px;font-weight:600;background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 12px;color:var(--ink-soft)}
.badge b{color:var(--rose-dark)}
.hero-img{border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-ctas{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.price-tag{font-size:15px;color:var(--ink-soft);margin-top:8px}
.price-tag b{font-size:22px;color:var(--rose-dark)}

/* Ảnh trên thanh đầu trang */
.topbar .brand{display:flex;align-items:center;gap:10px;min-width:0}
.topbar .brand .tb-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:center top;border:2px solid var(--gold-light);flex:none}
.topbar .brand .tb-text{display:flex;flex-direction:column;min-width:0}
@media(max-width:640px){
  .topbar .brand{gap:8px}
  .topbar .brand .tb-avatar{width:34px;height:34px}
  .topbar .brand .tb-text{font-size:15px;white-space:nowrap}
  .topbar .brand .tb-text small{font-size:9.5px;letter-spacing:.06em;white-space:nowrap}
  .topbar .hotline small{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--ink-soft);font-weight:700;text-align:right;line-height:1.1}
.hotline{font-size:14px;white-space:nowrap}
}

/* Ảnh hero là chân dung anh Sơn (thay ảnh sản phẩm khi có file son-hero) */
.hero-img.portrait{aspect-ratio:4/5;object-fit:cover;object-position:center 20%;max-width:400px;margin:0 auto;display:block}
.hero-product-mini{display:flex;align-items:center;gap:10px;margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 14px}
.hero-product-mini img{width:54px;height:54px;object-fit:cover;border-radius:9px;flex:none}
.hero-product-mini span{font-size:13px;color:var(--ink-soft);line-height:1.4}
.hero-product-mini b{color:var(--ink)}

/* Người đại diện trong hero */
.hero-person{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 18px 8px 8px;box-shadow:var(--shadow);margin-top:14px}
.hero-person img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:center top;flex:none;border:2px solid var(--gold-light)}
.hero-person .who b{display:block;font-size:15px;color:var(--ink);line-height:1.3}
.hero-person .who span{font-size:12.5px;color:var(--ink-soft);line-height:1.35;display:block}

/* Cards */
.grid{display:grid;gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h3{color:var(--rose-dark)}
.icon-big{font-size:30px;line-height:1;margin-bottom:8px}

/* Mechanism flow */
.flow{display:flex;flex-direction:column;gap:0;max-width:520px;margin:24px auto 0}
.flow-step{background:#fff;border:1.5px solid var(--gold-light);border-radius:var(--radius);padding:14px 18px;text-align:center;font-weight:600}
.flow-step small{display:block;font-weight:400;color:var(--ink-soft);font-size:13.5px}
.flow-arrow{text-align:center;color:var(--gold);font-size:22px;line-height:1.4}

/* Table */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:480px;background:#fff;font-size:14.5px}
th,td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--bg-soft);font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
tr:last-child td{border-bottom:0}

/* Proof */
.proof-card{display:flex;gap:14px;align-items:flex-start}
.proof-num{flex:none;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}
.proof-card .meta{font-size:13px;color:var(--ink-soft);margin:6px 0 10px}
.doc-link{font-size:14px;font-weight:700}

/* Thẻ lộ trình nổi bật (6 hộp) — bản nhấn mạnh */
.offer-card.hero-pack{border-width:2.5px;border-color:#d8a622;background:linear-gradient(170deg,#fff9e8,#fffdf6 45%,#fff);position:relative;padding-top:30px;box-shadow:0 10px 30px rgba(201,134,26,.22)}
@media(min-width:620px){.offer-card.hero-pack{transform:scale(1.045)}.offer-card.hero-pack.selected{transform:scale(1.045)}}
.offer-card.hero-pack .total{font-size:clamp(20px,5.6vw,31px);text-shadow:0 1px 0 #fff}
.offer-card.hero-pack.selected{border-color:var(--rose);box-shadow:0 12px 34px rgba(231,84,128,.3)}
.offer-card.hero-pack .pack-ribbon{font-size:11.5px;padding:5px 16px;box-shadow:0 3px 10px rgba(201,134,26,.4)}
.pack-ribbon .rb-short{display:none}
@media(max-width:619px){
  .pack-ribbon .rb-full{display:none}
  .pack-ribbon .rb-short{display:inline}
}
@keyframes nhip{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.offer-card.hero-pack .save.big{animation:nhip 2.4s ease-in-out infinite;font-size:14px;padding:8px 18px;box-shadow:0 4px 14px rgba(47,110,72,.35)}
@media(prefers-reduced-motion:reduce){.offer-card.hero-pack .save.big{animation:none}}

/* Chân thẻ: trạng thái chọn rõ ràng cho người lớn tuổi */
.pick-hint{margin-top:14px;border-radius:99px;padding:10px 12px;font-size:14px;font-weight:800;letter-spacing:.02em;background:var(--bg-soft);color:var(--ink-soft);border:1.5px dashed var(--line)}
.offer-card.selected .pick-hint{background:var(--rose);color:#fff;border:1.5px solid var(--rose);box-shadow:0 4px 12px rgba(231,84,128,.35)}
.offer-card.hero-pack .pick-hint{background:#fff3d6;color:#8a5a00;border-color:#e3c78a}
.offer-card.hero-pack.selected .pick-hint{background:var(--rose);color:#fff;border-color:var(--rose)}
.offer-card .pack-ribbon{position:absolute;top:-1px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold),#c9861a);color:#fff;font-size:clamp(9px,2.6vw,11.5px);font-weight:800;letter-spacing:.05em;padding:4px 12px;border-radius:0 0 10px 10px;white-space:nowrap;line-height:1.3;max-width:calc(100% + 8px)}
.offer-card .pack-bonus{font-size:12.5px;font-weight:800;color:#a35a00;margin-top:5px;line-height:1.35}
.offer-card .save.big{background:var(--green);color:#fff;font-size:12.5px}

/* Huy hiệu cam kết ở hero */
.guarantee-badge{display:inline-flex;align-items:center;gap:10px;background:#f2f9f4;border:1.5px solid #b8ddc6;border-radius:99px;padding:8px 16px 8px 10px;margin-top:14px;font-size:13.5px;line-height:1.35;color:#1f5c39;max-width:100%}
.guarantee-badge .g-ico{flex:none;width:32px;height:32px;border-radius:50%;background:#2f6e48;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}
.guarantee-badge b{color:#12482a;display:block}

/* Khối cam kết đầy đủ */
.guarantee-box{max-width:720px;margin:0 auto;background:linear-gradient(180deg,#f4faf6,#fff);border:2px solid #b8ddc6;border-radius:var(--radius);padding:24px 20px;text-align:center}
.guarantee-box .g-seal{width:64px;height:64px;border-radius:50%;background:#2f6e48;color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 12px}
.guarantee-box h3{font-size:21px;color:#12482a;margin-bottom:8px}
.guarantee-box .g-list{display:grid;gap:10px;margin-top:16px;text-align:left}
@media(min-width:640px){.guarantee-box .g-list{grid-template-columns:1fr 1fr}}
.guarantee-box .g-list div{background:#fff;border:1px solid #d6eade;border-radius:10px;padding:11px 14px;font-size:14.5px;line-height:1.5}

/* Khối Zalo sau thanh toán */
.zalo-box{background:linear-gradient(135deg,#eef6ff,#f7fbff);border:1.5px solid #b9d7f2;border-radius:var(--radius);padding:20px 18px;margin-top:22px;text-align:center}
.zalo-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.zalo-btns .btn{flex:1;min-width:220px}

/* Khối giới thiệu bạn bè */
.ref-box{background:linear-gradient(135deg,#fff8ec,#fffdf7);border:1.5px solid var(--gold-light);border-radius:var(--radius);padding:20px 18px;margin-top:22px;text-align:center}
.ref-code{display:flex;align-items:center;gap:10px;justify-content:center;margin:12px 0}
.ref-code code{font-size:22px;font-weight:800;letter-spacing:.08em;color:var(--rose-dark);background:#fff;border:2px dashed var(--gold);border-radius:10px;padding:9px 18px}
.ref-share{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.ref-share a,.ref-share button{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:9px 16px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;color:var(--ink)}
.ref-share a:hover,.ref-share button:hover{border-color:var(--rose);color:var(--rose-dark)}

/* Dải cam kết trên nút đặt hàng */
.assure{display:grid;gap:8px;background:#f2f9f4;border:1px solid #cfe6d7;border-radius:12px;padding:13px 15px;margin:0 0 16px}
@media(min-width:620px){.assure{grid-template-columns:1fr 1fr}}
.assure div{font-size:14px;line-height:1.45;color:#1f5c39}
.assure b{color:#12482a}

/* CTA giữa bài */
.mid-cta{background:linear-gradient(135deg,#fff6f9,#fffdf6);border:1.5px solid var(--gold-light);border-radius:var(--radius);padding:22px 18px;margin:26px auto 0;max-width:640px;text-align:center}
.mid-cta p{font-size:16px;margin-bottom:14px;line-height:1.55}
.mid-cta .note{font-size:13px;color:var(--ink-soft);margin:10px 0 0}

/* Offer — lựa chọn quà tặng / giảm giá */
.opt-switch{display:grid;gap:10px;margin-top:16px}
@media(min-width:620px){.opt-switch{grid-template-columns:1fr 1fr}}
.opt-card{border:2px solid var(--line);background:#fff;border-radius:var(--radius);padding:15px 16px;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s;font:inherit;width:100%}
.opt-card:hover{border-color:var(--gold)}
.opt-card.selected{border-color:var(--rose);box-shadow:0 4px 18px rgba(231,84,128,.18);background:#fffafc}
.opt-card .o-tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:99px;padding:3px 10px;margin-bottom:7px}
.opt-card .o-tag.gift{background:#fff3e0;color:#a35a00}
.opt-card .o-tag.save{background:#e8f6ee;color:var(--green)}
.opt-card .o-price{font-size:21px;font-weight:800;color:var(--rose-dark);line-height:1.2}
.opt-card .o-old{font-size:14px;color:var(--ink-soft);text-decoration:line-through;margin-left:7px;font-weight:600}
.opt-card .o-desc{font-size:13.5px;color:var(--ink-soft);margin-top:5px;line-height:1.45}
.opt-card .o-desc b{color:var(--ink)}
.save-badge{display:inline-block;font-size:12.5px;font-weight:800;color:#fff;background:var(--green);border-radius:99px;padding:3px 11px;margin-top:6px}
.gift-badge{display:inline-block;font-size:12.5px;font-weight:800;color:#fff;background:#c9861a;border-radius:99px;padding:3px 11px;margin-top:6px}
.summary .row.gift-row{color:#a35a00;font-weight:700}

/* Offer */
.offer-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
/* Bảng giá 2 lựa chọn — thẻ to, chữ lớn, dễ bấm cho khách 35–65 tuổi */
.offer-grid{max-width:720px;margin-left:auto;margin-right:auto}
.offer-grid .offer-card{padding-top:34px;position:relative}
.offer-grid .qty{font-size:clamp(20px,5.6vw,26px)}
.offer-grid .total{font-size:clamp(19px,5.2vw,27px)}
.offer-grid .per-day{font-size:15px}
.offer-grid .offer-card{min-height:210px}
.offer-card{border:2px solid var(--line);border-radius:var(--radius);background:#fff;padding:16px 14px;text-align:center;cursor:pointer;transition:border-color .15s, box-shadow .15s}
.offer-card:hover{border-color:var(--gold)}
.offer-card.selected{border-color:var(--rose);box-shadow:0 4px 18px rgba(231,84,128,.18)}
.offer-card .qty{font-weight:800;font-size:17px}
.offer-card .total{color:var(--rose-dark);font-weight:800;font-size:16px;margin-top:4px}
.offer-card .per-day{font-size:12px;color:var(--ink-soft);margin-top:4px}
.offer-card .save{display:inline-block;font-size:11.5px;font-weight:700;color:var(--green);background:#e8f6ee;border-radius:99px;padding:2px 8px;margin-top:6px}

/* Checkout form */
.form{max-width:560px;margin:0 auto}
.field{margin-bottom:14px}
.field label{display:block;font-size:14px;font-weight:700;margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:16px;font-family:inherit;background:#fff}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--rose)}
.field .err{color:var(--red);font-size:13px;margin-top:4px;display:none}
.field.invalid input,.field.invalid textarea{border-color:var(--red)}
.field.invalid .err{display:block}
.summary{background:var(--bg-soft);border-radius:var(--radius);padding:16px 18px;margin:16px 0;font-size:15px}
.summary .row{display:flex;justify-content:space-between;padding:3px 0}
.summary .row.total{font-weight:800;font-size:18px;color:var(--rose-dark);border-top:1px dashed var(--line);margin-top:6px;padding-top:8px}

/* FAQ */
details.faq{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
details.faq summary{padding:15px 18px;font-weight:700;cursor:pointer;list-style:none;position:relative;padding-right:40px}
details.faq summary::after{content:"+";position:absolute;right:18px;top:12px;font-size:22px;color:var(--gold)}
details.faq[open] summary::after{content:"–"}
details.faq .a{padding:0 18px 15px;color:var(--ink-soft)}

/* Disclaimer & compliance */
.disclaimer{font-size:13.5px;color:var(--ink-soft);background:#fff8ec;border:1px solid #f0e0bd;border-radius:12px;padding:12px 16px}
.disclaimer b{color:var(--amber)}

/* Placeholder for missing data */
.placeholder-data{border:2px dashed var(--gold);border-radius:var(--radius);background:#fffdf5;padding:22px;text-align:center;color:var(--amber);font-weight:600;font-size:14.5px}
.placeholder-data small{display:block;font-weight:400;margin-top:6px;color:var(--ink-soft)}

/* Sticky CTA mobile */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;transition:transform .25s,opacity .25s;background:#fff;border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center;box-shadow:0 -4px 18px rgba(0,0,0,.08)}
.sticky-cta .p{font-size:13px;line-height:1.3}
.sticky-cta .p b{color:var(--rose-dark);font-size:15px}
.sticky-cta .btn{flex:1;font-size:15.5px;padding:13px 10px}
.sticky-cta.an{transform:translateY(120%);opacity:0;pointer-events:none}
body{padding-bottom:76px}

/* Payment page */
.qr-box{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center;max-width:420px;margin:0 auto}
.qr-box img{margin:0 auto;width:min(280px,80vw)}
.copy-row{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--bg-soft);border-radius:10px;padding:10px 14px;margin-top:8px;font-size:14.5px}
.copy-row b{word-break:break-all}
.copy-btn{border:1px solid var(--rose);background:#fff;color:var(--rose-dark);border-radius:8px;font-size:12.5px;font-weight:700;padding:5px 10px;cursor:pointer;flex:none}
.status-pill{display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:8px 18px;font-weight:700;font-size:15px}
.status-pill.pending{background:#fff5e5;color:var(--amber)}
.status-pill.paid{background:#e8f6ee;color:var(--green)}
.spinner{width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Video — facade YouTube: chỉ nạp iframe khi bấm (tiết kiệm ~1MB JS của YouTube) */
.vid-main{max-width:760px;margin:0 auto}
.yt-facade{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:#1a1114;box-shadow:var(--shadow);border:0;padding:0;width:100%;display:block}
.yt-facade img{width:100%;height:100%;object-fit:cover;display:block}
.yt-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.yt-facade .btn-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:68px;height:68px;border-radius:50%;background:rgba(231,84,128,.94);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;padding-left:5px;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .15s}
.yt-facade:hover .btn-play{transform:translate(-50%,-50%) scale(1.08)}
.yt-facade .vid-label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 14px;color:#fff;text-align:left;font-size:14px;line-height:1.35}
.yt-facade .vid-label b{display:block;font-size:15.5px}
.yt-facade .vid-label span{opacity:.85;font-size:13px}
.yt-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-grid{display:grid;gap:14px;margin-top:16px;align-items:stretch}
@media(min-width:700px){.vid-grid{grid-template-columns:repeat(3,1fr)}}
.vid-grid .yt-facade .btn-play{width:48px;height:48px;font-size:19px}
.vid-grid .yt-facade .vid-label{padding:9px 11px;font-size:12.5px}
.vid-grid .yt-facade .vid-label b{font-size:13.5px}

/* Quiz tự đánh giá nhu cầu */
.quiz{max-width:620px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow);text-align:left}
.quiz-progress{height:6px;background:var(--bg-soft);border-radius:99px;overflow:hidden;margin-bottom:18px}
.quiz-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--rose),var(--gold));transition:width .3s}
.quiz-step{font-size:12.5px;font-weight:700;color:var(--ink-soft);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.quiz-q{font-size:19px;font-weight:800;line-height:1.35;margin-bottom:16px}
.quiz-opts{display:flex;flex-direction:column;gap:9px}
.quiz-opt{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:13px 16px;font:inherit;font-size:15.5px;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.quiz-opt:hover{border-color:var(--rose);background:#fffafc}
.quiz-back{margin-top:14px;border:0;background:none;color:var(--ink-soft);font:inherit;font-size:13.5px;cursor:pointer;text-decoration:underline}
.quiz-result .r-badge{display:inline-block;border-radius:99px;padding:6px 16px;font-weight:800;font-size:14px;margin-bottom:10px}
.quiz-result .r-badge.hi{background:#fdeef4;color:var(--rose-dark)}
.quiz-result .r-badge.mid{background:#fff5e5;color:var(--amber)}
.quiz-result .r-badge.lo{background:#eef4f0;color:var(--green)}
.quiz-result ul{margin:10px 0 0;padding-left:20px;color:var(--ink-soft);font-size:14.5px}
.quiz-result li{margin-bottom:5px}

/* Kết quả phân tích quiz */
.ana-row{margin:14px 0;text-align:left}
.ana-head{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:15px;margin-bottom:6px}
.ana-tag{font-size:11.5px;font-weight:800;border-radius:99px;padding:3px 11px;letter-spacing:.03em}
.ana-tag.ok{background:#e8f6ee;color:var(--green)}
.ana-tag.warn{background:#fff5e0;color:#a35a00}
.ana-tag.bad{background:#fdeef0;color:var(--rose-dark)}
.ana-bar{height:8px;border-radius:99px;background:var(--bg-soft);overflow:hidden}
.ana-bar i{display:block;height:100%;border-radius:99px;transition:width .5s}
.ana-bar i.ok{background:var(--green)}
.ana-bar i.warn{background:#e8a020}
.ana-bar i.bad{background:var(--rose)}
.ana-note{font-size:13.5px;color:var(--ink-soft);margin-top:7px;line-height:1.5}
.ana-note b{color:var(--ink)}

/* Mục câu chuyện — video tự host */
.story-wrap{max-width:420px;margin:0 auto}
/* Video quay dọc 9:16 — KHÔNG dùng khung 16:9 kẻo cắt mất đầu/chân người nói */
.story-wrap video{width:100%;border-radius:var(--radius);background:#1a1114;box-shadow:var(--shadow);display:block;aspect-ratio:9/16;max-height:78vh;object-fit:contain}
.story-person{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:14px;text-align:left}
.story-person img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:center top;border:2px solid var(--gold-light);flex:none}
.story-person b{display:block;font-size:15.5px}
.story-person span{font-size:13px;color:var(--ink-soft)}

/* Dải ảnh hành trình */
.photo-strip{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;-webkit-overflow-scrolling:touch}
@media(min-width:700px){.photo-strip{grid-auto-columns:31%}}
.photo-strip::-webkit-scrollbar{height:6px}
.photo-strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.strip-card{scroll-snap-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.strip-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.strip-card figcaption{padding:10px 12px;font-size:13px;line-height:1.45;color:var(--ink-soft);text-align:left}

/* Tóm tắt dưới mỗi video */
.vid-item{display:flex;flex-direction:column;height:100%}
.vid-summary{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-top:10px;text-align:left;font-size:14px;line-height:1.55}
.sum-row{display:flex;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.sum-row:last-of-type{border-bottom:0}
.sum-row .k{flex:none;width:88px;font-weight:800;color:var(--rose-dark);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.sum-row .v{flex:1;color:var(--ink)}
.sum-note{margin-top:9px;font-size:12.5px;color:var(--amber);background:#fff8ec;border:1px solid #f0e0bd;border-radius:8px;padding:6px 10px}
.vid-grid .vid-summary{font-size:13.5px;padding:11px 13px}
.vid-grid .sum-row .k{width:76px;font-size:11px}

/* Video (placeholder cũ) */
.video-ph{aspect-ratio:16/9;border-radius:var(--radius);background:linear-gradient(135deg,#2a1c22,#4a2c38);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#e6cf9a;gap:8px;text-align:center;padding:20px}
.video-ph .play{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:24px}

/* Sau khi mua — chia sẻ lại */
.after-buy{margin-top:22px;border-top:1px dashed var(--line);padding-top:20px;text-align:left}
.after-buy h3{font-size:17px;margin-bottom:6px}
.after-buy p.sub{font-size:14px;color:var(--ink-soft);line-height:1.55;margin-bottom:14px}
.share-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.share-btn{flex:1;min-width:104px;border:1.5px solid var(--line);background:#fff;border-radius:11px;padding:11px 8px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s}
.share-btn:hover{border-color:var(--rose);background:#fffafc}
.fb-box{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.fb-box label{display:block;font-size:13px;font-weight:700;color:var(--ink-soft);margin:11px 0 5px}
.fb-box label:first-of-type{margin-top:0}
.fb-box input,.fb-box textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;font-size:15.5px;background:#fff}
.fb-box input:focus,.fb-box textarea:focus{outline:0;border-color:var(--rose)}
.fb-box textarea{min-height:104px;resize:vertical;line-height:1.55}
.stars{display:flex;gap:5px}
.star{border:0;background:none;font-size:27px;line-height:1;cursor:pointer;padding:0;filter:grayscale(1);opacity:.35;transition:.12s}
.star.on{filter:none;opacity:1;transform:scale(1.06)}
.fb-hint{font-size:12.5px;color:var(--ink-soft);margin-top:9px;line-height:1.5}
.fb-done{background:#e8f6ee;border:1px solid #b9e2c9;border-radius:var(--radius);padding:18px;text-align:center}
.fb-done .big{font-size:34px;line-height:1;margin-bottom:8px}

/* Ảnh tin nhắn phản hồi */
.msg-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.msg-grid{grid-template-columns:repeat(4,1fr)}}
.msg-item{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;cursor:zoom-in;padding:0;display:block;width:100%;text-align:left}
.msg-item img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block}
.msg-item .cap{padding:8px 10px;font-size:12.5px;font-weight:700;color:var(--rose-dark)}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(20,10,15,.92);display:flex;align-items:center;justify-content:center;padding:16px}
.lightbox img{max-width:100%;max-height:88vh;border-radius:10px;object-fit:contain}
.lightbox .lb-close{position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:24px;cursor:pointer}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:24px;cursor:pointer}
.lightbox .lb-prev{left:10px}.lightbox .lb-next{right:10px}
.lightbox .lb-cap{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#fff;font-size:14px}

/* Ảnh bong bóng tin nhắn trong thẻ feedback */
.testimonial .bubble-shot{display:block;width:100%;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:11px;padding:0;background:#eef1f6;cursor:zoom-in;position:relative}
.testimonial .bubble-shot img{width:100%;display:block}
.testimonial .zoom-hint{position:absolute;right:6px;bottom:6px;font-size:10.5px;background:rgba(255,255,255,.92);border-radius:99px;padding:2px 8px;color:var(--ink-soft)}

/* Badge nguồn feedback */
.testimonial .src-badge{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;color:var(--green);background:#eef7f1;border:1px solid #d3e8da;border-radius:99px;padding:3px 11px}
.testimonial p{font-style:italic}
.placeholder-data.dev-only{display:none!important}
.proof-strip{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 20px;font-size:13px}
.proof-strip span{background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 14px;color:var(--ink-soft)}
.proof-strip b{color:var(--ink)}

/* Reviews page */
.review-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.review-toolbar input,.review-toolbar select{padding:10px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:15px}
.review-toolbar input{flex:1;min-width:180px}
.testimonial{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.testimonial .who{font-weight:700;color:var(--rose-dark);font-size:14px;margin-bottom:6px}
.testimonial .cat{font-size:12px;color:var(--ink-soft)}

footer{background:#241a1e;color:#cdbfb6;font-size:13.5px;padding:34px 0 110px;margin-top:30px}
footer h4{color:#fff;margin:0 0 8px;font-size:14px}
footer a{color:var(--gold-light)}
footer .cols{display:grid;gap:22px}

@media(min-width:760px){
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
  /* Desktop: thanh CTA thu thành pill nổi góc phải dưới — kéo tới đâu cũng bấm được */
  .sticky-cta{left:auto;right:22px;bottom:22px;border-radius:99px;border:1px solid var(--line);padding:8px 10px 8px 20px;box-shadow:0 8px 28px rgba(0,0,0,.16);max-width:360px}
  .sticky-cta .btn{flex:none;padding:12px 24px}
  body{padding-bottom:0}
  footer{padding-bottom:34px}
  footer .cols{grid-template-columns:2fr 1fr 1fr}
  .hero-ctas{flex-direction:row}
  .btn-lg{width:auto}
}

/* ===== Chọn cách thanh toán (thêm 29/08) =====
   COD đứng trước và chọn sẵn: đo trong OMS thấy 40/40 đơn gần nhất là COD —
   khách quen trả tiền khi nhận, bắt chuyển khoản trước là lọc mất phần lớn. */
.pay-methods{display:flex;flex-direction:column;gap:8px}
.pay-opt{display:block;position:relative;cursor:pointer;
  border:2px solid var(--line);border-radius:12px;padding:9px 12px 8px 40px;
  background:#fff;transition:border-color .15s,background .15s}
.pay-opt input{position:absolute;left:13px;top:12px;width:17px;height:17px;
  accent-color:var(--pink);margin:0;cursor:pointer}
.pay-opt .pay-t{display:block;font-weight:700;font-size:14.5px;line-height:1.3}
.pay-opt .pay-s{display:block;font-size:12px;color:var(--ink-soft);margin-top:1px;line-height:1.35}
.pay-opt.selected{border-color:var(--pink);background:#fff5f8}
.pay-opt:focus-within{outline:2px solid var(--pink);outline-offset:2px}

/* Nút "ĐẶT MUA NGAY" nhảy thẳng vào form. Thanh đầu trang dính cố định cao 56px,
   không trừ ra thì phần đầu form chui xuống dưới nó và khách không thấy ô họ tên. */
#order-form{scroll-margin-top:68px}
#offer{scroll-margin-top:68px}

/* Gập ghi chú + siết khoảng cách trong form đặt hàng (29/08).
   Mục tiêu: cả form lọt MỘT màn hình điện thoại thấp (560px) để khách bấm mua
   là điền được và đặt luôn, không phải kéo — chủ DN báo lỗi này 3 lần. */
.mo-them{display:block;width:100%;text-align:left;background:none;border:0;padding:2px 0 10px;
  color:var(--pink);font-weight:700;font-size:13.5px;text-decoration:underline;cursor:pointer}
#order-form .field{margin-bottom:10px}
#order-form label{margin-bottom:4px;font-size:14px}
#order-form input,#order-form textarea{padding:11px 12px}

/* Siết nốt để nút Xác nhận lọt màn hình 560px (29/08).
   Đo trước khi siết: tóm tắt 109px cho ĐÚNG MỘT dòng (toàn đệm), ô thanh toán 162px
   → nút Xác nhận rơi xuống 688px trong khi màn hình chỉ 621px. */
#order-form .summary{padding:10px 14px;margin:10px 0 12px}
#order-form .pay-opt{padding:8px 10px 7px 36px}
#order-form .pay-opt input{left:11px;top:11px}
#order-form .pay-opt .pay-s{font-size:11.5px;margin-top:0}
#order-form .pay-methods{gap:6px}

/* Gói 1 hộp chỉ còn ĐÚNG một dòng tổng tiền, nên bỏ vạch kẻ + đệm vốn dành cho
   trường hợp có nhiều dòng phía trên. Đo được: dòng đó cao 77px chỉ vì kẻ và đệm. */
#order-form .summary .row.total:first-child{border-top:0;margin-top:0;padding-top:0;font-size:17px}

/* Hai ô thanh toán xếp NGANG (29/08) — xếp dọc chiếm 152px khiến nút Xác nhận
   rơi khỏi màn hình 621px. Nội dung trấn an đã nằm ở khối cam kết ngay phía trên. */
#order-form .pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#order-form .pay-opt{padding:10px 8px 10px 32px;display:flex;align-items:center;min-height:56px}
#order-form .pay-opt input{left:9px;top:50%;transform:translateY(-50%)}
#order-form .pay-opt .pay-t{font-size:13px;line-height:1.3}

/* Nút Xác nhận: bớt đệm để lọt trọn màn hình 621px (đo được: thiếu đúng 4px).
   Vẫn cao 47px — trên ngưỡng 44px mà Apple/Google khuyến nghị cho vùng chạm. */
#order-form #submit-btn{padding:13px 24px;margin-top:2px}