/* HUD theo Túy Giang Hồ 2.0 đang chạy: toạ độ đo ở màn 844×390 (--u = 1 điểm đo). Hình trong ui/hud vẽ bằng Gemini (tools/gemini_hud.py).
   Không tự dời hay bớt nút. Trước khi sửa, so ảnh với bản 2.0 và web/ cùng cỡ màn. */
#hud{font-family:'Segoe UI','Noto Sans',Arial,sans-serif;color:#f2f5f7}
#hud .world-title{display:none}
#hud button{font-family:inherit}

/* góc trái trên: chân dung, tên, Công Lực, ba thanh, thoi trạng thái */
#hud .player-panel{position:fixed;left:0;top:0;width:calc(206 * var(--u));height:calc(58 * var(--u));padding:0;margin:0;border:0;border-radius:0;display:block;background:none;box-shadow:none;text-shadow:0 1px 1px #000f;pointer-events:none}
#hud .ui-avatar{position:absolute;left:calc(4 * var(--u));top:calc(2 * var(--u));width:calc(52 * var(--u));height:calc(52 * var(--u));pointer-events:auto}
#hud #avatar{position:absolute;left:11%;top:11%;width:78%;height:78%;border-radius:50%;background:radial-gradient(#3a4a5e,#121a24)}
#hud .face-ring{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
#hud #levelBadge{position:absolute;left:calc(-4 * var(--u));top:calc(32 * var(--u));width:calc(20 * var(--u));height:calc(20 * var(--u));display:grid;place-items:center;border:0;border-radius:0;background:url('ui/hud/huy_cap.png') center/contain no-repeat;font:italic 700 calc(11 * var(--u)) "Palatino Linotype","Times New Roman",serif;color:#fff}
#hud .player-info{position:absolute;left:calc(64 * var(--u));top:calc(2 * var(--u));width:calc(142 * var(--u));height:calc(56 * var(--u));pointer-events:none}
#hud .identity{position:absolute;left:0;top:0;width:100%;height:calc(15 * var(--u));margin:0;display:flex;align-items:center;gap:calc(3 * var(--u))}
#hud .identity strong{font:600 calc(9.5 * var(--u))/1.2 'Segoe UI',Arial,sans-serif;color:#f2f5f7;max-width:calc(46 * var(--u));overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#hud #daoBadge{position:static;flex:none;width:auto;height:calc(13 * var(--u));padding:0 calc(3 * var(--u));transform:none;display:inline-flex;align-items:center;background:#0e1c2cb8;border:1px solid #d4af638c;border-radius:calc(2 * var(--u));box-shadow:none;font:600 calc(8.5 * var(--u))/1 'Segoe UI',Arial,sans-serif;color:#ffe08a;pointer-events:auto;white-space:nowrap}
#hud .ui-power{margin-left:auto;font:600 calc(8.5 * var(--u))/1 'Segoe UI',Arial,sans-serif!important;color:#f4dfa0;white-space:nowrap}
#hud .ui-power b{color:#ffd451}
#hud .meter{position:absolute;left:0;width:100%;margin:0;border:0;border-radius:calc(1.5 * var(--u));background:#0a121ae0;box-shadow:0 0 0 1px #0a121a,0 0 0 calc(1.6 * var(--u)) #b7985a77;overflow:visible}
#hud .meter i{position:absolute;left:0;top:0;bottom:0;border-radius:calc(1 * var(--u))}
#hud .meter span{display:block;position:absolute;inset:0;text-align:center;color:#fff;font-weight:600;text-shadow:0 1px 1px #000,0 0 2px #000;white-space:nowrap}
#hud .player-info .meter.hp{top:calc(17 * var(--u));height:calc(9 * var(--u))}
#hud .player-info .meter.hp i{background:linear-gradient(#b6ffc9,#48e081 30%,#138a45)}
#hud .player-info .meter.hp span{font-size:calc(8 * var(--u));line-height:calc(9 * var(--u))}
#hud .player-info .meter.mp{top:calc(28 * var(--u));height:calc(7 * var(--u))}
#hud .player-info .meter.mp i{background:linear-gradient(#bfe6ff,#4aa8ee 35%,#1a5ca8)}
#hud .player-info .meter.mp span{font-size:calc(6.5 * var(--u));line-height:calc(7 * var(--u))}
#hud .player-info .meter.exp{top:calc(36 * var(--u));height:calc(6 * var(--u))}
#hud .player-info .meter.exp i{background:linear-gradient(#fff1b8,#f5c542 40%,#c98a12)}
#hud .player-info .meter.exp span{font-size:calc(6 * var(--u));line-height:calc(6 * var(--u))}
#hud #realm{position:absolute;left:0;top:calc(45 * var(--u));display:block;max-width:calc(190 * var(--u));margin:0;font-size:calc(8.5 * var(--u));line-height:1.15;color:#ffd451;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud #realm.red-name{color:#ff8a78}
#hud #sectName{display:none}
#hud #pkButton{position:fixed;left:calc(209 * var(--u));top:calc(1 * var(--u));right:auto;bottom:auto;width:calc(40 * var(--u));height:calc(40 * var(--u));padding:0 calc(7 * var(--u));border:0;border-radius:0;background:url('ui/hud/pk_hoa.png') center/contain no-repeat;box-shadow:none;font:700 calc(9 * var(--u))/1.1 'Segoe UI',Arial,sans-serif;letter-spacing:0;color:#dff7e4;text-shadow:0 1px 1px #000;white-space:normal;pointer-events:auto}
#hud #pkButton.on{background-image:url('ui/hud/pk_sat.png');color:#ffd9cf}

