/* ====================================================================
 * 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 (HUD HP / MP BARS) */
#hud {
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.85));
}

#hud .bar {
  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;
}

#hud .jxs {
  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;
}

#hud .jxs b {
  color: #f7df9e !important;
  text-shadow: 0 0 3px #000 !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) dời lên trên nằm trong #topCtl bên phải xoay chiêu auto */
  body.u20 #modeSw,
  #topCtl #modeSw,
  #modeSw {
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    position: relative !important;
    z-index: 20 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  #modeSw #mswBtn {
    height: 20px !important;
    line-height: 18px !important;
    padding: 0 6px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    background: radial-gradient(circle at 40% 40%, #201a14 0%, #0d0a07 100%) !important;
    border: 1px solid #5a4828 !important;
    border-radius: 2px !important;
    box-shadow: 
      inset 0 0 0 1px #9c8242,
      0 1px 3px rgba(0,0,0,0.6) !important;
    color: #e8dcb0 !important;
    text-shadow: 1px 1px 2px #000 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }

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

  #modeSw #mswMenu {
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    margin-top: 3px !important;
    background: #15110c !important;
    border: 1.5px solid #786237 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.9) !important;
    border-radius: 3px !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 130px !important;
    z-index: 1000 !important;
  }

  #modeSw #mswMenu.hidden {
    display: none !important;
  }

  #modeSw #mswMenu button {
    padding: 5px 10px !important;
    font-size: 11px !important;
    color: #d9ccaa !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !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 sát ra ngoài bên dưới CẤP ĐỘ (Góc trái) */
  body.u20 #topCtl,
  #topCtl {
    top: 32px !important; /* Ngay bên dưới ô Cấp độ của thanh HUD */
    bottom: auto !important;
    left: 190px !important; /* Khớp thẳng hàng với lề trái của thanh HUD máu/cấp độ */
    right: auto !important;
    transform: none !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important; /* Khoảng cách gọn gàng */
    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,
  #townBar.hidden,
  body.u20 #townBar.hidden,
  body.u20:not(.intown) #townBar,
  body:not(.intown) #townBar {
    display: none !important;
  }

  body.intown #townBar:not(.hidden),
  body.u20.intown #townBar:not(.hidden) {
    top: 32px !important;
    bottom: auto !important;
    left: 450px !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100vw - 460px) !important;
    height: 26px !important;
    padding: 2px 8px !important;
    gap: 4px !important;
    display: flex !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 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(16, 36, 44, 0.55) 0%, rgba(6, 13, 16, 0.78) 100%);
  border: 2.5px solid rgba(73, 116, 129, 0.65);
  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(110, 192, 206, 0.28);
}

#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%, #24505e 0%, #0b191f 100%);
  border: 2px solid rgba(110, 192, 206, 0.75);
  box-shadow: 
    inset 2px 2px 4px rgba(180, 235, 245, 0.25),
    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 {
  pointer-events: auto !important;
  z-index: 10 !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,
body.u20logoff #u20in,
body.u20.u20logoff #u20in,
body.u2m.u20logoff #u20in {
  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,
body.u20 #u20in,
body.u2m #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 NẰM CHUẨN GÓC TRÊN BÊN PHẢI CẠNH BẢN ĐỒ === */
#u20r {
  position: fixed !important;
  top: 4px !important;
  left: auto !important;
  right: 160px;
  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;
  z-index: 15 !important;
  pointer-events: auto !important;
}

/* === OLD QUICK MENU RULES === */
#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 */
@media (max-width: 899px), (orientation: portrait) {
  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;
  }

  /* Khi mở 1 chức năng bất kỳ (modal hoặc tab chức năng khác tab log), ẩn hoàn toàn Quick Menu */
  body:has(#modal:not(.hidden)) #u20r,
  body.u20win #u20r,
  body:not(.tablog) #u20r {
    display: none !important;
  }

  /* Ẩn các nút khác trên Mobile theo yêu cầu: Phần thưởng, Kỳ Trân Các, Tài liệu, Cập nhật */
  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;
  }

  /* Chỉ giữ lại Chợ, Tỷ Võ, Bang và hiển thị thành cột dọc */
  body.u2m #u20mkt,
  body.mob #u20mkt,
  body:not(.u20) #u20mkt,
  body.u2m #u20tyvo,
  body.mob #u20tyvo,
  body:not(.u20) #u20tyvo,
  body.u2m #u20act,
  body.mob #u20act,
  body:not(.u20) #u20act,
  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;
  }

  /* Di chuyển khung Chế độ Luyện Công (#modeSw) lên nằm ngay BÊN TRÁI khung Hòa Bình (#topCtl) trên mobile */
  body.u2m #modeSw,
  body.mob #modeSw,
  body:not(.u20) #modeSw {
    top: 26px !important;
    right: 332px !important; /* Đặt cách mép trái nút Hòa bình một khoảng vừa vặn */
    left: auto !important;
    bottom: auto !important;
    position: absolute !important;
    z-index: 10 !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 {
    height: 20px !important; /* Khớp đúng chiều cao 20px với nút Hòa Bình */
    line-height: 18px !important;
    padding: 0 6px !important;
    font-size: 10.5px !important;
    white-space: nowrap !important;
    border: 1px solid #3c5f68 !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #16303a 0%, #0b161b 100%) !important;
    color: #d9e6eb !important;
    text-shadow: 1px 1px 1px #000 !important;
    box-shadow: inset 1px 1px 0 rgba(120,200,220,0.2), inset -1px -1px 0 rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.6) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  body.u2m #modeSw #mswBtn:hover,
  body.mob #modeSw #mswBtn:hover,
  body:not(.u20) #modeSw #mswBtn:hover {
    border-color: #6ec0ce !important;
    color: #fff !important;
    box-shadow: 0 0 5px rgba(110,192,206,0.45) !important;
  }

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

  body.u2m #modeSw #mswMenu,
  body.mob #modeSw #mswMenu,
  body:not(.u20) #modeSw #mswMenu {
    top: 24px !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    background: #091316 !important;
    border: 1.5px solid #3c5f68 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.9) !important;
  }

  body.u2m #modeSw #mswMenu button,
  body.mob #modeSw #mswMenu button,
  body:not(.u20) #modeSw #mswMenu button {
    padding: 5px 10px !important;
    font-size: 11px !important;
    color: #d9e6eb !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;
}
.gshop-buy-btn {
  min-width: 65px;
}



/* === BAT MACH CHAN KINH GLOBAL UI THEME OVERRIDES === */
/* 1. Khung Popup, Hop thoai, Cua so noi, Banner & Khung Hoat Dong */
.mbox,
body.u20 #modal .mbox,
body.u2m #modal .mbox,
#modal.item-preview-modal .mbox,
.mbox:has(.rtk-lobby),
#panel,
body.u20 #panel,
body.u2m #panel,
#u20zl,
#chatBox.open,
#skPick,
#ptInv,
#tip.vp-item-tip:has(.tip-item-pane) {
  background-color: #091316 !important;
  background-image: radial-gradient(at 35% 45%, #1c414a55, #0000 55%), linear-gradient(135deg, #102027, #080e11 76%) !important;
  border: 1px solid #3c5f68 !important;
  outline: 1px solid #04090b !important;
  box-shadow: inset 0 0 0 1px #142a33, inset 0 0 24px #0005, 0 10px 30px #000d !important;
  color: #e7dec4 !important;
}

/* 2. Thanh Phim Tat & Ky Nang Duoi (#pad) */
#pad {
  background: linear-gradient(180deg, #142a33 0%, #091317 100%) !important;
  border: 1.5px solid #3c5f68 !important;
  box-shadow: inset 0 0 0 1px #1a3944, inset 0 0 8px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.85) !important;
}
#pad .hb + .hb {
  border-left: 2px groove #34515a !important;
  box-shadow: -1px 0 0 #071014 !important;
}
#pad .pbtn {
  border: 1px solid #3b5a62 !important;
  background: radial-gradient(circle at 35% 35%, #142a34 0%, #071014 100%) !important;
  box-shadow: inset 1px 1px 0 rgba(164, 210, 220, 0.2), inset -1px -1px 0 rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}
#pad .pbtn:hover {
  border-color: #80b8c3 !important;
  box-shadow: inset 1px 1px 0 rgba(200, 240, 250, 0.35), 0 0 6px #6ec0ceaa !important;
}
#pad .pbtn.mn {
  border: 2px solid #e0bf68 !important;
  background: radial-gradient(circle at 40% 40%, #243840 0%, #091317 100%) !important;
  box-shadow: inset 0 0 0 1px #142a33, inset 0 0 6px rgba(237, 207, 121, 0.3), 0 0 8px rgba(224, 191, 104, 0.4) !important;
}

/* 3. Cum Nut Menu Day Man Hinh (#tabs & #u20menu) */
#tabs,
body.u2m #tabs {
  background: linear-gradient(180deg, #16303a 0%, #0d1d24 55%, #081115 100%) !important;
  border-top: 1.5px solid #3c5f68 !important;
  box-shadow: inset 0 1px 0 #57879466, 0 -3px 10px rgba(0, 0, 0, 0.85) !important;
}
#tabs button {
  color: #9ec0c5 !important;
}
#tabs button:hover {
  color: #eee3c5 !important;
}
#tabs button.on {
  color: #edcf79 !important;
  background: radial-gradient(ellipse at 50% 60%, rgba(28, 65, 74, 0.65) 0%, rgba(0, 0, 0, 0) 75%) !important;
}
#tabs button.on::after {
  background: linear-gradient(90deg, transparent, #6ec0ce, transparent) !important;
}
#u20menu {
  background: linear-gradient(180deg, #16303a, #0a151a) !important;
  border: 1px solid #3c5f68 !important;
  box-shadow: 0 0 0 1px #04090b, 0 -2px 10px #000b !important;
}

/* 4. Thanh Trang Thai HUD, Top Controls (#topCtl), Mode Switch (#modeSw), TownBar (#townBar) */
#hud,
body.u20 #hud,
#top {
  background: linear-gradient(180deg, #142b34 0%, #091419 100%) !important;
  border-color: #3c5f68 !important;
}
#hud .bar {
  border: 1px solid #34515a !important;
}
#hud .jxs {
  background: linear-gradient(180deg, #142a34 0%, #0a151a 100%) !important;
  border: 1px solid #3b5a62 !important;
  box-shadow: inset 1px 1px 0 rgba(164, 210, 220, 0.16) !important;
}
#hud .jxs b {
  color: #edcf79 !important;
}
body.u20 #topCtl,
#topCtl {
  background: rgba(9, 19, 22, 0.88) !important;
  border: 1px solid #3c5f68 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(164, 210, 220, 0.14) !important;
}
#topCtl .chip,
#ctrlBtn,
#rotBtn,
#pkBtn,
.u20 .chip,
#modeSw #mswBtn,
body.u2m #modeSw #mswBtn,
body.mob #modeSw #mswBtn,
body:not(.u20) #modeSw #mswBtn {
  background: linear-gradient(180deg, #16303a 0%, #0c1b21 100%) !important;
  border: 1px solid #497481 !important;
  box-shadow: inset 1px 1px 0 rgba(164, 210, 220, 0.18), 0 2px 4px rgba(0, 0, 0, 0.6) !important;
  color: #e7dec4 !important;
}
#topCtl .chip:hover,
#pkBtn:hover,
#modeSw #mswBtn:hover,
body.u2m #modeSw #mswBtn:hover {
  border-color: #80b8c3 !important;
  color: #fff6d8 !important;
  box-shadow: 0 0 6px rgba(110, 192, 206, 0.45) !important;
}
#ctrlBtn.on,
#rotBtn.on,
#topCtl .chip.on {
  background: linear-gradient(130deg, #51472b, #20333a) !important;
  border-color: #e0bf68 !important;
  color: #fff2b8 !important;
}
#modeSw #mswMenu,
body.u2m #modeSw #mswMenu,
body.mob #modeSw #mswMenu,
body:not(.u20) #modeSw #mswMenu {
  background: #091316 !important;
  border: 1px solid #3c5f68 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.9) !important;
}
#modeSw #mswMenu button {
  color: #bdcbd0 !important;
  background: linear-gradient(180deg, #102127, #0b1519) !important;
}
#modeSw #mswMenu button:hover,
#modeSw #mswMenu button.on {
  background: linear-gradient(130deg, #51472b, #20333a) !important;
  color: #fff2b8 !important;
}
body.intown #townBar:not(.hidden),
body.u20.intown #townBar:not(.hidden) {
  background: rgba(9, 19, 22, 0.92) !important;
  border: 1px solid #3c5f68 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}
