/* mobile.css */
/*
 * Colong Web - giao dien MOBILE (man hinh doc + ngang). Nguyen tac: moi nut >= 44 px, chu >= 13 px, khong can chuot.
 * body[data-ui] = desktop | portrait | landscape (uimode.js).
 */
:root {
  --m-gold: #e8c46a; --m-gold-d: #8a6a2a; --m-ink: #1a120b; --m-panel: rgba(24, 17, 12, .94); --m-line: rgba(232, 196, 106, .45);
  --m-text: #f3e9d2; --m-dim: #b9a98a; --m-hp: #e2553f; --m-sp: #3f8fe2; --m-exp: #d6b24a; --m-ok: #6fd27a;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --nav-h: 58px;
}

/* thanh go loi cu: chi hien khi bat "Cong cu thu nghiem" trong menu */
#top { display: none !important; }
body.dev-tools #top { display: flex !important; bottom: calc(var(--sab) + 150px); z-index: 4; }
/* joystick chi cho cam ung */
body[data-ui="desktop"] #joy { display: none !important; }
body[data-ui="portrait"] #joy { left: calc(var(--sal) + 18px) !important; bottom: calc(var(--sab) + var(--nav-h) + 26px) !important; }
body[data-ui="landscape"] #joy { left: calc(var(--sal) + 26px) !important; bottom: calc(var(--sab) + 22px) !important; }
body.m-busy #joy { display: none !important; }

