@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --df-neon: #00ff88;
  --df-neon-glow: rgba(0, 255, 136, 0.4);
  --df-hud-bg: rgba(14, 20, 22, 0.95);
  --df-hud-border: rgba(50, 85, 75, 0.6);
  --df-text-muted: #8ba8a2;
}

html, body, .content, .m-main-wrap {
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-color: #191e21 !important;
  font-family: 'Inter', 'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

#MapContainer {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  background-color: #191e21 !important;
}

/* ========================================================
   TACTICAL HUD SIDEBAR / NAVIGATION PANEL
   ======================================================== */

.m-index .nav-ctn {
  width: 3.65rem !important;
  border-right: 1px solid rgba(50, 95, 80, 0.7) !important;
  background: rgba(14, 20, 22, 0.96) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.8) !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 10000 !important;
  box-sizing: border-box !important;
}

/* 1. Brand Logo / Title */
.m-index .nav-ctn .nav-title {
  position: absolute !important;
  left: 0.22rem !important;
  top: 0.12rem !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 3.35rem !important;
  height: auto !important;
}

.img_nav_title {
  background-image: none !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
}

.img_nav_title::before {
  content: 'DELTA FORCE' !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.22rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.04rem !important;
  text-shadow: 0 0 12px var(--df-neon-glow) !important;
  line-height: 1.1 !important;
  display: block !important;
}

.img_nav_title::after {
  content: 'BẢN ĐỒ CHIẾN THUẬT' !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.105rem !important;
  font-weight: 700 !important;
  color: var(--df-neon) !important;
  letter-spacing: 0.05rem !important;
  margin-top: 0.04rem !important;
  line-height: 1.1 !important;
  display: block !important;
}

/* 2. Tactical Mode Selector Tabs */
.m-index .nav-ctn .btn-war-change {
  position: absolute !important;
  left: 0.22rem !important;
  top: 0.64rem !important;
  width: 3.35rem !important;
  height: 0.32rem !important;
  display: flex !important;
  gap: 0.06rem !important;
  align-items: center !important;
  margin: 0 !important;
}

.btn-war-change .fhdd,
.btn-war-change .qmzc,
.btn-war-change .bp {
  background-image: none !important;
  background: rgba(14, 22, 24, 0.9) !important;
  border: 1px solid rgba(50, 85, 75, 0.7) !important;
  border-radius: 2px !important;
  color: var(--df-text-muted) !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.11rem !important;
  letter-spacing: 0.02rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  height: 0.32rem !important;
  box-shadow: inset 0 0 8px rgba(0, 255, 136, 0.05) !important;
  padding: 0 0.04rem !important;
  white-space: nowrap !important;
  flex: 1 1 0 !important;
  width: auto !important;
  overflow: hidden !important;
}

.btn-war-change .fhdd::before { content: 'CHIẾN SỰ' !important; }
.btn-war-change .qmzc::before { content: 'TOÀN DIỆN' !important; }
.btn-war-change .bp::before { content: 'ĐẶT BOM' !important; }

.btn-war-change.fh .fhdd,
.btn-war-change.war .qmzc,
.btn-war-change.bp .bp {
  background: linear-gradient(180deg, rgba(20, 50, 40, 0.95) 0%, rgba(10, 26, 22, 0.98) 100%) !important;
  border-color: var(--df-neon) !important;
  color: var(--df-neon) !important;
  box-shadow: 0 0 14px var(--df-neon-glow), inset 0 0 8px rgba(0, 255, 136, 0.25) !important;
}

.btn-war-change .fhdd:hover,
.btn-war-change .qmzc:hover,
.btn-war-change .bp:hover {
  background: rgba(0, 255, 136, 0.15) !important;
  border-color: rgba(0, 255, 136, 0.6) !important;
  color: #ffffff !important;
}

/* 3. Current Map Bar & Change Map Button */
.m-index .nav-ctn .curr-map-ctn {
  position: absolute !important;
  left: 0.22rem !important;
  top: 1.08rem !important;
  width: 3.35rem !important;
  height: 0.36rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.08rem !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0.36rem !important;
  text-indent: 0 !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

.m-index .nav-ctn .curr-map-ctn .curr-map-name {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.165rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: block !important;
  margin: 0 !important;
  line-height: 0.36rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 2.25rem !important;
}

.m-index .nav-ctn .curr-map-ctn .curr-map-name span.map-lv {
  font-size: 0.11rem !important;
  font-weight: 500 !important;
  color: var(--df-text-muted) !important;
  margin-left: 0.05rem !important;
}

/* Normal mode change map button (Only ONE button shown) */
.m-index .nav-ctn .btn-change-map-ctn {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  height: 0.28rem !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Hide S&D change map button in normal mode */
.m-index .nav-ctn .btn-bp-change-map-ctn {
  display: none !important;
}

/* When in S&D (bp-mode): hide normal button, show ONLY S&D button */
.m-index .nav-ctn.bp-mode .btn-change-map-ctn,
.bp-mode .nav-ctn .btn-change-map-ctn,
.m-index.bp-mode .nav-ctn .btn-change-map-ctn {
  display: none !important;
}

.m-index .nav-ctn.bp-mode .btn-bp-change-map-ctn,
.bp-mode .nav-ctn .btn-bp-change-map-ctn,
.m-index.bp-mode .nav-ctn .btn-bp-change-map-ctn {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  height: 0.28rem !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.img_change_map,
.img_change_map_hover,
.btn-change-map:hover .img_change_map,
.btn-bp-change-map:hover .img_change_map {
  background-image: none !important;
  width: auto !important;
  min-width: 0.84rem !important;
  height: 0.28rem !important;
  line-height: 0.28rem !important;
  background: rgba(16, 28, 25, 0.95) !important;
  border: 1px solid var(--df-neon) !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--df-neon) !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.11rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02rem !important;
  cursor: pointer !important;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.2) !important;
  padding: 0 0.08rem !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.img_change_map::before {
  content: 'ĐỔI BẢN ĐỒ' !important;
}

/* 4. Change Map Dropdowns */
.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  width: 3.10rem !important;
  max-width: 3.10rem !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.95) !important;
  border-radius: 2px !important;
  display: none !important;
  height: auto !important;
  max-height: 4.8rem !important;
  overflow: visible !important;
}

.m-index .nav-ctn .btn-bp-change-map-ctn .map-list-ctn {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  width: 2.10rem !important;
  max-width: 2.10rem !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.95) !important;
  border-radius: 2px !important;
  display: none !important;
  height: auto !important;
  max-height: 3.2rem !important;
  overflow: visible !important;
}

.m-index .nav-ctn .btn-change-map-ctn:hover .map-list-ctn,
.m-index .nav-ctn .btn-change-map-ctn.hover .map-list-ctn,
.m-index .nav-ctn .btn-bp-change-map-ctn:hover .map-list-ctn,
.m-index .nav-ctn .btn-bp-change-map-ctn.hover .map-list-ctn {
  display: flex !important;
}

/* Invisible bridge so mouse never loses hover between button and dropdown */
.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn::before,
.m-index .nav-ctn .btn-bp-change-map-ctn .map-list-ctn::before {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  left: 0 !important;
  width: 100% !important;
  height: 8px !important;
}

.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn .map-list,
.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn .war-list,
.m-index .nav-ctn .btn-bp-change-map-ctn .map-list-ctn .map-list {
  width: 1.85rem !important;
  height: auto !important;
  max-height: 3.2rem !important;
  overflow-y: auto !important;
  background: rgba(14, 20, 22, 0.98) !important;
  border: 1px solid rgba(50, 95, 80, 0.9) !important;
  border-radius: 2px !important;
  color: #d0e5e0 !important;
}