/* bảng nhiệm vụ / đội */
#hud .ben{position:fixed;left:0;top:calc(70 * var(--u));width:calc(150 * var(--u));pointer-events:none}
#hud .ben button{pointer-events:auto;padding:0;border:0;background:none;box-shadow:none}
#hud #benThu{position:absolute;left:calc(1 * var(--u));top:calc(1 * var(--u));width:calc(15 * var(--u));height:calc(17 * var(--u))}
#hud #benThu img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .2s}
#hud .ben-tab{position:absolute;top:0;width:calc(63 * var(--u));height:calc(19 * var(--u));background:url('ui/hud/tab_tat.png') center/100% 100% no-repeat!important;font:500 calc(10 * var(--u))/1 'Segoe UI',Arial,sans-serif;color:#e5ecf2;text-shadow:0 1px 1px #000f;white-space:nowrap}
#hud #tabQuest{left:calc(20 * var(--u))}#hud #tabTeam{left:calc(87 * var(--u))}
#hud .ben-tab.on{background-image:url('ui/hud/tab_on.png')!important;color:#fff}
#hud .quest,#hud #teamBox{position:absolute;left:0;top:calc(22 * var(--u));width:calc(150 * var(--u));max-height:calc(130 * var(--u));margin:0;padding:calc(3 * var(--u)) calc(6 * var(--u));overflow:hidden;border:0;border-radius:0;box-shadow:none;background:linear-gradient(90deg,#0a1420a8,#0a142055 70%,transparent);text-shadow:0 1px 1px #000f;pointer-events:auto}
#hud .quest .eyebrow,#hud .cot-truyen .eyebrow{display:none}
#hud .quest h3,#hud .cot-truyen h3{margin:0;font:600 calc(9.5 * var(--u))/1.25 'Segoe UI',Arial,sans-serif;color:#ffd451}
#hud .quest p,#hud .cot-truyen p{margin:0;font:400 calc(9 * var(--u))/1.25 'Segoe UI',Arial,sans-serif;color:#eef2f5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#hud .cot-truyen{margin:0 0 calc(3 * var(--u))}
#hud .cot-truyen p.phu{color:#a5f3fc;-webkit-line-clamp:1}
#hud .quest-progress{height:calc(2 * var(--u));margin:calc(2 * var(--u)) 0 0}
#hud .quest small{display:block;margin:calc(2 * var(--u)) 0 0;font-size:calc(8.5 * var(--u));line-height:1.2;color:#b5d79a;cursor:pointer}
#hud #claim{display:inline-block;height:calc(17 * var(--u));margin-top:calc(3 * var(--u));padding:0 calc(9 * var(--u));background:url('ui/hud/vien_lam.png') center/100% 100% no-repeat;font-size:calc(9 * var(--u));color:#ffe9a8}
#hud #claim[hidden]{display:none}
#hud #teamBox{display:none;font-size:calc(9 * var(--u));line-height:1.3}
#hud .ben.doi .quest{display:none}#hud .ben.doi #teamBox{display:block}
#hud #teamBox p{margin:0 0 calc(3 * var(--u));color:#dfe7ee}
#hud .doi-hang{display:grid;grid-template-columns:1fr calc(44 * var(--u));gap:calc(4 * var(--u));align-items:center;margin-bottom:calc(2 * var(--u));white-space:nowrap}
#hud .doi-hang span{overflow:hidden;text-overflow:ellipsis}
#hud .doi-hang i{display:block;height:calc(4 * var(--u));background:linear-gradient(90deg,#48e081 var(--hp),#0a121a 0);box-shadow:0 0 0 1px #0007}
#hud #teamBox button{height:calc(17 * var(--u));margin-top:calc(2 * var(--u));padding:0 calc(9 * var(--u));background:url('ui/hud/vien_lam.png') center/100% 100% no-repeat;font-size:calc(9 * var(--u));color:#ffe9a8}
#hud .ben.gap .ben-tab,#hud .ben.gap .quest,#hud .ben.gap #teamBox{display:none}
#hud .ben.gap #benThu img{transform:scaleX(-1)}

