/* ====================================================================
 * VÕ LÂM TRUYỀN KỲ - SƠN HÀ XÃ TẮC (CLASSIC RETRO PC HUD STYLESHEET)
 * Thiết kế giao diện nổi khối kim loại, viền đồng đúc dập nổi chuẩn VLTK 2005
 * ==================================================================== */

/* 1. THANH PHÍM TẮT & KỸ NĂNG DƯỚI (PAD / QUICK SLOTS) */
#pad {
  background: radial-gradient(circle at 50% 50%, #201a14 0%, #0d0a07 100%) !important;
  border: 2px solid #5a4828 !important;
  border-radius: 4px !important;
  box-shadow: 
    inset 0 0 0 1px #9c8242,
    inset 0 0 8px rgba(0,0,0,0.9),
    0 4px 12px rgba(0,0,0,0.85) !important;
  padding: 4px 6px !important;
}

#pad .hb + .hb {
  border-left: 2px groove #5a4828 !important;
  box-shadow: -1px 0 0 #110e0a !important;
  padding-left: 6px !important;
  margin-left: 6px !important;
}

#pad .pbtn {
  border: 1px solid #786237 !important;
  background: radial-gradient(circle at 35% 35%, #242424 0%, #080808 100%) !important;
  box-shadow: 
    inset 1px 1px 0 rgba(255,225,140,0.25),
    inset -1px -1px 0 rgba(0,0,0,0.8),
    0 1px 3px rgba(0,0,0,0.6) !important;
  transition: transform 0.08s ease, filter 0.08s ease !important;
}

#pad .pbtn:hover {
  border-color: #d8b868 !important;
  box-shadow: 
    inset 1px 1px 0 rgba(255,255,200,0.4),
    0 0 6px #d8b868aa !important;
}

#pad .pbtn:active {
  transform: translateY(1px) scale(0.97) !important;
  box-shadow: inset 1px 1px 3px #000 !important;
}

/* Ô chiêu thức chính (Main Skill Button) nổi bật hình bát giác/kim loại cổ */
#pad .pbtn.mn {
  border: 2px solid #b89848 !important;
  box-shadow: 
    inset 0 0 0 1px #332610,
    inset 0 0 6px rgba(255,215,100,0.35),
    0 0 8px rgba(216,184,104,0.45) !important;
  background: radial-gradient(circle at 40% 40%, #302615 0%, #0c0804 100%) !important;
}

/* 2. CỤM NÚT MENU TÍNH NĂNG ĐÁY MÀN HÌNH (#tabs) */
#tabs {
  background: linear-gradient(180deg, #2b251e 0%, #15120e 50%, #0b0907 100%) !important;
  border-top: 2px solid #70582d !important;
  box-shadow: 
    inset 0 1px 0 #9e844a,
    0 -3px 10px rgba(0,0,0,0.85) !important;
}

#tabs button {
  color: #c4b998 !important;
  text-shadow: 1px 1px 2px #000, -1px -1px 2px #000 !important;
  font-weight: 600 !important;
  position: relative !important;
  transition: all 0.15s ease !important;
}

#tabs button:hover {
  color: #fff2c4 !important;
}

#tabs button.on {
  color: #ffd768 !important;
  background: radial-gradient(ellipse at 50% 60%, rgba(130, 95, 30, 0.45) 0%, rgba(0,0,0,0) 75%) !important;
  text-shadow: 0 0 6px rgba(255,215,104,0.6), 1px 1px 2px #000 !important;
}

/* Hiệu ứng viền sáng nhẹ chân icon nút menu */
#tabs button.on::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #e2be68, transparent);
}

/* 3. NÚT TRÊN HEADER & THANH ĐIỀU KHIỂN CHIẾN ĐẤU (TOP CONTROLS & CHIPS) */
#topCtl .chip, 
#ctrlBtn, 
#rotBtn, 
#pkBtn,
.u20 .chip {
  background: linear-gradient(180deg, #2c251d 0%, #17130e 100%) !important;
  border: 1px solid #6b5329 !important;
  box-shadow: 
    inset 1px 1px 0 rgba(220,185,115,0.25),
    inset -1px -1px 0 rgba(0,0,0,0.6),
    0 2px 4px rgba(0,0,0,0.6) !important;
  color: #d9ccaa !important;
  border-radius: 3px !important;
  text-shadow: 1px 1px 1px #000 !important;
}

#topCtl .chip:hover,
#pkBtn:hover {
  border-color: #c9a656 !important;
  color: #fff !important;
  box-shadow: 0 0 5px rgba(201,166,86,0.5) !important;
}

/* Chế độ PK Đồ Sát / Hòa Bình */
#pkBtn.chip.red, #pkBtn[data-pk="1"] {
  border-color: #b83828 !important;
  background: linear-gradient(180deg, #481812 0%, #1c0604 100%) !important;
  color: #ff9d8f !important;
  box-shadow: 0 0 6px rgba(220,60,40,0.6) !important;
}

/* ==========================================================================
   4. THANH TRẠNG THÁI MÁU, MANA, EXP (HUD) - THU GỌN VÀ CĂN GIỮA MÀN HÌNH (CHUẨN JX2)
   ========================================================================== */
body:not(.u20) #hud {
  top: 44px !important;
}
body.u20 #hud {
  top: 2px !important;
}

body.u20 #hud,
#hud {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;      /* Căn chính giữa màn hình PC/Web */
  width: min(580px, calc(100vw - 360px)) !important; /* Thu gọn chiều ngang, không tràn sang Quick Menu */
  max-width: 600px !important;
  height: 28px !important;
  padding: 3px 10px !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, #2e261a 0%, #15110a 100%) !important;
  border: 1.5px solid #8c7440 !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;       /* Bo viền 2 góc dưới đậm chất Kiếm Hiệp */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.85), inset 0 1px 1px rgba(255, 215, 106, 0.25) !important;
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  z-index: 25 !important;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.85));
}

