:root {
    --primary-color: #446084;
    --fs-color-primary: #446084;
    --fs-color-secondary: #d26e4b;
    --fs-color-success: #7a9c59;
    --fs-color-alert: #b20000;
    --fs-experimental-link-color: #dd3333;
    --fs-experimental-link-color-hover: #0a0a0a;
}

.tooltipster-base {
    --tooltip-color: #fff;
    --tooltip-bg-color: #000;
}

.off-canvas-right .mfp-content,
.off-canvas-left .mfp-content {
    --drawer-width: 300px;
}

html {
    background-image: var(--wpr-bg-a4dc2e3a-af85-44fc-98f6-7b798ab97c0f);
}

.container-width,
.full-width .ubermenu-nav,
.container,
.row {
    max-width: 1250px
}

.row.row-collapse {
    max-width: 1220px
}

.row.row-small {
    max-width: 1242.5px
}

.row.row-large {
    max-width: 1280px
}

body.framed,
body.framed header,
body.framed .header-wrapper,
body.boxed,
body.boxed header,
body.boxed .header-wrapper,
body.boxed .is-sticky-section {
    max-width: 1130px
}

.header-main {
    height: 90px
}

#logo img {
    max-height: 90px
}

#logo {
    width: 200px;
}

.header-bottom {
    min-height: 50px
}

.header-top {
    min-height: 35px
}

.transparent .header-main {
    height: 90px
}

.transparent #logo img {
    max-height: 90px
}

.has-transparent+.page-title:first-of-type,
.has-transparent+#main>.page-title,
.has-transparent+#main>div>.page-title,
.has-transparent+#main .page-header-wrapper:first-of-type .page-title {
    padding-top: 140px;
}

.header.show-on-scroll,
.stuck .header-main {
    height: 70px !important
}

.stuck #logo img {
    max-height: 70px !important
}

.header-bg-color {
    background-color: rgba(255, 255, 255, 0.9)
}

.header-bottom {
    background-color: #880e00
}

.header-bottom-nav>li>a {
    line-height: 16px
}

@media (max-width: 549px) {
    .header-main {
        height: 70px
    }

    #logo img {
        max-height: 70px
    }
}

.nav-dropdown-has-arrow.nav-dropdown-has-border li.has-dropdown:before {
    border-bottom-color: #ffffff;
}

.nav .nav-dropdown {
    border-color: #ffffff
}

.nav-dropdown {
    border-radius: 15px
}

.nav-dropdown {
    font-size: 100%
}

.nav-dropdown-has-arrow li.has-dropdown:after {
    border-bottom-color: #880e00;
}

.nav .nav-dropdown {
    background-color: #880e00
}

