/* =====================================================================
   TN AI v8 — giao diện sáng mới, thẻ sản phẩm holo, giỏ hàng, Hướng dẫn, Hỗ trợ,
   chữ TechText ở hero, băng chuyền FlexCarousel có giá.
   ===================================================================== */

/* ---------- 1. Giao diện sáng: "porcelain" xanh-trắng, hợp logo TN ---------- */
:root[data-theme=light]{
  --bg:#f3f6fc;--bg2:#e8edf8;--surface:#ffffff;--surface2:#eef2fa;--text:#0e1530;--muted:#58627e;
  --accent:#3359f0;--accent2:#0a7f78;--accent-ink:#fff;--hi:#e8890c;
  --border:rgba(28,44,96,.11);--glass:rgba(255,255,255,.74);--shadow:0 20px 48px rgba(28,44,110,.11);
  --ok:#0b8a50;--warn:#a56300;--err:#cf2338;
  --glow1:rgba(84,118,255,.20);--glow2:rgba(0,184,170,.13);--glow3:rgba(255,186,90,.14);
  --btn:#0e1530;--btn-ink:#fff;--cta:#3359f0;--cta-ink:#fff;--rim:36,56,140;--tech-accent:#3359f0;
}
:root[data-theme=dark]{--tech-accent:#6ee7d0}
:root[data-theme=light] body::after{opacity:.18}
:root[data-theme=light] .card,:root[data-theme=light] .modal{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 30px rgba(28,44,110,.06)}
:root[data-theme=light] input,:root[data-theme=light] select,:root[data-theme=light] textarea{background:#fff;border-color:rgba(28,44,96,.14)}
:root[data-theme=light] input:focus,:root[data-theme=light] select:focus,:root[data-theme=light] textarea:focus{box-shadow:0 0 0 4px rgba(51,89,240,.14)}
:root[data-theme=light] .btn:not(.liquid-button):not(.primary, .main, .accent, .solid-danger){background:#fff;box-shadow:0 1px 2px rgba(28,44,96,.06)}
:root[data-theme=light] .btn.primary{background:var(--btn);color:var(--btn-ink)}
:root[data-theme=light] .btn.primary:hover{box-shadow:0 12px 26px rgba(14,21,48,.22)}
:root[data-theme=light] footer{background:linear-gradient(180deg,transparent,rgba(51,89,240,.04))}
:root[data-theme=light] .hero-scrim{background:linear-gradient(90deg,rgba(243,246,252,.86) 0%,rgba(243,246,252,.5) 46%,transparent 80%)}
@media(max-width:900px){:root[data-theme=light] .hero-scrim{background:linear-gradient(180deg,rgba(243,246,252,.2) 20%,rgba(243,246,252,.82))}}
:root[data-theme=light] .msg.ok{background:#ecfbf3}:root[data-theme=light] .msg.warn{background:#fff7e8}:root[data-theme=light] .msg.err{background:#fff0f2}
:root[data-theme=light] .tbl th{color:var(--muted)}
:root[data-theme=light] .pt{background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--a),#3359f0,#0aa69a,#f0a23a,#3359f0) border-box}
:root[data-theme=light] .pt-head{background:linear-gradient(90deg,rgba(51,89,240,.06),transparent)}

/* ---------- 2. Hero: chữ TechText ---------- */
.hero-tech-host{position:relative;height:clamp(118px,15vw,210px);margin:-6px 0 14px -6px;color:var(--text)}
.hero-tech{cursor:crosshair}
.hero-tech canvas{filter:drop-shadow(0 6px 28px color-mix(in srgb,var(--tech-accent) 22%,transparent))}
:root[data-theme=light] .hero-tech canvas{filter:drop-shadow(0 6px 22px rgba(51,89,240,.14))}
@media(max-width:900px){.hero-tech-host{height:clamp(96px,26vw,150px);margin-left:-4px}}

/* ---------- 3. Thẻ sản phẩm holo ---------- */
.pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;margin:8px 0 28px}
.pc-grid.four{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.pc{position:relative;display:flex;flex-direction:column;border-radius:24px;padding:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,transparent),var(--surface));border:1px solid var(--border);color:var(--text);text-decoration:none;
  box-shadow:0 1px 0 rgba(var(--rim),.06) inset;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;isolation:isolate}
.pc:hover{text-decoration:none;transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));box-shadow:0 22px 50px rgba(0,0,0,.28)}
:root[data-theme=light] .pc:hover{box-shadow:0 22px 46px rgba(28,44,110,.14)}
.pc-media{position:relative;border-radius:18px;overflow:visible}
.pc-media .holo-card{display:block;width:100%}
.pc-media .holo-card__face{background:var(--surface2)}
.pc-ph{aspect-ratio:4/3;border-radius:18px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,rgba(var(--rim),.18),transparent 60%),var(--surface2)}
.pc-ph img{opacity:.7}
.bdgs{position:absolute;left:10px;top:10px;z-index:3;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.bdgs.inline{position:static;justify-content:center}
.bdg{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px 0 8px;border-radius:99px;font:700 .72rem/1 var(--font-ui);letter-spacing:.02em;color:#fff;
  background:rgba(10,14,30,.55);backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);border:1px solid rgba(255,255,255,.22);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.bdg .i8{width:14px;height:14px}
.bdg.new{background:linear-gradient(135deg,rgba(80,110,255,.92),rgba(124,77,255,.92))}
.bdg.free{background:linear-gradient(135deg,rgba(16,170,120,.94),rgba(10,140,150,.94))}
.bdg.sale{background:linear-gradient(135deg,#ff6a3d,#ff2f6d);padding:0 10px}
.bdg.demo{background:rgba(10,14,30,.5);font-weight:600}
.pc-type{position:absolute;right:10px;bottom:10px;z-index:3;font:700 .68rem/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;padding:6px 8px;border-radius:8px;color:#fff;background:rgba(10,14,30,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
.pc-body{display:flex;flex-direction:column;gap:6px;padding:14px 8px 6px;flex:1}
.pc-title{font-size:1.02rem;font-weight:650;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-sum{color:var(--muted);font-size:.88rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-foot{margin-top:auto;padding-top:10px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.pblk{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px;font-variant-numeric:tabular-nums}
.pblk b{font:800 1.16rem/1.1 var(--font-ui);color:var(--text);letter-spacing:-.01em}
.pblk s{color:var(--muted);font-size:.84rem}
.pblk small{flex-basis:100%;font-size:.74rem;color:var(--muted)}
.pblk small.save{color:#ff5a6e;font-weight:600}:root[data-theme=light] .pblk small.save{color:#d72a4b}
.pblk.is-free b{background:linear-gradient(100deg,#19c08a,#11a4b8);-webkit-background-clip:text;background-clip:text;color:transparent}
.pc-go{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);background:var(--surface2);color:var(--text);transition:transform .3s,background .3s,color .3s}
.pc-go .i8{width:18px;height:18px}
.pc:hover .pc-go{background:var(--cta);color:var(--cta-ink);border-color:transparent;transform:translateX(3px)}
.pc.sm .bdg.demo{display:none}
.pc.sm{padding:8px;border-radius:20px}.pc.sm .pc-body{padding:10px 6px 4px}.pc.sm .pc-title{font-size:.94rem}.pc.sm .pblk b{font-size:1.02rem}.pc.sm .pc-go{width:34px;height:34px}
.i8{display:inline-flex;width:18px;height:18px;flex:none}.i8 svg{width:100%;height:100%}

/* ---------- 4. Băng chuyền thấu kính (trang chủ) ---------- */
.fc-wrap{position:relative;height:clamp(440px,52vw,580px);margin:6px 0 0;border-radius:32px;overflow:hidden;
  background:radial-gradient(60% 70% at 50% 40%,rgba(var(--rim),.10),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--surface) 55%,transparent),transparent)}
.fc-wrap .flex-carousel{color:var(--text)}
.fc-cap{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:min(560px,92vw)}
.fc-title{font-size:1.08rem!important;font-weight:650!important;letter-spacing:-.01em}
.fc-price{justify-content:center;text-align:center}.fc-price b{font-size:1.25rem}.fc-price small{text-align:center}
.flex-carousel__caption{gap:10px}
.fc-actions{display:flex;justify-content:center;margin:-4px 0 6px}
.fc-cta .i8{width:18px;height:18px}
@media(max-width:640px){.fc-wrap{border-radius:22px;height:440px}}

/* ---------- 5. Giỏ hàng ---------- */
.cart-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:6px 0 18px}
.cart-head h1{margin:0}.cart-count{display:inline-block;margin-top:6px;font:600 .82rem var(--font-ui);color:var(--muted);padding:4px 12px;border-radius:99px;border:1px solid var(--border);background:var(--surface)}
.cart-head .row a{color:var(--muted);font-weight:600}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}.btn.ghost:hover{color:var(--err);border-color:var(--border)}
.cart-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:26px;align-items:start}
.cart-list{display:grid;gap:12px}
.ci{display:grid;grid-template-columns:132px minmax(0,1fr) auto 44px;gap:18px;align-items:center;padding:12px 14px 12px 12px;border-radius:22px;background:var(--surface);border:1px solid var(--border);
  animation:ciIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms);transition:opacity .26s,transform .26s,border-color .3s}
.ci:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.ci.out{opacity:0;transform:translateX(24px) scale(.98)}
@keyframes ciIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ci-thumb{display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--surface2)}
.ci-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}.ci:hover .ci-thumb img{transform:scale(1.05)}
.ci-info{display:grid;gap:7px;min-width:0}
.ci-title{color:var(--text);font-weight:650;font-size:1.02rem;line-height:1.35}.ci-title:hover{color:var(--accent);text-decoration:none}
.ci-meta{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;font:600 .74rem/1 var(--font-ui);background:var(--surface2);border:1px solid var(--border);color:var(--text)}
.chip .i8{width:14px;height:14px}
.chip.ghost{background:transparent;color:var(--muted)}.chip.new{color:#7d8bff;border-color:rgba(125,139,255,.4)}.chip.sale{color:#ff5a6e;border-color:rgba(255,90,110,.4)}
:root[data-theme=light] .chip.new{color:#3f4fd6}:root[data-theme=light] .chip.sale{color:#d72a4b}
.ci-note{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted)}.ci-note .i8{width:15px;height:15px;color:var(--ok)}
.ci-price{text-align:right;display:grid;gap:2px;font-variant-numeric:tabular-nums}.ci-price b{font:800 1.12rem var(--font-ui)}.ci-price b.free{color:var(--ok)}.ci-price s{color:var(--muted);font-size:.84rem}
.ci-del{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:all .2s}
.ci-del:hover{color:#fff;background:var(--err);border-color:transparent;transform:rotate(-6deg)}
.cart-sum{position:sticky;top:96px;display:grid;gap:12px;padding:24px;border-radius:26px;border:1px solid var(--border);
  background:linear-gradient(160deg,rgba(var(--rim),.10),transparent 55%),var(--surface);box-shadow:var(--shadow)}
.cart-sum h2{margin:0 0 4px;font:700 1.12rem var(--font-ui)}
.cs-row{display:flex;justify-content:space-between;color:var(--muted);font-variant-numeric:tabular-nums}.cs-row.save span:last-child{color:#ff5a6e;font-weight:700}:root[data-theme=light] .cs-row.save span:last-child{color:#d72a4b}
.cs-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;margin-top:2px;border-top:1px dashed var(--border)}
.cs-total b{font:800 1.7rem/1 var(--font-ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cart-go{width:100%;min-height:54px;font-size:1rem;margin-top:4px}.cart-go .i8{width:20px;height:20px}
.cs-hint,.cs-fine{margin:0;font-size:.78rem;color:var(--muted);text-align:center}
.cs-pay{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}.cs-pay>div{display:flex;gap:6px}
.cs-trust{list-style:none;margin:4px 0 0;padding:12px 0 0;border-top:1px solid var(--border);display:grid;gap:9px}
.cs-trust li{display:flex;align-items:center;gap:10px;font-size:.86rem}.cs-trust .i8{color:var(--accent2);width:18px;height:18px}
.cart-sugg{margin-top:46px}
.sec-mini{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}.sec-mini h2{margin:0;font-size:clamp(1.3rem,2.4vw,1.7rem)}
.cart-empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:56px 16px 24px}
.cart-empty h1{margin:6px 0 0}.cart-empty-art{width:220px;color:var(--accent);animation:floaty 5s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-8px)}}
@media(max-width:980px){.cart-grid{grid-template-columns:1fr}.cart-sum{position:static}}
@media(max-width:640px){.ci{grid-template-columns:88px minmax(0,1fr) 40px;gap:12px;padding:10px}.ci-price{grid-column:2;grid-row:2;text-align:left;display:flex;gap:8px;align-items:baseline}.ci-del{grid-column:3;grid-row:1}.ci-note{display:none}.ci-thumb{grid-row:span 2}}

/* ---------- 6. Hướng dẫn ---------- */
.kicker{display:inline-flex;align-items:center;gap:8px;font:700 .76rem var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);padding:7px 12px;border-radius:99px;background:color-mix(in srgb,var(--accent2) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent2) 28%,transparent)}
.kicker .i8{width:15px;height:15px}
.lead{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--muted);max-width:640px;line-height:1.6}
.g-hero,.s-hero{padding:18px 0 8px}.g-hero h1,.s-hero h1{margin:14px 0 10px;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.08;letter-spacing:-.02em}
.g-hero em,.s-hero em{font-style:normal;background:linear-gradient(100deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.g-steps{list-style:none;padding:0;margin:30px 0 10px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:g}
.g-step{position:relative;padding:24px 22px 22px;border-radius:24px;border:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:8px;overflow:hidden}
.g-step::after{content:"";position:absolute;inset:auto -30% -60% auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(var(--rim),.14),transparent 70%);pointer-events:none}
.g-num{position:absolute;right:18px;top:14px;font:800 2.6rem/1 var(--font-ui);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--text) 22%,transparent)}
.g-ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 35%,transparent)}
.g-ic .i8{width:24px;height:24px}
.g-step h3{margin:8px 0 0;font-size:1.12rem}.g-step p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55;flex:1}
.g-link{display:inline-flex;align-items:center;gap:6px;font-weight:650;font-size:.88rem;margin-top:6px}.g-link .i8{width:16px;height:16px;transition:transform .25s}.g-link:hover .i8{transform:translateX(3px)}
.g-ways{margin:44px 0 0}
.gw-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.gw{position:relative;padding:28px;border-radius:28px;border:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:6px;overflow:hidden}
.gw::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.gw.b::before{background:linear-gradient(90deg,var(--accent2),var(--hi))}
.gw-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--surface2);color:var(--accent);border:1px solid var(--border)}.gw.b .gw-ic{color:var(--accent2)}.gw-ic .i8{width:26px;height:26px}
.gw h3{margin:10px 0 0;font-size:1.25rem}.gw p{margin:0}
.gw ol{margin:10px 0 16px;padding:0;list-style:none;counter-reset:w;display:grid;gap:10px}
.gw li{counter-increment:w;display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;font-size:.93rem}
.gw li::before{content:counter(w);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 .78rem var(--font-ui);background:var(--surface2);border:1px solid var(--border)}
.gw .btn{align-self:flex-start;margin-top:auto}
.g-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 8px}
.g-tips .tip{display:flex;gap:14px;padding:18px;border-radius:20px;background:var(--surface2);border:1px solid var(--border)}
.g-tips .tip>.i8{width:22px;height:22px;color:var(--accent2);margin-top:2px}.g-tips .tip p{margin:4px 0 0;font-size:.88rem}
.g-band{margin-top:40px}
@media(max-width:1000px){.g-steps{grid-template-columns:1fr 1fr}.g-tips{grid-template-columns:1fr}}
@media(max-width:640px){.g-steps,.gw-grid{grid-template-columns:1fr}}

