.popup-overlay {
   position: fixed;
   display: block;
   top: 0;
   bottom: 0;
   right:0;
   left:0;
   z-index: 100;
   background-color: rgba(0, 0, 0, 0.5);
   display: none;
}
.popup-overlay.hide-overlay {
   background-color: transparent;
}

.popup-overlay , .popup-phuong {
   position: fixed;
   display: block;
   top: 0;
   bottom: 0;
   right:0;
   left:0;
   z-index: 1001;
   background-color: rgba(0, 0, 0, 0.5);
   display: none;
}


.popup , .popup2 {
   width: 60vw;
   height: 80vh;
   margin: 8% auto;
   position: relative;
}

.popup-dangnhap {
   width: 50vw;
   height: 80vh;
   margin: 8% auto;
   position: relative;
}

.popup-inner {
   opacity: 0;
   width: 100%;
   height: 100%;
   background: white;
   margin: 10% auto;
   position: relative;
   transition: 0.5s;
   animation: displaypopup 0.5s linear 4s 1 forwards;
}

.popup-inner2-rule {
   opacity: 1;
   width: 100%;
   height: 80vh;
   background: white;
   position: relative;
   transition: 0.5s;
   border-radius: 5rem;
}

.popup-inner2 {
   animation: displaypopup 0.5s linear 4.2s 1 forwards;
   opacity: 0;
   width: 100%;
   height: 80vh;
   background: white;
   position: relative;
   transition: 0.5s;
   border-radius: 5rem;
}
.popup-inner-login {
   width: 100%;
   height: 65vh;
   background: white;
   position: relative;
   transition: 0.5s;
   opacity: 1;
   border-radius: 5rem;
}

.popup-wrapper-content {
   height: 58vh;
   padding: 0vw 6vw 0vw 6vw;
}

.wrapper-content-card {
   height: 64%;
   padding: 0;
}

.popup-card {
   width: 55%;
   height: 94vh;
}

.tl-wrapper {
   max-height: 65vh;
   overflow-y: auto;
   margin-bottom: 1.6rem; 
}

.popup-wrapper-title{
   position: relative;
   width: 62%;
   height: 15vh;
   margin: auto;
}

.popup-wrapper-close-icon {
   position: relative;
    width: 3vw;
    margin-top: -15vh;
    height: 6vh;
    margin-right: -3vw;
    float: right;
}

.popup-wrapper-close-icon-img {
   background-image: url('./assets/images/close-btn.webp');
   background-repeat: no-repeat;
   background-size: contain;
    width: auto;
    height: 3vw;
    transition: width 2s, height 2s, transform 2s;
}

.popup-title-background {
   color: white;
   padding: 7%;
   text-align: center;
   width: 100%;
   height: auto;
   font-size: 1.7vw;
   position:absolute;
   background-image: url('./assets/images/title-img-popup.webp');
   background-repeat: no-repeat;
   background-size: contain;
   margin-top: -6%;
   font-family: 'UVN Van';
}

.popup-title-text {
   text-align: center;
   width: 31vw;
   width: 34vw;
   font-size: 2vw;
   position: absolute;
   margin-top: 1.3vh;
   color: white;
}

.title-login {
   height: 7vh;
   font-size: 1.5vw;
   font-family: 'Roboto Regular';
   text-align: center;
}

.wrapper-login-icon {
   height: 23vh;
   margin: 0 auto;
   width: 90%;
   padding: 0;
}

.roboto-re {
   font-family: 'Roboto Regular';
}

.login-type {
   font-family:'Roboto Black' ;
}

.popup-wrapper-close-icon-img:hover {
    transform: rotate(180deg);
  }

.info-popup-login {
   font-size: 1.4vw;
   height: 20vh;
   text-align: center;
}

.grid-container-login-portal {
   display: grid;
   grid-template-columns: auto auto;
 }
 .grid-item-login-portal {
   padding: 3vw;
   text-align: center;
 }

.btn-fb-login {
   background-image: url(../halloween_/assets/images/icon-fb-login.webp);
   background-repeat: no-repeat;
   background-size: 95% 80%;
   width: 86%;
   height: 86%;
   margin-left: 3vw;
}
.btn-zing-login {
   background-image: url(../halloween_/assets/images/icon-zing-login.webp);
   background-repeat: no-repeat;
   background-size: 95% 80%;
   width: 86%;
   height: 86%;
   margin-left: 3vw;
}

