/* ============================================================================
   CUSTOM PORT CSS FOR VOLAMIDLE_SITE
   Replaces #hud with #top + #topBuffBar, replaces #pad with #bottomBar,
   styles Auto VLTK modal, Skill 120/150 tree/modal, and preserves UI 2.0.
   ============================================================================ */

/* Hide old hud, pad, topCtl, inBtn so #top and #bottomBar take their place */
#hud, #pad, #topCtl, #inBtn {
  display: none !important;
}

/* 1. TOPBAR (#top) */
body.u20 #top, #top {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: clamp(640px, 62vw, 920px) !important;
  max-width: 96vw !important;
  height: 34px !important;
  min-height: 34px !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  padding: calc(2px + var(--safe-t)) 10px 3px !important;
  background: linear-gradient(#1c241e, #0b0f0d) !important;
  border: 2px solid #5a4825 !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.85) !important;
  box-sizing: border-box !important;
}
.top-stat.lv{display:flex;align-items:center;gap:3px;background:linear-gradient(#151f18,#0a0d0b);border:1.5px solid #d4af37;border-radius:4px;padding:1px 6px;height:24px;font-size:11px;color:#2ecc71;white-space:nowrap;box-shadow:inset 0 0 4px #000}
.top-stat.lv .top-tag{color:#ffd24a;font-weight:bold;font-size:10.5px}
.top-stat.lv b{color:#2ecc71;font-weight:bold;font-size:12px;text-shadow:0 0 3px rgba(46,204,113,0.6)}
.top-bar{position:relative;flex:1;height:16px;background:#050706;border:1.5px solid #554425;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 6px #000}
.top-bar i{position:absolute;inset:0;width:0;transition:width .15s linear;border-radius:1px}
.top-bar span{position:absolute;inset:0;font-size:9.5px;line-height:16px;text-align:center;color:#fff;text-shadow:0 1px 2px #000, 0 0 3px #000, 1px 0 2px #000;font-weight:bold;white-space:nowrap;letter-spacing:0.3px}
.top-bar.hp i{background:url(ui/bar_hp.png) 0 0 / 100% 100%,linear-gradient(to bottom, #ff6b6b, #c0392b 55%, #7a1510 100%)}
.top-bar.mp i{background:url(ui/bar_mp.png) 0 0 / 100% 100%,linear-gradient(to bottom, #70a1ff, #2980b9 55%, #0f3e6d 100%)}
.top-bar.xp i{background:url(ui/bar_xp.png) 0 0 / 100% 100%,linear-gradient(to bottom, #fed330, #d35400 55%, #782800 100%)}
.top-speed-btn{border:1px solid #e6c67a;border-radius:4px;background:#1a231d;color:#ffd24a;font-size:10px;padding:2px 6px;height:22px;white-space:nowrap;cursor:pointer}
.top-speed-btn.on{background:#3a2810;box-shadow:0 0 6px #ffd24a88}
.top-pk-btn{border:1px solid #2ecc71;border-radius:4px;background:rgba(39,174,96,0.25);color:#2ecc71;font-size:10px;font-weight:bold;padding:1px 6px;height:22px;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:3px;margin:0 2px;transition:all .2s;}
.top-pk-btn:hover{filter:brightness(1.2);}


#top {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: clamp(640px, 62vw, 920px) !important;
  max-width: 96vw !important;
  height: 34px !important;
  min-height: 34px !important;
  z-index: 25 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  padding: calc(2px + var(--safe-t, 0px)) 10px 3px !important;
  background: linear-gradient(#1c241e, #0b0f0d) !important;
  border: 2px solid #5a4825 !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.85) !important;
  box-sizing: border-box !important;
}

#top .top-stat.lv {
  cursor: pointer;
  transition: transform 0.1s;
}
#top .top-stat.lv:hover {
  filter: brightness(1.2);
  transform: scale(1.05);
}

.top-account-box {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.5);
  border: 1px solid #5a4825;
  border-radius: 4px;
  padding: 1px 6px;
  height: 22px;
  font-size: 11px;
}
.top-account-box a {
  color: #ffd24a;
  cursor: pointer;
  text-decoration: none;
}
.top-account-box a:hover {
  text-decoration: underline;
}

.top-gm-btn {
  border: 1px solid #e74c3c;
  border-radius: 4px;
  background: rgba(192, 57, 43, 0.25);
  color: #e74c3c;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 6px;
  height: 22px;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 2px;
  transition: all 0.2s;
}
.top-gm-btn:hover {
  filter: brightness(1.25);
}

/* 2. TOP BUFF BAR & POPUP */
#topBuffBar, .top-buff-bar {
  position: fixed !important;
  top: 56px !important;
  left: 10px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: 240px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  padding: 0 !important;
  z-index: 100 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}
#topBuffBar:empty {
  display: none !important;
}
.tbb-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px 2px 3px;
  background: rgba(12, 16, 14, 0.88);
  border: 1px solid #8c6d32;
  border-radius: 6px;
  font-size: 10px;
  color: #f0e6d0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  transition: transform 0.12s, filter 0.12s;
  user-select: none;
}
.tbb-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.18);
}
.tbb-pill .tbb-ic {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  object-fit: contain;
  flex-shrink: 0;
  border: 1px solid rgba(255, 215, 0, 0.4);
  background: #080a09;
}
.tbb-pill .tbb-em {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  border-radius: 3px;
  border: 1px solid rgba(255, 215, 0, 0.4);
  background: #080a09;
}
.tbb-pill .tbb-lv {
  font-size: 10px;
  font-weight: bold;
  color: #f5cd79;
  white-space: nowrap;
}
.tbb-pill .tbb-time {
  font-size: 9.5px;
  color: #7bed9f;
  white-space: nowrap;
}
.tbb-pill.tbb-active {
  box-shadow: 0 0 0 1px #ffd700, 0 3px 8px rgba(0, 0, 0, 0.95);
  filter: brightness(1.22);
}
#tbbInfoPopup {
  position: fixed;
  z-index: 9999;
  width: 270px;
  max-width: 92vw;
  background: linear-gradient(180deg, rgba(16, 20, 18, 0.97) 0%, rgba(10, 12, 11, 0.98) 100%);
  border: 1.5px solid #c89b3c;
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.92), inset 0 0 12px rgba(200, 155, 60, 0.12);
  padding: 9px 11px;
  color: #f0e6d0;
  font-size: 11.5px;
  line-height: 1.45;
  pointer-events: auto;
  display: none;
  box-sizing: border-box;
}
#tbbInfoPopup.on {
  display: block;
}
#tbbInfoPopup .tbbp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(200, 155, 60, 0.35);
  padding-bottom: 6px;
  margin-bottom: 6px;
}
#tbbInfoPopup .tbbp-ic {
  width: 34px;
  height: 34px;
  border-radius: 5px;
  border: 1px solid #c89b3c;
  background: #070908;
  object-fit: contain;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
#tbbInfoPopup .tbbp-title-wrap {
  flex: 1;
  min-width: 0;
}
#tbbInfoPopup .tbbp-name {
  font-size: 13px;
  font-weight: bold;
  color: #ffd24a;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
#tbbInfoPopup .tbbp-lv {
  font-size: 11px;
  color: #7bed9f;
  font-weight: bold;
  white-space: nowrap;
}
#tbbInfoPopup .tbbp-sub {
  font-size: 10.5px;
  color: #a4b0be;
  margin-top: 2px;
}
#tbbInfoPopup .tbbp-dur {
  display: inline-block;
  font-size: 11px;
  color: #70a1ff;
  background: rgba(30, 55, 90, 0.45);
  border: 1px solid rgba(112, 161, 255, 0.35);
  border-radius: 4px;
  padding: 2px 6px;
  margin-bottom: 6px;
}
#tbbInfoPopup .tbbp-desc {
  font-size: 11px;
  color: #dcdde1;
  font-style: italic;
  margin-bottom: 6px;
}
#tbbInfoPopup .tbbp-attrs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #7bed9f;
  font-size: 11.5px;
}
#tbbInfoPopup .tbbp-attr-line {
  padding-left: 8px;
  position: relative;
}
#tbbInfoPopup .tbbp-attr-line::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #f5cd79;
}
#tbbInfoPopup .tbbp-close {
  cursor: pointer;
  color: #a4b0be;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  margin-left: 4px;
}
#tbbInfoPopup .tbbp-close:hover {
  color: #ff6b81;
}

