/*! Hybe Dive Map v1.0 */
.hg-map{
  --mp-bg:#101a20; --mp-line:rgba(255,255,255,.07); --mp-land:#1d2d37; --mp-land-edge:#34505f;
  --mp-text:#e6edf1; --mp-accent:#4aa8ff; --mp-radius:20px;
  width:100%;
}
.hg-map .mp-scroll{
  border:1px solid var(--mp-line); border-radius:var(--mp-radius);
  background:var(--mp-bg); overflow:hidden;
}
.hg-map .mp-canvas{ position:relative; aspect-ratio:1300 / 640; }
.hg-map .mp-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hg-map .mp-grid line{ stroke:var(--mp-line); stroke-width:1; vector-effect:non-scaling-stroke; }
.hg-map .mp-land,.hg-map .mp-atolls *{ fill:var(--mp-land); stroke:var(--mp-land-edge); stroke-width:1; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.hg-map .mp-coords{
  position:absolute; right:28px; bottom:18px; font-size:12px; letter-spacing:.06em;
  color:rgba(230,237,241,.35); pointer-events:none;
}

/* จุดบนแผนที่ */
.hg-map .mp-pins .mp-pin{
  position:absolute; width:26px; height:26px; transform:translate(-50%,-50%);
  margin:0; padding:0; border:0; border-radius:50%; box-shadow:none; min-height:0;
  background:transparent; color:var(--mp-text); cursor:pointer; z-index:1;
  font:inherit; line-height:1; text-transform:none; letter-spacing:normal;
  -webkit-appearance:none; appearance:none; outline:none;
}
.hg-map .mp-pins .mp-pin:hover,
.hg-map .mp-pins .mp-pin:focus,
.hg-map .mp-pins .mp-pin:active{
  background:transparent; color:var(--mp-text); border:0; box-shadow:none;
  transform:translate(-50%,-50%);
}
.hg-map .mp-pin .mp-dot{
  position:absolute; inset:6px; border-radius:50%;
  border:2.5px solid #d4dde3; background:#28333a;
  transition:transform .2s, background-color .2s, border-color .2s;
}
.hg-map .mp-pin .mp-label{
  position:absolute; top:50%; left:100%; transform:translateY(-50%);
  margin-left:2px; white-space:nowrap; font-size:16px; font-weight:500;
  color:var(--mp-text);
  text-shadow:0 0 3px var(--mp-bg), 0 0 6px var(--mp-bg), 0 0 10px var(--mp-bg);
  transition:color .2s;
}
.hg-map .mp-pin[data-dir="l"] .mp-label{ left:auto; right:100%; margin:0 2px 0 0; }
.hg-map .mp-pin[data-dir="rd"] .mp-label{ transform:translateY(-15%); }
.hg-map .mp-pin:hover{ z-index:3; }
.hg-map .mp-pin:hover .mp-dot{ transform:scale(1.2); border-color:#fff; }
.hg-map .mp-pin:hover .mp-label{ color:#fff; }
.hg-map .mp-pin:focus-visible .mp-dot{ outline:2px solid var(--mp-accent); outline-offset:4px; }

.hg-map .mp-pin.is-active{ z-index:2; }
.hg-map .mp-pin.is-active .mp-dot{ background:var(--mp-accent); border-color:#dff0ff; }
.hg-map .mp-pin.is-active .mp-dot::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid var(--mp-accent); opacity:0;
  animation:mpPulse 2s ease-out infinite;
}
.hg-map .mp-pin.is-active .mp-label{ color:#fff; font-weight:600; }
@keyframes mpPulse{ 0%{transform:scale(.6);opacity:.9} 100%{transform:scale(1.6);opacity:0} }
@media (prefers-reduced-motion:reduce){ .hg-map .mp-pin.is-active .mp-dot::after{ animation:none; opacity:.5; } }

.hg-map .mp-hint{ display:none; margin:10px 0 0; font-size:13px; color:rgba(230,237,241,.55); text-align:center; }

/* มือถือ: แผนที่กว้างขึ้นและเลื่อนซ้ายขวาได้ เพื่อไม่ให้จุดในไทยทับกัน */
@media (max-width:767px){
  .hg-map{ --mp-radius:14px; }
  .hg-map .mp-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .hg-map .mp-scroll::-webkit-scrollbar{ display:none; }
  .hg-map .mp-canvas{ width:1100px; }
  .hg-map .mp-pin .mp-label{ font-size:14px; }
  .hg-map .mp-hint{ display:block; }
}