/* ====================================================================
 * 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
 * ==================================================================== */

/* TỐI ƯU HIỂN THỊ ĐA NỀN TẢNG (PC, MOBILE, TABLET, MACOS) & ĐỒ HỌA MƯỢT MÀ */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
#arena {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* 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) nằm sang BÊN PHẢI thanh kỹ năng #pad */
  body.u20 #modeSw,
  #modeSw {
    top: auto !important;
    bottom: 5px !important;
    left: calc(50% + 185px) !important; /* Đặt sát mép PHẢI của cụm kỹ năng #pad */
    right: auto !important;
    transform: none !important;
    z-index: 10 !important;
    height: 34px !important; /* Thu nhỏ chiều cao bằng ô kỹ năng */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

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

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

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

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

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

  /* 5.2. Cụm nút Hòa Bình, Xoay Chiêu, Auto (#topCtl) nằm 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)
 * Hiển thị mờ bán trong suốt ở góc dưới cạnh trái khi được bật.
 * Tự động điều chỉnh kích thước và vị trí theo hướng màn hình Dọc / Ngang.
 * ==================================================================== */
#vliJoyPad {
  position: fixed !important;
  left: 20px !important;
  bottom: 84px !important; /* Dọc: nằm góc dưới cạnh trái, trên thanh đáy */
  width: 124px !important;
  height: 124px !important;
  transform: none !important;
  z-index: 45 !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: auto !important;
  opacity: 0.52 !important;
  transition: opacity 0.2s ease !important;
}

#vliJoyPad:hover,
#vliJoyPad.active {
  opacity: 0.88 !important;
}

#vliJoyRing {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 50%, rgba(20, 16, 12, 0.55) 0%, rgba(5, 5, 5, 0.75) 100%) !important;
  border: 2px solid rgba(216, 184, 104, 0.55) !important;
  box-shadow: 
    inset 0 0 14px rgba(0, 0, 0, 0.85),
    0 0 10px rgba(0, 0, 0, 0.65) !important;
  pointer-events: none !important;
}

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

#vliJoyThumb {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #8a7042 0%, #302414 100%) !important;
  border: 2px solid rgba(243, 216, 138, 0.85) !important;
  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) !important;
  pointer-events: none !important;
  will-change: transform !important;
}

/* KHI XOAY MÀN HÌNH NGANG TRÊN MOBILE: hạ thấp xuống góc trái sát đáy */
@media (orientation: landscape) and (max-height: 600px) {
  #vliJoyPad {
    left: 18px !important;
    bottom: 16px !important;
    width: 110px !important;
    height: 110px !important;
  }
  #vliJoyThumb {
    width: 46px !important;
    height: 46px !important;
  }
}

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

/* Khi mở 1 chức năng bất kỳ (modal hoặc panel chức năng), tự động ẩn Joystick */
body:has(#modal:not(.hidden)) #vliJoyPad,
body:has(#panel:not(.hidden)) #vliJoyPad,
body.u20win #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 [-] chuyển sang phía bên trái thanh tab chat */
#u20hide {
  order: -2 !important;
  margin-left: 0 !important;
  margin-right: 5px !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;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#u20hide:hover {
  background: #3c423e !important;
  color: #fff !important;
}

#u20lt {
  order: -1 !important;
  margin-right: 3px !important;
}

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

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

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

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

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