.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn .map-list .map-item,
.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn .war-list .map-item,
.m-index .nav-ctn .btn-bp-change-map-ctn .map-list-ctn .bp-map-item {
  height: 0.30rem !important;
  line-height: 0.30rem !important;
  padding: 0 0.12rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.115rem !important;
  color: #d0e5e0 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn .map-list .map-item:hover,
.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn .war-list .map-item:hover,
.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn .war-list .map-item.action,
.m-index .nav-ctn .btn-bp-change-map-ctn .map-list-ctn .bp-map-item:hover,
.m-index .nav-ctn .btn-bp-change-map-ctn .map-list-ctn .bp-map-item.act {
  background: rgba(0, 255, 136, 0.18) !important;
  color: var(--df-neon) !important;
  font-weight: 600 !important;
  padding-left: 0.15rem !important;
}

.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn .map-lv-list,
.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn .war-lv-list {
  width: 1.15rem !important;
  height: auto !important;
  min-height: 1.2rem !important;
  margin-top: 0 !important;
  margin-left: 0.05rem !important;
  background: rgba(14, 20, 22, 0.98) !important;
  border: 1px solid rgba(50, 95, 80, 0.9) !important;
  border-radius: 2px !important;
  color: #d0e5e0 !important;
  flex-shrink: 0 !important;
}

.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn .map-lv-list .map-lv-item,
.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn .war-lv-list .map-lv-item {
  height: 0.30rem !important;
  line-height: 0.30rem !important;
  padding: 0 0.10rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.115rem !important;
  color: #d0e5e0 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn .map-lv-list .map-lv-item:hover,
.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn .map-lv-list .map-lv-item.action,
.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn .war-lv-list .map-lv-item:hover,
.m-index .nav-ctn .btn-change-map-ctn .map-list-ctn .war-lv-list .map-lv-item.action {
  background: rgba(0, 255, 136, 0.18) !important;
  color: var(--df-neon) !important;
  font-weight: 600 !important;
}

/* 6. Quick Locate & Floor Buttons */
.m-index .nav-ctn .select-region-ctn {
  position: absolute !important;
  left: 0.22rem !important;
  top: 1.50rem !important;
  width: 1.64rem !important;
  height: 0.32rem !important;
  z-index: 10 !important;
}

.m-index .nav-ctn .map-floor {
  position: absolute !important;
  left: 1.93rem !important;
  top: 1.50rem !important;
  width: 1.64rem !important;
  height: 0.32rem !important;
  z-index: 10 !important;
}

/* Elevated stacking context when hovered or active so dropdown sits above everything */
.m-index .nav-ctn .select-region-ctn:hover,
.m-index .nav-ctn .select-region-ctn.active,
.m-index .nav-ctn .select-region-ctn.open,
.m-index .nav-ctn .map-floor:hover,
.m-index .nav-ctn .map-floor.active,
.m-index .nav-ctn .map-floor.open {
  z-index: 1000 !important;
}

.m-index .nav-ctn .select-region-ctn .btn-select-region,
.m-index .nav-ctn .map-floor .btn_floor {
  width: 1.64rem !important;
  height: 0.32rem !important;
  background-image: none !important;
  background: rgba(16, 26, 23, 0.92) !important;
  border: 1px solid rgba(50, 95, 80, 0.8) !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 8px rgba(0, 255, 136, 0.06) !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.m-index .nav-ctn .select-region-ctn .btn-select-region:hover,
.m-index .nav-ctn .select-region-ctn:hover .btn-select-region,
.m-index .nav-ctn .map-floor .btn_floor:hover,
.m-index .nav-ctn .map-floor:hover .btn_floor {
  border-color: var(--df-neon) !important;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.25), inset 0 0 8px rgba(0, 255, 136, 0.15) !important;
}

.m-index .nav-ctn .select-region-ctn .btn-select-region,
.m-index .nav-ctn .map-floor .btn_floor {
  width: 1.64rem !important;
  height: 0.32rem !important;
  padding: 0 0.08rem !important;
  box-sizing: border-box !important;
}

.m-index .nav-ctn .select-region-ctn .btn-select-region p,
.m-index .nav-ctn .map-floor .btn_floor p {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.105rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01rem !important;
  color: #d0ebe5 !important;
  line-height: 0.32rem !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.m-index .nav-ctn .select-region-ctn:hover .btn-select-region p,
.m-index .nav-ctn .map-floor:hover .btn_floor p {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.4) !important;
}

.m-index .nav-ctn .select-region-ctn .region-list {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 2.1rem !important;
  max-height: 2.6rem !important;
  height: auto !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: rgba(14, 20, 22, 0.98) !important;
  border: 1px solid rgba(50, 95, 80, 0.9) !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.95) !important;
  z-index: 1000 !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
}

.m-index .nav-ctn .select-region-ctn .region-list::before {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  left: 0 !important;
  width: 100% !important;
  height: 8px !important;
}

.m-index .nav-ctn .select-region-ctn .region-list .region-item {
  width: auto !important;
  height: 0.30rem !important;
  line-height: 0.30rem !important;
  padding: 0 0.12rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.115rem !important;
  color: #d0e5e0 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.m-index .nav-ctn .select-region-ctn .region-list .region-item:hover {
  background: rgba(0, 255, 136, 0.18) !important;
  color: var(--df-neon) !important;
  font-weight: 600 !important;
  padding-left: 0.16rem !important;
}

.m-index .nav-ctn .map-floor .floor-list {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 1.8rem !important;
  max-height: 2.6rem !important;
  height: auto !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: rgba(14, 20, 22, 0.98) !important;
  border: 1px solid rgba(50, 95, 80, 0.9) !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.95) !important;
  z-index: 1000 !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
}

.m-index .nav-ctn .map-floor .floor-list::before {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  left: 0 !important;
  width: 100% !important;
  height: 8px !important;
}

