/* thanh cuon toan game: den xam hop giao dien (23/10/2026) */
* { scrollbar-color: #4A4256 #15121C; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #15121C; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #4A4256; border-radius: 4px; border: 1px solid #15121C; }
::-webkit-scrollbar-thumb:hover { background: #6A5E7A; }
::-webkit-scrollbar-corner { background: #15121C; }
:root {
  --ink: #F3EFE6; --muted: #B9B2A4; --panel: rgba(22, 20, 30, .78); --edge: rgba(255, 240, 210, .16);
  --hp: #D9534A; --st: #E0B341; --mp: #6C7FE8; --xp: #6FB7E8; --gold: #E9C46A; --good: #8BD17C;
  --f: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0E1A26; color: var(--ink); font: 13px/1.4 var(--f); }
canvas#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; touch-action: none; cursor: crosshair; }
#hud { position: fixed; inset: 0; pointer-events: none; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
#hud button, #hud input, #hud label, .dialog, .help-card { pointer-events: auto; }
.panel { position: absolute; background: var(--panel); border: 1px solid var(--edge); border-radius: 6px; padding: 8px 10px; display: grid; gap: 5px; backdrop-filter: blur(3px); }
.left-col { position: absolute; top: 10px; left: 10px; display: grid; gap: 8px; width: 230px; }
.left-col .panel { position: static; }
.me { width: 230px; }
.target { top: 10px; left: 50%; transform: translateX(-50%); width: 220px; }
.who { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.who b { font-weight: 700; }
.who span { color: var(--muted); font-variant-numeric: tabular-nums; }
.row { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#money { color: var(--gold); white-space: nowrap; }
.bar { position: relative; height: 14px; background: rgba(0, 0, 0, .45); border-radius: 3px; overflow: hidden; }
.bar.xp { height: 8px; }
.bar i { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .15s; }
.bar.hp i { background: var(--hp); } .bar.st i { background: var(--st); } .bar.mp i { background: var(--mp); } .bar.xp i { background: var(--xp); }
.bar span { position: absolute; inset: 0; font-size: 10.5px; line-height: 14px; text-align: center; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px #000; }
.bar.xp span { display: none; }
.toast { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); text-align: center; display: grid; gap: 2px; text-shadow: 0 2px 4px #000; animation: toast 3.2s forwards; }
.toast b { font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.toast span { color: var(--muted); }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -6px); } 12%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
#mini { position: absolute; top: 10px; right: 10px; width: 180px; height: 150px; border: 1px solid var(--edge); border-radius: 6px; background: #0E1A26; image-rendering: pixelated; }
.log { position: absolute; right: 10px; bottom: 124px; margin: 0; padding: 0; list-style: none; display: grid; justify-items: end; gap: 3px; max-width: 360px; text-align: right; text-shadow: 0 1px 2px #000; font-size: 12.5px; z-index: 6; pointer-events: none; }
.log li { opacity: 1; transition: opacity 1s; padding: 3px 9px; border-radius: 6px; background: rgba(14, 12, 20, .86); border: 1px solid rgba(255, 255, 255, .08); line-height: 1.35; }
.log li.old { opacity: 0; }
.log .exp { color: var(--xp); } .log .gold { color: var(--gold); } .log .good { color: var(--good); } .log .bad { color: #F08A80; }
.dialog { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); width: min(520px, calc(100% - 20px)); background: rgba(24, 20, 30, .94); border: 1px solid var(--gold); border-radius: 8px; padding: 12px 14px; display: grid; gap: 8px; }
.d-head b { color: var(--gold); }
.dialog p { margin: 0; line-height: 1.55; }
.d-btns { display: flex; justify-content: flex-end; gap: 8px; }
.d-btns.col { flex-direction: column; align-items: stretch; gap: 5px; max-height: 50vh; overflow-y: auto; }
.dialog .d-btns.col button { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.dialog .d-btns.col button.ghost { align-self: flex-end; text-align: center; }
.dialog button, .help-card button { font: inherit; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--gold); background: #3A2F1C; color: var(--ink); cursor: pointer; }
.help-card button.ghost { background: transparent; border-color: var(--edge); color: var(--muted); }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 6, 14, .55); pointer-events: auto; z-index: 1000; }
.overlay > div { display: grid; gap: 6px; text-align: center; }
#dead b { font-size: 26px; color: #F08A80; }
.help-card { width: min(560px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; background: rgba(24, 20, 30, .96); border: 1px solid var(--edge); border-radius: 10px; padding: 18px 20px; text-align: left !important; gap: 10px !important; }
.help-card h1 { margin: 0; font-size: 20px; }
.help-card h2 { margin: 4px 0 0; font-size: 15px; }
.classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.help-card .classes button { display: grid; justify-items: center; gap: 3px; padding: 6px 4px; background: rgba(255, 255, 255, .04); border-color: var(--edge); font-size: 11.5px; line-height: 1.2; }
.help-card .classes button[aria-pressed="true"] { border-color: var(--gold); background: #3A2F1C; color: var(--gold); }
.classes canvas { width: 32px; height: 40px; image-rendering: pixelated; }
.help-card .cls-info { color: var(--ink); font-size: 12.5px; }
.help-card p { margin: 0; color: var(--muted); }
.help-card table { border-collapse: collapse; width: 100%; }
.help-card td { padding: 5px 0; border-bottom: 1px solid var(--edge); vertical-align: top; }
.help-card td:first-child { width: 96px; color: var(--gold); font-weight: 600; }
.help-card .note { font-size: 12px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.opts label { display: flex; gap: 6px; align-items: center; }

@media (max-width: 640px) {
  .left-col { width: 180px; }
  .me { width: 180px; padding: 6px 8px; }
  .target { top: auto; bottom: 76px; }
  #mini { width: 112px; height: 94px; }
  .log { bottom: 140px; font-size: 11.5px; max-width: 55%; }
  .toast { top: 120px; }
}
@media (prefers-reduced-motion: reduce) { .toast { animation-duration: .01s; animation-delay: 0s; } .bar i { transition: none; } }

/* choi mang, tao nhan vat (05/10/2026) */
.net-status { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(90, 30, 30, .9); border: 1px solid #F08A80; border-radius: 6px; padding: 6px 12px; font-size: 12.5px; }
.create-card { width: min(640px, calc(100% - 24px)); }
.create-card h2 small { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }
.cr-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
#cr-prev { width: 110px; height: 110px; image-rendering: pixelated; background: radial-gradient(circle at 50% 70%, rgba(255, 240, 200, .14), rgba(255, 255, 255, .02) 70%); border: 1px solid var(--edge); border-radius: 10px; }
.cr-fields { display: grid; gap: 8px; flex: 1; min-width: 220px; }
.create-card label, .acc label { display: grid; gap: 4px; color: var(--muted); font-size: 12.5px; }
.create-card input, .acc input { font: inherit; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid var(--edge); border-radius: 6px; padding: 7px 9px; min-width: 0; }
.create-card input:focus, .acc input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.cr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr-row > span { color: var(--muted); font-size: 12.5px; width: 76px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.help-card .chips button { display: grid; gap: 1px; text-align: left; padding: 6px 10px; background: rgba(255, 255, 255, .04); border-color: var(--edge); font-size: 12.5px; line-height: 1.25; }
.help-card .chips button span { color: var(--muted); font-size: 11px; }
.help-card .chips button[aria-pressed="true"] { border-color: var(--gold); background: #3A2F1C; color: var(--gold); }
.help-card .chips.seg button { padding: 5px 12px; }
.cr-info { color: var(--ink) !important; font-size: 12.5px; min-height: 1.4em; }
.cr-msg { color: #FFB4A8 !important; background: rgba(160, 40, 30, .25); border: 1px solid rgba(240, 138, 128, .5); border-radius: 6px; padding: 6px 10px; }
.cr-login summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.cr-login .acc-row { margin-top: 6px; }
.acc { display: grid; gap: 8px; border: 1px solid var(--edge); border-radius: 8px; padding: 10px 12px; background: rgba(255, 255, 255, .03); }
.acc-who { color: var(--ink) !important; font-weight: 600; }
.acc-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.acc-row input { flex: 1; }
.donate-link { color: var(--gold); text-decoration: none; font-weight: 600; }
.donate-link:hover { text-decoration: underline; }
.discord-link { color: #A9B4FF; text-decoration: none; font-weight: 600; }
.discord-link:hover { text-decoration: underline; }
.help-card .logo-banner { display: block; width: 100%; height: auto; max-height: 150px; object-fit: cover; border-radius: 8px; border: 1px solid var(--edge); }

/* 07/10/2026: tro chuyen, to doi, tui do, cua hang, Dungeon */
.bar.zz i { background: #8E86D8; }
#clock.warn { color: #F08A80; }
.link { font: inherit; font-size: 11.5px; color: var(--muted); background: none !important; border: 0 !important; padding: 0 !important; cursor: pointer; text-decoration: underline; pointer-events: auto; }
.party { padding: 7px 9px; }
.party ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.party li { display: grid; grid-template-columns: 1fr auto; gap: 1px 6px; align-items: center; font-size: 12px; }
.party li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party li .sub { color: var(--muted); font-size: 11px; grid-column: 1; }
.party li .bar { grid-column: 1 / -1; height: 6px; }
.party li .kick { grid-row: 1; grid-column: 2; line-height: 1; color: var(--muted); background: none; border: 1px solid var(--edge); border-radius: 4px; padding: 1px 6px; }
.party li.away b::after { content: ' · nơi khác'; color: var(--muted); font-weight: 400; }
.party li.down { opacity: .55; }
.chatbox { position: absolute; left: 10px; bottom: 76px; width: min(400px, calc(100% - 20px)); display: grid; gap: 6px; padding: 8px 10px; pointer-events: auto;
  background: rgba(12, 10, 18, .74); border: 1px solid var(--edge); border-radius: 8px; opacity: .6; transition: opacity .4s; }
.chatbox.fresh, .chatbox:hover, .chatbox.typing { opacity: 1; }
.chatbox ol { list-style: none; margin: 0; padding: 0 2px 0 0; max-height: 9.8em; overflow-y: auto; display: grid; gap: 3px; font-size: 13.5px; line-height: 1.4; overscroll-behavior: contain; }
.chatbox li { color: #F3EFE6; overflow-wrap: anywhere; }
.chatbox li b { color: #9FD0FF; font-weight: 700; }
.chatbox li.self b { color: var(--gold); }
.chatbox li.party, .chatbox li.party b, .chatbox li i { color: #9EE493; font-style: normal; }
.chatbox ol:empty { display: none; }
.chat-tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.chat-tabs button { position: relative; font: 600 11.5px var(--f); color: var(--muted); background: rgba(255, 255, 255, .05); border: 1px solid var(--edge); border-radius: 5px; padding: 2px 8px; cursor: pointer; }
.chat-tabs button[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); background: #3A2F1C; }
.chat-tabs button.new::after { content: ''; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: #FF8A5A; }
.chatbox li time { color: #8E8A98; font-size: 11px; font-variant-numeric: tabular-nums; }
.chatbox li.empty { color: var(--muted); font-size: 12px; }
.chatbox li.ch-d, .chatbox li.ch-d b { color: #9EE493; }
.chatbox li.ch-f b { color: #FFB45A; }
.chatbox li.ch-m b { color: #C8E6FF; }
.rank-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; }
.rank-list li { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,.03); font-size: 13px; }
.rank-list li b { color: var(--muted); text-align: right; }
.rank-list li.top b { color: var(--gold); }
.rank-list li.me { outline: 1px solid var(--gold); }
.rank-list li em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-list li.empty { display: block; color: var(--muted); }
.acc-chars { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.acc-chars li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.04); font-size: 13px; }
.acc-chars li.cur { outline: 1px solid var(--gold); }
.chat { display: flex; gap: 6px; }
.chat input { flex: 1; min-width: 0; box-sizing: border-box; font: inherit; font-size: 13.5px; color: var(--ink); background: rgba(255, 255, 255, .08); border: 1px solid var(--gold); border-radius: 6px; padding: 7px 9px; }
.chat button { font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid var(--edge); border-radius: 6px; padding: 0 10px; cursor: pointer; }
.chat button.party { color: #9EE493; border-color: #8BD17C; }
.loot { position: absolute; top: 120px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 8px 14px; background: rgba(24, 20, 30, .92); border: 1px solid var(--gold); border-radius: 8px; font-weight: 700; }
.loot.show { animation: toast 3.4s forwards; }
.pinv { top: 210px; left: 50%; transform: translateX(-50%); width: min(340px, calc(100% - 20px)); pointer-events: auto; border-color: #8BD17C; }
.pinv p { margin: 0; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.panel button, .sheet button { font: inherit; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--gold); background: #3A2F1C; color: var(--ink); cursor: pointer; }
.panel button.ghost, .sheet button.ghost, .dialog button.ghost { background: transparent; border-color: var(--edge); color: var(--muted); }
.panel button:disabled, .sheet button:disabled { opacity: .45; cursor: default; }
.pcard { position: fixed; width: 220px; pointer-events: auto; z-index: 5; }
.pcard span { color: var(--muted); font-size: 12px; }
.ico { image-rendering: pixelated; display: block; }
/* bang tui do, cua hang */
.sheet { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100% - 20px)); max-height: calc(100% - 90px); overflow: auto;
  background: rgba(22, 18, 28, .97); border: 1px solid var(--edge); border-radius: 10px; padding: 14px 16px; display: grid; gap: 10px; pointer-events: auto; z-index: 4; }
.sheet header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sheet h2 { margin: 0; font-size: 17px; }
.inv-body { display: grid; grid-template-columns: 196px 1fr; gap: 12px; }
.inv-who { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.doll { display: grid; grid-template-columns: repeat(3, 54px); grid-template-areas: "day mu bong" "vk ao gang" "dai quan choang" ". giay ."; gap: 5px; justify-content: center; margin-top: 6px; }
.sheet .slot, .sheet .cell { position: relative; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border-radius: 8px; border: 2px solid var(--edge); background: rgba(255, 255, 255, .04); }
.slot span { color: var(--muted); font-size: 11px; }
.slot .ico { width: 40px !important; height: 40px !important; }
.sheet .slot.sel, .sheet .cell.sel { outline: 2px solid var(--gold); outline-offset: 1px; background: #3A2F1C; }
.slot.broken .ico { opacity: .35; }
.slot .dur { position: absolute; left: 4px; bottom: 3px; height: 3px; max-width: calc(100% - 8px); border-radius: 2px; }
.stats { display: grid; grid-template-columns: repeat(3, auto minmax(56px, auto)); gap: 2px 10px; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--edge); font-size: 12px; }
.bag-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.bag-bar .inv-money { margin: 0 auto 0 0; }
.sheet .bag-bar button { padding: 3px 8px; font-size: 12px; }
.stats dt { color: var(--muted); }
.stats dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bag { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.sheet .bag .cell { width: 100%; height: auto; aspect-ratio: 1; }
.sheet .bag .cell:disabled { cursor: default; opacity: .5; }
.bag .cell.cant .ico { opacity: .45; }
.bag .cell em { position: absolute; right: 4px; bottom: 2px; font-style: normal; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.inv-money { margin: 6px 0; color: var(--gold); font-size: 12.5px; }
.detail { min-height: 120px; border-top: 1px solid var(--edge); padding-top: 8px; display: grid; gap: 4px; align-content: start; }
.detail h3 { margin: 0; font-size: 15px; }
.detail .meta, .detail .hint { margin: 0; color: var(--muted); font-size: 12px; }
.detail .warn { margin: 0; color: #F08A80; font-size: 12px; }
.detail .lines { margin: 2px 0; padding-left: 18px; font-size: 13px; }
.detail .lines .sub { color: #8BD17C; }
.detail .up { color: #8BD17C; }
.detail .down { color: #F08A80; }
.detail .btns { margin-top: 4px; }
.shop-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; }
.sheet .tabs button[aria-pressed="true"] { background: #3A2F1C; border-color: var(--gold); color: var(--gold); }
.sheet .tabs button[aria-pressed="false"] { background: transparent; border-color: var(--edge); color: var(--muted); }
.shop-bar label { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12.5px; }
.shop-money { margin-left: auto; color: var(--gold); font-weight: 600; }
.sheet .note { margin: 0; color: var(--muted); font-size: 12px; }
.shop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.shop-list li { display: grid; grid-template-columns: 32px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; background: rgba(255, 255, 255, .03); }
.shop-list li.total { grid-template-columns: 1fr auto; background: none; }
.shop-list .nm { display: grid; gap: 1px; min-width: 0; }
.shop-list .nm span { color: var(--muted); font-size: 11.5px; }
.shop-list .price { color: var(--gold); font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
.dialog .d-btns button { font: inherit; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--gold); background: #3A2F1C; color: var(--ink); cursor: pointer; }
@media (max-width: 640px) {
  .chatbox { bottom: 132px; width: calc(100% - 20px); }
  .chatbox ol { max-height: 6.2em; font-size: 12.5px; }
  .inv-body { grid-template-columns: 1fr; }
  .doll { grid-template-columns: repeat(3, 54px); }
  .sheet .slot { width: 54px; height: 54px; }
  .shop-list li { grid-template-columns: 28px 1fr auto; }
  .shop-list .price { grid-column: 2; }
  .party { display: none !important; }
}
[hidden] { display: none !important; }

/* dong ho Dungeon: duoi ban do nho */
.dg-timer { position: absolute; top: 168px; right: 10px; width: 180px; display: flex; justify-content: space-between; align-items: baseline; padding: 6px 10px; background: rgba(14, 22, 34, .88); border: 1px solid var(--edge); border-radius: 6px; font-variant-numeric: tabular-nums; }
.dg-timer small { font-size: 11.5px; letter-spacing: .04em; opacity: .85; }
.dg-timer b { font-size: 18px; color: #F2E6C8; }
.dg-timer.low { border-color: #F08A80; }
.dg-timer.low b { color: #FF8A7A; }
.dg-timer.done b { color: #8BD17C; font-size: 14px; }
@media (max-width: 700px) { .dg-timer { top: auto; bottom: 150px; right: 10px; width: 150px; } }

/* kiem tra san sang vao Dungeon */
.rc { top: 210px; left: 50%; transform: translateX(-50%); width: min(360px, calc(100% - 20px)); pointer-events: auto; border-color: var(--gold); display: grid; gap: 8px; }
.rc p { margin: 0; }
.rc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rc li { color: var(--muted); }
.rc li.ok { color: #8BD17C; }

/* khung to doi: trang thai san sang khi doi truong mo hang */
.rdy { font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted); }
.rdy.ok { color: #8BD17C; }


/* ---------------- man tai di tau: anh thanh tri, lich su ---------------- */
.travel { position: fixed; inset: 0; z-index: 40; display: grid; align-items: end; padding: 16px; background: #0B0712 center / cover no-repeat; }
.travel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 6, 12, .95) 0, rgba(8, 6, 12, .55) 45%, rgba(8, 6, 12, .1) 100%); }
.tv-card { position: relative; width: min(760px, 100%); margin: 0 auto 4vh; display: grid; gap: 8px; color: var(--ink); }
.tv-card h2 { margin: 0; font-size: clamp(24px, 5vw, 38px); color: var(--gold); text-shadow: 0 2px 10px #000; }
.tv-sub { margin: 0; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.tv-text { margin: 0; line-height: 1.6; text-shadow: 0 1px 4px #000; }
.tv-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.tv-bar span { display: block; height: 100%; width: 0; background: var(--gold); }
.travel.run .tv-bar span { animation: tv-fill 3s linear forwards; }
@keyframes tv-fill { to { width: 100%; } }
.tv-card button { justify-self: start; padding: 8px 18px; border-radius: 7px; border: 1px solid var(--gold); background: rgba(30, 26, 40, .9); color: var(--ink); font: inherit; cursor: pointer; }
.tv-card button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------------- man tai: logo, vong co ngu sang dan ---------------- */
#loading { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 16px;
  background: radial-gradient(circle at 50% 42%, #24123A 0, #0B0712 70%); color: var(--muted); font: 14px/1.4 var(--f); transition: opacity .45s; --p: 0; }
#loading.out { opacity: 0; pointer-events: none; }
.lz-logo { position: relative; width: min(66vw, 46vh, 340px); aspect-ratio: 1; }
.lz-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lz-dim { filter: grayscale(1) brightness(.42) contrast(1.1); }
/* tam vong co ngu (48,4% · 41,5% anh): phan da quet hien anh mau tim, het vong = 100% */
.lz-lit { -webkit-mask-image: conic-gradient(from 0deg at 48.4% 41.5%, #000 calc(var(--p) * 360deg), transparent calc(var(--p) * 360deg + .5deg));
  mask-image: conic-gradient(from 0deg at 48.4% 41.5%, #000 calc(var(--p) * 360deg), transparent calc(var(--p) * 360deg + .5deg));
  filter: drop-shadow(0 0 14px rgba(170, 90, 255, .45)); }
#loading.out .lz-lit { filter: drop-shadow(0 0 26px rgba(190, 120, 255, .8)) brightness(1.15); }
.lz-pct { margin: 4px 0 0; color: #D8B8FF; font-weight: 700; font-size: 20px; letter-spacing: .06em; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(170, 90, 255, .7); }
.lz-msg { margin: 0; max-width: 46ch; text-align: center; }
#loading.fail .lz-msg { color: #F08A80; }
/* 14/10/2026: man tai khi vao Dao Binh Minh: tranh toan canh, ten dao, loi khuyen, thanh tien do o duoi */
.lz-dbm { display: none; }
#loading.dbm { background: #0B0712 url('img/tai_dbm.webp') center / cover no-repeat; place-content: end stretch; padding: 0; gap: 0; }
#loading.dbm::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11, 7, 18, 0) 50%, rgba(11, 7, 18, .55) 72%, rgba(11, 7, 18, .92) 100%); pointer-events: none; }
#loading.dbm .lz-logo { display: none; }
#loading.dbm .lz-pct, #loading.dbm .lz-msg { position: relative; justify-self: center; }
#loading.dbm .lz-pct { order: 3; margin: 0 0 22px; font-size: 15px; color: #FFE7B0; text-shadow: 0 1px 4px #000; }
#loading.dbm .lz-msg { order: 1; color: #E9DCC4; text-shadow: 0 1px 3px #000; }
#loading.dbm .lz-dbm { position: relative; order: 2; display: grid; justify-items: center; gap: 6px; width: min(720px, calc(100% - 40px)); justify-self: center; margin: 8px 0 8px; }
.lz-dbm b { font-size: clamp(26px, 4.4vw, 44px); letter-spacing: .04em; color: #FFE7B0; text-shadow: 0 2px 10px rgba(0, 0, 0, .8), 0 0 24px rgba(255, 170, 70, .5); order: -1; margin-bottom: 4px; }
.lz-dbm span { color: #D9CDB8; font-size: 13px; text-align: center; text-shadow: 0 1px 3px #000; }
.lz-bar { width: 100%; height: 8px; margin-top: 8px; border-radius: 4px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 220, 160, .35); overflow: hidden; }
.lz-go { margin-top: 14px; padding: 10px 34px; font-size: 16px; font-weight: 700; letter-spacing: .04em; color: #2B1A08; background: linear-gradient(#FFE7B0, #E8A54B); border: 1px solid #FFF1CC; border-radius: 8px; box-shadow: 0 0 18px rgba(255, 190, 90, .6); cursor: pointer; animation: lzGo 1.6s ease-in-out infinite; }
.lz-go:hover { filter: brightness(1.08); }
@keyframes lzGo { 50% { box-shadow: 0 0 30px rgba(255, 200, 110, .95); transform: translateY(-1px); } }
#loading.ready .lz-bar, #loading.ready .lz-pct, #loading.ready .lz-msg { display: none; }
#loading.ready .lz-dbm { margin-bottom: 44px; }
.lz-bar i { display: block; height: 100%; width: calc(var(--p) * 100%); background: linear-gradient(90deg, #E8A54B, #FFE7B0); box-shadow: 0 0 10px rgba(255, 190, 90, .8); }

/* ---------------- thanh duoi: o nhanh + ky nang + nut he thong ---------------- */
.actions { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; pointer-events: auto; max-width: calc(100% - 20px); }
.bar-row { display: flex; gap: 10px; align-items: flex-end; }
.skillbar, .sysbar, .quickbar { display: flex; gap: 5px; padding: 5px; border-radius: 10px; background: rgba(14, 12, 20, .72); border: 1px solid var(--edge); }
.actions button { position: relative; border-radius: 7px; border: 1px solid var(--edge); background: rgba(30, 26, 40, .9); color: var(--ink); font: inherit; cursor: pointer; overflow: hidden; touch-action: manipulation; padding: 0; }
.actions button:focus-visible, .dialog button:focus-visible, .help-card button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.actions button:active { filter: brightness(1.3); }
.actions kbd { position: absolute; left: 3px; top: 1px; font: 700 10px var(--f); color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; pointer-events: none; }
.actions .cd { position: absolute; inset: auto 0 0 0; height: 0; background: rgba(0, 0, 0, .62); pointer-events: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sk { width: 52px; height: 52px; }
.sk .ski { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.sk.locked .ski { filter: grayscale(.9) brightness(.6); }
.sk.locked .cd { height: 0 !important; }
.actions .sk[data-cd]::after { content: attr(data-cd); position: absolute; inset: 0; display: grid; place-items: center; font: 800 18px/1 var(--f); color: #fff; text-shadow: 0 1px 3px #000, 0 0 4px #000; pointer-events: none; }
.sk.locked kbd { color: #F0C080; }
.sysbar button { min-width: 58px; height: 52px; display: grid; place-content: center; }
.sysbar b { font-weight: 600; font-size: 12px; }
.sysbar kbd { display: none; }
.sysbar button { overflow: visible; }
.sysbar button[data-tip]:hover::after, .sysbar button[data-tip]:focus-visible::after { content: attr(data-tip) " · " attr(data-key); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 3px 7px; border-radius: 5px; background: rgba(14, 12, 20, .95); border: 1px solid var(--edge); color: var(--ink); font: 600 11.5px var(--f); pointer-events: none; z-index: 5; }
.sysbar button:last-child[data-tip]:hover::after { left: auto; right: 0; transform: none; }
#b-menu { min-width: 44px; }
#b-menu b { font-size: 18px; line-height: 1; }
.quickbar .q { width: 42px; height: 42px; display: grid; place-items: center; background: rgba(40, 34, 52, .9); }
.quickbar .q canvas { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; }
.quickbar .q em { position: absolute; right: 3px; bottom: 1px; font: 700 11px var(--f); font-style: normal; color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; pointer-events: none; }
.quickbar .q.empty { background: rgba(255, 255, 255, .03); border-style: dashed; }
.quickbar .q.none canvas { filter: grayscale(1) brightness(.5); }
.quickbar .q.over { border-color: var(--gold); background: rgba(90, 70, 30, .9); }
.bag .cell[draggable="true"] { cursor: grab; }

/* ---------------- menu Esc ---------------- */
.menu-card { width: min(1100px, calc(100% - 24px)); }
.menu-head { display: flex; gap: 12px; align-items: center; }
.menu-head img { border-radius: 12px; flex: none; }
.menu-head p { margin: 0; }
.menu-tabs { flex-wrap: wrap; }
.menu-tabs button { background: transparent; border-color: var(--edge); color: var(--muted); }
.menu-tabs button[aria-selected="true"] { background: #3A2F1C; border-color: var(--gold); color: var(--gold); }
.menu-pane { display: grid; gap: 10px; }
.keys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; }
.keys-grid .kr { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.keys-grid .kr span { min-width: 0; }
.help-card .keys-grid button { min-width: 74px; padding: 4px 8px; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, .05); border-color: var(--edge); }
.help-card .keys-grid button.wait { border-color: var(--gold); color: var(--gold); background: #3A2F1C; }
.keys-grid h3 { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; color: var(--gold); }
table.guide td:first-child { white-space: nowrap; }
table.guide kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .06); font: 600 11.5px var(--f); text-align: center; }
.menu-foot { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 4px; }

@media (max-width: 760px) {
  .bar-row { gap: 6px; }
  .sk { width: 44px; height: 44px; }
  .sysbar button { min-width: 44px; height: 44px; }
  .sysbar b { font-size: 10.5px; }
  .quickbar { gap: 3px; padding: 4px; }
  .quickbar .q { width: 34px; height: 34px; }
  .quickbar .q canvas { width: 26px; height: 26px; }
  .log { bottom: 150px; }
  .chatbox { bottom: 150px; }
}
@media (max-width: 520px) {
  .bar-row { flex-wrap: wrap; justify-content: center; }
  .sysbar kbd { display: none; }
  .quickbar .q { width: 30px; height: 30px; }
  .quickbar .q canvas { width: 22px; height: 22px; }
  .log { bottom: 196px; }
  .chatbox { bottom: 196px; }
}

/* ---------------- tien: bieu tuong Dong / Bac / Vang / Kim Ngan (img/tien.png, bieu_tuong_tien.py) ---------------- */
.coin { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin: 0 4px 0 2px; background: url(img/tien.png) 0 0 / 64px 16px no-repeat; image-rendering: pixelated; }
.c-dong { background-position: 0 0; } .c-bac { background-position: -16px 0; } .c-vang { background-position: -32px 0; } .c-kn { background-position: -48px 0; }
.mv { font-variant-numeric: tabular-nums; }

/* ---------------- giao dich ---------------- */
.tinv { top: 290px; border-color: var(--gold); }
.trade { width: min(640px, calc(100% - 20px)); }
.tr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tr-side { min-width: 0; display: grid; gap: 6px; align-content: start; padding: 10px; border: 1px solid var(--edge); border-radius: 8px; background: rgba(255, 255, 255, .03); }
.tr-side h3 { margin: 0; font-size: 13px; color: var(--gold); }
.tr-items { display: flex; flex-wrap: wrap; gap: 4px; min-height: 44px; }
.tr-items .cell { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--edge); border-radius: 6px; background: rgba(40, 34, 52, .9); }
.tr-items .cell em { position: absolute; right: 2px; bottom: 0; font: 700 11px var(--f); font-style: normal; color: #fff; text-shadow: 0 1px 2px #000; }
.tr-items .empty { color: var(--muted); font-size: 12px; align-self: center; }
.tr-money { display: flex; flex-wrap: wrap; gap: 4px; }
.tr-money .mi { display: flex; align-items: center; gap: 2px; padding: 2px 4px; border: 1px solid var(--edge); border-radius: 6px; background: rgba(0, 0, 0, .25); }
.tr-money input { width: 46px; padding: 3px 2px; border: 0; background: transparent; color: var(--ink); font: 600 13px var(--f); text-align: right; font-variant-numeric: tabular-nums; }
.tr-money .mi:first-child input { width: 54px; }
.tr-mview { margin: 0; min-height: 22px; }
.tr-state { margin: 0; font-size: 12px; color: var(--muted); }
.tr-state.lock { color: var(--gold); } .tr-state.ok { color: var(--good); }
.tr-bag .cell.sel { outline: 2px solid var(--gold); outline-offset: -2px; background: rgba(90, 70, 30, .9); }
@media (max-width: 560px) { .tr-cols { grid-template-columns: 1fr; } }

/* nut Ky nang / Thanh tuu tren thanh he thong */
.sysbar .sys-ico { position: relative; padding: 0; }
.sysbar .sys-ico .ski { width: 36px; height: 36px; image-rendering: pixelated; }
.sysbar .sys-ico b[aria-hidden] { font-size: 22px; line-height: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* giao dich: chon so luong */
.tr-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--gold); border-radius: 8px; background: #2A2216; }
.tr-qty input { width: 80px; font: inherit; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--edge); background: #15121C; color: var(--ink); }
/* bang ky nang */
.skills { width: min(760px, calc(100% - 20px)); display: grid; gap: 10px; }
.skills h3 { margin: 4px 0 0; font-size: 13.5px; color: var(--gold); }
.sk-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-slot { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--edge); border-radius: 8px; background: rgba(255, 255, 255, .04); min-width: 0; }
.sk-slot kbd { font-size: 11px; color: var(--gold); }
.sk-slot.drop { outline: 2px dashed var(--gold); }
.sk-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet .sk-ic { position: relative; width: 48px; height: 48px; padding: 0; border-radius: 8px; border: 2px solid var(--edge); background: #15121C; display: grid; place-items: center; }
.sk-ic canvas { width: 40px; height: 40px; image-rendering: pixelated; border-radius: 5px; }
.sheet .sk-ic.on { border-color: var(--gold); }
.sheet .sk-ic.lock canvas { opacity: .35; filter: grayscale(1); }
.sheet .sk-ic.sel { outline: 2px solid #fff; outline-offset: 1px; }
.sk-ic.pas::after { content: 'Nội tại'; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); font-size: 9px; color: var(--gold); background: #15121C; padding: 0 3px; border-radius: 3px; }
.sk-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.sk-br { display: grid; gap: 8px; align-content: start; padding: 10px; border: 1px solid var(--edge); border-radius: 8px; background: rgba(255, 255, 255, .03); min-width: 0; }
.sk-br.cur { border-color: var(--gold); background: #2A2216; }
.sk-br h4 { margin: 0; font-size: 14px; }
.sk-br.hidden-br { place-items: center; text-align: center; color: var(--muted); }
.sk-br.hidden-br b { font-size: 34px; color: var(--muted); }
.sk-detail { min-height: 58px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); font-size: 13px; line-height: 1.45; }
.sk-detail b { color: var(--gold); }
.sk-detail .btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* thanh tuu */
.ach { width: min(620px, calc(100% - 20px)); display: grid; gap: 8px; }
.ach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ach-list li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid transparent; }
.ach-list li.done { border-color: var(--gold); background: #2A2216; }
.ach-list .cup { font-size: 20px; filter: grayscale(1); opacity: .45; text-align: center; }
.ach-list li.done .cup { filter: none; opacity: 1; }
.ach-list .nm { display: grid; gap: 1px; min-width: 0; }
.ach-list .nm span { color: var(--muted); font-size: 11.5px; }
.ach-list .pg { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ach-list li.done .pg { color: var(--gold); }
.ach-toast { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); padding: 8px 16px; border-radius: 10px; border: 1px solid var(--gold); background: rgba(20, 16, 10, .92); color: var(--gold); font-weight: 600; pointer-events: none; z-index: 30; animation: achin 3.4s ease forwards; }
@keyframes achin { 0% { opacity: 0; transform: translate(-50%, -8px); } 10%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* bang sat thuong trong hang, bang vinh danh (14/10/2026) */
.dmeter ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dmeter li { position: relative; display: flex; justify-content: space-between; gap: 6px; font-size: 12px; padding: 2px 5px; border-radius: 4px; overflow: hidden; }
.dmeter li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 1; }
.dmeter li span { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; z-index: 1; }
.dmeter li i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255, 154, 74, .22); }
.dmeter li.me i { background: rgba(139, 209, 124, .28); }
.sheet.dmf { width: min(420px, calc(100% - 20px)); border-color: var(--gold); }
.dmf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dmf-list li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.dmf-list li.top1 { background: #2A2216; border: 1px solid var(--gold); }
.dmf-list li.me b { color: #8BD17C; }
.dmf-list .md { font-size: 20px; text-align: center; color: var(--muted); font-weight: 700; }
.dmf-list .v { font-variant-numeric: tabular-nums; color: var(--muted); }
/* ban be */
.finv { top: 370px; border-color: #6FB7FF; }
.fr-add { display: flex; gap: 6px; margin: 8px 0; }
.fr-add input { flex: 1; min-width: 0; }
.fr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.fr-list li { display: grid; grid-template-columns: 10px 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, .03); }
.fr-list li.empty { display: block; color: var(--muted); }
.fr-list .dot { width: 8px; height: 8px; border-radius: 50%; background: #666; }
.fr-list li.on .dot { background: #8BD17C; }
.fr-list .nm, .fv-eq .nm, .farm-plots .nm { display: grid; gap: 1px; min-width: 0; }
.fr-list .nm span, .fv-eq .nm span, .farm-plots .nm span { color: var(--muted); font-size: 11.5px; }
.fr-view { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); }
.fv-head { display: flex; gap: 12px; align-items: center; }
.fv-head h3 { margin: 0; }
.fv-head .note { margin: 2px 0; }
.fv-look { image-rendering: pixelated; flex: none; }
.fv-st { margin: 0; font-size: 12px; }
.fv-eq { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 5px; }
.fv-eq li { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, .03); }
.fv-eq li.none { opacity: .5; }
/* nong trai */
.farm-plots { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.farm-plots li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px; border-radius: 8px; background: #2B2117; border: 1px solid #5A4128; min-height: 52px; }
.farm-plots li.ripe { border-color: #8BD17C; }
.farm-plots li.empty { display: grid; gap: 5px; }
.farm-plots .nm { flex: 1; }
.farm-plots .bar { height: 4px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; }
.farm-plots .bar i { display: block; height: 100%; background: #8BD17C; }
.farm-plots .seeds { display: flex; flex-wrap: wrap; gap: 4px; }
.farm-plots .seeds button { display: flex; align-items: center; gap: 3px; padding: 2px 6px; }
.farm h3 { margin: 10px 0 6px; font-size: 14px; }


/* cua hang, tho ren dang the (14/10/2026) */
.shop-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 6px; }
.shop-grid .cats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; }
.shop-grid .cats { gap: 2px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sheet .shop-grid .cats button { padding: 2px 8px 4px; font-size: 11.5px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); }
.sheet .shop-grid .cats button[aria-pressed="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.shop-grid .head { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); padding-bottom: 3px; }
.shop-grid .empty { grid-column: 1 / -1; color: var(--muted); }
.shop-grid .card { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; gap: 4px 8px; padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); cursor: default; }
.shop-grid .card:hover { border-color: var(--gold); background: rgba(255, 212, 90, .06); }
.shop-grid .card .nm { display: grid; gap: 1px; min-width: 0; align-content: center; }
.shop-grid .card .nm b { font-size: 12.5px; line-height: 1.25; }
.shop-grid .card .nm span { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-grid .card .foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.shop-grid .card .foot button { padding: 2px 12px; }
.shop-grid .price, .ren-grid .price { color: var(--gold); font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
.ren-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ren-grid .ren { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.ren-grid .ren:hover { border-color: var(--gold); }
.ren-grid .ren.max { border-color: rgba(255, 212, 90, .5); }
.ren-grid .nm { display: grid; gap: 4px; min-width: 0; }
.ren-grid .pv { color: var(--muted); font-size: 11px; }
.ren-grid .pips { display: flex; gap: 3px; }
.ren-grid .pips i { width: 10px; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, .1); }
.ren-grid .pips i.on { background: var(--gold); box-shadow: 0 0 4px rgba(255, 212, 90, .6); }
.ren-grid .pips i.next { outline: 1px dashed var(--gold); }
.ren-grid .side { display: grid; gap: 4px; justify-items: end; min-width: 110px; }
.ren-grid .chance { position: relative; width: 110px; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ren-grid .nm .chance { width: 100%; max-width: 260px; }
.ren-grid .chance i { position: absolute; left: 0; top: 0; bottom: 0; background: #8BD17C; }
.ren-grid .chance.low i { background: #E8735A; }
.ren-grid .chance span { position: relative; display: block; text-align: center; font-size: 10.5px; line-height: 14px; color: #fff; text-shadow: 0 1px 1px #000; }
.ren-grid .total { display: flex; justify-content: space-between; align-items: center; padding: 6px 2px; }
.itip { position: fixed; z-index: 60; max-width: 260px; padding: 8px 10px; border-radius: 8px; background: #151821; border: 1px solid var(--gold); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); pointer-events: none; font-size: 12px; }
.itip .meta { margin: 2px 0; color: var(--muted); font-size: 11px; }
.itip ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; }
.itip .up { color: #8BD17C; } .itip .down { color: #E8735A; } .itip .sub { color: #9FC8FF; }
.ren-grid .pips i, .ren-grid .chance i { display: block; }
.ren-grid .chance { flex: none; }
.ren-grid .pips { gap: 4px; }
.ren-grid .pips i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, .15); }
.ren-grid .chance { height: 18px; border-radius: 9px; } .ren-grid .chance span { line-height: 18px; font-size: 11.5px; }
.ren-grid .nm b { font-size: 14px; } .ren-grid .pv { font-size: 12px; }
#buffs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
#buffs:empty { display: none; }
.buff { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px 1px 2px; border-radius: 4px; background: rgba(255,180,90,.18); border: 1px solid rgba(255,180,90,.5); font-size: 11px; color: #FFD9A8; }
.buff b { width: 18px; text-align: center; color: #FFB45A; font-weight: normal; }
.buff { pointer-events: auto; }
.sk-nghe { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; width: 100%; }
.sk-nghe b { color: #FFD9A8; }

/* nghe nghiep, Hoi Mao Hiem Gia (09/10/2026) */
.gp { width: min(760px, calc(100vw - 32px)); }
.gp-body { max-height: min(62vh, 560px); overflow-y: auto; padding-right: 4px; }
.gp-body h3 { margin: 14px 0 6px; font-size: 14px; }
.gp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.gp-chips button[aria-pressed="true"] { outline: 2px solid #FFD45A; }
.gp-need { font-size: 13px; color: #F08A80; margin: 6px 0; }
.gp-need.ok { color: #9EE493; }
.gp-slots { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.gp-slot { display: flex; align-items: center; gap: 6px; min-width: 150px; min-height: 40px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,233,168,.4); }
.gp-grid { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 10px; }
.gp-grid button { position: relative; width: 40px; height: 40px; padding: 2px; display: grid; place-items: center; }
.gp-grid button.on { outline: 2px solid #FFD45A; }
.gp-grid button em { position: absolute; right: 2px; bottom: 0; font-size: 10px; font-style: normal; text-shadow: 0 0 2px #000; }
.gp-result { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 8px; border-radius: 6px; background: rgba(255,212,90,.08); border: 1px solid rgba(255,212,90,.35); }
.gp-result span { font-size: 12px; opacity: .85; flex-basis: 100%; }
.gp-book { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.gp-book li { display: flex; gap: 8px; padding: 6px; border-radius: 6px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); opacity: .7; }
.gp-book li.on { opacity: 1; border-color: rgba(255,212,90,.45); }
.gp-book li.lock { grid-column: 1 / -1; }
.nha-list li { opacity: 1; flex-wrap: wrap; align-items: center; }
.nha-list .nm { flex: 1 1 140px; }
.nha-list button { font-size: 11px; padding: 3px 6px; }
.gp-book .nm { display: flex; flex-direction: column; font-size: 12px; gap: 1px; }
.gp-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.gp-form input { width: 90px; }
.gp-say { font-style: italic; background: rgba(255,255,255,.04); padding: 8px 10px; border-left: 3px solid #FFD45A; border-radius: 4px; }
.gp-money { text-align: right; font-size: 12px; opacity: .8; }
.gp-ranks { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.gp-ranks li { display: flex; gap: 8px; align-items: center; font-size: 13px; opacity: .75; }
.gp-ranks li.on { opacity: 1; }
.shop-list li.on { border-color: rgba(158,228,147,.5); }
.adv-card { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 6px 0; border-radius: 6px; background: linear-gradient(135deg, rgba(214,170,80,.18), rgba(120,80,40,.18)); border: 1px solid rgba(214,170,80,.45); font-size: 12px; }
.adv-card.big { flex-wrap: wrap; padding: 12px; font-size: 13px; }
.adv-card .adv-h { flex-basis: 100%; font-size: 11px; letter-spacing: .12em; opacity: .75; }
.adv-card .adv-info { display: flex; flex-direction: column; gap: 2px; }
.adv-rank { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 6px; font-weight: 700; color: #fff; background: #777; }
.adv-card.big .adv-rank { min-width: 52px; height: 52px; font-size: 28px; }
.adv-rank.rF { background: #8a8a8a; } .adv-rank.rE { background: #6aa850; } .adv-rank.rD { background: #4f8fd0; }
.adv-rank.rC { background: #be8a3e; } .adv-rank.rB { background: #9a55c0; } .adv-rank.rA { background: #d04848; } .adv-rank.rS { background: #e8c040; color: #4a3200; } .adv-rank.rx { background: #444; }
.qtrack { list-style: none; margin: 4px 0 0; padding: 0; font-size: 11px; color: #E8F5D8; }
.qtrack:empty { display: none; }
.qtrack li::before { content: '◆ '; color: #FFD45A; }
.gp-book li:not(.on) canvas, .gp-book li:not(.on) .dp-art { filter: brightness(0) opacity(.45); }
.gp-book .dp-art { width: 64px; height: 64px; flex: none; object-fit: contain; }
.shop-list li.note { display: block; }
/* bang keo duoc bang thanh tieu de */
.sheet header.drag { cursor: move; user-select: none; touch-action: none; }
/* nhan rieng */
.dm-body { display: grid; grid-template-columns: 150px 1fr; gap: 10px; margin-top: 8px; min-height: 240px; }
.dm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; align-content: start; max-height: 320px; overflow-y: auto; }
.sheet .dm-list button { position: relative; width: 100%; text-align: left; padding: 5px 8px; background: transparent; border-color: var(--edge); color: var(--muted); }
.sheet .dm-list button.on { color: var(--ink); }
.sheet .dm-list button.cur { border-color: var(--gold); background: #3A2F1C; color: var(--gold); }
.dm-main { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; min-width: 0; }
.dm-log { list-style: none; margin: 0; padding: 6px; display: grid; align-content: end; gap: 3px; min-height: 180px; max-height: 300px; overflow-y: auto; border-radius: 6px; background: rgba(0, 0, 0, .25); font-size: 13px; overflow-wrap: anywhere; }
.dm-log b { color: #9FD0FF; }
.dm-log li.self b { color: var(--gold); }
.dm-log time { color: #8E8A98; font-size: 11px; }
.badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #E5484D; color: #fff; font: 700 10.5px/16px var(--f); font-style: normal; text-align: center; pointer-events: none; }
#b-dm b[aria-hidden] { font-size: 20px; }
@media (max-width: 560px) { .dm-body { grid-template-columns: 1fr; } .dm-list { grid-auto-flow: column; overflow-x: auto; } }

/* ---------------- bo cuc HUD (09/10/2026): goc trai duoi = thanh dung nhanh + thanh ky nang, chat ngay tren;
   giua duoi = cac nut bang; goc phai duoi = ban do nho (phong to duoc) ---------------- */
.actions.main { left: 10px; transform: none; justify-items: start; }
.actions.sysdock { left: 50%; transform: translateX(-50%); }
.minibox { position: absolute; right: 10px; bottom: 10px; pointer-events: auto; }
#mini { position: static; display: block; width: 260px; height: 200px; }
.mini-z { position: absolute; top: 5px; right: 5px; display: grid; gap: 3px; }
.mini-z button { width: 24px; height: 24px; padding: 0; border-radius: 5px; border: 1px solid var(--edge); background: rgba(14, 12, 20, .85); color: var(--ink); font: 700 15px/1 var(--f); cursor: pointer; }
.mini-z button:hover { border-color: var(--gold); color: var(--gold); }
.chatbox { left: 10px; bottom: 142px; }
.log { bottom: 222px; }
.dg-timer { top: 10px; }
.sysbar .sys-ico b[aria-hidden] { font-size: 20px; }
.chatbox li.bad { color: #F08A80; } .chatbox li.good { color: var(--good); } .chatbox li.gold { color: var(--gold); } .chatbox li.exp { color: var(--xp); }
.chat-tabs button.ch-s { margin-left: auto; }
@media (max-width: 1100px) { .actions.sysdock { left: auto; right: 10px; transform: none; bottom: 222px; } .log { bottom: 290px; } }
@media (max-width: 760px) {
  .chatbox { bottom: 118px; }
  #mini { width: 180px; height: 140px; }
  .actions.sysdock { bottom: 160px; }
  .log { bottom: 226px; }
}
@media (max-width: 640px) {
  .minibox { top: 10px; bottom: auto; }
  #mini { width: 112px; height: 94px; }
  .mini-z button { width: 20px; height: 20px; font-size: 13px; }
  .actions.sysdock { top: 112px; bottom: auto; }
  .actions.sysdock .sysbar { flex-direction: column; }
  .dg-timer { top: 10px; right: 130px; bottom: auto; }
  .log { bottom: 120px; }
  .chatbox { bottom: 118px; width: calc(100% - 80px); }
}
@media (max-width: 520px) { .chatbox { bottom: 110px; } }

.rank-cls { margin-top: 6px; }
.sheet .rank-cls button { padding: 3px 9px; font-size: 12px; }
.rank-list li b { display: grid; place-items: center; }
.rank-medal { width: 26px; height: 26px; image-rendering: pixelated; }
/* nut Language (i18n.js dung noi dung) trong menu Esc */
.menu-lang { position: relative; margin-left: auto; font: 600 13px var(--f); }
.lz-lang-btn { font: inherit; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(14, 12, 20, .82); color: var(--ink); cursor: pointer; }
.help-card .lz-lang-btn { padding: 6px 12px; border-radius: 999px; border-color: var(--edge); background: rgba(14, 12, 20, .82); }
.lz-lang-btn:hover, .lz-lang-btn[aria-expanded="true"] { border-color: var(--gold); }
.lz-lang-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; margin: 0; padding: 4px; list-style: none; min-width: 150px; border-radius: 10px; border: 1px solid var(--edge); background: rgba(14, 12, 20, .97); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.help-card .lz-lang-menu button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); }
.help-card .lz-lang-menu button:hover { background: rgba(255, 255, 255, .08); }
.help-card .lz-lang-menu button[aria-pressed="true"] { color: var(--gold); }
.keys-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* man dang nhap + chon nhan vat */
.accs-card { width: min(720px, calc(100% - 24px)); position: relative; }
.accs-lang { position: absolute; top: 26px; right: 30px; }
.accs-card label { display: grid; gap: 4px; color: var(--muted); font-size: 13px; }
.accs-card input { font: inherit; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid var(--edge); border-radius: 6px; padding: 8px 10px; }
.slots { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.help-card .slots button { width: 100%; min-height: 150px; display: grid; justify-items: center; align-content: center; gap: 3px; padding: 8px 4px; background: rgba(255, 255, 255, .04); border-color: var(--edge); }
.help-card .slots button.full:hover { border-color: var(--gold); background: #3A2F1C; }
.help-card .slots button.empty { border-style: dashed; color: var(--muted); }
.help-card .slots button.empty:hover { color: var(--gold); border-color: var(--gold); }
.slots canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.slots .nm { font-weight: 700; font-size: 13.5px; overflow-wrap: anywhere; }
.slots .sub { color: var(--muted); font-size: 11.5px; }
.slots b { font-size: 26px; line-height: 1; }
@media (max-width: 560px) { .slots { grid-template-columns: repeat(2, 1fr); } }
.keys-grid { gap: 2px 18px; }
.keys-grid .kr { padding: 1px 0; }
.help-card .keys-grid button { padding: 2px 8px; }
.keys-grid h3 { margin: 4px 0 0; }
.menu-card { gap: 8px !important; }

/* tui do gon: o co dinh, thong tin hien khi re chuot */
.sheet.inv { width: min(600px, calc(100% - 20px)); }   /* 14/10/2026: o tui nho lai (~52 px), nut chuyen xuong duoi o trang bi */
.sheet.inv .bag { grid-template-columns: repeat(6, 1fr); }             /* o tui gian het cot phai, khong con khoang trong */
.sheet.inv .bag .cell { width: 100%; height: auto; aspect-ratio: 1; }
.sheet.inv .bag .cell .ico { width: 36px !important; height: 36px !important; }
.inv-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 172px; margin: 12px auto 0; }
.sheet .inv-acts button { padding: 5px 4px; font-size: 12px; white-space: nowrap; }
.inv-acts #bag-act, .inv-acts #bag-share, .inv-acts #bag-lock { grid-column: span 2; }
.inv-acts #bag-toss.dim { opacity: .55; }
.inv-acts #bag-toss.drop { opacity: 1; border-color: #F08A80; background: rgba(240, 138, 128, .22); color: #FFD0C8; transform: scale(1.05); }
.sheet.inv .inv-hint { max-width: none; }                 /* 14/10/2026: rong co dinh, khong co gian theo chu tren nut */
.sheet.inv .bag-bar { flex-wrap: wrap; }
.sheet.inv .bag-bar .inv-money { flex: 1 0 100%; }                   /* tien + so o tui 1 dong rieng: so dai ngan khong day nut xuong dong */
.bag { grid-template-columns: repeat(6, 46px); }
.sheet .bag .cell { width: 46px; height: 46px; }
.bag .cell .ico { width: 32px !important; height: 32px !important; }
.inv-hint { margin: 8px 0 0; max-width: 301px; color: var(--muted); font-size: 11.5px; }
.itip { position: fixed; z-index: 2000; pointer-events: none; max-width: 240px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--edge); background: rgba(14, 12, 20, .97); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); font-size: 12px; display: grid; gap: 3px; }
.itip[hidden] { display: none; }
.itip b { font-size: 13.5px; }
.itip .meta { margin: 0; color: var(--muted); }
.itip .warn { margin: 0; color: #F08A80; }
.itip .lines { margin: 0; padding-left: 14px; }
.itip .lines .sub { color: #8BD17C; }
.itip .up { color: #8BD17C; }
.itip .down { color: #F08A80; }

/* man dang nhap / dang ky */
.accs-tabs { display: flex; gap: 6px; margin: 4px 0 10px; }
.accs-form { display: grid; gap: 8px; }
.accs-form[hidden] { display: none; }
.help-card .accs-tabs button[aria-pressed="true"] { background: #3A2F1C; border-color: var(--gold); color: var(--gold); }
.help-card .accs-tabs button[aria-pressed="false"] { background: transparent; border-color: var(--edge); color: var(--muted); }

/* vao Dungeon */
.sheet.dgp { width: min(760px, calc(100% - 20px)); }
.dgp-body { display: grid; grid-template-columns: 1fr 230px; gap: 14px; }
.dgp h3 { margin: 10px 0 4px; font-size: 13.5px; color: var(--muted); }
.dgp .tabs button { padding: 4px 10px; }
.dgp-gear { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 12.5px; }
.dgp-gear .ok { color: #8BD17C; }
.dgp-gear .warn { color: #F0B860; }
.dgp-mem, .dgp-cand { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.dgp-mem .empty { color: var(--muted); }
.dgp-cand { max-height: 150px; overflow: auto; }
.dgp-cand li { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dgp-lp { color: #E9C46A; font-size: 11px; }
.lfg-chk { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.lfg-chk input { width: auto; }
.dgp-cand button { padding: 2px 10px; font-size: 12px; }
.dgp .btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.dgp-rec { border-left: 1px solid var(--edge); padding-left: 12px; }
.dgp-rec h3 { margin-top: 0; color: var(--gold); }
#dgp-rec { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
#dgp-rec li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 6px; }
#dgp-rec li.note { display: block; }
#dgp-rec li span { overflow-wrap: anywhere; }
#dgp-rec .rk-medal { width: 20px; height: 20px; image-rendering: pixelated; grid-column: 1; }
#dgp-rec li:nth-child(n+4) span { grid-column: 2; }
.dgnear { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 15; padding: 8px 14px; display: grid; gap: 2px; text-align: center; pointer-events: none; }
.dgnear .note { margin: 0; }
#rc-gear { margin: 6px 0; }
@media (max-width: 640px) { .dgp-body { grid-template-columns: 1fr; } .dgp-rec { border-left: 0; padding-left: 0; } }
#gc-code { flex: 1; font: inherit; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid var(--edge); border-radius: 6px; padding: 7px 10px; text-transform: uppercase; }

/* xac minh email */
.vf-fix { margin-top: 10px; color: var(--muted); font-size: 13px; }
.vf-fix input { flex: 1; font: inherit; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid var(--edge); border-radius: 6px; padding: 7px 10px; }
#vf-code { letter-spacing: .4em; font-size: 20px; text-align: center; }
/* hop thu: nut nhap nhay khi co thu chua doc */
@keyframes mailGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 90, 0); filter: brightness(1); } 50% { box-shadow: 0 0 14px 4px rgba(255, 210, 90, .85); filter: brightness(1.4); } }
#b-mail.glow { animation: mailGlow 1.1s ease-in-out infinite; border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { #b-mail.glow { animation: none; box-shadow: 0 0 10px 3px rgba(255, 210, 90, .7); } }
.sheet.mailbox { width: min(760px, calc(100% - 20px)); }
.mail-body { display: grid; grid-template-columns: 240px 1fr; gap: 12px; min-height: 320px; }
.mail-list { list-style: none; margin: 0; padding: 0 8px 0 0; display: grid; gap: 4px; align-content: start; max-height: 60vh; overflow: auto; border-right: 1px solid var(--edge); }
.mail-list button { width: 100%; display: grid; gap: 2px; text-align: left; padding: 7px 9px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--muted); }
.mail-list button b { font-weight: 500; font-size: 13px; overflow-wrap: anywhere; }
.mail-list button span { font-size: 11px; }
.mail-list button.new { color: var(--ink); }
.mail-list button.new b { font-weight: 700; }
.mail-list button.new b::after { content: ' ●'; color: var(--gold); }
.mail-list button.sel { background: #3A2F1C; border-color: var(--gold); }
.mail-view { max-height: 60vh; overflow: auto; }
.mail-view h3 { margin: 0 0 2px; font-size: 16px; }
.mail-text { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; margin-top: 8px; }
.mail-code { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 10px; border: 1px dashed var(--gold); border-radius: 8px; }
.mail-code code { font-size: 16px; font-weight: 700; color: var(--gold); letter-spacing: .08em; }
.mailbox header #mail-clr { margin-left: auto; font-size: 12px; padding: 3px 9px; }
.mail-del { margin-top: 12px; font-size: 12px; padding: 3px 10px; }
@media (max-width: 640px) { .mail-body { grid-template-columns: 1fr; } .mail-list { border-right: 0; max-height: 30vh; } }

/* mo them 16/10/2026: Hoc Vien, Xuat Than, nha tro, dat o, cho */
.hv-cls { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.hv-cls button { padding: 4px 9px; font-size: 12.5px; }
.kho-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kho-cols .shop-list { max-height: 46vh; overflow: auto; }
.kho-tien { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); }
.kho-tien p { flex-basis: 100%; margin: 0; }
.kho-tien input { width: 110px; font: inherit; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid var(--edge); border-radius: 6px; padding: 5px 8px; }
.gp-body .acc-row input[type="number"] { width: 90px; font: inherit; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid var(--edge); border-radius: 6px; padding: 5px 8px; }
#nomdps { top: 64px; }
.shop-list li.noico { grid-template-columns: 1fr auto; }
/* tui do 10/10/2026: nut Trang bi, keo tha, chi so mo rong */
.stats .stat-more { grid-column: 1 / -1; justify-self: start; margin-top: 4px; padding: 2px 8px; font-size: 11.5px; }
.sheet .slot.drop { outline: 2px dashed var(--gold); outline-offset: 1px; background: #3A2F1C; }
#bag-act:not(:disabled) { border-color: var(--gold); color: var(--gold); }
/* the Mao Hiem Gia (mau 10/10/2026) */
.adv-card.click { cursor: pointer; } .adv-card.click:hover { border-color: var(--gold); }
.advc-pop { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); z-index: 30; pointer-events: auto; }
.advc-pop[hidden] { display: none; }
.advc { --rk: #8a8a8a; width: min(560px, calc(100vw - 32px)); padding: 10px 14px 10px; border-radius: 14px; color: #EDE6D6; font-size: 12.5px;
  background: linear-gradient(160deg, #4a4e5a 0%, #2c2f38 45%, #3a3d48 100%); border: 3px solid #9aa0ae;
  box-shadow: inset 0 0 0 2px #23252c, inset 0 0 0 4px #6b707c, 0 6px 22px rgba(0,0,0,.5), 0 0 18px rgba(255,236,170,.15); }
.advc.rE { --rk: #6aa850; } .advc.rD { --rk: #4f8fd0; } .advc.rC { --rk: #be8a3e; } .advc.rB { --rk: #9a55c0; } .advc.rA { --rk: #d04848; } .advc.rS { --rk: #e8c040; }
.advc-h { text-align: center; font-weight: 800; font-size: 20px; letter-spacing: .14em; color: #FFD45A; text-shadow: 0 2px 0 #7a4a10, 0 0 8px rgba(255,212,90,.35);
  margin: 0 auto 8px; padding: 2px 18px; width: fit-content; border-radius: 6px; background: linear-gradient(#2a2c34, #1d1f25); border: 2px solid #8d93a1; }
.advc-b { display: grid; grid-template-columns: 96px 1fr 168px; gap: 10px; align-items: start; }
.advc-face { width: 96px; height: 112px; border-radius: 6px; border: 3px solid #b8bdc8; background: linear-gradient(#9ec6e6, #5e8fb8 70%, #4a6f90); display: grid; place-items: end center; overflow: hidden; }
.advc-face canvas { image-rendering: pixelated; }
.advc-info { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.advc-info li { display: flex; gap: 6px; align-items: baseline; }
.advc-info li::before { content: '+'; color: #FFD45A; font-weight: 700; }
.advc-info i { font-style: normal; color: #b9bcc6; min-width: 64px; }
.advc-info b { color: #fff; }
.advc-info .adv-rank { height: auto; padding: 1px 8px; font-size: 12px; background: transparent; color: #FFD45A; border: 2px solid #FFD45A; box-shadow: 0 0 6px rgba(255,212,90,.4); }
.advc-st { display: grid; gap: 4px; padding: 6px; border-radius: 6px; background: rgba(0,0,0,.28); border: 1px solid #5a5f6b; }
.advc-bar { display: flex; justify-content: space-between; font-weight: 700; padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.08); }
.advc-bar.hp i { color: #FF6B6B; font-style: normal; } .advc-bar.mp i { color: #6FA8FF; font-style: normal; } .advc-bar.tl i { color: #9EE493; font-style: normal; }
.advc-st dl { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; margin: 0; }
.advc-st dt { color: #b9bcc6; font-size: 11.5px; } .advc-st dd { margin: 0; text-align: right; font-weight: 700; }
.advc-sk { display: grid; gap: 3px; justify-items: center; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.1); }
.advc-sk span { font-size: 10px; letter-spacing: .14em; color: #FFD45A; }
.advc-sk div { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.advc-sk canvas { width: 27px; height: 27px; image-rendering: pixelated; border: 2px solid #b48a3c; border-radius: 4px; background: #1d1f25; }
.advc-f { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); }
.advc-bc { height: 22px; background: #1b1d22; border-radius: 2px; }
.advc-id { font-family: ui-monospace, monospace; letter-spacing: .1em; color: #d8dae0; }
.advc-pts { margin-left: auto; color: var(--rk); font-weight: 700; font-size: 11.5px; }
@media (max-width: 560px) { .advc-b { grid-template-columns: 84px 1fr; } .advc-st { grid-column: 1 / -1; } .advc-face { width: 84px; } }

/* tao nhan vat (mau 10/10/2026): 2 cot, khung go-kim loai, cay ky nang */
.create-card.cc { width: min(900px, calc(100% - 24px)); background: linear-gradient(#2b2230, #201a26); border: 3px solid #8a6a3a; box-shadow: inset 0 0 0 2px #3c2e1e, 0 10px 30px rgba(0,0,0,.55); }
.cc-title { margin: -4px auto 4px; width: fit-content; padding: 6px 26px; font-weight: 800; font-size: 22px; letter-spacing: .12em; color: #FFE7A0; text-shadow: 0 2px 0 #6a2a10;
  background: linear-gradient(#a8352a, #7a2018); border: 3px solid #d4a24a; border-radius: 8px; box-shadow: 0 3px 0 #4a1a10; }
.cc-title span { color: #FFD45A; font-size: 18px; margin: 0 6px; }
.cc h3 { margin: 8px 0 5px; font-size: 13px; letter-spacing: .06em; color: #FFD45A; text-transform: uppercase; }
.cc h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-left: 6px; }
.cc-main { display: grid; grid-template-columns: 230px 1fr; gap: 14px; }
.cc-left, .cc-right { padding: 8px 12px 10px; border-radius: 8px; background: rgba(0,0,0,.22); border: 2px solid #5a4630; }
.cc-stage { position: relative; display: grid; place-items: center; height: 200px; border-radius: 8px; border: 2px solid #8a93a6;
  background: radial-gradient(ellipse 60% 14% at 50% 86%, #5a6274 0 60%, #3a4050 61% 100%) , linear-gradient(#a9b9cc, #6e7f98 70%, #4b566a); overflow: hidden; }
.cc-stage::after { content: ''; position: absolute; left: 50%; bottom: 14px; width: 120px; height: 22px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(#7b8496, #4a5060); box-shadow: 0 4px 0 #2e323c; }
.cc #cr-prev { position: relative; z-index: 1; width: 120px; height: 140px; margin-bottom: 16px; border: 0; background: none; }
.cc-arr { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; padding: 2px 8px !important; font-size: 18px; color: #FFD45A; background: rgba(40,30,20,.7) !important; border: 2px solid #d4a24a !important; border-radius: 6px; }
.cc-arr.l { left: 6px; } .cc-arr.r { right: 6px; }
.cc-2 { display: grid; grid-template-columns: auto 1fr; gap: 14px; }
.cc-name { display: flex; gap: 6px; } .cc-name input { flex: 1; font-size: 14px; font-weight: 700; } .cc-name button { padding: 4px 10px; font-size: 16px; }
.cc .classes { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.cc-info { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: rgba(0,0,0,.3); border: 1px solid #5a4630; }
.cc-info p { margin: 2px 0; }
.cc-tree { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(0,0,0,.25); border: 2px solid #5a4630; }
.cc-tree-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.cc-tree-h > b { color: #FFD45A; font-size: 14px; }
.cc-tree-row { display: grid; grid-template-columns: 1fr auto 1fr 1fr; gap: 10px; align-items: start; }
.cc-arrow { align-self: center; color: #d4a24a; font-size: 22px; }
.cc-col { display: grid; gap: 4px; }
.cc-col h4 { margin: 0 0 2px; font-size: 12px; color: #e8dcc4; }
.help-card .cc-node { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 6px; padding: 3px 6px; text-align: left; background: rgba(255,255,255,.04); border-color: var(--edge); font-size: 12px; }
.cc-node canvas { width: 32px; height: 32px; image-rendering: pixelated; border: 1px solid #8a6a3a; border-radius: 4px; background: #1d1f25; }
.cc-node span { display: grid; line-height: 1.2; } .cc-node i { font-style: normal; color: var(--muted); font-size: 10.5px; }
.cc-node.pas { border-style: dashed; }
.cc-det { margin: 8px 0 0; font-size: 12.5px; color: var(--ink); min-height: 2.6em; }
.el-tag { display: inline-block; padding: 0 6px; margin: 0 2px; border: 1px solid; border-radius: 10px; font-size: 10.5px; font-weight: 700; line-height: 1.5; background: rgba(0,0,0,.3); white-space: nowrap; }
.el-line { margin: 0; font-size: 12px; color: var(--muted); }
.cc-btns { display: flex; justify-content: space-between; margin-top: 12px; }
.cc-btns .cc-ok { margin-left: auto; padding: 10px 26px; font-size: 16px; font-weight: 800; letter-spacing: .06em; color: #FFF6D0; background: linear-gradient(#4f9a3a, #2f6a24); border: 3px solid #d4a24a; border-radius: 8px; box-shadow: 0 3px 0 #1d4016; }
.cc-btns .cc-back { padding: 10px 22px; font-size: 15px; font-weight: 700; color: #FFE7D0; background: linear-gradient(#a8352a, #7a2018); border: 3px solid #d4a24a; border-radius: 8px; box-shadow: 0 3px 0 #4a1a10; }
@media (max-width: 720px) { .cc-main { grid-template-columns: 1fr; } .cc-tree-row { grid-template-columns: 1fr; } .cc-arrow { transform: rotate(90deg); justify-self: center; } .cc-2 { grid-template-columns: 1fr; } }

/* bang tim doi lien phe (10/10/2026) */
.sheet.lfg { width: min(860px, calc(100% - 20px)); }
.lfg-body { display: grid; grid-template-columns: 1fr 280px; gap: 12px; align-items: start; }
.lfg-list { max-height: 56vh; overflow: auto; }
.shop-list li.lfg-row { display: grid; grid-template-columns: 1fr; gap: 5px; }
.lfg-row.on { border-color: var(--gold) !important; }
.lfg-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.lfg-dg { color: var(--gold); font-size: 11.5px; white-space: nowrap; }
.lfg-m { display: flex; flex-wrap: wrap; gap: 4px; }
.lfg-m span { font-size: 11px; padding: 1px 7px; border: 1px solid var(--edge); border-radius: 10px; background: rgba(255,255,255,.04); }
.lfg-m span.empty { opacity: .45; border-style: dashed; }
.lfg-f { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; }
.lfg-f .ok { color: #9EE493; } .lfg-f .bad { color: #F0A090; }
.lfg-form { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--edge); border-radius: 8px; background: rgba(255,255,255,.03); }
.lfg-form h3 { margin: 0; font-size: 14px; }
.lfg-form label, .lfg-lbl { display: grid; gap: 3px; color: var(--muted); font-size: 12px; }
.lfg-lbl small { font-size: 10.5px; }
.lfg-form input, .lfg-form select { font: inherit; color: var(--ink); background: #2a2430; border: 1px solid var(--edge); border-radius: 6px; padding: 5px 8px; min-width: 0; }
.lfg-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lfg-cls { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.lfg-cls button { padding: 2px 8px; font-size: 11.5px; border-color: var(--edge); color: var(--muted); background: transparent; }
.lfg-cls button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: #3A2F1C; }
.lfg-btns { display: flex; gap: 6px; }
@media (max-width: 680px) { .lfg-body { grid-template-columns: 1fr; } }

/* di tich Ngon Hai Dang Co (10/10/2026) */
.hd-steps { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.hd-steps li { padding: 5px 8px; border: 1px solid var(--edge); border-radius: 6px; background: rgba(255,255,255,.03); }
.hd-steps li.ok { border-color: rgba(158,228,147,.5); color: #CFF5C4; }
.note.ok { color: #9EE493 !important; }
.hd-page { margin: 0 0 8px; padding: 8px 10px; border-left: 3px solid #d4a24a; background: rgba(214,170,80,.08); font-size: 13px; line-height: 1.5; font-style: italic; }
.cc-btns { position: sticky; bottom: -18px; z-index: 3; margin: 12px -4px 0; padding: 10px 4px; background: linear-gradient(transparent, #201a26 30%); }   /* nut Tao nhan vat luon thay, khong phai keo xuong */

/* cay ky nang co diem (10/10/2026) */
.skills { width: min(900px, calc(100% - 20px)); }
.sk-top { display: flex; align-items: center; gap: 8px; }
.sk-sp { font-weight: 800; color: var(--muted); padding: 3px 10px; border: 1px solid var(--edge); border-radius: 8px; background: rgba(0,0,0,.25); }
.sk-sp.has { color: #FFD45A; border-color: #d4a24a; box-shadow: 0 0 8px rgba(255,212,90,.25); }
.sk-main { display: grid; grid-template-columns: 1fr 260px; gap: 10px; align-items: start; }
.sk-tree { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding: 10px; border: 1px solid var(--edge); border-radius: 10px; background: rgba(0,0,0,.22); }
.sk-col { display: grid; gap: 14px; align-content: start; padding: 6px; border-radius: 8px; }
.sk-col.cur { background: rgba(214,170,80,.08); outline: 1px solid rgba(214,170,80,.35); }
.sk-col h4 { margin: 0; font-size: 12.5px; color: #e8dcc4; }
.sheet .sk-node { position: relative; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 6px; padding: 4px 6px; text-align: left; border: 2px solid var(--edge); border-radius: 8px; background: #15121C; font-size: 12px; }
.sk-node canvas { width: 40px; height: 40px; image-rendering: pixelated; border-radius: 6px; }
.sk-node span { display: grid; line-height: 1.2; min-width: 0; } .sk-node i { font-style: normal; color: var(--muted); font-size: 11px; }
.sk-col .sk-node + .sk-node::before { content: ''; position: absolute; left: 24px; top: -16px; width: 3px; height: 14px; background: #5a4a36; }
.sk-col .sk-node.on + .sk-node::before, .sk-col .sk-node.on + .sk-node.on::before { background: #FFD45A; box-shadow: 0 0 6px rgba(255,212,90,.6); }
.sheet .sk-node.on { border-color: #d4a24a; }
.sheet .sk-node.on i { color: #FFD45A; }
.sheet .sk-node.can { border-color: #6fcf6f; box-shadow: 0 0 8px rgba(111,207,111,.35); }
.sheet .sk-node.lock canvas { opacity: .35; filter: grayscale(1); }
.sheet .sk-node.sel { outline: 2px solid #fff; outline-offset: 1px; }
.sk-node .sk-lock { position: absolute; right: 4px; bottom: 2px; font-style: normal; font-size: 11px; }
.sk-pick { padding: 4px 8px; font-size: 12px; }
.sk-detail h4 { margin: 0 0 4px; color: #FFD45A; font-size: 14px; }
.sk-detail p { margin: 0 0 5px; }
.sk-eff { color: #9EE493; } .sk-req { color: var(--muted); font-size: 12px; } .sk-req.bad { color: #F0A090; }
@media (max-width: 720px) { .sk-main { grid-template-columns: 1fr; } }
/* diem chi so */
.sheet.pts { width: min(560px, calc(100% - 20px)); display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.sheet.pts > * { flex: none; }
.pts-top { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--edge); border-radius: 10px; background: linear-gradient(135deg, rgba(255,212,90,.08), rgba(255,255,255,.02)); }
.pts-ring { --p: 0; flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-content: center; text-align: center; position: relative;
  background: conic-gradient(#FFD45A calc(var(--p) * 1turn), rgba(255,255,255,.08) 0); }
.pts-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #1A1624; }
.pts-ring b, .pts-ring small { position: relative; } .pts-ring b { font-size: 19px; line-height: 1; color: #FFD45A; } .pts-ring small { font-size: 9px; color: var(--muted); white-space: nowrap; }
.pts-ring.zero b { color: var(--muted); }
.pts-meta { flex: 1; display: grid; gap: 5px; min-width: 0; } .pts-meta p { margin: 0; } .pts-meta .note { font-size: 11.5px; }
#pts-left { font-weight: 800; }
.pts-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; display: flex; }
.pts-bar i { display: block; height: 100%; background: linear-gradient(90deg, #d4a24a, #FFD45A); transition: width .15s; }
.sheet.pts .pts-list { list-style: none; margin: 0; padding: 0 2px 0 0; display: grid; gap: 5px; flex: 0 1 auto; min-height: 0; overflow-y: auto; align-content: start; }
.pts-list li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 5px 10px; border: 1px solid var(--edge); border-radius: 10px; background: rgba(255,255,255,.03); border-left: 3px solid var(--c); }
.pts-list li.chg { background: rgba(255,212,90,.06); }
.pts-list li.vo { opacity: .6; }
.pts-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; background: color-mix(in srgb, var(--c) 22%, transparent); }
.pts-inf { display: grid; gap: 1px; min-width: 0; } .pts-inf b { font-size: 14px; } .pts-inf .note { font-size: 11.5px; }
.pts-inf .note { line-height: 1.3; } .pts-inf .tot { color: #9EE493; } .pts-inf .warn { font-size: 11.5px; color: #F0A35E; }
.pts-ctl { display: flex; align-items: center; gap: 4px; }
.pts-ctl button { width: 30px; height: 28px; padding: 0; font-size: 16px; font-weight: 800; }
.pts-ctl .n { min-width: 42px; text-align: center; font-weight: 800; font-size: 17px; line-height: 1.1; }
.pts-ctl .n small { display: block; font-size: 10.5px; font-weight: 700; color: #FFD45A; } .pts-ctl .n small.neg { color: #F08A80; }
.pts-prev { border: 1px solid var(--edge); border-radius: 10px; padding: 8px 10px; background: rgba(0,0,0,.18); }
.pts-prev h3 { margin: 0 0 6px; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.pts-diff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; font-size: 12.5px; }
.pts-diff span { display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; } .pts-diff span i { font-style: normal; color: var(--muted); }
.pts-diff span.up b { color: #9EE493; } .pts-diff span.dn b { color: #F08A80; }
.pts-btns { display: flex; align-items: center; gap: 8px; }
.pts-dirty { flex: 1; text-align: right; font-size: 12px; color: #FFD45A; }
@media (max-width: 520px) { .pts-diff { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pts-list li { grid-template-columns: 30px 1fr; } .pts-ctl { grid-column: 1 / -1; justify-content: flex-end; } }
.stats .stat-pt { grid-column: 1 / -1; justify-self: start; margin-top: 6px; padding: 3px 10px; font-size: 12px; border-color: #d4a24a; color: #FFD45A; }
.sys-ico .badge { position: absolute; top: -4px; right: -4px; min-width: 16px; padding: 0 4px; border-radius: 8px; background: #d04848; color: #fff; font-size: 10px; font-style: normal; font-weight: 800; line-height: 16px; text-align: center; }
/* so tay tham hiem */
.sheet.tham { width: min(720px, calc(100% - 20px)); }
.tham-body { max-height: 60vh; overflow: auto; }
.tham-body h3 { margin: 8px 0 4px; font-size: 13px; color: var(--gold); }
.tham-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.tham-list li { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid var(--edge); border-radius: 8px; background: rgba(255,255,255,.03); font-size: 12.5px; }
.tham-list li.unk { opacity: .5; border-style: dashed; }
.tham-list li p { margin: 0; }

.gp-grid button.off { opacity: .38; filter: grayscale(.85); cursor: help; }

/* 11/10/2026: ky nang 1/1 va 5/5, bang cap, keo tha xuong thanh duoi, nhanh chua mo / nhanh an / toi thuong */
.hud .sk.over, button.sk.over { outline: 2px dashed var(--gold); outline-offset: 2px; }
.sk-node.pas canvas { border-radius: 50%; }
.sk-lvtab { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.sk-lvtab th { text-align: left; white-space: nowrap; padding: 3px 8px 3px 0; color: var(--muted); font-weight: 600; vertical-align: top; }
.sk-lvtab td { padding: 3px 0; }
.sk-lvtab tr.on th, .sk-lvtab tr.on td { color: var(--gold); }
.sk-lvtab tr.next td { color: #9EE493; }
.sk-br.lock { opacity: .85; border-style: dashed; }

/* ---- 12/10/2026: chia se do, thong bao danh pham, Xuong Nghe gon (keo tha vao o), cho dang the ---- */
.item-link { all: unset; cursor: pointer; font-weight: 600; text-decoration: underline dotted; }
.item-link:hover { filter: brightness(1.25); }
.shr-tip { pointer-events: auto; border-color: var(--gold); }
#chat-log li.ann { color: #FFE9A8; }
/* hop thong bao giua man hinh: chi #ann (dong chat li.ann khong duoc an kieu nay) */
#ann { position: fixed; top: 18%; left: 50%; transform: translateX(-50%); z-index: 80; padding: 10px 18px; border-radius: 10px; background: rgba(14, 12, 20, .92); border: 1px solid rgba(255, 212, 90, .6); font-weight: 700; font-size: 15px; text-align: center; max-width: min(90vw, 620px); text-shadow: 0 0 6px rgba(0, 0, 0, .8); pointer-events: none; }
#ann[hidden] { display: none; }
#ann.show { animation: annIn 10s ease forwards; }
@keyframes annIn { 0% { opacity: 0; transform: translate(-50%, -8px); } 5%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.cell .lkb { position: absolute; left: 1px; top: 0; font-size: 10px; }
.bag-bar { flex-wrap: wrap; }
/* Xuong Nghe: 2 cot, khong phai cuon */
.fg-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.fg-left, .fg-right { display: grid; gap: 8px; align-content: start; }
.fg-right { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); border-radius: 8px; padding: 8px; }
.fg-right h4, .fg-left h4 { margin: 0; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.fg-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.fg-top select { padding: 3px 6px; }
.fg-khuon { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px; border-radius: 8px; border: 1px solid rgba(240, 138, 128, .45); background: rgba(240, 138, 128, .06); font-size: 12.5px; }
.fg-khuon.ok { border-color: rgba(158, 228, 147, .45); background: rgba(158, 228, 147, .06); }
.fg-khuon b { font-size: 13px; }
.fg-khuon span { flex: 1 1 160px; }
.fg-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fg-slot { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 86px; padding: 6px; border-radius: 10px; border: 2px dashed rgba(255, 233, 168, .35); background: rgba(255, 255, 255, .03); font-size: 11.5px; text-align: center; cursor: pointer; }
.fg-slot.full { border-style: solid; border-color: rgba(255, 212, 90, .7); background: rgba(255, 212, 90, .07); }
.fg-slot.over { border-color: #FFD45A; background: rgba(255, 212, 90, .15); }
.fg-slot.big { min-height: 120px; }
.fg-slot .note { opacity: .7; }
.fg-known { display: flex; flex-wrap: wrap; gap: 4px; }
.fg-known button { padding: 2px 8px; font-size: 12px; }
.fg-go { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fg-go > button:first-child { padding: 6px 22px; font-weight: 700; }
.fg-right .gp-grid { margin: 0; max-height: 300px; overflow-y: auto; }
.gp-grid button .lkb { position: absolute; left: 1px; top: 0; font-size: 9px; }
.gp-book .tho { font-style: italic; color: #E9D9A6; white-space: pre-line; }
/* Cho Cang: luoi the, re chuot xem chi so */
.cho-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.cho-bar button { padding: 3px 10px; font-size: 12px; }
.cho-bar button[aria-pressed="true"] { background: var(--gold); color: #1a1408; border-color: var(--gold); }
.cho-bar input { flex: 1 1 140px; padding: 3px 8px; }
.cho-sell { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 12px; align-items: start; }
.cho-form { display: grid; gap: 6px; padding: 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; }
.cho-form label { display: grid; gap: 2px; }
@media (max-width: 720px) { .fg-wrap, .cho-sell { grid-template-columns: 1fr; } }
/* ---- 13/10/2026: moi o nhap / o chon theo kieu toi cua game (khong con hop trang chu den). :where() = do uu tien 0, kieu rieng cua tung khung van thang ---- */
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea) { font: inherit; color: var(--ink); background: #2a2430; border: 1px solid var(--edge); border-radius: 6px; padding: 4px 8px; color-scheme: dark; }
:where(input, select, textarea):focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
:where(input, textarea)::placeholder { color: var(--muted); }
:where(select) option, :where(select) optgroup { background: #2a2430; color: var(--ink); }
/* hieu ung pham cap cao: bat theo mau dat truc tiep (style="color: ..." / "border-color: ...") nen moi cho to mau pham cap deu co
   Truyen Thuyet (do #FF4D4D): vien sang do nhip cham. Than Thoai (cam #FF8C1A): chu lua chay mau, vien rực + vet sang quet ngang */
[style*="border-color: rgb(255, 77, 77)"] { animation: legGlow 2.4s ease-in-out infinite; }
@keyframes legGlow { 0%, 100% { box-shadow: 0 0 2px rgba(255, 77, 77, .5); } 50% { box-shadow: 0 0 7px rgba(255, 77, 77, .85); } }
[style^="color: rgb(255, 77, 77)"]:not(#ann) { text-shadow: 0 0 6px rgba(255, 60, 60, .55); }
[style*="border-color: rgb(255, 140, 26)"] { background-image: linear-gradient(115deg, transparent 35%, rgba(255, 226, 140, .38) 50%, transparent 65%); background-size: 260% 100%; background-repeat: no-repeat; animation: mythSweep 2.2s linear infinite, mythBox 1.6s ease-in-out infinite; }
@keyframes mythSweep { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
@keyframes mythBox { 0%, 100% { box-shadow: 0 0 3px rgba(255, 140, 26, .7), inset 0 0 3px rgba(255, 190, 80, .4); } 50% { box-shadow: 0 0 10px rgba(255, 170, 60, 1), 0 0 18px rgba(255, 90, 20, .45), inset 0 0 6px rgba(255, 210, 120, .6); } }
[style^="color: rgb(255, 140, 26)"]:not(#ann) { background: linear-gradient(90deg, #FF8C1A, #FFE27A, #FF5A1F, #FFB347, #FF8C1A); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: mythText 3s linear infinite; filter: drop-shadow(0 0 3px rgba(255, 140, 26, .7)); }
@keyframes mythText { 0% { background-position: 0 0; } 100% { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { [style*="rgb(255, 140, 26)"], [style*="border-color: rgb(255, 77, 77)"] { animation: none; } }
/* hop thong bao ren danh pham: vien + quang sang theo pham cap (Anh Hung vang, Su Thi tim, Truyen Thuyet do, Than Thoai cam rực) */
#ann[style*="255, 213, 74"] { border-color: #FFD54A; box-shadow: 0 0 12px rgba(255, 213, 74, .45); }
#ann[style*="192, 123, 255"] { border-color: #C07BFF; box-shadow: 0 0 14px rgba(192, 123, 255, .55); }
#ann[style*="255, 77, 77"] { border-color: #FF4D4D; box-shadow: 0 0 16px rgba(255, 77, 77, .6); text-shadow: 0 0 8px rgba(255, 60, 60, .7); }
#ann[style*="255, 140, 26"] { border: 2px solid #FF8C1A; font-size: 17px; text-shadow: 0 0 6px #FF8C1A, 0 0 14px rgba(255, 90, 20, .8); box-shadow: 0 0 22px rgba(255, 140, 26, .7), inset 0 0 14px rgba(255, 160, 60, .35);
  background-image: linear-gradient(115deg, transparent 35%, rgba(255, 226, 140, .22) 50%, transparent 65%); background-size: 260% 100%; background-repeat: no-repeat; animation: annIn 10s ease forwards, mythSweep 2.2s linear infinite; }

/* hat roi theo mua: lop phu toan man hinh, khong chan chuot */
.weather { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.weather i { position: absolute; top: -24px; font-style: normal; opacity: .85; animation-name: wxFall, wxSway; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite; animation-direction: normal, alternate; }
.weather[data-m="dong"] i { color: #fff; text-shadow: 0 0 4px rgba(180, 220, 255, .9); }
@keyframes wxFall { to { top: calc(100% + 24px); rotate: 300deg; } }
@keyframes wxSway { from { translate: -18px 0; } to { translate: 18px 0; } }
@media (prefers-reduced-motion: reduce) { .weather { display: none; } .mua-sky .sun { animation: none; } }
/* 14/10/2026 (ve lai theo mau): khung mua & ngay / dem, goc phai tren. Kich thuoc co dinh, o canh 66 x 64 ben trai, 2 dong chu ben phai */
.mua { position: absolute; top: 8px; right: 10px; display: flex; align-items: center; gap: 6px; width: 244px; height: 64px; padding: 0 12px 0 4px; box-sizing: border-box;
  background: linear-gradient(#17161F, #101018); border: 2px solid #8A6A3A; border-radius: 6px; box-shadow: inset 0 0 0 1px #2A2216, 0 2px 8px rgba(0, 0, 0, .5);
  font-size: 12px; pointer-events: auto; cursor: help; z-index: 3; }
.mua::before, .mua::after { content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4.5px; background: #2A2216; border: 1px solid #C89A52; transform: rotate(45deg); }
.mua::before { left: -5px; } .mua::after { right: -5px; }
.mua-txt { display: grid; gap: 3px; padding-left: 8px; border-left: 1px solid rgba(200, 154, 82, .35); white-space: nowrap; }
.mua-txt p { margin: 0; display: flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.mua-txt b { font-size: 13.5px; font-weight: 700; }
.mua-txt span { color: #CFC8BC; }
#mua-ten { color: #F4A9CF; }
#mua-dn { color: #FFD77A; padding-left: 18px; }
.mua.dem #mua-dn { color: #B9B6FF; }
.mua-ico { width: 16px; height: 16px; margin-right: 2px; background: url('img/mua_ico.png') 0 0 / 64px 16px no-repeat; image-rendering: pixelated; flex: none; }
.mua.bad { border-color: #F08A80; }
.mua.bad #mua-dn::after { content: ' ⚠'; color: #F08A80; font-size: 12px; }   /* thoi tiet khac nghiet: chi dau canh bao, chi tiet o tooltip */
.mua-txt { overflow: hidden; }
/* o canh */
.mua-sky { position: relative; width: 66px; height: 64px; flex: none; }
.ms-in { position: absolute; left: 8px; top: 6px; width: 50px; height: 50px; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); isolation: isolate; }
.ms-l, .ms-stars, .ms-fg, .ms-px { position: absolute; inset: 0; }
.ms-l.day { background: linear-gradient(#4E9BE6 0%, #9CD0F5 55%, #FFF0C2 100%); }
.ms-l.dawn { background: linear-gradient(#5B6FC0 0%, #E9A0C6 55%, #FFC98C 100%); }
.ms-l.dusk { background: linear-gradient(#3A2E72 0%, #B5579A 50%, #F39A4E 100%); }
.ms-l.night { background: linear-gradient(#0B1233 0%, #1C2A66 70%, #2D3C80 100%); }
.ms-stars { background: radial-gradient(1px 1px at 12px 9px, #fff 99%, transparent), radial-gradient(1px 1px at 31px 6px, #fff 99%, transparent), radial-gradient(1px 1px at 40px 17px, #dfe8ff 99%, transparent),
  radial-gradient(1px 1px at 20px 20px, #fff 99%, transparent), radial-gradient(1px 1px at 6px 24px, #cfdcff 99%, transparent), radial-gradient(1px 1px at 44px 28px, #fff 99%, transparent); animation: msTw 3s ease-in-out infinite alternate; }
.ms-body { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.ms-body.sun { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: radial-gradient(circle, #FFF8D8 0 35%, #FFD45A 60%, #FFB03A 100%); box-shadow: 0 0 6px 2px rgba(255, 200, 80, .75), 0 0 14px 5px rgba(255, 170, 60, .35); }
.ms-body.moon { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: transparent; box-shadow: inset -3px -1px 0 0 #FFF1C2, 0 0 6px 1px rgba(220, 230, 255, .35); transform-origin: center; }
.ms-fg { width: 100%; height: 100%; z-index: 2; }
.ms-fg, .ms-px, .ms-orn { opacity: 0; }
.mua-sky.ready .ms-fg, .mua-sky.ready .ms-px, .mua-sky.ready .ms-orn { transition: opacity 4s ease; }
.ms-fg.on, .ms-px.on, .ms-orn.on { opacity: 1; }
.ms-px { z-index: 3; }
.ms-px i { position: absolute; top: -4px; width: 2px; height: 2px; animation: msFall 6s linear infinite; }
.ms-px i:nth-child(1) { left: 8px; animation-delay: -1s; } .ms-px i:nth-child(2) { left: 18px; animation-delay: -3.4s; animation-duration: 7s; }
.ms-px i:nth-child(3) { left: 28px; animation-delay: -5s; } .ms-px i:nth-child(4) { left: 37px; animation-delay: -2.2s; animation-duration: 8s; } .ms-px i:nth-child(5) { left: 45px; animation-delay: -4.4s; }
.ms-px[data-m="xuan"] i { background: #F7A6C8; }
.ms-px[data-m="thu"] i { background: #E9792E; width: 3px; }
.ms-px[data-m="dong"] i { background: #fff; border-radius: 50%; }
.ms-px[data-m="ha"] i { top: auto; bottom: 14px; background: #FFF3A0; border-radius: 50%; animation: msGlint 2.4s ease-in-out infinite; }   /* mua Ha: anh nang lung linh, khong roi */
.ms-arc { position: absolute; left: 4px; top: 2px; width: 58px; height: 58px; box-sizing: border-box; border-radius: 50%; border: 1px dashed #E8C068; clip-path: inset(0 0 52% 0); opacity: .8; }
.mua-sky.dem .ms-arc { border-color: #9FB4F0; }
.ms-dot { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #FFE08A; box-shadow: 0 0 5px 1px rgba(255, 200, 90, .9); will-change: transform; }
.mua-sky.dem .ms-dot { background: #E8EEFF; box-shadow: 0 0 5px 1px rgba(190, 210, 255, .9); }
.ms-orn { position: absolute; left: -1.3px; top: -3.3px; width: 68.7px; height: 68.7px; pointer-events: none; z-index: 4; background: url('img/mua_canh.png') 0 0 / 274.6px 68.7px no-repeat; }
.ms-orn[data-m="ha"] { background-position: -68.65px 0; } .ms-orn[data-m="thu"] { background-position: -137.3px 0; } .ms-orn[data-m="dong"] { background-position: -205.95px 0; }
.mua-sky.dark .ms-in { filter: brightness(.45) saturate(.6); }
@keyframes msTw { from { opacity: .55; } to { opacity: 1; } }
@keyframes msFall { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(3px, 28px) rotate(90deg); } 100% { transform: translate(-2px, 58px) rotate(180deg); } }
@keyframes msGlint { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .ms-px i, .ms-stars { animation: none; } .ms-px i { opacity: .7; } .mua-sky.ready .ms-fg, .mua-sky.ready .ms-px, .mua-sky.ready .ms-orn { transition: none; } }
@media (max-width: 640px) { .mua { transform: scale(.82); transform-origin: top right; } }
.dg-timer { top: 82px; }

/* 14/10/2026: bang Ren moi (o ren keo tha, o bua, Nang cap / Kham da) va hieu ung +11 +12 */
.rn { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rn-tabs { display: flex; gap: 4px; }
.sheet .rn-tabs button[aria-pressed="true"] { background: #3A2F1C; border-color: var(--gold); color: var(--gold); }
.sheet .rn-tabs button[aria-pressed="false"] { background: transparent; border-color: var(--edge); color: var(--muted); }
.rn-top { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.sheet .rn-slot { width: 76px; height: 76px; padding: 0; display: grid; place-items: center; border-radius: 10px; border: 2px dashed var(--edge); background: #15121C; color: var(--muted); font-size: 10.5px; line-height: 1.25; }
.sheet .rn-slot.drop { border-color: var(--gold); background: #3A2F1C; }
.rn-slot.ok { animation: rnOk .7s ease-out; }
.rn-slot.big { animation: rnBig 1.6s ease-out; }
.rn-slot.fail { animation: rnFail .45s ease-in-out; }
@keyframes rnOk { 0% { box-shadow: 0 0 0 rgba(255, 212, 90, 0); } 40% { box-shadow: 0 0 22px rgba(255, 212, 90, .95); } 100% { box-shadow: 0 0 0 rgba(255, 212, 90, 0); } }
@keyframes rnBig { 0% { box-shadow: 0 0 0 rgba(255, 140, 26, 0); transform: scale(1); } 25% { box-shadow: 0 0 34px 8px rgba(255, 140, 26, 1); transform: scale(1.12); } 60% { box-shadow: 0 0 26px 4px rgba(255, 77, 77, .9); } 100% { box-shadow: 0 0 0 rgba(255, 77, 77, 0); transform: scale(1); } }
@keyframes rnFail { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.rn-info { display: grid; gap: 5px; min-width: 0; }
.rn-info .pips { display: flex; gap: 3px; }
.rn-info .pips i { display: block; width: 11px; height: 11px; border-radius: 2px; background: rgba(255, 255, 255, .1); }
.rn-info .pips i.hi { border-radius: 50%; }
.rn-info .pips i.on { background: var(--gold); box-shadow: 0 0 4px rgba(255, 212, 90, .6); }
.rn-info .pips i.hi.on { background: #FF6A3D; box-shadow: 0 0 6px rgba(255, 106, 61, .9); }
.rn-info .pips i.next { outline: 1px dashed var(--gold); }
.rn-info .pv { color: var(--muted); font-size: 11px; }
.rn-info .warn { margin: 0; color: #F08A80; font-size: 11.5px; }
.rn-kham { display: flex; gap: 6px; }
.rn-kham i { display: block; width: 22px; height: 22px; transform: rotate(45deg); border: 2px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .3); }
.rn-kham i.open { border-color: #7FD4FF; box-shadow: 0 0 6px rgba(127, 212, 255, .6); }
.rn-top .side { display: grid; gap: 5px; justify-items: end; min-width: 120px; }
.rn-top .chance { position: relative; width: 120px; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.rn-top .chance i { position: absolute; left: 0; top: 0; bottom: 0; display: block; background: #8BD17C; }
.rn-top .chance.low i { background: #E8735A; }
.rn-top .chance span { position: relative; display: block; text-align: center; font-size: 10.5px; line-height: 14px; color: #fff; text-shadow: 0 1px 1px #000; }
.rn-top .price { color: var(--gold); font-size: 12.5px; }
.sheet .rn-bua { position: relative; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 8px; border: 2px dashed var(--edge); background: #15121C; }
.sheet .rn-bua.on { border-style: solid; border-color: #8BD17C; box-shadow: 0 0 8px rgba(139, 209, 124, .6); }
.rn-bua em { position: absolute; right: 3px; bottom: 1px; font-style: normal; font-size: 10.5px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.rn > .head { color: var(--muted); font-size: 12px; }
.rn-list { display: flex; flex-wrap: wrap; gap: 5px; }
.sheet .rn-list .cell { width: 46px; height: 46px; cursor: grab; }
.rn-list .cell em { position: absolute; right: 3px; bottom: 1px; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--gold); text-shadow: 0 1px 2px #000; }
.rn-list .cell u { position: absolute; left: 2px; top: 1px; text-decoration: none; font-size: 9px; color: var(--muted); }
.ico.up11 { filter: drop-shadow(0 0 2px #FF4D4D) drop-shadow(0 0 4px rgba(255, 77, 77, .6)); }
.ico.up12 { animation: up12 1.8s ease-in-out infinite; }
@keyframes up12 { 0%, 100% { filter: drop-shadow(0 0 2px #FF8C1A) drop-shadow(0 0 5px rgba(255, 140, 26, .7)); } 50% { filter: drop-shadow(0 0 3px #FFE27A) drop-shadow(0 0 9px rgba(255, 90, 20, 1)); } }
.rn-slot.up11 { box-shadow: 0 0 10px rgba(255, 77, 77, .55); }
.rn-slot.up12 { box-shadow: 0 0 14px rgba(255, 140, 26, .8); }
@media (max-width: 640px) { .rn-top { grid-template-columns: 76px 1fr; } .rn-top .side { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; align-items: center; } }

/* 14/10/2026: thanh keo ca (giua duoi man hinh, tren thanh ky nang) */
.fishing { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); width: min(380px, calc(100% - 24px)); padding: 8px 12px 10px; pointer-events: auto; user-select: none; touch-action: none;
  background: rgba(14, 22, 34, .92); border: 1px solid #6FA8D8; border-radius: 10px; box-shadow: 0 4px 18px rgba(0, 0, 0, .5); z-index: 4; }
.fishing p { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #CFE8FF; text-align: center; }
.fishing small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.fs-track { position: relative; height: 30px; border-radius: 6px; background: linear-gradient(#123A5C, #0A2238); border: 1px solid #2E5A80; overflow: hidden; }
.fs-zone { position: absolute; inset: 2px auto 2px 0; background: rgba(110, 200, 120, .35); border: 2px solid #6EC878; border-radius: 5px; box-sizing: border-box; will-change: transform; }
.fs-zone.on { background: rgba(140, 230, 140, .55); box-shadow: 0 0 10px rgba(140, 230, 140, .6); }
.fs-fish { position: absolute; top: 2px; transform: translateX(-50%); width: 26px; height: 26px; pointer-events: none; filter: drop-shadow(0 1px 2px #000); }
.fs-bar { height: 7px; margin-top: 6px; border-radius: 4px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.fs-bar i { display: block; height: 100%; width: 30%; background: linear-gradient(90deg, #6EC878, #CFF5A0); }
.fs-bar i.low { background: linear-gradient(90deg, #E0605A, #F0A080); }

/* 14/10/2026: ruong dang luoi o (tui ben trai, ruong ben phai, chia trang) */
.kho-cols { grid-template-columns: auto auto; justify-content: center; align-items: start; gap: 18px; }
.kho-side { display: grid; gap: 6px; }
.kho-cols.mid { align-items: center; }
.sheet .kho-cols.mid .kho-side:last-child .kho-grid .cell { width: 48px; height: 48px; }
.kho-cols.mid .kho-side:last-child .kho-grid { grid-template-columns: repeat(var(--cols), 48px); gap: 6px; }
.kho-head { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.kho-head h3 { margin: 0; }
.kho-head > button { margin-left: auto; padding: 4px 9px; font-size: 12px; }
.kho-tabs { display: flex; gap: 4px; }
.kho-tabs button { padding: 4px 9px; font-size: 12px; }
.kho-tabs button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: rgba(232, 197, 90, .12); }
.kho-n { color: var(--muted); font-size: 12px; margin: 0 0 0 auto; }
.kho-head .kho-n { margin-left: auto; }
.kho-grid { display: grid; grid-template-columns: repeat(var(--cols), 40px); gap: 4px; align-content: start; }
.sheet .kho-grid .cell { width: 40px; height: 40px; border-radius: 6px; }
.kho-grid .cell:disabled { opacity: .45; cursor: default; }
.kho-grid .cell em { position: absolute; right: 2px; bottom: 0; font-style: normal; font-size: 10.5px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.kho-grid .cell[draggable="true"] { cursor: grab; }
@media (max-width: 760px) { .kho-cols { grid-template-columns: 1fr; } }

/* 14/10/2026: bang xep hang gon: 1 dong / nguoi, huy chuong nho, phe la nhan mau */
.rank-list { gap: 2px; }
.rank-list li { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; padding: 4px 10px; min-height: 30px; font-size: 12.5px; }
.rank-list li:nth-child(even) { background: rgba(255, 255, 255, .055); }
.rank-list li.mine { outline: 1px solid var(--gold); background: rgba(232, 197, 90, .12); }
.rank-list .rk-medal { width: 22px; height: 22px; image-rendering: pixelated; }
.rk-nm { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.rk-nm strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.rk-nm small { color: var(--muted); font-size: 11.5px; }
.rk-phe { margin-left: auto; padding: 1px 7px; border-radius: 9px; font: 600 10.5px var(--f); font-style: normal; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); flex: none; }
.rank-list li em { min-width: 44px; text-align: right; color: var(--gold); }

/* ---------------- dien thoai, man ngang (body.touch, 22/10/2026) ----------------
   goc phai duoi: nut Danh 84 px, 5 ky nang tren vong cung ban kinh 150, vong trong: binh mau, ne, tuong tac.
   goc trai duoi: can dieu khien. Chat len tren can, thanh nhanh giua day, bang he thong hang ngang tren cung. */
body:not(.touch) .touch-only { display: none !important; }
.xoay { display: none; }
@media (orientation: portrait) {
  body.touch .xoay { display: grid; place-content: center; justify-items: center; gap: 10px; position: fixed; inset: 0; z-index: 100000; background: #0B0712; color: var(--ink); text-align: center; padding: 24px; }
  body.touch .xoay b { font-size: 56px; color: var(--gold); animation: xoay 2s ease-in-out infinite; }
}
@keyframes xoay { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
body.touch .actions, body.touch .joy { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.touch .actions kbd { display: none; }
body.touch .actions.main { left: auto; right: max(12px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); transform: none; }
body.touch .skillbar { position: relative; width: 220px; height: 220px; padding: 0; background: none; border: 0; }
body.touch .skillbar .sk { position: absolute; width: 52px; height: 52px; border-radius: 50%; border-color: rgba(255, 255, 255, .25); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
body.touch .skillbar .sk b[aria-hidden] { font-size: 22px; line-height: 1; }
body.touch #b-atk { right: 0; bottom: 0; width: 84px; height: 84px; border: 2px solid var(--gold); }
body.touch #b-s1 { right: 166px; bottom: 16px; }
body.touch #b-s2 { right: 155px; bottom: 73px; }
body.touch #b-s3 { right: 122px; bottom: 122px; }
body.touch #b-s4 { right: 73px; bottom: 155px; }
body.touch #b-s5 { right: 16px; bottom: 166px; }
body.touch #b-pot, body.touch #b-dodge, body.touch #b-use { width: 48px; height: 48px; display: grid; place-items: center; }
body.touch #b-pot { right: 96px; bottom: 18px; }
body.touch #b-dodge { right: 73px; bottom: 73px; }
body.touch #b-use { right: 18px; bottom: 96px; }
body.touch .actions .sk[data-cd]::after { font-size: 16px; }
body.touch .quickbar { position: fixed; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 4px; gap: 4px; }
body.touch .quickbar .q { width: 38px; height: 38px; }
body.touch .quickbar .q.empty { display: none; }
body.touch .quickbar:not(:has(.q:not(.empty))) { display: none; }
.joy { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); width: 124px; height: 124px; border-radius: 50%;
  background: rgba(14, 12, 20, .35); border: 2px solid rgba(255, 255, 255, .22); pointer-events: auto; touch-action: none; display: grid; place-items: center; z-index: 3; }
.joy i { width: 52px; height: 52px; border-radius: 50%; background: rgba(240, 220, 170, .55); border: 2px solid rgba(255, 255, 255, .6); pointer-events: none; }
body.touch .actions.sysdock { top: max(6px, env(safe-area-inset-top)); bottom: auto; left: calc(max(10px, env(safe-area-inset-left)) + 198px); right: auto; transform: none; }
body.touch .mua { width: 64px; padding: 0; justify-content: center; }
body.touch .mua-txt { display: none; }
body.touch .actions.sysdock .sysbar { flex-direction: row; padding: 3px; gap: 3px; }
body.touch .sysbar button { min-width: 40px; width: 40px; height: 36px; }
body.touch .sysbar .ski { width: 24px; height: 24px; }
body.touch .sysbar .sys-ico b[aria-hidden] { font-size: 17px; }
body.touch .target { top: 52px; }
body.touch .left-col, body.touch .me { width: 190px; }
body.touch #mini { width: 96px; height: 64px; }
body.touch .minibox { top: 78px; bottom: auto; }
body.touch .chatbox { left: max(10px, env(safe-area-inset-left)); bottom: 152px; width: min(320px, calc(100% - 270px)); padding: 5px 7px; }
body.touch .chatbox ol { max-height: 4.4em; font-size: 12.5px; }
body.touch .log { right: 240px; bottom: 60px; max-width: 280px; }
body.touch .dg-timer { top: 52px; right: 140px; bottom: auto; }
/* bang (tui do, ky nang, thanh tuu...) tren dien thoai: gan toan man hinh, de len HUD, khong keo di duoc */
body.touch .sheet { top: max(4px, env(safe-area-inset-top)) !important; left: max(4px, env(safe-area-inset-left)) !important; right: max(4px, env(safe-area-inset-right)); bottom: max(4px, env(safe-area-inset-bottom));
  width: auto; max-height: none; transform: none !important; z-index: 60; }

/* 23/10/2026: diem danh thang: 6 cot x 5 hang, moc 7/14/21/28/30 vien vang, hom nay sang len */
.sheet.dd { width: min(640px, calc(100% - 20px)); }
.dd-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 8px; }
.dd-cell { position: relative; display: grid; gap: 4px; justify-items: center; align-content: start; min-height: 74px; padding: 5px 4px; border-radius: 8px;
  border: 1px solid var(--edge); background: rgba(255, 255, 255, .04); }
.dd-n { font-size: 11px; color: var(--muted); }
.dd-q { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; }
.dd-it { position: relative; display: inline-grid; }
.dd-it em { position: absolute; right: -3px; bottom: -2px; font: 700 10.5px var(--f); font-style: normal; color: #fff; text-shadow: 0 1px 2px #000; }
.dd-tien { font-size: 11px; font-weight: 700; color: var(--gold); text-align: center; }
.dd-cell.moc { border-color: #C89A52; background: linear-gradient(rgba(232, 197, 90, .14), rgba(232, 197, 90, .04)); }
.dd-cell.moc .dd-n { color: var(--gold); font-weight: 700; }
.dd-cell.done { opacity: .45; }
.dd-ok { position: absolute; inset: 0; display: grid; place-items: center; font: 800 26px var(--f); font-style: normal; color: #8BD17C; text-shadow: 0 1px 3px #000; }
.dd-cell.today { border-color: #8BD17C; box-shadow: 0 0 10px rgba(139, 209, 124, .55); animation: ddPulse 1.6s ease-in-out infinite; }
@keyframes ddPulse { 50% { box-shadow: 0 0 16px rgba(139, 209, 124, .9); } }
.dd-foot { display: flex; justify-content: center; margin-top: 10px; }
.dd-foot button { padding: 7px 22px; font-weight: 700; }
@media (max-width: 520px) { .dd-grid { grid-template-columns: repeat(5, 1fr); } }
@media (prefers-reduced-motion: reduce) { .dd-cell.today { animation: none; } }

/* 23/10/2026: Tho Ren · Sua (luoi gon, chi cuon trong khung) va danh sach trang bi o tab Ren */
.rep { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rep-box { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; max-height: min(330px, 46vh); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; align-content: start; }
.rep-it { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, .25); border: 1px solid var(--edge); }
.rep-it:hover { border-color: var(--gold); }
.rep-it .nm { display: grid; gap: 4px; min-width: 0; }
.rep-it .nm b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-d { display: flex; align-items: center; gap: 6px; }
.rep-d small { color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.rep-bar i { display: block; height: 100%; background: #8BD17C; }
.rep-bar.low i { background: #E8735A; }
.rep .price { color: var(--gold); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep .price.ok { color: var(--muted); }
.rep .total { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); }
.rn-list { max-height: 152px; overflow-y: auto; overscroll-behavior: contain; align-content: flex-start; padding: 2px; }
.rn-list .cell u { color: var(--gold); font-weight: 700; }

/* 23/10/2026: the do cua hang gon 2 dong (ten + gia), nut Mua ben phai; bang rong 4 cot */
.sheet.shop { width: min(900px, calc(100% - 20px)); }
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 5px; }
.shop-grid .card { grid-template-columns: 32px 1fr auto; grid-template-rows: auto auto; gap: 1px 8px; padding: 5px 8px; align-items: center; }
.shop-grid .card > .ico, .shop-grid .card > canvas, .shop-grid .card > img { grid-row: 1 / 3; width: 32px; height: 32px; }
.shop-grid .card .nm { grid-column: 2; grid-row: 1; }
.shop-grid .card .nm b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-grid .card .foot { display: contents; }
.shop-grid .card .foot .price { grid-column: 2; grid-row: 2; font-size: 11.5px; }
.shop-grid .card .foot button { grid-column: 3; grid-row: 1 / 3; padding: 3px 10px; font-size: 12px; }
.shop-grid .sell-qty { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: #2A2216; border: 1px solid var(--gold); }
.shop-grid .sell-qty b { font-size: 12.5px; }
.shop-grid .sell-qty input { width: 64px; padding: 3px 6px; font: inherit; color: var(--ink); background: #15121C; border: 1px solid var(--edge); border-radius: 5px; }
.shop-grid .sell-qty button { padding: 3px 10px; font-size: 12px; }
/* cua hang / tho ren: tieu de, tab, ghi chu dung yen; chi danh sach ben duoi cuon. Thanh phan loai va hang hoi so luong ban dinh tren dau danh sach */
.sheet.shop { overflow: hidden; grid-template-rows: auto auto auto minmax(0, 1fr); }
#shop-list { overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; min-height: 0; }
.shop-grid .cats, .shop-grid .sell-qty { position: sticky; top: 0; z-index: 1; }
.shop-grid .cats { background: rgba(22, 18, 28, .98); }

/* 23/10/2026: man tai di tau / vao ham nguc cung kieu man vao Dao Binh Minh: tranh toan canh, ten vang lon o giua duoi, thanh vang, nut Tiep tuc */
.travel { place-content: end stretch; align-items: end; padding: 0; background-color: #0B0712; background-position: center; background-size: cover; }
.travel::before { background: linear-gradient(to bottom, rgba(11, 7, 18, 0) 50%, rgba(11, 7, 18, .55) 72%, rgba(11, 7, 18, .92) 100%); pointer-events: none; }
.tv-card { width: min(720px, calc(100% - 40px)); margin: 0 auto 44px; justify-items: center; text-align: center; gap: 6px; }
.tv-card h2 { order: 1; font-size: clamp(26px, 4.4vw, 44px); letter-spacing: .04em; color: #FFE7B0; text-shadow: 0 2px 10px rgba(0, 0, 0, .8), 0 0 24px rgba(255, 170, 70, .5); margin-bottom: 2px; }
.tv-sub { order: 2; color: #E9C98A; text-shadow: 0 1px 3px #000; }
.tv-text { order: 3; color: #D9CDB8; font-size: 13px; line-height: 1.55; text-shadow: 0 1px 3px #000; max-width: 640px; }
.tv-bar { order: 4; width: 100%; height: 8px; margin-top: 8px; border-radius: 4px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 220, 160, .35); }
.tv-bar span { background: linear-gradient(90deg, #E8A54B, #FFE7B0); box-shadow: 0 0 10px rgba(255, 190, 90, .8); }
.travel.ready .tv-bar { display: none; }
.tv-card .lz-go { order: 5; justify-self: center; margin-top: 14px; padding: 10px 34px; font-size: 16px; font-weight: 700; color: #2B1A08; background: linear-gradient(#FFE7B0, #E8A54B); border: 1px solid #FFF1CC; border-radius: 8px; }
#d-text { white-space: pre-line; }   /* 23/10/2026: loi cot truyen nhieu doan */

/* 24/10/2026: tu dong: dong cot truyen bam de tu di, nut Tu danh */
.qtrack li.go { pointer-events: auto; cursor: pointer; color: #FFE7A8; }
.qtrack li.go:hover { text-decoration: underline; }
.sk.auto b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 11px var(--f); letter-spacing: .04em; color: #CFC8BC; }
.sk.auto[aria-pressed="true"] { border-color: #6EC878; box-shadow: 0 0 10px rgba(110, 200, 120, .6); }
.sk.auto[aria-pressed="true"] b { color: #9EE493; }

/* 26/10/2026: khung nhiem vu chia nhom: Chinh tuyen vang, Phu xanh ngoc, Hoi xanh lam */
.qtrack li { padding: 1px 0 1px 7px; border-left: 2px solid transparent; }
.qtrack li::before { content: none; }
.qtrack li.qh { margin-top: 4px; padding: 0; border: 0; font: 800 9.5px var(--f); letter-spacing: .08em; text-transform: uppercase; }
.qtrack li.qh:first-child { margin-top: 0; }
.qtrack li.q-chinh { border-left-color: #FFD45A; color: #FFE7A8; }
.qtrack li.q-phu { border-left-color: #7FD8D0; color: #CFF3EE; }
.qtrack li.q-hoi { border-left-color: #8FB8F0; color: #DCE8FF; }
.qtrack li.qh.q-chinh { color: #FFD45A; } .qtrack li.qh.q-phu { color: #7FD8D0; } .qtrack li.qh.q-hoi { color: #8FB8F0; }

/* 26/10/2026: bang Thanh tuu: danh hieu dang deo, tab nhom, luoi the 2 cot; chi danh sach cuon */
.sheet.ach { width: min(760px, calc(100% - 20px)); max-height: calc(100% - 90px); display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.ach-top { display: flex; align-items: center; gap: 12px; }
.ach-top .note { margin: 0 0 0 auto; white-space: nowrap; }
.ach-title { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 10px; border-radius: 8px; background: linear-gradient(90deg, rgba(150, 100, 230, .18), rgba(150, 100, 230, .04)); border: 1px solid rgba(201, 162, 255, .45); }
.ach-title .at-l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ach-title .at-n { color: #DCC6FF; font-size: 14px; }
.ach-title .at-st { font-style: normal; font-size: 12px; color: #9EE493; }
.ach-title .at-hint { font-style: normal; font-size: 11.5px; color: var(--muted); }
.ach-title button { margin-left: auto; padding: 3px 10px; font-size: 12px; }
.ach-tabs { flex-wrap: wrap; gap: 4px; }
.ach-tabs button { padding: 4px 9px; font-size: 12px; }
.ach-tabs button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: rgba(232, 197, 90, .12); }
.sheet.ach .ach-list { flex: 1; min-height: 0; overflow-y: auto; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; padding-right: 4px; scrollbar-color: #4A4A52 #1A1A20; }
.sheet.ach .ach-list::-webkit-scrollbar { width: 8px; } .sheet.ach .ach-list::-webkit-scrollbar-thumb { background: #4A4A52; border-radius: 4px; } .sheet.ach .ach-list::-webkit-scrollbar-track { background: #1A1A20; }
.sheet.ach .ach-list li { grid-template-columns: 30px 1fr; align-items: start; }
.ach-list li.on { border-color: #C9A2FF; background: #251C33; box-shadow: 0 0 10px rgba(201, 162, 255, .25); }
.ach-list .cup { padding-top: 2px; }
.ach-bar { height: 4px; margin-top: 5px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ach-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8A6A3A, #E8C55A); }
.ach-list li.done .ach-bar i { background: linear-gradient(90deg, #6EC878, #CFF5A0); }
.ach-ft { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.ach-ft .ach-pg { font-style: normal; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ach-list li.done .ach-pg { color: var(--gold); }
.ach-ft .ach-st { margin-left: auto; font-style: normal; font-size: 11px; color: #9EE493; white-space: nowrap; }
.ach-ft button { padding: 2px 9px; font-size: 11.5px; }
.ach-ft .ach-on { font-size: 11px; color: #DCC6FF; white-space: nowrap; }
.me-title { display: block; font-size: 10.5px; font-weight: 700; color: #C9A2FF; }
@media (max-width: 640px) { .sheet.ach .ach-list { grid-template-columns: 1fr; } }

/* ---------- 26/10/2026: kham da ---------- */
.km { display: grid; gap: 10px; padding: 12px; border-radius: 10px; background: radial-gradient(120% 90% at 50% 0%, rgba(90, 120, 200, .12), rgba(255, 255, 255, .03) 60%); border: 1px solid rgba(140, 170, 255, .14); }
.km-sum { color: #9FE3FF; font-size: 11.5px; font-weight: 600; }
.km-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.km-slot { position: relative; display: grid; justify-items: center; gap: 4px; }
.km-no { position: absolute; top: -2px; left: 6px; font-size: 10px; color: var(--muted); }
.sheet .km-sock { --gc: #7FD4FF; position: relative; width: 58px; height: 58px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .12); background: radial-gradient(circle at 50% 40%, #241F33, #120F1A 70%); color: var(--muted); transition: transform .15s, box-shadow .2s, border-color .2s; }
.km-sock::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .12); pointer-events: none; }
.km-sock b { font-size: 18px; line-height: 1; }
.km-sock em { position: absolute; bottom: -9px; padding: 0 5px; border-radius: 6px; background: #1A1622; border: 1px solid var(--edge); font-style: normal; font-size: 10px; color: var(--gold); white-space: nowrap; }
.km-slot small { font-size: 10.5px; color: var(--muted); text-align: center; min-height: 14px; margin-top: 4px; }
.km-sock.lock { opacity: .45; }
.km-sock.closed.next { border-color: var(--gold); border-style: dashed; color: var(--gold); cursor: pointer; animation: kmPulse 2s ease-in-out infinite; }
.km-sock.closed.next:hover { transform: scale(1.06); }
.km-sock.empty { border-color: #7FD4FF; box-shadow: 0 0 8px rgba(127, 212, 255, .35), inset 0 0 10px rgba(127, 212, 255, .15); color: #7FD4FF; cursor: pointer; }
.km-sock.gem { border-color: var(--gc); box-shadow: 0 0 10px color-mix(in srgb, var(--gc) 60%, transparent), inset 0 0 14px color-mix(in srgb, var(--gc) 35%, transparent); cursor: pointer; }
.km-sock.sel { transform: scale(1.08); outline: 2px solid var(--gold); outline-offset: 3px; }
.km-sock.drop { transform: scale(1.12); border-color: #fff; box-shadow: 0 0 16px rgba(255, 255, 255, .7); }
.km-slot:has(.gem) small { color: var(--gc, #CFE8FF); }
.gem-ico { --gc: #fff; display: grid; place-items: center; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--gc) 80%, transparent)); }
.gem-ico.b10, .gem-ico.b11, .gem-ico.b12 { animation: kmShine 2.2s ease-in-out infinite; }
.km-act { display: grid; gap: 6px; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .06); }
.km-act-h { display: flex; align-items: baseline; gap: 8px; }
.km-act-h b { color: var(--gold); }
.km-act-h span { font-size: 12.5px; color: var(--ink); }
.km-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sheet .km-btns button { padding: 6px 14px; font-size: 12.5px; }
.sheet .km-btns button.pri, .km-box button.pri { background: linear-gradient(#3B6FB8, #24477A); border-color: #7FB4FF; color: #fff; }
.sheet .km-btns button.warn { background: linear-gradient(#8A5A1E, #5C3A12); border-color: #E8A54B; color: #FFE7B0; }
.sheet .km-btns button:disabled { opacity: .45; filter: grayscale(.5); }
.km-cost { margin-left: auto; font-size: 12px; color: var(--muted); }
.km-cost b { color: var(--gold); }
.km-rule { margin: 0; font-size: 11.5px; color: var(--muted); }
.km-bag-h { display: flex; align-items: center; gap: 10px; }
.km-bag-h b { font-size: 12.5px; }
.km-leg { display: flex; gap: 3px; margin-left: auto; }
.km-leg i { --gc: #fff; width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; background: var(--gc); opacity: .25; }
.km-leg i.on { opacity: 1; box-shadow: 0 0 5px var(--gc); }
.km-bag { display: flex; flex-wrap: wrap; gap: 6px; min-height: 48px; align-content: flex-start; }
.sheet .km-gem { --gc: #fff; position: relative; width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--gc) 70%, transparent); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--gc) 22%, #15121C), #15121C 75%); cursor: grab; }
.sheet .km-gem.sel { outline: 2px solid var(--gold); outline-offset: 2px; transform: translateY(-2px); }
.km-gem em { position: absolute; right: 3px; bottom: 1px; font-style: normal; font-size: 10.5px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.km-gem u { position: absolute; left: 3px; top: 1px; text-decoration: none; font-size: 9px; font-weight: 700; color: var(--gc); text-shadow: 0 1px 2px #000; }
.km-bag .note { margin: 0; }
/* hop xac nhan */
.km-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(6, 4, 12, .62); backdrop-filter: blur(2px); }
.km-modal[hidden] { display: none; }
.km-box { width: min(380px, calc(100% - 32px)); display: grid; gap: 10px; padding: 18px 20px 16px; border-radius: 12px; background: linear-gradient(#1F1A2B, #15111E); border: 1px solid #7FB4FF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 12px 40px rgba(0, 0, 0, .6), 0 0 24px rgba(127, 180, 255, .2); animation: kmIn .18s ease-out; }
.km-box.danger { border-color: #F08A80; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 12px 40px rgba(0, 0, 0, .6), 0 0 24px rgba(240, 138, 128, .25); }
.km-box h3 { margin: 0; font-size: 15px; color: var(--gold); text-align: center; }
.km-box p { margin: 0; font-size: 12.5px; text-align: center; color: var(--ink); }
.km-icons { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 6px 0; }
.km-icons > * { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.km-icons .km-arrow { width: auto; height: auto; background: none; border: 0; color: var(--muted); font-size: 18px; }
.km-open-ico { color: var(--gold); font-size: 26px; border-style: dashed !important; border-color: var(--gold) !important; }
.km-fee { display: flex; justify-content: center; gap: 8px; padding: 6px; border-radius: 6px; background: rgba(0, 0, 0, .3); }
.km-fee span { color: var(--muted); }
.km-fee b { color: var(--gold); }
.km-fee.poor b, .km-fee.poor i { color: #F08A80; font-style: normal; }
.km-warn { padding: 7px 10px; border-radius: 6px; background: rgba(240, 138, 128, .12); border: 1px solid rgba(240, 138, 128, .35); color: #FFC7BF !important; font-size: 12px !important; }
.km-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.km-box button { padding: 7px 18px; font: inherit; font-size: 13px; border-radius: 7px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .06); color: var(--ink); cursor: pointer; }
.km-box button.danger { background: linear-gradient(#A33A30, #6E211B); border-color: #F08A80; color: #fff; }
.km-box button:disabled { opacity: .45; cursor: not-allowed; }
.itip li.gem, .tip li.gem { font-size: 11.5px; }
li.gem.dim { color: var(--muted); }
@keyframes kmPulse { 50% { box-shadow: 0 0 12px rgba(255, 212, 90, .55); } }
@keyframes kmShine { 50% { filter: drop-shadow(0 0 7px var(--gc)) brightness(1.2); } }
@keyframes kmIn { from { transform: scale(.94); opacity: 0; } }
@media (max-width: 640px) { .km-board { gap: 4px; } .sheet .km-sock { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .km-sock.closed.next, .gem-ico { animation: none !important; } }
/* tui da: toi da 2 hang, cuon rieng (khong cuon ca bang) */
.km-bag { max-height: 108px; overflow-y: auto; overscroll-behavior: contain; padding: 3px; }
.km + .head + .rn-list { max-height: 104px; }
/* tab Kham gon lai: danh sach vu khi luon con 1 hang, ca bang khong cuon */
.km { gap: 7px; padding: 9px 10px; }
.sheet .km-sock { width: 50px; height: 50px; }
.km-slot small { margin-top: 2px; }
.km-act { padding: 7px 10px; gap: 4px; }
.rn:has(.km) .rn-top { padding: 6px 10px; }
.rn:has(.km) .rn-slot { width: 60px; height: 60px; }
.rn:has(.km) .rn-top { grid-template-columns: 60px 1fr auto; }
.km + .head + .rn-list { min-height: 52px; max-height: 52px; flex-shrink: 0; }

/* 27/10/2026: thanh chi nhanh Hoi tren Bang Uy Thac */
.cn-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 10px; border: 1px solid rgba(232, 197, 90, .35); border-radius: 6px; background: rgba(232, 197, 90, .08); color: var(--gold); font-size: 12.5px; font-weight: 600; }

/* 27/10/2026: Dau Truong — bang thong tin + thanh mau hai ben khi dang dau */
.sheet.pvp { width: min(480px, calc(100% - 20px)); overflow: hidden; flex-direction: column; }
.sheet.pvp:not([hidden]) { display: flex; }
.pvp-me { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 8px; }
.pvp-elo { font-size: 28px; color: var(--gold); font-variant-numeric: tabular-nums; }
.pvp-wl { margin-left: auto; color: var(--muted); }
.pvp-act { display: flex; align-items: center; gap: 10px; }
.pvp-act button { padding: 7px 16px; }
.sheet.pvp h3 { margin: 10px 0 4px; font-size: 13px; }
.pvp-top { min-height: 0; overflow: auto; max-height: 300px; }
.arbar { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; width: min(640px, calc(100% - 300px)); min-width: 360px;
  padding: 6px 12px; background: rgba(14, 12, 20, .9); border: 2px solid #8A6A3A; border-radius: 8px; pointer-events: auto; z-index: 4; }
.ar-side b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-side.op { text-align: right; }
.ar-side .bar { position: relative; height: 14px; margin-top: 3px; border-radius: 4px; background: rgba(0, 0, 0, .55); overflow: hidden; }
.ar-side .bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#7FD36A, #3E9A3E); transition: width .2s; }
.ar-side.op .bar i { inset: 0 0 0 auto; background: linear-gradient(#F08A6A, #B8382E); }
.ar-side .bar s { position: absolute; inset: 0 auto 0 0; background: rgba(160, 200, 255, .55); text-decoration: none; }
.ar-side .bar span { position: relative; display: block; text-align: center; font-size: 10.5px; line-height: 14px; text-shadow: 0 1px 2px #000; }
.ar-mid { display: grid; justify-items: center; gap: 1px; }
.ar-mid b { font-size: 18px; font-variant-numeric: tabular-nums; color: #FFE7B0; }
.ar-mid small { color: var(--muted); font-size: 10.5px; }
.ar-mid button { padding: 1px 8px; font-size: 11px; }
.ar-big { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%); font: 800 64px/1 var(--f); color: #FFE7B0; text-shadow: 0 3px 12px #000, 0 0 30px rgba(255, 170, 60, .6); pointer-events: none; z-index: 5; }
.ar-big.go { color: #FFB45A; animation: arPop .9s ease-out; }
.ar-big.win { color: #FFD45A; } .ar-big.lose { color: #F08A80; } .ar-big.draw { color: #CFC8BC; }
@keyframes arPop { from { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@media (max-width: 760px) { .arbar { width: calc(100% - 20px); min-width: 0; top: 80px; } .ar-big { font-size: 44px; } }

/* ================= 28/10/2026: bo cuc HUD theo ban ve =================
   trai tren: mua + ngay gio, duoi la the nhan vat · phai tren: ban do, duoi la khung nhiem vu
   trai duoi: chat · giua duoi: buff | binh HP/MP | o new + Auto / EXP / ky nang | dung nhanh
   phai duoi: Tui · Ky nang · Nhiem vu · ☰ (danh sach tinh nang bat len phia tren) */
.mua { left: 10px; right: auto; top: 8px; }
.left-col { top: 80px; width: 220px; }
.me .bar.hp, .me .bar.mp, .me .bar.xp { display: none; }
.me:has(#mp-bar[hidden]) .bar.st { display: none; }
.minibox { top: 10px; right: 10px; bottom: auto; }
#mini { position: relative; top: 0; right: 0; width: 230px; height: 176px; display: block; }
.qpanel { position: absolute; top: 196px; right: 10px; width: 232px; max-height: calc(100vh - 470px); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; }
#hud:has(#minibox[hidden]) .qpanel { top: 10px; }
.qpanel .qtrack { margin: 0; font-size: 11.5px; }
.qpanel .qtrack li.go { cursor: pointer; }
/* giua duoi */
.actions.main.hb { left: 50%; right: auto; bottom: 8px; transform: translateX(-50%); width: min(820px, calc(100% - 600px)); min-width: 600px; max-width: none; gap: 4px; justify-items: stretch; }
.hb-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.hb .buffs { justify-self: start; align-self: end; display: flex; flex-wrap: wrap; gap: 3px; min-height: 26px; }
.orb { display: grid; justify-items: center; gap: 2px; margin-bottom: -2px; }
.orb-ball { position: relative; width: 66px; height: 66px; border-radius: 50%; overflow: hidden; background: #15121C; border: 2px solid #C9A25A; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6), 0 2px 10px rgba(0, 0, 0, .7); }
.orb-ball i { position: absolute; bottom: 0; width: 50%; transition: height .2s; }
.orb-ball .o-hp { left: 0; height: calc(var(--hp, 1) * 100%); background: linear-gradient(#E0524A, #8E1F1F); }
.orb-ball .o-mp { right: 0; height: calc(var(--mp, 1) * 100%); background: linear-gradient(#5A8CFF, #1F3C9A); }
.orb.st .orb-ball .o-mp { background: linear-gradient(#F2C14E, #9A6A12); }
.orb-ball::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(0, 0, 0, .55); transform: skewX(-12deg); }
.orb-ball b { position: absolute; top: 50%; transform: translateY(-50%); font: 800 12px/1 var(--f); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; z-index: 1; }
.orb-ball .o-l { left: 9px; } .orb-ball .o-r { right: 9px; }
.orb-txt { font-size: 10.5px; color: #E9DCC4; text-shadow: 0 1px 2px #000; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hb-new { justify-self: end; display: flex; align-items: center; gap: 6px; }
.newbox { display: flex; align-items: center; gap: 2px; min-width: 92px; height: 36px; padding: 0 6px; border-radius: 8px; background: rgba(14, 12, 20, .78); border: 1px solid var(--edge); pointer-events: auto; }
.newbox .nb-empty { flex: 1; text-align: center; color: #7E7790; font-size: 12px; font-style: italic; }
.newbox.has { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 200, 110, .35); }
.actions .newbox .nb-it { width: 28px; height: 28px; display: grid; place-items: center; font-size: 16px; line-height: 1; background: rgba(58, 47, 28, .9); border-color: var(--gold); animation: nbPulse 1.4s ease-in-out infinite; }
@keyframes nbPulse { 50% { box-shadow: 0 0 8px rgba(255, 210, 120, .9); } }
.actions .hb-new .sk.auto { width: 56px; height: 36px; display: grid; place-items: center; font-size: 12px; }
.hb-new .sk.auto kbd { left: auto; right: 3px; top: auto; bottom: 1px; font-size: 9px; }
.hb-xp { height: 8px; border: 1px solid rgba(0, 0, 0, .6); }
.hb-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hb .skillbar, .hb .quickbar { gap: 4px; padding: 4px; min-height: 58px; align-items: center; }
.hb .skillbar { justify-content: flex-start; }
.hb .quickbar { justify-content: flex-end; flex-wrap: nowrap; }
.hb .sk { width: 48px; height: 48px; }
.hb .quickbar .q { width: 34px; height: 34px; }
.hb .quickbar .q canvas { width: 26px; height: 26px; }
/* trai duoi: chat vuong */
.chatbox { left: 10px; bottom: 8px; width: 300px; height: 232px; grid-template-rows: auto 1fr auto; align-content: stretch; }
.chatbox ol { max-height: none; min-height: 0; overflow-y: auto; }
/* phai duoi */
.actions.sysdock { left: auto; right: 10px; bottom: 8px; top: auto; transform: none; }
.actions.sysdock .sysbar { flex-direction: row; }
.sysbar button { min-width: 50px; width: 50px; height: 50px; }
#b-feat b[aria-hidden], #b-quest b[aria-hidden] { font-size: 20px; }
#b-feat[aria-expanded="true"] { border-color: var(--gold); background: #3A2F1C; }
.feat { position: absolute; right: 10px; bottom: 70px; width: 200px; display: grid; gap: 2px; padding: 6px; z-index: 8; pointer-events: auto; max-height: calc(100vh - 100px); overflow-y: auto; }
.feat .feat-it { position: relative; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.feat .feat-it:hover { background: rgba(255, 212, 90, .08); border-color: var(--edge); }
.feat .feat-it::after { content: attr(data-tip); }
.feat .feat-it .ski { width: 24px; height: 24px; image-rendering: pixelated; flex: none; }
.feat .feat-it > b[aria-hidden] { width: 24px; text-align: center; font-size: 17px; flex: none; }
.feat .feat-it kbd { order: 2; margin-left: auto; font: 600 10.5px var(--f); color: var(--muted); }
.feat .feat-it .badge { position: static; order: 3; margin-left: 4px; }
.feat .feat-it.glow { color: var(--gold); }
.log { right: 10px; bottom: 70px; max-width: 320px; }
.qsheet { width: min(560px, calc(100% - 20px)); }
.qlist { font-size: 13px; display: grid; gap: 3px; }
.qlist li { padding: 4px 6px; border-radius: 5px; }
.qlist li.go:hover { background: rgba(255, 212, 90, .08); }
.qlist li.empty::before { content: none; }
.dg-timer { top: 10px; right: 252px; }
.actions.main.hb { width: min(820px, calc(100% - 640px)); }
.chatbox { width: 290px; }
@media (max-width: 1240px) {                                       /* man nho: thanh duoi giua nam gon giua chat va cum nut phai */
  .actions.main.hb { left: 250px; right: 236px; width: auto; min-width: 0; transform: none; }
  .chatbox { width: 230px; }
  .hb .sk { width: 40px; height: 40px; }
  .hb .quickbar .q { width: 28px; height: 28px; }
  .hb .quickbar .q canvas { width: 22px; height: 22px; }
}
.hb-bars { grid-template-columns: auto 1fr; }
.hb .sk { width: 44px; height: 44px; }
.hb .quickbar .q { width: 32px; height: 32px; }
.hb .quickbar .q canvas { width: 24px; height: 24px; }
.hb .quickbar { gap: 3px; overflow: hidden; }

/* 28/10/2026 (2): binh tron ve lai (vien vang, thuy tinh, mat chat long gon song), re chuot hien Mau / Mana / The Luc; New sat mep phai; Auto la icon */
.hb .buffs { grid-column: 1; } .hb .orb { grid-column: 2; } .hb .hb-new { grid-column: 3; }
.orb { position: relative; margin-bottom: -14px; z-index: 2; }
.orb::before { content: ''; position: absolute; left: 50%; bottom: 4px; width: 118px; height: 30px; transform: translateX(-50%); border-radius: 50% 50% 8px 8px / 100% 100% 8px 8px;
  background: linear-gradient(#3A2E1C, #17120C); border: 1px solid #8C6A34; box-shadow: inset 0 1px 0 rgba(255, 220, 150, .25), 0 2px 6px rgba(0, 0, 0, .7); z-index: -1; }
.orb-ball { width: 76px; height: 76px; border: 0; background: radial-gradient(circle at 50% 45%, #2A2233 0, #0B0910 72%);
  box-shadow: inset 0 0 14px #000, 0 0 0 2px #2B1E0C, 0 0 0 4px #D6AE62, 0 0 0 5px #6B4E22, 0 0 0 7px #1A140C, 0 4px 16px rgba(0, 0, 0, .85); }
.orb-ball i { transition: height .25s ease-out; overflow: hidden; }
.orb-ball .o-hp { background: radial-gradient(circle at 70% 25%, #FF9A88 0, #D93030 38%, #7A0E0E 100%); }
.orb-ball .o-mp { background: radial-gradient(circle at 30% 25%, #9CC2FF 0, #2F62E0 38%, #0E2470 100%); }
.orb.st .orb-ball .o-mp { background: radial-gradient(circle at 30% 25%, #FFE9A0 0, #E0A22A 40%, #6E4608 100%); }
.orb-ball i::before { content: ''; position: absolute; left: -50%; right: -50%; top: -5px; height: 10px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%); animation: orbWave 3.2s ease-in-out infinite alternate; }
.orb-ball .o-mp::before { animation-delay: -1.6s; }
@keyframes orbWave { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
.orb-ball::before { content: ''; position: absolute; left: 16%; top: 7%; width: 52%; height: 34%; border-radius: 50%; z-index: 2; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .04)); transform: rotate(-18deg); }
.orb-ball::after { width: 2px; margin-left: -1px; transform: none; z-index: 2; background: linear-gradient(rgba(214, 174, 98, 0), #D6AE62 30%, #D6AE62 70%, rgba(214, 174, 98, 0)); }
.orb-ball .o-z { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; cursor: default; }
.orb-ball .o-zl { left: 0; } .orb-ball .o-zr { right: 0; }
.orb-ball { overflow: visible; }
.orb-ball .o-z:hover::after { content: attr(data-t); position: absolute; bottom: calc(100% + 14px); white-space: nowrap; padding: 4px 9px; border-radius: 6px;
  background: rgba(14, 12, 20, .96); border: 1px solid var(--edge); font: 600 12px var(--f); color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.orb-ball .o-zl:hover::after { right: 0; color: #FF9A88; } .orb-ball .o-zr:hover::after { left: 0; color: #9CC2FF; }
.orb.st .orb-ball .o-zr:hover::after { color: #FFE08A; }
.hb-top { margin-bottom: 2px; }
.actions .hb-new .sk.auto { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; color: #D6AE62; }
.hb-new .sk.auto svg { width: 22px; height: 22px; fill: currentColor; filter: drop-shadow(0 1px 1px #000); }
.hb-new .sk.auto[aria-pressed="true"] { color: #FFE7A8; border-color: var(--gold); background: #3A2F1C; box-shadow: 0 0 10px rgba(255, 200, 110, .6); }
.hb-new .sk.auto[aria-pressed="true"] svg { animation: autoSpin 2.4s linear infinite; }
@keyframes autoSpin { to { transform: rotate(360deg); } }
.hb-new .sk.auto kbd { right: 2px; bottom: 0; }
.orb-in { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.hb-bars { grid-template-columns: 1fr 1fr; }
.orb-in::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .55), inset 0 8px 14px rgba(0, 0, 0, .35), inset 6px 0 12px rgba(0, 0, 0, .25), inset -6px 0 12px rgba(0, 0, 0, .25); }
.orb-in i::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, .18) 0 1.5px, transparent 2px), radial-gradient(circle at 70% 55%, rgba(255, 255, 255, .14) 0 1px, transparent 1.5px); }

/* 28/10/2026 (3): goc duoi mua de danh cho khung to doi; tien canh nut Tui; Lv canh thanh EXP; The Luc (class co Mana) / Buon Ngu la thanh doc canh binh */
.left-col .me { display: none; }
.orb { grid-template-columns: auto; }
.o-side { position: absolute; bottom: 6px; width: 9px; height: 58px; border-radius: 5px; background: #0B0910; border: 1px solid #8C6A34; box-shadow: 0 0 0 1px #1A140C, 0 2px 4px rgba(0, 0, 0, .7); overflow: visible; }
.o-side i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--v, 1) * 100%); border-radius: 4px; transition: height .2s; }
.o-st { left: calc(100% + 6px); } .o-st i { background: linear-gradient(#FFE08A, #C98A1E); }
.o-zz { right: calc(100% + 6px); } .o-zz i { background: linear-gradient(#C9A2FF, #5B3A9A); }
.o-side:hover::after { content: attr(data-t); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 4px 9px; border-radius: 6px;
  background: rgba(14, 12, 20, .96); border: 1px solid var(--edge); font: 600 12px var(--f); color: #FFE08A; box-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.o-zz:hover::after { color: #C9A2FF; }
.hb-xpr { display: flex; align-items: center; gap: 6px; }
.hb-xpr .hb-xp { flex: 1; }
.xp-lv { flex: none; font: 800 11px/1 var(--f); color: #FFE7A8; text-shadow: 0 1px 2px #000; padding: 2px 6px; border-radius: 4px; background: rgba(14, 12, 20, .8); border: 1px solid var(--edge); }
.hb-money { align-self: center; display: flex; align-items: center; gap: 3px; padding: 0 10px; height: 34px; margin-right: 2px; border-radius: 8px; background: rgba(14, 12, 20, .78); border: 1px solid var(--edge); color: var(--gold); font-weight: 700; font-size: 13px; white-space: nowrap; pointer-events: auto; }
.sysbar { align-items: center; }
#b-inv.warn { border-color: #F08A80; box-shadow: 0 0 8px rgba(240, 138, 128, .6); }
.actions.sysdock { display: grid; justify-items: start; gap: 4px; }
.hb-money { height: 26px; padding: 0 9px; font-size: 12.5px; margin: 0; }
.feat { bottom: 102px; }
.log { bottom: 102px; }
/* 29/10/2026: o dung nhanh to bang o ky nang (tu co gian theo be ngang, toi da 50 px); chat hinh chu nhat nam ngang */
.actions.main.hb { width: min(1000px, calc(100% - 780px)); min-width: 0; }
.hb .skillbar .sk, .hb .quickbar .q { flex: 1 1 0; min-width: 0; max-width: 50px; width: auto; height: auto; aspect-ratio: 1; }
.hb .quickbar .q canvas { width: 72%; height: 72%; }
.hb .quickbar { justify-content: flex-start; gap: 4px; }
.hb .skillbar, .hb .quickbar { min-height: 0; }
.chatbox { width: 370px; height: 168px; }
@media (max-width: 1560px) {                                       /* khong du cho can giua: thanh duoi nam gon giua chat va cum nut phai */
  .actions.main.hb { left: 390px; right: 250px; width: auto; transform: none; }
}
@media (max-width: 1240px) { .chatbox { width: 300px; } .actions.main.hb { left: 320px; } }
@media (max-width: 1560px) { .chatbox { width: 310px; } .actions.main.hb { left: 330px; right: 246px; } .hb .quickbar, .hb .skillbar { gap: 3px; padding: 3px; } }

/* ================= 29/10/2026: ban do lon (phim M) ================= */
.sheet.bigmap { width: min(1180px, calc(100% - 40px)); height: min(820px, calc(100% - 40px)); max-height: none; overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr); z-index: 30; }
.bigmap header { gap: 14px; }
.bigmap header h2 { flex: 1; }
.bm-tabs { display: flex; gap: 4px; }
.bm-box { position: relative; min-height: 0; border-radius: 8px; overflow: hidden; background: #0B0D16; border: 1px solid var(--edge); }
#bm-cv { display: block; width: 100%; height: 100%; cursor: crosshair; }
.bm-world { display: grid; place-items: center; background: #0A1424; }
.bm-world[hidden] { display: none; }
.bm-wimg { position: relative; height: 100%; max-width: 100%; aspect-ratio: 1800 / 1275; }
.bm-wimg img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.bm-pins { position: absolute; inset: 0; }
.sheet .bm-pin { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; }
.bm-pin i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF3C4, #E0A22A 60%, #7A4E0E); border: 2px solid #2B1E0C; box-shadow: 0 0 0 1px #D6AE62, 0 2px 6px rgba(0, 0, 0, .8); transition: transform .15s; }
.bm-pin.city i { width: 18px; height: 18px; }
.bm-pin span { font: 700 11.5px var(--f); color: #FFF3D6; white-space: nowrap; padding: 1px 6px; border-radius: 4px; background: rgba(14, 12, 20, .82); border: 1px solid rgba(214, 174, 98, .35); }
.bm-pin:hover i, .bm-pin.sel i { transform: scale(1.3); }
.bm-pin.sel span { border-color: var(--gold); color: var(--gold); }
.bm-pin.here i { background: radial-gradient(circle at 35% 35%, #CFFFD0, #3FBF5A 60%, #145A24); animation: bmHere 1.4s ease-in-out infinite; }
.bm-pin.here span::before { content: '📍 '; }
@keyframes bmHere { 50% { box-shadow: 0 0 0 1px #D6AE62, 0 0 0 6px rgba(63, 191, 90, .35); } }
.bm-pin.lock i { filter: grayscale(1) brightness(.6); }
.bm-pin.lock span { color: #A8A2B4; }
.bm-card { position: absolute; right: 14px; bottom: 14px; width: 270px; display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; background: rgba(22, 18, 28, .97); border: 1px solid var(--gold); box-shadow: 0 6px 20px rgba(0, 0, 0, .6); }
.bm-card b { font-size: 16px; color: #FFE7A8; }
.bm-why { color: #F08A80; font-size: 12.5px; }
.bm-go { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bm-go .price { color: var(--gold); font-weight: 700; }
#mini { cursor: pointer; }
.bm-wimg { height: auto; max-width: none; aspect-ratio: auto; }
.bm-wimg img { object-fit: fill; }
.bm-world { overflow: hidden; }
/* cham ghim nam dung toa do: thanh tri ten o duoi cham, vung ten o tren cham (do chen nhau) */
.sheet .bm-pin { transform: translate(-50%, -7px); }
.sheet .bm-pin.city { transform: translate(-50%, -9px); }
.sheet .bm-pin:not(.city) { transform: translate(-50%, calc(-100% + 7px)); }
.bm-pin:not(.city) span { order: -1; font-size: 10.5px; }
/* 31/10/2026: phong to / keo ban do */
.bm-zoom { position: absolute; left: 10px; top: 10px; display: grid; gap: 4px; z-index: 3; }
.sheet .bm-zoom button { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; font: 700 17px/1 var(--f); border-radius: 6px; border: 1px solid var(--edge); background: rgba(14, 12, 20, .88); color: var(--ink); }
.sheet .bm-zoom button:hover { border-color: var(--gold); color: var(--gold); }
#bm-cv { cursor: grab; }
.bm-world { cursor: grab; }
.bm-wimg { transform-origin: 50% 50%; transition: transform .08s; will-change: transform; }
.sheet .bm-pin { transform: translate(-50%, -7px) scale(var(--iz, 1)); transform-origin: 50% 7px; }
.sheet .bm-pin.city { transform: translate(-50%, -9px) scale(var(--iz, 1)); transform-origin: 50% 9px; }
.sheet .bm-pin:not(.city) { transform: translate(-50%, calc(-100% + 7px)) scale(var(--iz, 1)); transform-origin: 50% calc(100% - 7px); }
.bm-card { z-index: 3; }

/* ---- tao nhan vat: chon phe tren ban do Lazaria (02/11/2026) ---- */
.create-card.cc { width: min(980px, calc(100% - 16px)); }
.ccw { position: relative; width: 100%; aspect-ratio: 1800 / 1275; max-height: calc(100vh - 235px); margin: 6px 0 0; overflow: hidden; border-radius: 10px; border: 2px solid #5a4630; background: #0A1424; }
.ccw-map { position: absolute; inset: 0; transition: transform .85s cubic-bezier(.65, 0, .25, 1), filter .85s; will-change: transform; }
.ccw-map img { width: 100%; height: 100%; display: block; user-select: none; }
.ccw.zoom .ccw-map { transform: scale(3.2); filter: brightness(.42) saturate(.8) blur(1.5px); }
.ccw.zoom .ccw-pins { opacity: 0; pointer-events: none; }
.ccw-pins { position: absolute; inset: 0; transition: opacity .3s; }
.help-card .ccw-flag { position: absolute; transform: translate(-12%, -92%); padding: 0; border: 0; background: none; cursor: pointer; display: grid; justify-items: start; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); transition: transform .15s, filter .15s; }
.ccw-flag svg { width: 16px; height: 22px; }
.ccw-flag.big svg { width: 38px; height: 54px; }
.ccw-flag b { margin: -4px 0 0 -10px; padding: 1px 6px; border-radius: 4px; background: rgba(12,10,16,.82); border: 1px solid var(--pc); color: var(--pc); font-size: 11px; white-space: nowrap; }
.help-card .ccw-flag:hover, .help-card .ccw-flag.hl, .help-card .ccw-flag:focus-visible { transform: translate(-12%, -92%) scale(1.18); filter: drop-shadow(0 0 6px var(--pc)) drop-shadow(0 2px 3px rgba(0,0,0,.7)); outline: none; }
.ccw-flag .cloth, .cc-flag .cloth { transform-origin: 6px 19px; animation: co-bay 1.6s ease-in-out infinite alternate; }
@keyframes co-bay { from { transform: skewY(-4deg) scaleX(.96); } to { transform: skewY(4deg) scaleX(1.02); } }
.ccw-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 20px; background: rgba(12,10,16,.82); border: 1px solid #8a6a3a; color: #FFE7A0; font-size: 13px; white-space: nowrap; pointer-events: none; }
.ccw-tip { position: absolute; z-index: 4; width: min(300px, 80%); padding: 10px 12px; border-radius: 8px; background: rgba(20,16,26,.96); border: 2px solid #8a6a3a; box-shadow: 0 8px 24px rgba(0,0,0,.6); font-size: 12.5px; line-height: 1.45; pointer-events: none; animation: tip-in .15s ease-out; }
.ccw-tip h4 { margin: 0 0 4px; font-size: 15px; }
.ccw-tip p { margin: 4px 0; }
@keyframes tip-in { from { opacity: 0; transform: translateY(4px); } }
.cc-step { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: 10px 12px; overflow: auto; animation: buoc-vao .45s ease-out; }
@keyframes buoc-vao { from { opacity: 0; transform: scale(.97); } }
.cc-phe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(12,10,16,.7); border: 1px solid var(--pc); }
.cc-flag svg { width: 26px; height: 36px; display: block; }
.cc-phe-t { display: grid; line-height: 1.25; } .cc-phe-t b { color: var(--pc); font-size: 15px; } .cc-phe-t span { color: var(--muted); font-size: 11.5px; }
.cc-buffs { display: flex; flex-wrap: wrap; gap: 6px; } .cc-buffs span { padding: 2px 8px; border-radius: 12px; border: 1px solid var(--pc); color: var(--pc); font-size: 12px; font-weight: 700; background: rgba(0,0,0,.3); }
.help-card .cc-change { margin-left: auto; padding: 4px 10px; font-size: 12.5px; }
.cc-step .cc-main { grid-template-columns: 180px 1fr; gap: 10px; }
.cc-step .cc-left, .cc-step .cc-right { background: rgba(10,8,14,.72); padding: 8px 10px; }
.cc-step .cc-stage { height: 150px; }
.cc-step #cr-prev { width: 96px; height: 112px; margin-bottom: 10px; }
.cc-step .cc-left .chips { margin-top: 6px; justify-content: center; }
.cc-step h3 { margin: 4px 0 4px; }
.cc-step .cc-2 { grid-template-columns: 1fr auto; gap: 10px; }
.cc-step .classes { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 5px; }
.cc-step .cc-info { margin-top: 6px; padding: 5px 8px; font-size: 12px; }
.cc-step .cc-tree { margin-top: 0; padding: 8px 10px; background: rgba(10,8,14,.72); }
.cc-tree-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cc-ics { display: flex; flex-wrap: wrap; gap: 5px; }
.help-card .cc-ic { position: relative; display: grid; justify-items: center; gap: 1px; width: 44px; padding: 3px 0 2px; background: rgba(255,255,255,.04); border: 1px solid #5a4630; border-radius: 6px; cursor: help; transition: transform .12s, border-color .12s; }
.cc-ic canvas { width: 32px; height: 32px; image-rendering: pixelated; border-radius: 4px; background: #1d1f25; }
.cc-ic i { font-style: normal; font-size: 9.5px; color: var(--muted); line-height: 1; }
.help-card .cc-ic.pas { border-style: dashed; }
.help-card .cc-ic:hover, .help-card .cc-ic:focus-visible { transform: translateY(-2px); border-color: #FFD45A; outline: none; }
.cc-more, .cc-nd { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
.cc-lbl { font-size: 11px; color: #FFD45A; text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }
.help-card .cc-chip { padding: 3px 9px; font-size: 12px; border-radius: 12px; border: 1px solid #5a4630; background: rgba(255,255,255,.05); cursor: help; }
.help-card .cc-chip.an { border-style: dashed; color: #C9A2FF; }
@media (max-width: 760px) {
  .ccw { aspect-ratio: auto; height: calc(100vh - 170px); max-height: none; }
  .ccw-map img { object-fit: cover; }
  .cc-step .cc-main { grid-template-columns: 1fr; }
  .cc-tree-row { grid-template-columns: 1fr; }
  .ccw-hint { white-space: normal; width: 90%; text-align: center; }
}
/* khung chi tiet ky nang khi re chuot (tao nhan vat + bang ky nang) */
.sktip { position: fixed; z-index: 1000; width: min(320px, calc(100vw - 12px)); padding: 10px 12px; border-radius: 8px; background: rgba(20,16,26,.97); border: 2px solid #8a6a3a; box-shadow: 0 10px 28px rgba(0,0,0,.65); color: var(--ink); font-size: 12.5px; line-height: 1.45; pointer-events: none; animation: tip-in .12s ease-out; }
.sktip[hidden] { display: none; }
.sktip h4 { margin: 0 0 3px; color: #FFD45A; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sktip p { margin: 3px 0; }
.st-sub { color: var(--muted); font-size: 11.5px; }
.st-note { color: var(--muted); font-size: 11.5px; font-style: italic; }
.st-lv { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 6px 0 2px; padding: 5px 7px; border-radius: 6px; background: rgba(0,0,0,.35); font-size: 12px; }
.st-k { color: #e8dcc4; font-weight: 700; white-space: nowrap; } .st-k.on { color: #9EE493; } .st-k.max { color: #FFD45A; }
.st-max { color: #FFE7A0; }
.st-list, .st-buff { margin: 4px 0; padding-left: 16px; } .st-list li { margin: 2px 0; } .st-list b { color: #FFD9A8; }
.st-buff li { color: #9EE493; font-weight: 700; }
.create-card.cc .cc-btns { position: static; margin: 8px 0 0; padding: 0; background: none; }
.create-card.cc .cc-btns .cc-ok[hidden] { display: none; }

/* ---- bang ky nang gon (02/11/2026): o bieu tuong + cham cap, chi tiet khi re chuot, thanh thao tac 1 dong ---- */
.skills { width: min(820px, calc(100% - 20px)); gap: 8px; }
.sk-help { margin-left: 2px; padding: 3px 9px; border-radius: 12px; border: 1px solid var(--edge); color: #FFD45A; font-size: 12px; cursor: help; }
.sk-top #sk-reset { margin-left: auto; }
.sk-slots { gap: 6px; }
.sk-slot { padding: 4px 8px 4px 4px; gap: 6px; font-size: 12px; }
.sk-slot.empty { opacity: .65; border-style: dashed; }
.sk-slot .sk-ic canvas { width: 36px; height: 36px; }
.sk-tree { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; padding: 8px; }
.sk-col { gap: 6px; padding: 6px; border: 1px solid rgba(255,255,255,.06); }
.sk-colh { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 24px; }
.sk-colh h4 { font-size: 12.5px; }
.sk-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet .sk-node { position: relative; display: grid; justify-items: center; gap: 2px; width: 64px; padding: 4px 2px 3px; grid-template-columns: none; text-align: center; cursor: pointer; border: 2px solid var(--edge); border-radius: 8px; background: #15121c; transition: transform .12s, border-color .12s, box-shadow .12s; }
.sheet .sk-node:hover, .sheet .sk-node:focus-visible { transform: translateY(-2px); outline: none; border-color: #FFD45A; }
.sk-node canvas { width: 40px; height: 40px; }
.sk-node > b { width: 100%; font-size: 10px; font-weight: 600; line-height: 1.15; color: #e8dcc4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-pip { display: flex; gap: 2px; } .sk-pip i { width: 6px; height: 6px; border-radius: 50%; background: #3a3244; border: 1px solid #5a4a36; } .sk-pip i.on { background: #FFD45A; border-color: #FFD45A; box-shadow: 0 0 4px rgba(255,212,90,.7); }
.sk-col .sk-node + .sk-node::before { content: none; }
.sheet .sk-node.pas { border-style: dashed; }
.sheet .sk-node .sk-lock { right: 3px; bottom: auto; top: 2px; font-size: 10px; }
.sheet .sk-node .sk-plus { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; border-radius: 50%; font-size: 14px; font-weight: 900; line-height: 1; color: #10240c; background: linear-gradient(#9be27a, #4fa83a); border: 2px solid #1c3a14; box-shadow: 0 0 8px rgba(111,207,111,.6); animation: sk-plus 1.4s ease-in-out infinite; }
@keyframes sk-plus { 50% { transform: scale(1.15); } }
.sk-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 0; padding: 6px 10px; }
.sk-detail button { padding: 3px 10px; font-size: 12px; }
.sk-branches { display: grid; gap: 6px; grid-template-columns: none; }
.sk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.sk-chip { padding: 3px 9px; font-size: 12px; border-radius: 12px; border: 1px solid #5a4630; background: rgba(255,255,255,.05); cursor: help; }
.sk-chip.an { border-style: dashed; color: #C9A2FF; }
.sk-ndb { display: inline-flex; align-items: center; gap: 3px; padding: 2px; border-radius: 14px; } .sk-ndb.cur { background: rgba(214,170,80,.15); }
.sk-ndb .sk-pick { padding: 2px 8px; font-size: 11px; }
.sk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sk-slot { min-width: 0; } .sk-slot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ban do lon (05/11/2026): may che roi tan khi mo / doi ban do; dau nhiem vu tren ghim the gioi */
.bm-cloud { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; border-radius: inherit; }
.bm-cloud i { position: absolute; top: -20%; width: 75%; height: 140%; opacity: 0; transition: transform .45s ease-in, opacity .3s;
  background: radial-gradient(closest-side, rgba(244,240,232,.98), rgba(214,210,224,.92) 55%, rgba(170,166,190,0) 100%),
    radial-gradient(closest-side at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%); filter: blur(2px); }
.bm-cloud i:nth-child(1) { left: -15%; transform: translateX(-90%); } .bm-cloud i:nth-child(2) { right: -15%; transform: translateX(90%); }
.bm-cloud i:nth-child(3) { left: 10%; top: -40%; transform: translateY(-90%); } .bm-cloud i:nth-child(4) { left: 15%; top: 40%; transform: translateY(90%); }
.bm-cloud.in i { opacity: 1; transform: none; }
.bm-cloud.in.now i { transition: none; }
.bm-cloud.out i { transition: transform .85s cubic-bezier(.3,.6,.3,1), opacity .85s ease-in; }
.bm-cloud.out i:nth-child(1) { transform: translateX(-110%); opacity: 0; } .bm-cloud.out i:nth-child(2) { transform: translateX(110%); opacity: 0; }
.bm-cloud.out i:nth-child(3) { transform: translateY(-110%); opacity: 0; } .bm-cloud.out i:nth-child(4) { transform: translateY(110%); opacity: 0; }
.bm-pin { position: relative; }
.bm-q { position: absolute; top: -18px; font: 900 15px var(--f); font-style: normal; line-height: 1; text-shadow: 0 0 3px #000, 0 0 2px #000; animation: bmq 1.1s ease-in-out infinite; }
.bm-q.main { color: #FFD45A; left: -2px; } .bm-q.side { color: #4FB4FF; right: -2px; }
@keyframes bmq { 50% { transform: translateY(-3px); } }
.bm-cloud::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease-in;
  background: radial-gradient(ellipse at 50% 45%, rgba(246,243,250,.97), rgba(214,210,228,.94) 60%, rgba(176,172,198,.9)); }
.bm-cloud.in::before { opacity: 1; }
.bm-cloud.in.now::before { transition: none; }
.bm-cloud.out::before { opacity: 0; transition: opacity .7s ease-out .15s; }
/* 02/11/2026: icon hieu ung sat ben trai binh mau; re chuot hien bang hieu ung tot / xau */
.hb .buffs { justify-self: end; margin-right: 22px; position: relative; flex-wrap: nowrap; pointer-events: auto; }
.hb .buff { position: relative; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: rgba(14, 12, 20, .85); border: 1px solid rgba(139, 209, 124, .55); }
.hb .buff.bad { border-color: rgba(240, 138, 128, .7); }
.hb .buff b { font: 800 11px/1 var(--f); color: #CFF5A0; }
.hb .buff.bad b { color: #FFB4A8; }
.hb .buff i { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); font: 600 9.5px var(--f); font-style: normal; color: #E9DCC4; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.fx-tip { display: none; position: absolute; bottom: calc(100% + 10px); right: 0; width: 270px; padding: 8px 10px; border-radius: 8px; background: rgba(14, 12, 20, .97); border: 1px solid var(--edge); box-shadow: 0 4px 14px rgba(0, 0, 0, .6); z-index: 9; gap: 6px; }
.buffs:hover .fx-tip { display: grid; }
.fx-tip h4 { margin: 0; font-size: 12px; color: var(--gold); }
.fx-row { display: grid; gap: 1px; font-size: 12px; }
.fx-row b { color: #9EE493; } .fx-row.bad b { color: #F08A80; }
.fx-row span { color: #D9CDB8; font-size: 11.5px; }
.fx-row em { font-style: normal; color: var(--muted); font-size: 11px; }
.fx-row em:empty { display: none; }
.inv-dur { margin: 0; font-size: 12px; color: var(--muted); }
.inv-dur.warn { color: #F08A80; }
.sysbar button[data-tip]:hover::after, .sysbar button[data-tip]:focus-visible::after { content: attr(data-tip); }
/* 02/11/2026: Cai dat (goc nhin, ngon ngu), nut con mat o mat khau, nut ngon ngu tren HUD */
.set-pane { display: grid; gap: 14px; }
.set-row { display: grid; gap: 6px; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, .25); border: 1px solid var(--edge); }
.set-cam { display: flex; align-items: center; gap: 10px; }
.set-cam input[type="range"] { flex: 1; max-width: 360px; accent-color: #D6AE62; }
.set-cam output { min-width: 48px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 38px; box-sizing: border-box; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 28px; padding: 0 !important; border: 0 !important; background: none !important; font-size: 16px; line-height: 1; cursor: pointer; opacity: .75; }
.pw-eye:hover { opacity: 1; }
.hud-lang { position: absolute; top: 18px; left: 266px; pointer-events: auto; z-index: 7; }
.hud-lang .lz-lang-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid #C89A52; background: rgba(42, 34, 22, .92); color: #FFE7B0; font: 700 12.5px var(--f); cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.hud-lang .lz-lang-btn:hover { background: #3A2F1C; }
.hud-lang .lz-lang-menu { left: 0; right: auto; }
.hud-lang .lz-lang-menu button, .set-lang .lz-lang-menu button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.hud-lang .lz-lang-menu button:hover, .set-lang .lz-lang-menu button:hover { background: rgba(255, 255, 255, .08); }
.hud-lang .lz-lang-menu button[aria-pressed="true"], .set-lang .lz-lang-menu button[aria-pressed="true"] { color: var(--gold); }
.set-lang { position: relative; justify-self: start; }
.set-lang .lz-lang-menu { left: 0; right: auto; }

/* nen dong man dang nhap / chon nhan vat / tao nhan vat (03/11/2026): che HUD trong phia sau */
#accs, #create { background: #07050C; }
:is(#accs, #create) .dn-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; background: #07050C url(img/nen_dn/1.webp) center / cover no-repeat; }
:is(#accs, #create) .dn-bg i { position: absolute; inset: -2%; background: center / cover no-repeat; opacity: 0; will-change: opacity, transform;
  animation: dnShow 42s linear infinite; animation-delay: calc(var(--n) * 7s - 1s); }
:is(#accs, #create) .dn-bg i:nth-child(1) { background-image: url(img/nen_dn/1.webp); } :is(#accs, #create) .dn-bg i:nth-child(2) { background-image: url(img/nen_dn/2.webp); }
:is(#accs, #create) .dn-bg i:nth-child(3) { background-image: url(img/nen_dn/3.webp); } :is(#accs, #create) .dn-bg i:nth-child(4) { background-image: url(img/nen_dn/4.webp); }
:is(#accs, #create) .dn-bg i:nth-child(5) { background-image: url(img/nen_dn/5.webp); } :is(#accs, #create) .dn-bg i:nth-child(6) { background-image: url(img/nen_dn/6.webp); }
:is(#accs, #create) .dn-bg i:nth-child(even) { transform-origin: 30% 60%; } :is(#accs, #create) .dn-bg i:nth-child(odd) { transform-origin: 70% 40%; }
@keyframes dnShow { 0% { opacity: 0; transform: scale(1.03); } 4% { opacity: 1; } 17% { opacity: 1; } 21% { opacity: 0; transform: scale(1.13); } 100% { opacity: 0; transform: scale(1.13); } }
/* 04/11/2026: video nen man dang nhap: hien dan khi bat dau phat, tranh trinh chieu nam duoi lam du phong */
#accs .dn-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
#accs.vid-on .dn-vid { opacity: 1; }
#accs.vid-on .dn-bg i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { #accs .dn-vid { display: none; } }
:is(#accs, #create) .dn-bg::after { content: ''; position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse at 50% 45%, rgba(7,5,12,.15) 0%, rgba(7,5,12,.55) 60%, rgba(7,5,12,.9) 100%), linear-gradient(180deg, rgba(7,5,12,.35), transparent 30%, transparent 70%, rgba(7,5,12,.7)); }
:is(#accs, #create) .dn-dust { position: absolute; inset: 0; z-index: 1; opacity: .55; mix-blend-mode: screen;
  background-image: radial-gradient(1.5px 1.5px at 12% 30%, #E9D5FF, transparent), radial-gradient(1px 1px at 33% 72%, #C4B5FD, transparent), radial-gradient(2px 2px at 58% 18%, #F5D0FE, transparent),
    radial-gradient(1px 1px at 76% 54%, #DDD6FE, transparent), radial-gradient(1.5px 1.5px at 90% 82%, #E9D5FF, transparent), radial-gradient(1px 1px at 46% 46%, #FDE68A, transparent);
  background-size: 420px 420px; animation: dnDust 40s linear infinite; }
:is(#accs, #create) .dn-dust2 { background-size: 640px 640px; opacity: .35; animation: dnDust2 65s linear infinite; filter: blur(.6px); }
@keyframes dnDust { to { background-position: 60px -420px; } } @keyframes dnDust2 { to { background-position: -80px -640px; } }
#accs .accs-card { position: relative; z-index: 1; background: rgba(20,15,28,.82); backdrop-filter: blur(6px); box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(167,139,250,.12); }
#create .create-card { position: relative; z-index: 1; box-shadow: 0 24px 70px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) { :is(#accs, #create) .dn-bg i, :is(#accs, #create) .dn-dust { animation: none; } }

/* ================= GIAO DIEN FANTASY (03/11/2026): Tui do, The Mao Hiem Gia, Ren / Kham, Cua hang NPC, Cho dau gia =================
   Ap cho .sheet.fx (inv, pts, shop, gp). Goc hoa van la anh nen nen khong cuon theo noi dung; mau do hiem van lay tu style inline cua tung o.
   Sinh bang 05 - Ma nguon/stats_work/fx_css.py tu fx/fx.css: sua fx.css roi chay lai. */
.sheet.fx { --fx-g: #E6C27A; --fx-g2: #9C7438; --fx-ink: #F1E6CE; --fx-mu: #B9A887; --fx-cell: #140E12;
  color: var(--fx-ink); border: 1px solid #6E5330; border-radius: 8px; padding: 16px 18px 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg transform=''%3E%3Cg fill='none' stroke='%23D9B46A' stroke-width='1.4'%3E%3Cpath d='M3 44V11q0-8 8-8h33'/%3E%3Cpath d='M8 44V16q0-8 8-8h28' opacity='.45'/%3E%3Cpath d='M3 3l9 9' stroke-width='1'/%3E%3Cpath d='M14 3q3 7 10 9M3 14q7 3 9 10' opacity='.7'/%3E%3C/g%3E%3Cpath d='M3 3h5l-5 5z' fill='%23F2D58E'/%3E%3Ccircle cx='13' cy='13' r='2.6' fill='%23F2D58E' stroke='%237A5320' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E") left 3px top 3px / 46px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg transform='translate(46 0) scale(-1 1)'%3E%3Cg fill='none' stroke='%23D9B46A' stroke-width='1.4'%3E%3Cpath d='M3 44V11q0-8 8-8h33'/%3E%3Cpath d='M8 44V16q0-8 8-8h28' opacity='.45'/%3E%3Cpath d='M3 3l9 9' stroke-width='1'/%3E%3Cpath d='M14 3q3 7 10 9M3 14q7 3 9 10' opacity='.7'/%3E%3C/g%3E%3Cpath d='M3 3h5l-5 5z' fill='%23F2D58E'/%3E%3Ccircle cx='13' cy='13' r='2.6' fill='%23F2D58E' stroke='%237A5320' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E") right 3px top 3px / 46px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg transform='translate(0 46) scale(1 -1)'%3E%3Cg fill='none' stroke='%23D9B46A' stroke-width='1.4'%3E%3Cpath d='M3 44V11q0-8 8-8h33'/%3E%3Cpath d='M8 44V16q0-8 8-8h28' opacity='.45'/%3E%3Cpath d='M3 3l9 9' stroke-width='1'/%3E%3Cpath d='M14 3q3 7 10 9M3 14q7 3 9 10' opacity='.7'/%3E%3C/g%3E%3Cpath d='M3 3h5l-5 5z' fill='%23F2D58E'/%3E%3Ccircle cx='13' cy='13' r='2.6' fill='%23F2D58E' stroke='%237A5320' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E") left 3px bottom 3px / 46px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg transform='translate(46 46) scale(-1 -1)'%3E%3Cg fill='none' stroke='%23D9B46A' stroke-width='1.4'%3E%3Cpath d='M3 44V11q0-8 8-8h33'/%3E%3Cpath d='M8 44V16q0-8 8-8h28' opacity='.45'/%3E%3Cpath d='M3 3l9 9' stroke-width='1'/%3E%3Cpath d='M14 3q3 7 10 9M3 14q7 3 9 10' opacity='.7'/%3E%3C/g%3E%3Cpath d='M3 3h5l-5 5z' fill='%23F2D58E'/%3E%3Ccircle cx='13' cy='13' r='2.6' fill='%23F2D58E' stroke='%237A5320' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E") right 3px bottom 3px / 46px no-repeat,
    radial-gradient(120% 70% at 50% -10%, rgba(230,194,122,.13), transparent 62%),
    radial-gradient(90% 60% at 50% 110%, rgba(120,60,160,.12), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,240,210,.014) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #241B29 0%, #17111C 55%, #110C14 100%);
  box-shadow: 0 0 0 1px #050307, 0 0 0 4px #1C130D, 0 0 0 5px #8C6A36, 0 0 0 6px #2A1C10, 0 22px 60px rgba(0,0,0,.72), inset 0 0 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,225,160,.14); }
.sheet.fx header { position: relative; padding: 0 6px 10px; margin-bottom: 2px; }
.sheet.fx header::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--fx-g2) 20%, var(--fx-g) 50%, var(--fx-g2) 80%, transparent); }
.sheet.fx header::before { content: ''; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px; margin-left: -4px; transform: rotate(45deg); background: var(--fx-g); box-shadow: 0 0 8px rgba(230,194,122,.7); }
.sheet.fx h2 { font-family: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif; font-weight: 700; font-size: 23px; letter-spacing: .05em; line-height: 1.15;
  background: linear-gradient(180deg, #FFEFB8 0%, #E8B95A 50%, #A8742C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
.sheet.fx h2, .sheet.fx h3, .sheet.fx .shop-grid .head, .sheet.fx .inv-who, .advc { font-variant-numeric: lining-nums; }
.sheet.fx h3, .sheet.fx .shop-grid .head { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--fx-g); letter-spacing: .06em; }
.sheet.fx h3 { font-size: 17px; } .sheet.fx .shop-grid .head { font-size: 14px; font-weight: 700; text-transform: none; }
.sheet.fx .note, .sheet.fx .inv-hint { color: var(--fx-mu); }
/* nut dong thau */
.sheet.fx button:not(.slot):not(.cell):not(.km-sock):not(:has(> canvas.ico)) { background: linear-gradient(180deg, #3D2D1E 0%, #261A11 100%); border: 1px solid #8A6A38; color: #F3E3BC; border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,225,160,.2), inset 0 -1px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.5); text-shadow: 0 1px 0 rgba(0,0,0,.6); transition: border-color .12s, box-shadow .12s, color .12s; }
.sheet.fx button:not(.slot):not(.cell):not(.km-sock):not(:has(> canvas.ico)):hover:not(:disabled) { border-color: var(--fx-g); color: #FFF6DC; box-shadow: inset 0 1px 0 rgba(255,225,160,.3), 0 0 10px rgba(230,194,122,.35); }
.sheet.fx button.ghost:not(.slot):not(.cell) { background: rgba(255,240,210,.03); border-color: rgba(156,116,56,.55); color: var(--fx-mu); box-shadow: none; }
.sheet.fx button:disabled { opacity: .42; }
.sheet.fx #bag-act:not(:disabled), .sheet.fx #pts-ok:not(:disabled), .sheet.fx .shop-grid .card .foot button:not(:disabled), .sheet.fx .km-act button:not(:disabled):not(.ghost) {
  background: linear-gradient(180deg, #D3A553 0%, #8E6427 100%); border-color: #F2D58E; color: #1B1208; text-shadow: 0 1px 0 rgba(255,240,200,.45); font-weight: 700; }
/* tab: the danh dau sach */
.sheet.fx .tabs { gap: 3px; border-bottom: 1px solid rgba(230,194,122,.28); }
.sheet.fx .tabs button { border-radius: 7px 7px 0 0 !important; margin-bottom: -1px; padding: 5px 14px; }
.sheet.fx .tabs button[aria-pressed="true"] { background: linear-gradient(180deg, #4E3A22, #2A1E13) !important; color: var(--fx-g) !important; border-color: var(--fx-g2) !important; border-bottom-color: transparent !important;
  box-shadow: inset 0 2px 0 var(--fx-g), 0 -4px 12px rgba(230,194,122,.15) !important; }
.sheet.fx .tabs button[aria-pressed="false"] { background: rgba(255,240,210,.03) !important; color: var(--fx-mu) !important; border-color: rgba(156,116,56,.35) !important; box-shadow: none !important; }
.sheet.fx .shop-grid .cats { border-bottom-color: rgba(230,194,122,.2); }
.sheet.fx .shop-grid .cats button { background: transparent !important; border: 0 !important; border-bottom: 2px solid transparent !important; box-shadow: none !important; border-radius: 0 !important; color: var(--fx-mu) !important; }
.sheet.fx .shop-grid .cats button[aria-pressed="true"] { color: var(--fx-g) !important; border-bottom-color: var(--fx-g) !important; }
/* o do: khe khac lom */
.sheet.fx .slot, .sheet.fx .cell { background: radial-gradient(circle at 50% 38%, rgba(255,240,210,.07), transparent 62%), var(--fx-cell); border-color: #4E3C26; border-radius: 7px;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,225,160,.07); transition: box-shadow .12s, transform .12s; }
.sheet.fx .slot:hover:not(:disabled), .sheet.fx .cell:hover:not(:disabled) { box-shadow: inset 0 2px 7px rgba(0,0,0,.6), 0 0 0 1px rgba(230,194,122,.55), 0 0 12px rgba(230,194,122,.3); transform: translateY(-1px); }
.sheet.fx .slot.sel, .sheet.fx .cell.sel { outline: 2px solid var(--fx-g); outline-offset: 1px; background: radial-gradient(circle, rgba(230,194,122,.22), rgba(40,28,14,.9)); }
.sheet.fx .slot > span { color: rgba(185,168,135,.6); font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 12.5px; }
/* nut chua bieu tuong vat pham (luoi chon do o cho, ruong, xuong...): ve nhu o do */
.sheet.fx button:has(> canvas.ico):not(.slot):not(.cell) { background: radial-gradient(circle at 50% 38%, rgba(255,240,210,.07), transparent 62%), var(--fx-cell); border: 1px solid #4E3C26; border-radius: 6px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7); }
.sheet.fx button:has(> canvas.ico):not(.slot):not(.cell):hover:not(:disabled) { box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 1px rgba(230,194,122,.55), 0 0 10px rgba(230,194,122,.3); }
.sheet.fx .gp-grid button.on { outline-color: var(--fx-g); box-shadow: 0 0 12px rgba(230,194,122,.5); }
.sheet.fx .cho-bar button[aria-pressed="true"] { background: linear-gradient(180deg, #D3A553, #8E6427); color: #1B1208; border-color: #F2D58E; text-shadow: none; }
.sheet.fx .cho-form, .sheet.fx .cho-sell > div { border-radius: 8px; }
.sheet.fx .cho-form { padding: 10px 12px; border: 1px solid rgba(156,116,56,.45); background: linear-gradient(180deg, rgba(60,44,30,.35), rgba(20,14,10,.5)); }
/* hinh nhan trang bi: vong phap tran sau cac o */
.sheet.fx .doll { position: relative; padding: 8px 4px; border-radius: 10px;
  background: radial-gradient(circle at 50% 50%, rgba(140,90,200,.18), transparent 60%), radial-gradient(circle at 50% 50%, transparent 52%, rgba(230,194,122,.16) 53%, transparent 54.5%), radial-gradient(circle at 50% 50%, transparent 37%, rgba(230,194,122,.1) 38%, transparent 39.5%); }
.sheet.fx .inv-who { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px; font-weight: 700; color: #F6E7C1; }
.sheet.fx .inv-money, .sheet.fx .shop-money { padding: 3px 10px; border-radius: 99px; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(40,28,14,.5)); border: 1px solid rgba(156,116,56,.6); }
.sheet.fx .stats { padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(156,116,56,.45); background: linear-gradient(180deg, rgba(0,0,0,.32), rgba(30,20,12,.35)); }
.sheet.fx .stats dt { color: var(--fx-mu); } .sheet.fx .stats dd { color: #F6E7C1; }
.sheet.fx .stats .stat-pt { background: linear-gradient(180deg, #5A3F16, #3A2810) !important; border-color: var(--fx-g) !important; color: #FFE39A !important; }
/* the hang hoa (cua hang, cho dau gia, ren, bang Hoi) */
.sheet.fx .shop-grid .card, .sheet.fx .ren-grid .ren, .sheet.fx .shop-list li:not(.total):not(.empty):not(.note), .sheet.fx .gp-body li:not(.empty):not(.note):not(.km) {
  background: linear-gradient(180deg, rgba(60,44,30,.4), rgba(24,17,12,.55)); border: 1px solid rgba(156,116,56,.38); box-shadow: inset 0 1px 0 rgba(255,225,160,.06); }
.sheet.fx .shop-grid .card:hover, .sheet.fx .ren-grid .ren:hover, .sheet.fx .shop-list li:not(.total):not(.empty):not(.note):hover, .sheet.fx .gp-body li:not(.empty):not(.note):not(.km):hover {
  border-color: rgba(230,194,122,.75); background: linear-gradient(180deg, rgba(90,64,34,.45), rgba(30,21,13,.6)); }
.sheet.fx .price { color: #F6D27A; }
.sheet.fx .ren-grid .pips i { background: #120D10; border-color: #4E3C26; }
.sheet.fx .ren-grid .pips i.on { background: radial-gradient(circle at 40% 35%, #FFF0B8, #E6B44E 60%, #9A6A20); border-color: #F2D58E; box-shadow: 0 0 6px rgba(255,212,90,.7); }
.sheet.fx .ren-grid .chance { background: #120D10; border: 1px solid #4E3C26; }
.sheet.fx .ren-grid .chance i { background: linear-gradient(90deg, #3F8A4A, #8BD17C); } .sheet.fx .ren-grid .chance.low i { background: linear-gradient(90deg, #8A2E22, #E8735A); }
.sheet.fx input:not([type=checkbox]):not([type=radio]):not([type=range]), .sheet.fx select { background: #120D10 !important; border: 1px solid #6E5330 !important; color: var(--fx-ink) !important; border-radius: 5px; }
.sheet.fx input:focus, .sheet.fx select:focus { outline: none; border-color: var(--fx-g) !important; box-shadow: 0 0 0 2px rgba(230,194,122,.2); }
.sheet.fx .gp-body h3 { border-bottom: 1px solid rgba(230,194,122,.2); padding-bottom: 3px; }
/* kham da: hoc ngoc (giu nguyen mau o da da kham / o trong cua game) */
.sheet.fx .km, .sheet.fx .km-act { border: 1px solid rgba(156,116,56,.45); box-shadow: inset 0 0 24px rgba(0,0,0,.45); }
.sheet.fx .km { background: radial-gradient(120% 90% at 50% 0%, rgba(120,90,200,.16), rgba(20,14,18,.6) 65%); }
.sheet.fx .km-sock:not(.gem):not(.empty):not(.drop) { background: radial-gradient(circle at 50% 40%, rgba(255,240,210,.08), #0E0A0D 70%); border-color: #6E5330;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.8), 0 0 0 3px rgba(20,14,10,.9), 0 0 0 4px rgba(156,116,56,.5); }
.sheet.fx .km-sock.closed.next { border-color: var(--fx-g); color: var(--fx-g); }
.sheet.fx .km-sock em { background: #1A120C; border-color: #6E5330; }
/* the Mao Hiem Gia nho trong tui: manh giay da */
.sheet.fx .adv-card { background: linear-gradient(135deg, #EADBB5, #CDB582); color: #3A2812; border: 1px solid #8A6A38; box-shadow: inset 0 0 0 2px rgba(255,250,235,.4), 0 2px 6px rgba(0,0,0,.45); }
.sheet.fx .adv-card .note { color: #5A4426; }
.sheet.fx .adv-card.click:hover { border-color: #F2D58E; box-shadow: inset 0 0 0 2px rgba(255,250,235,.5), 0 0 12px rgba(230,194,122,.5); }
/* ---- The Mao Hiem Gia day du: giay phep Hoi tren giay da, dau sap do in hang ---- */
.advc-pop { background: rgba(6,4,8,.62); backdrop-filter: blur(3px); }
.advc { position: relative; color: #3A2812; border-radius: 10px; border: 2px solid #7A5A2C; padding: 14px 18px 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%236B4A1E' stroke-width='1.2' opacity='.18'%3E%3Ccircle cx='60' cy='60' r='54'/%3E%3Ccircle cx='60' cy='60' r='46'/%3E%3Cpath d='M60 10l12 36h38l-31 22 12 37-31-23-31 23 12-37-31-22h38z'/%3E%3C/g%3E%3C/svg%3E") 50% 58% / 210px no-repeat, radial-gradient(ellipse at 50% 35%, #F6EACD 0%, #E4CF9F 62%, #C9AD72 100%);
  box-shadow: inset 0 0 0 4px #EFE2C2, inset 0 0 0 5px #9A7840, inset 0 0 40px rgba(120,80,30,.4), 0 22px 60px rgba(0,0,0,.65); }
.advc::before { content: ''; position: absolute; top: -2px; left: 22px; width: 26px; height: 46px; background: var(--rk); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.advc-h { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; letter-spacing: .2em; color: #6B3A10 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  text-shadow: 0 1px 0 #FFF6DC, 0 -1px 0 rgba(90,50,10,.25) !important; margin: 0 auto 10px; padding: 2px 0 6px; position: relative; }
.advc-h::after { content: '❖  ✦  ❖'; display: block; font-size: 10px; letter-spacing: .4em; color: #9A7840; text-shadow: none; margin-top: 2px; }
.advc-face { border: 3px solid #8A6A38 !important; border-radius: 4px; box-shadow: 0 0 0 2px #EFE2C2, 0 0 0 3px #9A7840, 0 3px 8px rgba(60,40,10,.35);
  background: radial-gradient(circle at 50% 30%, #6E5A8A, #2E2240 75%) !important; }
.advc-info li::before { content: '❖' !important; color: #9A7840 !important; font-size: 10px; }
.advc-info i { color: #6B5230 !important; } .advc-info b { color: #24170A !important; }
.advc-info .adv-rank { background: radial-gradient(circle at 40% 35%, #D64A3A, #8E1E16 70%) !important; color: #FFE7B5 !important; border: 0 !important; border-radius: 99px;
  box-shadow: inset 0 0 0 2px rgba(255,200,150,.35), 0 2px 4px rgba(60,10,5,.45) !important; padding: 2px 10px !important; letter-spacing: .08em; }
.advc-st { background: rgba(255,250,235,.38) !important; border: 1px solid #A88A55 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.advc-bar { border-bottom-color: rgba(90,60,20,.2) !important; } .advc-bar b { color: #24170A; }
.advc-bar.hp i { color: #A02B22 !important; } .advc-bar.mp i { color: #2A5BA8 !important; } .advc-bar.tl i { color: #3D7A2E !important; }
.advc-st dt { color: #6B5230 !important; } .advc-st dd { color: #24170A; }
.advc-sk { border-top-color: rgba(90,60,20,.25) !important; } .advc-sk span { color: #7A5220 !important; }
.advc-sk canvas { border-color: #8A6A38 !important; background: #2A1E14 !important; }
.advc-f { border-top: 1px dashed #9A7840 !important; }
.advc-bc { background: #2A1E14 !important; border-radius: 3px; }
.advc-id { color: #3A2812 !important; font-weight: 700; }
.advc-pts { color: #6B3A10 !important; }
@media (max-width: 560px) { .sheet.fx { padding: 12px 10px 10px; } .sheet.fx h2 { font-size: 20px; } .sheet.fx .adv-card { max-width: 100%; box-sizing: border-box; } }