/* Trên màn hình dọc / điện thoại (Mobile), Quick Menu chuyển sang CẠNH TRÁI 2/3 PHÍA TRÊN theo yêu cầu người chơi */
@media (max-width: 899px), (orientation: portrait) {
  body.u2m #u20r,
  body.mob #u20r,
  body:not(.u20) #u20r,
  #u20r {
    top: 30% !important;
    left: 6px !important;
    right: auto !important;
    transform: translateY(-30%) scale(var(--ui-scale, 1)) !important;
    transform-origin: left top !important;
    z-index: 28 !important;
    padding: 6px 6px !important;
    border-radius: 14px !important;
    gap: 5px !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background: rgba(14, 19, 16, 0.88) !important;
    border: 1.5px solid rgba(212, 160, 54, 0.5) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(4px) !important;
  }

  /* Khi mở modal hoặc tab chức năng khác, ẩn Quick Menu để không che */
  body:has(#modal:not(.hidden)) #u20r,
  body.u20win #u20r,
  body:not(.tablog) #u20r {
    display: none !important;
  }

  /* Chế độ mobile: chỉ giữ 5 nút xếp theo hàng dọc (Kỳ Trân Các, Tỷ Võ, Tống Kim, Bang, Chợ) */
  body.u2m .u20r-row,
  body.mob .u20r-row,
  body:not(.u20) .u20r-row,
  .u20r-row {
    display: contents !important;
  }

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

  body.u2m #u20ktc, body.mob #u20ktc, body:not(.u20) #u20ktc { order: 1 !important; display: inline-flex !important; }
  body.u2m #u20tyvo, body.mob #u20tyvo, body:not(.u20) #u20tyvo { order: 2 !important; display: inline-flex !important; }
  body.u2m #u20tk, body.mob #u20tk, body:not(.u20) #u20tk { order: 3 !important; display: inline-flex !important; }
  body.u2m #u20guild, body.mob #u20guild, body:not(.u20) #u20guild { order: 4 !important; display: inline-flex !important; }
  body.u2m #u20mkt, body.mob #u20mkt, body:not(.u20) #u20mkt { order: 5 !important; display: inline-flex !important; }

  body.u2m .u20rb,
  body.mob .u20rb,
  body:not(.u20) .u20rb,
  .u20rb {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    padding: 1px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: radial-gradient(circle, #382416 0%, #1c1209 75%, #0e0905 100%) !important;
    border: 1.5px solid #d4a036 !important;
    color: #ffd875 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.1s, border-color 0.1s !important;
  }

  .u20rb:active {
    transform: scale(0.92) !important;
    border-color: #ffe699 !important;
  }

  /* Huy hiệu hiển thị online cạnh nút dấu '-' và '+' của khung chat */
  .u20-chat-onl {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #72f372;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid rgba(82, 196, 26, 0.45);
    margin-right: 6px;
    white-space: nowrap;
    user-select: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  }

  /* Thanh tab chat có đệm an toàn bên phải để không bao giờ bị đè bởi icon */
  body.u2m #u20ct,
  body.mob #u20ct,
  body:not(.u20) #u20ct {
    padding-right: 48px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Khung nội dung chat gọn gàng trên mobile */
  body.u2m #u20lines,
  body.mob #u20lines,
  body:not(.u20) #u20lines {
    min-height: 70px !important;
    max-height: 180px !important;
    padding: 6px 8px !important;
  }

  /* Khi mở bàn phím ảo gõ chat trên điện thoại (Laban Key / Gboard - u2kb) */
  body.u2kb #u20lines {
    min-height: 50px !important;
    max-height: 80px !important;
    height: 80px !important;
    padding: 4px 6px !important;
  }
  body.u2kb #u20r {
    display: none !important;
  }

  /* Bố trí hàng điều khiển trên mobile: Khung Chế độ Luyện Công (#modeSw) góc trái, cụm Top Control (#topCtl) góc phải */
  body.u2m #modeSw,
  body.mob #modeSw,
  body:not(.u20) #modeSw {
    top: 26px !important;
    left: 4px !important;
    right: 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;
    max-width: 120px !important;
  }

  body.u2m #modeSw #mswBtn,
  body.mob #modeSw #mswBtn,
  body:not(.u20) #modeSw #mswBtn {
    height: 22px !important;
    line-height: 20px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !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;
  }

  /* Cụm nút PK, Ngựa, Xoay chiêu, Auto trên Mobile */
  body.u2m #topCtl,
  body.mob #topCtl,
  body:not(.u20) #topCtl {
    top: 26px !important;
    right: 4px !important;
    left: auto !important;
    bottom: auto !important;
    position: absolute !important;
    z-index: 10 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 3px !important;
    background: rgba(14, 11, 8, 0.8) !important;
    padding: 1px 3px !important;
    border: 1px solid #5a4828 !important;
    border-radius: 3px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.7) !important;
  }

  body.u2m #topCtl .chip,
  body.mob #topCtl .chip,
  body:not(.u20) #topCtl .chip,
  body.u2m #topCtl button,
  body.mob #topCtl button,
  body:not(.u20) #topCtl button {
    height: 20px !important;
    line-height: 18px !important;
    padding: 0 4px !important;
    font-size: 9.5px !important;
    white-space: nowrap !important;
    border-radius: 2px !important;
  }

  body.u2m #topCtl .ck,
  body.mob #topCtl .ck,
  body:not(.u20) #topCtl .ck {
    width: 9px !important;
    height: 9px !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;
}



