:root{--pink:#fe2c55;--pink-d:#e0193f;--ink:#161823;--muted:#6f7078;--line:#ececee;--bg:#f4f4f6;--teal:#00a7a7;--tint:#fff1f4}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:8px}
body{font-family:'Be Vietnam Pro',sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
img{display:block;width:100%}
a{text-decoration:none;color:inherit}
.page{max-width:420px;margin:0 auto;background:var(--bg);overflow:hidden}
.card{background:#fff;padding:16px 14px;margin-top:8px}
.card>h2{font-size:17px;font-weight:700;line-height:1.35;margin-bottom:12px}

/* ===== Nút mua: nhấp nhô to nhỏ ===== */
.btn{display:flex;align-items:center;justify-content:center;width:100%;height:50px;border:0;border-radius:10px;background:var(--pink);color:#fff;font:700 16px 'Be Vietnam Pro',sans-serif;cursor:pointer;animation:bob 1.1s ease-in-out infinite}
.btn span{display:block;animation:bob-text 1.1s ease-in-out infinite}
.btn:disabled{opacity:.65;animation:none}
.btn:disabled span{animation:none}
@keyframes bob{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes bob-text{0%,100%{transform:scale(.96)}50%{transform:scale(1.06)}}

/* ===== Hero ===== */
.hero{position:relative}
.btn-hero{position:absolute;left:24%;width:52%;top:88%;height:5.6%;border-radius:99px;font-size:17px}

/* ===== Sản phẩm ===== */
.g-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.g-track::-webkit-scrollbar,.g-thumbs::-webkit-scrollbar{display:none}
.g-track img{flex:0 0 100%;height:400px;object-fit:cover;scroll-snap-align:start}
.gallery{position:relative;background:#fff}
.g-arrow{position:absolute;top:200px;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;cursor:pointer}
.g-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.g-prev{left:10px}.g-next{right:10px}
.g-count{position:absolute;right:12px;top:368px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:2px 10px;border-radius:99px}
.g-thumbs{display:flex;gap:6px;overflow-x:auto;padding:8px 14px 0;scrollbar-width:none}
.g-thumbs img{flex:0 0 56px;height:56px;object-fit:cover;border-radius:6px;cursor:pointer;opacity:.7}
.g-thumbs img.on{opacity:1;box-shadow:0 0 0 2px var(--pink)}
.flash{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;margin-top:10px;background:linear-gradient(90deg,#fe2c55,#ff6a3d);color:#fff}
.flash b{font-size:24px;font-weight:800;line-height:1.1}
.flash b small{font-size:13px;font-weight:600}
.flash em{font-style:normal;background:#fff;color:var(--pink);font-size:12px;font-weight:700;padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:4px}
.flash .fs{text-align:right;font-size:11px;font-weight:600;line-height:1.3}
.flash .fs strong{display:block;font-size:13px;font-variant-numeric:tabular-nums}
.p-info{background:#fff;padding:12px 14px 14px}
.p-info h1{font-size:17px;font-weight:700;line-height:1.35}
.meta{display:flex;align-items:center;gap:8px;margin-top:6px;color:var(--muted);font-size:13px}
.meta i{font-style:normal;color:#ffb400;letter-spacing:1px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tags span{background:var(--tint);color:var(--pink-d);font-size:12px;font-weight:600;padding:3px 8px;border-radius:4px}
.rows{margin-top:12px;border-top:1px solid var(--line)}
.rows div{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.rows div:last-child{border:0}
.rows b{flex:none;width:76px;color:var(--muted);font-weight:500}
.p-info .btn{margin-top:6px}

/* ===== Video ===== */
.video{background:#000;margin-top:8px}
.video video{display:block;width:100%;max-height:640px;background:#000}

/* ===== Lợi ích ===== */
.lead{color:var(--muted);margin:-6px 0 12px}
.perks{display:grid;gap:10px}
.perk{display:flex;gap:12px;align-items:flex-start}
.perk i{flex:none;width:38px;height:38px;border-radius:10px;background:var(--tint);color:var(--pink);display:grid;place-items:center}
.perk svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.perk b{display:block;font-weight:600}
.perk span{color:var(--muted);font-size:13px}

/* ===== Nhà vườn ===== */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.stats div{background:var(--bg);border-radius:10px;padding:12px;text-align:center}
.stats b{display:block;font-size:22px;font-weight:800;color:var(--pink);line-height:1.2}
.stats span{font-size:12px;color:var(--muted)}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.shots img{height:190px;object-fit:cover;border-radius:8px}
.shots img.wide{grid-column:1/-1;height:230px}
.promise{display:grid;gap:8px;margin:12px 0}
.promise div{display:flex;gap:8px;font-size:13px}
.promise b{font-weight:600}

/* ===== Form ===== */
.cd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--ink);color:#fff;margin-top:8px;font-size:13px;font-weight:600}
.timer{display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.timer b{background:var(--pink);border-radius:4px;padding:2px 6px;font-size:14px;font-weight:700}
.order{background:linear-gradient(180deg,#ffd9e1,#fff1f4);padding:18px 12px 20px}
.o-card{background:#fff;border:2px solid var(--pink);border-radius:18px;overflow:hidden;box-shadow:0 10px 28px rgba(254,44,85,.28)}
.o-head{position:relative;background:linear-gradient(135deg,#fe2c55,#ff6a3d);color:#fff;text-align:center;padding:20px 16px 16px}
.o-badge{display:inline-block;background:#fff;color:var(--pink-d);font-size:12px;font-weight:700;padding:3px 12px;border-radius:99px;margin-bottom:8px}
.o-head h2{font-size:22px;font-weight:800;line-height:1.25}
.o-head .sub{font-size:13px;opacity:.95;margin-top:4px}
.o-card .form{padding:16px 14px 0}
.o-card .note{padding:0 14px 16px}
.form input[type=text],.form input[type=tel]{display:block;width:100%;height:48px;padding:0 14px;margin-bottom:8px;border:1.5px solid #d9d9de;background:#fafafb;border-radius:10px;font:400 15px 'Be Vietnam Pro',sans-serif;color:var(--ink);outline:0}
.form input:focus{border-color:var(--pink);background:#fff;box-shadow:0 0 0 3px rgba(254,44,85,.15)}
.form h3{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin:14px 0 10px}
.form h3:first-child{margin-top:0}
.form h3 i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--pink);color:#fff;font-style:normal;font-size:13px;font-weight:700}
.form h3 em{font-style:normal;font-weight:500;font-size:12px;color:var(--muted)}
.pack{display:block;cursor:pointer}
.pack input{position:absolute;opacity:0}
.pack>span{display:grid;grid-template-columns:1fr auto;align-items:center;padding:10px 12px;margin-bottom:8px;border:1px solid #d9d9de;border-radius:8px}
.pack b{font-weight:600}
.pack small{grid-column:1;color:var(--muted);font-size:12px}
.pack strong{grid-column:2;grid-row:1/3;color:var(--pink);font-size:15px;font-weight:700}
.pack input:checked+span{border-color:var(--pink);background:var(--tint)}
.total{display:flex;justify-content:space-between;align-items:center;margin:14px 0 12px;padding:12px 14px;background:var(--tint);border:1px dashed var(--pink);border-radius:10px;font-weight:600}
.total b{color:var(--pink);font-size:20px;font-weight:800}
.note{text-align:center;color:var(--muted);font-size:12px;margin-top:10px}
.o-card .btn{height:54px;font-size:17px;box-shadow:0 6px 16px rgba(254,44,85,.4)}

/* ===== Bình luận ===== */
.c-head{display:flex;justify-content:space-between;font-size:15px;font-weight:700;padding-bottom:4px}
.c-head span{color:var(--muted);font-size:13px;font-weight:500}
.c{display:flex;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.ava{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:600;object-fit:cover;overflow:hidden}
.c h5{font-size:13px;font-weight:600;color:var(--muted)}
.c p{font-size:14px;margin:2px 0 4px}
.c .st{color:#ffb400;font-size:12px;letter-spacing:1px}
.c .m{display:flex;gap:12px;font-size:12px;color:var(--muted);margin-top:2px}

/* ===== Chân trang ===== */
footer{background:var(--ink);color:#d7d7dc;padding:18px 14px 20px;margin-top:8px;font-size:13px}
footer h3{color:#fff;font-size:15px;font-weight:700;margin-bottom:8px}
footer p{margin-bottom:4px}
footer a{color:#fff;font-weight:600}

/* ===== Modal kết quả ===== */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.55)}
.modal.on{display:flex}
.m-box{width:100%;max-width:330px;background:#fff;border-radius:16px;padding:24px 20px 18px;text-align:center;animation:pop .2s ease-out}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.m-ico{width:60px;height:60px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:30px;font-weight:700}
.modal.ok .m-ico{background:#12b76a}
.modal.err .m-ico{background:var(--pink)}
.m-box h3{font-size:18px;font-weight:700;margin-bottom:6px}
.m-box p{color:var(--muted);margin-bottom:16px}
.m-btns{display:grid;gap:8px}
.m-btns a,.m-btns button{display:grid;place-items:center;height:44px;border:0;border-radius:10px;font:600 15px 'Be Vietnam Pro',sans-serif;cursor:pointer}
.m-btns .pri{background:var(--pink);color:#fff}
.m-btns .sec{background:var(--bg);color:var(--ink)}
.modal.ok .m-call,.modal.ok .m-retry{display:none}
.modal.err .m-retry{display:grid}
.m-retry{display:none}