/***** 
    ANIMATION
 *****/
@keyframes shake {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }

    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }

    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }

    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }

    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }

    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }

    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
}

@keyframes zoom {
    0% {
        transform: scale(.9);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px transparent;
    }

    100% {
        transform: scale(.9);
        box-shadow: 0 0 0 0 transparent;
    }
}

@keyframes my02 {
    0% {
        color: #000;
    }

    50% {
        color: #38497a;
    }

    to {
        color: #000;
    }
}

@keyframes bounce-glow {

    0%,
    100% {
        transform: translateY(0) scale(0.8);
        text-shadow: 0 0 3px #fff, 0 0 5px #ff4d4d, 0 0 8px #ff4d4d;
    }

    50% {
        transform: translateY(0) scale(1.0);
        text-shadow: 0 0 3px #fff, 0 0 5px #ff4d4d, 0 0 8px #ff4d4d;
    }
}

/***** 
    ANIMATION
 *****/
/***** 
    GLOBAL
 *****/
html {
    font-size: calc(0.0075 * 100vw);
}

html[device="mobile"] {
    font-size: calc(100vw * 0.02);
}

body {
    font-size: 1.2rem;
    overflow: hidden;
}

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

a {
    text-decoration: none;
}

.main-bg {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-image: url(../imgs/background.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

/***** 
    GLOBAL
 *****/

/***** 
    HEADER
 *****/
header {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

/* TOP LOGO */
header .header-logo {
    display: flex;
    margin-top: 1rem;
    gap: 1rem;
}

header .header-logo .zx88-logo {
    width: 13rem;
    height: 7.986rem;
}

header .header-logo .atq-logo {
    width: 13rem;
    height: 7.986rem;
}

header .header-logo .atq-logo:hover {
    transform: scale(1.1);
    transition: .5s;
}

header .header-logo .header-break {
    background-color: #8bd7f8;
    width: .35rem;
    height: 80%;
    margin: auto 0;
    border-radius: 5rem;
}

/* TOP LOGO */
/* REGISTER BUTTON */
.menu-top {
    display: flex;
    justify-content: space-between;
    margin-top: 1.3rem;
    width: 26.73rem;
}

.menu-top button {
    width: 12.5rem;
    height: 3.5rem;
    font-size: 1.18rem;
    font-weight: bold;
    border-radius: 1.18rem;
    border: none;
    text-transform: uppercase;
}

.menu-top button:hover {
    transform: translateY(-.35rem);
    transition: .5s;
}

.menu-top button.button-login {
    color: #fff;
    background: linear-gradient(to top, #2a68a1, #01278a);
}

.menu-top button.button-register {
    color: #2a68a1;
    background: #fff;
    border: 1px solid #2a68a1;
}

/* REGISTER BUTTON */
/***** 
    HEADER
 *****/
/***** 
    CONTAINER
 *****/
.main-container {
    width: 70%;
    margin: 0 auto;
}

/* MID IMAGE */
.mid-image {
    height: 40rem;
    width: 40rem;
    margin: -6rem auto 1rem auto;
}

/* MID IMAGE */

/* LINKS */
.redirect-links {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-radius: 1.04rem;
    gap: 1.38rem;
    position: relative;
    z-index: 2;
    margin-top: -2.5rem;
}

.item-link {
    width: 100%;
    position: relative;
    padding-top: .7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wp-item-link {
    padding: 0 15% 5% 15%;
    border-radius: 2.08rem;
    color: #fff;
    text-align: center;
    position: relative;
    background-color: unset;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.item-link .title {
    font-size: 1.38rem;
    font-weight: 700;
    padding: .34rem;
    border-bottom: 1px solid #D9D9D9;
    width: 100%;
}

.item-link .speed {
    font-size: 1.25rem;
    padding: .35rem;
    margin-top: 2.77rem;
    margin-bottom: .7rem;
    color: #585858;
    width: 100%;
    font-weight: 700;
}

.item-link .btn-redirect {
    padding: 0 10% 10% 10%;
    width: 100%;
    transition: 0.3s;
}

.item-link .speed {
    padding: .35rem;
    margin-bottom: .35rem;
}

.item-link .btn-redirect:hover {
    text-decoration: none !important;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.element-hover:hover {
    text-decoration: none !important;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.item-link .title-top {
    padding: .35rem;
    font-size: 1.25rem;
    color: #FF9500;
}

.item-link .btn-link {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 1.04rem;
    font-weight: 500;
    text-decoration: none;
    padding: .35rem .7rem;
    box-sizing: border-box;
    color: #000;
    border-radius: 1.35rem;
    cursor: pointer;
    display: block;
}

.color-o1 {
    background-image: url(../imgs/link1.png);
}

.color-o2 {
    background-image: url(../imgs/link2.png);
}

.color-o3 {
    background-image: url(../imgs/link3.png);
}

.color-o4 {
    background-image: url(../imgs/link4.png);
}

.color-o5 {
    background-image: url(../imgs/link5.png);
}

.color-o6 {
    background-image: url(../imgs/link6.png);
}

.nhapnhay2 {
    animation: my02 1s infinite;
    text-align: center
}

.glass-button {
    padding: .83rem;
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

.glass-button:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 1);
    transform: scale(1.05);
}

/* LINKS */
/* DOWNLOAD */
.download-product {
    width: 100%;
    height: 9.5rem;
    /*background: linear-gradient(180deg, #aed6f7 0%, #6cb5ef 100%);*/
    border-radius: 1.73rem;
    margin-top: 1rem;
    display: flex;
    justify-content: space-evenly;
    padding: .8rem;
}

.download-android,
.download-ios {
    display: flex;
    gap: 4rem;
}

.download-icon,
.download-ch-play {
    margin: auto;
}

.download-qr {
    height: 8rem;
    width: 8rem;
    border-radius: 1rem;
    box-shadow: 4px -4px 4px rgba(0, 0, 0, .25);
}

.download-qr img {
    border-radius: .6rem;
}

.download-icon {
    height: 7rem;
    animation: bounce-glow 1.5s infinite ease-in-out;
}

/* DOWNLOAD */
/***** 
    CONTAINER
 *****/
/***** 
    LIVE CHAT
 *****/
.br_right_bar {
    position: fixed;
    top: 70%;
    transform: translateY(-50%);
    right: 1.66rem;
    z-index: 1111;
    transition: .3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .31rem;
    animation: zoom 1.3s infinite;
}

.br_right_bar .right-item {
    width: 6.94rem;
    height: 6.94rem;
    gap: .2777rem;
    position: relative;
    cursor: pointer;
    border-radius: 50%;
    border: 1px solid #97d2fe;
    background: linear-gradient(180deg, #019efb, #0176dc);
    box-shadow: inset 0 -3.55px 4.733px 0 rgba(0, 0, 0, .25);
    animation: shake 1.3s infinite;
}

.br_right_bar .right-item .LIVECHAT {
    width: 2.29rem;
    height: 2.638rem;
}


.br_right_bar .right-item .rightbat-box .rightbar_title {
    color: #fff;
    text-align: center;
    font-size: .7rem;
    font-weight: 600;
}

.br_right_bar a {
    text-decoration: none;
}

.br_right_bar .right-item,
.br_right_bar .right-item .rightbat-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url(../imgs/CSKH.png) no-repeat 50%;
    background-size: contain;
}

/***** 
    LIVE CHAT
 *****/
/***** 
    MOBILE
 *****/
html[device="mobile"] .br_right_bar {
    top: 25%;
}

html[device="mobile"] .br_right_bar .right-item {
    width: 7.94rem;
    height: 7.94rem;
}

html[device="mobile"] .main-bg {
    background-image: url(../imgs/bg-mb-full.jpg);
}

html[device="mobile"] header {
    width: 100%;
    justify-content: center;
    gap: 1.5rem;
}

html[device="mobile"] .header-logo {
    margin: 1rem 0;
}

html[device="mobile"] .menu-top {
    width: 13.5rem;
    right: .5rem;
    top: 0rem;
    flex-direction: column;
    gap: .5rem;
    justify-content: flex-start;
}

html[device="mobile"] .main-container {
    width: 90%;
}

html[device="mobile"] .menu-top button {
    width: 13.5rem;
    font-size: 1.5rem;
}

html[device="mobile"] .mid-image {
    height: 30rem;
    width: 30rem;
    margin: 0 auto 1rem auto;
}

html[device="mobile"] .redirect-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    background-color: rgba(250, 254, 255, 0.7);
    margin-top: 1rem;
    padding-bottom: 1rem;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, .25), -4px -4px 4px rgba(0, 0, 0, .25);
}

html[device="mobile"] .download-product {
    height: 20rem;
    margin-top: 1rem;
    padding: 1.5rem;
}

html[device="mobile"] .download-qr {
    height: 10rem;
    width: 10rem;
    margin: 0 auto;
}

html[device="mobile"] .download-qr img {
    border-radius: 1rem;
}

html[device="mobile"] .download-android,
html[device="mobile"] .download-ios {
    flex-direction: column;
    gap: 2rem;
}

html[device="mobile"] .download-icon {
    height: 5rem;
}

/***** 
    MOBILE
 *****/