/* ============================================================
   🛍️ CỬA HÀNG & 🎒 TÚI ĐỒ — GIAO DIỆN MỚI (v20)
   - Thẻ vật phẩm dạng lưới: sân khấu preview tròn · tên · giá · nút
   - Thanh số dư xu / kim cương, tab dạng viên thuốc, ô mã giảm giá gọn
   - Dùng chung cấu trúc .shop-item nên KHÔNG cần sửa JS render.
   - Theme Halloween giữ nguyên màu riêng (halloween.css) — file này chỉ
     bổ sung bố cục lưới cho Túi đồ trong theme đó.
   ============================================================ */

/* ---------- Tiêu đề + nút đóng ---------- */
#modal-shop .modal-title, #modal-bag .modal-title{
  font-family:'Baloo 2','Inter',sans-serif; font-size:22px; font-weight:800; letter-spacing:.2px; margin-bottom:14px;
}
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .close-x{
  background:var(--panel-strong); border-radius:50%; font-size:15px; width:32px; height:32px;
  transition:background .15s, transform .15s;
}
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .close-x:active{ transform:scale(.9); }

/* Banner Halloween chỉ hiện khi theme bật (halloween.css không được nạp khi tắt theme) */
.shop-hw-hero{ display:none; }

/* ---------- Thanh số dư (mọi theme; Halloween giữ kiểu riêng) ---------- */
body:not(.halloween-theme) #modal-shop .shop-balance{
  display:flex; gap:10px; margin:0 0 14px; position:relative;
}
body:not(.halloween-theme) #modal-shop .sb-col{
  flex:1; min-width:0; padding:11px 14px; border-radius:18px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#fff8e3,#ffe7b0); border:1px solid #ffd77a99;
  box-shadow:0 8px 18px -12px #e0a21a88;
}
body:not(.halloween-theme) #modal-shop .sb-col + .sb-col{
  background:linear-gradient(135deg,#e9fbff,#cdeefc); border-color:#8fd6f099; box-shadow:0 8px 18px -12px #1aa6d488;
}
body:not(.halloween-theme) #modal-shop .sb-col::after{
  content:''; position:absolute; right:-18px; top:-18px; width:64px; height:64px; border-radius:50%;
  background:radial-gradient(circle,#ffffffaa,transparent 70%); pointer-events:none;
}
body:not(.halloween-theme) #modal-shop .sb-lbl{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8a6a1f; }
body:not(.halloween-theme) #modal-shop .sb-col + .sb-col .sb-lbl{ color:#1b6f8c; }
body:not(.halloween-theme) #modal-shop .sb-val{ font-size:22px; color:#2c2100; margin-top:2px; }
body:not(.halloween-theme) #modal-shop .sb-col + .sb-col .sb-val{ color:#06364a; }
body:not(.halloween-theme) #modal-shop .sb-deco{ display:none; }

