/* ============================================================
   Giao dien RPG: giay da, vien dong, nut noi khoi.
   Mau va do day vien deu di qua bien -> doi mot cho la doi het.
   ============================================================ */
:root{
  --ink:#30241a; --ink-soft:#7d6a52;
  --paper:#fbf1dc; --paper-2:#f4e5c6; --paper-3:#ecd9b2;
  --line:#d8bf90;
  --wood:#6b4426; --wood-d:#4a2d18; --wood-l:#8a5c33;
  --gold:#d9a93a; --gold-d:#a67a1d; --gold-l:#f2d98a;
  --green:#4f9a3f; --green-d:#376f2b;
  --blue:#3f7fc4; --blue-d:#2b5c94;
  --red:#c8463a; --red-d:#94302a;
  --rose:#e07aa8; --sta:#d9663a;
  --shadow:0 3px 0 rgba(74,45,24,.35), 0 12px 28px rgba(20,12,4,.35);
  --r:13px;
  /* Giao dien giay da chi co MOT che do sang. Noi ro ra de trinh duyet dang
     o che do toi khong tu boi den o nhap, thanh cuon va o tu dien. */
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
/* Safari iPhone TU PHONG TO chu khi xoay ngang (tren may tinh thi khong) -> chu
   trong nut to ra, lech khoi icon. Khoa lai dung co da viet. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  /* Bo chu nay phai TRUNG voi hang so FONT trong public/js/world.js — chu
     tren canvas (ten nhan vat, bien chi duong, bong thoai) va chu trong HUD
     deu doc cung mot bo, neu khong thi hai nua giao dien lech kieu chu nhau
     o may Windows (noi `ui-rounded` khong co that). */
  font:500 14px/1.45 ui-rounded,"SF Pro Rounded","Segoe UI Variable",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:#1b2416; overflow:hidden; -webkit-tap-highlight-color:transparent;
}
/* CHU TREN NUT KHONG PHAI LA CHU DE BOI DEN.
   "▲", "Nhan vat", "Tui do"... ve mat HTML van la van ban, nen giu lau mot
   nut tren dien thoai la trinh duyet boi den no (va con bat ca menu "Copy /
   Tra tu"). Dang chay ma giu nut ◀ thi ca cum dieu huong den si. `user-select`
   tat han viec chon, `-webkit-touch-callout` tat menu giu-lau cua iOS, va
   `touch-action:manipulation` bo luon do tre 300ms cho cham-doi-de-phong-to. */
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;
  -webkit-appearance:none;appearance:none}
input{font:inherit;color:inherit}
/* Icon nut dieu khien (ico() trong ui.js): SVG net, co = 1em theo co chu cua nut,
   `display:block` + nut can giua bang grid -> nam dung tam tren moi may, ke ca
   iPhone (ky tu ✕ ☰ ◀ thi lech vi moi he dieu hanh mot font). */
.ic{display:block;width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
/* iOS ve o nhap kieu rieng (bong do ben trong, bo goc san) — bo di de giong may tinh.
   Chua lai o tich / nut chon: bo `appearance` la chung bien mat. */
input:not([type=checkbox]):not([type=radio]),textarea{-webkit-appearance:none;appearance:none}
/* Ca cac khung HUD cung vay: nhan nhom "LAM AN", ten ban do, dong ho, nhan
   duoi bieu tuong khay — tat ca la chu, va khong co chu nao trong so do dang
   de boi den. Khung chat va cac o nhap thi KHONG nam o day: con phai copy
   duoc mot dong chat va bôi den duoc chu minh vua go. */
#hud-left,#hud-right,#pad,#quick,.chathint,#actbar,#decorbar,
#maintbar{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
canvas{display:block}
/* Firefox khong hieu ::-webkit-scrollbar — khong co hai dong duoi thi thanh
   cuon trong cac bang van la thanh cuon xam mac dinh, lech han voi khung giay. */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* --- Khung giay da dung chung --- */
.panel{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 40%),
    repeating-linear-gradient(0deg,rgba(160,120,70,.035) 0 2px,transparent 2px 5px),
    var(--paper);
  border:2px solid var(--wood);
  border-radius:var(--r);
  box-shadow:inset 0 0 0 2px var(--gold-l), inset 0 0 14px rgba(190,150,90,.28), var(--shadow);
}
.panel::before,.panel::after{
  content:"";position:absolute;width:9px;height:9px;border:2px solid var(--gold-d);pointer-events:none;
}
.panel::before{left:3px;top:3px;border-right:none;border-bottom:none;border-radius:4px 0 0 0}
.panel::after{right:3px;bottom:3px;border-left:none;border-top:none;border-radius:0 0 4px 0}

/* ================= GATE ================= */
#gate{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto;z-index:50}
/* fixed chu khong absolute: #gate la khung cuon, absolute chi phu dung mot
   man dau — cuon xuong (the tao nhan vat o SP doc) la lo nen den. */
