/* ====================================================================
 * 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(20, 16, 12, 0.5) 0%, rgba(5, 5, 5, 0.7) 100%);
  border: 3px solid rgba(216, 184, 104, 0.45);
  box-shadow: 
    inset 0 0 16px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

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

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

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

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


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

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

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

/* === GIAO DIỆN KHUNG CHAT & THÔNG BÁO (CHUẨN VLTK / JX2) === */
#u20log {
  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 {
  display: none !important;
}

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

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

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

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

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

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

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


/* === QUICK MENU (#u20r) BỐ CỤC 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;
}

#u20in {
  display: none !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 #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 #6b5329 !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #2c251d 0%, #17130e 100%) !important;
    color: #d9ccaa !important;
    text-shadow: 1px 1px 1px #000 !important;
    box-shadow: 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;
    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: #c9a656 !important;
    color: #fff !important;
    box-shadow: 0 0 5px rgba(201,166,86,0.5) !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: #15110c !important;
    border: 1.5px solid #786237 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.9) !important;
  }

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

/* 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;
}