#mui { display: none; }
body[data-ui="portrait"] #mui, body[data-ui="landscape"] #mui { display: block; }
#mui, #mui * { box-sizing: border-box; }
#mui { position: fixed; inset: 0; pointer-events: none; z-index: 3; font: 14px/1.3 system-ui, "Segoe UI", sans-serif; color: var(--m-text); }
#mui button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* ---------- khung nhan vat (tren trai) + ban do (tren phai) ---------- */
.m-chip { position: absolute; pointer-events: auto; background: linear-gradient(180deg, rgba(44, 30, 18, .92), rgba(20, 13, 8, .92)); border: 1px solid var(--m-line); border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
#mChar { left: calc(var(--sal) + 8px); top: calc(var(--sat) + 8px); display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; min-width: 176px; }
#mChar canvas { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--m-gold); background: #2a1c10; image-rendering: pixelated; flex: none; }
#mChar .m-name { font-weight: 600; font-size: 13px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
#mChar .m-name small { color: var(--m-gold); font-weight: 600; margin-left: 4px; }
.m-bar { position: relative; height: 9px; width: 118px; margin-top: 3px; background: rgba(0, 0, 0, .55); border-radius: 5px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .6); }
.m-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; transition: width .25s; }
.m-bar.hp i { background: linear-gradient(180deg, #ff8a6f, var(--m-hp)); } .m-bar.sp i { background: linear-gradient(180deg, #7fc1ff, var(--m-sp)); }
.m-bar.exp { height: 4px; } .m-bar.exp i { background: var(--m-exp); }
.m-bar span { position: absolute; inset: 0; font-size: 8px; line-height: 8px; text-align: center; color: #fff; text-shadow: 0 0 2px #000; }
/* ban do nho hinh tron (mobile.js drawMini) + ten ban do / toa do ben duoi; cham = ban do lon */
#mMap { right: calc(var(--sar) + 8px); top: calc(var(--sat) + 6px); width: 96px; padding: 0; text-align: center; background: none; border: 0; box-shadow: none; }
#mMap .m-mini { display: block; width: 88px; height: 88px; margin: 0 auto; border-radius: 50%; border: 2px solid var(--m-gold); background: #10151d; box-shadow: 0 2px 8px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .6); }
#mMap b { display: block; margin-top: 2px; font-size: 12px; color: var(--m-gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#mMap small { display: block; font-size: 11px; color: #eef2f7; white-space: nowrap; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
body[data-ui="landscape"] #mMap { width: 88px; } body[data-ui="landscape"] #mMap .m-mini { width: 76px; height: 76px; }
/* nut AUTO: tu dong tim quai ngoai tran */
.m-auto { position: absolute; pointer-events: auto; width: 52px; height: 52px; border-radius: 50%; padding: 0; border: 2px solid var(--m-gold-d); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: radial-gradient(circle at 35% 30%, rgba(74, 52, 30, .95), rgba(20, 13, 8, .95)); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); color: var(--m-gold); }
.m-auto b { font-size: 13px; line-height: 14px; letter-spacing: .03em; }
.m-auto small { font-size: 8px; line-height: 10px; color: var(--m-dim); }
.m-auto.on { border-color: var(--m-ok); color: #b8ffbf; box-shadow: 0 0 10px rgba(111, 210, 122, .7), 0 2px 6px rgba(0, 0, 0, .6); }
.m-auto.on small { color: #b8ffbf; }
.m-auto:active { transform: scale(.94); }
body[data-ui="portrait"] .m-auto { left: calc(var(--sal) + 152px); bottom: calc(var(--sab) + var(--nav-h) + 30px); }
body[data-ui="landscape"] .m-auto { left: calc(var(--sal) + 60px); bottom: calc(var(--sab) + 152px); }
body.m-battle .m-auto, body.m-busy .m-auto { display: none; }

/* ---------- thanh dieu huong ---------- */
#mNav { position: absolute; pointer-events: auto; display: flex; }
.m-nav-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: none; border: 0; min-width: 52px; min-height: 52px; padding: 0; }
.m-nav-btn .ic { font-size: 24px; line-height: 26px; filter: drop-shadow(0 1px 2px #000); }
.m-nav-btn .lb { font-size: 11px; color: var(--m-text); text-shadow: 0 1px 2px #000; }
.m-nav-btn:active { transform: scale(.94); }
.m-nav-btn .badge { position: absolute; top: 2px; right: 8px; min-width: 17px; height: 17px; border-radius: 9px; background: #d43f3f; color: #fff; font-size: 11px; line-height: 17px; text-align: center; padding: 0 4px; display: none; }
body[data-ui="portrait"] #mNav { left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + var(--sab)); padding: 0 var(--sar) var(--sab) var(--sal);
  background: linear-gradient(180deg, rgba(50, 34, 20, .96), rgba(18, 12, 7, .98)); border-top: 1px solid var(--m-line); justify-content: space-around; align-items: center; }
body[data-ui="portrait"] .m-nav-btn { flex: 1; height: var(--nav-h); }
body[data-ui="landscape"] #mNav { right: calc(var(--sar) + 8px); bottom: calc(var(--sab) + 8px); flex-wrap: wrap; justify-content: flex-end; gap: 6px; width: 190px; }
body[data-ui="landscape"] .m-nav-btn { width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(74, 52, 30, .95), rgba(20, 13, 8, .95)); border: 1px solid var(--m-line); box-shadow: 0 2px 6px rgba(0, 0, 0, .55); }
body[data-ui="landscape"] .m-nav-btn .lb { font-size: 10px; } body[data-ui="landscape"] .m-nav-btn .ic { font-size: 21px; line-height: 22px; }

/* dong chat */
#chatLog { z-index: 3; }
body[data-ui="portrait"] #chatLog { left: calc(var(--sal) + 10px) !important; bottom: calc(var(--sab) + var(--nav-h) + 160px) !important; max-width: calc(var(--vw, 1vw) * 70) !important; }
body[data-ui="landscape"] #chatLog { left: calc(var(--sal) + 170px) !important; bottom: calc(var(--sab) + 12px) !important; max-width: calc(var(--vw, 1vw) * 40) !important; }
#toast { z-index: 60; max-width: calc(var(--vw, 1vw) * 86); text-align: center; }
body[data-ui="portrait"] #toast, body[data-ui="landscape"] #toast { top: 24%; border-radius: 14px; font-size: 14px; border: 1px solid var(--m-line); }

/* ---------- tran danh ---------- */
body.m-battle #mNav, body.m-battle #mMap { display: none !important; }
#mBattle { display: none; position: absolute; pointer-events: auto; }
body.m-battle #mBattle { display: grid; }
.m-cmd { min-height: 54px; border-radius: 12px; border: 1px solid var(--m-line); background: linear-gradient(180deg, rgba(70, 48, 26, .96), rgba(26, 17, 10, .96)); font-size: 15px; font-weight: 600; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.m-cmd small { font-size: 10px; font-weight: 400; color: var(--m-dim); }
.m-cmd.main { background: linear-gradient(180deg, #a9441f, #5c1f0c); border-color: #ffb27a; }
.m-cmd.on { border-color: var(--m-ok); color: var(--m-ok); }
.m-cmd:disabled { opacity: .4; }
.m-cmd:active { transform: scale(.96); }
body[data-ui="portrait"] #mBattle { left: 8px; right: 8px; bottom: calc(var(--sab) + 8px); grid-template-columns: repeat(3, 1fr); gap: 8px; }
body[data-ui="landscape"] #mBattle { right: calc(var(--sar) + 10px); bottom: calc(var(--sab) + 10px); grid-template-columns: repeat(2, 104px); gap: 7px; }
body[data-ui="landscape"] .m-cmd { min-height: 48px; font-size: 14px; }
#mBatLog { display: none; position: absolute; left: 50%; transform: translateX(-50%); width: min(calc(var(--vw, 1vw) * 92), 560px); text-align: center; font-size: 12px; line-height: 1.35; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none; }
body.m-battle #mBatLog { display: block; }
body[data-ui="portrait"] #mBatLog { bottom: calc(var(--sab) + 140px); }
body[data-ui="landscape"] #mBatLog { bottom: calc(var(--sab) + 8px); width: calc(var(--vw, 1vw) * 44); }
#mTurn { display: none; position: absolute; left: 50%; top: calc(var(--sat) + 70px); transform: translateX(-50%); padding: 4px 14px; border-radius: 999px; background: rgba(0, 0, 0, .6); border: 1px solid var(--m-line); font-size: 13px; }
body.m-battle #mTurn { display: none; }
body[data-ui="landscape"] #mTurn { top: calc(var(--sat) + 8px); }
/* tren mobile bo giao dien tran kieu HTML cu (chi con trong cong cu thu nghiem) */
body[data-ui="portrait"] #battleUi > *, body[data-ui="landscape"] #battleUi > * { display: none !important; }
body.dev-tools[data-ui="portrait"] #battleTop, body.dev-tools[data-ui="landscape"] #battleTop { display: flex !important; flex-wrap: wrap; top: calc(var(--sat) + 100px) !important; left: 8px; }

/* ---------- bang (tui do, nhiem vu, ban be, menu, chieu thuc, nhan vat) ---------- */
.m-sheet { position: fixed; z-index: 20; pointer-events: auto; background: var(--m-panel); border: 1px solid var(--m-line); color: var(--m-text); box-shadow: 0 -6px 30px rgba(0, 0, 0, .7); display: none; flex-direction: column; font: 14px/1.35 system-ui, "Segoe UI", sans-serif; }
.m-sheet.open { display: flex; }
.m-sheet .m-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--m-line); background: linear-gradient(180deg, rgba(74, 50, 26, .9), rgba(34, 22, 12, .9)); }
.m-sheet .m-head b { flex: 1; font-size: 16px; color: var(--m-gold); }
.m-x { width: 44px; height: 40px; border-radius: 10px; border: 1px solid var(--m-line); background: rgba(0, 0, 0, .35); color: var(--m-text); font-size: 20px; }
.m-sheet .m-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px calc(12px + var(--sab)); }
body[data-ui="portrait"] .m-sheet { left: 0; right: 0; bottom: 0; max-height: calc(var(--vh, 1vh) * 82); min-height: calc(var(--vh, 1vh) * 40); border-radius: 16px 16px 0 0; border-bottom: 0; }
body[data-ui="landscape"] .m-sheet { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(calc(var(--vw, 1vw) * 92), 760px); max-height: calc(var(--vh, 1vh) * 92); border-radius: 14px; }
body[data-ui="desktop"] .m-sheet { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 520px; max-height: calc(var(--vh, 1vh) * 84); border-radius: 12px; }
#mShade { position: fixed; inset: 0; z-index: 19; background: rgba(0, 0, 0, .45); display: none; pointer-events: auto; }
#mShade.open { display: block; }
.m-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 2px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.m-row .grow { flex: 1; min-width: 0; }
.m-row small { color: var(--m-dim); display: block; }
.m-btn { min-height: 44px; min-width: 64px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--m-line); background: linear-gradient(180deg, rgba(86, 60, 32, .95), rgba(40, 26, 14, .95)); color: var(--m-text); font-size: 14px; }
.m-btn.pri { background: linear-gradient(180deg, #b8892f, #6e4d14); color: #fff; border-color: #ffe2a0; }
.m-btn.warn { background: linear-gradient(180deg, #8d2f25, #4b130e); }
.m-btn:active { transform: scale(.96); }
.m-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.m-skill { display: flex; align-items: center; gap: 8px; min-height: 58px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--m-line); background: rgba(0, 0, 0, .3); color: var(--m-text); text-align: left; }
.m-skill canvas { width: 40px; height: 40px; flex: none; image-rendering: pixelated; border-radius: 6px; background: #2a1c10; }
.m-skill b { display: block; font-size: 14px; font-weight: 600; } .m-skill small { color: #9ad8ff; font-size: 12px; }
.m-skill.off { opacity: .4; }
.m-stat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; margin: 8px 0; }
.m-stat div { display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(255, 255, 255, .12); padding: 3px 0; } .m-stat div b { color: var(--m-gold); font-weight: 600; }
.m-range { width: 100%; height: 36px; }
.m-title { margin: 12px 0 4px; color: var(--m-gold); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- cac bang san co: tui do, nhiem vu, ban be, hoi thoai NPC (doi dang cho mobile) ---------- */
body[data-ui="portrait"] #bagPanel, body[data-ui="portrait"] #questPanel, body[data-ui="portrait"] #friendPanel {
  left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; transform: none !important; width: auto !important; max-height: calc(var(--vh, 1vh) * 82) !important; min-height: calc(var(--vh, 1vh) * 42);
  border-radius: 16px 16px 0 0 !important; border: 1px solid var(--m-line) !important; background: var(--m-panel) !important; padding: 12px 12px calc(14px + var(--sab)) !important; z-index: 20 !important; font-size: 14px; }
body[data-ui="landscape"] #bagPanel, body[data-ui="landscape"] #questPanel, body[data-ui="landscape"] #friendPanel {
  width: min(calc(var(--vw, 1vw) * 92), 760px) !important; max-height: calc(var(--vh, 1vh) * 92) !important; border-radius: 14px !important; border: 1px solid var(--m-line) !important; background: var(--m-panel) !important; z-index: 20 !important; font-size: 14px; }
body[data-ui="portrait"] #bagPanel .btn, body[data-ui="landscape"] #bagPanel .btn { min-height: 44px; padding: 8px 14px; font-size: 14px; border-radius: 10px; border-color: var(--m-line); background: linear-gradient(180deg, rgba(86, 60, 32, .95), rgba(40, 26, 14, .95)); }
body[data-ui="portrait"] #bagPanel .btn.on, body[data-ui="landscape"] #bagPanel .btn.on { background: linear-gradient(180deg, #b8892f, #6e4d14); border-color: #ffe2a0; }
body[data-ui="portrait"] #bagPanel .bg-grid, body[data-ui="landscape"] #bagPanel .bg-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
body[data-ui="portrait"] #bagPanel .bg-cell, body[data-ui="landscape"] #bagPanel .bg-cell { width: auto; height: 58px; border-radius: 10px; border-color: var(--m-line); background: rgba(0, 0, 0, .35); }
body[data-ui="portrait"] #bagPanel .bg-cell canvas, body[data-ui="landscape"] #bagPanel .bg-cell canvas { width: 44px; height: 44px; }
body[data-ui="portrait"] #bagPanel .bg-n, body[data-ui="landscape"] #bagPanel .bg-n { font-size: 12px; right: 4px; bottom: 2px; }
body[data-ui="portrait"] #bagPanel .bg-row, body[data-ui="landscape"] #bagPanel .bg-row { min-height: 50px; font-size: 14px; flex-wrap: wrap; }
body[data-ui="portrait"] #bagPanel .bg-row canvas, body[data-ui="landscape"] #bagPanel .bg-row canvas { width: 36px; height: 36px; }
body[data-ui="portrait"] #bagPanel .bg-detail, body[data-ui="landscape"] #bagPanel .bg-detail { position: sticky; bottom: 0; background: rgba(30, 20, 12, .98); border-color: var(--m-gold); font-size: 14px; }
body[data-ui="portrait"] #bagPanel .bg-money, body[data-ui="landscape"] #bagPanel .bg-money { color: var(--m-gold); font-weight: 600; }
body[data-ui="portrait"] #bagPanel .bg-head b, body[data-ui="landscape"] #bagPanel .bg-head b { font-size: 16px; color: var(--m-gold); }
body[data-ui="portrait"] #friendPanel button, body[data-ui="landscape"] #friendPanel button, body[data-ui="portrait"] #questPanel button, body[data-ui="landscape"] #questPanel button { min-height: 42px !important; min-width: 48px; font-size: 14px !important; border-radius: 10px !important; }
body[data-ui="portrait"] #friendPanel input, body[data-ui="landscape"] #friendPanel input { min-height: 44px; font-size: 16px !important; }

body[data-ui="portrait"] #dialog, body[data-ui="landscape"] #dialog { background: var(--m-panel); border: 1px solid var(--m-line); border-radius: 14px; padding: 12px 14px 14px; z-index: 18; box-shadow: 0 -4px 22px rgba(0, 0, 0, .6); }
body[data-ui="portrait"] #dialog { left: 8px; right: 8px; transform: none; width: auto; bottom: calc(var(--sab) + var(--nav-h) + 10px); max-height: calc(var(--vh, 1vh) * 62); overflow: auto; }
body[data-ui="landscape"] #dialog { width: min(calc(var(--vw, 1vw) * 70), 620px); bottom: calc(var(--sab) + 10px); max-height: calc(var(--vh, 1vh) * 80); overflow: auto; }
body[data-ui="portrait"] #dialog h3, body[data-ui="landscape"] #dialog h3 { font-size: 16px; color: var(--m-gold); padding-right: 44px; }
body[data-ui="portrait"] #dialog p, body[data-ui="landscape"] #dialog p { font-size: 15px; line-height: 1.5; color: var(--m-text); }
body[data-ui="portrait"] #dialog .close, body[data-ui="landscape"] #dialog .close { top: 4px; right: 6px; width: 44px; height: 40px; line-height: 40px; text-align: center; font-size: 24px; }
body[data-ui="portrait"] #dAnswers .ans, body[data-ui="landscape"] #dAnswers .ans { min-height: 48px; font-size: 15px; border-radius: 12px; border-color: var(--m-line); background: linear-gradient(180deg, rgba(86, 60, 32, .95), rgba(40, 26, 14, .95)); color: #ffe9b8; }

/* chua vao game: an HUD mobile va can dieu khien */
body:not(.in-game) #mui, body:not(.in-game) #joy { display: none !important; }

/* theo doi nhiem vu */
#mTrace { position: absolute; right: calc(var(--sar) + 8px); top: calc(var(--sat) + 136px); max-width: calc(var(--vw, 1vw) * 46); pointer-events: auto; text-align: right; font-size: 12px; line-height: 1.35; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#mTrace b { display: block; color: #ffd166; font-weight: 600; }
#mTrace span { display: block; color: #eef2f7; }
#mTrace span.done { color: #8fe38f; }
#mTrace span.back { color: #9ad8ff; }
body.m-busy #mTrace { display: none !important; }

/* ---------- thanh cuon theo mau giao dien (thay thanh cuon trang xam mac dinh cua trinh duyet) ---------- */
.m-sheet .m-body, .m-scroll, #questPanel, #bagPanel { scrollbar-width: thin; scrollbar-color: var(--m-gold-d) rgba(0, 0, 0, .35); }
@supports not (scrollbar-color: auto) {
  .m-sheet .m-body::-webkit-scrollbar, .m-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
  .m-sheet .m-body::-webkit-scrollbar-track, .m-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, .35); border-radius: 6px; }
  .m-sheet .m-body::-webkit-scrollbar-thumb, .m-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #b8892f, #6e4d14); border-radius: 6px; border: 2px solid rgba(20, 13, 8, .95); }
}

/* ---------- Thuong Thanh: luoi the hang (PC rong, nhieu cot; dien thoai 2 cot) ---------- */
body[data-ui="desktop"] #ms_cash { width: min(1080px, calc(var(--vw, 1vw) * 94)); height: min(760px, calc(var(--vh, 1vh) * 90)); max-height: calc(var(--vh, 1vh) * 90); }
body[data-ui="landscape"] #ms_cash { width: min(calc(var(--vw, 1vw) * 96), 980px); height: calc(var(--vh, 1vh) * 94); }
#ms_cash .m-body { padding-top: 0; }
.c-top { position: sticky; top: 0; z-index: 2; margin: 0 -12px 10px; padding: 10px 12px 8px; background: linear-gradient(180deg, rgba(30, 20, 12, .98), rgba(26, 17, 10, .96)); border-bottom: 1px solid var(--m-line); }
.c-bal { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--m-dim); font-size: 13px; }
.c-bal b { color: #ffd23a; font-size: 17px; letter-spacing: .3px; }
.c-bal i { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f0b429 55%, #a86a00); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.c-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.c-tabs .m-btn { min-height: 34px; padding: 4px 14px; }
.c-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }
body[data-ui="portrait"] .c-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.c-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid rgba(232, 196, 106, .28); border-radius: 10px; background: linear-gradient(180deg, rgba(50, 34, 20, .96), rgba(26, 17, 10, .96)); min-width: 0; }
.c-card:hover { border-color: var(--m-gold); }
.c-card.poor { opacity: .6; }
.c-hd { display: flex; align-items: center; gap: 10px; min-width: 0; }
.c-ic { flex: none; width: 48px; height: 48px; border-radius: 8px; border: 1px solid rgba(232, 196, 106, .35); background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.c-ic canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.c-nm { min-width: 0; font-weight: 600; color: var(--m-text); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-ds { color: var(--m-dim); font-size: 12px; line-height: 1.3; min-height: 31px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-ft { display: flex; align-items: center; gap: 6px; margin-top: auto; }
.c-pr { flex: 1; color: #ffd23a; font-weight: 700; white-space: nowrap; }
.c-pr small { color: var(--m-dim); font-weight: 400; }
.c-ft .m-btn { min-height: 34px; padding: 4px 12px; }

/* ---------- so nhiem vu (giong MenuQuestLog ban PC: danh sach + chi tiet) ---------- */
.m-q-list { display: flex; flex-direction: column; gap: 6px; }
.m-q-item { display: block; width: 100%; text-align: left; min-height: 48px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--m-line); background: rgba(0, 0, 0, .3); color: var(--m-text); font-size: 14px; }
.m-q-item b { display: block; color: #ffd166; font-weight: 600; }
.m-q-item small { display: block; color: var(--m-dim); font-size: 12px; margin-top: 2px; }
.m-q-item.on { border-color: #ffe2a0; background: linear-gradient(180deg, rgba(120, 86, 34, .55), rgba(60, 40, 16, .55)); }
.m-q-item.fail b { color: #ff8f8f; }
.m-q-item:active { transform: scale(.98); }
.m-q-card { margin-top: 12px; padding: 10px 12px 12px; border-radius: 12px; border: 1px solid var(--m-gold-d, var(--m-line)); background: rgba(0, 0, 0, .35); }
.m-q-title { color: #ffd166; font-size: 16px; font-weight: 600; }
.m-q-type { color: #9ad8ff; font-size: 13px; margin-top: 2px; }
.m-q-desc { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--m-text); white-space: pre-line; }
.m-q-goal { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 0; border-bottom: 1px dashed rgba(255, 255, 255, .1); color: #eef2f7; font-size: 14px; }
.m-q-goal .grow { flex: 1; min-width: 0; }
.m-q-goal.done { color: #8fe38f; }
.m-q-goal.back { color: #9ad8ff; }
.m-q-goal.time { color: #ffb86b; }
.m-q-goal .m-btn { min-height: 38px; min-width: 0; padding: 0 12px; }
.m-q-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.m-q-hint { color: var(--m-dim); font-size: 12px; flex: 1 1 100%; }
.m-q-empty { padding: 18px 4px; color: var(--m-dim); text-align: center; }

/* ---------- tro chuyen: nut 💬 canh dong chat + khung nhap ---------- */
.m-chat-fab { position: absolute; pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--m-line); background: linear-gradient(180deg, rgba(86, 60, 32, .92), rgba(40, 26, 14, .92)); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); padding: 0; display: flex; align-items: center; justify-content: center; }
.m-chat-fab .ic { font-size: 21px; line-height: 1; }
.m-chat-fab .badge { display: none; position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #d9382b; color: #fff; font-size: 11px; line-height: 18px; text-align: center; box-sizing: border-box; }
.m-chat-fab:active { transform: scale(.94); }
body[data-ui="portrait"] .m-chat-fab { left: calc(var(--sal) + 10px); bottom: calc(var(--sab) + var(--nav-h) + 156px); }
body[data-ui="landscape"] .m-chat-fab { left: calc(var(--sal) + 166px); bottom: calc(var(--sab) + 10px); }
body[data-ui="portrait"] #chatLog { left: calc(var(--sal) + 4px) !important; max-width: calc(calc(var(--vw, 1vw) * 100) - var(--sal) - 70px) !important; }   /* sat le trai; nut chat duoc de len */
#chatLog { transition: opacity .8s ease; }
#chatLog.faded { opacity: 0; }
body[data-ui="portrait"] .m-chat-fab, body[data-ui="landscape"] .m-chat-fab { z-index: 4; }
body[data-ui="landscape"] #chatLog { left: calc(var(--sal) + 218px) !important; }
body.m-battle .m-chat-fab, body.m-busy .m-chat-fab { display: none; }

#mChat { position: fixed; z-index: 21; display: none; flex-direction: column; pointer-events: auto; background: var(--m-panel); border: 1px solid var(--m-line); box-shadow: 0 -6px 26px rgba(0, 0, 0, .65); font: 14px/1.35 system-ui, "Segoe UI", sans-serif; color: var(--m-text); }
#mChat.open { display: flex; }
body[data-ui="portrait"] #mChat { left: 0; right: 0; bottom: calc(var(--sab) + var(--nav-h)); border-radius: 14px 14px 0 0; padding: 8px 10px 10px; }
body[data-ui="landscape"] #mChat { left: calc(var(--sal) + 8px); width: min(calc(var(--vw, 1vw) * 62), 560px); bottom: calc(var(--sab) + 8px); border-radius: 12px; padding: 8px 10px 10px; }
#mChat.kb { border-radius: 14px 14px 0 0; }
.m-chat-head { display: flex; align-items: center; gap: 6px; }
.m-chat-head .m-x { flex: none; }
.m-chat-tabs { flex: 1; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.m-chat-tab { flex: none; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid var(--m-line); background: rgba(0, 0, 0, .35); color: var(--m-text); font-size: 13px; }
.m-chat-tab.on { background: linear-gradient(180deg, #b8892f, #6e4d14); border-color: #ffe2a0; color: #fff; }
.m-chat-log { margin: 8px 0; overflow-y: auto; max-height: calc(var(--vh, 1vh) * 34); min-height: 72px; padding: 4px 6px; border-radius: 8px; background: rgba(0, 0, 0, .3); font-size: 13px; line-height: 1.45; -webkit-overflow-scrolling: touch; }
body[data-ui="landscape"] .m-chat-log { max-height: calc(var(--vh, 1vh) * 40); }
#mChat.kb .m-chat-log { max-height: calc(var(--vh, 1vh) * 20); }
.m-chat-line { padding: 2px 0; color: #eef2f7; word-break: break-word; }
.m-chat-line b { font-weight: 600; color: #ffd166; }
.m-chat-line b.link { text-decoration: underline dotted; cursor: pointer; }
.m-chat-line.ch-world b { color: #ffb861; }
.m-chat-line.ch-party b { color: #79afff; }
.m-chat-line.ch-to b { color: #ed9aff; }
.m-chat-line.ch-sys b { color: #ffb861; }
.m-chat-empty { color: var(--m-dim); padding: 10px 0; text-align: center; }
.m-chat-row { display: flex; gap: 6px; }
.m-chat-row input { min-width: 0; height: 44px; box-sizing: border-box; padding: 0 10px; border-radius: 10px; border: 1px solid var(--m-line); background: rgba(0, 0, 0, .45); color: #fff; font-size: 16px; outline: none; -webkit-user-select: text; user-select: text; }
.m-chat-row input:focus { border-color: #ffe2a0; }
.m-chat-in { flex: 1; }
.m-chat-to { flex: 0 0 34%; }
.m-chat-row .m-btn { min-width: 64px; }

/* ---------- tro thu / thu nuoi (giong MenuPartner.xml / MenuPet.xml) ---------- */
.m-p-tabs { display: flex; gap: 8px; margin-bottom: 4px; }
.m-p-tabs .m-btn { flex: 1; }
.m-p-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.m-p-chip { flex: none; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--m-line); background: rgba(0, 0, 0, .35); color: var(--m-text); font-size: 14px; white-space: nowrap; }
.m-p-chip.on { background: linear-gradient(180deg, #b8892f, #6e4d14); border-color: #ffe2a0; color: #fff; }
.m-p-top { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; }
.m-p-model { flex: none; width: 120px; height: 128px; border-radius: 12px; border: 1px solid var(--m-gold-d); background: radial-gradient(ellipse at 50% 80%, rgba(120, 90, 40, .45), rgba(0, 0, 0, .55)); }
.m-p-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.m-p-side .m-stat { margin: 4px 0 0; grid-template-columns: 1fr; }
.m-p-bar { position: relative; height: 18px; border-radius: 9px; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .15); overflow: hidden; }
.m-p-bar i { position: absolute; left: 0; top: 0; bottom: 0; }
.m-p-bar.hp i { background: linear-gradient(180deg, #f07a4a, #b8361f); }
.m-p-bar.sp i { background: linear-gradient(180deg, #5aa0f0, #2a5fb8); }
.m-p-bar.exp i { background: linear-gradient(180deg, #e8c46a, #9a7a2a); }
.m-p-bar span { position: relative; display: block; text-align: center; font-size: 11px; line-height: 16px; color: #fff; text-shadow: 0 1px 2px #000; }
.m-p-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.m-p-acts .m-btn { min-width: 0; flex: 1 1 auto; padding: 0 10px; min-height: 40px; }
.m-btn.on { border-color: #ffe2a0; box-shadow: inset 0 0 0 1px #ffe2a0; color: #ffe9b8; }
.m-p-attrs { display: grid; grid-template-columns: 1fr; gap: 4px; }
.m-p-attr { display: flex; align-items: center; gap: 8px; min-height: 44px; border-bottom: 1px dashed rgba(255, 255, 255, .12); }
.m-p-attr span { flex: 1; }
.m-p-attr b { min-width: 44px; text-align: right; color: var(--m-gold); font-weight: 600; }
.m-p-attr b.up { color: #8fe38f; }
.m-p-attr .m-btn { min-width: 44px; min-height: 40px; padding: 0; font-size: 18px; }
.m-p-attr .m-btn:disabled { opacity: .35; }
.m-p-skill { width: 100%; margin-bottom: 6px; }
.m-p-sdesc { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--m-text); white-space: pre-line; }
@media (min-width: 600px) { .m-p-attrs { grid-template-columns: 1fr 1fr; column-gap: 16px; } }
#bagPanel .bg-cell.dim canvas, #bagPanel .bg-cell.dim .bg-abbr { opacity: .4; filter: grayscale(.6); }

/* ---------- bang Nhan vat (MenuCharacter.xml + o trang bi MenuItem.xml) ---------- */
.m-c-head { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
.m-c-face { flex: none; width: 88px; height: 88px; border-radius: 50%; border: 2px solid var(--m-gold-d); background: rgba(0, 0, 0, .45); }
.m-c-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.m-c-line { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 0 8px; border-radius: 6px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(232, 196, 106, .18); font-size: 13px; }
.m-c-line span { flex: none; width: 64px; color: var(--m-gold); }
.m-c-line b { flex: 1; min-width: 0; font-weight: 500; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-c-line i { font-style: normal; color: var(--m-gold); }
.m-c-line.tap { cursor: pointer; border-color: var(--m-line); }
.m-c-bars { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.m-c-lv { color: var(--m-gold); font-size: 13px; }
.m-p-bar.vp i { background: linear-gradient(180deg, #f0a64a, #b8661f); }
.m-c-equip { display: flex; gap: 10px; align-items: center; }
.m-c-model { flex: none; width: 128px; height: 162px; border-radius: 12px; border: 1px solid var(--m-gold-d); background: radial-gradient(ellipse at 50% 85%, rgba(120, 90, 40, .45), rgba(0, 0, 0, .55)); }
.m-c-slots { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.m-c-slot { position: relative; aspect-ratio: 1; min-height: 48px; border-radius: 10px; border: 1px solid var(--m-line); background: rgba(0, 0, 0, .4); padding: 0; display: flex; align-items: center; justify-content: center; color: var(--m-dim); }
.m-c-slot canvas { width: 70%; height: 70%; image-rendering: pixelated; }
.m-c-slot small { font-size: 11px; opacity: .65; }
.m-c-slot.on { border-color: #ffe2a0; box-shadow: inset 0 0 0 1px #ffe2a0; }
.m-c-what { display: block; font-size: 11px; color: var(--m-dim); }
.m-c-note { margin-top: 6px; font-size: 12px; color: var(--m-dim); }

/* ---------- nang cap tro thu (PartnerSubsidySkillUp / PartnerCultivationUp / RefinePartnerSubSkillItem) ---------- */
.m-pu-pick { width: 100%; margin-bottom: 6px; min-height: 52px; }
.m-pu-pick.on { border-color: #ffe2a0; background: linear-gradient(180deg, rgba(120, 86, 34, .55), rgba(60, 40, 16, .55)); }
.m-pu-tick { color: #8fe38f; font-size: 18px; padding: 0 6px; }
.m-pu-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.m-pu-slot { min-height: 52px; padding: 4px; border-radius: 10px; border: 1px dashed var(--m-line); background: rgba(0, 0, 0, .35); color: var(--m-dim); font-size: 11px; line-height: 1.2; }
.m-pu-slot.on { border-style: solid; border-color: #ffe2a0; color: #fff; }
.m-pu-last { margin-top: 10px; color: #ffe9b8; font-size: 14px; }
.m-btn:disabled { opacity: .45; }
.m-pu-rule { margin-top: 10px; font-size: 13px; line-height: 1.6; color: #eef2f7; }

/* khoa tai san */
.bg-lock { position: absolute; left: 2px; top: 0; font-size: 12px; line-height: 1; filter: drop-shadow(0 1px 1px #000); pointer-events: none; }
.m-c-slot { position: relative; }

/* ---------- binh khi pho (WeaponsRank.xml / WeaponsPoint.xml / WeaponsFail.xml) ---------- */
.m-wr-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.m-wr-tabs .m-btn { flex: 1 1 auto; min-width: 0; padding: 0 10px; font-size: 13px; }
.m-wr-find { width: 100%; box-sizing: border-box; height: 40px; margin: 6px 0; padding: 0 12px; border-radius: 10px; border: 1px solid var(--m-line); background: rgba(0, 0, 0, .4); color: #fff; font-size: 16px; }
.m-wr-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.m-wr-tbl th { position: sticky; top: 0; background: rgba(40, 26, 14, .98); color: var(--m-gold); font-weight: 600; text-align: left; padding: 6px 5px; border-bottom: 1px solid var(--m-line); white-space: nowrap; }
.m-wr-tbl td { padding: 6px 5px; border-bottom: 1px dashed rgba(255, 255, 255, .1); vertical-align: top; }
.m-wr-tbl td.gold { color: #ffd166; font-weight: 600; } .m-wr-tbl td.dim { color: var(--m-dim); font-size: 12px; }
.m-wr-tbl td.num { color: #9ad8ff; font-weight: 600; } .m-wr-tbl td.ok { color: #8fe38f; } .m-wr-tbl td.bad { color: #ff8f8f; font-weight: 600; }
.m-wr-tbl tr.me td { background: rgba(184, 137, 47, .25); }
.m-wr-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; } .m-wr-tbl.wide { min-width: 520px; }
.m-mar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; } .m-mar-grid .m-btn { min-width: 0; padding: 0 6px; font-size: 13px; } .m-mar-grid .m-btn.off { opacity: .4; }

/* ---------- chay thuong bang phai (ShopMenu.xml che do thuong nhan, MenuGuildBusinessLog.xml) ---------- */
.m-biz-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.m-biz-money { color: var(--m-gold); font-weight: 600; font-size: 15px; }
.m-biz-qty { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; font-size: 13px; color: var(--m-dim); }
.m-biz-qty .m-btn { min-width: 44px; min-height: 36px; padding: 0 8px; }
.m-biz-row { display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 4px 2px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.m-biz-row canvas { width: 40px; height: 40px; flex: none; image-rendering: pixelated; border-radius: 6px; background: #2a1c10; }
.m-biz-row .grow { flex: 1; min-width: 0; } .m-biz-row b { display: block; font-weight: 600; } .m-biz-row small { color: #9ad8ff; font-size: 12px; }
.m-biz-row.prod b { color: #ffd166; }
.m-biz-row .m-btn { min-width: 56px; padding: 0 10px; }

/* ---------- kinh mach (ElementSysPanel.xml) ---------- */
.m-el-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 6px 0; }
.m-el-slot { min-height: 56px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--m-line); background: rgba(0, 0, 0, .35); color: var(--m-text); text-align: left; }
.m-el-slot b { display: block; color: #ffd166; } .m-el-slot small { display: block; color: var(--m-dim); font-size: 12px; }
.m-el-slot.closed { opacity: .5; } .m-el-slot.on { border-color: #ffe2a0; background: linear-gradient(180deg, rgba(120, 86, 34, .55), rgba(60, 40, 16, .55)); }
.m-hk-num { height: 38px; box-sizing: border-box; padding: 0 6px; border-radius: 8px; border: 1px solid var(--m-line); background: rgba(0, 0, 0, .45); color: #fff; font-size: 15px; }

/* thu thap son trang (gather.js): thanh tien do giua man hinh, dung ca PC */
.g-gather { position: fixed; left: 50%; top: 66%; transform: translateX(-50%); width: min(280px, calc(calc(var(--vw, 1vw) * 100) - 32px)); padding: 8px 12px 10px; z-index: 60;
  background: rgba(20, 16, 10, .82); border: 1px solid #8a6b32; border-radius: 6px; color: #f3e2b5; font-size: 13px; text-align: center; pointer-events: none; display: none; }
.g-gather-bar { margin-top: 6px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.g-gather-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #d9a441, #f6dc8a); }
.m-p-bar.er i { background: linear-gradient(180deg, #7ad0f0, #2a7fb0); }

/* so ky nang (skillbook.js): chieu con thut vao duoi goc */
.m-sb-sub { margin-left: 16px; width: calc(100% - 16px); max-width: calc(100% - 16px); box-sizing: border-box; }
.m-sb-tabs { flex-wrap: wrap; overflow: visible; }

/* ep huong man hinh (screen.js): trinh duyet khong cho khoa xoay thi xoay ca trang 90 do; body thanh khung LOGIC, phan tu fixed xoay theo */
:root { --vw: 1vw; --vh: 1vh; }
html.rot90, html.rotm90 { --vw: calc(var(--ph, 100vh) / 100); --vh: calc(var(--pw, 100vw) / 100); }
html.rot90 body, html.rotm90 body { position: fixed; top: 0; left: 0; width: var(--ph, 100vh); height: var(--pw, 100vw); transform-origin: 0 0; overflow: hidden; }
html.rot90 body { transform: translateX(var(--pw, 100vw)) rotate(90deg); }
html.rotm90 body { transform: translateY(var(--ph, 100vh)) rotate(-90deg); }

/* 6 o ky nang nhanh (mobile.js): cham dung, giu doi chieu */
#mSkills { position: absolute; display: flex; gap: 8px; pointer-events: auto; z-index: 2; }
.m-sk { position: relative; width: 50px; height: 50px; border-radius: 50%; padding: 0; border: 2px solid var(--m-gold-d); background: radial-gradient(circle at 35% 30%, rgba(74, 52, 30, .95), rgba(20, 13, 8, .95)); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.m-sk canvas { width: 38px; height: 38px; border-radius: 50%; }
.m-sk .n { position: absolute; right: 4px; bottom: 1px; font-size: 10px; font-weight: 700; color: var(--m-gold); text-shadow: 0 0 2px #000, 0 0 3px #000; }
.m-sk.empty canvas { display: none; }
.m-sk.empty::after { content: '+'; font-size: 22px; line-height: 1; color: var(--m-dim); }
.m-sk.off canvas { filter: grayscale(1) brightness(.55); }
.m-sk:active { transform: scale(.93); }
body[data-ui="portrait"] #mSkills { right: calc(var(--sar) + 10px); bottom: calc(var(--sab) + var(--nav-h) + 14px); flex-direction: column-reverse; }
body[data-ui="portrait"].m-battle #mSkills { right: auto; left: 50%; transform: translateX(-50%); flex-direction: row; bottom: calc(var(--sab) + 214px); }
body[data-ui="landscape"] #mSkills { left: 50%; transform: translateX(-50%); bottom: calc(var(--sab) + 12px); }
body[data-ui="landscape"].m-battle #mSkills { left: calc((100% - 240px) / 2); }
body.m-has-slots[data-ui="landscape"].m-battle #mBatLog { bottom: calc(var(--sab) + 74px); }
body.m-has-slots[data-ui="portrait"].m-battle #mBatLog { bottom: calc(var(--sab) + 274px); }
/* nut man hinh (toan man hinh / ep huong) canh ban do */
#mScreen { right: calc(var(--sar) + 8px); top: calc(var(--sat) + 8px); width: 40px; height: 40px; padding: 0; font-size: 20px; line-height: 38px; text-align: center; }
#mScreen { right: calc(var(--sar) + 110px); }
body.m-battle #mScreen { display: none; }

/* icon buff ngoai tran (mobile.js) duoi khung nhan vat */
#mBuffs { position: absolute; left: calc(var(--sal) + 10px); top: calc(var(--sat) + 72px); display: flex; gap: 5px; pointer-events: auto; flex-wrap: wrap; max-width: 220px; }
.m-buff { position: relative; width: 30px; height: 36px; padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; }
.m-buff canvas { width: 26px; height: 26px; border: 1px solid var(--m-gold-d); border-radius: 5px; background: rgba(8, 10, 16, .6); }
.m-buff span { font-size: 9px; line-height: 10px; color: #fff3a0; text-shadow: 0 0 2px #000, 0 0 3px #000; }
body.m-battle #mBuffs, body.m-busy:not(.m-battle) #mBuffs { display: none !important; }
/* hop hoi nhieu lua chon o man ngang: xep 2 cot cho vua man hinh */
body[data-ui="landscape"] #dAnswers { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
body[data-ui="landscape"] #dAnswers .ans { margin: 0; min-height: 42px; }

/* Dai Ly Tieu Bach Khoa (quiz.js): khung do vui dung chung PC + mobile */
.qz-box { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(calc(var(--vw, 1vw) * 94), 520px); max-height: calc(var(--vh, 1vh) * 94); overflow: auto; z-index: 40;
  background: rgba(22, 16, 10, .97); border: 1px solid #b08a3e; border-radius: 12px; box-shadow: 0 6px 30px rgba(0, 0, 0, .7); color: #f3e9d2; font: 14px/1.4 system-ui, "Segoe UI", sans-serif; padding: 10px 12px 12px; box-sizing: border-box; }
.qz-head { display: flex; align-items: center; gap: 6px; }
.qz-head b { flex: 1; color: #e8c46a; font-size: 16px; }
.qz-x { width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(232, 196, 106, .45); background: rgba(0, 0, 0, .3); color: #f3e9d2; font-size: 18px; }
.qz-status { margin-top: 6px; font-size: 13px; color: #e8c46a; }
.qz-q { margin: 8px 0; font-size: 16px; min-height: 44px; }
.qz-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.qz-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #d9a441, #f6dc8a); }
.qz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.qz-opt { min-height: 46px; padding: 6px 10px; text-align: left; border-radius: 10px; border: 1px solid rgba(232, 196, 106, .45); background: linear-gradient(180deg, rgba(86, 60, 32, .95), rgba(40, 26, 14, .95)); color: #f3e9d2; font-size: 14px; }
.qz-opt:disabled { opacity: .85; }
.qz-opt.chosen { border-color: #7fc1ff; box-shadow: 0 0 0 2px rgba(127, 193, 255, .5) inset; }
.qz-opt.right { border-color: #6fd27a; background: linear-gradient(180deg, rgba(40, 110, 50, .95), rgba(20, 60, 28, .95)); }
.qz-opt.wrong { border-color: #ff7b7b; background: linear-gradient(180deg, rgba(120, 36, 30, .95), rgba(60, 18, 14, .95)); }
.qz-res { min-height: 20px; margin-top: 8px; color: #fff3a0; }
.qz-rank { margin-top: 8px; border-top: 1px solid rgba(232, 196, 106, .3); padding-top: 6px; font-size: 13px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.qz-rt { grid-column: 1 / -1; color: #e8c46a; margin-bottom: 2px; }
.qz-rr { display: flex; justify-content: space-between; gap: 6px; }
.qz-invite { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); transform: translateX(-50%); z-index: 41; width: min(calc(var(--vw, 1vw) * 92), 420px);
  background: rgba(22, 16, 10, .96); border: 1px solid #b08a3e; border-radius: 12px; padding: 10px 12px; color: #f3e9d2; font: 14px/1.4 system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; box-sizing: border-box; }
.qz-invite > div { flex: 1 1 100%; }
.qz-go { flex: 1; min-height: 40px; border-radius: 10px; border: 1px solid #e8c46a; background: linear-gradient(180deg, #a9441f, #5c1f0c); color: #fff; font-weight: 600; }
.qz-go.no { background: rgba(0, 0, 0, .35); border-color: rgba(232, 196, 106, .45); font-weight: 400; }
/* nut $USDT (nap USDT, topup.js) duoi nut man hinh, canh ban do nho */
#mPay { right: calc(var(--sar) + 104px); top: calc(var(--sat) + 54px); width: 52px; height: 44px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
#mPay b { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(180deg, #5fd3a8, #1b8a63); border: 2px solid #f3d27a; color: #fff; font: 700 16px/22px system-ui, sans-serif; text-align: center; box-sizing: border-box; }
#mPay small { max-width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 10px/1.1 system-ui, sans-serif; color: #7fe0a8; text-shadow: 0 1px 2px #000; }
body.m-battle #mPay { display: none; }
/* tro thu xuat chien duoi chan dung nhan vat (mobile.js partnerChip) */
#mPartner { display: none; left: calc(var(--sal) + 8px); top: calc(var(--sat) + 70px); align-items: center; gap: 6px; padding: 3px 8px 3px 3px; min-width: 0; }
body.m-has-partner #mPartner { display: flex; }
#mPartner canvas { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--m-gold); background: #2a1c10; flex: none; }
#mPartner .m-pname { font-size: 11px; font-weight: 600; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
#mPartner .m-bar { width: 84px; height: 4px; margin-top: 2px; }
body.m-has-partner #mBuffs { top: calc(var(--sat) + 116px); }
body.m-battle #mPartner { display: none !important; }

/* mobile-skin.css */
/*
 * Colong Web - KHOAC "CO PHONG" cho cac bang DOM (mobile + vai bang tren PC): khung den vien vang goc hoa van, nut son mai xanh, o tui hoa van,
 * hinh mo o trang bi, bieu tuong menu goc. Moi anh cat tu tam ghep giao dien goc bang tools/build_skin.js -> web/pic/skin/*.png
 * (toa do lay tu XML goc: MenuAntiHack / AutoCountBox / MenuItem / MsgPanel). Nap SAU mobile.css; chi doi hinh thuc, khong doi bo cuc chuc nang.
 */
:root {
  --sk-gold: #f3d27a; --sk-gold-d: #9c7434; --sk-text: #efe4c4; --sk-dim: #a99f86; --sk-line: rgba(214, 178, 98, .5); --sk-line2: rgba(214, 178, 98, .2);
  --sk-field: rgba(4, 6, 12, .62); --sk-title: "Palatino Linotype", "Book Antiqua", "Times New Roman", "Noto Serif", serif;
}

/* ---------- than bang: nen hoa van xanh thay toi + khung den vien vang (9 manh) ---------- */
.m-sheet, body[data-ui="portrait"] #bagPanel, body[data-ui="landscape"] #bagPanel, body[data-ui="portrait"] #friendPanel, body[data-ui="landscape"] #friendPanel,
body[data-ui="portrait"] #questPanel, body[data-ui="landscape"] #questPanel {
  background: linear-gradient(180deg, rgba(16, 20, 34, .84), rgba(7, 9, 16, .92)), url(../web/pic/skin/tex_blue.png) 0 0 / 92px 188px repeat !important;
  background-clip: padding-box !important;
  border: 15px solid transparent !important; border-image: url(../web/pic/skin/frame.png) 14 / 15px stretch !important;
  border-radius: 0 !important; color: var(--sk-text); box-shadow: 0 -2px 24px rgba(0, 0, 0, .85) !important;
}
body[data-ui="portrait"] .m-sheet { border-bottom: 15px solid transparent !important; }
.m-sheet .m-body { padding: 8px 8px calc(10px + var(--sab)); }

/* ---------- dau bang: dai tieu de son mai xanh + hoa van vang hai ben, nut dong X goc ---------- */
.m-sheet .m-head { position: relative; justify-content: center; padding: 2px 46px 9px; margin: -4px -4px 0; background: none; border-bottom: 0; }
.m-sheet .m-head::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sk-gold-d) 12%, var(--sk-gold) 50%, var(--sk-gold-d) 88%, transparent); }
.m-sheet .m-head b { flex: none; position: relative; max-width: 100%; min-width: 120px; padding: 2px 18px 3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 700 16px/1.35 var(--sk-title); color: #fff1c2; letter-spacing: .04em; text-shadow: 0 1px 0 #000, 0 0 4px #000, 0 0 1px #000;
  border: 6px solid transparent; border-image: url(../web/pic/skin/btn_on.png) 6 fill / 6px stretch; }
.m-sheet .m-head .m-ttl { position: relative; display: inline-flex; max-width: calc(100% - 140px); }
.m-sheet .m-head .m-ttl b { max-width: 100%; }
.m-sheet .m-head .m-orn { position: absolute; top: 50%; width: 40px; height: 29px; margin-top: -16px; background: center / contain no-repeat; pointer-events: none; z-index: 1; }
.m-sheet .m-head .m-orn.l { right: 100%; margin-right: -4px; } .m-sheet .m-head .m-orn.r { left: 100%; margin-left: -4px; }
.m-sheet .m-head .m-orn.l { background-image: url(../web/pic/skin/orn_l.png); }
.m-sheet .m-head .m-orn.r { background-image: url(../web/pic/skin/orn_r.png); }
.m-x, body[data-ui] #bagPanel .btn.bg-x { border-image: none !important; position: absolute; right: 0; top: -2px; width: 44px; height: 38px; min-width: 0; padding: 0; border: 0 !important; border-radius: 0 !important; font-size: 0 !important; color: transparent !important;
  background: url(../web/pic/skin/close.png) center / 32px 24px no-repeat !important; filter: drop-shadow(0 1px 2px #000); }
.m-x:active, body[data-ui] #bagPanel .btn.bg-x:active { background-image: url(../web/pic/skin/close_on.png) !important; transform: scale(.94); }

/* ---------- nut: son mai xanh vien vang (trang thai thuong / dang chon / mo) ---------- */
.m-btn, .m-p-chip, body[data-ui="portrait"] #bagPanel .btn, body[data-ui="landscape"] #bagPanel .btn,
body[data-ui="portrait"] #friendPanel button, body[data-ui="landscape"] #friendPanel button {
  box-sizing: border-box; border: 7px solid transparent !important; border-image: url(../web/pic/skin/btn.png) 6 fill / 7px stretch !important;
  border-radius: 0 !important; background: none !important; color: #f4e6bd !important; font-weight: 600; text-shadow: 0 1px 1px #000, 0 0 3px #000; padding: 0 8px; box-shadow: none !important; }
.m-btn.pri, .m-btn.on, .m-p-chip.on, body[data-ui] #bagPanel .btn.on { border-image-source: url(../web/pic/skin/btn_on.png) !important; color: #fff6d4 !important; }
.m-btn.warn { border-image-source: url(../web/pic/skin/btn.png) !important; filter: hue-rotate(150deg) saturate(1.25) brightness(.95); }
.m-btn:disabled, .m-btn.off { border-image-source: url(../web/pic/skin/btn_off.png) !important; color: #8c8a80 !important; }

/* ---------- dong, tieu muc, the, o so ---------- */
.m-row { border-bottom: 1px solid var(--sk-line2); }
.m-row small { color: var(--sk-dim); }
.m-title { position: relative; margin: 14px 0 6px; padding: 0 0 4px 22px; font: 700 14px/1.3 var(--sk-title); color: var(--sk-gold); text-transform: none; letter-spacing: .05em; text-shadow: 0 1px 0 #000; }
.m-title::before { content: ''; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; background: url(../web/pic/skin/orn_l.png) center / contain no-repeat; }
.m-title::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--sk-gold-d), transparent); }
.m-q-card, .c-card, .m-skill { background: linear-gradient(180deg, rgba(24, 30, 48, .7), rgba(8, 10, 18, .78)) !important; border: 1px solid var(--sk-line) !important; border-radius: 3px !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .6); }
.m-stat div { border-bottom: 1px solid var(--sk-line2); }
.m-stat div b, .m-p-attr b { color: var(--sk-gold); }
input.m-in, .m-sheet input[type="text"], .m-sheet input[type="number"], .m-sheet input:not([type]), .m-sheet select, #friendPanel input {
  background: var(--sk-field) !important; border: 1px solid var(--sk-line) !important; border-radius: 2px !important; color: var(--sk-text) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8); }
.m-p-bar, .m-c-bar { border-radius: 2px !important; border: 1px solid var(--sk-gold-d) !important; background: rgba(0, 0, 0, .65) !important; box-shadow: inset 0 1px 2px #000; }
.m-p-bar i, .m-c-bar i { border-radius: 0 !important; }
#mShade { background: rgba(0, 0, 0, .55); }

/* ---------- thanh dieu huong duoi: bieu tuong goc + nhan chu vang ---------- */
body[data-ui="portrait"] #mNav { background: linear-gradient(180deg, rgba(22, 26, 40, .97), rgba(6, 7, 12, .99)); border-top: 0; box-shadow: 0 -1px 0 #000, 0 -3px 0 var(--sk-gold-d), 0 -4px 10px rgba(0, 0, 0, .6); }
.m-nav-btn .ic.sk { display: block; width: 36px; height: 29px; font-size: 0; background-position: center; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 1px 2px #000); }
.m-nav-btn .ic.face { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--sk-gold-d); background-color: #10131c; background-position: center; background-size: cover; background-repeat: no-repeat; box-shadow: 0 0 0 1px #000; }
.m-nav-btn .lb { font: 700 11px/1.2 var(--sk-title); color: var(--sk-gold); letter-spacing: .02em; text-shadow: 0 1px 0 #000, 0 0 3px #000; }
body[data-ui="landscape"] .m-nav-btn { border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(40, 48, 74, .96), rgba(8, 10, 18, .97)) !important; border: 2px solid var(--sk-gold-d) !important; box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, .6) !important; }
body[data-ui="landscape"] .m-nav-btn .ic.sk { width: 30px; height: 24px; }
.ic.sk-item { background-image: url(../web/pic/skin/icn_item.png); } .ic.sk-quest { background-image: url(../web/pic/skin/icn_quest.png); }
.ic.sk-friend { background-image: url(../web/pic/skin/icn_friend.png); } .ic.sk-system { background-image: url(../web/pic/skin/icn_system.png); }

/* ---------- tui do: o hoa van goc, mau pham chat (Item color 1..5 = ItemSlotNNNColor1..5), o dang chon vien vang ---------- */
body[data-ui] #bagPanel .bg-head { position: relative; padding-right: 46px; }
body[data-ui] #bagPanel .bg-head b { font: 700 17px/1.3 var(--sk-title); color: #fff1c2; text-shadow: 0 1px 0 #000, 0 0 4px #000; }
body[data-ui] #bagPanel .bg-money { display: inline-flex; align-items: center; gap: 4px; color: #ffe08a; font-weight: 700; text-shadow: 0 1px 1px #000; }
.sk-coin { display: inline-block; width: 20px; height: 18px; background: center / contain no-repeat; vertical-align: middle; }
.sk-coin.nl { background-image: url(../web/pic/skin/ic_nl.png); } .sk-coin.knb { background-image: url(../web/pic/skin/ic_knb.png); }
.sk-coin.np { background-image: url(../web/pic/skin/ic_np.png); } .sk-coin.gui { background-image: url(../web/pic/skin/ic_gui.png); }
body[data-ui="portrait"] #bagPanel .bg-grid, body[data-ui="landscape"] #bagPanel .bg-grid { gap: 3px; padding: 4px; background: rgba(0, 0, 0, .45); border: 1px solid var(--sk-gold-d); box-shadow: inset 0 0 0 1px #000; }
body[data-ui="portrait"] #bagPanel .bg-cell, body[data-ui="landscape"] #bagPanel .bg-cell {
  position: relative; border: 0 !important; border-radius: 0 !important; background: url(../web/pic/skin/slot.png) center / 100% 100% !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8), 0 0 0 1px rgba(156, 116, 52, .35); }
body[data-ui] #bagPanel .bg-cell[data-q]::before { content: ''; position: absolute; inset: 2px; background: center / 100% 100% no-repeat; opacity: .5; pointer-events: none; }
body[data-ui] #bagPanel .bg-cell[data-q="1"]::before { background-image: url(../web/pic/skin/q1.png); }
body[data-ui] #bagPanel .bg-cell[data-q="2"]::before { background-image: url(../web/pic/skin/q2.png); }
body[data-ui] #bagPanel .bg-cell[data-q="3"]::before { background-image: url(../web/pic/skin/q3.png); }
body[data-ui] #bagPanel .bg-cell[data-q="4"]::before { background-image: url(../web/pic/skin/q4.png); }
body[data-ui] #bagPanel .bg-cell[data-q="5"]::before { background-image: url(../web/pic/skin/q5.png); }
body[data-ui] #bagPanel .bg-cell canvas { position: relative; filter: drop-shadow(0 1px 1px #000); }
body[data-ui] #bagPanel .bg-cell.sel { box-shadow: inset 0 0 0 2px #ffe08a, 0 0 8px rgba(255, 210, 110, .8) !important; }
body[data-ui] #bagPanel .bg-cell.dim canvas { opacity: .45; filter: grayscale(.8); }
body[data-ui] #bagPanel .bg-n { color: #fff; font-weight: 700; text-shadow: 0 0 2px #000, 0 1px 1px #000, 1px 0 1px #000, -1px 0 1px #000; }
body[data-ui] #bagPanel .bg-detail { background: linear-gradient(180deg, rgba(24, 30, 48, .97), rgba(8, 10, 18, .98)) !important; border: 1px solid var(--sk-line) !important; border-radius: 2px !important; }
body[data-ui] #bagPanel .bg-detail b { color: #fff1c2; font-family: var(--sk-title); }

/* ---------- nhan vat: buc chan dung goc vang + 9 o trang bi co hinh mo (kieu bup be giay nhu MenuItem.xml) ---------- */
.m-c-doll { display: grid; grid-template-columns: 58px 1fr 58px; grid-template-rows: repeat(4, 58px) auto; gap: 6px 8px; align-items: center; margin: 4px 0 8px; }
.m-c-doll .m-c-frame { grid-column: 2; grid-row: 1 / 5; position: relative; align-self: stretch; border: 18px solid transparent; border-image: url(../web/pic/skin/portrait.png) 20 / 18px stretch;
  background: radial-gradient(ellipse at 50% 88%, rgba(170, 130, 60, .4), rgba(0, 0, 0, 0) 62%), linear-gradient(180deg, rgba(30, 24, 40, .65), rgba(8, 8, 14, .85)); background-clip: padding-box; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.m-c-doll .m-c-frame canvas { width: 150px; height: 190px; max-height: 100%; image-rendering: auto; margin-bottom: -10px; }
.m-c-doll .m-c-slot { position: relative; width: 58px; height: 58px; padding: 0; border: 0 !important; border-radius: 0 !important; display: flex; align-items: center; justify-content: center;
  background: url(../web/pic/skin/slot.png) center / 100% 100% !important; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px rgba(156, 116, 52, .55); }
.m-c-doll .m-c-slot.empty { background: url(../web/pic/skin/eq_body.png) center / 100% 100% !important; }
.m-c-doll .m-c-slot.empty[data-s="weapon"] { background-image: url(../web/pic/skin/eq_weapon.png) !important; }
.m-c-doll .m-c-slot.empty[data-s="head"] { background-image: url(../web/pic/skin/eq_head.png) !important; }
.m-c-doll .m-c-slot.empty[data-s="hat"] { background-image: url(../web/pic/skin/eq_hat.png) !important; }
.m-c-doll .m-c-slot.empty[data-s="amulet"] { background-image: url(../web/pic/skin/eq_amulet.png) !important; }
.m-c-doll .m-c-slot.empty[data-s="outfit"] { background-image: url(../web/pic/skin/eq_outfit.png) !important; }
.m-c-doll .m-c-slot.empty[data-s="ring"] { background-image: url(../web/pic/skin/eq_ring.png) !important; }
.m-c-doll .m-c-slot.empty[data-s="shoes"] { background-image: url(../web/pic/skin/eq_shoes.png) !important; }
.m-c-doll .m-c-slot.empty[data-s="belt"] { background-image: url(../web/pic/skin/eq_belt.png) !important; }
.m-c-doll .m-c-slot canvas { width: 44px; height: 44px; filter: drop-shadow(0 1px 1px #000); }
.m-c-doll .m-c-slot .m-c-sn { position: absolute; left: 0; right: 0; bottom: -1px; font: 600 10px/1.2 var(--sk-title); color: rgba(240, 220, 160, .75); text-shadow: 0 1px 1px #000; pointer-events: none; }
.m-c-doll .m-c-slot.on { box-shadow: inset 0 0 0 2px #ffe08a, 0 0 8px rgba(255, 210, 110, .85); }
.m-c-doll .m-c-slot.c1 { grid-column: 1; } .m-c-doll .m-c-slot.c3 { grid-column: 3; }
.m-c-doll .m-c-slot.bot { grid-column: 2; grid-row: 5; justify-self: center; }
.m-c-face { border-radius: 2px !important; border: 2px solid var(--sk-gold-d) !important; box-shadow: 0 0 0 1px #000, inset 0 0 6px #000; }
.m-c-line { border: 1px solid var(--sk-line2) !important; background: var(--sk-field) !important; border-radius: 2px !important; }
.m-c-line span { color: var(--sk-gold) !important; }

/* ---------- menu: luoi o bieu tuong goc ---------- */
.m-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 6px; }
body[data-ui="landscape"] .m-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.m-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 76px; padding: 6px 2px 5px;
  border: 1px solid rgba(156, 116, 52, .7) !important; border-radius: 2px; color: var(--sk-gold) !important;
  background: radial-gradient(ellipse at 50% 35%, rgba(60, 74, 110, .55), rgba(8, 10, 18, .9) 70%), url(../web/pic/skin/tex_blue.png) center / 92px 188px !important;
  box-shadow: inset 0 0 0 1px #000, 0 1px 3px rgba(0, 0, 0, .7); font: 700 12px/1.15 var(--sk-title); text-shadow: 0 1px 0 #000, 0 0 3px #000; text-align: center; }
.m-tile:active { transform: scale(.96); box-shadow: inset 0 0 0 2px #ffe08a; }
.m-tile .ti { width: 38px; height: 34px; background: center / contain no-repeat; filter: drop-shadow(0 2px 2px #000); }
.m-tile canvas.ti { width: 36px; height: 36px; image-rendering: auto; }
.m-tile .badge { position: absolute; top: 3px; right: 4px; min-width: 16px; height: 16px; border-radius: 8px; background: #c8322c; color: #fff; font: 700 10px/16px system-ui, sans-serif; padding: 0 4px; box-shadow: 0 0 0 1px #000; }
.m-tile.on { border-color: #ffe08a !important; box-shadow: inset 0 0 0 1px #ffe08a, 0 0 6px rgba(255, 210, 110, .6); }

/* thanh truot / hop kiem theo mau vang */
.m-range, .m-sheet input[type="range"], .m-sheet input[type="checkbox"] { accent-color: #c9a24e; }
.m-c-doll .m-c-frame canvas.m-c-model { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }

/* so nhiem vu: muc dang chon */
.m-q-item { border-radius: 2px !important; border: 1px solid var(--sk-line2) !important; background: linear-gradient(180deg, rgba(24, 30, 48, .7), rgba(8, 10, 18, .78)) !important; }
.m-q-item.on { border-color: #ffe08a !important; background: linear-gradient(180deg, rgba(64, 80, 120, .65), rgba(14, 18, 30, .85)) !important; box-shadow: inset 0 0 0 1px rgba(255, 224, 138, .35); }
.m-q-item b { color: #ffe08a; font-family: var(--sk-title); }
/* bang ban be (net.js friendPanel) */
#friendPanel .fp-head { position: relative; justify-content: center; }
#friendPanel .fp-head b { flex: none !important; font: 700 16px/1.35 var(--sk-title); color: #fff1c2 !important; text-shadow: 0 1px 0 #000, 0 0 4px #000; padding: 2px 18px 3px; border: 6px solid transparent; border-image: url(../web/pic/skin/btn_on.png) 6 fill / 6px stretch; }
#friendPanel button.m-x { position: absolute; right: -4px; top: -4px; }
#friendPanel button.m-x { border: 0 !important; border-image: none !important; background: url(../web/pic/skin/close.png) center / 32px 24px no-repeat !important; font-size: 0 !important; color: transparent !important; width: 44px; height: 38px; }

/* ---------- HUD: khung nhan vat, nut AUTO, o ky nang nhanh, nut chat - cung tong son mai xanh vien vang ---------- */
#mui .m-chip:not(#mMap) { background: linear-gradient(180deg, rgba(24, 30, 48, .9), rgba(6, 8, 14, .92)); border: 1px solid var(--sk-gold-d); border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 2px 8px rgba(0, 0, 0, .6); }
#mChar canvas { border-color: var(--sk-gold-d); background: #10131c; }
#mChar .m-name small { color: var(--sk-gold); }
.m-auto, .m-sk { background: radial-gradient(circle at 35% 30%, rgba(46, 56, 86, .96), rgba(8, 10, 18, .97)) !important; border-color: var(--sk-gold-d) !important; box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, .6); }
.m-auto b { color: var(--sk-gold); font-family: var(--sk-title); }

/* ti vo bang: dai tin tren cung (mobile.js M.gwHud) */
.m-gw { position: absolute; left: 50%; top: calc(var(--sat) + 62px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 4px 10px; pointer-events: none; white-space: nowrap;
  background: linear-gradient(180deg, rgba(24, 30, 48, .92), rgba(6, 8, 14, .94)); border: 1px solid var(--sk-gold-d); box-shadow: 0 0 0 1px #000; font: 600 12px/1.3 var(--sk-title); color: #ff9a8a; text-shadow: 0 1px 0 #000; }
.m-gw .me { color: #9fe8a0; } .m-gw b { color: #ffe08a; font-size: 14px; }

/* Thuong Thanh: gia mot dong, nut mot dong (vien nut son mai day hon), bieu tuong thoi KNB goc */
.c-ft .m-btn { min-width: 0; padding: 0 6px; flex: none; }
body[data-ui="portrait"] .c-ft { flex-wrap: wrap; }
body[data-ui="portrait"] .c-pr { flex-basis: 100%; }
body[data-ui="portrait"] .c-ft .m-btn { flex: 1; }
.c-bal i { width: 24px; height: 20px; border-radius: 0; box-shadow: none; background: url(../web/pic/skin/ic_knb.png) center / contain no-repeat; }
.c-top { background: linear-gradient(180deg, rgba(16, 20, 34, .98), rgba(10, 12, 22, .96)) !important; border-bottom: 1px solid var(--sk-gold-d) !important; }
.c-ic { border-radius: 0 !important; border: 0 !important; background: url(../web/pic/skin/slot.png) center / 100% 100% !important; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px rgba(156, 116, 52, .55); }

/* hop hoi / xac nhan (ask.js) thay confirm / prompt cua trinh duyet */
.m-ask-shade { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.m-ask { width: min(92vw, 400px); box-sizing: border-box; padding: 10px 12px 12px; color: var(--sk-text); font: 14px/1.45 system-ui, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, rgba(16, 20, 34, .95), rgba(7, 9, 16, .97)), url(../web/pic/skin/tex_blue.png) 0 0 / 92px 188px repeat; background-clip: padding-box;
  border: 15px solid transparent; border-image: url(../web/pic/skin/frame.png) 14 / 15px stretch; box-shadow: 0 6px 30px rgba(0, 0, 0, .85); }
.m-ask-text { white-space: pre-wrap; margin: 2px 2px 10px; }
.m-ask-in { width: 100%; box-sizing: border-box; min-height: 40px; padding: 6px 8px; font-size: 16px; margin-bottom: 10px; background: var(--sk-field); border: 1px solid var(--sk-line); color: var(--sk-text); border-radius: 2px; outline: 0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8); }
.m-ask-in:focus { border-color: #ffe08a; }
.m-ask-acts { display: flex; gap: 8px; justify-content: flex-end; }
.m-ask-acts .m-btn { min-width: 96px; min-height: 42px; }

/* ---------- lenh trong tran (mobile.js m-cmd): cung kieu nut son mai, "Danh" tong do ---------- */
.m-cmd { box-sizing: border-box; border: 8px solid transparent !important; border-image: url(../web/pic/skin/btn.png) 6 fill / 8px stretch !important; border-radius: 0 !important;
  background: none !important; color: #f4e6bd !important; font: 700 15px/1.2 var(--sk-title) !important; text-shadow: 0 1px 1px #000, 0 0 3px #000; box-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.m-cmd.main { border-image-source: url(../web/pic/skin/btn_on.png) !important; filter: hue-rotate(150deg) saturate(1.5) brightness(1.05); font-size: 17px !important; color: #fff3d6 !important; }
.m-cmd.on { border-image-source: url(../web/pic/skin/btn_on.png) !important; color: #b8ffbf !important; }
.m-cmd small { color: #d8cfae !important; }
#mBattle { background: linear-gradient(180deg, rgba(10, 12, 22, .2), rgba(6, 8, 14, .92) 18%) !important; }

/* ---------- hop thoai NPC (mobile): khung vang, chan dung NPC noi phia tren (NPCPic cua Dialogue.xml), lua chon kieu dong son mai ---------- */
body[data-ui="portrait"] #dialog, body[data-ui="landscape"] #dialog {
  overflow: visible !important; border-radius: 0 !important; padding: 8px 12px 10px !important; box-shadow: 0 -2px 20px rgba(0, 0, 0, .85) !important;
  background: linear-gradient(180deg, rgba(16, 20, 34, .93), rgba(7, 9, 16, .96)), url(../web/pic/skin/tex_blue.png) 0 0 / 92px 188px repeat !important; background-clip: padding-box !important;
  border: 15px solid transparent !important; border-image: url(../web/pic/skin/frame.png) 14 / 15px stretch !important; }
body[data-ui="portrait"] #dialog > :not(#dFace), body[data-ui="landscape"] #dialog > :not(#dFace) { position: relative; }
body[data-ui="portrait"] #dialog #dText { max-height: calc(var(--vh, 1vh) * 30); overflow: auto; }
body[data-ui="portrait"] #dialog h3, body[data-ui="landscape"] #dialog h3 { font: 700 16px/1.3 var(--sk-title) !important; color: #fff1c2 !important; text-shadow: 0 1px 0 #000, 0 0 4px #000; padding-left: 116px; min-height: 22px; }
#dialog #dFace { display: none; }
body[data-ui="portrait"] #dialog #dFace, body[data-ui="landscape"] #dialog #dFace { display: block; position: absolute; left: -6px; bottom: calc(100% - 46px); width: 120px; height: auto; max-height: 180px; object-fit: contain; object-position: bottom; pointer-events: none; filter: drop-shadow(0 2px 4px #000); z-index: 1; }
body[data-ui="portrait"] #dialog #dFace[style*="none"] ~ h3, body[data-ui="landscape"] #dialog #dFace[style*="none"] ~ h3 { padding-left: 0; }
body[data-ui] #dialog .close { font-size: 0 !important; color: transparent !important; background: url(../web/pic/skin/close.png) center / 32px 24px no-repeat; opacity: 1 !important; top: -10px !important; right: -8px !important; }
body[data-ui="portrait"] #dAnswers .ans, body[data-ui="landscape"] #dAnswers .ans {
  min-height: 44px; border-radius: 0 !important; border: 7px solid transparent !important; border-image: url(../web/pic/skin/btn.png) 6 fill / 7px stretch !important; background: none !important;
  color: #f6ecc8 !important; font: 600 15px/1.3 system-ui, "Segoe UI", sans-serif !important; text-shadow: 0 1px 1px #000; padding: 4px 10px !important; }
body[data-ui="portrait"] #dAnswers .ans:active, body[data-ui="landscape"] #dAnswers .ans:active { border-image-source: url(../web/pic/skin/btn_on.png) !important; }

/* o khoa tai san (ItemSlotNNNLock goc) thay emoji */
#bagPanel .bg-lock, .m-c-doll .bg-lock { font-size: 0 !important; width: 14px; height: 18px; background: url(../web/pic/skin/lock.png) center / contain no-repeat; filter: drop-shadow(0 1px 1px #000); }
.m-c-doll-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.m-c-doll-mini .m-c-slot { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: url(../web/pic/skin/slot.png) center / 100% 100%; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px rgba(156, 116, 52, .55); }
.m-c-doll-mini .m-c-slot canvas { width: 40px; height: 40px; }

/* bang thao tac (M.actions): moi thao tac la mot nut son mai ca dong, 2 cot */
.m-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
body[data-ui="landscape"] .m-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-acts .m-act { min-height: 46px; width: 100%; font-size: 14px; }
.m-acts .m-c-note { grid-column: 1 / -1; }

/* khung chat mobile */
#mChat { background: linear-gradient(180deg, rgba(16, 20, 34, .94), rgba(7, 9, 16, .97)), url(../web/pic/skin/tex_blue.png) 0 0 / 92px 188px repeat !important; background-clip: padding-box !important;
  border: 15px solid transparent !important; border-image: url(../web/pic/skin/frame.png) 14 / 15px stretch !important; border-radius: 0 !important; padding: 4px 6px 6px !important; }
.m-chat-tab { border-radius: 0 !important; border: 6px solid transparent !important; border-image: url(../web/pic/skin/btn.png) 6 fill / 6px stretch !important; background: none !important; color: #f4e6bd !important; font-weight: 600; text-shadow: 0 1px 1px #000; padding: 0 8px !important; min-height: 36px; }
.m-chat-tab.on { border-image-source: url(../web/pic/skin/btn_on.png) !important; color: #fff6d4 !important; }
.m-chat-log { border-radius: 2px !important; background: rgba(0, 0, 0, .45) !important; border: 1px solid var(--sk-line2); }
.m-chat-row input { border-radius: 2px !important; background: var(--sk-field) !important; border-color: var(--sk-line) !important; }
.m-chat-fab { background: radial-gradient(circle at 35% 30%, rgba(46, 56, 86, .96), rgba(8, 10, 18, .97)) !important; border: 2px solid var(--sk-gold-d) !important; box-shadow: 0 0 0 1px #000, 0 2px 6px rgba(0, 0, 0, .6) !important; }
.m-chat-head .m-x { position: static !important; flex: none; width: 40px; }

/* thong bao noi (toast) */
#toast { background: linear-gradient(180deg, rgba(20, 24, 40, .95), rgba(8, 10, 18, .96)) !important; border: 1px solid var(--sk-gold-d) !important; border-radius: 2px !important;
  box-shadow: 0 0 0 1px #000, 0 4px 14px rgba(0, 0, 0, .7) !important; color: #fff1c2 !important; text-shadow: 0 1px 1px #000; }

/* trang dang nhap mobile (mlogin.js): khung vang goc, nut son mai */
#mLogin .ml-card { border-radius: 0 !important; border: 16px solid transparent !important; border-image: url(../web/pic/skin/frame.png) 14 / 16px stretch !important;
  background: linear-gradient(180deg, rgba(16, 20, 34, .9), rgba(7, 9, 16, .94)), url(../web/pic/skin/tex_blue.png) 0 0 / 92px 188px repeat !important; background-clip: padding-box !important; padding: 12px 14px 12px !important; }
#mLogin button.ml-b { border-radius: 0 !important; border: 8px solid transparent !important; border-image: url(../web/pic/skin/btn.png) 6 fill / 8px stretch !important; background: none !important;
  color: #f4e6bd !important; font: 700 16px/1.2 var(--sk-title) !important; text-shadow: 0 1px 1px #000, 0 0 3px #000; box-shadow: none !important; }
#mLogin button.ml-b.pri { border-image-source: url(../web/pic/skin/btn_on.png) !important; color: #fff6d4 !important; }
#mLogin input.ml-i { border-radius: 2px !important; background: var(--sk-field) !important; border-color: var(--sk-line) !important; }
#mLogin .ml-ch { border-radius: 2px !important; background: linear-gradient(180deg, rgba(24, 30, 48, .75), rgba(8, 10, 18, .85)) !important; border: 1px solid var(--sk-line) !important; }

/* bieu tuong cam xuc (ask.js emo) */
.m-emo { vertical-align: middle; width: 20px; height: 20px; }
.m-emo-box { width: min(94vw, 460px); }
.m-emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; max-height: 50vh; overflow: auto; margin-bottom: 8px; }
.m-emo-b { width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid var(--sk-line2); background: rgba(0, 0, 0, .35); border-radius: 2px; display: flex; align-items: center; justify-content: center; }
.m-emo-b:active, .m-emo-b:hover { border-color: #ffe08a; }
.m-emo-b canvas { width: 30px; height: 30px; }
.m-chat-row .m-emo-open { min-width: 44px !important; padding: 0 !important; font-size: 18px; }
body[data-ui] #friendPanel button.m-x { border: 0 !important; border-image: none !important; background: url(../web/pic/skin/close.png) center / 32px 24px no-repeat !important; font-size: 0 !important; color: transparent !important; width: 44px; height: 38px; position: absolute; right: -4px; top: -4px; }
.m-gw { pointer-events: auto !important; cursor: pointer; }

/* mo hinh tro thu / thu (m-p-model): khung chan dung goc vang nhu bup be giay */
.m-p-model { border-radius: 0 !important; border: 14px solid transparent !important; border-image: url(../web/pic/skin/portrait.png) 20 / 14px stretch !important;
  background: radial-gradient(ellipse at 50% 85%, rgba(170, 130, 60, .4), rgba(0, 0, 0, 0) 62%), linear-gradient(180deg, rgba(30, 24, 40, .65), rgba(8, 8, 14, .85)) !important; background-clip: padding-box !important; box-sizing: border-box; }
.m-p-chips .m-p-chip { min-height: 40px; }

/* dai tieu de: hoa van la phan tu flex hai ben, chu co lai va cat "..." khi qua dai */
.m-sheet .m-head .m-ttl { display: inline-flex; align-items: center; max-width: calc(100% - 50px); min-width: 0; }
.m-sheet .m-head .m-orn { position: static !important; flex: none; margin: 0 -5px !important; z-index: 1; }
.m-sheet .m-head .m-ttl b { flex: 0 1 auto !important; min-width: 0 !important; max-width: none !important; }
.m-sheet .m-head { padding-left: 40px !important; padding-right: 40px !important; }
.m-sheet .m-head .m-ttl { max-width: 100%; }
.m-sheet .m-head .m-ttl b { font-size: 15px !important; padding: 2px 10px 3px !important; }

/* loi moi to doi / giao dich (net.js party_inv, ask2): khung vang cung phong cach */
.m-pop { background: linear-gradient(180deg, rgba(16, 20, 34, .96), rgba(7, 9, 16, .97)), url(../web/pic/skin/tex_blue.png) 0 0 / 92px 188px repeat !important; background-clip: padding-box !important;
  border: 14px solid transparent !important; border-image: url(../web/pic/skin/frame.png) 14 / 14px stretch !important; border-radius: 0 !important; padding: 6px 10px 8px !important; color: #f3e6c4 !important; box-shadow: 0 6px 24px rgba(0, 0, 0, .8); }
.m-pop .m-btn { min-height: 40px; min-width: 88px; }
.m-pop { min-width: 270px; } .m-pop .m-btn { display: inline-block; vertical-align: middle; }

/* Thang cap thu cong: hang duoi thanh EXP + thanh EXP o HUD sang khi du kinh nghiem */
.m-c-lvup { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #d8c58e; }
.m-c-lvup span.full { color: #ff8a6a; }
.m-c-lvup .m-btn { min-width: 96px; white-space: nowrap; flex: none; }
.m-bar.exp.ready i { background: linear-gradient(180deg, #fff1a8, #e0a92c); box-shadow: 0 0 6px #ffd36a; animation: m-xp-ready 1.2s ease-in-out infinite alternate; }
@keyframes m-xp-ready { from { filter: brightness(1); } to { filter: brightness(1.45); } }
/* nap USDT (topup.js): so du, the don dang cho (so tien + dia chi + QR), o nhap */
.pay-bal { flex-wrap: wrap; } .pay-bal b { margin-right: 10px; } .pay-bal .pay-usdt { color: #6fd6a6; font-weight: 700; }
.pay-card { margin: 10px 0; padding: 10px 12px; background: linear-gradient(180deg, rgba(24, 30, 48, .75), rgba(8, 10, 18, .8)); border: 1px solid var(--sk-line); border-radius: 3px; }
.pay-h { font: 700 14px/1.3 var(--sk-title); color: var(--sk-gold); }
.pay-left { margin: 2px 0 6px; color: #8ee6b0; font-size: 13px; }
.pay-lbl { margin-top: 6px; color: var(--sk-dim); font-size: 12px; }
.pay-line { display: flex; align-items: center; gap: 8px; margin: 4px 0; } .pay-line input { flex: 1; min-width: 0; } .pay-line .m-btn { flex: none; min-width: 64px; }
.pay-amt { flex: 1; font-size: 22px; color: #ffd23a; letter-spacing: .5px; -webkit-user-select: text; user-select: text; }
.pay-addr { flex: 1; min-width: 0; padding: 6px 8px; background: var(--sk-field); border: 1px dashed var(--sk-line); color: #fff; font: 13px/1.35 ui-monospace, Consolas, monospace; word-break: break-all; -webkit-user-select: text; user-select: text; }
.pay-qr { display: flex; justify-content: center; margin: 8px 0 2px; } .pay-qr img { width: 160px; height: 160px; padding: 6px; background: #fff; image-rendering: pixelated; }
.pay-go { width: 100%; margin-top: 8px; min-height: 44px; }
/* gop y / bao loi (bugreport.js): icon #mBug mep trai = nut tron goc (skin round.png) + icon vat pham goc; bang "Gop y - Bao loi" */
#mBug { position: absolute; left: calc(var(--sal) + 8px); width: 52px; height: 58px; padding: 0; border: 0; background: none; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 0; -webkit-tap-highlight-color: transparent; }
body[data-ui="portrait"] #mBug { top: calc(var(--sat) + 172px); }
body[data-ui="landscape"] #mBug { top: calc(var(--sat) + 112px); }
#mBug i { position: relative; width: 44px; height: 44px; background: url(../web/pic/skin/round.png) 0 0 / 100% 100% no-repeat; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
#mBug:active i { background-image: url(../web/pic/skin/round_on.png); }
#mBug canvas { width: 30px; height: 30px; }
#mBug small { margin-top: -2px; font: 700 11px/1.1 var(--sk-title, system-ui); color: var(--sk-gold, #ffe08a); text-shadow: 0 0 2px #000, 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; }
#mBug.new i::after { content: ''; position: absolute; right: 1px; top: 1px; width: 10px; height: 10px; border-radius: 50%; background: #e8352b; border: 1.5px solid #ffe9b0; box-shadow: 0 0 4px #000; }
body.m-battle #mBug, body.m-busy #mBug { display: none !important; }
.bug-tabs { display: flex; gap: 8px; margin-bottom: 4px; } .bug-tabs .m-btn { flex: 1; min-height: 40px; position: relative; }
.bug-dot::after { content: ''; position: absolute; right: 8px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #e8352b; box-shadow: 0 0 3px #000; }
.bug-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .bug-kinds .m-btn { min-height: 38px; padding: 0 6px; font-size: 13px; }
.bug-ta { display: block; width: 100%; box-sizing: border-box; min-height: 112px; padding: 8px 10px; resize: vertical; font: 16px/1.4 system-ui, "Segoe UI", sans-serif; outline: none;
  background: var(--sk-field) !important; border: 1px solid var(--sk-line) !important; border-radius: 2px; color: var(--sk-text, #fff) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8); -webkit-user-select: text; user-select: text; }
.bug-ta:focus { border-color: var(--sk-gold-d) !important; }
.bug-imgs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.bug-img { position: relative; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bug-img img { width: 96px; height: 72px; object-fit: cover; border: 1px solid var(--sk-gold-d); box-shadow: 0 0 0 1px #000; background: #000; }
.bug-img small { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--sk-dim, #b9a77a); }
.bug-x { position: absolute; right: -6px; top: -6px; width: 26px; height: 22px; padding: 0; border: 0; background: url(../web/pic/skin/close.png) 0 0 / 100% 100% no-repeat; }
.bug-x:active { background-image: url(../web/pic/skin/close_on.png); }
.bug-add { width: 72px; height: 72px; padding: 0; border: 0; background: url(../web/pic/skin/slot.png) 0 0 / 100% 100% no-repeat; position: relative; }
.bug-add::before { content: '+'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 34px/1 var(--sk-title, system-ui); color: var(--sk-gold, #ffe08a); text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.bug-card { margin: 8px 0; }
.bug-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .bug-h b { font: 700 14px/1.3 var(--sk-title); color: var(--sk-gold); }
.bug-st { font-size: 12px; padding: 1px 8px; border: 1px solid var(--sk-line); border-radius: 2px; white-space: nowrap; }
.bug-st0 { color: #ffd166; } .bug-st1 { color: #8fd3ff; } .bug-st2 { color: #8ee6b0; } .bug-st3 { color: #9a9282; }
.bug-t { display: block; color: var(--sk-dim, #b9a77a); font-size: 12px; margin: 1px 0 4px; }
.bug-txt { white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.bug-reply { margin-top: 8px; padding: 6px 8px; border-left: 3px solid #4f9a62; background: rgba(30, 70, 40, .35); white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.bug-reply b { display: block; color: #8ee6b0; font-size: 12px; margin-bottom: 2px; }