/* thai */
@font-face {
    font-family: 'FC Iconic Text';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('FCIconicTextLight'), local('FC Iconic Text Light'), url(https://asset.cloudigame.co/fonts/FC-Iconic-Text/FC-Iconic-Text-Light.ttf) format('truetype');
}
@font-face {
    font-family: 'FC Iconic Text';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('FCIconicTextRegular'), local('FC Iconic Text Regular'), url(https://asset.cloudigame.co/fonts/FC-Iconic-Text/FC-Iconic-Text-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'FC Iconic Text';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('FCIconicTextMedium'), local('FC Iconic Text Medium'), url(https://asset.cloudigame.co/fonts/FC-Iconic-Text/FC-Iconic-Text-Medium.ttf) format('truetype');
}
@font-face {
    font-family: 'FC Iconic Text';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('FCIconicTextSemiBold'), local('FC Iconic Text SemiBold'), url(https://asset.cloudigame.co/fonts/FC-Iconic-Text/FC-Iconic-Text-SemiBold.ttf) format('truetype');
}
@font-face {
    font-family: 'FC Iconic Text';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('FCIconicTextBold'), local('FC Iconic Text Bold'), url(https://asset.cloudigame.co/fonts/FC-Iconic-Text/FC-Iconic-Text-Bold.ttf) format('truetype');
}

@keyframes x-glow-button-sa {
    from {
        box-shadow: 0 0 5px rgba(255, 255, 255, .125),
        0 0 8px rgba(255, 255, 255, .125),
        0 0 10px rgba(255, 255, 255, .125),
        0 0 13px rgba(0, 106, 86, .4),
        0 0 16px rgba(0, 106, 86, .4),
        0 0 28px rgba(0, 106, 86, .4),
        0 0 36px rgba(0, 106, 86, .4),
        0 0 44px rgba(0, 106, 86, .4);
    }
    to {
        box-shadow: 0 0 2px rgba(255, 255, 255, .125),
        0 0 5px rgba(255, 255, 255, .125),
        0 0 8px rgba(255, 255, 255, .125),
        0 0 10px rgba(0, 106, 86, .4),
        0 0 8px rgba(0, 106, 86, .4),
        0 0 14px rgba(0, 106, 86, .4),
        0 0 18px rgba(0, 106, 86, .4),
        0 0 22px rgba(0, 106, 86, .4);
    }
}

@keyframes x-glow-button-wm {
    from {
        box-shadow: 0 0 5px rgba(255, 255, 255, .125),
        0 0 8px rgba(255, 255, 255, .125),
        0 0 10px rgba(255, 255, 255, .125),
        0 0 13px rgba(22, 111, 216, .4),
        0 0 16px rgba(22, 111, 216, .4),
        0 0 28px rgba(22, 111, 216, .4),
        0 0 36px rgba(22, 111, 216, .4),
        0 0 44px rgba(22, 111, 216, .4);
    }
    to {
        box-shadow: 0 0 2px rgba(255, 255, 255, .125),
        0 0 5px rgba(255, 255, 255, .125),
        0 0 8px rgba(255, 255, 255, .125),
        0 0 10px rgba(22, 111, 216, .4),
        0 0 8px rgba(22, 111, 216, .4),
        0 0 14px rgba(22, 111, 216, .4),
        0 0 18px rgba(22, 111, 216, .4),
        0 0 22px rgba(22, 111, 216, .4);
    }
}

@keyframes x-glow-button-sexy {
    from {
        box-shadow: 0 0 5px rgba(255, 255, 255, .125),
        0 0 8px rgba(255, 255, 255, .125),
        0 0 10px rgba(255, 255, 255, .125),
        0 0 13px rgba(130, 55, 225, .4),
        0 0 16px rgba(130, 55, 225, .4),
        0 0 28px rgba(130, 55, 225, .4),
        0 0 36px rgba(130, 55, 225, .4),
        0 0 44px rgba(130, 55, 225, .4);
    }
    to {
        box-shadow: 0 0 2px rgba(255, 255, 255, .125),
        0 0 5px rgba(255, 255, 255, .125),
        0 0 8px rgba(255, 255, 255, .125),
        0 0 10px rgba(130, 55, 225, .4),
        0 0 8px rgba(130, 55, 225, .4),
        0 0 14px rgba(130, 55, 225, .4),
        0 0 18px rgba(130, 55, 225, .4),
        0 0 22px rgba(130, 55, 225, .4);
    }
}

@keyframes x-glow-button-ae {
    from {
        box-shadow: 0 0 5px rgba(255, 255, 255, .125),
        0 0 8px rgba(255, 255, 255, .125),
        0 0 10px rgba(255, 255, 255, .125),
        0 0 13px rgba(163, 25, 75, .4),
        0 0 16px rgba(163, 25, 75, .4),
        0 0 28px rgba(163, 25, 75, .4),
        0 0 36px rgba(163, 25, 75, .4),
        0 0 44px rgba(163, 25, 75, .4);
    }
    to {
        box-shadow: 0 0 2px rgba(255, 255, 255, .125),
        0 0 5px rgba(255, 255, 255, .125),
        0 0 8px rgba(255, 255, 255, .125),
        0 0 10px rgba(163, 25, 75, .4),
        0 0 8px rgba(163, 25, 75, .4),
        0 0 14px rgba(163, 25, 75, .4),
        0 0 18px rgba(163, 25, 75, .4),
        0 0 22px rgba(163, 25, 75, .4);
    }
}

@keyframes x-glow-button-dg {
    from {
        box-shadow: 0 0 5px rgba(255, 255, 255, .125),
        0 0 8px rgba(255, 255, 255, .125),
        0 0 10px rgba(255, 255, 255, .125),
        0 0 13px rgba(124, 97, 28, .4),
        0 0 16px rgba(124, 97, 28, .4),
        0 0 28px rgba(124, 97, 28, .4),
        0 0 36px rgba(124, 97, 28, .4),
        0 0 44px rgba(124, 97, 28, .4);
    }
    to {
        box-shadow: 0 0 2px rgba(255, 255, 255, .125),
        0 0 5px rgba(255, 255, 255, .125),
        0 0 8px rgba(255, 255, 255, .125),
        0 0 10px rgba(124, 97, 28, .4),
        0 0 8px rgba(124, 97, 28, .4),
        0 0 14px rgba(124, 97, 28, .4),
        0 0 18px rgba(124, 97, 28, .4),
        0 0 22px rgba(124, 97, 28, .4);
    }
}

@keyframes x-glow-button-all {
    from {
        box-shadow: 0 0 5px rgba(255, 255, 255, .125),
        0 0 8px rgba(255, 255, 255, .125),
        0 0 10px rgba(255, 255, 255, .125),
        0 0 13px rgba(139, 45, 21, .4),
        0 0 16px rgba(139, 45, 21, .4),
        0 0 28px rgba(139, 45, 21, .4),
        0 0 36px rgba(139, 45, 21, .4),
        0 0 44px rgba(139, 45, 21, .4);
    }
    to {
        box-shadow: 0 0 2px rgba(255, 255, 255, .125),
        0 0 5px rgba(255, 255, 255, .125),
        0 0 8px rgba(255, 255, 255, .125),
        0 0 10px rgba(139, 45, 21, .4),
        0 0 8px rgba(139, 45, 21, .4),
        0 0 14px rgba(139, 45, 21, .4),
        0 0 18px rgba(139, 45, 21, .4),
        0 0 22px rgba(139, 45, 21, .4);
    }
}

@keyframes x-btn-bg-moving {
    from {
        background-size: 100%;
    }
    to {
        background-size: 300%;
    }
}

html {
    height: 100%;
    font-family: FC Iconic Text, Helvetica Neue, Helvetica, Arial, sans-serif;
    background-color: #070707;
}

body {
    width: 100%;
    min-height: 100vh;
    font-family: "FC Iconic Text", sans-serif;
    color: #fff;
    background-color: #070707;
    overflow-x: hidden;
}

.x-title {
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.x-main-container .h1 {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    visibility: hidden;
}

.x-main-container {
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem 1rem 2rem;
    overflow: hidden;
}

.x-cover {
    border-radius: .625rem;
}

.x-btn-social {
    display: flex;
    gap: .375rem;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    font-size: .875rem;
    border-radius: 0.25rem;
    transition: all .2s;
}

.x-btn-social:hover {
    filter: brightness(.875);
}

.x-btn-social.-line {
    background: linear-gradient(180deg, #05C453 0%, #008737 100%);
}

.x-btn-social.-telegram {
    background: linear-gradient(180deg, #2BA3DF 0%, #2276D8 100%);
}

.x-btn-social.-facebook {
    background: linear-gradient(180deg, #5168B0 0%, #27408E 100%);
}

.x-social-wrapper {
    display: flex;
    gap: .75rem;
    margin-top: 1.25rem;
}

.x-social-wrapper > * {
    flex: 1;
}

.x-social-wrapper .-ic {
    width: 22px;
}

.img-fluid {
    height: auto;
    max-width: 100%;
}

.x-provider-entry-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.x-provider-box {
    width: calc(50% - .5rem);
    margin-top: 3rem;
    border-radius: 1.5rem;
    text-align: center;
}

.x-provider-box .-cover {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: -2rem auto 0;
}

.x-provider-box .-btn-play {
    position: relative;
    display: inline-block;
    width: 100px;
    margin-top: .25rem;
    padding: .375rem .5rem;
    border-radius: 999px;
    transition: all .2s;
}

.x-provider-box .-btn-play:hover {
    filter: brightness(.75);
}

.x-provider-box .-btn-play span {
    position: relative;
    z-index: 2;
    font-size: .875rem;
}

.x-provider-box .-btn-play span::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: .25rem;
    background-image: url("./img/btn-ic.png");
    background-size: 100%;
}

.x-provider-box .-btn-play span::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: .25rem;
    background-image: url("./img/btn-ic.png");
    background-size: 100%;
}

/*.x-provider-box .-btn-play::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    transform: translate(-50%, -50%);*/
/*    border-radius: 999px;*/
/*}*/

.x-provider-box .-btn-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /*width: calc(100% - 4px);*/
    /*height: calc(100% - 4px);*/
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background-position: center;
    background-size: 100%;
    animation: x-btn-bg-moving 2s ease-in-out infinite alternate;
}

.x-provider-box.-sa {
    background: radial-gradient(100% 100% at 50% 0%, #00735e 0%, #00251e 19.83%, rgba(0, 37, 30, 0) 79.15%);
}

.x-provider-box.-sa .-btn-play {
    box-shadow: 0 0 10px 0 #00735d;
    animation: x-glow-button-sa 1s infinite alternate;
}

.x-provider-box.-sa .-btn-play::before {
    background: linear-gradient(180deg, #f1ffa8 0%, #ffd771 100%);
}

.x-provider-box.-sa .-btn-play::after {
    /*background: #0b2319;*/
    background-image: url("./img/btn-bg-sa.png");
}

.x-provider-box.-wm {
    background: radial-gradient(100% 100% at 50% 0%, #023ea7 0%, #00163c 25.57%, rgba(0, 22, 60, 0) 79.15%);
}

.x-provider-box.-wm .-btn-play {
    box-shadow: 0 0 10px 0 #2ba3df;
    animation: x-glow-button-wm 1s infinite alternate;
}

.x-provider-box.-wm .-btn-play::before {
    background: linear-gradient(180deg, #ffffff 0%, #b3e6ff 100%);
}

.x-provider-box.-wm .-btn-play::after {
    /*background: #0a193e;*/
    background-image: url("./img/btn-bg-wm.png");
    animation-delay: .6s;
}

.x-provider-box.-sexy {
    background: radial-gradient(100% 100% at 50% 0%, #ad2e94 0%, #3d1034 19.83%, rgba(61, 16, 52, 0) 79.15%);
}

.x-provider-box.-sexy .-btn-play {
    box-shadow: 0 0 10px 0 #de56ea;
    animation: x-glow-button-sexy 1s infinite alternate;
}

.x-provider-box.-sexy .-btn-play::before {
    background: linear-gradient(180deg, #ff438f 0%, #ff3f9b 100%);
}

.x-provider-box.-sexy .-btn-play::after {
    /*background: #3b1939;*/
    background-image: url("./img/btn-bg-sexy.png");
    animation-delay: 1.2s;
}

.x-provider-box.-ae {
    background: radial-gradient(100% 100% at 50% 0%, #bd014f 0%, #3c0019 19.83%, rgba(60, 0, 25, 0) 79.15%);
}

.x-provider-box.-ae .-btn-play {
    box-shadow: 0 0 10px 0 #fd5a62;
    animation: x-glow-button-ae 1s infinite alternate;
}

.x-provider-box.-ae .-btn-play::before {
    background: linear-gradient(180deg, #ffab29 0%, #fd5a62 100%);
}

.x-provider-box.-ae .-btn-play::after {
    /*background: #3b0b1e;*/
    background-image: url("./img/btn-bg-ae.png");
    animation-delay: 1.8s;
}

.x-provider-box.-dg {
    background: radial-gradient(100% 100% at 50% 0%, #916800 0%, #2e2100 34%, rgba(46, 33, 0, 0) 79.15%);
}

.x-provider-box.-dg .-btn-play {
    box-shadow: 0 0 10px 0 #938125;
    animation: x-glow-button-dg 1s infinite alternate;
}

.x-provider-box.-dg .-btn-play::before {
    background: linear-gradient(180deg, #fbd66f 0%, #d6a038 100%);
}

.x-provider-box.-dg .-btn-play::after {
    /*background: #281c0a;*/
    background-image: url("./img/btn-bg-dg.png");
    animation-delay: 2.4s;
}

.x-provider-box.-all {
    background: radial-gradient(100% 100% at 50% 0%, #843d2a 0%, #2e0d04 19.83%, rgba(46, 13, 4, 0) 79.15%);
}

.x-provider-box.-all .-btn-play {
    box-shadow: 0 0 10px 0 #938125;
    animation: x-glow-button-all 1s infinite alternate;
}

.x-provider-box.-all .-btn-play::before {
    background: linear-gradient(180deg, #fbd66f 0%, #d6a038 100%);
}

.x-provider-box.-all .-btn-play::after {
    /*background: #25140f;*/
    background-image: url("./img/btn-bg-all.png");
    animation-delay: 3s;
}

.x-how-to-container {
    display: none;
    margin-top: 3rem;
}

.x-btn-tab {
    min-width: 120px;
    padding: .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: #fff;
    background: rgba(38, 38, 38, 1);
}

.x-btn-tab:hover {
    color: rgba(38, 38, 38, 1);
    background: linear-gradient(180deg, #cbb168 0%, #8d7329 100%);
}

.x-btn-tab:first-child {
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.x-btn-tab:last-child {
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.x-btn-tab.-active {
    color: rgba(38, 38, 38, 1);
    background: linear-gradient(180deg, #ffde82 0%, #dbb241 100%);
}

.x-tab-wrapper {
    display: none;
    justify-content: center;
}

.x-tab-wrapper.-show {
    display: flex;
}

.x-tab-content-track {
    margin: 1.5rem auto 0;
    max-width: 380px;
}

.x-tab-content {
    display: none;
}

.x-tab-content .-video {
    margin-top: 1.5rem;
}

.x-how-to-content-heading {
    padding: .375rem .75rem;
    border-radius: 0.375rem;
    font-size: .875rem;
    font-weight: 600;
    background: rgba(38, 38, 38, 1);
    text-align: center;
}

.x-how-to-content-heading span {
    color: rgba(251, 191, 36, 1);
}

.x-how-to-content-description {
    margin-top: 1rem;
    font-size: .8125rem;
    font-weight: 300;
    color: rgba(229, 229, 229, 1);
}