/* Võ Lâm Mobile Landscape UI - Chuẩn phong cách Võ Lâm Mobile / Liên Quân Mobile */

/* 1. Màn hình game toàn phần 100vw x 100vh khi xoay ngang trên di động */
body.vli-mob-land {
  overflow: hidden !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

body.vli-mob-land #vli-pc-v24,
body.vli-mob-land #pc23-shell,
body.vli-mob-land #u20menu,
body.vli-mob-land #u20side,
body.vli-mob-land #u20r,
body.vli-mob-land #u20gold,
body.vli-mob-land #u20log,
body.vli-mob-land #u20boss,
body.vli-mob-land #u20rc,
body.vli-mob-land #u20rank,
body.vli-mob-land #u20zone,
body.vli-mob-land #tabs,
body.vli-mob-land #top,
body.vli-mob-land #pad,
body.vli-mob-land #hud,
body.vli-mob-land #topCtl,
body.vli-mob-land #vliacp-mobile-btn {
  display: none !important;
}

body.vli-mob-land #app {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  display: block !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #000 !important;
}

body.vli-mob-land #battle {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  flex: none !important;
  display: block !important;
  overflow: hidden !important;
  background: #0d1410 !important;
}

body.vli-mob-land #arena {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  touch-action: none !important;
  z-index: 1 !important;
}

/* Lớp UI Landscape Mobile tổng */
#vlm-layer {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  pointer-events: none !important;
  z-index: 100 !important;
}
body.vli-mob-land #vlm-layer {
  display: block !important;
}

/* Đảm bảo hộp thoại modal luôn hiển thị trên cùng trong chế độ ngang */
body.vli-mob-land #modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(0, 0, 0, 0.78) !important;
  pointer-events: auto !important;
}
body.vli-mob-land #modal.hidden {
  display: none !important;
}

/* 2. CẦN ANALOG DI CHUYỂN BÊN TRÁI (Virtual Joystick) */
#vlm-joy {
  position: fixed;
  left: calc(26px + env(safe-area-inset-left, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: 136px;
  height: 136px;
  z-index: 100;
  touch-action: none;
  user-select: none;
  pointer-events: auto;
}

.vlm-joy-base {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(20, 32, 26, 0.72), rgba(6, 12, 10, 0.88));
  border: 2px solid rgba(230, 198, 122, 0.45);
  box-shadow: 0 4px 18px rgba(0,0,0,0.65), inset 0 0 14px rgba(230, 198, 122, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vlm-joy-base::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px dashed rgba(230, 198, 122, 0.25);
  pointer-events: none;
}

.vlm-joy-knob {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7a5a2a, #2f2010);
  border: 2px solid #ffd87a;
  box-shadow: 0 3px 12px rgba(0,0,0,0.85), inset 0 2px 4px rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
}

.vlm-joy-knob-core {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #ffd466, #b08226);
  border: 1px solid #ffe9a6;
  box-shadow: 0 0 8px rgba(255, 212, 102, 0.5);
}

/* 3. CỤM PHÍM KỸ NĂNG & THUỐC BÊN PHẢI (Skills & Action Arc) */
#vlm-actions {
  position: fixed;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: 240px;
  height: 240px;
  z-index: 100;
  pointer-events: none;
}

