/* =====================================================================
   Cửa sổ nửa màn hình (1.25.52): Nhân vật · Hành trang · Thú cưng · Rương đồ · Trò chuyện
   Kiểu gỗ tối viền vàng như ảnh mẫu. Cửa sổ chỉ chiếm nửa màn hình, nửa còn lại vẫn thấy và chơi game.
   Mọi cửa sổ khác (Cửa hàng, Rèn, Chợ…) giữ kiểu cũ.
   ===================================================================== */
:root {
  --dk-bg1: #2c1e14; --dk-bg2: #150d08; --dk-line: #8a6838; --dk-line2: #4f3820;
  --dk-gold: #f0c878; --dk-gold2: #ffe7ac; --dk-text: #f2e2c4; --dk-dim: #b89d76; --dk-good: #8fe07a; --dk-bad: #ff7b6b;
  --dk-gap: 8px;
  --dkw: max(calc(50vw - 14px), min(440px, calc(100vw - 16px)));
  --dk-fs: 13px;
}
@media (max-height: 560px), (max-width: 900px) { :root { --dk-gap: 5px; --dk-fs: 11.5px; } }

/* ---------- Khung chung ---------- */
.window.dock { background: transparent !important; pointer-events: none; display: block !important; padding: 0 !important; z-index: 16; }
.window.dock[hidden] { display: none !important; }
.window.dock > .dk-wrap { pointer-events: auto; position: absolute; top: var(--dk-gap); bottom: var(--dk-gap); width: var(--dkw); display: flex; gap: 4px; font-size: var(--dk-fs); }
.dock-l > .dk-wrap, .dock-both > .dk-l { left: calc(var(--dk-gap) + var(--sl, 0px)); }
.dock-r > .dk-wrap, .dock-both > .dk-r { right: calc(var(--dk-gap) + var(--sr, 0px)); }
.dock-both > .dk-wrap { width: calc(50vw - var(--dk-gap) * 1.5 - (var(--sl, 0px) + var(--sr, 0px)) / 2); }
.dock-wide > .dk-wrap { width: max(var(--dkw), min(600px, calc(100vw - 16px))); }
/* Điện thoại dọc / màn rất hẹp: cửa sổ chiếm cả bề ngang */
@media (max-width: 640px) {
  .window.dock > .dk-wrap { width: calc(100vw - 2 * var(--dk-gap)) !important; left: var(--dk-gap) !important; right: auto !important; }
  .dock-both > .dk-r { display: none !important; }
}