/* Các thanh bar bên trong (Máu đỏ, Mana xanh, EXP vàng) */
#hud .bar {
  flex: 1 1 0 !important;
  height: 14px !important;
  margin: 0 !important;
  border: 1px solid #584422 !important;
  box-shadow: inset 0 0 4px #000, 0 1px 2px rgba(0,0,0,0.8) !important;
  border-radius: 2px !important;
  position: relative !important;
  overflow: hidden !important;
}

#hud .bar span {
  font-size: 10px !important;
  line-height: 14px !important;
  font-weight: 700 !important;
  text-shadow: 0 0 3px #000, 0 0 2px #000 !important;
}

/* Ô Cấp và Ô Lực tay 2 đầu */
#hud .jxs {
  flex: none !important;
  height: 18px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  background: linear-gradient(180deg, #282017 0%, #110d09 100%) !important;
  border: 1px solid #5e4822 !important;
  border-radius: 3px !important;
  box-shadow: inset 1px 1px 0 rgba(200,165,95,0.2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

#hud .jxs b {
  color: #f7df9e !important;
  text-shadow: 0 0 3px #000 !important;
}

/* Nút Bảng Xếp Hạng nếu nằm trong thanh #hud */
#hud #u20rank,
#u20rank {
  flex: none !important;
  height: 18px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  line-height: 16px !important;
}

/* ====================================================================
 * 5. BỐ TRÍ LẠI GIAO DIỆN BẢN WEB (DESKTOP / LANDSCAPE):
 * - Đưa cụm Hòa Bình, Xoay Chiêu, Auto nằm sát mép trái ngay dưới ô Cấp độ (nhỏ gọn)
 * - Đưa khung Chế Độ: Luyện Công sang bên phải thanh kỹ năng #pad (nhỏ gọn)
 * ==================================================================== */

@media (min-width: 641px) {
  /* 5.1. Khung Chế Độ: Luyện Công (#modeSw) nằm sang BÊN PHẢI thanh kỹ năng #pad */
  body.u20 #modeSw,
  #modeSw {
    top: auto !important;
    bottom: 5px !important;
    left: calc(50% + 185px) !important; /* Đặt sát mép PHẢI của cụm kỹ năng #pad */
    right: auto !important;
    transform: none !important;
    z-index: 10 !important;
    height: 34px !important; /* Thu nhỏ chiều cao bằng ô kỹ năng */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  #modeSw #mswBtn {
    height: 30px !important;
    line-height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important; /* Chỉnh chữ nhỏ lại nhìn thanh thoát */
    font-weight: 600 !important;
    background: radial-gradient(circle at 40% 40%, #201a14 0%, #0d0a07 100%) !important;
    border: 1.5px solid #5a4828 !important;
    border-radius: 3px !important;
    box-shadow: 
      inset 0 0 0 1px #9c8242,
      inset 0 0 4px rgba(0,0,0,0.9),
      0 2px 6px rgba(0,0,0,0.8) !important;
    color: #e8dcb0 !important;
    text-shadow: 1px 1px 2px #000 !important;
    white-space: nowrap !important;
  }

  #modeSw #mswBtn b {
    color: #ffd768 !important;
  }

  #modeSw #mswMenu {
    bottom: 36px !important;
    background: #15110c !important;
    border: 1.5px solid #786237 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.9) !important;
  }

  #modeSw #mswMenu button {
    padding: 6px 12px !important;
    font-size: 11.5px !important;
    color: #d9ccaa !important;
  }

  #modeSw #mswMenu button:hover,
  #modeSw #mswMenu button.on {
    background: linear-gradient(90deg, #423014, #1f1609) !important;
    color: #ffe494 !important;
  }

  /* 5.2. Cụm nút Hòa Bình, Xoay Chiêu, Auto (#topCtl) nằm ngay dưới ô Cấp Độ của HUD */
  body.u20 #topCtl,
  #topCtl {
    top: 32px !important;                           /* Ngay bên dưới thanh HUD */
    bottom: auto !important;
    left: max(16px, calc(50% - 290px)) !important; /* Canh thẳng hàng mép trái của HUD đã căn giữa */
    right: auto !important;
    transform: none !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(14, 11, 8, 0.75) !important;
    padding: 2px 6px !important;
    border: 1px solid #5a4828 !important;
    border-radius: 3px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(2px) !important;
  }

  #topCtl .chip,
  #ctrlBtn,
  #rotBtn,
  #pkBtn {
    height: 20px !important; /* Thu nhỏ lại thanh mảnh */
    line-height: 18px !important;
    padding: 0 6px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    border-radius: 2px !important;
  }

  #topCtl .ck,
  #ctrlBtn .ck,
  #rotBtn .ck {
    width: 10px !important;
    height: 10px !important;
  }
  /* 5.3. Thu gọn thanh Thị Trấn (#townBar) trên PC / Màn hình ngang:
   * CHỈ HIỂN THỊ KHI ĐANG Ở TRONG THÀNH BIỆN KINH (body.intown / không có class .hidden).
   * Mặc định khi ra ngoài bãi quái dã ngoại: Luôn luôn ẩn triệt để (display: none !important).
   */
  #townBar.hidden,
  body.u20 #townBar.hidden,
  body.u20:not(.intown) #townBar,
  body:not(.intown) #townBar {
    display: none !important;
  }

  /* Kích thước gọn gàng trên Desktop khi vào thành */
  body.intown #townBar:not(.hidden),
  body.u20.intown #townBar:not(.hidden) {
    top: 72px !important;                                  /* Ngang hàng hoặc dưới HUD */
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: min(580px, calc(100vw - 360px)) !important;
    height: 22px !important;
    padding: 1px 6px !important;
    gap: 4px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: rgba(14, 11, 8, 0.85) !important;
    border: 1px solid #5a4828 !important;
    border-radius: 3px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 10 !important;
  }
  
  #townBar .btn,
  #townBar .btn.sm {
    height: 18px !important;
    line-height: 16px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }
  #townBar b {
    flex: none !important;
    margin-right: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ffd768 !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 2px #000 !important;
  }

  #townBar .btn,
  #townBar .btn.sm {
    height: 20px !important;
    line-height: 18px !important;
    padding: 0 6px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    border: 1px solid #5a4828 !important;
    border-radius: 2px !important;
    background: radial-gradient(circle at 40% 40%, #221c15 0%, #0c0906 100%) !important;
    color: #ded1ae !important;
    box-shadow: inset 0 0 0 1px rgba(156,130,66,0.3) !important;
    cursor: pointer !important;
    transition: filter 0.1s, border-color 0.1s !important;
  }

  #townBar .btn:hover,
  #townBar .btn.sm:hover {
    border-color: #ffd768 !important;
    color: #fff !important;
    box-shadow: 0 0 5px rgba(255, 215, 104, 0.4) !important;
  }

  #townBar .btn.on,
  #townBar .btn.sm.on {
    border-color: #ffd768 !important;
    color: #ffe494 !important;
    background: radial-gradient(circle at 40% 40%, #423014 0%, #1a1205 100%) !important;
  }
}


