@charset "utf-8";
#eMap{ position: relative;}
.eMap_loading{ position: absolute; top: 40%; left: 45%; width: 80px;}
.emap_copys{ position: absolute; z-index: 99999; bottom: 5px; left: 5px; font-size: 10px; background-color: #FFFFFF; opacity: 0.9; padding: 2px 5px; border-radius: 3px; line-height: 1.3em; color: #212121;}

.maplibregl-popup-content{border-radius: 10px; border: solid 1px #DDDDDD; box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.18); -moz-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.18); -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.18);}
.info_content{ max-width:250px;}
.info_content_div{ text-align: center;}
.info_content_img{ height: 54px; margin-bottom: 10px; width:auto;}
.info_content h3{ margin-top:0px; margin-bottom: 5px; font-size:14px; font-weight: bold;}
.info_content .info_content_dc{ color:#999; font-size:12px;}

.maplibregl-popup{ z-index: 99999;}
.eMap_Popup{ line-height: 1.5em; font-size: 11px; position: relative;}
.eMap_Popup .eMap_imgs{ width: 60px; height: 60px; border: solid 1px #E1E1E1; background-color: #FFFFFF; padding: 2px; border-radius: 30px; position: absolute; top: -40px; left: -40px;box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.18);-moz-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.18);-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.18);}
.eMap_Popup b{ font-size: 12px; font-weight: bold; text-transform: capitalize; display: block; margin-bottom: 5px; padding-left: 25px;}
.eMap_Popup p{ text-align: center; display: block; margin-top: 15px;}
.eMap_Popup p a{ font-size: 13px; border:none; background-color: #3488C8; color:#FFFFFF; padding: 8px 10px; border-radius: 5px;}
.eMap_Popup p a:hover{ opacity: 0.8;}
.maplibregl-popup-close-button{ right: 3px; top: -3px; font-size: 20px;}
.eMap_stydo{ color: #CB1619;}
.eMap_styxanh{ color: #378900;}
.eMap_stytim{ color: #9C00AD;}
.eMap_stygia{ display: block; margin: 5px 0px;}
.eMap_stygia{display:block; color:#E40003; font-size: 14px;}
.eMap_stygia b{display: contents;font-size: 14px;}

.pulse-marker {
  width: 18px;
  height: 18px;
  background: #1a73e8;
  border-radius: 50%;
  position: relative;

  border: 3px solid #ffffff;
  box-shadow: 0 0 10px rgba(26, 115, 232, 0.35);
  z-index: 2;
}

.pulse-marker::before,
.pulse-marker::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;

  width: 18px;
  height: 18px;
  border-radius: 50%;

  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}

.pulse-marker::before {
  background: rgba(26, 115, 232, 0.25);
  animation: pulseWave 2s infinite;
}

.pulse-marker::after {
  background: rgba(26, 115, 232, 0.15);
  animation: pulseWave 2s infinite;
  animation-delay: 1s;
}

/* hiệu ứng lan sóng mượt */
@keyframes pulseWave {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }

  70% {
    transform: translate(-50%, -50%) scale(6);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, -50%) scale(6);
    opacity: 0;
  }
}


/* glow radar giống Google Maps */
.nav-icon {
  width: 28px;
  height: 28px;
  background: radial-gradient(circle, #4da3ff, #1a73e8);
  clip-path: polygon(50% 0%, 0% 100%, 50% 75%, 100% 100%);
  position: relative;

  border: 2px solid white;
  border-radius: 6px;

  box-shadow:
    0 0 12px rgba(26,115,232,0.7),
    0 6px 0 rgba(0,80,180,0.6),
    0 12px 18px rgba(0,0,0,0.25);

  transform-origin: center;
}
.nav-icon::after {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(26,115,232,0.15);
  animation: pulse 1.4s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}