/* ---------- Tab danh mục ---------- */
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .shop-tabs{ gap:8px; padding:4px 16px 12px 2px; margin-bottom:6px; }
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .shop-tabs .tab-btn{
  background:#fff; border:1px solid var(--line); color:var(--text-dim);
  padding:8px 14px; font-size:12.5px; font-weight:700; box-shadow:0 2px 6px -4px rgba(43,31,69,.25);
}
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .shop-tabs .tab-btn.active{
  background:linear-gradient(135deg,var(--magenta),#c026d3); color:#fff; border-color:transparent;
  box-shadow:0 8px 18px -8px #ff2e9aaa;
}
body:not(.halloween-theme) #modal-shop .shop-tabs .tab-btn[data-shoptab="flashsale"]:not(.active){ color:#d9480f; border-color:#ffb98a; background:#fff6ef; }
body:not(.halloween-theme) #modal-shop .shop-tabs .tab-btn[data-shoptab="event"]:not(.active){ color:#7c3aed; border-color:#cdb6fb; background:#f7f2ff; }

/* ---------- Mã giảm giá ---------- */
body:not(.halloween-theme) #modal-shop .shop-coupon-row{ gap:8px; margin-bottom:10px; }
body:not(.halloween-theme) #modal-shop .shop-coupon-row input{
  background:#fff; border:1.5px dashed #d9c8f5; border-radius:14px; padding:10px 14px; font-size:13px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
body:not(.halloween-theme) #modal-shop .shop-coupon-row input:focus{ border-style:solid; border-color:var(--magenta); box-shadow:0 0 0 3px #ff2e9a22; }
body:not(.halloween-theme) #modal-shop .shop-coupon-row .btn-mini{ border-radius:14px; padding:10px 16px; }
#modal-shop .shop-coupon-status{ border-radius:12px; }

/* ---------- Banner Túi đồ ---------- */
.bag-hero{
  display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:12px 14px; border-radius:20px; position:relative; overflow:hidden;
  background:
    radial-gradient(120px 90px at 100% 0, #ffffff55, transparent 70%),
    linear-gradient(135deg,#7c3aed,#c026d3 60%,#ff5f9a);
  color:#fff; box-shadow:0 14px 26px -16px #7c3aedcc;
}
.bag-hero-ic{
  width:46px; height:46px; border-radius:15px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:26px;
  background:#ffffff2e; border:1px solid #ffffff55; backdrop-filter:blur(4px);
}
.bag-hero-text{ flex:1; min-width:0; }
.bag-hero-title{ font-family:'Baloo 2','Inter',sans-serif; font-size:17px; font-weight:800; line-height:1.15; }
.bag-hero-sub{ font-size:11.5px; opacity:.88; margin-top:2px; line-height:1.35; }
.bag-hero-btn{
  flex:0 0 auto; padding:8px 12px; border-radius:999px; font-size:12px; font-weight:800; white-space:nowrap;
  background:#fff; color:#7c1fb8; box-shadow:0 4px 10px -4px #0004; transition:transform .12s;
}
.bag-hero-btn:active{ transform:scale(.94); }
@media (max-width:360px){ .bag-hero-sub{ display:none; } }

/* ---------- Lưới thẻ vật phẩm ---------- */
:is(#modal-shop [id^="shop-"][id$="-list"]:not(#shop-market-list), #modal-shop .event-block, #modal-bag [id^="bag-"][id$="-list"]):not(.hidden){
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:stretch;
}
@media (min-width:460px){
  :is(#modal-shop [id^="shop-"][id$="-list"]:not(#shop-market-list), #modal-shop .event-block, #modal-bag [id^="bag-"][id$="-list"]):not(.hidden){
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:330px){
  :is(#modal-shop [id^="shop-"][id$="-list"]:not(#shop-market-list), #modal-shop .event-block, #modal-bag [id^="bag-"][id$="-list"]):not(.hidden){
    grid-template-columns:1fr;
  }
}
/* Phần tử không phải thẻ (ghi chú, hint trống, banner sự kiện) chiếm cả hàng */
:is(#modal-shop [id^="shop-"][id$="-list"]:not(#shop-market-list), #modal-shop .event-block, #modal-bag [id^="bag-"][id$="-list"]) > :not(.shop-item):not(.event-block){
  grid-column:1 / -1;
}
#modal-shop .event-block > .event-banner{ margin-bottom:0; }
#modal-shop #shop-event-list:not(.hidden){ display:block; }
#modal-shop #shop-event-list .event-block{ margin-bottom:18px; }

/* ---------- Thẻ vật phẩm (cấu trúc) ---------- */
:is(#modal-shop [id^="shop-"][id$="-list"]:not(#shop-market-list), #modal-shop .event-block, #modal-bag [id^="bag-"][id$="-list"]) > .shop-item{
  position:relative; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:8px;
  margin:0; padding:14px 10px 12px; text-align:center; border-radius:20px; min-width:0;
}
:is(#modal-shop [id^="shop-"][id$="-list"]:not(#shop-market-list), #modal-shop .event-block, #modal-bag [id^="bag-"][id$="-list"]) > .shop-item .si-preview{
  width:78px; height:78px; margin:8px auto 4px; border-radius:50%; overflow:visible; font-size:34px; z-index:1;
}
:is(#modal-shop [id^="shop-"][id$="-list"]:not(#shop-market-list), #modal-shop .event-block, #modal-bag [id^="bag-"][id$="-list"]) > .shop-item .si-info{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; z-index:1;
}
:is(#modal-shop [id^="shop-"][id$="-list"]:not(#shop-market-list), #modal-shop .event-block, #modal-bag [id^="bag-"][id$="-list"]) > .shop-item .si-name{
  font-size:13px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word;
}
:is(#modal-shop [id^="shop-"][id$="-list"]:not(#shop-market-list), #modal-shop .event-block, #modal-bag [id^="bag-"][id$="-list"]) > .shop-item .si-name .si-badge{
  margin:4px 0 0; display:inline-flex;
}
:is(#modal-shop [id^="shop-"][id$="-list"]:not(#shop-market-list), #modal-shop .event-block, #modal-bag [id^="bag-"][id$="-list"]) > .shop-item .si-btn{
  width:100%; padding:10px 8px; border-radius:999px; font-size:13px; z-index:1;
}
/* Huy hiệu thời hạn: góc trên-trái thẻ */
:is(#modal-shop,#modal-bag) .shop-item .si-duration-badge,
:is(#modal-shop,#modal-bag) .shop-item .si-expiry-badge{
  position:absolute; top:-8px; left:-4px; bottom:auto; right:auto; height:20px; padding:0 9px; font-size:10.5px; border-radius:999px;
  display:inline-flex; align-items:center; gap:3px;
}

/* ---------- Thẻ vật phẩm (màu sắc) — chỉ theme sáng ---------- */
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .shop-item{
  background:#fff; border:1px solid rgba(43,31,69,.10);
  box-shadow:0 10px 22px -16px rgba(43,31,69,.35);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Sân khấu preview: dải gradient mềm phía trên thẻ */
body:not(.halloween-theme) :is(#modal-shop [id^="shop-"][id$="-list"]:not(#shop-market-list), #modal-shop .event-block, #modal-bag [id^="bag-"][id$="-list"]) > .shop-item{
  overflow:visible;
}
body:not(.halloween-theme) :is(#modal-shop [id^="shop-"][id$="-list"]:not(#shop-market-list), #modal-shop .event-block, #modal-bag [id^="bag-"][id$="-list"]) > .shop-item::before{
  content:''; position:absolute; left:0; right:0; top:0; height:112px; border-radius:20px 20px 40% 40% / 20px 20px 22px 22px;
  background:
    radial-gradient(circle at 50% 62%, #ffffffcc 0 34px, transparent 35px),
    linear-gradient(180deg,#fff0f8,#f1e9ff);
  pointer-events:none; z-index:0;
}
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .shop-item .si-preview{
  background:#fff; box-shadow:0 6px 16px -8px rgba(124,58,237,.45), 0 0 0 4px #ffffffb0;
}
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .shop-item .si-name{ color:var(--text); font-weight:800; }
body:not(.halloween-theme) #modal-shop .shop-item .si-price{
  font-family:'Baloo 2','Inter',sans-serif; font-size:16px; font-weight:800; color:#b86400; margin-top:auto; padding-top:2px;
}
body:not(.halloween-theme) #modal-shop .shop-item .si-price .si-price-old{ display:block; font-size:11px; font-weight:600; margin:0; }
body:not(.halloween-theme) #modal-shop .shop-item .si-price .si-price-new{ color:var(--danger); }
body:not(.halloween-theme) #modal-bag .shop-item .si-price{
  display:inline-flex; align-items:center; font-size:11px; font-weight:700; color:var(--text-dim);
  background:var(--panel-strong); border-radius:999px; padding:3px 9px; margin-top:auto;
}

/* Nút */
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .si-btn{ transition:transform .12s, box-shadow .12s, filter .12s; }
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .si-btn:not(:disabled):active{ transform:scale(.96); }
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .si-btn.buy{
  background:linear-gradient(90deg,#ff7a45,#ff2e9a); color:#fff; box-shadow:0 8px 16px -8px #ff2e9acc;
}
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .si-btn.equip{
  background:#fff; color:#7c1fb8; border:1.5px solid #cdb6fb;
}
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .si-btn.equipped{
  background:linear-gradient(135deg,#19c37d,#0e9f6e); color:#fff; box-shadow:0 8px 16px -10px #0e9f6e;
  opacity:1;
}
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .si-btn.equipped::before{ content:'✓ '; }
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .si-btn:disabled:not(.equipped){ opacity:.5; }

/* Đang dùng: viền xanh + bóng nhẹ (trình duyệt hỗ trợ :has) */
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .shop-item:has(.si-btn.equipped){
  border-color:#19c37d88; box-shadow:0 0 0 2px #19c37d33, 0 12px 24px -16px #0e9f6e;
}

/* Hover / vào trang */
@media (hover:hover){
  body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .shop-item:hover{
    transform:translateY(-3px); box-shadow:0 18px 30px -16px rgba(124,58,237,.5); border-color:#d9c8f5;
  }
}
@keyframes shopCardIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
:is(#modal-shop,#modal-bag) [id$="-list"] > .shop-item{ animation:shopCardIn .32s cubic-bezier(.2,.8,.2,1) both; }
:is(#modal-shop,#modal-bag) [id$="-list"] > .shop-item:nth-child(2){ animation-delay:.03s; }
:is(#modal-shop,#modal-bag) [id$="-list"] > .shop-item:nth-child(3){ animation-delay:.06s; }
:is(#modal-shop,#modal-bag) [id$="-list"] > .shop-item:nth-child(4){ animation-delay:.09s; }
:is(#modal-shop,#modal-bag) [id$="-list"] > .shop-item:nth-child(5){ animation-delay:.12s; }
:is(#modal-shop,#modal-bag) [id$="-list"] > .shop-item:nth-child(6){ animation-delay:.15s; }
:is(#modal-shop,#modal-bag) [id$="-list"] > .shop-item:nth-child(n+7){ animation-delay:.18s; }
@media (prefers-reduced-motion:reduce){
  :is(#modal-shop,#modal-bag) [id$="-list"] > .shop-item{ animation:none; }
  body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .shop-item:hover{ transform:none; }
}

/* ---------- Trạng thái trống + ghi chú ---------- */
:is(#modal-shop,#modal-bag) .empty-hint,
#modal-shop .flashsale-empty, #modal-shop .event-empty, #modal-shop .market-empty{
  border:1.5px dashed rgba(124,58,237,.25); border-radius:18px; background:rgba(124,58,237,.04);
  padding:28px 16px; margin:4px 0;
}

/* ---------- Chợ trao đổi: giữ dạng hàng ngang nhưng đẹp hơn ---------- */
body:not(.halloween-theme) #modal-shop #shop-market-list .shop-item,
body:not(.halloween-theme) #modal-shop .market-listing{
  background:#fff; border:1px solid rgba(43,31,69,.10); border-radius:18px; padding:10px 12px;
  box-shadow:0 8px 18px -14px rgba(43,31,69,.35);
}
body:not(.halloween-theme) #modal-shop #shop-market-list .si-preview{
  background:linear-gradient(180deg,#fff0f8,#f1e9ff); width:50px; height:50px; font-size:24px;
}
body:not(.halloween-theme) #modal-shop #shop-market-list .si-btn.buy{
  background:linear-gradient(90deg,#ff7a45,#ff2e9a); color:#fff; border-radius:999px; padding:9px 16px;
}
#modal-shop .market-mine-section-title{ font-weight:800; font-size:13px; margin:14px 0 8px; }
body:not(.halloween-theme) #modal-shop .market-subtabs .tab-btn{ flex:1; justify-content:center; text-align:center; }
body:not(.halloween-theme) #modal-shop .market-filter-row .mf-chip{ background:#fff; }

/* ---------- Xác minh ---------- */
body:not(.halloween-theme) #modal-shop .verified-card{
  border-radius:20px; background:linear-gradient(135deg,#ecfdf5,#d9f7ea); border:1px solid #9be3c4;
}

/* ============================================================
   🎃 THEME HALLOWEEN — nền tối cho Cửa hàng / Túi đồ + thẻ vuông vức đúng tỉ lệ
   (trước đây khung sheet trắng nhưng thẻ tối nên chữ tên vật phẩm bị chìm, và
   preview kéo giãn full-width làm vòng khung avatar thành hình elip).
   ============================================================ */
body.halloween-theme :is(#modal-shop,#modal-bag) .modal-sheet{
  background:
    radial-gradient(260px 160px at 100% 0, #ff7a1a22, transparent 70%),
    linear-gradient(180deg,#261340,#170b29);
  border:1px solid #ff8a2a44; box-shadow:0 -24px 60px -24px #000c;
  --text:#f6ecff; --text-dim:#c4b0e0; --text-faint:#9a87bb;
  --line:rgba(255,140,40,.22); --panel:rgba(255,160,60,.08); --panel-strong:rgba(255,160,60,.14);
  color:var(--text);
}
body.halloween-theme :is(#modal-shop,#modal-bag) .modal-title{ color:#fff4e0; }
body.halloween-theme :is(#modal-shop,#modal-bag) .close-x{ background:#ffffff14; border-radius:50%; color:#f6ecff; }
body.halloween-theme :is(#modal-shop,#modal-bag) .shop-item .si-name{ color:#fff4e0; font-weight:800; }
body.halloween-theme :is(#modal-shop,#modal-bag) [id$="-list"] > .shop-item > .si-preview{
  position:relative; width:78px; height:78px; margin:6px auto 2px; border-radius:50%;
}
body.halloween-theme #modal-bag .shop-item .si-price{
  display:inline-flex; font-size:11px; font-weight:700; color:#d9c6ff; background:#ffffff14; border-radius:999px; padding:3px 9px; margin-top:auto;
}
body.halloween-theme #modal-bag .shop-item{ background:linear-gradient(180deg,#2d184d,#201039); border:1px solid #ff8a2a44; }
body.halloween-theme :is(#modal-shop,#modal-bag) .shop-item:has(.si-btn.equipped){
  border-color:#8bff5a88; box-shadow:0 0 0 2px #8bff5a2e, 0 12px 24px -16px #8bff5a;
}
body.halloween-theme :is(#modal-shop,#modal-bag) .si-btn.equipped::before{ content:'✓ '; }
body.halloween-theme #modal-bag .si-btn.buy{ background:linear-gradient(90deg,#ff7a1a,#e0239b); color:#fff; }
body.halloween-theme .bag-hero{
  background:radial-gradient(120px 90px at 100% 0, #ffcf5a40, transparent 70%), linear-gradient(135deg,#4a1f8a,#2a1250);
  border:1px solid #ff8a2a66; box-shadow:0 14px 26px -16px #000;
}
body.halloween-theme .bag-hero-btn{ background:linear-gradient(180deg,#ffb347,#ff7a1a); color:#2a1000; }
body.halloween-theme :is(#modal-shop,#modal-bag) .empty-hint,
body.halloween-theme #modal-shop .event-empty, body.halloween-theme #modal-shop .market-empty, body.halloween-theme #modal-shop .flashsale-empty{
  border-color:#ff8a2a55; background:#ffffff0a; color:#c9b4e8;
}
/* Vòng khung avatar nằm lệch ra ngoài preview (inset:-6px) nên không được bị max-width:100% bóp lại */
:is(#modal-shop,#modal-bag) .si-preview > .frame-ring{ max-width:none !important; }
body.halloween-theme :is(#modal-shop,#modal-bag) .shop-item .si-duration-badge,
body.halloween-theme :is(#modal-shop,#modal-bag) .shop-item .si-expiry-badge{ top:-10px; left:-10px; }

/* ============================================================
   ✨ NÂNG CẤP v20.1 — banner, tab dính, ánh sáng, hiệu ứng nút
   ============================================================ */

/* Banner Cửa hàng (theme sáng; Halloween có banner riêng) */
.shop-hero{ display:none; }
body:not(.halloween-theme) #modal-shop .shop-hero{
  display:flex; align-items:center; gap:10px; position:relative; overflow:hidden;
  margin:0 0 14px; padding:14px 16px; border-radius:22px; color:#fff;
  background:
    radial-gradient(140px 110px at 100% 0, #ffe27a66, transparent 70%),
    radial-gradient(120px 90px at 0 100%, #22d3ee55, transparent 70%),
    linear-gradient(135deg,#ff2e9a,#c026d3 55%,#7c3aed);
  box-shadow:0 18px 30px -18px #c026d3cc;
}
.shop-hero-text{ flex:1; min-width:0; position:relative; z-index:1; }
.shop-hero-title{ font-family:'Baloo 2','Inter',sans-serif; font-size:18px; font-weight:800; line-height:1.15; }
.shop-hero-sub{ font-size:11.5px; opacity:.9; margin-top:3px; line-height:1.35; }
.shop-hero-art{ position:relative; width:74px; height:60px; flex:0 0 auto; }
.shop-hero-art span{ position:absolute; right:6px; top:6px; font-size:44px; filter:drop-shadow(0 6px 8px #0004); animation:shopFloat 3.2s ease-in-out infinite; }
.shop-hero-art i{ position:absolute; font-style:normal; font-size:15px; opacity:.9; animation:shopTwinkle 2.4s ease-in-out infinite; }
.shop-hero-art i:nth-child(2){ left:2px; top:4px; }
.shop-hero-art i:nth-child(3){ left:10px; bottom:0; animation-delay:.6s; }
.shop-hero-art i:nth-child(4){ right:0; bottom:-2px; animation-delay:1.2s; }
@keyframes shopFloat{ 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-5px) rotate(4deg); } }
@keyframes shopTwinkle{ 0%,100%{ opacity:.25; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); } }
@media (max-width:340px){ .shop-hero-art{ display:none; } }

/* Tiêu đề + tab dính trên cùng khi cuộn */
:is(#modal-shop,#modal-bag) .modal-title{
  position:sticky; top:-22px; z-index:6; margin:-22px -20px 12px; padding:20px 20px 10px;
  background:#fff;
}
body.halloween-theme :is(#modal-shop,#modal-bag) .modal-title{ background:#261340; }
:is(#modal-shop,#modal-bag) .shop-tabs{
  position:sticky; top:40px; z-index:5; background:#fff; margin-left:-20px; margin-right:-20px !important; padding-left:20px !important; padding-right:20px !important;
  box-shadow:0 10px 12px -12px rgba(43,31,69,.28);
}
body.halloween-theme :is(#modal-shop,#modal-bag) .shop-tabs{ background:#261340; box-shadow:0 10px 12px -12px #000; }

/* Sân khấu preview: chấm bi + vầng sáng + nhịp thở */
body:not(.halloween-theme) :is(#modal-shop [id^="shop-"][id$="-list"]:not(#shop-market-list), #modal-shop .event-block, #modal-bag [id^="bag-"][id$="-list"]) > .shop-item::before{
  background:
    radial-gradient(circle at 50% 58%, #ffffffe6 0 38px, #ffffff00 56px),
    radial-gradient(#d9b8ff55 1.2px, transparent 1.6px) 0 0 / 12px 12px,
    linear-gradient(180deg,#fff0f8,#efe6ff);
}
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .shop-item .si-preview{ transition:transform .25s cubic-bezier(.2,.8,.2,1); }
@media (hover:hover){
  :is(#modal-shop,#modal-bag) .shop-item:hover .si-preview{ transform:scale(1.07) rotate(-2deg); }
}
body.halloween-theme :is(#modal-shop,#modal-bag) [id$="-list"] > .shop-item::before{
  content:''; position:absolute; left:0; right:0; top:0; height:112px; border-radius:20px 20px 0 0; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 50% 56%, #ff7a1a40 0, transparent 62%), radial-gradient(#ffb14a33 1.2px, transparent 1.6px) 0 0 / 12px 12px;
}

/* Nút Mua: dải sáng quét qua */
:is(#modal-shop,#modal-bag) .si-btn.buy{ position:relative; overflow:hidden; }
:is(#modal-shop,#modal-bag) .si-btn.buy::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg,transparent,#ffffff77,transparent); transform:skewX(-20deg);
  animation:shopShine 3.6s ease-in-out infinite;
}
@keyframes shopShine{ 0%,55%{ left:-60%; } 100%{ left:130%; } }

/* Giá: viên thuốc nổi bật + giảm giá có ruy-băng */
body:not(.halloween-theme) #modal-shop .shop-item .si-price{
  background:linear-gradient(180deg,#fff8e6,#ffefc4); border:1px solid #ffd77a99; border-radius:999px;
  padding:3px 12px; margin-top:auto; align-self:center; display:inline-flex; flex-direction:column; align-items:center; line-height:1.15;
}
body:not(.halloween-theme) #modal-shop .shop-item .si-price:has(.si-price-new){ background:linear-gradient(180deg,#fff0f2,#ffdde3); border-color:#ffb3c0; }
:is(#modal-shop,#modal-bag) .shop-item .si-badge.flash,
:is(#modal-shop,#modal-bag) .shop-item .si-badge.event{ box-shadow:0 4px 10px -4px #0006; letter-spacing:.03em; }

/* Ghi chú trong Túi đồ (vd. giới hạn danh hiệu) */
#modal-bag [id$="-list"] > div:not(.shop-item):not(.empty-hint){
  background:rgba(124,58,237,.07); border:1px solid rgba(124,58,237,.16); border-radius:14px; padding:9px 12px !important; line-height:1.45;
}
body.halloween-theme #modal-bag [id$="-list"] > div:not(.shop-item):not(.empty-hint){ background:#ffffff0d; border-color:#ff8a2a44; }

/* Thẻ "Đang dùng" có dải sáng ở viền */
body:not(.halloween-theme) :is(#modal-shop,#modal-bag) .shop-item:has(.si-btn.equipped)::after{
  content:'ĐANG DÙNG'; position:absolute; top:10px; right:-4px; z-index:3; font-size:9px; font-weight:800; letter-spacing:.06em;
  color:#fff; background:linear-gradient(135deg,#19c37d,#0e9f6e); padding:3px 8px; border-radius:999px 0 0 999px; box-shadow:0 4px 8px -4px #0e9f6e;
}

@media (prefers-reduced-motion:reduce){
  .shop-hero-art span, .shop-hero-art i, .si-btn.buy::after{ animation:none; }
  :is(#modal-shop,#modal-bag) .shop-item:hover .si-preview{ transform:none; }
}