/* ====================================================================
 * 6. VIRTUAL JOYSTICK (TRỢ NĂNG JOYSTICK TRÊN MOBILE)
 * Nằm chính giữa bên trên thanh kỹ năng #pad, thiết kế mờ bán trong suốt
 * ==================================================================== */
#vliJoyPad {
  position: absolute;
  left: 50% !important;
  bottom: 52px !important; /* Nằm ngay chính giữa phía trên khung #pad */
  transform: translateX(-50%) !important;
  width: 180px; /* Tăng gấp đôi từ 90px lên 180px */
  height: 180px;
  z-index: 12;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

#vliJoyPad:hover,
#vliJoyPad.active {
  opacity: 0.85;
}

#vliJoyRing {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(20, 16, 12, 0.5) 0%, rgba(5, 5, 5, 0.7) 100%);
  border: 3px solid rgba(216, 184, 104, 0.45);
  box-shadow: 
    inset 0 0 16px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

#vliJoyRing::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 225, 140, 0.25);
}

#vliJoyThumb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px; /* Tăng gấp đôi từ 38px lên 76px */
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7a633a 0%, #302414 100%);
  border: 2.5px solid rgba(243, 216, 138, 0.8);
  box-shadow: 
    inset 2px 2px 4px rgba(255, 255, 255, 0.35),
    inset -2px -2px 6px rgba(0, 0, 0, 0.85),
    0 3px 10px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  will-change: transform;
}

/* Trên màn hình PC/Desktop Landscape: luôn ẩn Joystick */
@media (min-width: 900px) and (orientation: landscape) {
  #vliJoyPad {
    display: none !important;
  }
}

/* Khi mở 1 chức năng bất kỳ (modal hoặc tab chức năng khác tab log), tự động ẩn Joystick */
body:has(#modal:not(.hidden)) #vliJoyPad,
body.u20win #vliJoyPad,
body:not(.tablog) #vliJoyPad {
  display: none !important;
  pointer-events: none !important;
}


/* === ƯU TIÊN HIỂN THỊ DÒNG THÔNG BÁO HỆ THỐNG TRÊN NỀN BẠC MỜ === */
#u20lines .cl.sys,
#u20lines .cl.syl,
#u20lines .sys-highlight {
  position: relative;
  background: rgba(220, 230, 240, 0.16) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  border-left: 3px solid #ffd24a !important;
  border-radius: 3px !important;
  padding: 3px 7px !important;
  margin: 3px 0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
  color: #fff8e7 !important;
  text-shadow: 0 1px 2px #000, 0 0 1px #000 !important;
}

#u20lines .cl.sys i,
#u20lines .cl.syl i {
  color: #aed9f4 !important;
  font-weight: 600;
  margin-right: 4px;
}

#u20lines .sys-highlight a,
#u20lines .cl.sys a,
#u20lines .cl.syl a,
#u20lines .sys-highlight [onclick],
#u20lines .cl.syl [onclick] {
  color: #ffd24a !important;
  font-weight: bold;
}

/* === GIAO DIỆN KHUNG CHAT & THÔNG BÁO (CHUẨN VLTK / JX2) === */
#u20log {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Nền xám mờ chuẩn game, bo góc, viền vàng kim */
#u20lines {
  display: block !important;
  min-height: 180px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
  background: rgba(18, 20, 24, 0.82) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-left: 2px solid rgba(138, 116, 68, 0.7) !important;
  border-right: 2px solid rgba(138, 116, 68, 0.7) !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #e8dfc8 !important;
}

/* Từng dòng chat / thông báo */
#u20lines .cl {
  padding: 2px 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-shadow: 0 1px 2px #000 !important;
}
#u20lines .cl i {
  color: #f3d88a !important;
  font-style: normal !important;
  font-weight: 600 !important;
  margin-right: 4px !important;
}
#u20lines .cl b[data-pn] {
  color: #ff9900 !important;
  cursor: pointer !important;
  text-decoration: underline dotted !important;
}
#u20lines .cl small {
  color: #a8a08d !important;
}

/* Khi người chơi bấm ẩn (-) */
body.u20logoff #u20lines {
  display: none !important;
}