.vlm-btn {
  position: absolute;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #a8864a;
  background: radial-gradient(circle at 40% 40%, #2c3a2f, #0c120f);
  box-shadow: 0 3px 10px rgba(0,0,0,0.7), inset 0 1px 2px rgba(255,255,255,0.25);
  padding: 0;
}

.vlm-btn:active {
  transform: scale(0.92);
  filter: brightness(1.25);
}

/* Nút Đánh Thường / Chiêu Chính lớn */
.vlm-btn-main {
  right: 6px;
  bottom: 6px;
  width: 72px;
  height: 72px;
  border: 3.5px solid #ffd466;
  background: radial-gradient(circle at 35% 35%, #5a4220, #1a1208);
  box-shadow: 0 0 18px rgba(255,212,102,0.5), 0 4px 14px rgba(0,0,0,0.85);
}

.vlm-btn-main .vlm-main-icon {
  width: 82%;
  height: 82%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.vlm-btn-main::after {
  content: "ĐÁNH";
  position: absolute;
  bottom: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #fff2c4;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
  letter-spacing: 0.5px;
}

/* Các phím Kỹ năng xếp hình cánh cung quanh nút chính */
.vlm-sk {
  width: 48px;
  height: 48px;
  border: 2px solid #e6c67a;
  background: radial-gradient(circle at 35% 35%, #24352a, #0b1410);
}

.vlm-sk .vlm-sk-icon {
  width: 90%;
  height: 90%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.vlm-sk .vlm-sk-key {
  position: absolute;
  top: 1px;
  left: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #ffd466;
  text-shadow: 0 1px 2px #000;
}

.vlm-sk .vlm-sk-lvl {
  position: absolute;
  bottom: 1px;
  right: 4px;
  font-size: 9px;
  font-weight: 700;
  color: #7fe37a;
  text-shadow: 0 1px 2px #000;
}

/* Vị trí hình quạt cánh cung */
.vlm-sk1 { right: 98px; bottom: 8px; }
.vlm-sk2 { right: 88px; bottom: 74px; }
.vlm-sk3 { right: 54px; bottom: 122px; }
.vlm-sk4 { right: 2px; bottom: 134px; }

/* Nút Bơm Máu đỏ (HP) và Bơm Mana xanh (MP) */
.vlm-pot {
  width: 42px;
  height: 42px;
}

.vlm-pot.vlm-hp {
  right: 156px;
  bottom: 8px;
  border-color: #ff6b6b;
  background: radial-gradient(circle at 35% 35%, #7a1f18, #2a0805);
  box-shadow: 0 0 10px rgba(255,80,80,0.35);
}

.vlm-pot.vlm-mp {
  right: 148px;
  bottom: 64px;
  border-color: #64b5f6;
  background: radial-gradient(circle at 35% 35%, #15457a, #05142a);
  box-shadow: 0 0 10px rgba(80,160,255,0.35);
}

.vlm-pot-icon {
  width: 24px;
  height: 24px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.vlm-pot.vlm-hp .vlm-pot-icon {
  background-image: url('vli-pc-v24/assets/ui-pak/862D5AB8.webp');
}

.vlm-pot.vlm-mp .vlm-pot-icon {
  background-image: url('vli-pc-v24/assets/ui-pak/885A4DE7.webp');
}

.vlm-pot-count {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 9.5px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

/* Nút Tiện ích (Thổ Địa Phù, Ngựa, Auto) */
.vlm-util {
  width: 36px;
  height: 36px;
  font-size: 13px;
  border-radius: 50%;
  border-color: #a8864a;
  background: radial-gradient(circle at 35% 35%, #333328, #11110a);
}

.vlm-util.tp { right: 114px; bottom: 140px; }
.vlm-util.ride { right: 66px; bottom: 180px; }
.vlm-util.auto { right: 14px; bottom: 192px; }

.vlm-util.on {
  border-color: #ffd466;
  box-shadow: 0 0 10px rgba(255,212,102,0.6);
  background: radial-gradient(circle at 35% 35%, #5c4418, #261b07);
}

/* Vòng xoay Cooldown */
.vlm-cd {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(rgba(0,0,0,0.7) var(--cd-p, 0%), transparent 0);
  pointer-events: none;
}

/* 4. THANH TIÊU ĐỀ TRÊN CÙNG GỌN GÀNG (Mobile Landscape Top Bar) */
#vlm-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(36px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) calc(12px + env(safe-area-inset-right, 0px)) 0 calc(12px + env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(8,12,10,0.92) 0%, rgba(8,12,10,0.5) 80%, transparent 100%);
  z-index: 150;
  pointer-events: auto;
}

.vlm-hero-info {
  display: flex;
  align-items: center;
  gap: 7px;
}

.vlm-avatar {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1.5px solid #e0b85a;
  background: var(--pl, none) center 12%/auto 135% no-repeat, radial-gradient(#2c3a2f, #0c120f);
  flex-shrink: 0;
}

.vlm-avatar-lvl {
  position: absolute;
  right: -5px;
  bottom: -4px;
  background: #000;
  border: 1px solid #ffd466;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 800;
  color: #ffd466;
  padding: 0 3px;
  line-height: 12px;
}

.vlm-vitals {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 95px;
}

.vlm-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #e6c67a;
  font-weight: 700;
  white-space: nowrap;
}

.vlm-bar {
  position: relative;
  height: 8px;
  background: #080c0a;
  border: 1px solid #33443b;
  border-radius: 3px;
  overflow: hidden;
}

.vlm-bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  transition: width 0.15s ease;
}

.vlm-bar.hp i { background: linear-gradient(90deg, #d32f2f, #f44336); }
.vlm-bar.mp i { background: linear-gradient(90deg, #1976d2, #2196f3); }

.vlm-bar span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7.5px;
  color: #fff;
  text-shadow: 0 1px 1px #000;
  line-height: 7px;
}

/* Phần giữa: Tiền vạn và Khu vực */
.vlm-stage-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}

.vlm-currency {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f7d88d;
  font-weight: 700;
}

.vlm-zone-name {
  color: #c7b993;
  font-size: 11px;
  font-weight: 700;
}
.vlm-zone-tools {
  display: flex;
  gap: 4px;
  align-items: center;
}
.vlm-ztool-btn {
  background: linear-gradient(180deg, #2e3d2f, #141f17);
  border: 1px solid #8f7d54;
  border-radius: 3px;
  color: #ffd770;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 6px;
  cursor: pointer;
  white-space: nowrap;
  text-shadow: 0 1px 1px #000;
  box-shadow: 0 1px 2px #000;
  transition: filter .12s, border-color .12s;
}
.vlm-ztool-btn:hover {
  filter: brightness(1.25);
  border-color: #ffd700;
  color: #fff;
}
.vlm-ztool-btn:active {
  transform: scale(0.96);
}
/* Phần góc phải: Nút AdminCP và Menu */
.vlm-top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vlm-top-btn {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 12px;
  border: 1px solid #b68a40;
  background: linear-gradient(180deg, #483820, #23190f);
  color: #f4d78e;
  cursor: pointer;
  white-space: nowrap;
}

.vlm-top-btn.auto.on {
  background: linear-gradient(180deg, #1b4b2c, #0d2c18);
  border-color: #2ed573;
  color: #7bed9f;
  box-shadow: 0 0 8px rgba(46, 213, 115, 0.4);
}

.vlm-top-btn.auto.off {
  background: linear-gradient(180deg, #3d1b1b, #200d0d);
  border-color: #ff4757;
  color: #ff6b81;
}

.vlm-top-btn.chat {
  background: linear-gradient(180deg, #1b3a4b, #0d212c);
  border-color: #38ada9;
  color: #7bed9f;
}

.vli-pc-top-auto-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
  cursor: pointer;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all .15s ease;
  vertical-align: middle;
}

.vli-pc-top-auto-btn.on {
  background: linear-gradient(180deg, #1b4b2c, #0d2c18);
  border: 1px solid #2ed573;
  color: #7bed9f;
  box-shadow: 0 0 6px rgba(46, 213, 115, 0.4);
}

.vli-pc-top-auto-btn.off {
  background: linear-gradient(180deg, #3d1b1b, #200d0d);
  border: 1px solid #ff4757;
  color: #ff6b81;
}

.vlm-top-btn.admin {
  background: linear-gradient(180deg, #6e4e1e, #31210e);
  border-color: #ffd466;
  color: #fff2c4;
  box-shadow: 0 0 8px rgba(255,212,102,0.4);
}

.vlm-top-btn.menu {
  background: linear-gradient(180deg, #2b3a32, #141c18);
  border-color: #557563;
  color: #d8e5dd;
  font-size: 13px;
  padding: 3px 8px;
}

/* Menu mở rộng các chức năng (Drawer) */
.vlm-drawer {
  position: fixed;
  top: calc(40px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  background: rgba(15, 22, 19, 0.96);
  border: 1px solid #b68a40;
  border-radius: 8px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.85);
  z-index: 200;
  backdrop-filter: blur(8px);
}

.vlm-drawer.hidden {
  display: none !important;
}

.vlm-drawer-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #4a5f55;
  background: #1c2723;
  color: #e6c67a;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.vlm-drawer-btn:active {
  background: #34483f;
  transform: scale(0.95);
}

.vlm-drawer-btn span {
  font-size: 15px;
}

/* 5. Cửa sổ Modal / Panel hiển thị giữa màn hình khi mở Nhân vật, Túi đồ... */
body.vli-mob-land #panel {
  position: fixed !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(640px, 92vw) !important;
  max-height: 88vh !important;
  background: rgba(18, 25, 22, 0.97) !important;
  border: 1.5px solid #b68a40 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.95) !important;
  z-index: 500 !important;
  display: block !important;
  overflow: hidden !important;
  backdrop-filter: blur(10px) !important;
}

body.vli-mob-land #panel.hidden {
  display: none !important;
}

body.vli-mob-land #vlm-online-badge {
  top: 8px !important;
  left: 200px !important;
  height: 24px !important;
  z-index: 101 !important;
  font-size: 10px !important;
  padding: 2px 7px !important;
}


.vlm-power-box {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  margin-left: 4px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #7c6838;
  border-radius: 2px;
  font: 700 9.5px/1.2 Tahoma, Arial;
  color: #ffd870;
  cursor: pointer;
  white-space: nowrap;
}
.vlm-power-box:active {
  background: rgba(60, 45, 20, 0.8);
  border-color: #ffd870;
}
.vlm-power-box b {
  color: #ffd870;
  font-weight: 700;
}

/* Landscape phones: edge HUD, complete navigation, unscaled touch controls.
   Keep every override scoped so the desktop and portrait cascades stay intact. */
body.mob.vli-mob-land #vlm-layer {
  --land-left:env(safe-area-inset-left,0px);--land-right:env(safe-area-inset-right,0px);
  --land-top:env(safe-area-inset-top,0px);--land-bottom:env(safe-area-inset-bottom,0px);
  z-index:9400!important;
}
body.mob.vli-mob-land #vlm-topbar {
  top:calc(6px + env(safe-area-inset-top,0px));left:calc(8px + env(safe-area-inset-left,0px));
  right:auto;width:204px;height:58px;padding:0;background:none;pointer-events:none;align-items:flex-start;
}
body.mob.vli-mob-land .vlm-hero-info{width:100%;gap:7px;align-items:flex-start}
body.mob.vli-mob-land .vlm-avatar {
  width:42px;height:48px;box-sizing:border-box;border-radius:50% 50% 40% 40%;pointer-events:auto;cursor:pointer;
  background-image:url('img/u2/pt/fac.png');background-size:1200% 100%;background-repeat:no-repeat;
}
body.mob.vli-mob-land .vlm-avatar-lvl{font-size:10px;line-height:15px;bottom:-5px;right:-1px;min-width:16px;text-align:center}
body.mob.vli-mob-land .vlm-vitals{width:154px;min-width:0;gap:3px;padding-top:1px}
body.mob.vli-mob-land .vlm-name-row{display:block;height:17px;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.mob.vli-mob-land #vlm-fac{display:none}
body.mob.vli-mob-land .vlm-power-box{position:absolute;top:56px;left:0;height:40px;box-sizing:border-box;pointer-events:auto;margin:0;font-size:10px;background:#121b10a8}
body.mob.vli-mob-land .vlm-bar{height:11px;flex:none}
body.mob.vli-mob-land .vlm-bar span{font-size:9px}
body.mob.vli-mob-land .vlm-stage-info{position:absolute;top:56px;left:82px;display:block;pointer-events:none;font-size:10px}
body.mob.vli-mob-land .vlm-currency{gap:3px;flex-direction:column;align-items:flex-start;font-size:9px}
body.mob.vli-mob-land .vlm-zone-name,body.mob.vli-mob-land .vlm-zone-tools,body.mob.vli-mob-land .vlm-top-actions{display:none}
body.mob.vli-mob-land #vlm-features {
  position:fixed;top:calc(6px + env(safe-area-inset-top,0px));left:calc(224px + env(safe-area-inset-left,0px));
  right:calc(112px + env(safe-area-inset-right,0px));display:flex;gap:6px;pointer-events:auto;align-items:flex-start;
}
body.mob.vli-mob-land .vlm-feature-row{display:flex;gap:6px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#c4a55c66 transparent;touch-action:pan-x;padding:0 0 5px;overscroll-behavior:contain}
body.mob.vli-mob-land .vlm-feature {
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:0 0 50px;
  width:50px;min-width:40px;min-height:54px;box-sizing:border-box;padding:3px 1px;border:0;border-radius:7px;
  background:linear-gradient(#15221bdd,#0a1309a3);color:#f4e4b6;font:700 10px/13px Tahoma,Arial;text-shadow:0 1px 2px #000;
  cursor:pointer;touch-action:manipulation;
}
body.mob.vli-mob-land .vlm-feature .game-icon{--game-icon-size:30px;border:1px solid #a38d52;border-radius:50%;box-sizing:content-box;background-color:#162018}
body.mob.vli-mob-land .vlm-feature small{display:block;font:inherit;max-width:100%;white-space:nowrap}
body.mob.vli-mob-land .vlm-feature:active,body.mob.vli-mob-land .vlm-feature.on{background:#354829e8;color:#c4ff8a}
body.mob.vli-mob-land #vlm-btn-menu{flex:0 0 48px;min-width:48px;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:2px;font-size:10px;border-radius:7px}
body.mob.vli-mob-land #vlm-btn-menu .game-icon{--game-icon-size:28px;margin:0}
body.mob.vli-mob-land #vlm-map{position:fixed;right:calc(4px + env(safe-area-inset-right,0px));top:calc(4px + env(safe-area-inset-top,0px));width:96px;height:96px;box-sizing:border-box;display:flex;align-items:flex-end;justify-content:center;padding:0 1px 2px;border:0;background:linear-gradient(transparent 78%,#0b140be8 78%);color:#ffe49f;font:700 10px/14px Tahoma;text-shadow:0 1px 2px #000;pointer-events:auto;cursor:pointer}
body.mob.vli-mob-land #vlm-map-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.mob.vli-mob-land #vlm-rail{position:fixed;right:calc(5px + env(safe-area-inset-right,0px));top:calc(104px + env(safe-area-inset-top,0px));width:54px;max-height:calc(100dvh - 278px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;overflow-x:hidden;pointer-events:auto;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c4a55c transparent}
body.mob.vli-mob-land #vlm-rail .vlm-feature{width:48px;min-height:44px;margin-bottom:3px;font-size:9px;gap:0;padding:1px}
body.mob.vli-mob-land #vlm-rail .game-icon{--game-icon-size:24px}
body.mob.vli-mob-land #vlm-drawer{inset:calc(68px + env(safe-area-inset-top,0px)) calc(110px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) auto;width:min(548px,calc(100vw - 146px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));box-sizing:border-box;display:flex;flex-direction:column;gap:0;pointer-events:auto;padding:0;background:#111c16f5}
body.mob.vli-mob-land .vlm-drawer-head{display:flex;align-items:center;justify-content:space-between;flex:none;min-height:44px;padding:0 8px;border-bottom:1px solid #716540;color:#f7d88d;font:700 13px Tahoma}
body.mob.vli-mob-land .vlm-drawer-head button{min-width:64px;min-height:40px;background:#33261c;color:#ffe9bd;border:1px solid #9c8454;border-radius:5px;font:700 12px Tahoma}
body.mob.vli-mob-land .vlm-feature-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;overflow-y:auto;min-height:0;padding:8px;touch-action:pan-y;overscroll-behavior:contain}
body.mob.vli-mob-land .vlm-feature-grid .vlm-feature{width:100%;min-height:62px}
body.mob.vli-mob-land .vlm-feature-grid small{white-space:normal;text-align:center}
body.mob.vli-mob-land #vlm-exp{position:fixed;left:calc(200px + env(safe-area-inset-left,0px));right:calc(270px + env(safe-area-inset-right,0px));bottom:calc(3px + env(safe-area-inset-bottom,0px));height:5px;border:1px solid #9c865c;background:#10180ec9;overflow:hidden;pointer-events:none}
body.mob.vli-mob-land #vlm-exp i{display:block;height:100%;background:linear-gradient(90deg,#ba7f16,#f4cd62)}

/* Original floating controls retain their stored drag positions on other layouts. */
html body.mob.vli-mob-land #vli-arc-sw,html body.mob.vli-mob-land #vli-tdp,html body.mob.vli-mob-land #vli-ktc,
html body.mob.vli-mob-land #vlm-online-badge,html body.mob.vli-mob-land #u20rc,
html body.mob.vli-mob-land #jxc-bl,html body.mob.vli-mob-land #jxc-menuBtn{display:none!important}
html body.mob.vli-mob-land #vli-arc .ab{width:var(--land-size,44px)!important;height:var(--land-size,44px)!important;min-width:40px;min-height:40px;box-sizing:border-box;scale:1!important}
html body.mob.vli-mob-land #vli-arc .ab::before{inset:0}
html body.mob.vli-mob-land #vli-arc [data-id="bag"],html body.mob.vli-mob-land #vli-arc [data-id="char"],html body.mob.vli-mob-land #vli-arc [data-id="skill"]{display:none!important}
html body.mob.vli-mob-land #vli-arc .ut small{bottom:-13px;font-size:9px;line-height:12px}
html body.mob.vli-mob-land #vli-arc-joy{width:112px!important;height:112px!important;scale:1!important}
html body.mob.vli-mob-land #vli-arc .tdp::after{content:'Thổ Địa';position:absolute;bottom:-13px;font:700 9px/12px Tahoma;color:#fff0c9;text-shadow:0 1px 2px #000;white-space:nowrap}
/* Cột trái dưới avatar: nút Chế độ (Luyện công / Phó bản / Tháp / Nhiệm vụ…) -> icon chiêu đang dùng -> tổ đội.
   Vị trí nút Chế độ do js/vli-land-hud.js đặt (nút này có style inline !important để kéo thả ở màn dọc). */
html body.mob.vli-mob-land #skBuffs{position:fixed!important;top:calc(112px + env(safe-area-inset-top,0px))!important;left:calc(8px + env(safe-area-inset-left,0px))!important;max-width:200px!important}
html body.mob.vli-mob-land #vli-party-hud{top:calc(150px + env(safe-area-inset-top,0px))!important;left:calc(8px + env(safe-area-inset-left,0px))!important}
/* Bỏ ô Lực chiến cạnh avatar */
html body.mob.vli-mob-land #vlm-power-box{display:none!important}
html body.mob.vli-mob-land #vli-party-hud .party-hud-list{max-height:calc(100dvh - 310px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
html body.mob.vli-mob-land #vli-party-hud .h button{min-height:40px}
html body.mob.vli-mob-land #vli-party-hud .party-fold{width:40px}
html body.mob.vli-mob-land #vli-event-news{top:calc(66px + env(safe-area-inset-top,0px))!important;left:calc(224px + env(safe-area-inset-left,0px))!important;width:calc(100vw - 344px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))!important}

/* Headers and footers stay outside scrolling content, including short phones. */
html body.mob.vli-mob-land.jxwin #panel{top:calc(6px + env(safe-area-inset-top,0px))!important;bottom:calc(6px + env(safe-area-inset-bottom,0px))!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(700px,calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))!important;height:auto!important;max-height:none!important;display:flex!important;flex-direction:column;z-index:98000!important;overflow:hidden!important}
html body.mob.vli-mob-land #panel>.tab{min-height:0!important;flex:1 1 auto;overflow-y:auto!important;touch-action:pan-y}
html body.mob.vli-mob-land #jxc-wh,html body.mob.vli-mob-land #jxc-wf{flex:none;min-height:44px;box-sizing:border-box}
html body.mob.vli-mob-land #jxc-wh .x,html body.mob.vli-mob-land #jxc-iw .x,html body.mob.vli-mob-land #jxc-tip .tx{width:40px;height:40px;box-sizing:border-box}
html body.mob.vli-mob-land #panel button,html body.mob.vli-mob-land #modal button,html body.mob.vli-mob-land #vli-autop button,html body.mob.vli-mob-land #vli-arc-pick button,html body.mob.vli-mob-land #jxc-tip button,html body.mob.vli-mob-land #jxc-iw button{min-height:40px;min-width:40px}
html body.mob.vli-mob-land #modal{padding:calc(6px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px))!important;box-sizing:border-box}
html body.mob.vli-mob-land #modal .mbox{display:flex!important;flex-direction:column;max-height:100%!important;min-height:0;overflow:hidden!important;box-sizing:border-box}
html body.mob.vli-mob-land .modal-closebar{position:relative!important;flex:none;height:40px;min-height:40px;top:auto!important}
html body.mob.vli-mob-land #mBody{min-height:0;flex:1 1 auto;overflow-y:auto!important;touch-action:pan-y;overscroll-behavior:contain}
html body.mob.vli-mob-land #vli-autop,html body.mob.vli-mob-land #vli-arc-pick,html body.mob.vli-mob-land #vli-tdp-menu{top:calc(6px + env(safe-area-inset-top,0px))!important;bottom:auto!important;max-height:calc(100dvh - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;box-sizing:border-box;touch-action:pan-y}
html body.mob.vli-mob-land #vli-autop .hd,html body.mob.vli-mob-land #vli-arc-pick .hd{position:sticky;top:-6px;z-index:7;background:#241b10;min-height:40px}
html body.mob.vli-mob-land #jxc-iw{padding:calc(6px + env(safe-area-inset-top,0px)) 0 calc(6px + env(safe-area-inset-bottom,0px))}
html body.mob.vli-mob-land #jxc-tip .bx{max-height:calc(100dvh - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));touch-action:pan-y}
html body.mob.vli-mob-land #panel label,html body.mob.vli-mob-land #vli-autop label{min-height:40px;box-sizing:border-box}
html body.mob.vli-mob-land #panel select,html body.mob.vli-mob-land #modal select,html body.mob.vli-mob-land #vli-autop select{min-height:40px}
html body.mob.vli-mob-land.jxc:not(.jxwin) #panel{display:none!important}
html body.mob.vli-mob-land #vli-mkb,html body.mob.vli-mob-land #vli-tk-fab,html body.mob.vli-mob-land #vli-pk-fab{display:none!important}
body.mob.vli-mob-land #vlm-rail{min-height:0}
body.mob.vli-mob-land #vlm-rail small{overflow:hidden;text-overflow:ellipsis}
html body.mob.vli-mob-land #vli-mkt{padding:calc(6px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px));box-sizing:border-box}
html body.mob.vli-mob-land #vli-mkt .w{height:100%;max-height:100%;min-height:0;box-sizing:border-box}
html body.mob.vli-mob-land #vli-mkt .hd{min-height:48px;flex-shrink:0}
html body.mob.vli-mob-land #vli-mkt .bd{min-height:0;overflow:auto;touch-action:pan-y}
html body.mob.vli-mob-land #vli-mkt button,html body.mob.vli-mob-land #vli-trade button{min-width:40px;min-height:40px}
html body.mob.vli-mob-land #vli-mkt .hd .x{width:40px;height:40px}
html body.mob.vli-mob-land #vli-trade{padding:calc(6px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px));box-sizing:border-box}
html body.mob.vli-mob-land #vli-trade .box{max-height:100%;overflow:auto;box-sizing:border-box;touch-action:pan-y}
html body.mob.vli-mob-land #vli-trade .x{position:sticky;top:0;float:right;z-index:7;background:#291c10}

/* Tinh chỉnh sau kiểm tra ảnh: hàng chức năng trên co giãn vừa hết (không cuộn ngang),
   minimap canvas đã có tên map -> bỏ dải tên trùng; cột hoạt động bên phải 2 cột cho đủ chỗ. */
body.mob.vli-mob-land .vlm-feature-row{flex:1 1 auto;overflow-x:hidden;gap:3px;padding-bottom:0}
body.mob.vli-mob-land .vlm-feature-row .vlm-feature{flex:1 1 0;width:auto;min-width:36px;max-width:56px;min-height:50px;padding:2px 0;font-size:9px;line-height:11px}
body.mob.vli-mob-land .vlm-feature-row .vlm-feature .game-icon{--game-icon-size:26px}
body.mob.vli-mob-land .vlm-feature-row .vlm-feature small{overflow:hidden;text-overflow:ellipsis}
body.mob.vli-mob-land #vlm-map{height:74px;background:none}
body.mob.vli-mob-land #vlm-map-name{display:none}
body.mob.vli-mob-land #vlm-rail{top:calc(80px + env(safe-area-inset-top,0px));width:153px;display:grid;grid-template-columns:repeat(3,48px);gap:3px;align-content:start;max-height:calc(100dvh - 292px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
body.mob.vli-mob-land #vlm-rail .vlm-feature{width:48px;min-height:42px;margin:0}
body.mob.vli-mob-land #vlm-drawer #vlm-party-btn{display:none!important} /* nút Tổ đội cũ trùng với ô Tổ đội trong lưới */
@media (max-width:800px),(max-height:370px){
  body.mob.vli-mob-land .vlm-feature-row .vlm-feature{font-size:8px;letter-spacing:-.2px}
  body.mob.vli-mob-land #vlm-rail{max-height:calc(100dvh - 292px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
  body.mob.vli-mob-land #vlm-rail .vlm-feature{min-height:40px;font-size:8px}
  body.mob.vli-mob-land #vlm-rail .game-icon{--game-icon-size:22px}
}

/* ===== Bố cục ngang v2 (theo VLTK Mobile): 2 hàng chức năng giữa trên + thu gọn, nút PK cạnh thanh máu,
   hàng tiện ích dưới minimap (vị trí do controls() tính), Chat + Auto giữa đáy; bỏ cột hoạt động bên phải. ===== */
body.mob.vli-mob-land #vlm-rail{display:none!important}
body.mob.vli-mob-land #vlm-features{top:calc(4px + var(--land-top,0px));left:calc(288px + var(--land-left,0px));right:calc(108px + var(--land-right,0px));gap:3px;align-items:stretch;justify-content:flex-end}
body.mob.vli-mob-land .vlm-feature-rows{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
body.mob.vli-mob-land #vlm-features .vlm-feature-row{display:flex;gap:3px;overflow:hidden;padding:0;justify-content:flex-end}
body.mob.vli-mob-land #vlm-features .vlm-feature-row .vlm-feature,body.mob.vli-mob-land #vlm-features #vlm-btn-menu{flex:1 1 0;min-width:34px;max-width:58px;height:39px;min-height:39px;padding:1px 0;gap:1px;font-size:9px;line-height:10px;border-radius:6px}
body.mob.vli-mob-land #vlm-features .vlm-feature .game-icon,body.mob.vli-mob-land #vlm-features #vlm-btn-menu .game-icon{--game-icon-size:21px}
body.mob.vli-mob-land #vlm-features #vlm-btn-menu{font-size:0;height:39px!important;min-height:39px!important;box-sizing:border-box;overflow:hidden;border:0;background:linear-gradient(#15221bdd,#0a1309a3)}
body.mob.vli-mob-land #vlm-features #vlm-btn-menu::after{content:'Tất cả';font:700 9px/10px Tahoma,Arial;color:#f4e4b6}
body.mob.vli-mob-land #vlm-features .vlm-feature-row .vlm-feature{height:46px;min-height:46px;justify-content:flex-start;padding-top:2px}
body.mob.vli-mob-land #vlm-features .vlm-feature-row .vlm-feature small{white-space:normal;overflow:visible;text-overflow:clip;font-size:8.5px;line-height:9px;text-align:center;word-break:keep-all}
body.mob.vli-mob-land #vlm-feat-fold{flex:0 0 22px;width:22px;min-height:44px;padding:0;border:1px solid #a38d52;border-radius:6px;background:#15221bdd;color:#ffe49f;font:900 18px/1 Tahoma;pointer-events:auto;cursor:pointer}
body.mob.vli-mob-land #vlm-features.folded .vlm-feature-rows{display:none}
body.mob.vli-mob-land #vlm-features.folded #vlm-feat-fold{min-height:40px}
body.mob.vli-mob-land #vlm-chat-btn{position:fixed;right:calc(340px + var(--land-right,0px));bottom:calc(24px + var(--land-bottom,0px));width:48px;height:48px;min-height:48px;flex:none;border-radius:50%;border:2px solid #b08a4d;pointer-events:auto}
body.mob.vli-mob-land #vlm-chat-btn .game-icon{--game-icon-size:24px}
body.mob.vli-mob-land #vlm-chat-btn small{font-size:9px}
html body.mob.vli-mob-land #vli-event-news{top:calc(120px + env(safe-area-inset-top,0px))!important;left:calc(218px + env(safe-area-inset-left,0px))!important;width:calc(100vw - 460px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))!important}

/* Nút PK trong hàng chức năng: màu chữ theo chế độ */
body.mob.vli-mob-land #vlm-pk-pill small{white-space:nowrap}/* Màn ngang hẹp: thêm nút PK vào hàng -> thu nhỏ ô cho đủ 11 nút */
@media (max-width:820px){body.mob.vli-mob-land #vlm-features .vlm-feature-row{gap:2px}body.mob.vli-mob-land #vlm-features .vlm-feature-row .vlm-feature{min-width:29px}body.mob.vli-mob-land #vlm-features .vlm-feature-row .vlm-feature small{font-size:7.5px;letter-spacing:-.3px}}