.gate-bg{position:fixed;inset:0;
  background:
    radial-gradient(900px 480px at 50% 120%, #2f6ba8 0%, #3f8ac4 30%, transparent 70%),
    radial-gradient(1200px 600px at 50% -10%, #ffd9a0 0%, #f2a85f 28%, #8fcf6d 62%, #3f7c42 100%);
}
.gate-bg::after{content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(3px 3px at 20% 30%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(3px 3px at 70% 60%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 20%, rgba(255,255,255,.4) 50%, transparent 51%);
  background-size:260px 260px,330px 330px,200px 200px,290px 290px;
  animation:drift 40s linear infinite;
}
@keyframes drift{to{background-position:260px 260px,-330px 330px,200px -200px,-290px 290px}}

.gate-card{width:min(560px,100%);padding:24px;border-width:3px}
.gate-card header{text-align:center;margin-bottom:14px}
.gate-card h1{margin:0;font-size:32px;letter-spacing:-.5px;color:var(--wood-d);
  text-shadow:0 2px 0 var(--gold-l),0 3px 0 rgba(0,0,0,.12)}
.gate-card header p{margin:5px 0 0;color:var(--ink-soft);font-size:13px;font-weight:600}
.tabs{display:flex;gap:6px;background:var(--paper-3);padding:4px;border-radius:12px;margin-bottom:14px;
  box-shadow:inset 0 2px 5px rgba(120,85,40,.2)}
.tab{flex:1;padding:9px;border-radius:9px;font-weight:800;color:var(--ink-soft)}
.tab.on{background:var(--paper);color:var(--wood-d);box-shadow:0 2px 0 var(--line)}
.pane{display:none;flex-direction:column;gap:10px}
.pane.on{display:flex}
/* O "ghi nho mat khau": `label` o duoi la cot, hang nay phai nam ngang; cao
   >= 40px de ngon tay cham duoc, chu khong chi cham dung o vuong. */
.remember{flex-direction:row;align-items:center;gap:8px;min-height:40px;
  font-size:13px;cursor:pointer;user-select:none}
.remember input{width:20px;height:20px;padding:0;flex:none;accent-color:var(--green)}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:800;color:var(--ink-soft)}
label input{padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:#fffdf6;font-weight:600}
label input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(79,154,63,.18)}
/* O mat khau co nut hien/an: nut nam trong o, cao bang o, rong 40px de
   ngon tay cham duoc. */
.passbox{position:relative;display:flex}
/* `.pane` de thang `.pane label input{padding:7px 10px}` cua man ngang. */
.pane .passbox input{flex:1;min-width:0;padding-right:42px}
.passbox .eye{position:absolute;right:2px;top:50%;width:40px;height:40px;
  margin-top:-20px;padding:0;border-radius:8px;font-size:16px;line-height:1;
  opacity:.6}
.passbox .eye:hover,.passbox .eye:focus-visible{opacity:1;background:var(--paper-3)}
.primary{background:linear-gradient(180deg,var(--green),var(--green-d));color:#fff;font-weight:900;padding:13px;
  border-radius:12px;box-shadow:0 4px 0 #2b5721,inset 0 1px 0 rgba(255,255,255,.35);letter-spacing:.3px;
  transition:transform .08s,box-shadow .08s}
.primary:active{transform:translateY(3px);box-shadow:0 1px 0 #2b5721}
.creator{display:flex;gap:14px;align-items:flex-start}
#preview{background:linear-gradient(#cdeab4,#9fd47f);border:2px solid var(--line);border-radius:12px;flex:none}
.creator-ctl{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
/* minmax(0,1fr): cot duoc co nho hon be rong tu nhien cua input — khong co
   thi o mat khau (them nut hien/an) day hang tran ra ngoai khung. */
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.row2 input{width:100%;min-width:0}
.creator-h{margin-bottom:-4px;font-size:12px;font-weight:800;color:var(--ink-soft)}
/* Man dang ky chi con chon nam/nu — doan nay thay cho bon hang o mau cu. */
.creator-note{margin:2px 0 0;font-size:12px;line-height:1.5;color:var(--ink-soft)}
.creator-note b{color:var(--ink)}
.seg{display:flex;gap:6px}
.seg button{flex:1;padding:7px;border-radius:9px;border:2px solid var(--line);font-weight:800;font-size:13px;background:#fffdf6}
.seg button.on{background:var(--wood);color:#fff;border-color:var(--wood-d)}
.swatches{display:flex;align-items:center;gap:8px}
.swatches>span{width:38px;font-size:11px;font-weight:800;color:var(--ink-soft);flex:none}
.swatches>div{display:flex;gap:5px;flex-wrap:wrap}
.sw{width:22px;height:22px;border-radius:7px;border:2px solid rgba(0,0,0,.18)}
.sw.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--gold)}
#gate-err{min-height:18px;margin:10px 0 0;text-align:center;color:var(--red);font-weight:800;font-size:13px}
.gate-card footer{margin-top:8px;text-align:center;font-size:11px;color:#a8977c}

/* ---- Bang "Ve game" ---- */
.aboutlogo{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0 2px}
.aboutlogo img{border-radius:16px;border:2px solid var(--gold-d);box-shadow:0 3px 0 rgba(74,45,24,.3);
  image-rendering:pixelated}
.aboutlogo b{margin-top:8px;font-size:19px;color:var(--wood-d);letter-spacing:-.3px;
  text-shadow:0 1px 0 var(--gold-l)}
.aboutlogo em{font-style:normal;font-size:12px;font-weight:700;color:var(--ink-soft);text-align:center}

/* ================= CUA CAI DAT =================
   Dung truoc man hinh dang nhap khi game bi mo trong tab thay vi trong ung
   dung da cai. Dung lai .gate-bg / .gate-card / .primary cua cua dang nhap
   nen chi can them phan rieng cua no. */
#instgate{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto;z-index:60}
/* Man hinh bao tri dung TREN ca cua cai dat va man hinh dang nhap: khi may chu
   dong cua thi khong con gi de lam o hai man hinh kia. */
#maintgate{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto;z-index:70}
#maintgate .gate-card{max-width:420px;text-align:center}
#maintgate .instgate-state{justify-content:center}
#maintgate .primary{display:block;width:100%;margin-top:4px}
#maintgate footer{margin-top:12px;text-align:center;font-size:11.5px;color:var(--ink-soft)}
/* ================= MAN HINH KHOA TAI KHOAN =================
   Tren TAT CA cac cua khac (ke ca man hinh bao tri): tai khoan bi khoa thi
   khong con man hinh nao co y nghia nua. KHONG co nut dong — chi mot nut
   Dang xuat, dat o duoi cung va rong het be ngang de khong ai phai tim. */
#bangate{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto;z-index:80}
#bangate .gate-card{max-width:460px;text-align:center}
#bangate .instgate-state{justify-content:center}
#bangate .primary{display:block;width:100%;margin-top:4px}
#bangate footer{margin-top:12px;text-align:center;font-size:11.5px;color:var(--ink-soft)}
/* Loi nhan quan tri go tay: de trong mot khung rieng, can trai va giu nguyen
   dau xuong dong — do la mot doan van cho nguoi doc, khong phai mot nhan. */
.bg-note{margin:0;padding:12px 14px;border-radius:12px;background:var(--paper-2);
  border:2px solid var(--line);text-align:left;font-size:13.5px;line-height:1.55;
  color:var(--ink);white-space:pre-wrap;word-break:break-word}
.instgate-card{display:flex;flex-direction:column;gap:13px}
.instgate-icon{margin:0 auto 8px;border-radius:18px;border:2px solid var(--gold-d);
  box-shadow:0 4px 0 rgba(74,45,24,.3);image-rendering:pixelated}
.instgate-card header p{font-size:13.5px;line-height:1.5;max-width:40ch;margin-inline:auto}
.instgate-card header p b{color:var(--wood-d)}
.instgate-state{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;
  padding:10px 13px;border-radius:11px;background:var(--paper-2);border:2px solid var(--line)}
.instgate-state .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--green);
  box-shadow:0 0 0 4px rgba(79,154,63,.2)}
.instgate-state.warn{background:#fdeee6;border-color:#e6b9a4}
.instgate-state.warn .dot{background:var(--sta);box-shadow:0 0 0 4px rgba(217,102,58,.2)}
.instgate-state.err{background:#fbe6e3;border-color:#e0a79e}
.instgate-state.err .dot{background:var(--red);box-shadow:0 0 0 4px rgba(192,57,43,.2)}
.instgate-state b{font-weight:600;color:var(--ink)}
.instgate-steps{background:var(--paper-2);border:2px solid var(--line);border-radius:12px;padding:13px 15px}
.instgate-steps>b{display:block;font-size:12px;font-weight:900;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px}
.instgate-steps ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.instgate-steps li{font-size:13.5px;line-height:1.5;color:var(--ink)}
.instgate-steps li::marker{font-weight:900;color:var(--gold-d)}
.instgate-steps li b{color:var(--wood-d)}
.instgate-hint{margin:0;text-align:center;font-size:12px;color:var(--ink-soft);line-height:1.5}

/* ================= GAME ================= */
#game{position:fixed;inset:0}
/* `cursor:grab` chu khong phai `pointer`: ban do nam-keo duoc bang chuot
   (xem `drag` trong public/js/world.js), con mot cu bam don thi van la bam.
   `touch-action:none` de ngon tay keo ban do khong bi trinh duyet hieu thanh
   cuon trang / keo-de-tai-lai. */
#view{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;
  cursor:grab;touch-action:none}
body.panning #view{cursor:grabbing}

/* ---- Man che khi bang cong cu nha phat trien dang mo ----
   z-index cao nhat trong ca tep: no phai nam tren ca modal va cac cua man
   hinh. Xem public/js/shield.js. */
#shield{position:fixed;inset:0;z-index:999;display:grid;place-items:center;padding:24px;
  background:rgba(14,10,4,.92);backdrop-filter:blur(4px)}
.shield-card{max-width:38ch;text-align:center;color:#fbf1dc;display:grid;gap:10px;justify-items:center}
.shield-ic{font-size:50px;line-height:1}
.shield-card b{font-size:17px;color:#f2d98a}
.shield-card p{margin:0;font-size:13px;line-height:1.6;color:#d8bf90}

/* ---- Dai dem nguoc bao tri ----
   Nam TREN CUNG va vat het be ngang: day la thu duy nhat trong HUD duoc phep
   che mat ban do, vi no la canh bao "sap mat ket noi". z-index cao hon moi
   khung HUD khac (6) nhung thap hon modal (40) va cac cua man hinh (50).
   Dong ho the gioi bi day xuong duoi dai bang mot lop body (xem `body.maint`). */
#maintbar{position:absolute;top:0;left:0;right:0;z-index:30;padding:7px 12px;
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;font-weight:800;color:#fff6e0;text-align:center;
  background:linear-gradient(180deg,rgba(166,122,29,.97),rgba(120,86,16,.97));
  border-bottom:2px solid var(--gold-l);box-shadow:0 3px 12px rgba(20,12,4,.4);
  padding-top:calc(7px + env(safe-area-inset-top))}
#maintbar b{color:#fff}
#maintbar.down{background:linear-gradient(180deg,rgba(184,62,52,.97),rgba(132,38,32,.97));
  border-bottom-color:#f2b0a8}
#maintbar em{font-style:normal;opacity:.85;font-weight:700}
/* Co dai bao tri thi day HUD xuong de hai thu khong de nhau */
body.maint #hud-left,body.maint #hud-right{top:44px}

/* ==================== DẢI THÔNG BÁO THƯỜNG TRỰC ====================
   Quan tri bat / tat o /admin/ (xem server/notice.js). Noi dung dai hon dai
   bao tri nen chu nho lai.

   Dai nay nam NGOAI #game (hien duoc tu man hinh dang nhap) nen phai
   `position:fixed`. Chieu cao van phai DO that (`measureNotice` trong ui.js)
   roi ghi vao bien `--noticeh`: chu nho lai o man hep, iOS con cong them
   safe-area. Moi thu khac chi can doc bien do ma lui xuong. */
:root{--noticeh:0px}
/* Khong co nut dong: day la loi nhan phap ly / mien tru, ai vao cung phai doc
   duoc. Muon go thi quan tri tat o trang /admin/. */
#noticebar{position:fixed;top:0;left:0;right:0;z-index:31;
  display:flex;align-items:stretch;padding-top:env(safe-area-inset-top);
  font-size:11.5px;font-weight:600;line-height:1.4;color:#fdf2d9;
  background:linear-gradient(180deg,rgba(107,74,26,.97),rgba(74,50,17,.97));
  border-bottom:2px solid var(--gold-l);box-shadow:0 3px 12px rgba(20,12,4,.4)}
#noticebar.warn{background:linear-gradient(180deg,rgba(143,58,48,.97),rgba(98,33,27,.97));
  border-bottom-color:#f2b0a8}
/* CHU NAM MOT DONG VA CUON NGANG.
   Truoc day chu boc nhieu dong: mot loi nhan dai tren dien thoai an mat ba
   bon dong ban do suot buoi choi. Gio dai chi cao mot dong, chu dai thi cuon
   ngang — vuot bang cam ung, giu-keo bang chuot, lan banh xe (ui.js doi banh
   xe doc thanh cuon ngang) hoac bam nut `›`.
   Thanh cuon an di: trong mot dai cao ~30px thi thanh cuon cua Windows chiem
   gan nua chieu cao. `overscroll-behavior-x:contain` de cuon het chu khong
   keo luon ca trang, va khong bat cu chi "lui lai" cua trinh duyet. */
.nscroll{flex:1;min-width:0;display:flex;padding:7px 12px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.nscroll::-webkit-scrollbar{width:0;height:0}
.nscroll.drag{cursor:grabbing;user-select:none}
/* `margin:auto` trong flex: chu ngan thi can giua, chu dai thi hai le auto ve
   0 nen KHONG bi cat dau ben trai (de `text-align:center` thi phan tran ra
   phia trai khong cuon tro lai duoc). */
.ntext{margin:auto;white-space:nowrap}
/* Bong mo hai dau dai = "ben nay con chu nua", nen tan di khi da cuon toi
   dau day (`nhead` / `nend` do noticebar.js dat). Chi co khi chu that su dai
   hon dai (`nover`). */
#noticebar.nover .nscroll{--fadel:7%;--fader:9%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fadel),
    #000 calc(100% - var(--fader)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fadel),
    #000 calc(100% - var(--fader)),transparent 100%)}
#noticebar.nover.nhead .nscroll{--fadel:0%}
#noticebar.nover.nend .nscroll{--fader:0%}
/* Nut ‹ › hai ben: quan tri an / hien duoc o /admin/ (class `hasnav`), va chi
   hien khi chu that su dai hon dai. Vung bam 40x30 — dai qua thap de cao
   40px nen bu bang be ngang. */
.nnav{display:none}
#noticebar.nover.hasnav .nnav{display:block;flex:0 0 auto;align-self:center;
  min-width:40px;min-height:30px;padding:0 6px;
  border:1px solid rgba(253,242,217,.45);border-radius:8px;
  background:rgba(20,12,4,.32);color:#fdf2d9;
  font-size:17px;font-weight:700;line-height:1;cursor:pointer}
#noticebar.nover.hasnav .nprev{margin-left:5px}
#noticebar.nover.hasnav .nnext{margin-right:5px}
/* Co nut roi thi chu khong can thut vao nhieu nua */
#noticebar.hasnav .nscroll{padding-left:8px;padding-right:8px}
/* DAI NAY KHONG DUOC DE LEN BAN DO.
   Khac dai bao tri (chi hien vai phut truoc gio dong cua, de len thi chap
   nhan duoc), dai thong bao nam do suot buoi choi — de len la vinh vien che
   mat mot dai ban do. Nen ta DAY CA KHUNG GAME xuong duoi no: `#game` thut
   xuong `--noticeh`, canvas tu hep lai, va `measureNotice` ban mot su kien
   `resize` de world.js do lai khung ve ngay (xem public/js/ui.js). */
body.hasnotice #game{top:var(--noticeh)}
/* ---- HUD trai: chan dung ---- */
/* Bang nhan vat o goc trai. Truoc day rong ~300px va cao ~110px nen an mat ca
   mot goc ban do; gio chan dung nho lai con 2x, cot thong tin hep lai. Bang
   khong co nut ✕ — bat / tat o Menu › Khac › Thiet lap. */
#hud-left{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;z-index:6;
  max-width:min(236px,46vw)}
/* --- THU GON BANG NHAN VAT VE MEP TRAI ---
   Cung co che voi ngan keo nhiem vu: bam cai tai ◀ thi ban chan dung an di,
   chi con lai cai tai ▶ sat mep man hinh. Khac han cong tac o Menu › Thiet lap
   (cai do TAT HAN khung); day la thu gon tam, con lay lai bang mot cu bam. */
.hudrow{display:flex;align-items:center}
#hud-left.min{left:env(safe-area-inset-left);max-width:none}
#hud-left.min .portrait,#hud-left.min #buffs{display:none}
#hud-left .qtoggle{animation:none}
.portrait{display:flex;gap:8px;padding:6px 20px 6px 6px;align-items:center;opacity:.97;cursor:pointer}
.portrait:hover{box-shadow:inset 0 0 0 2px var(--gold),var(--shadow)}
.portrait .pic{position:relative;flex:none}
#me-face{background:linear-gradient(#bfe0f5,#9fd47f);border-radius:8px;border:1.5px solid var(--wood-l)}
.lvbadge{position:absolute;right:-5px;bottom:-4px;min-width:19px;height:19px;padding:0 3px;border-radius:10px;
  background:radial-gradient(circle at 35% 30%,var(--gold-l),var(--gold) 70%);border:2px solid var(--wood);
  color:var(--wood-d);font-size:10px;font-weight:900;display:grid;place-items:center;
  box-shadow:0 2px 0 rgba(74,45,24,.3)}
.portrait .info{min-width:136px;flex:1}
/* Hang tien: [xu] so · [luong] so — thay cho dong ten + o giai cap. Dong xu /
   thoi luong ve bang CSS (cung kieu vi o Tui do), khong dung emoji -> khong lech
   tren iPhone. So rut gon (vnShort), so day du nam o `title`.
   `width:0; min-width:100%`: hang nay KHONG duoc keo rong bang (so ty dai se day
   bang de len dong ho) — bang rong theo cac thanh chi so. */
.portrait .money{display:flex;align-items:center;gap:9px;width:0;min-width:100%;margin-top:3px}
.portrait .mc{display:flex;align-items:center;gap:4px;min-width:0;font-size:12.5px;font-weight:900;line-height:1.25;
  color:var(--wood-d)}
.portrait .mc b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portrait .mc i{flex:none;width:13px;height:13px;border-radius:50%;box-shadow:0 1px 0 rgba(0,0,0,.18)}
.portrait .mc.xu i{background:radial-gradient(circle at 35% 30%,#ffffff,#c9d0d8 65%,#8d97a3);border:1.5px solid #7d8794}
.portrait .mc.luong i{background:radial-gradient(circle at 35% 30%,#fff3bf,var(--gold) 65%,var(--gold-d));
  border:1.5px solid var(--gold-d);border-radius:4px}
/* Thanh tien do. KHONG cat noi dung: chu tieng Viet co dau tren + dau duoi nen
   mot thanh 11px voi overflow:hidden se an mat dau. Thanh cao hon, phan to mau
   tu bo goc lay nen khong can overflow:hidden nua. */
.bar{position:relative;height:14px;background:#e3d2b0;border:1.5px solid var(--wood-l);border-radius:8px;
  overflow:visible;margin-top:4px;box-shadow:inset 0 2px 3px rgba(100,70,30,.25)}
.bar i{display:block;height:100%;width:0%;transition:width .3s;border-radius:7px;max-width:100%}
.bar em{position:absolute;inset:-2px 0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:10px;font-weight:900;line-height:1;white-space:nowrap;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 3px rgba(0,0,0,.5);letter-spacing:.2px}

/* Hang chi so tren chan dung: nhan va so nam NGOAI thanh nen khong bao gio bi cat */
.stat{display:grid;grid-template-columns:15px 1fr auto;align-items:center;gap:6px;margin-top:5px}
.stat .k{font-style:normal;font-size:11px;line-height:1;text-align:center}
.stat .v{font-size:10px;font-weight:800;color:var(--wood-d);white-space:nowrap}
.portrait .bar{margin-top:0;height:8px}
.portrait .stat{grid-template-columns:13px 1fr auto;gap:5px;margin-top:3px}
.portrait .stat .v{font-size:9px}
.portrait .stat .k{font-size:10px}
/* Canh bao the luc / cam xuc: thanh nhap nhay de khong bo qua */
.portrait .stat.low .v{color:var(--red-d)}
.portrait .stat.low .bar{border-color:var(--red);animation:warnpulse 1.5s ease-in-out infinite}
@keyframes warnpulse{50%{box-shadow:0 0 0 2px rgba(200,70,58,.35)}}
.bar.xp i{background:linear-gradient(180deg,#9fe07a,var(--green))}
.bar.sta i{background:linear-gradient(180deg,#f2a06a,var(--sta))}
.bar.mood i{background:linear-gradient(180deg,#ffd98f,#e8a0c4)}

/* ---- Bang Nhan vat › Tong quan ---- */
/* The ho so: chan dung lon ben trai, ten + nhan + thanh kinh nghiem ben phai */
.prof-hero{display:flex;gap:16px;align-items:center;padding:14px 16px;margin-bottom:12px;border-radius:16px;
  background:linear-gradient(135deg,#fff8e6,#f1ddb0);border:2px solid var(--wood-l);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 0 rgba(74,45,24,.12)}
.prof-pic{position:relative;flex:none;padding:4px;border-radius:16px;
  background:linear-gradient(#bfe0f5,#9fd47f);border:2.5px solid var(--wood);box-shadow:inset 0 0 0 2px var(--gold-l)}
.prof-pic canvas{display:block;image-rendering:pixelated;width:80px;height:auto}
.prof-lv{position:absolute;right:-9px;bottom:-9px;min-width:30px;height:30px;padding:0 6px;border-radius:15px;
  display:grid;place-items:center;font-size:14px;font-weight:900;color:#fff;
  background:linear-gradient(180deg,var(--gold),var(--gold-d));border:2.5px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.prof-who{flex:1;min-width:0}
.prof-who h3{margin:0 0 6px;font-size:21px;line-height:1.15;color:var(--wood-d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prof-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
/* The gioi tinh: icon SVG (ico male/female) + chu, can giua bang flex */
.ptag.pg{display:inline-flex;align-items:center;gap:4px}
.ptag.pg .ic{width:12px;height:12px;stroke-width:2.8}
.ptag.pg.nam .ic{color:#3f7fc4}
.ptag.pg.nu .ic{color:#d0578a}
.ptag{padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;color:var(--wood-d);
  background:rgba(255,255,255,.7);border:1.5px solid var(--line);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Thanh chi so: [icon] nhan ...... gia tri / thanh / ghi chu */
.pmeter{min-width:0}
.pm-top{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.pm-top i{font-style:normal;font-size:16px;line-height:1}
.pm-top b{flex:1;min-width:0;font-size:12.5px;font-weight:900;color:var(--wood-d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-top span{font-size:12px;font-weight:900;color:var(--ink-soft);white-space:nowrap}
.pm-bar{height:10px;border-radius:999px;background:rgba(74,45,24,.14);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.pm-bar i{display:block;height:100%;border-radius:999px;transition:width .3s;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.pmeter.xp .pm-bar i{background:linear-gradient(90deg,#f2c94c,#d99a1e)}
.pmeter.sta .pm-bar i{background:linear-gradient(90deg,#f0a35a,#d9663a)}
.pmeter em{display:block;margin-top:4px;font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink-soft)}
.prof-meters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.prof-meters .pmeter{padding:11px 13px;border-radius:14px;background:var(--paper-2);border:1.5px solid var(--line)}

/* Ba the thong tin: Danh vong / Giai cap / Bang hoi */
.prof-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pcard{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:14px;
  background:var(--paper-2);border:1.5px solid var(--line);min-width:0}
.pcard>i{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-style:normal;font-size:19px;
  background:#fff8e6;border:1.5px solid var(--line)}
.pcard>div{min-width:0}
.pcard em{display:block;font-style:normal;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.pcard b{display:block;font-size:16px;font-weight:900;color:var(--wood-d);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard span{display:block;font-size:10.5px;font-weight:700;color:var(--ink-soft);line-height:1.35;margin-top:2px}
.prof-none{font-size:12px;font-weight:700;color:var(--ink-soft)}
.prof-tip{margin-top:14px;font-size:11.5px}

/* ---- Xem thong tin nguoi khac ---- */
/* Bong bong treo tren dau nguoi duoc cham: [avatar] Ten / "Xem thong tin", co duoi nhon chi xuong */
#peekchip{position:absolute;z-index:9;transform:translate(-50%,-100%);display:grid;grid-template-columns:auto auto;
  grid-template-rows:auto auto;column-gap:7px;align-items:center;padding:4px 12px 4px 4px;border-radius:999px;
  background:linear-gradient(180deg,var(--paper),var(--paper-2));border:2px solid var(--wood);
  box-shadow:inset 0 0 0 2px var(--gold-l),var(--shadow);animation:peekpop .16s ease-out;text-align:left}
#peekchip::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-7px;border:7px solid transparent;
  border-top-color:var(--wood);border-bottom:0}
#peekchip canvas{grid-row:1/3;width:32px;height:32px;object-fit:cover;object-position:top;border-radius:50%;
  background:linear-gradient(#bfe0f5,#9fd47f);border:2px solid var(--wood-l);image-rendering:pixelated}
#peekchip b{font-size:12.5px;font-weight:900;color:var(--wood-d);max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#peekchip em{font-style:normal;font-size:10px;font-weight:800;color:var(--green-d)}
#peekchip:hover{background:var(--gold-l)}
@keyframes peekpop{from{transform:translate(-50%,-80%) scale(.85);opacity:0}}
.peek-st{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--ink-soft)}
.peek-st::before{content:"";width:9px;height:9px;border-radius:50%;background:#b5a68c}
.peek-st.on{color:var(--green-d)} .peek-st.on::before{background:var(--green);box-shadow:0 0 0 3px rgba(79,154,63,.2)}
.peek-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.peek-acts .btn{flex:1 1 140px}
/* Hon / Danh: hai nut canh nhau mot hang, ngay duoi hang nut chinh */
.peek-touch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.peek-touch .btn{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Nut tat (dung xa): van doc duoc gia — khong mo 42% nhu `.btn[disabled]` chung */
.peek-touch .btn[disabled]{opacity:1;filter:none;color:var(--ink-soft);
  background:linear-gradient(180deg,var(--paper),var(--paper-3));box-shadow:0 3px 0 var(--line)}
.hint.peek-hint{margin:10px 0 0}
.peek-acts+.prof-cards,.peek-touch+.prof-cards,.peek-hint+.prof-cards{margin-top:12px}
/* Nut Nhan tin: icon bong bong chat (SVG) dung truoc chu, can giua theo dong */
.peek-dm{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.peek-dm svg{width:19px;height:19px;flex:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}
/* ---- Bang chi so nhan vat ---- */
.skillrow{display:flex;align-items:center;gap:9px;padding:7px 2px;border-bottom:1px dashed var(--wood-l)}
.skillrow:last-child{border-bottom:0}
.skillrow .ic{font-size:21px;width:26px;text-align:center}
.skillrow .mid{flex:1;min-width:0}
.skillrow .mid b{display:block;font-size:12px;font-weight:900}
.skillrow .mid span{display:block;font-size:10px;color:var(--ink-soft)}
.skillrow .lv{font-size:12px;font-weight:900;color:var(--wood-d);white-space:nowrap}
.venuehead{display:flex;align-items:center;gap:8px;margin:2px 0 8px;font-size:12px;font-weight:800;
  color:var(--wood-d);background:var(--paper-2);border:1.5px solid var(--wood-l);
  border-radius:11px;padding:7px 10px}
.venuehead i{font-style:normal;font-size:19px}
.venuehead em{font-style:normal;font-weight:700;color:var(--ink-soft);font-size:10.5px}

/* ---- Tron tim (len vao nha) ---- */
.raidtop{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 0 6px}
.raidround{font-size:13px;color:var(--wood-d);font-weight:700}
.raidclock{font-size:52px;line-height:1;font-weight:900;color:var(--red-d);
  font-variant-numeric:tabular-nums}
.raidsay{font-size:17px;font-weight:800;text-align:center;margin:0 0 10px}
.raidsay .good{color:var(--green-d)}
.raidsay .bad{color:var(--red-d)}
.raidload{display:inline-block;animation:raidpulse 1s ease-in-out infinite}
@keyframes raidpulse{50%{opacity:.35}}
.raidhist{display:flex;flex-direction:column;gap:4px;margin:0 0 8px;font-size:12px}
.raidhist div{padding:5px 9px;border-radius:8px;background:var(--paper-2)}
.raidhist .good,.raidend.good{color:var(--green-d)}
.raidhist .bad,.raidend.bad{color:var(--red-d)}
.raidend{font-weight:900;font-size:14px;text-align:center;padding:12px 8px;margin:6px 0;
  border:2px dashed var(--line);border-radius:12px;background:var(--paper-2)}
.raidspots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 8px}
.raidspots .btn{min-height:56px;font-size:16px;font-weight:800}
.raidspots .btn span{font-size:22px}
.raidspots .btn:last-child:nth-child(odd){grid-column:1/-1}
.raidacts .btn{min-height:48px;font-size:15px}
.raidloot{display:flex;flex-direction:column;gap:6px;margin:0 0 8px}
.raidloot-row{display:grid;grid-template-columns:1fr 44px 56px 44px;align-items:center;gap:6px;
  padding:4px 8px;border-radius:10px;background:var(--paper-2);font-weight:700}
.raidloot-row .btn{min-height:44px;padding:0}
.raidloot-row b{text-align:center}
.raidloot-row small{display:block;font-weight:400;font-size:11px;color:var(--wood-d)}
@media (orientation:landscape) and (max-height:500px){
  .raidclock{font-size:38px}
  .raidsay{font-size:15px;margin-bottom:6px}
  .raidspots{grid-template-columns:repeat(5,1fr)}
  .raidspots .btn:last-child:nth-child(odd){grid-column:auto}
  .raidspots .btn{min-height:64px;font-size:13px}
}

/* ---- Nguoi quan li co so / dang ve nhan vat ---- */
.mgrrow{display:flex;gap:12px;align-items:flex-start;background:var(--paper-2);
  border:1.5px solid var(--wood-l);border-radius:12px;padding:10px 12px;margin:4px 0 2px}
.mgrrow canvas{background:linear-gradient(#bfe0f5,#9fd47f);border:2px solid var(--wood-l);
  border-radius:9px;flex:none;image-rendering:pixelated}
.mgrsay{flex:1;min-width:0}
.mgrsay b{display:block;font-size:12px;color:var(--wood-d);margin-bottom:4px}
.mgrsay p{margin:0;font-size:12px;line-height:1.55;color:var(--ink)}
.bufflist{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;font-size:10.5px;color:var(--ink-soft)}
#buffs{display:flex;gap:4px;flex-wrap:wrap;max-width:230px}
.buff{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:9px;font-size:10.5px;font-weight:800;
  background:rgba(251,241,220,.94);border:2px solid var(--gold-d);color:var(--wood-d);
  box-shadow:0 2px 0 rgba(74,45,24,.25)}
.buff.tired{background:rgba(240,226,226,.95);border-color:#b05555;color:#7a2e2e;white-space:nowrap}

/* ---- HUD phai: [Menu][ban do nho] + dong ho (man hep) ---- */
/* Ban do nho la phan tu CUOI cua hang -> luon nam sat goc phai; tat no di
   (`hidden`) thi nut Menu tu chiem goc. */
.hudtop{display:flex;gap:6px;align-items:flex-start;justify-content:flex-end}
/* --- THU GON BAN DO NHO VE MEP PHAI --- */
.hudtop .qtoggle{margin-top:4px}
/* Tai phai DINH LIEN vien ban do nho: bu `gap:6px` cua hang + chong len vien 2px. */
.hudtop .qtoggle.rt{margin-right:-8px;z-index:1}
/* Thu gon roi: tai SAT MEP PHAI man hinh (chua tai tho) nhu tai bang nhan vat / nhiem
   vu. Cot #hud-right dung cach mep 10px nen lui tai ra dung chung ay. */
#hud-right.minimini .hudtop .qtoggle.rt{margin-right:calc(env(safe-area-inset-right, 0px) - 10px)}
#hud-right.minimini .mini{display:none}
#hud-right{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;z-index:6}
/* ---- Vi tien (dau bang Tui do, va ban gon trong Cua hang) ---- */
/* Hai o chia DEU 50/50 */
.wallet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.wcoin{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;border:2px solid;
  overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 0 rgba(74,45,24,.15)}
.wcoin::after{content:"";position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;
  background:rgba(255,255,255,.35);pointer-events:none}
/* Xu = BAC (trang), Luong = VANG */
.wcoin.xu{background:linear-gradient(135deg,#ffffff,#e3e7ec);border-color:#9aa4b0;color:#3d4652}
.wcoin.luong{background:linear-gradient(135deg,#fff6d6,#f3d27a);border-color:var(--gold-d);color:#6b4a0e}
.wcoin i{flex:none;width:34px;height:34px;border-radius:50%;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.wcoin.xu i{background:radial-gradient(circle at 35% 30%,#ffffff,#c9d0d8 65%,#8d97a3);border:2.5px solid #7d8794}
.wcoin.luong i{background:radial-gradient(circle at 35% 30%,#fff3bf,var(--gold) 65%,var(--gold-d));border:2.5px solid var(--gold-d);border-radius:8px;
  transform:rotate(45deg) scale(.82)}
/* Chu nam TREN vong sang trang tri o goc (`::after`) — khong thi duoi so bi mo */
.wcoin span,.wcoin i{position:relative;z-index:1}
.wcoin span{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.wcoin em{font-style:normal;font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.wcoin b{font-size:21px;font-weight:900;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis}
.wallet.sm{gap:8px;margin:0 0 10px}
.wallet.sm .wcoin{padding:6px 12px;gap:8px;border-radius:12px}
.wallet.sm .wcoin::after{display:none}
.wallet.sm .wcoin i{width:20px;height:20px;border-width:2px}
.wallet.sm .wcoin span{flex-direction:row;align-items:baseline;gap:6px}
.wallet.sm .wcoin b{font-size:14.5px}
.ico{width:26px;height:26px;border-radius:8px;background:var(--paper-3);border:1.5px solid var(--line);
  display:grid;place-items:center;font-size:13px}
.ico:hover{background:var(--gold-l)}
.mini{padding:6px 7px 7px}
.mini>b{display:block;font-size:11px;font-weight:900;color:var(--wood-d);text-align:center;margin-bottom:4px;
  max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapwrap{position:relative;line-height:0}
#minimap{border-radius:7px;border:1.5px solid var(--wood-l);image-rendering:pixelated;background:#79bd5b}
#mini-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:#fff;border:1.5px solid var(--red);box-shadow:0 0 5px rgba(255,255,255,.9)}
/* Ngan keo nhiem vu: giua mep trai, nut tam giac ben phai de thu / mo */
#questbox{position:absolute;left:env(safe-area-inset-left);transform:translateY(-50%);z-index:6;
  /* Giua mep trai, nhung khong bao gio cao hon day #hud-left (--hudb do o
     ui.js `clearQuestbox`) — khung chan dung dai them buff thi ngan nay lui xuong. */
  top:max(50%,calc(var(--hudb,0px) + 6px + var(--qh,0px) / 2));
  /* ...va khong bao gio xuong qua dinh #chatwrap (--chatt, cung do o ui.js). */
  top:min(max(50%,calc(var(--hudb,0px) + 6px + var(--qh,0px) / 2)),
    calc(var(--chatt,100%) - 6px - var(--qh,0px) / 2));
  display:flex;align-items:center}
#questbox .questbox{border-left:none;border-radius:0 var(--r) var(--r) 0;animation:qslide .18s ease-out;
  max-height:var(--qmax,none);overflow-y:auto}
#questbox.min .questbox{display:none}
@keyframes qslide{from{transform:translateX(-14px);opacity:0}}
.qtoggle{position:relative;flex:none;width:22px;height:48px;margin-left:-2px;border-radius:0 12px 12px 0;
  background:linear-gradient(90deg,var(--paper-2),var(--paper));border:2px solid var(--wood);border-left:none;
  box-shadow:inset 0 0 0 2px var(--gold-l),var(--shadow);color:var(--wood-d);font-size:11px;line-height:1;
  display:grid;place-items:center}
#questbox.min .qtoggle{margin-left:0}
.qtoggle:hover{background:var(--gold-l)}
/* Ban mirror: cai tai nam o mep TRAI cua khung, dung cho khung tuc vao mep phai */
.qtoggle.rt{margin-left:0;margin-right:-2px;border-radius:12px 0 0 12px;
  border-left:2px solid var(--wood);border-right:none}
/* `padding:0`: tai chi rong 22px, padding mac dinh cua nut (6px moi ben) bop
   vung noi dung con 8px -> icon 12px tran ra va lech sang phai */
.qtoggle{padding:0}
.qtoggle span{display:block;font-size:12px}
.qtoggle .ic{stroke-width:3}
.qtoggle .dot{position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;background:var(--red);
  border:1.5px solid #fff;animation:pulse 1.4s ease-in-out infinite}
.questbox{padding:8px 10px;width:190px}
.questbox h5{margin:0 0 5px;font-size:11px;font-weight:900;color:var(--wood-d);
  display:flex;justify-content:space-between;align-items:center}
.questbox .q{font-size:10.5px;font-weight:700;color:var(--ink-soft);margin-bottom:4px;line-height:1.3}
.questbox .q.done{color:var(--green-d);text-decoration:line-through;opacity:.75}
.questbox .q b{color:var(--wood-d)}

/* ---- Nut Menu + bang menu ---- */
/* Truoc day la mot thanh chuc nang cuon ngang dai gap ba be ngang dien thoai.
   Gio chi con MOT nut ☰ o goc tren phai (hang `.hudtop`, canh ban do nho);
   bam vao mo bang menu lon, tab o tren la nhom chuc nang, ben duoi la luoi o lon. */
#menubtn{position:relative;display:flex;align-items:center;gap:7px;padding:8px 16px 8px 12px;flex:none;
  border-radius:16px;border-width:2px;font-weight:900;font-size:14px;color:var(--wood-d);
  box-shadow:inset 0 0 0 2px var(--gold-l),var(--shadow)}
#menubtn i{font-style:normal;font-size:20px;line-height:1;display:grid;place-items:center}
#menubtn:hover{background:linear-gradient(180deg,var(--gold-l),var(--gold))}
#menubtn:active{transform:translateY(1px)}
/* Nut ✉️ tin nhan chua doc: treo duoi nut Menu, khong chiem cho trong hang */
.menuwrap{position:relative;flex:none}
#hudmail{position:absolute;top:calc(100% + 8px);right:0;width:44px;height:44px;padding:0;display:grid;place-items:center;
  border-radius:16px;border-width:2px;box-shadow:inset 0 0 0 2px var(--gold-l),var(--shadow)}
#hudmail>i:first-child{font-style:normal;font-size:20px;line-height:1}
#hudmail .dmbadge{top:-6px;right:-6px;border:1.5px solid #fff}
#hudmail.bump{animation:pulse .5s ease-in-out 1}
body.decor #hudmail{opacity:.35;pointer-events:none}
/* Vien so o nut dock: Bang tin dat canh cham do, Thong bao thay cho cham */
#dock .dmbadge{top:3px;right:20px;border:1.5px solid #fff}
#dock [data-act="notes"] .dmbadge{right:4px}

/* `minmax(0,1fr)`: khong co thi hang tab (cuon ngang) day cot luoi rong ra va
   bang menu tran khoi man hinh dien thoai. */
#menu{position:absolute;inset:0;background:rgba(24,16,8,.55);display:grid;place-items:center;padding:14px;z-index:20;
  grid-template-columns:minmax(0,1fr);
  backdrop-filter:blur(2px)}
.menusheet{width:min(820px,100%)}
/* `.menuic`: o ☰ dau bang Menu — cung khung + SVG voi nut #modal-menu cua
   cac bang khac cho dong bo, nhung chi de trang tri (dang o Menu, khong bam) */
#menu-x,#modal-menu,.menuic{width:30px;height:30px;border-radius:9px;background:var(--paper);border:1.5px solid var(--line);
  font-weight:900;color:var(--wood-d);flex:none;display:grid;place-items:center;padding:0;font-size:16px}
#menu-x:hover{background:var(--red);color:#fff;border-color:var(--red-d)}
#modal-menu:hover{background:var(--gold-l);border-color:var(--gold-d)}

/* Hang tab: cuon ngang duoc neu man hinh qua hep, nhung 5 tab thuong la vua */
.menutabs{display:flex;gap:6px;padding:10px 14px 0;flex:none;overflow-x:auto;scrollbar-width:none;
  border-bottom:2px solid var(--line);background:var(--paper-2)}
.menutabs::-webkit-scrollbar{display:none}
.menutabs button{position:relative;display:flex;align-items:center;gap:6px;padding:9px 15px;flex:none;
  border-radius:11px 11px 0 0;font-weight:800;font-size:13.5px;color:var(--ink-soft);
  border:1.5px solid transparent;border-bottom:none;margin-bottom:-2px}
.menutabs button i{font-style:normal;font-size:17px;line-height:1}
.menutabs button:hover{color:var(--wood-d);background:var(--paper-3)}
.menutabs button.on{background:var(--paper);color:var(--wood-d);border-color:var(--wood);
  box-shadow:inset 0 3px 0 var(--gold)}

/* Luoi o chuc nang cua tab dang chon */
/* Moi nhom chong len CUNG mot o luoi; nhom khong chon chi bi lam vo hinh (`.off`) chu
   khong bi go khoi bo cuc. Nho vay bang luon cao bang nhom dai nhat, doi tab
   khong lam bang co gian — hang tab khong chay khoi duoi con tro. */
#dock{display:grid;padding:16px;overflow-y:auto}
.dockgrp{grid-area:1/1;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;align-content:start}
.dockgrp.off{visibility:hidden}
#dock button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:16px 10px 13px;border-radius:14px;text-align:center;
  background:linear-gradient(180deg,var(--paper),var(--paper-2));border:2px solid var(--line);
  box-shadow:0 2px 0 var(--line);transition:transform .08s,border-color .12s}
#dock button i{font-style:normal;font-size:34px;line-height:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.15))}
#dock button span{font-weight:900;font-size:14px;color:var(--wood-d)}
#dock button small{font-size:11px;font-weight:700;color:var(--ink-soft);line-height:1.25}
#dock button:hover{border-color:var(--gold-d);background:linear-gradient(180deg,var(--gold-l),var(--paper-2));
  transform:translateY(-1px)}
#dock button:active{transform:translateY(1px);box-shadow:none}
/* Nut "Đăng xuất" o tab Khac: cung co nhu moi nut, chi khac mau canh bao */
#dock button.dockout{border-color:var(--red);background:linear-gradient(180deg,#fff,#fdeceb)}
#dock button.dockout span{color:var(--red-d)}
#dock button.dockout:hover{border-color:var(--red-d);background:linear-gradient(180deg,#ffe4e1,#fff3f1)}
.menutabs .dot,#menubtn .dot,#dock .dot{position:absolute;top:5px;right:6px;width:10px;height:10px;border-radius:50%;
  background:var(--red);border:1.5px solid #fff;animation:pulse 1.4s ease-in-out infinite}
/* Dau bao "noi chay": tren cam ung khong co hover nen `title` khong bao gio
   hien — phai phan biet duoc bang MAT. Den xam + vien do = chay, khac han
   dau do dang nhap nhay cua "co noi da chin". */
#dock .dot.burn{background:#3b3030;border-color:var(--red);animation:none}
#menubtn .dot{top:-3px;right:-3px}
.menutabs .dot{top:4px;right:3px;width:9px;height:9px}
@keyframes pulse{50%{transform:scale(1.35)}}

/* ---- Chat ---- */
/* Khung ngoai man hinh: goc duoi trai, CHI DOC vai dong cuoi. Ca khung la mot
   nut — bam vao mo bang chat (go / gui / loc kenh nam het trong do). */
#chatwrap{position:absolute;left:10px;bottom:16px;width:min(340px,calc(100% - 20px));z-index:5;
  cursor:pointer;border-radius:12px;outline:none}
/* `flex-end` + `overflow:hidden`: tran thi mat dong CU o tren, dong moi nhat luon con */
#chatlog{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;margin-bottom:5px;overflow:hidden;max-height:170px;
  mask-image:linear-gradient(transparent,#000 18px)}
#chatlog:empty{display:none}
.chathint{display:inline-block;white-space:nowrap;padding:3px 10px;border-radius:9px;font-size:11px;font-weight:800;
  background:rgba(48,36,26,.6);color:#e8d7b4;border:1.5px solid rgba(217,169,58,.35)}
/* Hang duoi: [nhan Tro chuyen] [nut thu nho ▾ / ▴] */
.chatfoot{display:flex;align-items:center;gap:4px}
.chatmin{width:26px;height:24px;padding:0;border-radius:8px;font-size:14px;line-height:1;display:grid;place-items:center;
  background:rgba(48,36,26,.6);color:#e8d7b4;border:1.5px solid rgba(217,169,58,.35)}
.chatmin:hover{background:var(--paper);color:var(--wood-d);border-color:var(--wood)}
/* Thu nho: an phan tin, chi con hang duoi */
#chatwrap.min #chatlog{display:none}
#chatunread{margin-left:6px;min-width:17px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;
  font-size:10px;line-height:16px;text-align:center;display:inline-block}
#chatwrap:hover .chathint,#chatwrap:focus-visible .chathint{background:var(--paper);color:var(--wood-d);border-color:var(--wood)}

/* Tab kenh trong bang chat: Chung / Khu vuc / Bang / Rieng / He thong */
.chattabs{display:flex;gap:5px;margin-bottom:10px;border-bottom:2px solid var(--line)}
.chattabs button{display:flex;align-items:center;padding:7px 14px 6px 8px;border-radius:9px 9px 0 0;font-size:12.5px;font-weight:800;
  background:var(--paper-3);color:var(--ink-soft);border:1.5px solid transparent;border-bottom:none;margin-bottom:-2px;white-space:nowrap}
.chattabs::-webkit-scrollbar{display:none}
.chattabs button .ctag{margin-right:4px}
.chattabs button:hover{color:var(--wood-d)}
.chattabs button.on{background:var(--paper);color:var(--wood-d);border-color:var(--wood);box-shadow:inset 0 3px 0 var(--gold)}

/* Mot dong tin — dung chung cho khung ngoai va bang chat */
.cl{flex:none;background:rgba(42,32,22,.78);color:#fff6e4;padding:4px 10px 4px 6px;border-radius:10px;font-size:12.5px;
  width:fit-content;max-width:100%;word-break:break-word;border-left:3px solid rgba(217,169,58,.5)}
.cl b{color:var(--gold-l)}
.cl.k-sys{background:rgba(63,124,49,.82);border-left-color:#bde8a0}
.cl.k-guild{background:rgba(93,61,140,.82);border-left-color:#c9a8f0}
.cl.k-guild b{color:#e0ccff}
.cl.k-kv{background:rgba(140,74,32,.82);border-left-color:#f0b98a}
.cl.k-kv b{color:#ffd9b8}
/* Nhan kenh: C = Chung, KV = Khu vuc, B = Bang, HT = He thong */
.ctag{display:inline-block;min-width:17px;margin-right:5px;padding:0 4px;border-radius:5px;
  font-style:normal;font-size:9.5px;font-weight:900;line-height:15px;text-align:center;vertical-align:1px;
  background:#d9a93a;color:#3a2410}
.k-guild .ctag,.ctag.k-guild{background:#c9a8f0;color:#2e1a4d}
.k-kv .ctag{background:#f0b98a;color:#4a2410}
.ctag.k-dm{background:#9cc7f0;color:#173a5c}
.k-sys .ctag{background:#bde8a0;color:#1f4a14}

/* Bang chat */
.chatm-opts{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-bottom:10px;
  font-size:12.5px;font-weight:800;color:var(--ink-soft)}
.chatm-chk{display:flex;flex-direction:row;align-items:center;gap:3px;margin:0;cursor:pointer;color:var(--wood-d);font-size:12.5px}
.chatm-chk input{margin:0 3px 0 0;padding:0;width:15px;height:15px;accent-color:var(--wood)}
.chatm-chk .ctag{margin-right:3px}
/* Hang cuoi bang chat: [o gui hoac dong bao] [cai dat] — cao bang nhau, can giua */
.chatm-foot{display:flex;gap:8px;align-items:flex-end}
.chatm-foot>.chatm-box,.chatm-foot>.chatm-note{flex:1;min-width:0}
/* Nut cai dat: tron, cung vien + nen voi thanh soan tin. Icon la SVG (ICON_GEAR)
   -> `display:block` trong o grid la nam dung tam o moi may, ke ca iPhone. */
.chatm-gear{flex:none;width:46px;height:46px;padding:0;border-radius:50%;display:grid;place-items:center;
  background:#fffdf6;border:2px solid var(--line);color:var(--wood-l);
  box-shadow:0 2px 0 rgba(74,45,24,.12);transition:color .15s,border-color .15s}
.chatm-gear svg{display:block;width:22px;height:22px;transition:transform .3s}
.chatm-gear:hover{color:var(--wood-d);border-color:var(--wood-l)}
.chatm-gear:hover svg{transform:rotate(60deg)}
.chatm-gear:active{transform:translateY(1px);box-shadow:none}
.chatm-bar{display:flex;justify-content:flex-end;margin:-2px 0 6px}
.chatm-bar .chatm-chk{font-size:11.5px;color:var(--ink-soft)}
.chatm-log{height:min(46vh,380px);overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:8px;
  border-radius:12px;background:rgba(74,45,24,.1);border:1.5px solid var(--line);margin-bottom:10px}
/* Modal lap day (lop `.fill`, xem renderPanel): khung tin co gian vao phan con lai,
   tab / o tich / thanh soan tin giu nguyen co -> thanh soan tin luon o day. */
#modal.fill .chatm-log{flex:1;height:auto;min-height:160px;margin-bottom:10px}
#modal.fill #modal-body>.chattabs,#modal.fill #modal-body>.chatm-bar,#modal.fill #modal-body>.chatm-foot{flex:none}
.chatm-log:empty::before{content:"Chưa có tin nhắn nào";margin:auto;color:var(--ink-soft);font-size:12.5px;font-weight:700}
/* THANH SOAN TIN: o nhap va nut Gui nam chung mot vien bo tron — nhin nhu
   mot khoi, khong phai hai thu dat canh nhau. Vien sang xanh khi dang go. */
.chatm-form{display:flex;align-items:center;gap:6px;height:46px;padding:4px 4px 4px 18px;border-radius:999px;
  background:#fffdf6;border:2px solid var(--line);box-shadow:0 2px 0 rgba(74,45,24,.12);
  transition:border-color .15s,box-shadow .15s}
.chatm-form:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(79,154,63,.18)}
.chatm-form input{flex:1 1 0;min-width:0;height:100%;padding:0;border:none;border-radius:0;background:transparent;
  outline:none;font-size:14px;font-weight:600;line-height:normal;color:var(--ink)}
.chatm-form input::placeholder{color:#b8a17c;font-weight:600;opacity:1}
/* Nut Gui: chu + mui ten SVG (ICON_SEND), cao vua long thanh soan tin.
   Chua go gi: chuyen sang mau giay, khong phai mau xanh nhat nhu bi hong. */
.chatm-send{flex:none;display:flex;align-items:center;justify-content:center;gap:6px;height:100%;padding:0 14px 0 16px;
  border-radius:999px;background:linear-gradient(180deg,#6cb85a,var(--green));color:#fff;font-weight:900;font-size:13.5px;
  line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 var(--green-d);transition:background .15s,transform .1s}
.chatm-send svg{display:block;width:16px;height:16px;flex:none}
.chatm-send:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.chatm-send:disabled{background:var(--paper-3);color:#b09873;box-shadow:none;cursor:default;transform:none}
/* Tra loi tin: dong trich dan tin goc (mo, mot dong) tren dau tin tra loi */
.cl-re{margin:0 0 2px;padding-left:6px;border-left:2px solid rgba(255,246,228,.4);font-size:11px;
  opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-re.tome{opacity:1;color:var(--gold-l);font-weight:800}
/* Tin cua nguoi khac trong bang chat: bam vao = tra loi; `.on` = tin dang tra loi */
.cl.pick{cursor:pointer}
.cl.pick:hover,.cl.pick.on{outline:2px solid var(--gold);outline-offset:1px}
/* Dang tra loi: tin goc + o nhap chung MOT khung (`.chatm-box.re`) — vien,
   nen, bong do khung giu; thanh soan tin ben trong bo vien cua no. */
.chatm-box{display:flex;flex-direction:column}
.chatm-box.re{background:#fffdf6;border:2px solid var(--line);border-radius:23px;
  box-shadow:0 2px 0 rgba(74,45,24,.12);transition:border-color .15s,box-shadow .15s}
.chatm-box.re:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(79,154,63,.18)}
.chatm-box.re .chatm-form{height:42px;border:none;box-shadow:none;background:transparent}
.chatm-box.re .chatm-form:focus-within{box-shadow:none}
/* Thanh "Dang tra loi" o dau khung, nut X bo tra loi */
.chatm-reply{display:flex;align-items:center;gap:8px;margin:4px 4px 0;padding:4px 4px 4px 12px;
  border-radius:17px 17px 8px 8px;background:var(--paper-3);border-left:4px solid var(--gold)}
.chatm-reply.k-kv{border-left-color:#f0b98a}
.chatm-reply.k-guild{border-left-color:#c9a8f0}
.chatm-reply-t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:12px;color:var(--ink-soft)}
.chatm-reply-t b{color:var(--wood-d);font-size:12.5px}
.chatm-reply-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatm-reply-x{flex:none;width:40px;height:40px;padding:0;border-radius:50%;background:transparent;
  color:var(--ink-soft);font-size:16px;font-weight:900}
.chatm-reply-x:hover{background:rgba(74,45,24,.1);color:var(--wood-d)}
.chatm-note{align-self:center;padding:12px 14px;border-radius:14px;background:var(--paper-3);border:1.5px dashed var(--line);
  font-size:12.5px;font-weight:700;color:var(--ink-soft);text-align:center}

/* ---- Can dieu khien (joystick) ---- */
/* Thay cho bon nut huong cu. Khac nhau o ba cho, va ca ba deu la ly do doi:
     - dat ngon tay o DAU cung trong vong tron la dieu khien duoc, khong phai
       do tim o vuong nho;
     - di CHEO duoc (bon nut thi phai giu hai nut, ma ngon tay cai khong voi);
     - keo nong hay keo sau quyet dinh DI NHANH HAY CHAM.
   `--pad-size` de cac khoi @media chi phai doi mot con so. Ngon tay cai
   phai voi het vanh ma khong truot ra ngoai, nen con so nay nhich len 140px
   (truoc la 124px) — do o ngon cai nguoi lon tren man 6.1". */
#pad{--pad-size:140px;
  position:absolute;right:16px;bottom:92px;display:none;touch-action:none;z-index:6;
  width:var(--pad-size);height:var(--pad-size)}
body.touch #pad{display:block}

.stick{position:relative;width:var(--pad-size);height:var(--pad-size);border-radius:50%;
  touch-action:none;-webkit-user-select:none;user-select:none;
  background:radial-gradient(circle at 50% 36%,rgba(251,241,220,.95),rgba(236,217,178,.9) 70%,rgba(226,203,158,.9));
  border:2.5px solid var(--wood);
  box-shadow:inset 0 0 0 2px var(--gold-l),inset 0 6px 14px rgba(120,86,40,.25),var(--shadow)}
/* Bon mui ten mo quanh vanh: chi de bao "day la cho dieu khien", khong bam */
.sdir{position:absolute;font-style:normal;font-size:12px;line-height:1;color:var(--wood);
  opacity:.38;pointer-events:none}
.sdir.up{top:7px;left:50%;transform:translateX(-50%)}
.sdir.down{bottom:7px;left:50%;transform:translateX(-50%)}
.sdir.left{left:7px;top:50%;transform:translateY(-50%)}
.sdir.right{right:7px;top:50%;transform:translateY(-50%)}

/* Num: `--kx/--ky` do world.js dat theo ngon tay. Co chuyen dong muot luc
   THA ra (tro ve tam), nhung khi dang keo thi phai bam sat ngon tay —
   `body.sticking` tat transition di. */
.stick-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;
  border-radius:50%;background:linear-gradient(180deg,var(--gold-l),var(--gold));
  border:2.5px solid var(--wood);box-shadow:0 3px 0 var(--gold-d),0 6px 14px rgba(20,12,4,.35);
  transform:translate(var(--kx,0px),var(--ky,0px));transition:transform .13s ease-out}
.stick-knob::after{content:"";position:absolute;inset:9px;border-radius:50%;
  border:2px dashed rgba(74,45,24,.3)}
body.sticking .stick-knob{transition:none;box-shadow:0 2px 0 var(--gold-d),0 0 0 4px rgba(217,169,58,.3)}

/* Num keo cum nam o GOC TREN TRAI cua o vuong bao — de tron nen goc do la
   khoang trong, khong de len vanh dieu khien. Dang chay thi ngon tay nam giua
   de, khong voi toi goc, nen khong bam nham.
   KHONG co nut an ✕ o goc phai nua: can dieu khien la duong di lai duy nhat
   tren man cam ung, bam nham mot cai la mat luon cach di — muon tat thi vao
   Menu › Khac › Thiet lap (xem `PANES.pad` trong public/js/ui.js). */
#pad .padgrip{position:absolute;top:-6px;left:-6px;width:28px;height:28px;
  border-radius:10px;background:rgba(251,241,220,.9);border:1.5px solid var(--wood-l);
  color:var(--wood);font-size:14px;font-weight:900;line-height:1;display:grid;place-items:center;
  box-shadow:0 2px 0 rgba(74,45,24,.22);opacity:.85;margin:0;z-index:2;
  padding:0;cursor:grab;touch-action:none}
#pad .padgrip .ic{stroke-width:2.2}
#pad .padgrip:active{transform:translateY(1px)}
/* Dang doi cho: ca cum mo di mot chut de thay ban do ben duoi ma uoc vi tri */
body.padmove #pad{opacity:.7}
body.padmove #pad .padgrip{cursor:grabbing}

/* ---- Thanh cau ca ----
   Mot con tro chay qua lai, mot vach phai canh, khong mot dong chu nao. CA
   KHUNG la vung bam nen no phai day dan (>= 40px) va khong duoc rung: khung
   rung thi khong ngam duoc con tro. */
#fishbar{position:absolute;left:50%;transform:translateX(-50%);bottom:96px;z-index:16;
  width:min(330px,calc(100% - 24px));cursor:pointer;
  background:linear-gradient(180deg,var(--paper),var(--paper-2));border:2px solid var(--wood);
  border-radius:15px;padding:12px;box-shadow:inset 0 0 0 2px var(--gold-l),var(--shadow)}
#fishbar:active{transform:translateX(-50%) translateY(2px)}
/* Kho ngang bo `translateX(-50%)` (xem khoi @media ben duoi) nen hieu ung bam
   phai viet lai, khong thi bam mot cai la khung nhay ve giua man hinh. */
@media (orientation:landscape) and (max-height:560px){
  #fishbar:active{transform:translateY(2px)}
}
/* Chang CHO CA CAN. Cao DUNG BANG `.fb-track` + nut giat cong le, de luc ca
   can khung khong nhay cao len mot cai lam truot ngon tay dang cho san. */
.fb-wait{display:flex;align-items:center;justify-content:center;gap:9px;
  height:86px;border-radius:9px;background:#e3d2b0;border:1.5px solid var(--wood-l);
  box-shadow:inset 0 2px 3px rgba(100,70,30,.25);
  color:var(--wood-d);font-weight:800;font-size:13.5px;text-align:center;padding:0 10px}
/* Chang CA CAT MOI (nut GIAT CAN da hien, thanh nhip thi chua): cung dai chu
   nhung thu xuong CAO BANG `.fb-track`, de ca ba chang cho ra dung mot chieu
   cao khung. Thieu dong nay la khung cao them 52px luc ca cat moi roi tut
   xuong luc ca dinh — dung hai lan nhay vao giua luc nguoi choi dang canh. */
.fb-wait.slim{height:34px}
/* Cai phao nhun len xuong — bao rang game dang chay chu khong dung hinh. */
.fb-bob{width:13px;height:13px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#ff8a7a,#d9483f 70%);
  box-shadow:0 0 0 1.5px #fff6e0;animation:fbbob 1.5s ease-in-out infinite}
@keyframes fbbob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
/* Moi bi giat: ca khung giut mot cai, chu doi mau. */
.fb-wait.nib{color:var(--sta);animation:fbnib .4s ease-in-out}
.fb-wait.nib .fb-bob{animation:fbbob .25s ease-in-out infinite}
@keyframes fbnib{0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){
  .fb-bob,.fb-wait.nib,.fb-wait.nib .fb-bob{animation:none}
}
/* Nut Thu can: dau X tron gan o GOC tren phai, nho ra ngoai vien khung — khong
   ton mot hang rieng. Vung bam 40x40, hinh tron thay duoc chi 28px (nen ve
   bang gradient de vien khong phong to vung bam). Lech ra 10-16px thoi:
   khung cach mep man 12px, lech hon la mat goc o dien thoai hep. */
#fb-x{position:absolute;top:-16px;right:-10px;z-index:1;width:40px;height:40px;padding:0;
  display:grid;place-items:center;font-size:13px;color:var(--wood-d);
  background:radial-gradient(circle,var(--paper) 0 12px,var(--wood) 12.5px 14px,
    transparent 14.5px);
  filter:drop-shadow(0 1px 1px rgba(60,35,10,.3))}
#fb-x .ic{stroke-width:3}
#fb-x:active{transform:translateY(1px)}
.fb-track{position:relative;height:34px;background:#e3d2b0;border:1.5px solid var(--wood-l);
  border-radius:9px;box-shadow:inset 0 2px 3px rgba(100,70,30,.25)}
/* Vach phai canh. Soc sang o giua la "tam" — trung tam thi ca to hon va con
   nguyen moi, nen no phai nhin thay duoc. */
.fb-zone{position:absolute;top:0;bottom:0;border-radius:4px;
  background:linear-gradient(90deg,#ffd98a,#ffb347,#ffd98a);
  border-left:2px solid var(--gold);border-right:2px solid var(--gold);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.fb-zone::after{content:'';position:absolute;left:50%;top:3px;bottom:3px;width:2px;margin-left:-1px;
  background:rgba(255,255,255,.85)}
/* Con tro: `translate3d` nen chay bang GPU, khong lam lai bo cuc moi khung. */
.fb-cursor{position:absolute;top:-3px;bottom:-3px;left:0;width:5px;margin-left:-2.5px;
  border-radius:3px;background:var(--ink);box-shadow:0 0 0 1.5px #fff,0 1px 3px rgba(0,0,0,.45);
  will-change:transform}
/* `line-height` GHIM chu khong de `normal`: chieu cao chang cho (`.fb-wait`)
   phai bang dung 34 + 10 + (11 + 11 + 20) = 86px cua chang canh nhip, ma
   `normal` thi moi he dieu hanh mot khac nen khung se nhay vai px luc doi
   chang — dung luc nguoi choi dang de san ngon tay. */
.fb-pull{display:block;width:100%;margin-top:10px;padding:11px;border-radius:12px;font-weight:900;
  font-size:14px;line-height:20px;letter-spacing:1px;color:#fff;
  background:linear-gradient(180deg,#f0a35a,var(--sta));box-shadow:0 4px 0 #a7421f}
.fb-pull:active{transform:translateY(3px);box-shadow:0 1px 0 #a7421f}

/* ---- Modal ---- */
#modal{position:absolute;inset:0;background:rgba(24,16,8,.55);display:grid;place-items:center;padding:14px;z-index:20;
  backdrop-filter:blur(2px)}
.sheet{width:min(720px,100%);max-height:min(88vh,760px);max-height:min(88dvh,760px);display:flex;flex-direction:column;overflow:hidden;
  border-width:3px;animation:rise .18s ease-out}
@keyframes rise{from{transform:translateY(12px) scale(.98);opacity:0}}
.sheet header{display:flex;align-items:center;gap:10px;padding:12px 18px;
  background:linear-gradient(180deg,var(--paper-2),var(--paper-3));
  border-bottom:2px solid var(--wood);flex:none}
.sheet h2{margin:0;font-size:17.5px;color:var(--wood-d);flex:1;letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
#modal-x{width:30px;height:30px;border-radius:9px;background:var(--paper);border:1.5px solid var(--line);
  font-weight:900;color:var(--wood-d);flex:none;display:grid;place-items:center;padding:0;font-size:16px}
#modal-x:hover{background:var(--red);color:#fff;border-color:var(--red-d)}
#modal-body{padding:15px 18px 18px;overflow-y:auto}

.subtabs{display:flex;gap:5px;margin-bottom:13px;flex-wrap:wrap}
.subtabs button{padding:7px 14px;border-radius:10px;background:var(--paper-3);font-weight:800;font-size:12.5px;
  color:var(--ink-soft);border:1.5px solid transparent}
.subtabs button:hover{border-color:var(--line)}
.subtabs button.on{background:linear-gradient(180deg,var(--wood-l),var(--wood));color:#fff;
  box-shadow:0 2px 0 var(--wood-d)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:9px;align-items:stretch}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.it{display:flex;gap:9px;align-items:center;background:#fffdf6;border:2px solid var(--line);border-radius:12px;
  padding:9px;text-align:left;width:100%;box-shadow:0 2px 0 rgba(160,125,75,.18)}
button.it:hover{border-color:var(--green);background:#fffef9}
/* Mon DANG DUNG tren nguoi: can dang cam, do dang mac, con moi se moc cho cu
   quang can toi. To dam de nhin mot cai la biet, khong phai doc tung dong. */
.it.inuse{border-color:var(--green);background:linear-gradient(180deg,#f4fbef,#e9f6e0);
  box-shadow:0 2px 0 rgba(79,154,63,.3),inset 0 0 0 1px rgba(79,154,63,.25)}
.it.inuse .nm{color:var(--green-d);font-weight:900}
.it.inuse .ic{border-color:var(--green);background:linear-gradient(180deg,#fff,#eaf6e2)}
.it.inuse .txt .ds{color:#4a7a3c;font-weight:700}
.it .ic{width:36px;height:36px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:19px;
  background:linear-gradient(180deg,var(--paper),var(--paper-3));border:2px solid var(--line)}
/* Anh "mac thu" trong the hang thoi trang: thay cho o bieu tuong 36px, cao
   hon mot chut vi nhan vat la 20x32 — ve o ti le 2x cho ra 40x64. */
.it .wearprev{width:40px;height:64px;flex:none;border-radius:9px;align-self:center;
  background:linear-gradient(180deg,#dff0cf,#bfe0a8);border:2px solid var(--line);
  image-rendering:pixelated}
.it .txt{min-width:0;flex:1}
/* Ba ky hieu giong nhau cua mot bac ve cao: phai nam gon MOT HANG trong o
   bieu tuong 36px, neu khong chung xuong dong va tran ra duoi hang. */
.it .ic.tri{width:auto;min-width:44px;padding:0 4px;font-size:12px;letter-spacing:-2px;
  white-space:nowrap;display:flex;align-items:center}
.it .nm{display:block;font-weight:900;font-size:13px;line-height:1.25;color:var(--wood-d)}
.it .ds{display:block;font-size:11px;color:var(--ink-soft);margin-top:2px;line-height:1.35;font-weight:600}
.it .qty{margin-left:auto;font-weight:900;color:var(--wood-d);font-size:13px;flex:none}
.price{font-weight:900;font-size:12px;white-space:nowrap}
.price.xu{color:#5f6b78} .price.luong{color:var(--gold-d)}
.it.col{flex-direction:column;align-items:stretch;gap:7px;height:100%;cursor:default}
.it.col .hd{display:flex;align-items:center;gap:8px}
.it.col .hd .nm{flex:1}
/* Hang nut cuoi the hang hoa. Tu khi moi cho mua/ban co them ×5 ×10 ×20 thi
   mot the mang toi NAM nut ("Mua 1 · ×5 · ×10 · ×20 · Mua hết (37)"), ma cot
   luoi hep nhat chi 212px: khong co `flex-wrap` thi `flex:1` chia deu 198px
   cho ca nam, moi nut con 35px ngang va nhan vo bon dong. `min-width:44px`
   la nguong de nut xuong hang CHU KHONG bop lai — 44px cung la co vung bam
   toi thieu cua iOS. */
.it.col .acts{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
.it.col .acts .btn{flex:1 1 auto;min-width:44px;padding:7px 4px;font-size:12px}
.it .tagline{display:inline-block;margin-top:4px;padding:1px 7px;border-radius:7px;font-size:10px;font-weight:900;
  background:var(--paper-3);border:1px solid var(--line);color:var(--wood)}
.it .tagline.hot{background:#ffe0d6;border-color:#e8a894;color:var(--red-d)}
.it .tagline.good{background:#ddf0d2;border-color:#a8cf92;color:var(--green-d)}
.it .tagline.warn{background:#fdf0cf;border-color:#e3c879;color:var(--gold-d)}

/* --- The su kien: dang dien ra thi vien vang, da tham du thi mo di --- */
.it.ev .hd .nm{font-size:13.5px}
.it.ev .hd .price{font-size:10.5px;font-weight:900}
.it.ev.evlive{border-color:var(--gold);background:linear-gradient(180deg,#fffaea,#fffdf6);
  box-shadow:0 2px 0 rgba(166,122,29,.3), 0 0 0 3px rgba(217,169,58,.16)}
.it.ev.evdone{opacity:.72}
/* --- Hop thu he thong (bang Thong bao) --- */
/* Cai CHUA DOC phai nhin ra ngay giua mot danh sach dai, nen no duoc vien
   vang nhu the su kien dang dien ra; cai da doc thi lui ve sau. */
/* Hop thu: danh sach doc mot cot, gom theo ngay, vien trai mau theo loai */
.notelist{display:flex;flex-direction:column;gap:8px}
.noteday{margin:6px 2px 0;font-size:11px;font-weight:900;color:var(--ink-soft)}
.notecard{--k:var(--blue);position:relative;padding:9px 11px;border-radius:12px;cursor:pointer;
  background:#fffdf6;border:1.5px solid var(--line);border-left:3px solid var(--k)}
.notecard.k-ok{--k:var(--green)}
.notecard.k-warn{--k:var(--gold)}
.notecard.k-err{--k:var(--red)}
.notecard.unread{background:#fff3d6}
.notecard .nh{display:flex;align-items:center;gap:7px;min-width:0}
.notecard .ndot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--red);border:1.5px solid #fff}
.notecard .nic{flex:none;font-size:16px;line-height:1}
.notecard .nh b{flex:1;min-width:0;font-size:13.5px;color:var(--wood-d);overflow-wrap:anywhere}
.notecard.unread .nh b{font-weight:900}
.notecard time{flex:none;font-size:10.5px;font-weight:700;color:var(--ink-soft)}
.notecard p{margin:4px 0 0;font-size:12.5px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notecard.open p{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.notecard .notescope{display:block;margin-top:3px;font-style:normal;font-size:10px;font-weight:800;color:var(--ink-soft)}
.notemore{display:block;margin:12px auto 0;min-height:40px}

/* ---- Bang Ban do: o chon noi den (`placeTile` o ui.js) ----
   CA O la nut bam: [icon] Ten / dong phu [→]. Tab Cac khu khong co mo ta;
   tab Co so co mo ta ngan "trong do co gi" (`.wtile-d`, luoi `.wide`). Luoi
   tu chia cot theo be ngang: PC 3 cot (Co so 2), SP doc 1 cot, SP ngang thap
   hon (khoi @media ngang thap ben duoi). */
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-bottom:4px}
/* Tab Co so: o co mo ta 2 dong -> cot rong hon (PC / SP ngang 2 cot) de doc tron */
.wgrid.wide{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.wtile{display:flex;align-items:center;gap:10px;width:100%;min-height:60px;padding:8px 10px 8px 8px;
  text-align:left;background:#fffdf6;border:2px solid var(--line);border-radius:12px;
  box-shadow:0 2px 0 rgba(74,45,24,.12);color:var(--wood-l);transition:border-color .15s,background .15s}
.wtile:hover:not(:disabled){border-color:var(--wood-l);background:#fffaea}
.wtile:active:not(:disabled){transform:translateY(1px);box-shadow:none}
.wtile:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.wtile-ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:21px;
  background:var(--paper-3);border:1.5px solid var(--line)}
.wtile-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wtile-t b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  font-size:13.5px;font-weight:900;line-height:1.25;color:var(--wood-d)}
.wtile-t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:11.5px;font-weight:700;line-height:1.3;color:var(--ink-soft)}
/* Mo ta co so ("trong do co gi"): toi da 2 dong, chu thuong de doc nhanh */
.wtile-t .wtile-d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  white-space:normal;font-weight:600;font-size:11px}
.wtile-t .wtile-lv{align-self:flex-start;padding:0 6px;border-radius:7px;font-size:10.5px;font-weight:900;
  line-height:16px;background:#fdf0cf;border:1px solid #e3c879;color:var(--gold-d)}
/* Nut "di toi" tron xanh cung tong voi nut Gui o bang chat */
.wtile-go{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#6cb85a,var(--green));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 var(--green-d);transition:transform .15s}
.wtile-go .ic{font-size:17px;stroke-width:3}
.wtile:hover .wtile-go{transform:translateX(2px)}
.wtile:disabled{cursor:default;box-shadow:none}
.wtile.here{border-color:var(--green);background:linear-gradient(180deg,#f4fbef,#e9f6e0)}
.wtile.here .wtile-ic{border-color:var(--green);background:#fff}
.wtile.here .wtile-st{color:var(--green-d)}
.wtile.guided .wtile-st{color:var(--gold-d)}
.wtile.lock{opacity:.62}
.wtile.lock .wtile-ic{filter:grayscale(1)}
.wtile.guided{border-color:var(--gold);background:linear-gradient(180deg,#fffaea,#fffdf6)}

.evmeta{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:10.5px;font-weight:700;color:var(--ink-soft)}
.evmeta b{flex-basis:100%;color:var(--wood-d);font-size:11px}
.evreward{display:flex;flex-wrap:wrap;gap:4px}
.evreward span{padding:1px 7px;border-radius:7px;font-size:10px;font-weight:900;
  background:#ddf0d2;border:1px solid #a8cf92;color:var(--green-d)}

.plist{display:flex;flex-direction:column;gap:8px}
.prow{display:flex;gap:10px;align-items:center;background:#fffdf6;border:2px solid var(--line);
  border-radius:12px;padding:8px 11px;box-shadow:0 2px 0 rgba(160,125,75,.18)}
.prow canvas{background:linear-gradient(#bfe0f5,#9fd47f);border-radius:8px;flex:none;border:1.5px solid var(--line)}
.prow .who{flex:1;min-width:0}
.prow .who b{display:block;font-size:13.5px;color:var(--wood-d)}
.prow .who span{font-size:11px;color:var(--ink-soft);font-weight:600}
/* Nut xoa ban: o vuong + SVG ✕ (ico), cao bang nut chat tron ben canh */
.prow .fdel{flex:none;width:34px;height:34px;padding:0;display:grid;place-items:center;font-size:14px}
.prow .who .mini-tag{display:inline-block;margin-left:5px;padding:0 6px;border-radius:6px;font-size:9.5px;
  font-weight:900;background:var(--paper-3);border:1px solid var(--line);color:var(--wood)}

.btn{padding:7px 13px;border-radius:10px;font-weight:900;font-size:12.5px;
  background:linear-gradient(180deg,#63b44f,var(--green));color:#fff;box-shadow:0 3px 0 var(--green-d);
  border:1.5px solid rgba(0,0,0,.08)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--green-d)}
.btn.alt{background:linear-gradient(180deg,#5a97d8,var(--blue));box-shadow:0 3px 0 var(--blue-d)}
.btn.alt:active{box-shadow:0 1px 0 var(--blue-d)}
.btn.warn{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#5a4209;box-shadow:0 3px 0 var(--gold-d)}
.btn.warn:active{box-shadow:0 1px 0 var(--gold-d)}
.btn.danger{background:linear-gradient(180deg,#d9594c,var(--red));box-shadow:0 3px 0 var(--red-d)}
.btn.danger:active{box-shadow:0 1px 0 var(--red-d)}
.btn.ghost{background:linear-gradient(180deg,var(--paper),var(--paper-3));color:var(--wood-d);
  box-shadow:0 3px 0 var(--line)}
.btn.ghost:active{box-shadow:0 1px 0 var(--line)}
.btn[disabled]{opacity:.42;pointer-events:none;filter:grayscale(.4)}
.btn.sm{padding:5px 9px;font-size:11.5px;box-shadow:0 2px 0 var(--green-d)}

.empty{text-align:center;color:#a8977c;padding:28px 10px;font-weight:700}
.hint{background:linear-gradient(180deg,var(--paper-2),var(--paper-3));border:2px dashed var(--line);
  border-radius:12px;padding:10px 13px;font-size:12.5px;color:var(--ink-soft);margin-bottom:13px;font-weight:600}
.hint b{color:var(--wood-d)}
/* Hop nhac viec gap: tien thue sap dao han, han cuoi cua mot ky... */
.hint.warn{border-color:var(--red);border-style:solid;background:#fdeeea;color:var(--red-d)}
.hint.warn b{color:var(--red-d)}
.hint.sm{padding:6px 9px;font-size:11.5px;margin-bottom:8px}

/* ---- O chon trang tri co so ---- */
/* Mot nhom co toi 5 lua chon. Man hinh rong thi xep thanh hang va cuon ngang
   duoc; dien thoai DOC chi rong 375px nen cho XUONG DONG — cuon ngang o kho
   do rat de bi bo sot lua chon cuoi, va o giua man hinh doc thi khong co gi
   gon y la hang con keo dai duoc. */
.decrow{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 6px}
.btn.decopt{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:84px;padding:8px 10px;line-height:1.25;
  /* Chua chon = giay nhat. Chi cai DANG CHON moi noi mau — truoc day moi o
     deu la nut xanh mac dinh nen nhin khong ra cai nao dang dung. */
  background:linear-gradient(180deg,var(--paper),var(--paper-3));color:var(--wood-d);
  box-shadow:0 3px 0 var(--line)}
.btn.decopt:active{box-shadow:0 1px 0 var(--line)}
.btn.decopt i{font-style:normal;font-size:20px}
.btn.decopt span{font-size:12px;font-weight:800}
.btn.decopt small{font-size:10.5px;opacity:.7;font-weight:700}
.btn.decopt.on{background:linear-gradient(180deg,#63b44f,var(--green));color:#fff;
  box-shadow:0 3px 0 var(--green-d)}
.btn.decopt.on small{opacity:.9}
@media (orientation:landscape) and (max-height:560px){
  .decrow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .decrow::-webkit-scrollbar{display:none}
  .btn.decopt{min-width:70px;padding:4px 8px}
  .btn.decopt i{font-size:15px}
  .btn.decopt span{font-size:11px}
  .btn.decopt small{font-size:10px}
  #modal-body .sect{margin:9px 0 5px}
}
.sect{margin:16px 0 9px;font-size:12px;font-weight:900;color:var(--wood-d);text-transform:uppercase;
  letter-spacing:.6px;display:flex;align-items:center;gap:8px}
.sect::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--line),transparent)}
/* ---- Huong dan cho nguoi moi ---- */
.sect.sm{margin:12px 0 7px;font-size:11px;opacity:.85}
.guidesteps{margin:0 0 4px;padding-left:22px;display:flex;flex-direction:column;gap:7px}
.guidesteps li{font-size:12.8px;line-height:1.6;color:var(--ink-soft);font-weight:600}
.guidesteps li::marker{color:var(--wood-d);font-weight:900}
.guidesteps b,.guidetips b{color:var(--wood-d)}
.guidetips{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;list-style:"💡  "}
.guidetips li{font-size:12.5px;line-height:1.6;color:var(--ink-soft);font-weight:600}

/* ---- O tim ban ---- */
.findform{display:flex;gap:8px;margin-bottom:11px}
.findform input{flex:1;min-width:0}
.findform .btn{flex:none}

/* ---- Dien mao: day bon tu the ---- */
/* ---- Bang Nhan vat › Dien mao ("phong thay do") ---- */
.lk-room{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;margin-bottom:16px}
/* San khau: nen troi -> co, vet bong duoi chan, nut xoay hai ben */
.lk-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:250px;border-radius:18px;
  background:radial-gradient(ellipse at 50% 30%,#e4f3ff 0%,#bfe0f5 45%,#9fd47f 100%);
  border:2.5px solid var(--wood);box-shadow:inset 0 0 0 3px var(--gold-l),inset 0 -30px 40px rgba(60,110,40,.25);overflow:hidden}
.lk-stage canvas{position:relative;z-index:1;width:120px;height:auto;image-rendering:pixelated;margin-bottom:22px}
.lk-floor{position:absolute;left:50%;bottom:44px;width:96px;height:16px;margin-left:-48px;border-radius:50%;
  background:radial-gradient(rgba(40,60,20,.35),transparent 70%)}
.lk-dir{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);padding:3px 11px;border-radius:999px;
  font-size:11px;font-weight:800;color:var(--wood-d);background:rgba(255,253,246,.92);border:1.5px solid var(--line);white-space:nowrap}
.lk-turn{position:absolute;top:50%;z-index:2;width:32px;height:32px;margin-top:-28px;border-radius:50%;
  padding:0;display:grid;place-items:center;
  background:rgba(255,253,246,.9);border:2px solid var(--wood-l);color:var(--wood-d);font-size:14px;
  box-shadow:0 2px 0 rgba(74,45,24,.2);transition:transform .1s,background .15s}
.lk-turn.l{left:8px} .lk-turn.r{right:8px}
.lk-turn:hover{background:var(--gold-l)}
.lk-turn:active{transform:scale(.92)}

/* 6 o dang mac */
.lk-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.lk-slot{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;min-width:0;
  background:var(--paper-2);border:1.5px dashed var(--line)}
.lk-slot.on{background:#fffdf6;border:1.5px solid var(--wood-l);box-shadow:0 2px 0 rgba(74,45,24,.08)}
.lk-ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:20px;
  background:var(--paper-3);border:1.5px solid var(--line)}
.lk-slot:not(.on) .lk-ic{opacity:.45;filter:grayscale(1)}
.lk-txt{flex:1;min-width:0}
.lk-txt em{display:block;font-style:normal;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.lk-txt b{display:block;font-size:13px;font-weight:900;color:var(--wood-d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-slot:not(.on) .lk-txt b{color:var(--ink-soft);font-weight:700}
/* Bang Dap do: day bac cap bay ngang dau bang. */
.gr-tiers{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 2px}
.gr-tier{flex:1 1 72px;min-width:72px;text-align:center;padding:6px 4px;border-radius:12px;background:#fffdf6;border:1.5px solid var(--line)}
.gr-tier b{display:block;font-size:13px;font-weight:900;color:var(--wood-d)}
.gr-tier em{display:block;font-style:normal;font-size:10px;font-weight:800;color:var(--ink-soft)}

/* Huy hieu cap mon do — nam duoi ten mon trong o dang mac. */
.lk-lv{display:inline-block;margin-top:2px;padding:1px 6px;border-radius:999px;font-size:10px;font-weight:900;background:var(--gold);color:var(--ink)}
.lk-sw{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line)}
.lk-sw.none{background:repeating-linear-gradient(45deg,#eee 0 3px,#ddd 3px 6px)}
.lk-off{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;font-size:10px;font-weight:900;
  display:grid;place-items:center;background:#fff;color:var(--red-d);border:1.5px solid var(--line);
  box-shadow:0 1px 3px rgba(0,0,0,.2)}
.lk-off:hover{background:var(--red);color:#fff;border-color:var(--red-d)}

/* Tu do */
.lk-head h4{margin:0 0 8px;font-size:15px;color:var(--wood-d)}
.lk-head h4 span{margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11px;background:var(--paper-3);color:var(--ink-soft)}
.lk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.lk-chips button{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:800;color:var(--ink-soft);
  background:var(--paper-2);border:1.5px solid var(--line)}
.lk-chips button:hover{border-color:var(--wood-l);color:var(--wood-d)}
.lk-chips button.on{background:linear-gradient(180deg,var(--wood-l),var(--wood));color:#fff;border-color:var(--wood-d)}
.lk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.lk-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px 10px;border-radius:14px;
  text-align:center;background:#fffdf6;border:2px solid var(--line);box-shadow:0 2px 0 var(--line);transition:transform .1s,border-color .15s}
.lk-item:hover{border-color:var(--gold-d);transform:translateY(-2px)}
.lk-item.on{border-color:var(--green);background:linear-gradient(180deg,#f2fbe9,#fffdf6);box-shadow:0 2px 0 var(--green-d);cursor:default;transform:none}
.lk-big{font-size:30px;line-height:1;margin-bottom:2px}
.lk-item .lk-sw{position:absolute;top:8px;right:8px;width:14px;height:14px}
.lk-item b{font-size:12.5px;font-weight:900;color:var(--wood-d);line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-item em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink-soft)}
.lk-item.on em{color:var(--green-d);font-weight:900}

/* ---- The ma QR ung ho (bang "Ve game") ---- */
.qrbox{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  background:var(--paper-2);border:2px solid var(--line);border-radius:14px;
  padding:14px;margin:4px auto 0;max-width:260px}
.qrbox b{font-size:13.5px;color:var(--wood-d)}
.qrbox img{width:180px;height:180px;background:#fff;border-radius:9px;padding:6px;
  image-rendering:pixelated}
.qrbox span{font-size:11.5px;font-weight:700;color:var(--ink-soft);line-height:1.5}
.qrbox .dim{opacity:.75}

.formrow{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
/* Form doi mat khau (Thiet lap): mot cot, khong qua rong tren may tinh */
.pwform{display:flex;flex-direction:column;gap:9px;max-width:340px;margin-bottom:14px}
.pwform .btn{align-self:flex-start}
.formrow label{flex:1;min-width:110px}
.formrow .btn{height:38px}
/* Ve cao: [o so luong] [x1 x5 x10] [Cao] — cung cao 40px, du to de cham; hep thi
   `flex-wrap` dua nut Cao xuong dong duoi chu khong de len nut x10 */
.qtyrow{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch;margin:4px 0 12px}
.qtyrow input{width:62px;flex:none;padding:8px 9px;border:2px solid var(--line);border-radius:9px;background:#fffdf6;
  font-weight:800}
.qtyrow .seg button{flex:none;min-width:46px;min-height:40px;padding:0 10px}
.qtyrow .btn{flex:none;min-height:40px;padding:0 18px;font-size:14px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line);
  font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.kv b{color:var(--wood-d)}

/* ---- Popup o dat ---- */
#plotpop{position:absolute;z-index:15;padding:11px;width:216px}
#plotpop h4{margin:0 0 2px;font-size:14px;color:var(--wood-d)}
#plotpop .st{font-size:11.5px;color:var(--ink-soft);margin-bottom:8px;font-weight:600}
#plotpop .acts{display:flex;gap:6px;flex-wrap:wrap}
#plotpop .acts .btn{flex:1 1 auto}
#plotpop .bar{height:9px;margin:7px 0 9px}
/* Ban rut gon cua canh bao kho han — chi hien o man ngang thap (xem khoi
   @media landscape ben duoi), thay cho ban day `.wiltlead`. */
#plotpop .wiltshort{display:none}

/* ---- Toast ---- */
#toasts{position:absolute;top:74px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
  gap:6px;align-items:center;pointer-events:none;z-index:30;width:max-content;max-width:92%}
.toast{background:linear-gradient(180deg,rgba(60,44,30,.95),rgba(42,32,22,.95));color:#fff6e4;
  padding:9px 17px;border-radius:12px;font-weight:800;font-size:13px;animation:pop .25s ease-out;
  border:1.5px solid var(--gold-d);box-shadow:0 5px 16px rgba(0,0,0,.4)}
.toast.ok{background:linear-gradient(180deg,rgba(74,142,56,.96),rgba(55,111,43,.96));border-color:#bde8a0}
.toast.err{background:linear-gradient(180deg,rgba(184,62,52,.96),rgba(148,48,42,.96));border-color:#f2b0a8}
.toast.warn{background:linear-gradient(180deg,rgba(201,146,24,.96),rgba(166,122,29,.96));border-color:#f2d98a}
@keyframes pop{from{transform:translateY(-10px) scale(.93);opacity:0}}

/* ============================================================
   LOP CHO PHAN HOI — nut bi khoa, dai mat ket noi, man cho
   ============================================================
   Phan viec nam o public/js/wait.js; o day chi la hinh thuc. Ba lop, tu nho
   den to:

     1. `button.wait` — nut vua bam, dang cho may chu: mo di, khong bam duoc
        nua. Chi vay thoi — khong nhip tho, khong dai loading.
     2. `#netwait` — chi khi MAT KET NOI; vien chu o giua man tren, dung
        CHO toast va day toast xuong duoi no (`body.netwait #toasts`), nen
        hai thu khong bao gio de nhau.
     3. `#screenwait` — man cho ca man hinh luc doi ban do / vua vao game.
        Nam tren modal (z 20) va toast (z 30) nhung DUOI cac cua man hinh
        (dang nhap 50, cai dat 60, bao tri 70, khoa 80). */

/* Vong xoay dung chung — mau theo cho dat: sang tren nen sam, sam tren giay */
.spin{display:inline-block;width:15px;height:15px;flex:none;border-radius:50%;
  border:2.5px solid rgba(255,246,228,.28);border-top-color:#fff6e4;
  animation:spin .7s linear infinite}
.spin.big{width:30px;height:30px;border-width:3.5px;
  border-color:rgba(74,45,24,.18);border-top-color:var(--wood)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Nut dang cho may chu tra loi. `pointer-events:none` la lop khoa thu hai sau
   `disabled`: vai nut co lop phu ben tren nen `disabled` mot minh chua chac
   chan het duong bam. Khong dung `position` o day: `.lk-off` (nut ✕ coi phu
   kien) tu dinh vi bang `position:absolute`, ghi de la no nhay ra giua dong
   chu suot thoi gian cho. */
button.wait{opacity:.62;pointer-events:none}

/* Dai mat ket noi. Cung kho, cung cho voi toast — chi khac la no khong tu tat,
   va khong bao gio chong len toast vi toast tu lui xuong duoi. */
#netwait{position:absolute;top:74px;left:50%;transform:translateX(-50%);z-index:29;
  display:flex;align-items:center;gap:9px;pointer-events:none;max-width:92%;
  padding:7px 14px;border-radius:12px;animation:pop .25s ease-out;
  background:linear-gradient(180deg,rgba(60,44,30,.95),rgba(42,32,22,.95));
  border:1.5px solid var(--gold-d);box-shadow:0 5px 16px rgba(0,0,0,.4);
  color:#fff6e4;font-weight:800;font-size:12.5px}
body.netwait #toasts{top:122px}
/* Che do chup anh don sach man hinh — dai nay cung khong duoc nam trong khung */
body.photo #netwait{display:none}

/* Man cho. `inset:0` trong `#game` nen no che ca ban do lan HUD; `pop` o day
   la mo dan chu khong nhay vao, vi no to bang ca man hinh. */
#screenwait{position:absolute;inset:0;z-index:40;display:grid;place-items:center;
  padding:16px;background:rgba(24,16,8,.52);opacity:0;transition:opacity .18s ease-out}
#screenwait.on{opacity:1}
.sw-box{display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:20px 26px;font-weight:900;font-size:13.5px;color:var(--wood-d);text-align:center}

/* Bang dang doi du lieu may chu: "Dang tai..." co them vong xoay o tren, de
   phan biet voi "khong co gi" (`.empty` tron) — hai thu nay truoc day giong
   het nhau nen nguoi choi khong biet la cho tiep hay la het. */
.empty.load{display:flex;flex-direction:column;align-items:center;gap:11px}
.empty.load::before{content:"";width:26px;height:26px;border-radius:50%;
  border:3px solid rgba(74,45,24,.18);border-top-color:var(--wood);
  animation:spin .7s linear infinite}

/* Nguoi tat hieu ung chuyen dong: KHONG tat han vong xoay — no la thu duy nhat
   noi rang may van dang lam viec — chi cho no quay rat cham. */
@media (prefers-reduced-motion:reduce){
  .spin,.empty.load::before{animation-duration:2.4s}
  #netwait{animation:none}
  #screenwait{transition:none}
}

/* ---- Trang tri ---- */
#decorbar{position:absolute;left:50%;transform:translateX(-50%);bottom:92px;z-index:16;display:flex;gap:8px;
  align-items:center;padding:9px 14px;font-weight:800;font-size:13px}
body.decor #menubtn{opacity:.35;pointer-events:none}

/* ---- Chế độ chụp ảnh ----
   Dọn sạch màn hình để người chơi khoe cảnh: không nút, không khung, không
   bong bóng chat, không tên treo trên đầu nhân vật (phần vẽ trên canvas do
   `W.photo` lo — xem public/js/world.js). Còn lại đúng hai thứ: bản đồ và
   người chơi.

   KHÔNG ẩn `#noticebar` / `#maintbar`: đó là lời nhắn của quản trị (pháp lý,
   lịch bảo trì) và ai đang chơi cũng phải đọc được. Chúng là DOM nên dù có
   hiện cũng không bao giờ lọt vào tấm ảnh — ảnh lấy từ canvas. */
body.photo #hud-left,body.photo #hud-right .hudtop,
body.photo #questbox,body.photo #chatwrap,body.photo #menu,
body.photo #actbar,body.photo #quick,body.photo #pad,
body.photo #modal,body.photo #plotpop,body.photo #peekchip,
body.photo #decorbar{display:none!important}
#photobar{position:absolute;left:50%;transform:translateX(-50%);bottom:24px;z-index:17;
  display:flex;gap:8px;align-items:center;padding:9px 12px;
  max-width:calc(100% - 24px)}
/* `flex-shrink:0` + `nowrap`: khong co hai thu nay thi o man hep cau nhac bi
   bop con mot cot chu hep roi xuong dong thanh 5-6 dong — do that o iPhone
   dọc: thanh chup cao 283px thay vi 52px. */
#photobar .pb-hint{flex:0 0 auto;white-space:nowrap;
  font-weight:800;font-size:12px;color:var(--wood-d);opacity:.85}
#photobar button{white-space:nowrap;flex:0 0 auto}

/* ---- Thu nho man hinh ---- */
@media (max-width:860px){
  /* Thanh chup anh: bo cau nhac, chi con hai nut */
  #photobar .pb-hint{display:none}
  #hud-left{max-width:60vw}
  .questbox{width:170px}
}
@media (max-width:720px){
  /* Menu tren dien thoai: o nho lai, bo dong mo ta; 5 tab chia deu be ngang,
     bieu tuong nam tren chu de khong tab nao bi day ra ngoai man hinh */
  #menu{padding:8px}
  .menusheet{max-height:calc(100% - 16px)}
  #dock{padding:12px}
  .dockgrp{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
  #dock button{padding:12px 6px 10px}
  #dock button i{font-size:28px}
  #dock button span{font-size:12.5px}
  #dock button small{display:none}
  /* Hang tab chat phai lot vua be ngang dien thoai — ke ca nut ⚙️ o cuoi */
  .chattabs{gap:3px;overflow-x:auto;scrollbar-width:none}
  .chattabs button{flex:none;padding:6px 7px 5px 5px;font-size:11.5px;min-width:0}
  /* Vi tien gon lai cho du cho so xu hang trieu */
  .wallet{gap:8px}
  .wcoin{padding:8px 10px;gap:7px}
  .wcoin i{width:22px;height:22px}
  .wcoin b{font-size:15.5px}
  .wallet.sm .wcoin em{display:none}
  /* Bang Nhan vat: the xep mot cot, chan dung nho lai */
  .prof-hero{gap:12px;padding:12px}
  .prof-pic canvas{width:60px}
  .prof-who h3{font-size:18px}
  .prof-meters,.prof-cards{grid-template-columns:minmax(0,1fr)}
  /* Dien mao: san khau tren, 6 o dang mac xep 2 cot ben duoi */
  .lk-room{grid-template-columns:minmax(0,1fr)}
  .lk-stage{min-height:220px}
  .lk-stage canvas{width:100px}
  .lk-slot{padding:8px 9px;gap:7px}
  .lk-ic{width:32px;height:32px;font-size:17px}
  .lk-txt b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;line-height:1.2}
  .lk-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
  .menutabs{padding:6px 6px 0;gap:2px}
  .menutabs button{flex:1 1 0;min-width:0;flex-direction:column;gap:2px;padding:6px 2px;font-size:11px;white-space:nowrap}
  /* Man 360px: dong ho (cot phai) bat dau o x=180 -> bang nhan vat phai hep lai
     vai px, khong thi de len nhau. Man >= 368px van 96px nhu cu. */
  .portrait .info{min-width:min(96px,calc(100vw - 272px))}
  /* Cho hep (~96px): "994,3tr" + "999,9k" khong vua mot hang -> moi loai mot dong */
  .portrait .money{flex-direction:column;align-items:flex-start;gap:1px}
  /* Hang [Menu][ban do] phai lot vua phan con lai canh bang nhan vat: nut
     Menu chi con bieu tuong, ban do nho lai */
  #menubtn{padding:8px 11px}
  #menubtn span{display:none}
  #minimap{width:88px;height:auto}
  .mini>b{max-width:88px}
  .creator{flex-direction:column;align-items:center}
  .row2{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  #fishbar{bottom:166px}
}

/* ============================================================
   TAT NHANH KHUNG: moi khung co nut "✕". Bat lai o Menu › Khac ›
   Thiet lap (xem `renderPaneToggles` trong public/js/ui.js).
   ============================================================ */
/* Nut treo ra NGOAI khung, khong de len noi dung nua: truoc day no nam de
   len goc phai-tren va an mat duoi tieu de ban do / so dem nhiem vu.
   Quy tac chung: treo ve phia VUNG GAME — cot trai treo sang phai, cot phai
   treo sang trai — nen khong bao gio cham mep man hinh. */
.fold{
  position:absolute;top:4px;right:-22px;z-index:3;width:19px;height:19px;border-radius:7px;
  background:var(--paper-3);border:1.5px solid var(--line);color:var(--wood-d);
  font-weight:900;font-size:13px;line-height:1;display:grid;place-items:center;opacity:.72;
  box-shadow:0 1px 3px rgba(60,40,20,.25)
}
.fold:hover{opacity:1;background:var(--gold-l);border-color:var(--gold-d)}
/* Cot phai sat mep man hinh — treo sang trai, neu khong se bi cat. */
#hud-right .fold{right:auto;left:-22px}

/* ---- Loi tat goc duoi phai: Thế giới / Về nhà ---- */
/* Hai nut xep DOC sat mep phai. Tren man cam ung, can dieu khien mac dinh
   lui sang trai cot nay (xem `body.touch #pad`) de hai thu khong de nhau. */
#quick{position:absolute;right:16px;bottom:16px;z-index:7;display:flex;flex-direction:column;gap:8px}
#quick button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:58px;height:58px;border-radius:16px;
  background:linear-gradient(180deg,var(--paper),var(--paper-2));border:2px solid var(--wood);
  box-shadow:inset 0 0 0 2px var(--gold-l),var(--shadow);transition:transform .1s}
#quick button i{font-style:normal;font-size:23px;line-height:1}
#quick button span{font-size:9.5px;font-weight:900;color:var(--wood-d);white-space:nowrap}
#quick button:hover{transform:translateY(-2px);background:linear-gradient(180deg,var(--gold-l),var(--paper-2))}
#quick button:active{transform:translateY(1px)}
body.decor #quick{opacity:.35;pointer-events:none}
/* 16px mep + 58px cot loi tat + 10px khe */
body.touch #pad{right:84px;bottom:16px}

/* ---- Thanh hanh dong theo ngu canh (ngoi ghe, cau ca...) ---- */
/* Xuong dong duoc va khong bao gio rong hon man hinh: luc dang cuoi xe thanh
   nay co toi bon nut (do xang, bao duong, xuong xe, xe co) cong cac nut ngu
   canh khac — mot hang thang thi no tran ra ngoai mep va keo ca trang cuon
   ngang. Xep tu duoi len (`column-reverse` cua wrap) de hang moi khong day
   hang cu ra khoi tam ngon tay. */
#actbar{position:absolute;left:50%;transform:translateX(-50%);bottom:88px;z-index:8;
  display:flex;gap:7px;flex-wrap:wrap-reverse;justify-content:center;
  max-width:min(760px,calc(100vw - 32px))}
#actbar button{padding:9px 16px;border-radius:13px;font-weight:900;font-size:13px;color:var(--wood-d);
  background:linear-gradient(180deg,var(--gold-l),var(--gold));border:2px solid var(--wood);
  box-shadow:0 4px 0 var(--gold-d),0 8px 18px rgba(20,12,4,.3)}
#actbar button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--gold-d)}

/* ============================================================
   MANG XA HOI: BANG TIN + TIN NHAN RIENG
   ============================================================ */
/* --- O soan bai --- */
.postbox{display:flex;gap:8px;align-items:flex-end;margin-bottom:12px}
.postbox textarea{flex:1;min-width:0;resize:vertical;padding:9px 11px;border:2px solid var(--line);
  border-radius:11px;background:#fffdf6;font:inherit;font-weight:600;line-height:1.45}
.postbox textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(79,154,63,.18)}

/* --- Mot the bai viet --- */
.post{background:linear-gradient(180deg,var(--paper),var(--paper-2));border:2px solid var(--line);
  border-radius:13px;padding:10px 12px;margin-bottom:9px}
/* Bai TU DONG (cot moc cua nguoi choi) vien vang de phan biet voi bai nguoi go */
.post.auto{border-color:var(--gold-d);background:linear-gradient(180deg,#fdf6e3,var(--paper-2))}
.post-head{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.post-who{font-weight:900;font-size:13.5px;color:var(--wood-d);padding:0}
.post-who:hover{text-decoration:underline}
.post-at{font-style:normal;font-size:11px;color:var(--ink-soft);font-weight:700}
.post-del{margin-left:auto;font-size:13px;color:var(--ink-soft);padding:0;width:26px;height:26px;border-radius:7px;
  display:grid;place-items:center}
.post-del:hover{background:var(--paper-3);color:var(--red-d)}
.post-body{font-size:13.5px;line-height:1.55;color:var(--ink);word-break:break-word}
.post-bar{display:flex;gap:7px;margin-top:8px}
.post-act{font-size:12px;font-weight:800;padding:4px 11px;border-radius:9px;
  background:var(--paper-3);border:1.5px solid var(--line);color:var(--ink-soft)}
.post-act:hover{border-color:var(--gold-d);color:var(--wood-d)}
.post-act.on{background:#fde8ef;border-color:var(--rose);color:#a8325c}
.post-cmts{margin-top:8px;border-top:1.5px dashed var(--line);padding-top:7px;
  display:flex;flex-direction:column;gap:4px}
.cmt{font-size:12.5px;line-height:1.45;color:var(--ink);word-break:break-word}
.cmt b{color:var(--wood-d)}
.cmt-del{font-size:10px;color:var(--ink-soft);padding:0 5px}
.cmt-del:hover{color:var(--red-d)}
.cmt-form{display:flex;gap:6px;margin-top:8px}
.cmt-form input{flex:1;min-width:0;padding:8px 11px;border:2px solid var(--line);border-radius:10px;
  background:#fffdf6;font-weight:600}
.cmt-form input:focus{outline:none;border-color:var(--green)}

/* --- Tin nhan rieng --- */
/* Hai cot tren man rong, xep chong tren man hep */
/* ---- Tin nhan rieng (Bang tin › Tin nhan) ---- */
/* LAP DAY MODAL (lop `.fill` tren #modal, do renderPanel gan khi co `.dmwrap` —
   khong dung :has() vi WebView / trinh duyet cu tren dien thoai chua ho tro):
   dang o muc Tin nhan thi modal cao co dinh, khung tin co gian
   vao phan con lai -> o nhap + nut Gui luon nam o day, khong phai cuon moi thay. */
/* `dvh` sau `vh`: Safari iPhone tinh `vh` khi thanh dia chi DA AN -> dang hien thanh
   dia chi thi day bang (o nhap) chui xuong duoi no. Trinh duyet cu khong hieu dvh
   thi bo qua dong thu hai, giu dong vh. */
#modal.fill .sheet,#modal.tall .sheet{height:min(88vh,760px);height:min(88dvh,760px)}
#modal.fill #modal-body{flex:1;min-height:0;display:flex;flex-direction:column}
#modal.fill #modal-body>.subtabs{flex:none}
/* `grid-template-rows:1fr`: hang luoi phai GIAN het chieu cao — thieu no thi hang chi cao
   theo noi dung, it tin la o nhap lo lung giua bang */
.dmwrap{flex:1;min-height:0;display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:12px;align-items:stretch}
/* Cot trai: hop thu */
.dmside{display:flex;flex-direction:column;min-width:0;border-radius:14px;background:var(--paper-2);border:1.5px solid var(--line);overflow:hidden}
.dmside-h{padding:10px 12px;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1.5px solid var(--line);background:var(--paper-3)}
.dmside-h span{margin-left:4px;padding:0 7px;border-radius:999px;background:var(--paper);font-size:10.5px}
.dmlist{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;padding:6px;overflow-y:auto}
.dmrow{position:relative;display:flex;align-items:center;gap:10px;text-align:left;padding:8px 9px;border-radius:11px;
  border:1.5px solid transparent;min-width:0}
.dmrow:hover{background:var(--paper)}
.dmrow.on{background:#fffdf6;border-color:var(--wood-l);box-shadow:0 2px 0 rgba(74,45,24,.08)}
.dmrow-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dmrow-top{display:flex;align-items:baseline;gap:6px}
.dmrow b{flex:1;min-width:0;font-size:13px;color:var(--wood-d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmrow time{flex:none;font-size:10px;font-weight:700;color:var(--ink-soft)}
.dmrow em{font-style:normal;font-size:11.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:22px}
.dmrow.unread em{color:var(--wood-d);font-weight:800}
.dmrow .dmbadge{top:auto;bottom:9px;right:9px}
.dmav{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:15px;font-weight:900;color:#fff;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.dmbadge{position:absolute;top:6px;right:7px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--red);color:#fff;font-size:10px;font-weight:900;font-style:normal;
  display:grid;place-items:center}
/* Nut ✉️ trong danh sach ban be: so chua doc treo o goc nut */
/* `padding:0`: padding mac dinh cua nut tren iOS lon hon Chrome, bop vung
   noi dung nho hon icon 22px -> icon tran sang phai, lech khoi tam tron */
.dmbtn{position:relative;flex:none;width:38px;height:38px;padding:0;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,#6aa9e6,#4a8fd4);border:2px solid #3a74b0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 0 #2f5f92;transition:transform .1s,filter .15s}
.dmbtn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.dmbtn:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.dmbtn svg{display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}
.dmbtn .dmbadge{top:-6px;right:-6px;border:1.5px solid #fff}
/* Cot phai: cuoc tro chuyen */
.dmpane{display:flex;flex-direction:column;min-width:0;min-height:0;border-radius:14px;background:#fffdf6;border:1.5px solid var(--line);overflow:hidden}
.dmhead{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1.5px solid var(--line);
  background:linear-gradient(180deg,var(--paper),var(--paper-2))}
.dmhead-who{flex:1;min-width:0}
.dmhead-who b{display:block;font-size:14.5px;color:var(--wood-d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmhead-who span{display:block;font-size:11px;font-weight:700;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-back{display:none;flex:none;width:32px;height:32px;padding:0;border-radius:50%;font-size:17px;font-weight:900;color:var(--wood-d);
  background:var(--paper-3);border:1.5px solid var(--line)}
/* Khung tin: chiem het phan con lai cua modal (it tin van la mot khung ro rang) */
.dmlog{flex:1;display:flex;flex-direction:column;gap:6px;min-height:140px;overflow-y:auto;padding:14px 12px;
  background:repeating-linear-gradient(0deg,rgba(160,120,70,.03) 0 2px,transparent 2px 6px),#fffdf6}
.dmlog-empty{margin:auto;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.dmmsg{max-width:78%;display:flex;flex-direction:column;padding:7px 11px 5px;border-radius:14px 14px 14px 4px;font-size:13px;line-height:1.45;
  background:var(--paper-3);color:var(--ink);align-self:flex-start;word-break:break-word;box-shadow:0 1px 0 rgba(74,45,24,.12)}
.dmmsg.me{align-self:flex-end;border-radius:14px 14px 4px 14px;background:linear-gradient(180deg,#c9ecb0,#a8da8a);color:#1e3f12}
.dmmsg.cont{margin-top:-3px}
.dmmsg time{align-self:flex-end;margin-top:2px;font-size:9.5px;font-weight:700;opacity:.55}
.dmform{margin:10px;flex:none}
/* Chua chon cuoc tro chuyen (may tinh) */
.dmpane-empty{align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--ink-soft);padding:20px}
.dmpane-empty svg{width:46px;height:46px;color:var(--line)}
.dmpane-empty svg circle{fill:var(--paper)}
.dmpane-empty b{font-size:14px;color:var(--wood-d)}
.dmpane-empty span{font-size:12px;font-weight:600}
/* Dien thoai: mot man — hop thu HOAC cuoc tro chuyen */
@media (max-width:720px){
  .dmwrap{grid-template-columns:minmax(0,1fr)}
  .dmwrap.open .dmside,.dmwrap:not(.open) .dmpane{display:none}
  .dm-back{display:grid;place-items:center}
  .dmhead{padding:8px 10px;gap:8px}
  .dmhead .btn.sm{padding:5px 9px}
  .dmav{width:32px;height:32px;font-size:13.5px}
  .dmlog{min-height:120px}
  .dmmsg{max-width:86%}
  .dmform{margin:8px}
}
/* Dien thoai DOC: khung tin cao toi thieu 280px. Nhuong cho no: modal chiem gan
   het chieu cao man hinh, hang tab gon mot dong (cuon ngang). Man qua thap thi
   ca bang cuon, khung tin van khong nho hon 280px. */
@media (max-width:720px) and (orientation:portrait){
  /* Hang ban be: 3 nut (chat · Tham nha · ✕) chiem het be ngang, ten bi bop con
     mot chu mot dong -> ten + vi tri giu ca dong canh anh, nut xuong dong duoi
     va can phai. Chi hang ban be (`.frow`) — `.prow` con dung o bang khac. */
  .frow{flex-wrap:wrap}
  .frow .who{flex-basis:calc(100% - 70px)}
  .frow .who+*{margin-left:auto}
  #modal.fill #modal-body,#modal.tall #modal-body{padding:10px 12px 12px}
  /* `overflow-x:auto` cat ca chieu doc -> chua 3px duoi cho bong 2px cua tab dang chon */
  /* Moi bang (khong chi .fill/.tall): hang tab nam mot dong, het cho thi vuot
     ngang — xuong dong la nhay khung (bang Ban do: "Dang online" rot hang 2). */
  #modal-body>.subtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:3px;margin-bottom:7px}
  #modal-body>.subtabs::-webkit-scrollbar{display:none}
  #modal-body>.subtabs button{flex:none;padding:6px 11px;font-size:12px;white-space:nowrap}
  /* Lap day phan con lai, nhung khong thap hon: dau khung (~52) + 280 tin + o nhap (~66).
     Man qua thap thi ca bang cuon, o nhap khong bi cat. */
  .dmwrap{min-height:410px}
  .dmlog{min-height:280px}
  .dmside{min-height:280px}
  #modal.fill .chatm-log{min-height:260px}
  /* Hang tab chat: 5 tab khong du cho cho ca nhan kenh lan ten -> chi giu ten.
     Nhan kenh van hien tren tung dong tin. */
  .chattabs button .ctag{display:none}
  .chattabs button{padding-left:8px}
}
/* Dien thoai NAM NGANG (thap ~375px): khong du cho cho dau khung + khung tin + o
   nhap theo co thuong -> o nhap bi cat. Thu gon moi thu, khung tin chi can >= 60px.
   Modal giu dung co Bang tin (88vh). O nhap + nut Gui luon hien. */
@media (orientation:landscape) and (max-height:560px){
  #modal-body .hint.intro{display:none}
  /* Bang Ban do: o thap lai de 2 hang dau thay ngay, khong phai cuon */
  .wgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
  .wgrid.wide{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .wtile{min-height:50px;padding:5px 8px 5px 6px;gap:8px}
  .wtile-ic{width:34px;height:34px;font-size:18px}
  .wtile-go{width:28px;height:28px}
  .wtile-go .ic{font-size:15px}
  /* Ba khoi dau bang (hint + venuehead + hint) an 199px cua 268px o kho
     667x375 -> dong trang thai noi bi cat, khong nut nao bam duoc khi chua
     cuon. Bop padding/margin de khu noi len duoc trong man dau. */
  #modal-body .hint{padding:6px 10px;font-size:11.5px;margin-bottom:7px}
  #modal-body .venuehead{padding:5px 9px;margin:2px 0 5px}
  #modal-body .rankrow{padding:6px 10px;margin-bottom:8px}
  #modal-body .rankrow .big{font-size:20px}
  #modal-body .rankrow .ds{display:none}
  /* Bang Xem nguoi khac: the ho so gon lai de hang nut hien ngay man dau */
  .peek-hero{padding:6px 10px;margin-bottom:6px;gap:10px}
  .peek-hero .prof-pic canvas{width:44px}
  .peek-hero .prof-lv{min-width:24px;height:24px;font-size:12px;right:-7px;bottom:-7px}
  .peek-hero .prof-who h3{font-size:16px;margin-bottom:3px}
  .peek-hero .prof-tags{margin-bottom:3px}
  .peek-acts{margin-top:6px;gap:6px}
  .peek-acts .btn{flex:1 1 120px}
  .peek-touch{margin-top:6px;gap:6px}
  #modal.fill .sheet header,#modal.tall .sheet header{padding:5px 12px}
  #modal.fill .sheet h2,#modal.tall .sheet h2{font-size:15px}
  #modal.fill #modal-body,#modal.tall #modal-body{padding:6px 10px 8px}
  #modal.fill #modal-body>.subtabs,#modal.tall #modal-body>.subtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:3px;margin-bottom:3px;gap:4px}
  #modal.fill #modal-body>.subtabs::-webkit-scrollbar,#modal.tall #modal-body>.subtabs::-webkit-scrollbar{display:none}
  #modal.fill #modal-body>.subtabs button,#modal.tall #modal-body>.subtabs button{flex:none;padding:4px 10px;font-size:11.5px;white-space:nowrap}
  .dmwrap{gap:8px}
  .dmside-h{padding:6px 10px}
  .dmrow{padding:5px 7px;gap:8px}
  .dmav{width:28px;height:28px;font-size:12px}
  .dmhead{padding:5px 10px;gap:8px}
  .dmhead-who span{display:none}
  .dmhead .btn.sm{padding:4px 9px}
  .dmlog{min-height:60px;padding:8px 10px;gap:4px}
  #modal.fill .chatm-log{min-height:60px;margin-bottom:6px;padding:6px}
  #modal.fill #modal-body>.chattabs{margin-bottom:6px;overflow-x:auto;scrollbar-width:none}
  #modal.fill #modal-body>.chattabs button{flex:none;padding:4px 10px 3px 6px;font-size:11.5px}
  #modal.fill #modal-body>.chatm-bar{margin:0 0 4px}
  #modal.fill .chatm-form{height:40px}
  #modal.fill .chatm-gear{width:40px;height:40px}
  #modal.fill .chatm-gear svg{width:20px;height:20px}
  .dmmsg{padding:5px 9px 4px;font-size:12.5px}
  .dmform{margin:6px;height:40px}
  .dmpane-empty svg{width:32px;height:32px}
}
/* Ngang ma du rong (>720px) thi van hai cot, hop thu hep lai */
@media (orientation:landscape) and (max-height:560px) and (min-width:721px){
  .dmwrap{grid-template-columns:200px minmax(0,1fr)}
}

/* ============================================================
   QUAY VE SO
   ============================================================ */
/* Day so in tren to ve: chu dang may danh, gian cach rong cho de do */
.lotnum{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:3px;font-size:16px;color:var(--wood-d)}

/* Tep ve da in: moi to la mot nut bam.
   Quay in 200 to moi ky (xem PRINTED_PER_DRAW) nen o nay PHAI tu cuon trong
   long no: de troi tu nhien thi tren dien thoai no dai 50 hang va day het
   phan con lai cua bang xuong duoi man hinh. `overscroll-behavior:contain`
   de cuon het tep khong keo theo ca khung modal. */
.lotboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px;margin-bottom:10px;
  max-height:min(260px,38vh);overflow-y:auto;overscroll-behavior:contain;
  padding:5px;border:2px solid var(--line);border-radius:11px;background:var(--paper-2);
  -webkit-overflow-scrolling:touch}
/* padding 9px: cao to ve thanh 41px — vua qua nguong vung bam 40px tren cam ung */
.lotticket{padding:9px 4px;border-radius:9px;border:2px dashed var(--line);background:#fffdf6;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:13px;font-weight:800;
  letter-spacing:1.5px;color:var(--wood-d)}
.lotticket:hover{border-color:var(--gold-d);background:var(--paper-2)}
.lotticket.on{border-style:solid;border-color:var(--green-d);background:#ddf0d2;
  box-shadow:inset 0 0 0 2px #bde8a0}

/* --- To ve cao: ba o phu bac, gat dan ra ---
   Lop bac la mot phan tu gia (::after) truot sang phai. Do tre dat bang
   style.animationDelay o ui.js nen moi o mot nhip, khong can ve lai bang. */
.scratchwrap{display:flex;flex-direction:column;gap:9px;margin-bottom:10px}
.scard{border:2px solid var(--wood);border-radius:13px;padding:10px;
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  box-shadow:inset 0 0 0 2px var(--gold-l)}
.scard.win{border-color:var(--gold-d);box-shadow:inset 0 0 0 2px var(--gold),0 0 0 2px rgba(217,169,58,.3)}
.scells{display:flex;gap:8px;justify-content:center}
.scell{position:relative;overflow:hidden;width:54px;height:54px;border-radius:10px;
  display:grid;place-items:center;font-size:26px;font-style:normal;
  background:var(--paper-3);border:2px solid var(--line)}
.scell::after{
  content:"";position:absolute;inset:0;transform-origin:left center;
  background:repeating-linear-gradient(115deg,#b9bec6 0 5px,#d6dade 5px 10px);
  animation:scratchoff .45s steps(6,end) forwards;
}
@keyframes scratchoff{to{transform:scaleX(0)}}
.sres{display:block;text-align:center;margin-top:8px;font-size:13px;color:var(--wood-d);
  opacity:0;animation:srevealin .3s ease-out forwards}
@keyframes srevealin{to{opacity:1}}
/* Nguoi dat "giam chuyen dong" trong he dieu hanh: bo het hoat canh, hien ngay */
@media (prefers-reduced-motion:reduce){
  .scell::after{animation-duration:0s}
  .sres{animation-duration:0s}
}

/* ---- Giai cap ---- */
.rankrow{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:12px;margin-bottom:12px;
  background:linear-gradient(180deg,var(--paper-2),var(--paper-3));border:2px solid var(--line)}
.rankrow .big{font-size:26px;line-height:1}
.rankrow .nm{font-weight:900;font-size:15px;color:var(--wood-d)}
.rankrow .ds{font-size:11.5px;color:var(--ink-soft);font-weight:700}

/* ---- Bang lo dat ---- */
.lotcard .st{display:inline-block;padding:1px 8px;border-radius:7px;font-size:10px;font-weight:900;
  border:1px solid var(--line);background:var(--paper-3);color:var(--wood)}
.lotcard .st.free{background:#fdf0cf;border-color:var(--gold-d);color:#7a5a08}
.lotcard .st.mine{background:#ddf0d2;border-color:#a8cf92;color:var(--green-d)}
.lotcard .st.taken{background:#ece7df;color:#7d6a52}
/* Dong cua chinh minh trong bang xep hang: to dam len de de tim */
.prow.me{background:var(--paper-3);border-color:var(--gold-d)}
.prow.me b{color:var(--wood-d)}
/* Hai con so cua mot lo dat luon di cung nhau: gia ban va gia thue mot thang.
   Truoc day gia thue bi nhet vao dong mo ta nen cho co cho khong — gio la mot
   hang co dinh, lo nao cung co du. */
.it .pricerow{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.it .pricerow span{flex:1 1 130px;display:flex;flex-direction:column;gap:1px;
  background:var(--paper-2);border:1.5px solid var(--wood-l);border-radius:9px;padding:5px 9px}
.it .pricerow i{font-style:normal;font-size:9.5px;font-weight:800;color:var(--ink-soft);
  text-transform:uppercase;letter-spacing:.04em}
.it .pricerow b{font-size:13px;font-weight:900;color:var(--wood-d)}
.numin{padding:7px 9px;border:2px solid var(--line);border-radius:9px;background:#fffdf6;
  font-weight:700;max-width:120px;width:100%}

/* --- Bang nhan vien co so --------------------------------------------------
   Hai nut thue (nam / nu) xep ngang, hep thi XUONG DONG chu khong cuon ngang:
   moi nut mang mot con so tien, cuon mat mot nua la bam nham cai dat hon.
   `.numin` bi kep o 120px — vua cho mot con so, qua hep cho mot cau chao 60
   ky tu, nen o chao go rieng mot lop. */
.nvrow{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0}
.nvrow .btn{flex:1 1 150px}
.nvact{display:block;width:100%;margin-top:6px}
.nvhello{max-width:none}

@media (max-width:720px){
  #actbar{bottom:150px}
}

/* ============================================================
   MAN HINH CAM UNG DANG DUNG (chieu rong < chieu cao)
   ============================================================
   "Giao dien mobile" o day duoc bat bang DUNG hai dieu kien:

     - `body.touch`  — co man cam ung (ui.js dat theo `pointer:coarse`), va
     - `orientation:portrait` — CSS doc nghia la chieu rong < chieu cao.

   Khong dung `max-width` mot minh: man hinh may tinh hep cung lot vao do
   nhung van cao thoai mai va co chuot, khong can bo cuc nay. */
@media (orientation:portrait){
  /* Hai cot HUD dung sat dinh, chi chua phan tai tho. */
  body.touch #hud-left,body.touch #hud-right{top:max(8px,env(safe-area-inset-top))}
  /* Dai thong bao roi xuong DUOI bang nhan vat (cao ~105px tu dinh) */
  body.touch #toasts{top:124px}
  /* Dai mat ket noi thay cho cho cua toast, toast lui tiep xuong duoi no */
  body.touch #netwait{top:124px}
  body.touch.netwait #toasts{top:172px}

  /* DAY CAC THANH O DAY LEN TREN CUM DIEU HUONG.
     Can dieu khien cao 124px va dung o `bottom:92px`, tuc chiem den 216px
     tinh tu day. Cac thanh o day truoc nay dung o 150px — nghia la o nhap
     chat va nut "Gui" nam DUOI can dieu khien, bam vao nut nao cung nham.
     Keo het chung len tren 216px la hai ben khong con cham nhau.
     (Cum dieu huong keo di cho khac duoc — xem `.padgrip` — nhung mot bo cuc
     mac dinh thi phai dung ngay tu dau.)
     Cum da to len 140px nen trong `body.touch` no chiem 16 + 140 = 156px tinh
     tu day — van gon trong 226px, khong phai doi con so nay. */
  body.touch #actbar,
  body.touch #fishbar,body.touch #decorbar{bottom:226px}
  /* Khung chat van o goc duoi trai, nhung chi rong toi mep trai can dieu
     khien (#pad 140px + cot loi tat 58px + hai khe ~26px = ~224px ben phai):
     moi tin mot dong, cat bot bang dau "…" — muon doc du thi bam vao mo bang
     chat. */
  body.touch #chatwrap{width:calc(100% - 236px)}
  /* Dung 3 dong (25px/dong + khe 3px) — khong con dong thu tu bi cat ngang */
  body.touch #chatlog{max-height:81px}
  body.touch #chatlog .cl{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
}

/* O NHAP TREN MAN CAM UNG PHAI >= 16px.
   Duoi 16px, iOS Safari TU PHONG TO ca trang khi con tro vao o nhap — trang
   bi keo lech, va khung nhin thu lai mot mach. Do vua la mot loi bo cuc, vua
   la cai lam la chan (public/js/shield.js) tuong co ai dang mo cong cu. Dat
   dung 16px la iOS khong phong to nua. */
@media (pointer:coarse){
  input,textarea,select{font-size:16px}
  /* Hai o nay tu dat co chu (14px / `font:inherit`) va thang luat tren vi nhieu
     lop hon -> phai nhac lai, khong thi iPhone van phong to khi go chat / viet bai */
  .chatm-form input,.postbox textarea{font-size:16px}
  /* Vung bam tren man cam ung >= 44px. Hai nut cua thanh chup anh la `.btn`
     dung chung (cao 34px) — tren chuot thi du, tren ngon tay thi khong. */
  #photobar button{min-height:44px}
  /* Nut trong the hang hoa cung vay: `.it.col .acts .btn` bi ep ve 33px vi
     `padding:7px 4px` ghi de `.btn`. Tu khi moi cho mua/ban co ×5 ×10 ×20 thi
     mot the mang toi nam nut, bam truot mot cai la mua sai so luong. */
  .it.col .acts .btn{min-height:44px}
  /* Bang nhan vien: thue ai la MAT XU, cho ai nghi la MAT NGUOI — hai viec
     khong lam lai duoc bang mot cu bam nham, nen cung phai du 44px. */
  .nvrow .btn,.nvact{min-height:44px}
  /* Nut ROI dung giua bang (khong nam trong `.it.col .acts`) — vi du
     "Lay het (don luon N noi chay)". Luat 44px o tren khong voi toi no, ma
     day la nut gay mat cua. */
  .btn-wide{min-height:44px}
  /* Bang Xem nguoi khac: nut ket ban / nhan tin / hon / danh cung >= 44px */
  .peek-acts .btn,.peek-touch .btn{min-height:44px}
}

/* ============================================================
   XOAY NGANG THIET BI
   ============================================================
   Ban do tu xoay theo man hinh (canvas phu kin `#game`, va world.js do lai
   kich thuoc moi lan xoay). Phan con lai la HUD: o mot khung chi cao ~390px
   thi bo cuc doc — thanh chuc nang cao 90px, chat cao 150px, dong ho day
   xuong 154px — an het ban do. Khoi nay ep moi thu mong lai va keo ve hai
   canh, de phan giua luon la ban do.

   Dieu kien la "nam ngang VA thap", khong phai chi "nam ngang": man hinh may
   tinh cung la nam ngang nhung cao thoai mai, khong can thu gon gi.
   `env(safe-area-inset-*)` chua phan tai thỏ / goc bo tron khi nam ngang. */
@media (orientation:landscape) and (max-height:560px){
  /* Nut Menu nho lai; bang menu tran gan het khung thap, o xep day hon */
  #menubtn{padding:5px 12px 5px 10px;font-size:12.5px}
  #menubtn i{font-size:16px}
  #menu{padding:6px max(6px,env(safe-area-inset-right)) 6px max(6px,env(safe-area-inset-left))}
  .menusheet{max-height:calc(100% - 12px)}
  .menusheet header{padding:6px 14px}
  #dock{padding:10px}
  .dockgrp{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
  #dock button{padding:8px 4px 7px}
  #dock button i{font-size:22px}
  #dock button small{display:none}

  /* Hai cot HUD sat hai canh, hep lai */
  #hud-left{top:max(6px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));
    max-width:min(186px,30vw)}
  #hud-right{top:max(6px,env(safe-area-inset-top));right:max(6px,env(safe-area-inset-right))}
  #hud-right.minimini .hudtop .qtoggle.rt{margin-right:calc(env(safe-area-inset-right, 0px) - max(6px, env(safe-area-inset-right, 0px)))}
  .portrait{padding:4px 16px 4px 4px}
  .portrait .info{min-width:118px}
  .portrait .money{flex-direction:column;align-items:flex-start;gap:1px}
  #minimap{width:96px;height:auto}
  .mini>b{display:none}
  .questbox{width:170px;max-height:calc(100vh - 160px);overflow-y:auto}

  /* Chat: mot cot hep o goc duoi trai */
  #chatwrap{left:max(6px,env(safe-area-inset-left));bottom:max(6px,env(safe-area-inset-bottom));width:min(260px,36vw)}
  /* Moi tin mot dong, toi da 2 dong: tin dai khong xuong dong de lan len ban
     do — muon doc du thi bam mo bang chat */
  #chatlog{max-height:48px}
  #chatlog .cl{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-size:11.5px;padding:3px 8px 3px 5px}
  .chatm-log{height:calc(100vh - 220px);min-height:80px}

  /* Cac thanh noi tren thanh chuc nang */
  #actbar{bottom:58px}
  #actbar button{padding:7px 13px;font-size:12px}
  /* Dien thoai NGANG: can dieu khien + cot loi tat chiem ~166px sat mep phai
     va nam CUNG do cao voi thanh nay. Nen o day thanh hanh dong khong can
     giua man hinh nua ma can giua phan con TRONG — khong thi nut cuoi nam
     duoi cum dieu khien, bam vao la dieu khien nhan vat. */
  body.touch #actbar{left:calc(50% - 83px);max-width:calc(100vw - 186px)}
  #pad{--pad-size:112px;bottom:58px;right:max(10px,env(safe-area-inset-right))}
  /* Loi tat chi con bieu tuong, xep doc sat mep; can dieu khien lui sang trai cot */
  body.touch #pad{bottom:max(6px,env(safe-area-inset-bottom));right:calc(max(10px,env(safe-area-inset-right)) + 52px)}
  #quick{bottom:max(6px,env(safe-area-inset-bottom));right:max(10px,env(safe-area-inset-right));gap:6px}
  #quick button{width:44px;height:44px;border-radius:13px}
  #quick button i{font-size:19px}
  #quick button span{display:none}
  .stick-knob{width:48px;height:48px;margin:-24px 0 0 -24px}
  #pad .padgrip{width:24px;height:24px;font-size:12px}
  #decorbar{bottom:58px}
  /* Popup o dat lan xuong de len cum dieu khien #pad (do canh bao kho han
     len toi 3-4 dong). Doi cau rut gon + bop dem/chu de chac chan thap hon
     dinh #pad ca o khung hep nhat (667x375). */
  #plotpop{padding:7px 9px;width:200px}
  #plotpop h4{font-size:12.5px;margin-bottom:1px}
  #plotpop .st{font-size:10.5px;line-height:14px;margin-bottom:5px}
  #plotpop .bar{height:7px;margin:4px 0 6px}
  #plotpop .acts{gap:4px}
  /* padding doc giam nhung van giu min-height 40px — vung bam cam ung
     khong duoc thap hon nguong do du chu nho lai. */
  #plotpop .acts .btn{padding:5px 6px;font-size:11px;min-height:40px;
    display:flex;align-items:center;justify-content:center}
  #plotpop .wiltlead{display:none}
  #plotpop .wiltshort{display:inline}
  /* Thanh chup anh: bo cau nhac (khong du cho ngang), hai nut giu nguyen co
     bam. O che do chup thi can dieu khien da an nen no xuong sat mep duoi. */
  #photobar{bottom:max(10px,env(safe-area-inset-bottom));gap:6px;padding:7px 9px}
  #photobar .pb-hint{display:none}

  /* Thanh cau ca: nam ngang, keo sang phai de khong de len chat */
  #fishbar{bottom:58px;left:auto;right:max(56px,env(safe-area-inset-right));transform:none;
    width:min(300px,46vw);padding:7px 10px}
  /* Co phim ao dieu huong (#pad + cot loi tat chiem ~165px canh phai) thi day thanh cau
     ca vao de hai thu khong de nhau. */
  body.touch #fishbar{right:calc(178px + env(safe-area-inset-right))}
  /* Thap hon mot chut cho vua kho ngang. Nut giat van phai >= 40px: day la
     nut bam theo nhip, khong phai nut bam cho vui. */
  .fb-track{height:28px}
  .fb-wait{height:75px;font-size:12.5px}
  .fb-wait.slim{height:28px}
  .fb-pull{margin-top:7px;padding:11px;font-size:13px;line-height:18px}

  /* Dai bao tri mong lai, va khong day HUD xuong qua nhieu */
  #maintbar{padding:4px 10px;font-size:11px}
  #noticebar{font-size:10.5px}
  .nscroll{padding:5px 9px}
  #noticebar.hasnav .nscroll{padding-left:6px;padding-right:6px}
  #noticebar.nover.hasnav .nnav{min-height:28px;font-size:16px}
  #noticebar.nover.hasnav .nprev{margin-left:4px}
  #noticebar.nover.hasnav .nnext{margin-right:4px}
  body.maint #hud-left,body.maint #hud-right{top:30px}

  /* Cua dang nhap / cua cai dat: cho cuon, dung can giua theo chieu cao */
  #gate,#instgate,#maintgate{align-items:start;padding:10px}
  .gate-card{margin:0 auto}

  /* Khung dang nhap thap lai cho vua man ngang: them hang "ghi nho mat khau"
     la nut "Vao the gioi" roi xuong duoi mep (do that o 844x390). Nen bop
     dem / co chu, chu khong bo dong nao. */
  .gate-card{padding:12px 16px}
  .gate-card header{margin-bottom:8px}
  .gate-card h1{font-size:24px}
  .gate-card header p{font-size:11px;margin-top:2px}
  .tabs{margin-bottom:8px}
  .tab{padding:7px}
  .pane{gap:6px}
  .pane label input{padding:7px 10px}
  .remember{min-height:34px;font-size:12px}
  .pane .primary{padding:9px}
  #gate-err{min-height:14px;margin-top:6px}
  .gate-card footer{margin-top:4px}
}

/* Luat chay nau an: gap lai duoc, dat DUOI khu noi. O dien thoai nam ngang
   `#modal-body` chi cao ~270px — mot khoi chu 96px o dau bang la day het noi
   ra khoi man hinh. */
.cooknote{margin:10px 0 0}
.cooknote>summary{cursor:pointer;list-style:none;padding:9px 12px;border-radius:12px;
  background:var(--paper-2);border:1.5px solid var(--line);font-size:12.5px;font-weight:800;color:var(--ink-soft)}
.cooknote>summary::-webkit-details-marker{display:none}
.cooknote[open]>summary{margin-bottom:6px}
@media (pointer:coarse){.cooknote>summary{min-height:44px;display:flex;align-items:center}}