/* Thanh Tab Chat trên cùng khung */
#u20ct {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 3px 6px !important;
  background: linear-gradient(180deg, #2b2c28 0%, #151614 100%) !important;
  border: 2px solid rgba(138, 116, 68, 0.8) !important;
  border-bottom: 1px solid rgba(80, 70, 45, 0.9) !important;
  border-radius: 6px 6px 0 0 !important;
  user-select: none !important;
}

/* Nút Tab */
#u20ct button[data-lt] {
  position: relative !important;
  height: 24px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  border-radius: 4px 4px 0 0 !important;
  background: linear-gradient(180deg, #2a2d2c, #161918) !important;
  border: 1px solid #555b57 !important;
  border-bottom: none !important;
  color: #c9c3b2 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
}
#u20ct button[data-lt]:hover {
  filter: brightness(1.2) !important;
}
#u20ct button[data-lt].on {
  background: linear-gradient(180deg, #d4a742, #855c14) !important;
  border-color: #ffd66b !important;
  color: #1a1002 !important;
  box-shadow: 0 0 8px rgba(230, 185, 60, 0.6) !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

/* Nút ẩn/hiện [-] */
#u20hide {
  margin-left: auto !important;
  height: 22px !important;
  min-width: 24px !important;
  border-radius: 3px !important;
  background: #252826 !important;
  border: 1px solid #5a635e !important;
  color: #eedcb5 !important;
  font-size: 15px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
#u20hide:hover {
  background: #3c423e !important;
  color: #fff !important;
}

/* Ẩn hoàn toàn bộ đếm số người online */
#u20onl {
  display: none !important;
  visibility: hidden !important;
}

/* Khung nhập tin nhắn phía dưới */
#u20in {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 6px !important;
  background: #101211 !important;
  border: 2px solid rgba(138, 116, 68, 0.8) !important;
  border-top: 1px solid rgba(60, 50, 30, 0.8) !important;
  border-radius: 0 0 6px 6px !important;
}
#u20ch {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 2px solid #5a8ab8 !important;
  background: radial-gradient(circle, #2a527c 0%, #0d1e33 100%) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6) !important;
  transition: transform 0.15s, border-color 0.15s !important;
  user-select: none !important;
}
#u20ch:hover {
  transform: scale(1.08) !important;
}
/* Kênh Thế Giới */
#u20ch.world {
  border-color: #64b5f6 !important;
  background: radial-gradient(circle, #1976d2 0%, #0d47a1 100%) !important;
}
/* Kênh Lân Cận */
#u20ch.near {
  border-color: #4dd0e1 !important;
  background: radial-gradient(circle, #0097a7 0%, #006064 100%) !important;
}
/* Kênh Tổ Đội */
#u20ch.pt {
  border-color: #81c784 !important;
  background: radial-gradient(circle, #388e3c 0%, #1b5e20 100%) !important;
}
/* Kênh Bang Hội */
#u20ch.guild {
  border-color: #ffd54f !important;
  background: radial-gradient(circle, #f57f17 0%, #e65100 100%) !important;
}
#u20txt {
  flex: 1 !important;
  height: 26px !important;
  background: #171b1a !important;
  border: 1px solid #4a544f !important;
  border-radius: 3px !important;
  color: #fff !important;
  padding: 0 8px !important;
  font-size: 12px !important;
}
#u20txt:focus {
  outline: none !important;
  border-color: #ffd66b !important;
  box-shadow: 0 0 6px rgba(255, 214, 107, 0.4) !important;
}
#u20go {
  height: 26px !important;
  padding: 0 12px !important;
  background: linear-gradient(180deg, #3f4238, #20221c) !important;
  border: 1px solid #8c8263 !important;
  border-radius: 3px !important;
  color: #f7e6b7 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  cursor: pointer !important;
}
#u20go:hover {
  filter: brightness(1.2) !important;
}

/* === BẢO ĐẢM NÚT CHUYỂN KÊNH CHAT & TAB TỔ ĐỘI LUÔN HIỂN THỊ (GHI ĐÈ PTCLOSED) === */
#u20ch,
button#u20ch,
#u20in #u20ch,
body #u20in #u20ch,
html.ptclosed body #u20in #u20ch,
.ptclosed #u20ch {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#u20ct button[data-lt="party"],
body #u20ct button[data-lt="party"],
html.ptclosed body #u20ct button[data-lt="party"],
.ptclosed #u20ct [data-lt="party"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* === QUICK MENU (#u20r) BỐ CỤC 3 HÀNG NGANG & MỞ RỘNG KHUNG VIỀN === */
#u20r {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 5px !important;
  padding: 6px 8px !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
  background: rgba(14, 19, 16, 0.88) !important;
  border: 1.5px solid #7c6738 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 220, 130, 0.25) !important;
}

/* Trên màn hình dọc / điện thoại (Mobile), Quick Menu chỉ giữ Chợ / Tỉ Võ / Bang, xếp 1 hàng dọc rìa bên phải nằm dưới khung tên map */
/* ==========================================================================
   MOBILE & NARROW SCREEN RESPONSIVE LAYOUT (CHUẨN BỐ CỤC 3 TẦNG KHÔNG ĐÈ LẤN)
   ========================================================================== */
