/* =====================================================================================================
   v15 — đánh bóng toàn web: bố cục, trạng thái trống, đơn hàng, tài khoản, trang sản phẩm,
   nhãn "Mới" phát sáng, giỏ hàng 3D, hiệu ứng theo nhịp cuộn. Dùng biến màu sẵn có nên tự hợp sáng/tối.
   ===================================================================================================== */

/* ---------- 0. Khung trang: chân trang luôn nằm đáy màn hình ở trang ngắn ---------- */
#root{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#root>main{flex:1 0 auto}
#root>footer{margin-top:auto}
.lead-sm{margin:-6px 0 20px;font-size:.95rem}

/* ---------- 1. Nền cực quang trôi theo nhịp cuộn (rất nhẹ, không dùng blur) ---------- */
.sfx-aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.sfx-aurora i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;opacity:.5;will-change:transform}
.sfx-aurora .o1{left:-28vmax;top:-20vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent2) 26%,transparent),transparent 70%);
  transform:translate3d(calc(var(--page-p,0) * 34vw),calc(var(--page-p,0) * 46vh),0)}
.sfx-aurora .o2{right:-30vmax;top:18vh;background:radial-gradient(closest-side,color-mix(in srgb,#8b5cf6 22%,transparent),transparent 70%);
  transform:translate3d(calc(var(--page-p,0) * -30vw),calc(var(--page-p,0) * -26vh),0)}
.sfx-aurora .o3{left:18vw;bottom:-44vmax;background:radial-gradient(closest-side,color-mix(in srgb,#22d3ee 18%,transparent),transparent 70%);
  transform:translate3d(calc(var(--page-p,0) * 22vw),calc(var(--page-p,0) * -40vh),0)}
:root[data-theme=light] .sfx-aurora i{opacity:.42}
:root[data-fx=lite] .sfx-aurora{display:none}

/* ---------- 2. Nút lên đầu trang có vòng tiến độ ---------- */
.to-top{position:fixed;right:22px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:54;width:48px;height:48px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--border);background:var(--glass,var(--surface));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--text);
  box-shadow:0 10px 30px rgba(0,0,0,.22);animation:ttIn .35s cubic-bezier(.2,.8,.2,1);transition:transform .25s,box-shadow .25s}
.to-top[hidden]{display:none}
.to-top:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.3)}
.to-top svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.to-top circle{fill:none;stroke-width:3}
.to-top .tt-track{stroke:color-mix(in srgb,var(--text) 12%,transparent)}
.to-top .tt-ring{stroke:var(--accent2);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .12s linear}
.to-top .tt-arrow{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transform-origin:24px 24px}
@keyframes ttIn{from{opacity:0;transform:translateY(12px) scale(.9)}}
@media(max-width:520px){.to-top{right:14px;width:44px;height:44px}body.has-mm .to-top{bottom:calc(148px + env(safe-area-inset-bottom))}}