#townBar .btn,
#townBar .btn.sm {
  border: 1px solid #497481 !important;
  background: linear-gradient(180deg, #16303a 0%, #0c1b21 100%) !important;
  color: #e7dec4 !important;
  box-shadow: inset 0 1px 0 rgba(164, 210, 220, 0.16) !important;
}
#townBar .btn.on,
#townBar .btn.sm.on {
  border-color: #e0bf68 !important;
  color: #fff2b8 !important;
  background: linear-gradient(130deg, #51472b, #20333a) !important;
}

/* Thu gọn và chống tràn thanh Thị Trấn trên Mobile dọc (body.u2m) */
body.u2m #townBar,
body:not(.u20) #townBar,
body.mob #townBar {
  left: 6px !important;
  right: auto !important;
  top: 64px !important;
  max-width: calc(100vw - 12px) !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 4px !important;
  padding: 3px 6px !important;
  align-items: center !important;
  scrollbar-width: none !important;
  z-index: 10 !important;
}

body.u2m #townBar::-webkit-scrollbar,
body:not(.u20) #townBar::-webkit-scrollbar,
body.mob #townBar::-webkit-scrollbar {
  display: none !important;
}

body.u2m #townBar b,
body:not(.u20) #townBar b,
body.mob #townBar b {
  white-space: nowrap !important;
  font-size: 11px !important;
  margin-right: 4px !important;
  flex: none !important;
}

body.u2m #townBar .btn,
body.u2m #townBar .btn.sm,
body:not(.u20) #townBar .btn,
body:not(.u20) #townBar .btn.sm,
body.mob #townBar .btn,
body.mob #townBar .btn.sm {
  white-space: nowrap !important;
  padding: 2px 6px !important;
  font-size: 10.5px !important;
  height: 22px !important;
  line-height: 20px !important;
  flex-shrink: 0 !important;
}

/* 5. Khung Chat & Nhat Ky (#u20log, #u20lines, #u20ct, #u20in) */
#u20lines {
  background: rgba(9, 19, 22, 0.84) !important;
  border-left: 1.5px solid rgba(60, 95, 104, 0.85) !important;
  border-right: 1.5px solid rgba(60, 95, 104, 0.85) !important;
  border-bottom: 1.5px solid rgba(60, 95, 104, 0.85) !important;
  color: #e7dec4 !important;
}
#u20lines .cl.sys,
#u20lines .cl.syl,
#u20lines .sys-highlight {
  background: rgba(20, 42, 52, 0.55) !important;
  border-left: 3px solid #6ec0ce !important;
  color: #eee3c5 !important;
}
#u20ct {
  background: linear-gradient(180deg, #16303a 0%, #0b161b 100%) !important;
  border: 1.5px solid #3c5f68 !important;
  border-bottom: 1px solid #28424b !important;
}
#u20ct button[data-lt] {
  background: linear-gradient(180deg, #142a34, #0b171c) !important;
  border: 1px solid #3b5a62 !important;
  color: #9ec0c5 !important;
}
#u20ct button[data-lt].on {
  background: linear-gradient(130deg, #5b4e2b, #243840) !important;
  border-color: #e0bf68 !important;
  color: #fff2b8 !important;
  box-shadow: 0 0 8px rgba(224, 191, 104, 0.45) !important;
  text-shadow: 0 1px 2px #000 !important;
}
#u20hide {
  background: linear-gradient(180deg, #18343f, #0f2027) !important;
  border: 1px solid #497481 !important;
  color: #e7dec4 !important;
}
#u20hide:hover {
  background: linear-gradient(180deg, #214654, #142b34) !important;
  border-color: #80b8c3 !important;
}