@media (max-width: 899px), (orientation: portrait) {

  /* --- TẦNG 1: TOP HEADER CHÍNH --- */
  #top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 42px !important;
    padding: 2px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(180deg, #25241f 0%, #121210 100%) !important;
    border-bottom: 1px solid #4a463a !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.8) !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
  }

  #top .lvbox {
    width: 34px !important;
    height: 34px !important;
    border: 1.5px solid #8c7440 !important;
    border-radius: 4px !important;
    flex: none !important;
  }

  #top .lvbox #lv {
    min-width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
    right: -4px !important;
    bottom: -4px !important;
  }

  #top .topmid {
    flex: 1 1 auto !important;
    margin: 0 6px !important;
    overflow: hidden !important;
  }

  #top .topmid .row {
    font-size: 11px !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
  }

  #top .gold {
    font-size: 11px !important;
    gap: 3px !important;
    flex: none !important;
  }

  #top button {
    width: 28px !important;
    height: 28px !important;
    line-height: 26px !important;
    font-size: 13px !important;
    flex: none !important;
    margin-left: 2px !important;
  }

  /* --- TẦNG 2: THANH TRẠNG THÁI MÁU, MANA, EXP (#hud) --- */
  body.u2m #hud,
  body.mob #hud,
  body:not(.u20) #hud,
  #hud {
    position: fixed !important;
    top: 44px !important;                                  /* Nằm ngay bên dưới Tầng 1 (#top) */
    left: 50% !important;
    transform: translateX(-50%) !important;               /* Căn giữa màn hình hoàn hảo */
    width: calc(100vw - 12px) !important;
    max-width: 540px !important;
    height: 24px !important;
    padding: 2px 6px !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    background: linear-gradient(180deg, #2a2217 0%, #110e09 100%) !important;
    border: 1px solid #7d683a !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.85) !important;
    z-index: 15 !important;
    display: flex !important;
    align-items: center !important;
    right: auto !important;
  }

  #hud .bar {
    flex: 1 1 0 !important;
    min-width: 24px !important;
    height: 12px !important;
    border-radius: 2px !important;
    border: 1px solid #584422 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #hud .bar span {
    font-size: 8.5px !important;
    line-height: 12px !important;
    font-weight: 600 !important;
    text-shadow: 0 0 2px #000, 0 0 2px #000 !important;
  }

  #hud .jxs {
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 9.5px !important;
    gap: 2px !important;
    border-radius: 2px !important;
    white-space: nowrap !important;
    background: linear-gradient(180deg, #282017 0%, #110d09 100%) !important;
    border: 1px solid #5e4822 !important;
  }

  #hud .jxs b {
    font-size: 9.5px !important;
    color: #ffd768 !important;
  }

  /* Ẩn nút Bảng xếp hạng trong #hud trên mobile để tối ưu diện tích */
  #hud #u20rank,
  #u20rank {
    display: none !important;
  }

  /* --- TẦNG 3: CỤM NÚT ĐIỀU KHIỂN CHIẾN ĐẤU & CHẾ ĐỘ --- */
  /* Cụm nút PK: Hòa bình, Xoay chiêu, Auto */
  body.u2m #topCtl,
  body.mob #topCtl,
  body:not(.u20) #topCtl,
  #topCtl {
    position: fixed !important;
    top: 72px !important;                                  /* Nằm ngay bên dưới Tầng 2 (#hud) */
    left: 8px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 3px !important;
    z-index: 14 !important;
    background: rgba(14, 11, 8, 0.85) !important;
    padding: 2px 4px !important;
    border: 1px solid #5a4828 !important;
    border-radius: 3px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.7) !important;
  }

  #topCtl .chip,
  #ctrlBtn,
  #rotBtn,
  #pkBtn {
    height: 18px !important;
    line-height: 16px !important;
    padding: 0 5px !important;
    font-size: 9.5px !important;
    border-radius: 2px !important;
    white-space: nowrap !important;
  }

  #topCtl .ck,
  #ctrlBtn .ck,
  #rotBtn .ck {
    width: 8px !important;
    height: 8px !important;
  }

  /* ==========================================================================
     DỜI CHẾ ĐỘ LUYỆN CÔNG (#modeSw) SANG GÓC TRÁI NẰM DƯỚI #topCtl
     ========================================================================== */
  body.u2m #modeSw,
  body.mob #modeSw,
  body:not(.u20) #modeSw,
  #modeSw {
    position: fixed !important;
    top: 96px !important;                                  /* Đặt ngay bên dưới cụm #topCtl (top: 72px + cao 20px) */
    left: 8px !important;                                  /* Thẳng hàng với mép trái cụm #topCtl */
    right: auto !important;
    bottom: auto !important;
    z-index: 14 !important;
    transform: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
  }

  body.u2m #modeSw #mswBtn,
  body.mob #modeSw #mswBtn,
  body:not(.u20) #modeSw #mswBtn,
  #modeSw #mswBtn {
    height: 20px !important;                               /* Kích thước đồng bộ với các nút #topCtl */
    line-height: 18px !important;
    padding: 0 6px !important;
    font-size: 9.5px !important;
    white-space: nowrap !important;
    border: 1px solid #6b5329 !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #2c251d 0%, #17130e 100%) !important;
    color: #d9ccaa !important;
    text-shadow: 1px 1px 1px #000 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.7) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  body.u2m #modeSw #mswBtn:hover,
  body.mob #modeSw #mswBtn:hover,
  #modeSw #mswBtn:hover {
    border-color: #c9a656 !important;
    color: #fff !important;
  }

  body.u2m #modeSw #mswBtn b,
  body.mob #modeSw #mswBtn b,
  #modeSw #mswBtn b {
    color: #ffd768 !important;
    margin-left: 2px !important;
  }

  /* Menu xổ chọn chế độ (Luyện công, Bắt Boss, Dã tẩu...) mở về bên phải */
  body.u2m #modeSw #mswMenu,
  body.mob #modeSw #mswMenu,
  #modeSw #mswMenu {
    top: 23px !important;
    bottom: auto !important;
    left: 0 !important;                                    /* Xổ thẳng hàng từ mép trái */
    right: auto !important;
    background: #15110c !important;
    border: 1.5px solid #786237 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.9) !important;
  }

  body.u2m #modeSw #mswMenu button,
  body.mob #modeSw #mswMenu button,
  #modeSw #mswMenu button {
    padding: 5px 10px !important;
    font-size: 10.5px !important;
    color: #d9ccaa !important;
    white-space: nowrap !important;
  }

  /* ==========================================================================
     THU GỌN THANH TIỆN ÍCH THỊ TRẤN (#townBar) TRÊN MOBILE
     ========================================================================== */
  /* 1. Mặc định ẩn triệt để khi có class .hidden hoặc không ở trong thành */
  #townBar.hidden,
  body:not(.intown) #townBar,
  body.u20:not(.intown) #townBar {
    display: none !important;
  }

  /* 2. Khi hiển thị trong thành: Thu nhỏ gọn gàng, nằm ở Tầng 4 (top: 98px) */
  body.intown #townBar:not(.hidden),
  body.u2m.intown #townBar:not(.hidden),
  body.mob.intown #townBar:not(.hidden),
  #townBar:not(.hidden) {
    position: fixed !important;
    top: 122px !important;                                 /* Dời xuống dưới tầng #modeSw */
    left: 50% !important;
    transform: translateX(-50%) !important;               /* Căn chính giữa màn hình */
    width: calc(100vw - 12px) !important;
    max-width: 540px !important;
    height: 24px !important;
    padding: 1px 4px !important;
    box-sizing: border-box !important;
    z-index: 13 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    background: linear-gradient(180deg, rgba(30, 24, 18, 0.95) 0%, rgba(14, 11, 8, 0.95) 100%) !important;
    border: 1px solid #7d683a !important;
    border-radius: 3px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.85) !important;
  }

  /* Tên thành/khu vực trong thanh (#townBar b) */
  #townBar b,
  #townBar #townName {
    flex: none !important;
    margin: 0 4px 0 2px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: #ffd768 !important;
    text-shadow: 1px 1px 1px #000 !important;
    white-space: nowrap !important;
  }

  /* Các nút bấm bên trong thanh tiện ích: Cửa hàng, KTC, Kho chung, Bán đồ, Về bãi */
  #townBar .btn,
  #townBar .btn.sm,
  #townBar button {
    flex: 1 1 0 !important;                               /* Trải đều chiều rộng vừa khít */
    min-width: 0 !important;
    height: 18px !important;
    line-height: 16px !important;
    padding: 0 2px !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border: 1px solid #5a4828 !important;
    border-radius: 2px !important;
    background: linear-gradient(180deg, #2a2218 0%, #15110c 100%) !important;
    color: #d9ccaa !important;
    text-shadow: 0 0 2px #000 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.6) !important;
    cursor: pointer !important;
    margin: 0 !important;
  }

  /* Hiệu ứng khi rê chuột / chạm nút */
  #townBar .btn:hover,
  #townBar .btn.sm:hover,
  #townBar button:hover {
    border-color: #ffd768 !important;
    color: #fff !important;
    background: linear-gradient(180deg, #3d301f 0%, #1c160e 100%) !important;
  }

  /* Nút Trở lại bãi / Đang bật */
  #townBar .btn.on,
  #townBar .btn.sm.on,
  #townBar #bBack {
    border-color: #bfa054 !important;
    color: #ffe494 !important;
    background: radial-gradient(circle at 50% 30%, #4a3818 0%, #1f1609 100%) !important;
    font-weight: 600 !important;
  }



  /* --- QUICK MENU TRÊN MOBILE (#u20r) --- */
  body.u2m #u20r,
  body.mob #u20r,
  body:not(.u20) #u20r,
  #u20r {
    top: 250px !important;
    right: 6px !important;
    left: auto !important;
    transform: none !important;
    z-index: 12 !important;
    padding: 6px 4px !important;
    border-radius: 12px !important;
    gap: 6px !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  body:has(#modal:not(.hidden)) #u20r,
  body.u20win #u20r,
  body:not(.tablog) #u20r {
    display: none !important;
  }

  body.u2m #u20gift, body.mob #u20gift, body:not(.u20) #u20gift,
  body.u2m #u20ktc, body.mob #u20ktc, body:not(.u20) #u20ktc,
  body.u2m #u20doc, body.mob #u20doc, body:not(.u20) #u20doc,
  body.u2m #u20ver, body.mob #u20ver, body:not(.u20) #u20ver {
    display: none !important;
  }

  body.u2m #u20mkt, body.mob #u20mkt, body:not(.u20) #u20mkt,
  body.u2m #u20tyvo, body.mob #u20tyvo, body:not(.u20) #u20tyvo,
  body.u2m #u20guild, body.mob #u20guild, body:not(.u20) #u20guild {
    display: inline-flex !important;
    margin: 0 !important;
  }

  body.u2m .u20r-row,
  body.mob .u20r-row,
  body:not(.u20) .u20r-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Khung hiển thị danh sách thành viên tổ đội nằm bên trái, nhỏ gọn và ngay ngắn */
  body.u2m #ptBox,
  body.mob #ptBox,
  body:not(.u20) #ptBox {
    top: 96px !important;
    left: 4px !important;
    transform: scale(0.65) !important;
    transform-origin: top left !important;
    z-index: 25 !important;
  }
}