/* ---------- 7. Hỗ trợ ---------- */
.s-hero{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:30px;align-items:center}
.s-search{display:flex;align-items:center;gap:10px;margin-top:18px;padding:0 6px 0 16px;border-radius:18px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);max-width:560px}
.s-search .i8{color:var(--muted)}.s-search input{border:0;background:transparent;box-shadow:none!important;min-height:56px;padding-left:0}
.s-contact{display:grid;justify-items:center;text-align:center;gap:8px;padding:26px 22px;border-radius:28px;border:1px solid var(--border);background:linear-gradient(160deg,rgba(0,104,255,.14),transparent 60%),var(--surface);box-shadow:var(--shadow)}
.s-contact p{margin:0}.s-contact .btn{width:100%}
.s-avatar{position:relative;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:#fff;box-shadow:0 10px 26px rgba(0,104,255,.25)}
.s-avatar .on{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;background:#22c55e;border:3px solid var(--surface)}
.s-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:30px 0 10px}
.sq{display:flex;align-items:center;gap:12px;padding:16px;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:transform .25s,border-color .25s}
.sq:hover{text-decoration:none;transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.sq>.i8:first-child{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--surface2);color:var(--accent)}
.sq div{flex:1;min-width:0;display:grid}.sq small{color:var(--muted);font-size:.78rem}.sq .go{color:var(--muted);width:16px;height:16px}
.s-faq{margin-top:38px}
.tchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.tchip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:99px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:600 .86rem var(--font-ui);cursor:pointer;transition:all .2s}
.tchip .i8{width:16px;height:16px}.tchip:hover{border-color:var(--accent)}
.tchip[aria-pressed=true]{background:var(--btn);color:var(--btn-ink);border-color:transparent}
.faq-list{display:grid;gap:10px}
.faq{border-radius:18px;border:1px solid var(--border);background:var(--surface);transition:border-color .2s,box-shadow .2s}
.faq[open]{border-color:color-mix(in srgb,var(--accent) 38%,var(--border));box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;font-weight:650}
.faq summary::-webkit-details-marker{display:none}
.faq .chev{width:18px;height:18px;color:var(--muted);transform:rotate(90deg);transition:transform .25s}.faq[open] .chev{transform:rotate(-90deg)}
.faq p{margin:0;padding:0 18px 18px;color:var(--muted);line-height:1.6}
.s-compose{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:22px;margin:40px 0 10px;padding:26px;border-radius:28px;border:1px solid var(--border);background:var(--surface)}
.s-compose h2{margin:0 0 4px}.sc-r{display:flex;flex-direction:column;gap:8px}
.sp-preview{flex:1;min-height:180px;margin:0;padding:16px;border-radius:16px;background:var(--surface2);border:1px dashed var(--border);white-space:pre-wrap;font:500 .9rem/1.6 ui-monospace,Menlo,Consolas,monospace;color:var(--text)}
@media(max-width:980px){.s-hero{grid-template-columns:1fr}.s-quick{grid-template-columns:1fr 1fr}.s-compose{grid-template-columns:1fr}}
@media(max-width:560px){.s-quick{grid-template-columns:1fr}}

/* ---------- 8. Trang sản phẩm: bộ lọc gọn hơn ---------- */
.filters{gap:10px}
@media(prefers-reduced-motion:reduce){.ci,.cart-empty-art{animation:none}}

/* ---------- 9. Nạp tiền trên điện thoại: thẻ ví co theo màn hình ---------- */
.wallet-grid>*{min-width:0}
@media(max-width:480px){.rc-host{overflow:visible}.rc-host>*{justify-self:start;margin-left:calc((100vw - 32px - 369px) / 2);transform:scale(calc((100vw - 32px) / 369px));transform-origin:center}.rc-host{padding:10px 0;height:calc((100vw - 32px) * 240 / 369 + 20px)}}