/* 6. Khung Hoat Dong Goc Phai Tren (#u20r & .u20rb) */
#u20r,
body.u20 #u20r,
body.u2m #u20r,
body.mob #u20r {
  background: linear-gradient(135deg, rgba(16, 33, 40, 0.94), rgba(8, 15, 19, 0.96)) !important;
  border: 1.5px solid #3c5f68 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(164, 210, 220, 0.18) !important;
}
.u20rb {
  background: radial-gradient(circle at 40% 30%, #1c3e49 0%, #0a171c 85%) !important;
  border: 1.5px solid #578794 !important;
  color: #e7dec4 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(164, 210, 220, 0.22) !important;
}
.u20rb:hover {
  border-color: #8ac8d4 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.9), 0 0 8px #6ec0ce66 !important;
}
#u20guild,
#u20vip,
.u20rb.has-update {
  border-color: #e0bf68 !important;
  background: radial-gradient(circle at 40% 30%, #51472b 0%, #1a2e36 85%) !important;
  color: #fff2b8 !important;
}

/* 7. Giao Dien Bang Hoi (.guild-*) */
.guild-header,
.my-guild-header,
.promote-header {
  border-bottom: 1px solid #34515a !important;
}
.guild-header h3,
.my-guild-title h3,
.promote-header h3 {
  color: #eee3c5 !important;
}
.guild-sub {
  color: #84c0c5 !important;
}
.guild-notice-bar {
  background: rgba(9, 19, 23, 0.75) !important;
  border: 1px dashed #497481 !important;
}
.guild-tabs {
  border-bottom: 1.5px solid #3b5a62 !important;
}
.guild-tab-btn {
  background: linear-gradient(180deg, #132830, #0b171c) !important;
  border: 1px solid #34515a !important;
  border-bottom: none !important;
  color: #9ec0c5 !important;
}
.guild-tab-btn:hover {
  background: linear-gradient(180deg, #1c3943, #112229) !important;
  color: #eee3c5 !important;
}
.guild-tab-btn.active {
  background: linear-gradient(130deg, #51472b, #20333a) !important;
  color: #fff2b8 !important;
  border-color: #e0bf68 !important;
  box-shadow: 0 0 8px rgba(224, 191, 104, 0.35) !important;
}
.guild-rule-tip {
  background: rgba(20, 42, 52, 0.55) !important;
  border-left: 3px solid #6ec0ce !important;
}
.guild-table-wrap,
.guild-create-box,
.guild-card,
.guild-skills-header,
.guild-shop-header {
  background: linear-gradient(180deg, #102127, #0b1519) !important;
  border: 1px solid #34515a !important;
}
.guild-table th {
  background: #0d1d24 !important;
  color: #edcf79 !important;
  border-bottom: 1px solid #3b5a62 !important;
}
.guild-table td {
  border-bottom: 1px solid rgba(52, 81, 90, 0.45) !important;
}
.guild-table tr:hover {
  background: rgba(110, 192, 206, 0.08) !important;
}
.guild-skill-card,
.guild-shop-card,
.promote-role-item {
  background: linear-gradient(145deg, #142a34, #101b23) !important;
  border: 1px solid #3b5a62 !important;
}
.guild-skill-card:hover,
.guild-shop-card:hover,
.promote-role-item:hover:not(.disabled) {
  border-color: #80b8c3 !important;
  background: linear-gradient(145deg, #1c3943, #15242c) !important;
}
.promote-role-item.selected,
.guild-skill-card.maxed {
  background: linear-gradient(130deg, #51472b, #20333a) !important;
  border-color: #e0bf68 !important;
}
.gshop-icon-box {
  background: #081115 !important;
  border: 1px solid #2e4b54 !important;
}
.create-form input,
.donate-box input {
  background: #081216 !important;
  border: 1px solid #3b5a62 !important;
  color: #e7dec4 !important;
}

/* ====================================================================
 * NÚT KHINH CÔNG (#bKhinhCong) NẰM BÊN PHẢI F4 TRONG CỤM NÚT CHIẾN ĐẤU
 * ==================================================================== */
#pad .pbtn.khinh-cong {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border-color: #6fb0c4 !important;
  background: radial-gradient(circle at 45% 30%, #1a3c48 0%, #071319 100%) !important;
  box-shadow: inset 1px 1px 0 rgba(160, 225, 245, 0.3), inset -1px -1px 0 rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  cursor: pointer !important;
}

#pad .pbtn.khinh-cong:hover {
  border-color: #a4e6f5 !important;
  box-shadow: inset 1px 1px 0 rgba(220, 250, 255, 0.5), 0 0 8px rgba(110, 200, 230, 0.6) !important;
}

#pad .pbtn.khinh-cong img.kc-icon {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  pointer-events: none !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)) !important;
}

#pad .pbtn.khinh-cong .charges {
  position: absolute !important;
  top: -8px !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  font-size: 8px !important;
  line-height: 1 !important;
  color: #7ee7ff !important;
  text-shadow: 0 0 2px #000, 0 0 4px #007799 !important;
  letter-spacing: -0.5px !important;
  pointer-events: none !important;
  font-weight: 900 !important;
}

#pad .pbtn.khinh-cong .timer {
  position: absolute !important;
  bottom: 1px !important;
  left: 0 !important;
  right: 0 !important;
  text-align: center !important;
  font-size: 8px !important;
  line-height: 1 !important;
  color: #e4f4fb !important;
  text-shadow: 0 0 2px #000, 0 1px 2px #000 !important;
  pointer-events: none !important;
  font-weight: 700 !important;
}

#pad .pbtn.khinh-cong .cd {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: conic-gradient(rgba(0,0,0,0.7) var(--p, 0%), transparent 0%) !important;
}

#pad .pbtn.khinh-cong:disabled {
  opacity: 0.6 !important;
  filter: grayscale(0.5) !important;
  cursor: not-allowed !important;
}

/* ==========================================================================
   THẦN MÃ CÁC - DIVINE HORSE SYSTEM & CODEX (CYAN/TEAL THEME)
   ========================================================================== */
.tm-intro {
  background: radial-gradient(at 15% 0, rgba(30, 80, 85, 0.4), transparent 60%), linear-gradient(135deg, #0e2025, #081216) !important;
  border: 1px solid #345c66 !important;
  border-radius: 10px !important;
  align-items: center;
  gap: 12px;
  margin: 4px 0 10px;
  padding: 12px;
  display: flex;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(164, 210, 220, 0.1) !important;
}
.tm-seal {
  background: radial-gradient(circle, #1a3c44, #0b171c 72%) !important;
  border: 1px solid #4a808c !important;
  border-radius: 50%;
  flex: 0 0 48px;
  place-items: center;
  height: 48px;
  font-size: 26px;
  display: grid;
  box-shadow: 0 0 16px rgba(78, 227, 193, 0.2) !important;
}
.tm-intro h3 {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
  color: #58e1d3 !important;
  font-size: 15px !important;
  text-shadow: 0 0 10px rgba(88, 225, 211, 0.4) !important;
}
.tm-intro p {
  color: #a4c2c7 !important;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}
.tm-progress, .tm-how, .tm-training {
  background: linear-gradient(180deg, #102127, #0b1519) !important;
  border: 1px solid #2b4952 !important;
  border-radius: 8px !important;
  margin: 8px 0;
  padding: 10px 12px;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(164, 210, 220, 0.08) !important;
}
.tm-progress > div:first-child {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  display: flex;
}
.tm-progress b, .tm-how b {
  color: #6ee7d8 !important;
  text-shadow: 0 0 6px rgba(110, 231, 216, 0.25);
}
.tm-progress small, .tm-how small {
  color: #8daab0 !important;
  font-size: 10px;
  line-height: 1.5;
  display: block;
}
.tm-xp {
  background: #061014 !important;
  border: 1px solid #26464f !important;
  border-radius: 8px !important;
  height: 8px;
  overflow: hidden;
  margin: 4px 0;
}
.tm-xp i {
  background: linear-gradient(90deg, #217870, #4ee3c1) !important;
  height: 100%;
  transition: width 0.25s;
  display: block;
  box-shadow: 0 0 10px rgba(78, 227, 193, 0.5) !important;
}
.tm-how {
  background: linear-gradient(135deg, #0f2127, #091418) !important;
  border-color: #2b4952 !important;
  gap: 4px;
  display: grid;
}
.tm-how span {
  font-size: 11px;
  line-height: 1.55;
  color: #d2e4e8 !important;
}
.tm-training {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}
.tm-training > div:first-child {
  flex: 1;
  min-width: 0;
}
.tm-training b, .tm-training small {
  display: block;
}
.tm-training b {
  color: #6ee7d8 !important;
  text-shadow: 0 0 6px rgba(110, 231, 216, 0.25);
}
.tm-training small {
  color: #8daab0 !important;
  margin-top: 4px;
  font-size: 10px;
}
.tm-training .tm-xp {
  margin-top: 6px;
}
.tm-training .btnrow {
  flex-wrap: nowrap;
}
.tm-catalog {
  padding-bottom: 8px;
}
.tm-tier-heading {
  background: linear-gradient(90deg, #152e38, #0d1e2588 68%, transparent) !important;
  border: 0 !important;
  border-left: 3px solid #58e1d3 !important;
  border-bottom: 1px solid rgba(172, 200, 211, 0.15) !important;
  color: #58e1d3 !important;
  padding: 4px 8px !important;
  margin: 14px 0 8px !important;
  text-shadow: 0 0 8px rgba(88, 225, 211, 0.3) !important;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.tm-tier-heading small {
  color: #8daab0 !important;
}
.tm-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}
.tm-card {
  background: linear-gradient(145deg, #0e1e24, #081317 78%) !important;
  border: 1px solid #26444d !important;
  border-radius: 9px !important;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  display: flex;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 3px 10px rgba(0, 0, 0, 0.4) !important;
}
.tm-card:hover {
  border-color: #4ee3c1 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 10px rgba(78, 227, 193, 0.2), inset 0 1px rgba(255, 255, 255, 0.08) !important;
}
.tm-card.tier-2 {
  border-color: #2e5963 !important;
}
.tm-card.tier-3 {
  background: linear-gradient(145deg, #122830, #081418 78%) !important;
  border-color: #3d717d !important;
}
.tm-card.tier-4 {
  background: radial-gradient(at 5% 0, rgba(46, 137, 148, 0.2), transparent 50%), linear-gradient(145deg, #132d36, #081418 78%) !important;
  border-color: #58b4c2 !important;
  box-shadow: inset 0 0 16px rgba(88, 180, 194, 0.12), 0 0 8px rgba(88, 180, 194, 0.1) !important;
}
.tm-card.owned {
  box-shadow: inset 0 0 0 1px rgba(78, 227, 193, 0.25), 0 0 12px rgba(78, 227, 193, 0.12) !important;
}
.tm-card.locked {
  opacity: 0.65;
}
.tm-card-top {
  align-items: center;
  gap: 9px;
  min-width: 0;
  display: flex;
}
.tm-portrait {
  color: #58e1d3 !important;
  background: radial-gradient(circle, #183842, #0a161b 72%) !important;
  border: 1px solid #355f69 !important;
  border-radius: 8px;
  flex: 0 0 54px;
  place-items: center;
  width: 54px;
  height: 54px;
  font-size: 25px;
  display: grid;
  overflow: hidden;
}
.tm-portrait img {
  object-fit: contain;
  width: 46px;
  height: 46px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.56));
}
.tm-card-title {
  gap: 3px;
  min-width: 0;
  display: grid;
}
.tm-card-title small {
  color: #72cfc4 !important;
  font-size: 9px;
}
.tm-card-title b {
  color: #e4f7f5 !important;
  font-size: 12px;
  line-height: 1.35;
}
.tm-card-title span {
  color: #8daab0 !important;
  font-size: 9px;
  line-height: 1.35;
}
.tm-effects {
  background: rgba(6, 16, 20, 0.85) !important;
  border: 1px solid #1c363e !important;
  border-radius: 6px;
  gap: 3px;
  padding: 6px 7px;
  display: grid;
}
.tm-effect {
  color: #bfe1dc !important;
  font-size: 9.5px;
  line-height: 1.4;
}
.tm-card-bottom {
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  display: flex;
}
.tm-card-bottom small {
  color: #8daab0 !important;
  font-size: 9.5px;
  line-height: 1.4;
}
.tm-card-bottom .btn {
  white-space: nowrap;
  flex: none;
}
@media (max-width: 620px) {
  .tm-grid {
    grid-template-columns: 1fr;
  }
  .tm-card {
    padding: 10px;
  }
  .tm-card-title b {
    font-size: 13px;
  }
}

/* Gợi ý cộng điểm - Chọn nhánh tiềm năng */
[data-attr-focus].btn.sm {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid #334155 !important;
  color: #94a3b8 !important;
  padding: 5px 12px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
}
[data-attr-focus].btn.sm:hover {
  border-color: #38bdf8 !important;
  color: #e0f2fe !important;
}
[data-attr-focus].btn.sm.on {
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.16) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35) !important;
  font-weight: 700 !important;
}

/* Gọn gàng các button thao tác nhân vật dưới khung búp bê (Danh Vị, Kinh Mạch, Danh Hiệu, Chuyển Sinh) */
.u2char .u2btns,
.u2char-actions {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 5px !important;
  margin: 6px auto 0 !important;
  width: 100% !important;
  max-width: 252px !important;
}

.u2char .u2btns .btn,
.u2char-actions .btn {
  height: 28px !important;
  line-height: 26px !important;
  padding: 0 6px !important;
  font-size: 11.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  text-align: center !important;
  background: linear-gradient(180deg, #1b2832 0%, #0d151c 100%) !important;
  border: 1px solid #334d5c !important;
  color: #c5dbe6 !important;
  transition: all 0.2s ease !important;
}

.u2char .u2btns .btn:hover,
.u2char-actions .btn:hover {
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.35) !important;
}

.u2char .u2btns .btn.on,
.u2char-actions .btn.on,
#bRealm.on {
  border-color: #38bdf8 !important;
  color: #e0f2fe !important;
  background: linear-gradient(180deg, #164e63 0%, #082f49 100%) !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4) !important;
}

/* ==========================================================================
 * UNIFIED TONE: ĐĂNG KÝ / ĐĂNG NHẬP / CHỌN NHÂN VẬT / TẠO NHÂN VẬT
 * Đồng bộ toàn diện theo tone màu gameplay chuẩn Bát Mạch Chân Kinh / JX PC
 * ========================================================================== */

/* 1. Modal Danh Sách Slot Nhân Vật (.slotlist & .slotrow) */
.slotlist {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 12px 0 !important;
}

.slotrow {
  display: grid !important;
  grid-template-columns: 44px 1fr auto auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  background-color: #0b171b !important;
  background-image: linear-gradient(135deg, #102027, #081014) !important;
  border: 1px solid #3c5f68 !important;
  box-shadow: inset 0 0 0 1px #142a33, 0 2px 6px rgba(0,0,0,0.6) !important;
  color: #e7dec4 !important;
  transition: all 0.2s ease !important;
}

.slotrow:hover {
  border-color: #80b8c3 !important;
  box-shadow: inset 0 0 0 1px #142a33, 0 0 10px rgba(110, 192, 206, 0.3) !important;
}

.slotrow.empty {
  grid-template-columns: 1fr auto auto !important;
  border-style: dashed !important;
  border-color: #34515a !important;
  opacity: 0.88 !important;
}

.slotrow.del {
  grid-template-columns: 1fr auto auto !important;
  border-color: #9e3d3d !important;
  background: linear-gradient(135deg, #2b1111, #130707) !important;
}

.slotrow img {
  width: 44px !important;
  height: 52px !important;
  object-fit: contain !important;
}

.slotrow b {
  font-size: 14.5px !important;
}

.slotrow small {
  display: block !important;
  color: #9ec0c5 !important;
  font-size: 11.5px !important;
  margin-top: 2px !important;
}

.slotrow .btn {
  background: linear-gradient(180deg, #16303a 0%, #0c1b21 100%) !important;
  border: 1px solid #497481 !important;
  color: #e7dec4 !important;
  box-shadow: inset 1px 1px 0 rgba(164, 210, 220, 0.18) !important;
}

.slotrow .btn:hover {
  border-color: #80b8c3 !important;
  color: #fff !important;
}

.slotrow .btn[data-play] {
  background: linear-gradient(135deg, #a57c2a 0%, #583d0c 100%) !important;
  border-color: #ffd875 !important;
  color: #fff8e2 !important;
  box-shadow: 0 0 10px rgba(255, 216, 117, 0.35) !important;
}

.slotrow .btn.red {
  background: linear-gradient(180deg, #521818 0%, #2b0c0c 100%) !important;
  border-color: #9e3d3d !important;
  color: #ffc4c4 !important;
}

/* 2. Đăng Ký / Đăng Nhập (.jx-login-card) */
.jx-login-card {
  background-color: #091316 !important;
  background-image: radial-gradient(at 35% 45%, #1c414a55, #0000 55%), linear-gradient(135deg, #102027, #080e11 76%), url('ui/login/thap_tam_mon_phai.webp') !important;
  border: 1px solid #3c5f68 !important;
  outline: 1px solid #04090b !important;
  box-shadow: inset 0 0 0 1px #142a33, inset 0 0 24px #0005, 0 10px 40px rgba(0,0,0,0.95), 0 0 20px rgba(60,95,104,0.3) !important;
  color: #e7dec4 !important;
}

.jx-login-card input {
  background: #081115 !important;
  border: 1px solid #34515a !important;
  color: #e7dec4 !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.85) !important;
}

.jx-login-card input:focus {
  border-color: #6ec0ce !important;
  box-shadow: 0 0 8px rgba(110,192,206,0.5) !important;
}

/* 3. Màn Hình Chọn Nhân Vật (#csel) */
#csel {
  color: #e7dec4 !important;
  background: radial-gradient(ellipse at 50% 50%, rgba(28,65,74,0.38) 0%, rgba(9,19,22,0.96) 85%),
              url('ui/chon_nv/nen_van_ngoc.webp') center/cover no-repeat #091316 !important;
}

#csel .cs-panel {
  background-color: #091316 !important;
  background-image: radial-gradient(at 35% 45%, #1c414a55, #0000 55%), linear-gradient(135deg, #102027, #080e11 76%) !important;
  border: 1px solid #3c5f68 !important;
  outline: 1px solid #04090b !important;
  box-shadow: inset 0 0 0 1px #142a33, inset 0 0 24px #0005, 0 8px 30px rgba(0,0,0,0.85) !important;
}

/* 4. Màn Hình Tạo Nhân Vật (#createCharScreen) */
#createCharScreen {
  color: #e7dec4 !important;
  background: radial-gradient(ellipse at 50% 50%, rgba(28,65,74,0.38) 0%, rgba(8,14,17,0.96) 85%),
              url('ui/v3/nen_tao_nv.webp') center/cover no-repeat #091316 !important;
}






/* ==========================================================================
   VLTK 1 CLASSIC CHARACTER POPUP LAYOUT (TRANG BỊ VÀ THUỘC TÍNH)
   ========================================================================== */

/* 1. MẶC ĐỊNH TRÊN PC / MÀN HÌNH NGANG (>= 641px): CHIA 2 CỘT SONG SONG */
@media (min-width: 641px) {
  .vltk-char-layout,
  .u2char {
    display: grid !important;
    grid-template-columns: 262px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }
}

/* 2. TRÊN MOBILE / MÀN HÌNH DỌC (body.u2m, body:not(.u20)) HOẶC <= 640px: 1 CỘT CUỘN DỌC ÊM ÁI */
body.u2m .vltk-char-layout,
body.u2m .u2char,
body:not(.u20) .vltk-char-layout,
body:not(.u20) .u2char {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px), (orientation: portrait) {
  .vltk-char-layout,
  .u2char {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

body.u2m .vltk-left-pane,
body:not(.u20) .vltk-left-pane,
@media (max-width: 640px) {
  .vltk-left-pane {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
}

body.u2m .vltk-right-pane,
body:not(.u20) .vltk-right-pane,
@media (max-width: 640px) {
  .vltk-right-pane {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
  }
}

body.u2m #t-char,
body:not(.u20) #t-char,
@media (max-width: 640px) {
  #t-char {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 28px !important;
  }
}

.vltk-left-pane {
  background: rgba(8, 16, 20, 0.6) !important;
  border: 1px solid #2a4752 !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.5) !important;
}

.vltk-char-hdr {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding-bottom: 5px !important;
  border-bottom: 1px solid #1e363e !important;
  margin-bottom: 5px !important;
}

.vltk-hdr-row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11px !important;
  color: #cfd8dc !important;
}

.vltk-av-row {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  margin-bottom: 5px !important;
  padding: 4px 6px !important;
  background: rgba(16, 32, 40, 0.6) !important;
  border: 1px solid #234752 !important;
  border-radius: 4px !important;
}

.vltk-av-frame {
  width: 50px !important;
  height: 50px !important;
  border: 1.5px solid #d9b65a !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: #000 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8) !important;
}

.vltk-av-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 8% !important;
  transform: scale(1.4) !important;
}

.vltk-av-bars {
  flex: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2px 8px !important;
  font-size: 11px !important;
}

.vltk-bar-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
}

.vltk-sec-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: linear-gradient(90deg, #152e38, #0d1e2588 70%, transparent) !important;
  border-left: 2px solid #6ec0ce !important;
  padding: 2px 6px !important;
  margin: 5px 0 3px !important;
  font-weight: bold !important;
  color: #eee3c5 !important;
  font-size: 11px !important;
}

.vltk-attr-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3px !important;
  margin-bottom: 5px !important;
}

.vltk-luctay-box {
  display: flex !important;
  justify-content: space-between !important;
  gap: 6px !important;
  padding: 3px 6px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: 4px !important;
  margin-bottom: 5px !important;
  font-size: 11px !important;
}

.vltk-lt-line {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
}

.vltk-stats-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2px 8px !important;
  font-size: 11px !important;
  padding: 4px 6px !important;
  background: rgba(12, 22, 27, 0.6) !important;
  border-radius: 4px !important;
}

.vltk-stat-item {
  display: flex !important;
  justify-content: space-between !important;
  white-space: nowrap !important;
  color: #b0bec5 !important;
}

.vltk-stat-item b {
  color: #fff !important;
}

.vltk-right-pane {
  background: rgba(8, 16, 20, 0.6) !important;
  border: 1px solid #2a4752 !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
}

.vltk-pk-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 2px 6px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: 3px !important;
  margin-bottom: 5px !important;
  font-size: 11px !important;
}

.vltk-sub-actions {
  display: flex !important;
  gap: 6px !important;
  justify-content: center !important;
  margin: 5px 0 !important;
}

.vltk-char-bottom {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px solid #1e363e !important;
}


body.u20[data-u2t=char] #panel {
  width: min(650px, 92vw) !important;
}


/* ==================== MOBA LANDSCAPE MODE STYLES ==================== */
body.moba-mode #pad,
body.moba-mode #u20r,
body.moba-mode #u20rc,
body.moba-mode #u20side,
body.moba-mode #u20menu,
body.moba-mode #u20log {
  display: none !important;
}

body.moba-mode #vliJoyPad {
  display: block !important;
  position: fixed !important;
  left: 25px !important;
  bottom: 25px !important;
  transform: none !important;
  z-index: 25 !important;
  opacity: 0.9 !important;
  pointer-events: auto !important;
}

#mobaHudContainer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 25;
}

#mobaTopQuickRow {
  position: fixed;
  top: 130px;
  right: 8px;
  z-index: 26;
  display: flex;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(9, 19, 22, 0.88);
  border: 1px solid #3c5f68;
  border-radius: 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

/* Tự động ẩn thanh HUD phím tắt & cụm nút công cụ MOBA khi đang mở giao diện chức năng (Túi u2bagon, Nhân Vật u20win, Modal...) */
#mobaTopQuickRow.moba-hud-hidden,
#mobaCombatCluster.moba-hud-hidden,
#mobaBottomBar.moba-hud-hidden,
body.moba-mode.u2bagon #mobaTopQuickRow,
body.moba-mode.u20win #mobaTopQuickRow,
body.moba-mode:has(#modal:not(.hidden)) #mobaTopQuickRow,
body.moba-mode.u2bagon #mobaCombatCluster,
body.moba-mode.u20win #mobaCombatCluster,
body.moba-mode:has(#modal:not(.hidden)) #mobaCombatCluster,
body.moba-mode.u2bagon #mobaBottomBar,
body.moba-mode.u20win #mobaBottomBar,
body.moba-mode:has(#modal:not(.hidden)) #mobaBottomBar,
body.moba-mode.u2bagon #mobaSkillPicker,
body.moba-mode.u20win #mobaSkillPicker,
body.moba-mode:has(#modal:not(.hidden)) #mobaSkillPicker,
body.moba-mode.u2bagon #topCtl,
body.moba-mode.u20win #topCtl,
body.moba-mode:has(#modal:not(.hidden)) #topCtl,
body.moba-mode.u2bagon #vliJoyPad,
body.moba-mode.u20win #vliJoyPad,
body.moba-mode:has(#modal:not(.hidden)) #vliJoyPad {
  display: none !important;
  pointer-events: none !important;
}

.moba-qbtn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #1c3e49 0%, #091316 85%);
  border: 1.5px solid #497481;
  color: #e7dec4;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.moba-qbtn small {
  font-size: 8px;
  line-height: 1;
  margin-top: 1px;
}
.moba-qbtn:active {
  transform: scale(0.92);
}

#mobaBottomBar {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 24;
  pointer-events: auto;
}

.moba-town-btn {
  height: 30px;
  padding: 0 12px;
  background: radial-gradient(circle at 40% 30%, #1c3e49 0%, #091316 85%);
  border: 1.5px solid #497481;
  border-radius: 15px;
  color: #d9eef5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), inset 0 0 6px rgba(110, 192, 206, 0.25);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  touch-action: manipulation;
  transition: transform 0.1s, filter 0.15s;
}
.moba-town-btn:active {
  transform: scale(0.92);
}
.moba-town-btn.town-back {
  background: radial-gradient(circle at 40% 30%, #24505e 0%, #0b191f 85%);
  border-color: #6ec0ce;
  color: #ffe699;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), inset 0 0 6px rgba(110, 192, 206, 0.35);
}

#mobaBottomChatBar {
  width: 260px;
  height: 28px;
  background: rgba(9, 19, 22, 0.88);
  border: 1px solid #3c5f68;
  border-radius: 14px;
  color: #d8e5ec;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  cursor: pointer;
  padding: 0 10px;
  pointer-events: auto;
}
#mobaChatLine {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#mobaCombatCluster {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 25;
  width: 175px;
  height: 175px;
  pointer-events: none;
}

.moba-main-btn {
  pointer-events: auto;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #214a57 0%, #091316 85%);
  border: 2px solid #578794;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85), inset 0 0 12px rgba(110, 192, 206, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  user-select: none;
  touch-action: none;
}
.moba-main-btn .sk-icon {
  width: 38px;
  height: 38px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.moba-main-btn .sk-name {
  font-size: 10px;
  color: #ffd875;
  font-weight: bold;
  white-space: nowrap;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.moba-main-btn:active {
  transform: scale(0.93);
}

.moba-sub-btn {
  pointer-events: auto;
  position: absolute;
  right: 74px;
  bottom: 84px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #2b4550 0%, #101c22 85%);
  border: 2px solid #8fe0ff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8), inset 0 0 8px rgba(143, 224, 255, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  user-select: none;
  touch-action: none;
}
.moba-sub-btn .sk-icon {
  width: 26px;
  height: 26px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.moba-sub-btn .sk-name {
  font-size: 9px;
  color: #aae4ff;
  font-weight: bold;
  white-space: nowrap;
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.moba-sub-btn:active {
  transform: scale(0.92);
}

#mobaPotsCol {
  pointer-events: auto;
  position: absolute;
  right: 92px;
  bottom: 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.moba-pot-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  padding: 0;
}
.moba-pot-btn.hp {
  background: radial-gradient(circle at 40% 30%, #6e1d1d 0%, #2a0b0b 85%);
  border: 1.5px solid #ff6a6a;
  color: #ffc4c4;
}
.moba-pot-btn.mp {
  background: radial-gradient(circle at 40% 30%, #1d3f6e 0%, #0b182a 85%);
  border: 1.5px solid #6ab4ff;
  color: #c4e2ff;
}
.moba-pot-btn:active {
  transform: scale(0.9);
}

#mobaSkillPicker {
  position: fixed;
  right: 185px;
  bottom: 20px;
  width: 310px;
  background: rgba(9, 19, 22, 0.96);
  border: 1.5px solid #3c5f68;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9);
  z-index: 35;
  padding: 10px;
  backdrop-filter: blur(6px);
  animation: mobaFadeIn 0.15s ease-out;
  pointer-events: auto;
}

@keyframes mobaFadeIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

.moba-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 210, 74, 0.25);
  font-size: 11.5px;
  font-weight: bold;
  color: #ffd24a;
}
.moba-picker-head button {
  background: none;
  border: none;
  color: #ff7875;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  padding: 2px 6px;
}

.moba-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.moba-skill-cell {
  background: linear-gradient(145deg, #182832, #0d161c);
  border: 1.5px solid #3c5f68;
  border-radius: 6px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #cbd5e1;
}
.moba-skill-cell i {
  width: 36px;
  height: 36px;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;
  margin-bottom: 4px;
}
.moba-skill-cell .moba-sk-name {
  font-size: 10.5px;
  font-weight: bold;
  color: #ffd875;
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.moba-skill-cell .moba-sk-lv {
  font-size: 9.5px;
  color: #8fe0ff;
  margin-top: 1px;
}
.moba-skill-cell:active,
.moba-skill-cell:hover {
  border-color: #ffd24a;
  background: #253844;
}

.moba-picker-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 210, 74, 0.2);
}
.moba-page-btn {
  background: linear-gradient(180deg, #2b3e4a, #152026);
  border: 1px solid #4a6878;
  color: #d8e5ec;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
}
.moba-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.moba-page-info {
  font-size: 11px;
  color: #ffd875;
  font-weight: bold;
}

@media (orientation: portrait) {
  #mobaHudContainer {
    display: none !important;
  }
}

/* Tăng kích cỡ cụm nút điều khiển bên trái trong MOBA (PK, Xoay chiêu, Chế độ, Auto) */
body.moba-mode #topCtl {
  top: 36px !important;
  left: 190px !important;
  gap: 6px !important;
  padding: 4px 8px !important;
  background: rgba(9, 19, 22, 0.92) !important;
  border: 1.5px solid #3c5f68 !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 25 !important;
}

body.moba-mode #topCtl .chip,
body.moba-mode #ctrlBtn,
body.moba-mode #rotBtn,
body.moba-mode #pkBtn,
body.moba-mode #modeSw button {
  height: 28px !important;
  line-height: 26px !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
}

body.moba-mode #topCtl .ck,
body.moba-mode #ctrlBtn .ck,
body.moba-mode #rotBtn .ck {
  width: 14px !important;
  height: 14px !important;
  margin-left: 4px !important;
}

/* Tăng nhẹ kích cỡ Joystick bên trái trong MOBA */
body.moba-mode #vliJoyPad {
  width: 200px !important;
  height: 200px !important;
  left: 25px !important;
  bottom: 25px !important;
}

/* Khung Chat trong MOBA Mode */
body.moba-mode #chatBox {
  display: block !important;
}
body.moba-mode #chatBox:not(.open) {
  display: none !important;
}
body.moba-mode #chatBox.open {
  display: flex !important;
  position: fixed !important;
  left: 50% !important;
  bottom: 50px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  width: min(520px, 90vw) !important;
  height: min(300px, 65vh) !important;
  z-index: 20002 !important;
  pointer-events: auto !important;
  background: rgba(9, 19, 22, 0.96) !important;
  border: 1.5px solid #3c5f68 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), inset 0 0 12px rgba(60, 95, 104, 0.25) !important;
  backdrop-filter: blur(8px) !important;
}
body.moba-mode #chatBox.open #chatLines {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 6px 10px !important;
}
body.moba-mode #chatBox.open #chatIn {
  display: flex !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  background: rgba(5, 8, 12, 0.8) !important;
  border-top: 1px solid #3c5f68 !important;
}
body.moba-mode #chatBox.open #chatTxt {
  flex: 1 !important;
  background: #142a33 !important;
  color: #e7dec4 !important;
  border: 1px solid #3c5f68 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
}

/* Văn Cương & Tinh Chuỳ Colors */
.vp-card .vp-magic.tone-green, .sl .tone-green { color: #4ade80 !important; font-weight: bold; }
.vp-card .vp-magic.tone-gold, .sl .tone-gold { color: #ffd24a !important; font-weight: bold; }

/* ========================================================
   HỆ THỐNG CƯỜNG HÓA THĂNG SAO 16★ & HIỆU ỨNG PHÁT SÁNG
   ======================================================== */
.it.item-enh-8 {
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.5) !important;
  border-color: #38bdf8 !important;
}
.it.item-enh-12 {
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.7), inset 0 0 6px rgba(192, 132, 252, 0.3) !important;
  border-color: #c084fc !important;
  animation: glowPurplePulse 2s ease-in-out infinite alternate;
}
.it.item-enh-16 {
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.85), inset 0 0 8px rgba(255, 215, 0, 0.45) !important;
  border-color: #ffd700 !important;
  animation: glowGoldPulse 1.5s ease-in-out infinite alternate;
}

