:root{--bg:#f4fbf2;--card:#fff;--ink:#24402a;--muted:#5d7a62;--gold:#3fae4a;--sage:#7ccf6b;--beige:#dff3d8;--line:#cfe8c6}
*{box-sizing:border-box}html{font-size:18px}body{margin:0;font-family:"Be Vietnam Pro",system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
a{color:var(--gold)}img{max-width:100%}
header{position:sticky;top:0;z-index:20;background:#fffdf9ee;backdrop-filter:blur(6px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:10px 16px;flex-wrap:wrap}
.logo{font-size:1.6rem;font-weight:700;color:var(--gold);text-decoration:none;letter-spacing:.5px}
nav{display:flex;gap:6px;flex-wrap:wrap;flex:1}nav a{padding:10px 14px;border-radius:12px;text-decoration:none;color:var(--ink);font-size:1rem}nav a.on,nav a:hover{background:var(--beige)}
.wardbtn{position:relative;text-decoration:none;border:2px solid var(--gold);background:#fff;border-radius:16px;padding:8px 14px;font-size:1rem;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--ink)}
.wardbtn svg{width:34px;height:34px}.badge{background:var(--gold);color:#fff;border-radius:99px;min-width:28px;padding:0 8px;font-weight:700}
.bump{animation:bump .4s}@keyframes bump{50%{transform:scale(1.15)}}
main{max-width:1200px;margin:0 auto;padding:16px}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center;margin:8px 0 18px}
.hero h1{font-size:2rem;margin:0 0 8px;line-height:1.25}.hero p{font-size:1.1rem;color:var(--muted);margin:0}
.iso{width:100%;height:auto}
.aisles{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x mandatory}
.aisle{flex:0 0 auto;scroll-snap-align:start;border:2px solid var(--line);background:#fff;border-radius:14px;padding:12px 18px;font-size:1.05rem;cursor:pointer;color:var(--ink);transform:skewX(-6deg);box-shadow:4px 4px 0 var(--beige);min-height:52px}
.aisle span{display:inline-block;transform:skewX(6deg)}.aisle.on{background:var(--gold);color:#fff;border-color:var(--gold);box-shadow:4px 4px 0 #e2d2b6}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 6px 0 var(--beige),0 10px 24px #0000000d}
.card img{aspect-ratio:1;object-fit:cover;width:100%;background:var(--beige)}
.card .b{padding:12px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{margin:0;font-size:1.15rem}.price{font-size:1.3rem;font-weight:700;color:#2e8b3a}
.note{font-size:.95rem;color:var(--muted)}.tip{background:#f3f6f1;border-left:4px solid var(--sage);padding:8px 10px;border-radius:8px;font-size:1rem}
.tag{font-size:.8rem;background:#e8f9e0;color:#2e8b3a;border-radius:6px;padding:2px 8px;align-self:flex-start}
.btns{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:6px}
.btn{display:block;text-align:center;font-size:1.1rem;font-weight:700;padding:14px 16px;border-radius:14px;border:0;cursor:pointer;text-decoration:none;min-height:54px;font-family:inherit}
.buy{background:var(--gold);color:#fff}.add{background:#fff;color:var(--ink);border:2px solid var(--sage)}.add.done{background:var(--sage);color:#fff}
.ghost{background:var(--beige);color:var(--ink)}
.fly{position:fixed;z-index:99;pointer-events:none;border-radius:14px;will-change:transform,opacity;transition:transform .7s cubic-bezier(.5,-.3,.7,1),opacity .7s;box-shadow:0 8px 24px #0003}
form{display:grid;gap:14px;max-width:640px}label{font-weight:600;display:grid;gap:6px}
input,select,textarea{font:inherit;font-size:1.05rem;padding:12px;border:2px solid var(--line);border-radius:12px;background:#fff;width:100%}
.steps{display:grid;gap:18px;counter-reset:s}.step{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}
.step h3{margin:0 0 4px;font-size:1.3rem}.step h3::before{counter-increment:s;content:"Bước " counter(s) ": ";color:var(--gold)}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;margin:16px 0}
.soon{font-size:.85rem;background:var(--beige);border-radius:8px;padding:2px 8px;margin-left:6px}
footer{margin-top:40px;padding:20px 16px;border-top:1px solid var(--line);color:var(--muted);text-align:center;font-size:1rem}
@media(max-width:720px){.hero{grid-template-columns:1fr}.hero h1{font-size:1.6rem}nav{order:3;flex-basis:100%}nav a{padding:8px 10px}.step{grid-template-columns:80px 1fr}.grid{grid-template-columns:1fr 1fr;gap:10px}.card h3{font-size:1rem}.card .b{padding:10px}.btn{font-size:1rem;padding:12px 8px}}
@media(max-width:520px){.grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ===== v2 rich ===== */
body{background:linear-gradient(#f4fbf2e6,#f4fbf2f0),url(img/store.svg) center/cover fixed}
header{box-shadow:0 2px 12px #2e8b3a14}
.navbag{margin-left:auto;padding:10px 14px;border-radius:12px;text-decoration:none;color:var(--ink);background:var(--beige)}
.hero{grid-template-columns:1fr 1.5fr}
.scene{width:100%;border-radius:22px;box-shadow:0 18px 40px #2e8b3a2e,inset 0 0 0 1px #fff;display:block;aspect-ratio:980/600;object-fit:cover;background:#f6efe3}
.hero h1{font-family:Georgia,"Times New Roman",serif;color:#2f5a34}
.rack{position:relative;margin:34px 0 44px;padding:58px 14px 30px;background:linear-gradient(#ffffffb0,#fbf6eec0);border-radius:18px;box-shadow:0 10px 30px #2e8b3a14}
.rack::before{content:"";position:absolute;left:10px;right:10px;top:30px;height:10px;border-radius:6px;background:linear-gradient(#e9e9e9,#a9a9a9 60%,#8d8d8d);box-shadow:0 3px 4px #0002}
.rack::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:24px;border-radius:4px;background:linear-gradient(#d9c3a0,#b59a72 55%,#8f7350);box-shadow:0 10px 16px #2e8b3a33}
.sign{position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:#fff;border:2px solid var(--gold);color:#2e8b3a;font-weight:700;font-size:1.25rem;padding:6px 22px;border-radius:10px;box-shadow:0 6px 0 var(--beige);white-space:nowrap;z-index:2}
.sign::before,.sign::after{content:"";position:absolute;top:-14px;width:2px;height:14px;background:#a9a9a9}.sign::before{left:20%}.sign::after{right:20%}
.racks .grid{position:relative;z-index:1}
.card{position:relative;overflow:visible;border-radius:16px 16px 18px 18px;transform-origin:50% -30px;box-shadow:0 10px 22px #2e8b3a22}
.card::before{content:"";position:absolute;top:-30px;left:50%;width:26px;height:30px;margin-left:-13px;border:3px solid #9a9a9a;border-bottom:0;border-radius:14px 14px 0 0;clip-path:polygon(0 0,100% 0,100% 60%,0 60%)}
.card::after{content:"";position:absolute;top:-12px;left:50%;width:3px;height:16px;margin-left:-1.5px;background:#9a9a9a}
.card img{border-radius:16px 16px 0 0}
.card:nth-child(odd){rotate:-.8deg}.card:nth-child(even){rotate:.8deg}
@media(hover:hover){.card:hover{animation:sway 1.4s ease-in-out}}
@keyframes sway{25%{rotate:2deg}75%{rotate:-2deg}}
.card .b{background:linear-gradient(#fff,#fffaf2);border-radius:0 0 18px 18px}
.price{display:inline-block;align-self:flex-start;background:#e8f9e0;padding:2px 12px;border-radius:999px 8px 8px 999px;position:relative}
.bagfab{position:fixed;right:16px;bottom:16px;z-index:50;width:104px;height:116px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-decoration:none;color:#2f5a34;background:#fbfffaf2;border-radius:24px;box-shadow:0 10px 28px #2e8b3a40;border:2px solid #c6ecb8}
.bagfab svg{width:76px;height:76px;filter:drop-shadow(0 4px 4px #0002)}.bagfab b{font-size:1rem;margin-bottom:6px}
.bagfab .badge{position:absolute;top:-8px;right:-8px;font-size:1.1rem;line-height:32px;min-width:34px;text-align:center;border:3px solid #fff}
.bagfab.bump{animation:bagb .55s cubic-bezier(.3,1.6,.5,1)}@keyframes bagb{30%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(.95) rotate(3deg)}}
footer{padding-bottom:140px}
@media(max-width:720px){.hero{grid-template-columns:1fr}.bagfab{width:96px;height:108px}.navbag{display:none}.rack{padding:58px 10px 28px}}
.rack::before{display:none}.rack .grid{row-gap:56px;padding-top:6px}
.rail{position:absolute;top:-34px;left:-12px;right:-12px;height:9px;border-radius:5px;background:linear-gradient(#ececec,#a9a9a9 60%,#8d8d8d);box-shadow:0 3px 4px #0002;rotate:0deg;z-index:-1}
.card:nth-child(odd) .rail{rotate:.8deg}.card:nth-child(even) .rail{rotate:-.8deg}
/* ===== v3 illustrated ===== */
body{font-family:"Be Vietnam Pro",system-ui,sans-serif;background:#f4fbf2}
h1,h2,.sign,.logo,.step h3{font-family:"Playfair Display",Georgia,serif}
h1{font-size:2.1rem;color:#24402a}h2{color:#24402a}
.shopfront{position:relative;margin:-16px -16px 0;overflow:hidden;border-radius:0 0 28px 28px;box-shadow:0 20px 40px #2e8b3a26}
.heroimg{display:block;width:100%;height:auto;max-height:640px;object-fit:cover}
.welcome{position:absolute;left:4%;top:7%;max-width:420px;background:#fbfffae8;border:1px solid #c6ecb8;border-radius:22px;padding:18px 22px;box-shadow:0 10px 30px #2e8b3a2a}
.welcome h1{margin:0 0 6px;font-size:2.4rem}.welcome p{margin:0;color:#6b5d4c}.eyebrow{color:#3fae4a!important;letter-spacing:2px;font-size:.9rem}
.signs{position:absolute;left:0;right:0;bottom:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:0 12px}
.pill{font:600 1.05rem "Be Vietnam Pro",sans-serif;padding:12px 22px;min-height:52px;border-radius:999px;border:2px solid #7ccf6b;background:linear-gradient(#fbfffa,#dff3d8);color:#2f5a34;box-shadow:0 6px 14px #2f5a3440,inset 0 1px 0 #fff;cursor:pointer}
.pill:hover{background:#3fae4a;color:#fff}
.divider{display:flex;align-items:center;gap:14px;margin:28px 0 8px;color:#3fae4a}.divider::before,.divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#c9a96a,transparent)}
.rack{background:#fbfffad9}
.rack::after{height:60px;bottom:-34px;background:url(img/shelf.webp) center bottom/100% 100% no-repeat;box-shadow:none;left:-1%;right:-1%;z-index:0}
.rail{background:linear-gradient(#c6ecb8,#c9a24f 55%,#9b7a3a)}
.card::before{border-color:#56c25c}.card::after{background:#56c25c}
.card img{background:#fff;object-fit:contain;padding:8px}
.bagfab{width:118px;height:140px;background:none;border:0;box-shadow:none;justify-content:flex-end}
.bagfab img{width:110px;height:auto;filter:drop-shadow(0 8px 12px #2f5a3450);position:absolute;top:0}
.bagfab b{position:relative;background:#fbfffa;border:1px solid #c6ecb8;border-radius:999px;padding:2px 12px;margin:0;box-shadow:0 3px 8px #0002}
.bagfab .badge{top:4px;right:2px}
main{padding-bottom:170px}footer{padding-bottom:170px}
@media(max-width:720px){.shopfront{border-radius:0 0 22px 22px}.heroimg{max-height:none;aspect-ratio:9/14;object-fit:cover}.welcome{left:12px;right:12px;top:12px;max-width:none;padding:14px 16px}.welcome h1{font-size:1.9rem}
.signs{bottom:12px;gap:8px}.pill{padding:10px 14px;font-size:1rem;min-height:48px}.bagfab{width:104px;height:124px}.bagfab img{width:96px}}

.ico{width:1.35em;height:1.35em;vertical-align:-.3em;margin-right:.4em;color:#3fae4a;flex:none}.pill:hover .ico,.aisle.on .ico{color:#fff}.aisle span,.pill{display:inline-flex;align-items:center}
.aibox{border:2px dashed #3fae4a;border-radius:18px;padding:16px;background:#f3fbf2;margin:8px 0}.aiwrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.aiwrap>img{width:120px;border-radius:12px}.aiwrap>div{flex:1;min-width:200px}#aiOut{margin:12px 0 0;position:relative}#aiOut img{max-width:100%;border-radius:12px}#aiOut figcaption{font-weight:700;color:#2f7a37}
.card{position:relative}.aitag{position:absolute;top:10px;left:10px;z-index:2;background:#3fae4a;color:#fff}
.aiq{list-style:none;padding:0;display:grid;gap:10px}.aiq li{display:flex;gap:12px;align-items:center;background:#fff;border:2px solid #cfe9cf;border-radius:14px;padding:10px;font-size:1.05rem}.aiq img{width:64px;height:64px;object-fit:cover;border-radius:10px}.aiq b{display:block}.st{display:inline-block;padding:4px 10px;border-radius:99px;font-weight:700;background:#eef6ee;color:#2f5a34}.st.proc{background:#fff4d6;color:#8a5a00}.st.done{background:#3fae4a;color:#fff}.st.err{background:#fde3e3;color:#a02222}.aiq button{margin-left:auto}
.media{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0}.media img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:3px solid transparent;cursor:pointer}.media img.on{border-color:#3fae4a}.vbadge{background:#3fae4a;color:#fff;border-radius:99px;padding:6px 12px;font-weight:700}
.chk{display:flex!important;gap:10px;align-items:center;font-size:1.1rem;font-weight:600;background:#f3fbf2;border-radius:12px;padding:12px}.chk input{width:26px;height:26px;accent-color:#3fae4a}.aibox.off{opacity:.45}
.playbadge{position:absolute;z-index:3;top:0;left:0;width:100%;aspect-ratio:1;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;color:#fff;font-size:1.7rem}.playbadge::before{content:"";position:absolute;width:68px;height:68px;border-radius:50%;border:3px solid #fff;background:#3fae4ae6;box-shadow:0 6px 16px #0004;left:50%;top:50%;transform:translate(-50%,-50%)}.playbadge>*{position:relative}
.vbtn{width:100%}.vmodal{position:fixed;inset:0;background:#000c;z-index:99;display:grid;place-items:center;padding:12px}.vbox{background:#fff;border-radius:16px;padding:10px;width:min(420px,100%);display:grid;gap:8px}.vbox iframe{width:100%;aspect-ratio:9/16;max-height:75vh;border:0;border-radius:10px;background:#000}.vclose{justify-self:end;font-size:1.1rem;padding:8px 14px;border-radius:99px;border:2px solid #3fae4a;background:#fff;color:#2f5a34;font-weight:700}.vbox a{text-align:center;font-size:1.05rem;color:#2f7a37}
/* Trang đăng – ưu tiên điện thoại */
.post{max-width:560px;margin:0 auto;font-size:20px}
.post h1{font-size:2rem}.post .lead{font-size:1.1rem}
.post form{display:flex;flex-direction:column;gap:18px;max-width:none}
.step{background:#fff;border:2px solid var(--line,#cfe8c6);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.step h2{font-size:1.3rem;margin:0;display:flex;align-items:center;gap:10px}
.step .n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#3fae4a;color:#fff;font-size:1.2rem;flex:none}
.post input,.post textarea{font-size:20px;padding:14px;min-height:56px;border-radius:12px;border:2px solid #cfe8c6;width:100%;box-sizing:border-box;font-family:inherit}
.post .btn.big{min-height:60px;font-size:1.2rem;display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.post .btn.huge{min-height:72px;font-size:1.6rem;width:100%}
.catpick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.catpick button{min-height:76px;font-size:1.1rem;font-weight:700;border:2px solid #cfe8c6;background:#fbfffa;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:inherit;color:#24402a}
.catpick button .ico{width:30px;height:30px}
.catpick button.on{background:#3fae4a;color:#fff;border-color:#2e8b3a}
.photobtns{display:flex;flex-direction:column;gap:10px}
.photoprev img{width:100%;max-height:340px;object-fit:contain;border-radius:14px;background:#f4fbf2}
.post .chk{font-size:1.05rem;display:flex;gap:10px;align-items:flex-start}.post .chk input{width:28px;min-height:28px;height:28px;flex:none}
.more summary{font-size:1.1rem;min-height:48px;display:flex;align-items:center;cursor:pointer;color:#2e8b3a;font-weight:700}
.more input{margin-top:8px}
.msg{font-size:1.2rem;font-weight:700;border-radius:14px}.msg:not(:empty){padding:16px}
.msg.ok{background:#e8f9e0;border:2px solid #3fae4a;color:#2f5a34}.msg.bad{background:#fff0ee;border:2px solid #d9534f;color:#8a2a22}
/* Giá giảm + đếm ngược */
.fl{display:block;font-weight:600;margin:.6rem 0 0;font-size:1.05rem}.fl input{margin-top:.3rem}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.pbox{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .55rem}
.porig{color:#7a8a7d;font-size:1rem}
.psale{font-size:1.55rem;font-weight:800;color:#fff;background:linear-gradient(100deg,#e8590c 0%,#f76707 40%,#ffb26b 50%,#f76707 60%,#e8590c 100%);background-size:250% 100%;padding:2px 12px;border-radius:10px;animation:shine 2.6s linear infinite,pulse 2.6s ease-in-out infinite}
.pct{background:#fff0e6;color:#d9480f;font-weight:800;border:2px solid #f76707;border-radius:999px;padding:0 8px;font-size:.95rem}
.cd{width:100%;color:#c2410c;font-weight:700;font-variant-numeric:tabular-nums}
@keyframes shine{from{background-position:100% 0}to{background-position:-150% 0}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.psale{animation:none}}
.fl input{width:100%;box-sizing:border-box;max-width:100%}
body.page-form .bagfab{display:none!important}