.m-index .nav-ctn .map-floor .floor-list .floor-item {
  width: auto !important;
  height: 0.30rem !important;
  line-height: 0.30rem !important;
  padding: 0 0.12rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.12rem !important;
  color: #a4c7c0 !important;
  opacity: 0.8 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.m-index .nav-ctn .map-floor .floor-list .floor-item:hover,
.m-index .nav-ctn .map-floor .floor-list .floor-item.act {
  background: rgba(0, 255, 136, 0.18) !important;
  color: var(--df-neon) !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* 7. Random Events Row - Faithful to Delta Force Military HUD */
.m-index .nav-ctn .random-ctn {
  position: absolute !important;
  left: 0.22rem !important;
  top: 1.90rem !important;
  width: 3.35rem !important;
  height: 0.32rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 0.115rem !important;
  color: #eaebeb !important;
  z-index: 9 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.m-index .nav-ctn .random-ctn p {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.115rem !important;
  color: #8ba8a2 !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
}

/* Diamond question mark icon - Perfectly aligned with text */
.m-index .nav-ctn .random-ctn::after {
  display: none !important;
}

.m-index .nav-ctn .random-ctn p {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.115rem !important;
  line-height: 1 !important;
  color: #8ba8a2 !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  height: 100% !important;
}

.m-index .nav-ctn .random-ctn p::before {
  content: "" !important;
  display: inline-block !important;
  width: 0.14rem !important;
  height: 0.14rem !important;
  margin-right: 0.06rem !important;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAGdUlEQVR4Ae3gAZAkSZIkSRKLqpm7R0REZmZmVlVVVVV3d3d3d/fMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMdHd3d3dXV1VVVVVmZkZGRIS7m5kKz0xmV3d1d3dPz8zMzMxMovgPcPbs2UcCnDlz5kn8+yD+nc6ePftI4JFc8aQzZ848iX87xL/D2bNnHwk8EnhSRJzKzFPAk86cOfMk/m0Q/0Znz559JPBI4Elnzpx5EsD58+dfJTNPAU86c+bMk/jXQ/wbnD179pHAI4EnnTlz5kk8wPnz518lM08BTzpz5syT+NdB/CudPXv2kcAjgSedOXPmSTwf58+ff5XMPAU86cyZM0/iRYf4Vzh79uwjgUcCTzpz5syTeCHOnz//Kpl5CnjSmTNnnsSLBvEiOnv27COBRwJPOnPmzJN4EZw/f/5VMvMU8KQzZ848iX8Z4kVw9uzZRwKPBJ505syZJ/GvcP78+VfJzFPAk86cOfMkXjjEv+Ds2bOPBB4JPOnMmTNP4t/g/Pnzr5KZp4AnnTlz5km8YIgX4uzZs48EHgk86cyZM0/imc6ePfvIiDjFC5GZ58+cOfMknun8+fOvkpmngCedOXPmSTx/iBfg7NmzjwQeCTzpzJkzT+IBzp8//yqZeYoXIiLOnzp16o94gPPnz79KZp4CnnTmzJkn8bwQz8fZs2cfCTwSeNKZM2eexHM5f/78q2TmKeBJZ86ceRIPcPbs2UcCj4yI86dOnfojnsv58+dfJTNPAU86c+bMk3hOiOdy9uzZRwKPBJ505syZJ/F8nD9//lUy8xTwpDNnzjyJBzh79uwjgUdGxPlTp079Ec/H+fPnXyUzTwFPOnPmzJN4NsQDnD179pHAI4EnnTlz5km8AOfPn3+VzDwFPOnMmTNP4gHOnj37SOCREXH+1KlTf8QLcP78+VfJzFPAk86cOfMkrkA809mzZx8JPBJ40pkzZ57EC3H+/PlXycxTwJPOnDnzJB7g7NmzjwQeGRHnT5069Ue8EOfPn3+VzDwFPOnMmTNPAhDA2bNnHwk8EnjSmTNnnsS/4OzZs48EmM1m53d2ds7zAGfPnn0k8MiIOH/q1Kk/4l9w/vz5V8nMU8CTzpw58ySdPXv2kcAjgSedOXPmSfwb7e3tnRrH8ZGZeQpgNpv90c7OznleBOfPn3+VzDwFPElnz559JPBI4Elnzpx5Ev8GZ8+efSTwSICION913ZN2dnbO8yI6f/78q2TmKeBJAjh79uwjgUcCTzpz5syT+Fc4e/bsI4FHcsWTzpw58yT+Fc6fP/8qmXkKeNKZM2eeJJ7p7NmzjwQeCTzpzJkzT+JFdP78+VfJzFMRcf7UqVN/xL/C+fPnXyUzTwFPOnPmzJMAxAOcPXv2kcAjgSedOXPmSbwIzp49+0iA2Wx2fmdn5zwvovPnz79KZp4CnnTmzJkncQXiuZw9e/aRwCOBJ505c+ZJ/Cc4f/78q2TmKeBJZ86ceRLPhng+zp49+0jgkcCTzpw58yReiKc//elznukhD3nIin/B+fPnXyUzTwFPOnPmzJN4TogX4OzZs48EHgk86cyZM0/iBbj73LlXlH1t1Hr7NSdO/DUvxPnz518lM08BTzpz5syTeF6IF+Ls2bOPBB4JPOnMmTNP4vm4+9y5V5R9bdR6+zUnTvw1L8D58+dfJTNPAU86c+bMk3j+EP+Cs2fPPhJ4JPCkM2fOPInncvfdd5/hma6//vqzPB/nz59/lcw8BTzpzJkzT+IFQ7wIzp49+0jgkcCTzpw58yT+Fc6fP/8qmXkKeNKZM2eexAuHeBGdPXv2kcAjgSedOXPmSbwIzp8//yqZeQp40pkzZ57Evwzxr3D27NlHAo8EnnTmzJkn8UKcP3/+VTLzFPCkM2fOPIkXDeJf6ezZs48EHgk86cyZM0/i+Th//vyrZOYp4Elnzpx5Ei86xL/B2bNnHwk8EnjSmTNnnsQDnD9//lUy8xTwpDNnzjyJfx3Ev9HZs2cfCTwSeNKZM2eeBHD+/PlXycxTwJPOnDnzJP71EP8OZ8+efSTwSOBJEXEqM08BTzpz5syT+LdB/DudPXv2kcAjueJJZ86ceRL/doj/AGfPnn0kwJkzZ57Evw//CNeYLxERPlPYAAAAAElFTkSuQmCC") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  flex-shrink: 0 !important;
}

/* Trigger Box Container */
.m-index .nav-ctn .random-ctn .random-bg,
.m-index .nav-ctn .random-ctn .img_random_list_bg {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 1.64rem !important;
  height: 0.32rem !important;
  background-image: none !important;
  background: rgba(16, 26, 23, 0.92) !important;
  border: 1px solid rgba(50, 95, 80, 0.8) !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 8px rgba(0, 255, 136, 0.06) !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.m-index .nav-ctn .random-ctn:hover .random-bg {
  border-color: rgba(0, 255, 136, 0.6) !important;
}

/* When event is active - Glowing Neon Active State */
.m-index .nav-ctn .random-ctn.active .random-bg {
  background: rgba(14, 32, 26, 0.95) !important;
  border-color: var(--df-neon) !important;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.35), inset 0 0 8px rgba(0, 255, 136, 0.2) !important;
}

/* Text in trigger box */
.m-index .nav-ctn .random-ctn p .random-name {
  position: absolute !important;
  right: 0 !important;
  width: 1.64rem !important;
  height: 0.32rem !important;
  line-height: 0.32rem !important;
  text-align: center !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.105rem !important;
  font-weight: 600 !important;
  color: #cdebe3 !important;
  margin: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 0.08rem !important;
  box-sizing: border-box !important;
}

.m-index .nav-ctn .random-ctn.active p .random-name {
  color: var(--df-neon) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px var(--df-neon-glow) !important;
}

/* When map has no events */
.m-index .nav-ctn .random-ctn.no-event .random-bg {
  background: rgba(14, 20, 22, 0.5) !important;
  border-color: rgba(50, 85, 75, 0.4) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.m-index .nav-ctn .random-ctn.no-event p .random-name {
  color: #658079 !important;
  font-weight: 500 !important;
}

/* Dropdown list - Opens below trigger box */
.m-index .nav-ctn .random-ctn .random-list {
  position: absolute !important;
  right: 0 !important;
  top: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 1.64rem !important;
  height: auto !important;
  max-height: 0 !important;
  overflow: hidden !important;
  z-index: 1000 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.95) !important;
  border-radius: 0 0 2px 2px !important;
  background: rgba(14, 20, 22, 0.98) !important;
  border: 1px solid rgba(50, 95, 80, 0.9) !important;
  border-top: none !important;
  transition: max-height 0.2s ease !important;
}

/* When map has NO events, permanently hidden and disabled */
.m-index .nav-ctn .random-ctn.no-event .random-list,
.m-index .nav-ctn .random-ctn:not(.has-event) .random-list,
.m-index .nav-ctn .random-ctn .random-list.normal,
.m-index .nav-ctn .random-ctn:hover .random-list.normal,
.m-index .nav-ctn .random-ctn.no-event:hover .random-list,
.m-index .nav-ctn .random-ctn:not(.has-event):hover .random-list {
  display: none !important;
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* When map HAS events, open dropdown smoothly on hover or when open class is set */
.m-index .nav-ctn .random-ctn.has-event:hover .random-list:not(.normal),
.m-index .nav-ctn .random-ctn.has-event.open .random-list:not(.normal),
.m-index .nav-ctn .random-ctn.has-event .random-list.open {
  max-height: 2.2rem !important;
  display: block !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Dropdown items */
.m-index .nav-ctn .random-ctn .random-list .random-item,
.m-index .nav-ctn .random-ctn .random-list .random-item-close {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 1.64rem !important;
  height: 0.30rem !important;
  background: rgba(14, 20, 22, 0.98) !important;
  border: none !important;
  border-bottom: 1px solid rgba(50, 85, 75, 0.4) !important;
  color: #d0e5e0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.11rem !important;
  box-sizing: border-box !important;
  padding: 0 0.10rem !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

/* Hide all random items by default on ALL maps */
.m-index .nav-ctn .random-ctn .random-list .random-item,
.m-index .nav-ctn .random-ctn .random-list .random-item:first-child,
.m-index .nav-ctn .random-ctn .random-list .random-item:last-child {
  display: none !important;
}

.m-index .nav-ctn .random-ctn .random-list .random-item .random-name-text,
.m-index .nav-ctn .random-ctn .random-list .random-item-close .random-name-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.11rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
}

.m-index .nav-ctn .random-ctn .random-list .random-item .btn-random-opt {
  display: none !important;
}

/* Checkbox indicator on right of each item - Perfectly centered vertically */
.m-index .nav-ctn .random-ctn .random-list .random-item::after,
.m-index .nav-ctn .random-ctn .random-list .random-item.random-act::after {
  content: "" !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  -webkit-transform: none !important;
  transform: none !important;
  display: block !important;
  width: 0.12rem !important;
  height: 0.12rem !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(80, 130, 115, 0.6) !important;
  border-radius: 2px !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  transition: all 0.15s ease !important;
}

.m-index .nav-ctn .random-ctn .random-list .random-item:last-child,
.m-index .nav-ctn .random-ctn .random-list .random-item-close {
  border-bottom: none !important;
}

.m-index .nav-ctn .random-ctn .random-list .random-item:hover,
.m-index .nav-ctn .random-ctn .random-list .random-item-close:hover {
  background: rgba(0, 255, 136, 0.12) !important;
  color: #ffffff !important;
}

/* Selected item state */
.m-index .nav-ctn .random-ctn .random-list .random-item.random-act {
  background: rgba(0, 255, 136, 0.18) !important;
  color: var(--df-neon) !important;
  font-weight: 700 !important;
}

.m-index .nav-ctn .random-ctn .random-list .random-item.random-act::after {
  border-color: var(--df-neon) !important;
  background-color: var(--df-neon) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6l2 2 4-4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 0.09rem auto !important;
  box-shadow: 0 0 6px var(--df-neon-glow) !important;
}

.m-index .nav-ctn .random-ctn .random-list .random-item-close {
  color: #8ba8a2 !important;
  font-size: 0.105rem !important;
  border-top: 1px solid rgba(50, 85, 75, 0.6) !important;
}
.m-index .nav-ctn .random-ctn .random-list .random-item-close:hover {
  color: #ff5555 !important;
  background: rgba(255, 85, 85, 0.1) !important;
}

/* 8. Select All Toggle Row */
.m-index .nav-ctn .choose-all {
  position: absolute !important;
  top: 2.30rem !important;
  right: 0.44rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.08rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.115rem !important;
  color: #a4c7c0 !important;
  z-index: 5 !important;
  cursor: pointer !important;
}

.m-index .nav-ctn .choose-all .btn-choose-all-icon {
  position: static !important;
  margin: 0 !important;
  cursor: pointer !important;
}

/* 9. Category & Marker Filter Area - Perfectly Contained Inside Nav */
.m-index .nav-ctn .nav-option-ctn {
  position: absolute !important;
  left: 0.22rem !important;
  top: 2.56rem !important;
  width: 3.35rem !important;
  bottom: 0.60rem !important;
  height: auto !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.m-index .nav-ctn .nav-type-list {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  width: 3.35rem !important;
  max-width: 3.35rem !important;
  height: 100% !important;
  max-height: 100% !important;
  background: rgba(12, 18, 20, 0.75) !important;
  border: 1px solid rgba(50, 95, 80, 0.6) !important;
  border-radius: 3px !important;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.5) !important;
  padding: 0.06rem 0.04rem 0.20rem 0.04rem !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Category Containers */
.m-index .nav-ctn .nav-type-list .nav-type-item,
.m-index .nav-ctn .nav-type-list .nav-wz,
.m-index .nav-ctn .nav-type-list .nav-mode,
.m-index .nav-ctn .nav-type-list .nav-my,
.m-index .nav-ctn .nav-type-list .nav-xxj,
.m-index .nav-ctn .nav-type-list .nav-cld,
.m-index .nav-ctn .nav-type-list .nav-yl,
.m-index .nav-ctn .nav-type-list .nav-csd,
.m-index .nav-ctn .nav-type-list .nav-sl,
.m-index .nav-ctn .nav-type-list .nav-jd,
.m-index .nav-ctn .nav-type-list .nav-jdbsd,
.m-index .nav-ctn .nav-type-list .nav-zj,
.m-index .nav-ctn .nav-type-list .nav-zjbjz,
.m-index .nav-ctn .nav-type-list .nav-gddyx,
.m-index .nav-ctn .nav-type-list .nav-gdwq,
.m-index .nav-ctn .nav-type-list .nav-zz {
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 0.08rem 0 !important;
  padding: 0 !important;
}

/* Category Separator / Header */
.m-index .nav-ctn .nav-type-list .fgx {
  width: 100% !important;
  max-width: 100% !important;
  height: 0.30rem !important;
  line-height: 0.30rem !important;
  padding: 0 0.06rem !important;
  margin: 0 0 0.06rem 0 !important;
  box-sizing: border-box !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.12rem !important;
  font-weight: 700 !important;
  color: var(--df-neon) !important;
  letter-spacing: 0.02rem !important;
}

.m-index .nav-ctn .nav-type-list .fgx::before {
  display: none !important;
}

/* Item Cards Centered & Contained */
.m-index .nav-ctn .nav-type-list .nav-list-item,
.m-index .nav-ctn .nav-type-list.normal .nav-list-item,
.m-index .nav-ctn .nav-type-list.war .nav-list-item {
  width: 0.54rem !important;
  height: auto !important;
  min-height: 0.70rem !important;
  margin: 0 0.04rem 0.10rem 0.04rem !important;
  flex-shrink: 0 !important;
}

.wz-bg {
  width: 0.44rem !important;
  height: 0.44rem !important;
  margin: 0 auto !important;
}

.wz-name {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.095rem !important;
  color: #d1e7e2 !important;
  text-align: center !important;
  line-height: 1.15 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  max-width: 0.54rem !important;
  margin: 0.03rem auto 0 !important;
}

.m-index .nav-ctn .reset-choose,
.bp-mode .bp-nav-ctn .reset-choose {
  position: absolute !important;
  bottom: -0.50rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
}

/* 10. Military HUD Reset Button */
.img_reset,
.reset-choose:hover .img_reset,
.m-index .nav-ctn .reset-choose:hover,
.bp-mode .bp-nav-ctn .reset-choose:hover {
  background-image: none !important;
  width: 1.4rem !important;
  height: 0.32rem !important;
  background: rgba(14, 25, 22, 0.9) !important;
  border: 1px solid var(--df-neon) !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--df-neon) !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.13rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05rem !important;
  cursor: pointer !important;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.25) !important;
  transition: all 0.2s ease !important;
}

.img_reset::before {
  content: 'ĐẶT LẠI' !important;
}

.img_reset:hover {
  background-image: none !important;
  background: rgba(0, 255, 136, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px var(--df-neon-glow) !important;
}

/* 11. Right Toolbar & Popups - Removed */
.m-index .right-nav,
.log-pop,
.bottom-bar {
  display: none !important;
}

/* Hide WeChat QR code and Chinese social icons */
.bottom-bar-item.wx,
.tg-sns {
  display: none !important;
}

/* Item cards in category filter */
.nav-list-item {
  width: 0.52rem !important;
  height: auto !important;
  min-height: 0.72rem !important;
  margin-left: 0.08rem !important;
  margin-bottom: 0.10rem !important;
}

.wz-bg {
  width: 0.44rem !important;
  height: 0.44rem !important;
}

.wz-name {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.10rem !important;
  color: #d1e7e2 !important;
  text-align: center !important;
  line-height: 1.2 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  max-width: 0.52rem !important;
  margin: 0.03rem auto 0 !important;
}

.fgx.top0.type-item-fgx {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.13rem !important;
  font-weight: 700 !important;
  color: var(--df-neon) !important;
  letter-spacing: 0.03rem !important;
}

/* Map region labels */
.map-region-name .region-item {
  font-family: 'Chakra Petch', sans-serif !important;
  font-weight: 700 !important;
  color: #9fe2d4 !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 255, 136, 0.4) !important;
  font-size: 0.13rem !important;
  letter-spacing: 0.03rem !important;
}

/* ========================================================
   TACTICAL MAP MARKER POPUP (HIGH-END MILITARY HUD)
   ======================================================== */

/* Hide Leaflet's default buggy close button permanently */
.leaflet-popup .leaflet-popup-close-button,
.leaflet-container a.leaflet-popup-close-button {
  display: none !important;
}

/* Neutralize any fixed sizes, backgrounds, or constraints on ANY popup permutation */
.leaflet-popup,
.leaflet-popup.floor,
.leaflet-popup.preview {
  margin-bottom: 0.15rem !important;
  z-index: 10005 !important;
  width: auto !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup.floor .leaflet-popup-content-wrapper,
.leaflet-popup.preview .leaflet-popup-content-wrapper {
  display: block !important;
  width: max-content !important;
  min-width: 2.20rem !important;
  max-width: 3.60rem !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  padding: 0.12rem 0.14rem !important;
  background-image: none !important;
  background: rgba(12, 20, 22, 0.96) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(0, 255, 136, 0.5) !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 255, 136, 0.15) !important;
  -webkit-transform: none !important;
  transform: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.leaflet-popup-content-wrapper .leaflet-popup-content,
.leaflet-popup.floor .leaflet-popup-content-wrapper .leaflet-popup-content,
.leaflet-popup.preview .leaflet-popup-content-wrapper .leaflet-popup-content {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.popup-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.06rem !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* Flex Header: Title on left, Close button on right (Never overlaps!) */
.popup-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 0.08rem !important;
  width: 100% !important;
  margin-bottom: 0.02rem !important;
}

.popup-title-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  line-height: 1.35 !important;
}

.popup-title {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.135rem !important;
  font-weight: 700 !important;
  color: var(--df-neon) !important;
  letter-spacing: 0.02rem !important;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.4) !important;
}

.popup-badge {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.105rem !important;
  font-weight: 500 !important;
  color: #a4c7c0 !important;
  margin-left: 0.04rem !important;
  white-space: nowrap !important;
}

/* Dedicated Close Button: Clean, perfectly positioned in top-right */
.popup-close-btn {
  flex: 0 0 0.18rem !important;
  width: 0.18rem !important;
  height: 0.18rem !important;
  background: rgba(20, 32, 28, 0.8) !important;
  border: 1px solid rgba(80, 130, 115, 0.5) !important;
  border-radius: 2px !important;
  color: #8ba8a2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.10rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: all 0.15s ease !important;
}

.popup-close-btn:hover {
  background: rgba(0, 255, 136, 0.2) !important;
  border-color: var(--df-neon) !important;
  color: #ffffff !important;
  box-shadow: 0 0 6px var(--df-neon-glow) !important;
}

/* Floor Action Button: Prominent Tactical Button Inside Card */
.leaflet-popup-content-wrapper .btn-floor,
.leaflet-popup.floor .leaflet-popup-content-wrapper .btn-floor {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 0.28rem !important;
  margin: 0.02rem 0 0.04rem 0 !important;
  background-image: none !important;
  background: rgba(0, 255, 136, 0.15) !important;
  border: 1px solid var(--df-neon) !important;
  border-radius: 2px !important;
  color: var(--df-neon) !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.11rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04rem !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.2) !important;
  position: static !important;
  box-sizing: border-box !important;
}

.leaflet-popup-content-wrapper .btn-floor::before,
.leaflet-popup.floor .leaflet-popup-content-wrapper .btn-floor::before {
  content: "XEM PHÂN TẦNG" !important;
}

.leaflet-popup-content-wrapper .btn-floor:hover,
.leaflet-popup.floor .leaflet-popup-content-wrapper .btn-floor:hover {
  background: rgba(0, 255, 136, 0.28) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px var(--df-neon-glow) !important;
}

/* Body Rows */
.popup-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.04rem !important;
  width: 100% !important;
  height: auto !important;
}

.popup-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.06rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.115rem !important;
  line-height: 1.4 !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.popup-row .row-label {
  color: #8ba8a2 !important;
  font-weight: 500 !important;
  flex-shrink: 0 !important;
}

.popup-row .row-val {
  color: #ffd166 !important;
  font-weight: 600 !important;
  word-break: break-word !important;
}

/* Remove Leaflet beak tip */
.leaflet-popup-tip {
  display: none !important;
}

/* Image Previews */
.leaflet-popup .marker-preview {
  margin-top: 0.06rem !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  border: 1px solid rgba(50, 95, 80, 0.6) !important;
  max-width: 2.6rem !important;
}

.leaflet-popup .marker-preview img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}


/* ========================================================
   FLOATING MAP HUD (FLOOR SWITCHER & WARFARE STAGES)
   ======================================================== */

/* Floating Floor Switcher at Top of Map */
.map-floor-change-ctn {
  background: rgba(12, 20, 22, 0.94) !important;
  border: 1px solid rgba(0, 255, 136, 0.45) !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 255, 136, 0.15) !important;
  padding: 0.10rem 0.16rem !important;
  z-index: 9999 !important;
}

