/*Button Đăng Ký*/
.back-to-top{
    bottom:90px !important;
}
.btn-subscribe {
  position:fixed;
  bottom:0;
  left:0;
  z-index:99;
}

.btn-shake i {
  color:#fff;
  font-size:16pt;
    animation: Callicon 3s infinite;
}
.btn-subscribe:hover i {animation: Callicon 3s forwards;}
.btn-shake {
  position:relative;
  width:90px;
  height:90px;
  cursor:pointer;
  z-index:11;
  display:flex;
  justify-content:center;
  align-items:center;
}

.btn-circle {
  width:100%;
  height:100%;
  position:absolute;
  background-color:transparent;
  border: 2px solid var(--fs-color-secondary,#be8f49);
  animation:btn-circle-anim 1.2s infinite ease-in-out;
  border-radius: 99px;
}

.btn-circle-fill {
  width:75%;
  height:75%;
  position:absolute;
  background-color: var(--fs-color-secondary,#be8f49);
  animation:btn-circle-fill-anim 1.5s infinite ease-in-out;
  border-radius: 99px;
}

.btn-icon {
  background-color: var(--fs-color-secondary,#be8f49);
  width:50%;
  height:50%;
  border:1px solid #fff;
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 99px;
}

.btn-label {
  position:absolute;
  background:var(--primary-color,#ff0000);
  border:1px solid #fff;
  height: 45px;
  width:auto;
  padding:2px 10px 0 41px;
  cursor:pointer;
  transition:all .3s;
  z-index:9;
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
  left:22.5px;
  bottom: 22.5px;
  white-space:nowrap;
  transform-origin:left center;
  border-radius: 99px;
}

.btn-label a,.btn-label button {
color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    text-indent: 15px;
    display: block;
    line-height: 40px;
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
}

.btn-label:hover {
  background: var(--fs-color-secondary,#ff0000);
  transform:scale(1.05);
}
.btn-subscribe {
        opacity:0;
    }
   .btn-subscribe.scrolled {
        animation: goRight;
        animation-duration: 1s;
        animation-delay: .3s;
        animation-fill-mode: forwards;
    }
@keyframes goRight {
    0% {
        opacity: 0;
        transform: translate3d(-100%,0,0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes btn-circle-anim {
  0% {
    transform:scale(0.5);
    opacity:.1;
  }
  30% {
    transform:scale(0.7);
    opacity:.5;
  }
  100% {
    transform:scale(1);
    opacity:.1;
  }
}

@keyframes btn-circle-fill-anim {
  0%,
  100% {
    transform:scale(0.7);
    opacity:.6;
  }
  50% {
    transform:scale(1);
    opacity:.6;
  }
}

/*CSS form popup*/
.register-form {
    height: 0;
    overflow: hidden;
    width: 100%;
    left: 0;
    bottom: 0;
    margin: 0;
    position: fixed;
    text-align: center;
    transition: height .3s ease-in-out;
    background-color: rgba(0, 0, 0, .3);
    z-index: 999999;
}

.register-form::before,
.register-form::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.register-form > span {
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    position: absolute;
    background: linear-gradient(135deg, color-mix(in srgb, var(--fs-color-primary, #2f1401) 50%, transparent) 0, color-mix(in srgb, var(--fs-color-primary, #2f1401) 80%, transparent) 80%);
    transition: opacity .8s ease-in-out;
    opacity: 0;
    cursor: pointer;
}

.register-form.show {
    height: 100%;
    overflow: visible;
}

.register-form.show > span {
    opacity: 1;
}

.register-form .form-popup {
    display: inline-block;
    position: relative;
    width: 80%;
    max-width: 660px;
    height: auto;
    margin: 0;
    vertical-align: middle;
    overflow: visible;
    z-index: 20;
}

.register-form .popup-title {
    position: relative;
    display: block;
    text-align: center;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 20px 0;
}

.register-form .input-but {
    margin: 10px 0 0;
}

.register-form .require-col {
    width: auto;
    padding: 20px 50px;
    background-color: color-mix(in srgb, var(--fs-color-primary, #2f1401) 100%, transparent);
    border-radius: 20px;
    text-align: center;
    border: 6px solid rgba(255, 255, 255, .2);
    opacity: 0;
}

.register-form.show .require-col {
    animation: flipInX 1s .5s forwards;
}

.register-form .close {
    top: -30px;
    right: -30px;
    opacity: 0;
    position: absolute;
    pointer-events: none;
    width: 60px;
    height: 60px;
    cursor: pointer;
    color: #fff;
    background: none;
    border: none;
    z-index: 9999;
    transition: all .3s ease-in-out;
}

.register-form.show .close {
    animation: goLeft 1s 1s forwards;
    pointer-events: auto;
    margin:0;
}

.register-form .close::after {
    content: '\f00d';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: color-mix(in srgb, var(--fs-color-primary, #2f1401) 90%, transparent);
    border-radius: 50%;
    font-family: 'FontAwesome';
    font-size: 21px;
    align-content: center;
    transition: all .3s ease-in-out;
}

/* ANIMATION */
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(30deg) scale(.8);
        opacity: 0;
    }

    100% {
        transform: perspective(400px) rotateX(0) scale(1);
        opacity: 1;
    }
}

/* RESPONSIVE */
@media screen and (max-width: 540px) {
    .register-form .popup-title {
        font-size: 20px;
    }

    .register-form .require-col {
        padding: 25px 20px;
        border: 3px solid rgba(255, 255, 255, .2);
    }

    .register-form .close {
        top: 0;
        right: 0;
    }

    .register-form .close::after {
        border-radius: 0;
        background: transparent;
    }

    .register-form .close {
        width: 35px;
        height: 35px;
        border-radius: 0;
    }
    .register-form .form-popup {
    width: 90%;
    }
}

@media screen and (min-width: 550px) {
    .register-form.show .close:hover::after {
        transform: rotate(90deg);
        background-color: color-mix(in srgb, var(--fs-color-secondary, #be8f49) 90%, transparent);
        box-shadow: 0 10px 30px rgba(255, 255, 255, .2);
    }
}