/* #bg{
  width: 450px;
  height: 450px;
  background-image: url("bgeheel.png");
  background-size: cover;
} */
.the_wheel{
  
}
#back-wheel {
  margin-top: 8px;
  position: relative;
  width: 450px; 
  height: 450px; 
  background-image: url("/vongquay/vq4.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 0px 5px 5px rgba(0, 0, 0, 0.2);
}

.disable-click {
  pointer-events: none;
}

#back-wheel {
  border-radius: 50%;
}
#moc{
  
  width: 50px;
  height: 58px;
  z-index: 2;
  background-image: url("/vongquay/moc.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  margin-top: -1px;
}
/* #chop{
  background-image: url("Chop.png");
  background-image: linear-gradient(180deg, #F2A21C, #F4CD19);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 0px 5px 5px rgba(0, 0, 0, 0.2);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top:42%;
  left:42%; 
  width: 60px;
  height: 60px;
  transition: 0.8s;
  
} */
/* #swheel {
  border-radius: 50%;
  
  position: relative;
  pointer-events: none;
  border: 12px dotted yellow;
  width: 414px;
  height: 414px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: light 4s linear infinite;
}

@keyframes light {
  0% {filter: hue-rotate(0);}
  50% {filter: hue-rotate(130deg);}
  100% {filter: hue-rotate(0);}
} */



  #wheelOfFortune {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 430px;
    height: 430px;
  }
  
  #wheel {
    
    display: block;
    width: 100%;
    height: 100%;
  }
  #shadow {
    position: absolute;
    top: 0;  
    left: 0;  
    width: 100%; 
    height: 100%; 
    border-radius: 50%;
    background: radial-gradient(circle at center, #00000000 60%, #000 90%); /* Màu bóng */
  }
  #spin {

    font: 1.5em/0 sans-serif;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    transform: translate(-50%,-50%);
    top:50%;
    left:50%;
    width: 20%;
    height: 20%;
    /* width: 150px;
    height: 50px; */
    background: #fff;
    color: #fff;
    box-shadow: 0 0 0 8px currentColor, 0 0px 15px 5px rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    transition: 0.7s;
  }
  
  /* #spin::after {
    content: '';
    position: absolute;
    top: -20px;
    border: 15px solid transparent;
    border-bottom-color: currentColor;
    border-top: none;
  } */