.map-floor-change-ctn .floor-change-ctn {
  background-image: none !important;
  background: rgba(16, 26, 23, 0.8) !important;
  border: 1px solid rgba(50, 95, 80, 0.7) !important;
  border-radius: 3px !important;
  padding: 0 0.12rem !important;
  height: 0.34rem !important;
  width: auto !important;
  min-width: 2.20rem !important;
  gap: 0.10rem !important;
  margin-top: 0.08rem !important;
}

.map-floor-change-ctn .floor-change-tips {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.12rem !important;
  font-weight: 700 !important;
  color: #ffd166 !important;
  letter-spacing: 0.02rem !important;
}

.map-floor-change-ctn .floor-change-prev,
.map-floor-change-ctn .floor-change-next,
.war-lv-change-ctn .lv-change-prev,
.war-lv-change-ctn .lv-change-next {
  background-image: none !important;
  width: 0.22rem !important;
  height: 0.22rem !important;
  background: rgba(20, 36, 30, 0.9) !important;
  border: 1px solid var(--df-neon) !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin: 0 !important;
  transition: all 0.15s ease !important;
}

.map-floor-change-ctn .floor-change-prev::before,
.war-lv-change-ctn .lv-change-prev::before {
  content: "❮" !important;
  font-size: 0.11rem !important;
  color: var(--df-neon) !important;
}