/* ==================== BẢNG SO SÁNH TRANG BỊ 2 CỘT (SIDE-BY-SIDE COMPARISON) ==================== */
#tip, #tip.vp-item-tip {
  position: fixed !important;
  z-index: 99999 !important;
  pointer-events: none !important;
}

#modal .mbox:has(.item-modal-compare) {
  width: min(840px, calc(100vw - 20px)) !important;
  max-width: 840px !important;
}

.item-modal-compare {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.item-col {
  flex: 1 1 320px;
  min-width: 280px;
  max-width: 400px;
  background: rgba(12, 18, 20, 0.75);
  border: 1px solid rgba(138, 115, 69, 0.45);
  border-radius: 6px;
  padding: 10px;
  box-sizing: border-box;
}

.item-col-target {
  border-color: rgba(255, 210, 74, 0.55);
  box-shadow: 0 0 12px rgba(255, 210, 74, 0.12);
}

.item-col-equipped {
  border-color: rgba(90, 160, 255, 0.45);
  box-shadow: 0 0 12px rgba(90, 160, 255, 0.1);
  background: rgba(10, 15, 20, 0.65);
}

.item-col-badge {
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.item-col-badge.target-badge {
  background: linear-gradient(90deg, rgba(255, 210, 74, 0.25), rgba(255, 140, 0, 0.2));
  color: #ffd24a;
  border: 1px solid rgba(255, 210, 74, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.item-col-badge.equipped-badge {
  background: linear-gradient(90deg, rgba(90, 160, 255, 0.25), rgba(0, 100, 200, 0.2));
  color: #8fc6ff;
  border: 1px solid rgba(90, 160, 255, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.item-col .btnrow {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

@media (max-width: 680px) {
  #modal .mbox:has(.item-modal-compare) {
    width: min(440px, calc(100vw - 16px)) !important;
  }
  .item-col {
    max-width: 100%;
    flex: 1 1 100%;
  }
}

/* ====================================================================
 * 🛡️ TRỢ THỦ KIẾM HIỆP - CƠ CHẾ ĐÁNH QUANH ĐIỂM & ĐỒNG ĐỘI
 * ==================================================================== */
.u2-sw-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  padding: 3px 0;
}

.u2-sw {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.u2-sw input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.u2-sl {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2a241b;
  border: 1.5px solid #5a4b36;
  border-radius: 20px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.7);
}

.u2-sl:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: #7d6c54;
  border-radius: 50%;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.u2-sw input:checked + .u2-sl {
  background-color: #6a962a;
  border-color: #a4dc47;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 6px rgba(164,220,71,0.4);
}

.u2-sw input:checked + .u2-sl:before {
  transform: translateX(16px);
  background-color: #ffffff;
}

.u2-sw-txt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  line-height: 1.35;
}

.u2-sw-tit {
  font-weight: 700;
  color: #f3dfb2;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.u2-sw-desc {
  font-size: 11.5px;
  color: #9c907a;
}

.u2-anchor-box {
  background: rgba(20, 16, 12, 0.65);
  border: 1px solid rgba(138, 112, 68, 0.35);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 6px 0 10px 0;
}

.u2-anchor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  font-size: 12.5px;
  color: #e5d7b5;
}

.u2-anchor-row .lbl {
  min-width: 80px;
  color: #baa785;
}

.u2-rad-chips {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.u2-chip-btn {
  background: #1f1a14;
  border: 1px solid #5a4b36;
  color: #bfa882;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.u2-chip-btn:hover {
  border-color: #9c8242;
  color: #ffd24a;
}

.u2-chip-btn.on {
  background: linear-gradient(180deg, #5c4424 0%, #362612 100%);
  border-color: #d8b868;
  color: #ffd24a;
  font-weight: bold;
  box-shadow: 0 0 5px rgba(255, 210, 74, 0.35);
}

.u2-num-inp {
  background: #14100c;
  border: 1px solid #5a4b36;
  color: #ffd24a;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  width: 58px;
}

.u2-num-inp:focus {
  outline: none;
  border-color: #d8b868;
  box-shadow: 0 0 6px rgba(216, 184, 104, 0.4);
}

.u2-anchor-btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.u2-anchor-btn {
  background: linear-gradient(180deg, #443420 0%, #261c10 100%);
  border: 1px solid #786237;
  color: #ffd24a;
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: bold;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.u2-anchor-btn:hover {
  border-color: #ffd24a;
  box-shadow: 0 0 8px rgba(255, 210, 74, 0.4);
}

/* === THÔNG BÁO NỔI CHẠY TRÊN MÀN HÌNH TOÀN SERVER (SERVER MARQUEE BANNER) === */
@keyframes serverMarqueeScroll {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

.server-marquee-container {
  position: fixed;
  top: 48px;
  left: 0;
  width: 100vw;
  height: 28px;
  background: linear-gradient(90deg, rgba(20, 10, 5, 0.94) 0%, rgba(95, 20, 10, 0.96) 50%, rgba(20, 10, 5, 0.94) 100%);
  border-top: 1px solid rgba(255, 215, 74, 0.6);
  border-bottom: 1px solid rgba(255, 215, 74, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  white-space: nowrap;
  z-index: 40;
  pointer-events: none;
  display: flex;
  align-items: center;
  transition: opacity 0.3s ease;
}

body:has(#modal:not(.hidden)) .server-marquee-container,
body:has(#panel:not(.hidden)) .server-marquee-container {
  display: none !important;
}

.server-marquee-text {
  display: inline-block;
  white-space: nowrap;
  animation: serverMarqueeScroll 16s linear infinite;
  font-family: 'Cinzel', 'Nunito', serif, sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff2ad;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.85), 0 0 16px rgba(255, 69, 0, 0.7);
  letter-spacing: 0.6px;
}

/* === HIỆU ỨNG HÀO QUANG PHÁT SÁNG DANH HIỆU CHIẾN TRƯỜNG === */
.tk-rank-binhsi {
  color: #a8e6cf !important;
  font-weight: 600;
  text-shadow: 0 0 4px rgba(168, 230, 207, 0.5);
}

.tk-rank-hieuuy {
  color: #5fb4ff !important;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(95, 180, 255, 0.75);
}

.tk-rank-dothong {
  color: #00ffff !important;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.85), 0 0 14px rgba(0, 200, 255, 0.45);
}

.tk-rank-thonglinh {
  color: #df7bff !important;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(223, 123, 255, 0.9), 0 0 18px rgba(144, 16, 255, 0.6);
}

.tk-rank-photuong {
  color: #ffa533 !important;
  font-weight: 800;
  font-size: 13px;
  text-shadow: 0 0 10px rgba(255, 165, 51, 0.95), 0 0 20px rgba(255, 102, 0, 0.7);
}

.tk-rank-daituong {
  color: #ff3366 !important;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-shadow: 0 0 12px rgba(255, 51, 102, 1), 0 0 24px rgba(204, 0, 51, 0.85), 0 0 30px rgba(255, 0, 80, 0.5);
  animation: tkRankPulse 2s infinite alternate;
}

.tk-rank-daisoai {
  color: #ffd700 !important;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.8px;
  text-shadow: 0 0 14px rgba(255, 215, 0, 1), 0 0 28px rgba(255, 153, 0, 0.9), 0 0 40px rgba(255, 68, 0, 0.7);
  animation: tkRankPulse 1.5s infinite alternate;
}

@keyframes tkRankPulse {
  0% { filter: brightness(1) drop-shadow(0 0 2px rgba(255,215,0,0.5)); }
  100% { filter: brightness(1.35) drop-shadow(0 0 8px rgba(255,215,0,0.9)); }
}

/* === TÙY BIẾN KÍCH THƯỚC UI: #pad kỹ năng thu phóng đồng bộ === */
#pad {
  transform: scale(var(--ui-scale, 1)) !important;
  transform-origin: bottom right !important;
}

/* === BẬT CÙNG LÚC THÔNG TIN NHÂN VẬT & TÚI ĐỒ (DUAL PANEL) === */
#u20wDual {
  margin-left: auto !important;
  margin-right: 6px !important;
  background: linear-gradient(180deg, #4b3e2b, #2a1f0e) !important;
  border: 1px solid #c8a356 !important;
  color: #ffe9b0 !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  transition: all 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
#u20wDual:hover {
  filter: brightness(1.2) !important;
}
#u20wDual.on {
  background: linear-gradient(180deg, #8a7434, #4a3c14) !important;
  border-color: #ffd24a !important;
  color: #fff !important;
  box-shadow: 0 0 6px rgba(255, 210, 74, 0.6) !important;
}

#panel.u20-dual,
body.u20[data-u2t="char_inv"] #panel {
  width: min(980px, 98vw) !important;
  max-width: 98vw !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 40px) !important;
}

#panel.u20-dual #u20wh,
body.u20[data-u2t="char_inv"] #panel #u20wh {
  width: 100% !important;
  flex: 1 1 100% !important;
}

#panel.u20-dual #t-char,
body.u20[data-u2t="char_inv"] #panel #t-char {
  display: block !important;
  flex: 1 1 540px !important;
  max-width: 580px !important;
  min-width: 320px !important;
}

#panel.u20-dual #t-inv,
body.u20[data-u2t="char_inv"] #panel #t-inv {
  display: block !important;
  flex: 0 0 350px !important;
  max-width: 370px !important;
  min-width: 260px !important;
}

/* === TÙY CHỌN KÍCH THƯỚC KHUNG CHAT (NHỎ / VỪA / TO) === */
.chatsz-group {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: 4px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border-radius: 4px !important;
  padding: 1px !important;
  border: 1px solid #5a4b36 !important;
  gap: 1px !important;
}

.chatsz-btn {
  background: transparent !important;
  border: none !important;
  color: #baa785 !important;
  font-size: 10px !important;
  font-weight: bold !important;
  padding: 1px 5px !important;
  height: 19px !important;
  line-height: 19px !important;
  cursor: pointer !important;
  border-radius: 2px !important;
}
.chatsz-btn:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
.chatsz-btn.on {
  background: linear-gradient(180deg, #d4a742, #855c14) !important;
  color: #1a1002 !important;
  box-shadow: 0 0 4px rgba(230, 185, 60, 0.6) !important;
}

/* Cỡ Nhỏ (Mặc định thu gọn theo yêu cầu) */
body.chatsz-sm #u20log,
body:not(.chatsz-md):not(.chatsz-lg) #u20log {
  max-width: 320px !important;
}
body.chatsz-sm #u20lines,
body:not(.chatsz-md):not(.chatsz-lg) #u20lines {
  max-height: 110px !important;
  font-size: 11px !important;
}

/* Cỡ Vừa */
body.chatsz-md #u20log {
  max-width: 440px !important;
}
body.chatsz-md #u20lines {
  max-height: 175px !important;
  font-size: 12px !important;
}