/* Trên màn hình PC / Desktop Landscape (>= 900px) giữ nguyên đầy đủ 3 hàng ngang */
@media (min-width: 900px) and (orientation: landscape) {
  body.u20 #u20r {
    top: 4px !important;
    left: auto !important;
    z-index: 15 !important;
  }
}

.u20r-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;
}

/* === BANG HỘI MODAL STYLING & QUICK BUTTON === */
#u20guild {
  border-color: #ffd24a !important;
  background: radial-gradient(circle at 40% 30%, #7d5918 0%, #2f2005 85%) !important;
  color: #fff2a8 !important;
}
#u20guild:hover {
  box-shadow: 0 0 10px rgba(255, 210, 74, 0.7) !important;
}

.guild-modal-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #eee;
  font-family: inherit;
}
.guild-header, .my-guild-header {
  border-bottom: 1.5px solid #5a4828;
  padding-bottom: 8px;
}
.guild-header h3, .my-guild-title h3 {
  margin: 0;
  font-size: 18px;
  color: #ffd768;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.guild-sub {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: #a8a08d;
}
.guild-badge {
  background: linear-gradient(180deg, #d4a742, #855c14);
  color: #100b02;
  font-weight: 700;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 8px;
}
.guild-role-badge {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 4px;
  background: #333;
  color: #ccc;
  margin-left: 6px;
}
.guild-role-badge.leader {
  background: #a82e1e;
  color: #fff;
  font-weight: 700;
}
.my-guild-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
  font-size: 12.5px;
}
.guild-notice-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px dashed #786237;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
}
.notice-label {
  color: #ffd24a;
  font-weight: 700;
  white-space: nowrap;
}
.notice-txt {
  flex: 1;
  color: #eee;
  font-style: italic;
}

