.map-wrap {
  position: relative;
  max-width: 100%;
}

.map-wrap img {
  width: 100%;
  display: block;
}

.pin {
  position: absolute;
  width: clamp(14px, 2.2vw, 30px);
  height: clamp(22px, 3.6vw, 50px);
  cursor: pointer;
  z-index: 5;
  transform: translate(-50%, -100%); 
}


.pin img {
  width: 100%;
  height: 100%;
  transition: brightness 0.2s ease;
}

.pin:hover img,
.pin.active img {
  filter: hue-rotate(200deg) brightness(1.1);
}

.tooltip {
  position: absolute;
  background: rgba(0,0,0,0.88);
  color: #fff;
  padding: 22px 26px;
  border-radius: 14px;
  font-size: 16px;
  line-height: 1.7;

  min-width: 280px;
  max-width: min(360px, 90vw); 

  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  display: none;
  z-index: 20;
  word-wrap: break-word;
  white-space: normal;
}

.pin:hover .tooltip,
.pin .tooltip:hover,
.pin.active .tooltip {
  display: block;
}


.pin.top-left .tooltip {
  bottom: 130%;
  right: 0;
}

.pin.top-left .tooltip::after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: rgba(0,0,0,0.88) transparent transparent transparent;
}

.pin.top-right .tooltip {
  bottom: 130%;
  left: 0;
}

.pin.top-right .tooltip::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: rgba(0,0,0,0.88) transparent transparent transparent;
}


.pin.bottom-left .tooltip {
  top: 130%;
  right: 0;
}

.pin.bottom-left .tooltip::after {
  content: "";
  position: absolute;
  top: -10px;
  right: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent rgba(0,0,0,0.88) transparent;
}

.pin.bottom-right .tooltip {
  top: 130%;
  left: 0;
}

.pin.bottom-right .tooltip::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent rgba(0,0,0,0.88) transparent;
}

.pin.uk.bottom-left .tooltip {
  transform: translate(16px, 12px);
}

.pin.uk.bottom-left .tooltip::after {
  left: 28px;
  right: auto;
}


.canada { top: 33%; left: 35%; }
.usa    { top: 42%; left: 30%; }
.uk     { top: 33%; left: 48%; }
.vn     { top: 48%; left: 64.5%; }

@media (max-width: 768px) {
  .pin { width: 26px; height: 26px; }
  .tooltip {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    max-width: 90vw;
    position: fixed !important;
  }

  .tooltip::after {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
  }
  .pin.uk.bottom-left .tooltip {
    transform: translateX(-50%);
    margin-left: 0;
  }

  .pin.uk.bottom-left .tooltip::after {
    left: 50%;
    transform: translateX(-50%);
  }

}

@media (max-width: 576px) {
  .pin { width: 20px; height: 20px; }
  .tooltip {
    font-size: 13px;
    max-width: 92vw;
    padding: 16px 18px;
    min-width: 230px;
  }
  
  
}