/* góc phải trên: hàng nút, thu gọn, bản đồ nhỏ */
#hud .bottom-bar{display:contents}
#hud .currencies{display:none}
#hud .menu{display:contents}
#hud .menu button{position:fixed;left:auto;bottom:auto;right:calc(var(--mr) * var(--u));top:calc(var(--mt) * var(--u));width:calc(34 * var(--u));height:calc(38 * var(--u));margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:0;background:none;border:0;box-shadow:none;font:500 calc(8.5 * var(--u))/1.1 'Segoe UI',Arial,sans-serif;color:#f2f5f7;text-shadow:0 1px 1px #000,0 0 2px #000;pointer-events:auto;overflow:visible}
#hud .menu button img{width:calc(28 * var(--u));height:calc(28 * var(--u));object-fit:contain;filter:drop-shadow(0 calc(1 * var(--u)) calc(1.5 * var(--u)) #0009)}
#hud .menu button span{white-space:nowrap;display:block;transform:scaleX(.84);transform-origin:center}
#hud .menu button kbd{display:none}
#hud #tinhNgocButton{--mr:304;--mt:2}#hud #ngocButton{--mr:264;--mt:2}#hud #worldmapButton{--mr:224;--mt:2}#hud #guildButton{--mr:184;--mt:2}#hud #bagButton{--mr:144;--mt:2}#hud #menuButton{--mr:104;--mt:2}
#hud #partyButton{--mr:184;--mt:44}#hud #marketButton{--mr:144;--mt:44}#hud #forgeButton{--mr:104;--mt:44}
#hud #screenshot,#hud #helpButton{display:none}
#hud.gon .menu button:not(#menuButton){display:none}
#hud #topFold{position:fixed;right:calc(77 * var(--u));top:calc(6 * var(--u));width:calc(26 * var(--u));height:calc(26 * var(--u));padding:calc(3 * var(--u));border:0;background:none;box-shadow:none;pointer-events:auto}
#hud #topFold img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .2s}
#hud.gon #topFold img{transform:rotate(180deg)}
#hud .map-panel{position:fixed;left:auto;bottom:auto;right:0;top:0;width:calc(76 * var(--u));height:calc(84 * var(--u));margin:0;padding:0;border:0;border-radius:0;background:#091321;box-shadow:none;pointer-events:auto;overflow:visible}
#hud .map-panel canvas{position:absolute;left:calc(3 * var(--u));top:calc(15 * var(--u));width:calc(70 * var(--u))!important;height:calc(66 * var(--u))!important;border:0;border-radius:0;filter:saturate(.9)}
#hud .khung-map{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
#hud #position{display:block;position:absolute;left:0;right:0;top:0;height:calc(15 * var(--u));padding:0 calc(3 * var(--u));background:linear-gradient(#3c4860,#20283a);box-shadow:inset 0 calc(-1 * var(--u)) 0 #d2be8c80;border:0;font:500 calc(9 * var(--u))/calc(15 * var(--u)) 'Segoe UI',Arial,sans-serif;color:#f2f5f7;text-align:center;text-shadow:0 1px 1px #000f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:3}
#hud #xy{position:absolute;right:calc(5 * var(--u));bottom:calc(4 * var(--u));font:500 calc(8 * var(--u))/1 'Segoe UI',Arial,sans-serif;color:#f2f5f7;text-shadow:0 1px 1px #000f,0 0 2px #000;pointer-events:none;z-index:3}
#hud .dai-vung{position:fixed;right:calc(2 * var(--u));top:calc(88 * var(--u));display:flex;flex-direction:row-reverse;align-items:center;gap:calc(3 * var(--u));pointer-events:none}
#hud #zoneBadge{flex:none;height:calc(15 * var(--u));padding:0 calc(7 * var(--u));display:grid;place-items:center;background:url('ui/hud/vien_do.png') center/100% 100% no-repeat;font:500 calc(8.5 * var(--u))/1 'Segoe UI',Arial,sans-serif;color:#f2f5f7;text-shadow:0 1px 1px #000f;white-space:nowrap}
#hud #zoneBadge.yen{background-image:url('ui/hud/vien_luc.png')}
#hud .tu-info{position:static;height:calc(15 * var(--u));padding:0 calc(7 * var(--u));display:grid;place-items:center;background:url('ui/hud/vien_lam.png') center/100% 100% no-repeat;border-radius:0;font:500 calc(8 * var(--u))/1 'Segoe UI',Arial,sans-serif;color:#ffe9b0;text-shadow:0 1px 1px #000f;white-space:nowrap}
#hud #anButton{position:fixed;right:calc(12 * var(--u));top:calc(109 * var(--u));width:calc(25 * var(--u));height:calc(25 * var(--u));padding:0;border:0;border-radius:50%;background:url('ui/ring_small.png') center/100% 100% no-repeat,url('ui/hud/nut_lam.png') center/82% 82% no-repeat;box-shadow:none;font:600 calc(8.5 * var(--u))/1 'Segoe UI',Arial,sans-serif;color:#e8f0f8;text-shadow:0 1px 1px #000;pointer-events:auto}
#hud #anButton.on{color:#ffd451}