.map-floor-change-ctn .floor-change-next::before,
.war-lv-change-ctn .lv-change-next::before {
  content: "❯" !important;
  font-size: 0.11rem !important;
  color: var(--df-neon) !important;
}

.map-floor-change-ctn .floor-change-prev:hover,
.map-floor-change-ctn .floor-change-next:hover,
.war-lv-change-ctn .lv-change-prev:hover,
.war-lv-change-ctn .lv-change-next:hover {
  background: var(--df-neon) !important;
  box-shadow: 0 0 8px var(--df-neon-glow) !important;
}

.map-floor-change-ctn .floor-change-prev:hover::before,
.map-floor-change-ctn .floor-change-next:hover::before,
.war-lv-change-ctn .lv-change-prev:hover::before,
.war-lv-change-ctn .lv-change-next:hover::before {
  color: #000000 !important;
}

.map-floor-change-ctn .floor-tips {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.115rem !important;
  color: #a4c7c0 !important;
  margin-top: 0.08rem !important;
}

.map-floor-change-ctn .floor-tips .span1 {
  color: var(--df-neon) !important;
  font-weight: 700 !important;
}

.map-floor-change-ctn .floor-tips .span2 {
  color: #ffd166 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  margin-left: 0.08rem !important;
}

/* Floating Warfare Stages HUD */
.war-lv-change-ctn {
  background: rgba(12, 20, 22, 0.94) !important;
  border: 1px solid rgba(0, 255, 136, 0.45) !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 255, 136, 0.15) !important;
  padding: 0.10rem 0.16rem !important;
  z-index: 9999 !important;
}

.war-lv-change-ctn .lv-change-ctn {
  background-image: none !important;
  background: rgba(16, 26, 23, 0.8) !important;
  border: 1px solid rgba(50, 95, 80, 0.7) !important;
  border-radius: 3px !important;
  padding: 0 0.12rem !important;
  height: 0.34rem !important;
  width: auto !important;
  min-width: 2.20rem !important;
  gap: 0.10rem !important;
}

.war-lv-change-ctn .lv-change-tips {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.125rem !important;
  font-weight: 700 !important;
  color: #ffd166 !important;
  letter-spacing: 0.02rem !important;
}

/* ========================================================
   MILITARY TACTICAL TOAST & ZOOM SLIDER
   ======================================================== */

/* Toast Notification */
.m-toast {
  background: rgba(12, 20, 22, 0.96) !important;
  border: 1px solid var(--df-neon) !important;
  border-radius: 4px !important;
  box-shadow: 0 0 16px var(--df-neon-glow) !important;
  color: #ffffff !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02rem !important;
  padding: 0.08rem 0.18rem !important;
  z-index: 100000 !important;
}

/* Leaflet Zoomslider (Dark Tech Styling) */
.leaflet-control-zoomslider,
.leaflet-container .leaflet-control-zoomslider {
  background: rgba(12, 20, 22, 0.92) !important;
  border: 1px solid rgba(50, 95, 80, 0.8) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8) !important;
  overflow: hidden !important;
}

.leaflet-control-zoomslider-wrap {
  background-color: transparent !important;
  border: none !important;
}

.leaflet-control-zoomslider-body {
  background-color: rgba(50, 95, 80, 0.6) !important;
  border: none !important;
}

.leaflet-control-zoomslider-knob,
.leaflet-touch .leaflet-control-zoomslider-knob {
  background: var(--df-neon) !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 0 8px var(--df-neon-glow) !important;
  border-radius: 2px !important;
}

.leaflet-control-zoomslider-in,
.leaflet-control-zoomslider-out {
  color: var(--df-neon) !important;
  background: rgba(16, 26, 23, 0.8) !important;
  font-family: 'Chakra Petch', sans-serif !important;
  transition: all 0.15s ease !important;
}

.leaflet-control-zoomslider-in:hover,
.leaflet-control-zoomslider-out:hover {
  background: rgba(0, 255, 136, 0.25) !important;
  color: #ffffff !important;
}


/* Update log modal */
.log-pop .log-title {
  font-family: 'Chakra Petch', sans-serif !important;
  color: var(--df-neon) !important;
  letter-spacing: 0.05rem !important;
}
.log-pop .log-time {
  font-family: 'Chakra Petch', sans-serif !important;
  color: var(--df-neon) !important;
}
.log-pop .log-text {
  font-family: 'Inter', sans-serif !important;
  line-height: 1.6 !important;
  color: #cde0dc !important;
}

