/*
 * Bản đồ Trang chủ dùng lớp <img> thật để tránh xung đột background-image.
 * SVG cũ luôn là nền dự phòng; WebP mới chỉ thay khi tải và giải mã thành công.
 */
.map-workspace {
  position: relative !important;
  isolation: isolate;
  background-color: #657a45 !important;
  background-image: url('/my-phu-summer.svg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.map-art-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Các lớp không khí nằm trên ảnh nhưng dưới toàn bộ giao diện. */
.map-workspace::before,
.map-workspace::after {
  pointer-events: none;
}

.map-workspace::before {
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(16, 41, 25, .08),
    transparent 17%,
    transparent 83%,
    rgba(16, 41, 25, .08)
  ) !important;
}

.map-workspace::after {
  z-index: 1;
  box-shadow: inset 0 0 70px rgba(24, 37, 20, .14) !important;
}

.ambient-cloud,
.sun-glow,
.water-shimmer,
.boat {
  z-index: 2 !important;
}

.map-hotspots {
  z-index: 4 !important;
}

.side-panel {
  z-index: 8 !important;
}

.bottom-dock {
  z-index: 9 !important;
}

/* Ảnh nền nghệ thuật có bảng tên; vùng HTML vẫn hoạt động nhưng không lặp chữ. */
.hotspot span {
  min-width: 112px;
  min-height: 38px;
  padding: 0 !important;
  border: 0 !important;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
}

.hotspot::after {
  opacity: 0 !important;
}

.hotspot:hover span,
.hotspot:focus-visible span {
  opacity: .18 !important;
  border: 2px solid #f2d16d !important;
  border-radius: 9px !important;
  background: rgba(255, 229, 142, .28) !important;
  box-shadow:
    0 0 0 4px rgba(33, 90, 55, .42),
    0 0 25px rgba(255, 221, 110, .82) !important;
}

.hotspot:focus-visible {
  outline: none;
}

/* Vị trí tương tác theo bản đồ nghệ thuật. */
.hotspot-branch { left: 20%; top: 18%; }
.hotspot-leaders { left: 16%; top: 46%; }
.hotspot-data { left: 15%; top: 73%; }
.hotspot-headquarters { left: 53%; top: 36%; }
.hotspot-market { left: 82%; top: 11%; }
.hotspot-weather { left: 82%; top: 42%; }
.hotspot-support { left: 50%; top: 64%; }
.hotspot-collective { left: 83%; top: 80%; }
.hotspot-honor { left: 50%; top: 89%; }

.sun-glow,
.ambient-cloud,
.water-shimmer {
  opacity: .08 !important;
}

@media (max-width: 1380px) {
  .map-art-layer {
    object-fit: cover;
  }
}