@keyframes glowPurplePulse {
  0% { box-shadow: 0 0 6px rgba(192, 132, 252, 0.5); }
  100% { box-shadow: 0 0 14px rgba(232, 121, 249, 0.9), inset 0 0 8px rgba(192, 132, 252, 0.5); }
}

@keyframes glowGoldPulse {
  0% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.6); }
  100% { box-shadow: 0 0 18px rgba(255, 234, 112, 1), 0 0 6px #fff, inset 0 0 10px rgba(255, 215, 0, 0.6); }
}

.en.enh-8, .fenh.enh-8 {
  color: #7dd3fc !important;
  text-shadow: 0 0 5px #0284c7 !important;
  font-weight: 900 !important;
}
.en.enh-12, .fenh.enh-12 {
  color: #f0abfc !important;
  text-shadow: 0 0 6px #c026d3, 0 0 10px #e879f9 !important;
  font-weight: 900 !important;
}
.en.enh-16, .fenh.enh-16 {
  color: #fef08a !important;
  text-shadow: 0 0 8px #eab308, 0 0 14px #facc15, 0 0 4px #fff !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
}


/* ========================================================
   TRỢ THỦ KIẾM HIỆP & BỘ LỌC NHẶT ĐỒ (ĐỒNG BỘ TÔNG XANH ĐEN CHỦ ĐẠO)
   ======================================================== */