.floor-tips, .map-floor .btn_floor p, .curr-reigon {
  font-family: 'Inter', sans-serif !important;
}


/* Dropdown Visibility & Transition Rules */
.m-index .nav-ctn .btn-change-map-ctn:hover .map-list-ctn,
.m-index .nav-ctn .btn-change-map-ctn.hover .map-list-ctn,
.m-index .nav-ctn .btn-bp-change-map-ctn:hover .map-list-ctn,
.m-index .nav-ctn .btn-bp-change-map-ctn.hover .map-list-ctn {
  height: auto !important;
  max-height: 4.8rem !important;
  overflow: visible !important;
}

.m-index .nav-ctn .select-region-ctn:hover .region-list,
.m-index .nav-ctn .select-region-ctn.active .region-list {
  display: block !important;
}

.m-index .nav-ctn .map-floor:hover .floor-list,
.m-index .nav-ctn .map-floor.active .floor-list {
  display: block !important;
}

.m-index .nav-ctn .btn-change-map-ctn:not(.war) .map-list {
  display: block !important;
}
.m-index .nav-ctn .btn-change-map-ctn:not(.war) .war-list,
.m-index .nav-ctn .btn-change-map-ctn:not(.war) .war-lv-list {
  display: none !important;
}
.m-index .nav-ctn .btn-change-map-ctn.war .war-list {
  display: block !important;
}
.m-index .nav-ctn .btn-change-map-ctn.war .map-list {
  display: none !important;
}

/* Map-specific event filtering - Exact match to Tencent df.qq.com */
/* Map 1 Level 0 (Thung Lũng Trường Cung - Thường): Only item 1 (Rơi máy bay) */
.m-index .nav-ctn .random-ctn.has-event .random-list.map-1-0 .random-item.random-item-1 {
  display: flex !important;
}
.m-index .nav-ctn .random-ctn .random-list.map-1-0 .random-item-2,
.m-index .nav-ctn .random-ctn .random-list.map-1-0 .random-item-3 {
  display: none !important;
}

/* Map 1 Level 1 (Thung Lũng Trường Cung - Bí Mật): Item 1 (Rơi máy bay) + Item 2 (Cháy rừng) */
.m-index .nav-ctn .random-ctn.has-event .random-list.map-1-1 .random-item.random-item-1,
.m-index .nav-ctn .random-ctn.has-event .random-list.map-1-1 .random-item.random-item-2 {
  display: flex !important;
}
.m-index .nav-ctn .random-ctn .random-list.map-1-1 .random-item-3 {
  display: none !important;
}

/* Map 2 Level 1 (Căn Cứ Vũ Trụ - Bí Mật): Only item 3 (Gãy cầu) */
.m-index .nav-ctn .random-ctn.has-event .random-list.map-2-1 .random-item.random-item-3 {
  display: flex !important;
}
.m-index .nav-ctn .random-ctn .random-list.map-2-1 .random-item-1,
.m-index .nav-ctn .random-ctn .random-list.map-2-1 .random-item-2 {
  display: none !important;
}

/* Map 2 Level 2 (Căn Cứ Vũ Trụ - Tuyệt Mật): Only item 3 (Gãy cầu) */
.m-index .nav-ctn .random-ctn.has-event .random-list.map-2-2 .random-item.random-item-3 {
  display: flex !important;
}
.m-index .nav-ctn .random-ctn .random-list.map-2-2 .random-item-1,
.m-index .nav-ctn .random-ctn .random-list.map-2-2 .random-item-2 {
  display: none !important;
}

/* Close option is only shown when container has events */
.m-index .nav-ctn .random-ctn.has-event .random-list .random-item-close {
  display: flex !important;
}
.m-index .nav-ctn .random-ctn.no-event .random-list .random-item-close,
.m-index .nav-ctn .random-ctn:not(.has-event) .random-list .random-item-close {
  display: none !important;
}


/* ========================================================
   NAVBAR UI BUG FIXES & ENHANCEMENTS (MILITARY HUD)
   ======================================================== */

/* 1. Smooth Collapse / Expand for Nav Container */
.m-index .nav-ctn {
  transition: left 0.3s cubic-bezier(0.2, 0, 0, 1) !important;
}

.m-index .nav-ctn.close {
  left: -3.65rem !important;
}

/* 2. Sleek Tactical Drawer Pull-Tab (Directly Hugging Navbar Border) */
.m-index .nav-ctn .btn-nav-state {
  width: 0.16rem !important;
  height: 0.44rem !important;
  position: absolute !important;
  right: -0.16rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(14, 22, 20, 0.95) !important;
  border: 1px solid rgba(0, 255, 136, 0.45) !important;
  border-left: none !important;
  border-radius: 0 4px 4px 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 3px 0 10px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.2s ease !important;
  z-index: 10002 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.m-index .nav-ctn .btn-nav-state:hover {
  background: rgba(18, 36, 30, 0.98) !important;
  border-color: var(--df-neon) !important;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.35) !important;
}

.m-index .nav-ctn .btn-nav-state .nav-state-icon {
  background-image: none !important;
  width: 0.06rem !important;
  height: 0.06rem !important;
  border-top: 2px solid var(--df-neon) !important;
  border-left: 2px solid var(--df-neon) !important;
  transform: rotate(-45deg) !important;
  transition: transform 0.3s ease !important;
  position: static !important;
  margin: 0 !important;
  margin-left: 0.02rem !important;
}

.m-index .nav-ctn.close .btn-nav-state .nav-state-icon {
  transform: rotate(135deg) !important;
  margin-left: -0.02rem !important;
}

/* 3. Search & Destroy Mode Isolation (Hide colliding elements) */
.m-index .nav-ctn.bp-mode .select-region-ctn,
.m-index .nav-ctn.bp-mode .map-floor,
.m-index .nav-ctn.bp-mode .random-ctn,
.m-index .nav-ctn.bp-mode .choose-all,
.m-index .nav-ctn.bp-mode .nav-option-ctn,
.m-index .nav-ctn.bp-mode .btn-view-change {
  display: none !important;
}

