/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/**** HOME TAB ****/

:root {
    --page-bg-1: #1c1345;
    --page-bg-2: #241a5c;
    --card-bg: #2a2166;
    --green-1: #3fce6a;
    --green-2: #1f9e4d;
    --mid-1: #f2a93b;
    --mid-2: #e4572e;
    --pill-track: rgba(255, 255, 255, 0.1);
    --radius-card: 4px;
}

#main {
    background-color: transparent;
}

#wrapper {
    background-image: url('./assets/image/bg-body.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
}

/* ---- cloned block: <div class="ant-row w-full css-erwcx2"> ---- */
.ant-row.w-full {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: -2px;
    margin-right: -2px;
    row-gap: 4px;
}

/* <div class="ant-col ant-col-xs-8 ant-col-md-6"> */
.ant-col {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding: 0 2px;
}

@media (min-width: 768px) {
    .ant-col {
        flex-basis: 25%;
        max-width: 25%;
    }
}

/* <div class="game-list-items ..."> */
.game-list-items {
    text-align: center;
    padding: 0;
    height: 100%;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.game-list-items:hover {
    opacity: 0.85;
}

.relative {
    position: relative;
}

.game-list-items img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 70px;
    object-fit: cover;
    border-radius: 4px;
}

/* <div class="ant-progress gameProgressBar high|mid" role="progressbar"> */
.gameProgressBar {
    position: relative;
    margin-top: 4px;
    font-size: 0.7rem;
    line-height: 1;
}

.gameProgressBar .ant-progress-outer {
    display: inline-block;
    width: 100%;
}

.gameProgressBar .ant-progress-inner {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    vertical-align: middle;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
}

.gameProgressBar .ant-progress-bg-inner {
    position: relative;
    height: 15px;
    border-radius: 100px;
    transition: width 0.3s ease;
}

/* diagonal stripe overlay, matches the ::after found on the live site */
.gameProgressBar .ant-progress-bg-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100px;
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, 0) 25%,
            rgba(255, 255, 255, 0.25) 0,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0) 75%,
            rgba(255, 255, 255, 0.25) 0);
    background-size: 10px 10px;
}

.gameProgressBar.high .ant-progress-bg-inner {
    background-color: #3fce6a;
    background-image: linear-gradient(90deg, #3fce6a, #1f9e4d);
}

.gameProgressBar.mid .ant-progress-bg-inner {
    background-color: #f2a93b;
    background-image: linear-gradient(90deg, #f2a93b, #e4572e);
}

.ant-progress-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 15px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* ---- cloned block: div.floatingNav_floatingNavWrapper__THRt8 ---- */
.footer-wrapper {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1.2px;
    z-index: 1;
    width: 100%;
    height: auto;
    border-radius: 13px 13px 0 0;
    background: radial-gradient(33.48% 103.75% at 52.2% 0px,
            #531b88 0px,
            #151240 100%);
}

.container {
    padding: 0 4px;
}

.ant-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.ant-col-4 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
}

/* <div class="... floatingNavItems ... text-center relative self-center [active]"> */
.floatingNavItems {
    position: relative;
    text-align: center;
    align-self: center;
}

.floatingNavItems a {
    display: block;
    text-decoration: none;
    padding-top: 2px;
}

.floatingNavItems .nav-icon {
    display: inline-flex;
    color: #fff;
    font-size: 20px;
    line-height: 1;
}

.floatingNavItems .nav-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.floatingNavItems article {
    margin: -1px 0 0;
    font-size: 0.7rem;
    text-transform: capitalize;
    color: var(--lavender);
}

/* active state: white label + small underline pill */
.floatingNavItems.active article {
    color: #fff;
}

.floatingNavItems.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 68%;
    height: 1px;
    background: #fff;
    border-radius: 50px;
}

/* ---- middle "Đăng ký" floating button ---- */
.floatingNavLogin {
    position: relative;
    top: -13px;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    padding-top: 4px;
    text-align: center;
    font-size: 0.7rem;
}

.floatingNavLogin .btn-hit {
    position: relative;
    z-index: 5;
    cursor: pointer;
}

/* outer glow ring image */
.floatingNavLogin::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -12px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-image: url('./assets/image/middle-btn-bg.png');
    background-size: cover;
}

/* solid gradient circle button */
.floatingNavLogin::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    max-width: 70px;
    max-height: 70px;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgb(156, 64, 255), rgb(60, 57, 168));
    border-radius: 50%;
    padding: 13px;
    box-shadow: transparent 0px 0px, transparent 0px 0px, rgba(255, 255, 255, 0.24) 0px 2px 1px 0px inset, rgba(255, 255, 255, 0.25) 0px 4px 4px 0px inset;
}

.floatingNavLogin .nav-icon {
    display: inline-flex;
    color: #fff;
    font-size: 20px;
}

.floatingNavLogin .nav-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.floatingNavLogin article {
    color: #fff;
    font-size: 0.7rem;
    margin-top: 2px;
}

@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
}