/* Cỡ To */
body.chatsz-lg #u20log {
  max-width: 560px !important;
}
body.chatsz-lg #u20lines {
  max-height: 260px !important;
  font-size: 13px !important;
}



/* ========================================================= */
/* TỔNG HỢP CẬP NHẬT UI TOÀN DIỆN: SCALE, CHAT, TASKBAR, PANEL */
/* ========================================================= */

/* 1. SCALE UI ÁP DỤNG CHO TOÀN BỘ ICON & THANH HIỂN THỊ */
:root {
  --ui-scale: 1;
}

#top {
  transform: scale(var(--ui-scale, 1)) !important;
  transform-origin: top center !important;
}

#pad {
  transform: scale(var(--ui-scale, 1)) !important;
  transform-origin: bottom center !important;
}

#tabs {
  transform: scale(var(--ui-scale, 1)) !important;
  transform-origin: bottom center !important;
}

#u20menu {
  transform: scale(var(--ui-scale, 1)) !important;
  transform-origin: top left !important;
}

#u20r {
  transform: scale(var(--ui-scale, 1)) !important;
  transform-origin: top right !important;
}

#u20zone {
  transform: scale(var(--ui-scale, 1)) !important;
  transform-origin: top right !important;
}

#u20rc {
  transform: scale(var(--ui-scale, 1)) !important;
  transform-origin: top right !important;
}