.guild-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 2px solid #5a4828;
  padding-bottom: 2px;
}
.guild-tab-btn {
  background: #1e1b16;
  border: 1px solid #5a4828;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  color: #c9c3b2;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.guild-tab-btn:hover {
  background: #2f281e;
  color: #fff;
}
.guild-tab-btn.active {
  background: linear-gradient(180deg, #d4a742, #855c14);
  color: #1a1002;
  border-color: #ffd66b;
  box-shadow: 0 0 8px rgba(230, 185, 60, 0.5);
}

.guild-rule-tip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(200, 160, 80, 0.1);
  border-left: 3px solid #ffd24a;
  padding: 6px 10px;
  font-size: 11.5px;
  border-radius: 2px;
}
.guild-rule-tip .my-lv {
  color: #ffd24a;
}

.guild-table-wrap {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid #4a3c22;
  border-radius: 4px;
  background: rgba(10, 8, 5, 0.7);
}
.guild-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}
.guild-table th {
  background: #1e1912;
  color: #ffd24a;
  padding: 8px 10px;
  font-weight: 700;
  border-bottom: 1px solid #5a4828;
  position: sticky;
  top: 0;
  z-index: 2;
}
.guild-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(90, 72, 40, 0.35);
}
.guild-table tr:hover {
  background: rgba(255, 215, 100, 0.08);
}
.guild-table tr.is-me {
  background: rgba(76, 216, 74, 0.12);
}
.g-name {
  color: #ffb834;
}
.g-mem.full {
  color: #ff5252;
  font-weight: 700;
}
.role-tag {
  font-size: 11.5px;
  font-weight: 600;
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
}
.role-tag.leader {
  color: #ffd24a;
  background: rgba(255, 210, 74, 0.15);
  border: 1px solid rgba(255, 210, 74, 0.4);
  font-weight: 700;
}
.role-tag.vice {
  color: #ff9944;
  background: rgba(255, 153, 68, 0.15);
  border: 1px solid rgba(255, 153, 68, 0.4);
  font-weight: 700;
}
.role-tag.elder {
  color: #be7aff;
  background: rgba(190, 122, 255, 0.15);
  border: 1px solid rgba(190, 122, 255, 0.4);
}
.role-tag.hall {
  color: #4dc3ff;
  background: rgba(77, 195, 255, 0.15);
  border: 1px solid rgba(77, 195, 255, 0.4);
}
.role-tag.elite {
  color: #5cf09b;
  background: rgba(92, 240, 155, 0.15);
  border: 1px solid rgba(92, 240, 155, 0.4);
}
.role-tag.member {
  color: #bbb;
}

.guild-create-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #5a4828;
  border-radius: 4px;
  padding: 12px 14px;
}
.guild-create-box h4 {
  margin: 0 0 10px;
  color: #ffd24a;
  font-size: 13.5px;
}
.create-req-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.create-req-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
}
.create-req-item.ok {
  border-left: 3px solid #4cd84a;
}
.create-req-item.bad {
  border-left: 3px solid #ff4444;
  color: #ff9999;
}
.create-req-item .icon {
  font-weight: bold;
}
.create-req-item.ok .icon { color: #4cd84a; }
.create-req-item.bad .icon { color: #ff4444; }
.ktc-link {
  color: #ffd24a;
  margin-left: auto;
  text-decoration: underline;
  cursor: pointer;
}

.create-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #ddd;
  margin-bottom: 6px;
}
.create-form .form-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.create-form input {
  flex: 1;
  height: 28px;
  background: #14120f;
  border: 1px solid #6b5530;
  border-radius: 3px;
  color: #fff;
  padding: 0 8px;
  font-size: 12px;
}
.create-form input:focus {
  outline: none;
  border-color: #ffd24a;
  box-shadow: 0 0 6px rgba(255, 210, 74, 0.5);
}

.guild-manage-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.guild-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #5a4828;
  border-radius: 4px;
  padding: 10px 12px;
}
.guild-card.danger {
  border-color: #8c281e;
}
.guild-card h4 {
  margin: 0 0 6px;
  color: #ffd24a;
  font-size: 13px;
}
.guild-card.danger h4 {
  color: #ff6b6b;
}
.donate-box {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}
.donate-box input {
  width: 180px;
  height: 28px;
  background: #14120f;
  border: 1px solid #6b5530;
  border-radius: 3px;
  color: #fff;
  padding: 0 8px;
  font-size: 12px;
}
.upgrade-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px;
  border-radius: 3px;
}

