:root {
  --bg: #0e1113; --panel: rgba(20, 24, 27, .92); --line: #3a332a; --text: #ece4d4; --muted: #a39b8c;
  --gold: #d9a441; --gold2: #f3cf7a; --red: #d84a3a; --blue: #3d7fd8; --green: #8bc34a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font: 14px/1.45 "Segoe UI", system-ui, sans-serif; user-select: none; }
#cv { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
button { font: inherit; color: var(--text); background: #2a2520; border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; cursor: pointer; }
button:hover { border-color: var(--gold); }
button.main { background: linear-gradient(#b8852f, #8a5f1c); border-color: #e0b35a; color: #fff6e0; font-weight: 600; padding: 8px 20px; }
button.ghost { background: transparent; }
input { font: inherit; color: var(--text); background: #15181a; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; width: 100%; }
input:focus { outline: none; border-color: var(--gold); }
h1 { font-size: 22px; margin: 0 0 14px; color: var(--gold2); font-weight: 600; letter-spacing: .02em; }

.screen { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #1d1a16 0%, #0b0c0d 75%); z-index: 5; }
.screen.on { display: flex; }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 26px 30px; min-width: 320px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.box.wide { width: min(920px, 94vw); }
#load-msg { color: var(--muted); margin: 0; }
/* màn trước khi game kịp dựng màn chờ (đang tải mã game) / báo lỗi tải: nền đen, chữ ở chỗ chữ của màn chờ (src/game/loading.js) cho đồng bộ */
#s-load { background: #000; align-items: flex-end; padding-bottom: calc(max(28px, 5vh) + 22px); box-sizing: border-box; }
#s-load .box { background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; width: min(640px, calc(100vw - 32px)); }
#s-load h1 { display: none; }
#s-load #load-msg { color: #f3cf7a; font-weight: 600; text-shadow: 0 1px 2px #000; }

/* đăng nhập: ảnh nền anh chọn (28/10 — assets/ui/dang-nhap/login.webp, phủ kín màn hình, giữ tỉ lệ); viền tối mờ quanh mép + khung kính
   mờ trong suốt cho chữ đọc rõ mà vẫn thấy cảnh phía sau. Màn chọn máy chủ cùng kiểu, ảnh anh chọn 28/10 (assets/ui/chon-may-chu) */
#s-login { background: #0b0c0d url("../../assets/ui/dang-nhap/login.webp") center / cover no-repeat; }
#s-server { background: #0b0c0d url("../../assets/ui/chon-may-chu/selectsever.webp") center / cover no-repeat; }
#s-login::before, #s-server::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.3) 0%, rgba(0,0,0,.05) 45%, rgba(0,0,0,.45) 100%); }
#s-login .box, #s-server .box { position: relative; background: rgba(12,14,16,.7); border-color: rgba(201,154,74,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#s-server .card { background: rgba(27,24,20,.78); }
.login { width: min(360px, calc(100vw - 32px)); min-width: 0; }
.login label { display: block; margin-bottom: 12px; color: var(--muted); }
.login input { margin-top: 4px; }
.lg-sv { color: var(--muted); margin: -8px 0 16px; }
.lg-err { color: #ff8a7a; min-height: 1.3em; margin-bottom: 4px; }
.lg-note { color: var(--muted); font-size: 12px; margin: 14px 0 0; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { text-align: left; padding: 16px; border-radius: 8px; background: #1b1814; }
.card b { display: block; font-size: 17px; color: var(--gold2); margin-bottom: 4px; }
.card small { display: block; color: var(--muted); }

.row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--muted); }
.row.end { justify-content: flex-end; margin: 6px 0 0; }

.hud { position: fixed; inset: 0; pointer-events: none; display: none; z-index: 3; }
.hud.on { display: block; }
.hud > * { pointer-events: auto; }

/* ---------- font giao diện của bản 2: IBM Plex Mono (assets/ui/fonts, SIL OFL 1.1) ---------- */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../../assets/ui/fonts/ibm-plex-mono-400-vietnamese.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../../assets/ui/fonts/ibm-plex-mono-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../../assets/ui/fonts/ibm-plex-mono-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { --font: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; }
html, body, button, input, select { font-family: var(--font); }

/* ---------- màn chọn nhân vật (theo bản 2 js/csel.js) ---------- */
.screen.csel { flex-direction: column; justify-content: space-between; color: #f5ebd2; overflow-x: hidden; overflow-y: auto; padding: 16px 12px 18px;
  background: radial-gradient(ellipse at 50% 60%, rgba(4,18,14,.3) 0%, rgba(2,10,8,.92) 100%), url(../../assets/ui/chon_nv/nen_van_ngoc.webp) center / cover no-repeat #071412; }
.csel .cs-top { text-align: center; }
.csel h1 { margin: 2px 0 0; font-size: clamp(24px, 4vw, 36px); letter-spacing: 4px; color: #ffe090; text-shadow: 0 0 15px #c8902a, 0 2px 4px #000; font-weight: bold; text-transform: uppercase; }
.csel .cs-sub { font-size: 13px; color: #dac48c; letter-spacing: 1.5px; margin-top: 2px; }
.csel .cs-row { display: flex; gap: clamp(16px, 4vw, 56px); justify-content: center; align-items: flex-end; width: 100%; max-width: 960px; flex: 1; min-height: 0; padding-top: 10px; }
.csel .cs-slot { flex: 1; max-width: 270px; display: flex; flex-direction: column; align-items: center; cursor: pointer; position: relative; padding: 0 4px 10px;
  transition: filter .25s, transform .25s; filter: brightness(.68) saturate(.75); }
.csel .cs-slot:hover { filter: brightness(.92) saturate(.95); transform: translateY(-4px); }
.csel .cs-slot.on { filter: brightness(1.1) drop-shadow(0 0 22px rgba(255,210,80,.7)); transform: translateY(-8px) scale(1.03); }
.csel .cs-head { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 52px; width: 100%; text-align: center; margin-bottom: 6px; pointer-events: none; }
.csel .nm { font-weight: bold; font-size: clamp(14px, 3.2vw, 18px); text-shadow: 0 2px 5px #000, 0 0 8px rgba(0,0,0,.8); letter-spacing: .5px; line-height: 1.25; }
.csel .lv { font-size: clamp(11.5px, 2.6vw, 13px); color: #ded2b2; text-shadow: 0 1px 3px #000; line-height: 1.25; margin-top: 3px; }
.csel .cs-body { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
@keyframes csWalk { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.csel .cs-char { width: clamp(160px, 24vw, 260px); aspect-ratio: 1 / 1; max-height: 48vh; position: relative; overflow: hidden; }
.csel .cs-char i { position: absolute; left: 0; top: 0; height: 100%; background-repeat: no-repeat; background-size: 100% 100%; }
.csel .ped { width: 82%; height: 32px; margin-top: -20px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(245,190,75,.75) 0%, rgba(160,105,30,.45) 45%, rgba(0,0,0,0) 72%); box-shadow: 0 0 18px rgba(230,160,50,.4); }
.csel .cs-slot.on .ped { background: radial-gradient(ellipse at 50% 50%, rgba(255,235,150,.95) 0%, rgba(230,155,45,.7) 45%, rgba(0,0,0,0) 74%);
  box-shadow: 0 0 30px rgba(255,195,75,.85), inset 0 0 12px rgba(255,235,160,.6); }
.csel .plus { width: 68px; height: 68px; border-radius: 50%; margin: 60px 0 30px; display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 300; line-height: 1; color: #eed58a; background: radial-gradient(#251b11cc, #0e0a06ee);
  border: 1.5px solid #a88544; box-shadow: 0 0 18px rgba(0,0,0,.8), 0 0 12px rgba(238,213,138,.25); transition: transform .2s, color .2s, border-color .2s; }
.csel .cs-slot:hover .plus { transform: scale(1.12); color: #fff4d0; border-color: #ffd875; box-shadow: 0 0 22px rgba(255,216,117,.5); }
.csel .cs-panel { width: 100%; max-width: 600px; background: linear-gradient(135deg, rgba(28,20,12,.95), rgba(12,16,14,.95)); border: 2px solid #b58c48; border-radius: 8px;
  box-shadow: 0 0 0 2px #0a0805, 0 8px 30px rgba(0,0,0,.85); padding: 12px 16px; margin-top: 10px; }
.csel .cs-info { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 4px 14px; font-size: 13.5px; }
.csel .cs-info .k { color: #caa868; }
.csel .cs-empty { text-align: center; color: #d5c5a0; font-size: 13.5px; }
.csel .cs-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.csel .cs-btns button { min-width: 120px; padding: 9px 16px; font-weight: bold; border-radius: 5px; border: 1px solid #a07a34; background: linear-gradient(#5a3f1c, #2e1f0d);
  color: #f3dfae; font-size: 14px; transition: filter .15s, transform .15s; }
.csel .cs-btns button:hover { filter: brightness(1.18); transform: translateY(-1px); }
.csel .cs-btns button.go { background: linear-gradient(#c28e30, #6d4712); color: #fff8e2; border-color: #ffd875; min-width: 160px; font-size: 15px; box-shadow: 0 0 12px rgba(255,216,117,.35); }
.csel .cs-btns button.red { background: linear-gradient(#78251a, #38110c); border-color: #b84c3d; }
.csel .cs-warn { color: #ff9a7a; text-align: center; font-size: 13px; margin-top: 8px; }
.csel .cs-info .wide { grid-column: span 3; }

/* ---------- màn tạo nhân vật (theo bản 2 js/ui.js pickFaction) ---------- */
/* nền: ảnh anh chọn 28/10 (assets/ui/tao_nv/newchar.webp — sân đá tròn giữa cảnh núi lúc hoàng hôn; bản trước v3/nen_tao_nv.webp); mép trên /
   dưới tối nhẹ để chữ tiêu đề + khung tên đọc rõ trên nền trời sáng */
.screen.cc { flex-direction: column; justify-content: space-between; align-items: stretch; color: #f5ebd2; overflow: hidden;
  background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 72%, rgba(0,0,0,.4)),
    url(../../assets/ui/tao_nv/newchar.webp) center / cover no-repeat #000; }
.cc-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px 0; }
.cc-title { font-size: clamp(16px, 2.2vw, 22px); font-weight: bold; color: #fce49f; letter-spacing: 3px; text-shadow: 0 0 10px #b8781a, 0 2px 4px #000; text-transform: uppercase; }
.cc-ver { font-size: 13px; color: #d8ccb0; opacity: .85; letter-spacing: 1px; }
.cc-mid { flex: 1; display: flex; align-items: center; justify-content: space-around; position: relative; padding: 0 2vw; max-height: calc(100vh - 160px); }
@keyframes ccWalk { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.cc-char { position: relative; width: clamp(200px, 28vw, 360px); aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  cursor: pointer; transition: transform .2s, filter .2s; }
.cc-char:hover { transform: scale(1.02); }
.cc-vp { width: 100%; height: 100%; position: relative; overflow: hidden; }
.cc-vp i { position: absolute; left: 0; top: 0; height: 100%; background-repeat: no-repeat; background-size: 100% 100%; }
.cc-char.active .cc-vp { filter: drop-shadow(0 0 16px rgba(255,215,80,.75)) drop-shadow(0 0 32px rgba(255,255,255,.4)); }
.cc-char.inactive { filter: grayscale(100%) brightness(.65) opacity(.8); }
.cc-tag { position: absolute; bottom: -8px; font-weight: bold; font-size: clamp(13px, 1.6vw, 16px); letter-spacing: 2px; padding: 4px 18px; border-radius: 14px;
  background: rgba(0,0,0,.75); border: 1.5px solid #a88344; color: #f3dfa7; box-shadow: 0 0 10px rgba(0,0,0,.8); pointer-events: none; z-index: 5; }
.cc-char.active .cc-tag { background: linear-gradient(#b8862e, #553408); border-color: #ffe682; color: #fff; box-shadow: 0 0 12px rgba(255,215,80,.6); }
.cc-pillar { position: relative; z-index: 10; padding: 10px 0; }
.cc-pillar #cc-series { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.5vh, 14px); }
.cc-glow { position: absolute; top: -10%; bottom: -10%; left: 50%; width: 36px; margin-left: -18px; pointer-events: none; filter: blur(4px);
  background: radial-gradient(ellipse at center, rgba(255,235,160,.3) 0%, rgba(255,215,80,.1) 40%, rgba(255,255,255,0) 80%); }
.cc-se { width: clamp(48px, 6.5vw, 64px); height: clamp(48px, 6.5vw, 64px); border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0;
  background: radial-gradient(circle, rgba(20,20,20,.85) 0%, rgba(5,5,5,.95) 100%); border: 2px solid #5a462b; color: #a89472;
  font-size: clamp(14px, 1.8vw, 18px); font-weight: bold; transition: all .2s; box-shadow: 0 4px 10px rgba(0,0,0,.7); }
.cc-se:hover { transform: scale(1.1); filter: brightness(1.2); }
.cc-se.active { border-color: #ffd875; color: #fff; transform: scale(1.14); box-shadow: 0 0 20px rgba(255,216,117,.75), inset 0 0 10px rgba(255,216,117,.5); }
.cc-se.s-0.active { background: radial-gradient(circle, #b88a28 0%, #4a3407 100%); border-color: #ffe48a; }
.cc-se.s-1.active { background: radial-gradient(circle, #2e8a3a 0%, #0d3813 100%); border-color: #8aff96; }
.cc-se.s-2.active { background: radial-gradient(circle, #1e6fa8 0%, #082d47 100%); border-color: #7adaff; }
.cc-se.s-3.active { background: radial-gradient(circle, #b33924 0%, #4a1107 100%); border-color: #ff907a; }
.cc-se.s-4.active { background: radial-gradient(circle, #a87630 0%, #422d0e 100%); border-color: #f7cb79; }
.cc-bot { display: flex; flex-direction: column; align-items: center; padding: 0 12px 14px; z-index: 10; }
.cc-desc { max-width: 760px; width: 95%; background: rgba(8,12,10,.72); border: 1.5px solid #6b5534; border-radius: 6px; padding: 8px 16px; text-align: center;
  box-shadow: 0 0 18px rgba(0,0,0,.9); margin-bottom: 10px; }
#cc-detail { color: #7ef18c; font-size: clamp(12px, 1.4vw, 14px); line-height: 1.45; text-shadow: 0 1px 2px #000; }
#cc-detail s { opacity: .45; }
.cc-warn { color: #ff786b; font-weight: bold; font-size: 12px; }
.cc-warn:not(:empty) { margin-top: 4px; }
.cc-bar { max-width: 760px; width: 95%; display: flex; align-items: center; background: url(../../assets/ui/tao_nv/nen.webp) center / cover; border: 2px solid #ab8240;
  border-radius: 4px; box-shadow: 0 0 20px rgba(0,0,0,.95); overflow: hidden; padding: 3px; }
.cc-bar button { padding: 8px 24px; border: none; background: transparent; color: #fce49f; font-weight: bold; font-size: clamp(14px, 1.8vw, 16px);
  text-shadow: 0 0 4px #000; letter-spacing: 1px; transition: filter .15s; }
.cc-bar button:hover { filter: brightness(1.3); }
.cc-bar button.ok { padding: 8px 28px; color: #ffe882; letter-spacing: 2px; }
.cc-bar button.ok:disabled { color: #888; cursor: default; filter: none; }
.cc-name { flex: 1; display: flex; align-items: center; background: rgba(240,240,230,.92); border-radius: 3px; margin: 0 6px; padding: 0 10px; height: 38px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.5); }
.cc-name span { color: #2a2016; font-weight: bold; font-size: clamp(13px, 1.5vw, 15px); white-space: nowrap; margin-right: 8px; letter-spacing: 1px; }
.cc-name input { flex: 1; border: none; background: transparent; color: #111; font-size: clamp(13px, 1.5vw, 15px); font-weight: bold; outline: none; width: 100%; padding: 0; }
.cc-err { color: #ff9a7a; font-size: 13px; min-height: 18px; margin-top: 6px; text-shadow: 0 1px 2px #000; }

/* ---------- giao diện trong game giống client PC (src/game/hud.js, assets/ui/hud) ---------- */
:root { --jx: "VK Sans Serif 13", "IBM Plex Mono", monospace; }
#jxhud { position: fixed; inset: 0; pointer-events: none; z-index: 3; font: 13px/13px var(--jx); color: #fff; }
#jxhud .jx-top { position: absolute; top: 0; left: 50%; transform-origin: top center; background-repeat: no-repeat; pointer-events: auto; }
#jxhud .jx-bot { position: absolute; bottom: 0; left: 50%; transform-origin: bottom center; background-repeat: no-repeat; pointer-events: none; }
#jxhud .jx-top > div, #jxhud .jx-bot > * { position: absolute; }
#jxhud .jx-bot > * { pointer-events: auto; }
#jxhud .jx-logo { color: rgb(255,217,78); white-space: nowrap; line-height: 13px; }
#jxhud .jx-lv, #jxhud .jx-rank { text-align: center; line-height: 13px; color: #fff; }
#jxhud .jx-rank { pointer-events: auto; cursor: pointer; }
#jxhud .jx-bar { overflow: hidden; }
#jxhud .jx-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
#jxhud .jx-bar span { position: absolute; inset: 0; text-align: center; line-height: 11px; white-space: nowrap;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
#jxhud .jx-btn { background-repeat: no-repeat; cursor: pointer; }
#jxhud .jx-slot { cursor: pointer; }
#jxhud .jx-slot:hover { box-shadow: inset 0 0 0 1px rgba(255,230,120,.55); }
/* 9 ô phím tắt 1–9 (thuốc — src/game/main.js quick*): icon giữa ô, số bình góc dưới phải, ngưỡng tự uống góc trên trái; hết bình: tối */
#jxhud .jx-slot .jx-qi { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
#jxhud .jx-slot .jx-qn, #jxhud .jx-slot .jx-qa { position: absolute; font: 13px/13px var(--jx); font-style: normal; font-weight: normal; pointer-events: none; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000; }
#jxhud .jx-slot .jx-qn { right: 2px; bottom: 1px; color: #fff; }
#jxhud .jx-slot .jx-qa { left: 1px; top: 1px; color: rgb(255,217,78); }
#jxhud .jx-slot.empty .jx-qi { filter: grayscale(1) brightness(.55); }
/* hồi chiêu (hud.setCooldowns): quạt tối quét theo chiều kim đồng hồ + số giây còn ở giữa */
#jxhud .jx-slot .jx-cd { position: absolute; inset: 1px; pointer-events: none; display: flex; align-items: center; justify-content: center;
  font: 13px/13px var(--jx); font-style: normal; color: #fff; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000; }
#jxhud .jx-inback { background-repeat: no-repeat; pointer-events: none; }
#jxhud .jx-input { background: transparent; border: 0; outline: 0; padding: 0; font: 13px/15px var(--jx); caret-color: #fff; }
.jx-menu { position: fixed; z-index: 6; background: rgba(8,14,12,.92); border: 1px solid #3c6e58; box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0,0,0,.7);
  font: 13px/13px var(--jx); color: #fff; padding: 4px 0; min-width: 150px; }
.jx-menu div { padding: 4px 12px; cursor: pointer; white-space: nowrap; }
.jx-menu div:hover { background: #1f4a3a; color: rgb(255,217,78); }
/* menu người chơi (Ctrl + chuột phải / điện thoại chạm giữ người chơi — main.js menuNguoi): dòng tên không bấm được */
.jx-menu.jx-nguoi .dau, .jx-menu.jx-nguoi .dau:hover { cursor: default; background: none; color: rgb(255,217,78); border-bottom: 1px solid #3c6e58; margin-bottom: 2px; }
.jx-menu.jx-nguoi small { color: #9aa79f; font: inherit; }
body.dt .jx-menu.jx-nguoi { min-width: 190px; font: 15px/15px var(--jx); }
body.dt .jx-menu.jx-nguoi div { padding: 10px 16px; }

/* bản đồ nhỏ (小地图_小.ini) */
#jxhud .jx-mm canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
#jxhud .jx-mm-shadow { pointer-events: none; }
#jxhud .jx-mm-name { cursor: pointer; line-height: 14px; white-space: nowrap; overflow: hidden; text-shadow: 1px 1px #000; }
#jxhud .jx-mm-name:hover { color: rgb(0,255,255) !important; }
#jxhud .jx-mm-pos { cursor: pointer; text-align: center; line-height: 14px; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
#jxhud .jx-mm-pos:hover { color: rgb(255,255,0) !important; }
#jxhud .jx-mm-input { position: absolute; display: none; font: 13px/14px var(--jx); color: rgb(0,255,255); background: rgba(0,0,0,.75); border: 1px solid rgb(255,0,0); outline: 0; padding: 0 2px; text-align: center; }
#jxhud .jx-auto { cursor: pointer; text-align: right; line-height: 13px; color: #9fe36a; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
#jxhud .jx-auto.off { color: #9a9a9a; }
/* khung chat nhiều kênh (消息集合面板_左.ini): tin dồn xuống đáy như client (TextBottom=1) */
#jxhud .jx-strip { background-repeat: no-repeat; }
#jxhud .jx-chat, #jxhud .jx-sys { display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; line-height: 14px; word-break: break-word; }
#jxhud .jx-chat::-webkit-scrollbar, #jxhud .jx-sys::-webkit-scrollbar { display: none; }
#jxhud .jx-chat > :first-child, #jxhud .jx-sys > :first-child { margin-top: auto; }
#jxhud .jx-chat.shade { background: rgba(0,0,0,.45); }
/* chữ khung chat (anh 31/10: "phần text này khá khó đọc" -> bản Tahoma 15 đậm viền đen: "xấu quá, nhìn như đấm vô mắt" -> anh chọn kiểu 2 trong
   ảnh so 4 kiểu): giữ font client, bóng đen 1 điểm, nền tối mờ sau khung (đậm bên trái, nhạt dần sang phải) cho chữ nổi trên cảnh; ô "Nền chat"
   (.shade) vẫn đè nền đều. Khung tin hệ thống (.jx-sys) bỏ viền đen 4 phía cũ — đã có nền, dùng chung bóng 1 điểm như ảnh anh chọn */
#jxhud .jx-chat, #jxhud .jx-sys { font: 13px/15px var(--jx); text-shadow: 1px 1px 0 #000; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 75%, rgba(0,0,0,.08)); }
#jxhud .jx-chat i, .jx-chmenu i { display: inline-block; vertical-align: -2px; margin-right: 2px; background-repeat: no-repeat; }
/* lời mời tổ đội trong ô tin hệ thống (anh 06/11 — hud.js moiDoi; client HitText: chữ bấm được, ô chọn sáng 255,249,148 alpha 60; "Đồng ý" đỏ như
   NormalMsgColor của 系统消息.ini) + biểu tượng 组队 24 × 24 ở mép phải (nhấp nháy khung 0 ↔ 1 khi có lời mời chưa xem; số nhỏ khi ≥ 2 lời mời) */
#jxhud .jx-sys .moi a { cursor: pointer; padding: 0 2px; white-space: nowrap; } /* chữ bấm không bị ngắt giữa ("Cự | tuyệt") — tràn thì cả chữ xuống dòng */
#jxhud .jx-sys .moi a[data-v="nhan"] { color: rgb(255,0,0); }
#jxhud .jx-sys .moi:not(.tat) a:hover { background: rgba(255,249,148,.24); }
#jxhud .jx-sys .moi.tat a { cursor: default; opacity: .6; }
#jxhud .jx-tinic { display: none; cursor: pointer; z-index: 2; background-repeat: no-repeat; background-position: 0 0; }
#jxhud .jx-tinic.hien { display: block; }
#jxhud .jx-tinic.nhay, #dt .dt-moidoi.nhay i { animation: jx-tinic 1s steps(1, end) infinite; }
@keyframes jx-tinic { 0% { background-position: 0 0; } 50% { background-position: -24px 0; } }
#jxhud .jx-tinic b { position: absolute; right: -3px; bottom: -3px; font: 11px/11px var(--jx); color: #fff; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; pointer-events: none; }
/* biểu cảm (bieucam.js — client \Ui\表情大全.ini, bảng chọn ui\ui3\表情符号选择窗口.ini): hình trong dòng chat chạy dải khung (--n khung, --w bề
   ngang 1 khung, thời gian / khung = Interval của .spr); bảng chọn ô 26 × 26 (điện thoại 39, mặt phóng 1,5 — dễ chạm), nền / viền / ô dưới chuột màu của ini */
.bc { display: inline-block; vertical-align: middle; background: no-repeat 0 0; }
.bc.chay { animation: bc-chay 1s steps(var(--n)) infinite; }
@keyframes bc-chay { to { background-position-x: calc(var(--w) * var(--n) * -1); } }
#jxhud .jx-chat i.bc, #dt .dt-clist i.bc, #dt .dt-tin i.bc { vertical-align: middle; margin: 0 1px; }
.bc-chon { position: fixed; z-index: 7; display: grid; --o: 26px; border: 1px solid; box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0,0,0,.7); }
.bc-chon > div { width: var(--o); height: var(--o); display: grid; place-items: center; cursor: pointer; }
.bc-chon > div:hover { background: var(--re); }
.bc-chon > div.trong, .bc-chon > div.trong:hover { cursor: default; background: none; }
.bc-chon > div > i { display: block; background: no-repeat 0 0; }
/* điện thoại (anh 31/10: "màn dọc hơi nhỏ" — bản trước ô 34, mặt cỡ gốc 20): ô 39, mặt + nút nhiều / ít hơn phóng 1,5 (giữa ô — không đổi chỗ) */
body.dt .bc-chon { --o: 39px; z-index: 9; }
body.dt .bc-chon > div > i { transform: scale(1.5); }
#jxhud .jx-tab { cursor: pointer; text-align: center; line-height: 13px; white-space: nowrap; }
#jxhud .jx-tab:hover { color: #fff !important; }
/* ghim của quản trị (anh 03/11 chọn kiểu 1 — hud.js _veGhim): đầu danh sách chat, × ẩn trên máy này */
#jxhud .jx-ghim { z-index: 3; box-sizing: border-box; padding: 2px 16px 3px 4px; font: 13px/15px var(--jx); text-shadow: 1px 1px 0 #000; word-break: break-word;
  background: rgba(36,22,6,.88); border-bottom: 1px solid rgba(214,170,90,.85); color: rgb(255,217,78); }
#jxhud .jx-ghim b { color: #ff9a3c; font-weight: normal; }
#jxhud .jx-ghim .x { position: absolute; right: 4px; top: 1px; color: #bbb; cursor: pointer; }
#jxhud .jx-ghim .x:hover { color: #fff; }
#jxhud .jx-chbtn { cursor: pointer; background-repeat: no-repeat; background-position: center; }
.jx-chmenu { background: rgb(32,32,32); min-width: 180px; }
.jx-chmenu div { display: flex; align-items: center; gap: 4px; padding: 2px 8px; }
.jx-chmenu i { width: 21px; height: 21px; }
.jx-menu div.on { color: rgb(255,217,78); }
.jx-menu div.khoa, .jx-menu div.khoa:hover { color: #6f7a74; background: none; cursor: default; } /* bãi chưa đủ cấp */

/* ---------- mộc nhân luyện công (src/game/mocnhan.js): bảng DPS + chỉnh kháng, hiện khi đứng gần mộc nhân ở Ba Lăng ---------- */
.mn { position: fixed; z-index: 4; left: 8px; top: 40px; width: 330px; max-width: calc(100vw - 16px); display: none; background: rgba(8,14,12,.9);
  border: 1px solid #3c6e58; box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0,0,0,.6); font: 13px/16px var(--jx); color: #fff; }
.mn.on { display: block; }
.mn-head { display: flex; align-items: center; gap: 3px; padding: 4px 6px; border-bottom: 1px solid #3c6e58; background: rgba(31,74,58,.45); }
.mn-head b { color: rgb(255,217,78); margin-right: auto; font-weight: normal; }
.mn button { font: 12px/12px var(--jx); padding: 3px 6px; border-radius: 2px; background: #16302a; border: 1px solid #3c6e58; color: #fff; cursor: pointer; }
.mn button:hover { color: rgb(255,217,78); border-color: #6aa88c; }
.mn table { width: 100%; border-collapse: collapse; }
.mn th { color: #9fc9b5; font-weight: normal; padding: 3px 4px; text-align: right; }
.mn td { padding: 2px 4px; text-align: right; font-variant-numeric: tabular-nums; }
.mn th:first-child, .mn td:first-child { text-align: left; }
.mn-dps { margin: 2px 0; }
.mn-dps tr.mn-sum td { border-top: 1px solid #24443a; color: rgb(255,217,78); }
.mn-khang { display: none; border-top: 1px solid #24443a; padding: 4px 4px 2px; }
.mn.khang .mn-khang { display: block; }
.mn-khang td:first-child { white-space: nowrap; color: #9fc9b5; }
.mn-khang input { width: 44px; font: 12px/14px var(--font); padding: 1px 3px; border-radius: 2px; background: #0b1512; border: 1px solid #3c6e58; color: #fff; text-align: right; }
.mn-r { display: flex; align-items: center; gap: 4px; margin: 5px 0 2px; color: #9fc9b5; }
.mn-r input { width: 48px; font: 12px/14px var(--font); padding: 1px 3px; background: #0b1512; border: 1px solid #3c6e58; color: #fff; }
.mn-note { color: #9fc9b5; font: 11px/14px var(--font); padding: 2px 6px 4px; }
.mn.thu table, .mn.thu .mn-khang, .mn.thu .mn-note { display: none; }

/* ---------- công cụ thử (src/game/devtool.js, chỉ máy dev) — cùng kiểu khung menu client ---------- */
.dv { position: fixed; z-index: 7; left: 8px; top: 24px; width: 400px; max-height: calc(100vh - 250px); min-height: 200px; display: none; flex-direction: column;
  background: rgba(8,14,12,.94); border: 1px solid #3c6e58; box-shadow: 0 0 0 1px #000, 0 8px 24px rgba(0,0,0,.7); font: 13px/16px var(--jx); color: #fff; }
.dv.on { display: flex; }
.dv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 4px 6px; border-bottom: 1px solid #3c6e58; background: rgba(31,74,58,.45); }
.dv-head .dv-tab { white-space: nowrap; } /* 7 thẻ (thêm Phong Lăng Độ, Dã Tẩu 27/10): xuống hàng cả thẻ, không ngắt chữ */
.dv-head b { color: rgb(255,217,78); margin-right: auto; font-weight: normal; }
.dv-body { overflow: auto; padding: 4px 8px 8px; }
.dv button { font: 13px/13px var(--jx); padding: 3px 7px; border-radius: 2px; background: #16302a; border: 1px solid #3c6e58; color: #fff; }
.dv button:hover { color: rgb(255,217,78); border-color: #6aa88c; }
.dv button.on, .dv .dv-tab.on { color: rgb(255,217,78); border-color: #8fd0b0; background: #1f4a3a; }
.dv input, .dv select { font: 12px/14px var(--font); padding: 2px 4px; border-radius: 2px; background: #0b1512; border: 1px solid #3c6e58; color: #fff; width: auto; }
.dv input[type=checkbox] { width: auto; margin: 0 2px 0 0; accent-color: #3c9e78; }
.dv .r { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 5px 0; }
.dv .k { color: #9fc9b5; min-width: 78px; }
.dv label { display: inline-flex; align-items: center; cursor: pointer; margin-left: 4px; }
.dv-sel { width: 100%; margin: 4px 0; }
.dv-note { color: #9fc9b5; font: 11px/14px var(--font); }
.dv-list { border: 1px solid #24443a; max-height: 230px; overflow: auto; margin: 4px 0; }
.dv-it { display: flex; align-items: center; gap: 6px; padding: 2px 4px; cursor: pointer; }
.dv-it:hover, .dv-it.on { background: #1f4a3a; }
.dv-it img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; flex: none; }
.dv-it small { display: block; color: #9fc9b5; font: 11px/13px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-it button { flex: none; }
.dv-detail { border: 1px solid #24443a; padding: 4px 6px; white-space: pre-line; min-height: 20px; }
.dv-detail:empty { display: none; }
/* công cụ thử — tạo trang bị theo dòng tự chọn (anh 29/10, devtool.js veDong) */
.dv-dong { border: 1px solid #3c6e58; padding: 2px 6px; margin: 6px 0; background: rgba(31,74,58,.18); }
.dv-dong:empty { display: none; }
.dv-dong .k small { color: #6f9785; }
.dv-detail .t1 { color: #fff; } .dv-detail .t2 { color: #8fb8ff; } .dv-detail .t3 { color: #ff9a8a; }
.dv-head { cursor: move; user-select: none; }
/* bảng quản trị (src/game/quantri.js — anh 28/10): kiểu bảng Công cụ thử, giữa màn hình; z-index như #jxwin và nằm ngay trước nó -> trên HUD,
   dưới cửa sổ / khung hỏi xác nhận của client */
.dv.qt { z-index: 4; left: 50%; top: 40px; transform: translateX(-50%); width: 800px; max-width: calc(100vw - 16px); max-height: calc(100vh - 100px); }
.qt-may { padding: 3px 8px; border-bottom: 1px solid #24443a; }
.qt-bao { color: #8fd0b0; }
.qt-bao:not(:empty) { padding: 3px 8px; border-bottom: 1px solid #24443a; }
.qt-bao.loi { color: #ff8a7a; }
.qt-ds { border: 1px solid #24443a; max-height: 220px; overflow: auto; margin: 4px 0; }
.qt-row { display: grid; grid-template-columns: 120px 1fr 240px 112px; gap: 6px; padding: 3px 6px; cursor: pointer; align-items: baseline; }
.qt-row:hover, .qt-row.on { background: #1f4a3a; }
.qt-row.qt-tieude { cursor: default; color: #9fc9b5; background: #10241e; position: sticky; top: 0; }
.qt-row .c3, .qt-row .c4 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt small { color: #9fc9b5; font: 11px/14px var(--font); }
.qt i { font-style: normal; }
.qt-xanh { color: #7ee07e; } i.qt-xanh { color: #8fb8ff; } .qt-vang { color: rgb(255,217,78); } .qt-do { color: #ff8a7a; }
/* thẻ Mã quà: bấm vào mã là chọn cả mã (chép gửi người chơi) */
.dv.qt .qt-ma { user-select: all; cursor: text; letter-spacing: 1px; }
.qt-an { -webkit-text-security: disc; } /* ô mật khẩu: che chữ mà không dùng type=password (trình duyệt hỏi lưu / cập nhật mật khẩu của trang) */
.qt-box { border: 1px solid #3c6e58; padding: 4px 8px; margin: 6px 0; background: rgba(31,74,58,.18); }
.qt-nv { border-top: 1px solid #24443a; margin-top: 6px; padding-top: 2px; }
.qt-do-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px 8px; margin: 2px 0 4px; }
.qt-do-ds .k, .qt-chon .k { grid-column: 1 / -1; margin-top: 4px; }
.qt-mon { display: flex; align-items: center; gap: 6px; min-width: 0; }
.qt-mon img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; flex: none; }
.qt-mon > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-qua { border: 1px solid #3c6e58; padding: 2px 6px 4px; margin: 4px 0; background: rgba(8,14,12,.6); }
.qt-kq { max-height: 150px; }
.qt-chon .qt-mon { padding: 2px 0; }
.qt-nk { border: 1px solid #24443a; max-height: calc(100vh - 270px); overflow: auto; margin: 4px 0; }
.qt-nkr { display: grid; grid-template-columns: 62px 90px 100px 1fr; gap: 6px; padding: 2px 6px; align-items: baseline; }
.qt-nkr:nth-child(odd) { background: rgba(31,74,58,.15); }
.qt-nkr .t { color: #9fc9b5; }
/* nhật ký tự cập nhật (anh 03/11): dòng vừa tới tô sáng rồi mờ dần; ô Tự cập nhật cạnh nút Xem */
.qt-nkr.moi { animation: qtMoi 4s ease-out; }
@keyframes qtMoi { 0% { background: rgba(255,217,78,.35); } 100% { background: transparent; } }
.qt-tu { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: #9fc9b5; cursor: pointer; }
.qt-nkr .a { color: rgb(255,217,78); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-nkr .m { min-width: 0; overflow-wrap: anywhere; }
.qt-nkr .qt-nkm { border-bottom: 1px dotted currentColor; } .qt-nkr .qt-nkm.x { color: #8fb8ff; } /* tên món có bản chụp: trỏ vào xem ô xem món (quantri.js monChu) */
.qt-nkr .l { color: #cfe7dc; } .qt-nkr .l-sai-mk { color: #ff8a7a; } .qt-nkr .l-cap { color: #7ee07e; } .qt-nkr .l-hiem { color: #ffb74d; }
.qt-nkr .l-ktc, .qt-nkr .l-xu { color: #6ec6ff; } .qt-nkr .l-qt, .qt-nkr .l-tb { color: rgb(255,217,78); } .qt-nkr .l-gd { color: #d29bff; }
/* thông báo của quản trị: dòng chữ vàng giữa trên màn hình mọi người chơi (quantri.js loaThongBao) */
.qt-loa { position: fixed; left: 50%; top: 92px; transform: translateX(-50%); z-index: 6; max-width: min(900px, calc(100vw - 32px)); padding: 6px 16px;
  text-align: center; font: 16px/20px var(--jx); color: rgb(255,217,78); background: rgba(0,0,0,.5); border: 1px solid rgba(168,131,68,.7);
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; pointer-events: none; opacity: 0; transition: opacity .4s; }
.qt-loa.on { opacity: 1; }

/* ---------- cửa sổ giống client (src/game/uiwin.js + windows.js, kho assets/ui/win): hệ 1024×768 căn giữa như HUD ---------- */
#jxwin { position: fixed; left: 50%; top: 0; width: 1024px; height: 768px; transform-origin: top center; pointer-events: none; z-index: 4; }
#jxwin .jw { position: absolute; pointer-events: auto; background-repeat: no-repeat; user-select: none; color: #fff; }
#jxwin .jw-page, #jxwin .jw-i { position: absolute; background-repeat: no-repeat; }
#jxwin .vs-page { background-color: #142019; color: #a9d3be; }
#jxwin .vs-summary { box-sizing: border-box; height: 52px; padding: 8px; font: 13px/17px "VK Sans Serif 13", monospace; color: #ffd94e; border-bottom: 1px solid #63715a; }
#jxwin .vs-list { height: 304px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: #698475 #142019; }
#jxwin .vs-row { display: flex; align-items: center; gap: 5px; min-height: 64px; box-sizing: border-box; padding: 5px 4px; border-bottom: 1px solid #435343; background: #101a16dd; font: 13px/16px "VK Sans Serif 13", monospace; }
#jxwin .vs-row.vs-worn { background: #304632; box-shadow: inset 2px 0 #ffd94e; }
#jxwin .vs-preview { flex: 0 0 72px; height: 52px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#jxwin .vs-preview i { display: block; flex-shrink: 0; background-repeat: no-repeat; animation-play-state: paused !important; }
#jxwin .vs-row:hover .vs-preview i, #jxwin .vs-worn .vs-preview i { animation-play-state: running !important; }
#jxwin .vs-info { flex: 1; min-width: 0; }
#jxwin .vs-info b, #jxwin .vs-info span { display: block; }
#jxwin .vs-info b { color: #d1fbe6; }
#jxwin .vs-info small { font-size: 11px; color: #8ea594; }
#jxwin .vs-state { font-style: normal; }
#jxwin .vs-info span { color: #ffd94e; }
#jxwin .vs-row button { appearance: none; flex: 0 0 65px; width: 65px; height: 20px; box-sizing: border-box; padding: 0; border: 0; border-radius: 0; background: url("../../assets/ui/win/img/x_c1638af0.png") 0 0 / 195px 20px no-repeat; color: #a9d3be; font: 13px/20px "VK Sans Serif 13", monospace; text-align: center; text-shadow: 1px 1px #000; cursor: pointer; }
#jxwin .vs-row button:hover, #jxwin .vs-row button:focus-visible { background-position: -130px 0; color: #7cff7d; }
#jxwin .vs-row button:active { background-position: -65px 0; color: #d1fbe6; }
#jxwin .vs-row button[aria-pressed="true"] { color: #ffd94e; }
#jxwin .vs-row button:focus-visible { outline: 1px solid #a9d3be; outline-offset: 1px; }
#jxwin .vs-row button:disabled { opacity: .5; cursor: wait; }
#jxwin .vs-row button { white-space: nowrap; letter-spacing: 0; }
#jxwin .vs-row button.vs-activate { font-size: 12px; }
@keyframes vs-frames { to { background-position-x: var(--vs-end); } }
/* chân dung NPC ở ô Image của khung Describe (src/game/npcdlg.js datChanDung — dải khung hình đứng của client, cong-cu/dung-chan-dung-npc.mjs):
   canh giữa, sát đáy ô, chạy lặp các khung (steps … jump-none: khung đầu tới khung cuối) */
#jxwin .jw-npcanh { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background-repeat: no-repeat; pointer-events: none;
  filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000); } /* nền trong suốt, viền đen quanh hình (anh 29/10 lần 4) */
@keyframes jw-npcanh { from { background-position-x: 0%; } to { background-position-x: 100%; } }
#jxwin .jw-t { display: block; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; pointer-events: none; }
#jxwin .jw-btn, #jxwin .jw-link { cursor: pointer; }
#jxwin .jw-btn.dis { cursor: default; }
/* khung giao dịch: nút Xác nhận khi 2 bên chưa cùng bấm Đồng ý (khóa) — tối đi (bấm vẫn được: báo câu) */
#jxwin .jw-btn.gd-tat { filter: grayscale(.85) brightness(.7); }
#jxwin .jw-slot:hover { outline: 1px solid rgba(255,217,78,.55); outline-offset: -1px; }
#jxwin .jw-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
#jxwin .jw-box .jw-it, #jxwin .gd-xem .jw-it { position: absolute; cursor: pointer; }
/* nền ô món trong túi như client (màu đo trên ảnh game thật 25/10): mặc được xanh, thiếu yêu cầu đỏ sậm — tô từng ô, chừa đường lưới;
   món đang cầm trên tay: ẩn. gd-xem: lưới món của đối phương trong khung giao dịch — chỉ xem, không phải chỗ thả món (windows.js _giaoDich) */
#jxwin .jw-box .jw-cell, #jxwin .gd-xem .jw-cell { position: absolute; pointer-events: none; }
#jxwin .jw-box .jw-cell.ok, #jxwin .gd-xem .jw-cell.ok { background: rgb(0,56,41); }
#jxwin .jw-box .jw-cell.no, #jxwin .gd-xem .jw-cell.no { background: rgb(49,0,0); }
#jxwin .jw-box .jw-it:hover .jw-cell, #jxwin .gd-xem .jw-it:hover .jw-cell { filter: brightness(1.35); }
#jxwin .jw-box .jw-it.held { visibility: hidden; }
/* số bình của chồng thuốc: góc dưới phải ô */
#jxwin .jw-box .jw-n, #jxwin .gd-xem .jw-n { position: absolute; right: 2px; bottom: 1px; font: 13px/13px var(--jx); font-weight: normal; color: #fff; pointer-events: none; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000; }
/* ô số lượng của khung mua bán (买卖确认.ini BuyNumber) */
#jxwin .jw-num { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; background: transparent; border: 0; outline: 0; padding: 0;
  text-align: center; font: 13px/15px var(--jx); caret-color: #fff; }
/* nút "Mua tối đa (N)" liền dưới khung mua (khung client 122 × 115 không còn chỗ) */
#jxwin .jw-max { position: absolute; left: 0; height: 20px; box-sizing: border-box; margin-top: 1px; padding: 0; cursor: pointer;
  font: 12px/18px var(--jx); color: rgb(255,246,108); background: rgba(8,14,12,.92); border: 1px solid #3c6e58; border-radius: 2px; }
#jxwin .jw-max:hover:not(:disabled) { color: #fff; border-color: #6aa88c; }
#jxwin .jw-max:disabled { color: #6f7a74; cursor: default; }
/* chợ trời (src/game/chotroi.js): dòng dưới khung Rao bán (giá người mua trả — client không có) và ô tìm của bảng Chợ Trời — nền tối viền như ô
   nhập / nút của khung client */
#jxwin .jw-gia-them { position: absolute; left: -24px; width: 170px; box-sizing: border-box; padding: 3px 6px; pointer-events: none;
  font: 12px/15px var(--jx); color: #fff; text-align: center; background: rgba(8,14,12,.9); border: 1px solid rgb(100,80,30); border-radius: 2px; }
#jxwin .jw-tim { position: absolute; left: 186px; top: 78px; width: 150px; height: 20px; box-sizing: border-box; padding: 0 6px; outline: 0;
  font: 13px/18px var(--jx); color: #fff; caret-color: #fff; background: rgb(8,10,8); border: 1px solid rgb(90,83,64); }
#jxwin .jw-tim::placeholder { color: rgb(130,130,110); }
#jxwin .jw-tim:focus { border-color: rgb(150,130,80); }
/* món đang cầm trên tay: dính theo chuột (src/game/windows.js _handPick) */
.jw-hand { position: fixed; z-index: 9; pointer-events: none; display: flex; align-items: center; justify-content: center; opacity: .9; }
/* ô xem chiêu + ô xem món như client (src/game/windows.js _tipFrame, src/game/skilltip.js, src/game/itemtip.js): chữ canh giữa, không tự
   ngắt, viền chữ đen 1 điểm */
.jw-sktip { position: fixed; z-index: 8; display: none; pointer-events: none; transform-origin: 0 0; }
.jw-sktip .b { color: #fff; text-align: center; white-space: pre;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000; }

/* bản đồ nhỏ dán góc phải trên, khung chat dán góc trái dưới (src/game/hud.js, anh muốn 23/10) */
#jxhud .jx-mmbox { position: absolute; top: 0; right: 0; transform-origin: top right; pointer-events: none; }
/* hàng biểu tượng trạng thái (技能状态列表.ini: ô 24, chữ thời gian y 21 cao 12, cỡ 12 giữa, màu 55,231,63) — x 24 / y 28 theo ảnh client */
#jxhud .jx-stbar { position: absolute; top: 28px; left: 24px; width: 240px; height: 72px; transform-origin: top left; pointer-events: none; }
#jxhud .jx-st { position: absolute; width: 24px; height: 33px; pointer-events: auto; }
#jxhud .jx-st img { position: absolute; left: 0; top: 0; width: 24px; height: 24px; image-rendering: pixelated; }
#jxhud .jx-st span { position: absolute; left: -6px; top: 21px; width: 36px; height: 12px; font: 13px/12px "VK Sans Serif 13", monospace; text-align: center; color: rgb(55,231,63);
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; white-space: nowrap; }
#jxhud .jx-chatbox { position: absolute; bottom: 0; left: 0; transform-origin: bottom left; pointer-events: none; }
/* bảng đội ngũ góc trái (hud.js setDoi — anh 29/10; client 队伍一览信息.ini: mỗi người 1 ô 135 × 17, chữ cỡ 12 màu 165,255,203 canh giữa, nền
   frame_member.spr — bản client này thiếu hình nên vẽ khung tối viền mảnh): dưới hàng biểu tượng trạng thái, bảng nhiệm vụ xuống dưới bảng này;
   thanh sinh lực đỏ / nội lực xanh 3 điểm ảnh dưới tên; khác bản đồ / rời mạng: chữ xám, không thanh; ô của mình viền vàng; đội trưởng ★.
   Anh 29/10 lần 2: dòng đầu Đội ngũ thu gọn / mở như bảng nhiệm vụ; trên 4 người xếp 2 cột (.hai). Lần 3 thử 1 dòng / người (sinh lực làm nền
   tên) — anh so 2 ảnh, giữ kiểu 2 thanh dưới tên này */
#jxhud .jx-doi { position: absolute; left: 10px; top: 104px; width: 135px; transform-origin: top left; pointer-events: auto; display: none; font: 13px/16px var(--jx); color: #fff; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
#jxhud .jx-doi.hai { width: 214px; }
#jxhud .jx-doi .jx-doi-dau { cursor: pointer; margin-bottom: 2px; }
#jxhud .jx-doi.gon .jx-doi-ds { display: none; }
#jxhud .jx-doi.hai .jx-doi-ds { display: grid; grid-template-columns: 105px 105px; column-gap: 4px; }
#jxhud .jx-doi.hai.gon .jx-doi-ds { display: none; }
#jxhud .jx-doi.on { display: block; }
#jxhud .jx-doi-tv { width: 135px; margin-bottom: 3px; cursor: pointer; }
#jxhud .jx-doi.hai .jx-doi-tv { width: 105px; }
#jxhud .jx-doi-ten { height: 17px; padding: 0 3px; box-sizing: border-box; font: 12px/17px var(--jx); color: rgb(165,255,203); text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px rgba(165,255,203,.35); text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
#jxhud .jx-doi-truong { color: rgb(255,217,78); font-weight: normal; }
#jxhud .jx-doi-tv.toi .jx-doi-ten { box-shadow: inset 0 0 0 1px rgba(255,217,78,.7); }
#jxhud .jx-doi-tv.xa .jx-doi-ten { color: rgb(150,150,150); }
#jxhud .jx-doi-hp, #jxhud .jx-doi-mp { height: 3px; background: rgba(0,0,0,.6); }
#jxhud .jx-doi-hp i, #jxhud .jx-doi-mp i { display: block; height: 100%; }
#jxhud .jx-doi-hp i { background: rgb(214,36,36); }
#jxhud .jx-doi-mp i { background: rgb(56,104,255); }
/* kéo thả bảng (hud.js keoBang — anh 29/10 lần 3, Trợ Thủ → Khác): khung vàng nét đứt phủ bảng, giữ chuột trái kéo; bảng đang ẩn (chưa có đội,
   xa mộc nhân) cũng hiện để đặt chỗ; thanh Lưu bố cục / Mặc định / Hủy giữa trên màn hình */
#jxhud .jx-doi.bc-keo { display: block; min-height: 36px; background: rgba(0,0,0,.25); }
.mn.bc-keo { display: block; z-index: 2; } /* lúc kéo: xuống dưới lớp HUD — chỗ mặc định của nó đè hàng biểu tượng trạng thái, khung kéo của hàng đó phải bấm được */
.bc-vien { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; cursor: move; pointer-events: auto;
  background: rgba(255,217,78,.08); outline: 1px dashed rgb(255,217,78); }
.bc-vien span { padding: 1px 6px; background: rgba(0,0,0,.78); color: rgb(255,217,78); font: 12px/16px var(--jx); white-space: nowrap; pointer-events: none; }
body.bc-dang-keo, body.bc-dang-keo * { cursor: move !important; user-select: none; }
#jxhud .jx-bcbar { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px;
  pointer-events: auto; white-space: nowrap; background: rgba(0,0,0,.78); border: 1px solid #6a5a35; color: rgb(255,246,108); font: 12px/16px var(--jx);
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
#jxhud .jx-bcbar b { font-weight: normal; color: rgb(255,217,78); background: #1a1610; border: 1px solid #6a5a35; padding: 1px 6px; cursor: pointer; }
#jxhud .jx-bcbar b:hover { color: #fff; border-color: rgb(255,217,78); }
/* bảng nhiệm vụ góc trái (hud.js setNhiemVu — anh 28/10): dưới 2 hàng biểu tượng trạng thái; chữ client: tên vàng 255,217,78, nhóm cam,
   chữ thường trắng, chữ bấm được xanh lá 55,231,63 gạch chân; nền đen trong như dòng tin chạy; nút mũi tên sys_up / sys_down của khung chat */
#jxhud .jx-nvbang { position: absolute; top: 104px; left: 4px; width: 214px; transform-origin: top left; pointer-events: auto;
  font: 13px/16px var(--jx); color: #fff; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
#jxhud .jx-nv-dau { display: flex; align-items: center; justify-content: space-between; height: 18px; padding: 0 3px 0 6px; background: rgba(0,0,0,.55);
  color: rgb(255,246,108); }
#jxhud .jx-nv-nut { width: 15px; height: 14px; background-size: 45px 14px; background-repeat: no-repeat; }
#jxhud .jx-nv-than { overflow: hidden auto; padding: 2px 6px 5px; background: rgba(0,0,0,.36); scrollbar-width: none; }
#jxhud .jx-nv-than::-webkit-scrollbar { display: none; }
#jxhud .jx-nvbang.gon .jx-nv-than { display: none; }
#jxhud .jx-nv-nhom { margin-top: 3px; color: rgb(255,166,59); }
#jxhud .jx-nv-muc { margin: 1px 0 3px; }
#jxhud .jx-nv-ten { color: rgb(255,217,78); }
#jxhud .jx-nv-ten span { color: #c9bfa5; }
#jxhud .jx-nv-dong { padding-left: 9px; word-break: break-word; }
#jxhud .jx-nv-dong.trong { padding: 2px 0; color: #c9bfa5; }
#jxhud .jx-nv-dong .bam { color: rgb(55,231,63); text-decoration: underline; }
#jxhud .jx-nv-dong .bam:hover { color: rgb(255,246,108); }
#jxhud .jx-mmbox > *, #jxhud .jx-chatbox > * { position: absolute; pointer-events: auto; }
#jxhud .jx-mmbox > .jx-mm-shadow { pointer-events: none; }
/* dòng đếm giờ thuyền Phong Lăng Độ (hud.js setThuyen) — kiểu dòng tin chạy client 新闻消息来了.ini: y 30, chữ 14 màu 255,253,122, nền đen trong 80/255 */
#jxhud .jx-thuyen { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); padding: 2px 11px; white-space: nowrap; pointer-events: none;
  font: 14px/16px "JX ASF 14", var(--jx); color: rgb(255,253,122); background: rgba(0,0,0,.31); text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
#jxhud .jx-mmbox > .jx-mm-input { display: none; }
#jxwin .jw-clip { position: absolute; overflow: hidden; }
#jxwin .jw-face { position: absolute; background-size: 100% 100%; cursor: pointer; }
#jxwin .jw-face.on { outline: 2px solid rgb(255,217,78); outline-offset: -2px; }
#jxwin .jw-list { overflow: hidden; font: 13px/13px "VK Sans Serif 13", "IBM Plex Mono", monospace; }
#jxwin .jw-row { display: flex; justify-content: space-between; padding: 0 10px 0 28px; }
#jxwin .jw-row b { font-weight: normal; color: rgb(255,217,78); }
#jxwin .jw-note { position: absolute; text-align: center; font: 13px/16px "VK Sans Serif 13", "IBM Plex Mono", monospace; color: #c9bfa5; text-shadow: 1px 1px #000; pointer-events: none; }
#jxwin .jw { overflow: hidden; } /* như client: phần con vẽ ra ngoài khung cửa sổ bị cắt */
#jxwin .jw-mem { line-height: 14px; height: 14px; text-align: center; white-space: nowrap; }
/* Giúp đỡ (khung HỖ TRỢ 详细帮助界面.ini) + Tin cập nhật (khung Nhật ký 任务记事.ini) — anh 29/10, windows.js _giupDo / _tin: mục bên trái (đang
   chọn: SelColor, nền SelItemBgColor, viền chữ SelBorderColor của ini — biến --chon*), nội dung bên phải tự xuống dòng, cuộn bằng bánh xe / nút kéo */
#jxwin .jw-gd { line-height: 16px; }
#jxwin .gd-muc { height: 16px; padding-left: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#jxwin .gd-muc:hover { color: rgb(255,253,122); }
#jxwin .gd-muc.on { color: var(--chon); background: var(--chon-nen); text-shadow: 1px 0 var(--chon-vien), -1px 0 var(--chon-vien), 0 1px var(--chon-vien), 0 -1px var(--chon-vien); }
#jxwin .jw-gd .gd-ten { color: rgb(255,253,122); padding: 2px 4px 4px; }
#jxwin .jw-gd .gd-h { color: rgb(255,217,78); margin-top: 6px; padding: 0 4px; }
#jxwin .jw-gd .gd-b { padding: 1px 4px 1px 14px; text-indent: -10px; white-space: normal; overflow-wrap: anywhere; }
#jxwin .jw-gd .gd-p { padding: 1px 4px; white-space: normal; overflow-wrap: anywhere; }
#jxwin .jw-gd .gd-v { color: rgb(255,217,78); }
#jxwin .tin-muc { display: flex; gap: 6px; }
#jxwin .tin-ngay { flex: none; color: rgb(170,196,185); }
#jxwin .tin-ten { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#jxwin .tin-moi { flex: none; padding-right: 4px; font-weight: normal; color: rgb(255,64,64); }
#jxwin .jw-gd .tin-ngay2 { padding: 0 4px 4px; color: rgb(170,196,185); }
/* khung hình của Giúp đỡ (bảng phím / bảng ngũ hành 800 × 600 của client — nền trong suốt): lót nền tối, bấm vào hình để đóng */
#jxwin .jw.jw-hinh { background-color: rgba(8,12,10,.9); box-shadow: 0 0 0 1px #000, 0 0 0 3px rgba(170,196,185,.45); cursor: pointer; }
#jxwin .jw-hinh-nhac { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 13px/16px "VK Sans Serif 13", monospace; color: rgb(170,196,185); text-shadow: 1px 1px #000; pointer-events: none; }
/* tiêu đề viết lại (nền đã xóa chữ vẽ sẵn): như tiêu đề Kỳ Trân Các — chữ sáng đậm (vẽ lặp lệch 1 điểm) viền đen, giữa 2 đồng tiền trang trí */
#jxwin .jw-tieude13 { position: absolute; left: 149px; top: 4px; width: 120px; height: 14px; font: 13px/14px "VK Sans Serif 13", monospace; color: rgb(170,196,185);
  text-align: center; white-space: pre; pointer-events: none;
  text-shadow: 1px 0 0 rgb(170,196,185), 2px 0 #010101, -1px 0 #010101, 0 1px #010101, 0 -1px #010101, 1px 1px #010101, 1px -1px #010101, 2px 1px #010101, 2px -1px #010101, -1px 1px #010101, -1px -1px #010101; }
/* nút Tin cập nhật của bảng Esc (nền không chữ — cong-cu/dung-khung-cua-hang.mjs): chữ đậm đen viền vàng nhạt như 4 nút kia (đo ảnh: chữ 2,2,1,
   viền 228,228,131; nhấn: không viền); có tin chưa xem: chữ "Mới" đỏ. Nút Tùy chỉnh thanh dưới (mở bảng Esc): chấm đỏ */
#jxwin .jw-escchu { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; pointer-events: none;
  font: bold 16px/28px Tahoma, Verdana, sans-serif; color: rgb(2,2,1);
  text-shadow: 1px 0 rgb(228,228,131), -1px 0 rgb(228,228,131), 0 1px rgb(228,228,131), 0 -1px rgb(228,228,131), 1px 1px rgb(228,228,131), -1px -1px rgb(228,228,131); }
#jxwin .jw-btn:active .jw-escchu { text-shadow: none; }
#jxwin .jw-escchu b { display: none; padding: 1px 3px; border-radius: 2px; font: bold 11px/13px Tahoma, sans-serif; color: #fff; background: rgb(200,30,30); text-shadow: none; }
#jxwin .co-moi .jw-escchu b { display: inline-block; }
/* nút Sắp xếp túi / rương (anh 06/11 — windows.js _nutXep): thẻ client 50 × 12 (img/xep_the.png — cong-cu/dung-nut-sap-xep.mjs, 3 khung ngang: khung 1 =
   thường, 0 = nhấn, 2 = rê chuột như BtnPage của ini), chữ màu như số của thẻ (thường 131,181,153 · nhấn 156,156,156 · rê trắng). Điện thoại: chạm rộng hơn thẻ */
#jxwin .jw-xep { width: 50px; height: 12px; background-repeat: no-repeat; background-position: -50px 0; cursor: pointer; z-index: 3; }
#jxwin .jw-xep:hover { background-position: -100px 0; }
#jxwin .jw-xep:active { background-position: 0 0; }
#jxwin .jw-xepchu { position: absolute; inset: 0; text-align: center; white-space: nowrap; pointer-events: none; font: 13px/12px "VK Sans Serif 13", "IBM Plex Mono", monospace; color: rgb(131,181,153); }
#jxwin .jw-xep:hover .jw-xepchu { color: #fff; }
#jxwin .jw-xep:active .jw-xepchu { color: rgb(156,156,156); }
body.dt #jxwin .jw-xep::before { content: ""; position: absolute; inset: -8px -4px -3px; }
#jxhud .jx-btn.co-moi::after { content: ""; position: absolute; right: 1px; top: 1px; width: 7px; height: 7px; border-radius: 50%; background: rgb(230,40,40); box-shadow: 0 0 0 1px #000; pointer-events: none; }

/* con trỏ chuột của client (assets/ui/hud/cursor, ui\ui3\公共.ini CursorList) — src/game/main.js đặt --jxcur; ô gõ chữ giữ con trỏ chữ */
body.jxcur, body.jxcur * { cursor: var(--jxcur) !important; }
body.jxcur input, body.jxcur textarea { cursor: text !important; }
/* bộ đo FPS góc trái trên (src/game/main.js fpsTick) */
#fps { position: fixed; left: 4px; top: 2px; z-index: 9; font: 13px/13px "VK Sans Serif 13", "IBM Plex Mono", monospace; color: rgb(0,255,0);
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; pointer-events: none; white-space: nowrap; }
#fps.low { color: rgb(255,200,0); }
/* dải trên lấn chỗ (cửa sổ hẹp / không phóng to): main.js datFps đặt top ngay dưới dải + hud.datLech đẩy cột bên trái xuống */
/* khung Trợ Thủ (src/game/trothu.js): nội dung trong nền khung Thuộc tính khác, chữ client VK Sans Serif 13; tiêu đề mục vàng như
   txtAttribListTitle của client, chữ thường màu chữ ô bật / tắt của Tùy chọn; ô đánh dấu = hình ToggleStatus của client */
#jxwin .tt { position: absolute; left: 10px; top: 62px; width: 296px; height: 346px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  font: 13px/15px var(--jx); color: rgb(254,255,195); text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
#jxwin .tt-h { color: rgb(255,250,0); margin: 6px 0 3px; border-bottom: 1px solid rgba(255,250,0,.25); padding-bottom: 1px; }
#jxwin .tt-h:first-child { margin-top: 0; }
#jxwin .tt-r { display: flex; align-items: center; gap: 4px; min-height: 20px; white-space: nowrap; }
#jxwin .tt-in { display: inline-block; width: 12px; }
#jxwin .tt-x { color: rgb(169,211,190); overflow: hidden; text-overflow: ellipsis; }
#jxwin .tt-l { flex: 1 1 auto; min-width: 0; } /* tên dòng thuộc tính / món không nhặt: co lại, dài thì "…" (rê chuột xem đủ) */
#jxwin .tt-t { width: 170px; text-align: left; } /* ô gõ tên món không nhặt */
#jxwin .tt-g { color: rgb(160,160,150); font-size: 12px; line-height: 14px; margin: 2px 0 2px 16px; white-space: normal; }
#jxwin .tt-c { display: inline-block; flex: none; cursor: pointer; background-repeat: no-repeat; }
#jxwin .tt-o { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgb(169,211,190); cursor: pointer; box-sizing: border-box; }
#jxwin .tt-o.on { background: radial-gradient(rgb(255,250,0) 0 35%, transparent 45%); }
#jxwin .tt-n { font: 13px/14px var(--jx); color: rgb(255,246,108); background: rgba(0,0,0,.55); border: 1px solid #6a5a35; padding: 0 2px; text-align: center; height: 16px; box-sizing: border-box; }
/* thanh xổ kiểu game (anh 02/11 chọn mẫu B — trothu.js _s / _xo): ô đang chọn chữ vàng như ô số, rộng theo dòng dài nhất (mọi dòng chồng 1 ô lưới,
   chỉ dòng đang chọn hiện), tam giác vàng đồng; khung xổ nền tối, viền vàng đồng, dòng chọn nền vàng đồng, dòng khóa xám */
#jxwin .tt-s { display: inline-grid; grid-template-columns: minmax(0, auto) 9px; align-items: center; column-gap: 3px; vertical-align: middle; box-sizing: border-box;
  font: 12px/14px var(--jx); color: rgb(255,246,108); background: #1a1610; border: 1px solid #6a5a35; padding: 0 3px; max-width: 170px; cursor: pointer; }
#jxwin .tt-s:hover { border-color: #a8893f; }
#jxwin .tt-s > b { grid-area: 1 / 1; font-weight: normal; visibility: hidden; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#jxwin .tt-s > b.on { visibility: visible; }
#jxwin .tt-s > i { grid-area: 1 / 2; justify-self: center; width: 0; height: 0; border: 4px solid transparent; border-top: 5px solid #c9a95a; border-bottom: 0; }
.tt-xo { position: fixed; z-index: 100000; overflow-y: auto; box-sizing: border-box; padding: 2px 0; background: rgba(14,11,6,.96); border: 1px solid #a8893f;
  box-shadow: 0 0 0 1px #000, 0 4px 14px #000c; font: 12px/19px var(--jx); scrollbar-width: thin; scrollbar-color: #6a5a35 transparent; touch-action: pan-y; }
.tt-xo > b { display: block; font-weight: normal; padding: 0 12px 0 8px; white-space: nowrap; color: rgb(255,246,108); cursor: pointer; }
.tt-xo > b:hover { background: rgba(122,104,56,.55); color: #fff; }
.tt-xo > b.on { background: linear-gradient(#7a6838, #4f4224); color: #fff; }
.tt-xo > b.khoa, .tt-xo > b.khoa:hover { color: #7d7058; background: none; cursor: default; }
#jxwin .tt-b { font: 12px/14px var(--jx); color: rgb(255,217,78); background: #1a1610; border: 1px solid #6a5a35; padding: 1px 6px; cursor: pointer; }
#jxwin .tt-b:hover { color: #fff; border-color: rgb(255,217,78); }
/* thẻ con (anh 03/11 — Đánh quái: Quái thường / Boss Hoàng Kim; Tiện ích: Ngũ hành / Nhiệm vụ ngày): dính trên đầu khi cuộn */
#jxwin .tt-con { position: sticky; top: 0; z-index: 1; display: flex; gap: 4px; padding: 0 0 4px; margin-bottom: 2px; background: rgba(16,13,8,.92); }
#jxwin .tt-con > span { flex: 1 1 0; text-align: center; font: 12px/18px var(--jx); color: rgb(169,211,190); background: #1a1610; border: 1px solid #6a5a35; cursor: pointer; }
#jxwin .tt-con > span:hover { color: #fff; border-color: rgb(255,217,78); }
#jxwin .tt-con > span.on { color: rgb(255,250,0); background: linear-gradient(#5a4a26, #2a2214); border-color: #c9a95a; cursor: default; }
/* Tiện ích → Ngũ hành: nút hệ vũ khí (chữ màu hệ; cam = hệ vũ khí đang cầm — gạch chân), khung trang bị client + chữ hệ cạnh ô (anh chọn bản 1) */
#jxwin .tt-he { font: bold 12px/16px var(--jx); padding: 0 6px; background: #1a1610; border: 1px solid #4a3f28; cursor: pointer; }
#jxwin .tt-he:hover { border-color: #a8893f; }
#jxwin .tt-he.on { border-color: rgb(255,217,78); background: linear-gradient(#4f4224, #241d10); box-shadow: 0 0 4px rgba(255,217,78,.6); }
#jxwin .tt-he.cam { text-decoration: underline; text-underline-offset: 2px; }
#jxwin .tt-nh1 { position: relative; width: 296px; margin: 4px 0 2px; background-repeat: no-repeat; border: 1px solid #3a3020; box-sizing: border-box; }
#jxwin .tt-nh1 > b { position: absolute; font: bold 13px/16px var(--jx); letter-spacing: .2px; white-space: nowrap; pointer-events: none;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000; }

/* khung Nhiệm vụ — thẻ Nhiệm vụ (anh 03/11 "nhiệm vụ trên mobile … nội dung thì hơi chán" — windows.js taskVe; anh chọn bản "ô nhiệm vụ như client"): phủ phần
   trong khung (x 18–400, y 44–412 của nền 新任务系统窗口), chữ client như Trợ Thủ; đoạn xanh bấm được gạch chân; thanh tiến độ vàng */
#jxwin .nvx { position: absolute; left: 18px; top: 44px; width: 382px; height: 368px; font: 13px/17px var(--jx); color: rgb(254,255,195); text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
#jxwin .nvx .bam { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
#jxwin .nvx small { color: rgb(201,191,165); margin-left: 6px; font-size: 12px; }
#jxwin .nvx em { font-style: normal; font-size: 11px; line-height: 15px; padding: 0 5px; border: 1px solid; margin-left: 8px; white-space: nowrap; }
#jxwin .nvx-d { margin: 1px 0; }
#jxwin .nvx-th { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 12px; line-height: 14px; color: rgb(201,191,165); }
#jxwin .nvx-th span { width: 52px; flex: none; }
#jxwin .nvx-th i { flex: 1 1 auto; height: 7px; background: rgba(0,0,0,.6); border: 1px solid #5a4a26; }
#jxwin .nvx-th u { display: block; height: 100%; background: linear-gradient(#ffe27a, #c99a2a); }
#jxwin .nvx-th b { font-weight: normal; color: rgb(255,246,108); min-width: 46px; text-align: right; }
#jxwin .nvx-hinh { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex: none; }
#jxwin .nvx-hinh img, #jxwin .nvx-o img { max-width: 48px; max-height: 48px; image-rendering: pixelated; pointer-events: none; }
#jxwin .nvx-trong { padding-top: 150px; text-align: center; color: rgb(201,191,165); }
#jxwin .nvx-ten { color: rgb(255,250,0); font-size: 15px; line-height: 19px; display: flex; align-items: center; flex-wrap: wrap; }
/* ô nhiệm vụ như client — hàng ô của nền khung, ô hình lớn + chi tiết khung dưới */
#jxwin .nvx .nvx-o { position: absolute; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-sizing: border-box; border: 1px solid transparent; }
#jxwin .nvx .nvx-o:hover { border-color: #a8893f; }
#jxwin .nvx .nvx-o.on { border: 2px solid rgb(255,217,78); box-shadow: inset 0 0 8px rgba(255,217,78,.55); }
#jxwin .nvx .nvx-o s { position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #9a927e; box-shadow: 0 0 0 1px #000; }
#jxwin .nvx .nvx-o s.lam { background: #5ee05e; }
#jxwin .nvx .nvx-o s.tra { background: #ffd84a; }
#jxwin .nvx .nvx-hinh.lon { position: absolute; left: 19px; top: 134px; }
#jxwin .nvx .nvx-dau1 { position: absolute; left: 80px; top: 130px; width: 294px; }
#jxwin .nvx .nvx-ct { position: absolute; left: 10px; top: 196px; width: 364px; height: 166px; overflow-y: auto; scrollbar-width: none; }

/* bảng chọn chiêu của ô kỹ năng T / P (võ công 25/10) */
.jx-skpick { position: fixed; z-index: 7; display: flex; flex-wrap: wrap; gap: 3px; max-width: 330px; padding: 6px; background: rgba(8,14,12,.94); border: 1px solid #3c6e58; box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0,0,0,.7); font: 12px/14px var(--jx); color: #e8e2c8; }
.jx-skpick > div { position: relative; width: 34px; height: 34px; border: 1px solid #4a4434; background: #14110b; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.jx-skpick > div:hover { border-color: rgb(255,217,78); }
.jx-skpick > div.on { border-color: #7cff6b; box-shadow: inset 0 0 0 1px #7cff6b; }
.jx-skpick > div > span { font-size: 10px; line-height: 11px; text-align: center; padding: 1px; }
.jx-skpick > div > b { position: absolute; right: 1px; bottom: 0; font: 11px/11px var(--jx); color: rgb(255,217,78); text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
.jx-skpick > p { flex-basis: 100%; margin: 3px 0 0; color: #a9a38a; font-size: 11px; }
/* icon đang kéo (chiêu / ô dùng nhanh) */
.jx-dragic { position: fixed; z-index: 30; width: 32px; height: 32px; pointer-events: none; opacity: .85; image-rendering: pixelated; }

/* màn chờ chuyển bản đồ (src/game/loading.js): ảnh nền phủ kín, tên bản đồ + thanh tải ở dưới; phủ trên mọi khung -> chờ thì không bấm được */
.zl { position: fixed; inset: 0; z-index: 9000; display: none; background: #000; opacity: 1; transition: opacity .25s; cursor: progress; }
.zl.on { display: block; }
.zl.out { opacity: 0; }
/* ảnh chờ phủ kín màn hình (anh 27/10 "full hình") — src/game/loading.js; dải tối dưới cho chữ + thanh tải */
.zl-bg { position: absolute; inset: 0; background: #0b0c0d center / cover no-repeat; }
.zl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.75) 100%); pointer-events: none; }
.zl-bot { z-index: 1; }
.zl-bot { position: absolute; left: 50%; bottom: max(28px, 5vh); transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); }
.zl-t { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; color: #f3cf7a; font-weight: 600;
  text-shadow: 0 1px 2px #000, 0 0 6px #000; font-size: 15px; }
.zl-p { color: #fff6e0; font-variant-numeric: tabular-nums; }
.zl-bar { height: 12px; border: 1px solid #c79a4a; border-radius: 3px; background: rgba(10, 8, 6, .8); box-shadow: 0 0 0 1px #000, inset 0 1px 3px #000; overflow: hidden; }
.zl-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#f6d77e, #c88a2a 55%, #9a6418); transition: width .15s linear; }
/* nút dưới thanh tải (tải trước lần đầu: "Vào game ngay" — src/game/tai-truoc.js) */
.zl-nut { display: none; width: fit-content; margin: 8px 0 0 auto; padding: 4px 12px; font: 13px/15px var(--jx); color: #f3cf7a; background: rgba(10,8,6,.85); border: 1px solid #c79a4a; border-radius: 3px; cursor: pointer; }
.zl-nut:hover { color: #fff6e0; border-color: #f6d77e; }

/* ---------- chế độ điện thoại dựng dọc (src/game/dienthoai.js — anh 29/10 chọn mẫu 1 Cổ phong của mau-dien-thoai/): body.dt khi bật + dựng
   dọc; xoay ngang thì bỏ body.dt -> giao diện máy tính như cũ. --dt-day = đáy phần cảnh (= đỉnh bảng dưới) ---------- */
#dt, #dt-hanh { display: none; }
/* touch-action pan-x pan-y (anh 01/11, iPhone bị phóng to): cuộn được, không chụm 2 ngón / chạm 2 lần phóng to — trước manipulation (vẫn cho chụm) */
body.dt { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; touch-action: pan-x pan-y; }
/* kéo xuống ở đỉnh trang không tải lại trang; giữ ngón trên hình không kéo hình ra (Android: mất chạm giữ) */
html.dt-bat, body.dt { overscroll-behavior: none; }
body.dt img { -webkit-user-drag: none; }
body.dt #cv { touch-action: none; }
body.dt #dt { display: block; position: fixed; inset: 0; z-index: 3; pointer-events: none; font: 13px/15px var(--jx); color: #e9e3cf; }
body.dt #dt > * { position: absolute; pointer-events: auto; }
#dt .dt-ic { display: block; flex: none; background-repeat: no-repeat; }
/* thanh trên */
#dt .dt-tren { left: 0; top: 0; width: 100%; height: 68px; background: linear-gradient(#0000, #000b), url(../../assets/ui/win/img/ktc_nen.png) -60px -110px;
  box-shadow: inset 0 -2px 0 #7f9f90, inset 0 -3px 0 #000, 0 3px 8px #000c; }
#dt .dt-tren > * { position: absolute; }
#dt .dt-chan { left: 6px; top: 6px; width: 54px; height: 54px; border: 2px solid #8fae9f; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000; background: #111 center 25% / cover no-repeat; }
#dt .dt-cap { position: absolute; left: -4px; bottom: -6px; padding: 0 5px; height: 17px; border: 1px solid #8fae9f; background: #13201b; font: 16px/15px "VK Sans Serif 16", monospace; color: #ffe48a; font-weight: normal; }
#dt .dt-ten { left: 68px; top: 4px; right: 46px; white-space: nowrap; overflow: hidden; font: 16px/18px "VK Sans Serif 16", monospace; color: #ffe48a; text-shadow: 1px 1px 0 #000; }
#dt .dt-phai { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid #3d6a5c; background: #0b1a16; font: 13px/15px var(--jx); vertical-align: 1px; }
#dt .dt-h2, #dt .dt-h3 { left: 68px; display: flex; gap: 4px; align-items: center; }
#dt .dt-h2 { top: 26px; right: 46px; } /* bên phải còn nút Toàn màn hình (Nhận thưởng vào bảng Giang hồ — 30/10 lần 3) */
#dt .dt-h3 { top: 46px; right: 6px; gap: 6px; }
#dt .dt-tn { position: relative; flex: 1; height: 14px; background: #090909; border: 1px solid #58756a; box-shadow: inset 0 1px 2px #000; }
#dt .dt-tn i { position: absolute; left: 1px; top: 1px; bottom: 1px; max-width: calc(100% - 2px); }
#dt .dt-tn b { position: absolute; inset: 0; text-align: center; font: 13px/12px var(--jx); font-weight: normal; color: #fff; white-space: nowrap; text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000, 1px 1px #000; }
#dt .dt-hp i { background: linear-gradient(#ff9b8d, #d9281c 50%, #8a110b); }
#dt .dt-mp i { background: linear-gradient(#97b8ff, #2f5fd8 50%, #152f86); }
#dt .dt-ex i { background: linear-gradient(#ffe9a0, #d9a521 50%, #7c5a0a); }
#dt .dt-tien { flex: none; display: flex; align-items: center; gap: 3px; color: #ffe48a; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
#dt .dt-nt { top: 4px; width: 34px; height: 34px; border: 1px solid #7f9f90; background: linear-gradient(#22302b, #0d1512); box-shadow: inset 0 0 0 1px #000; display: grid; place-items: center; color: #cfe9dc; }
#dt .dt-toan { display: block; width: 16px; height: 16px; --c: linear-gradient(currentColor, currentColor); background: var(--c) 0 0/6px 2px, var(--c) 0 0/2px 6px, var(--c) 100% 0/6px 2px, var(--c) 100% 0/2px 6px,
  var(--c) 0 100%/6px 2px, var(--c) 0 100%/2px 6px, var(--c) 100% 100%/6px 2px, var(--c) 100% 100%/2px 6px; background-repeat: no-repeat; }
/* trên cảnh */
#dt .dt-bd { left: 50%; top: 90px; transform: translateX(-50%); max-width: calc(100% - 210px); padding: 1px 10px; background: #000a; border: 1px solid #58756a; white-space: nowrap; overflow: hidden; color: #ffe48a; font: 16px/20px "VK Sans Serif 16", monospace; }
#dt .dt-bd em { font: 13px/20px var(--jx); font-style: normal; color: #9fd8ff; margin-left: 6px; }
/* FPS · Mạng · Trực tuyến (dienthoai.js _game — anh 30/10 lần 2): ô riêng cùng 1 hàng ở mép trái ngay dưới chân dung / ô cấp, trên hàng biểu
   tượng trạng thái (anh 31/10 "tách thành 2 cái khác nhau đặt ngay" — ảnh mũi tên — rồi "vẫn tách nhưng nằm chung hàng ngang" + số người trực
   tuyến; bản trước 1 dòng giữa màn dưới tên bản đồ). Dọc: tên bản đồ xuống dưới hàng này (top 90 — cùng hàng thì đè tên bản đồ dài), hàng biểu
   tượng trạng thái 118, bảng Mộc nhân 152 (anh 31/10 có thử tên bản đồ cùng hàng, sát mép phải + bản đồ nhỏ xuống 24, rồi chọn giữ bản này);
   ngang: dưới khung chân dung, hàng biểu tượng xuống 16. Mạng chậm vàng, rất chậm / mất kết nối đỏ */
#dt .dt-mang { left: 4px; top: 70px; display: flex; align-items: flex-start; gap: 4px; pointer-events: none; }
#dt .dt-mang > b { padding: 0 6px; background: #0009; white-space: nowrap; color: #9fe8b0; font: 12px/15px var(--jx); font-weight: normal; text-shadow: 1px 1px 0 #000; }
#dt .dt-mang > .cham { color: #ffe48a; }
#dt .dt-mang > .mat { color: #ff6a5a; }
body.dt.dt-ngang #dt .dt-mang { left: 6px; top: 68px; }
body.dt.dt-ngang:not(.dt-gon) #dt .dt-mang { display: none; } /* mở trang chức năng: cột thẻ ở mép trái (như hàng biểu tượng trạng thái) */
#dt .dt-mm { right: 6px; top: 74px; width: 92px; height: 92px; border: 2px solid #8fae9f; box-shadow: 0 0 0 1px #000; background: #000; }
#dt .dt-mm canvas { display: block; width: 100%; height: 100%; }
#dt .dt-tudanh { right: 6px; top: 172px; width: 92px; height: 24px; border: 1px solid #7f9f90; background: linear-gradient(#22302b, #0d1512); text-align: center; line-height: 22px; color: #7dff8a; text-shadow: 1px 1px 0 #000; }
#dt .dt-tudanh.tat { color: #a8a8a8; }
/* nút Túi tử mẫu ở lề trái Hành trang (anh 03/11 lượt 18 — dienthoai.js _xepCuaSo đặt chỗ, chỉ hiện khi mở Hành trang mà túi tử mẫu chưa mở): hình nút
   ItemEx của thanh dưới client (khung 1) + chữ */
#dt .dt-tmnut { position: absolute; display: none; width: 52px; text-align: center; font: 11px/12px var(--jx); color: rgb(254,255,195); text-shadow: 1px 1px 0 #000; cursor: pointer; z-index: 5; }
#dt .dt-tmnut i { display: block; width: 40px; height: 40px; margin: 0 auto 2px; background: url(../../assets/ui/hud/btn/itemex.png) 0 0 / 120px 40px no-repeat, rgba(0,0,0,.55); border: 1px solid #a8893f; box-shadow: 0 0 0 1px #000; image-rendering: pixelated; }
#dt .dt-tmnut:active i { filter: brightness(1.3); }
/* bản đồ lớn (chạm bản đồ nhỏ — dienthoai.js _moBdl): dọc cả bề ngang từ dưới thanh trên tới trên dải thẻ; ngang khung to giữa màn; trên mọi thứ của
   lớp điện thoại (cửa sổ client vẫn trên nó) */
#dt .dt-bdl { display: none; z-index: 20; left: 6px; right: 6px; top: 72px; bottom: 64px; flex-direction: column; background: #050807;
  border: 2px solid #8fae9f; box-shadow: 0 0 0 1px #000, 0 6px 18px #000a; }
#dt .dt-bdl.mo { display: flex; }
#dt .dt-bdl-dau { position: relative; flex: none; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 48px 0 10px; background: linear-gradient(#22302b, #0d1512);
  border-bottom: 1px solid #58756a; color: #ffe48a; font: 16px/32px "VK Sans Serif 16", monospace; white-space: nowrap; overflow: hidden; }
#dt .dt-bdl-dau em { font: 13px/32px var(--jx); font-style: normal; color: #9fd8ff; }
#dt .dt-bdl-dau b { position: absolute; right: 0; top: 0; width: 44px; height: 32px; display: grid; place-items: center; font: 18px/32px var(--jx); color: #ffe48a; cursor: pointer;
  border-left: 1px solid #58756a; background: #0c1210; }
#dt .dt-bdl-cv { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; }
#dt .dt-bdl-cv canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; touch-action: none; }
body.dt.dt-ngang #dt .dt-bdl { left: 50%; right: auto; top: 6px; bottom: 6px; width: min(760px, calc(100% - 220px)); transform: translateX(-50%); }
body.dt-bdlmo .mn { display: none !important; }
/* dòng tin trên nút Chat (anh 31/10 lần 3: "hiển thị đủ full text thông báo chứ đừng ngắt chữ"): xuống dòng cho đủ chữ; khối neo đáy ngay trên nút
   Chat — nhiều dòng thì dài lên trên */
#dt .dt-tin { left: 6px; top: auto; bottom: calc(100% - var(--dt-day) + 46px); width: calc(100% - var(--dt-cum, 258px) - 20px); pointer-events: none; transition: opacity .6s; }
#dt .dt-tin.an { opacity: 0; } /* hết TIN_HIEN (dienthoai.js) kể từ tin mới nhất */
#dt .dt-tin > div { margin-top: 2px; padding: 1px 6px; background: linear-gradient(90deg, #000b, #0000); white-space: normal; overflow-wrap: anywhere; text-shadow: 1px 1px 0 #000; }
#dt .dt-tin .tin { color: rgb(255,249,148); }
#dt .dt-tin .canh { color: rgb(255,96,96); }
#dt .dt-tin b { color: #9fd8ff; font-weight: normal; }
#dt .dt-nutt { left: 6px; top: calc(var(--dt-day) - 40px); height: 28px; padding: 0 10px 0 4px; display: flex; align-items: center; gap: 4px; border: 1px solid #7f9f90; background: linear-gradient(#22302b, #0d1512); }
body.dt-cs #dt .dt-tin, body.dt-cs #dt .dt-nutt, body.dt-chat #dt .dt-tin, body.dt-chat #dt .dt-nutt { display: none; }
/* nút lời mời tổ đội (anh 06/11 — dienthoai.js, hud.js moiDoi): biểu tượng 组队 của client cạnh nút Chat, chạm -> khung hỏi giữa màn hình */
#dt .dt-moidoi { left: 84px; top: calc(var(--dt-day) - 40px); width: 28px; height: 28px; display: grid; place-items: center; }
#dt .dt-moidoi i { width: 24px; height: 24px; background-repeat: no-repeat; background-position: 0 0; transform: scale(1.15); }
#dt .dt-moidoi b { position: absolute; right: -4px; bottom: -4px; font: 11px/11px var(--jx); color: #fff; font-weight: normal; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
body.dt-cs #dt .dt-moidoi, body.dt-chat #dt .dt-moidoi { display: none !important; }
body.dt-cando #dt .dt-moidoi { top: calc(var(--dt-day) - 346px); }
body.dt.dt-ngang #dt .dt-moidoi { top: auto !important; bottom: 156px; }
/* cần điều khiển (dienthoai.js _cuaCan — Trợ Thủ → Khác; anh 31/10 "đưa vào khu vực trung tâm, khóa hoặc không khóa"; lần 3 "chỗ chat và cái
   joystick nên điều chỉnh vị trí, bị cấn quá" — kiểu B): vùng = phần cảnh dưới bên trái cao 292, từ mép trái tới trước cụm ô kỹ năng 16 điểm
   (--dt-cum — dienthoai.js _xepO); vòng (b) nghỉ ở 28% bề ngang, cao hơn đáy cảnh 150, mờ khi không dùng; không khóa: chạm đâu trong vùng vòng hiện
   ở đó (dienthoai.js đặt left / top), nhả thì trượt về chỗ nghỉ; khóa: chỉ vòng nhận chạm. Nút Chat + dòng tin lên trên vùng */
#dt .dt-can { left: 0; top: calc(var(--dt-day) - 300px); width: calc(100% - var(--dt-cum, 258px) - 16px); height: 292px; display: none; touch-action: none; pointer-events: auto; }
body.dt-cando #dt .dt-can { display: block; }
body.dt-cankhoa #dt .dt-can { pointer-events: none; }
body.dt-cankhoa #dt .dt-can > b { pointer-events: auto; }
#dt .dt-can > b { position: absolute; left: clamp(4px, calc(var(--vw100, 100vw) * .28 - 53px * var(--dt-cc, 1)), calc(100% - 6px - 106px * var(--dt-cc, 1))); top: calc(150px - 53px * var(--dt-cc, 1));
  width: calc(106px * var(--dt-cc, 1)); height: calc(106px * var(--dt-cc, 1)); box-sizing: border-box; border-radius: 50%;
  border: 2px solid #8fae9f; background: radial-gradient(#0000 52%, #0b1a16aa 53%, #000c), radial-gradient(#13201b99, #000a);
  box-shadow: 0 0 0 1px #000, inset 0 0 12px #000; opacity: .38; transition: opacity .25s, left .2s, top .2s; }
#dt .dt-can.dang > b { opacity: .95; }
#dt .dt-can > b > i { position: absolute; left: calc(27px * var(--dt-cc, 1)); top: calc(27px * var(--dt-cc, 1)); width: calc(48px * var(--dt-cc, 1)); height: calc(48px * var(--dt-cc, 1)); box-sizing: border-box; border-radius: 50%; border: 1px solid #000;
  background: radial-gradient(circle at 38% 32%, #e9f3ee, #9dbcad 40%, #4d6d60 72%, #22302b); box-shadow: 0 2px 6px #000c, inset 0 0 0 2px #cfe9dc66; }
/* nút khóa ô kỹ năng (dienthoai.js datOKhoa — anh 31/10 lần 2 "thêm 1 ô khóa ... đổi trạng thái gắn skill và dùng skill / vật phẩm"): bên trái
   hàng vật phẩm (--dt-okr / --dt-okt — dienthoai.js _xepO), giữa hàng; khóa = ổ đóng (chỉ dùng), mở = ổ mở vàng + ô kỹ năng viền vàng đứt nhấp nháy (chỉ gắn) */
#dt .dt-okhoa { right: var(--dt-okr, 224px); top: calc(var(--dt-day) - var(--dt-okt, 54px)); width: 34px; height: 34px; box-sizing: border-box; display: grid; place-items: center; border: 1px solid #7f9f90;
  background: linear-gradient(#22302b, #0d1512); box-shadow: inset 0 0 0 1px #000, 0 1px 3px #000a; color: #cfe9dc; }
#dt .dt-okhoa svg { display: block; }
#dt .dt-okhoa path { fill: none; stroke: currentColor; stroke-width: 2; }
#dt .dt-okhoa rect { fill: currentColor; }
#dt .dt-okhoa rect.lo { fill: #0d1512; }
#dt .dt-okhoa .m, body.dt-osua #dt .dt-okhoa .k { display: none; }
body.dt-osua #dt .dt-okhoa .m { display: inline; }
body.dt-osua #dt .dt-okhoa { color: #ffe48a; border-color: #ffe48a; box-shadow: inset 0 0 0 1px #000, 0 0 8px #ffe48a88; }
body.dt-cs #dt .dt-okhoa, body.dt-chat #dt .dt-okhoa { display: none; }
body.dt-cando #dt .dt-tin { bottom: calc(100% - var(--dt-day) + 352px); width: 46%; }
body.dt-cando #dt .dt-nutt { top: calc(var(--dt-day) - 346px); }
/* bảng dưới: Giang hồ (lưới chức năng + Việc cần làm) · cửa sổ client (dienthoai.js _xepCuaSo đặt cửa sổ vào giữa bảng) · thu gọn */
#dt .dt-bang { left: 0; right: 0; top: var(--dt-day); bottom: 58px; overflow: hidden; isolation: isolate; background: #0c1210; box-shadow: 0 -2px 0 #7f9f90, 0 -3px 0 #000, 0 -6px 12px #000c; }
/* nền hoa văn: chỉ phần giữa của nền Kỳ Trân Các (579 × 524 — hoa văn từ 25, 80 tới 555, 490), phóng 2 lần: đủ cao tới 820 điểm (toàn màn hình);
   bản trước lát cả hình -> bảng cao (toàn màn hình, Hành trang) lộ 2 vạch khung đáy / đỉnh của hình (anh thấy ở Tin cập nhật 29/10) */
#dt .dt-bang::before { content: ""; position: absolute; z-index: -1; left: -50px; top: -160px; width: 1158px; height: 1048px;
  background: linear-gradient(#0007, #0007), url(../../assets/ui/win/img/ktc_nen.png) 0 0 / 100% 100%; }
body.dt-gon #dt .dt-bang { display: none; }
#dt .dt-dau { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 8px; margin-top: 6px; }
#dt .dt-bien, #dt .dt-nutda { height: 24px; color: #1b1a16; background: linear-gradient(#cfcec1, #9d9c90 55%, #7d7c71); border: 1px solid #23231f; box-shadow: inset 0 1px 0 #efeee2; white-space: nowrap; }
#dt .dt-bien { position: relative; padding: 0 24px; font: 16px/23px "VK Sans Serif 16", monospace; }
#dt .dt-bien::before, #dt .dt-bien::after { content: ""; position: absolute; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(#77766c 30%, #3b3a34 72%); box-shadow: 0 0 0 1px #23231f; }
#dt .dt-bien::before { left: 5px; }
#dt .dt-bien::after { right: 5px; }
#dt .dt-nutda { padding: 0 10px; line-height: 22px; }
#dt .dt-luoi { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px 0; padding: 6px 2px 0; } /* 13 ô (anh 05/11 thêm Hoạt động) — 7 cột vẫn 2 hàng */
body.dt-cs #dt .dt-luoi, body.dt-cs #dt .dt-viec, body.dt-chat #dt .dt-luoi, body.dt-chat #dt .dt-viec { display: none; }
#dt .dt-o { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#dt .dt-khung { position: relative; width: 46px; height: 46px; display: grid; place-items: center; background: #0a0d0c; border: 1px solid #6f8f80; box-shadow: inset 0 0 0 1px #000, inset 0 0 10px #000; }
#dt .dt-o.bat .dt-khung { border-color: #ffe48a; box-shadow: inset 0 0 0 1px #000, 0 0 6px #ffe48a99; }
#dt .dt-o span { white-space: nowrap; text-shadow: 1px 1px 0 #000; }
#dt .dt-so { position: absolute; right: -7px; top: -7px; display: none; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #c6281d; border: 1px solid #000; color: #fff; font: 13px/15px var(--jx); font-weight: normal; text-align: center; }
#dt .dt-so.moi { background: #1f8f3a; }
#dt .dt-viec { margin: 9px 8px 0; padding: 5px 7px; border: 1px solid #4e6a5f; background: #000a; display: flex; gap: 5px; align-items: center; white-space: nowrap; overflow: hidden; }
#dt .dt-xong { overflow: hidden; text-overflow: ellipsis; }
#dt .dt-viec > b { color: #ffe48a; font-weight: normal; }
#dt .dt-chip { padding: 0 6px; border: 1px solid #6f8f80; background: #13201b; color: #cfe9dc; line-height: 18px; }
#dt .dt-chip[data-a="vnt"] { color: #ffd84e; border-color: #c6281d; } /* Nhận thưởng còn quà chờ (anh 03/11 — main.js capNhatThuong) */
#dt .dt-xong { color: #9a9483; }
/* dải 5 thẻ */
#dt .dt-tab { left: 0; right: 0; bottom: 0; height: 58px; display: grid; grid-template-columns: repeat(5, 1fr); background: linear-gradient(#2a3b35, #101a16 60%, #0a100e); box-shadow: 0 -2px 0 #8fae9f, 0 -3px 0 #000; }
#dt .dt-tab > div { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #b9c9c0; }
#dt .dt-tic { position: relative; }
#dt .dt-tab > .on { color: #ffe48a; background: radial-gradient(ellipse at 50% 100%, #8fae9f66, #0000 70%); }
#dt .dt-tab > .on::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 2px; background: #ffe48a; }
#dt .dt-tab > .on .dt-ic.f3 { background-position: 100% 0 !important; }
@media (max-width: 370px) { #dt .dt-o span { letter-spacing: -.6px; } }
/* phần của giao diện máy tính: ẩn phần đã có bản dọc, đặt lại phần dùng chung */
body.dt #jxhud .jx-top, body.dt #jxhud .jx-mmbox, body.dt #jxhud .jx-nvbang, body.dt #jxhud .jx-doi, body.dt #fps, body.dt #jxhud .jx-chatbox { display: none !important; }
body.dt #jxhud .jx-stbar { left: 4px !important; top: 118px !important; transform: none !important; } /* dưới hàng FPS / Mạng (#dt .dt-mang) và tên bản đồ (#dt .dt-bd) */
body.dt #jxhud .jx-thuyen { top: 132px; }
/* bảng Mộc nhân luyện công (mocnhan.js — Ba Lăng; anh 30/10: bản trước đè lên bản đồ nhỏ và bảng dưới): chỉ hiện lúc thu gọn (mở bảng Giang hồ /
   cửa sổ / chat thì ẩn), dưới hàng biểu tượng trạng thái, chừa bản đồ nhỏ bên phải; mặc định thu gọn (dienthoai.js — mở ra thì che nhân vật) */
body.dt .mn { top: 152px; left: 4px; max-width: calc(var(--vw100, 100vw) - 114px); }
body.dt-luoi .mn, body.dt-cs .mn, body.dt-chat .mn { display: none !important; }
body.dt #jxhud .jx-bot { left: 0 !important; top: 0 !important; bottom: auto !important; width: 100% !important; height: 100% !important; transform: none !important; background: none !important; }
body.dt #jxhud .jx-bot > * { display: none !important; }
body.dt #jxhud .jx-bot > .dt-o { display: block !important; left: auto !important; right: var(--dt-r) !important; top: calc(var(--dt-day) - var(--dt-y)) !important; width: var(--dt-s, 46px) !important; height: var(--dt-s, 46px) !important;
  background: #0b0f0d; border: 1px solid #6f8f80; box-shadow: inset 0 0 0 1px #000, 0 1px 3px #000a; }
body.dt #jxhud .jx-bot > .dt-o::after { content: attr(data-dt); position: absolute; right: 2px; top: 0; font: 13px/13px var(--jx); color: #ffe48a; text-shadow: 1px 1px 0 #000; pointer-events: none; }
body.dt #jxhud .jx-bot > .dt-o .jx-qi { width: calc(var(--dt-s, 46px) - 8px); height: calc(var(--dt-s, 46px) - 8px); object-fit: contain; }
body.dt.dt-cs #jxhud .jx-bot > .dt-o, body.dt.dt-chat #jxhud .jx-bot > .dt-o, body.dt.dt-thap #jxhud .jx-bot > .dt-o[data-hang="1"] { display: none !important; }
/* bảng Giang hồ mở: chỉ hàng ô dưới (1, 2, T, P) — hàng trên đè lên nhân vật (nhân vật đứng ngay trên bảng) */
body.dt.dt-luoi #jxhud .jx-bot > .dt-o[data-hang="1"] { display: none !important; }
/* Chat (dienthoai.js _xepChat — anh 29/10 "thiếu nút, bố cục chưa đẹp"): thẻ lọc · tin (vuốt cuộn) · hàng gõ chữ: kênh, ô chữ, biểu cảm, gửi */
#dt .dt-chatp { left: 0; right: 0; top: calc(var(--dt-day) + 38px); bottom: 58px; display: none; flex-direction: column; padding: 0 6px 6px; }
body.dt-chat #dt .dt-chatp { display: flex; }
#dt .dt-ctab { flex: none; display: flex; gap: 2px; }
#dt .dt-ctab > span { flex: 1; height: 28px; line-height: 27px; text-align: center; white-space: nowrap; border: 1px solid #4e6a5f; border-bottom: 0; background: linear-gradient(#22302b, #0d1512);
  color: rgb(50,220,173); text-shadow: 1px 1px 0 #000; }
#dt .dt-ctab > span.on { color: #ffe48a; border-color: #8fae9f; background: linear-gradient(#3d564c, #16221d); }
#dt .dt-clist { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px; border: 1px solid #8fae9f;
  background: #000b; box-shadow: inset 0 0 8px #000; font: 15px/19px var(--jx); word-break: break-word; scrollbar-width: none; }
#dt .dt-clist::-webkit-scrollbar { display: none; }
#dt .dt-clist > :first-child { margin-top: auto; }
/* ghim của quản trị (anh 03/11 — dienthoai.js _xepChat): dưới thẻ lọc, trên danh sách tin */
#dt .dt-ghim { flex: none; position: relative; padding: 4px 26px 5px 7px; border: 1px solid #8fae9f; border-bottom: 0; background: rgba(36,22,6,.94);
  color: rgb(255,217,78); font: 15px/19px var(--jx); text-shadow: 1px 1px 0 #000; word-break: break-word; }
#dt .dt-ghim b { color: #ff9a3c; font-weight: normal; }
#dt .dt-ghim .x { position: absolute; right: 0; top: 0; padding: 4px 8px; color: #bbb; }
#dt .dt-clist i { display: inline-block; vertical-align: -2px; margin-right: 3px; background-repeat: no-repeat; }
#dt .dt-cin { flex: none; display: flex; align-items: center; gap: 5px; margin-top: 6px; }
#dt .dt-ckenh, #dt .dt-cbtn { flex: none; width: 36px; height: 36px; box-sizing: border-box; border: 1px solid #8fae9f; background: #0b0f0d no-repeat center; box-shadow: inset 0 0 0 1px #000; }
#dt .dt-ckenh { background-size: 26px 26px; }
#dt .dt-cbtn.bieucam { background-image: url(../../assets/ui/hud/btn/face.png); background-size: 56px 28px; background-position: 3px 3px; }
#dt .dt-cbtn.gui { background-image: url(../../assets/ui/hud/btn/sendbtn.png); background-size: 84px 28px; background-position: 3px 3px; }
#dt .dt-cgo { flex: 1; min-width: 0; height: 36px; box-sizing: border-box; padding: 0 8px; border: 1px solid #8fae9f; background: #0b0f0d; box-shadow: inset 0 0 0 1px #000;
  color: rgb(254,255,160); font: 16px/34px var(--jx); outline: none; -webkit-user-select: text; user-select: text; }
#dt .dt-cgo::placeholder { color: #6f7f78; }
#dt .dt-cmenu { position: absolute; left: 6px; bottom: 50px; display: none; padding: 3px; border: 1px solid #8fae9f; background: #0b120fef; box-shadow: 0 2px 12px #000; }
#dt .dt-chatp.mo .dt-cmenu { display: block; }
#dt .dt-cmenu > div { padding: 4px 10px 4px 6px; white-space: nowrap; font: 15px/24px var(--jx); text-shadow: 1px 1px 0 #000, -1px 0 #000, 0 -1px #000; }
#dt .dt-cmenu > div.on { background: #2b3f37; }
#dt .dt-cmenu i { display: inline-block; width: 21px; height: 21px; vertical-align: -5px; margin-right: 6px; background-repeat: no-repeat; }
/* hàng nút việc làm của món (dienthoai.js _hanh): dưới ô xem món, trên cửa sổ client. Nút = nút trống của client cỡ 20 như Khóa / Đính / Tháo
   (_nutClient: hình 53 / 70 / 98 × 20, khung 2 lúc nhấn), chữ client 13 px màu chữ nút 169,211,190; nút đầu (việc của chuột phải: Mặc, Dùng,
   Uống…) chữ vàng 225,213,43 như nút Đồng ý của khung Bang hội; không khung ngoài. Giữa màn, vừa đủ các nút (anh 31/10: "khung Dùng và Đóng dài
   quá" rồi "thô quá, hơi kém thẩm mĩ, mà còn to quá" — bản trước nút vàng / xám cao 36 trong khung viền). Chỗ chạm rộng hơn hình (::before).
   Phóng 1,35 lần cả hàng (anh 31/10: "style oke rồi nhưng phóng to lên 1 tí, tầm 30–40%, đừng lố") — giữ đúng tỉ lệ hình nút client; mép trên
   đứng yên (dienthoai.js _hanh đặt top), windows.js HANH_CAO tính theo cỡ đã phóng */
body.dt #dt-hanh { position: fixed; left: 50%; transform: translateX(-50%) scale(1.35); transform-origin: 50% 0; width: max-content; max-width: calc((100% - 12px) / 1.35); z-index: 8; flex-wrap: wrap; justify-content: center; gap: 4px; }
#dt-hanh .dt-hn { position: relative; height: 20px; box-sizing: border-box; padding: 0 8px; text-align: center; white-space: nowrap; color: rgb(225,213,43);
  background: no-repeat 0 0; font: 13px/20px "VK Sans Serif 13", monospace; }
#dt-hanh .dt-hn.dt-hphu { color: rgb(169,211,190); }
#dt-hanh .dt-hn:active { background-position: calc(var(--w) * -2) 0; color: rgb(124,255,125); }
#dt-hanh .dt-hn::before { content: ""; position: absolute; inset: -9px -2px; }
#dt-hanh .dt-hgo { color: #ffe48a; padding: 0 6px; font: 13px/20px var(--jx); text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000; }
/* kéo món (dienthoai.js _cham — anh 30/10): khung vàng = chỗ món sẽ nằm khi nhả, đỏ = lòi ra ngoài lưới (nhả thì món về chỗ cũ); lưới và ô
   trang bị không để trình duyệt nhận kéo làm cuộn trang. #jw-dat: cùng khung khi cầm món bằng chuột trên máy tính (windows.js _oDat — anh 04/11;
   đỏ thêm: ô trang bị món không mặc vào được) */
#dt-dich, #jw-dat { display: none; position: fixed; z-index: 8; pointer-events: none; box-sizing: border-box; border: 2px solid #ffe48a; background: #ffe48a3d; box-shadow: 0 0 0 1px #000, 0 0 8px #ffe48acc; }
#dt-dich.ngoai, #jw-dat.ngoai { border-color: #ff6a5a; background: #ff6a5a3d; box-shadow: 0 0 0 1px #000; }
body.dt #jxwin .jw-box, body.dt #jxwin .jw-slot { touch-action: none; }
/* nút Nói chuyện (dienthoai.js _nutNoi — anh 30/10): NPC / Rương chứa đồ gần nhất; phải phần cảnh, ngay trên 2 hàng ô dùng nhanh (bảng Giang hồ
   mở / màn thấp: trên hàng dưới); hình con trỏ nói chuyện của client + tên NPC. Nút Nhặt (_nutNhat — anh 30/10 "thiếu nút nhặt đồ"): cùng kiểu,
   hình con trỏ nhặt của client + tên vật; cùng chỗ, nút Nói chuyện đang hiện (body.dt-noi-co) thì nằm ngay trên */
#dt .dt-noi, #dt .dt-nhat { right: 6px; top: calc(var(--dt-day) - 196px); height: 44px; max-width: 200px; box-sizing: border-box; display: none; align-items: center; gap: 4px; padding: 0 12px 0 4px;
  border: 1px solid #ffe48a; background: linear-gradient(#2c3d35, #0d1512); box-shadow: 0 0 0 1px #000, 0 2px 8px #000c, inset 0 0 8px #ffe48a33; }
body.dt-luoi #dt .dt-noi, body.dt-thap #dt .dt-noi, body.dt-luoi #dt .dt-nhat, body.dt-thap #dt .dt-nhat { top: calc(var(--dt-day) - 112px); }
body.dt-noi-co #dt .dt-nhat { top: calc(var(--dt-day) - 248px); }
body.dt-noi-co.dt-luoi #dt .dt-nhat, body.dt-noi-co.dt-thap #dt .dt-nhat { top: calc(var(--dt-day) - 164px); }
#dt .dt-noi > i, #dt .dt-nhat > i { flex: none; width: 32px; height: 32px; background: no-repeat center; }
#dt .dt-noi > span, #dt .dt-nhat > span { min-width: 0; display: flex; flex-direction: column; }
#dt .dt-noi b, #dt .dt-nhat b { font: 16px/18px "VK Sans Serif 16", monospace; font-weight: normal; color: #ffe48a; text-shadow: 1px 1px 0 #000; white-space: nowrap; }
#dt .dt-noi em, #dt .dt-nhat em { font: 13px/15px var(--jx); font-style: normal; color: #cfe9dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* nút client thừa ở điện thoại dọc (dienthoai.js — Trở lại của bảng Hệ thống: đã có Đóng ✕) */
body.dt .dt-thua { display: none !important; }
/* cửa sổ client: dienthoai.js đặt bằng transform (dịch + co) — bỏ chỗ / tỉ lệ khung 1024 của máy tính; .dt-an: cửa sổ đang bị cửa sổ hiện một
   mình (chọn chân dung) che */
body.dt #jxwin { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; }
body.dt #jxwin > .jw { left: 0 !important; top: 0 !important; transform-origin: 0 0; }
body.dt #jxwin > .jw.dt-an { visibility: hidden !important; }
/* điện thoại trước khi vào game (anh 01/11 — iPhone bị phóng to): không chạm 2 lần / chụm phóng to; ô nhập chữ 16 px (Safari iOS tự phóng khi chạm ô chữ nhỏ hơn) */
html.dt-bat, html.dt-bat body { touch-action: pan-x pan-y; }
html.dt-bat .screen input { font-size: 16px; }
/* màn chọn nhân vật (trước khi vào game — dienthoai.js đặt html.dt-bat lúc tải trang): 3 ô vừa bề ngang điện thoại dựng dọc, cùng cao (hình nhân
   vật / dấu + chung đáy, tên ngay trên — anh 30/10 "hơi vỡ bố cục": ô có nhân vật thấp hơn ô trống); bảng thông tin 2 cột (4 cột gãy dòng) */
@media (orientation: portrait) {
  html.dt-bat .screen.csel { padding: 14px 10px; }
  html.dt-bat .csel .cs-row { gap: 6px; padding-top: 6px; }
  html.dt-bat .csel .cs-slot { min-width: 0; padding: 0 0 8px; }
  html.dt-bat .csel .cs-head { min-height: 58px; margin-bottom: 4px; }
  html.dt-bat .csel .nm { font-size: 15px; letter-spacing: 0; }
  html.dt-bat .csel .lv { font-size: 12px; }
  html.dt-bat .csel .cs-body { aspect-ratio: 10 / 11; justify-content: flex-end; }
  html.dt-bat .csel .cs-char { width: 100%; max-height: none; }
  html.dt-bat .csel .plus { width: 58px; height: 58px; margin: 0 0 24px; font-size: 36px; }
  html.dt-bat .csel .cs-panel { padding: 10px 12px; }
  html.dt-bat .csel .cs-info { grid-template-columns: auto 1fr; gap: 3px 14px; }
  html.dt-bat .csel .cs-info .wide { grid-column: auto; }
  /* 3 nút 1 hàng, nhỏ lại (anh 30/10: "3 nút này làm cái khung to quá" — bản trước 2 hàng nút to) */
  html.dt-bat .csel .cs-btns { flex-wrap: nowrap; gap: 6px; margin-top: 10px; }
  html.dt-bat .csel .cs-btns button, html.dt-bat .csel .cs-btns button.go { flex: 1 1 auto; min-width: 0; padding: 7px 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- màn NGANG của điện thoại (dienthoai.js — anh 30/10 chọn mẫu 2 "Vòng kỹ năng", mau-dien-thoai/dung-mau-ngang.cjs): body.dt.dt-ngang
   khi xoay ngang mà bề cao ≤ 500. Chơi (dt-gon): thanh trạng thái góc trái trên, hàng icon (Nhận thưởng, Toàn màn hình, 5 thẻ) cạnh bản đồ nhỏ,
   vòng kỹ năng góc phải dưới, cần điều khiển góc trái dưới. Mở thẻ: trang chức năng che cả màn, cột thẻ bên trái (dt-luoi / dt-cs); chat: nửa
   trái. Các luật dưới đè luật màn dọc ở trên ---------- */
body.dt.dt-ngang #dt .dt-tren { left: 6px; top: 6px; width: 318px; height: 58px; border: 1px solid #7f9f90; box-shadow: 0 0 0 1px #000, 0 3px 8px #000c; }
body.dt.dt-ngang #dt .dt-chan { left: 4px; top: 4px; width: 48px; height: 48px; }
body.dt.dt-ngang #dt .dt-ten { left: 60px; top: 2px; right: 6px; }
body.dt.dt-ngang #dt .dt-h2 { left: 60px; top: 22px; right: 6px; }
body.dt.dt-ngang #dt .dt-h3 { left: 60px; top: 39px; right: 6px; }
/* hàng icon lúc chơi (bản đồ nhỏ ở mép phải): [Toàn màn] [5 thẻ] [Mở rộng / Thu gọn] [bản đồ nhỏ] — Toàn màn cùng hàng, cùng cỡ với thẻ (anh 30/10
   — bản mẫu 2 nút xếp dọc lệch hàng; Nhận thưởng đã vào bảng Giang hồ). Thu lại (mặc định khi vào game — anh 30/10 lần 3 "thu lại đỡ vướng mắt"):
   chỉ còn nút Mở rộng cạnh bản đồ nhỏ */
body.dt.dt-ngang #dt .dt-nt { position: fixed; top: 6px; width: 40px; height: 40px; }
body.dt.dt-ngang #dt .dt-nt[data-a="toan"] { right: 454px !important; }
body.dt.dt-ngang #dt .dt-nt::after { position: absolute; left: 50%; top: 42px; transform: translateX(-50%); white-space: nowrap; font: 12px/14px var(--jx); color: #e9e3cf; text-shadow: 1px 1px 0 #000; }
body.dt.dt-ngang #dt .dt-nt[data-a="toan"]::after { content: "Toàn màn"; }
#dt .dt-mo { display: none; }
body.dt.dt-ngang.dt-gon #dt .dt-mo { display: grid; place-items: center; right: 104px; top: 6px; width: 40px; height: 40px; border: 1px solid #ffe48a; background: linear-gradient(#2c3d35, #0d1512); box-shadow: 0 0 0 1px #000; }
#dt .dt-mo > i { font: 24px/24px "VK Sans Serif 16", monospace; font-style: normal; color: #ffe48a; text-shadow: 1px 1px 0 #000; }
#dt .dt-mo > i::before { content: "«"; }
body.dt-hang #dt .dt-mo > i::before { content: "»"; }
#dt .dt-mo::after { content: "Mở rộng"; position: absolute; left: 50%; top: 42px; transform: translateX(-50%); font: 12px/14px var(--jx); color: #e9e3cf; text-shadow: 1px 1px 0 #000; }
body.dt-hang #dt .dt-mo::after { content: "Thu gọn"; }
body.dt.dt-ngang.dt-gon:not(.dt-hang) #dt .dt-tab, body.dt.dt-ngang:not(.dt-hang) #dt .dt-nt { display: none; }
/* hàng 5 thẻ lúc chơi */
body.dt.dt-ngang.dt-gon #dt .dt-tab { left: auto; right: 150px; top: 6px; bottom: auto; width: 296px; height: 58px; grid-template-columns: repeat(5, 56px); gap: 0 4px; background: none; box-shadow: none; }
body.dt.dt-ngang.dt-gon #dt .dt-tab > div { justify-content: flex-start; color: #e9e3cf; text-shadow: 1px 1px 0 #000; font-size: 12px; line-height: 14px; }
body.dt.dt-ngang.dt-gon #dt .dt-tic { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #7f9f90; background: linear-gradient(#22302b, #0d1512); box-shadow: 0 0 0 1px #000; }
body.dt.dt-ngang.dt-gon #dt .dt-tab > .on { background: none; }
body.dt.dt-ngang.dt-gon #dt .dt-tab > .on::before { display: none; }
/* máy hẹp hơn (Galaxy S22 / S23 ngang 780, máy cũ 640): thanh trạng thái hẹp lại, ô icon nhỏ lại; dưới 700 bỏ chữ dưới icon */
@media (max-width: 819px) {
  body.dt.dt-ngang #dt .dt-tren { width: 260px; }
  body.dt.dt-ngang.dt-gon #dt .dt-tab { right: 146px; width: 262px; grid-template-columns: repeat(5, 50px); gap: 0 3px; }
  body.dt.dt-ngang.dt-gon #dt .dt-tab > div { font-size: 11px; }
  body.dt.dt-ngang.dt-gon #dt .dt-tic { width: 38px; height: 38px; }
  body.dt.dt-ngang #dt .dt-nt, body.dt.dt-ngang.dt-gon #dt .dt-mo { width: 36px; height: 36px; }
  body.dt.dt-ngang #dt .dt-nt::after, #dt .dt-mo::after { top: 38px; font-size: 11px; }
  body.dt.dt-ngang #dt .dt-nt[data-a="toan"] { right: 414px !important; }
}
@media (max-width: 699px) {
  body.dt.dt-ngang #dt .dt-tren { width: 220px; }
  body.dt.dt-ngang.dt-gon #dt .dt-tab { right: 144px; width: 202px; height: 40px; grid-template-columns: repeat(5, 38px); }
  body.dt.dt-ngang.dt-gon #dt .dt-tab > div > span, body.dt.dt-ngang #dt .dt-nt::after, #dt .dt-mo::after { display: none; }
  body.dt.dt-ngang #dt .dt-nt, body.dt.dt-ngang.dt-gon #dt .dt-mo { width: 34px; height: 34px; }
  body.dt.dt-ngang #dt .dt-nt[data-a="toan"] { right: 352px !important; }
}
/* chữ dưới icon: nền tối mỏng (tên quái / NPC vẽ trên cảnh phía sau không lẫn vào chữ); mở trang / chat: ẩn 2 nút */
body.dt.dt-ngang.dt-gon #dt .dt-tab > div > span, body.dt.dt-ngang #dt .dt-nt::after, #dt .dt-mo::after { padding: 0 2px; background: #0009; white-space: nowrap; }
body.dt.dt-ngang:not(.dt-gon) #dt .dt-nt { display: none; }
/* trang chức năng (mở thẻ): che cả màn, cột thẻ bên trái; chat: nửa trái, không cột thẻ. Nền hoa văn phóng 1,8 lần, dời cho dải trên của nền Kỳ
   Trân Các (2 ô xanh ở y 78–97 của hình gốc) nằm ngoài màn — bản dọc hẹp chỉ lấy phần trái của hình nên không lộ; bề ngang phủ tới ~1000 */
body.dt.dt-ngang #dt .dt-bang { top: 0; bottom: 0; left: 0; right: 0; box-shadow: none; }
body.dt.dt-ngang #dt .dt-bang::before { left: -40px; top: -180px; width: 1042px; height: 943px; }
body.dt.dt-ngang:not(.dt-gon):not(.dt-chat) #dt .dt-tab { left: 0; top: 0; bottom: 0; right: auto; width: 72px; height: auto; grid-template-columns: 1fr; grid-template-rows: repeat(5, 1fr);
  background: linear-gradient(90deg, #2a3b35, #101a16 60%, #0a100e); box-shadow: 2px 0 0 #8fae9f, 3px 0 0 #000; }
body.dt.dt-ngang:not(.dt-gon):not(.dt-chat) #dt .dt-tab > .on::before { left: 0; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; }
body.dt.dt-ngang #dt .dt-dau { margin: 6px 6px 0 80px; }
body.dt.dt-ngang.dt-cs #dt .dt-bien { visibility: hidden; }
body.dt.dt-ngang.dt-cs #dt .dt-nutda { width: 36px; height: 36px; padding: 0; text-align: center; font: 20px/34px "VK Sans Serif 16", monospace; }
body.dt.dt-ngang #dt .dt-luoi { margin-left: 80px; padding: 14px 16px 0 0; gap: 12px 0; }
body.dt.dt-ngang #dt .dt-viec { margin: 16px 16px 0 80px; }
body.dt.dt-ngang.dt-chat #dt .dt-bang { right: auto; width: 46%; box-shadow: 2px 0 0 #7f9f90, 3px 0 0 #000, 6px 0 12px #000c; }
body.dt.dt-ngang.dt-chat #dt .dt-dau { margin-left: 8px; }
body.dt.dt-ngang.dt-chat #dt .dt-tab { display: none; }
body.dt.dt-ngang.dt-chat #dt .dt-chatp { left: 0; right: auto; width: 46%; top: 38px; bottom: 0; }
/* trên cảnh: tên bãi dưới bản đồ nhỏ, dòng tin + nút Chat trên cần điều khiển, nút Nói chuyện giữa đáy */
body.dt.dt-ngang #dt .dt-mm { right: 6px; top: 6px; width: 88px; height: 88px; }
body.dt.dt-ngang #dt .dt-bd { left: auto; right: 6px; top: 100px; transform: none; max-width: 260px; font-size: 14px; }
body.dt.dt-ngang #dt .dt-tin { left: 6px; top: auto !important; bottom: 190px; width: 300px; }
body.dt.dt-ngang #dt .dt-nutt { left: 6px; top: auto !important; bottom: 156px; }
body.dt.dt-ngang #dt .dt-can { left: 0; top: auto; bottom: 0; width: 150px; height: 150px; }
body.dt.dt-ngang #dt .dt-can > b { left: calc(50% - 53px * var(--dt-cc, 1)); top: calc(50% - 53px * var(--dt-cc, 1)); }
body.dt.dt-ngang #dt .dt-noi, body.dt.dt-ngang #dt .dt-nhat { left: 50%; right: auto; top: auto !important; bottom: 10px; transform: translateX(-50%); }
body.dt.dt-ngang.dt-noi-co #dt .dt-nhat { bottom: 60px; }
@media (max-height: 349px) { body.dt.dt-ngang #dt .dt-bd { right: 104px; top: 66px; } } /* màn thấp (thanh trình duyệt): tên bãi dưới hàng thẻ, vòng ngoài khỏi đè */
/* vòng kỹ năng (dienthoai.js _vong — --ng-r / --ng-b / --ng-s): ô tròn, T to viền vàng; Tự đánh cũng là 1 ô tròn của vòng ngoài */
body.dt.dt-ngang #jxhud .jx-bot > .dt-o { left: auto !important; top: auto !important; right: var(--ng-r) !important; bottom: var(--ng-b) !important; width: var(--ng-s) !important; height: var(--ng-s) !important;
  border-radius: 50%; border: 2px solid #8fae9f; background: radial-gradient(circle at 50% 35%, #22302b, #0b0f0d 70%); box-shadow: 0 0 0 1px #000, 0 2px 6px #000c; }
body.dt.dt-ngang #jxhud .jx-bot > .jx-skill[data-skill="left"] { border-color: #ffe48a; box-shadow: 0 0 0 1px #000, 0 0 10px #ffe48a66; }
body.dt.dt-ngang:not(.dt-gon):not(.dt-chat) #jxhud .jx-bot > .dt-o { display: none !important; }
body.dt.dt-ngang.dt-chat #jxhud .jx-bot > .dt-o { display: block !important; } /* chat nửa trái: vòng kỹ năng vẫn dùng được (vừa nói vừa đánh) */
body.dt.dt-ngang #jxhud .jx-bot > .dt-o::after { left: 50%; right: auto; top: auto; bottom: -5px; transform: translateX(-50%); }
body.dt.dt-ngang #jxhud .jx-bot > .dt-o .jx-qn { right: -4px; bottom: auto; top: -6px; }
body.dt.dt-ngang #jxhud .jx-bot > .dt-o .jx-cd { inset: 0; border-radius: 50%; }
/* hình trong ô tròn (anh 30/10: "hình kỹ năng hình vuông mà ô hình tròn — thô"): kỹ năng cắt tròn, phóng 1,2 lần cho kín ô (viền vuông của hình nằm
   ngoài vòng cắt); thuốc / vật phẩm giữ nguyên hình, nhỏ lại cho gọn trong vòng */
body.dt.dt-ngang #jxhud .jx-bot > .dt-o .jx-qi { width: 72%; height: 72%; object-fit: contain; }
body.dt.dt-ngang #jxhud .jx-bot > .jx-skill .jx-qi, body.dt.dt-ngang #jxhud .jx-bot > .dt-o.ky .jx-qi { width: 120%; height: 120%; object-fit: cover; clip-path: circle(41.6% at 50% 50%); }
body.dt.dt-ngang #dt .dt-tudanh { top: auto; right: var(--ng-r); bottom: var(--ng-b); width: var(--ng-s); height: var(--ng-s); border-radius: 50%; border: 2px solid #45e05a;
  background: radial-gradient(circle at 50% 35%, #22302b, #0b0f0d 70%); box-shadow: 0 0 0 1px #000, 0 2px 6px #000c; display: flex; align-items: center; justify-content: center;
  padding: 2px; white-space: normal; font-size: 12px; line-height: 12px; }
body.dt.dt-ngang #dt .dt-tudanh.tat { border-color: #6f7a74; }
body.dt.dt-ngang:not(.dt-gon):not(.dt-chat) #dt .dt-tudanh { display: none; }
/* nút khóa ô kỹ năng màn ngang: ô tròn vòng ngoài dưới ô 1 (dienthoai.js OK_VONG); hiện cùng lúc với vòng kỹ năng */
body.dt.dt-ngang #dt .dt-okhoa { top: auto; right: var(--ng-r); bottom: var(--ng-b); width: var(--ng-s); height: var(--ng-s); border-radius: 50%; border-width: 2px; }
body.dt.dt-ngang.dt-chat #dt .dt-okhoa { display: grid; }
body.dt.dt-ngang:not(.dt-gon):not(.dt-chat) #dt .dt-okhoa { display: none; }
/* ô kỹ năng mở khóa (dienthoai.js datOKhoa — chỉ gắn): viền vàng đứt, sáng nhấp nháy — dễ thấy đang ở chế độ gắn */
body.dt.dt-osua #jxhud .jx-bot > .dt-o { border-color: #ffe48a; border-style: dashed; animation: dt-osua 1.1s ease-in-out infinite alternate; }
@keyframes dt-osua { from { box-shadow: 0 0 0 1px #000, 0 0 2px #ffe48a55; } to { box-shadow: 0 0 0 1px #000, 0 0 10px #ffe48acc; } }
/* biểu tượng trạng thái dưới thanh trạng thái; bảng Mộc nhân dưới nữa (hàng nút việc làm của món: giữa, vừa chữ — như dựng dọc) */
body.dt.dt-ngang #jxhud .jx-stbar { top: 86px !important; }
body.dt.dt-ngang:not(.dt-gon) #jxhud .jx-stbar { display: none !important; }
body.dt.dt-ngang .mn { top: 116px; max-width: 330px; }

/* ---------- boss thế giới máu chung (src/game/bosstg.js — anh 31/10, quái chung bước 1): bảng trên giữa màn — tên vàng + bãi (tọa độ bản đồ
   nhỏ) + giờ còn, thanh máu chung, phần của mình, 5 người đánh nhiều nhất; ở bãi khác chỉ 1 dòng (.gon). Bảng nằm dưới các cửa sổ (z 3 < #jxwin 4
   — khung kết quả đè lên bảng); dòng thông báo của quản trị (.qt-loa, top 92 — "boss xuất hiện") xuống dưới bảng khi bảng nằm trên nó (máy tính,
   điện thoại — bosstg.js đặt --btg-day) ---------- */
#btg { position: fixed; z-index: 3; left: 50%; top: 46px; transform: translateX(-50%); min-width: 260px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 4px 8px 5px;
  background: rgba(0,0,0,.62); border: 1px solid #6b5a2e; box-shadow: 0 0 0 1px #000; font: 13px/16px var(--jx); color: #e9e3cf; text-shadow: 1px 1px 0 #000; text-align: center; pointer-events: none; }
#btg.gon { min-width: 0; padding: 2px 8px; }
#btg .btg-ten { color: rgb(255,217,78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#btg .btg-ten em { margin-left: 4px; font-style: normal; color: #9fd8ff; }
#btg .btg-mau { position: relative; height: 14px; margin: 3px 0 2px; background: #2a0b0b; border: 1px solid #000; }
#btg .btg-mau i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#e0412f, #8f1d12); }
#btg .btg-mau span { position: relative; font: 12px/14px var(--jx); color: #fff; }
#btg .btg-cua { color: #7dff8a; }
#btg .btg-top { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 10px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 12px; color: #cfc8b0; counter-reset: btgh; }
#btg .btg-top li { counter-increment: btgh; }
#btg .btg-top li::before { content: counter(btgh) ". "; color: #8f8a78; }
#btg .btg-top b { font-weight: normal; color: #fff; }
.qt-loa { top: max(92px, var(--btg-day, 0px)); }
/* điện thoại (anh 31/10 — ảnh mũi tên: "thanh máu boss nếu lên map gặp boss sẽ hiện như kia, bấm vô thì ra bảng xếp hạng sát thương"; thông báo
   boss ra: dòng chữ vàng 10 giây + khung chat là đủ): chỉ hiện ở bãi có boss — thanh gọn 2 dòng (tên + (x/y) · giờ còn; thanh máu) trên cùng;
   dọc: ngay dưới tên bãi (top 116 — giữ tên bãi + tọa độ của mình để đi tới boss; dòng đầu bỏ tên bãi cho đủ chỗ), rộng tới sát cột bản đồ nhỏ;
   ngang: top 70. Chạm thanh (▾): hiện phần của mình + 5 người đánh nhiều nhất, mỗi người 1 dòng (bosstg.js bật lớp .mo), chạm nữa thu lại */
body.dt #btg { top: 116px; width: calc(var(--vw100, 100vw) - 200px); max-width: 320px; min-width: 0; padding: 2px 6px 3px; background: rgba(0,0,0,.78); pointer-events: auto; }
body.dt.dt-ngang #btg { top: 70px; }
body.dt #btg.gon { display: none; }
body.dt:not(.dt-ngang) #btg .btg-bai { display: none; }
body.dt #btg .btg-ten { position: relative; display: flex; justify-content: center; padding-right: 12px; }
body.dt #btg .btg-ten > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.dt #btg .btg-ten .btg-gio { flex: none; }
body.dt #btg .btg-ten::after { content: "▾"; position: absolute; right: 0; top: 0; color: #9fd8ff; }
body.dt #btg.mo .btg-ten::after { content: "▴"; }
body.dt #btg:not(.mo) .btg-cua, body.dt #btg:not(.mo) .btg-top { display: none; }
body.dt #btg .btg-top { display: block; margin: 3px 0 0; padding-top: 2px; border-top: 1px solid rgba(107,90,46,.6); text-align: left; }
body.dt #btg .btg-top li { display: flex; gap: 6px; line-height: 15px; }
body.dt #btg .btg-top li::before { flex: none; min-width: 16px; text-align: right; }
body.dt #btg .btg-top li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Săn Nhím Béo Phì (src/game/sannhim.js — anh 03/11): 1 dòng trên giữa màn lúc có đợt — còn mấy con, giờ còn, số con mình bắt hôm nay
   (đỏ khi đã đủ); dưới bảng boss thế giới nếu cùng lúc (--btg-day). Điện thoại: chỉ ở thôn / thành có nhím (.tai), ngay dưới tên bãi ---------- */
#snh { position: fixed; z-index: 3; left: 50%; top: max(46px, var(--btg-day, 0px)); transform: translateX(-50%); max-width: calc(100vw - 16px); box-sizing: border-box; padding: 2px 8px;
  background: rgba(0,0,0,.62); border: 1px solid #6b5a2e; box-shadow: 0 0 0 1px #000; font: 13px/16px var(--jx); color: #e9e3cf; text-shadow: 1px 1px 0 #000; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
#snh b { font-weight: normal; color: #ffd54a; }
#snh em { font-style: normal; color: #9fd8ff; }
#snh i { font-style: normal; color: #7dff8a; }
#snh i.du { color: #ff8a80; }
body.dt #snh { top: max(116px, var(--btg-day, 0px)); max-width: calc(var(--vw100, 100vw) - 200px); padding: 2px 6px; background: rgba(0,0,0,.78); font-size: 12px; }
body.dt.dt-ngang #snh { top: max(70px, var(--btg-day, 0px)); }
body.dt #snh:not(.tai) { display: none !important; }
/* ---------- Phong Hỏa Liên Thành (src/game/phonghoa.js ve — anh 04/11): trạng thái lúc ở trận (báo danh / giờ còn, điểm thủ thành, tướng quân, binh
   lực địch, Chủ soái, số mình hạ — đỏ khi nguy) — máy tính .b2 khung dọc dưới bản đồ nhỏ, điện thoại .b3 2 dòng giữa trên có vạch điểm thủ thành + cờ
   tướng quân (anh chọn) — + bảng kết quả lúc xong trận (× để ẩn) ---------- */
#phtt { position: fixed; z-index: 3; left: 50%; top: max(46px, var(--btg-day, 0px)); transform: translateX(-50%); max-width: calc(100vw - 16px); box-sizing: border-box; padding: 2px 8px;
  background: rgba(0,0,0,.62); border: 1px solid #6b5a2e; box-shadow: 0 0 0 1px #000; font: 13px/16px var(--jx); color: #e9e3cf; text-shadow: 1px 1px 0 #000; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
#phtt b { font-weight: normal; color: #ffd54a; }
#phtt em { font-style: normal; color: #9fd8ff; }
#phtt i { font-style: normal; color: #7dff8a; }
#phtt i.du { color: #ff8a80; }
body.dt #phtt { top: 116px; max-width: calc(var(--vw100, 100vw) - 200px); padding: 2px 6px; background: rgba(0,0,0,.78); font-size: 12px; }
body.dt.dt-ngang #phtt { top: 70px; }
#phtt.b2 { left: auto; right: 6px; top: 172px; transform: none; width: 178px; white-space: normal; padding: 3px 7px 4px; }
#phtt.b2 .tt { color: #ffd54a; text-align: center; border-bottom: 1px solid #5a4a26; margin-bottom: 2px; }
#phtt.b2 .d { display: flex; justify-content: space-between; gap: 6px; }
#phtt.b2 .d span { color: #c9b27a; }
body.dt #phtt.b2 { top: 318px; right: 4px; width: 146px; max-width: none; font-size: 11px; line-height: 14px; }
#phtt.b3 { text-align: center; padding: 2px 8px 3px; }
#phtt.b3 .d2 { margin-top: 1px; }
#phtt .vach { display: inline-block; vertical-align: middle; height: 9px; padding: 1px; border: 1px solid #6b5a2e; background: #111; }
#phtt .vach u { display: inline-block; width: 4px; height: 9px; margin-right: 1px; background: #4fd36a; vertical-align: top; }
#phtt .vach u.do { background: #ff6b5b; }
#phtt .vach u.mat { background: #3a3a3a; }
#phtt .co u { display: inline-block; width: 9px; height: 11px; margin: 0 1px; vertical-align: middle; background: linear-gradient(#ffd54a, #c9902a); clip-path: polygon(0 0, 100% 15%, 0 55%); border-left: 2px solid #8a6a2a; }
#phtt .co u.mat { background: #555; }
body.dt #phtt.b3 .vach u { width: 3px; }
/* Tống Kim bãi thử (anh 05/11 — src/game/tongkim.js ve): bảng điểm như bảng Phong Hỏa máy tính (#phtt.b2) — dưới bản đồ nhỏ, màu phe như màu tên engine */
#tktt { position: fixed; z-index: 3; right: 6px; top: 172px; width: 196px; box-sizing: border-box; padding: 3px 7px 4px; background: rgba(0,0,0,.62); border: 1px solid #6b5a2e;
  box-shadow: 0 0 0 1px #000; font: 13px/16px var(--jx); color: #e9e3cf; text-shadow: 1px 1px 0 #000; pointer-events: none; }
#tktt .tt { color: #ffd54a; text-align: center; border-bottom: 1px solid #5a4a26; margin-bottom: 2px; }
#tktt .d { display: flex; justify-content: space-between; gap: 6px; }
#tktt .d span { color: #c9b27a; }
#tktt i { font-style: normal; color: #7dff8a; }
#tktt b { font-weight: normal; }
#tktt .song, #tktt .d span.song { color: #ffa85e; }
#tktt .kim, #tktt .d span.kim { color: #ff92ff; }
#tktt .k { color: #e9e3cf; font-size: 12px; line-height: 14px; border-top: 1px solid #3a3020; margin-top: 2px; padding-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.dt #tktt { top: 318px; right: 4px; width: 150px; font-size: 11px; line-height: 14px; z-index: 2; } /* dưới lớp điện thoại #dt (z 3): không đè hành trang / cửa hàng (thử 06/11) */
/* Chiến báo Tống Kim (src/game/tkchienbao.js — anh 06/11 chọn mẫu: máy tính A đúng client, điện thoại B khung cửa sổ game): nút ngay dưới bảng gọn #tktt.
   A — chiến báo tức thời 即时战报界面.ini (750 × 350 trong suốt bóng 0,30,19, chữ JX ASF 12, màu dòng lẻ / chẵn / tiêu đề / vạch của client — bấm xuyên
   xuống cảnh) + bảng kết thúc 宋金快报.ini (hình client cb_bang.png 250 × 428, ô 框.spr, nút Đóng 3 khung: thường / nhấn / rê chuột).
   B — cửa sổ khung 任务记事 (tin_nen.png, nút "Đóng lại") + kết quả khung 排名 "Xếp hạng" (như kết quả boss thế giới) có 4 ô thưởng */
#tkcb-nut { position: fixed; z-index: 3; right: 6px; top: 0; box-sizing: border-box; padding: 1px 8px; background: linear-gradient(#3b3a2c, #1c1b14); border: 1px solid #8a7440;
  box-shadow: 0 0 0 1px #000; font: 13px/16px var(--jx); color: #ffd54a; text-shadow: 1px 1px 0 #000; white-space: nowrap; cursor: pointer; user-select: none; }
#tkcb-nut:hover { color: #fff1a8; border-color: #c9a85a; }
body.dt #tkcb-nut { z-index: 4; padding: 4px 0; text-align: center; }
#tkcb, #tkkq { position: fixed; left: 0; top: 0; transform-origin: 0 0; text-shadow: 1px 1px 0 #000; }
#tkcb .song, #tkkq .song { color: #ffa85e; }
#tkcb .kim, #tkkq .kim { color: #ff92ff; }
#tkcb.a { z-index: 3; width: 750px; height: 350px; background: rgba(0,30,19,.74); box-shadow: 0 0 0 1px rgba(0,0,0,.5); pointer-events: none;
  font: 12px/14px "JX ASF 12", var(--jx); color: rgb(255,255,255); }
#tkcb.a .ab { position: absolute; left: 2px; right: 2px; display: flex; white-space: nowrap; }
#tkcb.a .ab > span { flex: none; overflow: hidden; text-overflow: ellipsis; }
#tkcb.a .dg { position: absolute; left: 14px; right: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tkcb.a .t { color: rgb(235,231,148); }
#tkcb.a .v { position: absolute; left: 0; right: 0; height: 1px; background: rgb(0,255,255); }
#tkcb.a .g { position: absolute; display: grid; grid-template-columns: 150px 90px; row-gap: 4px; }
#tkcb.a table { position: absolute; left: 2px; width: 746px; border-collapse: collapse; table-layout: fixed; }
#tkcb.a th { height: 15px; padding: 0 4px; font-weight: normal; color: rgb(235,231,148); text-align: center; }
#tkcb.a td { height: 15px; padding: 0 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tkcb.a th:first-child, #tkcb.a td:first-child { text-align: left; }
#tkcb.a tr.chan td { color: rgb(255,255,80); }
#tkkq.a { z-index: 5; width: 250px; height: 428px; background: url(../../assets/ui/tongkim/cb_bang.png); }
#tkkq.a .o { position: absolute; width: 111px; height: 17px; background: url(../../assets/ui/tongkim/cb_o.png); font: 12px/17px "JX ASF 12", var(--jx); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(228,225,150); }
#tkkq.a .o.ten { color: rgb(200,200,120); }
#tkkq.a .o.song { color: #ffa85e; }
#tkkq.a .o.kim { color: #ff92ff; }
#tkkq.a .o.xanh { color: #7dff8a; } /* phần thưởng nhận được (06/11 — 14 dòng nói thẳng) */
#tkkq.a .o.hep { letter-spacing: -.6px; }
#tkkq.a .dong { position: absolute; left: 64px; top: 394px; width: 120px; height: 30px; background: url(../../assets/ui/tongkim/cb_dong.png) 0 0; cursor: pointer; }
#tkkq.a .dong:hover { background-position: -240px 0; }
#tkkq.a .dong:active { background-position: -120px 0; }
#tkcb.b, #tkkq.b { z-index: 4; font: 13px/16px var(--jx); color: #e9e3cf; }
/* khung 任务记事 trong 75% (cửa sổ Tin cập nhật có thêm trang trong — chiến báo không có): lót tối dưới phần trong cho cảnh / bảng gọn sau lưng khỏi lộ qua chữ */
#tkcb.b { width: 433px; height: 300px; background: url(../../assets/ui/win/img/tin_nen.png) 0 0 no-repeat, linear-gradient(rgba(8,8,6,.72), rgba(8,8,6,.72)) 4px 4px / 425px 292px no-repeat; }
#tkkq.b { z-index: 5; width: 480px; height: 300px; background: url(../../assets/ui/win/img/x_28e872de.png); }
#tkcb.b .tieu { position: absolute; left: 0; right: 0; top: 2px; text-align: center; font: 16px/16px "VK Sans Serif 16", monospace; color: rgb(255,217,78); letter-spacing: 1px; }
#tkcb.b .dai { position: absolute; left: 24px; right: 24px; top: 24px; height: 16px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tkcb.b .than { position: absolute; left: 26px; top: 44px; width: 380px; }
#tkcb.b .lu { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
#tkcb.b .r, #tkkq.b .r { display: flex; height: 16px; white-space: nowrap; }
#tkcb.b .r > span, #tkkq.b .r > span { flex: none; overflow: hidden; text-overflow: ellipsis; }
#tkcb.b .h, #tkkq.b .h { margin: 2px 0; padding-bottom: 1px; border-bottom: 1px solid #5a5340; color: rgb(255,253,122); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tkcb.b .toi, #tkkq.b .toi { color: rgb(255,217,78); }
#tkcb.b .xam, #tkkq.b .xam { color: #a9a39a; }
#tkcb.b .xanh, #tkkq.b .xanh { color: #7dff8a; }
#tkcb.b .thanh { position: relative; height: 6px; margin: 4px 0 2px; background: #2a2618; box-shadow: inset 0 0 0 1px #000; }
#tkcb.b .thanh u { position: absolute; left: 1px; top: 1px; bottom: 1px; background: linear-gradient(#ffe27a, #c9902a); }
#tkcb.b .minh { border-top: 1px solid #5a5340; }
#tkcb.b .dong { position: absolute; left: 114px; top: 277px; width: 205px; height: 19px; background: url(../../assets/ui/win/img/x_12262bbe.png) 0 0; cursor: pointer; }
#tkcb.b .dong:active { background-position: -205px 0; }
#tkkq.b .cot1 { position: absolute; left: 22px; top: 25px; width: 162px; height: 248px; overflow: hidden; }
#tkkq.b .cot2 { position: absolute; left: 198px; top: 25px; width: 260px; height: 248px; overflow: hidden; }
#tkkq.b .dau { margin: 2px 0 0 4px; font: 16px/18px "VK Sans Serif 16", monospace; }
#tkkq.b .dg { padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tkkq.b .h { margin-left: 4px; }
#tkkq.b .qua { display: flex; gap: 4px; padding: 2px 4px; }
#tkkq.b .oT { position: relative; flex: none; width: 44px; height: 44px; box-sizing: border-box; display: grid; place-items: center; background: rgba(0,0,0,.45);
  box-shadow: inset 0 0 0 1px #5a5340, 0 0 0 1px #000; text-align: center; font: 11px/12px var(--jx); }
#tkkq.b .oT img { display: block; max-width: 40px; max-height: 40px; }
#tkkq.b .oT b { position: absolute; right: 2px; bottom: 1px; font: 13px/13px var(--jx); font-weight: normal; color: #fff; }
#tkkq.b .oT.rong { width: 96px; }
#tkkq.b .oT.rong em { display: block; font: 16px/18px "VK Sans Serif 16", monospace; font-style: normal; color: #7dff8a; }
#tkkq.b .oT.rong span { color: #c9b27a; }
#tkkq.b .oT.mat { opacity: .4; }
#tkkq.b .dong { position: absolute; left: 164px; top: 277px; width: 151px; height: 19px; background: url(../../assets/ui/win/img/x_a1013727.png) 0 0; cursor: pointer; }
#tkkq.b .dong:active { background-position: -151px 0; }
#phkq { position: fixed; z-index: 6; left: 50%; top: 96px; transform: translateX(-50%); min-width: 360px; max-width: calc(100vw - 16px); max-height: 60vh; overflow: auto; box-sizing: border-box;
  padding: 6px 10px 8px; background: rgba(8,8,8,.88); border: 1px solid #8a7440; box-shadow: 0 0 0 1px #000; font: 13px/18px var(--jx); color: #e9e3cf; text-shadow: 1px 1px 0 #000; }
#phkq .tt { color: #ffd54a; text-align: center; padding: 0 18px 2px; position: relative; }
#phkq .x { position: absolute; right: 0; top: -2px; cursor: pointer; color: #e9e3cf; padding: 0 4px; }
#phkq .ly { color: #9fd8ff; text-align: center; margin-bottom: 4px; }
#phkq table { border-collapse: collapse; width: 100%; }
#phkq th { font-weight: normal; color: #c9b27a; border-bottom: 1px solid #5a4a26; padding: 1px 6px; text-align: right; }
#phkq td { padding: 1px 6px; text-align: right; white-space: nowrap; }
#phkq th:first-child, #phkq td:first-child { text-align: left; }
#phkq tr.toi td { color: #7dff8a; }
body.dt #phkq { top: 140px; font-size: 12px; min-width: 0; }
/* kết quả boss thế giới (windows.js ketQuaBoss — khung 排名.ini, cửa sổ "btgkq"): cột phải — tên boss, hạng của mình, phần thưởng ô 48 × 48 (kinh
   nghiệm: hình PictureList của client; món: icon + số góc dưới phải như ô dùng nhanh) */
#jxwin .bk-dau { margin: 2px 0 2px 4px; font: 16px/18px "VK Sans Serif 16", monospace; color: rgb(255,217,78); text-shadow: 1px 1px 0 #000; }
#jxwin .bk-dong { padding-left: 4px; line-height: 16px; }
#jxwin .bk-day { margin-top: 4px; color: #ff6a5a; }
#jxwin .bk-tieu { margin: 5px 4px 2px; padding-bottom: 2px; border-bottom: 1px solid #5a5340; color: rgb(255,253,122); }
#jxwin .bk-kn { display: flex; align-items: center; gap: 8px; padding-left: 4px; }
#jxwin .bk-kn span { line-height: 16px; color: #7dff8a; }
#jxwin .bk-luoi { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 4px 1px; }
#jxwin .bk-o { position: relative; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px #5a5340, 0 0 0 1px #000; }
#jxwin .bk-o img { display: block; max-width: 44px; max-height: 44px; }
#jxwin .bk-o b { position: absolute; right: 2px; bottom: 1px; font: 13px/13px var(--jx); font-weight: normal; color: #fff;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000; }
#jxwin .bk-cho .bk-o { opacity: .55; }
#jxwin .bk-khong { color: #a9a39a; }
#jxwin .bk-tieu em { font-style: normal; color: #7dff8a; }
/* ngắm chiêu trên điện thoại (dienthoai.js _ngam — anh 31/10 "đè vào ô kĩ năng hiển thị vùng thi triển như Liên Quân"): vòng điều khiển quanh
   chỗ đặt ngón + núm theo ngón; ô Hủy phía trên (kéo vào: đỏ, nhả = thôi). Vùng thi triển vẽ trên cảnh (World.veNgam). Lần 3 (anh: bản trước "thật
   sự rất khó chấp nhận" — chọn kiểu 1 "Liên Quân" trong ảnh so): vòng mảnh trắng trong mờ, núm tròn viền trắng sáng, ô Hủy tròn gọn chỉ ✕ */
body.dt #jxhud .jx-slot { touch-action: none; }
.dt-ngam { position: fixed; z-index: 40; width: 124px; height: 124px; margin: -62px 0 0 -62px; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(255,255,255,.42);
  background: radial-gradient(rgba(0,0,0,0) 58%, rgba(0,0,0,.28)); pointer-events: none; }
.dt-ngam i { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; box-sizing: border-box; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(255,255,255,.9); background: #000; box-shadow: 0 0 12px rgba(190,230,255,.7); }
.dt-ngam i img { display: block; width: 100%; height: 100%; }
.dt-ngam-huy { position: fixed; z-index: 40; width: 46px; height: 46px; margin: -23px 0 0 -23px; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.35); color: #fff; display: flex; align-items: center; justify-content: center; text-shadow: 1px 1px 0 #000; pointer-events: none; }
.dt-ngam-huy b { font: 20px/20px var(--jx); font-weight: normal; }
.dt-ngam-huy span { display: none; }
.dt-ngam-huy.on { background: rgba(200,60,44,.85); border-color: #ffb0a8; }

/* ---------- số phần thưởng đang chờ nhận trên nút Nhận thưởng — cột icon dưới bản đồ nhỏ (anh 03/11 chọn "chấm đỏ có số" như số đỏ thẻ điện
   thoại; hud.js datThuong, main.js capNhatThuong) ---------- */
.jx-ntso { position: absolute; right: -7px; top: -7px; z-index: 2; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: 8px;
  background: #c6281d; border: 1px solid #000; color: #fff; font: 11px/13px var(--jx); font-weight: normal; text-align: center; pointer-events: none; }
/* ---------- Hướng dẫn hoạt động (anh 05/11 — src/game/huongdan.js): khung client uiactivityguide\activityguide.ini 650 × 450 (hình: cong-cu/
   dung-huong-dan.mjs); chỗ các phần trong trang lịch theo activitycalendar.ini (gốc 19, 54). Chữ client cỡ 12 -> VK Sans Serif 13, viền đen ---------- */
#jxwin .hd-khung { color: rgb(169,211,190); font: 13px/13px "VK Sans Serif 13", "IBM Plex Mono", monospace; }
#jxwin .hd-khung .hd-ngay { position: absolute; left: 440px; top: 37px; width: 200px; height: 16px; white-space: nowrap; color: rgb(255,250,196); pointer-events: none;
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
#jxwin .hd-trang { position: absolute; left: 19px; top: 54px; width: 612px; height: 373px; overflow: hidden; background-color: rgba(14,12,8,.94);
  text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
#jxwin .hd-trang.hd-t0 { background: url(../../assets/ui/win/img/hd_trang.png) no-repeat, rgba(14,12,8,.9); }
#jxwin .hd-trang.hd-t1, #jxwin .hd-trang.hd-t2 { background: linear-gradient(90deg, rgba(42,40,34,.97) 0 188px, #0b0a07 188px 192px, rgba(42,40,34,.97) 192px); }
#jxwin .hd-trang > * { position: absolute; }
#jxwin .hd-bieu { left: 0; top: 0; width: 42px; height: 36px; background: url(../../assets/ui/win/img/hd_bieu.png) no-repeat; }
#jxwin .hd-tien { left: 52px; top: 10px; color: rgb(240,127,80); white-space: nowrap; }
#jxwin .hd-thanh { left: 310px; top: 13px; width: 285px; height: 11px; background: url(../../assets/ui/win/img/hd_thanh0.png) no-repeat; }
#jxwin .hd-thanh > i { position: absolute; left: 0; top: 0; height: 11px; background: url(../../assets/ui/win/img/hd_thanh.png) no-repeat; }
#jxwin .hd-nhan { left: 0; width: 388px; text-align: center; color: rgb(240,127,80); white-space: nowrap; }
#jxwin .hd-cot { left: 0; width: 388px; display: flex; color: rgb(255,250,0); white-space: nowrap; }
#jxwin .hd-ds { left: 0; width: 388px; overflow: hidden auto; scrollbar-width: none; color: rgb(218,255,165); }
#jxwin .hd-ds::-webkit-scrollbar, #jxwin .hd-ct::-webkit-scrollbar, #jxwin .hd-noi::-webkit-scrollbar { display: none; }
#jxwin .hd-r { display: flex; height: 17px; line-height: 17px; white-space: nowrap; cursor: pointer; }
#jxwin .hd-r:hover { color: rgb(255,253,122); }
#jxwin .hd-r.on { background: rgba(110,110,90,.55); color: rgb(240,127,80); }
/* hằng ngày 9 dòng trong 141 px (anh 05/11 "hơi lệch lúc bấm": dòng 17 px thì dòng cuối bị che, bấm vào danh sách cuộn lên lấp ló dòng tiêu đề) */
#jxwin .hd-ngay2 .hd-r { height: 15px; line-height: 15px; }
#jxwin .hd-r > span, #jxwin .hd-cot > span { overflow: hidden; text-overflow: ellipsis; }
#jxwin .hd-r .c1, #jxwin .hd-cot .c1 { width: 146px; padding-left: 2px; box-sizing: border-box; flex: none; }
#jxwin .hd-r .c2, #jxwin .hd-cot .c2 { width: 129px; flex: none; }
#jxwin .hd-r .c3, #jxwin .hd-cot .c3 { width: 113px; flex: none; }
#jxwin .hd-ten { left: 405px; width: 207px; color: rgb(240,127,80); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#jxwin .hd-ct { left: 405px; top: 58px; width: 193px; height: 142px; overflow: hidden auto; scrollbar-width: none; font: 13px/17px "VK Sans Serif 13", monospace; white-space: normal;
  overflow-wrap: anywhere; }
#jxwin .hd-ct p { margin: 0 0 3px; }
#jxwin .hd-o { left: 406px; width: 203px; height: 35px; background: url(../../assets/ui/win/img/hd_o.png) no-repeat; cursor: pointer; }
#jxwin .hd-o > i { position: absolute; left: 5px; top: 5px; width: 24px; height: 24px; background: url(../../assets/ui/win/img/hd_kn.png) no-repeat; }
#jxwin .hd-o > b { position: absolute; left: 36px; top: 4px; right: 4px; font-weight: normal; color: rgb(255,250,196); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#jxwin .hd-o > em { position: absolute; left: 36px; top: 19px; right: 4px; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#jxwin .hd-y, #hd-dt .hd-y { color: rgb(255,255,0); }
#jxwin .hd-g, #jxwin .hd-dang, #hd-dt .hd-g, #hd-dt .hd-dang { color: rgb(110,255,110); }
#jxwin .hd-c, #hd-dt .hd-c { color: rgb(240,127,80); }
#jxwin .hd-sap, #hd-dt .hd-sap { color: rgb(255,217,78); }
#jxwin .hd-qua, #jxwin .hd-du, #hd-dt .hd-qua, #hd-dt .hd-du { color: rgb(150,150,140); }
#jxwin .hd-mo, #hd-dt .hd-mo { color: #c9bfa5; padding: 4px; white-space: normal; }
#jxwin .hd-mo-giua { left: 0; top: 170px; width: 612px; text-align: center; }
#jxwin .hd-xem { color: rgb(255,217,78); cursor: pointer; }
#jxwin .hd-xem:hover { color: #fff; }
/* Tra cứu / Phần thưởng: ô tìm, mục bên trái, nội dung bên phải */
#jxwin .hd-o-tim { left: 90px; top: 5px; width: 300px; height: 22px; box-sizing: border-box; padding: 0 6px; background: #0e0c08; border: 1px solid #6a5a35; color: #fff;
  font: 13px/20px "VK Sans Serif 13", monospace; outline: none; user-select: text; text-shadow: none; }
#jxwin .hd-o-tim:focus { border-color: #c9a95a; }
#jxwin .hd-idx { top: 38px; width: 186px; height: 335px; }
#jxwin .hd-idx .hd-r { padding-left: 4px; display: block; overflow: hidden; text-overflow: ellipsis; }
#jxwin .hd-idx .hd-r.n { color: rgb(255,250,0); padding-left: 2px; cursor: default; background: none; margin-top: 3px; }
#jxwin .hd-noi { left: 198px; top: 38px; width: 408px; height: 335px; overflow: hidden auto; scrollbar-width: none; font: 13px/17px "VK Sans Serif 13", monospace;
  white-space: normal; overflow-wrap: anywhere; color: rgb(169,211,190); user-select: text; }
#jxwin .hd-noi p, #hd-dt .hd-dt-ct2 p { margin: 2px 0 5px; }
#jxwin .hd-noi ul, #hd-dt .hd-dt-ct2 ul { margin: 2px 0 5px; padding-left: 16px; }
.hd-noi-ten { color: rgb(240,127,80); margin: 0 0 3px; }
.hd-noi-ten img { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; margin-right: 5px; image-rendering: pixelated; }
.hd-tom { color: rgb(160,160,150); margin-bottom: 4px; }
.hd-h { color: rgb(255,217,78); margin: 7px 0 2px; }
.hd-bang { width: 100%; border-collapse: collapse; margin: 2px 0 6px; }
.hd-bang td { padding: 1px 4px; border-bottom: 1px solid rgba(0,0,0,.5); vertical-align: top; }
.hd-bang td.r { text-align: right; }
.hd-bang td.n { white-space: nowrap; }
.hd-bang tr.h td { color: rgb(255,250,0); border-bottom-color: #6a5a35; }
.hd-bang tr:not(.h) td.r:nth-child(2) { color: rgb(110,255,110); }
/* điện thoại dọc (anh 05/11 chọn chữ 16 px): lớp hết màn dưới cửa sổ client (#jxwin cùng z-index, đứng sau trong trang) */
#hd-dt { position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; background: rgba(12,10,6,.97); color: rgb(169,211,190);
  font: 16px/21px "VK Sans Serif 16", "IBM Plex Mono", monospace; text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; touch-action: pan-y; user-select: none; }
#hd-dt .hd-dt-dau { position: relative; flex: none; height: 40px; line-height: 40px; text-align: center; color: rgb(255,250,196); border-bottom: 1px solid #6a5a35;
  background: linear-gradient(#3c3420, #1c170e); }
#hd-dt .hd-dt-x { position: absolute; right: 8px; top: 5px; width: 30px; height: 30px; line-height: 28px; box-sizing: border-box; border: 1px solid #c9a95a; color: #ffe48a; font-weight: normal; }
#hd-dt .hd-dt-the { flex: none; display: flex; gap: 4px; padding: 6px; }
#hd-dt .hd-dt-the > span { flex: 1; text-align: center; line-height: 34px; border: 1px solid #6a5a35; background: #1a1610; }
#hd-dt .hd-dt-the > span.on { color: rgb(255,250,0); border-color: #c9a95a; background: linear-gradient(#5a4a26, #2a2214); }
#hd-dt .hd-dt-noi { flex: 1; overflow: hidden auto; -webkit-overflow-scrolling: touch; padding-bottom: 24px; }
#hd-dt .hd-dt-nh { color: rgb(240,127,80); padding: 8px 8px 3px; }
#hd-dt .hd-dt-r { display: flex; gap: 6px; padding: 7px 8px; border-bottom: 1px solid #2a2418; }
#hd-dt .hd-dt-r > span:nth-child(1) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hd-dt .hd-dt-r > span:nth-child(2) { width: 82px; white-space: nowrap; }
#hd-dt .hd-dt-r > span:nth-child(3) { width: 112px; text-align: right; white-space: nowrap; }
#hd-dt .hd-dt-r.on { background: rgba(110,110,90,.45); }
#hd-dt .hd-dt-ct { margin: 4px 8px 8px; padding: 8px; border: 1px solid #4a4030; background: #14110b; white-space: normal; overflow-wrap: anywhere; }
#hd-dt .hd-dt-ct p { margin: 0 0 6px; }
#hd-dt .hd-dt-ten { color: rgb(240,127,80); margin-bottom: 4px; }
#hd-dt .hd-xem { color: rgb(255,217,78); }
#hd-dt .hd-dt-tim { padding: 6px 8px 4px; }
#hd-dt .hd-dt-tim input { width: 100%; height: 40px; box-sizing: border-box; padding: 0 10px; background: #0e0c08; border: 1px solid #6a5a35; color: #fff;
  font: 16px/38px "VK Sans Serif 16", monospace; outline: none; user-select: text; }
#hd-dt .hd-dt-chip { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 8px 8px; }
#hd-dt .hd-dt-chip > span { padding: 0 10px; line-height: 32px; border: 1px solid #4a4030; background: #14110b; }
#hd-dt .hd-dt-chip > span.on { color: rgb(255,250,0); border-color: #c9a95a; background: #2a2214; }
#hd-dt .hd-dt-m { display: flex; align-items: center; padding: 8px; border-bottom: 1px solid #2a2418; }
#hd-dt .hd-dt-m > div { flex: 1; min-width: 0; }
#hd-dt .hd-dt-m b { display: block; font-weight: normal; color: rgb(255,217,78); }
#hd-dt .hd-dt-m em { display: block; font: 13px/16px var(--jx); font-style: normal; color: rgb(160,160,150); }
#hd-dt .hd-dt-m > i { font-style: normal; color: #c9a95a; font-size: 20px; padding-left: 8px; }
#hd-dt .hd-dt-lui { padding: 9px 8px; color: #c9a95a; border-bottom: 1px solid #4a4030; }
#hd-dt .hd-dt-ct2 { padding: 6px 8px 16px; white-space: normal; overflow-wrap: anywhere; }
#hd-dt .hd-noi-ten { font-size: 16px; }
#hd-dt .hd-tom { font: 13px/17px var(--jx); }
#hd-dt .hd-bang td { padding: 5px 6px; }
/* Trợ Thủ → Tiện ích → Tra cứu (anh 05/11 — trothu.js _traCuu): ô tìm + kết quả (bấm mở bảng lớn của Hướng dẫn hoạt động) */
#jxwin .tt-tim { margin: 2px 0 4px; }
#jxwin .tt-tim input { width: 100%; height: 20px; box-sizing: border-box; padding: 0 5px; background: #0e0c08; border: 1px solid #6a5a35; color: #fff; font: 12px/18px var(--jx); outline: none; user-select: text; }
#jxwin .tt-tcm { padding: 3px 2px; border-bottom: 1px solid #2a2418; cursor: pointer; white-space: normal; }
#jxwin .tt-tcm:hover b { color: #fff; }
#jxwin .tt-tcm b { display: block; font-weight: normal; color: rgb(255,217,78); }
#jxwin .tt-tcm em { display: block; font: 12px/14px var(--jx); font-style: normal; color: rgb(160,160,150); }
/* F10 → Lịch hoạt động (anh 05/11 — quantri.js veLich) */
.qt-lich-o { border: 1px solid #4a4030; background: rgba(20,17,11,.6); padding: 4px 8px; margin: 6px 0; }
.qt-lich-o.tat { opacity: .75; }
.qt-lich-o .r { margin: 3px 0; }
.qt-thu { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; cursor: pointer; }
/* Phân Thân (anh 05/11 — src/game/phanthan.js, Kiểu 2: bố cục khung Lập nhóm, nền pt_nen.png đã che chữ in sẵn — chữ mới viết ở đây) */
#jxwin .pt-khung > div:not(.jw-i):not(.jw-page) { position: absolute; box-sizing: border-box; font: 13px/13px "VK Sans Serif 13", "IBM Plex Mono", monospace; white-space: nowrap; overflow: hidden; }
#jxwin .pt-khung .pt-tieude { display: flex; align-items: center; justify-content: center; font-weight: bold; color: #3a2208; letter-spacing: 1px; }
#jxwin .pt-khung .pt-dau { display: flex; align-items: center; padding-left: 4px; color: #ffe9b0; text-shadow: 1px 1px #000; }
#jxwin .pt-khung .pt-nhan { display: flex; align-items: center; padding-left: 4px; color: #ffe9b0; text-shadow: 1px 1px #000; }
#jxwin .pt-khung .pt-gt { display: flex; align-items: center; padding-left: 4px; }
#jxwin .pt-khung .pt-nut { display: flex; align-items: center; justify-content: center; color: #fff6c8; text-shadow: 1px 1px #000; cursor: pointer; user-select: none; }
#jxwin .pt-khung .pt-nut:hover { color: #fffd7a; background: rgba(255, 253, 122, .08); }
#jxwin .pt-khung .pt-nut:active { transform: translate(1px, 1px); }
#jxwin .pt-khung .pt-nut.tat { color: #7d8a80; cursor: default; }
#jxwin .pt-khung .pt-nut.tat:hover { background: none; }
#jxwin .pt-khung .pt-hd { color: #2e2a14; text-shadow: none; font-weight: bold; }
#jxwin .pt-khung .pt-hd:hover { color: #6a1c00; background: rgba(255, 255, 255, .12); }
#jxwin .pt-ds { color: rgb(218, 255, 165); }
#jxwin .pt-ds .pt-dong, #jxwin .pt-ds .pt-dong1 { padding: 1px 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#jxwin .pt-ds .pt-dong { padding-bottom: 3px; }
#jxwin .pt-ds .chon { color: rgb(255, 253, 122); background: rgba(150, 142, 105, .55); }
#jxwin .pt-ds .da { color: #8a9a8a; }
#jxwin .pt-ds .pt-ten { line-height: 15px; }
#jxwin .pt-ds .pt-tt { line-height: 13px; padding-left: 8px; color: #9aa79a; }
#jxwin .pt-ds .pt-tt.theo { color: #55ff91; }
#jxwin .pt-ds .pt-trong { padding: 2px 3px; color: #8a8a8a; line-height: 15px; white-space: normal; }
#jxwin .pt-khung .pt-vang { color: #ffd94e; }
#jxwin .pt-khung .pt-xanh { color: #cfe6ab; }

/* Bang phái: danh sách tương tác trong khung client hiện có. */
.guild-members { overflow-y: auto; scrollbar-width: thin; color: #e8d59d; }
.guild-row { display: block; box-sizing: border-box; width: 100%; padding: 5px 4px; border: 0; border-bottom: 1px solid #77674455; background: transparent; color: #e8d59d; text-align: left; font: inherit; cursor: pointer; }
.guild-row.selected, .guild-row:hover { background: #8c713755; }
.guild-row small { font-size: 11px; }
.guild-directory { position: absolute; inset: 0; z-index: 5; padding: 10px; background: #24251e; color: #e8d59d; }
.guild-directory[hidden] { display: none; }
.guild-directory-title { margin-bottom: 8px; color: #ffed8a; }
.guild-directory-list { height: 305px; overflow-y: auto; }
.guild-actions { display: flex; gap: 6px; padding-top: 8px; }
.guild-actions button { color: #e8d59d; background: #393a2b; border: 1px solid #88764f; padding: 4px 8px; cursor: pointer; font: inherit; }
.guild-actions button:disabled { opacity: .4; cursor: default; }
.guild-log { padding: 6px; border-bottom: 1px solid #77674455; }
.guild-unavailable { position: absolute; top: 40px; left: 20px; color: #e8d59d; }

/* Bản đồ thế giới: responsive atlas with the client's regional grouping. */
.world-atlas { box-sizing:border-box; width:min(1040px,96vw); height:min(760px,94dvh); max-width:none; max-height:none; padding:0; border:2px solid #8c7548; border-radius:5px; background:#171d1b; color:#e9d9ac; box-shadow:0 14px 80px #000b; font:14px/1.45 Arial,sans-serif; }
.world-atlas::backdrop { background:#0009; }
.world-atlas[open] { display:flex; flex-direction:column; }
.world-atlas * { box-sizing:border-box; }
.world-atlas header { display:flex; align-items:center; justify-content:space-between; padding:12px 18px; background:linear-gradient(#34382b,#22291f); border-bottom:1px solid #7c6943; }
.world-atlas header small { color:#aa9d77; font-size:11px; letter-spacing:2px; }
.world-atlas h2 { margin:0; font-size:23px; font-weight:normal; color:#f2d493; }
.world-atlas button { font:inherit; color:#ead7a7; background:#30352a; border:1px solid #6e6243; border-radius:3px; padding:7px 12px; cursor:pointer; }
.world-atlas button:hover,.world-atlas button:focus-visible { background:#444735; border-color:#d4b66b; outline:2px solid #bda269; outline-offset:-2px; }
.world-atlas header button { font-size:21px; padding:2px 11px; }
.atlas-toolbar { display:flex; align-items:end; gap:12px; padding:10px 16px; border-bottom:1px solid #484b38; }
.atlas-toolbar label { flex:1; display:flex; align-items:center; gap:12px; }
.atlas-toolbar input { min-width:0; flex:1; padding:9px; border:1px solid #6e6243; border-radius:3px; background:#101715; color:#f1e4c4; font:inherit; }
.atlas-content { flex:1; min-height:0; display:grid; grid-template-columns:58% 42%; }
.atlas-chart { min-height:0; position:relative; display:flex; flex-direction:column; background:radial-gradient(ellipse at 30% 30%,#253c36,#132626 80%); }
.atlas-chart svg { flex:1; min-height:0; width:100%; }
.atlas-land { fill:url(#atlas-land); stroke:#d1bb81; stroke-width:2; opacity:.76; }
.atlas-rivers { fill:none; stroke:#4d7876; stroke-width:5; opacity:.85; }
.atlas-mountains { stroke:#4e5039; fill:none; stroke-width:2; opacity:.6; }
.atlas-water { fill:#8ea9a0; font-size:17px; letter-spacing:7px; }
.atlas-caption { fill:#b1b69a; font-size:12px; }
.atlas-regions g { cursor:pointer; outline:none; }
.atlas-regions circle { fill:#202e28; stroke:#e3c98b; stroke-width:2; }
.atlas-regions text { fill:#f6e5b4; font-size:15px; font-weight:bold; paint-order:stroke; stroke:#263025; stroke-width:4px; stroke-linejoin:round; }
.atlas-regions .atlas-count { font-size:11px; font-weight:normal; fill:#d0c5a0; stroke-width:3px; }
.atlas-regions .here circle { fill:#80e0bb; stroke:#edfff6; }
.atlas-regions .selected circle,.atlas-regions g:hover circle,.atlas-regions g:focus circle { stroke:#fff3ba; stroke-width:5; r:11; }
.atlas-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:20px; padding:7px; color:#d1d6b9; font-size:12px; }
.atlas-legend span:first-child,.atlas-current { color:#8ee3ba; }
.atlas-directory { display:flex; flex-direction:column; min-height:0; border-left:1px solid #675e40; background:#1c231f; }
.atlas-directory h3 { padding:13px; margin:0; color:#e0c989; font-size:15px; border-bottom:1px solid #484b38; }
.atlas-list { flex:1; min-height:90px; overflow:auto; overscroll-behavior:contain; padding:7px; }
.world-atlas .atlas-list button { width:100%; text-align:left; display:flex; flex-direction:column; margin-bottom:4px; background:#242d25; border-color:transparent; padding:9px 11px; }
.world-atlas .atlas-list button.selected { background:#494b31; border-color:#b89b58; }
.atlas-list small { color:#b3b599; font-size:12px; }
.atlas-list .here span { color:#8ee3ba; }
.atlas-empty { padding:12px; color:#abb49d; }
.atlas-detail { display:flex; gap:12px; padding:12px; border-top:1px solid #484b38; min-height:155px; }
.atlas-preview { width:40%; height:140px; flex-shrink:0; display:grid; place-items:center; background:#0c1714; border:1px solid #565c42; overflow:hidden; text-align:center; font-size:12px; }
.atlas-preview img { width:100%; height:100%; object-fit:contain; }
.atlas-detail h4 { font-size:15px; margin:0 0 6px; color:#eed79d; }
.atlas-detail p { font-size:12px; margin:0 0 7px; }
.atlas-detail button { font-size:12px; }
.world-atlas footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 15px; padding:9px 16px; border-top:1px solid #675e40; color:#bcbba0; font-size:12px; }
@media(max-width:640px) {
 .world-atlas { width:100vw; height:100dvh; margin:0; border-radius:0; }
 .world-atlas header { padding:8px 12px; }
 .world-atlas h2 { font-size:20px; }
 .atlas-toolbar { padding:8px; gap:6px; }
 .atlas-toolbar label span { display:none; }
 .atlas-toolbar button { font-size:12px; padding:9px; }
 .atlas-content { grid-template-columns:1fr; grid-template-rows:43% 57%; }
 .atlas-chart svg { max-height:100%; }
 .atlas-legend { display:none; }
 .atlas-directory { border-left:0; border-top:1px solid #675e40; }
 .atlas-directory h3 { padding:6px 12px; }
 .atlas-detail { min-height:105px; padding:8px; }
 .atlas-preview { width:100px; height:92px; }
 .atlas-detail p { margin:0 0 3px; }
 .world-atlas footer { padding:5px 10px; font-size:11px; }
}
.dt-bdl-dau button { flex-shrink:0; margin:0 8px; padding:5px 9px; background:#30352a; color:#ead7a7; border:1px solid #887449; border-radius:3px; font:inherit; pointer-events:auto; }
.atlas-region-picker { display:none; }
@media(max-width:640px) {
 .atlas-region-picker { display:flex; align-items:center; gap:12px; padding:5px 10px; color:#bcbba0; }
 .atlas-region-picker select { flex:1; min-width:0; padding:6px; font:inherit; background:#242d25; color:#ead7a7; border:1px solid #6e6243; }
}
@media(min-width:641px) and (max-height:540px) {
 .world-atlas { height:96dvh; }
 .world-atlas header { padding:5px 12px; }
 .world-atlas header small { display:none; }
 .world-atlas h2 { font-size:18px; }
 .atlas-toolbar { padding:5px 10px; }
 .atlas-toolbar input { padding:6px; }
 .atlas-directory h3 { padding:6px 10px; }
 .atlas-list { min-height:0; }
 .atlas-detail { min-height:90px; padding:7px; }
 .atlas-preview { height:74px; width:30%; }
 .atlas-detail h4 { font-size:13px; margin:0 0 3px; }
 .atlas-detail p { font-size:11px; margin:0 0 3px; }
 .atlas-detail button { padding:4px 8px; }
 .world-atlas footer { padding:4px 10px; font-size:10px; }
}