/* 3. BOTTOMBAR (#bottomBar) */
#bottomBar {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 0 !important;
  z-index: 22 !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 98vw !important;
  height: auto;
  background: linear-gradient(180deg, rgba(28, 22, 16, 0.98) 0%, rgba(12, 10, 8, 0.99) 100%);
  border: 2px solid #755b2d;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,215,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px 8px calc(4px + var(--safe-b, 0px)) 8px;
  box-sizing: border-box;
}

/* Hàng trên: Nút xoay chiêu + Nút Đồ đệ + Ô Chat dài xuyên suốt */
.bb-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 22px;
}
.bb-rot-btn {
  height: 22px;
  padding: 0 8px;
  border-radius: 3px;
  border: 1.5px solid #755b2d;
  background: linear-gradient(180deg,#2b2214 0%,#120e08 100%);
  color: #f5cd79;
  font-size: 10.5px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1;
  box-shadow: inset 0 0 4px #000;
  transition: all .1s;
  flex: none;
}
.bb-rot-btn:hover { border-color: #ffd24a; color: #fff; }
.bb-rot-btn.on {
  border-color: #f1c40f;
  background: linear-gradient(180deg,#423013 0%,#1c1508 100%);
  color: #ffeaa7;
  box-shadow: 0 0 5px rgba(241,196,15,0.4);
}
.bb-chat-bar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  font-size: 10.5px;
  background: rgba(0,0,0,0.65);
  border: 1px solid #5a4825;
  border-radius: 3px;
  padding: 0 8px;
  color: #eee;
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.8);
}
.bb-chat-tag { color: #ffd24a; font-weight: bold; font-size: 10px; white-space: nowrap; flex: none; }
.bb-chat-txt { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Hàng dưới: 9 Phím tắt bên trái - 2 Ô Skill Trái/Phải ở giữa - Menu Icon ở bên phải */
.bb-row-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.bb-slots-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.bb-slot {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 4px;
  border: 1.5px solid #5a4825;
  background: url(ui/slot.png) center / 100% 100%, #121815;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 6px #000, 0 1px 4px rgba(0,0,0,0.7);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.1s, transform 0.1s;
}
.bb-slot:hover { border-color: #ffd24a; transform: translateY(-1px); }
.bb-slot.empty { opacity: 0.45; border-style: dashed; }
.bb-slot.cur { border-color: #ffd24a; box-shadow: 0 0 8px #ffd24a88, inset 0 0 4px #ffd24a; }
.bb-slot.pot-hp { background: radial-gradient(circle at 45% 40%,#661b14,#180b09); border-color: #e74c3c; }
.bb-slot.pot-mp { background: radial-gradient(circle at 45% 40%,#1a3d6e,#0b1322); border-color: #3498db; }
.bb-slot.pot-tp { background: radial-gradient(circle at 45% 40%,#5a3f1a,#1a1106); border-color: #f1c40f; }
.bb-slot.pot-hp .slot-ic { background-image: url('img/i/pot4.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
.bb-slot.pot-mp .slot-ic { background-image: url('img/i/pot9.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
.bb-slot.pot-tp .slot-ic { background-image: url('ui/thodia.png'); background-size: contain; background-repeat: no-repeat; background-position: center; }
.bb-slot .slot-ic { position: absolute; inset: 2px; background-size: contain; background-repeat: no-repeat; background-position: center; border-radius: 2px; }
.bb-slot .slot-num { position: absolute; bottom: 1px; left: 3px; font-size: 9.5px; color: #f1c40f; text-shadow: 0 0 2px #000, 1px 1px 1px #000; font-weight: bold; z-index: 2; line-height: 1; }
.bb-slot .slot-badge { position: absolute; top: 1px; right: 2px; font-size: 9.5px; color: #fff; text-shadow: 0 0 2px #000, 1px 1px 1px #000; font-weight: bold; z-index: 2; line-height: 1; }
.bb-slot .cd { position: absolute; inset: 0; background: conic-gradient(#000b var(--p,0%),transparent 0); z-index: 3; pointer-events: none; }

/* Khung đôi 2 ô kỹ năng Tay Trái & Tay Phải ở giữa chuẩn Võ Lâm Truyền Kỳ */
.bb-skill-pair {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  background: linear-gradient(180deg, #18221b 0%, #0a0f0d 100%);
  border: 1.5px solid #8e6c31;
  border-radius: 5px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.85), 0 2px 5px rgba(0,0,0,0.6), 0 0 8px rgba(142,108,49,0.35);
  position: relative;
  flex: none;
}
.bb-skill-pair::before {
  content: '❖';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #ffd24a;
  text-shadow: 0 0 4px #000;
  pointer-events: none;
  line-height: 1;
}
.bb-skill-slot {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 4px;
  border: 1.5px solid #5a4825;
  background: url(ui/slot.png) center / 100% 100%, #121815;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 0 6px #000, 0 1px 3px rgba(0,0,0,0.7);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  user-select: none;
  padding: 0;
  outline: none;
}
.bb-skill-slot:hover {
  border-color: #ffd24a;
  box-shadow: inset 0 0 4px #000, 0 0 8px rgba(255,210,74,0.65);
  transform: translateY(-1px);
}
.bb-skill-slot:active { transform: scale(0.95); }
.bb-skill-slot.active {
  border-color: #ffe14a;
  box-shadow: 0 0 8px rgba(255,225,74,0.7), inset 0 0 5px rgba(255,225,74,0.3);
}
.bb-skill-ic {
  width: 36px;
  height: 36px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 3px;
  pointer-events: none;
}
.bb-skill-badge {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 9.5px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 2px #000, 1px 1px 1px #000;
  line-height: 1;
  pointer-events: none;
}
.bb-skill-tag {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8.5px;
  color: #ffd24a;
  background: rgba(0,0,0,0.85);
  padding: 0 3px;
  border-radius: 2px;
  line-height: 1.1;
  pointer-events: none;
  letter-spacing: 0.3px;
  white-space: nowrap;
  font-weight: bold;
  border: 0.5px solid rgba(255,210,74,0.3);
}

/* Khung các Icon Menu (Nhân vật, Túi đồ, Kỹ năng,...) nằm bên phải Ô Skill Trái/Phải */
#bottomBar #u20menu,
body.u20 #bottomBar #u20menu,
#u20menu {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  top: auto !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 4px !important;
  background: linear-gradient(180deg, #18221b 0%, #0a0f0d 100%) !important;
  border: 1.5px solid #8e6c31 !important;
  border-radius: 5px !important;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.85), 0 2px 5px rgba(0,0,0,0.6), 0 0 8px rgba(142,108,49,0.35) !important;
  margin: 0 !important;
  flex: none !important;
}

#bottomBar #u20menu .u20mi,
body.u20 .u20mi,
.u20mi {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 1.5px solid #5a4825 !important;
  border-radius: 4px !important;
  background-color: #121815 !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  background-size: 126px 42px !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s !important;
  outline: none !important;
  display: inline-block !important;
  box-shadow: inset 0 0 6px #000, 0 1px 3px rgba(0,0,0,0.7) !important;
}

#bottomBar #u20menu .u20mi:hover,
body.u20 .u20mi:hover,
.u20mi:hover {
  background-position: -42px 0 !important;
  border-color: #ffd24a !important;
  box-shadow: inset 0 0 4px #000, 0 0 8px rgba(255,210,74,0.65) !important;
  transform: translateY(-1px) !important;
}

#bottomBar #u20menu .u20mi.on,
body.u20 .u20mi.on,
.u20mi.on {
  background-position: -84px 0 !important;
  border-color: #ffe14a !important;
  box-shadow: 0 0 8px rgba(255,225,74,0.7), inset 0 0 5px rgba(255,225,74,0.3) !important;
}

#bottomBar #u20menu .u20mi .dot {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #e33 !important;
  display: none !important;
  box-shadow: 0 0 4px #e33 !important;
}
#bottomBar #u20menu .u20mi .dot.on {
  display: block !important;
}

/* 4. AUTO VLTK MODAL */
.ios-switch-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  cursor: pointer;
  padding: 2px 4px;
}
.ios-switch-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.ios-switch-row .ios-switch {
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 24px;
  border: 1.5px solid #5a4825;
  border-radius: 999px;
  background: #1a1610;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}
.ios-switch-row .ios-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #c5a870;
  box-shadow: 0 1px 3px rgba(0,0,0,0.9);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
}
.ios-switch-row input:checked + .ios-switch {
  border-color: #ffd86b;
  background: linear-gradient(180deg, #785a21, #483410);
  box-shadow: 0 0 8px rgba(255, 216, 107, 0.4), inset 0 0 4px rgba(255,255,255,0.15);
}
.ios-switch-row input:checked + .ios-switch::after {
  transform: translateX(18px);
  background: #fff3c9;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 6px #ffd86b;
}
.ios-switch-row input:disabled + .ios-switch {
  opacity: 0.4;
  cursor: not-allowed;
}

.auto-config {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  font-family: inherit;
  box-sizing: border-box;
  overflow-x: hidden;
}
.pc-modal-wrapper {
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;
}
.auto-tabs {
  overflow-x: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.auto-tabs button {
  flex: 1 1 auto;
  padding: 5px 8px;
  font-size: 11.5px;
  text-align: center;
  white-space: nowrap;
}
.auto-section {
  padding: 8px 10px;
  border: 1px solid #5a4220;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(28, 22, 16, 0.85) 0%, rgba(14, 11, 8, 0.95) 100%);
  box-shadow: inset 0 1px 0 rgba(255,215,0,0.1), 0 2px 6px rgba(0,0,0,0.5);
}
.auto-section h4 {
  margin: 0 0 6px;
  padding: 0 2px 4px;
  border-bottom: 1px solid #5a4220;
  color: #ffd86b;
  font-size: 13.5px;
  line-height: 1.2;
  letter-spacing: 0.3px;
}
.auto-section small {
  display: block;
  margin: 6px 2px 2px;
  color: #a8b3ac;
  font-size: 11px;
  line-height: 1.35;
}

.auto-range {
  display: grid;
  grid-template-columns: minmax(80px, 0.7fr) minmax(0, 1.8fr);
  gap: 8px;
  align-items: center;
  margin: 6px 2px 4px;
}
.auto-range > span {
  color: #ddd;
  font-size: 12.5px;
}
.auto-range [role="group"] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.auto-range button {
  min-height: 28px;
  padding: 3px 6px;
  border: 1px solid #755b2d;
  border-radius: 4px;
  background: linear-gradient(180deg, #241c12, #120e09);
  color: #ccc;
  font-size: 11.5px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.auto-range button:hover {
  border-color: #ffd86b;
  color: #fff;
}
.auto-range button[aria-pressed="true"] {
  border-color: #f1c40f;
  background: linear-gradient(180deg, #5c4316, #2e2008);
  color: #ffeaa7;
  font-weight: bold;
  box-shadow: 0 0 6px rgba(241, 196, 15, 0.4), inset 0 0 0 1px rgba(255, 234, 167, 0.3);
}

.auto-skill-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px auto 4px;
  max-width: 480px;
}
.auto-skill {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  min-width: 0;
  cursor: pointer;
  text-align: center;
  padding: 6px 4px;
  background: rgba(0,0,0,0.3);
  border: 1px solid #3d2f16;
  border-radius: 6px;
}
.auto-skill:hover {
  border-color: #755b2d;
}
.auto-skill > img, .auto-skill-empty {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  max-width: 100%;
  border: 1.5px solid #d4af37;
  border-radius: 50%;
  background: radial-gradient(#261d10, #0c0905 75%);
  object-fit: contain;
  box-shadow: 0 2px 5px rgba(0,0,0,0.8);
}
.auto-skill.empty {
  opacity: 0.5;
  cursor: default;
}
.auto-skill > small {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  color: #ddd;
}
.auto-skill input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.auto-mini-switch {
  position: relative;
  display: block;
  width: 32px;
  height: 18px;
  border: 1px solid #5a4825;
  border-radius: 999px;
  background: #1a1610;
  transition: all 0.18s ease;
}
.auto-mini-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #a8946e;
  box-shadow: 0 1px 2px rgba(0,0,0,0.8);
  transition: transform 0.18s ease, background 0.18s ease;
}
.auto-skill input:checked + .auto-mini-switch {
  border-color: #ffd86b;
  background: #6e501a;
  box-shadow: 0 0 5px rgba(255, 216, 107, 0.4);
}
.auto-skill input:checked + .auto-mini-switch::after {
  transform: translateX(14px);
  background: #fff3c9;
}

.auto-threshold {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, 32%);
  gap: 8px;
  align-items: center;
}
.auto-stepper {
  display: grid;
  grid-template-columns: 28px minmax(36px, 1fr) 28px;
  align-items: center;
  overflow: hidden;
  border: 1.5px solid #755b2d;
  border-radius: 999px;
  background: #14100a;
  text-align: center;
}
.auto-stepper button {
  height: 26px;
  border: 0;
  background: linear-gradient(180deg, #423013, #241908);
  color: #ffd86b;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}
.auto-stepper button:hover {
  background: #5c4316;
  color: #fff;
}
.auto-stepper span {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12px;
  color: #ffeaa7;
  font-weight: bold;
}
.auto-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 4px 0 0 6px;
}
.auto-checks .ios-switch-row {
  font-size: 11.5px;
}

/* 5. SKILL 90/120/150 TREE & MODALS */
.skill-modal-wrap{width:100%;max-width:none;margin:0 auto}
.sk-header-bar{
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(#2c2214,#140f08);border:1px solid #755b2d;
  border-radius:5px;padding:8px 12px;margin-bottom:8px;box-shadow:inset 0 1px 3px rgba(255,215,0,0.2);
}
.sk-header-bar .f-name{font-size:14.5px;color:#ffd24a;font-weight:bold}
.sk-header-bar .pts-tag{font-size:13px;color:#2ecc71;font-weight:bold}

.sk-branch-tabs{
  display:flex;gap:5px;overflow-x:auto;padding-bottom:4px;margin-bottom:8px;scrollbar-width:none;
}
.sk-branch-tabs::-webkit-scrollbar{display:none}
.sk-b-tab{
  padding:5px 12px;border-radius:4px;border:1px solid #5a4825;background:#151d19;
  color:#aaa;font-size:12px;white-space:nowrap;cursor:pointer;transition:all .15s;
}
.sk-b-tab.on{
  border-color:#f1c40f;color:#ffd24a;background:linear-gradient(#3a2e16,#1c160a);
  font-weight:bold;box-shadow:0 0 6px rgba(241,196,15,0.3);
}

.sk-tree-list{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow-y:auto;padding-right:2px}
.sk-tree-list::-webkit-scrollbar{width:4px}
.sk-tree-list::-webkit-scrollbar-thumb{background:#5a4825;border-radius:2px}

.sk-node{
  display:grid;grid-template-columns:44px 1fr auto auto;gap:8px;align-items:center;
  padding:6px 10px;border:1px solid #3c4c44;border-radius:5px;background:rgba(20,28,24,0.75);
  transition:border-color .15s, background .15s;cursor:pointer;
}
.sk-node:hover{border-color:#755b2d;background:rgba(30,40,34,0.9)}
.sk-node.lock{opacity:0.5;filter:grayscale(0.6)}
.sk-node.main-active{border-color:#ffd24a;background:rgba(50,40,15,0.4);box-shadow:inset 2px 0 0 #ffd24a}

.sk-node .sk-ico{
  width:44px;height:44px;border-radius:4px;border:1.5px solid #554425;
  background:#0c120f center/contain no-repeat;position:relative;flex-shrink:0;
}
.sk-node .sk-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.sk-node .sk-meta b{font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-node.main-active .sk-meta b{color:#ffd24a}
.sk-node .sk-meta small{font-size:10.5px;color:#8a9a8f;line-height:1.2}
.sk-node .sk-lvl-info{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-right:2px}
.sk-node .sk-lvl-info .lvl-txt{font-size:12.5px;font-weight:bold;color:#ffd24a}
.sk-node .sk-lvl-info .bonus-txt{font-size:10px;color:#2ecc71}

.sk-node .sk-actions{display:flex;align-items:center;gap:4px}
.sk-node .sk-actions button{
  width:26px;height:26px;border-radius:3px;border:1px solid #5a4825;
  background:#1e2722;color:#ffd24a;font-weight:bold;font-size:13px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
}
.sk-node .sk-actions button.minus{color:#e74c3c;border-color:#7a3028}
.sk-node .sk-actions button:disabled{opacity:0.3;cursor:not-allowed}
.sk-node .sk-actions button:not(:disabled):active{transform:scale(0.92)}

.sk-quick-assign{
  display:flex;align-items:center;gap:3px;margin-top:4px;grid-column:2/5;
  padding-top:4px;border-top:1px dashed #2c3b35;flex-wrap:wrap;
}
/* CÂY KỸ NĂNG VÕ LÂM PC (Khung hiển thị vừa khít, không thanh cuộn dọc/ngang) */
.skt-container {
  width: 100%;
  box-sizing: border-box;
  background: #231b12 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" opacity="0.04"><rect width="40" height="40" fill="none" stroke="%23fff" stroke-width="1"/></svg>');
  border: 1.5px solid #66502e;
  border-radius: 4px;
  overflow: hidden !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  scrollbar-width: none;
}
.skt-container::-webkit-scrollbar {
  display: none;
}
.skt-grid-head {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex: none;
  background: linear-gradient(180deg, #3d301e 0%, #20180d 100%);
  border-bottom: 1.5px solid #66502e;
}
.skt-tier-corner {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  font-size: 10px;
  color: #ffd24a;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1.5px solid #66502e;
  font-weight: bold;
  padding: 3px 1px;
  box-sizing: border-box;
}
.skt-branches-head {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
.skt-col-hdr {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  padding: 3px 1px;
  text-align: center;
  font-size: 10.5px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(180deg, rgba(80,60,35,0.7) 0%, rgba(35,26,14,0.9) 100%);
  border-right: 1px solid #554124;
  text-shadow: 0 1px 2px #000;
  border-radius: 3px 3px 0 0;
  margin: 1px 1px 0;
  line-height: 1.15;
  word-break: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skt-col-hdr:last-child {
  border-right: none;
}
.skt-grid-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  justify-content: stretch;
  overflow: hidden;
}
.skt-row {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  border-bottom: 1px dashed rgba(117,91,45,0.35);
  position: relative;
  align-items: stretch;
}
.skt-row:last-child {
  border-bottom: none;
}
.skt-tier-label {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1.5px solid #66502e;
  background: rgba(20,15,10,0.55);
  font-size: 10px;
  font-weight: bold;
  color: #c9b382;
  text-shadow: 0 1px 2px #000;
  padding: 1px;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.1;
}
.skt-row-cells {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
.skt-cell-group, .skt-cell-empty {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px 3px;
  padding: 1px 1px;
  position: relative;
  border-right: 1px solid rgba(85,65,36,0.3);
  box-sizing: border-box;
  overflow: visible;
}
.skt-cell-group:last-child, .skt-cell-empty:last-child {
  border-right: none;
}
.skt-v-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(117,91,45,0.25);
  pointer-events: none;
  z-index: 0;
}
.skt-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  cursor: pointer;
  transition: transform 0.12s, filter 0.12s;
  max-width: 100%;
  flex-shrink: 1;
}
.skt-node:hover {
  transform: scale(1.08);
  z-index: 10;
}
.skt-node-icon {
  width: clamp(32px, 4.4vh, 42px);
  height: clamp(32px, 4.4vh, 42px);
  border-radius: 4px;
  border: 1.5px solid #755b2d;
  background: #111a14 center/contain no-repeat;
  box-shadow: 0 2px 5px rgba(0,0,0,0.8), inset 0 0 4px #000;
  position: relative;
  flex-shrink: 0;
}
.skt-node.learned .skt-node-icon {
  border-color: #ffd24a;
  box-shadow: 0 0 7px rgba(255,210,74,0.5), inset 0 0 4px #000;
}
.skt-node.main .skt-node-icon {
  border-color: #2ecc71;
  box-shadow: 0 0 9px rgba(46,204,113,0.8);
}
.skt-node.lock {
  opacity: 0.5;
  filter: grayscale(0.7);
}
.skt-node-pts {
  position: absolute;
  top: -6px;
  right: -5px;
  background: #1c271e;
  border: 1px solid #755b2d;
  border-radius: 4px;
  padding: 0 3px;
  font-size: 9.5px;
  font-weight: bold;
  color: #ffd24a;
  line-height: 12px;
  text-shadow: 0 1px 1px #000;
  white-space: nowrap;
}
.skt-node-pts.has-bonus {
  color: #2ecc71;
  border-color: #2ecc71;
  background: #0f2415;
  box-shadow: 0 0 4px rgba(46, 204, 113, 0.4);
}
.skt-node-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: rgba(0,0,0,0.4);
}
.skt-node-name {
  font-size: 9px;
  font-weight: 500;
  color: #e5d3aa;
  text-align: center;
  line-height: 1.1;
  text-shadow: 0 1px 2px #000;
  max-width: 100%;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.sk-quick-assign span{font-size:10px;color:#8a9a8f;margin-right:2px}
.sk-quick-assign button{
  font-size:10px;padding:2px 6px;border-radius:2px;border:1px solid #4a5f55;
  background:#131c17;color:#ddd;cursor:pointer;
}
.sk-quick-assign button.on{border-color:#ffd24a;background:#3a2e16;color:#ffd24a;font-weight:bold}
.sk-quick-assign button.set-main{margin-left:auto;border-color:#e67e22;color:#f39c12}

.reborn-tag{display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:4px;background:linear-gradient(135deg,#3d170c,#210903);border:1px solid #ff7a45;color:#ffd7a8;font-size:11px;font-weight:500;box-shadow:0 0 6px rgba(255,122,69,0.35);cursor:pointer;vertical-align:middle;transition:all .15s}
.reborn-tag:hover{background:linear-gradient(135deg,#542010,#300d04);border-color:#ffa578;color:#fff}
/* Bảng Chi Tiết Kỹ Năng Chuẩn Võ Lâm PC */
.mbox.sk-detail-box {
  width: auto !important;
  min-width: 290px !important;
  max-width: 380px !important;
  padding: 12px 14px !important;
  background: rgba(14, 22, 18, 0.96) !important;
  border: 1.5px solid #755b2d !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.9), inset 0 0 10px rgba(0,0,0,0.8) !important;
  border-radius: 4px !important;
  backdrop-filter: blur(4px);
}
.sk-pc-tt {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font, system-ui);
  font-size: 11.5px;
  line-height: 1.4;
  color: #ddd;
}
.sk-pc-tt-title {
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: #ffd24a;
  text-shadow: 0 1px 2px #000;
  margin-bottom: 2px;
}
.sk-pc-tt-desc {
  color: #c9b382;
  font-size: 11px;
  text-align: center;
  margin-bottom: 4px;
  line-height: 1.35;
}
.sk-pc-tt-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed rgba(117,91,45,0.4);
  padding-bottom: 4px;
  font-size: 11px;
}
.sk-pc-tt-sub .route {
  color: #e74c3c;
  font-weight: bold;
}
.sk-pc-tt-sub .route span {
  color: #ffd24a;
}
.sk-pc-tt-cur {
  font-size: 11.5px;
  font-weight: bold;
  color: #8fb8ff;
  margin-top: 4px;
}
.sk-pc-tt-cur span.pts {
  color: #2ecc71;
  font-weight: normal;
}
.sk-pc-tt-list {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  padding-left: 2px;
  color: #eee;
}
.sk-pc-tt-next-title {
  font-size: 11.5px;
  font-weight: bold;
  color: #e74c3c;
  margin-top: 6px;
  border-top: 1px dashed rgba(117,91,45,0.4);
  padding-top: 4px;
}
.sk-pc-tt-next-list {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  padding-left: 2px;
  color: #e74c3c;
}
.sk-pc-tt-tiers {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  border-left: 3px solid #f39c12;
  font-size: 11px;
  line-height: 1.45;
}
.sk-pc-tt-tier-head {
  font-weight: bold;
  font-size: 11.5px;
  margin-bottom: 4px;
}
.sk-pc-tt-tier-item {
  margin-top: 4px;
}
.sk-pc-tt-tier-name {
  font-weight: bold;
}
.sk-pc-tt-tier-desc {
  color: #bbb;
  padding-left: 8px;
  font-size: 10.5px;
}
.sk-pc-tt-extra {
  margin-top: 4px;
  padding: 4px 6px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(117,91,45,0.3);
  border-radius: 3px;
  font-size: 10.5px;
}
.sk-pc-tt-btns {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  justify-content: center;
}
.sk-pc-tt-btns .btn {
  padding: 4px 12px;
  font-size: 11.5px;
  font-weight: bold;
}

/* Nut cong diem truc tiep tren cay ky nang */
.skt-node.can-learn .skt-node-icon {
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.6);
  border-color: #2ecc71;
}
.skt-plus-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 17px;
  height: 17px;
  line-height: 15px;
  font-size: 13px;
  font-weight: bold;
  background: #27ae60 !important;
  color: #fff !important;
  border: 1px solid #2ecc71 !important;
  border-radius: 50% !important;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  transition: transform 0.15s, background 0.15s;
}
.skt-plus-btn:hover {
  background: #2ecc71 !important;
  transform: scale(1.2);
}

/* 6. DISCIPLE TABS IN SKILL & CHARACTER */
.pc-disc-tabs-bar {
  display: flex;
  gap: 4px;
  align-items: center;
  background: #14110b;
  border: 1px solid #5a4825;
  border-radius: 4px;
  padding: 3px 6px;
  margin-bottom: 6px;
}
.pc-disc-tab-btn {
  padding: 3px 8px;
  border: 1px solid #5a4825;
  border-radius: 3px;
  background: #241c12;
  color: #c0b090;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pc-disc-tab-btn.on {
  border-color: #ffd24a;
  background: #423013;
  color: #ffd24a;
  box-shadow: 0 0 5px rgba(255, 210, 74, 0.4);
}
.pc-disc-tab-btn .pn {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #000;
  color: #ffd24a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}

/* ============================================================
   HỆ THỐNG 3 CỬA SỔ PC ĐỘC LẬP (F1/C Nhân Vật, V/F3 Kỹ Năng, B/F4 Hành Trang)
   ============================================================ */
#pcWindowsOverlay {
  position: absolute;
  top: 36px;
  bottom: 58px;
  left: 6px;
  right: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 80;
}
#pcWindowsOverlay.hidden {
  display: none !important;
}

.pc-win {
  pointer-events: auto;
  height: 75vh;
  max-height: calc(100vh - 100px);
  flex: 1 1 0;
  max-width: calc(33.333% - 6px);
  min-width: 280px;
  background: linear-gradient(180deg, rgba(22, 18, 14, 0.98) 0%, rgba(12, 10, 8, 0.98) 100%);
  border: 1px solid #7c6237;
  border-radius: 6px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.85), inset 0 0 12px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.pc-win.hidden {
  display: none !important;
}

#pcWinChar { order: 1; }
#pcWinSkill { 
  order: 2; 
  min-width: 340px; 
  flex: 1.35 1 0;
  max-width: calc(48% - 6px);
}
#pcWinInv { order: 3; }

.pc-win-head {
  flex: none;
  height: 32px;
  background: linear-gradient(180deg, #3c2c18 0%, #20170b 100%);
  border-bottom: 1px solid #7c6237;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  user-select: none;
}
.pc-win-title {
  color: #f5cd79;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px #000;
}
.pc-win-close {
  background: transparent;
  border: none;
  color: #a89474;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s, transform 0.15s;
}
.pc-win-close:hover {
  color: #ff5252;
  transform: scale(1.15);
}

.pc-win-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
}
.pc-win-body::-webkit-scrollbar {
  width: 5px;
}
.pc-win-body::-webkit-scrollbar-thumb {
  background: #5a4520;
  border-radius: 3px;
}
.pc-win-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
}

/* Cho bảng kỹ năng trong cửa sổ PC mở rộng kín khung không scrollbar */
#pcWinSkill .pc-win-body {
  display: flex;
  flex-direction: column;
  padding: 4px 6px;
  overflow: hidden !important;
  height: 100%;
  box-sizing: border-box;
}
#pcWinSkill .skill-modal-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
#pcWinSkill .skt-container {
  flex: 1 1 0;
  max-height: none;
  min-height: 0;
  height: 100%;
  overflow: hidden !important;
}

/* Khi mở trong #t-skill (#panel), mở rộng kích thước phù hợp để cây kỹ năng hiển thị trọn vẹn */
body.u20.u20win #panel:has(#t-skill:not(.hidden)) {
  width: min(720px, 85vw) !important;
  max-width: 800px !important;
  max-height: calc(100vh - 100px) !important;
}

#panel .skill-modal-wrap {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: calc(100vh - 160px) !important;
  overflow: visible !important;
}

#panel .skt-container {
  height: auto !important;
  max-height: calc(100vh - 220px) !important;
  overflow-y: auto !important;
  flex: none !important;
}

#panel .skt-grid-body {
  height: auto !important;
  overflow: visible !important;
  flex: none !important;
}

#panel .skt-row {
  height: auto !important;
  min-height: 52px !important;
  flex: none !important;
}

/* ============================================================
   BẢNG HÀNH TRANG & CỬA SỔ NỔI (#panel) TỐI ƯU GIAO DIỆN PC / U20
   ============================================================ */
body.u20win #panel,
body.u20.u20win #panel,
body.compact.u20win #panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1000 !important;
}

/* Cửa sổ Hành trang U20 căn giữa màn hình, rõ ràng, không bị che khuất */
body.u20.u20win[data-u2t="inv"] #panel {
  position: fixed !important;
  left: 50% !important;
  top: 55px !important;
  transform: translateX(-50%) !important;
  width: min(460px, 94vw) !important;
  max-height: calc(100vh - 120px) !important;
  display: block !important;
  z-index: 1000 !important;
  box-shadow: 0 0 25px rgba(0,0,0,0.85), 0 0 0 1px #755b2d !important;
  border-radius: 4px !important;
  background: rgba(18, 20, 16, 0.96) !important;
}

body.u20.u20win[data-u2t="inv"] #panel .u2bag {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 6px 12px !important;
}

body.u20.u20win[data-u2t="inv"] #panel .invgrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)) !important;
  gap: 4px !important;
  max-height: 48vh !important;
  overflow-y: auto !important;
  padding: 4px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid #4a3e20 !important;
  border-radius: 3px !important;
}

body.u20.u20win[data-u2t="inv"] #panel .u2money {
  display: grid !important;
  grid-template-columns: auto 1fr auto 1fr !important;
  gap: 4px 8px !important;
  align-items: center !important;
  background: rgba(0, 0, 0, 0.4) !important;
  padding: 4px 8px !important;
  border: 1px solid #4a3e20 !important;
  border-radius: 3px !important;
  font-size: 11.5px !important;
}

body.u20.u20win[data-u2t="inv"] #panel .u2btns {
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}

body.u20.u20win[data-u2t="inv"] #panel .u2btns .btn {
  flex: 1 1 auto !important;
  text-align: center !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
}

/* Nút Đồ đệ xuất chiến nổi bật trên bottomBar */
#awayBtn.on {
  border-color: #2ecc71 !important;
  color: #2ecc71 !important;
  background: rgba(46, 204, 113, 0.15) !important;
}
#awayBtn:not(.on) {
  border-color: #e67e22 !important;
  color: #f39c12 !important;
  background: rgba(230, 126, 34, 0.15) !important;
}

/* Bỏ bớt icon tay cầm chơi game ở cột nổi góc phải màn hình (#u20rc) */
#u20rc #u20tt,
#u20tt {
  display: none !important;
}

/* Modal Bảng Hành Trang (InvModal) */
.pc-inv-modal-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 620px;
  margin: 0 auto;
  color: #dcdde1;
  font-family: inherit;
}
.pc-inv-modal-wrap .invgrid {
  display: grid !important;
  grid-template-columns: repeat(10, 36px) !important;
  gap: 3px !important;
  justify-content: center !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  background: rgba(0, 0, 0, 0.45) !important;
  padding: 6px !important;
  border: 1px solid #554425 !important;
  border-radius: 4px !important;
}
.pc-inv-modal-wrap .invgrid .it {
  width: 36px !important;
  height: 36px !important;
}
.pc-inv-modal-wrap .u2money {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: rgba(0, 0, 0, 0.5) !important;
  padding: 6px 12px !important;
  border: 1px solid #554425 !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}
.pc-inv-modal-wrap .u2btns {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.pc-inv-modal-wrap .u2btns .btn {
  flex: 1 1 calc(25% - 6px) !important;
  padding: 5px 8px !important;
  font-size: 11.5px !important;
  text-align: center !important;
}