/* ===== Túi đồ 2 (js/ext_bag2.js): chip lọc theo ô mặc, nhãn MỚI, nút bán trong túi, chấm đỏ nút túi ===== */
/* Dùng lại biến / lớp của kit.css, ui2.css, panels.css (.mini, .danger, .inv-foot, .cell, .bg-acts); không thêm skin mới. */

/* chip "Lọc: Mũ ✕" trên lưới túi */
.bg-bag .b2-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: -2px 0 8px; padding: 0 4px 0 10px;
  font: 700 12px/22px var(--f-head); color: var(--ink-soft); background: var(--paper); border: 2px solid var(--ink); border-radius: 11px; box-shadow: 0 2px 0 var(--ink); }
.bg-bag .b2-chip b { color: var(--amber); }
.win .bg-bag .b2-chip button { width: 18px; height: 18px; padding: 0; font-size: 11px; line-height: 16px; border-radius: 9px; }
.dl-slot:hover small { color: var(--sky-d); }

/* nhãn MỚI góc ô đồ (trên .ref / .hk) */
.cell .b2-new { position: absolute; left: 50%; top: -5px; z-index: 3; transform: translateX(-50%); padding: 0 3px;
  font: 800 8px/12px var(--f-head); font-style: normal; letter-spacing: .3px; color: #fff; background: var(--red-d, #d8483a); border: 1px solid var(--ink); border-radius: 4px;
  text-shadow: 0 1px 0 var(--ink); pointer-events: none; animation: b2New 1s infinite alternate; }
@keyframes b2New { to { background: var(--red, #ff7a6a); transform: translateX(-50%) translateY(-1px); } }

/* nút Bán trong thẻ chi tiết + nút Bán hết ở chân túi */
.win .bg-acts .b2-sell { flex: 1; color: var(--ink); background: var(--gold-2); }
.win .bg-acts .b2-sell:disabled { opacity: .55; }
.bg-bag .inv-foot .b2-sellmats { margin-left: auto; white-space: nowrap; }
.bg-bag .inv-foot .b2-sellmats.danger { animation: b2Arm .5s infinite alternate; }
@keyframes b2Arm { to { box-shadow: 0 0 0 3px rgba(216, 72, 58, .35); } }
@media (max-width: 1000px) { .bg-bag .inv-foot { flex-wrap: wrap; } }

/* chấm đỏ trên nút túi (I) khi có đồ mới — kèm .glow sẵn có của ui2.css */
#menu-btns [data-w="inv"] { position: relative; }
#menu-btns [data-w="inv"].glow::after { content: ''; position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--red-d, #d8483a); border: 2px solid var(--ink); animation: b2Dot 1s infinite alternate; }
@keyframes b2Dot { to { background: var(--red, #ff7a6a); box-shadow: 0 0 6px 1px rgba(255, 122, 106, .8); } }