<template>
  <div
    class="relative w-full has-background-blue-95 rounded-lg is-clipped"
    style="height: 360px"
  >
    <div class="absolute inset-0 w-full h-full opacity-20">
      <div
        class="absolute w-full border-t border-gray-300"
        style="top: 20%"
      ></div>
      <div
        class="absolute w-full border-t border-gray-300"
        style="top: 40%"
      ></div>
      <div
        class="absolute w-full border-t border-gray-300"
        style="top: 60%"
      ></div>
      <div
        class="absolute w-full border-t border-gray-300"
        style="top: 80%"
      ></div>
      <div
        class="absolute w-full border-t border-gray-300"
        style="top: 100%"
      ></div>
      <div
        class="absolute h-full border-l border-gray-300"
        style="left: 20%"
      ></div>
      <div
        class="absolute h-full border-l border-gray-300"
        style="left: 40%"
      ></div>
      <div
        class="absolute h-full border-l border-gray-300"
        style="left: 60%"
      ></div>
      <div
        class="absolute h-full border-l border-gray-300"
        style="left: 80%"
      ></div>
      <div
        class="absolute h-full border-l border-gray-300"
        style="left: 100%"
      ></div>
    </div>
    <div>
      <div
        class="absolute transform -translate-x-1/2 -translate-y-full"
        style="left: 33.3333%; top: 40%"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="currentColor"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-map-pin w-6 h-6 has-text-orange-50"
        >
          <path
            d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
          ></path>
          <circle
            cx="12"
            cy="10"
            r="3"
          ></circle>
        </svg>
      </div>
      <div
        class="absolute transform -translate-x-1/2 -translate-y-full"
        style="left: 56.6667%; top: 60%"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="currentColor"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-map-pin w-6 h-6 has-text-green-50"
        >
          <path
            d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
          ></path>
          <circle
            cx="12"
            cy="10"
            r="3"
          ></circle>
        </svg>
      </div>
      <div
        class="absolute transform -translate-x-1/2 -translate-y-full"
        style="left: 10%; top: 28%"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="currentColor"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-map-pin w-6 h-6 has-text-orange-50"
        >
          <path
            d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
          ></path>
          <circle
            cx="12"
            cy="10"
            r="3"
          ></circle>
        </svg>
      </div>
      <div
        class="absolute transform -translate-x-1/2 -translate-y-full"
        style="left: 83.3333%; top: 80%"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="currentColor"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-map-pin w-6 h-6 has-text-green-50"
        >
          <path
            d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
          ></path>
          <circle
            cx="12"
            cy="10"
            r="3"
          ></circle>
        </svg>
      </div>
      <div
        class="absolute transform -translate-x-1/2 -translate-y-full"
        style="left: 40%; top: 52%"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="currentColor"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-map-pin w-6 h-6 has-text-blue-50"
        >
          <path
            d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
          ></path>
          <circle
            cx="12"
            cy="10"
            r="3"
          ></circle>
        </svg>
      </div>
      <div
        class="absolute transform -translate-x-1/2 -translate-y-1/2 transition-all duration-3000 ease-linear animate-move-random-1"
        style="left: 39.3933%; top: 56.171%"
      >
        <div class="relative">
          <div
            class="w-10 h-10 rounded-full has-background-blue-50 border-2 border-white is-flex is-justify-content-center is-align-items-center"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="white"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-navigation w-5 h-5 text-white"
            >
              <polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
            </svg>
          </div>
          <div class="absolute -inset-1 rounded-full has-background-blue-60 animate-ping opacity-40"></div>
        </div>
      </div>
      <div
        class="absolute transform -translate-x-1/2 -translate-y-1/2 transition-all duration-3000 ease-linear animate-move-random-2"
        style="left: 22.8854%; top: 33.4304%"
      >
        <div class="relative">
          <div
            class="w-10 h-10 rounded-full has-background-blue-50 border-2 border-white is-flex is-justify-content-center is-align-items-center"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="white"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-navigation w-5 h-5 text-white"
            >
              <polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
            </svg>
          </div>
          <div class="absolute -inset-1 rounded-full has-background-blue-60 animate-ping opacity-40"></div>
        </div>
      </div>
      <div
        class="absolute transform -translate-x-1/2 -translate-y-1/2 transition-all duration-3000 ease-linear"
        style="left: 73.3333%; top: 72%"
      >
        <div class="relative">
          <div
            class="w-10 h-10 rounded-full bg-gray-400 border-2 border-white is-flex is-justify-content-center is-align-items-center"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="white"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-navigation w-5 h-5 text-white"
            >
              <polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
            </svg>
          </div>
        </div>
      </div>
      <div
        class="absolute transform -translate-x-1/2 -translate-y-1/2 transition-all duration-3000 ease-linear animate-move-random-3"
        style="left: 37.052%; top: 75.6278%"
      >
        <div class="relative">
          <div
            class="w-10 h-10 rounded-full has-background-blue-50 border-2 border-white is-flex is-justify-content-center is-align-items-center"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="white"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-navigation w-5 h-5 text-white"
            >
              <polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
            </svg>
          </div>
          <div class="absolute -inset-1 rounded-full has-background-blue-60 animate-ping opacity-40"></div>
        </div>
      </div>
      <div
        class="absolute bottom-3 right-3 backdrop-blur px-3 py-1.5 rounded-lg text-xs font-medium has-text-gray-60"
        style="background-color: hsla(0, 100%, 100%, 0.9)"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-map-pin w-4 h-4 inline mr-1"
        >
          <path
            d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"
          ></path>
          <circle
            cx="12"
            cy="10"
            r="3"
          ></circle></svg
        >Hà Nội
      </div>
    </div>
  </div>