.dk {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; border-radius: 7px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 196, 110, .07), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, var(--dk-bg1), var(--dk-bg2));
  border: 2px solid var(--dk-line);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 220, 150, .14), inset 0 0 26px rgba(0,0,0,.65), 0 10px 30px rgba(0,0,0,.55);
  color: var(--dk-text); text-shadow: 0 1px 1px #000;
}
.dk-title {
  position: relative; flex: 0 0 auto; height: 30px; display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 30px; color: var(--dk-gold2); font-weight: 800; font-size: 15px; letter-spacing: .4px;
  background: linear-gradient(90deg, transparent, rgba(120, 52, 18, .55) 18%, rgba(150, 66, 22, .75) 50%, rgba(120, 52, 18, .55) 82%, transparent);
  border-bottom: 1px solid rgba(240, 200, 120, .35);
}
.dk-title::before, .dk-title::after { content: ""; flex: 0 0 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--dk-gold)); }
.dk-title::after { background: linear-gradient(90deg, var(--dk-gold), transparent); }
.dk-title em { position: absolute; right: 6px; font-style: normal; font-size: 12px; color: var(--dk-gold); font-weight: 700; }
.dk-x {
  position: absolute; top: -9px; right: -9px; z-index: 5; width: 36px; height: 36px; padding: 0; border-radius: 6px; cursor: pointer;
  background: linear-gradient(180deg, #d84a2a, #8a1f10); border: 2px solid #f0c878; color: #fff3d6; font-size: 18px; font-weight: 900; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.3); text-shadow: 0 1px 2px #000;
}
.dk-x:hover { filter: brightness(1.12); }
.dk-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 9px 9px; }
.dk-box {
  min-height: 0; border-radius: 5px; background: rgba(0, 0, 0, .34); border: 1px solid var(--dk-line2);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, .05), inset 0 0 16px rgba(0, 0, 0, .55);
}
.dk-h { margin: 2px 0 6px; text-align: center; color: var(--dk-gold); font-size: 13px; font-weight: 800; letter-spacing: .3px; }
.dk-h::before, .dk-h::after { content: "◆"; font-size: 8px; color: #b8873e; margin: 0 8px; vertical-align: 2px; }
.dk-hint { margin: 0; color: var(--dk-dim); font-size: 11px; text-align: center; }

/* Thẻ ngang (Trang bị | Thông tin, lọc túi, kênh…) */
.dk-tabs { flex: 0 0 auto; display: flex; gap: 4px; }
.dk-tabs button {
  flex: 1 1 0; min-width: 0; height: 30px; padding: 0 6px; border-radius: 7px 7px 2px 2px; cursor: pointer; font: inherit; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, #4a3220, #26170d); border: 1px solid #6e4e2c; color: #cdb48a; text-shadow: 0 1px 1px #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.dk-tabs button.on {
  background: linear-gradient(180deg, #e08a45, #a5461a 55%, #7a2e10); border-color: #f0c878; color: #fff4d6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 8px rgba(240, 150, 60, .35);
}

/* Thẻ dọc bên trái cửa sổ (Trang bị · Ngoại trang · Thú cưỡi · Kỹ năng) */
.dk-side { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding-top: 36px; width: 98px; }
.dk-side button {
  height: 40px; padding: 0 6px; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 800; font-size: 13px;
  background: linear-gradient(180deg, #7a3418, #4a1c0c); border: 2px solid #9a6a36; color: #f4d8a0; text-shadow: 0 1px 2px #000;
  box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
.dk-side button.active {
  background: linear-gradient(180deg, #f0a050, #b5541c 55%, #85340f); border-color: #ffe0a0; color: #fff6dc;
  box-shadow: 0 0 10px rgba(255, 170, 70, .45), inset 0 1px 0 rgba(255,255,255,.4);
}
@media (max-height: 560px), (max-width: 900px) {
  .dk-side { width: 74px; gap: 4px; padding-top: 30px; }
  .dk-side button { height: 32px; font-size: 11.5px; padding: 0 3px; }
  .dk-title { height: 26px; font-size: 13.5px; margin: 0 26px; }
  .dk-x { width: 30px; height: 30px; font-size: 15px; top: -7px; right: -7px; }
  .dk-body { padding: 6px 7px 7px; gap: 5px; }
  .dk-tabs button { height: 26px; }
}

/* Nút trong cửa sổ nửa màn hình (khi quản trị chưa có ảnh nút riêng) */
.dk .pbtn { padding: 6px 12px; font-size: 12.5px; }
.dk .pbtn.sm { padding: 4px 9px; font-size: 11.5px; }

/* Ô vật phẩm / trang bị kiểu ô tối viền đồng */
.dk .inv-slot, .dk .eq {
  border-radius: 4px !important; background-color: #160d07 !important; border: 0 !important;
  box-shadow: inset 0 0 0 1px #6a4c2c, inset 0 0 0 2px #1d120a, inset 0 0 12px rgba(0,0,0,.85) !important;
}
.dk .inv-slot.sel { box-shadow: inset 0 0 0 2px #ffe08a, 0 0 8px rgba(255, 210, 110, .65) !important; }
.dk .inv-slot.drop-target { box-shadow: inset 0 0 0 2px #9be38a !important; }
.dk .inv-slot .q { font-size: 12px !important; }

/* =====================================================================
   Nhân vật
   ===================================================================== */
#win-character .dk-body { padding-top: 6px; }
#win-character .cw-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
#win-character .cw-pane[hidden] { display: none !important; }
.cw-eq {
  --eqs: clamp(40px, calc((100dvh - 238px) / 5.25), 70px);
  flex: 1 1 auto; display: grid; grid-template-columns: var(--eqs) minmax(0, 1fr) var(--eqs); grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px; padding: 8px;
}
.cw-eq[hidden], .cw-info[hidden] { display: none !important; }
.cw-eq .eq-col { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-height: 0; }
.cw-eq .eq {
  flex: 0 0 var(--eqs) !important; width: var(--eqs) !important; height: var(--eqs) !important; min-height: 0 !important; aspect-ratio: 1;
  font-size: 10.5px !important; line-height: 1.1; padding: 0 2px; color: #7d6650 !important; text-shadow: none !important; font-weight: 700;
}
.cw-eq .eq.has { color: transparent !important; }
.cw-eq .eq-center { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: relative; }
.cw-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: space-between; padding: 0 2px; }
.cw-top #cw-name { color: #fff2cf; font-size: 14px; font-weight: 800; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-top .cw-lvl { color: var(--dk-dim); font-weight: 700; }
.cw-top .cw-lvl b { color: var(--dk-gold2); }
.cw-top .cw-job { flex: 1 1 100%; color: #e58a5a; font-weight: 800; font-size: 12px; }
.cw-power { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.cw-power small { color: var(--dk-dim); font-size: 10.5px; }
.cw-power b { color: #ffd36a; font-size: 18px; font-weight: 900; text-shadow: 0 0 8px rgba(255, 170, 60, .55), 0 1px 2px #000; }
.cw-eq .cw-stage {
  flex: 1 1 auto; min-height: 60px; position: relative; border-radius: 6px;
  background: radial-gradient(60% 18% at 50% 92%, rgba(255, 200, 110, .28), transparent 70%), radial-gradient(70% 60% at 50% 55%, rgba(120, 70, 30, .35), transparent 70%);
}
.cw-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cw-stage canvas.flip { transform: scaleX(-1); }
.cw-turn { display: flex; align-items: center; justify-content: center; gap: 10px; }
.dk-rot {
  width: 30px; height: 30px; padding: 0; border-radius: 5px; cursor: pointer; font-size: 17px; font-weight: 900; line-height: 1;
  background: linear-gradient(180deg, #f0a24a, #a9551c); border: 2px solid #5a2c0e; color: #fff6dc; text-shadow: 0 1px 2px #000;
}
.cw-exp { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; padding: 6px 8px 4px; border-top: 1px solid rgba(240, 200, 120, .2); }
.cw-xprow { display: flex; justify-content: space-between; gap: 6px; }
.cw-xprow span { color: var(--dk-gold); font-weight: 700; }
.cw-xprow b { color: #fff; font-weight: 800; }
.cw-exp .xpline { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: rgba(0,0,0,.6); box-shadow: inset 0 0 0 1px #4f3820; overflow: hidden; margin-top: 3px; }
.cw-exp .xpline i { display: block; height: 100%; background: linear-gradient(90deg, #f6c744, #ffe795); }
/* Thông tin: bảng hai cột như ảnh mẫu */
.cw-info { flex: 1 1 auto; display: flex; flex-direction: column; padding: 8px 10px; }
.dk-stats { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; align-content: start; column-gap: 18px; row-gap: 0; }
.dk-stats .ds-cell { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 2px; border-bottom: 1px solid rgba(255, 220, 150, .06); }
.dk-stats .ds-cell span { color: var(--dk-gold); font-weight: 700; white-space: nowrap; }
.dk-stats .ds-cell b { color: #ffe9a8; font-weight: 800; text-align: right; }
.dk-stats .ds-cell.full { grid-column: 1 / -1; }
.dk-stats .ds-cell.full b { font-weight: 700; color: #e9d6b0; }
.dk-stats .ds-sep { grid-column: 1 / -1; height: 1px; margin: 4px 0; background: linear-gradient(90deg, transparent, rgba(240, 200, 120, .4), transparent); }
.cw-infofoot { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(240, 200, 120, .2); }
.cw-infofoot span { color: #f0a050; font-weight: 700; }
.cw-infofoot b { color: #fff; }
/* Ngoại trang */
#win-character .outfit-pane { padding: 8px; }
.outfit-pane .of-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.outfit-pane .so-h { margin: 0; color: var(--dk-gold); font-size: 14px; }
.outfit-pane .of-note { color: var(--dk-dim); font-size: 11px; }
.of-wrap { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 8px; }
.of-stage { position: relative; border-radius: 6px; background: radial-gradient(60% 18% at 50% 92%, rgba(255, 200, 110, .28), transparent 70%), rgba(0,0,0,.25); }
.outfit-pane .of-grid { min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; align-content: start; }
.outfit-pane .of-card { background: #1a110a !important; box-shadow: inset 0 0 0 1px #6a4c2c !important; border-radius: 6px !important; padding: 6px 4px !important; }
.outfit-pane .of-card.sel { box-shadow: inset 0 0 0 2px #ffe08a, 0 0 8px rgba(255, 210, 110, .5) !important; }
.outfit-pane .of-card b { color: #f2e2c4 !important; font-size: 11px !important; }
.outfit-pane .of-card small { color: var(--dk-dim) !important; font-size: 10px !important; }
.outfit-pane .of-foot { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding-top: 6px; border-top: 1px solid rgba(240, 200, 120, .2); }
.outfit-pane .of-info b { color: var(--dk-gold2) !important; }
.outfit-pane .of-info p { margin: 2px 0 0 !important; color: var(--dk-text) !important; font-size: 11.5px !important; font-weight: 600 !important; }
.outfit-pane .of-info small { color: var(--dk-dim) !important; }
/* Thú cưỡi: sắp ra mắt */
.mount-pane { align-items: center; justify-content: center; }
.mt-soon { text-align: center; max-width: 360px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mt-soon h3 { margin: 0; color: var(--dk-gold2); font-size: 18px; }
.mt-soon p { margin: 0; color: var(--dk-text); line-height: 1.5; }
.mt-art { width: 110px; height: 80px; opacity: .85; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 46' fill='none' stroke='%23f0c878' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 40l4-14c1-4 4-6 8-6h16c5 0 8-3 10-7l3-6 5 3-2 5c3 1 4 4 3 7l-3 2-4-1c-2 4-5 6-8 7l2 10M18 40l2-10M44 40l-2-9'/%3E%3Cpath d='M51 7l1-5M54 9l3-3'/%3E%3C/svg%3E"); }
.mt-tag { margin-top: 4px; padding: 4px 14px; border-radius: 12px; background: linear-gradient(180deg, #a5461a, #6a250c); border: 1px solid #f0c878; color: #fff1cc; font-weight: 800; }
/* Kỹ năng: bỏ hình nhân vật, chỉ còn ô kỹ năng (trái) + mô tả (phải) */
#win-character .skills-pane { flex-direction: row !important; gap: 8px; }
#win-character .skills-pane .sk-left { flex: 0 0 auto; width: min(46%, 290px); padding: 8px; display: flex; flex-direction: column; overflow: auto; }
#win-character .skills-pane .sk-right { flex: 1 1 auto; min-width: 0; padding: 10px; display: flex; flex-direction: column; color: var(--dk-text); overflow: hidden; }
#win-character .sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
#win-character .sk-cell {
  position: relative; aspect-ratio: 1; border-radius: 5px; border: 0; padding: 0; cursor: pointer; background: #160d07;
  box-shadow: inset 0 0 0 1px #6a4c2c, inset 0 0 10px rgba(0,0,0,.8);
}
#win-character .sk-cell i { position: absolute; inset: 3px; border-radius: 4px; background-size: cover; background-position: center; }
#win-character .sk-cell.sel { box-shadow: inset 0 0 0 2px #ffe08a, 0 0 8px rgba(255, 210, 110, .6); }
#win-character .sk-cell .n { position: absolute; right: 3px; bottom: 1px; z-index: 2; color: #fff; font-weight: 900; font-size: 11px; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#win-character .sk-cell.locked i { filter: grayscale(.85) brightness(.55); }
#win-character .sk-foot { margin: 6px 0 8px; text-align: center; color: var(--dk-dim); }
#win-character .sk-foot b { color: var(--dk-gold2); }
#win-character .sk-right .sd-body { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
#win-character .sk-right .sd-title { color: var(--dk-gold2) !important; font-size: 15px !important; margin: 0 0 6px !important; }
#win-character .sk-right .sd-desc { color: var(--dk-text) !important; line-height: 1.55; font-weight: 600 !important; margin: 0 0 6px !important; }
#win-character .sk-right .sd-line { color: #ffe9a8 !important; font-weight: 700 !important; }
#win-character .sk-right .sd-line.dim, #win-character .sk-right .sd-next-h { color: var(--dk-dim) !important; }
#win-character .sk-right .sd-line.next { color: var(--dk-good) !important; }
#win-character .sk-right .sd-sep { border-top: 1px dashed rgba(240, 200, 120, .3) !important; margin: 6px 0 !important; }
#win-character .sk-right .sd-need { color: var(--dk-good) !important; font-weight: 700; }
#win-character .sk-right .sd-need .bad { color: var(--dk-bad) !important; }
#win-character .sk-right .sd-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; }

/* =====================================================================
   Hành trang / Rương
   ===================================================================== */
.bag-body { gap: 6px; }
.bag-gridbox { flex: 1 1 auto; overflow: auto; padding: 7px; touch-action: pan-y; }
.dk .inv-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.bag-foot { flex: 0 0 auto; display: flex !important; flex-direction: column; gap: 5px; margin: 0 !important; text-shadow: 0 1px 1px #000 !important; color: var(--dk-text) !important; }
.bag-money { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 4px 14px; padding: 5px 8px; border-radius: 5px; background: rgba(0,0,0,.35); border: 1px solid var(--dk-line2); }
.bag-money span { display: inline-flex; align-items: center; gap: 4px; color: var(--dk-gold); font-weight: 700; white-space: nowrap; }
.bag-money b { color: #fff; font-weight: 800; }
.bag-money .bm-gold { justify-self: end; }
.bag-money .bm-gold b { color: #ffd36a; }
.bag-money .icon-gold { width: 18px; height: 18px; flex: 0 0 18px; background-size: contain; background-position: center; background-repeat: no-repeat; }
.bag-acts { display: flex; align-items: center; gap: 6px; }
.bag-acts > span:first-child { flex: 1 1 auto; color: var(--dk-dim); font-weight: 700; }
.bag-acts .pbtn { min-width: 86px; }
@media (max-height: 560px), (max-width: 900px) {
  .dk .inv-grid { gap: 4px; }
  .bag-money { padding: 3px 6px; gap: 2px 10px; }
  .bag-money .icon-gold { width: 15px; height: 15px; flex-basis: 15px; }
  .bag-acts .pbtn { min-width: 70px; }
}
/* Bảng chi tiết món đồ: cạnh cửa sổ (bên trái Hành trang / bên phải Nhân vật) */
.dk-wrap > #item-pop { position: absolute !important; top: 34px !important; bottom: auto !important; width: min(380px, calc(50vw - 30px)) !important; max-height: calc(100% - 44px); overflow: auto;
  transform: none !important; z-index: 6; }
.dk-wrap > #item-pop.at-l { right: calc(100% + 8px) !important; left: auto !important; }
.dk-wrap > #item-pop.at-r { left: calc(100% + 8px) !important; right: auto !important; }
@media (max-width: 640px) { .dk-wrap > #item-pop { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: calc(100% - 20px) !important; } }

/* Rương: cột chọn ngăn bên trái, lưới đồ, Vàng trong rương */
#win-storage .stor-body { gap: 6px; }
#win-storage .stor-main { flex: 1 1 auto; min-height: 0; display: flex; gap: 6px; }
#win-storage .stor-tabs { flex: 0 0 auto; display: flex !important; flex-direction: column; gap: 5px; width: 52px; margin: 0 !important; }
#win-storage .stor-tab { width: 52px !important; height: 52px !important; flex: 0 0 52px; padding: 4px !important; border-radius: 5px !important; background: #160d07 !important; border: 0 !important;
  box-shadow: inset 0 0 0 1px #6a4c2c, inset 0 0 10px rgba(0,0,0,.8) !important; }
#win-storage .stor-tab.active { box-shadow: inset 0 0 0 2px #ffe08a, 0 0 8px rgba(255, 210, 110, .6) !important; }
#win-storage .stor-tab.shut { opacity: .55; }
#win-storage .stor-tab .st-ic { width: 100%; height: 100%; display: block; background-size: contain; background-position: center; background-repeat: no-repeat; }
#win-storage .stor-gridbox { flex: 1 1 auto; overflow: auto; padding: 7px; touch-action: pan-y; }
#win-storage .stor-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
#win-storage .dk-r .stor-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
#win-storage .stor-foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; }
#win-storage .stor-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#win-storage .stor-cnt { color: var(--dk-dim); font-weight: 700; }
#win-storage .stor-cnt b, #win-storage .bag-acts b { color: #fff; }
#win-storage .stor-gold { display: flex !important; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 5px; background: rgba(0,0,0,.35); border: 1px solid var(--dk-line2); margin: 0 !important; }
#win-storage .stor-gold .sg-k { flex: 1 1 auto; color: var(--dk-gold); font-weight: 700; }
#win-storage .stor-gold .sg-v { display: inline-flex; align-items: center; gap: 4px; }
#win-storage .stor-gold .sg-v b { color: #ffd36a; font-weight: 800; }
#win-storage .stor-gold .icon-gold { width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; background-position: center; }
#win-storage .stor-gold .pbtn { min-width: 58px; }
@media (max-height: 560px), (max-width: 900px) {
  #win-storage .stor-tabs, #win-storage .stor-tab { width: 40px !important; }
  #win-storage .stor-tab { height: 40px !important; flex-basis: 40px; }
  #win-storage .dk-hint { display: none; }
}

/* =====================================================================
   Thú cưng
   ===================================================================== */
#win-pet .dk-body { padding: 8px; }
#pet-main.pvd { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; position: relative; }
#pet-main.pvd.pv-none { display: flex; align-items: center; justify-content: center; }
.pvd-empty { text-align: center; max-width: 360px; }
.pvd-empty b { color: var(--dk-gold2); font-size: 16px; }
.pvd-empty p { color: var(--dk-text); line-height: 1.5; }
.pvd-l, .pvd-r { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.pvd-show {
  position: relative; flex: 1 1 auto; min-height: 110px; border-radius: 6px; border: 1px solid var(--dk-line2);
  background: radial-gradient(55% 16% at 50% 90%, rgba(255, 200, 110, .3), transparent 70%), radial-gradient(80% 70% at 50% 50%, #2a2a3a, #0c0a10);
  box-shadow: inset 0 0 22px rgba(0,0,0,.8);
}
.pvd-show .pv-cv { position: absolute; left: 12%; right: 12%; top: 16%; bottom: 14%; width: 76%; height: 70%; object-fit: contain; }
.pvd-c { position: absolute; display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; font-weight: 800; }
.pvd-c.tl { left: 6px; top: 5px; }
.pvd-c.tr { right: 6px; top: 5px; align-items: flex-end; }
.pvd-c.bl { left: 6px; bottom: 5px; }
.pvd-c.br { right: 6px; bottom: 5px; align-items: flex-end; }
.pvd-c .ok { color: var(--dk-good); }
.pvd-c .bad { color: var(--dk-bad); }
.pvd-tier { font-size: 12.5px; }
.pvd-lv { color: var(--dk-gold2); padding: 1px 8px; border-radius: 10px; background: rgba(0,0,0,.55); border: 1px solid #6a4c2c; }
.pvd-nat { color: #c9b0ff; }
.pvd-joy { color: #ff9ab0; }
.pvd-joy.low { color: var(--dk-bad); }
.pvd-pow { color: #ffd36a; }
.pvd-name { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; max-width: 54%; }
.pvd-name b { color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvd-pen { width: 22px; height: 22px; padding: 0; border-radius: 4px; cursor: pointer; background: linear-gradient(180deg, #f0a24a, #a9551c); border: 1px solid #5a2c0e; color: #fff; font-size: 12px; line-height: 1; }
.pvd .pv-bound { font-style: normal; font-size: 10px; padding: 0 5px; border-radius: 8px; background: #5a3a1a; color: #ffe0a0; }
.pvd .pv-skbox { flex: 0 0 auto; }
.pvd .pv-skills { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.pvd .pv-sk { position: relative; aspect-ratio: 1; border-radius: 4px; background-color: #160d07; background-size: cover; background-position: center; cursor: pointer;
  box-shadow: inset 0 0 0 1px #6a4c2c, inset 0 0 10px rgba(0,0,0,.8); }
.pvd .pv-sk.shut { opacity: .35; cursor: default; }
.pvd .pv-sk.adv { box-shadow: inset 0 0 0 2px #f6c744, 0 0 6px rgba(246, 199, 68, .5); }
.pvd .pv-sk .star { position: absolute; right: 2px; top: 0; font-style: normal; font-size: 10px; color: #ffe066; text-shadow: 0 1px 2px #000; }
.pvd .pv-sk .lock { position: absolute; left: 1px; bottom: 0; font-style: normal; font-size: 11px; }
.pvd-acts { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 5px; align-items: stretch; }
.pvd-acts .pbtn { width: 100%; padding: 6px 4px; }
.pvd-acts .pbtn.big { font-size: 15px; }
.pvd-more { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pvd .pv-list { flex: 0 1 auto; min-height: 0; overflow: auto; max-height: 34%; }
.pvd .pv-ul { display: flex; flex-direction: column; gap: 3px; }
.pvd .pv-li { display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%; padding: 5px 8px; border-radius: 4px; cursor: pointer; font: inherit;
  background: linear-gradient(90deg, rgba(90, 60, 32, .55), rgba(40, 26, 14, .4)); border: 1px solid #4f3820; color: #e9d6b0; text-align: left; }
.pvd .pv-li::before { content: "▸"; color: #b8873e; margin-right: 2px; }
.pvd .pv-li.on { border-color: #f0c878; background: linear-gradient(90deg, rgba(160, 80, 30, .65), rgba(60, 30, 12, .5)); }
.pvd .pv-li .n { flex: 1 1 auto; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvd .pv-li small { color: var(--dk-dim); font-weight: 700; }
.pvd .pv-li small.on { color: var(--dk-good); }
.pvd .pv-li small.bad { color: var(--dk-bad); }
.pvd .pv-li.none, .pvd .pv-li.hold { justify-content: center; color: #7d6650; cursor: default; }
.pvd .pv-li.none::before, .pvd .pv-li.hold::before { content: none; }
.pvd-side { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.pvd-body { flex: 1 1 auto; min-height: 0; overflow: auto; border-radius: 5px; background: rgba(0,0,0,.34); border: 1px solid var(--dk-line2); padding: 4px 8px; }
.pvd-row { display: flex; align-items: center; gap: 6px; padding: 4px 2px; border-bottom: 1px solid rgba(255, 220, 150, .06); }
.pvd-row .k { flex: 1 1 auto; color: var(--dk-gold); font-weight: 700; white-space: nowrap; }
.pvd-row .v { color: #ffe9a8; font-weight: 800; }
.pvd-row .x { color: #6fd3ff; font-weight: 700; }
.pvd-row.apt .v { color: #ff9c4a; }
.pvd-row .pips { display: inline-flex; gap: 2px; }
.pvd-row .pips i { width: 7px; height: 7px; border-radius: 50%; background: #3a2a1a; box-shadow: inset 0 0 0 1px #6a4c2c; }
.pvd-row .pips i.on { background: #ffd36a; box-shadow: 0 0 4px rgba(255, 210, 100, .8); }
.pvd-total { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 4px -8px; padding: 8px 10px;
  background: linear-gradient(90deg, rgba(120, 30, 10, .65), rgba(60, 14, 6, .4)); border-top: 1px solid rgba(240, 120, 60, .5); border-bottom: 1px solid rgba(240, 120, 60, .5); }
.pvd-total > span { color: #fff1cc; font-weight: 800; font-size: 13.5px; }
.pvd-total .tv { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.pvd-total .tv b { font-size: 20px; font-weight: 900; color: #7dff6a; text-shadow: 0 0 8px rgba(120, 255, 100, .45), 0 1px 2px #000; }
.pvd-total .tv small { font-weight: 800; color: #7dff6a; }
.pvd-bonus { display: flex; flex-direction: column; gap: 2px; padding: 6px 2px 2px; }
.pvd-bonus .k { color: var(--dk-dim); font-weight: 700; }
.pvd-bonus b { color: var(--dk-good); font-weight: 800; }
.pvd-note { color: var(--dk-text); margin: 6px 0; }
.pvd .pv-tip { position: absolute; z-index: 8; width: min(260px, 70%); padding: 8px 10px; border-radius: 6px; background: #1e140c; border: 1px solid #f0c878; box-shadow: 0 6px 18px rgba(0,0,0,.6); color: var(--dk-text); }
.pvd .pv-tip b { color: var(--dk-gold2); }
.pvd .pv-tip small { color: var(--dk-dim); }
.pvd .pv-tip p { margin: 4px 0 0; line-height: 1.45; }
.pvd .pv-tip .tp-head { display: flex; gap: 8px; align-items: center; }
.pvd .pv-tip .tp-ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 4px; background-size: cover; }
.pvd .pv-tip .tp-up { color: var(--dk-good); }
/* Bảng Ngộ tính / Ép sách / Hoàn đồng khi mở ở Thầy Thuần Thú: chữ sáng trên nền tối */
.pvd-body .pv-panel { color: var(--dk-text); }
.pvd-body .pv-panel b { color: var(--dk-gold2); }
@media (max-height: 560px), (max-width: 900px) {
  .pvd-show { min-height: 84px; }
  .pvd-c { font-size: 10px; }
  .pvd-total .tv b { font-size: 16px; }
  .pvd-row { padding: 3px 1px; }
  .pvd-acts .pbtn.big { font-size: 13px; }
}

/* =====================================================================
   Trò chuyện mở rộng: nửa trái màn hình, kênh xếp dọc bên trái
   ===================================================================== */
#chat-panel.dk-chat {
  position: fixed !important; left: calc(var(--dk-gap) + var(--sl, 0px)) !important; top: var(--dk-gap) !important; bottom: var(--dk-gap) !important; right: auto !important;
  width: var(--dkw) !important; height: auto !important; max-height: none !important; z-index: 16 !important;
  display: flex !important; flex-direction: row !important; gap: 4px; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  font-size: var(--dk-fs);
}
#chat-panel.dk-chat[hidden] { display: none !important; }
#chat-panel.dk-chat .cp-head { order: 0 !important; flex: 0 0 auto; display: block !important; padding: 36px 0 0 !important; margin: 0 !important; background: none !important; border: 0 !important; }
#chat-panel.dk-chat .cp-tabs { display: flex !important; flex-direction: column !important; gap: 6px; width: 98px; overflow: visible !important; }
#chat-panel.dk-chat .cp-tabs button {
  height: 38px !important; width: 100%; padding: 0 4px !important; border-radius: 6px !important; cursor: pointer; font: inherit; font-weight: 800; font-size: 13px !important;
  background: linear-gradient(180deg, #7a3418, #4a1c0c) !important; border: 2px solid #9a6a36 !important; color: #f4d8a0 !important; text-shadow: 0 1px 2px #000 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.18) !important; border-image: none !important; filter: none !important;
}
#chat-panel.dk-chat .cp-tabs button.on {
  background: linear-gradient(180deg, #f0a050, #b5541c 55%, #85340f) !important; border-color: #ffe0a0 !important; color: #fff6dc !important;
  box-shadow: 0 0 10px rgba(255, 170, 70, .45), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
#chat-panel.dk-chat .cp-main {
  position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; border-radius: 7px; padding: 0 8px 8px;
  background: linear-gradient(180deg, rgba(36, 24, 16, .97), rgba(16, 10, 6, .97)); border: 2px solid var(--dk-line);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 220, 150, .14), inset 0 0 26px rgba(0,0,0,.65), 0 10px 30px rgba(0,0,0,.55);
}
#chat-panel.dk-chat .cp-title { position: relative; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--dk-gold2); font-weight: 800; font-size: 14px;
  border-bottom: 1px solid rgba(240, 200, 120, .3); margin: 0 -8px 6px; background: linear-gradient(90deg, transparent, rgba(150, 66, 22, .6), transparent); }
#chat-panel.dk-chat .cp-close { position: absolute !important; top: -9px !important; right: -9px !important; }
#chat-panel.dk-chat .chat-log { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; height: auto !important; overflow-y: auto; padding: 4px 6px !important;
  background: rgba(0,0,0,.34) !important; border: 1px solid var(--dk-line2); border-radius: 5px; line-height: 1.5; }
#chat-panel.dk-chat .chat-log .cl { color: #f0e2c6; text-shadow: 0 1px 1px #000; margin: 1px 0; }
#chat-panel.dk-chat .cp-form { display: flex !important; gap: 5px; margin-top: 6px !important; padding: 0 !important; background: none !important; }
#chat-panel.dk-chat .cp-form select, #chat-panel.dk-chat .cp-form input {
  height: 32px; border-radius: 5px; border: 1px solid #6a4c2c !important; background: #120a05 !important; color: #f2e2c4 !important; font: inherit; padding: 0 8px;
}
#chat-panel.dk-chat .cp-form input { flex: 1 1 auto; min-width: 0; }
@media (max-height: 560px), (max-width: 900px) {
  #chat-panel.dk-chat .cp-head { padding-top: 30px !important; }
  #chat-panel.dk-chat .cp-tabs { width: 74px; gap: 4px; }
  #chat-panel.dk-chat .cp-tabs button { height: 30px !important; font-size: 11.5px !important; }
  #chat-panel.dk-chat .cp-title { height: 26px; font-size: 13px; }
  #chat-panel.dk-chat .cp-form select, #chat-panel.dk-chat .cp-form input { height: 28px; }
}
@media (max-width: 640px) { #chat-panel.dk-chat { width: calc(100vw - 2 * var(--dk-gap)) !important; } }

/* Biểu tượng menu mới: Nhân vật, Hành trang */
.mi-char { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff3d6'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8z'/%3E%3C/svg%3E"); }
.mi-bag { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff3d6'%3E%3Cpath d='M9 6V5a3 3 0 0 1 6 0v1h3.2a1 1 0 0 1 1 .9l1.2 13a1 1 0 0 1-1 1.1H4.6a1 1 0 0 1-1-1.1l1.2-13a1 1 0 0 1 1-.9zm2 0h2V5a1 1 0 0 0-2 0z'/%3E%3C/svg%3E"); }

/* ---------- Sửa chồng kiểu cũ ---------- */
#win-character #char-stats.dk-stats { align-content: start !important; gap: 0 18px !important; padding: 0 !important; }
.cw-eq { --eqs: clamp(40px, calc((100dvh - 238px) / 5.25), 84px); }
.window.dock.dock-wide > .dk-wrap { width: max(var(--dkw), min(620px, calc(100vw - 16px))); }
@media (max-width: 640px) { .window.dock.dock-wide > .dk-wrap { width: calc(100vw - 2 * var(--dk-gap)) !important; } }
.dk .bag-foot { align-items: stretch !important; justify-content: flex-start !important; }
.dk .bag-money { justify-content: stretch; }
@media (max-height: 560px), (max-width: 900px) { .dk-side button { white-space: nowrap; letter-spacing: -.2px; font-size: 11px; } }
/* Kỹ năng: lưới 3 cột co theo khung */
#win-character .skills-pane .sk-left { --skc: clamp(38px, calc((100dvh - 250px) / 4.6), 68px); align-items: center; }
#win-character .sk-left .sk-grid, #win-character .sk-left #pot-grid, #win-character .sk-left #skl-grid {
  grid-template-columns: repeat(3, var(--skc)) !important; grid-auto-rows: var(--skc) !important; gap: 6px !important; margin: 0 0 4px !important; justify-content: center; }
#win-character .sk-left .sk-cell { width: var(--skc) !important; height: var(--skc) !important; aspect-ratio: auto; }
/* Thú cưng: bỏ nền giấy của bảng cũ */
.pvd .pv-skbox, .pvd .pv-list { background: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
.pvd .pv-li { flex: 0 0 auto !important; max-height: none !important; min-height: 28px; font-size: inherit !important;
  background: linear-gradient(90deg, rgba(90, 60, 32, .55), rgba(40, 26, 14, .4)) !important; border: 1px solid #4f3820 !important; color: #e9d6b0 !important; box-shadow: none !important; }
.pvd .pv-li.on { border-color: #f0c878 !important; background: linear-gradient(90deg, rgba(160, 80, 30, .7), rgba(60, 30, 12, .5)) !important; }
.pvd .pv-li small { font-size: 11px !important; color: var(--dk-dim) !important; }
.pvd .pv-li small.on { color: var(--dk-good) !important; }
.pvd .pv-li small.bad { color: var(--dk-bad) !important; }
.pvd-acts { grid-template-columns: 1fr 1.25fr 1fr 1fr !important; }
.pvd-acts .pbtn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvd .pv-sk { font-size: 11px; color: transparent; }
/* Trò chuyện: bỏ dịch chuyển của kiểu cũ */
#chat-panel.dk-chat { transform: none !important; overflow: visible !important; }
body.kb-open #chat-panel.dk-chat { bottom: calc(var(--kbh, 0px) + 4px) !important; }
/* Bảng chi tiết món đồ cạnh cửa sổ tối: cùng kiểu gỗ tối */
.dk-wrap > #item-pop { background: linear-gradient(180deg, #2c1e14, #150d08) !important; border: 2px solid var(--dk-line) !important; color: var(--dk-text) !important;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 220, 150, .14), 0 10px 30px rgba(0,0,0,.6) !important; }
.dk-wrap > #item-pop .ip-htext small, .dk-wrap > #item-pop small { color: var(--dk-dim) !important; }
.dk-wrap > #item-pop #ip-desc, .dk-wrap > #item-pop p, .dk-wrap > #item-pop .ip-lines, .dk-wrap > #item-pop .ip-stats li, .dk-wrap > #item-pop .ip-body { color: var(--dk-text) !important; }
.dk-wrap > #item-pop .ip-body h4, .dk-wrap > #item-pop .ip-sec, .dk-wrap > #item-pop .ip-body b { color: var(--dk-gold) !important; }
.dk-wrap > #item-pop .ip-icon { background-color: #160d07 !important; box-shadow: inset 0 0 0 1px #6a4c2c !important; }
.dk-wrap > #item-pop .ii-about { color: #d8c3a0 !important; }
.dk-wrap > #item-pop .ii-h { color: var(--dk-gold) !important; border-bottom-color: rgba(240, 200, 120, .3) !important; }
.dk-wrap > #item-pop .ii-list li { color: var(--dk-text) !important; }
.dk-wrap > #item-pop .ii-list li.bad { color: var(--dk-bad) !important; }
.dk-wrap > #item-pop .ii-stats .ii-list li { color: #ffd860 !important; }
.dk-wrap > #item-pop .ii-stats .ii-list li::before { background: #ffd860 !important; }
.dk-wrap > #item-pop .ii-list li::before { background: #c9954a; }
.pvd .pv-skills { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; justify-content: stretch !important; gap: 5px !important; }
.pvd .pv-sk { width: auto !important; height: auto !important; aspect-ratio: 1; background-color: #160d07 !important; background-size: cover !important; border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px #6a4c2c, inset 0 0 10px rgba(0,0,0,.8) !important; }
.pvd .pv-sk.empty { background: #160d07 !important; }
.pvd .pv-sk.shut { background: #0c0704 !important; opacity: .45; }
.pvd .pv-sk.adv, .pvd .pv-sk.own { box-shadow: inset 0 0 0 2px #ffd23a, 0 0 6px rgba(255, 200, 40, .6) !important; }
.pvd-acts .pbtn { min-height: 32px; font-size: 12.5px !important; }
.pvd-acts .pbtn.big { font-size: 14px !important; }
@media (max-height: 560px), (max-width: 900px) { .pvd-acts .pbtn { min-height: 28px; font-size: 11.5px !important; padding: 3px 4px !important; } .pvd-acts .pbtn.big { font-size: 12.5px !important; } }
.pvd-acts.two { grid-template-columns: 2fr 1fr !important; }
.pvd-acts .pbtn { overflow: visible !important; line-height: 1.3 !important; }
/* Cửa sổ nửa phải nằm dưới thanh nút góc trên phải (Menu, Toàn màn hình…) để vẫn bấm được */
.window.dock.dock-r > .dk-wrap, .window.dock.dock-both > .dk-r { top: 54px; }
@media (max-height: 560px), (max-width: 900px) { .window.dock.dock-r > .dk-wrap, .window.dock.dock-both > .dk-r { top: 44px; } }
.menu-grid { z-index: 18 !important; }
.window.dock.dock-both > .dk-wrap { width: calc(50vw - var(--dk-gap) * 1.5 - (var(--sl, 0px) + var(--sr, 0px)) / 2); }
@media (max-width: 640px) { .window.dock.dock-both > .dk-l { width: calc(100vw - 2 * var(--dk-gap)) !important; } }
.cw-eq { --eqs: clamp(40px, min(calc((100dvh - 238px) / 5.25), 7.2vw), 84px); }
.cw-turn .pbtn { white-space: nowrap; }

/* =================== Khung nhân vật kiểu ảnh mẫu (1.25.52) =================== */
/* Ảnh mặt vuông viền vàng, huy hiệu cấp góc dưới trái, dải tên, thanh máu đỏ · phép xanh mảnh,
   nhãn trạng thái PK + hàng hiệu ứng ngay dưới; khung thú cưng và đồng đội xếp dọc bên dưới. */
#hud.hud2 .hud-plate {
  --av: 64px;
  display: block !important; position: absolute !important; left: calc(8px + var(--sl, 0px)) !important; top: 6px !important;
  width: 262px !important; height: var(--av) !important; padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; transform: none !important; container-type: normal !important;
}
#hud.hud2 .hud-plate::after { display: none !important; }
#hud.hud2 .hud-plate[hidden] { display: none !important; }
#hud.hud2 .hud-plate .avatar {
  position: absolute !important; left: 0 !important; top: 0 !important; width: var(--av) !important; height: var(--av) !important; flex: none !important;
  border-radius: 6px !important; overflow: hidden; z-index: 1;
  background: radial-gradient(circle at 50% 30%, #5a4430, #1a1009 75%) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,.6) !important; transform: none !important;
}
#hud.hud2 .hud-plate .avatar-ring {
  display: block !important; position: absolute !important; left: -3px !important; top: -3px !important; margin: 0 !important;
  width: calc(var(--av) + 6px) !important; height: calc(var(--av) + 6px) !important; z-index: 2; border-radius: 8px;
  border: 2px solid #e8b860; box-shadow: inset 0 0 0 1px #5a3410, 0 0 0 1px #3a2008, inset 0 0 10px rgba(0,0,0,.55);
  background: none; pointer-events: none;
}
#hud.hud2 .hud-plate .lv-badge {
  position: absolute !important; left: -4px !important; top: auto !important; bottom: -6px !important; z-index: 3;
  width: auto !important; min-width: 26px; height: 18px !important; padding: 0 5px; border-radius: 9px !important;
  display: grid; place-items: center; background: linear-gradient(180deg, #6a3a14, #2a1606) !important;
  box-shadow: 0 0 0 1.5px #f0c878, 0 2px 4px rgba(0,0,0,.6) !important;
}
#hud.hud2 .hud-plate .lv-badge::before, #hud.hud2 .hud-plate .lv-badge::after { display: none !important; }
#hud.hud2 .hud-plate .lv-badge b { font-size: 12px !important; line-height: 1 !important; color: #fff6dc !important; font-weight: 900; text-shadow: 0 1px 1px #000; -webkit-text-stroke: 0 !important; }
#hud.hud2 .hud-plate .plate-body {
  position: absolute !important; left: calc(var(--av) + 6px) !important; top: 1px !important; right: 0 !important; bottom: auto !important;
  inset: auto; margin: 0 !important; padding: 0 !important; min-width: 0 !important; z-index: 1;
  display: flex !important; flex-direction: column; gap: 3px; background: none !important; clip-path: none !important; filter: none;
}
#hud.hud2 .hud-plate .pname {
  position: static !important; display: block !important; width: auto !important; height: 20px !important;
  padding: 0 20px 0 9px !important; font-size: 13px !important; line-height: 20px !important; font-weight: 800; color: #fff3d0 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000;
  background: linear-gradient(90deg, rgba(110,30,14,.95), rgba(70,22,10,.9) 60%, rgba(40,14,6,0)) !important;
  border-top: 1px solid rgba(240,200,120,.7); border-bottom: 1px solid rgba(240,200,120,.45);
}
#hud.hud2 .hud-plate .pbar {
  position: relative !important; left: auto !important; top: auto !important; width: auto !important; margin: 0 14px 0 0 !important;
  height: 11px !important; border: 1px solid #000 !important; border-radius: 2px !important; clip-path: none !important;
  background: rgba(14,8,4,.85) !important; box-shadow: 0 0 0 1px rgba(240,200,120,.35) !important; border-image: none !important; overflow: hidden;
}
#hud.hud2 .hud-plate .pbar em {
  display: block !important; position: absolute; inset: 0; font-size: 9px !important; line-height: 10px !important; font-weight: 800;
  letter-spacing: .2px; color: #fff; text-shadow: 0 0 2px #000, 0 1px 1px #000;
}
#hud.hud2 .hud-plate .pbar.hp i { background: linear-gradient(180deg, #ff8a72, #d4321e 55%, #8e140a); }
#hud.hud2 .hud-plate .pbar.mp { height: 9px !important; }
#hud.hud2 .hud-plate .pbar.mp em { line-height: 8px !important; font-size: 8px !important; }
#hud.hud2 .hud-plate .pbar.mp i { background: linear-gradient(180deg, #8fd0ff, #2a7fe0 55%, #154c9a); }
#hud.hud2 .hud-plate .pbar.xp { height: 4px !important; margin-top: -1px !important; box-shadow: none !important; background: rgba(0,0,0,.6) !important; }
#hud.hud2 .hud-plate .pbar.xp i { background: linear-gradient(180deg, #ffe58a, #d99a20); }
#hud.hud2 .hud-plate:hover .avatar { filter: brightness(1.1); }
#hud.hud2 .hud-plate:active .avatar { transform: scale(.97) !important; }

/* Nhãn trạng thái PK (dưới thanh phép, vị trí do ui.placeHud2 đặt) */
#hud.hud2 .pk-state {
  position: absolute; z-index: 7; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 8px 0 4px;
  border-radius: 9px; border: 1px solid #1f4a26; cursor: pointer; font: 700 11px/1 inherit; color: #eaffea; white-space: nowrap;
  background: linear-gradient(180deg, #4a9a52, #23602b); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 3px rgba(0,0,0,.5);
  text-shadow: 0 1px 1px #000;
}
#hud.hud2 .pk-state[hidden] { display: none; }
#hud.hud2 .pk-state i { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d8ffd8, #55b860); box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
#hud.hud2 .pk-state.img i { width: 14px; height: 14px; border-radius: 0; box-shadow: none; background: var(--pkimg) center / contain no-repeat; }
#hud.hud2 .pk-state.on { border-color: #4a0c06; color: #fff; background: linear-gradient(180deg, #d8503a, #8a1c10); animation: pkGlow 1.6s ease-in-out infinite; }
#hud.hud2 .pk-state.on:not(.img) i { background: radial-gradient(circle at 40% 35%, #ffd8c8, #e0442a); }
#hud.hud2 .pk-state.jail { border-color: #222; color: #ddd; background: linear-gradient(180deg, #6a6a6a, #333); }
#hud.hud2 .pk-state.jail:not(.img) i { background: radial-gradient(circle at 40% 35%, #eee, #777); }
/* Nút khiên PK góc phải không cần nữa (đã có nhãn trạng thái dưới tên) */
#hud.hud2 ~ * .pk-pill, .hud2 .top-right .pk-pill, body:has(#hud.hud2) .top-right .pk-pill { display: none !important; }

/* Khung thú cưng: cùng kiểu, nhỏ hơn, không thu phóng */
#hud.hud2 #pet-plate.pet-mini { --av: 42px; width: 196px !important; transform: none !important; z-index: 3; }
#hud.hud2 #pet-plate .plate-body { gap: 2px; top: 0 !important; }
#hud.hud2 #pet-plate .pname { height: 16px !important; line-height: 16px !important; font-size: 11px !important; padding-left: 7px !important; }
#hud.hud2 #pet-plate .pbar { height: 9px !important; }
#hud.hud2 #pet-plate .pbar em { font-size: 8px !important; line-height: 8px !important; }
#hud.hud2 #pet-plate .pbar.mp { height: 8px !important; }
#hud.hud2 #pet-plate .pbar.mp em { line-height: 7px !important; }
#hud.hud2 #pet-plate .pbar.xp { height: 3px !important; margin-top: 0 !important; }
#hud.hud2 #pet-plate .lv-badge { min-width: 20px; height: 15px !important; bottom: -5px !important; padding: 0 4px; }
#hud.hud2 #pet-plate .lv-badge b { font-size: 10px !important; }
#hud.hud2 #pet-plate .avatar-ring { border-width: 1.5px; }

/* Khung người chơi đang chọn: cùng kiểu, giữa phía trên */
#hud.hud2 .hud-plate.tplate { --av: 50px; width: 220px !important; left: 38% !important; top: 54px !important; transform: translateX(-30%) !important; z-index: 6; }
#hud.hud2 .hud-plate.tplate .pname { height: 17px !important; line-height: 17px !important; font-size: 12px !important; }
#hud.hud2 .hud-plate.tplate .pbar.xp { display: none !important; }
.in-dungeon #hud.hud2 .hud-plate.tplate, .in-arena #hud.hud2 .hud-plate.tplate { top: 96px !important; }

/* Đồng đội: khung nhỏ xếp dọc */
#hud.hud2 .party-plates { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 5px; width: 196px; pointer-events: auto; }
#hud.hud2 .party-plates[hidden] { display: none; }
.pt-plate { position: relative; display: block; height: 40px; padding: 0 0 0 46px; cursor: pointer; }
.pt-plate .pt-av { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 5px; overflow: hidden; background: radial-gradient(circle at 50% 30%, #5a4430, #1a1009 75%); box-shadow: 0 0 0 1.5px #c99a50, 0 2px 5px rgba(0,0,0,.6); }
.pt-plate .pt-av canvas { width: 100%; height: 100%; display: block; }
.pt-plate .pt-lv { position: absolute; left: -3px; bottom: -4px; z-index: 2; min-width: 18px; height: 14px; padding: 0 3px; border-radius: 7px; display: grid; place-items: center; font: 900 9px/1 inherit; color: #fff6dc; background: linear-gradient(180deg, #6a3a14, #2a1606); box-shadow: 0 0 0 1px #f0c878; }
.pt-plate .pt-crown { position: absolute; left: 30px; top: -5px; z-index: 2; width: 14px; height: 10px; background: #f0c040; clip-path: polygon(0 100%, 0 20%, 25% 60%, 50% 0, 75% 60%, 100% 20%, 100% 100%); filter: drop-shadow(0 1px 1px #000); }
.pt-plate .pt-info { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.pt-plate .pt-name { font-size: 11px; font-weight: 800; color: #fff3d0; line-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; padding-left: 6px; background: linear-gradient(90deg, rgba(70,22,10,.85), rgba(40,14,6,0)); }
.pt-plate .pt-map { font-size: 9.5px; line-height: 11px; color: #e8d6a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px #000; padding-left: 6px; }
.pt-plate .pt-map.far { color: #a89a80; }
.pt-plate .pt-bar { position: relative; height: 5px; margin-right: 10px; border: 1px solid #000; border-radius: 2px; background: rgba(14,8,4,.85); overflow: hidden; }
.pt-plate .pt-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #ff8a72, #d4321e 55%, #8e140a); transition: width .25s; }
.pt-plate .pt-bar.mp { height: 4px; }
.pt-plate .pt-bar.mp i { background: linear-gradient(180deg, #8fd0ff, #2a7fe0 55%, #154c9a); }
.pt-plate.off { opacity: .6; filter: grayscale(.6); }

/* Màn hình nhỏ / điện thoại ngang */
@media (max-height: 560px), (max-width: 900px) {
  #hud.hud2 .hud-plate { --av: 50px; width: 214px !important; top: 4px !important; }
  #hud.hud2 .hud-plate .pname { height: 17px !important; line-height: 17px !important; font-size: 11.5px !important; }
  #hud.hud2 .hud-plate .plate-body { gap: 2px; }
  #hud.hud2 .hud-plate .pbar { height: 10px !important; }
  #hud.hud2 .hud-plate .pbar em { font-size: 8px !important; line-height: 9px !important; }
  #hud.hud2 .hud-plate .pbar.mp { height: 8px !important; }
  #hud.hud2 .hud-plate .pbar.mp em { font-size: 7px !important; line-height: 7px !important; }
  #hud.hud2 .hud-plate .pbar.xp { height: 3px !important; }
  #hud.hud2 .hud-plate .lv-badge { height: 16px !important; min-width: 22px; bottom: -5px !important; }
  #hud.hud2 .hud-plate .lv-badge b { font-size: 10.5px !important; }
  #hud.hud2 #pet-plate.pet-mini { --av: 36px; width: 168px !important; }
  #hud.hud2 #pet-plate .pname { height: 14px !important; line-height: 14px !important; font-size: 10px !important; }
  #hud.hud2 #pet-plate .pbar { height: 8px !important; }
  #hud.hud2 #pet-plate .pbar.mp { height: 7px !important; }
  #hud.hud2 #pet-plate .pbar em { font-size: 7px !important; line-height: 7px !important; }
  #hud.hud2 .hud-plate.tplate { --av: 42px; width: 186px !important; left: 34% !important; top: 42px !important; }
  .in-dungeon #hud.hud2 .hud-plate.tplate, .in-arena #hud.hud2 .hud-plate.tplate { top: 74px !important; }
  #hud.hud2 .pk-state { height: 16px; font-size: 10px; padding: 0 6px 0 3px; }
  #hud.hud2 .pk-state i { width: 10px; height: 10px; }
  #hud.hud2 .party-plates { width: 168px; gap: 4px; }
  .pt-plate { height: 34px; padding-left: 40px; }
  .pt-plate .pt-av { width: 34px; height: 34px; }
  .pt-plate .pt-crown { left: 25px; }
  .pt-plate .pt-name { font-size: 10px; line-height: 12px; }
  .pt-plate .pt-map { font-size: 8.5px; line-height: 10px; }
  .pt-plate .pt-bar { height: 4px; }
  .pt-plate .pt-bar.mp { height: 3px; }
}
.pt-plate .pt-top { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pt-plate .pt-name, .pt-plate .pt-map { display: block; }
.pt-plate.away .pt-map { color: #b8a888; font-style: italic; }
.pt-plate.dead { filter: grayscale(.8); opacity: .7; }
.pt-plate.dead .pt-map { color: #ff9a8a; }
#hud.hud2 .party-plates { gap: 9px; }
@media (max-height: 560px), (max-width: 900px) {
  #hud.hud2 .party-plates { gap: 7px; }
  .pt-plate { height: 30px; padding-left: 35px; }
  .pt-plate .pt-av { width: 30px; height: 30px; }
  .pt-plate .pt-lv { min-width: 16px; height: 12px; font-size: 8px; bottom: -3px; }
  .pt-plate .pt-crown { left: 21px; top: -4px; width: 11px; height: 8px; }
  .pt-plate .pt-info { gap: 1px; padding-top: 0; }
  .pt-plate .pt-name { font-size: 9.5px; line-height: 11px; }
  .pt-plate .pt-map { font-size: 8px; line-height: 9px; }
  .pt-plate .pt-bar { height: 3px; }
  .pt-plate .pt-bar.mp { display: none; }
}

/* =================== Cửa sổ Nhiệm vụ kiểu ảnh mẫu (1.25.52) =================== */
.dk-tabs button.active { background: linear-gradient(180deg, #e08a45, #a5461a 55%, #7a2e10); border-color: #f0c878; color: #fff4d6; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 8px rgba(240,150,60,.35); }
.dk-tabs button { position: relative; }
.dk-tabs button .dot-badge { position: absolute; top: 2px; right: 3px; }
#win-quest.dock .dk-body { gap: 6px; }
#win-quest.dock .qw-body { flex: 1 1 auto; min-height: 0; display: flex !important; flex-direction: column; gap: 6px; padding: 0 !important; margin: 0 !important; background: none !important; grid-template-columns: none !important; }
#win-quest.dock .qw-body[hidden] { display: none !important; }
/* Cây nhiệm vụ */
#win-quest.dock .qw-tree { flex: 1 1 52%; overflow-y: auto; padding: 5px; display: flex; flex-direction: column; gap: 2px; }
.qw-grp-h {
  display: flex; align-items: center; gap: 6px; width: 100%; height: 26px; padding: 0 8px; cursor: pointer; text-align: left;
  font: inherit; font-weight: 800; color: var(--dk-gold); background: linear-gradient(90deg, rgba(120,60,24,.55), rgba(60,30,12,.15)); border: 0; border-radius: 3px; text-shadow: 0 1px 1px #000;
}
.qw-grp-h span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qw-grp-h small { color: var(--dk-dim); font-weight: 700; }
.qw-caret { width: 0; height: 0; border-left: 6px solid var(--dk-gold); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; transition: transform .15s; }
.qw-grp.open .qw-caret { transform: rotate(90deg); }
.qw-leaf {
  display: flex; align-items: baseline; gap: 6px; width: 100%; min-height: 26px; padding: 4px 8px 4px 22px; cursor: pointer; text-align: left;
  font: inherit; color: var(--dk-text); background: transparent; border: 0; border-radius: 3px; text-shadow: 0 1px 1px #000;
}
.qw-leaf:hover { background: rgba(255,220,150,.07); }
.qw-leaf.sel { background: linear-gradient(90deg, rgba(240,170,80,.32), rgba(240,170,80,.06)); box-shadow: inset 2px 0 0 var(--dk-gold); }
.qw-leaf .qw-lv { flex: 0 0 auto; font-style: normal; font-weight: 800; color: #9fd0ff; font-variant-numeric: tabular-nums; }
.qw-leaf b { flex: 1 1 auto; min-width: 0; font-weight: 700; color: #ffe9b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qw-leaf small { flex: 0 0 auto; font-weight: 700; font-size: .92em; }
.qw-leaf small.prog { color: #ffd479; }
.qw-leaf small.ok, .qw-leaf.ready b { color: var(--dk-good); }
.qw-leaf small.bad { color: var(--dk-bad); }
.qw-leaf small.dim { color: var(--dk-dim); }
.qw-leaf.low b, .qw-leaf.low .qw-lv { color: #9a8a70; }
.qw-empty { margin: 14px 10px; color: var(--dk-dim); text-align: center; line-height: 1.5; }
/* Mô tả nhiệm vụ */
#win-quest.dock .qw-detail { flex: 1 1 48%; min-height: 0; overflow-y: auto; padding: 8px 10px !important; color: var(--dk-text) !important; }
#win-quest.dock .qw-detail * { text-shadow: 0 1px 1px #000 !important; }
#win-quest.dock .qw-chap { color: var(--dk-dim) !important; font-size: .9em; font-weight: 700; text-transform: none; letter-spacing: 0; }
#win-quest.dock .qw-title { margin: 2px 0 4px !important; color: var(--dk-gold2) !important; font-size: 1.12em; font-weight: 900 !important; }
#win-quest.dock .qw-desc { margin: 0 0 6px; color: #ead8b4 !important; font-weight: 600 !important; line-height: 1.5; }
#win-quest.dock .qw-desc.dim { color: var(--dk-dim) !important; text-align: center; margin-top: 16px; }
#win-quest.dock .qw-line { color: var(--dk-text) !important; font-weight: 600; line-height: 1.6; }
#win-quest.dock .qw-line .k { color: #ffd479 !important; font-weight: 800; }
#win-quest.dock .qw-line .v { color: var(--dk-text); }
#win-quest.dock .qw-line.goal .v { color: var(--dk-good) !important; font-weight: 800; }
#win-quest.dock .qw-line.bad .v { color: var(--dk-bad) !important; }
#win-quest.dock .qw-hint { margin: 6px 0 0; color: #c9b48c !important; font-weight: 600; line-height: 1.5; font-style: italic; }
#win-quest.dock .qw-sep { border-top: 1px solid rgba(240,200,120,.22) !important; margin: 6px 0 !important; }
#win-quest.dock .qw-rw-h { margin: 8px 0 4px; color: var(--dk-gold) !important; font-weight: 800; text-align: left; }
#win-quest.dock .qw-rw { justify-content: flex-start; }
#win-quest.dock .qw-detail .qw-rw .rw-cell { width: 46px; height: 46px; flex: 0 0 46px; }
/* Chân cửa sổ: nút làm nhiệm vụ + Đóng */
.qw-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 32px; }
.qw-acts { flex: 1 1 auto; display: flex; gap: 6px; justify-content: flex-start; min-width: 0; }
.qw-acts .pbtn, .qw-foot .qw-close { min-width: 96px; height: 30px; padding: 0 12px !important; }
.qw-acts .pbtn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Hoạt động (hằng ngày) · Thành tựu · Danh hiệu: cùng tông tối */
#win-quest.dock .qd-top { gap: 6px; }
#win-quest.dock .qd-sum, #win-quest.dock .qd-dil, #win-quest.dock .qd-bonus { background: rgba(0,0,0,.34) !important; border: 1px solid var(--dk-line2) !important; border-radius: 5px; color: var(--dk-text) !important; }
#win-quest.dock .qd-sum *, #win-quest.dock .qd-dil *, #win-quest.dock .qd-bonus * { text-shadow: 0 1px 1px #000; }
#win-quest.dock .qd-done b, #win-quest.dock .qd-dil-h b { color: var(--dk-gold2) !important; }
#win-quest.dock .qd-done span, #win-quest.dock .qd-dil-h { color: var(--dk-text) !important; }
#win-quest.dock .qd-time, #win-quest.dock .qd-week, #win-quest.dock .qd-mslab, #win-quest.dock .qd-bonus-h span { color: var(--dk-dim) !important; }
#win-quest.dock .qd-bonus-h b { color: var(--dk-gold) !important; }
#win-quest.dock .qd-chip { background: #3a2716 !important; border-color: #6e4e2c !important; color: #cdb48a !important; }
#win-quest.dock .qd-chip.ready { background: linear-gradient(180deg, #5aa040, #2f6a1e) !important; color: #fff !important; border-color: #9fe07a !important; }
#win-quest.dock .qd-chip.got { opacity: .55; }
#win-quest.dock .qd-chip.on { box-shadow: 0 0 0 2px var(--dk-gold) !important; }
#win-quest.dock .qd-list { grid-template-columns: 1fr !important; }
#win-quest.dock .qd-track { background: rgba(0,0,0,.5) !important; border: 1px solid #000; }
#win-quest.dock .qw-drow { background: rgba(0,0,0,.32) !important; box-shadow: inset 0 0 0 1px var(--dk-line2) !important; color: var(--dk-text) !important; border-radius: 5px; }
#win-quest.dock .qw-drow.sel { background: linear-gradient(90deg, rgba(240,170,80,.3), rgba(240,170,80,.06)) !important; box-shadow: inset 0 0 0 1px var(--dk-gold) !important; }
#win-quest.dock .qw-drow b { color: #ffe9b8 !important; }
#win-quest.dock .qw-drow small.ok, #win-quest.dock .qd-prog small.ok { color: var(--dk-good) !important; }
#win-quest.dock .qw-drow small.prog, #win-quest.dock .qd-prog small.prog { color: #ffd479 !important; }
#win-quest.dock .qw-drow small.dim { color: var(--dk-dim) !important; }
#win-quest.dock .qw-achb > section, #win-quest.dock .qw-titleb > section { flex: 1 1 50%; min-height: 0; display: flex; flex-direction: column; padding: 6px 8px; overflow: hidden; }
#win-quest.dock .qw-titleb > section:first-child, #win-quest.dock .qw-achb > section:last-child { flex-basis: 54%; }
#win-quest.dock .qw-ach-detail { overflow-y: auto !important; color: var(--dk-text) !important; }
#win-quest.dock .qw-ach-detail * { color: inherit; text-shadow: 0 1px 1px #000 !important; }
#win-quest.dock .qw-ach-detail .so-h { color: var(--dk-gold2) !important; }
#win-quest.dock .ti-detail { border-radius: 5px; background: rgba(0,0,0,.34); border: 1px solid var(--dk-line2); }
#win-quest.dock .ti-preview { background: radial-gradient(ellipse at center, rgba(240,200,120,.12), transparent 70%); margin: 4px 0; }
#win-quest.dock .qw-cats { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 5px; }
#win-quest.dock .qw-cat { height: 24px; padding: 0 8px; border-radius: 12px; font: inherit; font-size: .92em; font-weight: 700; cursor: pointer; background: #3a2716 !important; border: 1px solid #6e4e2c !important; color: #cdb48a !important; }
#win-quest.dock .qw-cat.on { background: linear-gradient(180deg, #e08a45, #a5461a) !important; color: #fff4d6 !important; border-color: #f0c878 !important; }
#win-quest.dock .qw-actions { margin-top: 6px; }
@media (max-height: 560px), (max-width: 900px) {
  .qw-grp-h { height: 22px; }
  .qw-leaf { min-height: 22px; padding: 2px 6px 2px 18px; }
  .qw-foot { min-height: 26px; }
  .qw-acts .pbtn, .qw-foot .qw-close { height: 26px; min-width: 76px; padding: 0 8px !important; }
  #win-quest.dock .qw-detail .qw-rw .rw-cell { width: 36px; height: 36px; flex-basis: 36px; }
  #win-quest.dock .qw-tabs button { padding: 0 3px; height: 26px; }
}
#win-quest.dock .qd-list .qw-drow { background: rgba(0,0,0,.32) !important; border: 1px solid var(--dk-line2) !important; color: var(--dk-text) !important; text-shadow: 0 1px 1px #000 !important; padding: 6px 8px !important; border-radius: 5px; }
#win-quest.dock .qd-list .qw-drow .so-info b { color: #ffe9b8 !important; text-shadow: 0 1px 1px #000 !important; font-size: 1em !important; }
#win-quest.dock .qd-list .qw-drow.claimed { background: rgba(60,90,30,.22) !important; border-color: #4a6a2a !important; }
#win-quest.dock .qd-list .qw-drow.claimed .so-info b { color: #a8d88a !important; }
#win-quest.dock .qd-list .qw-drow .pbtn.done { color: var(--dk-good) !important; text-shadow: 0 1px 1px #000 !important; }
#win-quest.dock .qd-list .qw-drw .rw-cell { width: 34px; height: 34px; flex: 0 0 34px; }

/* =================== Cửa hàng kiểu ảnh mẫu (1.25.52) =================== */
#win-shop.dock .dk-body { gap: 6px; }
#win-shop.dock .shop-head { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; margin: 0 !important; }
#win-shop.dock .shop-head .dk-tabs[hidden], #win-shop.dock .shop-cats[hidden] { display: none !important; }
#win-shop.dock .shop-tabs { width: 100%; }
#win-shop.dock .shop-cats { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 5px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
#win-shop.dock .shop-cats button {
  height: 28px; padding: 0 6px; border-radius: 5px; cursor: pointer; font: inherit; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, #5a3a20, #2e1c0e) !important; border: 1px solid #7a5530 !important; color: #e8cf9c !important; text-shadow: 0 1px 1px #000; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; min-width: 0 !important;
}
#win-shop.dock .shop-cats button.active { background: linear-gradient(180deg, #e8a650, #b0601e 55%, #7e3a10) !important; border-color: #ffe0a0 !important; color: #fff6dc !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 8px rgba(240,160,60,.4) !important; }
#win-shop.dock .shop-body { flex: 1 1 auto; min-height: 0; display: flex !important; gap: 6px; margin: 0 !important; padding: 0 !important; grid-template-columns: none !important; }
/* Cột mục con bên trái (Vũ khí, Áo, Quần…) */
#win-shop.dock .shop-kinds { flex: 0 0 96px; display: flex !important; flex-direction: column; gap: 4px; overflow-y: auto; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
#win-shop.dock .shop-kinds[hidden] { display: none !important; }
#win-shop.dock .shop-kinds button {
  flex: 0 0 auto; height: 30px; padding: 0 6px; border-radius: 4px; cursor: pointer; font: inherit; font-weight: 700; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(0,0,0,.35) !important; border: 1px solid var(--dk-line2) !important; color: #d8c09a !important; text-shadow: 0 1px 1px #000; box-shadow: none !important; min-width: 0 !important;
}
#win-shop.dock .shop-kinds button.active { background: linear-gradient(90deg, rgba(240,170,80,.4), rgba(240,170,80,.1)) !important; border-color: var(--dk-gold) !important; color: #fff3d0 !important; }
#win-shop.dock .shop-listbox { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; padding: 6px; }
#win-shop.dock .shop-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; align-content: start; max-height: none !important; overflow: visible !important; padding: 0; }
#win-shop.dock .shop-body:not(.buying) .shop-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
#win-shop.dock .shop-list .sell-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
/* Thẻ món: ô ảnh bên trái, tên xanh, giá bên dưới */
#win-shop.dock .shop-row {
  display: grid !important; grid-template-columns: 46px minmax(0, 1fr) !important; align-items: center; gap: 7px !important; min-height: 0 !important; height: auto;
  padding: 5px 6px !important; border-radius: 5px !important; text-align: left; cursor: pointer; font: inherit;
  background: linear-gradient(180deg, rgba(70,46,26,.85), rgba(32,20,11,.9)) !important; border: 1px solid #5e4224 !important; color: var(--dk-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,230,170,.06) !important; text-shadow: 0 1px 1px #000;
}
#win-shop.dock .shop-row[hidden] { display: none !important; }
#win-shop.dock .shop-row:hover { border-color: #b08a50 !important; filter: none; }
#win-shop.dock .shop-row.sel { border-color: var(--dk-gold) !important; box-shadow: 0 0 0 1px var(--dk-gold), 0 0 10px rgba(240,190,90,.35) !important; }
#win-shop.dock .shop-row.picked { border-color: #ffe066 !important; box-shadow: 0 0 0 2px #ffe066 !important; }
#win-shop.dock .shop-row > i { width: 46px !important; height: 46px !important; border-radius: 4px; background-color: #160d07 !important; box-shadow: inset 0 0 0 1px #6a4c2c, inset 0 0 8px rgba(0,0,0,.8); }
#win-shop.dock .shop-row > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#win-shop.dock .shop-row b { font-size: 1em !important; font-weight: 800; color: #7ee06a; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 1px #000; }
#win-shop.dock .shop-row small { font-size: .85em !important; color: var(--dk-dim) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#win-shop.dock .shop-row .price { display: block; margin: 0; font-size: .95em !important; font-weight: 800; color: #ffd860 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#win-shop.dock .shop-row .price em { font-style: normal; color: #e8cf9c; font-weight: 700; }
#win-shop.dock .shop-row.poor .price { color: var(--dk-bad) !important; }
#win-shop.dock .shop-empty { grid-column: 1 / -1; color: var(--dk-dim) !important; text-align: center; margin: 20px 0; text-shadow: 0 1px 1px #000; }
/* Cột bán (thẻ Bán) */
#win-shop.dock .shop-side { flex: 0 0 190px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px; overflow-y: auto; color: var(--dk-text); }
#win-shop.dock .shop-body.buying .shop-side { display: none !important; }
#win-shop.dock .shop-side #ss-name { color: var(--dk-gold2); text-align: center; }
#win-shop.dock .shop-side small, #win-shop.dock .shop-side .ii-box, #win-shop.dock .shop-side .ss-total { color: var(--dk-text) !important; text-shadow: 0 1px 1px #000; }
#win-shop.dock .shop-side .ss-icon { background-color: #160d07 !important; box-shadow: inset 0 0 0 1px #6a4c2c !important; }
#win-shop.dock .shop-side .stepper span { color: var(--dk-dim); }
/* Chân: lật trang · tiền hiện có · tìm */
#win-shop.dock .shop-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 30px; }
#win-shop.dock .shop-pager { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
#win-shop.dock .shop-pager.off { visibility: hidden; }
#win-shop.dock .shop-pager .pbtn { min-width: 58px; height: 28px; padding: 0 8px !important; }
#win-shop.dock .shop-pager b { min-width: 38px; text-align: center; color: var(--dk-gold2); font-variant-numeric: tabular-nums; }
#win-shop.dock .shop-have { position: static !important; transform: none !important; flex: 1 1 auto; min-width: 0; display: flex !important; align-items: center; justify-content: center; gap: 10px !important; margin: 0 !important; padding: 0 !important; background: none !important; }
#win-shop.dock .shop-have .cur { display: inline-flex !important; align-items: center; gap: 4px; height: auto !important; min-width: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; border-image: none !important; }
#win-shop.dock .shop-have .cur[hidden] { display: none !important; }
#win-shop.dock .shop-have .cur em { font-style: normal; color: var(--dk-dim); font-weight: 700; }
#win-shop.dock .shop-have .cur b { color: #ffd860 !important; font-weight: 800; font-size: 1em !important; }
#win-shop.dock .shop-have .icon-gold { width: 18px !important; height: 18px !important; flex: 0 0 18px; background-size: contain !important; background-position: center; background-repeat: no-repeat; }
#win-shop.dock .shop-have .cur-note { color: var(--dk-text) !important; font-weight: 700; text-shadow: 0 1px 1px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: static !important; }
#win-shop.dock .shop-have .cur-note[hidden] { display: none !important; }
#win-shop.dock .shop-search { flex: 0 0 132px; }
#win-shop.dock .shop-search input {
  width: 100%; height: 28px; padding: 0 8px; border-radius: 5px; font: inherit; color: var(--dk-text);
  background: #120a05; border: 1px solid #6e4e2c; box-shadow: inset 0 1px 4px rgba(0,0,0,.7); outline: none;
}
#win-shop.dock .shop-search input:focus { border-color: var(--dk-gold); }
#win-shop.dock .shop-search input::placeholder { color: #8a7458; }
/* Bảng chi tiết khi bấm một món: nằm giữa cửa sổ */
#win-shop.dock .mk2-modal { position: absolute; inset: 0; z-index: 8; border-radius: 7px; background: rgba(0,0,0,.5); padding: 10px; }
@media (max-height: 560px), (max-width: 900px) {
  #win-shop.dock .shop-cats { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; }
  #win-shop.dock .shop-cats button { height: 24px; }
  #win-shop.dock .shop-kinds { flex-basis: 76px; }
  #win-shop.dock .shop-kinds button { height: 24px; }
  #win-shop.dock .shop-row { grid-template-columns: 36px minmax(0, 1fr) !important; gap: 5px !important; padding: 3px 4px !important; }
  #win-shop.dock .shop-row > i { width: 36px !important; height: 36px !important; }
  #win-shop.dock .shop-listbox { padding: 4px; }
  #win-shop.dock .shop-list { gap: 4px !important; }
  #win-shop.dock .shop-side { flex-basis: 150px; }
  #win-shop.dock .shop-foot { min-height: 26px; gap: 5px; }
  #win-shop.dock .shop-pager .pbtn { min-width: 44px; height: 24px; }
  #win-shop.dock .shop-search { flex-basis: 96px; }
  #win-shop.dock .shop-search input { height: 24px; }
  #win-shop.dock .shop-have .icon-gold { width: 14px !important; height: 14px !important; flex-basis: 14px; }
}

/* =================== Bảng chi tiết món đồ kiểu ảnh mẫu (1.25.52) =================== */
/* Gỗ tối viền vàng, tên ở giữa trên cùng, ảnh + dòng loại, dòng chỉ số màu vàng; các nút xếp dọc ở cột bên phải. */
#item-pop.item-pop, #sp-pop.item-pop {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0; align-content: start;
  padding: 10px 10px 10px 12px !important; border-radius: 7px !important;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255,196,110,.08), transparent 60%), linear-gradient(180deg, #2c1e14, #120a05) !important;
  border: 2px solid var(--dk-line) !important; color: var(--dk-text) !important; text-shadow: 0 1px 1px #000;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255,220,150,.14), 0 10px 30px rgba(0,0,0,.6) !important;
}
#item-pop.item-pop[hidden], #sp-pop.item-pop[hidden] { display: none !important; }
#item-pop.item-pop > *, #sp-pop.item-pop > * { grid-column: 1; min-width: 0; }
#item-pop.item-pop .ip-x, #sp-pop.item-pop .ip-x { right: -9px !important; top: -9px !important; width: 30px !important; height: 30px !important; border-radius: 6px !important; z-index: 3; }
#item-pop .ip-head, #sp-pop .ip-head { display: grid !important; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 10px; padding: 0 !important; margin: 0 0 6px !important; align-items: start; }
#item-pop .ip-head .ip-icon, #sp-pop .ip-head .ip-icon { grid-row: 2; width: 58px !important; height: 58px !important; flex: none !important; background-color: #160d07 !important; box-shadow: inset 0 0 0 1px #8a6838, inset 0 0 10px rgba(0,0,0,.8) !important; border-radius: 4px !important; }
#item-pop .ip-head .ip-htext, #sp-pop .ip-head .ip-htext { display: contents !important; }
#item-pop .ip-htext b, #sp-pop .ip-htext b {
  grid-column: 1 / -1; grid-row: 1; text-align: center; font-size: 15px !important; font-weight: 900 !important; padding: 2px 26px 5px; line-height: 1.25;
  border-bottom: 1px solid rgba(240,200,120,.28); text-shadow: 0 1px 2px #000; color: var(--dk-gold2);
}
#item-pop .ip-htext small, #sp-pop .ip-htext small { grid-column: 2; grid-row: 2; align-self: center; color: #d8c3a0 !important; font-size: 12px !important; font-weight: 700; line-height: 1.5; }
#item-pop .ip-body, #sp-pop .ip-body { color: var(--dk-text) !important; }
#item-pop .ip-body *, #sp-pop .ip-body * { text-shadow: 0 1px 1px #000 !important; }
#item-pop .ii-about, #sp-pop .ii-about, #item-pop #ip-desc, #item-pop p, #sp-pop p { color: #d8c3a0 !important; font-weight: 600 !important; }
#item-pop .ii-h, #sp-pop .ii-h { color: var(--dk-gold) !important; border-bottom-color: rgba(240,200,120,.25) !important; }
#item-pop .ii-list li, #sp-pop .ii-list li { color: var(--dk-text) !important; }
#item-pop .ii-list li.bad, #sp-pop .ii-list li.bad { color: var(--dk-bad) !important; }
#item-pop .ii-list li::before, #sp-pop .ii-list li::before { background: #c9954a !important; }
#item-pop .ii-stats .ii-list li, #sp-pop .ii-stats .ii-list li { color: #ffd860 !important; font-weight: 800 !important; }
#item-pop .ii-stats .ii-list li::before, #sp-pop .ii-stats .ii-list li::before { background: #ffd860 !important; }
#item-pop .ip-stats li, #sp-pop .ip-stats li { color: #ffd860 !important; }
#item-pop .ip-lines, #sp-pop .ip-lines { color: var(--dk-text) !important; }
/* Cột nút dọc */
#item-pop > .ip-actions, #sp-pop > .ip-actions {
  grid-column: 2 !important; grid-row: 1 / span 8; align-self: start; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
  justify-content: flex-start !important; gap: 6px !important; margin: 26px 0 0 10px !important; padding: 0 0 0 10px; border-left: 1px solid rgba(240,200,120,.22); min-width: 92px;
}
#item-pop > .ip-actions .pbtn, #sp-pop > .ip-actions .pbtn { width: 100%; min-width: 0 !important; height: 30px; padding: 0 8px !important; margin: 0 !important; white-space: nowrap; }
#item-pop > .ip-actions .pbtn[hidden], #sp-pop > .ip-actions .pbtn[hidden] { display: none !important; }
#sp-pop .sp-price { grid-column: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 5px 8px; border-radius: 4px; background: rgba(0,0,0,.35); border: 1px solid var(--dk-line2); color: var(--dk-dim) !important; }
#sp-pop .sp-price b { display: inline-flex; align-items: center; gap: 4px; color: #ffd860 !important; }
#sp-pop .sp-price.bad b { color: var(--dk-bad) !important; }
#item-pop .ip-pins, #item-pop .ip-confirm { margin-top: 6px; padding: 6px; border-radius: 4px; background: rgba(0,0,0,.35); border: 1px solid var(--dk-line2); color: var(--dk-text) !important; }
#item-pop .ip-pins-h, #item-pop .ip-confirm span { color: var(--dk-gold) !important; }
#item-pop .ip-confirm .qty b { color: #fff; }
#item-pop.floating { width: min(440px, 94%) !important; }
#sp-pop.item-pop { width: min(430px, 100%) !important; max-height: 100%; overflow: auto; }
@media (max-height: 560px), (max-width: 900px) {
  #item-pop .ip-head, #sp-pop .ip-head { grid-template-columns: 46px minmax(0, 1fr); }
  #item-pop .ip-head .ip-icon, #sp-pop .ip-head .ip-icon { width: 46px !important; height: 46px !important; }
  #item-pop .ip-htext b, #sp-pop .ip-htext b { font-size: 13px !important; }
  #item-pop > .ip-actions, #sp-pop > .ip-actions { min-width: 76px; gap: 4px !important; margin-left: 6px !important; padding-left: 6px; }
  #item-pop > .ip-actions .pbtn, #sp-pop > .ip-actions .pbtn { height: 26px; font-size: 11px !important; }
}
#item-pop > .ip-actions .pbtn, #sp-pop > .ip-actions .pbtn { flex: 0 0 auto !important; }
#win-shop.dock .shop-head { align-items: stretch !important; }
#win-shop.dock .shop-cats { width: 100%; }
#win-shop.dock .shop-have .cur { white-space: nowrap; }
#sp-pop.item-pop { height: auto !important; min-height: 0 !important; grid-auto-rows: auto; }
#sp-pop.item-pop .ip-body { flex: none !important; max-height: none !important; }
#item-pop.item-pop .ip-body, #sp-pop.item-pop .ip-body { height: auto !important; min-height: 0 !important; max-height: min(330px, 52vh) !important; overflow-y: auto; }
#sp-pop .mk2-acts .pbtn { min-width: 0 !important; }

/* Thú cưng: màu số tư chất theo Ngộ tính (4 bậc như màu đồ) */
.pvd-row.apt.w1 .v { color: #f2ead8; }
.pvd-row.apt.w2 .v { color: #5fb4ff; }
.pvd-row.apt.w3 .v { color: #c98cff; }
.pvd-row.apt.w4 .v { color: #ffa62b; text-shadow: 0 0 6px rgba(255,150,40,.55), 0 1px 1px #000; }
.pvd-row.wit .x { color: #8fe07a; }
.pvd-row.wit.w2 .pips i.on { background: #5fb4ff; box-shadow: 0 0 4px rgba(95,180,255,.8); }
.pvd-row.wit.w3 .pips i.on { background: #c98cff; box-shadow: 0 0 4px rgba(200,140,255,.8); }
.pvd-row.wit.w4 .pips i.on { background: #ffa62b; box-shadow: 0 0 4px rgba(255,166,43,.9); }
.pvd-row.wit.w1 .pips i.on { background: #f2ead8; box-shadow: 0 0 3px rgba(255,255,255,.5); }
.dk-wrap > #item-pop.item-pop { width: min(380px, calc(100vw - var(--dkw) - 30px - var(--sl, 0px) - var(--sr, 0px))) !important; }
@media (max-width: 640px) { .dk-wrap > #item-pop.item-pop { width: calc(100% - 20px) !important; } }
@media (max-height: 560px), (max-width: 900px) { #win-quest.dock .qw-tree { flex: 0 1 40%; } #win-quest.dock .qw-detail { flex: 1 1 60%; } }
#item-pop.item-pop, #sp-pop.item-pop { overflow-x: hidden !important; }
#win-shop.dock .shop-have { gap: 14px !important; } #win-shop.dock .shop-have .cur i { margin-left: 2px; }
#win-shop.dock .shop-cats { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important; }
@media (max-height: 560px), (max-width: 900px) { #win-shop.dock .shop-cats { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)) !important; } }

/* =================== Chọn ngôn ngữ (1.26.0) =================== */
.lang-sw { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(20, 12, 6, .72); border: 1px solid rgba(240, 200, 120, .45); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.lang-btn { min-width: 40px; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer; font: 800 12px/1 inherit; letter-spacing: .5px; color: #e8d3a8; background: transparent; }
.lang-btn:hover { color: #fff3d6; }
.lang-btn.on { color: #2a1606; background: linear-gradient(180deg, #ffe08a, #e2a94e); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.auth-lang { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); z-index: 5; }
@media (max-height: 560px), (max-width: 900px) { .auth-lang { top: 8px; right: 10px; } .lang-btn { min-width: 34px; height: 24px; padding: 0 8px; font-size: 11px; } }
.set-lang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.set-lang small { opacity: .75; font-size: 12px; }
#win-quest.dock .qw-hint.bad { color: #ff8a7a !important; }