/* ========================================================== Shop Đồ Lưu Niệm (/shop) – khớp bản demo đã duyệt. Mọi lớp đều có tiền tố sh- để không đụng giao diện trang chủ (style.css). ========================================================== */ /* Thang chữ riêng của /shop, chỉnh sát bản demo (đợt U1a). Vẫn theo quy tắc css/type.css: không dùng độ đậm 900, đơn vị rem. */ :root{--fs-shbanner:clamp(2.125rem,4vw,4rem);--fs-shlead:clamp(1rem,1.3vw,1.25rem);--fs-shsec:clamp(1.625rem,2.4vw,2.5rem)} .sh-page{position:relative;z-index:1;min-height:100vh} .sh-page a{color:var(--accent-ink)} .sh-page a.sh-btn{color:inherit} .sh-img{display:block;width:100%;height:100%;object-fit:cover} .sh-toprow{background:#2A52D9;color:#fff;padding:11px 0;font-size:var(--fs-sm);font-weight:600;line-height:18px} .sh-tbrow{display:flex;align-items:center;justify-content:space-between;gap:16px;white-space:nowrap} .sh-tb-left{min-width:0;overflow:hidden;text-overflow:ellipsis} /* điện thoại hẹp (≤ 380px): chữ dài cắt bằng "…" thay vì làm cả trang trượt ngang */ .sh-toprow{overflow:hidden} .sh-toprow a{color:#fff;text-decoration:underline;font-weight:700} .sh-tb-right{color:#A7F3E4;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-variant-numeric:tabular-nums} .sh-hdr .themebtn,.sh-hdr .musicbtn{width:50px;height:50px;flex:none} .sh-user{border:1.5px solid var(--line2);background:var(--surface);color:var(--deep-ink);border-radius:12px;padding:0 22px;height:50px;cursor:pointer;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;flex:none;font-size:var(--fs-lg);font-weight:700;line-height:1.3;transition:transform .2s,background .25s,border-color .25s,color .25s} .sh-user:hover{background:var(--soft-blue);border-color:#2A52D9;color:var(--accent-ink)} .sh-user.pri{background:#2A52D9;color:#fff;border-color:#2A52D9;margin-left:calc(8px - clamp(14px,2.4vw,40px))} .sh-user.pri:hover{background:#1E3A9E;color:#fff;border-color:#1E3A9E} .sh-user[hidden]{display:none} .sh-wallet{display:none;align-items:center;gap:8px;height:50px;border-radius:999px;border:1.5px solid #2DD4BF;background:var(--soft-teal);color:var(--ink);padding:0 6px 0 16px;flex:none;white-space:nowrap;font-size:var(--fs-md);font-weight:700} .sh-wallet.show{display:inline-flex} .sh-wallet button{border:0;background:#2DD4BF;color:#053D3A;border-radius:999px;padding:8px 14px;cursor:pointer;font-size:var(--fs-sm);font-weight:700} .sh-tile-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%} .sh-pimg .sh-ph{display:none} .sh-pimg{overflow:hidden} .sh-thumbs{display:flex;gap:8px;padding:10px;flex-wrap:wrap} .sh-thumb{width:56px;height:56px;border-radius:10px;border:2px solid var(--line2);overflow:hidden;padding:0;background:var(--surface);cursor:pointer} .sh-thumb.on{border-color:#2A52D9} .sh-panel .sh-pic{overflow:hidden;position:relative} .sh-pwrap{display:flex;flex-direction:column;min-width:0} .sh-pricerow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .sh-old{color:var(--muted);text-decoration:line-through;font-size:var(--fs-md);font-weight:500} .sh-oldsm{color:var(--muted);text-decoration:line-through;margin-left:6px;font-size:var(--fs-xs);font-weight:500} .sh-err{background:#FDECEA;color:var(--danger);border-radius:12px;padding:10px 12px;font-size:var(--fs-sm);font-weight:600;line-height:1.5} .dark .sh-err{background:#4A1F1C;color:#FF9C94} .sh-ok{background:var(--soft-teal);border:1px solid #2DD4BF;color:var(--ink);border-radius:14px;padding:14px 16px;text-align:center;font-weight:700;line-height:1.5} .sh-qrimg{width:200px;height:200px;max-width:70vw;border-radius:16px;background:#fff;border:1px solid var(--line);padding:6px;object-fit:contain;align-self:center} .sh-bankrow{display:flex;align-items:center;justify-content:space-between;gap:10px} .sh-bankrow span{min-width:0;overflow-wrap:anywhere} .sh-copy{flex:none;border:1.5px solid var(--line2);background:var(--surface);color:var(--accent-ink);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:var(--fs-sm);font-weight:700} .sh-pill{display:inline-block;border-radius:999px;padding:3px 10px;background:var(--soft-blue);color:var(--accent-ink);font-size:var(--fs-xs);font-weight:600} .sh-pill.paid,.sh-pill.done{background:var(--soft-teal);color:var(--teal-ink)} .sh-pill.cancelled{background:#ECEFF5;color:#5B6580} .dark .sh-pill.cancelled{background:#3A4868;color:#C3CCE2} .sh-pill.pending{background:#FFF3D1;color:#7A4A00} .dark .sh-pill.pending{background:#4A3308;color:#FFE8B0} .sh-ord{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--bg);display:flex;flex-direction:column;gap:8px} .sh-ord small{color:var(--muted);font-size:var(--fs-xs);line-height:1.5} .sh-ordtop{display:flex;justify-content:space-between;gap:10px;align-items:center} .sh-ordact{display:flex;gap:8px;flex-wrap:wrap} .sh-ordact .sh-btn{padding:10px 14px;font-size:var(--fs-sm)} .sh-mini{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm)} .sh-skel{height:300px;border-radius:22px;background:linear-gradient(90deg,var(--soft-blue),var(--surface),var(--soft-blue));background-size:200% 100%;animation:shsk 1.4s linear infinite} @keyframes shsk{to{background-position:-200% 0}} body.sh-lock{overflow:hidden} .sh-wrap{max-width:none;width:100%;margin:0;padding:0 clamp(20px,3.2vw,64px);box-sizing:border-box;position:relative} .sh-hdr{background:var(--header-bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40} .sh-hdrrow{display:flex;align-items:center;gap:clamp(14px,2.4vw,40px);padding-top:14px;padding-bottom:14px} .sh-brand{display:flex;align-items:center;gap:10px;flex:none} .sh-brand img{width:60px;height:59px;object-fit:contain} .sh-brandtxt{font-family:'Lobster',cursive;font-size:42px;line-height:1;color:var(--accent-ink);text-shadow:2px 2px 0 #2DD4BF,3px 3px 0 rgba(30,58,158,.25)} .sh-shoptag{letter-spacing:2px;color:var(--teal-ink);background:var(--soft-teal);padding:5px 12px;border-radius:999px;white-space:nowrap;font-size:var(--fs-xs);font-weight:600} .sh-search{flex:1;display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line2);border-radius:999px;padding:0 18px;height:50px;min-width:0;max-width:620px;margin:0 auto} .sh-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);outline:0;height:100%;font-family:'Be Vietnam Pro',sans-serif;font-size:var(--fs-lg);font-weight:500;line-height:1.3} .sh-search input::placeholder{color:var(--muted);font-weight:400} .sh-iconbtn{position:relative;width:50px;height:50px;border-radius:50%;border:1.5px solid var(--line2);background:var(--surface);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;flex:none;transition:transform .2s,background .25s,border-color .25s} .sh-iconbtn:hover{background:var(--soft-blue);border-color:#2A52D9;transform:scale(1.06)} .sh-badge{position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;border-radius:999px;background:#2DD4BF;color:#053D3A;display:flex;align-items:center;justify-content:center;padding:0 5px;box-sizing:border-box;font-size:var(--fs-xs);font-weight:600} .sh-backlink{color:var(--ink);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-md);font-weight:700} .sh-catbar{display:flex;gap:10px;overflow-x:auto;padding-top:14px;padding-bottom:14px;scrollbar-width:none} .sh-catbar::-webkit-scrollbar{display:none} .sh-chip{flex:none;border:1.5px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:999px;padding:10px 20px;cursor:pointer;transition:transform .2s,background .25s,color .25s,border-color .25s;font-size:var(--fs-md);font-weight:700;line-height:1.3} .sh-chip:hover{background:var(--soft-blue);border-color:#2A52D9;transform:translateY(-1px)} .sh-chip.on{background:#2A52D9;color:#fff;border-color:#2A52D9} .sh-chip.t.on{background:#0E7C86;border-color:#0E7C86} .sh-chip.gold{border-color:#F59E0B;color:#3B2400;background:linear-gradient(110deg,#FFF1C9 0%,#FFD978 45%,#FFF1C9 90%);background-size:220% 100%;position:relative;animation:goldShine 3.2s linear infinite} .sh-chip.gold::before{content:'\2605';margin-right:6px;color:#C26A00} .sh-chip.gold:hover{border-color:#D97706;transform:translateY(-2px) scale(1.04)} .sh-chip.gold.on{background:#F59E0B;border-color:#F59E0B;color:#3B2400;animation:none} .sh-chip.gold::after{content:'';position:absolute;inset:-1px;border-radius:inherit;border:2px solid rgba(245,158,11,.7);opacity:0;pointer-events:none;animation:goldRing 2s ease-out infinite;will-change:transform,opacity} @keyframes goldRing{0%{opacity:.8;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.18,1.5)}} .sh-chip.gold.on::before{color:#3B2400} @keyframes goldPulse{0%{box-shadow:0 0 0 0 rgba(245,158,11,.6)}70%,100%{box-shadow:0 0 0 10px rgba(245,158,11,0)}} @keyframes goldShine{to{background-position:-220% 0}} .sh-banner{position:relative;border-radius:28px;overflow:hidden;background:linear-gradient(120deg,#2A52D9 0%,#1E3A9E 55%,#0E7C86 100%);color:#fff;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:20px;padding:clamp(28px,4vw,64px)} .sh-banner h1{margin:0;font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-size:var(--fs-shbanner);font-weight:800;line-height:1.1} .sh-banner h1 span{color:#A7F3E4} .sh-banner p{margin:14px 0 0;color:#E3EAFF;max-width:560px;font-size:var(--fs-shlead);line-height:1.7} .sh-bbtns{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap} .sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:15px 26px;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s,background-color .25s,color .25s;font-family:inherit;font-size:var(--fs-lg);font-weight:700;line-height:1.3} .sh-btn:hover{transform:translateY(-2px)} .sh-btn.teal{background:#2DD4BF;color:#053D3A}.sh-btn.teal:hover{background:#fff} .sh-btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.65)}.sh-btn.ghost:hover{background:rgba(255,255,255,.15)} .sh-btn.blue{background:#2A52D9;color:#fff}.sh-btn.blue:hover{background:#0E7C86} .sh-btn.teal2{background:#0E7C86;color:#fff}.sh-btn.teal2:hover{background:#2A52D9} .sh-btn.outline{background:var(--surface);color:var(--accent-ink);border:1.5px solid var(--line2)}.sh-btn.outline:hover{background:var(--soft-blue);border-color:#2A52D9} .sh-btn[disabled],.sh-btn.off{background:#9AA3B8;color:#fff;cursor:not-allowed;transform:none;pointer-events:none} /* ===== Đợt U1a: khối hình banner (SH-D4) ===== */ .sh-btn.hot{position:relative;overflow:hidden;isolation:isolate;padding-left:24px;padding-right:30px;font-size:17px;font-weight:800;letter-spacing:.2px;background:linear-gradient(110deg,#14C2AB 0%,#5EEAD4 28%,#E9FFF9 50%,#5EEAD4 72%,#14C2AB 100%);background-size:260% 100%;background-position:0% 0;box-shadow:0 10px 26px rgba(45,212,191,.55),0 0 0 4px rgba(255,255,255,.22);animation:shk-hotbeat 1.9s ease-in-out infinite,shk-hotflow 3.2s linear infinite} .sh-btn.hot:hover{animation:shk-hotflow 1.4s linear infinite;transform:translateY(-3px) scale(1.07);box-shadow:0 16px 34px rgba(45,212,191,.7),0 0 0 6px rgba(255,255,255,.3)} .sh-btn.hot:active{transform:translateY(0) scale(.97)} .sh-btn.hot::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;border:3px solid #fff;opacity:0;animation:shk-hotring 1.9s ease-out infinite} .sh-btn.hot::after{content:'';position:absolute;top:-25%;left:0;width:42%;height:150%;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:translateX(-150%) skewX(-18deg);animation:shk-hotshine 2.2s ease-in-out infinite} .sh-btn.hot .hs{flex:none;width:24px;height:24px;filter:none;animation:shk-hottw 1.2s ease-in-out infinite} .sh-btn.hot .sk{position:absolute;z-index:2;pointer-events:none;width:9px;height:9px;opacity:0;animation:shk-hotsk 2.4s ease-in-out infinite} .sh-btn.hot .sk.a{top:6px;right:12px} .sh-btn.hot .sk.b{bottom:6px;right:34px;animation-delay:1.2s} .sh-btn.hot .sk.c{top:8px;left:46px;animation-delay:.6s} .sh-btn.hot > span{position:relative;z-index:2} @keyframes shk-hotbeat{0%,100%{transform:scale(1)}8%{transform:scale(1.07)}16%{transform:scale(1)}24%{transform:scale(1.05)}32%{transform:scale(1)}} @keyframes shk-hotflow{0%{background-position:0% 0}100%{background-position:-260% 0}} @keyframes shk-hotshine{0%,45%{transform:translateX(-150%) skewX(-18deg)}100%{transform:translateX(480%) skewX(-18deg)}} @keyframes shk-hotring{0%{opacity:.9;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.28,1.7)}} @keyframes shk-hottw{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.35) rotate(35deg)}} @keyframes shk-hotsk{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:1;transform:scale(1.2) rotate(90deg)}70%{opacity:0;transform:scale(.4) rotate(180deg)}} .sh-btn.dip{background:linear-gradient(120deg,#FFD3E8 0%,#FFE6C2 100%);color:#7A1D4A;box-shadow:0 6px 18px rgba(244,114,182,.35)} .sh-btn.dip svg{flex:none} .sh-bart{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-size:inherit;line-height:1.2;filter:none} .sh-stage{position:relative;width:min(100%,460px);aspect-ratio:460/330} .sh-hs{position:absolute;inset:0;opacity:0;transform:translateX(9%);transition:opacity .6s ease,transform .6s ease;pointer-events:none} .sh-hs.on{opacity:1;transform:none} .sh-hs.prev{transform:translateX(-9%)} .sh-hs svg{width:100%;height:100%;display:block;overflow:visible} .sh-hs:not(.on) *{animation-play-state:paused} .sh-hs .sv-lid,.sh-hs .sv-spk,.sh-hs .sv-tw,.sh-hs .sv-bear,.sh-hs .sv-armr,.sh-hs .sv-eye,.sh-hs .sv-hg,.sh-hs .sv-crd,.sh-hs .sv-hp,.sh-hs .sv-beat,.sh-hs .sv-av,.sh-hs .sv-hop{transform-box:fill-box} .sh-bctl{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap} .sh-dots{display:flex;gap:8px;align-items:center} .sh-dot{position:relative;width:12px;height:12px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:width .25s,background .25s} .sh-dot::after{content:'';position:absolute;inset:-16px -5px} .sh-dot.on{width:32px;background:#2DD4BF} .sh-capbtn{border:1.5px solid rgba(255,255,255,.7);background:transparent;color:#fff;border-radius:999px;padding:9px 18px;font:700 14px 'Be Vietnam Pro',sans-serif;cursor:pointer;transition:background .2s} .sh-capbtn:hover{background:rgba(255,255,255,.16)} .sv-lid{animation:shk-lidpop 4s ease-in-out infinite;transform-origin:50% 100%} .sv-spk{opacity:0;animation:shk-spburst 4s ease-out infinite;transform-origin:center} .sv-tw{opacity:.2;animation:shk-tw 2.6s ease-in-out infinite;transform-origin:center} .sv-bear{animation:shk-sbob 2.6s ease-in-out infinite} .sv-armr{animation:shk-wave 1.3s ease-in-out infinite;transform-origin:10% 10%} .sv-eye{animation:shk-blink 4.2s infinite;transform-origin:center} .sv-hg{animation:shk-hfloat 3.4s ease-in-out infinite;transform-origin:50% 100%} .sv-crd{animation:shk-cardrise 5s ease-in-out infinite} .sv-hp{opacity:0;animation:shk-hpop 3.6s ease-out infinite} .sv-beat{animation:shk-beat 1.2s ease-in-out infinite;transform-origin:center} .sv-av{animation:shk-sbob 2.4s ease-in-out infinite} .sv-hop{animation:shk-hop 3s ease-in-out infinite} @keyframes shk-lidpop{0%,55%,100%{transform:translateY(0) rotate(0)}65%{transform:translateY(-28px) rotate(-7deg)}75%{transform:translateY(2px) rotate(0)}85%{transform:translateY(-10px) rotate(3deg)}93%{transform:translateY(0) rotate(0)}} @keyframes shk-spburst{0%,58%{opacity:0;transform:scale(.2)}68%{opacity:1;transform:scale(1.2)}88%{opacity:0;transform:scale(.6)}100%{opacity:0}} @keyframes shk-tw{0%,100%{opacity:.15;transform:scale(.4)}50%{opacity:1;transform:scale(1.15)}} @keyframes shk-sbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes shk-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-26deg)}} @keyframes shk-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}} @keyframes shk-hfloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}} @keyframes shk-cardrise{0%,8%{transform:translateY(46px)}35%,72%{transform:translateY(-58px)}100%{transform:translateY(46px)}} @keyframes shk-hpop{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-70px) scale(1.2)}} @keyframes shk-beat{0%,100%{transform:scale(1)}30%{transform:scale(1.16)}60%{transform:scale(.97)}} @keyframes shk-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .sh-hs .sd0{animation-delay:0s} .sh-hs .sd1{animation-delay:.15s} .sh-hs .sd2{animation-delay:.3s} .sh-hs .sd3{animation-delay:.4s} .sh-hs .sd4{animation-delay:1.1s} .sh-hs .sd5{animation-delay:.7s} .sh-hs .sd6{animation-delay:1.6s} .sh-hs .sd7{animation-delay:1.2s} .sh-hs .sd8{animation-delay:2.4s} .sh-hs .sd9{animation-delay:.6s} .sh-hs .sd10{animation-delay:1.8s} .sh-hs .sd11{animation-delay:.5s} .sh-hs .sd12{animation-delay:1s} .sh-hs .sd13{animation-delay:1.5s} .sh-hs .sd14{animation-delay:.9s} /* ===== Đợt U1a (SH-D4 / SH-07 / SH-08 / SH-09): banner 3 hình SVG + chấm + nút chú thích + hai nút Thịnh Hành / Quà Tặng (cổng từ demo Main.dc.html, thêm tiền tố sh-/sv-/shk- để không đụng lớp cũ) ===== */ .sh-capbtn{display:inline-block;text-decoration:none} .sh-page a.sh-capbtn,.sh-page a.sh-capbtn:hover{color:#fff} /* thắng luật liên kết chung ".sh-page a" (màu chữ xanh) — nút nằm trên nền banner xanh */ .sh-capbtn:focus-visible,.sh-dot:focus-visible{outline:3px solid #A7F3E4;outline-offset:3px} .sh-bbtns .sh-btn{line-height:24px} /* ===== hết đợt U1a (khối hình banner) ===== */ /* ===== Đợt U1a (SH-24): chân trang như demo: logo + tên Doki, 3 cột chữ 14,5px; liên kết pháp lý gom MỘT dòng nhỏ ===== */ .sh-footbrand{display:flex;align-items:center;gap:10px;margin-bottom:4px} .sh-footbrand img{width:52px;height:51px;object-fit:contain} .sh-footlinks{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:12px;font-size:.8125rem;line-height:1.6} .sh-foot .sh-footlinks .foot-extra{display:contents} .sh-foot .sh-footlinks .foot-extra a{display:inline} .sh-footlinks .sh-linkbtn{font-size:inherit;line-height:inherit} @media (min-width:761px){.sh-footlinks{justify-content:flex-end}} /* máy tính: dòng liên kết nằm bên phải, tránh ô "0/10 xu" cố định ở góc trái dưới màn hình */ /* ===== hết đợt U1a (chân trang) ===== */ .sh-pcard.dim .sh-pimg .sh-tile-ph{filter:grayscale(.8) opacity(.75)} /* (U1a / SH-12) thẻ hết hàng hoặc đang bảo trì: khung ảnh xám + mờ như demo; nhãn và nút giữ nguyên */ .sh-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .sh-feat{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:0 6px 18px var(--card-shadow)} .sh-feat b{display:block;color:var(--ink);font-size:var(--fs-md);font-weight:700;line-height:19px} .sh-feat small{display:block;color:var(--muted);margin-top:2px;font-size:var(--fs-sm);line-height:18px} .sh-feat .sh-fi{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--soft-blue);flex:none} .sh-feat:nth-child(even) .sh-fi{background:var(--soft-teal)} .sh-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px} .sh-sechead h2{margin:0;font-family:'Baloo 2','Be Vietnam Pro',sans-serif;color:var(--ink);font-size:var(--fs-shsec);font-weight:800;line-height:1.6} .sh-more{white-space:nowrap;font-size:var(--fs-md);font-weight:600} .sh-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .sh-cat{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;border-radius:24px;padding:26px 16px;border:1.5px solid var(--line2);background:var(--surface);cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s;font-family:inherit;color:var(--ink)} .sh-cat:hover{transform:translateY(-4px);background:var(--soft-blue);box-shadow:0 16px 30px var(--card-shadow)} .sh-cat.t{border-color:#2DD4BF}.sh-cat.t:hover{background:var(--soft-teal)} .sh-cat .sh-ce{font-size:48px;line-height:1;min-height:64px;display:flex;align-items:center;justify-content:center} .sh-cat b{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-size:var(--fs-h3)} .sh-cat small{color:var(--muted);font-size:var(--fs-xs)} .sh-pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px} .sh-pcard{display:flex;flex-direction:column;background:var(--surface);border:1.5px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s;box-shadow:0 8px 22px var(--card-shadow)} .sh-pcard:hover{transform:translateY(-5px);border-color:#2A52D9;box-shadow:0 18px 34px var(--card-shadow)} .sh-pcard.t:hover{border-color:#0E7C86} .sh-pimg{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:clamp(64px,7vw,104px);border:0;width:100%;cursor:pointer;padding:0} .sh-pimg .sh-ph{position:absolute;left:10px;bottom:8px;color:var(--muted);background:var(--surface);border-radius:999px;padding:3px 9px;opacity:.9;font-family:'Be Vietnam Pro',sans-serif;font-size:var(--fs-xs);font-weight:600} .sh-tile-ph.fr .sh-img{width:78%;height:78%;object-fit:contain;transition:transform .35s ease;pointer-events:none} .sh-pcard:hover .sh-tile-ph.fr .sh-img{transform:scale(1.07) rotate(-2deg)} .sh-tag{position:absolute;top:12px;left:12px;border-radius:999px;padding:4px 10px;background:#2DD4BF;color:#053D3A;font-size:var(--fs-xs);font-weight:600;line-height:16px} .sh-tag.out{background:#5B6478;color:#fff} .sh-tag.sale{background:#F59E0B;color:#3B2400} .sh-pbody{display:flex;flex-direction:column;gap:8px;padding:16px 16px 18px;flex:1} .sh-pname{margin:0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;background:none;border:0;text-align:left;padding:0;font-family:inherit;font-size:var(--fs-lg);font-weight:700;line-height:1.35} .sh-pname.nm-s{font-size:var(--fs-md)}.sh-pname.nm-xs{font-size:var(--fs-sm)} .sh-pname:hover{color:var(--accent-ink)} .sh-pcard .sh-price{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;color:var(--accent-ink);font-weight:800;font-size:1.375rem;line-height:1.64} .sh-pcard .sh-price small{font-family:'Be Vietnam Pro',sans-serif;color:var(--muted);margin-right:4px;font-size:var(--fs-sm);font-weight:600} .sh-sizes{color:var(--muted);font-size:.84375rem;font-weight:600;line-height:18px} .sh-pbody .sh-btn{margin-top:auto;padding:12px 16px;width:100%;font-size:var(--fs-md);line-height:19px} .sh-note{background:var(--soft-teal);border:1px dashed #2DD4BF;color:var(--deep-ink);border-radius:14px;padding:12px 16px;font-size:var(--fs-sm);font-weight:600;line-height:1.55} .dark .sh-note{color:var(--ink)} .sh-foot{border-top:4px solid #2A52D9;background:var(--footer-bg);padding:40px 0 26px;margin-top:60px;color:var(--muted);font-size:.90625rem;line-height:1.7} .sh-foot b{color:var(--ink)} .sh-footgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px} .sh-ov{position:fixed;inset:0;z-index:100;background:rgba(15,27,61,.6);display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box} .sh-panel{background:var(--surface);color:var(--ink);border:1px solid var(--line2);border-radius:26px;max-width:960px;width:100%;max-height:calc(100vh - 40px);overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);position:relative;box-shadow:0 30px 80px rgba(0,0,0,.4)} .sh-panel .sh-pic{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-size:150px} .sh-pinfo{padding:30px 30px 28px;display:flex;flex-direction:column;gap:14px} .sh-pinfo h3{margin:0;font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-size:var(--fs-h2);font-weight:800;line-height:1.25} .sh-pinfo p{margin:0;color:var(--muted);font-size:var(--fs-md);line-height:1.65} .sh-lbl{color:var(--ink);margin-bottom:8px;font-size:var(--fs-sm);font-weight:600} .sh-opts{display:flex;flex-wrap:wrap;gap:8px} .sh-opt{border:1.5px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:12px;padding:9px 14px;cursor:pointer;font-family:inherit;transition:background .2s,border-color .2s,color .2s;font-size:var(--fs-md);font-weight:600;line-height:1.3} .sh-opt:hover{background:var(--soft-blue);border-color:#2A52D9} .sh-opt.on{background:#2A52D9;color:#fff;border-color:#2A52D9} .sh-opt small{display:block;opacity:.85;font-size:var(--fs-xs);font-weight:500} .sh-qty{display:inline-flex;align-items:center;border:1.5px solid var(--line2);border-radius:12px;overflow:hidden;background:var(--surface)} .sh-qty button{width:40px;height:40px;border:0;background:transparent;color:var(--accent-ink);cursor:pointer;font-size:var(--fs-h3);font-weight:700} .sh-qty button:hover{background:var(--soft-blue)} .sh-qty span{min-width:40px;text-align:center;font-size:var(--fs-md);font-weight:700} .sh-field{display:flex;flex-direction:column;gap:6px} .sh-field label{font-size:var(--fs-sm);font-weight:600} .sh-field input,.sh-field textarea{border:1.5px solid var(--line2);background:var(--bg);color:var(--ink);border-radius:12px;padding:12px 14px;outline:0;box-sizing:border-box;width:100%;font-family:'Be Vietnam Pro',sans-serif;font-size:var(--fs-lg);font-weight:500;line-height:1.3} .sh-field input:focus,.sh-field textarea:focus{border-color:#2A52D9} .sh-x{position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line2);background:var(--surface);color:var(--ink);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center} .sh-x:hover{background:var(--soft-blue)} .sh-drawer{position:fixed;top:0;right:0;bottom:0;z-index:110;width:min(440px,100vw);background:var(--surface);color:var(--ink);border-left:1px solid var(--line2);box-shadow:-20px 0 60px rgba(0,0,0,.35);display:flex;flex-direction:column} .sh-dhead{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)} .sh-dhead h3{margin:0;font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-size:var(--fs-h2);font-weight:800;line-height:1.25} .sh-dbody{flex:1;overflow:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px} .sh-dfoot{border-top:1px solid var(--line);padding:16px 22px 20px;display:flex;flex-direction:column;gap:12px} .sh-line{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:10px;background:var(--bg)} .sh-line .sh-th{width:72px;height:72px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:38px} .sh-line b{display:block;font-size:var(--fs-md);font-weight:700;line-height:1.3} .sh-line small{color:var(--muted);display:block;margin:2px 0 6px;font-size:var(--fs-xs)} .sh-line .sh-rm{border:0;background:transparent;color:var(--muted);cursor:pointer;text-decoration:underline;padding:0;font-family:inherit;font-size:var(--fs-sm);font-weight:600} .sh-line .sh-rm:hover{color:#E11D48} .sh-line .sh-qty button{width:30px;height:30px;font-size:var(--fs-lg)} .sh-line .sh-qty span{min-width:28px;font-size:var(--fs-sm)} .sh-sum{display:flex;justify-content:space-between;align-items:baseline;font-weight:700} .sh-sum b{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;color:var(--accent-ink);font-size:var(--fs-h2);font-weight:800} .sh-bank{border:1.5px dashed #2DD4BF;background:var(--soft-teal);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm)} .dark .sh-bank{color:var(--ink)} .sh-bank .sh-code{font-family:ui-monospace,Menlo,monospace;color:var(--deep-ink);letter-spacing:1px;font-size:var(--fs-xl);font-weight:800} .sh-qr{flex:none;width:170px;height:170px;border-radius:16px;border:1.5px solid var(--line2);background:repeating-conic-gradient(var(--ink) 0 25%,var(--surface) 0 50%) 0 0/22px 22px;opacity:.85;align-self:center;position:relative} .sh-qr::after{content:'QR VietQR';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#0B1220;background:rgba(255,255,255,.85);border-radius:16px;font-family:'Be Vietnam Pro',sans-serif;font-size:var(--fs-xs);font-weight:600} .sh-empty{text-align:center;color:var(--muted);padding:40px 10px;font-weight:600} @media (max-width:1200px){ .sh-pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .sh-feats,.sh-cats{grid-template-columns:repeat(2,minmax(0,1fr))} .sh-banner{grid-template-columns:minmax(0,1fr)} .sh-bart{order:-1} .sh-banner{text-align:center} .sh-banner p{margin-left:auto;margin-right:auto} .sh-bbtns{justify-content:center} .sh-stage{width:min(100%,380px)} .sh-brand img{width:46px;height:45px}.sh-brandtxt{font-size:34px} .sh-shoptag{display:none} .sh-footgrid{grid-template-columns:minmax(0,1fr)} } @media (max-width:760px){ .sh-hdrrow{flex-wrap:wrap;gap:10px 12px} .sh-search{order:5;flex:1 1 100%;max-width:none;height:46px} .sh-backlink span{display:none} .sh-hdrrow .sh-sp{flex:1} .sh-panel{grid-template-columns:minmax(0,1fr)} .sh-panel .sh-pic{aspect-ratio:16/10;font-size:100px} .sh-pinfo{padding:22px 20px} .sh-ov{padding:10px} } @media (max-width:600px){ .sh-pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .sh-pbody{padding:12px 12px 14px} .sh-pname{font-size:.90625rem}.sh-pname.nm-s,.sh-pname.nm-xs{font-size:var(--fs-sm)} .sh-pcard .sh-price{font-size:var(--fs-xl)} .sh-pbody .sh-btn{padding:11px 8px;font-size:var(--fs-sm)} .sh-feats{grid-template-columns:minmax(0,1fr)} .sh-cats{gap:12px} .sh-cat{padding:20px 10px} .sh-btn{padding:14px 14px} .sh-bbtns{flex-direction:column;align-items:stretch} .sh-bbtns .sh-btn{flex:none;width:100%;white-space:nowrap} } @media (prefers-reduced-motion:reduce){*{transition:none!important}} @media (prefers-reduced-motion:reduce){.sh-btn.hot,.sh-btn.hot::before,.sh-btn.hot::after,.sh-btn.hot .hs,.sh-btn.hot .sk{animation:none!important}.sh-btn.hot .sk{display:none}.sh-hs svg *{animation:none!important}.sh-hs .sv-spk{opacity:0}} .sh-search{min-width:200px} @media (max-width:1500px){.sh-shoptag{display:none}} @media (max-width:1100px){.sh-backlink span{display:none}} .sh-pricerow .sh-price{font-size:var(--fs-h2)} :root.dark .sh-toprow a:not([class]){color:#fff} /* ---- Đợt 4a: nhãn sản phẩm, lưới ảnh 1/2/3+, chữ do admin sửa ---- */ .sh-tags{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;z-index:1;max-width:calc(100% - 24px)} .sh-tags .sh-tag{position:static} .sh-tag.best{background:#1E3A9E;color:#fff} .dark .sh-tag.best{background:#A5C0FF;color:#0F1B3D} .sh-tag.low{background:#F59E0B;color:#3B2400} .sh-linkbtn{border:0;background:none;padding:0;color:var(--accent-ink);text-decoration:underline;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:600} .sh-gal{display:flex;flex-direction:column;min-width:0} .sh-gal .sh-pic{cursor:zoom-in;border:0;padding:0;width:100%} .sh-gal.n2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px;align-content:start;background:var(--line)} .sh-gal.n2 .sh-pic{aspect-ratio:3/4} .sh-gal.n1 .sh-pic{aspect-ratio:1/1} .sh-thumbs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin} .sh-thumb{flex:none} .sh-pic-zoom{position:absolute;right:10px;bottom:10px;border-radius:999px;padding:4px 10px;background:rgba(15,27,61,.72);color:#fff;font-size:var(--fs-xs);font-weight:600;pointer-events:none} .sh-stockline{color:var(--danger);font-size:var(--fs-sm);font-weight:600} @media (max-width:760px){.sh-gal.n1 .sh-pic{aspect-ratio:16/10}} /* Thay cho thuộc tính style="" trong shop.html: CSP không còn 'unsafe-inline' cho CSS (đợt 5, bảo mật) */ .u-sh-ico{color:var(--accent-ink);flex:none} #themeBtn{width:50px;height:50px} .sh-wrap.u-pt28{padding-top:28px} .sh-feats.u-mt22{margin-top:22px} .u-mt48{margin-top:48px} .sh-more.u-muted{color:var(--muted)} .u-brand-lobster{font-family:'Lobster',cursive;font-size:30px;font-weight:400;line-height:1.2;color:var(--accent-ink)} #shDrawerOv{justify-content:flex-end;padding:0;z-index:105} #shDrawerX{position:static} .sh-foot .u-brand-lobster{font-family:'Lobster',cursive;font-size:30px;font-weight:400;line-height:1.2;color:var(--accent-ink)} /* ---- Đợt A: biểu mẫu giao hàng, phí ship, giữ hàng + đếm ngược ---- */ .sh-sumbox{display:flex;flex-direction:column;gap:6px} .sh-sumrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--fs-md);font-weight:600;line-height:1.4} .sh-sumrow span{color:var(--muted)} .sh-sumrow b{color:var(--ink);font-weight:700} .sh-sumrow b.sh-free{color:var(--teal-ink)} .sh-hint{display:block;color:var(--muted);font-size:var(--fs-sm);font-weight:400;line-height:1.55} .sh-hint.ok{color:var(--teal-ink)} .sh-field small.sh-ferr{display:block;color:var(--danger);font-size:var(--fs-sm);font-weight:500;line-height:1.45} .sh-field small.sh-ferr[hidden]{display:none} .sh-field.bad input,.sh-field.bad textarea{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 7%,var(--bg))} .sh-field.off input{opacity:.55;cursor:not-allowed} .sh-field[hidden]{display:none} .sh-field input:disabled{background:var(--soft-blue)} .sh-chk{display:flex;align-items:center;gap:10px;font-size:var(--fs-md);font-weight:600;cursor:pointer;min-height:44px} .sh-chk input{width:20px;height:20px;accent-color:#2A52D9;flex:none;margin:0} .sh-hold{border:1.5px solid #2DD4BF;background:var(--soft-teal);border-radius:16px;padding:12px 16px;display:flex;flex-direction:column;gap:8px;transition:background .25s,border-color .25s} .sh-holdtop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:var(--fs-md);font-weight:600;line-height:1.4} .sh-holdt{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-size:var(--fs-h2);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--teal-ink)} .sh-bar{height:8px;border-radius:999px;background:rgba(15,27,61,.12);overflow:hidden} .dark .sh-bar{background:rgba(255,255,255,.16)} .sh-bar i{display:block;height:100%;width:100%;border-radius:999px;background:#0E7C86;transition:width .5s linear} .sh-hold.warn{border-color:#F59E0B;background:#FFF3D1} .sh-hold.warn .sh-holdt{color:#7A4A00} .sh-hold.warn .sh-bar i{background:#F59E0B} .dark .sh-hold.warn{background:#4A3308;border-color:#F59E0B} .dark .sh-hold.warn .sh-holdt{color:#FFE8B0} .sh-hold.over{border-color:var(--danger);background:#FDECEA} .sh-hold.over .sh-holdt{color:var(--danger)} .dark .sh-hold.over{background:#4A1F1C} .sh-holdmini{font-size:var(--fs-sm);font-weight:600;color:var(--teal-ink);line-height:1.5} .sh-holdmini b{font-variant-numeric:tabular-nums;font-weight:700} .sh-holdmini.warn{color:#7A4A00} .dark .sh-holdmini.warn{color:#FFE8B0} .sh-holdmini.over{color:var(--danger)} .sh-ord small.sh-cancelnote{color:var(--danger);font-size:var(--fs-sm);line-height:1.55} .sh-ord small{font-size:var(--fs-sm)} .sh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Đợt A: khách đã đăng nhập (ví + đơn hàng + giỏ) làm hàng đầu trang rộng quá ở 1280px (tràn 5px). Thu nhỏ khoảng cách và ô tìm kiếm ở cỡ này. */ @media (min-width:761px) and (max-width:1400px){.sh-hdrrow{gap:clamp(10px,1.4vw,18px)}.sh-search{min-width:140px}} /* ===== Mã giảm giá trong giỏ / thanh toán (đợt B) – cỡ chữ theo thang type.css ===== */ .sh-vch{display:flex;flex-direction:column;gap:8px;background:var(--soft-teal);border:1.5px dashed #2DD4BF;border-radius:16px;padding:12px 14px} .sh-vlab{font-size:var(--fs-sm);font-weight:600;line-height:1.4} .sh-vrow{display:flex;gap:8px;align-items:stretch} .sh-vrow input{flex:1 1 0;min-width:0;border:1.5px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:12px;padding:10px 12px;outline:0;font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-lg);font-weight:600;letter-spacing:.06em;text-transform:uppercase;box-sizing:border-box} .sh-vrow input::placeholder{letter-spacing:0;text-transform:none;font-family:'Be Vietnam Pro',sans-serif;font-weight:400} .sh-vrow input:focus{border-color:#2A52D9} .sh-vbtn{flex:none;width:auto;padding:0 18px;white-space:nowrap} .sh-vmsg{font-size:var(--fs-sm);font-weight:600;line-height:1.5} .sh-vmsg.ok{color:var(--teal-ink)} .sh-vmsg.bad{color:var(--danger)} .sh-vchip{display:flex;align-items:center;justify-content:space-between;gap:2px 10px;flex-wrap:wrap} .sh-vchip-t{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--fs-sm);line-height:1.45;overflow-wrap:anywhere} .sh-vchip-t b{font-size:var(--fs-lg);font-weight:700;letter-spacing:.04em} .sh-vchip .sh-rm{border:0;background:transparent;color:var(--muted);cursor:pointer;text-decoration:underline;padding:4px 0;min-height:32px;font-family:inherit;font-size:var(--fs-sm);font-weight:600} .sh-vchip .sh-rm:hover{color:#E11D48} .sh-sumrow b.sh-disc{color:var(--teal-ink)} /* ===== Đợt C: sắp xếp, bảo trì, danh mục động – cỡ chữ theo thang type.css ===== */ .sh-sechead{flex-wrap:wrap} .sh-sechead-r{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap} .sh-sort{display:flex;align-items:center;gap:8px;font-size:var(--fs-md);font-weight:600;color:var(--muted)} .sh-sort[hidden]{display:none} .sh-sort select{border:1.5px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:999px;padding:9px 34px 9px 16px;font-family:inherit;font-size:var(--fs-md);font-weight:600;min-height:44px;cursor:pointer;max-width:100%} .sh-sort select:focus-visible{outline:2px solid #2A52D9;outline-offset:2px} .sh-chip.maint{border-style:dashed} .sh-cat.maint{border-style:dashed;opacity:.9} .sh-cat small{font-size:var(--fs-sm);line-height:18px} .sh-tag.maint{background:#FDEBC8;color:#6B3F00} .dark .sh-tag.maint{background:#5A3C0A;color:#FFE8B0} .sh-maintline{font-size:var(--fs-sm);line-height:1.45;color:#6B3F00;background:#FFF4DC;border-radius:10px;padding:6px 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .dark .sh-maintline{background:#3D2B08;color:#FFE8B0} .sh-maintbar,.sh-maintbox{background:#FFF4DC;color:#6B3F00;border:1.5px dashed #F59E0B;border-radius:14px;padding:12px 16px;font-size:var(--fs-md);font-weight:600;line-height:1.55} .sh-maintbar[hidden]{display:none} .sh-maintbar{margin-bottom:18px} .sh-maintbox{display:flex;flex-direction:column;gap:2px} .sh-maintbox span{font-weight:500} .dark .sh-maintbar,.dark .sh-maintbox{background:#3D2B08;color:#FFE8B0;border-color:#B7791F} .sh-line.maint{background:#FFF4DC;border-radius:14px} .dark .sh-line.maint{background:#3D2B08} small.sh-maintnote{display:block;color:#6B3F00;font-size:var(--fs-sm);line-height:1.5;font-weight:600} .dark small.sh-maintnote{color:#FFE8B0} .sh-btn[aria-disabled="true"]{cursor:not-allowed} /* ===== Đợt D: trả chia đôi ví + ngân hàng ===== */ .sh-walletbox{background:var(--bg);border-style:solid;border-color:var(--line2)} .sh-bankhd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:var(--fs-md)} .sh-balnum{color:var(--accent-ink)} .sh-walletrow{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap} .sh-walletrow .sh-btn{padding:12px 16px} .sh-walletrow .sh-grow{flex:1 1 180px} .sh-or{text-align:center;font-weight:600;color:var(--muted);font-size:var(--fs-md)} .sh-held{border:2px solid var(--accent-ink);background:var(--soft-blue);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px} .sh-heldt{font-size:var(--fs-lg);line-height:1.4} .sh-relbtn{padding:11px 14px;font-size:var(--fs-sm)} /* Đợt N: ví vừa nhận tiền mà đơn chưa tự trả (chuyển khoản thiếu / vừa nạp ví) → nhắc bấm "Trả từ ví". Chữ ≥ 14px theo thang type.css. */ .sh-recv{display:flex;flex-direction:column;gap:8px;border:1.5px solid #F59E0B;background:#FFF3D1;color:#4A2E00;border-radius:16px;padding:12px 16px;font-size:var(--fs-md);line-height:1.55} .dark .sh-recv{background:#4A3308;color:#FFE8B0} .sh-recv.ok{border-color:#2DD4BF;background:var(--soft-teal);color:var(--ink)} .sh-recv.ok.warn{border-color:#F59E0B;background:#FFF3D1;color:#4A2E00} .dark .sh-recv.ok.warn{background:#4A3308;color:#FFE8B0} .sh-recv.over{border-color:var(--danger)} .sh-recvt{font-size:var(--fs-lg);font-weight:700;line-height:1.35} .sh-recvm{font-size:var(--fs-md);font-weight:500;line-height:1.55} .sh-recvh{font-size:var(--fs-sm);font-weight:500;line-height:1.55} .sh-recvh b{font-variant-numeric:tabular-nums;font-weight:700} .sh-recv .sh-recvgo{width:100%;margin-top:2px} .sh-split{border:1.5px solid var(--line2);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:10px;background:var(--bg)} .sh-splittg{width:100%;justify-content:flex-start;text-align:left;padding:13px 14px;font-size:var(--fs-md)} .sh-splitrow{display:flex;gap:10px;flex-wrap:wrap} .sh-splitrow input{flex:1 1 140px;min-width:0} .sh-splitrow .sh-btn{padding:12px 16px;font-size:var(--fs-sm)} .sh-splitres{display:flex;flex-direction:column;gap:4px} .sh-splitres:empty{display:none} /* ---------- Đợt J: Xu Doki / lời chào / nền theo dịp trên /shop ---------- */ /* Lớp hình Xu bay nằm TRONG .sh-page (z-index 5): dưới thanh đầu trang (40), ngăn giỏ hàng (110) và mọi lớp phủ (100+). Thẻ sản phẩm, nút, ô nhóm, ô sắp xếp nằm TRÊN lớp này (z-index 6) nên hình bay không bao giờ chắn nút Mua / giỏ hàng. */ .sh-page .sh-pcard,.sh-page .sh-btn,.sh-page .sh-cat,.sh-page .sh-feat,.sh-page .sh-sort{position:relative;z-index:6} /* Hộp xu cố định ở góc dưới trái: chỉ huy hiệu và bảng chi tiết nhận cú chạm; khung và bong bóng gợi ý cho cú chạm "xuyên qua" để không chặn nút Mua / nút trong banner nằm ngay dưới */ .sh-page~.xubox{pointer-events:none} .sh-page~.xubox .xubadge,.sh-page~.xubox .xupnl{pointer-events:auto} /* Điện thoại: huy hiệu xu góc dưới trái chỉ còn đồng xu tròn (chữ "x/10 xu" nằm trong bảng chi tiết khi chạm) để không che nút Mua của thẻ sản phẩm */ @media (max-width:600px){ .sh-page~.xubox .xuhint{display:none} /* bong bóng "Bấm vào hình đang bay" đè lên nút banner ở màn hình nhỏ: bỏ; đồng xu và hình bay đã đủ gợi ý */ .sh-page~.xubox .xubadge{width:46px;height:46px;padding:0;justify-content:center;border-radius:50%} .sh-page~.xubox .xubadge b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} } /* ---------- Đợt K: một cách thanh toán đang bảo trì (ví / QR / chia đôi) ---------- */ .sh-paymaint{display:flex;flex-direction:column;gap:4px;background:#FFF4DC;color:#6B3F00;border:1.5px dashed #F59E0B;border-radius:14px;padding:12px 16px;font-size:var(--fs-sm);font-weight:600;line-height:1.55} .sh-paymaint span{font-weight:500} .dark .sh-paymaint{background:#3D2B08;color:#FFE8B0;border-color:#B7791F} /* ---------- Đợt M: banner trình chiếu, nhãn Hot, chân trang sửa được ---------- */ .sh-slides{position:relative;border-radius:28px;overflow:hidden;background:#0F1B3D;aspect-ratio:21/8;margin-bottom:22px;box-shadow:0 12px 32px var(--card-shadow)} .sh-slides[hidden]{display:none} .sh-sl-view{position:absolute;inset:0} .sh-sl{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s} .sh-sl.on{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s} .sh-sl.noimg{background:linear-gradient(120deg,#2A52D9 0%,#1E3A9E 55%,#0E7C86 100%)} .sh-sl-in{display:block;position:absolute;inset:0;color:#fff;text-decoration:none} .sh-sl-in:focus-visible{outline:3px solid #A7F3E4;outline-offset:-6px} .sh-sl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sh-sl-cap{position:absolute;left:0;right:0;bottom:0;padding:72px clamp(64px,8vw,96px) 54px;background:linear-gradient(to top,rgba(8,16,40,.86),rgba(8,16,40,.5) 62%,rgba(8,16,40,0))} .sh-sl.noimg .sh-sl-cap{background:none;top:0;display:flex;flex-direction:column;justify-content:center;padding-top:20px} .sh-sl-t{margin:0;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4);font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-size:var(--fs-h2);font-weight:800;line-height:1.2;max-width:760px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sh-sl-d{margin:8px 0 0;max-width:640px;color:#EEF3FF;text-shadow:0 1px 8px rgba(0,0,0,.4);font-size:var(--fs-md);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sh-sl-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:rgba(10,20,50,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;padding:0} .sh-sl-nav.prev{left:12px}.sh-sl-nav.next{right:12px} .sh-sl-nav:hover{background:rgba(10,20,50,.85)} .sh-sl-nav:focus-visible,.sh-sl-dot:focus-visible,.sh-sl-pause:focus-visible{outline:3px solid #A7F3E4;outline-offset:2px} .sh-sl-bar{position:absolute;left:0;right:0;bottom:8px;display:flex;align-items:center;justify-content:center;gap:6px;z-index:2;pointer-events:none} .sh-sl-bar>*{pointer-events:auto} .sh-sl-dots{display:flex;align-items:center;gap:0} .sh-sl-dot{width:32px;height:32px;border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer} .sh-sl-dotc{display:block;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);border:1.5px solid rgba(255,255,255,.9);transition:width .25s,background .25s} .sh-sl-dot.on .sh-sl-dotc{width:26px;border-radius:999px;background:#fff} .sh-sl-pause{width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(10,20,50,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0} .sh-sl-pause[hidden]{display:none} .sh-sl-pi{display:block;width:11px;height:12px;border-left:4px solid currentColor;border-right:4px solid currentColor;box-sizing:border-box} .sh-sl-pause.is-paused .sh-sl-pi{width:0;height:0;border-left:11px solid currentColor;border-right:0;border-top:6.5px solid transparent;border-bottom:6.5px solid transparent} @media (max-width:760px){ .sh-slides{aspect-ratio:16/11;border-radius:20px} .sh-sl-cap{padding:48px 18px 50px} .sh-sl-nav{width:40px;height:40px;top:42%} .sh-sl-nav.prev{left:8px}.sh-sl-nav.next{right:8px} } @media (prefers-reduced-motion:reduce){.sh-sl,.sh-sl.on,.sh-sl-dotc{transition:none!important}} .sh-tag.hot{background:#FFE2C2;color:#7A2E00;border:1px solid #F59E0B} .dark .sh-tag.hot{background:#5A2A0A;color:#FFD9B8;border-color:#B45309} .sh-footdesc{display:block;margin-top:4px} .sh-footdesc[hidden]{display:none} .sh-footcod{display:block;margin-top:6px} /* dòng tự động "tiền mặt khi nhận hàng (COD)" dưới chữ Thanh Toán (shop.js renderPayFoot) */ .sh-footcod[hidden]{display:none} .sh-foot .foot-extra{display:contents} .sh-foot .foot-extra[hidden]{display:none} .sh-foot .foot-extra a{display:block} /* ---------- Giữ chỗ khi tải lần đầu (đợt T4: giảm xê dịch bố cục) ---------- */ /* Khung xương ô nhóm: có sẵn trong shop.html để khu "Chọn Theo Nhóm" đúng chỗ ngay từ lần vẽ đầu; shop.js (renderTiles) xóa hết khi dữ liệu về. Cùng thẻ