#u20gold {
  transform: scale(var(--ui-scale, 1)) !important;
  transform-origin: top right !important;
}

#u20rank {
  transform: scale(var(--ui-scale, 1)) !important;
  transform-origin: top right !important;
}

#u20trk {
  transform: scale(var(--ui-scale, 1)) !important;
  transform-origin: top right !important;
}

#townBar {
  transform: scale(var(--ui-scale, 1)) !important;
  transform-origin: top center !important;
}

#u20boss {
  transform: scale(var(--ui-scale, 1)) !important;
  transform-origin: top center !important;
}

#panel {
  transform: scale(var(--ui-scale, 1)) !important;
  transform-origin: center center !important;
}

#modal .mbox {
  transform: scale(var(--ui-scale, 1)) !important;
  transform-origin: center center !important;
}

/* 2. BẢNG CHAT: KHI ẨN CHỈ HIỆN 1 NÚT Ô VUÔNG DẤU [+] */
body.u20logoff #u20lines,
body.u20logoff #u20in,
body.u20logoff #u20ct button:not(#u20hide),
body.u20logoff #u20ct span,
body.u20logoff #u20sb {
  display: none !important;
}

body.u20logoff #u20log {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

body.u20logoff #u20ct {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.u20logoff #u20hide {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #2c251e, #14110d) !important;
  border: 1.5px solid #8e7343 !important;
  color: #ffd76a !important;
  font-size: 18px !important;
  font-weight: bold !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.85) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