/* ---------- 3. Dải chữ chạy (trang chủ) ---------- */
.mq{position:relative;overflow:hidden;padding:18px 0;border-block:1px solid var(--border);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent2) 7%,transparent),transparent 30%,transparent 70%,color-mix(in srgb,#8b5cf6 7%,transparent));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex;width:max-content;animation:mqRun 46s linear infinite;transform:translate3d(0,0,0)}
.mq:hover .mq-track{animation-play-state:paused}
.mq-row{display:flex;align-items:center;gap:30px;padding-right:30px;transform:skewX(calc(var(--page-v,0) * -9deg));transition:transform .3s ease-out}
.mq-row span{font:700 clamp(.86rem,1.5vw,1.02rem)/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:color-mix(in srgb,var(--text) 78%,transparent)}
.mq-row span:nth-of-type(3n+1){color:var(--accent2)}
.mq-row i{width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:linear-gradient(135deg,var(--accent2),#8b5cf6);box-shadow:0 0 12px color-mix(in srgb,var(--accent2) 70%,transparent)}
@keyframes mqRun{to{transform:translate3d(-50%,0,0)}}

/* ---------- 4. Thẻ nghiêng 3D theo con trỏ ---------- */
.t3d{transform:perspective(1100px) rotateX(var(--t-rx,0deg)) rotateY(var(--t-ry,0deg));transition:transform .28s ease-out,box-shadow .3s,border-color .3s;will-change:transform}
.perk.t3d:hover{box-shadow:0 26px 60px color-mix(in srgb,var(--pk,var(--accent2)) 22%,transparent)}

/* ---------- 5. Trang chủ: bước mua hàng rõ hơn, FAQ & khối kêu gọi ---------- */
.story .step:not(.on) h3{color:color-mix(in srgb,var(--text) 66%,transparent)}
.story .step:not(.on) p{color:color-mix(in srgb,var(--text) 52%,transparent)}
.hero-stats b{font-variant-numeric:tabular-nums}
details.card{transition:border-color .3s,box-shadow .3s,background .3s}
details.card[open]{border-color:color-mix(in srgb,var(--accent2) 45%,var(--border));box-shadow:0 14px 40px color-mix(in srgb,var(--accent2) 12%,transparent)}
details.card>summary{cursor:pointer}
details.card[open]>p{animation:faqIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}}
.band{isolation:isolate}
.band::before,.band::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.band::before{width:420px;height:420px;right:-90px;top:-170px;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent2) 34%,transparent),transparent);animation:orbA 9s ease-in-out infinite alternate}
.band::after{width:360px;height:360px;left:22%;bottom:-220px;background:radial-gradient(closest-side,color-mix(in srgb,#8b5cf6 30%,transparent),transparent);animation:orbA 11s ease-in-out infinite alternate-reverse}
@keyframes orbA{to{transform:translate3d(-60px,40px,0) scale(1.15)}}

/* ---------- 6. Nhãn "Mới": bóng kính + phát sáng ---------- */
.bdg{position:relative;overflow:hidden}
.bdg.new{background:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,0) 46%),linear-gradient(135deg,#5b7cff 0%,#8a5cff 55%,#c05cff 100%);
  border:1px solid rgba(255,255,255,.42);text-shadow:0 1px 2px rgba(30,20,90,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -6px 10px rgba(40,20,120,.35),0 0 0 1px rgba(123,97,255,.35),0 0 14px rgba(123,97,255,.75),0 0 30px rgba(123,97,255,.4);
  animation:bdgGlow 2.6s ease-in-out infinite}
.bdg.new::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:42%;transform:skewX(-22deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:bdgSheen 3.4s ease-in-out infinite}
.bdg.new .i8{filter:drop-shadow(0 0 4px #fff);animation:bdgSpark 1.8s ease-in-out infinite}
@keyframes bdgGlow{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -6px 10px rgba(40,20,120,.35),0 0 0 1px rgba(160,130,255,.6),0 0 22px rgba(140,110,255,.95),0 0 46px rgba(140,110,255,.55)}}
@keyframes bdgSheen{0%,55%{left:-60%}85%,100%{left:130%}}
@keyframes bdgSpark{50%{transform:scale(1.25) rotate(18deg)}}
.chip.new{position:relative;overflow:hidden;color:#fff!important;border-color:rgba(255,255,255,.4)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 50%),linear-gradient(135deg,#5b7cff,#8a5cff 60%,#c05cff);box-shadow:0 0 12px rgba(123,97,255,.65)}

/* ---------- 7. Trạng thái trống / lỗi ---------- */
.es{display:grid;justify-items:center;text-align:center;gap:10px;padding:clamp(44px,8vw,84px) 16px;margin:8px 0;border-radius:30px;border:1px solid var(--border);
  background:radial-gradient(90% 70% at 50% 0%,color-mix(in srgb,var(--accent2) 10%,transparent),transparent 70%),var(--surface)}
.es h1,.es h2{margin:8px 0 0;font-size:clamp(1.6rem,3.4vw,2.3rem)}
.es p{margin:0;max-width:46ch}
.es .btn,.es-row{margin-top:10px}.es-row{justify-content:center}.es-row .btn{margin-top:0}
.es-art{width:200px;color:var(--accent2);animation:floaty 5s ease-in-out infinite;filter:drop-shadow(0 12px 22px color-mix(in srgb,var(--accent2) 30%,transparent))}
.es-art svg{display:block;width:100%}

/* ---------- 8. Nhãn trạng thái dạng viên ---------- */
.status{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;font:700 .76rem/1.2 var(--font-ui);white-space:nowrap;
  background:color-mix(in srgb,currentColor 13%,transparent);border:1px solid color-mix(in srgb,currentColor 28%,transparent)}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status.pending_payment::before,.status.awaiting_transfer::before,.status.pending_review::before{animation:stPulse 1.4s ease-in-out infinite}
@keyframes stPulse{50%{opacity:.25;transform:scale(.7)}}

/* ---------- 9. Danh sách đơn hàng ---------- */
.ord-list{display:grid;gap:12px}
.ord-row{display:grid;grid-template-columns:46px minmax(0,1fr) auto auto auto;gap:16px;align-items:center;padding:14px 18px 14px 14px;border-radius:20px;color:var(--text);
  background:var(--surface);border:1px solid var(--border);transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
.ord-row:hover{text-decoration:none;transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent2) 45%,var(--border));box-shadow:0 16px 40px color-mix(in srgb,var(--accent2) 14%,transparent)}
.ord-ic{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 24%,transparent),color-mix(in srgb,#8b5cf6 22%,transparent));position:relative}
.ord-ic::before{content:"";position:absolute;inset:13px 15px;border-radius:3px;border:2px solid var(--accent2);border-bottom-style:dashed}
.ord-main{display:grid;gap:3px;min-width:0}.ord-main b{justify-self:start}.ord-main small{font-size:.8rem}
.ord-total{font:800 1.05rem var(--font-ui);font-variant-numeric:tabular-nums}
.ord-go{font:700 .84rem var(--font-ui);color:var(--accent2);white-space:nowrap;transition:transform .25s}.ord-row:hover .ord-go{transform:translateX(4px)}
@media(max-width:700px){.ord-row{grid-template-columns:40px minmax(0,1fr) auto;gap:10px 12px;padding:12px}.ord-ic{width:40px;height:40px;grid-row:span 2}.ord-ic::before{inset:11px 13px}
  .ord-total{grid-column:3;grid-row:1}.ord-row .status{grid-column:2;grid-row:2;justify-self:start}.ord-go{grid-column:3;grid-row:2;justify-self:end}}
.lib-card{transition:transform .25s,border-color .25s,box-shadow .25s}
.lib-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent2) 40%,var(--border));box-shadow:0 14px 36px color-mix(in srgb,var(--accent2) 12%,transparent)}

/* ---------- 10. Tài khoản: phiên đăng nhập gọn ---------- */
.acc-sess-list{display:grid}
.acc-more{margin-top:6px}.acc-more>summary{cursor:pointer;font:600 .86rem var(--font-ui);color:var(--accent2);padding:8px 0;list-style:none}
.acc-more>summary::-webkit-details-marker{display:none}.acc-more>summary::after{content:" ▾"}.acc-more[open]>summary::after{content:" ▴"}
.acc-sess-all{display:flex;justify-content:flex-end;padding-top:12px;margin-top:8px;border-top:1px dashed var(--border)}

/* ---------- 11. Trang sản phẩm ---------- */
.detail .gallery img,.detail .gallery .ph{border-radius:24px;box-shadow:0 30px 70px rgba(0,0,0,.28)}
.detail .price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:14px 0 16px;font:800 clamp(1.9rem,3.6vw,2.6rem)/1 var(--font-ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  color:var(--text);background:linear-gradient(90deg,var(--accent2),#8b5cf6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.detail .price .old{font-size:1rem;font-weight:500;-webkit-text-fill-color:var(--muted);margin:0}
.pd-save{font:700 .78rem/1 var(--font-ui);padding:6px 10px;border-radius:99px;-webkit-text-fill-color:#fff;color:#fff;background:linear-gradient(135deg,#ff6a3d,#ff2f6d);align-self:center}
.pd-trust{list-style:none;margin:16px 0 4px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pd-trust li{display:grid;gap:4px;padding:12px;border-radius:16px;background:var(--surface);border:1px solid var(--border);font-size:.8rem;color:var(--muted)}
.pd-trust b{color:var(--text);font:700 .86rem var(--font-ui)}
.pd-trust li::before{content:"";width:22px;height:22px;background:linear-gradient(135deg,var(--accent2),#8b5cf6);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.pd-trust .t1{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E")}
.pd-trust .t2{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6 2h12v20l-3-2-3 2-3-2-3 2zM9 7h6v2H9zm0 4h6v2H9z'/%3E%3C/svg%3E")}
.pd-trust .t3{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9-8 11-4.6-2-8-6-8-11V5z'/%3E%3C/svg%3E")}
@media(max-width:560px){.pd-trust{grid-template-columns:1fr}.pd-trust li{grid-template-columns:22px 1fr;column-gap:10px}.pd-trust li::before{grid-row:span 2}}
.pd-more{margin:26px 0 10px}

/* ---------- 12. Chính sách ---------- */
.policy{max-width:820px;margin:8px auto 0;padding:clamp(24px,5vw,48px);border-radius:28px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.policy-k{margin:0 0 8px;font:700 .74rem var(--font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--accent2)}
.policy h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.policy .prose p{max-width:none;line-height:1.8}
.policy-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:26px;padding-top:18px;border-top:1px dashed var(--border)}

/* ---------- 13. Ví: tiêu đề mục + bảng ---------- */
.wl-h{display:flex;align-items:center;gap:10px;margin:34px 0 12px;font:700 1.15rem var(--font-ui);letter-spacing:0}
.wl-h::before{content:"";width:4px;height:18px;border-radius:2px;background:linear-gradient(180deg,var(--accent2),#8b5cf6)}
.wl-empty{margin:0;padding:18px;border-radius:16px;border:1px dashed var(--border);color:var(--muted);text-align:center}

/* =====================================================================================================
   14. GIỎ HÀNG 3D
   ===================================================================================================== */
.c3d{position:relative;width:280px;height:230px;perspective:900px;pointer-events:none;--k:1.2;
  --c3-line:#9db4ff;--c3-wire:rgba(157,180,255,.5);--c3-g1:rgba(120,150,255,.26);--c3-g2:rgba(120,150,255,.07);--c3-floor:rgba(110,140,255,.34)}
:root[data-theme=light] .c3d{--c3-line:#2f55d4;--c3-wire:rgba(47,85,212,.4);--c3-g1:rgba(47,85,212,.2);--c3-g2:rgba(47,85,212,.05);--c3-floor:rgba(47,85,212,.26)}
.c3d.md{width:100%;height:150px;--k:.84}
.c3-tilt,.c3-rig,.c3-basket,.c3-cube,.c3-drop,.c3-handle{position:absolute;left:0;top:0;transform-style:preserve-3d}
.c3-tilt{left:50%;top:55%;transform:scale3d(var(--k),var(--k),var(--k)) rotateX(calc(-17deg + var(--rx,0deg))) rotateY(var(--ry,0deg));transition:transform .35s ease-out}
.c3-rig{animation:c3Sway 9s ease-in-out infinite}
@keyframes c3Sway{0%,100%{transform:translateY(0) rotateY(-40deg)}50%{transform:translateY(-7px) rotateY(-12deg)}}
.c3-face{position:absolute;box-sizing:border-box;border:2px solid var(--c3-line);border-radius:7px;
  background:repeating-linear-gradient(90deg,var(--c3-wire) 0 1.5px,transparent 1.5px 16px),repeating-linear-gradient(0deg,var(--c3-wire) 0 1.5px,transparent 1.5px 23px),linear-gradient(180deg,var(--c3-g1),var(--c3-g2));
  box-shadow:inset 0 0 18px color-mix(in srgb,var(--c3-line) 30%,transparent)}
.c3-face.front,.c3-face.back{width:130px;height:70px;margin:-35px 0 0 -65px}
.c3-face.front{transform:translateZ(42px)}.c3-face.back{transform:translateZ(-42px)}
.c3-face.left,.c3-face.right{width:84px;height:70px;margin:-35px 0 0 -42px}
.c3-face.left{transform:translateX(-65px) rotateY(90deg)}.c3-face.right{transform:translateX(65px) rotateY(90deg)}
.c3-face.bottom{width:130px;height:84px;margin:-42px 0 0 -65px;transform:translateY(35px) rotateX(90deg);background:var(--c3-floor)}
.c3-wheel{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;box-sizing:border-box;border-radius:50%;border:5px solid var(--c3-line);background:radial-gradient(circle,#fff 0 2px,transparent 3px);box-shadow:0 0 10px color-mix(in srgb,var(--c3-line) 60%,transparent)}
.c3-wheel.w1{transform:translate3d(-46px,50px,38px)}.c3-wheel.w2{transform:translate3d(46px,50px,38px)}.c3-wheel.w3{transform:translate3d(-46px,50px,-38px)}.c3-wheel.w4{transform:translate3d(46px,50px,-38px)}
.c3-handle{transform:translate3d(80px,-42px,0)}
.c3-handle::before,.c3-handle::after{content:"";position:absolute;width:36px;height:6px;margin:-3px 0 0 -18px;border-radius:3px;background:var(--c3-line)}
.c3-handle::before{transform:translateZ(40px) rotateZ(-26deg)}.c3-handle::after{transform:translateZ(-40px) rotateZ(-26deg)}
.c3-grip{position:absolute;width:88px;height:9px;margin:-4.5px 0 0 -44px;border-radius:5px;background:linear-gradient(90deg,#ff7ac6,#8a5cff);box-shadow:0 0 14px rgba(170,110,255,.8);transform:translate3d(96px,-50px,0) rotateY(90deg)}
.c3-shadow{position:absolute;width:210px;height:140px;margin:-70px 0 0 -105px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.42),transparent);transform:translateY(63px) rotateX(90deg)}
:root[data-theme=light] .c3-shadow{background:radial-gradient(closest-side,rgba(40,60,140,.3),transparent)}
/* hộp sản phẩm */
.c3-cube{opacity:0;transition:opacity .3s}.c3-cube.on{opacity:1}
.c3-cube.k1{--cc:linear-gradient(135deg,#6f8dff,#3f5bf0);transform:translate3d(-34px,19px,12px) rotateY(12deg)}
.c3-cube.k2{--cc:linear-gradient(135deg,#ff8fc8,#f0468f);transform:translate3d(2px,19px,-16px) rotateY(-22deg)}
.c3-cube.k3{--cc:linear-gradient(135deg,#ffd166,#f59f0b);transform:translate3d(37px,19px,14px) rotateY(31deg)}
.c3-cube.k4{--cc:linear-gradient(135deg,#5eead4,#0ea5a4);transform:translate3d(-14px,-12px,0) rotateY(42deg)}
.c3-cf{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:4px;background:var(--cc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.c3-cf.f{transform:translateZ(15px)}.c3-cf.b{transform:translateZ(-15px)}
.c3-cf.l{transform:translateX(-15px) rotateY(90deg);filter:brightness(.78)}.c3-cf.r{transform:translateX(15px) rotateY(90deg);filter:brightness(.78)}
.c3-cf.t{transform:translateY(-15px) rotateX(90deg);filter:brightness(1.28)}.c3-cf.d{transform:translateY(15px) rotateX(90deg);filter:brightness(.6)}
.c3-cube.pop .c3-drop{animation:c3Drop .75s cubic-bezier(.3,1.35,.5,1) backwards}
@keyframes c3Drop{from{opacity:0;transform:translateY(-150px) rotateX(140deg) rotateZ(50deg)}60%{opacity:1}}
.c3d.bump .c3-basket{animation:c3Bump .5s .28s ease-out}
@keyframes c3Bump{40%{transform:translateY(4px) scale3d(1.04,.95,1.04)}}
/* giỏ rỗng: hộp lơ lửng phía trên */
.c3d.is-empty .c3-cube.k1{transform:translate3d(-50px,-66px,12px) rotateY(12deg)}
.c3d.is-empty .c3-cube.k2{transform:translate3d(2px,-92px,-10px) rotateY(-22deg)}
.c3d.is-empty .c3-cube.k3{transform:translate3d(52px,-62px,10px) rotateY(31deg)}
.c3d.is-empty .c3-cube.k4{display:none}
.c3d.is-empty .c3-drop{animation:c3Float 3.8s ease-in-out infinite}
.c3d.is-empty .k2 .c3-drop{animation-delay:-1.2s}.c3d.is-empty .k3 .c3-drop{animation-delay:-2.3s}
@keyframes c3Float{0%,100%{transform:translateY(0) rotateY(0) rotateX(0)}50%{transform:translateY(-12px) rotateY(180deg) rotateX(18deg)}}
.cart-empty .c3d{margin:0 auto -6px}
.cs-3d{margin:-6px 0 -4px;border-radius:18px;background:radial-gradient(70% 90% at 50% 40%,color-mix(in srgb,var(--accent2) 14%,transparent),transparent 75%)}

/* hàng trong giỏ: bay vào theo chiều sâu, nghiêng theo con trỏ, ảnh nổi lên */
.cart-list{perspective:1500px}
.ci{transform-style:preserve-3d;animation:ci3dIn .7s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes ci3dIn{from{opacity:0;transform:translateY(34px) translateZ(-90px) rotateX(-22deg)}}
.ci.t3d{transform:rotateX(var(--t-rx,0deg)) rotateY(var(--t-ry,0deg))}
.ci .ci-thumb,.ci .ci-price{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.ci.t3d:hover{box-shadow:0 22px 50px color-mix(in srgb,var(--accent2) 16%,transparent)}
.ci.t3d:hover .ci-thumb{transform:translateZ(34px) scale(1.03);box-shadow:0 18px 36px rgba(0,0,0,.35)}
.ci.t3d:hover .ci-price{transform:translateZ(22px)}
.ci.out{opacity:0;transform:translateX(60px) rotateY(-28deg) scale(.94)!important}
.cart-sum.t3d{transform-style:preserve-3d}
.cart-sum.t3d::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--t-mx,50%) var(--t-my,0%),color-mix(in srgb,#fff 16%,transparent),transparent 70%)}
.cart-sum.t3d:hover::after{opacity:1}
.cs-total b{display:inline-block}.cs-total b.flip{animation:csFlip .45s cubic-bezier(.2,.8,.2,1)}
@keyframes csFlip{from{opacity:0;transform:translateY(10px) rotateX(-70deg)}}

/* ---------- 15. Tôn trọng "giảm chuyển động" & chế độ nhẹ ---------- */
@media(prefers-reduced-motion:reduce){
  .mq-track,.bdg.new,.bdg.new::after,.bdg.new .i8,.band::before,.band::after,.c3-rig,.c3d.is-empty .c3-drop,.c3-cube.pop .c3-drop,.es-art,.ci,.status::before,.to-top{animation:none!important}
  .mq-row,.t3d{transform:none!important}
}
:root[data-fx=lite] .bdg.new,:root[data-fx=lite] .bdg.new::after,:root[data-fx=lite] .band::before,:root[data-fx=lite] .band::after{animation:none}

/* thẻ lợi ích: nghiêng 3D sau khi đã hiện (ghi đè .rv.in / :hover cũ) */
.perk.rv.in.t3d{transform:perspective(1100px) rotateX(var(--t-rx,0deg)) rotateY(var(--t-ry,0deg));transition:transform .28s ease-out,box-shadow .35s,opacity .9s;transition-delay:0s}
.perk.rv.in.t3d:hover{transform:perspective(1100px) translateY(-6px) rotateX(var(--t-rx,0deg)) rotateY(var(--t-ry,0deg))}
.acc-sess-list{grid-template-columns:minmax(0,1fr)}.acc-sess-list>*,.acc-more>*{min-width:0}
.acc-sess .grow{min-width:0}.acc-sess .grow b,.acc-sess .grow small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* điện thoại: thẻ lợi ích xếp 2 cột gọn (không phải cuộn dài 4 thẻ cao) */
@media(max-width:640px){
  .perk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .perk{max-width:none;height:224px!important;padding:16px}
  .perk .n{font-size:2.3rem}.perk h3{font-size:1rem;margin-bottom:6px}.perk p{font-size:.8rem;line-height:1.45}
  .mq{padding:13px 0}.mq-row{gap:20px;padding-right:20px}
}
.acc-grid{margin-bottom:30px}