@font-face {
  font-family: 'menu-font';
  src: url('../font/Montserrat-SemiBold.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.hotspot-wrapper {
  position: relative;
  z-index: 0; /* default thấp */
}

.hotspot-wrapper-home {
  position: absolute;
  display: flex;
  align-items: center;
  z-index: 1; /* đảm bảo cao hơn những gì cần phủ */
}


.green-button {
  background: linear-gradient(to right, #cfee72, #6BBE45);
  border: 1px solid #0da021cb; /* viền xanh dương */
  border-radius: 0.7vw;
  color: white;
  padding: 0.48vw 0.85vw;
  font-weight: bold;
  font-size: 1.1vh;
  font-family: 'menu-font';
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 10vw;
}

.green-button:hover {
  background: #c7c7c7; /* nền trắng nhạt */
  border: 1px solid #0da021cb; /* viền xanh dương */
 box-shadow:
    0 0 2px rgba(235, 248, 252, 0.8),  /* viền phát sáng chính */
    0 0 6px rgba(247, 253, 255, 0.637); /* glow nhẹ lan rộng */
  color: #00BFFF; /* chữ xanh dương */
   width: 12vw;
}


.panel-box {
  position: absolute;
  justify-content: center;
  background: linear-gradient(to top right, #67ec6b67, #066ec99a); /* xanh lá → xanh dương */
  border-radius: 0.5vw;
  padding: 0.65vw;
  padding-bottom: 1.3vw;
  padding-top: 1vw;
 -webkit-backdrop-filter: blur(1px);
  box-shadow:
    0 0 8px rgba(235, 248, 252, 0.8),  /* viền phát sáng chính */
    0 0 15px rgba(247, 253, 255, 0.637); /* glow nhẹ lan rộng */

  border: 2px solid rgba(250, 250, 250, 0.199); /* viền nhẹ */
  width: 13vw;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;  
  margin-bottom: -1.1vw;
  bottom: 100%;
  gap: 0.8vw;
  z-index: 9;
}

.image-container {
  position: relative;
  display: inline-block;
}

.centered-text {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: 'menu-font';
  color: white;
  font-weight: bold;
  font-size: 1.8vh;
  text-align: center;
  pointer-events: none;
}

.hover-img {
  display: block;
  width: 15vw;
  height: 5.75vh;
  border-radius: 0.6vw;
  transition: opacity 0.3s ease;
  z-index: 2;
}

/* overlay ảnh hover */
.image-container:hover .hover-img {
  content: url('/img/menu/btn_grey.png'); /* thay ảnh khác khi hover */
}