body.u20logoff #u20hide:hover {
  background: linear-gradient(180deg, #3d3429, #1e1a14) !important;
  color: #fff !important;
  border-color: #ffd76a !important;
}

/* 3. CỠ CHAT: NHỎ = 2 DÒNG (~38px), VỪA = 4 DÒNG (~74px), TO = 6 DÒNG (~110px) */
body.chatsz-sm #u20lines,
body:not(.chatsz-md):not(.chatsz-lg) #u20lines {
  height: 38px !important;
  max-height: 38px !important;
  font-size: 11px !important;
  line-height: 18px !important;
  overflow-y: auto !important;
}

body.chatsz-md #u20lines {
  height: 74px !important;
  max-height: 74px !important;
  font-size: 11.5px !important;
  line-height: 18px !important;
  overflow-y: auto !important;
}

body.chatsz-lg #u20lines {
  height: 110px !important;
  max-height: 110px !important;
  font-size: 12px !important;
  line-height: 18px !important;
  overflow-y: auto !important;
}

/* 4. THANH PHÍM TẮT CHIÊU & THUỐC (#pad) - GIAO DIỆN NỔI GỌN GÀNG NHƯ HÌNH 1 & HÌNH 2 */
#pad {
  position: fixed !important;
  right: 14px !important;
  bottom: 66px !important;
  left: auto !important;
  width: auto !important;
  max-width: none !important;
  background: linear-gradient(180deg, #2b251e 0%, #17130e 100%) !important;
  border: 1.5px solid #846937 !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.85), inset 0 1px 0 #baa164 !important;
  padding: 4px 8px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  z-index: 25 !important;
  cursor: grab;
  user-select: none;
}

#pad .hb {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

#pad .pbtn {
  box-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

/* 5. CỤM NÚT MENU TÍNH NĂNG 7 NÚT (#tabs) - NỔI GỌN GÀNG DƯỚI THANH CHIÊU NHƯ HÌNH 1 */
#tabs {
  position: fixed !important;
  right: 14px !important;
  bottom: 8px !important;
  left: auto !important;
  width: auto !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: linear-gradient(180deg, #2b251e 0%, #15120e 100%) !important;
  border: 1.5px solid #846937 !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.85), inset 0 1px 0 #baa164 !important;
  padding: 4px 8px !important;
  z-index: 25 !important;
  cursor: grab;
  user-select: none;
}