/* Modal Bổ Nhiệm Chức Vụ */
.guild-action-cell {
  display: flex;
  gap: 6px;
  align-items: center;
}
.guild-promote-modal {
  min-width: 320px;
  max-width: 480px;
}
.promote-header {
  border-bottom: 1px solid #5a4828;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.promote-header h3 {
  margin: 0;
  font-size: 14px;
  color: #ffd24a;
}
.promote-role-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.promote-role-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #4a3c22;
  border-radius: 4px;
  padding: 8px 10px;
  transition: all 0.15s;
}
.promote-role-item:hover:not(.disabled) {
  background: rgba(255, 210, 74, 0.08);
  border-color: #ffd24a;
}
.promote-role-item.selected {
  border-color: #ffd24a;
  background: rgba(255, 210, 74, 0.12);
}
.promote-role-item.disabled {
  opacity: 0.55;
}
.promote-role-item .role-icon {
  font-size: 20px;
  width: 28px;
  text-align: center;
}
.promote-role-item .role-info {
  flex: 1;
}
.promote-role-item .role-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.promote-role-item .role-name {
  font-weight: 700;
  font-size: 12.5px;
  color: #f0e6d2;
}
.promote-role-item .role-count {
  font-size: 11px;
  color: #aaa;
}
.promote-role-item .role-count.full {
  color: #ff5252;
}
.promote-role-item .role-current-tag {
  font-size: 10px;
  background: #3c7e3a;
  color: #fff;
  padding: 0 4px;
  border-radius: 2px;
}
.promote-role-item .role-desc {
  font-size: 11px;
  color: #8c8273;
  margin-top: 2px;
}
.promote-footer {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

/* Kỹ Năng Bang Hội (Guild Skills) */
.guild-skills-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guild-skills-header {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #5a4828;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12px;
}
.guild-skills-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
}
.guild-skill-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 15, 11, 0.85);
  border: 1px solid #4a3c22;
  border-radius: 4px;
  padding: 8px 12px;
  transition: all 0.15s;
}
.guild-skill-card:hover {
  border-color: #ffd24a;
  background: rgba(255, 210, 74, 0.05);
}
.guild-skill-card.maxed {
  border-color: #8c733e;
  background: rgba(255, 210, 74, 0.03);
}
.gskill-icon {
  font-size: 24px;
  width: 32px;
  text-align: center;
}
.gskill-body {
  flex: 1;
}
.gskill-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.gskill-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffd24a;
}
.gskill-level {
  font-size: 11px;
  color: #a8a08d;
}
.gskill-desc {
  font-size: 11.5px;
  color: #b5ac9a;
  margin-bottom: 4px;
}
.gskill-stat-row {
  font-size: 11.5px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.gskill-cost-row {
  font-size: 11px;
  color: #888;
  margin-top: 3px;
}
.gskill-act {
  display: flex;
  align-items: center;
}

/* Tiệm Bang Hội (Guild Shop) */
.guild-shop-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guild-shop-header {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #5a4828;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 12px;
}
.shop-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shop-user-wealth {
  display: flex;
  gap: 18px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 210, 74, 0.2);
}
.guild-shop-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
}
.guild-shop-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 15, 11, 0.85);
  border: 1px solid #4a3c22;
  border-radius: 4px;
  padding: 8px 12px;
  transition: all 0.15s;
}
.guild-shop-card:hover {
  border-color: #ffd24a;
  background: rgba(255, 210, 74, 0.05);
}
.guild-shop-card.locked {
  opacity: 0.65;
  filter: grayscale(0.5);
}
.gshop-icon-box {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #554425;
  border-radius: 4px;
}
.gshop-icon {
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
}
.gshop-owned {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: #2a2215;
  border: 1px solid #ffd24a;
  color: #ffd24a;
  font-size: 9px;
  padding: 0 3px;
  border-radius: 3px;
  line-height: 12px;
}
.gshop-body {
  flex: 1;
}
.gshop-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.gshop-name {
  font-size: 13px;
  font-weight: 700;
  color: #ffd24a;
}
.gshop-req-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid currentColor;
}
.gshop-req-badge.ok {
  color: #55ff55;
  border-color: rgba(85, 255, 85, 0.3);
  background: rgba(85, 255, 85, 0.1);
}
.gshop-req-badge.bad {
  color: #ff5a5a;
  border-color: rgba(255, 90, 90, 0.3);
  background: rgba(255, 90, 90, 0.1);
}
.gshop-desc {
  font-size: 11.5px;
  color: #b5ac9a;
  margin-bottom: 4px;
}
.gshop-price-row {
  font-size: 11.5px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.gshop-price-donate, .gshop-price-gold {
  font-weight: 600;
}
.gshop-act {
  display: flex;
  align-items: center;
}
/* Đặt nút ẩn khung chat (- / +) nằm ở bên trái */
#u20ct {
  display: flex !important;
  align-items: center !important;
}
#u20ct #u20hide {
  order: -1 !important;
  margin-left: 0 !important;
  margin-right: 4px !important;
}
body.u20logoff #u20ct #u20hide {
  margin-left: 0 !important;
}


/* Hi?u ?ng nh?p nh�y vi?n v�ng khi c� b?n c?p nh?t m?i */
#verBtn.has-update,
#u20ver.has-update {
  border-color: #ffd24a !important;
  background: radial-gradient(circle at 40% 35%, #7a5518, #2e1e05) !important;
  box-shadow: 0 0 10px #ffd24a, 0 0 16px rgba(255, 210, 74, 0.6) !important;
  animation: verPulse 1.4s infinite !important;
}

@keyframes verPulse {
  0%, 100% {
    box-shadow: 0 0 4px rgba(255, 210, 74, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 14px #ffe07a, 0 0 6px #fff;
    transform: scale(1.08);
  }
}