/* khung chat, hai nút bên trái như bản 2.0 */
#hud .chat-panel{position:fixed;left:calc(290 * var(--u));right:auto;bottom:calc(10 * var(--u));transform:none;display:block;width:calc(246 * var(--u));height:calc(46 * var(--u));margin:0;padding:0;border:0;border-top:1px solid #b4a87866;border-radius:0;background:linear-gradient(#0c1527aa,#071220c8);box-shadow:none;pointer-events:auto}
#hud #sound,#hud #chatOpen{position:absolute;left:calc(4 * var(--u));width:calc(22 * var(--u));height:calc(20 * var(--u));padding:0;border:0;background:none;box-shadow:none;pointer-events:auto}
#hud #sound{top:calc(2 * var(--u))}#hud #chatOpen{top:calc(24 * var(--u))}
#hud #sound img,#hud #chatOpen img{width:100%;height:100%;object-fit:contain;display:block}
#hud #chatUp{position:absolute;right:calc(3 * var(--u));top:calc(2 * var(--u));width:calc(13 * var(--u));height:calc(13 * var(--u));padding:0;border:0;background:none;box-shadow:none;pointer-events:auto}
#hud #chatUp img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .2s}
#hud #chatLines{display:block;position:absolute;left:calc(30 * var(--u));right:calc(17 * var(--u));top:calc(4 * var(--u));height:calc(38 * var(--u));overflow:hidden;line-height:calc(12.5 * var(--u));font-size:calc(9.5 * var(--u))}
#hud #chatLines>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f2f5f7;text-shadow:0 1px 1px #000f;font-size:calc(9.5 * var(--u));line-height:calc(12.5 * var(--u))}
#hud #chatLines b{color:#ffe08a;font-weight:600}
#hud #chatLines{pointer-events:auto;cursor:pointer}
#hud .chip{display:inline-block;height:calc(11 * var(--u));margin:0 calc(3 * var(--u)) 0 0;padding:0 calc(3 * var(--u));border-radius:calc(1.5 * var(--u));background:#3aa65a;font-size:calc(9 * var(--u));font-weight:600;line-height:calc(11.5 * var(--u));color:#fff;text-shadow:none}
#hud .ch-whisper .chip{background:#d6568f}#hud .ch-sect .chip{background:#1fa57a}#hud .ch-guild .chip{background:#e9862b}#hud .ch-party .chip{background:#3a86d6}#hud .ch-map .chip{background:#7a6ad6}
#hud .ch-sys .chip{background:url('ui/hud/the_vang.png') center/100% 100% no-repeat;color:#3a2a00}