body {
    color: #0a0a0a
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-font {
    color: #fa1414;
}

body {
    font-size: 100%;
}

@media screen and (max-width: 549px) {
    body {
        font-size: 100%;
    }
}

body {
    font-family: "Open Sans", sans-serif;
}

body {
    font-weight: 400;
    font-style: normal;
}

.nav>li>a {
    font-family: "Open Sans", sans-serif;
}

.mobile-sidebar-levels-2 .nav>li>ul>li>a {
    font-family: "Open Sans", sans-serif;
}

.nav>li>a,
.mobile-sidebar-levels-2 .nav>li>ul>li>a {
    font-weight: 700;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-font,
.off-canvas-center .nav-sidebar.nav-vertical>li>a {
    font-family: "Open Sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-font,
.banner h1,
.banner h2 {
    font-weight: 700;
    font-style: normal;
}

.header:not(.transparent) .header-bottom-nav.nav>li>a {
    color: #ffffff;
}

.header:not(.transparent) .header-bottom-nav.nav>li>a:hover,
.header:not(.transparent) .header-bottom-nav.nav>li.active>a,
.header:not(.transparent) .header-bottom-nav.nav>li.current>a,
.header:not(.transparent) .header-bottom-nav.nav>li>a.active,
.header:not(.transparent) .header-bottom-nav.nav>li>a.current {
    color: #ecec40;
}

.header-bottom-nav.nav-line-bottom>li>a:before,
.header-bottom-nav.nav-line-grow>li>a:before,
.header-bottom-nav.nav-line>li>a:before,
.header-bottom-nav.nav-box>li>a:hover,
.header-bottom-nav.nav-box>li.active>a,
.header-bottom-nav.nav-pills>li>a:hover,
.header-bottom-nav.nav-pills>li.active>a {
    color: #FFF !important;
    background-color: #ecec40;
}

.nav-vertical-fly-out>li+li {
    border-top-width: 1px;
    border-top-style: solid;
}

/* Custom CSS */
.custom .btn_header {
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    padding: 8px 12px;
    min-width: 130px;
    justify-content: center;
    color: #fff !important;
}

.custom .btn_header:hover {
    transform: translateY(-5px);
}

.custom .btn_header.btn_login {
    border: 2px solid #818181;
    padding: 6px 12px;
}

.custom .btn_header.btn_register,
.custom .btn_header.btn_play {
    background: linear-gradient(to top, #f50000, #ec6612);
}

.header-nav>li.menu-item>a>i {
    display: none;
}

.header-button-2 .header-button .button {
    background: linear-gradient(to top, #f50000, #ec6612);
    border: 0;
    min-width: 110px;
    animation: tada 1.2s infinite;
}

@keyframes tada {
    0% {
        transform: scaleX(1);
    }

    10%,
    20% {
        transform: scale3d(1, 1, 1) rotate(-3deg);
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.2, 1.2, 1.2) rotate(1deg);
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.2, 1.2, 1.2) rotate(-2deg);
    }

    100% {
        transform: scaleX(1);
    }
}

.custom .btn_header {
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    padding: 10px 12px;
    min-width: 130px;
    justify-content: center;
    color: #fff !important;
}

.custom .btn_header:hover {
    transform: translateY(-5px);
}

.custom .btn_header.btn_login {
    border: 2px solid #ff2600;
    padding: 8px 12px;
    color: #ff2600 !important;
}

.custom .btn_header.btn_register {
    background: #ff2600;
}

.label-new.menu-item>a:after {
    content: "Mới";
}

.label-hot.menu-item>a:after {
    content: "Nổi bật";
}

.label-sale.menu-item>a:after {
    content: "Giảm giá";
}

.label-popular.menu-item>a:after {
    content: "Phổ biến";
}

.logo-section .large-12 .col-inner {
    background: white;
    box-shadow: 0px 0px 30px 0px rgb(177 89 105 / 10%);
    padding: 40px 10px;
    border-radius: 20px;
}

.logo-section {
    background: white;
    box-shadow: 0px 0px 30px 0px rgb(177 89 105 / 10%);
    padding: 40px 10px;
    border-radius: 20px;

    .col {
        padding-bottom: 0;
    }
}

.first-col {
    .col-inner {
        border-radius: 40px 0 0;
    }

    p {
        padding: 15px;
    }
}

.second-col {
    .col-inner {
        border-radius: 40px;
    }

    p {
        padding: 15px;
    }
}

.third-col {
    .col-inner {
        border-radius: 0 0 40px;
    }

    p {
        padding: 15px;
    }
}

.tabbed-content {
    .nav {
        justify-content: center;
        gap: 10px;

        span {
            color: rgb(30 22 102);
        }

        .active {
            span {
                color: red;
            }

            a::before {
                background: red;
            }
        }
    }
}


.chay,
.text-link h1,
.text-link p {
    text-transform: uppercase;
    background-image: linear-gradient(-225deg, #00f5ff 0%, #ffff00 29%, #f81123 67%, #fff800 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
}

@keyframes textclip {
    100% {
        background-position: 200% center;
    }
}