</template>
<style scoped>
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.-inset-1 {
  inset: calc(var(--spacing) * -1);
}
.right-3 {
  right: calc(var(--spacing) * 3);
}
.bottom-3 {
  bottom: calc(var(--spacing) * 3);
}
.mr-1 {
  margin-right: calc(var(--spacing) * 1);
}
.inline {
  display: inline;
}
.h-3 {
  height: calc(var(--spacing) * 3);
}
.h-5 {
  height: calc(var(--spacing) * 5);
}
.h-6 {
  height: calc(var(--spacing) * 6);
}
.h-10 {
  height: calc(var(--spacing) * 10);
}
.w-3 {
  width: calc(var(--spacing) * 3);
}
.w-5 {
  width: calc(var(--spacing) * 5);
}
.w-6 {
  width: calc(var(--spacing) * 6);
}
.w-10 {
  width: calc(var(--spacing) * 10);
}
.w-full {
  width: 100%;
}
.-translate-x-1\/2 {
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-full {
  --tw-translate-y: -100%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.transform {
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  0% {
    opacity: 0.4;
    transform: scale(0.5);
  }

  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
.animate-move-random-1 {
  animation: move-random-1 30s ease-in-out infinite;
}
.animate-move-random-2 {
  animation: move-random-2 60s ease-in-out infinite;
}
.animate-move-random-3 {
  animation: move-random-3 50s ease-in-out infinite;
}

@keyframes move-random-1 {
  0% {
    transform: translateX(0) translateY(0);
  }

  33% {
    transform: translateX(30px) translateY(24px);
  }

  66% {
    transform: translateX(60px) translateY(12px);
  }

  100% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes move-random-2 {
  0% {
    transform: translateX(0) translateY(0);
  }

  23% {
    transform: translateX(-20px) translateY(-36px);
  }

  46% {
    transform: translateX(0) translateY(22px);
  }

  75% {
    transform: translateX(30px) translateY(-12px);
  }

  100% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes move-random-3 {
  0% {
    transform: translateX(0) translateY(0);
  }

  10% {
    transform: translateX(-30px) translateY(-15px);
  }

  30% {
    transform: translateX(-10px) translateY(26px);
  }

  50% {
    transform: translateX(48px) translateY(-28px);
  }

  80% {
    transform: translateX(17px) translateY(10px);
  }

  100% {
    transform: translateX(0) translateY(0);
  }
}
.border-2 {
  border-style: var(--tw-border-style);
  border-width: 2px;
}
.border-white {
  border-color: var(--color-white);
}
.bg-gray-400 {
  background-color: var(--color-gray-400);
}
.bg-white\/90 {
  background-color: color-mix(in srgb, #fff 90%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
  }
}
.px-3 {
  padding-inline: calc(var(--spacing) * 3);
}
.py-1\.5 {
  padding-block: calc(var(--spacing) * 1.5);
}
.text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.text-gray-600 {
  color: var(--color-gray-600);
}
.text-white {
  color: var(--color-white);
}
.opacity-40 {
  opacity: 40%;
}
.shadow {
  --tw-shadow:
    0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow:
    var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
    var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
    var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
    var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
    var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.transition-all {
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-3000 {
  --tw-duration: 3000ms;
  transition-duration: 3000ms;
}
.ease-linear {
  --tw-ease: linear;
  transition-timing-function: linear;
}
.border-t {
  border-top-style: solid;
  border-top-width: 1px;
}
.border-l {
  border-left-style: solid;
  border-left-width: 1px;
}
.border-gray-300 {
  border-color: var(--bulma-grey-85);
}
</style>