/* góc trái dưới */
#hud .status-line{position:fixed;left:calc(4 * var(--u));bottom:calc(2 * var(--u));display:flex;align-items:center;gap:calc(6 * var(--u));font:500 calc(8.5 * var(--u))/1 'Segoe UI',Arial,sans-serif;color:#f2f5f7;text-shadow:0 1px 1px #000f;pointer-events:none}
#hud .sig{display:inline-flex;align-items:flex-end;gap:calc(1.2 * var(--u));height:calc(8 * var(--u));margin-left:calc(2 * var(--u));vertical-align:bottom}
#hud .sig b{display:block;width:calc(2.5 * var(--u));background:#6fe08a}
#hud .sig b:nth-child(1){height:calc(3 * var(--u))}#hud .sig b:nth-child(2){height:calc(5 * var(--u))}#hud .sig b:nth-child(3){height:calc(7 * var(--u))}#hud .sig b:nth-child(4){height:calc(8 * var(--u))}
#hud .sig b.tat{background:#6b7680}
#hud .batt{display:inline-block;width:calc(18 * var(--u));height:calc(8 * var(--u));padding:1px;border:1px solid #dfe8ee;border-radius:calc(1.5 * var(--u))}
#hud .batt[hidden]{display:none}
#hud .batt b{display:block;height:100%;width:72%;background:#6fe08a}

/* cần đi: núm sẫm như 2.0 */
#hud #joystick>div{background:url('ui/hud/nut_lam.png') center/84% 84% no-repeat;box-shadow:none}

/* cụm chiêu: hình tròn, chữ, thuốc */
#hud .skillbar button:not([data-skill=attack]) span{display:none}
#hud .skillbar [data-skill=attack]{background:radial-gradient(circle closest-side,#1a0c06c8 0 80%,transparent 82%),url('ui/hud/nut_nau.png') center/82% 82% no-repeat}
#hud .skillbar [data-skill=attack] .art{display:none}
#hud .skillbar [data-skill=attack] span{top:50%;bottom:auto;transform:translateY(-50%);font:700 calc(12.5 * var(--u))/1 'Segoe UI',Arial,sans-serif;color:#e8c892;text-shadow:0 1px 2px #000}
#hud .skillbar [data-skill=attack] kbd{display:none}
#hud .skillbar [data-skill=ult]{--rx:62.5;--by:167.9;--d:54}
#hud .skillbar .pot{--by:217.85;--d:37.8}
#hud .skillbar #potion{--rx:65.2}#hud .skillbar #potMp{--rx:108.4}#hud .skillbar #potTk{--rx:22}
#hud .skillbar .pot .art{left:17%;top:17%;width:66%;height:66%;border-radius:0;object-fit:contain}
#hud .skillbar .pot .so{position:absolute;right:calc(-1 * var(--u));bottom:calc(-3 * var(--u));z-index:4;font:700 calc(9 * var(--u))/1 'Segoe UI',Arial,sans-serif;color:#fff;text-shadow:0 1px 1px #000,0 0 2px #000}
#hud .skillbar .pot.het .art{filter:grayscale(.85) brightness(.65)}
#hud .tu-bar #gather,#hud #gather .art{border-radius:50%}
#hud .tu-bar #dodgeButton{--rx:238;--by:54.5;--d:37.8;background:url('ui/hud/nut_lam.png') center/84% 84% no-repeat}
#hud .tu-bar #swapButton{--rx:27;--by:22;--d:30;background:url('ui/hud/nut_lam.png') center/84% 84% no-repeat}
#hud .tu-bar #flyButton,#hud .tu-bar #rideButton{background:url('ui/hud/nut_lam.png') center/84% 84% no-repeat}
#hud .tu-bar #dodgeButton img:not(.ring),#hud .tu-bar #swapButton img:not(.ring),#hud .tu-bar #flyButton img:not(.ring):not(.khoa){left:21%;top:21%;width:58%;height:58%;border-radius:0;object-fit:contain}
#hud .tu-bar button i.cd{position:absolute;inset:12%;border-radius:50%;display:grid;place-items:center;z-index:4;font:600 calc(9 * var(--u))/1 'Segoe UI',Arial,sans-serif;font-style:normal;color:#fff;background:#001324bb;pointer-events:none}
#hud .tu-bar button i.cd:empty{display:none}
#hud .tu-bar img.khoa{display:none;left:26%;top:26%;width:48%;height:48%;border-radius:0;object-fit:contain;z-index:4}
#hud .tu-bar button.khoa img.khoa{display:block}
#hud .tu-bar button.khoa img:not(.ring):not(.khoa){filter:grayscale(1) brightness(.55)}
#hud .tu-bar #tribButton.chua{box-shadow:none}
#hud .tu-bar button span:not(.treo-lbl):not(.nham-lbl){font-size:calc(8 * var(--u));color:#f6e6bd;text-shadow:0 1px 1px #000,0 0 2px #000}
#hud .tu-bar #tribButton.chua img:not(.ring){filter:grayscale(.5) brightness(.8)}