.btn-zalo-login {
   background-image: url(../halloween_/assets/images/icon-zalo-login.webp);
   background-repeat: no-repeat;
   background-size: 95% 80%;
   width: 86%;
   height: 86%;
   margin-left: 3vw;
}

.btn-email-login {
   background-image: url(../halloween_/assets/images/icon-email-login.webp);
   background-repeat: no-repeat;
   background-size: 95% 80%;
   width: 86%;
   height: 86%;
   margin-left: 3vw;
}

.wrapper-content-rule {
   height: 57vh;
   font-family: 'Roboto Regular';
   overflow-y: auto;
}


.popup-inner.display {
   
}
@keyframes displaypopup {
   0% {
      opacity: 0;
   }

   100% {
      opacity:1;
   }
 }
 

 @media only screen and (max-width: 720px) {

   
   .btn-fb-login, .btn-zing-login, .btn-zalo-login, .btn-email-login {
      background-size: 87% 100%;
      width: 100%;
   }

   .wrapper-content-card {
      height: 66% !important;
   }

   .wrapper-content-rule {
      margin-top: 12% !important;
      height: 48vh !important;
   }

   .popup, .popup2 {
       width: 79vw;
       margin: 8% auto;
       position: relative;
   }

   .popup-dangnhap {
      width: 87%;
      margin: 8% auto;
      position: relative;
  }

   .popup-inner-login {
       opacity: 1;
       width: 100%;
       height: 44%;
       margin-top: 20vh;
       overflow-y: unset !important;
   }

   .popup-wrapper-title {
       position: relative;
       width: 55vw;
       height: 2vh;
       margin: auto;
   }

   .popup-title-background {
      color: white;
      padding: 8%;
      width: 100%;
      height: 6vh;
      text-align: center;
      font-size: 15px;
      position: absolute;
      background-image: url(./assets/images/title-img-popup.webp);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-top: -6%;
  }

  .popup-wrapper-content {
   margin-top: 0vh;
   height: 74%;
   font-size: 12px;
}

.gift-card-front {
   height: 100%;
   width: 94%;
}

.gift-card-text {
   margin-top: 3%;
}

.grid-container-content-card {
   grid-template-columns: minmax(53%, 1fr) minmax(10%, 1fr);
   display: grid;
   height: 100%;
   width: 90%;
}

.phuongweq {

   font-size: 3vw;
   padding-bottom: 3%;
   background-size: 100% 100%;
   line-height: 6px;
   padding-top: 0;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
   width: 100%;
   text-align: center;
   height: 100%;
}

  .title-login {
   height: 2vh;
   text-align: center;
   font-size: 13px;
   overflow-y: unset;
   margin-top: 5vh;
}

.grid-container-login-portal {
   display: grid;
   height: 10vh;
   grid-template-columns: auto auto;
}


.popup-wrapper-close-icon {
   margin-top: -2vh;
   height: 6vh;

}
.wrapper-login-icon {
   overflow-y: unset;
   height: 11vh;
   margin-top: 3vh;
}

.info-popup-login {
   font-size: 13px;
   height: 25%;
   text-align: center;
   margin-top: 0vh;
}

.popup-inner2 {
   margin-top: 22vh;
    width: 100%;
    height: 40vh;
    background: white;
    position: relative;
    transition: 0.5s;
    border-radius: 5rem;
}

.popup-wrapper-close-icon-img {
   width: 5vw;
   height: 6vh;
}

.popup-inner2-rule {
   width: 100%;
   height: 60vh;
   background: white;
   position: relative;
   transition: 0.5s;
   border-radius: 5rem;
   margin-top: 10vh;
}

.title-gift-info {
   width: 66vw !important;;
   height: 7vh !important;
}

.text-title-gift-info {
   font-family: 'UVN Van';
   font-size: 13px;
}

.popup-card {
   width: 88vw;
}

.close-btn-popup-card {
   margin-top: -7vh;
   height: 3vh;
}

}