#tabs button[data-t="log"] {
  display: none !important;
}

#tabs button {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 35px 5px 3px 5px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #c4b998 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  min-width: 54px !important;
  transition: transform 0.12s, color 0.12s !important;
}

#tabs button:hover {
  color: #fff2c4 !important;
  transform: translateY(-1px);
}

#tabs button::before {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 50% !important;
  width: 32px !important;
  height: 32px !important;
  margin-left: -16px !important;
  background-size: auto 100% !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7)) !important;
}

#tabs button[data-t="char"]::before { background-image: url('img/u2/char.png') !important; }
#tabs button[data-t="inv"]::before { background-image: url('img/u2/inv.png') !important; }
#tabs button[data-t="skill"]::before { background-image: url('img/u2/skill.png') !important; }
#tabs button[data-t="forge"]::before { background-image: url('img/u2/forge.png') !important; }
#tabs button[data-t="quest"]::before { background-image: url('img/u2/quest.png') !important; }
#tabs button.tride::before, #tabs button.tteam::before { background-image: url('img/u2/team.png') !important; }
#tabs button[data-t="more"]::before { background-image: url('img/u2/more.png') !important; }

#tabs button.on {
  color: #ffd768 !important;
}

#tabs button.on::before {
  background-position: 100% 0 !important;
}

/* 6. BẢNG CHAT (#u20log) & CÁC CỤM GIAO DIỆN TỰ DO KÉO THẢ */
#u20ct {
  cursor: grab !important;
  user-select: none !important;
}

#u20wh {
  cursor: grab !important;
  user-select: none !important;
}

#u20r {
  cursor: grab !important;
  user-select: none !important;
}

/* Button gọi bảng Bạn Đồng Hành */
#u20petBtn {
  width: 34px;
  height: 34px;
  background: radial-gradient(circle, #2d3b2a, #131d14);
  border: 1.5px solid #7cb342;
  border-radius: 50%;
  color: #c5e1a5;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
  transition: transform 0.15s, border-color 0.15s;
}
#u20petBtn:hover {
  transform: scale(1.08);
  border-color: #aed581;
}


/* ========================================================= */
/* 7. GIAO DIỆN MOBILE: CHUYỂN TOÀN BỘ BẢNG SANG MODAL NHƯ HÌNH 2 */
/* ========================================================= */
body.u2m #battle,
body.mob #battle,
body:not(.u20) #battle {
  flex: 1 1 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}

body.u2m #panel,
body.mob #panel,
body:not(.u20) #panel {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(92vw, 420px) !important;
  max-width: 92vw !important;
  max-height: min(82vh, 600px) !important;
  background: linear-gradient(180deg, #1f1a14 0%, #110e0b 100%) !important;
  border: 2px solid #846937 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 35px rgba(0,0,0,0.92), inset 0 1px 0 #baa164 !important;
  z-index: 80 !important;
  pointer-events: auto !important;
  overflow-y: auto !important;
  padding: 0 0 10px 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  display: none !important;
}

#u20Backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  z-index: 70 !important;
  pointer-events: auto !important;
}

#modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100 !important;
  pointer-events: auto !important;
}
#modal.hidden {
  display: none !important;
  pointer-events: none !important;
}

body.u2m.u20win #panel,
body.mob.u20win #panel,
body:not(.u20).u20win #panel,
body.u2m #panel:not(.hidden),
body.mob #panel:not(.hidden),
body:not(.u20) #panel:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
}

body.u2m #panel.hidden,
body.mob #panel.hidden,
body:not(.u20) #panel.hidden {
  display: none !important;
}

#u20wh {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 12px !important;
  background: linear-gradient(180deg, #3a2e1d 0%, #1e170e 100%) !important;
  border-bottom: 1.5px solid #735928 !important;
  border-radius: 6px 6px 0 0 !important;
  cursor: grab !important;
  user-select: none !important;
}

#u20wt {
  color: #ffd76a !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  text-shadow: 1px 1px 2px #000 !important;
}

