#gioithieu{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        top: 0;
        position: absolute;
        left: 0;
        
    }
    #gioithieu h1{
        font-size: 30px;
        font-family: myFont;
        
    }


    #noidung{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        top: 0;
        left: 0;

    }
     #noidung h1{
      font-size: 50px;
      font-family: myFont;
      color:#222222;
    }

    #annie{
                 display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
              margin-top: 300px;	
              margin-bottom: 400px;
      

    }
    #annie h1{
      font-size: 30px;;
    }
   
    #homthu img{
        max-width: 30%;

    }
    #homthu{
                   width: 100%;
        justify-content: center;
                align-items: center;
      background: transparent;
    }
    #homthu img:hover{
        cursor:pointer;
    }
    #hienthu img{
      max-width: 90%;
      
    }
    #hienthu{
      display: flex;
      text-align: center;
      justify-content: center;
    }
    #anh{
        width: 200%;
  height: 200%;
      display:flex;
      text-align: center;
      justify-content: center;
    }
    #anh img{
            max-width: 250%;

    }
    
.row {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}    @font-face {
        font-family: 'MyFont';
        src: url('source/font/SVN-Dancing-script.ttf') ;
    }
   @keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px); /* Trượt lên nhẹ khi xuất hiện */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes appear{
  from {
    opacity: 0;
    scale: 0.5;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}


#gioithieu {
  opacity: 0;
  animation: fadeInOut 9s ease forwards;
}

#thoai1 {
    opacity: 0;
  animation: fadeIn 2s ease-out forwards;
  opacity: 0;
}
#thoai2{
        opacity: 0; 
  animation: fadeIn 3s ease-out forwards;
  animation-delay: 2s;
}
#thoai3{
        opacity: 0; 
  animation: fadeIn 3s ease-out forwards;
  animation-delay: 4s;
}
#noidung {
  opacity: 0;
   animation: fadeIn 3s ease-out forwards;
  animation-delay: 9s;

}
 

#nhac{
            position: fixed;

            width: 55px; height: 41px; top:5px; left:32px;

            border: 2px solid black;
           position: fixed;
           z-index: 1000;
            opacity: 0;
   animation: fadeIn 3s ease-out forwards;
  animation-delay: 9s;

            
    
}
    #nhac img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 100px;
        

    }
    audio{
        display: none;
    }
    #nhac button{
        width: 100%;
        height: 100%;
        object-fit: cover;
        
       
    }
 #tsGH, #tsTV {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.6s ease;
}

/* Khi hiện */
.appear2 {
  opacity: 1 !important;
  transform: scale(1) !important;
}


#tsGH img, #tsTV img {
  width: 150%;
  height: auto;
  object-fit: cover;
}

 
  #noidung{
    background: url(source/image/bg.jpg);
  }
  #xemthu{
    display: flex;
    text-align: center;
    justify-content: center;
  }
  #anh img{
    width:70%;
    height:70%;
  }
 #hienthu {
  position: fixed; /* gắn với màn hình hiện tại */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 999;
}
#hienthu img {
 width:80vw;
  height: auto;
  cursor: pointer;
}
.wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #ffece2;
}

/* Doge bên trái */
.doge {
  position: absolute;
 width: 80vw;
    bottom: 5vh;
  left: 5vw;
  z-index: 2;
}

/* Người bị bonk bên phải */
.target {
  position: absolute;
  width: 80vw;
  max-width: 150px;
  bottom: 5vh;
  right: 5vw;
  z-index: 2;
}

/* Gậy */
#bat {
  position: absolute;
  width: 80vw;
  max-width: 180px;
  bottom: 15vh;
  left: 12vw;
  transform-origin: left center;
  transform: rotate(-40deg);
  transition: transform 0.2s ease-in-out;
  z-index: 3;
}

/* Chữ BONK */
#bonk-text {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 40px;
  font-weight: bold;
  color: red;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 4;
}
.scratch-container {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 20px auto;
}

.hidden-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  text-align: center;
  padding-top: 40px;
  font-family: sans-serif;
  font-size: 16px;
  z-index: 0;
}

#scratchCanvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: gray;
  cursor: pointer;
  border-radius: 12px;
  touch-action: none; /* Ngăn zoom hay cuộn khi dùng cảm ứng */
}
.card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px; /* nếu muốn bo góc */
}
.card {
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
}