/* bảng Chức Năng (nút Menu) */
.chuc-nang{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;padding:14px}
.chuc-nang .cn-tien{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px;margin:0;color:#e4d3af;font-size:13px}
.chuc-nang .cn-tien img{width:18px;height:18px;vertical-align:-4px;object-fit:contain}
.chuc-nang .cn-tien b{color:#ffd451}
.chuc-nang .cn-o{display:flex;align-items:center;gap:10px;min-height:58px;padding:7px 10px;text-align:left;background:linear-gradient(#2c1c0f,#1a0f07);border:1px solid #67461d;border-radius:4px;color:#efe3c4}
.chuc-nang .cn-o:hover{border-color:#d6ad56;filter:brightness(1.12)}
.chuc-nang .cn-o img{flex:none;width:40px;height:40px;object-fit:contain}
.chuc-nang .cn-o b{display:block;font-size:14px;color:#ffe9a8}
.chuc-nang .cn-o small{display:block;font-size:11px;color:#bba77d}
/* khung chat chính: đo theo bản 2.0 ở 844×390, hộp 504×374 giữa màn hình */
#chatWin{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:#02030599;pointer-events:auto}
#chatWin[hidden]{display:none}
#hud .chat-hop{position:relative;width:calc(504 * var(--u));height:calc(374 * var(--u));padding:calc(14 * var(--u));display:flex;flex-direction:column}
#hud .chat-hop::before{content:'';position:absolute;inset:calc(2 * var(--u));background:#140a05fa}
#hud .chat-hop>*{position:relative}
#hud .chat-vien{position:absolute;inset:0;border:calc(32 * var(--u)) solid transparent;border-image:url('ui/hud/khung_chat.png') 285 / calc(32 * var(--u)) stretch;pointer-events:none}
#hud .chat-dau{flex:none;height:calc(29 * var(--u));display:flex;align-items:center;padding:0 calc(14 * var(--u)) 0 calc(24 * var(--u));background:url('ui/hud/tieu_de.png') center/100% 100% no-repeat}
#hud .chat-dau b{font:700 calc(15 * var(--u))/1 'Noto Serif','Times New Roman',serif;letter-spacing:calc(1 * var(--u));color:#ffe9a8;text-shadow:0 1px 2px #000}
#hud #chatDon{margin-left:auto;margin-right:calc(26 * var(--u));height:calc(20 * var(--u));padding:0 calc(7 * var(--u));display:flex;align-items:center;gap:calc(3 * var(--u));background:url('ui/hud/nut_nho.png') center/100% 100% no-repeat;border:0;box-shadow:none;font-size:calc(10.5 * var(--u));color:#f0dfb8}
#hud #chatDon img{width:calc(12 * var(--u));height:calc(12 * var(--u))}
#hud #chatTat{position:absolute;right:calc(24 * var(--u));top:calc(9 * var(--u));width:calc(25 * var(--u));height:calc(25 * var(--u));padding:0;background:none;border:0;box-shadow:none}
#hud #chatTat img{width:100%;height:100%;display:block}
#hud .chat-the{flex:none;height:calc(33 * var(--u));display:flex;gap:calc(3 * var(--u));padding:calc(5 * var(--u)) calc(6 * var(--u));background:#0f0804;border-bottom:1px solid #78350f}
#hud .chat-the .the{position:relative;flex:1 1 0;min-width:0;padding:0;background:url('ui/hud/the_tat.png') center/100% 100% no-repeat;border:0;box-shadow:none;font-size:calc(11 * var(--u));font-weight:700;color:#b9a88a;white-space:nowrap}
#hud .chat-the .the.on{background-image:url('ui/hud/the_on.png');color:#ffe9a8;text-shadow:0 1px 1px #000}
#hud .co-moi::after{content:'';position:absolute;right:0;top:0;width:calc(9 * var(--u));height:calc(9 * var(--u));background:url('ui/hud/cham_moi.png') center/100% 100% no-repeat}
#hud .chat-su{flex:1 1 0;min-height:0;overflow-y:auto;padding:calc(8 * var(--u)) calc(10 * var(--u));background:#0a0502;font-size:max(10px,calc(11.5 * var(--u)));line-height:1.6;color:#e8dcc4;pointer-events:auto;scrollbar-width:thin;scrollbar-color:#78350f transparent}
#hud .dong{margin-bottom:calc(3 * var(--u));word-break:break-word;text-shadow:0 1px 2px #000}
#hud .dong time{margin-right:calc(3 * var(--u));font-size:.82em;color:#9aa4ae}
#hud .dong .tag{margin-right:calc(3 * var(--u));font-weight:700}
#hud .dong .ten{font-weight:700;color:#ffe08a;cursor:pointer}
#hud .dong .vat{padding:0 calc(3 * var(--u));border:1px solid #34d39988;border-radius:calc(2 * var(--u));background:#06281a;color:#86efac}
#hud .k-all,#hud .k-sys .tag{color:#facc15}#hud .k-whisper .tag,#hud #chatKenh.k-whisper{color:#f472b6}#hud .k-party .tag,#hud #chatKenh.k-party{color:#22d3ee}#hud .k-sect .tag,#hud #chatKenh.k-sect{color:#34d399}#hud .k-guild .tag,#hud #chatKenh.k-guild{color:#fb923c}#hud .k-map .tag,#hud #chatKenh.k-map{color:#c084fc}#hud .k-world .tag,#hud #chatKenh.k-world{color:#38bdf8}
#hud #chatForm{flex:none;height:calc(37 * var(--u));margin:0;display:flex;align-items:center;gap:calc(3 * var(--u));padding:0 calc(19 * var(--u));background:#0f0804;border-top:1px solid #78350f}
#hud #chatKenh{flex:none;height:calc(20 * var(--u));padding:0 calc(7 * var(--u));display:grid;place-items:center;background:url('ui/hud/o_kenh.png') center/100% 100% no-repeat;font-size:calc(10.5 * var(--u));font-weight:700;white-space:nowrap;user-select:none}
#hud #chatInput{flex:1;min-width:0;width:auto;height:calc(24 * var(--u));padding:0 calc(8 * var(--u));background:url('ui/hud/o_nhap.png') center/100% 100% no-repeat;border:0;box-shadow:none;font-size:max(10px,calc(11 * var(--u)));color:#f2e7cf}
#hud #chatInput::placeholder{color:#8f8064}
#hud #chatForm button{flex:none;height:calc(25 * var(--u));padding:0 calc(6 * var(--u));display:flex;align-items:center;gap:calc(3 * var(--u));background:url('ui/hud/nut_nho.png') center/100% 100% no-repeat;border:0;box-shadow:none;font-size:calc(10.5 * var(--u));color:#f0dfb8;white-space:nowrap}
#hud #chatForm button img{width:calc(14 * var(--u));height:calc(14 * var(--u))}
#hud #chatForm #chatGui{padding:0 calc(9 * var(--u));background-image:url('ui/hud/nut_gui.png');font-size:calc(11.5 * var(--u));font-weight:700;color:#3a1c00}
#hud #chatNoi{position:absolute;right:calc(26 * var(--u));bottom:calc(58 * var(--u));width:calc(216 * var(--u));max-height:calc(150 * var(--u));overflow-y:auto;padding:calc(9 * var(--u));display:flex;flex-wrap:wrap;gap:calc(4 * var(--u));background:url('ui/hud/o_noi.png') center/100% 100% no-repeat;pointer-events:auto;z-index:2}
#hud #chatNoi[hidden]{display:none}
#hud #chatNoi button{padding:calc(2 * var(--u)) calc(4 * var(--u));background:none;border:0;box-shadow:none;font-size:calc(10.5 * var(--u));color:#86efac}
#hud #chatNoi.noi-cam button{width:calc(44 * var(--u));font-size:calc(17 * var(--u));line-height:1.2}
#hud #chatNoi i{color:#b9a88a;font-size:calc(10.5 * var(--u))}