#u20wx {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.65) !important;
  border: 1.5px solid #9e844a !important;
  color: #d1b87a !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.15s, color 0.15s !important;
}
#u20wx:hover {
  color: #ff4d4f !important;
  border-color: #ff4d4f !important;
  transform: scale(1.1) !important;
}

/* 8. HẠ THẤP ĐỘ CAO BẢNG CHAT (#u20log) TRÊN MOBILE NHƯ HÌNH 3 */
body.u2m #u20log,
body.mob #u20log,
body:not(.u20) #u20log {
  max-height: 180px !important;
  width: min(94vw, 420px) !important;
}

body.u2m #u20lines,
body.mob #u20lines,
body:not(.u20) #u20lines {
  height: 48px !important;
  max-height: 48px !important;
  line-height: 16px !important;
  overflow-y: auto !important;
}

body.u2m.chatsz-md #u20lines,
body.mob.chatsz-md #u20lines,
body:not(.u20).chatsz-md #u20lines {
  height: 75px !important;
  max-height: 75px !important;
}

body.u2m.chatsz-lg #u20lines,
body.mob.chatsz-lg #u20lines,
body:not(.u20).chatsz-lg #u20lines {
  height: 115px !important;
  max-height: 115px !important;
}

/* ====================================================================
 * NHIỆM VỤ DÃ TẨU / THEO DẤU DƯỚI MINIMAP TRÊN MOBILE (#u20trk)
 * ==================================================================== */
body.u2m #u20trk,
body.mob #u20trk {
  position: fixed !important;
  z-index: 25 !important;
  background: rgba(14, 18, 15, 0.92) !important;
  border: 1px solid #7c6738 !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  line-height: 14px !important;
  color: #e8e0c0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.65) !important;
  pointer-events: auto !important;
  max-width: 175px !important;
}

#u20trk .u2trh {
  text-align: center;
  background: linear-gradient(180deg, #3a2e1d 0%, #1e170e 100%) !important;
  border-bottom: 1px solid #735928 !important;
  color: #ffd76a !important;
  font-size: 11px !important;
  padding: 3px 5px !important;
  font-weight: bold !important;
  cursor: pointer !important;
}

#u20trk > div[data-q],
#u20trk > div:not(.u2trh) {
  padding: 4px 6px !important;
  cursor: pointer !important;
}

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

body.u2m:has(#panel:not(.hidden)) #u20trk,
body.mob:has(#panel:not(.hidden)) #u20trk,
body.u2m.u20win #u20trk,
body.mob.u20win #u20trk,
body:has(#modal:not(.hidden)) #u20trk {
  display: none !important;
}

/* ====================================================================
 * TỰ ĐỘNG QUÉT VÀ CÂN GIỮA BẢNG KHI MỞ TRÊN MOBILE (DỌC & NGANG)
 * ==================================================================== */
@media (orientation: landscape) and (max-height: 600px) {
  body.u2m #panel,
  body.mob #panel,
  body:not(.u20) #panel {
    width: min(88vw, 560px) !important;
    max-width: 88vw !important;
    max-height: min(90vh, 370px) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 80 !important;
    pointer-events: auto !important;
  }
  body.u2m #modal .mbox,
  body.mob #modal .mbox,
  body:not(.u20) #modal .mbox {
    max-width: min(88vw, 560px) !important;
    max-height: min(90vh, 370px) !important;
  }
}

/* Nút Thoát Chiến Trường Tống Kim */
.tk-exit-battle-btn {
  position: absolute;
  top: 114px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 92;
  background: linear-gradient(180deg, #991b1b, #5b0f0f);
  border: 1.5px solid #f87171;
  color: #fff !important;
  font-weight: bold;
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, background 0.15s;
}
.tk-exit-battle-btn:hover {
  background: linear-gradient(180deg, #b91c1c, #7f1d1d);
  transform: translateX(-50%) scale(1.04);
}

/* Khung Thông Báo Lời Mời Tỷ Thí Nổi */
#duelInvBar {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: linear-gradient(180deg, #241812, #14100c);
  border: 2px solid #e09828;
  border-radius: 8px;
  padding: 12px 18px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.85);
  color: #ded2b8;
  font-family: inherit;
  min-width: 290px;
  max-width: 92vw;
  text-align: center;
}