/* Bản 246: 🏪 Chợ ký gửi - giống cửa sổ "Cửa Hàng Ký Gửi" trong game
   (khung + nền + nút lấy từ datas/interface/DATA/window_npc/autosell_main.bmp và DATA/etc/autosell_btn_*_over.bmp -> images/market/*.webp) */
.hk-mkg-page{--mkg-line:#74716d;--mkg-row:rgba(17,11,6,.9);--mkg-head1:#5d5855;--mkg-head2:#3c3732;--mkg-lav:#9a93b5;max-width:1000px;margin:0 auto;font-family:Tahoma,"Segoe UI",Arial,sans-serif;color:#fff}
.hk-mkg-page *,.hk-mkg-page *::before,.hk-mkg-page *::after{box-sizing:border-box}
.hk-mkg-page.is-embed{max-width:none;margin:0}
/* khung giấy da (border-image) + lòng vân da nâu */
.mkg{position:relative;border-style:solid;border-color:transparent;border-width:38px 17px 13px 18px;border-image:url(../images/market/mk-frame.webp) 38 17 13 18 stretch;
	background:#3a1f0a url(../images/market/mk-tex.webp) center/100% 100% no-repeat;background-clip:padding-box;padding:8px 14px 10px;min-width:0;
	text-shadow:-1px 0 0 #000,1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000;font-size:13px;line-height:1.3}
.mkg-title{position:absolute;left:-10px;top:-35px;margin:0;font:700 18px/32px Tahoma,"Segoe UI",Arial,sans-serif;color:#fff;letter-spacing:.01em;
	text-shadow:-2px 0 0 #222,2px 0 0 #222,0 -2px 0 #222,0 2px 0 #222,-1px -1px 0 #222,1px 1px 0 #222,-1px 1px 0 #222,1px -1px 0 #222;white-space:nowrap}
/* 4 nút lớn */
.mkg-btns{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 10px}
.mkg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:115px;height:32px;padding:0 14px;border:6px solid transparent;
	border-image:url(../images/market/mk-btn.webp) 6 fill / 6px stretch;background:none;color:#fff;font:400 17px/1 Tahoma,"Segoe UI",Arial,sans-serif;text-decoration:none;cursor:pointer;
	text-shadow:-1px 0 0 #000,1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000,1px 1px 1px #000}
.mkg-btn:hover,.mkg-btn:focus-visible,.mkg-btn.is-on{border-image-source:url(../images/market/mk-btn-over.webp);color:#fff;outline:0}
.mkg-btn.is-on{color:#ffe28a}
.mkg-btn:active{transform:translateY(1px)}
/* 5 ô phân loại */
.mkg-sels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:6px}
.mkg-sel{position:relative;display:block;min-width:0}
.mkg-sel::after{content:"";position:absolute;right:7px;top:50%;width:11px;height:7px;margin-top:-3px;background:#aba3cc;clip-path:polygon(0 0,100% 0,50% 100%);pointer-events:none}
.mkg-sel select{appearance:none;-webkit-appearance:none;width:100%;height:22px;padding:0 20px 0 6px;border:1px solid #6e6a78;border-radius:0;background:#000;color:#fff;font:12px/20px Tahoma,"Segoe UI",Arial,sans-serif;text-align:center;text-align-last:center;cursor:pointer;text-shadow:none}
.mkg-sel select:disabled{color:#8d8a86;cursor:default}
.mkg-sel select:focus-visible{outline:1px solid #cfc6f0}
.mkg-sel select option{background:#111;color:#fff}
.mkg-row2{display:flex;align-items:center;gap:8px;margin-bottom:10px;min-height:22px}
.mkg-chips{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.mkg-chip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border:1px solid var(--mkg-lav);border-radius:2px;background:#000c;font-size:12px}
.mkg-chip a{color:#ffb4a8;text-decoration:none}
.mkg-hint{font-size:12px;color:#ffe9a8}
.mkg-q{flex:0 1 192px;min-width:120px}
.mkg-q input{width:100%;height:22px;padding:0 6px;border:1px solid #6e6a78;background:#000;color:#fff;font:12px Tahoma,"Segoe UI",Arial,sans-serif;text-shadow:none}
.mkg-q input::placeholder{color:#8d8a86}
.mkg-q input:focus{outline:1px solid #cfc6f0}
.mkg-sbtn,.mkg-find{flex:none;height:20px;padding:0 5px;border:1px solid var(--mkg-lav);border-radius:2px;background:#0d0906;color:#fff;font:12px/18px Tahoma,"Segoe UI",Arial,sans-serif;cursor:pointer;
	text-shadow:-1px 0 0 #000,1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000}
.mkg-sbtn:hover,.mkg-find:hover,.mkg-sbtn:focus-visible,.mkg-find:focus-visible{background:#241a3a;border-color:#cfc6f0;outline:0}
/* bảng: như lưới trong game (tiêu đề xám, kẻ ô #74716d, dòng 33px) */
.mkg-tw{border:1px solid var(--mkg-line);background:var(--mkg-row);overflow-x:auto}
.mkg-t{width:100%;border-collapse:collapse;table-layout:fixed;min-width:560px}
.mkg-t th{height:23px;padding:0 4px;border:1px solid var(--mkg-line);border-top:0;background:linear-gradient(var(--mkg-head1),var(--mkg-head2));font-weight:400;font-size:13px;color:#fff;text-align:center;white-space:nowrap}
.mkg-t th:first-child,.mkg-t td:first-child{border-left:0}.mkg-t th:last-child,.mkg-t td:last-child{border-right:0}
.mkg-t th a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.mkg-t th a:hover{color:#ffe28a}
.mkg-lvh{display:inline-block;font-size:10px;line-height:9px;white-space:normal;width:2.7em}
.mkg-ar{display:inline-block;width:12px;height:7px;background:#f5c518;flex:none}
.mkg-ar.is-up{clip-path:polygon(50% 0,100% 100%,0 100%)}.mkg-ar.is-down{clip-path:polygon(0 0,100% 0,50% 100%)}.mkg-ar.is-off{clip-path:polygon(0 0,100% 0,50% 100%);opacity:.35}
.mkg-c-ic{width:36px}.mkg-t td.mkg-c-ic{padding:0 2px;text-overflow:clip}.mkg-c-lv{width:42px}.mkg-c-nm{width:auto}.mkg-c-sl{width:22%}.mkg-c-pr{width:31%}.mkg-c-bt{width:46px}
.mkg-t td{height:33px;padding:0 4px;border:1px solid var(--mkg-line);text-align:center;vertical-align:middle;font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkg-r:not(.is-blank):hover td,.mkg-r.is-open td{background:rgba(255,255,255,.05)}
.mkg-ico{position:relative;display:inline-flex;width:28px;height:28px;vertical-align:middle;border:1px solid #9c7b35;background:#000}
.mkg-ico img{width:100%;height:100%;object-fit:contain}
.mkg-ico i{position:absolute;left:1px;bottom:0;font:700 9px/1 Tahoma,Arial,sans-serif;font-style:normal;color:#f6d36b}
.mkg-nm{max-width:100%;padding:0;border:0;background:none;color:#fff;font:inherit;font-weight:700;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:inherit}
.mkg-nm:hover,.mkg-nm:focus-visible{text-decoration:underline;outline:0}
.mkg-nm.is-blue,.mkg-tip__nm.is-blue{color:#62a7ff}.mkg-nm.is-aqua,.mkg-tip__nm.is-aqua{color:#3fd7d0}
.mkg-c-sl a{color:#fff;text-decoration:none}.mkg-c-sl a:hover{color:#ffe28a;text-decoration:underline}
.mkg-pr{color:#7cc3b3}.mkg-pr.is-t2{color:#48de6c}.mkg-pr.is-t3{color:#ffd24a}
.mkg-unit{display:block;font-size:10.5px;font-weight:400;color:#cfc8b8;line-height:1.1}
.mkg-r.is-blank td{background:none}
.mkg-msg td{height:66px;color:#ffe9a8;font-weight:400;white-space:normal}
/* bảng thuộc tính (giống khung chú thích vật phẩm trong game) */
.mkg-det td{padding:6px 8px;border:1px solid var(--mkg-line);background:rgba(0,0,0,.55);text-align:left;white-space:normal}
.mkg-tip{display:flex;gap:10px;max-width:520px;padding:8px 10px;border:1px solid #6d6a5f;background:rgba(0,0,0,.86);border-radius:2px;font-weight:400}
.mkg-tip__ic{flex:none;width:42px;height:42px;border:1px solid #9c7b35;background:#000}
.mkg-tip__ic img{width:100%;height:100%;object-fit:contain}
.mkg-tip__bd{min-width:0;flex:1}
.mkg-tip__nm{display:block;font-size:13.5px;margin-bottom:3px;color:#fff}
.mkg-tip ul{margin:0;padding:0;list-style:none;font-size:12.5px;line-height:1.45;color:#d9d6cf}
.mkg-tip li.is-op{color:#9be8ff}.mkg-tip li.is-el{color:#ffcf5a}.mkg-tip li.is-tc{color:#3fd7d0}.mkg-tip li.is-dim{color:#a9a39a}
.mkg-tip__ft{margin:6px 0 0;padding-top:5px;border-top:1px solid #4a463d;font-size:12px;color:#d9d6cf}
/* phân trang: 2 mũi tên vàng + ô số trang */
.mkg-pager{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 2px}
.mkg-pa{display:inline-block;width:9px;height:15px;background:#ce8d00;text-decoration:none}
.mkg-pa.is-prev{clip-path:polygon(100% 0,100% 100%,0 50%)}.mkg-pa.is-next{clip-path:polygon(0 0,100% 50%,0 100%)}
.mkg-pa:hover{background:#ffd23a}.mkg-pa.is-off{opacity:.35}
.mkg-pn{display:inline-flex;align-items:center;justify-content:center;min-width:106px;height:20px;padding:0 8px;border:1px solid #a28c79;background:#130b05;font-size:12.5px;font-weight:700}
.mkg-stat{margin:4px 0 0;text-align:center;font-size:11.5px;color:#e6dcc6}
.mkg-empty{padding:28px 10px;text-align:center;color:#ffe9a8}
.mkg-note{margin:8px 2px 0;font-size:12px;color:#9aa4b2}
html:not(.dark) .mkg-note{color:#5b6472}
@media (max-width:820px){
	.mkg{padding:6px 8px 8px}
	.mkg-sels{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
	.mkg-btns{gap:6px}
	.mkg-btn{min-width:0;flex:1 1 calc(50% - 6px);font-size:15px}
}
/* điện thoại: mỗi món 1 thẻ (vẫn giữ màu / chữ như game) */
@media (max-width:600px){
	.mkg{border-width:38px 9px 9px 9px;border-image-slice:38 17 13 18;border-image-width:38px 9px 9px 9px}
	.mkg-title{left:-2px;font-size:16px}
	.mkg-sels{grid-template-columns:repeat(2,minmax(0,1fr))}
	.mkg-row2{flex-wrap:wrap}
	.mkg-q{flex:1 1 140px}
	.mkg-t{min-width:0;table-layout:auto}
	.mkg-t thead{display:none}
	.mkg-t,.mkg-t tbody{display:block}
	.mkg-r.is-blank{display:none}
	.mkg-r{display:grid;grid-template-columns:34px auto minmax(0,1fr) auto;grid-template-areas:"ic nm nm bt" "ic lv sl pr";column-gap:6px;row-gap:1px;padding:5px 6px;border-bottom:1px solid var(--mkg-line)}
	.mkg-r td{display:block;height:auto;padding:0;border:0;text-align:left;font-size:12.5px}
	.mkg-r .mkg-c-ic{grid-area:ic;align-self:center;width:auto}
	.mkg-r .mkg-c-lv{grid-area:lv;width:auto;font-weight:400;color:#e6dcc6}
	.mkg-r .mkg-c-lv::before{content:"Lv "}
	.mkg-r .mkg-c-nm{grid-area:nm;width:auto}
	.mkg-r .mkg-c-sl{grid-area:sl;width:auto;font-weight:400}
	.mkg-r .mkg-c-pr{grid-area:pr;width:auto;text-align:right}
	.mkg-r .mkg-c-bt{grid-area:bt;width:auto;text-align:right}
	.mkg-msg,.mkg-det{display:block}
	.mkg-msg td,.mkg-det td{display:block;height:auto;border:0;border-bottom:1px solid var(--mkg-line)}
	.mkg-det[hidden]{display:none}
}
/* bản 247 / 249: bấm lọc / sang trang -> bảng mờ đi, giữa màn hình hiện vòng xoay + "Đang tải…" (cố định giữa khung nhìn, trang dài vẫn thấy) */
.mkg.is-busy .mkg-tw,.mkg.is-busy .mkg-pager{opacity:.35;transition:opacity .12s}
.mkg.is-busy::before{content:attr(data-busy);position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;min-width:150px;padding:56px 22px 14px;border:1px solid #9c7b35;border-radius:6px;
	background:rgba(10,6,3,.9);box-shadow:0 8px 30px #000a;text-align:center;font-size:14px;font-weight:700;color:#ffe9a8;pointer-events:none}
.mkg.is-busy::after{content:"";position:fixed;left:50%;top:50%;width:34px;height:34px;margin:-36px 0 0 -17px;border:3px solid #f6d36b55;border-top-color:#f6d36b;border-radius:50%;animation:mkg-spin .7s linear infinite;z-index:21;pointer-events:none}
@keyframes mkg-spin{to{transform:rotate(360deg)}}