/* ==========================================================================
 * CHỢ ĐEN — nền xanh rêu tối, điểm nhấn vàng cũ; thẻ vật phẩm màu kem sáng để món hàng là phần nổi nhất.
 * Khung viền mực như các modal khác của game, nút dùng .btn (viền mảnh + gờ 3D cùng tông).
 * ========================================================================== */
.modal.bm-modal { --moss: #1d3129; --moss2: #274139; --moss3: #325248; --gold: #e2b84f; --gold-d: #b98e26; --cream: #fff8ea; --cream2: #f6e7c4; --line: #d9c08a; --ink: #2a1c1c; --mute: #7a6a5a;
  width: min(1200px, calc(100vw - 24px)); height: min(92vh, 840px); max-height: 92vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--moss); color: var(--cream);
  border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink), 0 22px 50px rgba(0, 0, 0, .5); font-family: var(--font); text-align: left; }
.bm-root { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.bm-root *:focus-visible { outline: 3px solid #ffb13d; outline-offset: 2px; }
.bm-root button, .bm-root input, .bm-root select { font-family: var(--font); }
.modal-wrap.nonblock:has(.bm-modal) { background: rgba(0, 0, 0, .45); pointer-events: auto; }

.bm-head { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 14px; background: linear-gradient(#3a5c50, #2a463d); border-bottom: 2px solid var(--ink); }
.bm-headtop { display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); align-items: center; gap: 12px; }
.bm-back { justify-self: start; min-height: 42px; padding-inline: 16px; }
.bm-headbalance { display: block; }
.bm-title { min-width: 0; text-align: left; } .bm-title small { display: block; margin-top: 3px; font: 700 11px var(--font); color: #d3e3d9; } .bm-title h2 { margin: 0; font: 800 24px/1 var(--display); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .38); letter-spacing: .6px; }
.bm-chips { display: flex; gap: 8px; }
.bm-chip { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: rgba(12, 27, 22, .46); border: 1px solid rgba(255, 255, 255, .2); color: #f4ecd4; white-space: nowrap; }
.bm-chip > span:last-child { display: grid; gap: 1px; }
.bm-chip small { display: block; color: #bcd0c5; font: 800 9px/1 var(--display); letter-spacing: 1px; }
.bm-chip b { font: 800 15px/1.1 var(--display); }
.bm-chip.money { background: linear-gradient(#fffbe8, #ffe9a8); color: var(--ink); border-color: var(--ink); }
.bm-chip.money small { color: #936213; }
.bm-chip .pxi { height: 24px; }
.bm-hourglass { font-size: 22px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }

.bm-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px 10px 0; background: var(--moss2); }
.bm-tabs button { position: relative; min-height: 36px; border: 1.5px solid #12211b; border-bottom: 0; border-radius: 8px 8px 0 0; background: #35544a; color: #cfe0d4; font: 800 14px var(--display); letter-spacing: .4px; cursor: pointer; }
.bm-tabs button i { display: inline-block; min-width: 26px; margin-left: 6px; padding: 1px 7px; border-radius: 9px; background: rgba(0, 0, 0, .3); font: 800 12px/17px var(--font); font-style: normal; }
.bm-tabs button.on { background: linear-gradient(#f3d67c, #e2b84f); color: var(--ink); border-color: #7a5a10; box-shadow: inset 0 -4px 0 #b98e26; } .bm-tabs button.on i { background: rgba(0, 0, 0, .18); }
.bm-tabdot { position: absolute; top: 6px; right: 10px; width: 11px; height: 11px; border-radius: 50%; background: #e53935; border: 2px solid #fff; }
.bm-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--moss2); border-top: 3px solid var(--gold-d); }

/* ---- MUA ---- */
.bm-toolbar { padding: 7px 10px; display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 7px 12px; background: var(--moss2); border-bottom: 2px solid rgba(0, 0, 0, .25); }
.bm-search { position: relative; grid-row: 1; grid-column: 1; } .bm-search input { width: 100%; height: 36px; padding: 0 36px 0 10px; border-radius: 8px; border: 1.5px solid #12211b; background: var(--cream); color: var(--ink); font-size: 14px; }
.bm-search input::placeholder { color: #7a6a5a; } .bm-clear { position: absolute; right: 3px; top: 3px; width: 30px; height: 30px; border: 0; border-radius: 6px; background: #e9d6a5; color: var(--ink); font-size: 20px; font-weight: 800; cursor: pointer; }
.bm-cats { grid-row: 2; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 2px; }
.bm-cats button { flex: 0 0 auto; min-height: 32px; padding: 0 10px; border-radius: 7px; border: 1.5px solid #12211b; background: #3a5a4f; color: #dbe9df; font: 800 12px var(--font); cursor: pointer; white-space: nowrap; box-shadow: 0 2px 0 #16281f; }
.bm-cats button.on { background: linear-gradient(#f3d67c, #e2b84f); color: var(--ink); border-color: #7a5a10; box-shadow: 0 3px 0 #9a7412; } .bm-cats button i { margin-left: 4px; padding: 0 6px; border-radius: 8px; background: #e53935; color: #fff; font-style: normal; font-size: 11px; }
.bm-bar { grid-row: 1; grid-column: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bm-filterbtn { min-height: 36px; } .bm-fcount { margin-left: 6px; padding: 0 6px; border-radius: 8px; background: #fff; color: #1664ad; font-style: normal; font-weight: 800; }
.bm-sort { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #cfe0d4; } .bm-sort select { height: 36px; max-width: 190px; padding: 0 7px; border-radius: 8px; border: 1.5px solid #12211b; background: var(--cream); color: var(--ink); font-weight: 700; }
.bm-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--gold); }
.bm-pinned { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(226, 184, 79, .18); font-size: 13px; }
.bm-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 318px; }
.bm-filters { overflow-y: auto; padding: 10px 12px 14px; border-right: 2px solid rgba(0, 0, 0, .25); background: var(--moss); display: grid; gap: 10px; align-content: start; }
.bm-fhead { display: flex; align-items: center; justify-content: space-between; } .bm-fhead b { font: 800 15px var(--display); color: var(--gold); }
.bm-filters label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: #cfe0d4; }
.bm-filters select, .bm-filters input[type="number"] { width: 100%; height: 40px; padding: 0 8px; border-radius: 10px; border: 2px solid #12211b; background: var(--cream); color: var(--ink); font-size: 14px; }
.bm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bm-filters .bm-check { display: flex; align-items: center; gap: 8px; min-height: 40px; } .bm-check input { width: 20px; height: 20px; accent-color: #e2b84f; }
.bm-apply { display: none; }
.bm-results { overflow-y: auto; padding: 8px 10px 12px; overscroll-behavior: contain; }
.bm-grid { display: grid; grid-template-columns: 1fr; gap: 7px; }
.bm-card { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 72px; padding: 6px 9px 6px 7px; text-align: left; color: var(--ink); background: var(--cream); border: 1.5px solid var(--ink); border-left: 5px solid var(--rc, #6b7a72); border-radius: 8px; box-shadow: 0 2px 0 #12211b; cursor: pointer; }
.bm-card.bargain { background: #fff0c2; border-color: #d7a42e; }
.bm-bargain { padding: 1px 6px; border-radius: 5px; font: 800 10px/16px var(--font); color: #624500; background: #ffdb73; }
.bm-dealnote { display: grid; gap: 3px; margin-bottom: 8px; padding: 7px 8px; border: 1px solid #d7a42e; border-radius: 8px; background: #fff0c2; font-size: 12px; }
.bm-dealnote span { color: #745719; }
.bm-card:hover { background: #fff2cf; transform: translateY(-1px); } .bm-card.on { background: #ffe9a8; box-shadow: 0 3px 0 #12211b, 0 0 0 3px var(--gold); }
[data-r="common"] { --rc: #7a8a82; } [data-r="uncommon"] { --rc: #2e9e5f; } [data-r="rare"] { --rc: #2b7fd6; } [data-r="legendary"] { --rc: #9a4fd6; } [data-r="sss"] { --rc: #e08a00; }
.bm-cico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; background: #f0dfb5; border: 1px solid var(--line); } .bm-ic { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; } .bm-ic.pxi { height: 30px; width: auto; }
.bm-cmain { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .bm-cmain b { font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; } .bm-cmain small { font-size: 11.5px; color: var(--mute); }
.bm-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.bm-rar { padding: 1px 7px; border-radius: 7px; background: var(--rc); color: #fff; font: 800 10px/16px var(--font); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.bm-cond { padding: 1px 7px; border-radius: 7px; font: 800 10px/16px var(--font); background: #e4d7b5; color: #5a4a3a; } .bm-cond.new { background: #cdeed6; color: #1d6a3a; } .bm-cond.good { background: #dcefc8; color: #3d6a1a; } .bm-cond.used { background: #ffe3a3; color: #7a4a00; } .bm-cond.worn { background: #ffd0c7; color: #8a2a1a; }
.bm-dem { padding: 1px 7px; border-radius: 7px; font: 800 10px/16px var(--font); background: #e4d7b5; color: #5a4a3a; } .bm-dem.hot { background: #ff8f1f; color: #fff; } .bm-dem.stable { background: #cfe6ff; color: #1c5f9f; } .bm-dem.low { background: #d8d8e0; color: #55556a; }
.bm-known { padding: 1px 7px; border-radius: 7px; background: #2e9e5f; color: #fff; font: 800 10px/16px var(--font); }
.bm-cprice { display: grid; justify-items: end; gap: 2px; } .bm-cprice b { font: 800 14px var(--display); color: #a5480a; white-space: nowrap; } .bm-cprice small { font-size: 11px; color: var(--mute); white-space: nowrap; }
.bm-vs { font-style: normal; padding: 0 7px; border-radius: 7px; font: 800 11px/17px var(--font); } .bm-vs.good { background: #cdeed6; color: #1d6a3a; } .bm-vs.fair { background: #efe3c2; color: #6b5a30; } .bm-vs.bad { background: #ffd0c7; color: #8a2a1a; }
.bm-more { display: block; margin: 12px auto 0; min-height: 46px; }
.bm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; text-align: center; color: #cfe0d4; font-size: 13px; } .bm-empty b { font: 800 18px var(--display); color: #fff; } .bm-empty.small { padding: 30px 16px; }
.bm-detailcol { overflow-y: auto; padding: 9px; border-left: 2px solid rgba(0, 0, 0, .25); background: var(--moss); }

/* ---- chi tiết ---- */
.bm-detail { color: var(--ink); background: var(--cream); border: 2px solid var(--ink); border-radius: 14px; padding: 12px; box-shadow: 0 3px 0 #12211b; }
.bm-dhead { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; } .bm-dhead > div { flex: 1; min-width: 0; } .bm-dhead b { display: block; font: 800 17px/1.2 var(--display); color: var(--rc, var(--ink)); } .bm-dhead small { color: var(--mute); font-size: 12px; }
.bm-bigic { display: grid; place-items: center; width: 74px; height: 74px; flex: 0 0 auto; border-radius: 12px; background: #f0dfb5; border: 2px solid var(--rc, var(--line)); } .bm-icbig { width: 62px; height: 62px; object-fit: contain; image-rendering: pixelated; } .bm-icbig.pxi { height: 40px; width: auto; }
.bm-fly { animation: bmFly .32s ease-in forwards; } @keyframes bmFly { to { transform: translate(60px, 120px) scale(.2); opacity: 0; } }
.bm-star { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid #cfa862; background: linear-gradient(#fffaf0, #ffe7b8); box-shadow: 0 3px 0 #a87d3c; font-size: 22px; color: #b98e26; cursor: pointer; } .bm-star.on { color: #e08a00; background: linear-gradient(#ffe066, #ffbf1a); }
.bm-priceblock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; } .bm-priceblock > div { padding: 6px 8px; border-radius: 10px; background: #f0dfb5; text-align: center; } .bm-priceblock small { display: block; font-size: 10.5px; font-weight: 700; color: var(--mute); text-transform: uppercase; } .bm-priceblock b { font: 800 15px var(--display); color: #a5480a; }
.bm-rows { display: grid; } .bm-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 2px; border-bottom: 1.5px dashed var(--line); font-size: 13px; } .bm-row span { color: var(--mute); } .bm-row b { text-align: right; overflow-wrap: anywhere; } .bm-row.sum { border-bottom: 0; background: #fff0b8; border-radius: 8px; padding: 8px; } .bm-row.sum b { color: #1d6a3a; font-size: 15px; }
.bm-detail .pos { color: #1d6a3a; } .bm-detail .neg { color: #c2352f; }
.bm-compare { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #fffdf5; border: 1.5px solid var(--line); } .bm-compare label { display: block; font-size: 12px; font-weight: 700; color: var(--mute); } .bm-compare select { width: 100%; height: 40px; margin: 4px 0 6px; border-radius: 10px; border: 2px solid var(--line); background: #fff; color: var(--ink); }
.bm-note { margin: 8px 0 0; padding: 7px 10px; border-radius: 10px; background: #efe3c2; color: #5a4a3a; font-size: 12px; line-height: 1.45; } .bm-note.warn { background: #ffe3a3; color: #7a4a00; }
.bm-buybox { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.bm-qty { display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; background: #fff; } .bm-qty button { width: 46px; height: 46px; border: 0; background: #f0dfb5; color: var(--ink); font: 800 22px var(--font); cursor: pointer; } .bm-qty input { width: 64px; height: 46px; border: 0; text-align: center; font: 800 17px var(--font); color: var(--ink); background: #fff; -moz-appearance: textfield; }
.bm-total { text-align: right; } .bm-total small { display: block; font-size: 11px; color: var(--mute); font-weight: 700; } .bm-total b { font: 800 20px var(--display); color: #a5480a; }
.bm-err { min-height: 18px; margin: 6px 0 0; color: #c2352f; font-size: 12.5px; font-weight: 700; }
.bm-buy { width: 100%; min-height: 42px; } .bm-dact { display: flex; gap: 8px; margin-top: 8px; }

/* ---- BÁN ---- */
.bm-sell { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: grid; gap: 12px; align-content: start; }
.bm-stats { display: grid; grid-template-columns: 1fr 1fr 1.3fr auto; gap: 8px; align-items: stretch; } .bm-stats > div { padding: 8px 12px; border-radius: 12px; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 3px 0 #12211b; } .bm-stats small { display: block; font-size: 10.5px; font-weight: 800; color: var(--mute); text-transform: uppercase; } .bm-stats b { font: 800 20px var(--display); } .bm-stats .cash b { color: #1d6a3a; }
.bm-sellbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .bm-max { font-size: 12px; color: #cfe0d4; }
.bm-stalls { display: grid; gap: 10px; }
.bm-stall { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; grid-template-areas: "ic main status" "acts acts acts"; gap: 8px 10px; align-items: center; padding: 10px; color: var(--ink); background: var(--cream); border: 2px solid var(--ink); border-left: 7px solid var(--rc, #7a8a82); border-radius: 12px; box-shadow: 0 3px 0 #12211b; overflow: hidden; }
.bm-sico { grid-area: ic; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 10px; background: #f0dfb5; border: 1.5px solid var(--line); } .bm-smain { grid-area: main; min-width: 0; display: grid; gap: 3px; } .bm-smain b { font-size: 14.5px; } .bm-smain small { font-size: 12px; color: var(--mute); }
.bm-status { grid-area: status; padding: 3px 10px; border-radius: 9px; font: 800 11px/17px var(--font); background: #cdeed6; color: #1d6a3a; } .bm-status.warn { background: #ffe3a3; color: #7a4a00; } .bm-status.done { background: #cfe6ff; color: #1c5f9f; }
.bm-sacts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 6px; } .bm-sacts .btn { min-height: 40px; }
.bm-stall.sold_out { background: #eaf5df; } .bm-stamp { position: absolute; right: 16px; top: 8px; padding: 2px 10px; border: 3px solid #c2352f; border-radius: 8px; color: #c2352f; font: 800 18px var(--display); transform: rotate(-9deg); opacity: .85; animation: bmStamp .3s cubic-bezier(.2, 1.8, .4, 1) both; pointer-events: none; }
@keyframes bmStamp { from { transform: rotate(-9deg) scale(2.2); opacity: 0; } }
.bm-slot.empty { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 76px; border: 2px dashed rgba(255, 255, 255, .3); border-radius: 12px; background: transparent; color: #cfe0d4; font-size: 13px; font-weight: 700; cursor: pointer; } .bm-slot.empty b { font: 800 26px var(--display); color: var(--gold); } .bm-slot.empty:hover { background: rgba(255, 255, 255, .06); }
.bm-foot { margin: 0; font-size: 11.5px; color: #b5cbbd; line-height: 1.5; }

/* ---- sheet ---- */
.bm-sheet-wrap { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(15, 26, 21, .72); animation: fadein .15s; }
.bm-sheet { position: relative; width: min(480px, 100%); max-height: 92%; overflow-y: auto; padding: 16px 14px 14px; color: var(--ink); background: var(--cream); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink), 0 18px 40px rgba(0, 0, 0, .5); animation: popin .2s cubic-bezier(.2, 1.4, .5, 1); }
.bm-sheet.bm-sellsheet { width: min(540px, 100%); } .bm-sx { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid #cfa862; background: linear-gradient(#fffaf0, #ffe7b8); box-shadow: 0 3px 0 #a87d3c; font-size: 22px; font-weight: 800; color: var(--ink); cursor: pointer; z-index: 2; }
.bm-sheet h3 { margin: 0 46px 8px 0; font: 800 20px var(--display); } .bm-sheet p { margin: 6px 0; font-size: 13px; color: #5a4a3a; line-height: 1.5; }
.bm-sheet .bm-detail { border: 0; box-shadow: none; padding: 0; }
.bm-sheet[data-kind="detail"] .bm-dhead { padding-right: 52px; }
.bm-stab { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 8px 0; } .bm-stab button { min-height: 42px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; color: #5a4a3a; font: 800 12px var(--font); box-shadow: 0 2px 0 var(--line); cursor: pointer; } .bm-stab button.on { background: linear-gradient(#f3d67c, #e2b84f); border-color: #7a5a10; color: var(--ink); box-shadow: 0 2px 0 #9a7412; }
.bm-input { width: 100%; height: 38px; padding: 0 10px; margin: 4px 0; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-size: 15px; font-weight: 700; } .bm-input:focus { border-color: #ff8f1f; outline: none; }
.bm-picklist { max-height: 44vh; overflow-y: auto; margin-top: 6px; display: grid; gap: 6px; }
.bm-pick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 6px 10px; text-align: left; border-radius: 12px; border: 1.5px solid var(--line); border-left: 6px solid var(--rc, #7a8a82); background: #fff; color: var(--ink); box-shadow: 0 2px 0 var(--line); cursor: pointer; } .bm-pick:hover { background: #fff2cf; } .bm-pick.locked { opacity: .55; cursor: not-allowed; box-shadow: none; }
.bm-pick .bm-ic { width: 40px; height: 40px; } .bm-pmain { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bm-pmain b { font-size: 13.5px; } .bm-pmain small { color: var(--mute); font-size: 11.5px; } .bm-pown { font-size: 11.5px; font-weight: 800; color: #5a4a3a; }
.bm-sec { padding: 8px 2px 2px; font: 800 11px var(--display); letter-spacing: .6px; color: var(--mute); text-transform: uppercase; }
.bm-selitem { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; padding: 8px; border-radius: 12px; background: #f0dfb5; } .bm-selitem b { display: block; font: 800 16px var(--display); } .bm-selitem small { color: #5a4a3a; }
.bm-field { margin-top: 10px; } .bm-field > label { display: block; font-size: 12px; font-weight: 800; color: #5a4a3a; margin-bottom: 2px; }
.bm-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .bm-quick .btn { min-height: 40px; }
.bm-days { display: flex; gap: 6px; } .bm-days button { flex: 1; min-height: 44px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; color: #5a4a3a; font: 800 13px var(--font); box-shadow: 0 2px 0 var(--line); cursor: pointer; } .bm-days button.on { background: linear-gradient(#f3d67c, #e2b84f); border-color: #7a5a10; color: var(--ink); box-shadow: 0 2px 0 #9a7412; }
.bm-calc { margin-top: 10px; padding: 6px 10px; border-radius: 12px; background: #fffdf5; border: 1.5px solid var(--line); }
.bm-eta.good { color: #1d6a3a; } .bm-eta.fair { color: #3d6a1a; } .bm-eta.warn { color: #b06a00; } .bm-eta.bad { color: #c2352f; }
.bm-btnrow { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; } .bm-btnrow .btn { min-height: 46px; }
.bm-menu { display: grid; gap: 6px; } .bm-menu button { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 700 14px var(--font); box-shadow: 0 2px 0 var(--line); cursor: pointer; } .bm-menu small { color: var(--mute); }
.bm-intro { margin: 8px 0 12px; padding-left: 18px; font-size: 13px; color: #4a3a2a; line-height: 1.55; }
.bm-q { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: #f0dfb5; font: 800 20px var(--display); }

/* Shared player market follows the existing compact pixel shop. */
.bm-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); }
.bm-tabs button { min-width:0; overflow-wrap:anywhere; }
.bm-playerbar { display:grid;grid-template-columns:minmax(180px,1fr) 160px 180px auto;gap:8px;padding:10px;background:#25443a; }
.bm-playerbar .bm-search { min-width:0; }
.bm-playerbar select { min-width:0;width:100%;height:38px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--cream);color:var(--ink);font:700 12px var(--font); }
.bm-playerhint { margin:0;padding:8px 12px;color:#e3ece2;font-size:12px;line-height:1.5; }
.bm-connect { min-height:260px; }
.bm-onlineinfo { display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:12px;background:#e7f2dc;border:2px solid #93ae72;border-radius:12px;color:var(--ink); }
.bm-onlineinfo b { font:800 16px var(--display); }.bm-onlineinfo span { grid-column:1;font-size:12px;line-height:1.5; }.bm-onlineinfo button { grid-column:2;grid-row:1/3;align-self:center; }
.bm-sellsection { display:flex;justify-content:space-between;gap:8px;align-items:center;color:#f6eccf; }.bm-sellsection h3 { margin:0;font:800 16px var(--display); }
.bm-pqty { display:grid;gap:3px;font-size:12px;font-weight:700;max-width:140px; }.bm-playerbar .btn { min-height:38px; }
.bm-stall.cancelled { opacity:.8; }
@media(max-width:820px) {
  .bm-playerbar { grid-template-columns:1fr 1fr;gap:6px;padding:8px; }
  .bm-playerbar .bm-search { grid-column:1/-1; }.bm-playerbar .btn { grid-column:1/-1; }
  .bm-playerbar select,.bm-playerbar .btn { min-height:44px; }
  .bm-tabs button { font-size:11px;padding:8px 4px; }.bm-tabs i { font-size:10px; }
  .bm-onlineinfo { grid-template-columns:1fr; }.bm-onlineinfo button { grid-column:1;grid-row:auto;justify-self:start;min-height:44px; }
  .bm-sellsection { flex-wrap:wrap; }.bm-sellsection .btn { min-height:44px; }
}

/* ---- bộ lọc trong sheet (mobile) ---- */
.bm-sheet .bm-filters { display: grid; background: transparent; border: 0; padding: 0; overflow: visible; } .bm-sheet .bm-filters label { color: #5a4a3a; } .bm-sheet .bm-fhead b { color: var(--ink); }
.bm-sheet .bm-filters select, .bm-sheet .bm-filters input[type="number"] { border-color: var(--line); background: #fff; }
.bm-filtersheet { width: min(620px, 100%); }
.bm-filtersheet .bm-filters { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.bm-filtersheet .bm-fhead, .bm-filtersheet .bm-apply { grid-column: 1 / -1; }
.bm-filtersheet .bm-apply { display: block; margin-top: 4px; min-height: 44px; }

/* ---- lắp linh kiện từ kho (bảng nâng cấp máy) + tổng kết ngày ---- */
.lx-spare { margin: 4px 0 8px; padding: 6px; border-radius: 10px; background: #fff0c8; border: 1.5px dashed #e0a72a; }
.rep-market { margin: 8px 0; padding: 6px 10px; border-radius: 10px; background: #efe3c2; color: #5a4a3a; font-size: 12.5px; font-weight: 700; text-align: center; }

/* ---- màn hình nhỏ / dọc ---- */
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .modal-wrap:has(.bm-modal) { padding: 0; }
  .modal.bm-modal { width: 100%; height: 100dvh; max-height: none; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
  .bm-head { padding: calc(8px + env(safe-area-inset-top)) 10px 8px; gap: 8px; }
  .bm-headtop { grid-template-columns: minmax(92px, 1fr) auto minmax(92px, 1fr); gap: 6px; }
  .bm-back { min-height: 38px; padding-inline: 10px; font-size: 12px; }
  .bm-title small { font-size: 10px; } .bm-title h2 { font-size: 21px; }
  .bm-chips { gap: 6px; }
  .bm-chip { min-height: 40px; padding: 4px 7px; gap: 5px; border-radius: 8px; }
  .bm-chip b { font-size: 14px; } .bm-chip small { font-size: 8px; } .bm-chip .pxi { height: 19px; } .bm-hourglass { font-size: 18px; }
  .bm-cols { grid-template-columns: 1fr; } .bm-filters, .bm-detailcol { display: none; }
  .bm-toolbar { grid-template-columns: 1fr; gap: 6px; padding: 6px 10px; }
  .bm-search { grid-row: 1; grid-column: 1; } .bm-search input { height: 44px; font-size: 16px; }
  .bm-clear { top: 4px; right: 4px; width: 36px; height: 36px; }
  .bm-cats { grid-row: 2; grid-column: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; gap: 6px; }
  .bm-cats button, .bm-tabs button, .bm-filterbtn, .bm-sort select { min-height: 44px; }
  .bm-bar { grid-row: 3; grid-column: 1; gap: 6px; flex-wrap: nowrap; }
  .bm-sort { min-width: 0; } .bm-sort select { max-width: 180px; min-width: 0; }
  .bm-count { white-space: nowrap; }
  .bm-input { height: 44px; font-size: 16px; }
  .bm-buy { min-height: 48px; }
  .bm-sheet-wrap { align-items: flex-end; padding: 0; } .bm-sheet { width: 100%; max-height: 92%; border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); animation: sheetup .2s ease-out; }
  .bm-sheet[data-kind="filters"] .bm-apply { display: block; margin-top: 8px; min-height: 50px; } .bm-sheet[data-kind="filters"] .bm-filters { display: grid; }
  .bm-grid { grid-template-columns: 1fr; } .bm-card { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 7px; } .bm-cico { width: 44px; height: 44px; } .bm-ic { width: 38px; height: 38px; }
  .bm-stats { grid-template-columns: 1fr 1fr; } .bm-stats .btn { grid-column: 1 / -1; min-height: 46px; }
  .bm-stall { grid-template-columns: 54px minmax(0, 1fr); grid-template-areas: "ic main" "status status" "acts acts"; } .bm-sico { width: 54px; height: 54px; }
}
@media (max-width: 430px) {
  .bm-headtop { grid-template-columns: 76px 1fr 76px; }
  .bm-back { padding-inline: 8px; font-size: 0; } .bm-back::after { content: '‹ QUÁN'; font-size: 11px; }
  .bm-title small { display: none; }
  .bm-chip { padding-inline: 6px; } .bm-chip b { font-size: 12px; }
  .bm-head { grid-template-columns: minmax(80px, 1fr) auto 38px; gap: 6px; }
  .bm-title h2 { font-size: 18px; } .bm-title small { font-size: 9px; }
  .bm-sort { font-size: 0; gap: 0; } .bm-sort select { font-size: 12px; max-width: 155px; }
  .bm-count { font-size: 11px; }
  .bm-cprice b { font-size: 12px; } .bm-cmain b { font-size: 13px; }
  .bm-filtersheet .bm-filters { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .bm-fly, .bm-stamp, .bm-sheet, .bm-sheet-wrap { animation: none !important; } }

/* Nút đóng góc phải trên thay cho "‹ Về quán" */
.bm-x { justify-self: end; }

/* Compact shop controls; only information scrolls in a transaction sheet. */
.modal.bm-modal { height:min(840px,calc(var(--ui-vh,100dvh) - 24px));max-height:calc(var(--ui-vh,100dvh) - 24px); }
.bm-categoryselect { display:none; }
.bm-sheet { display:flex;flex-direction:column;overflow:hidden;padding:0;max-height:calc(100% - 16px); }
.bm-sheethead { flex:none;padding:12px 58px 10px 12px;border-bottom:1px solid var(--line); }
.bm-sheethead h3 { margin:0;font-size:18px;line-height:1.25;overflow-wrap:anywhere; }
.bm-sheethead .bm-dhead { margin:0;padding:0!important;gap:8px; }
.bm-sheethead .bm-bigic { width:44px;height:44px;border-radius:8px; }
.bm-sheethead .bm-icbig { width:36px;height:36px; }
.bm-sheethead .bm-dhead b { font-size:15px;overflow-wrap:anywhere; }
.bm-sheethead .bm-dhead small { display:block;overflow-wrap:anywhere; }
.bm-sheethead .bm-star { flex:none; }
.bm-sheethead .bm-fhead { gap:8px; }
.bm-sheet-scroll { flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 12px;scroll-padding-block:8px; }
.bm-sheet:not(:has(.bm-sheethead:not([hidden]))) .bm-sheet-scroll { padding-top:58px; }
.bm-sheetactions { flex:none;padding:8px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--cream);box-shadow:0 -4px 10px #2a1c1c0a; }
.bm-sheetactions[hidden],.bm-sheethead[hidden] { display:none; }
.bm-sheetactions .bm-buybox { margin:0 0 6px;gap:8px; }
.bm-sheetactions .bm-total b { font-size:17px;overflow-wrap:anywhere; }
.bm-sheetactions .bm-btnrow { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:8px;margin:0; }
.bm-sheetactions .bm-btnrow .btn { min-width:0;white-space:normal;overflow-wrap:anywhere;padding:8px;font-size:13px; }
.bm-sheetactions > button { width:100%;margin:0;min-height:44px;font-size:14px;padding:8px;white-space:normal; }
.bm-sheetactions .bm-err { min-height:0;margin:0; }
.bm-sheetactions .bm-err:not(:empty) { margin:0 0 6px; }
.bm-sheetactions .bm-shortage { margin:0 0 6px; }
.bm-sheet .bm-picklist { max-height:none;overflow:visible; }
.bm-sheet .bm-selitem .bm-icbig { width:40px;height:40px;flex:none; }
.bm-sheet .bm-selitem { margin:0 0 8px;padding:6px 8px; }
.bm-sheet .bm-row { padding:5px 0;font-size:12px; }
.bm-sheet .bm-calc { margin-top:8px;border-radius:8px; }
.bm-sx { width:44px;height:44px;top:7px;right:7px; }
.bm-sheet .bm-stab { margin:0 0 8px; }
.bm-sheet .bm-stab button,.bm-sheet .bm-quick .btn { min-height:44px; }
.bm-sheet .bm-compare { padding:6px 8px; }

/* Desktop detail keeps its title and purchase controls visible as facts scroll. */
.bm-detailcol { min-height:0;overflow:hidden; }
.bm-detail-fixed { height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:0; }
.bm-detail-fixed > .bm-dhead { flex:none;gap:8px;margin:0;padding:9px;border-bottom:1px solid var(--line); }
.bm-detail-fixed > .bm-dhead b { font-size:15px;overflow-wrap:anywhere; }
.bm-detail-fixed > .bm-dhead small { display:block;font-size:11px;overflow-wrap:anywhere; }
.bm-detail-fixed .bm-bigic { width:48px;height:48px;border-radius:9px; }
.bm-detail-fixed .bm-icbig { width:40px;height:40px; }
.bm-detail-scroll { flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px;scroll-padding-block:8px; }
.bm-detail-scroll .bm-row { font-size:12px;padding:5px 0; }
.bm-detail-scroll .bm-priceblock { gap:4px; }
.bm-detail-scroll .bm-priceblock > div { min-width:0;padding:5px 3px; }
.bm-detail-scroll .bm-priceblock b { font-size:13px;overflow-wrap:anywhere; }
.bm-detailactions { flex:none;padding:8px;border-top:1px solid var(--line);background:var(--cream);box-shadow:0 -4px 10px #2a1c1c0a; }
.bm-detailactions .bm-buybox { gap:8px;margin:0 0 6px; }
.bm-detailactions .bm-qty button { width:38px;height:40px; }
.bm-detailactions .bm-qty input { width:46px;height:40px;font-size:15px; }
.bm-detailactions .bm-total { min-width:0; }
.bm-detailactions .bm-total b { font-size:16px;overflow-wrap:anywhere; }
.bm-detailactions .bm-err { min-height:0;margin:0; }
.bm-detailactions .bm-err:not(:empty),.bm-detailactions .bm-shortage { margin:0 0 6px; }
.bm-detailactions > button { width:100%;min-height:44px;margin:0;padding:8px;font-size:13px;white-space:normal; }
.bm-detailactions .bm-dact { margin-top:6px; }
.bm-detailactions .bm-dact button { width:100%;min-height:36px;font-size:12px; }
.bm-detailactions .bm-pqty { display:flex;align-items:center;gap:6px;min-width:0;font-size:11px; }
.bm-detailactions .bm-pqty input { width:58px;margin:0; }

@media (max-width:860px),(max-aspect-ratio:1/1) {
  .modal.bm-modal { height:var(--ui-vh,100dvh);max-height:var(--ui-vh,100dvh); }
  .bm-head { grid-template-columns:minmax(0,1fr) auto 44px;padding-block:calc(6px + env(safe-area-inset-top)) 6px; }
  .bm-x { width:44px;height:44px;min-width:44px;min-height:44px; }
  .bm-title h2 { font-size:18px; }
  .bm-title small { display:none; }
  .bm-tabs { padding:0 6px;gap:4px; }
  .bm-tabs button { font-size:11px;letter-spacing:0;padding:5px 3px;line-height:1.15; }
  .bm-tabs button i { margin-left:3px;padding-inline:4px;min-width:0;font-size:10px; }
  .bm-toolbar { grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:6px 8px; }
  .bm-toolbar .bm-search { grid-column:1;grid-row:1; }
  .bm-toolbar .bm-search input { padding-right:40px; }
  .bm-toolbar .bm-cats { display:none; }
  .bm-categoryselect { display:block;grid-column:1;grid-row:2;min-width:0;width:100%;height:44px;padding:0 8px;border:1.5px solid #12211b;border-radius:8px;background:var(--cream);color:var(--ink);font:700 13px var(--font); }
  .bm-bar { display:contents; }
  .bm-filterbtn { grid-column:2;grid-row:1;justify-self:end;width:100%;min-height:44px;padding:6px;font-size:13px; }
  .bm-sort { grid-column:2;grid-row:2;font-size:0;gap:0; }
  .bm-sort select { width:100%;max-width:none;font-size:12px; }
  .bm-count { display:none; }
  .bm-toolbar .bm-pinned { grid-column:1/-1;grid-row:3;min-width:0;flex-wrap:wrap; }
  .bm-clear { width:44px;height:44px;right:0;top:0;background:transparent; }
  .bm-search input { font-size:16px; }
  .bm-playerbar { grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:6px 8px; }
  .bm-playerbar .bm-search { grid-column:1;grid-row:1; }
  .bm-playerbar .btn { grid-column:2;grid-row:1;min-height:44px;font-size:12px;padding:6px; }
  .bm-playerbar select { height:44px;font-size:12px; }
  .bm-playerhint { font-size:11px;line-height:1.3;padding:5px 9px; }
  .bm-body > .bm-playerhint { display:none; }
  .bm-card { grid-template-columns:40px minmax(0,1fr) auto;gap:6px;min-height:68px; }
  .bm-cico { width:40px;height:40px; }
  .bm-cprice small { font-size:10px;white-space:normal;text-align:right; }
  .bm-cmain small { overflow-wrap:anywhere; }
  .bm-sheet-wrap { padding-top:8px; }
  .bm-sheet { max-height:calc(100% - 8px);padding:0; }
  .bm-sheet .bm-priceblock { gap:4px;margin-bottom:6px; }
  .bm-sheet .bm-priceblock > div { padding:5px 4px;min-width:0; }
  .bm-sheet .bm-priceblock b { font-size:13px;overflow-wrap:anywhere; }
  .bm-sheet .bm-total { min-width:0; }
  .bm-sheet .bm-qty button { width:44px;height:44px; }
  .bm-sheet .bm-qty input { width:48px;height:44px; }
  .bm-sheet .bm-pqty { display:flex;align-items:center;gap:6px;max-width:none; }
  .bm-sheet .bm-pqty input { margin:0;width:68px; }
  .bm-sheet .bm-filters { gap:8px; }
  .bm-sheet .bm-filters select,.bm-sheet .bm-filters input[type="number"] { height:44px; }
  .bm-sell { padding:8px;gap:8px; }
  .bm-stats { gap:6px; }
  .bm-stats > div { padding:6px 8px;border-width:1px;border-radius:8px; }
  .bm-stats b { font-size:17px; }
  .bm-sellbar { gap:6px; }
  .bm-sellbar .btn { min-height:44px;flex:1;min-width:0;padding:7px;font-size:12px;white-space:normal; }
  .bm-onlineinfo { padding:8px;gap:4px 8px;grid-template-columns:minmax(0,1fr) auto; }
  .bm-onlineinfo b { font-size:14px; }
  .bm-onlineinfo span { font-size:11px; }
  .bm-onlineinfo button { grid-column:2;grid-row:1/3;font-size:11px;padding:6px; }
  .bm-slot.empty { min-height:54px; }
  .bm-stall { padding:8px;gap:6px; }
  .bm-sacts .btn { flex:1;min-height:44px;min-width:0;padding:6px;font-size:12px;white-space:normal; }
}
@media (max-height:480px) and (min-width:600px) {
  .bm-head { padding:4px 8px; }
  .bm-chip { min-height:32px; }
  .bm-tabs { padding-inline:8px; }
  .bm-toolbar { grid-template-columns:minmax(0,1.4fr) 1fr 1fr 1fr; }
  .bm-toolbar .bm-search { grid-column:1; }
  .bm-filterbtn { grid-column:4; }
  .bm-categoryselect { grid-column:2;grid-row:1; }
  .bm-sort { grid-column:3;grid-row:1; }
  .bm-playerbar { grid-template-columns:minmax(0,1.5fr) 1fr 1fr 1fr; }
  .bm-playerbar .bm-search { grid-column:1; }
  .bm-playerbar .btn { grid-column:4; }
  .bm-playerbar select { grid-row:1; }
  .bm-sheet { width:min(620px,100%); }
  .bm-sheethead { padding-block:8px; }
  .bm-sheethead .bm-dhead .bm-tags { display:none; }
  .bm-sheetactions { padding-top:6px; }
  .bm-sheetactions:has(.bm-buybox) { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 12px;align-items:center; }
  .bm-sheetactions:has(.bm-buybox) .bm-buybox { margin:0; }
  .bm-sheetactions:has(.bm-buybox) .bm-err,.bm-sheetactions:has(.bm-buybox) .bm-shortage { grid-column:1/-1; }
  .bm-sheetactions .bm-total b { font-size:14px; }
}