/* 4. Search & Destroy Tactical Panel (Properly Contained & Centered) */
.m-index .nav-ctn.bp-mode .bp-nav-ctn,
.bp-mode .bp-nav-ctn,
.m-index.bp-mode .bp-nav-ctn {
  display: block !important;
  position: absolute !important;
  left: 0.15rem !important;
  right: 0.15rem !important;
  top: 1.95rem !important;
  bottom: 0.70rem !important;
  width: 3.35rem !important;
  max-width: 3.35rem !important;
  height: auto !important;
  max-height: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  z-index: 10 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.m-index .nav-ctn.bp-mode .bp-nav-ctn .nav-ctn-bg,
.bp-mode .bp-nav-ctn .nav-ctn-bg,
.m-index.bp-mode .bp-nav-ctn .nav-ctn-bg {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.10rem !important;
  background: rgba(12, 18, 20, 0.88) !important;
  border: 1px solid rgba(50, 95, 80, 0.7) !important;
  border-radius: 3px !important;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.m-index .nav-ctn.bp-mode .bp-nav-title,
.bp-mode .bp-nav-ctn .bp-nav-title,
.m-index.bp-mode .bp-nav-ctn .bp-nav-title {
  width: 100% !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.125rem !important;
  font-weight: 700 !important;
  color: var(--df-neon) !important;
  letter-spacing: 0.02rem !important;
  margin: 0 0 0.08rem 0 !important;
  text-align: left !important;
  line-height: 1 !important;
}

.m-index .nav-ctn.bp-mode .bp-nav-title::before,
.bp-mode .bp-nav-ctn .bp-nav-title::before,
.m-index.bp-mode .bp-nav-ctn .bp-nav-title::before {
  display: none !important;
}

.m-index .nav-ctn.bp-mode .bp-top-btns,
.bp-mode .bp-nav-ctn .bp-top-btns,
.m-index.bp-mode .bp-nav-ctn .bp-top-btns {
  display: flex !important;
  width: 100% !important;
  gap: 0.08rem !important;
  margin: 0 0 0.08rem 0 !important;
  box-sizing: border-box !important;
}

.m-index .nav-ctn.bp-mode .bp-top-btns .bp-btns-item,
.bp-mode .bp-nav-ctn .bp-top-btns .bp-btns-item,
.m-index.bp-mode .bp-nav-ctn .bp-top-btns .bp-btns-item {
  flex: 1 1 50% !important;
  width: 50% !important;
  height: 0.30rem !important;
  line-height: 0.30rem !important;
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.12rem !important;
  font-weight: 700 !important;
  color: #a4c7c0 !important;
  background: rgba(16, 26, 23, 0.85) !important;
  border: 1px solid rgba(50, 95, 80, 0.8) !important;
  border-radius: 2px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.m-index .nav-ctn.bp-mode .bp-top-btns .bp-btns-item:hover,
.m-index .nav-ctn.bp-mode .bp-top-btns .bp-btns-item.act,
.bp-mode .bp-nav-ctn .bp-top-btns .bp-btns-item.act,
.m-index.bp-mode .bp-nav-ctn .bp-top-btns .bp-btns-item.act {
  background: rgba(0, 255, 136, 0.18) !important;
  border-color: var(--df-neon) !important;
  color: #ffffff !important;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.25) !important;
}

.m-index .nav-ctn.bp-mode .bp-point-list-ctn,
.bp-mode .bp-nav-ctn .bp-point-list-ctn,
.m-index.bp-mode .bp-nav-ctn .bp-point-list-ctn {
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-right: 0.04rem !important;
  margin: 0 !important;
}

.m-index .nav-ctn.bp-mode .bp-point-list,
.bp-mode .bp-nav-ctn .bp-point-list,
.m-index.bp-mode .bp-nav-ctn .bp-point-list {
  width: 100% !important;
  margin: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.m-index .nav-ctn.bp-mode .bp-normal-list,
.m-index .nav-ctn.bp-mode .bp-role-list,
.bp-mode .bp-nav-ctn .bp-normal-list,
.bp-mode .bp-nav-ctn .bp-role-list,
.m-index.bp-mode .bp-nav-ctn .bp-normal-list,
.m-index.bp-mode .bp-nav-ctn .bp-role-list {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0.06rem 0.05rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 0.10rem !important;
}

.m-index .nav-ctn.bp-mode .bp-point-item,
.bp-mode .bp-nav-ctn .bp-point-item,
.m-index.bp-mode .bp-nav-ctn .bp-point-item {
  position: relative !important;
  width: 100% !important;
  height: 0.58rem !important;
  min-height: 0.58rem !important;
  border: 1px solid rgba(50, 95, 80, 0.7) !important;
  border-radius: 2px !important;
  background: rgba(14, 24, 22, 0.9) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: all 0.15s ease !important;
  display: block !important;
  margin: 0 !important;
}

.m-index .nav-ctn.bp-mode .bp-point-item:hover,
.bp-mode .bp-nav-ctn .bp-point-item:hover,
.m-index.bp-mode .bp-nav-ctn .bp-point-item:hover {
  border-color: rgba(0, 255, 136, 0.6) !important;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.25) !important;
}

.m-index .nav-ctn.bp-mode .bp-point-item.act,
.bp-mode .bp-nav-ctn .bp-point-item.act,
.m-index.bp-mode .bp-nav-ctn .bp-point-item.act {
  border-color: var(--df-neon) !important;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.4) !important;
  background: rgba(0, 255, 136, 0.12) !important;
}

.m-index .nav-ctn.bp-mode .bp-point-item .bp-point-item-icon,
.bp-mode .bp-nav-ctn .bp-point-item .bp-point-item-icon,
.m-index.bp-mode .bp-nav-ctn .bp-point-item .bp-point-item-icon {
  width: 100% !important;
  height: 0.42rem !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.m-index .nav-ctn.bp-mode .bp-point-item .bp-point-item-name,
.bp-mode .bp-nav-ctn .bp-point-item .bp-point-item-name,
.m-index.bp-mode .bp-nav-ctn .bp-point-item .bp-point-item-name {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 0.16rem !important;
  line-height: 0.16rem !important;
  background: rgba(8, 14, 16, 0.94) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.082rem !important;
  font-weight: 600 !important;
  color: #d0ebe5 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 0.02rem !important;
  box-sizing: border-box !important;
}

/* Skills Section in S&D */
.m-index .nav-ctn.bp-mode .bp-skill-title,
.bp-mode .bp-nav-ctn .bp-skill-title,
.m-index.bp-mode .bp-nav-ctn .bp-skill-title {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.125rem !important;
  font-weight: 700 !important;
  color: var(--df-neon) !important;
  letter-spacing: 0.02rem !important;
  margin: 0.10rem 0 0.08rem 0 !important;
  text-align: left !important;
  width: 100% !important;
  line-height: 1 !important;
}

.m-index .nav-ctn.bp-mode .bp-skill-title::before,
.bp-mode .bp-nav-ctn .bp-skill-title::before,
.m-index.bp-mode .bp-nav-ctn .bp-skill-title::before,
.m-index .nav-ctn.bp-mode .bp-skill-title::after,
.bp-mode .bp-nav-ctn .bp-skill-title::after,
.m-index.bp-mode .bp-nav-ctn .bp-skill-title::after {
  display: none !important;
}

.m-index .nav-ctn.bp-mode .bp-skill-list,
.bp-mode .bp-nav-ctn .bp-skill-list,
.m-index.bp-mode .bp-nav-ctn .bp-skill-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.06rem !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.m-index .nav-ctn.bp-mode .bp-skill-item,
.bp-mode .bp-nav-ctn .bp-skill-item {
  width: 100% !important;
  height: 0.34rem !important;
  min-height: 0.34rem !important;
  margin: 0 !important;
  background: rgba(16, 26, 23, 0.7) !important;
  border: 1px solid rgba(50, 95, 80, 0.6) !important;
  border-radius: 2px !important;
  padding: 0 0.08rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.m-index .nav-ctn.bp-mode .bp-skill-item:hover,
.bp-mode .bp-nav-ctn .bp-skill-item:hover {
  background: rgba(0, 255, 136, 0.12) !important;
  border-color: rgba(0, 255, 136, 0.5) !important;
}

.m-index .nav-ctn.bp-mode .bp-skill-item.act,
.bp-mode .bp-nav-ctn .bp-skill-item.act {
  background: rgba(0, 255, 136, 0.18) !important;
  border-color: var(--df-neon) !important;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.25) !important;
}

.m-index .nav-ctn.bp-mode .bp-skill-item .bp-point-item-name,
.bp-mode .bp-nav-ctn .bp-skill-item .bp-point-item-name {
  position: static !important;
  background: transparent !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.11rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  text-align: left !important;
  line-height: normal !important;
  height: auto !important;
  padding: 0 !important;
}

/* 5. Tactical Perspective Switcher (Warfare & S&D) */
.m-index .nav-ctn .btn-view-change,
.m-index .nav-ctn .btn-view-change-bp {
  position: absolute !important;
  left: 0.15rem !important;
  top: 1.50rem !important;
  width: 3.35rem !important;
  height: 0.32rem !important;
  align-items: center !important;
  justify-content: space-around !important;
  background: rgba(16, 26, 23, 0.85) !important;
  border: 1px solid rgba(50, 95, 80, 0.8) !important;
  border-radius: 2px !important;
  z-index: 10 !important;
  transform: none !important;
  padding: 0 0.10rem !important;
  box-sizing: border-box !important;
}

.m-index .nav-ctn .btn-view-change:not(.g):not(.f) {
  display: none !important;
}

.m-index .nav-ctn .btn-view-change.g,
.m-index .nav-ctn .btn-view-change.f,
.m-index .nav-ctn.bp-mode .btn-view-change-bp {
  display: flex !important;
}

.btn-view-change .view-change1,
.btn-view-change .view-change2,
.btn-view-change-bp .bp-view-change1,
.btn-view-change-bp .bp-view-change2 {
  display: flex !important;
  align-items: center !important;
  gap: 0.06rem !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.11rem !important;
  color: #8ba8a2 !important;
  transition: all 0.15s ease !important;
}

.btn-view-change.g .view-change1,
.btn-view-change.f .view-change2,
.btn-view-change-bp.g .bp-view-change1,
.btn-view-change-bp.f .bp-view-change2 {
  color: var(--df-neon) !important;
  font-weight: 600 !important;
}

.btn-view-change .choose-i,
.btn-view-change-bp .choose-i {
  width: 0.12rem !important;
  height: 0.12rem !important;
  border: 1px solid rgba(80, 130, 115, 0.6) !important;
  border-radius: 50% !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  background-image: none !important;
  position: static !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.btn-view-change.g .view-change1 .choose-i,
.btn-view-change.f .view-change2 .choose-i,
.btn-view-change-bp.g .bp-view-change1 .choose-i,
.btn-view-change-bp.f .bp-view-change2 .choose-i {
  border-color: var(--df-neon) !important;
  background-color: var(--df-neon) !important;
  box-shadow: 0 0 6px var(--df-neon-glow) !important;
}

/* 6. Centered Reset Button (Always Perfectly Centered in Navbar) */
.m-index .nav-ctn .reset-choose,
.bp-mode .bp-nav-ctn .reset-choose,
.m-index.bp-mode .bp-nav-ctn .reset-choose,
.m-index .nav-ctn.bp-mode .bp-nav-ctn .reset-choose {
  position: absolute !important;
  bottom: 0.16rem !important;
  left: 50% !important;
  -webkit-transform: translateX(-50%) !important;
  transform: translateX(-50%) !important;
  z-index: 100 !important;
  margin: 0 !important;
}

.bp-mode .bp-nav-ctn .nav-bot-ctn {
  display: none !important;
}

/* 7. High-Tech Tactical Scrollbars (All scrollable lists) */
.m-index .nav-ctn .nav-type-list::-webkit-scrollbar,
.m-index .nav-ctn .select-region-ctn .region-list::-webkit-scrollbar,
.m-index .nav-ctn .map-floor .floor-list::-webkit-scrollbar,
.m-index .nav-ctn .btn-change-map-ctn .map-list::-webkit-scrollbar,
.m-index .nav-ctn .btn-change-map-ctn .war-list::-webkit-scrollbar,
.m-index .nav-ctn.bp-mode .bp-point-list-ctn::-webkit-scrollbar,
.m-index .nav-ctn.bp-mode .bp-point-list::-webkit-scrollbar,
.bp-mode .bp-nav-ctn .bp-point-list-ctn::-webkit-scrollbar,
.bp-mode .bp-nav-ctn .bp-point-list::-webkit-scrollbar,
.m-index.bp-mode .bp-nav-ctn .bp-point-list-ctn::-webkit-scrollbar,
.m-index.bp-mode .bp-nav-ctn .bp-point-list::-webkit-scrollbar {
  width: 4px !important;
}

.m-index .nav-ctn .nav-type-list::-webkit-scrollbar-thumb,
.m-index .nav-ctn .select-region-ctn .region-list::-webkit-scrollbar-thumb,
.m-index .nav-ctn .map-floor .floor-list::-webkit-scrollbar-thumb,
.m-index .nav-ctn .btn-change-map-ctn .map-list::-webkit-scrollbar-thumb,
.m-index .nav-ctn .btn-change-map-ctn .war-list::-webkit-scrollbar-thumb,
.m-index .nav-ctn.bp-mode .bp-point-list-ctn::-webkit-scrollbar-thumb,
.m-index .nav-ctn.bp-mode .bp-point-list::-webkit-scrollbar-thumb,
.bp-mode .bp-nav-ctn .bp-point-list-ctn::-webkit-scrollbar-thumb,
.bp-mode .bp-nav-ctn .bp-point-list::-webkit-scrollbar-thumb,
.m-index.bp-mode .bp-nav-ctn .bp-point-list-ctn::-webkit-scrollbar-thumb,
.m-index.bp-mode .bp-nav-ctn .bp-point-list::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 136, 0.45) !important;
  border-radius: 2px !important;
}

.m-index .nav-ctn .nav-type-list::-webkit-scrollbar-track,
.m-index .nav-ctn .select-region-ctn .region-list::-webkit-scrollbar-track,
.m-index .nav-ctn .map-floor .floor-list::-webkit-scrollbar-track,
.m-index .nav-ctn .btn-change-map-ctn .map-list::-webkit-scrollbar-track,
.m-index .nav-ctn .btn-change-map-ctn .war-list::-webkit-scrollbar-track,
.m-index .nav-ctn.bp-mode .bp-point-list-ctn::-webkit-scrollbar-track,
.m-index .nav-ctn.bp-mode .bp-point-list::-webkit-scrollbar-track,
.bp-mode .bp-nav-ctn .bp-point-list-ctn::-webkit-scrollbar-track,
.bp-mode .bp-nav-ctn .bp-point-list::-webkit-scrollbar-track,
.m-index.bp-mode .bp-nav-ctn .bp-point-list-ctn::-webkit-scrollbar-track,
.m-index.bp-mode .bp-nav-ctn .bp-point-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3) !important;
}


