/* Shared styles of the Toyxinh prototype pages (index.html, category.html).
   Load after tokens.css and before the page's own <style>: rules there rely on coming later in the cascade.
   A rule lives here only if both pages use it; page-only rules stay in the page.
   Colours and the font come from tokens.css; :root below only gives them short names. */
:root{
  --pink:var(--color-primary); --pink-soft:var(--color-primary-soft); --rose:var(--color-primary-deep);
  --ink:var(--color-text); --ink-deep:var(--color-text-deep);
  --blush:var(--color-blush); --lav:var(--color-lavender); --butter:var(--color-butter);
  --foot:var(--color-footer-bg);
  --font:var(--font-sans);
  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1240px; --gut:clamp(20px,4vw,48px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--pink) var(--blush)}
body{font:500 16px/1.6 var(--font);color:var(--ink);background:var(--pink);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;caret-color:var(--pink)}
::selection{background:var(--ink);color:var(--blush)}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.foot :focus-visible{outline-color:var(--pink-soft)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0}
main{overflow-x:hidden;overflow-x:clip}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
h1,h2,h3{font-weight:700;text-wrap:balance}
h2{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.04;letter-spacing:-.025em}
p{text-wrap:pretty}

/* controls */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border:0;border-radius:12px;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;background:var(--ink);color:var(--blush);transition:transform .35s var(--ease),background-color .25s}
.btn-sm{min-height:44px;padding:0 18px;font-size:.9rem;border-radius:10px}
.btn:disabled{background:rgba(60,34,95,.1);color:var(--ink);cursor:not-allowed;transform:none}
.link-u{padding:10px 0;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

/* die-cut sticker look */
.art{display:block;width:100%;aspect-ratio:1;overflow:visible}
.cut{filter:drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(0 14px 14px rgba(42,20,69,.28))}

/* scalloped cloud edge */
.edge{--r:36px;position:absolute;left:0;right:0;top:calc(1px - var(--r));height:var(--r);pointer-events:none;
  background:radial-gradient(circle at 50% 100%,var(--bg) calc(var(--r) - .5px),transparent var(--r)) 0 0/calc(var(--r)*2) var(--r) repeat-x}

/* nav */
.nav{position:sticky;top:10px;z-index:60;margin-top:14px;padding-inline:var(--gut)}
.pill{position:relative;max-width:1180px;margin-inline:auto;display:flex;align-items:center;gap:20px;background:#fff;border-radius:999px;padding:8px 14px 8px 32px;box-shadow:0 12px 24px -10px rgba(42,20,69,.4)}
.logo{padding:9px 0;font-size:1.7rem;font-weight:700;letter-spacing:-.03em;color:var(--pink);text-decoration:none;line-height:1}
.logo span{color:var(--ink)}
.links{display:flex;gap:26px;margin-inline:auto}
.nv{position:relative}
.nv>a{display:inline-flex;align-items:center;gap:3px;font-size:.9rem;font-weight:600;text-decoration:none;padding:10px 0;position:relative}
.nv>a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nv>a:hover::after,.nv:focus-within>a::after,.nv>a[aria-current]::after{transform:scaleX(1)}
.caret{width:14px;height:14px;stroke-width:2.6}
.sub{position:absolute;left:50%;top:calc(100% + 12px);z-index:3;min-width:220px;padding:10px;border-radius:20px;background:#fff;box-shadow:0 20px 30px -12px rgba(42,20,69,.4);opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .2s,transform .3s var(--ease),visibility 0s .2s}
.sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nv:hover>.sub,.nv:focus-within>.sub{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.sub a{display:block;padding:8px 14px;border-radius:12px;font-size:.9rem;font-weight:600;text-decoration:none;white-space:nowrap}
.sub ul{padding-left:14px}
.sub ul a{font-size:.85rem;font-weight:500}
.tools{display:flex;gap:6px}
.ib{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--pink);color:#fff;cursor:pointer;transition:background-color .25s,transform .35s var(--ease)}
.ib.ghost{background:transparent;color:var(--ink)}
.cart-count{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;border-radius:10px;padding:0 5px;background:var(--ink);color:var(--blush);font-size:11px;font-weight:700;display:grid;place-items:center}
.mmenu{display:none}
.mmenu summary{list-style:none;cursor:pointer}
.mmenu summary::-webkit-details-marker{display:none}
.mpanel{position:absolute;left:0;right:0;top:calc(100% + 10px);background:#fff;border-radius:24px;padding:12px 24px;box-shadow:0 20px 30px -12px rgba(42,20,69,.4)}
.mpanel a{display:block;padding:12px 0;font-weight:600;text-decoration:none}
.mpanel li+li a{border-top:1px solid rgba(60,34,95,.12)}
.sbar{display:none}
@media (min-width:1180px){
  .srch{display:none}
  .sbar{display:flex;align-items:center;gap:10px;width:clamp(200px,19vw,280px);min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--blush);font-size:.95rem;text-align:left;cursor:pointer}
  .sbar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.7}
}

/* hero */
.hero{position:relative;padding:clamp(16px,2.5vw,32px) 0 clamp(64px,6vw,96px);isolation:isolate}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(8px,3vw,40px)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:22px}
.cloud{position:absolute;z-index:-1;color:rgba(255,244,247,.3);animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
.stk{position:absolute;left:var(--x);top:var(--y);width:var(--w)}
.bob{transform:rotate(var(--rot,0deg));animation:bob var(--t,7s) ease-in-out var(--dl,0s) infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-14px) rotate(calc(var(--rot,0deg) + 4deg))}}
.spark{position:absolute;left:var(--x);top:var(--y);width:var(--w);color:#fff;animation:tw var(--t,3.4s) ease-in-out var(--dl,0s) infinite}
@keyframes tw{0%,100%{opacity:.35;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1) rotate(20deg)}}

/* ribbon marquee */
.ribbon{position:relative;z-index:5;margin:-32px -3vw -32px;transform:rotate(-2deg);background:var(--ink);color:var(--blush);overflow:hidden;padding:17px 0}
.track{display:flex;width:max-content;animation:run 40s linear infinite}
.grp{display:flex;align-items:center;gap:28px;padding-right:28px;font-weight:700;font-size:1.05rem;white-space:nowrap}
.grp svg{width:20px;height:20px;color:var(--pink-soft)}
@keyframes run{to{transform:translateX(-50%)}}
html:not(.js) .track{animation:none}

/* chips: mood picker (home), filters (category) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;inset:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:2px solid var(--ink);border-radius:999px;font-weight:700;font-size:1rem;transition:background-color .25s,color .25s,transform .35s var(--ease)}
.chip input:checked+span{background:var(--ink);color:var(--blush)}
.chip input:focus-visible+span{outline:3px solid var(--pink);outline-offset:3px}

/* cards: entrance, rating, price */
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
.rate{display:flex;align-items:center;gap:2px;margin-top:6px;font-size:.85rem;font-weight:600}
.rate span{margin-left:6px}
.rate span:first-child{margin-left:0}
.rstar{width:15px;height:15px;fill:var(--butter);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.rstar.off{fill:none;opacity:.35}
.pr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:8px 0 12px;font-size:1.15rem}
.pr b{font-weight:700}
.pr del{font-size:.9rem;opacity:.7}

/* breadcrumb and tags (category, product) */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:.9rem;font-weight:700;color:var(--ink-deep)}
.crumbs a{display:inline-block;padding:12px 0;margin:-12px 0;text-underline-offset:4px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tag{padding:6px 14px;border-radius:999px;background:var(--ink);color:var(--blush);font-size:.85rem;font-weight:700;line-height:1.3}

/* product grid and card (category, product) */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px) clamp(14px,2.2vw,28px)}
.pc{display:flex;flex-direction:column;animation:rise .7s var(--ease) calc(var(--i)*45ms) both}
.pc:nth-child(even){margin-top:24px}
.pc-tile{--t:var(--lav);position:relative;display:block;overflow:hidden;aspect-ratio:1;border-radius:7%;background:var(--t);transform:rotate(var(--tilt,-1.5deg));transition:transform .5s var(--ease)}
.pc:nth-child(4n+2) .pc-tile{--t:var(--butter);--tilt:1.2deg}
.pc:nth-child(4n+3) .pc-tile{--t:var(--pink-soft)}
.pc:nth-child(4n) .pc-tile{--t:#fff;--tilt:1.2deg}
.pc-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc.out .pc-tile img{opacity:.7;filter:grayscale(.8)}
.flags{position:absolute;top:12px;left:12px;display:flex;gap:6px}
.sale,.sold{padding:2px 9px;border-radius:5px;font-size:.9rem;font-weight:700;line-height:1.5}
.sale{background:var(--ink);color:var(--blush)}
.sold{background:#fff;color:var(--ink)}
.pc-body{display:flex;flex:1;flex-direction:column;padding-top:14px}
.pc h3{font-size:1.25rem;line-height:1.15;letter-spacing:-.01em}
.pc h3 a{display:inline-block;padding:11px 0;margin:-11px 0;text-decoration:none}
.d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin-top:4px;font-size:.9rem;line-height:1.45}
.pc .pr{margin:auto 0 12px;padding-top:8px}
.pc .pr b{color:var(--rose)}
.pc .btn{width:100%;justify-content:center}

/* review card (home, product) */
.voice{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;border-radius:22px;background:#fff;transform:rotate(var(--r,-1deg))}
.voice:nth-child(even){--r:1deg}
.voice::after{content:"";position:absolute;left:28px;bottom:-7px;width:16px;height:16px;border-radius:3px;background:#fff;transform:rotate(45deg)}
.voice .rate{margin-top:0}
.voice blockquote{font-size:.95rem;font-weight:600;line-height:1.5}
.voice .who{margin-top:auto;font-size:.8rem;font-weight:700;color:var(--rose)}
.voice .who a{display:inline-block;padding:12px 0;margin:-12px 0;text-decoration:underline;text-underline-offset:3px}

/* blog card (blog, post): the title's link is stretched over the whole card; the tile is a sticker for the topic, not the post's cover photo.
   The first card of a list can be .lead (wide, photo side by side with the text). */
.bcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.bc{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:28px;background:#fff;box-shadow:0 14px 24px -18px rgba(42,20,69,.45);animation:rise .7s var(--ease) calc(var(--i)*45ms) both;transition:transform .45s var(--ease)}
.bc-tile{display:grid;place-items:center;aspect-ratio:16/10;background:var(--t)}
.bc-tile .art{width:32%;transform:rotate(calc((var(--n,2) - 2)*4deg))}
.bc-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 22px 22px}
.bc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:.85rem;font-weight:700}
.bc-meta time{color:var(--rose)}
.bc-k{padding:3px 12px;border-radius:999px;background:var(--ink);color:var(--blush);font-size:.78rem;line-height:1.5}
.bc h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;font-size:1.2rem;line-height:1.25;letter-spacing:-.01em}
.bc h3 a{text-decoration:none}
.bc h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.bc h3 a:focus-visible{outline:0}
.bc:has(h3 a:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.bc-e{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;font-size:.95rem;line-height:1.55}
.bc-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;font-size:.9rem;font-weight:700;color:var(--rose)}
.bc-go .i{width:16px;height:16px}
.bc.lead{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.lead .bc-tile{aspect-ratio:auto;min-height:300px}
.lead .bc-tile .art{width:46%}
.lead .bc-body{justify-content:center;gap:14px;padding:clamp(24px,3.4vw,44px)}
.lead h3{display:block;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.15;letter-spacing:-.02em}
.lead .bc-e{-webkit-line-clamp:4;line-clamp:4;font-size:1.05rem}
.lead .bc-go{margin-top:6px;font-size:1rem}

/* reading page (post, page): the contents list and the white sheet side by side (stacked below 981px), the text styles and the closing "Còn thắc mắc?" box.
   Parts only the article uses (steps, product link cards, chat bubbles, tip, table, FAQ) stay in post.html. */
.read{--bg:var(--blush);position:relative;background:var(--bg);padding:clamp(56px,6vw,80px) 0 clamp(56px,6vw,88px)}
.read-grid{display:grid;grid-template-columns:minmax(0,1fr) 288px;grid-template-areas:"paper toc";gap:clamp(24px,4vw,56px);align-items:start}
.paper{grid-area:paper;min-width:0;max-width:820px;padding:clamp(22px,4.4vw,56px);border-radius:clamp(22px,3vw,32px);background:#fff;box-shadow:0 14px 24px -18px rgba(42,20,69,.45)}
.toc{grid-area:toc;position:sticky;top:96px;padding:6px 22px 14px;border-radius:24px;background:#fff;box-shadow:0 14px 24px -18px rgba(42,20,69,.45)}
.toc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;font-weight:700;list-style:none;cursor:pointer}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"+";flex:none;font-size:1.6rem;line-height:1;color:var(--pink);transition:transform .3s var(--ease)}
.toc details[open] summary::after{transform:rotate(45deg)}
.toc ol{display:grid;gap:2px}
.toc a{display:block;padding:12px 12px;margin-inline:-12px;border-radius:12px;font-size:.95rem;font-weight:600;line-height:1.35;text-decoration:none}
.toc a[aria-current]{background:var(--blush);color:var(--rose);font-weight:700}
.prose{font-size:1.0625rem;line-height:1.8}
.prose>*+*{margin-top:1.1em}
.prose>p:first-child{font-size:1.15rem;line-height:1.7}
.prose h2{margin-top:2.2em;font-size:clamp(1.55rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.02em;scroll-margin-top:100px}
.prose h3{margin-top:1.8em;font-size:1.25rem;line-height:1.3;color:var(--rose);scroll-margin-top:100px}
.prose h2+*,.prose h3+*{margin-top:.7em}
.prose>h2:first-child{margin-top:0}
.prose a{color:var(--rose);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.prose ul>li{position:relative;padding-left:26px}
.prose ul>li::before{content:"";position:absolute;left:4px;top:.72em;width:9px;height:9px;border-radius:50%;background:var(--pink)}
.prose li+li{margin-top:.4em}
.prose li>ul{margin-top:.5em}
.prose ol.n{counter-reset:n}
.prose ol.n>li{position:relative;counter-increment:n;padding-left:34px}
.prose ol.n>li::before{content:counter(n)".";position:absolute;left:4px;top:0;font-weight:700;color:var(--rose)}
.prose ol.n.p>li{padding-left:42px}
.prose ol.n.p>li::before{content:"(" counter(n) ")"}
.prose blockquote{padding:20px 24px;border-radius:22px;background:var(--lav);font-size:1.15rem;font-weight:700;line-height:1.5}
.prose blockquote p+p{margin-top:.5em;font-size:.95rem;font-weight:600;opacity:.85}
.end{display:grid;gap:14px;margin-top:clamp(32px,4vw,48px);padding:clamp(20px,3vw,32px);border-radius:24px;background:var(--lav)}
.end h2{font-size:clamp(1.4rem,2.4vw,1.8rem)}
.end p{max-width:46ch;font-weight:600}
.end .cta{margin-top:0}

/* gift + bundle in the product buy card (product, product2); the checkbox covers its whole row so the tap target is the row */
.gift{display:flex;gap:14px;align-items:center;margin-top:18px;padding:14px 16px;border-radius:18px;background:var(--butter)}
.gift .i{flex:none;width:40px;height:40px;padding:9px;border-radius:50%;background:#fff}
.gift p{font-weight:700;line-height:1.3}
.gift ul{margin-top:2px;font-size:.9rem;line-height:1.5}
.gift li span{opacity:.8}
.deal{margin-top:14px;padding:16px;border-radius:18px;background:var(--blush)}
.deal-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;font-weight:700}
.deal-h span{font-size:.85rem;font-weight:600;opacity:.8}
.deal-row{position:relative;display:grid;grid-template-columns:24px 64px minmax(0,1fr);gap:12px;align-items:center;margin-top:10px;padding:10px 12px;border:2px solid transparent;border-radius:14px;background:#fff;cursor:pointer}
.deal-row:has(:checked){border-color:var(--ink)}
.deal-row:has(:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.deal-row input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.deal-row input:focus-visible{outline:0}
.deal-box{display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--ink);border-radius:7px}
.deal-box .i{width:16px;height:16px;color:var(--blush);stroke-width:3.4;opacity:0}
.deal-row :checked+.deal-box{background:var(--ink)}
.deal-row :checked+.deal-box .i{opacity:1}
.deal-img{position:relative;display:block}
.deal-img img{display:block;width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--lav)}
.deal-img .sale{position:absolute;left:4px;top:4px;padding:0 6px;font-size:.75rem;line-height:1.6}
.deal-t{display:grid;gap:1px;min-width:0}
.deal-n{line-height:1.3}
.deal-k{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;opacity:.8}
.deal-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.deal-p del{font-size:.85rem;opacity:.7}
.deal-p b{color:var(--rose)}
.deal-sum{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin-top:12px;padding-top:12px;border-top:2px dashed rgba(60,34,95,.2);font-weight:700}
.deal-sum:empty{display:none}
.deal-sum del{font-size:.85rem;font-weight:600;opacity:.7}
.deal-sum b{font-size:1.3rem;color:var(--rose)}
.deal-sum small{flex:1 1 100%;font-size:.85rem;color:var(--rose)}

/* checkout steps, order lines and totals (checkout, order-received) */
.flow{display:flex;align-items:center;gap:0 10px;font-size:.9rem;font-weight:700;color:var(--ink-deep)}
.flow li,.flow a{display:flex;align-items:center;gap:8px;min-height:44px}
.flow a{margin-inline:-6px;padding-inline:6px;text-decoration:none}
.flow li+li::before{content:"";width:clamp(16px,5vw,56px);height:2px;margin-right:2px;background:currentColor;opacity:.35}
.flow .t{white-space:nowrap}
.flow .n{display:grid;place-items:center;flex:none;width:28px;height:28px;border:2px solid var(--ink-deep);border-radius:50%;font-size:.8rem;line-height:1}
.flow .n .i{width:16px;height:16px;stroke-width:3.4}
.flow .done .n{background:var(--ink);border-color:var(--ink);color:var(--blush)}
.flow .on .n{background:#fff}
.flow li:not(.on):not(.done){opacity:.65}
.fab{transition:bottom .4s var(--ease)}
.ols{display:grid}
.ol{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0}
.ol:not(.add):not(:first-child){border-top:1px solid rgba(60,34,95,.12)}
.ol-img{position:relative;display:block}
.ol-img img{display:block;width:56px;height:56px;border-radius:12px;object-fit:cover;background:var(--lav)}
.ol-q{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--ink);color:var(--blush);font-size:.75rem;line-height:22px;text-align:center}
.ol-t{min-width:0;line-height:1.35}
.ol-t b{display:block}
.ol-t span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;font-weight:600;opacity:.75}
.ol-t .ol-g{white-space:normal;opacity:1;color:var(--rose)}
.ol>strong{white-space:nowrap}
.ol.add{grid-template-columns:40px minmax(0,1fr) auto;margin-top:-8px;padding:0 0 12px 24px}
.ol.add img{width:40px;height:40px;border-radius:10px}
.ol.add .ol-t b{font-size:.95rem}
.tt{margin-top:6px;padding-top:12px;border-top:2px dashed rgba(60,34,95,.2)}
.tt>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 12px;padding:4px 0;font-weight:600}
.tt dd{margin:0;font-weight:700}
.tt .gr dd,.tt .tt-s{color:var(--rose)}
.tt .tt-s{font-size:.9rem}
.tt .tt-t{margin-top:6px;font-weight:700}
.tt .tt-t dd{font-size:clamp(1.8rem,3vw,2.2rem);line-height:1.1;letter-spacing:-.02em;color:var(--rose)}

/* bank transfer details with the VietQR (order-received) */
.bpay{margin-top:16px;container-type:inline-size}
.bpay>div{display:grid;gap:14px}
/* "HOẶC" between the QR and the rows: a horizontal rule when stacked, a vertical one when side by side */
.or{display:flex;align-items:center;gap:12px;font-size:.85rem;font-weight:700;letter-spacing:.08em}
.or::before,.or::after{content:"";flex:1;border-top:2px dashed rgba(60,34,95,.2)}
@container (min-width:560px){
  /* the download button gets its own row, so the QR, the divider and the rows share one vertical centre */
  .bpay>div{grid-template-columns:200px auto minmax(0,1fr);gap:14px 16px;align-items:center}
  .qrimg{grid-area:1/1}
  .bpay [data-save]{grid-area:2/1}
  .or{grid-area:1/2;flex-direction:column;align-self:stretch}
  .bank{grid-area:1/3}
  .or::before,.or::after{border-top:0;border-left:2px dashed rgba(60,34,95,.2)}
}
.bank{padding:4px 16px;border-radius:18px;background:var(--blush)}
.bank>div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;min-height:52px;padding:4px 0}
.bank>div+div{border-top:1px dashed rgba(60,34,95,.2)}
.bank dt{font-weight:600;opacity:.8}
.bank dd{display:flex;align-items:center;gap:12px;margin:0;font-weight:700}
.bank .btn{flex:none;white-space:nowrap}
.bank .ic{position:relative;justify-content:center;width:44px;padding:0}
.bank .ic .yes,.bank .ic.done .cp{display:none}
.bank .ic.done .yes{display:block}
.bank .ic[data-s]::after{content:attr(data-s);position:absolute;right:0;bottom:calc(100% + 6px);padding:6px 10px;border-radius:8px;background:var(--ink);color:var(--blush);font-size:.8rem;white-space:nowrap;pointer-events:none}
.bank .rose{font-size:1.15rem;color:var(--rose)}
.qrimg{justify-self:center;width:min(100%,200px);overflow:hidden}
.qrimg img{display:block;width:100%;height:auto}
/* the dynamic QR image has about 15% of white margin on each side (measured on the 540px png); crop it so the visible QR sits flush with the box and the divider is as far from the QR as from the rows */
.qrimg img[data-live]{width:140.625%;max-width:none;margin-left:-20.3125%}
.bpay [data-save]{justify-self:center}

/* floating primary button (cart, checkout): slides in while the page's main button is off screen; visibility keeps it out of the tab order while hidden */
.cbar{position:fixed;left:50%;bottom:12px;z-index:65;display:flex;width:min(720px,calc(100% - 2*var(--gut)));padding:10px;border-radius:20px;background:#fff;box-shadow:0 20px 30px -12px rgba(42,20,69,.5);transform:translate(-50%,calc(100% + 24px));visibility:hidden;transition:transform .4s var(--ease),visibility 0s .4s}
.cbar.on{transform:translate(-50%,0);visibility:visible;transition:transform .4s var(--ease)}
.cbar .btn{flex:1;justify-content:center;min-height:52px;white-space:nowrap}

/* footer */
.foot{--bg:var(--foot);position:relative;background:var(--bg);color:var(--blush);padding:56px 0 28px}
.foot .edge{--r:36px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.wm{font-size:2rem;font-weight:700;letter-spacing:-.03em;color:#fff}
.foot h3{font-size:1rem;color:var(--pink-soft);margin-bottom:8px}
.foot li{margin-bottom:8px}
.foot a{text-decoration:none;opacity:.88}
.legal{margin-top:32px;text-align:center;padding-top:24px;border-top:1px solid rgba(255,244,247,.16);font-size:.9rem;color:rgba(255,244,247,.7)}
.fab{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;flex-direction:column;gap:10px}
.fab a{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--ink);border:2px solid rgba(255,255,255,.95);box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .35s var(--ease)}

/* hover effects only where a real pointer exists (touch keeps no sticky hover) */
@media (hover:hover){
  .btn:hover:not(:disabled){background:var(--ink-deep);transform:translateY(-2px)}
  .btn:active{transform:translateY(0)}
  .ib:hover{background:var(--rose);transform:rotate(-8deg)}
  .ib.ghost:hover{background:var(--blush)}
  .sbar:hover{box-shadow:inset 0 0 0 2px var(--pink-soft)}
  .chip:hover span{background:rgba(60,34,95,.08);transform:translateY(-2px)}
  .pc-tile:hover{transform:rotate(0) scale(1.02)}
  .bc:hover{transform:translateY(-4px)}
  .bc h3 a:hover{text-decoration:underline;text-underline-offset:4px}
  .toc a:not([aria-current]):hover{background:var(--blush)}
  .prose a:hover{text-decoration-thickness:3px}
  .pc h3 a:hover,.crumbs a:hover{text-decoration:underline;text-underline-offset:4px}
  .deal-row:not(:has(:checked)):hover{border-color:rgba(60,34,95,.3)}
  .sub a:hover{background:var(--blush)}
  .foot a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
  .fab a:hover{transform:scale(1.08) rotate(-6deg)}
}

/* looping animations pause while their section is off screen (see script) */
.idle,.idle *{animation-play-state:paused!important}
@media (max-width:980px){
  .links{display:none}
  .mmenu{display:block}
  .pill{gap:10px}
  .tools{margin-left:auto}
  .foot-grid{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pc:nth-child(even){margin-top:0}
  .bcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .read-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"toc" "paper"}
  .toc{position:static}
  .paper{max-width:none}
}
@media (max-width:860px){
  /* steps: only the current one keeps its label (five labels do not fit), the others stay readable for screen readers */
  .flow li:not([aria-current]) .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .flow li:not([aria-current]) a{min-width:44px;justify-content:center}
}
@media (max-width:760px){
  .pill{padding-left:26px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .pc h3{font-size:1.05rem}
  .pc h3 a{padding:13px 0;margin:-13px 0}
  .d{font-size:.85rem}
  .pc .pr{font-size:1.05rem}
  .bc.lead{grid-template-columns:minmax(0,1fr)}
  .lead .bc-tile{aspect-ratio:16/10;min-height:0}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .cloud{animation:none}
  .foot{padding-bottom:84px}
  .foot li{margin-bottom:0}
  .foot li a{display:inline-block;padding:10px 0}
  .foot-grid{gap:16px 24px}
  .foot-grid>:first-child,.foot-grid>:last-child{grid-column:1/-1}
  .ribbon{margin:-22px -6vw -22px;padding:13px 0}
  .fab a:not(:first-child){display:none}
  .fab a{width:46px;height:46px}
}
@media (max-width:560px){
  .bank dd{flex:1 1 100%;justify-content:space-between}
  .bcs{grid-template-columns:minmax(0,1fr)}
  .bc-tile{aspect-ratio:16/8}
  .prose{font-size:1rem}
  .prose>p:first-child{font-size:1.05rem}
  .prose blockquote{padding:16px 18px}
}
@media (max-width:480px){
  /* five steps on a phone: tighter connectors, the circle is the tap target */
  .flow{gap:0 2px}
  .flow li{gap:4px}
  .flow li+li::before{width:6px;margin:0}
  .flow li:not([aria-current]) a{min-width:0}
}
@media (max-width:380px){
  .deal{padding:12px}
  .deal-row{grid-template-columns:24px 56px minmax(0,1fr);gap:10px;padding:8px 10px}
  .deal-img img{width:56px;height:56px}
  .deal-k,.gift li span{display:none}
  .pill{padding-left:24px}
  .logo{padding:10px 0;font-size:1.5rem}
  .tools{gap:2px}
}
/* quick cart (minicart.js): the flying thumbnail and the dialog listing the cart */
.fly{position:fixed;left:0;top:0;z-index:90;width:56px;height:56px;border:3px solid #fff;border-radius:50%;object-fit:cover;background:var(--lav);box-shadow:0 8px 20px rgba(42,20,69,.35);pointer-events:none}
html:has(.mc[open],.sm[open]){overflow:hidden}
.mc{position:fixed;inset:84px 20px auto auto;width:min(420px,calc(100% - 24px));max-height:calc(100dvh - 104px);margin:0;padding:0;border:0;border-radius:28px;background:#fff;color:var(--ink);box-shadow:0 30px 60px -20px rgba(42,20,69,.6);overflow:hidden}
.mc[open]{display:flex;flex-direction:column;animation:mc-in .4s var(--ease)}
.mc::backdrop{background:rgba(42,20,69,.45)}
@keyframes mc-in{from{opacity:0;transform:translateY(-14px) scale(.97)}}
.mc header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 14px 12px 24px}
.mc h2{font-size:1.5rem;line-height:1.2}
.mc header p{font-size:.9rem;font-weight:600;opacity:.75}
.mc ul{display:grid;flex:1 1 auto;gap:6px;min-height:0;padding:0 14px 10px;overflow-y:auto}
.mc li{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;border-radius:16px}
.mc li.new{background:var(--pink-soft)}
.mc li img{width:56px;height:56px;border-radius:12px;object-fit:cover;background:var(--lav)}
.mc li b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.3}
.mc li span{display:block;font-size:.85rem;font-weight:600;opacity:.75}
.mc li strong{color:var(--rose);white-space:nowrap}
.mc footer{position:relative;padding:14px 24px 20px;border-top:1px solid rgba(60,34,95,.12)}
.mc-bar{position:absolute;inset:-1px 0 auto;height:3px;background:var(--pink);transform-origin:left}
.mc.run .mc-bar{animation:mc-bar var(--t) linear forwards}
@keyframes mc-bar{to{transform:scaleX(0)}}
.mc-c{margin-top:10px;font-size:.85rem;font-weight:600;text-align:center;opacity:.75}
.mc-t{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.mc-t b{font-size:1.3rem;color:var(--rose)}
.mc-act{display:flex;gap:10px;margin-top:12px}
.mc-act .btn{flex:1;justify-content:center;padding:0 12px;text-align:center}
.btn.out{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
@media (hover:hover){
  .btn.out:hover{background:rgba(60,34,95,.08)}
}
@media (max-width:560px){
  .mc{inset:auto 0 0 0;width:auto;max-width:none;max-height:85dvh;border-radius:28px 28px 0 0}
}
/* header search (search.js): a dialog centred on the screen holding a combobox (input + listbox of products) */
.sm{width:min(640px,calc(100% - 24px));max-width:none;height:min(560px,calc(100dvh - 24px));max-height:none;margin:auto;padding:0;border:0;border-radius:28px;background:#fff;color:var(--ink);box-shadow:0 30px 60px -20px rgba(42,20,69,.6);overflow:hidden}
.sm[open]{display:flex;flex-direction:column;animation:mc-in .35s var(--ease)}
.sm::backdrop{background:rgba(42,20,69,.45)}
.sm form{display:flex;align-items:center;gap:6px;padding:16px 14px 8px 16px}
.sf{flex:1;min-width:0;display:flex;align-items:center;gap:2px;padding-left:4px;border-radius:999px;background:var(--blush)}
.sf:focus-within{outline:3px solid var(--ink);outline-offset:2px}
.sf input[type=search]{flex:1;min-width:0;min-height:52px;padding:0 16px 0 0;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink);-webkit-appearance:none;appearance:none}
.sm-h{padding:8px 24px 6px;font-size:.85rem;font-weight:700;opacity:.75}
.sm [role=listbox]{display:grid;flex:1 1 auto;align-content:start;gap:4px;min-height:0;padding:0 10px 12px;overflow-y:auto}
.sm [role=option]{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:64px;padding:4px 10px;border-radius:16px;text-decoration:none}
.sm [role=option] img,.sm .ico{width:56px;height:56px;border-radius:12px;object-fit:cover;background:var(--lav)}
.sm .ico{display:grid;place-items:center;background:var(--blush)}
.sm [role=option] b,.sm [role=option] small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm [role=option] small{font-size:.85rem;font-weight:600;opacity:.75}
.sm [role=option] strong{color:var(--rose);white-space:nowrap}
.sm [aria-selected=true]{background:var(--blush);box-shadow:inset 0 0 0 2px var(--pink)}
@media (hover:hover){
  .sm [role=option]:hover{background:var(--blush)}
}
@media (max-width:560px){
  .sm [role=option]{grid-template-columns:48px minmax(0,1fr);gap:0 12px}
  .sm [role=option] img,.sm .ico{grid-row:span 2;width:48px;height:48px}
  .sm [role=option] small{display:none}
  .sm [role=option] strong{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .mc-bar{display:none}
}