.tt2tabs{display:flex!important;border-bottom:1px solid #2e4b54;margin-bottom:8px}
.tt2tabs button{flex:1;padding:7px 4px!important;font-weight:600}
.tt2{display:flex;flex-direction:column;gap:8px}
.tt2s{border:1px solid #2e4b54;border-radius:4px;background:#0a151a}
.tt2h{display:flex;align-items:center;gap:6px;padding:6px 10px;color:#ffe699;font-weight:700;border-bottom:1px solid #243e47;background:linear-gradient(90deg,#16303a,#0b171c)}
.tt2h small{margin-left:auto;color:#8fa7b3;font-weight:400;font-size:11px;text-align:right}
.tt2b{padding:8px 10px;display:flex;flex-direction:column;gap:7px}
.tt2r{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.tt2r>small{white-space:nowrap}
.tt2l{min-width:110px;color:#cfd8dc;font-size:12.5px}
.tt2g{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;align-items:center}
.tt2c{display:flex!important;align-items:center;gap:8px;cursor:pointer;margin:0!important;font-size:12.5px;line-height:1.35}
.tt2c small{color:#8fa7b3;font-size:11px}
.tt2 input[type=checkbox]{appearance:none;-webkit-appearance:none;width:30px!important;height:16px!important;min-width:30px!important;min-height:16px!important;border-radius:8px;background:#0e1e24;border:1px solid #3c5f68;position:relative;flex:0 0 auto;cursor:pointer;margin:0!important;padding:0!important;transform:none!important;transition:background .15s}
.tt2 input[type=checkbox]:after{content:'';position:absolute;top:1px;left:1px;width:12px;height:12px;border-radius:50%;background:#7998a3;transition:left .15s}
.tt2 input[type=checkbox]:checked{background:#1d4e5f;border-color:#6ec0ce}
.tt2 input[type=checkbox]:checked:after{left:15px;background:#d8f8ff}
.tt2 select,.tt2 input[type=number]{background:#081216;border:1px solid #3c5f68;color:#e7dec4;padding:3px 6px;border-radius:3px;font-size:12px;width:auto!important;min-width:0}
.tt2 input[type=number]{width:84px}
.tt2seg{display:inline-flex;border:1px solid #34515a;border-radius:4px;overflow:hidden;flex-wrap:wrap}
.tt2seg button{padding:5px 10px!important;font-size:12px;color:#b8c8cf;background:#0b161b!important;border:0!important;border-right:1px solid #243e47!important;border-radius:0!important;cursor:pointer;white-space:nowrap;margin:0!important;box-shadow:none!important}
.tt2seg button:last-child{border-right:0!important}
.tt2seg button.on{background:linear-gradient(180deg,#2b5666,#16303a)!important;color:#ffffff}
.tt2pm{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.tt2pm button{display:flex;flex-direction:column;align-items:center;border:1px solid #2e4b54!important;border-radius:4px!important;padding:6px 3px!important;background:#0b161b!important;cursor:pointer;margin:0!important}
.tt2pm button b{font-size:12.5px;color:#d8e5ec}
.tt2pm button small{font-size:10px;color:#8fa7b3;line-height:1.2;margin-top:2px;text-align:center}
.tt2pm button.on{border-color:#6ec0ce!important;background:linear-gradient(180deg,#1f4552,#0f242c)!important;box-shadow:0 0 6px rgba(110,192,206,0.3)}
.tt2pm button.on b{color:#ffffff}
.tt2pmn{display:block;margin:6px 2px 2px;line-height:1.4}
.tt2chips{display:flex;flex-wrap:wrap;gap:6px 14px}
.tt2t{width:100%;border-collapse:collapse;font-size:12px}
.tt2t th{color:#8fa7b3;font-weight:400;text-align:left;padding:3px 4px;border-bottom:1px solid #243e47}
.tt2t td{padding:3px 4px;border-bottom:1px solid #162830}
.tt2t select{max-width:100%}
.tt2t input[type=number]{width:64px}
.tt2 .tt2t select{width:100%!important}
.tt2x{background:none!important;border:0!important;color:#ff8a80;cursor:pointer;font-size:13px;padding:0 4px!important}
.tt2add{border:1px dashed #3c5f68!important;border-radius:3px!important;background:rgba(14,30,37,0.6)!important;color:#ffe699;padding:5px!important;cursor:pointer;width:100%;font-size:12px}
.tt2f{display:flex;gap:6px;justify-content:flex-end;margin-top:4px}

/* Table Giu do khi... */
.tt2flt{table-layout:fixed}
.tt2flt th{font-size:11px;white-space:nowrap}
.tt2flt th:nth-child(1){width:98px}
.tt2flt th:nth-child(2){width:86px}
.tt2flt th:nth-child(4){width:56px}
.tt2flt th:nth-child(5){width:60px}
.tt2flt th:nth-child(6){width:22px}
.tt2 .tt2flt select,.tt2 .tt2flt input{font-size:12px;padding:3px 4px!important;height:26px;width:100%!important;min-width:0}
.tt2flt select{text-overflow:ellipsis}
.tt2flt input:disabled{opacity:.4}

/* Presets */
.tt2pre{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 2px}
.tt2pre .chip2{cursor:pointer;font-size:11.5px;padding:3px 8px;border:1px solid #2e4b54;background:#0b161b;color:#b8d4de;border-radius:3px}
.tt2pre .chip2:hover{border-color:#6ec0ce;color:#ffffff}
.tt2pre .chip2.tt2pa{border-color:#3b6978;color:#d8f8ff}

/* Luon giu */
.tt2keep .tt2r{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:8px;align-items:center}
.tt2keep .tt2l{min-width:0;line-height:1.25}
.tt2 .tt2keep select,.tt2 .tt2keep input{width:112px!important;min-width:0;box-sizing:border-box}

@media (max-width:560px){
  .tt2g{grid-template-columns:1fr}
  .tt2pm{grid-template-columns:repeat(2,1fr)}
  .tt2l{min-width:90px}
  .tt2r{flex-wrap:wrap}
  .tt2flt,.tt2flt tbody{display:block}
  .tt2flt tr:first-child{display:none}
  .tt2flt tr{display:grid;grid-template-columns:1fr 1fr 24px;gap:4px;padding:6px 0;border-bottom:1px solid #1d353f}
  .tt2flt td{padding:0;border:0}
  .tt2flt td:nth-child(3){grid-column:1/3}
  .tt2flt td:nth-child(6){grid-row:1;grid-column:3}
  .tt2flt td:nth-child(4)::before{content:'Giá trị ≥ ';font-size:11px;color:#8fa7b3}
  .tt2flt td:nth-child(5)::before{content:'Số dòng ';font-size:11px;color:#8fa7b3}
  .tt2flt td:nth-child(4),.tt2flt td:nth-child(5){display:flex;align-items:center;gap:4px;white-space:nowrap}
  .tt2flt td:nth-child(4){grid-column:1}
  .tt2flt td:nth-child(5){grid-column:2}
  .tt2 .tt2flt select,.tt2 .tt2flt input{height:30px}
}

/* ===== TRO THU KIEM HIEP: TAB NHAT DO (XANH ĐEN CHỦ ĐẠO) ===== */
.u2tt.tt2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 8px 6px !important;
  color: #d8e5ec;
  font-size: 12.5px;
  max-width: 100%;
  box-sizing: border-box;
}

.tt2s {
  border: 1px solid #2e4b54 !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, #0d1b21 0%, #081115 100%) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.tt2h {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 10px !important;
  color: #ffe699 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  border-bottom: 1px solid #243e47 !important;
  background: linear-gradient(90deg, #16303a 0%, #0c191f 100%) !important;
}

.tt2h small {
  margin-left: auto !important;
  color: #8fa7b3 !important;
  font-weight: 400 !important;
  font-size: 11px !important;
  text-align: right;
}

.tt2b {
  padding: 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.tt2r {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.tt2l {
  min-width: 80px;
  color: #d8e5ec;
  font-size: 12px;
  font-weight: 600;
}

.tt2g {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px 10px !important;
  align-items: center !important;
}

.tt2c {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #d8e5ec !important;
  user-select: none;
}

.tt2c small {
  color: #8fa7b3 !important;
  font-size: 10.5px !important;
}

.tt2 input[type=checkbox] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 32px !important;
  height: 18px !important;
  min-width: 32px !important;
  min-height: 18px !important;
  border-radius: 9px !important;
  background: #0d1b21 !important;
  border: 1px solid #3c5f68 !important;
  position: relative !important;
  flex: 0 0 auto !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: background 0.15s, border-color 0.15s;
}

.tt2 input[type=checkbox]:after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #7898a4 !important;
  transition: left 0.15s, background 0.15s;
}

.tt2 input[type=checkbox]:checked {
  background: #1d4e5f !important;
  border-color: #6ec0ce !important;
}

.tt2 input[type=checkbox]:checked:after {
  left: 16px !important;
  background: #d8f8ff !important;
}

.tt2 select,
.tt2 input[type=number] {
  background: #081216 !important;
  border: 1px solid #3c5f68 !important;
  color: #e7dec4 !important;
  padding: 4px 6px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  box-sizing: border-box;
}

.tt2 select:focus,
.tt2 input[type=number]:focus {
  border-color: #6ec0ce !important;
  outline: none;
}

.tt2 input[type=number] {
  width: 70px !important;
  text-align: center;
}

.tt2seg {
  display: inline-flex !important;
  background: #081216 !important;
  border: 1px solid #34515a !important;
  border-radius: 5px !important;
  padding: 2px !important;
  gap: 3px !important;
  box-sizing: border-box;
  flex-wrap: wrap !important;
}

.tt2seg button {
  flex: 1 1 auto !important;
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  color: #9eb8c2 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  margin: 0 !important;
  text-align: center !important;
  transition: all 0.15s ease;
  min-height: 28px !important;
  line-height: 16px !important;
}

.tt2seg button:hover {
  color: #ffffff !important;
  background: rgba(110, 192, 206, 0.1) !important;
}

.tt2seg button.on {
  background: linear-gradient(180deg, #2b5666 0%, #16303a 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: 1px solid #6ec0ce !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.tt2pre {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin: 4px 0 !important;
}

.tt2pre .chip2 {
  background: #0b161b !important;
  border: 1px solid #2e4b54 !important;
  color: #b8d4de !important;
  padding: 3px 8px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  cursor: pointer !important;
  transition: all 0.15s;
}

.tt2pre .chip2:hover {
  background: #16303a !important;
  border-color: #6ec0ce !important;
  color: #ffffff !important;
}

.tt2pre .chip2.tt2pa {
  border-color: #3b6978 !important;
  background: #0f2129 !important;
  color: #a8e1f0 !important;
}

.tt2pre .chip2.tt2pa:hover {
  border-color: #6ec0ce !important;
  color: #ffffff !important;
}

.tt2flt-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tt2flt {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 11px !important;
  margin: 4px 0 !important;
  background: #091317 !important;
  border: 1px solid #2e4b54 !important;
}

.tt2flt th {
  background: #132830 !important;
  color: #ffe699 !important;
  padding: 5px 4px !important;
  text-align: left !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #2e4b54 !important;
  white-space: nowrap !important;
}

.tt2flt td {
  padding: 4px 3px !important;
  border-bottom: 1px solid #162a33 !important;
  vertical-align: middle !important;
}

.tt2flt select {
  width: 100% !important;
  padding: 3px 2px !important;
  font-size: 11px !important;
  height: 26px !important;
}

.tt2flt input[type=number] {
  width: 50px !important;
  padding: 3px 2px !important;
  font-size: 11px !important;
  height: 26px !important;
}

.tt2x {
  background: #3d1c1c !important;
  color: #ff9494 !important;
  border: 1px solid #6b2a2a !important;
  border-radius: 3px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  cursor: pointer !important;
  font-weight: bold !important;
  line-height: 18px !important;
}

.tt2x:hover {
  background: #612222 !important;
  color: #fff !important;
}

.tt2add {
  display: block !important;
  width: 100% !important;
  padding: 6px !important;
  background: #0d1d24 !important;
  border: 1px dashed #3c5f68 !important;
  color: #ffe699 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  text-align: center !important;
  margin: 4px 0 !important;
  transition: all 0.15s;
}

.tt2add:hover {
  background: #16303a !important;
  border-color: #6ec0ce !important;
  color: #fff !important;
}

.tt2f {
  display: flex !important;
  gap: 8px !important;
  margin-top: 6px !important;
}

.tt2f button {
  flex: 1 1 0 !important;
  padding: 7px 10px !important;
  font-size: 12.5px !important;
  font-weight: bold !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

.tt2pmn {
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #9eb8c2 !important;
  background: rgba(8, 18, 22, 0.55) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  border-left: 2px solid #3c5f68 !important;
}

@media (max-width: 560px) {
  .tt2g {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .tt2seg {
    width: 100% !important;
  }
  .tt2seg button {
    flex: 1 1 auto !important;
    padding: 6px 4px !important;
    font-size: 11px !important;
  }
  .tt2r {
    gap: 6px !important;
  }
}

/* ==============================================================
   CỬA SỔ HÀNH TRANG BAY (#u2bagw) & TOOLTIP TRANG BỊ (#u2tip)
   Chuẩn kiếm thế / VLTK 1 theo nguyên mẫu TaiNguyen
   ============================================================== */
body.u20 #u2bagw {
  display: none !important;
  position: fixed !important;
  z-index: 55;
  background-color: #091316 !important;
  background-image: radial-gradient(at 35% 45%, #1c414a55, #0000 55%), linear-gradient(135deg, #102027, #080e11 76%) !important;
  border: 1px solid #3c5f68 !important;
  outline: 1px solid #04090b !important;
  box-shadow: inset 0 0 0 1px #142a33, inset 0 0 24px #0005, 0 10px 30px #000d !important;
  color: #e7dec4 !important;
  border-radius: 4px;
}

body.u20.u2bagon #u2bagw {
  display: block !important;
  left: auto;
  right: 200px;
  top: 64px;
  transform: none;
  width: 262px !important;
  max-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transition: width 0.15s ease;
}

body.u20.u2bagon.u2rxon #u2bagw {
  width: 520px !important;
  max-width: calc(100vw - 20px) !important;
}

body.u2s.u2bagon #u2bagw {
  width: 262px !important;
  top: 2px !important;
  right: 4px !important;
  max-height: calc(100vh - 4px) !important;
}

body.u2s.u2bagon.u2rxon #u2bagw {
  width: min(520px, 98vw) !important;
}

/* ==============================================================
   MỞ RỘNG RƯƠNG (HÀNH TRANG PHỤ NHƯ JX1 / KIẾM THẾ)
   ============================================================== */
.u2bagrow {
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
}

body.u2m .u2bagrow {
  flex-wrap: wrap !important;
}

.u2bagrow > .u2bag,
body.u2s .u2bagrow > .u2bag,
body.u2s #u2bagw .u2bag {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 244px !important;
  width: 244px !important;
  min-width: 0 !important;
  gap: 4px !important;
  align-items: stretch !important;
}

body.u2m .u2bagrow > .u2bag {
  flex: 1 1 100% !important;
  width: auto !important;
}

/* Header hàng trên của túi đồ */
.u2bh,
body.u2s .u2bh {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 4px !important;
  font-size: 12px !important;
  color: #c9b98a !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.u2bh .sp {
  flex: 1 !important;
}

.u2bh button.u2buy {
  white-space: nowrap !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  background: #18313a !important;
  border: 1px solid #3c5f68 !important;
  color: #eee3c5 !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  line-height: 16px !important;
}

.u2bh button.u2buy:hover,
.u2bh button.u2buy.on {
  background: linear-gradient(180deg, #2b5666, #16303a) !important;
  border-color: #d8b86d !important;
  color: #ffd98a !important;
  box-shadow: 0 0 6px rgba(216, 184, 109, 0.4) !important;
}

#iSort {
  font-size: 11px !important;
  padding: 1px 4px !important;
  background: #112228 !important;
  border: 1px solid #3c5f68 !important;
  color: #eee3c5 !important;
  border-radius: 3px !important;
  max-width: 110px !important;
  width: auto !important;
}

/* Cột Rương Mở Rộng (.u2rx) */
.u2rx {
  flex: 0 0 244px !important;
  width: 244px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: stretch !important;
  border-left: 1px solid #233e47 !important;
  padding-left: 10px !important;
  box-sizing: border-box !important;
}

.u2rx[hidden] {
  display: none !important;
}

body.u2m .u2rx {
  border-left: 0 !important;
  padding-left: 0 !important;
  border-top: 1px solid #233e47 !important;
  padding-top: 8px !important;
  width: 100% !important;
}

.u2rxt {
  text-align: center !important;
  font-weight: 700 !important;
  color: #f6e3b4 !important;
  font-size: 13px !important;
  padding: 2px 0 4px !important;
  text-shadow: 0 1px 2px #000 !important;
  border-bottom: 1px solid #1a2f36 !important;
  margin-bottom: 2px !important;
}

.u2rxtab {
  display: flex !important;
  gap: 4px !important;
  justify-content: center !important;
  margin-bottom: 4px !important;
}

.u2rxtab button {
  min-width: 32px !important;
  padding: 2px 8px !important;
  background: #112228 !important;
  border: 1px solid #3c5f68 !important;
  color: #a0b6bd !important;
  font: inherit !important;
  font-size: 12px !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.u2rxtab button:hover {
  border-color: #6fb0c3 !important;
  color: #eee3c5 !important;
}

.u2rxtab button.on {
  background: linear-gradient(180deg, #2b5666, #16303a) !important;
  border-color: #d8b86d !important;
  color: #ffd98a !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 4px #000, 0 0 6px rgba(216, 184, 109, 0.3) !important;
}

.u2rxtab button.lk {
  color: #556c73 !important;
  border-color: #1e353c !important;
  background: #0a1417 !important;
}

.u2rx .invgrid {
  display: grid !important;
  grid-template-columns: repeat(6, 38px) !important;
  gap: 3px !important;
  justify-content: center !important;
  margin: 4px auto !important;
}

.u2rxlk {
  width: 100% !important;
  min-height: 140px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px dashed #3c5f68 !important;
  border-radius: 4px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

.u2rxlk p {
  margin: 0 !important;
  font-size: 12px !important;
  color: #ccc !important;
}

.u2rxlk p b {
  color: #ffd98a !important;
}

#bRxClose {
  margin-top: 6px !important;
  width: 100% !important;
  padding: 4px 10px !important;
  background: linear-gradient(180deg, #1b353f, #0d1e24) !important;
  border: 1px solid #3c5f68 !important;
  color: #e7dec4 !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 18px !important;
}

#bRxClose:hover {
  background: linear-gradient(180deg, #264a57, #132a32) !important;
  border-color: #6fb0c3 !important;
  color: #fff !important;
}

#bRxBuy {
  padding: 4px 12px !important;
  background: linear-gradient(180deg, #7a5a22, #47330d) !important;
  border: 1px solid #d8b86d !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

#bRxBuy:hover:not(:disabled) {
  filter: brightness(1.2) !important;
}

#bRxBuy:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

#u2bwh {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  background: linear-gradient(180deg, #16303a 0%, #0d1d24 58%, #091317 100%) !important;
  border-bottom: 1px solid #3b5a62 !important;
  color: #eee3c5 !important;
  text-shadow: 0 1px 2px #000 !important;
  box-shadow: inset 0 1px 0 #a4d2dc1f !important;
  cursor: move;
  user-select: none;
  font-weight: 600;
  font-size: 13px;
}

#u2bwh button#u2bwx {
  position: absolute;
  right: 4px;
  top: 3px;
  width: 22px;
  height: 20px;
  background: radial-gradient(circle at 40% 35%, #244752, #0b171c) !important;
  border: 1.5px solid #6b9aa6 !important;
  color: #e7dec4 !important;
  box-shadow: 0 0 4px #000 !important;
  border-radius: 3px;
  cursor: pointer;
  line-height: 16px;
  padding: 0;
  font-size: 11px;
}

#u2bwh button#u2bwx:hover {
  border-color: #9ed8e4 !important;
  filter: brightness(1.2);
}

/* Lưới đồ bên trong #u2bagw & khôi phục ô .it khi body mang class .u2s (màn ngang Android) */
#u2bagw #t-inv {
  display: block !important;
  padding: 6px 8px 10px !important;
}

#u2bagw .invgrid,
body.u2s #u2bagw .invgrid,
body.u2s .u2bag .invgrid,
.u2rx .invgrid,
body.u2s .u2rx .invgrid {
  display: grid !important;
  grid-template-columns: repeat(6, 36px) !important;
  gap: 3px !important;
  justify-content: center !important;
  margin: 4px auto !important;
  padding: 2px !important;
  background: rgba(5, 11, 14, 0.78) !important;
  border: 1px solid #233e47 !important;
  border-radius: 4px !important;
  width: max-content !important;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8) !important;
}

/* Khôi phục viền, nền và kích thước ô đồ (.it / .it.empty) bị xung đột bởi selector .u2s .it trên Android xoay ngang */
body.u2s .it:not(.u2doll .u2s .it),
#u2bagw .invgrid .it,
body.u2s #u2bagw .invgrid .it,
.u2rx .invgrid .it,
body.u2s .u2rx .invgrid .it {
  background: radial-gradient(ellipse 82% 42% at 50% 112%, var(--item-glow, transparent) 0%, var(--item-glow-soft, transparent) 48%, transparent 100%), linear-gradient(180deg, #0f2027 0%, #091318 70%, #0d1920 100%) !important;
  border: 1px solid #2e4b54 !important;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.75) !important;
  border-radius: 3px !important;
  box-sizing: border-box !important;
}

#u2bagw .invgrid .it,
body.u2s #u2bagw .invgrid .it,
body.u2s .u2bag .it,
.u2rx .invgrid .it,
body.u2s .u2rx .invgrid .it {
  width: 36px !important;
  height: 36px !important;
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
}

#u2bagw .invgrid .it.empty,
body.u2s #u2bagw .invgrid .it.empty,
.u2rx .invgrid .it.empty,
body.u2s .u2rx .invgrid .it.empty,
body.u2s .invgrid .it.empty {
  display: block !important;
  background: linear-gradient(180deg, #0b181e 0%, #071014 100%) !important;
  border: 1px solid #26424c !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.85) !important;
  opacity: 1 !important;
}

/* Bảo toàn màu viền phẩm chất trang bị trong body.u2s */
body.u2s .it.r1:not(.u2doll .u2s .it) {
  border-color: #4a86e8 !important;
  box-shadow: inset 0 0 8px #2a5ab0 !important;
}
body.u2s .it.r2:not(.u2doll .u2s .it) {
  border-color: #ffd24a !important;
  box-shadow: inset 0 0 8px #a88420 !important;
}
body.u2s .it.r3:not(.u2doll .u2s .it) {
  border-color: #c77bff !important;
  box-shadow: inset 0 0 10px #7a3ab0 !important;
}
body.u2s .it.r4:not(.u2doll .u2s .it) {
  border-color: #ffcc00 !important;
  box-shadow: inset 0 0 10px #b08000, 0 0 5px #ffcc0099 !important;
}
body.u2s .it.r5:not(.u2doll .u2s .it) {
  border-color: #9fe8ff !important;
  box-shadow: inset 0 0 10px #4a9ab8, 0 0 5px #9fe8ff99 !important;
}

/* Bố cục Ngân lượng, KNB và các nút thao tác cuối túi đồ trên màn ngang Android */
#u2bagw .u2money,
body.u2s #u2bagw .u2money,
body.u2s .u2bag .u2money {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 3px 6px !important;
  margin: 4px 0 0 !important;
  font-size: 11.5px !important;
  align-items: center !important;
  width: 100% !important;
}

#u2bagw #u2invB,
#u2bagw #u2invB2,
body.u2s #u2bagw #u2invB,
body.u2s #u2bagw #u2invB2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  width: 100% !important;
  margin: 4px 0 0 !important;
}

#u2bagw #u2invB .btn,
#u2bagw #u2invB2 .btn,
body.u2s #u2bagw #u2invB .btn,
body.u2s #u2bagw #u2invB2 .btn {
  width: 100% !important;
  min-height: 28px !important;
  height: 28px !important;
  font-size: 11px !important;
  padding: 0 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* TOOLTIP NỔI JX1 CHUẨN #u2tip */
#u2tip {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  max-width: 340px;
  background: #091316 !important;
  background-image: radial-gradient(at 35% 45%, #1c414a55, #0000 55%), linear-gradient(135deg, #102027, #080e11 76%) !important;
  border: 1px solid #557e8a !important;
  outline: 1px solid #000 !important;
  box-shadow: 0 4px 18px #000c, inset 0 0 12px #0008 !important;
  color: #e7dec4 !important;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  display: none;
  max-height: 92vh;
  overflow: hidden;
}

#u2tip .idet .pic {
  width: 40px;
  height: 40px;
}

#u2tip .cmp,
#u2tip .cp {
  font-size: 11px;
}

#u2tip.sm {
  max-width: 280px;
  padding: 4px 8px;
}

#u2tip.w2 {
  max-width: none !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#u2tip .u2cmpw {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

#u2tip .u2pane {
  width: 300px;
  background: #091316 !important;
  background-image: radial-gradient(at 35% 45%, #1c414a55, #0000 55%), linear-gradient(135deg, #102027, #080e11 76%) !important;
  border: 1px solid #557e8a !important;
  outline: 1px solid #000 !important;
  box-shadow: 0 4px 18px #000c !important;
  padding: 8px 10px;
  border-radius: 4px;
  max-height: 92vh;
  overflow: hidden;
  color: #e7dec4;
}

#u2tip .u2cur {
  border-color: #558a68 !important;
}

#u2tip .u2lbl {
  font-weight: 700;
  font-size: 11px;
  color: #9fd27a;
  border-bottom: 1px solid #234b57;
  margin: -2px 0 6px;
  padding-bottom: 3px;
}

#u2tip .u2lnew {
  color: #e6c67a;
}

#u2tip .u2tt {
  white-space: pre-line;
}

#u2tip .btnrow,
#u2tip button {
  display: none !important;
}

/* KHI CẢ HAI BẢNG CÙNG MỞ: ĐẨY #panel SANG BÊN TRÁI, #u2bagw Ở BÊN PHẢI ĐỂ KHÔNG BAO GIỜ BỊ ĐÈ */
body.u20.u2bagon #panel {
  left: 20px;
  right: auto;
  top: 64px;
  transform: none;
  z-index: 50;
  width: min(680px, calc(100vw - 490px)) !important;
}

@media (min-width: 1200px) {
  body.u20.u2bagon #panel {
    left: 24px;
    width: 680px !important;
  }
}

body.u20[data-u2t=char] #panel {
  width: min(690px, 96vw) !important;
  max-width: 96vw !important;
}

#t-char {
  overflow-x: hidden !important;
}

/* ==========================================================================
   GIAI ĐOẠN 1: ENHANCED ENHANCEMENT STARS, QUEST TRACKER & TOWN RETURN
   ========================================================================== */

/* 1. Hiển thị cấp sao cường hóa (+1 đến +16) trên từng ô trang bị */
.it u.en {
  position: absolute !important;
  left: 2px !important;
  bottom: 2px !important;
  font: bold 10px "IBM Plex Mono", monospace, sans-serif !important;
  color: #ffd24a !important;
  text-decoration: none !important;
  text-shadow: 0 0 2px #000, 0 0 4px #000 !important;
  pointer-events: none !important;
  z-index: 5 !important;
  line-height: 1 !important;
}

.it u.en.enh-8 {
  color: #60a5fa !important;
  text-shadow: 0 0 3px #1d4ed8, 0 0 5px #000 !important;
}

.it u.en.enh-12 {
  color: #c084fc !important;
  text-shadow: 0 0 3px #7e22ce, 0 0 5px #000 !important;
}

.it u.en.enh-16 {
  color: #facc15 !important;
  font-weight: 900 !important;
  text-shadow: 0 0 4px #eab308, 0 0 8px rgba(234, 179, 8, 0.7) !important;
  animation: enhStarPulse 2s infinite ease-in-out !important;
}

@keyframes enhStarPulse {
  0%, 100% { filter: drop-shadow(0 0 1px #facc15); }
  50% { filter: drop-shadow(0 0 5px #facc15); }
}

/* 2. Nhiệm vụ Theo Dấu widget (Góc phải màn hình) */
#u20trk {
  position: fixed !important;
  right: 12px !important;
  top: 135px !important;
  z-index: 100 !important;
  width: 215px !important;
  background: rgba(10, 18, 22, 0.9) !important;
  border: 1px solid #3c5d6b !important;
  border-radius: 5px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7) !important;
  font-size: 11.5px !important;
  line-height: 16px !important;
  color: #cfd8dc !important;
  overflow: hidden !important;
  backdrop-filter: blur(4px) !important;
  user-select: none !important;
}

#u20trk .u2trh {
  text-align: center !important;
  background: linear-gradient(180deg, #1b353f, #0d1e24) !important;
  border-bottom: 1px solid #2a4c59 !important;
  padding: 4px 8px !important;
  color: #ffe699 !important;
  font-size: 12px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  position: relative !important;
}

#u20trk .u2trh b {
  position: absolute !important;
  right: 8px !important;
  color: #ffd24a !important;
}

#u20trk > div:not(.u2trh) {
  padding: 5px 8px !important;
  border-bottom: 1px solid rgba(42, 76, 89, 0.4) !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

#u20trk > div:not(.u2trh):hover {
  background: rgba(30, 58, 68, 0.45) !important;
}

#u20trk b {
  color: #ffd24a !important;
}

#u20trk span.gold {
  color: #ffd700 !important;
}

#u20trk span.cp {
  color: #4ade80 !important;
  font-weight: bold !important;
}

#u20trk small {
  color: #8fa7b3 !important;
}

/* 3. Nút Trở lại bãi trên thanh Thị trấn */
#townBar #bBack.on,
#townBar #bBack {
  background: linear-gradient(180deg, #1b4d2e, #0e2a19) !important;
  border: 1px solid #38a169 !important;
  color: #4ade80 !important;
  font-weight: bold !important;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.4) !important;
}

#townBar #bBack:hover {
  background: linear-gradient(180deg, #23653b, #12351f) !important;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.7) !important;
}

/* ==========================================================================
   MASTER UNIFIED BLUE-BLACK THEME OVERRIDE (ĐỒNG BỘ TÔNG MÀU XANH ĐEN CHỦ ĐẠO)
   Đảm bảo 100% các Cửa sổ, Tiêu đề, Tab, Sub-tab, Thẻ bài, Bảng biểu và HUD/Hub
   đều đồng bộ theo bảng màu Xanh Đen (#091316 / #0d1d24 / #142a33 / #16303a)
   ========================================================================== */

:root {
  --bg: #071014 !important;
  --panel: #091316 !important;
  --card: #0d1b21 !important;
  --card2: #12252d !important;
  --line: #2e4b54 !important;
  --gold: #e6c46a !important;
  --gold2: #ffd875 !important;
  --txt: #e7dec4 !important;
  --dim: #8fa7b3 !important;
}

/* 1. Cửa sổ chính (#panel), Cửa sổ Hành trang (#u2bagw), Hộp thoại (#modal .mbox) */
body.u20 #panel,
body.u2m #panel,
body.mob #panel,
body.u20 #u2bagw,
body.u20 #modal .mbox,
body.u2m #modal .mbox,
body.mob #modal .mbox,
#modal .mbox {
  background-color: #091316 !important;
  background-image:
    radial-gradient(at 35% 45%, #1c414a55, #0000 55%),
    linear-gradient(135deg, #102027, #080e11 76%) !important;
  border-color: #3c5f68 !important;
  box-shadow: inset 0 0 0 1px #142a33, inset 0 0 24px #0005, 0 10px 30px #000d !important;
  color: #e7dec4 !important;
}

/* 2. Thanh tiêu đề cửa sổ & Modal (#u20wh, #u2bwh, #modal h3:first-child) - Xóa bỏ màu xám rêu cũ */
#u20wh,
#u2bwh,
body.u20 #modal #mBody > h3:first-child,
body.u2m #modal #mBody > h3:first-child,
body.mob #modal #mBody > h3:first-child,
#modal #mBody > h3:first-child {
  background: linear-gradient(180deg, #16303a 0%, #0d1d24 58%, #091317 100%) !important;
  border-bottom: 1px solid #3b5a62 !important;
  box-shadow: inset 0 1px 0 #385a6466 !important;
  color: #eee3c5 !important;
  text-shadow: 0 1px 2px #000, 0 0 8px #0009 !important;
}

/* Nút Đóng (✕) trên thanh tiêu đề cửa sổ & Modal */
#u20wh button,
#u2bwh button,
body.u20 #modal .mx,
body.u2m #modal .mx,
body.mob #modal .mx,
#modal .mx {
  background: radial-gradient(circle at 40% 35%, #244854, #0a161b) !important;
  border: 1.5px solid #497481 !important;
  color: #e7dec4 !important;
  box-shadow: 0 1px 3px #000c !important;
}
#u20wh button:hover,
#u2bwh button:hover,
body.u20 #modal .mx:hover,
body.u2m #modal .mx:hover,
body.mob #modal .mx:hover,
#modal .mx:hover {
  background: radial-gradient(circle at 40% 35%, #a12c25, #3d0c09) !important;
  border-color: #ff8a80 !important;
  color: #ffffff !important;
}

/* Tiêu đề mục con (.tab h3, .mbox h3, .u2h, .vltk-sec-title) */
body.u20 .tab h3,
body.u2m .tab h3,
body.mob .tab h3,
body.u20 .mbox h3:not(:first-child),
body.u2m .mbox h3:not(:first-child),
.u2h,
.vltk-sec-title {
  background: linear-gradient(90deg, #16303a 0%, #0d1d24 65%, transparent 100%) !important;
  border-left: 2px solid #578794 !important;
  border-bottom: 1px solid #243e47 !important;
  color: #ffe699 !important;
}

/* 3. Toàn bộ hệ thống Tab & Sub-tab (.u2tabs, .dtabs, .guild-tabs, .tt2tabs, #tabs, #u20menu, .u2rxtab, .u2cat, #chatHead .cch) */
.u2tabs,
.dtabs,
.guild-tabs,
.tt2tabs,
.u2rxtab {
  border-bottom: 1px solid #2e4b54 !important;
}

.u2tabs button,
.dtabs button,
.guild-tabs button,
.tt2tabs button,
.u2rxtab button,
.tyvo-mode-switch .tyvo-mode-btn,
#chatHead .cch button,
#u20ct button[data-lt] {
  background: linear-gradient(180deg, #132830 0%, #0a151a 100%) !important;
  border: 1px solid #2e4b54 !important;
  color: #9eb8c2 !important;
  text-shadow: 0 1px 1px #000 !important;
}

.u2tabs button:hover,
.dtabs button:hover,
.guild-tabs button:hover,
.tt2tabs button:hover,
.u2rxtab button:hover,
.tyvo-mode-switch .tyvo-mode-btn:hover,
#chatHead .cch button:hover,
#u20ct button[data-lt]:hover {
  background: linear-gradient(180deg, #1a3742 0%, #0e1e24 100%) !important;
  border-color: #497481 !important;
  color: #e7dec4 !important;
}

.u2tabs button.on,
.dtabs button.on,
.guild-tabs button.on,
.tt2tabs button.on,
.u2rxtab button.on,
.tyvo-mode-switch .tyvo-mode-btn.on,
#chatHead .cch button.on,
#u20ct button[data-lt].on {
  background: linear-gradient(180deg, #244f5e 0%, #122932 100%) !important;
  border-color: #6ec0ce !important;
  color: #ffe699 !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(160, 230, 245, 0.25), 0 0 8px rgba(60, 120, 140, 0.35) !important;
}

/* Danh mục bên trái Kỳ Trân Các (.u2cat) & Cây nhiệm vụ (.u2tree) */
.u2cat,
.u2tree {
  background: #081216 !important;
  border: 1px solid #2a454e !important;
}
.u2cat button,
.u2tree button {
  background: #0c1a20 !important;
  border-bottom: 1px solid #1b3139 !important;
  color: #a8c0c9 !important;
}
.u2cat button:hover,
.u2tree button:hover {
  background: #142a33 !important;
  color: #ffffff !important;
}
.u2cat button.on,
.u2tree button.on {
  background: linear-gradient(90deg, #224b59 0%, #122830 100%) !important;
  border-left: 2px solid #6ec0ce !important;
  color: #ffe699 !important;
  font-weight: 700 !important;
}
.u2tree .u2tg {
  background: #12262e !important;
  border-bottom: 1px solid #2a454e !important;
  color: #ffe699 !important;
}

/* Thanh Dock Menu dưới đáy (#u20menu trên PC & #tabs trên Mobile) */
#u20menu,
#tabs {
  background: linear-gradient(180deg, #132830 0%, #091316 100%) !important;
  border-color: #3b5a62 !important;
}
#u20menu .u20mi,
#tabs button {
  background-color: #0d1d24 !important;
  border-color: #2e4b54 !important;
  color: #b8c8cf !important;
}
#u20menu .u20mi:hover,
#tabs button:hover {
  background-color: #16303a !important;
  border-color: #578794 !important;
  color: #ffffff !important;
}
#u20menu .u20mi.on,
#tabs button.on {
  background-color: #1f4452 !important;
  border-color: #6ec0ce !important;
  color: #ffe699 !important;
  box-shadow: inset 0 0 8px rgba(110, 192, 206, 0.35) !important;
}

/* 4. Các Khung Nội Dung, Card, Hàng danh sách, Bảng biểu bên trong các Tab */
body.u20 .card,
body.u2m .card,
body.mob .card,
.card,
body.u20 .skl,
body.u2m .skl,
.skl,
.u2box,
.u2ftxt,
.u2qd,
.u2card,
.hkbar,
.hkrow,
.qrow,
.day,
.zrow,
#u20zl .zrow,
.shoprow,
.todo,
.cmp2,
#ptMgr .ptm,
.u2rx,
.u2rxlk,
.u2money,
.u2sh,
.vltk-char-hdr,
.vltk-av-row,
.vltk-luctay-box,
.vltk-stat-item {
  background-color: #0b161b !important;
  background-image: linear-gradient(180deg, rgba(20, 42, 51, 0.65) 0%, rgba(9, 19, 22, 0.85) 100%) !important;
  border-color: #29444d !important;
}

.u2card .u2ct,
.u2rxt,
.u2kh,
#u20zl .u2zh {
  background: linear-gradient(180deg, #16303a 0%, #0d1d24 100%) !important;
  border-color: #2e4b54 !important;
  color: #ffe699 !important;
}

.zrow.cur,
#u20zl .zrow.cur,
.skl.main,
.day.done {
  background: linear-gradient(90deg, #1b3d4a 0%, #0f242c 100%) !important;
  border-color: #6ec0ce !important;
}

/* Khung Búp bê nhân vật & Ô trang bị */
.u2doll,
body.u20 .eqgrid,
body.u2m .eqgrid {
  background: radial-gradient(ellipse at 50% 45%, #16323c 0%, #071014 75%) !important;
  border: 1px solid #3c5f68 !important;
}
.u2s,
body.u20 .slot,
body.u2m .slot {
  background: rgba(8, 18, 22, 0.78) !important;
  border: 1px solid #34515a !important;
}
.u2k {
  background: #0a151a !important;
  border-color: #2e4b54 !important;
}
.u2k.on {
  border-color: #497481 !important;
}
.u2k.main {
  border-color: #ffd24a !important;
}

/* Bảng Dọn Kho (.dktbl) & Bảng dữ liệu */
.dktbl th {
  background: #132830 !important;
  border-bottom: 1px solid #2e4b54 !important;
  color: #ffe699 !important;
}
.dktbl td {
  border-bottom: 1px solid #172b33 !important;
}

/* 5. Nút bấm (.btn, .u2buy, .chip2) & Ô nhập liệu (select, input) đồng bộ tông Xanh Đen */
body.u20 .btn:not(.red):not(#btnCharFix):not(#btnCharClose):not(#bBack),
body.u2m .btn:not(.red):not(#btnCharFix):not(#btnCharClose):not(#bBack),
.u2buy {
  background: linear-gradient(180deg, #17333e 0%, #0b181e 100%) !important;
  border: 1px solid #3c5f68 !important;
  color: #e7dec4 !important;
  text-shadow: 0 1px 1px #000 !important;
}
body.u20 .btn:not(.red):not(:disabled):hover,
body.u2m .btn:not(.red):not(:disabled):hover,
.u2buy:not(:disabled):hover {
  background: linear-gradient(180deg, #214958 0%, #10242c 100%) !important;
  border-color: #6ec0ce !important;
  color: #ffffff !important;
}
body.u20 .btn.on:not(.red),
body.u2m .btn.on:not(.red),
.u2buy.on {
  background: linear-gradient(180deg, #285768 0%, #142e38 100%) !important;
  border-color: #6ec0ce !important;
  color: #ffe699 !important;
}

select,
input[type="text"],
input[type="number"],
input[type="password"] {
  background-color: #081216 !important;
  border: 1px solid #34515a !important;
  color: #e7dec4 !important;
}
select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus {
  border-color: #6ec0ce !important;
  outline: none !important;
}

/* 6. Toàn bộ các HUD / Hub trên màn hình chính (#top, #hud, #topCtl, #townBar, #u20r, #u20zone, #u20log, #u20boss, #chatBox, #ptBox) */
#top,
#hud,
body.u2m #top,
body.mob #top {
  background: linear-gradient(180deg, #102229 0%, #081115 100%) !important;
  border-color: #34515a !important;
}

#topCtl .chip,
#ctrlBtn,
#rotBtn,
#pkBtn,
#modeSw #mswBtn,
#townBar button:not(#bBack),
#u20zb,
#u20gold,
#chatBtn,
#u20lt {
  background: linear-gradient(180deg, #16303a 0%, #0a151a 100%) !important;
  border: 1px solid #3c5f68 !important;
  color: #e7dec4 !important;
}

#topCtl .chip.on,
#ctrlBtn.on,
#rotBtn.on,
#townBar button.on:not(#bBack),
#u20lt.on {
  background: linear-gradient(180deg, #224b59 0%, #10242c 100%) !important;
  border-color: #6ec0ce !important;
  color: #ffe699 !important;
}

#u20zl,
#modeSw #mswMenu,
#ptBox,
#u20log #u20lines,
#u20log #u20ct,
#u20log #u20in,
#chatBox {
  background-color: rgba(9, 19, 22, 0.94) !important;
  border-color: #34515a !important;
}

#u20boss .b {
  background: #091316 !important;
  border: 1px solid #3c5f68 !important;
}