/* ========================================================
   SEARCH & DESTROY MEDIA MODAL POPUP (.marker-pop-ctn)
   ======================================================== */
.bp-mode .marker-pop-ctn.bp-mode,
.m-index.bp-mode .marker-pop-ctn.bp-mode {
  background-image: none !important;
  background: rgba(12, 20, 22, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0, 255, 136, 0.45) !important;
  border-radius: 6px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 255, 136, 0.15) !important;
  box-sizing: border-box !important;
  padding: 0.16rem 0.20rem !important;
}

.bp-mode .marker-pop-ctn.bp-mode .marker-name {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.16rem !important;
  font-weight: 700 !important;
  color: var(--df-neon) !important;
  letter-spacing: 0.02rem !important;
  margin: 0 0 0.10rem 0 !important;
  padding-right: 0.30rem !important;
}

.bp-mode .marker-pop-ctn.bp-mode .marker-name::after {
  display: none !important;
}

.bp-mode .marker-pop-ctn.bp-mode .btn-close-marker-pop {
  background-image: none !important;
  position: absolute !important;
  top: 0.12rem !important;
  right: 0.12rem !important;
  width: 0.22rem !important;
  height: 0.22rem !important;
  background: rgba(20, 32, 28, 0.8) !important;
  border: 1px solid rgba(80, 130, 115, 0.6) !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.bp-mode .marker-pop-ctn.bp-mode .btn-close-marker-pop::before {
  content: "✕" !important;
  font-size: 0.12rem !important;
  color: #8ba8a2 !important;
}

.bp-mode .marker-pop-ctn.bp-mode .btn-close-marker-pop:hover {
  background: rgba(0, 255, 136, 0.2) !important;
  border-color: var(--df-neon) !important;
  box-shadow: 0 0 8px var(--df-neon-glow) !important;
}

.bp-mode .marker-pop-ctn.bp-mode .btn-close-marker-pop:hover::before {
  color: #ffffff !important;
}

.bp-mode .marker-pop-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.115rem !important;
  line-height: 1.45 !important;
  color: #d0e5e0 !important;
  margin-top: 0.08rem !important;
}

/* ========================================================
   WARFARE DEPLOYMENT CAROUSEL (.deploy-swiper)
   ======================================================== */
.deploy-swiper {
  background: rgba(10, 16, 18, 0.95) !important;
  border-top: 1px solid rgba(0, 255, 136, 0.45) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.deploy-swiper .swiper-container .swiper-slide {
  background: rgba(16, 26, 24, 0.85) !important;
  border: 1px solid rgba(50, 95, 80, 0.7) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.deploy-swiper .swiper-container .swiper-slide:hover {
  border-color: var(--df-neon) !important;
  box-shadow: 0 0 12px var(--df-neon-glow) !important;
}

.deploy-swiper .swiper-container .swiper-slide .slide-name {
  font-family: 'Chakra Petch', sans-serif !important;
  font-size: 0.12rem !important;
  font-weight: 700 !important;
  color: var(--df-neon) !important;
  letter-spacing: 0.02rem !important;
  text-align: center !important;
}

.deploy-swiper .swiper-container .swiper-slide .slide-info {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.11rem !important;
  color: #a4c7c0 !important;
}

.deploy-swiper .btn-swiper-prev,
.deploy-swiper .btn-swiper-next {
  background-image: none !important;
  width: 0.28rem !important;
  height: 0.28rem !important;
  background: rgba(16, 28, 24, 0.9) !important;
  border: 1px solid var(--df-neon) !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.2) !important;
  transition: all 0.15s ease !important;
}

.deploy-swiper .btn-swiper-prev::before {
  content: "❮" !important;
  font-size: 0.13rem !important;
  color: var(--df-neon) !important;
}

.deploy-swiper .btn-swiper-next::before {
  content: "❯" !important;
  font-size: 0.13rem !important;
  color: var(--df-neon) !important;
}

.deploy-swiper .btn-swiper-prev:hover,
.deploy-swiper .btn-swiper-next:hover {
  background: var(--df-neon) !important;
  box-shadow: 0 0 12px var(--df-neon-glow) !important;
}

.deploy-swiper .btn-swiper-prev:hover::before,
.deploy-swiper .btn-swiper-next:hover::before {
  color: #000000 !important;
}


/* Screen Reader & SEO Crawler Layer (Invisible to visual users, readable by search engines & AI) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}