:root {

    --yellow: #e0ad1f;

    --orange: #b76e23;

    --green: #089256;

    --blue: #076db6;

    --white: #fff;

    --prink: #ff0063;

    --purple: #7e6fda;

    --colormain: #00234b;

    --white: #fff;

    --dark: #282b3e;

    --gray600: #495261;

    --gray500: #505565;

    --gray10: #fbfbfb;

    --bg-detail: #fcfaf6;

    --bg-agray: #f7f7f7;

    --bg-agray1: #e5e5e5;

    --bg-agray2: #f6f7fb;

    --font1: "SF Pro Display";

    --font2: "Inter", sans-serif;

    --blue700: #00234b;

    --blue600: #1c2f6e;

    --blue500: #274c98;

    --gray200: #d2d7e1;

    --gray100: #e3e7ef;

    --gray50: #f3f5f8;

    --border: #d2d7e1;

    --bezier: cubic-bezier(0.25, 0.1, 0.25, 1)

}



.flexbox {

    display: -webkit-flex;

    display: -moz-flex;

    display: -ms-flex;

    display: -o-flex;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex

}



.no-flexbox {

    display: inherit

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box

}



body {

    margin: 0 auto;

    background: #ebeff4;

    font-family: var(--font1);

    font-size: 14px;

    line-height: 1.5;

    padding: 0 !important;

    position: relative

}



body::-webkit-scrollbar {

    width: 6px;

    background-color: #fff

}



body::-webkit-scrollbar-thumb {

    background-color: #222

}



body::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);

    background-color: #fff

}



.container {

    position: relative

}



ul, li {

    list-style-type: none

}



.icon-svg {

    width: 16px;

    height: 16px;

    fill: currentColor;

    vertical-align: middle

}



img {

    border: 0;

    font-size: 0;

    line-height: 0;

    max-width: 100%;

    vertical-align: middle

}



a {

    color: #00234b

}



a:hover {

    text-decoration: none;

    color: var(--colormain)

}



.hidden {

    display: none !important

}



.clearfix {

    clear: both

}



.clearfix::after {

    content: "";

    display: table

}



u {

    font-weight: 400

}



.uppercase {

    text-transform: uppercase

}



.regular {

    font-weight: 400

}



.medium {

    font-weight: 500

}



.bold {

    font-weight: 700

}



.txt_10 {

    font-size: 10px

}



.txt_12 {

    font-size: 12px

}



.txt_13 {

    font-size: 13px

}



.txt_14 {

    font-size: 14px !important

}



.txt_16 {

    font-size: 16px !important

}



.txt_18 {

    font-size: 18px !important

}



.txt_20 {

    font-size: 20px !important

}



.txt_22 {

    font-size: 22px !important

}



.txt_24 {

    font-size: 24px !important

}



.txt_28 {

    font-size: 28px

}



.txt_32 {

    font-size: 32px !important

}



.mb0 {

    margin-bottom: 0 !important

}



.mb5 {

    margin-bottom: 5px !important

}



.mb10 {

    margin-bottom: 10px !important

}



.mb12 {

    margin-bottom: 12px

}



.mb15 {

    margin-bottom: 15px !important

}



.mb16 {

    margin-bottom: 16px !important

}



.mb20 {

    margin-bottom: 20px !important

}



.mb24 {

    margin-bottom: 24px !important

}



.mb25 {

    margin-bottom: 25px

}



.mb30 {

    margin-bottom: 30px

}



.mb40 {

    margin-bottom: 40px

}



@media (max-width: 1025px) {

    .mb40 {

        margin-bottom: 24px

    }

}



.mb50 {

    margin-bottom: 50px

}



.mb60 {

    margin-bottom: 60px

}



@media (max-width: 1025px) {

    .mb60 {

        margin-bottom: 24px

    }

}



.mb80 {

    margin-bottom: 80px

}



.mt5 {

    margin-top: 5px !important

}



.mt10 {

    margin-top: 10px !important

}



.mt12 {

    margin-top: 12px !important

}



.mt15 {

    margin-top: 15px !important

}



.mt20 {

    margin-top: 20px !important

}



.mt24 {

    margin-top: 24px !important

}



.mt30 {

    margin-top: 30px !important

}



.mt40 {

    margin-top: 40px !important

}



.mt60 {

    margin-top: 60px !important

}



.pl-10 {

    padding-left: 10px !important

}



.pl-20 {

    padding-left: 20px !important

}



.pl-30 {

    padding-left: 30px !important

}



.pl-40 {

    padding-left: 40px !important

}



.pr-10 {

    padding-right: 10px

}



.pr-20 {

    padding-right: 20px

}



.pr-30 {

    padding-right: 30px

}



.pr-40 {

    padding-right: 40px

}



.price span {

    font-weight: 400;

    border-bottom: 1px solid;

    line-height: 1;

    display: inline-block

}



@media (max-width: 991px) {

    .nav-scroll {

        overflow-x: scroll;

        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        white-space: nowrap;

        -webkit-backface-visibility: hidden;

        backface-visibility: hidden

    }

}



.form-control:focus {

    box-shadow: none

}



@font-face {

    font-family: sf pro display;

    src: url(/static/game8/fonts/sfprodisplay-regular.eot);

    src: url(/static/game8/fonts/sfprodisplay-regular.eot?#iefix) format("embedded-opentype"), url(/static/game8/fonts/sfprodisplay-regular.woff2) format("woff2"), url(/static/game8/fonts/sfprodisplay-regular.woff) format("woff"), url(/static/game8/fonts/sfprodisplay-regular.ttf) format("truetype"), url(/static/game8/fonts/sfprodisplay-regular.svg#sfprodisplay-regular) format("svg");

    font-weight: 400;

    font-style: normal;

    font-display: swap

}



@font-face {

    font-family: sf pro display;

    src: url(/static/game8/fonts/sfprodisplay-semibold.eot);

    src: url(/static/game8/fonts/sfprodisplay-semibold.eot?#iefix) format("embedded-opentype"), url(/static/game8/fonts/sfprodisplay-semibold.woff2) format("woff2"), url(/static/game8/fonts/sfprodisplay-semibold.woff) format("woff"), url(/static/game8/fonts/sfprodisplay-semibold.ttf) format("truetype"), url(/static/game8/fonts/sfprodisplay-semibold.svg#sfprodisplay-semibold) format("svg");

    font-weight: 600;

    font-style: normal;

    font-display: swap

}



@font-face {

    font-family: sf pro display;

    src: url(/static/game8/fonts/sfprodisplay-bold.eot);

    src: url(/static/game8/fonts/sfprodisplay-bold.eot?#iefix) format("embedded-opentype"), url(/static/game8/fonts/sfprodisplay-bold.woff2) format("woff2"), url(/static/game8/fonts/sfprodisplay-bold.woff) format("woff"), url(/static/game8/fonts/sfprodisplay-bold.ttf) format("truetype"), url(/static/game8/fonts/sfprodisplay-bold.svg#sfprodisplay-bold) format("svg");

    font-weight: 700;

    font-style: normal;

    font-display: swap

}



.relative {

    position: relative

}



.sticky {

    position: -webkit-sticky;

    position: sticky;

    top: 0

}



.flex {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap

}



.center {

    text-align: center

}



.space-between {

    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;

    -ms-flex-pack: justify;

    justify-content: space-between

}



.justify-start {

    -webkit-box-pack: start !important;

    -webkit-justify-content: flex-start !important;

    -ms-flex-pack: start !important;

    justify-content: flex-start !important

}



.justify-center {

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center

}



.justify-end {

    -webkit-box-pack: end !important;

    -webkit-justify-content: flex-end !important;

    -ms-flex-pack: end !important;

    justify-content: flex-end !important

}



.align-center {

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center

}



.radius5 {

    border-radius: 5px

}



.radius8 {

    border-radius: 8px

}



.radius10 {

    border-radius: 10px

}



.radius18 {

    border-radius: 18px

}



.radius20 {

    border-radius: 20px

}



.radius24 {

    border-radius: 24px

}



.radius24 img, .radius24 video, .radius24 iframe {

    border-radius: 24px

}



.radius50 {

    border-radius: 50%

}



.thumb_img {

    display: block;

    overflow: hidden;

    height: 1px;

    position: relative;

    width: 100%

}



.thumb_3x1 {

    padding-bottom: 33.33%

}



.thumb_2x1 {

    padding-bottom: 50%

}



.thumb_img.thumb_video, .embed-container {

    padding-bottom: 21.25%

}



.thumb_img.thumb_5x3 {

    padding-bottom: 72.16%

}



.thumb_5x4 {

    padding-bottom: 92%

}



.thumb_img.thumb_5x5, .thumb_1x1 {

    padding-bottom: 100%

}



.thumb_img img, .thumb_img video, .thumb_img iframe, .thumb_video img, .thumb_video video, .thumb_video iframe, .thumb_16x9 img, .thumb_16x9 video, .thumb_16x9 iframe {

    -o-object-position: top;

    object-position: top;

    -o-object-fit: cover;

    object-fit: cover;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    width: 100%;

    height: 100%

}



.thumb_img .icon-play, .thumb_video .icon-play, .thumb_16x9 .icon-play {

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -25px 0 0 -25px;

    color: #ebedf8

}



.thumb_img .icon-play svg, .thumb_video .icon-play svg, .thumb_16x9 .icon-play svg {

    width: 50px;

    height: 50px

}



@media (max-width: 600px) {

    .thumb_img .icon-play, .thumb_video .icon-play, .thumb_16x9 .icon-play {

        margin: -10px 0 0 -10px

    }



    .thumb_img .icon-play svg, .thumb_video .icon-play svg, .thumb_16x9 .icon-play svg {

        width: 20px;

        height: 20px

    }

}



input {

    outline: 0

}



a.link {

    color: #1977f3

}



.button.pink {

    background: #ff0063;

    color: #fff

}



#to_top {

    width: 48px;

    height: 48px;

    background: url(images/graphics/on-top.png);

    line-height: 30px;

    text-align: center;

    position: fixed;

    bottom: 24px;

    right: 28px;

    color: #fff;

    z-index: 9

}



.col-2dot4, .col-sm-2dot4, .col-md-2dot4, .col-lg-2dot4, .col-xl-2dot4 {

    position: relative;

    width: 100%;

    min-height: 1px;

    padding-right: 15px;

    padding-left: 15px

}



.col-2dot4 {

    -webkit-box-flex: 0;

    -ms-flex: 0 0 20%;

    -webkit-flex: 0 0 20%;

    flex: 0 0 20%;

    max-width: 20%

}



[class*=grid__] {

    -webkit-column-gap: 16px;

    -moz-column-gap: 16px;

    column-gap: 16px;

    row-gap: 24px;

    position: relative

}



[class*=grid__] .art_item {

    margin-bottom: 0

}



.grid {

    display: -ms-grid;

    display: grid;

    width: 100%;

    position: relative

}



.grid__1 {

    -ms-grid-columns: (1fr) [ 1 ];

    grid-template-columns: repeat(1, 1fr)

}



.grid__2 {

    -ms-grid-columns: (1fr) [ 2 ];

    grid-template-columns: repeat(2, 1fr);

    -webkit-column-gap: 24px;

    -moz-column-gap: 24px;

    column-gap: 24px;

    row-gap: 24px

}



.grid__3 {

    -ms-grid-columns: (1fr) [ 3 ];

    grid-template-columns: repeat(3, 1fr)

}



.grid__4 {

    -ms-grid-columns: (1fr) [ 4 ];

    grid-template-columns: repeat(4, 1fr)

}



.grid__5 {

    -ms-grid-columns: (1fr) [ 5 ];

    grid-template-columns: repeat(5, 1fr)

}



.grid__6 {

    -ms-grid-columns: (1fr) [ 6 ];

    grid-template-columns: repeat(6, 1fr)

}



.grid__7 {

    -ms-grid-columns: (1fr) [ 7 ];

    grid-template-columns: repeat(7, 1fr);

    -webkit-column-gap: 8px;

    -moz-column-gap: 8px;

    column-gap: 8px;

    row-gap: 8px

}



.grid__8 {

    -ms-grid-columns: (1fr) [ 8 ];

    grid-template-columns: repeat(8, 1fr);

    -webkit-column-gap: 16px;

    -moz-column-gap: 16px;

    column-gap: 16px;

    row-gap: 20px

}



@media (min-width: 576px) {

    .col-sm-2dot4 {

        -webkit-box-flex: 0;

        -ms-flex: 0 0 20%;

        -webkit-flex: 0 0 20%;

        flex: 0 0 20%;

        max-width: 20%

    }

}



@media (min-width: 768px) {

    .col-md-2dot4 {

        -webkit-box-flex: 0;

        -ms-flex: 0 0 20%;

        -webkit-flex: 0 0 20%;

        flex: 0 0 20%;

        max-width: 20%

    }

}



@media (min-width: 992px) {

    .col-lg-2dot4 {

        -webkit-box-flex: 0;

        -ms-flex: 0 0 20%;

        -webkit-flex: 0 0 20%;

        flex: 0 0 20%;

        max-width: 20%

    }

}



@media (min-width: 1200px) {

    .col-xl-2dot4 {

        -webkit-box-flex: 0;

        -ms-flex: 0 0 20%;

        -webkit-flex: 0 0 20%;

        flex: 0 0 20%;

        max-width: 20%

    }

}



.tooltip {

    opacity: 1 !important

}



.tooltips {

    display: none;

    position: absolute;

    border: 1px solid #333;

    background-color: #ffed8a;

    border-radius: 5px;

    padding: 2px 6px;

    z-index: 1000

}



.bg-agray {

    background: #f2f2f5

}



.bg-padding {

    background: #f2f2f5;

    padding: 80px 0

}



.padding_16 {

    padding: 16px

}



.padding_24 {

    padding: 24px

}



.padding_30 {

    padding: 30px

}



@media (max-width: 767px) {

    .padding_30 {

        padding: 15px

    }

}



.padding_40 {

    padding: 40px 0

}



.padding_48 {

    padding: 48px

}



@media (max-width: 1199px) {

    .padding_48 {

        padding: 24px

    }

}



@media (max-width: 767px) {

    .padding_48 {

        padding: 15px

    }

}



.padding_insert {

    padding-left: 3.33%;

    padding-right: 3.33%

}



.padding_80 {

    padding: 80px 0

}



.social-btn {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex

}



.social-btn a {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: #00234b;

    color: #fff !important;

    font-size: 15px;

    text-align: center;

    line-height: 34px;

    margin-left: 4px

}



.radius_4 {

    border-radius: 4px

}



.radius_6 {

    border-radius: 6px

}



.radius_10 {

    border-radius: 10px

}



.btn-default {

    display: inline-block;

    color: #fff;

    font-size: 14px;

    font-weight: 500;

    font-family: var(--font2);

    line-height: 42px;

    padding: 0 30px;

    text-align: center;

    background: -webkit-linear-gradient(351.91deg, #ff7e05 0%, #e45b00 89.61%);

    background: linear-gradient(98.09deg, #7200b9 0%, #420468 89.61%);

    border-radius: 4px;

    -webkit-transition: .2s all;

    transition: .2s all;

    border: none;

    cursor: pointer;

    box-shadow: 0 3px #6b5b76

}



.btn-default svg {

    margin-left: 6px

}



.btn-default:hover {

    color: #fff

}



.btn-default.full {

    width: 100%;

    padding: 0 5px

}



.btn-default.min {

    line-height: 42px;

    font-size: 14px

}



.btn-default.bg-white {

    color: #00234b

}



.btn-default.none {

    background: 0 0;

    border: 1px solid rgba(255, 255, 255, .35)

}



.btn-default.none:hover {

    background: #fff;

    color: #00234b

}



.btn-default.gray {

    background: #f4f7fc;

    color: #525f7f;

    border: 1px solid #f4f7fc

}



.btn-default.txt_black {

    color: #1c1c28

}



@media (max-width: 600px) {

    .btn-default {

        line-height: 36px;

        padding: 0 20px

    }

}



.color_000 {

    color: #000

}



.color-orange {

    color: #e53535

}



.color-gray {

    color: #555770

}



.color-main {

    color: var(--colormain)

}



.color-blue {

    color: #0063f7

}



.title-cate {

    font-size: 34px;

    font-weight: 500;

    margin-bottom: 24px

}



.title-cate.white {

    color: #fff

}



.line-bottom {

    border-bottom: 1px solid rgba(107, 119, 154, .15)

}



.tab-default {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    margin-bottom: 22px

}



.tab-default a {

    color: #525f7f;

    margin-right: 40px;

    font-size: 16px

}



.tab-default a.active {

    background: var(--colormain);

    border: 1px solid var(--colormain);

    color: #fff

}



.tab-default.line-bottom {

    padding-bottom: 20px

}



.tab-default.tab-border a {

    background: #f8fbff;

    border-radius: 93px;

    line-height: 44px;

    font-size: 16px;

    color: #525f7f;

    padding: 0 20px;

    margin-right: 24px

}



.tab-default.tab-border a.active {

    background: #00234b;

    color: #fff

}



@media (max-width: 767px) {

    .tab-default {

        display: block;

        width: 100%;

        overflow-x: scroll;

        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        white-space: nowrap;

        -webkit-backface-visibility: hidden;

        backface-visibility: hidden

    }



    .tab-default a {

        display: inline-block

    }

}



.ic-play {

    border-radius: 6px;

    background: rgba(255, 255, 255, .3);

    width: 56px;

    height: 56px;

    line-height: 56px;

    position: absolute;

    text-align: center;

    color: #fff;

    font-size: 20px;

    left: 50%;

    top: 50%;

    margin: -28px 0 0 -28px

}



.article-itemt {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    margin-bottom: 24px;

    position: relative;

    -webkit-transition: -webkit-transform .6s var(--bezier);

    transition: -webkit-transform .6s var(--bezier);

    transition: transform .6s var(--bezier);

    transition: transform .6s var(--bezier), -webkit-transform .6s var(--bezier)

}



.article-itemt .thumb_img img {

    border-radius: 4px

}



.article-itemt .article-thumb {

    width: 86px;

    position: relative

}



.article-itemt .article-thumb .ic-play {

    width: 36px;

    height: 36px;

    line-height: 36px;

    font-size: 14px;

    margin: -18px 0 0 -18px

}



.article-itemt .article-thumb .ic {

    position: absolute;

    right: -8px;

    bottom: -8px;

    width: 28px;

    height: 28px;

    line-height: 28px;

    background: #42006b;

    border-radius: 50%;

    color: #fff;

    text-align: center

}



.article-itemt .article-thumb video {

    display: none

}



.article-itemt .article-content {

    width: calc(100% - 86px);

    padding-left: 16px

}



.article-itemt .article-content.flex {

    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;

    -ms-flex-pack: justify;

    justify-content: space-between;

    -webkit-box-align: end;

    -webkit-align-items: flex-end;

    -ms-flex-align: end;

    align-items: flex-end

}



.article-itemt .article-content__left {

    width: calc(100% - 36px);

    padding-right: 10px

}



.article-itemt .article-content__right {

    width: 36px

}



.article-itemt .article-content .date {

    color: #565656;

    font-size: 12px;

    margin-bottom: 10px

}



.slide-show .article-itemt .article-content .tag {

    justify-content: flex-start;

    gap: 16px

}



.article-itemt .article-content .tag {

    font-size: 14px;

    color: rgba(255, 255, 255, .8);

    margin-bottom: 0;

    display: flex;

    justify-content: space-between;

    align-items: center

}



.article-itemt .article-content .tag a {

    color: #0b081759;

    font-size: 12px

}



.article-itemt .article-content .tag a svg {

    fill: #ffc107;

    margin: -5px 2px 0 0;

    width: 13px;

    height: 13px

}



.article-itemt .article-content .tag a.game svg {

    fill: #0b081759;

    margin: -2px 2px 0 0

}



@media (max-width: 600px) {

    .article-itemt .article-content .tag {

        font-size: 12px

    }



    .article-itemt .article-content .tag a {

        margin-right: 6px

    }



    .article-itemt .article-content .tag a svg {

        margin: -4px 0 0 0;

        width: 12px;

        height: 12px

    }



    .article-itemt .article-content .tag a:last-child {

        margin-right: 0

    }

}



.article-itemt .article-content .title_new {

    font-size: 14px;

    line-height: 1.4;

    margin-bottom: 4px;

    color: #ebedf8;

    font-weight: 700

}



.article-itemt .article-content .title_new a {

    color: #0b0817

}



.article-itemt .article-content .des {

    font-size: 14px;

    color: #7594b6;

    line-height: 1.6;

    margin-bottom: 0

}



@media (max-width: 600px) {

    .article-itemt .article-content .des {

        font-size: 12px

    }

}



.article-itemt .article-content .des svg {

    fill: #ffc107;

    width: 14px;

    height: 14px;

    margin: -3px 2px 0 0

}



.article-itemt .article-content .des p:last-child {

    margin-bottom: 0

}



.article-itemt .article-content .ic {

    background: #203180;

    width: 36px;

    height: 36px;

    line-height: 36px;

    border-radius: 50%;

    color: #a2c2ee;

    display: block;

    text-align: center

}



.article-itemt .article-content .ic svg {

    width: 18px;

    height: 18px

}



.article-itemt .article-content .ic:hover {

    background: -webkit-linear-gradient(351.91deg, #ff7e05 0%, #e45b00 89.61%);

    background: linear-gradient(98.09deg, #7200b9 0%, #420468 89.61%);

    color: #fff

}



.article-itemt.full {

    display: block;

    background: #fff;

    border-radius: 8px;

    box-shadow: 0 3px #42006b;
    
    min-width: 10px;


}



.slide-show .article-itemt.full, .buid-top__right .article-itemt.full {

    background: 0 0;

    box-shadow: unset

}



.article-itemt.full .article-thumb, .article-itemt.full .article-thumb-small {

    width: 100%

}



.article-itemt.full .article-thumb .ic-play {

    width: 56px;

    height: 56px;

    line-height: 56px;

    font-size: 20px;

    margin: -28px 0 0 -28px

}



.article-itemt.full .article-content {

    width: 100%;

    padding: 8px 12px

}



.article-itemt.big .article-content .title_new {

    font-size: 28px

}



@media (max-width: 991px) {

    .article-itemt.big .article-content .title_new {

        font-size: 22px

    }

}



.article-itemt:hover {

    -webkit-transform: scale(1.01) translate(0px, -4px);

    -ms-transform: scale(1.01) translate(0px, -4px);

    transform: scale(1.01) translate(0px, -4px);

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    -webkit-transition-duration: .3s;

    transition-duration: .3s

}



.article-itemt:hover .article-thumb .img {

    display: none

}



.article-itemt:hover .article-thumb video {

    display: block

}



.collapse-line {

    padding: 20px 24px;

    background: #fff;

    border-radius: 6px;

    margin-bottom: 16px

}



.collapse-line > a {

    position: relative;

    padding-right: 30px;

    display: block;

    font-size: 16px;

    font-weight: 700

}



.collapse-line > a::before {

    content: "";

    opacity: .5;

    border: solid #000;

    border-width: 0 1px 1px 0;

    width: 8px;

    height: 8px;

    position: absolute;

    right: 0;

    top: 6px;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

    -webkit-transition: .2s all;

    transition: .2s all

}



.collapse-line .card-body {

    padding: 1.25rem 0 0

}



.collapse-line [aria-expanded=true]::before {

    -webkit-transform: rotate(-135deg);

    -ms-transform: rotate(-135deg);

    transform: rotate(-135deg);

    top: 9px;

    opacity: 1

}



.breadcrumb {

    background-color: #fff;

    margin-bottom: 0;

    padding: .75rem 0;

    padding-left: 0 !important

}



.breadcrumb .breadcrumb-item + .breadcrumb-item {

    padding-left: 30px;

    position: relative

}



.breadcrumb .breadcrumb-item + .breadcrumb-item::before {

    content: "";

    border-top: 1px solid #6c757d;

    border-right: 1px solid #6c757d;

    width: 8px;

    height: 8px;

    position: absolute;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

    padding: 0;

    left: 10px;

    top: 7px

}



.breadcrumb .breadcrumb-item a {

    color: #222

}



.breadcrumb .breadcrumb-item.active {

    color: #757575

}



.ct_quantity {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    margin-bottom: 24px

}



.ct_quantity .input-group {

    width: 115px

}



.ct_quantity .input-group .input-group-btn {

    width: 40px;

    border: 1px solid #d4d4d4;

    border-radius: 4px 0 0 4px;

    color: #6b6b6b;

    text-align: center;

    background: #fff

}



.ct_quantity .input-group .input-group-btn button {

    padding: 0 5px;

    outline: 0;

    background: 0 0;

    height: 38px

}



.ct_quantity .input-group .input-group-btn button:focus {

    box-shadow: none

}



.ct_quantity .input-group .input-group-btn svg {

    width: 10px;

    height: 10px

}



.ct_quantity .input-group .input-group-btn.up {

    border-radius: 0 4px 4px 0

}



.ct_quantity .input-group input {

    background: #e4e4eb;

    width: 35px;

    font-weight: 700;

    color: #1c1c28;

    border-left: 0;

    border-right: 0;

    padding: 0;

    text-align: center

}



.ct_quantity .input-group input:focus {

    box-shadow: none

}



.ct_quantity .text {

    color: rgba(0, 0, 0, .45);

    margin-left: 5px

}



.confir_res {

    padding-left: 26px;

    position: relative;

    cursor: pointer;

    display: block

}



.confir_res .text {

    color: #7594b6;

    font-size: 12px

}



.confir_res input {

    position: absolute;

    opacity: 0;

    cursor: pointer

}



.confir_res .checkmark {

    position: absolute;

    top: 0;

    left: 0;

    height: 18px;

    width: 18px;

    background: #ebeff4;

    border: none;

    box-sizing: border-box;

    border-radius: 4px

}



.confir_res .checkmark:after {

    content: "";

    position: absolute;

    display: none;

    left: 7px;

    top: 3px;

    width: 5px;

    height: 10px;

    border: solid #0b0817;

    border-width: 0 2px 2px 0;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg)

}



.confir_res input:checked ~ .checkmark:after {

    display: block

}



.confir_res input:disabled ~ .checkmark {

    border: 1px solid #ebebeb

}



.confir_res input:disabled ~ .checkmark:after {

    border: solid #ebebeb;

    border-width: 0 1px 1px 0

}



.confir_res.circle .checkmark {

    border-radius: 50%;

    border: 1px solid #999

}



.confir_res.circle .checkmark:hover {

    border: 1px solid #999

}



.confir_res.circle .checkmark:after {

    border: solid #fff;

    border-width: 0 1px 1px 0

}



.confir_res.circle input:checked ~ .checkmark {

    background: #222;

    border: 1px solid #222

}



.check-list-label {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap

}



.check-list-label .confir_res {

    border: 1px solid #e4e4eb;

    background: #fafafc;

    border-radius: 6px;

    padding: 8px 18px 8px 8px;

    height: 114px;

    width: 128px;

    margin-right: 16px

}



.check-list-label .confir_res:last-child {

    margin-right: 0

}



.check-list-label .confir_res .lbl {

    position: absolute;

    font-size: 12px;

    top: 8px;

    left: 8px

}



.check-list-label .confir_res .bottom {

    position: absolute;

    bottom: 8px;

    left: 8px;

    right: 8px

}



.check-list-label .confir_res select.form-control {

    border: 1px solid #e4e4eb;

    background: #f2f2f5;

    border-radius: 4px;

    color: #00234b;

    font-size: 14px;

    padding-left: 5px;

    font-weight: 700;

    height: 36px

}



.check-list-label .confir_res .price {

    font-size: 18px;

    font-weight: 700

}



.check-list-label .confir_res .checkmark {

    right: 8px;

    top: 8px;

    left: inherit;

    width: 16px;

    height: 16px;

    border-radius: 2px

}



.check-list-label .confir_res .checkmark::after {

    border: solid #00234b;

    border-width: 0 2px 2px 0;

    width: 5px;

    height: 9px;

    left: 5px;

    top: 2px

}



.check-list-label .confir_res.active {

    background: #00234b;

    border: 1px solid #00234b;

    color: #fff

}



.check-list-label .confir_res.active .lbl {

    color: #e4e4eb

}



.check-list-label .phu-luc {

    background: #f2f2f5;

    border-radius: 6px;

    padding: 12px 8px;

    width: 400px;

    max-width: 100%

}



.check-list-label.pl-3 {

    padding-left: 30px !important

}



.check-list-label__v2 .confir_res {

    width: 174px;

    height: 94px;

    margin: 0 8px 8px 0

}



.check-list-label__v3 .confir_res {

    width: 128px;

    height: 66px;

    margin: 0 8px 8px 0

}



.check-list-label.grid__2 {

    -webkit-column-gap: 16px;

    -moz-column-gap: 16px;

    column-gap: 16px;

    row-gap: 16px

}



.check-list-label.grid__2 .confir_res {

    width: 40%;

    height: 94px;

    margin: 0

}



@media (max-width: 576px) {

    .check-list-label {

        display: -ms-grid;

        display: grid;

        -ms-grid-columns: (1fr) [ 2 ];

        grid-template-columns: repeat(2, 1fr);

        -webkit-column-gap: 10px;

        -moz-column-gap: 10px;

        column-gap: 10px;

        row-gap: 10px

    }



    .check-list-label .confir_res {

        width: 100%;

        margin: 0

    }



    .check-list-label .phu-luc {

        width: 100%

    }

}



.radio-checklist .confir_res {

    border: 1px solid #e4e4eb;

    background: #fff;

    border-radius: 8px;

    padding: 16px 16px 16px 40px;

    margin-bottom: 4px

}



.radio-checklist .confir_res .checkmark {

    border-radius: 50%;

    top: 18px;

    left: 13px

}



.radio-checklist .confir_res .checkmark::after {

    border: 0;

    background: var(--colormain);

    width: 12px;

    height: 12px;

    border-radius: 50%;

    left: 2px;

    top: 2px

}



.radio-checklist .confir_res.active {

    border: 1px solid #00234b

}



.note-hover {

    position: relative

}



.note-hover .note-info {

    background: #fff;

    box-shadow: 10px 14px 54px rgba(0, 0, 0, .25);

    border-radius: 6px;

    padding: 16px;

    color: #191919;

    position: absolute;

    width: 300px;

    max-width: 300px;

    display: none;

    z-index: 4

}



.note-hover .note-info .title {

    font-weight: 700;

    margin-bottom: 10px;

    font-size: 16px

}



.note-hover .note-info .border-dashed {

    border-bottom: 1px dashed #ccc

}



.note-hover:hover .note-info {

    display: block

}



.pagination {

    -webkit-box-pack: start;

    -webkit-justify-content: start;

    -ms-flex-pack: start;

    justify-content: flex-start

}



.pagination .page-item {

    margin: 0 4px

}



.pagination .page-link {

    border-radius: 4px !important;

    background: #fff;

    border: none;

    font-size: 14px;

    color: #0b0817;

    width: 44px;

    height: 44px;

    text-align: center;

    padding: 0;

    line-height: 44px;

    outline: 0

}



.pagination .page-link:hover {

    background: #42006b;

    color: #fff

}



.pagination .page-link:focus {

    box-shadow: none

}



.pagination .page-btn {

    line-height: 44px;

    display: inline-block;

    background: #251f4d;

    padding: 0 16px;

    border-radius: 41px;

    color: #fff

}



.pagination .page-btn svg {

    width: 10px;

    height: 10px;

    margin: -1px 0 0 2px

}



.pagination .page-btn.prev svg {

    -webkit-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    transform: rotate(180deg);

    margin: 0 2px 0 0

}



.pagination .page-btn:hover {

    background: #ff7b00

}



.pagination .page-item.active .page-link {

    background: #42006b;

    border-color: #42006b;

    color: #fff

}



@media (max-width: 414px) {

    .pagination .page-btn {

        padding: 0;

        text-align: center;

        width: 44px

    }



    .pagination .page-btn span {

        display: none

    }

}



.btn-send {

    background: #00234b;

    border-radius: 4px;

    color: #fff;

    height: 48px;

    font-weight: 500;

    font-size: 14px;

    padding: 0 30px

}



.form-default .form-group {

    margin-bottom: 8px;

    position: relative

}



.form-default textarea.form-control {

    font-size: 14px;

    resize: none

}



.form-default .form-control {

    background: #dbf1ff;

    border-radius: 4px;

    border: 1px solid #dbf1ff;

    height: 36px;

    font-size: 12px;

    color: #0b0817;

    -webkit-transition-duration: 200ms;

    transition-duration: 200ms;

    -webkit-transition-property: all;

    transition-property: all;

    -webkit-transition-timing-function: cubic-bezier(.7, 1, .7, 1);

    transition-timing-function: cubic-bezier(.7, 1, .7, 1)

}



.form-default .form-control:focus::-webkit-input-placeholder {

    color: transparent

}



.form-default .form-control::-webkit-input-placeholder {

    color: #0b08176b

}



.form-default .form-control:-moz-placeholder {

    color: #0b08176b

}



.form-default .form-control::-moz-placeholder {

    color: #0b08176b

}



.form-default .form-control:-ms-input-placeholder {

    color: #0b08176b

}



.form-default .form-control:focus, .form-default .form-control:active {

    outline: 0;

    box-shadow: none;

    border: 1px solid #af93ff

}



.form-default .error {

    color: #ff0e00;

    font-size: 13px

}



.form-default select.form-control {

    height: 50px !important

}



.form-default__v2 .form-group {

    position: relative;

    margin-bottom: 8px

}



.form-default__v2 .form-group .lbl {

    position: absolute;

    font-size: 12px;

    color: #9c5d90;

    top: 6px;

    left: .75rem

}



.form-default__v2 .form-control {

    color: #4f064b;

    padding-top: 25px

}



.form-default__v2 .form-control::-webkit-input-placeholder {

    color: #4f064b

}



.form-default__v2 .form-control:-moz-placeholder {

    color: #4f064b

}



.form-default__v2 .form-control::-moz-placeholder {

    color: #4f064b

}



.form-default__v2 .form-control:-ms-input-placeholder {

    color: #4f064b

}



.form-search {

    position: relative;

    width: 300px

}



.form-search .input_search {

    background: #dbf1ff;

    border: 0;

    border-radius: 4px;

    height: 40px;

    padding: 0 70px 0 16px;

    font-size: 14px;

    color: #000;

    width: 100%;

    outline: 0

}



.form-search .input_search:focus::-webkit-input-placeholder {

    color: transparent

}



.form-search .input_search::-webkit-input-placeholder {

    color: #00000091

}



.form-search .input_search:-moz-placeholder {

    color: #00000091

}



.form-search .input_search::-moz-placeholder {

    color: #00000091

}



.form-search .input_search:-ms-input-placeholder {

    color: #00000091

}



.form-search .icon_seach_web {

    position: absolute;

    background: 0 0;

    width: 40px;

    height: 32px;

    border: 0;

    right: 0;

    top: 3px;

    color: #000;

    cursor: pointer

}



.form-search .btn_reset {

    position: absolute;

    border-radius: 7px;

    background: #6348a3;

    border: none;

    top: 8px;

    right: 40px;

    font-weight: 700;

    padding: 0 8px;

    font-size: 14px;

    text-align: center;

    color: #f2f2f2;

    line-height: 24px;

    cursor: pointer;

    display: none

}



.form-search .btn_reset span {

    display: none

}



.form-search .btn_reset svg {

    width: 12px;

    height: 12px

}



.form-search .btn_reset:hover span {

    display: inline-block

}



.form-search .fillter {

    position: absolute;

    right: 15px;

    top: 19px;

    border-left: 1px solid #e5e5e5;

    padding-left: 15px

}



.form-search .fillter svg {

    margin-left: 5px

}



.form-search .suggest-search, .search-btn .suggest-search {

    background: #ebeff4;

    border-radius: 0 0 4px 4px;

    position: absolute;

    z-index: 2;

    top: 50px;

    padding: 40px;

    width: 620px;

    right: -32px;

    box-shadow: 0 36px 38px rgb(5 47 111/25%);

    display: none

}



.form-search .suggest-search .name, .search-btn .suggest-search .name {

    margin-bottom: 15px

}



.form-search .suggest-search .name svg, .search-btn .suggest-search .name svg {

    color: #757575

}



.form-search .suggest-search p, .search-btn .suggest-search p {

    margin-bottom: 0;

    color: #7594b6

}



.form-search .suggest-search .select-dish .grid, .search-btn .suggest-search .select-dish .grid {

    -webkit-column-gap: 12px;

    -moz-column-gap: 12px;

    column-gap: 12px;

    row-gap: 12px

}



.form-search .suggest-search .select-dish .thumb_img, .search-btn .suggest-search .select-dish .thumb_img {

    border-radius: 18px

}



.form-search .suggest-search .btn-default, .search-btn .suggest-search .btn-default {

    font-size: 14px;

    border-radius: 4px;

    font-weight: 400;

    line-height: 44px;

    padding: 0 40px

}



.form-search.active .suggest-search, .search-btn.active .suggest-search {

    display: block

}



.form-search.active .btn_reset {

    display: block

}



.form-search .loadding-new {

    text-align: center

}



.form-search .loadding-new::before, .form-search .loadding-new::after, .form-search .loadding-new .sk-child {

    content: "";

    margin: 0 2px;

    width: 8px;

    height: 8px;

    background: #b7bdc4;

    border-radius: 100%;

    display: inline-block;

    -webkit-animation: sk-three-bounce 1s ease-in-out 0s infinite both;

    animation: sk-three-bounce 1s ease-in-out 0s infinite both

}



.form-search .loadding-new::before {

    -webkit-animation-delay: -.48s;

    animation-delay: -.48s

}



.form-search .loadding-new .sk-child {

    -webkit-animation-delay: -.32s;

    animation-delay: -.32s

}



.form-search .loadding-new::after {

    -webkit-animation-delay: -.16s;

    animation-delay: -.16s

}



@-webkit-keyframes sk-three-bounce {

    0%, 80%, 100% {

        -webkit-transform: scale(0);

        transform: scale(0)

    }



    40% {

        -webkit-transform: scale(1);

        transform: scale(1)

    }

}



@keyframes sk-three-bounce {

    0%, 80%, 100% {

        -webkit-transform: scale(0);

        transform: scale(0)

    }



    40% {

        -webkit-transform: scale(1);

        transform: scale(1)

    }

}



@media screen and (max-width: 1025px) {

    .form-search .btn_reset {

        top: 13px

    }



    .form-search .fillter {

        top: 15px

    }

}



@media screen and (max-width: 600px) {

    .form-search .input_search {

        font-size: 13px;

        padding: 0 60px 0 10px

    }



    .form-search .icon_seach_web {

        width: 32px;

        top: 4px

    }



    .form-search .icon_seach_web svg {

        width: 14px;

        height: 14px

    }



    .form-search .btn_reset {

        right: 29px;

        top: 8px

    }



    .form-search .fillter {

        top: 12px

    }



    .form-search .suggest-search, .search-btn .suggest-search {

        width: 400px;

        padding: 15px;

        border-radius: 10px

    }

}



@media screen and (max-width: 414px) {

    .form-search .suggest-search, .search-btn .suggest-search {

        width: 300px;

        right: 0

    }



    .form-search .suggest-search .jump-top, .search-btn .suggest-search .jump-top {

        margin-bottom: 20px

    }



    .form-search .suggest-search .btn-default, .search-btn .suggest-search .btn-default {

        line-height: 36px;

        padding: 0 15px

    }



    .form-search .suggest-search .select-dish .grid, .search-btn .suggest-search .select-dish .grid {

        -ms-grid-columns: (1fr) [ 4 ];

        grid-template-columns: repeat(4, 1fr)

    }

}



.table-responsive .blue {

    color: #2d5bd1

}



.table-responsive .table thead th {

    border-top: 0;

    border-bottom: 1px solid #00234b;

    color: #525f7f;

    font-weight: 400;

    text-transform: uppercase;

    font-size: 14px

}



.table-responsive .table th, .table-responsive .table td {

    padding: 15px .75rem;

    font-size: 16px

}



.table-responsive .table th:last-child, .table-responsive .table td:last-child {

    text-align: right

}



.table-responsive .table th:first-child, .table-responsive .table td:first-child {

    padding-left: 0;

    text-align: left

}



.table-responsive .table .content {

    width: 400px

}



@media (max-width: 767px) {

    .table-responsive .table th, .table-responsive .table td {

        white-space: nowrap

    }

}



.custom-select {

    position: relative;

    font-family: Arial

}



.custom-select.form-group {

    background: #e6eaf0;

    border-radius: 0;

    border: 0;

    height: 35px

}



.custom-select select {

    display: none

}



.custom-select .select-selected::after {

    content: "";

    border: solid #222;

    border-width: 1px 0 0 1px;

    width: 8px;

    height: 8px;

    position: absolute;

    right: 13px;

    top: 12px;

    -webkit-transform: rotate(-135deg);

    -ms-transform: rotate(-135deg);

    transform: rotate(-135deg)

}



.custom-select .select-selected.select-arrow-active:after {

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

    top: 14px

}



.custom-select .select-items div, .custom-select .select-selected {

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none

}



.custom-select .select-items {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    z-index: 99;

    background: #fff;

    box-shadow: 0 10px 30px rgba(118, 118, 118, .3)

}



.custom-select .select-items div {

    padding: 10px

}



.custom-select .select-items div:hover {

    color: #447fb7

}



.custom-select .select-hide {

    display: none

}



.title-cae {

    color: #0b0817;

    font-size: 20px;

    margin-bottom: 10px;

    font-weight: 700

}



.title-cae svg {

    color: #a2c2ee;

    width: 24px;

    height: 24px

}



@media (max-width: 414px) {

    .title-cae {

        font-size: 18px

    }

}



.view-all {

    font-size: 14px;

    color: #7594b6

}



.flex-header {

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center

}



.flex-header .view-all {

    margin-left: 22px;

    margin-bottom: 10px

}



.flex-header .view-all:hover {

    color: #000

}



.show-onclick {

    display: none

}



.scroll-wrapper {

    overflow: hidden !important;

    padding: 0 !important;

    position: relative;

    -ms-overflow-style: none

}



.scroll-wrapper > .scroll-content {

    border: none !important;

    box-sizing: content-box !important;

    height: auto;

    left: 0;

    margin: 0;

    max-height: none;

    max-width: none !important;

    overflow: scroll !important;

    padding: 0;

    position: relative !important;

    top: 0;

    width: auto !important

}



.scroll-wrapper > .scroll-content::-webkit-scrollbar {

    height: 0;

    width: 0

}



.scroll-element {

    display: none

}



.scroll-element, .scroll-element div {

    box-sizing: content-box

}



.scroll-element.scroll-x.scroll-scrollx_visible, .scroll-element.scroll-y.scroll-scrolly_visible {

    display: block

}



.scroll-element .scroll-bar, .scroll-element .scroll-arrow {

    cursor: default

}



.scroll-textarea {

    border: 1px solid #ccc;

    border-top-color: #999

}



.scroll-textarea > .scroll-content {

    overflow: hidden !important

}



.scroll-textarea > .scroll-content > textarea {

    border: none !important;

    box-sizing: border-box;

    height: 100% !important;

    margin: 0;

    max-height: none !important;

    max-width: none !important;

    overflow: scroll !important;

    outline: none;

    padding: 2px;

    position: relative !important;

    top: 0;

    width: 100% !important

}



.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {

    height: 0;

    width: 0

}



.scrollbar-inner > .scroll-element, .scrollbar-inner > .scroll-element div {

    border: none;

    margin: 0;

    padding: 0;

    position: absolute;

    z-index: 10

}



.scrollbar-inner > .scroll-element div {

    display: block;

    height: 100%;

    left: 0;

    top: 0;

    width: 100%

}



.scrollbar-inner > .scroll-element.scroll-x {

    bottom: 2px;

    height: 6px;

    left: 0;

    width: 100%

}



.scrollbar-inner > .scroll-element.scroll-y {

    height: 100%;

    right: 2px;

    top: 0;

    width: 6px

}



.scrollbar-inner > .scroll-element .scroll-element_outer {

    overflow: hidden

}



.scrollbar-inner > .scroll-element .scroll-element_outer, .scrollbar-inner > .scroll-element .scroll-element_track, .scrollbar-inner > .scroll-element .scroll-bar {

    border-radius: 8px

}



.scrollbar-inner > .scroll-element .scroll-element_track, .scrollbar-inner > .scroll-element .scroll-bar {

    -ms-filter: "alpha(opacity=40)";

    filter: alpha(opacity=40);

    opacity: .9

}



.scrollbar-inner > .scroll-element .scroll-element_track {

    background-color: none

}



.scrollbar-inner > .scroll-element .scroll-bar {

    background-color: #4b80c9;

    width: 5px

}



.scrollbar-inner > .scroll-element:hover .scroll-bar {

    background-color: #919191

}



.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar {

    background-color: #919191

}



.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {

    left: -12px

}



.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {

    top: -12px

}



.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {

    left: -12px

}



.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {

    top: -12px

}



.swiper-container {

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    list-style: none;

    padding: 0;

    z-index: 1

}



.swiper-container-no-flexbox .swiper-slide {

    float: left

}



.swiper-container-vertical > .swiper-wrapper {

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -webkit-flex-direction: column;

    -ms-flex-direction: column;

    flex-direction: column

}



.swiper-wrapper {

    position: relative;

    width: 100%;

    height: 100%;

    z-index: 1;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-transition-property: -webkit-transform;

    transition-property: -webkit-transform;

    transition-property: transform;

    transition-property: transform, -webkit-transform;

    box-sizing: content-box

}



.swiper-container-android .swiper-slide, .swiper-wrapper {

    -webkit-transform: translate3d(0px, 0, 0);

    transform: translate3d(0px, 0, 0)

}



.swiper-container-multirow > .swiper-wrapper {

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap

}



.swiper-container-free-mode > .swiper-wrapper {

    -webkit-transition-timing-function: ease-out;

    transition-timing-function: ease-out;

    margin: 0 auto

}



.swiper-slide {

    -webkit-flex-shrink: 0;

    -ms-flex-negative: 0;

    flex-shrink: 0;

    width: 100%;

    height: 100%;

    position: relative;

    -webkit-transition-property: -webkit-transform;

    transition-property: -webkit-transform;

    transition-property: transform;

    transition-property: transform, -webkit-transform

}



.swiper-slide-invisible-blank {

    visibility: hidden

}



.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {

    height: auto

}



.swiper-container-autoheight .swiper-wrapper {

    -webkit-box-align: start;

    -webkit-align-items: flex-start;

    -ms-flex-align: start;

    align-items: flex-start;

    -webkit-transition-property: height, -webkit-transform;

    transition-property: height, -webkit-transform;

    transition-property: transform, height;

    transition-property: transform, height, -webkit-transform

}



.swiper-container-3d {

    -webkit-perspective: 1200px;

    perspective: 1200px

}



.swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow {

    -webkit-transform-style: preserve-3d;

    transform-style: preserve-3d

}



.swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 10

}



.swiper-container-3d .swiper-slide-shadow-left {

    background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));

    background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));

    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))

}



.swiper-container-3d .swiper-slide-shadow-right {

    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));

    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));

    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))

}



.swiper-container-3d .swiper-slide-shadow-top {

    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));

    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));

    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))

}



.swiper-container-3d .swiper-slide-shadow-bottom {

    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));

    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));

    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))

}



.swiper-container-wp8-horizontal, .swiper-container-wp8-horizontal > .swiper-wrapper {

    -ms-touch-action: pan-y;

    touch-action: pan-y

}



.swiper-container-wp8-vertical, .swiper-container-wp8-vertical > .swiper-wrapper {

    -ms-touch-action: pan-x;

    touch-action: pan-x

}



.swiper-button-prev, .swiper-button-next {

    position: absolute;

    width: 24px;

    height: 24px;

    z-index: 2;

    cursor: pointer;

    border-radius: 50%;

    text-align: center;

    line-height: 24px;

    outline: 0

}



.swiper-button-prev svg, .swiper-button-next svg {

    color: #42006b;

    width: 25px;

    height: 25px

}



.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {

    opacity: .35;

    cursor: auto;

    pointer-events: none

}



.swiper-button-prev, .swiper-container-rtl .swiper-button-next {

    left: 0;

    right: auto

}



.swiper-button-next, .swiper-container-rtl .swiper-button-prev {

    right: 0;

    left: auto

}



.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {

    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNyA0NCc+PHBhdGggZD0nTTAsMjJMMjIsMGwyLjEsMi4xTDQuMiwyMmwxOS45LDE5LjlMMjIsNDRMMCwyMkwwLDIyTDAsMjJ6JyBmaWxsPScjZmZmZmZmJy8+PC9zdmc+)

}



.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {

    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNyA0NCc+PHBhdGggZD0nTTI3LDIyTDI3LDIyTDUsNDRsLTIuMS0yLjFMMjIuOCwyMkwyLjksMi4xTDUsMEwyNywyMkwyNywyMnonIGZpbGw9JyNmZmZmZmYnLz48L3N2Zz4=)

}



.swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black {

    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNyA0NCc+PHBhdGggZD0nTTAsMjJMMjIsMGwyLjEsMi4xTDQuMiwyMmwxOS45LDE5LjlMMjIsNDRMMCwyMkwwLDIyTDAsMjJ6JyBmaWxsPScjMDAwMDAwJy8+PC9zdmc+)

}



.swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black {

    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNyA0NCc+PHBhdGggZD0nTTI3LDIyTDI3LDIyTDUsNDRsLTIuMS0yLjFMMjIuOCwyMkwyLjksMi4xTDUsMEwyNywyMkwyNywyMnonIGZpbGw9JyMwMDAwMDAnLz48L3N2Zz4=)

}



.swiper-button-lock {

    display: none

}



.swiper-pagination {

    position: absolute;

    text-align: center;

    -webkit-transition: 300ms opacity;

    transition: 300ms opacity;

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    z-index: 10

}



.swiper-pagination.swiper-pagination-hidden {

    opacity: 0

}



.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {

    bottom: 0;

    left: 0;

    width: 100%

}



.swiper-pagination-bullets-dynamic {

    overflow: hidden;

    font-size: 0

}



.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {

    -webkit-transform: scale(.33);

    -ms-transform: scale(.33);

    transform: scale(.33);

    position: relative

}



.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1)

}



.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1)

}



.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {

    -webkit-transform: scale(.66);

    -ms-transform: scale(.66);

    transform: scale(.66)

}



.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {

    -webkit-transform: scale(.33);

    -ms-transform: scale(.33);

    transform: scale(.33)

}



.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {

    -webkit-transform: scale(.66);

    -ms-transform: scale(.66);

    transform: scale(.66)

}



.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {

    -webkit-transform: scale(.33);

    -ms-transform: scale(.33);

    transform: scale(.33)

}



.swiper-pagination-bullet {

    width: 8px;

    height: 8px;

    display: inline-block;

    border-radius: 100%;

    background: #8f90a6;

    outline: 0

}



button.swiper-pagination-bullet {

    border: none;

    margin: 0;

    padding: 0;

    box-shadow: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none

}



.swiper-pagination-clickable .swiper-pagination-bullet {

    cursor: pointer

}



.swiper-pagination-bullet-active {

    opacity: 1;

    background: #fff

}



.swiper-container-vertical > .swiper-pagination-bullets {

    right: 10px;

    top: 50%;

    -webkit-transform: translate3d(0px, -50%, 0);

    transform: translate3d(0px, -50%, 0)

}



.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {

    margin: 6px 0;

    display: block

}



.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {

    top: 50%;

    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    width: 8px

}



.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {

    display: inline-block;

    -webkit-transition: 200ms top, 200ms -webkit-transform;

    transition: 200ms top, 200ms -webkit-transform;

    transition: 200ms transform, 200ms top;

    transition: 200ms transform, 200ms top, 200ms -webkit-transform

}



.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {

    margin: 0 5px

}



.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {

    left: 50%;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

    white-space: nowrap

}



.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {

    -webkit-transition: 200ms left, 200ms -webkit-transform;

    transition: 200ms left, 200ms -webkit-transform;

    transition: 200ms transform, 200ms left;

    transition: 200ms transform, 200ms left, 200ms -webkit-transform

}



.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {

    -webkit-transition: 200ms right, 200ms -webkit-transform;

    transition: 200ms right, 200ms -webkit-transform;

    transition: 200ms transform, 200ms right;

    transition: 200ms transform, 200ms right, 200ms -webkit-transform

}



.swiper-pagination-progressbar {

    background: rgba(0, 0, 0, .25);

    position: absolute

}



.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {

    background: #007aff;

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    -webkit-transform: scale(0);

    -ms-transform: scale(0);

    transform: scale(0);

    -webkit-transform-origin: left top;

    -ms-transform-origin: left top;

    transform-origin: left top

}



.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {

    -webkit-transform-origin: right top;

    -ms-transform-origin: right top;

    transform-origin: right top

}



.swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {

    width: 100%;

    height: 4px;

    left: 0;

    top: 0

}



.swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {

    width: 4px;

    height: 100%;

    left: 0;

    top: 0

}



.swiper-pagination-white .swiper-pagination-bullet-active {

    background: #fff

}



.swiper-pagination-progressbar.swiper-pagination-white {

    background: rgba(255, 255, 255, .25)

}



.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {

    background: #fff

}



.swiper-pagination-black .swiper-pagination-bullet-active {

    background: #000

}



.swiper-pagination-progressbar.swiper-pagination-black {

    background: rgba(0, 0, 0, .25)

}



.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {

    background: #000

}



.swiper-pagination-lock {

    display: none

}



.swiper-scrollbar {

    border-radius: 10px;

    position: relative;

    -ms-touch-action: none;

    background: rgba(0, 0, 0, .1)

}



.swiper-container-horizontal > .swiper-scrollbar {

    position: absolute;

    left: 1%;

    bottom: 3px;

    z-index: 50;

    height: 5px;

    width: 98%

}



.swiper-container-vertical > .swiper-scrollbar {

    position: absolute;

    right: 3px;

    top: 1%;

    z-index: 50;

    width: 5px;

    height: 98%

}



.swiper-scrollbar-drag {

    height: 100%;

    width: 100%;

    position: relative;

    background: rgba(0, 0, 0, .5);

    border-radius: 10px;

    left: 0;

    top: 0

}



.swiper-scrollbar-cursor-drag {

    cursor: move

}



.swiper-scrollbar-lock {

    display: none

}



.swiper-zoom-container {

    width: 100%;

    height: 100%;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    text-align: center

}



.swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas {

    max-width: 100%;

    max-height: 100%;

    -o-object-fit: contain;

    object-fit: contain

}



.swiper-slide-zoomed {

    cursor: move

}



.swiper-lazy-preloader {

    width: 42px;

    height: 42px;

    position: absolute;

    left: 50%;

    top: 50%;

    margin-left: -21px;

    margin-top: -21px;

    z-index: 10;

    -webkit-transform-origin: 50%;

    -ms-transform-origin: 50%;

    transform-origin: 50%;

    -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;

    animation: swiper-preloader-spin 1s steps(12, end) infinite

}



.swiper-lazy-preloader:after {

    display: block;

    content: "";

    width: 100%;

    height: 100%;

    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTIwIDEyMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayc+PGRlZnM+PGxpbmUgaWQ9J2wnIHgxPSc2MCcgeDI9JzYwJyB5MT0nNycgeTI9JzI3JyBzdHJva2U9JyM2YzZjNmMnIHN0cm9rZS13aWR0aD0nMTEnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvZGVmcz48Zz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuMjcnLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuMjcnIHRyYW5zZm9ybT0ncm90YXRlKDMwIDYwLDYwKScvPjx1c2UgeGxpbms6aHJlZj0nI2wnIG9wYWNpdHk9Jy4yNycgdHJhbnNmb3JtPSdyb3RhdGUoNjAgNjAsNjApJy8+PHVzZSB4bGluazpocmVmPScjbCcgb3BhY2l0eT0nLjI3JyB0cmFuc2Zvcm09J3JvdGF0ZSg5MCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuMjcnIHRyYW5zZm9ybT0ncm90YXRlKDEyMCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuMjcnIHRyYW5zZm9ybT0ncm90YXRlKDE1MCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuMzcnIHRyYW5zZm9ybT0ncm90YXRlKDE4MCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuNDYnIHRyYW5zZm9ybT0ncm90YXRlKDIxMCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuNTYnIHRyYW5zZm9ybT0ncm90YXRlKDI0MCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuNjYnIHRyYW5zZm9ybT0ncm90YXRlKDI3MCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuNzUnIHRyYW5zZm9ybT0ncm90YXRlKDMwMCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuODUnIHRyYW5zZm9ybT0ncm90YXRlKDMzMCA2MCw2MCknLz48L2c+PC9zdmc+);

    background-position: 50%;

    background-size: 100%;

    background-repeat: no-repeat

}



.swiper-lazy-preloader-white:after {

    background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTIwIDEyMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayc+PGRlZnM+PGxpbmUgaWQ9J2wnIHgxPSc2MCcgeDI9JzYwJyB5MT0nNycgeTI9JzI3JyBzdHJva2U9JyNmZmYnIHN0cm9rZS13aWR0aD0nMTEnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvZGVmcz48Zz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuMjcnLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuMjcnIHRyYW5zZm9ybT0ncm90YXRlKDMwIDYwLDYwKScvPjx1c2UgeGxpbms6aHJlZj0nI2wnIG9wYWNpdHk9Jy4yNycgdHJhbnNmb3JtPSdyb3RhdGUoNjAgNjAsNjApJy8+PHVzZSB4bGluazpocmVmPScjbCcgb3BhY2l0eT0nLjI3JyB0cmFuc2Zvcm09J3JvdGF0ZSg5MCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuMjcnIHRyYW5zZm9ybT0ncm90YXRlKDEyMCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuMjcnIHRyYW5zZm9ybT0ncm90YXRlKDE1MCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuMzcnIHRyYW5zZm9ybT0ncm90YXRlKDE4MCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuNDYnIHRyYW5zZm9ybT0ncm90YXRlKDIxMCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuNTYnIHRyYW5zZm9ybT0ncm90YXRlKDI0MCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuNjYnIHRyYW5zZm9ybT0ncm90YXRlKDI3MCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuNzUnIHRyYW5zZm9ybT0ncm90YXRlKDMwMCA2MCw2MCknLz48dXNlIHhsaW5rOmhyZWY9JyNsJyBvcGFjaXR5PScuODUnIHRyYW5zZm9ybT0ncm90YXRlKDMzMCA2MCw2MCknLz48L2c+PC9zdmc+)

}



@-webkit-keyframes swiper-preloader-spin {

    100% {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



@keyframes swiper-preloader-spin {

    100% {

        -webkit-transform: rotate(360deg);

        transform: rotate(360deg)

    }

}



.swiper-container .swiper-notification {

    position: absolute;

    left: 0;

    top: 0;

    pointer-events: none;

    opacity: 0;

    z-index: -1000

}



.swiper-container-fade.swiper-container-free-mode .swiper-slide {

    -webkit-transition-timing-function: ease-out;

    transition-timing-function: ease-out

}



.swiper-container-fade .swiper-slide {

    pointer-events: none;

    -webkit-transition-property: opacity;

    transition-property: opacity

}



.swiper-container-fade .swiper-slide .swiper-slide {

    pointer-events: none

}



.swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active {

    pointer-events: auto

}



.swiper-container-cube {

    overflow: visible

}



.swiper-container-cube .swiper-slide {

    pointer-events: none;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    z-index: 1;

    visibility: hidden;

    -webkit-transform-origin: 0 0;

    -ms-transform-origin: 0 0;

    transform-origin: 0 0;

    width: 100%;

    height: 100%

}



.swiper-container-cube .swiper-slide .swiper-slide {

    pointer-events: none

}



.swiper-container-cube.swiper-container-rtl .swiper-slide {

    -webkit-transform-origin: 100% 0;

    -ms-transform-origin: 100% 0;

    transform-origin: 100% 0

}



.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active {

    pointer-events: auto

}



.swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide {

    pointer-events: auto;

    visibility: visible

}



.swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right {

    z-index: 0;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden

}



.swiper-container-cube .swiper-cube-shadow {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    background: #000;

    opacity: .6;

    -webkit-filter: blur(50px);

    filter: blur(50px);

    z-index: 0

}



.swiper-container-flip {

    overflow: visible

}



.swiper-container-flip .swiper-slide {

    pointer-events: none;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    z-index: 1

}



.swiper-container-flip .swiper-slide .swiper-slide {

    pointer-events: none

}



.swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active {

    pointer-events: auto

}



.swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right {

    z-index: 0;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden

}



.swiper-container-coverflow .swiper-wrapper {

    -ms-perspective: 1200px

}



.left-menu-app {

    width: 78px;

    padding: 0 9px;

    background: #024f7b;

    position: fixed;

    left: 0;

    height: 100%

}



.left-menu-app .logo-p {

    background: #8f0000;

    width: 78px;

    height: 78px;

    line-height: 78px;

    color: #fff;

    display: block;

    margin: 0 -9px 0;

    position: relative;

    z-index: 2;

    text-align: center;

    margin-bottom: 53px

}



.logo-p img {

    height: 65px

}



.menu-header .logo-p svg {

    width: 42px;

    height: 42px

}



.menu-header .nav-tab {

    text-align: center;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    gap: 24px

}



.menu-header .nav-tab a {

    display: flex;

    gap: 8px;

    align-items: center;

    background: 0 0;

    border-radius: 16px;

    line-height: 48px;

    text-align: center;

    color: #fff;

    position: relative

}



.menu-header .nav-tab a .info {

    position: absolute;

    padding: 6px 10px 6px 16px;

    background: #4d3b79;

    border-radius: 4px;

    text-align: center;

    font-size: 12px;

    color: #ebedf8;

    width: 94px;

    line-height: 1.2;

    bottom: -32px;

    left: -10px;

    display: none

}



.menu-header .nav-tab a .info::before {

    content: "";

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 7px solid #4d3b79;

    position: absolute;

    top: -7px;

    left: 29px

}



.menu-header .nav-tab a svg {

    width: 20px;

    height: 20px

}



.menu-header .nav-tab a.nav div:first-child {

    width: 32px;

    height: 32px;

    position: relative;

    border-radius: 4px

}



.menu-header .nav-tab a.nav div:first-child svg {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%)

}



.menu-header .nav-tab a.active div:first-child {

    color: #fff;

    background: #ff7b00

}



.menu-header .nav-tab a:hover {

    color: #ebedf8

}



.menu-header .nav-tab a:hover .info {

    display: block

}



@media (max-width: 600px) {

    .left-menu-app {

        padding: 0 6px;

        width: 50px;

        display: none

    }



    .left-menu-app .logo-p {

        width: 50px;

        height: 50px;

        line-height: 50px;

        margin: 0 -6px 30px

    }



    .left-menu-app .logo-p svg {

        width: 30px;

        height: 30px

    }



    .menu-header .nav-tab a {

        width: 38px;

        height: 38px;

        line-height: 38px;

        border-radius: 10px;

        margin-bottom: 15px

    }

}



@media (max-height: 768px) {

    .left-menu-app .logo-p {

        margin-bottom: 25px

    }

}



.header-top {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    width: 100%;

    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;

    -ms-flex-pack: justify;

    justify-content: space-between;

    padding: 15px 0;

    z-index: 11;

    height: 60px;

    background: #42006b

}



.header-top .title-page {

    font: bold 32px/1 var(--font1);

    color: #ebedf8;

    margin-bottom: 0

}



.header-top .title-page span {

    color: #7594b6;

    font-size: 14px;

    font-weight: 400;

    display: block;

    margin-top: 3px

}



.header-top__right {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    margin-right: 32px

}



.header-top__right .right {

    position: absolute;

    right: 0

}



.header-top .search-mobile {

    display: none;

    color: #4b80c9

}



.header-top .language {

    margin-left: 16px;

    position: relative

}



.header-top .language a img {

    width: 32px;

    height: 32px

}



.header-top .lis-language {

    background: #251f4d;

    border-radius: 24px;

    position: absolute;

    top: 48px;

    z-index: 2;

    width: 800px;

    padding: 40px;

    right: 0

}



.header-top .lis-language .grid {

    -webkit-column-gap: 16px;

    -moz-column-gap: 16px;

    column-gap: 16px;

    row-gap: 16px

}



.header-top .lis-language .item {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    color: #7594b6

}



.header-top .lis-language .item .img {

    margin-right: 12px;

    display: block

}



.header-top .lis-language .item .img img {

    width: 32px;

    height: 32px;

    border-radius: 50%

}



.header-top .lis-language .item div {

    width: calc(100% - 44px)

}



@media (max-width: 768px) {

    .header-top .title-page {

        width: 135px

    }



    .header-top__right {

        width: calc(100% - 135px);

        padding-left: 30px;

        justify-content: flex-end

    }



    .header-top__right .form-search {

        width: calc(100% - 48px)

    }



    .nav-tab {

        display: none

    }

}



@media (max-width: 600px) {

    .header-top {

        padding: 10px 0 20px;

        display: none

    }



    .header-top .title-page {

        width: 110px;

        font-size: 24px

    }



    .header-top .title-page span {

        font-size: 12px

    }



    .header-top__right {

        width: calc(100% - 110px);

        padding-left: 20px

    }



    .header-top__right .form-search {

        width: calc(100% - 34px)

    }



    .header-top__right .search-mobile {

        display: block

    }



    .header-top .language {

        margin-left: 10px

    }



    .header-top .language a img {

        width: 24px;

        height: 24px

    }



    .header-top .lis-language {

        width: 400px;

        padding: 15px;

        border-radius: 10px

    }



    .header-top .lis-language .title-cae {

        font-size: 20px !important;

        margin-bottom: 10px !important

    }



    .header-top .lis-language .grid {

        -ms-grid-columns: (1fr) [ 2 ];

        grid-template-columns: repeat(2, 1fr)

    }

}



@media screen and (max-width: 414px) {

    .header-top .title-page {

        width: 100px;

        font-size: 20px

    }



    .header-top .title-page span {

        font-size: 11px

    }



    .header-top__right {

        width: calc(100% - 100px);

        padding-left: 10px

    }



    .header-top .lis-language {

        width: 300px;

        right: 0

    }



    .header-top .lis-language .grid {

        -webkit-column-gap: 8px;

        -moz-column-gap: 8px;

        column-gap: 8px;

        row-gap: 8px

    }



    .header-top .lis-language .item .img {

        margin-right: 10px

    }



    .header-top .lis-language .item .img img {

        width: 24px;

        height: 24px

    }



    .header-top .lis-language .item div {

        width: calc(100% - 34px)

    }

}



#slide-nav {

    position: relative;

    z-index: 2

}



#slide-nav .swiper-container {

    height: 330px

}



@media (max-width: 1280px) {

    #slide-nav .swiper-container {

        height: 270px

    }



    .menu-header .nav-tab a span {

        display: none

    }

}



#slide-nav .thumb_img img {

    border-radius: 18px

}



#slide-nav .swiper-button-prev, #slide-nav .swiper-button-next {

    box-shadow: none;

    border: none;

    width: 24px;

    height: 24px;

    line-height: 22px;

    margin-top: 0;

    opacity: 1;

    left: 17px

}



#slide-nav .swiper-button-prev img, #slide-nav .swiper-button-next img {

    width: 24px;

    height: 24px

}



#slide-nav .swiper-button-prev {

    top: 0;

    top: -10px;

    -webkit-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg)

}



#slide-nav .swiper-button-next {

    bottom: -10px;

    top: inherit;

    -webkit-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg)

}



@media (max-width: 600px) {

    #slide-nav {

        margin-top: 10px

    }



    #slide-nav .swiper-container {

        height: 220px

    }



    #slide-nav .thumb_img {

        border-radius: 10px

    }



    #slide-nav .swiper-button-next, #slide-nav .swiper-button-prev {

        left: 7px

    }

}



.menu-mobile {

    padding: 30px;

    background: #024f7b;

    border-radius: 0 0 4px 0;

    /* -webkit-transition: all .25s ease-in-out;

    transition: all .25s ease-in-out; */

    left: -100%;

    position: fixed;

    top: 59px;

    width: 100vw;

    z-index: 9999999

}



.menu-mobile ul {

    margin-bottom: 0

}



.menu-mobile ul li {

    display: block;

    margin-bottom: 40px

}



.menu-mobile ul li a {

    color: #ebedf8;

    font-size: 16px;

    font-weight: 700

}



.menu-mobile ul li a svg {

    color: #4b80c9;

    margin-right: 10px;

    width: 22px;

    height: 22px

}



.menu-mobile ul li:last-child {

    margin-bottom: 0

}



.menu-mobile ul li.line {

    border-bottom: 1px solid #4c5ca0

}



.menu-mobile.open {

    left: 0

}



.form-search__mobile {

    display: none;

    -webkit-transition: .3s ease;

    transition: .3s ease;

    width: 100%;

    margin-top: -15px

}



.form-search__mobile .suggest-search {

    display: block;

    width: 100%;

    position: static;

    background: #251f4d;

    min-height: 100vh;

    border-radius: 0

}



.top-bar-mobile {

    background: #024f7b;

    z-index: 99;

    height: 60px;

    display: none

}



.top-bar-mobile svg {

    width: 18px;

    height: 18px

}



.top-bar-mobile .back {

    display: none

}



.top-bar-mobile .menu-bar {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex

}



.top-bar-mobile .menu-bar .icon {

    background: #d972f2;

    width: 60px;

    height: 60px;

    line-height: 60px;

    display: block;

    text-align: center

}



.top-bar-mobile .menu-bar svg {

    width: 32px;

    height: 32px;

    color: #fff

}



.top-bar-mobile .menu-bar .down {

    height: 60px;

    line-height: 60px;

    text-align: center;

    background: rgba(43, 40, 205, .4);

    width: 28px;

    display: inline-block;

    color: #ebedf8

}



.top-bar-mobile .menu-bar .down svg {

    width: 11px;

    height: 11px

}



.top-bar-mobile .menu-bar.open .down svg {

    -webkit-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    transform: rotate(180deg);

    color: #ff7b00

}



@media (max-width: 360px) {

    .top-bar-mobile .menu-bar .icon {

        width: 50px

    }



    .top-bar-mobile .menu-bar .icon svg {

        width: 28px;

        height: 28px

    }



    .top-bar-mobile .menu-bar .down {

        width: 15px

    }



    .top-bar-mobile .menu-bar .down svg {

        width: 9px;

        height: 9px

    }

}



.top-bar-mobile .nav-tab {

    margin-left: 35px

}



.top-bar-mobile .nav-tab a {

    display: inline-block;

    background: 0 0;

    border-radius: 10px;

    width: 40px;

    height: 40px;

    line-height: 40px;

    text-align: center;

    color: #4b80c9;

    position: relative

}



.top-bar-mobile .nav-tab a.active {

    color: #fff;

    background: -webkit-linear-gradient(351.91deg, #ff7e05 0%, #e45b00 89.61%);

    background: linear-gradient(98.09deg, #7200b9 0%, #420468 89.61%)

}



@media (max-width: 360px) {

    .top-bar-mobile .nav-tab {

        margin-left: 20px

    }

}



@media (max-width: 340px) {

    .top-bar-mobile .nav-tab {

        margin-left: 15px

    }

}



.top-bar-mobile .right {

    position: absolute;

    right: 10px;

    top: 17px;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    gap: 12px;

    align-items: center

}



.top-bar-mobile .right .search-btn {

    margin-top: 1px

}



.top-bar-mobile .right .search-btn.active .btn_reset {

    display: block

}



.top-bar-mobile .right .auto_search_button {

    color: #4b80c9

}



.top-bar-mobile .right .language {

    margin-left: 12px

}



.top-bar-mobile .right .language img {

    width: 24px;

    height: 24px;

    border-radius: 50%

}



.top-bar-mobile .search-wrap {

    position: absolute;

    top: -7px;

    right: 40px;

    width: 70%;

    width: calc(100% - 90px);

    height: 40px;

    z-index: 2;

    display: none;

    border-radius: 49px

}



.top-bar-mobile .search-wrap .container {

    background: #fff

}



.logo-mobile img {

    height: 32px

}



.top-bar-mobile .search-wrap input {

    background: #4d3b79;

    font-size: 13px;

    height: 40px;

    width: 100%;

    outline: 0;

    border: 0;

    padding: 0 30px 0 20px;

    border-radius: 49px;

    color: #fff

}



.top-bar-mobile .search-wrap input::-webkit-input-placeholder {

    color: #7594b6

}



.top-bar-mobile .search-wrap input:-moz-placeholder {

    color: #7594b6

}



.top-bar-mobile .search-wrap input::-moz-placeholder {

    color: #7594b6

}



.top-bar-mobile .search-wrap input:-ms-input-placeholder {

    color: #7594b6

}



.top-bar-mobile .search-wrap button {

    position: absolute;

    right: 12px;

    top: 9px;

    outline: 0

}



.top-bar-mobile .search-wrap button svg {

    fill: rgba(255, 255, 255, .85);

    top: 2px !important

}



.top-bar-mobile .search-wrap .icon_seach_web {

    background: 0 0;

    border: none

}



.top-bar-mobile .search-wrap .btn_reset {

    position: absolute;

    border-radius: 7px;

    background: #6348a3;

    border: none;

    top: 8px;

    right: 40px;

    font-weight: 700;

    padding: 0 8px;

    font-size: 14px;

    text-align: center;

    color: #f2f2f2;

    line-height: 24px;

    cursor: pointer;

    display: none

}



.top-bar-mobile .search-wrap .btn_reset span {

    display: none

}



.top-bar-mobile .search-wrap .btn_reset svg {

    width: 12px;

    height: 12px

}



.top-bar-mobile .search-wrap .btn_reset:hover span {

    display: inline-block

}



@media (max-width: 600px) {

    .top-bar-mobile {

        display: -webkit-box;

        display: -webkit-flex;

        display: -ms-flexbox;

        display: flex;

        -webkit-box-align: center;

        -webkit-align-items: center;

        -ms-flex-align: center;

        align-items: center;

        gap: 12px;

        padding: 12px

    }

}



.lis-language-mobile {

    background: #251f4d;

    border-radius: 0;

    z-index: 4;

    width: 100%;

    padding: 24px;

    right: 0;

    display: none;

    position: fixed;

    top: 60px

}



.lis-language-mobile .title-cae {

    padding-right: 40px

}



.lis-language-mobile .close {

    background: #6348a2;

    border-radius: 7px;

    position: absolute;

    width: 26px;

    height: 24px;

    opacity: 1;

    color: #fff;

    text-align: center;

    line-height: 22px;

    right: 30px

}



.lis-language-mobile .close svg {

    width: 12px;

    height: 12px

}



.lis-language-mobile .grid {

    -webkit-column-gap: 16px;

    -moz-column-gap: 16px;

    column-gap: 16px;

    row-gap: 16px;

    overflow-y: scroll;

    height: 84vh;

    height: calc(100vh - 140px);

    padding-bottom: 20px

}



.lis-language-mobile .item {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    color: #7594b6

}



.lis-language-mobile .item .img {

    margin-right: 12px;

    display: block

}



.lis-language-mobile .item .img img {

    width: 32px;

    height: 32px;

    border-radius: 50%

}



.lis-language-mobile .item div {

    width: calc(100% - 44px)

}



.open-search .top-bar-mobile {

    background: #024f7b

}



.open-search .top-bar-mobile .back {

    display: inline-block;

    color: #7594b6;

    margin-left: 5px;

    position: relative;

    z-index: 3;

    margin-top: -4px

}



.open-search .top-bar-mobile .back svg {

    width: 16px;

    height: 16px

}



.open-search .top-bar-mobile .right {

    width: 100%;

    -webkit-box-pack: end;

    -webkit-justify-content: flex-end;

    -ms-flex-pack: end;

    justify-content: flex-end

}



.open-search .top-bar-mobile .menu-bar, .open-search .top-bar-mobile .nav-tab {

    display: none;

    opacity: 0;

    -webkit-transition: .3s ease;

    transition: .3s ease

}



.open-search .app-game {

    visibility: hidden

}



.open-search .form-search__mobile {

    display: block

}



.open-language .lis-language-mobile {

    display: block

}



.footer {

    margin-top: auto;

    background: #024f7b;

    padding: 15px 0;

    text-align: center

}



.footer a {

    color: #ebedf8;

    margin: 0 15px

}



@media (max-width: 414px) {

    .footer {

        padding: 12px 0

    }



    .footer a {

        margin: 0 6px

    }

}



.app-game {

    position: relative;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    width: 100%;

    margin-top: 16px;

    overflow: hidden

}



.app-game::before {

    background: -webkit-radial-gradient(27.76% 49.37% at 50.01% 48.5%, #024f7b 0%, rgba(52, 46, 175, 0) 100%);

    background: radial-gradient(27.76% 49.37% at 50.01% 48.5%, #024f7b 0%, rgba(52, 46, 175, 0) 100%);

    opacity: .7;

    width: 842px;

    height: 842px;

    left: -210px;

    top: -267px;

    position: absolute

}



.app-game::after {

    right: -410px;

    top: 407px;

    position: absolute;

    z-index: -1;

    background: -webkit-radial-gradient(27.76% 49.37% at 50.01% 48.5%, #024f7b 0%, rgba(52, 46, 175, 0) 100%);

    background: radial-gradient(27.76% 49.37% at 50.01% 48.5%, #024f7b 0%, rgba(52, 46, 175, 0) 100%);

    opacity: .3;

    width: 842px;

    height: 842px

}



@media (max-width: 600px) {

    .app-game {

        padding-left: 0

    }



    .app-game::after {

        display: none

    }

}



.title-page-mobile {

    width: 100%;

    font: bold 24px/1 var(--font1);

    color: #ebedf8;

    margin-bottom: 15px;

    padding: 0 28px;

    display: block;

    position: relative;

    z-index: 1

}



.title-page-mobile div {

    color: #0b0817

}



.title-page-mobile span {

    color: #0b0817;

    font-size: 14px;

    font-weight: 400;

    display: block;

    margin-top: 3px

}



@media (max-width: 600px) {

    .title-page-mobile {

        display: block

    }

}



.content-app {

    width: 100%;

    position: relative;

    padding: 0 28px

}



@media (max-width: 600px) {

    .content-app {

        width: 100%;

        padding: 0 16px

    }

}



.buid-top {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;

    -ms-flex-pack: justify;

    justify-content: space-between;

    max-height: 580px;

    height: 100%

}



.buid-top .thumb_img img {

    border-radius: 4px

}



@media (max-width: 1480px) {

    .buid-top .thumb_img img {

        border-radius: 4px

    }

}



.buid-top .article-itemt {

    margin-bottom: 0

}



.buid-top .article-itemt .article-thumb, .buid-top .article-itemt .article-thumb-small {

    margin-bottom: 0

}



@media (min-width: 601px) {

    .buid-top .article-itemt .article-thumb, .buid-top .article-itemt .article-thumb-small {

        height: 100%

    }

}



.buid-top .slide-show .article-itemt .article-thumb::before {

    content: "";

    background: -webkit-linear-gradient(top, #000 0%, rgba(0, 0, 0, 0) 100%);

    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);

    border-radius: 0 0 4px 4px;

    opacity: .8;

    height: 60%;

    width: 100%;

    position: absolute;

    bottom: 0;

    z-index: 1;

    -webkit-transform: matrix(1, 0, 0, -1, 0, 0);

    -ms-transform: matrix(1, 0, 0, -1, 0, 0);

    transform: matrix(1, 0, 0, -1, 0, 0)

}



@media (max-width: 1480px) {

    .buid-top .article-itemt .article-thumb::before {

        border-radius: 0 0 4px 4px

    }

}



.buid-top .slide-show .article-itemt .article-content {

    position: absolute;

    bottom: 24px;

    left: 0;

    right: 0;

    padding: 0 24px;

    z-index: 3

}



.buid-top .slide-show .article-itemt .article-content .title_new {

    color: #ebedf8;

    font: 700 18px var(--font2);

    margin-bottom: 8px

}



.buid-top .slide-show .article-itemt .article-content .title_new a {

    color: #ebedf8

}



.buid-top .slide-show .article-itemt .article-content .tag {

    margin-bottom: 12px

}



.buid-top .slide-show .article-itemt .article-content .tag a {

    color: rgba(255, 255, 255, .8);

    font-size: 14px

}



.buid-top .slide-show .article-itemt .article-content .btn-default {

    border-radius: 4px;

    padding: 0 20px

}



.buid-top .slide-show .article-itemt:hover {

    -webkit-transform: scale(1) translate(0px, 0px);

    -ms-transform: scale(1) translate(0px, 0px);

    transform: scale(1) translate(0px, 0px)

}



.buid-top .slide-show {

    width: 66.23%;

    position: relative;

    border-radius: 4px;

    overflow: hidden

}



.buid-top .slide-show .article-itemt .article-content {

    width: 100%

}



.buid-top .slide-show .article-itemt .article-content .title_new {

    font-size: 24px

}



@media (min-width: 601px) {

    .buid-top .slide-show .mySwiper2 {

        height: 100%

    }



    .buid-top .slide-show .mySwiper2 .thumb_img {

        padding-bottom: 0;

        height: 100%

    }

}



.buid-top .slide-show .swiper {

    overflow: hidden

}



.buid-top .slide-show .absolute {

    position: absolute;

    z-index: 3;

    width: 352px;

    bottom: 26px;

    right: 26px

}



.buid-top .slide-show .absolute .article-itemt::before {

    display: none

}



.buid-top .slide-show .absolute .swiper-button-prev, .buid-top .slide-show .absolute .swiper-button-next {

    top: 18px

}



.buid-top .slide-show .absolute .swiper-button-prev {

    left: -12px

}



.buid-top .slide-show .absolute .swiper-button-next {

    right: -12px

}



.buid-top__right {

    width: 32.38%;

    overflow: hidden;

    height: 100%;

    padding: 16px;

    background: #fff;

    max-height: 100%;

    border-radius: 4px;

    box-sizing: border-box

}



.buid-top__right .swiper-container {

    height: 100%

}



.buid-top__right .article-itemt {

}



.mySwiperNew .content-left a {

    font-size: 12px;

    color: #0b0817a6

}



.mySwiperNew .article-content {

    display: flex;

    justify-content: space-between;

    align-items: center

}



.mySwiperNew .btn-default {

    line-height: 4px;

    padding: 12px 20px;

    font-size: 12px

}



.mySwiperNew .swiper-controler {

    display: none

}



.slide-category .article-itemt .article-thumb, .slide-tag .article-itemt .article-thumb {

    width: 55px

}



.slide-category .article-itemt .article-content .title_new, .slide-tag .article-itemt .article-content .title_new {

    white-space: nowrap

}



@media (max-width: 768px) {

    .buid-top {

        -webkit-flex-wrap: wrap;

        -ms-flex-wrap: wrap;

        flex-wrap: wrap;

        max-height: unset !important;

        height: auto

    }



    .buid-top .article-itemt .article-thumb::before {

        display: none

    }



    .buid-top .slide-show {

        width: 100%;

        display: -webkit-box;

        display: -webkit-flex;

        display: -ms-flexbox;

        display: flex;

        -webkit-flex-wrap: wrap;

        -ms-flex-wrap: wrap;

        flex-wrap: wrap;

        margin-bottom: 20px

    }



    .buid-top .slide-show .mySwiper2 {

        height: auto;

        -webkit-box-ordinal-group: 3;

        -webkit-order: 2;

        -ms-flex-order: 2;

        order: 2;

        width: 100%

    }



    .buid-top .slide-show .mySwiper2 .article-itemt .article-content {

        width: 100%

    }



    .buid-top .slide-show .mySwiper2 .thumb_img {

        padding-bottom: 100%;

        border-radius: 4px

    }



    .buid-top .slide-show .mySwiper2 .article-thumb::before {

        display: none

    }



    .buid-top .slide-show .absolute {

        position: relative;

        bottom: 0;

        width: 100%;

        right: 0;

        margin-bottom: 12px;

        -webkit-box-ordinal-group: 2;

        -webkit-order: 1;

        -ms-flex-order: 1;

        order: 1

    }



    .buid-top .slide-show .absolute .swiper-button-prev, .buid-top .slide-show .absolute .swiper-button-next {

        top: 18px

    }



    .buid-top .slide-show .absolute .thumb_img {

        border-radius: 4px

    }



    .buid-top__right {

        width: 100%;

        display: block;

        padding: 16px

    }



    .buid-top__right .swiper-container {

        height: auto

    }



    .mySwiperNew .article-itemt {

        flex-direction: column

    }



    .mySwiperNew .btn-default {

        display: none

    }



    .mySwiperNew .article-itemt .article-content {

        padding: 0;

        width: 100%

    }



    .mySwiperNew .article-itemt .article-thumb {

        width: 100%

    }



    .mySwiperNew .article-itemt {

        gap: 12px

    }



    .mySwiperNew .swiper-controler {

        display: flex;

        right: 16px;

        top: 18px

    }



    .menu-header .nav-tab a span {

        display: none

    }



    .slide-category .article-itemt .article-thumb, .slide-tag .article-itemt .article-thumb {

        width: 55px;

        padding: 6px

    }



    .slide-category .article-itemt, .slide-category__v2 .article-itemt, .slide-tag .article-itemt, .slide-category__v2 .article-itemt {

        border-radius: 8px

    }

}



@media (max-width: 600px) {

    .buid-top .slide-show .article-itemt .article-content {

        position: absolute;

        padding: 0;

        margin-top: 10px;

        bottom: 16px;

        left: 16px

    }



    .buid-top .slide-show .article-itemt .article-content .title_new {

        font-size: 16px

    }



    .buid-top .slide-show .article-itemt .article-content .btn-default {

        line-height: 36px

    }

}



.swiper-controler {

    position: absolute;

    right: 0;

    top: 0;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center

}



.slider__images .swiper-pagination, .swiper-controler .swiper-button-prev, .swiper-controler .swiper-button-next, .swiper-controler .swiper-pagination {

    position: static;

    color: #af93ff;

    opacity: 1

}



.swiper-controler .swiper-button-prev svg, .swiper-controler .swiper-button-next svg, .swiper-controler .swiper-pagination svg {

    width: 12px;

    height: 12px;

    margin-left: 15px

}



@media (max-width: 414px) {

    .swiper-controler .swiper-button-prev, .swiper-controler .swiper-button-next, .slider__images .swiper-pagination, .swiper-controler .swiper-pagination {

        color: #af93ff

    }



    .swiper-controler .swiper-button-prev svg, .swiper-controler .swiper-button-next svg, .swiper-controler .swiper-pagination svg {

        color: #af93ff

    }

}



.swiper-controler .swiper-button-disabled {

    opacity: .6

}



.slider__images .swiper-pagination, .swiper-controler .swiper-pagination {

    margin-right: 10px;

    width: auto !important

}



.slider__images .swiper-pagination .swiper-pagination-bullet, .swiper-controler .swiper-pagination .swiper-pagination-bullet {

    margin-left: 8px;

    background: #7594b6;

    opacity: .8

}



.slider__images .swiper-pagination .swiper-pagination-bullet-active, .swiper-controler .swiper-pagination .swiper-pagination-bullet-active {

    background: #42006b;

    opacity: 1

}



@media (max-width: 600px) {

    .swiper-controler .swiper-pagination {

        display: none

    }

}



.slide-category .article-itemt, .slide-tag .article-itemt, .slide-category__v2 .article-itemt {

    background: #fff;

    border-radius: 4px;

    padding: 8px;

    margin-bottom: 0;

    box-shadow: 0 3px 1px #42006b;

    align-items: center;

    width: auto !important

}



.slide-category .article-itemt .article-thumb .thumb_img img, .slide-tag .article-itemt .article-thumb .thumb_img img, .slide-category__v2 .article-itemt .article-thumb .thumb_img img {

    border-radius: 4px

}



.slide-category .article-itemt .article-content, .slide-tag .article-itemt .article-content, .slide-category__v2 .article-itemt .article-content {

    padding: 0 9px 0 14px

}



@media (max-width: 600px) {

    .slide-category .article-itemt .article-content, .slide-tag .article-itemt .article-content, .slide-category__v2 .article-itemt .article-content {

        padding: 0

    }

}



.slide-category .grid__4, .slide-tag .grid__4, .slide-category__v2 .grid__4 {

    -webkit-column-gap: 16px;

    -moz-column-gap: 16px;

    column-gap: 16px;

    row-gap: 16px;

    -ms-grid-columns: (1fr) [ 6 ];

    grid-template-columns: repeat(6, 1fr)

}



.slide-category .grid__4 .article-itemt, .slide-tag .grid__4 .article-itemt, .slide-category__v2 .grid__4 .article-itemt {

    padding: 0

}



.slide-category .grid__4 .article-itemt .article-content, .slide-tag .grid__4 .article-itemt .article-content, .slide-category__v2 .grid__4 .article-itemt .article-content {

    padding: 0 16px 12px

}



.slide-category .grid__4 .article-itemt .thumb_img img, .slide-tag .grid__4 .article-itemt .thumb_img img, .slide-category__v2 .grid__4 .article-itemt .thumb_img img {

    border-radius: 24px

}



@media screen and (max-width: 1480px) {

    .slide-category .grid__4, .slide-tag .grid__4, .slide-category__v2 .grid__4 {

        -ms-grid-columns:(1fr) [ 4 ];

        grid-template-columns: repeat(4, 1fr)

    }



    .slide-category .grid__4 .article-itemt:nth-child(5), .slide-category .grid__4 .article-itemt:nth-child(6), .slide-category__v2 .grid__4 .article-itemt:nth-child(5), .slide-category__v2 .grid__4 .article-itemt:nth-child(6) {

        display: none

    }

}



@media screen and (max-width: 1025px) {

    .slide-category .grid__4, .slide-category__v2 .grid__4 {

        -ms-grid-columns:(1fr) [ 3 ];

        grid-template-columns: repeat(3, 1fr)

    }



    .slide-category .grid__4 .article-itemt:nth-child(5), .slide-category .grid__4 .article-itemt:nth-child(6), .slide-category__v2 .grid__4 .article-itemt:nth-child(5), .slide-category__v2 .grid__4 .article-itemt:nth-child(6) {

        display: block

    }

}



@media screen and (max-width: 600px) {

    .slide-category .grid__4, .slide-category__v2 .grid__4 {

        -ms-grid-columns:(1fr) [ 2 ];

        grid-template-columns: repeat(2, 1fr);

        -webkit-column-gap: 12px;

        -moz-column-gap: 12px;

        column-gap: 12px;

        row-gap: 12px

    }

}



.slide-category .hidden-pc .swiper-controler, .slide-category__v2 .hidden-pc .swiper-controler {

    top: 10px

}



.slide-category .hidden-pc .txt_32, .slide-category__v2 .hidden-pc .txt_32 {

    color: #ebedf8

}



@media screen and (max-width: 414px) {

    .slide-category .article-itemt, .slide-tag .article-itemt, .slide-category__v2 .article-itemt {

        padding: 0

    }



    .slide-category .article-itemt .article-content, .slide-tag .article-itemt .article-content, .slide-category__v2 .article-itemt .article-content {

        padding: 0 10px 10px

    }

}



.slide-recommended .article-itemt {

    background: #024f7b;

    margin-bottom: 0;

    border-radius: 24px 24px 18px 18px

}



.slide-recommended .article-itemt .article-thumb .thumb_img img {

    border-radius: 24px

}



@media (max-width: 600px) {

    .slide-recommended .article-itemt .article-thumb .thumb_img img {

        border-radius: 18px

    }

}



.slide-recommended .article-itemt .article-content {

    padding: 3px 16px 12px

}



@media (max-width: 600px) {

    .slide-recommended .article-itemt .article-content {

        padding: 0 10px 10px

    }

}



.slide-featured .article-itemt {

    background: #fff;

    border-radius: 4px;

    padding: 7px;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    max-width: 250px;

    margin-bottom: 0;

    margin-right: 7px

}



.slide-featured .article-itemt .remove {

    position: absolute;

    right: 6px;

    top: 6px;

    width: 20px;

    height: 20px;

    line-height: 18px;

    border-radius: 4px;

    background: #ff7b00;

    color: #fff;

    text-align: center;

    display: none

}



.slide-featured .article-itemt .remove svg {

    width: 10px;

    height: 10px

}



.slide-featured .article-itemt .thumb_img img {

    border-radius: 4px

}



.slide-featured .article-itemt .title_new {

    margin-bottom: 0

}



.slide-featured .article-itemt:hover .remove {

    display: block

}



.slide-featured .swiper-container.padding-effect {

    padding-bottom: 10px;

    margin-bottom: -10px

}



.slide-featured .grid__5 {

    -ms-grid-columns: (1fr) [ 6 ];

    grid-template-columns: repeat(6, 1fr)

}



@media screen and (max-width: 1480px) {

    .slide-featured .grid__5 {

        -ms-grid-columns:(1fr) [ 5 ];

        grid-template-columns: repeat(5, 1fr)

    }

}



@media screen and (max-width: 1280px) {

    .slide-featured .grid__5 {

        -ms-grid-columns:(1fr) [ 4 ];

        grid-template-columns: repeat(4, 1fr)

    }

}



@media screen and (max-width: 1025px) {

    .slide-featured .grid__5 {

        -ms-grid-columns:(1fr) [ 3 ];

        grid-template-columns: repeat(3, 1fr)

    }

}



@media screen and (max-width: 768px) {

    .slide-featured .grid__5 {

        -ms-grid-columns:(1fr) [ 2 ];

        grid-template-columns: repeat(2, 1fr);

        -webkit-column-gap: 16px;

        -moz-column-gap: 16px;

        column-gap: 16px;

        row-gap: 16px

    }

}



@media screen and (max-width: 340px) {

    .slide-featured .grid__5 {

        -ms-grid-columns:(1fr) [ 1 ];

        grid-template-columns: repeat(1, 1fr)

    }

}



@media screen and (max-width: 414px) {

    .slide-featured .article-itemt {

        padding: 4px

    }



    .slide-featured .article-itemt .article-content {

        padding: 0 10px 10px

    }



    .slide-featured .article-itemt .article-content .title_new {

        font-size: 12px

    }

}



.slide-featured2 .article-itemt {

    margin-bottom: 0

}



.slide-featured2 .article-itemt .thumb_img img {

    border-radius: 4px

}



@media (max-width: 600px) {

    .slide-featured2 .article-itemt .thumb_img img {

        border-radius: 4px

    }

}



.slide-featured2 .article-itemt .title_new {

    margin-bottom: 4px

}



.list-game {

    -ms-grid-columns: (1fr) [ 6 ];

    grid-template-columns: repeat(6, 1fr);

    -webkit-column-gap: 16px;

    -moz-column-gap: 16px;

    column-gap: 16px;

    row-gap: 24px

}



.list-game .article-itemt {

    margin-bottom: 0

}



.list-game .article-itemt .thumb_img img {

    border-radius: 4px

}



@media (max-width: 600px) {

    .list-game .article-itemt .thumb_img img {

        border-radius: 4px

    }

}



.list-game .column2 {

    -ms-grid-column: span 2;

    grid-column: span 2;

    -ms-grid-row: span 2;

    grid-row: span 2;

    background: #024f7b;

    border-radius: 24px 24px 18px 18px

}



.list-game .column2 .article-content {

    padding: 16px 12px

}



.list-game .column2 .article-content .title_new {

    font-size: 16px;

    margin-bottom: 4px

}



.list-game.grid__5 {

    -ms-grid-columns: (1fr) [ 7 ];

    grid-template-columns: repeat(7, 1fr);

    -webkit-column-gap: 16px;

    -moz-column-gap: 16px;

    column-gap: 16px;

    row-gap: 16px

}



@media (max-width: 1480px) {

    .list-game.grid__5 {

        -ms-grid-columns:(1fr) [ 5 ];

        grid-template-columns: repeat(5, 1fr)

    }

}



@media (max-width: 1025px) {

    .list-game.grid__5 {

        -ms-grid-columns:(1fr) [ 4 ];

        grid-template-columns: repeat(4, 1fr)

    }

}



@media (max-width: 768px) {

    .list-game.grid__5 {

        -ms-grid-columns:(1fr) [ 3 ];

        grid-template-columns: repeat(2, 1fr);

        -webkit-column-gap: 12px;

        -moz-column-gap: 12px;

        column-gap: 12px;

        row-gap: 12px

    }

}



@media (max-width: 600px) {

    .list-game.grid__5.slide-category {

        -ms-grid-columns:(1fr) [ 2 ];

        grid-template-columns: repeat(2, 1fr)

    }

}



@media (max-width: 360px) {

    .list-game.grid__5 {

        -ms-grid-columns:(1fr) [ 2 ];

        grid-template-columns: repeat(2, 1fr)

    }

}



@media (max-width: 1280px) {

    .list-game {

        -ms-grid-columns:(1fr) [ 5 ];

        grid-template-columns: repeat(5, 1fr)

    }

}



@media (max-width: 1025px) {

    .list-game {

        -ms-grid-columns:(1fr) [ 4 ];

        grid-template-columns: repeat(4, 1fr)

    }

}



@media (max-width: 768px) {

    .list-game {

        -ms-grid-columns:(1fr) [ 3 ];

        grid-template-columns: repeat(3, 1fr)

    }

}



@media (max-width: 600px) {

    .list-game {

        -ms-grid-columns:(1fr) [ 2 ];

        grid-template-columns: repeat(2, 1fr);

        -webkit-column-gap: 12px;

        -moz-column-gap: 12px;

        column-gap: 12px;

        row-gap: 12px

    }

}



@media (max-width: 414px) {

    .list-game {

        -webkit-column-gap: 12px;

        -moz-column-gap: 12px;

        column-gap: 12px;

        row-gap: 12px

    }



    .list-game .column2 {

        -ms-grid-column: span 1;

        grid-column: span 1;

        -ms-grid-row: span 1;

        grid-row: span 1;

        background: 0 0

    }



    .list-game .column2 .article-content {

        padding: 0

    }



    .list-game .column2 .article-content .title_new {

        font-size: 14px

    }



    .list-game .column2 .article-content .des {

        display: none

    }



    .list-game .column2 .article-content__left {

        width: 100%

    }



    .list-game .column2 .article-content__right {

        display: none

    }

}



.free-online-games {

    background: #fff;

    border-radius: 4px;

    color: #0b0817a6;

    line-height: 1.6;

    margin-bottom: 20px;

    padding: 48px;

    position: relative

}



.free-online-games::before, .free-online-games::after {

    background: -webkit-linear-gradient(269.96deg, #ffdb76 2.08%, #ffaa4d 103.35%);

    background: linear-gradient(180.04deg, #ffdb76 2.08%, #ffaa4d 103.35%);

    max-height: 160px;

    width: 16px;

    height: 100%;

    position: absolute;

    left: 0;

    border-radius: 0 8px 8px 0;

    top: 50%;

    transform: translateY(-50%)

}



.free-online-games::after {

    left: inherit;

    right: 0;

    border-radius: 8px 0 0 8px

}



.free-online-games .title {

    color: #0b0817;

    font-size: 32px;

    font-weight: 700;

    margin-bottom: 32px

}



.free-online-games p {

    margin-bottom: 20px

}



.free-online-games p:last-child {

    margin-bottom: 0

}



@media (max-width: 768px) {

    .free-online-games {

        padding: 20px

    }



    .free-online-games .title {

        font-size: 22px;

        margin-bottom: 15px

    }

}



@media (max-width: 414px) {

    .free-online-games {

        padding: 15px;

        border: 3px solid #024f7b;

        border-radius: 10px

    }



    .free-online-games::before, .free-online-games::after {

        height: 80px;

        width: 10px;

        margin-top: -40px

    }



    .free-online-games::before {

        left: -3px

    }



    .free-online-games::after {

        right: -3px

    }



    .free-online-games p {

        margin-bottom: 15px

    }



    .free-online-games .title {

        font-size: 22px;

        margin-bottom: 15px

    }

}



.head-sort {

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center

}



.head-sort .note {

    color: #7594b6;

    margin-bottom: 24px

}



.head-sort .sort {

    margin-bottom: 24px

}



.head-sort .sort .flex {

    color: #7594b6;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: end;

    -webkit-justify-content: flex-end;

    -ms-flex-pack: end;

    justify-content: flex-end

}



.head-sort .sort .lbl {

    margin-right: 6px

}



.head-sort .sort .tab a {

    display: inline-block;

    line-height: 36px;

    padding: 0 21px;

    font-size: 12px;

    font-weight: 700;

    border-radius: 83px;

    background: #281850;

    color: #ebedf8;

    margin-left: 8px

}



.head-sort .sort .tab a svg {

    margin-right: 5px;

    margin-top: -2px;

    width: 14px;

    height: 14px

}



.head-sort .sort .tab a.active {

    background: #ff7b00

}



@media screen and (max-width: 600px) {

    .head-sort .note {

        margin-bottom: 10px

    }



    .head-sort .sort {

        margin-bottom: 20px

    }



    .head-sort .sort .tab a {

        padding: 0 15px;

        margin-left: 5px

    }

}



@media screen and (max-width: 414px) {

    .head-sort .sort .lbl {

        display: none

    }

}



.box-searh {

    max-width: 800px;

    margin: 0 auto;

    margin-top: 20px;

    margin-bottom: 40px;

    text-align: center;

    color: #7594b6;

    font-size: 16px

}



.box-searh .title {

    font-size: 44px;

    color: #ebedf8;

    font-weight: 700;

    margin-bottom: 4px

}



.box-searh .des {

    margin-bottom: 23px

}



.box-searh .form-search {

    width: 388px;

    margin: 0 auto;

    max-width: 100%

}



.box-searh .form-search .input_search {

    background: #4d3b79;

    height: 56px;

    padding: 0 80px 0 20px;

    color: #ebedf8

}



.box-searh .form-search .input_search::-webkit-input-placeholder {

    color: #ebedf891

}



.box-searh .form-search .input_search:-moz-placeholder {

    color: #ebedf891

}



.box-searh .form-search .input_search::-moz-placeholder {

    color: #ebedf891

}



.box-searh .form-search .input_search:-ms-input-placeholder {

    color: #ebedf891

}



.box-searh .form-search .icon_seach_web {

    right: 8px;

    top: 12px

}



.box-searh .form-search .btn_reset {

    top: 17px;

    right: 45px

}



.box-searh .info {

    margin-top: 40px

}



.box-searh .info h3 {

    color: #ebedf8;

    font-size: 32px;

    font-weight: 700

}



@media (max-width: 600px) {

    .box-searh {

        font-size: 14px

    }



    .box-searh .title {

        font-size: 32px

    }



    .box-searh .info {

        margin-top: 24px

    }



    .box-searh .info h3 {

        font-size: 20px

    }



    .box-searh .form-search .input_search {

        height: 48px

    }



    .box-searh .form-search .btn_reset {

        top: 12px

    }



    .box-searh .form-search .icon_seach_web {

        top: 7px

    }

}



.box-404 {

    text-align: center;

    margin: 20px 0 40px;

    color: #ebedf8;

    font-size: 16px;

    background: url(images/graphics/bg-ten-lua.png) no-repeat center top 30px

}



.box-404 p {

    margin-bottom: 24px

}



.swiper-container.padding-effect {

    padding-top: 5px;

    margin-top: -5px;

    padding-bottom: 5px

}



.body-content {

    width: 73.6%;

    width: calc(100% - 300px);

    padding-right: 28px;

    margin-bottom: 40px

}



@media (max-width: 768px) {

    .body-content {

        width: 100%;

        padding-right: 0;

        margin-bottom: 20px

    }

}



.box_300 {

    width: 300px;

    margin-bottom: 40px

}



@media (max-width: 768px) {

    .box_300 {

        width: 100%;

        margin-bottom: 20px

    }

}



.box-300-flex {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex

}



.box-300-flex__left {

    width: calc(100% - 150px);

    padding-right: 24px

}



.box-300-flex__left .article-itemt {

    margin-bottom: 20px

}



.box-300-flex__left .article-itemt .article-thumb {

    margin-bottom: 8px

}



.box-300-flex__left .article-itemt .article-content .title_new {

    font-size: 12px

}



.box-300-flex__left .article-itemt:last-child {

    margin-bottom: 0

}



.box-300-flex__right {

    width: 150px

}



.detail-v2 .article-itemt {

    margin-bottom: 20px

}



.detail-v2 .article-itemt .article-thumb {

    margin-bottom: 8px

}



.detail-v2 .article-itemt .article-thumb .thumb_img img {

    border-radius: 24px

}



.detail-v2 .article-itemt .article-content .title_new {

    font-size: 12px

}



.detail-v2__left, .detail-v2__right {

    width: 138px

}



.detail-v2__center {

    padding: 0 16px;

    width: 80%;

    width: calc(100% - 276px);

    margin-bottom: 20px

}



.detail-v2__center .box-live {

    margin-bottom: 30px

}



.detail-v2__center .grid__6 {

    -ms-grid-columns: (1fr) [ 8 ];

    grid-template-columns: repeat(8, 1fr);

    row-gap: 20px

}



.detail-v2__center .grid__6 .article-itemt {

    margin-bottom: 0

}



.detail-v2__center .grid__6 .article-itemt:nth-child(9) {

    display: none

}



@media screen and (max-width: 1480px) {

    .detail-v2__center .grid__6 {

        -ms-grid-columns:(1fr) [ 6 ];

        grid-template-columns: repeat(6, 1fr)

    }



    .detail-v2__center .grid__6 .article-itemt:nth-child(7), .detail-v2__center .grid__6 .article-itemt:nth-child(8), .detail-v2__center .grid__6 .article-itemt:nth-child(9) {

        display: none

    }

}



@media screen and (max-width: 1280px) {

    .detail-v2__center .grid__6 {

        -ms-grid-columns:(1fr) [ 5 ];

        grid-template-columns: repeat(5, 1fr)

    }



    .detail-v2__center .grid__6 .article-itemt:nth-child(6) {

        display: none

    }

}



@media screen and (max-width: 1025px) {

    .detail-v2__center .grid__6 {

        -ms-grid-columns:(1fr) [ 4 ];

        grid-template-columns: repeat(4, 1fr)

    }



    .detail-v2__center .grid__6 .article-itemt:nth-child(6), .detail-v2__center .grid__6 .article-itemt:nth-child(7), .detail-v2__center .grid__6 .article-itemt:nth-child(8) {

        display: block

    }

}



@media screen and (max-width: 600px) {

    .detail-v2__center .grid__6 {

        -ms-grid-columns:(1fr) [ 3 ];

        grid-template-columns: repeat(3, 1fr);

        -webkit-column-gap: 12px;

        -moz-column-gap: 12px;

        column-gap: 12px;

        row-gap: 12px

    }



    .detail-v2__center .grid__6 .article-itemt {

        display: block !important

    }

}



@media screen and (max-width: 1280px) {

    .detail-v2__left, .detail-v2__right {

        width: 130px

    }



    .detail-v2__center {

        width: calc(100% - 260px)

    }

}



@media screen and (max-width: 991px) {

    .detail-v2__left, .detail-v2__right {

        width: 100%;

        -webkit-box-ordinal-group: 3;

        -webkit-order: 2;

        -ms-flex-order: 2;

        order: 2;

        display: -ms-grid;

        display: grid;

        -ms-grid-columns: (1fr) [ 4 ];

        grid-template-columns: repeat(4, 1fr);

        width: 100%;

        -webkit-column-gap: 16px;

        -moz-column-gap: 16px;

        column-gap: 16px;

        row-gap: 20px

    }



    .detail-v2__center {

        width: 100%;

        padding: 0;

        -webkit-box-ordinal-group: 2;

        -webkit-order: 1;

        -ms-flex-order: 1;

        order: 1

    }

}



@media screen and (max-width: 600px) {

    .detail-v2 .article-itemt .article-thumb .thumb_img img {

        border-radius: 16px

    }



    .detail-v2__left, .detail-v2__right {

        display: none

    }

}



.box-comment {

    color: #0b0817;

    font-family: var(--font2);

    border-radius: 4px;

    padding: 16px;

    background: #fff;

    -webkit-backdrop-filter: blur(110px);

    backdrop-filter: blur(110px)

}



.box-comment .header-comment {

    margin-bottom: 15px;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;

    -ms-flex-pack: justify;

    justify-content: space-between

}



.box-comment .header-comment .title {

    font-size: 20px;

    font-weight: 700

}



.box-comment .header-comment .sort {

    position: relative;

    display: inline-block;

    font-size: 14px

}



.box-comment .header-comment .sort > a {

    color: #0b0817;

    font-weight: 500;

    padding-bottom: 20px

}



.box-comment .header-comment .sort > a svg {

    width: 12px;

    height: 12px;

    margin-left: 4px

}



.box-comment .header-comment .sort .list {

    position: absolute;

    z-index: 1;

    top: calc(100% + 20px);

    background: #42006b;

    box-shadow: 0 19px 34px rgba(0, 0, 0, .05);

    border-radius: 4px;

    padding: 5px 12px;

    width: 100px;

    opacity: 0;

    visibility: hidden;

    -webkit-transition-duration: 200ms;

    transition-duration: 200ms;

    -webkit-transition-property: opacity, top, visible;

    transition-property: opacity, top, visible;

    -webkit-transition-timing-function: cubic-bezier(.7, 1, .7, 1);

    transition-timing-function: cubic-bezier(.7, 1, .7, 1);

    z-index: 11;

    right: -16px

}



.box-comment .header-comment .sort .list a {

    color: #fff;

    display: block;

    margin: 4px 0;

    font-weight: 400

}



.box-comment .header-comment .sort .list a svg {

    display: none;

    width: 10px;

    height: 10px;

    margin-left: 4px

}



.box-comment .header-comment .sort .list a.active {

    font-weight: 500

}



.box-comment .header-comment .sort .list a.active svg {

    display: inline-block

}



.box-comment .header-comment .sort:hover .list {

    top: 100%;

    opacity: 1;

    visibility: visible

}



.box-comment .main-comnent {

    margin-bottom: 30px;

    max-height: 600px

}



.box-comment .main-comnent.scrollbar-inner {

    padding-right: 10px;

    margin-right: -10px

}



.box-comment .empty-comment {

    text-align: center;

    color: #7594b6;

    font-size: 14px;

    margin: 120px 0

}



.box-comment .item-comment {

    margin-bottom: 15px

}



.box-comment .item-comment .user_status {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    margin-bottom: 5px

}



.box-comment .item-comment .user_status .avata_coment {

    background: #4b80c9;

    border-radius: 50%;

    width: 32px;

    height: 32px;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    font-size: 14px;

    font-weight: 700;

    margin-right: 6px;

    color: #fff

}



.box-comment .item-comment .user_status .sum-user {

    color: #7594b6;

    font-size: 14px

}



.box-comment .item-comment .user_status .sum-user .time-com {

    margin-left: 4px

}



.box-comment .item-comment .content-comment p {

    margin-bottom: 12px;

    line-height: 1.4

}



.box-comment .item-comment .count-option {

    margin-bottom: 5px;

    font-size: 12px;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;

    -ms-flex-pack: justify;

    justify-content: space-between

}



.box-comment .item-comment .count-option a {

    color: #7594b6;

    margin-right: 15px

}



.box-comment .item-comment .count-option a:last-child {

    margin-right: 0

}



.box-comment .sub-comment {

    border-left: 2px dashed rgba(117, 148, 182, .4);

    padding-left: 16px;

    margin-top: 12px

}



.box-comment .connect-with {

    color: #7594b6;

    font-size: 12px;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    margin-bottom: 8px

}



.box-comment .connect-with span {

    margin-right: 15px

}



.box-comment .social {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center

}



.box-comment .social a {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    background: rgba(235, 237, 248, .1);

    border-radius: 50%;

    width: 24px;

    height: 24px;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    margin-right: 4px;

    color: #1977f3

}



.box-comment .social a svg {

    width: 12px;

    height: 12px

}



.box-comment .social a:last-child {

    margin-right: 0

}



.box-comment .box-area-input {

    position: relative;

    margin-bottom: 16px

}



.box-comment .box-area-input textarea {

    width: 100%;

    border: 1px solid #dbf1ff;

    resize: none;

    color: #0b0817;

    font-size: 12px;

    padding: 8px 70px 8px 10px;

    outline: 0

}



.box-comment .box-area-input textarea:focus::-webkit-input-placeholder {

    color: transparent

}



.box-comment .box-area-input textarea::-webkit-input-placeholder {

    color: #0b08176b

}



.box-comment .box-area-input textarea:-moz-placeholder {

    color: #0b08176b

}



.box-comment .box-area-input textarea::-moz-placeholder {

    color: #0b08176b

}



.box-comment .box-area-input textarea:-ms-input-placeholder {

    color: #0b08176b

}



.box-comment .box-area-input .flex {

    position: absolute;

    right: 4px;

    top: 4px

}



.box-comment .box-area-input .flex a {

    width: 28px;

    height: 28px;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: #7594b6;

    margin-left: 10px

}



.box-comment .box-area-input .flex .send {

    background: #ff7b00;

    border-radius: 6px;

    color: #fff

}



.box-comment .box-area-input .flex .send svg {

    width: 14px;

    height: 14px

}



.box-comment .form-default {

    color: #7594b6

}



.jump-top {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    position: relative;

    margin-bottom: 30px

}



.jump-top .swiper-container::before {

    content: "";

    background: -webkit-linear-gradient(right, #241b5a 0%, rgba(36, 27, 90, 0) 92.31%);

    background: linear-gradient(270deg, #ebeff4 0%, rgba(36, 27, 90, 0) 92.31%);

    width: 135px;

    height: 32px;

    position: absolute;

    right: 0;

    z-index: 2

}



.jump-top .title {

    font-weight: 700;

    color: #0b0817;

    width: 68px;

    padding-right: 10px;

    font-size: 14px

}



.jump-top .swiper-container {

    width: calc(100% - 68px)

}



.jump-top .article-itemt {

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    background: #f6f9ff;

    border-radius: 4px;

    padding: 4px 10px 4px 4px;

    width: auto;

    white-space: nowrap;

    margin-right: 8px;

    margin-bottom: 0

}



.jump-top .article-itemt .article-thumb {

    width: 23px

}



.jump-top .article-itemt .thumb_img {

    border-radius: 4px

}



.jump-top .article-itemt .article-content {

    width: calc(100% - 23px);

    padding-left: 8px

}



.jump-top .article-itemt .article-content .title_new {

    margin-bottom: 0;

    font-weight: 400;

    font-size: 14px;

    margin-top: 2px

}



.box-live {

    border-radius: 12px;

    background: #fff

}



.box-live .wrap {

    border-radius: 12px

}



.box-live .thumb_img {

    border-radius: 10px 10px 0 0

}



.box-live .info-video {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: justify;

    -webkit-justify-content: space-between;

    -ms-flex-pack: justify;

    justify-content: space-between;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    padding: 8px 16px

}



.box-live .info-video .user-status .article-itemt {

    margin-bottom: 0;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center

}



.box-live .info-video .user-status .article-itemt .thumb_img {

    border-radius: 10px

}



.box-live .info-video .user-status .article-itemt .article-thumb {

    width: 50px

}



.box-live .info-video .user-status .article-itemt .article-content {

    width: calc(100% - 50px);

    padding-left: 12px

}



.box-live .info-video .user-status .article-itemt .article-content .title_new {

    margin-bottom: 0

}



.box-live .info-video .user-status .article-itemt .list-star {

    color: #7594b6;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center

}



.box-live .info-video .user-status .article-itemt .list-star svg {

    color: #ffc107;

    width: 14px;

    height: 14px;

    margin-right: 3px

}



.box-live .info-video .user-status .article-itemt .list-star span {

    margin: 2px 0 0 4px

}



.box-live .info-video .user-status .article-itemt:hover {

    -webkit-transform: scale(1) translate(0px, 0px);

    -ms-transform: scale(1) translate(0px, 0px);

    transform: scale(1) translate(0px, 0px)

}



.box-live .info-video .controler {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center

}



.box-live .info-video .controler .item {

    color: #4f4f4f;

    margin-left: 15px;

    padding-left: 15px;

    text-align: center;

    font-size: 12px;

    position: relative

}



.box-live .info-video .controler .item svg {

    width: 20px;

    height: 20px

}



.box-live .info-video .controler .item.like {

    border-right: 1px solid rgba(162, 194, 238, .3);

    padding-right: 15px;

    margin-right: -15px

}



.box-live .info-video .controler .item .des {

    position: absolute;

    padding: 6px 15px 6px 16px;

    background: #024f7b;

    border-radius: 4px;

    text-align: center;

    font-size: 12px;

    color: #ebedf8;

    line-height: 1.2;

    bottom: -50px;

    left: -10px;

    display: none;

    white-space: nowrap

}



.box-live .info-video .controler .item .des::before {

    content: "";

    border-left: 10px solid transparent;

    border-right: 10px solid transparent;

    border-bottom: 10px solid #024f7b;

    position: absolute;

    top: -10px;

    left: 29px

}



.box-live .info-video .controler .item:hover .des {

    display: block

}



.box-live .bg-loading {

    background: url(images/graphics/bg-loading.jpg);

    background-size: contain;

    -o-object-position: top;

    object-position: top;

    -o-object-fit: cover;

    object-fit: cover;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    width: 100%;

    height: 100%

}



.box-live .bg-loading .loading {

    position: absolute;

    width: 480px;

    text-align: center;

    color: #fff;

    top: 50%;

    left: 50%;

    margin: -30px 0 0 -240px

}



.box-live .bg-loading .loading .text {

    font-size: 19px;

    font-weight: 700;

    text-transform: uppercase;

    margin-bottom: 10px

}



.box-live .bg-loading .loading .bar {

    border: 3px solid #af93ff;

    height: 18px;

    width: 100%;

    -webkit-transform: skew(-20deg);

    -ms-transform: skew(-20deg);

    transform: skew(-20deg);

    border-radius: 2px;

    position: relative

}



.box-live .bg-loading .loading .bar .percent {

    height: 14px;

    background: -webkit-linear-gradient(left, rgba(0, 102, 255, 0) 0%, #00c2ff 100%);

    background: linear-gradient(90deg, rgba(0, 102, 255, 0) 0%, #00c2ff 100%);

    -webkit-transition: .2s all;

    transition: .2s all

}



@media (max-width: 600px) {

    .box-live .bg-loading .loading {

        width: 60%;

        margin: 0;

        -webkit-transform: translate(-50%, -50%);

        -ms-transform: translate(-50%, -50%);

        transform: translate(-50%, -50%)

    }



    .box-live .bg-loading .loading .text {

        font-size: 16px

    }

}



@media (max-width: 600px) {

    .box-live {

        margin-bottom: 16px !important

    }



    .box-live .info-video {

        padding: 6px 10px

    }



    .box-live .info-video .controler .item {

        margin-left: 10px;

        padding-left: 10px

    }

}



.btn-like-mb {

    background: #024f7b;

    border-radius: 55px;

    width: 160px;

    margin: 0 auto;

    margin-bottom: 16px

}



.btn-like-mb .item {

    color: #a2c2ee;

    text-align: center;

    display: inline-block;

    margin: 10px 0;

    width: 48%

}



.btn-like-mb .item.like {

    border-right: 1px solid rgba(162, 194, 238, .3)

}



.content-detail {

    background: #fff;

    border-radius: 20px;

    padding: 40px;

    color: #0b0817a6;

    font-size: 16px;

    margin: 12px 0;

    word-break: break-word

}



.content-detail .box-comment {

    background: 0 0;

    padding: 0;

    font-size: 14px

}



.content-detail .box-comment .main-comnent {

    max-height: 100%

}



.content-detail .box-comment .form-default .form-control {

    background: 0 0;

    max-width: 400px

}



.content-detail .box-comment .form-default.box-area-input .form-control {

    background: #3b3468;

    max-width: 100%

}



.content-detail .title {

    font-size: 32px;

    font-weight: 700;

    color: #ebedf8

}



.content-detail .btn-default svg {

    margin-right: 4px;

    margin-left: 0

}



.content-detail p {

    margin-bottom: 24px;

    line-height: 1.6

}



.content-detail .jump-top {

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap

}



.content-detail .jump-top .article-itemt {

    white-space: inherit;

    margin-bottom: 8px;

    background: #e5fef0;

    border-bottom: 2px solid #42006b

}



@media (max-width: 1025px) {

    .content-detail {

        padding: 16px

    }

}



@media (max-width: 768px) {

    .content-detail .title {

        font-size: 24px

    }



    .content-detail p {

        margin-bottom: 15px

    }

}



@media (max-width: 576px) {

    .content-detail .noe-share .text-right {

        text-align: left !important

    }



    .content-detail .noe-share .col-sm-9 {

        -webkit-box-ordinal-group: 3;

        -webkit-order: 2;

        -ms-flex-order: 2;

        order: 2

    }



    .content-detail .noe-share .col-sm-3 {

        -webkit-box-ordinal-group: 2;

        -webkit-order: 1;

        -ms-flex-order: 1;

        order: 1

    }

}



#slide-nav2 {

    margin-bottom: 18px;

    position: relative

}



#slide-nav2 img {

    border-radius: 24px

}



#slide-nav2 .swiper-button-prev, #slide-nav2 .swiper-button-next {

    margin-top: -12px;

    font-size: 32px;

    color: #4b80c9;

    width: 32px;

    height: 32px

}



#slide-nav2 .swiper-button-prev svg, #slide-nav2 .swiper-button-next svg {

    width: 33px;

    height: 33px;

    fill: #4b80c9

}



@media (max-width: 600px) {

    #slide-nav2 {

        margin-top: -15px

    }



    #slide-nav2 .swiper-button-prev, #slide-nav2 .swiper-button-next {

        display: block

    }



    #slide-nav2 .swiper-button-prev {

        left: -10px

    }



    #slide-nav2 .swiper-button-next {

        right: -10px

    }

}



.box-featured-300 {

    border-radius: 4px;

    padding: 16px;

    background: #fff;

    -webkit-backdrop-filter: blur(110px);

    backdrop-filter: blur(110px)

}



.box-featured-300 .article-itemt {

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    margin-bottom: 12px

}



.box-featured-300 .article-itemt .article-thumb {

    width: 90px

}



.box-featured-300 .article-itemt .article-content {

    width: calc(100% - 90px)

}



.box-featured-300 .article-itemt img {

    border-radius: 4px

}



.box-featured-300 .article-itemt:last-child {

    margin-bottom: 0

}



.min-width {

    background: #fff;

    border-radius: 10px;

    max-width: 816px;

    padding: 40px;

    margin: 0 auto;

    font-size: 16px;

    color: #767e87

}



.min-width .title {

    font-size: 32px;

    font-weight: 700;

    color: #333

}



.min-width p {

    margin-bottom: 24px

}



.min-width .title-cae {

    color: #0b0817

}



.page-contact {

    margin-top: 40px;

    margin-bottom: 60px

}



.page-contact .notification {

    position: absolute;

    top: -40px;

    left: 50%;

    margin-left: -200px;

    width: 400px;

    background: #fff;

    box-shadow: 0 -6px 74px rgba(0, 0, 0, .15);

    border-radius: 10px;

    padding: 16px 24px;

    color: #767e87;

    font-size: 14px

}



.page-contact .notification .title {

    color: #2bbf78;

    font-size: 32px;

    font-weight: 700

}



.page-contact .notification .close {

    position: absolute;

    opacity: 1;

    color: #fff;

    font-family: -webkit-body;

    top: 10px;

    right: 12px

}



@media screen and (max-width: 600px) {

    .page-contact {

        margin-top: 10px

    }



    .page-contact .min-width {

        padding: 24px

    }



    .page-contact .notification {

        left: 0;

        margin-left: 0;

        right: 0;

        width: 100%

    }

}



.form-contact {

    position: relative

}



.form-contact .form-group {

    margin-bottom: 16px

}



.form-contact .form-control {

    height: 53px;

    border: 1px solid #e0e0e0;

    background: #fff;

    border-radius: 10px;

    font-size: 14px

}



.form-contact .btn-default {

    line-height: 48px;

    background: -webkit-linear-gradient(351.91deg, #7200b9 0%, #7200b9 89.61%);

    background: linear-gradient(98.09deg, #7200b9 0%, #420468 89.61%);

    border-radius: 10px

}



.form-contact .btn-default svg {

    margin: -3px 5px 0 0;

    width: 20px;

    height: 20px

}



.form-contact .btn-default.disable {

    opacity: .6

}



.page-about {

    margin: 0 -28px;

    margin-top: -80px

}



.page-about .title {

    font-weight: 700;

    font-size: 48px;

    color: #ebedf8;

    margin-bottom: 24px

}



@media (max-width: 1025px) {

    .page-about .title {

        font-size: 32px;

        margin-bottom: 12px

    }

}



.page-about .des {

    font-size: 16px;

    color: #7594b6

}



.page-about .box1 {

    background: url(images/graphics/bg-box1.jpg) no-repeat center bottom;

    background-size: cover;

    height: 1200px;

    text-align: center

}



.page-about .box1 .content {

    max-width: 816px;

    margin: 0 auto;

    color: #ebedf8;

    font-size: 16px;

    text-align: center;

    padding-top: 180px;

    margin-bottom: 120px;

    padding-left: 15px;

    padding-right: 15px

}



.page-about .box1 .title {

    color: #f2c94c

}



.page-about .box1 .title br {

    display: none

}



.page-about .box1 .des {

    color: #ebedf8

}



@media (max-width: 1025px) {

    .page-about .box1 {

        height: 800px

    }



    .page-about .box1 .title {

        font-size: 40px;

        margin-bottom: 24px

    }



    .page-about .box1 .content {

        padding-top: 120px;

        margin-bottom: 100px

    }

}



@media (max-width: 600px) {

    .page-about .box1 {

        height: 650px

    }



    .page-about .box1 .title br {

        display: block

    }

}



.page-about .box2 {

    background: url(images/graphics/bg-box2.jpg) no-repeat center top 180px;

    background-size: cover;

    color: #fff;

    padding: 60px 0;

    margin-top: -250px

}



@media (min-width: 1600px) {

    .page-about .box2 {

        background: url(images/graphics/bg-box2.jpg) no-repeat center top 60px;

        background-size: cover

    }

}



.page-about .box2 .row {

    max-width: 1000px;

    margin: 0 auto

}



.page-about .box2 .col-md-5 {

    padding-right: 50px

}



.page-about .box2 .item {

    background: #34167d;

    border-radius: 16px;

    padding: 25px;

    border: 4px solid #d972f2;

    margin-bottom: 16px

}



.page-about .box2 .item .number {

    color: #f2c94c;

    font-weight: 700;

    font-size: 40px;

    line-height: 1

}



.page-about .box2 .item .txt_20 {

    font-weight: 700

}



@media (max-width: 1025px) {

    .page-about .box2 .item {

        padding: 20px

    }



    .page-about .box2 .item .number {

        font-size: 30px

    }

}



@media (max-width: 767px) {

    .page-about .box2 .col-md-5 {

        padding: 0 15px;

        margin-bottom: 30px;

        text-align: center

    }

}



@media (max-width: 600px) {

    .page-about .box2 {

        margin-top: -120px

    }

}



@media (max-width: 414px) {

    .page-about .box2 {

        background: url(images/graphics/mbg-box2.png) no-repeat center top -20px;

        padding-top: 550px;

        background-size: contain;

        padding-bottom: 0;

        margin-top: -150px

    }

}



@media (max-width: 380px) {

    .page-about .box2 {

        background: url(images/graphics/mbg-box2.png) no-repeat center top -20px;

        padding-top: 480px;

        background-size: contain;

        margin-top: -150px

    }

}



.page-about picture img {

    width: 100%

}



.page-about .gradient-top::before {

    content: "";

    background: -webkit-linear-gradient(270.52deg, #024f7b -1.56%, rgba(20, 0, 71, 0) 99.55%);

    background: linear-gradient(179.48deg, #024f7b -1.56%, rgba(20, 0, 71, 0) 99.55%);

    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);

    -ms-transform: matrix(-1, 0, 0, 1, 0, 0);

    transform: matrix(-1, 0, 0, 1, 0, 0);

    position: absolute;

    width: 100%;

    height: 40%

}



.page-about .box3 {

    margin-top: -150px

}



.page-about .box3::before {

    -webkit-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    transform: rotate(180deg)

}



.page-about .box3 .min-width {

    max-width: 1000px;

    margin: 0 auto;

    background: 0 0;

    text-align: center;

    padding: 0 15px;

    position: relative;

    z-index: 1

}



.page-about .box3 .min-width .des {

    padding: 0 30px

}



.page-about .box3 .min-width .box-video {

    -webkit-filter: drop-shadow(0px 4px 34px rgba(66, 0, 255, 0.75));

    filter: drop-shadow(0px 4px 34px rgba(66, 0, 255, 0.75));

    border-radius: 16px;

    overflow: hidden;

    border: 2px solid #d972f2;

    background: #024f7b;

    padding: 4px

}



.page-about .box3 .min-width .box-video img, .page-about .box3 .min-width .box-video iframe, .page-about .box3 .min-width .box-video video {

    border-radius: 16px;

    overflow: hidden;

    width: 100%

}



@media (max-width: 767px) {

    .page-about .box3 .min-width .des {

        padding: 0

    }

}



.page-about .box4 {

    background: #130047;

    padding-bottom: 150px

}



.page-about .box4 .item {

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    margin-bottom: -50px

}



.page-about .box4 .item:nth-child(1) {

    padding-left: 160px;

    padding-left: calc((100% - 970px) / 2)

}



.page-about .box4 .item:nth-child(1) .content {

    width: 45%

}



.page-about .box4 .item:nth-child(1) .img {

    width: 55%

}



.page-about .box4 .item:nth-child(2) {

    padding-right: 160px;

    padding-right: calc((100% - 970px) / 2)

}



.page-about .box4 .item:nth-child(2) .content {

    width: 45%;

    -webkit-box-ordinal-group: 3;

    -webkit-order: 2;

    -ms-flex-order: 2;

    order: 2

}



.page-about .box4 .item:nth-child(2) .img {

    width: 55%;

    -webkit-box-ordinal-group: 2;

    -webkit-order: 1;

    -ms-flex-order: 1;

    order: 1

}



@media (max-width: 767px) {

    .page-about .box4 {

        padding: 0 15px;

        padding-bottom: 100px

    }



    .page-about .box4 .item {

        -webkit-flex-wrap: wrap;

        -ms-flex-wrap: wrap;

        flex-wrap: wrap;

        margin-bottom: 0;

        text-align: center

    }



    .page-about .box4 .item .img {

        margin: 0 -15px;

        width: calc(100% + 30px) !important

    }



    .page-about .box4 .item .img img {

        width: 100%

    }



    .page-about .box4 .item:nth-child(1) {

        padding-left: 0

    }



    .page-about .box4 .item:nth-child(1) .content {

        width: 100%;

        -webkit-box-ordinal-group: 3;

        -webkit-order: 2;

        -ms-flex-order: 2;

        order: 2

    }



    .page-about .box4 .item:nth-child(1) .img {

        width: 100%;

        -webkit-box-ordinal-group: 2;

        -webkit-order: 1;

        -ms-flex-order: 1;

        order: 1

    }



    .page-about .box4 .item:nth-child(2) {

        padding-right: 0

    }



    .page-about .box4 .item:nth-child(2) .content {

        width: 100%;

        -webkit-box-ordinal-group: 3;

        -webkit-order: 2;

        -ms-flex-order: 2;

        order: 2

    }



    .page-about .box4 .item:nth-child(2) .img {

        width: 100%;

        -webkit-box-ordinal-group: 2;

        -webkit-order: 1;

        -ms-flex-order: 1;

        order: 1

    }

}



.page-about .box5 {

    background: url(images/graphics/bg-box5.png) no-repeat center;

    background-size: cover;

    height: 700px

}



.page-about .box5::before {

    content: "";

    background: -webkit-linear-gradient(top, #024f7b 0%, rgba(20, 0, 71, 0) 100%);

    background: linear-gradient(180deg, #024f7b 0%, rgba(20, 0, 71, 0) 100%);

    position: absolute;

    width: 100%;

    height: 80%;

    top: 0

}



.page-about .box5 .min-width {

    padding: 0 15px;

    background: 0 0;

    text-align: center;

    position: relative;

    z-index: 1

}



.page-about .box5 .send-email {

    max-width: 509px;

    margin: 0 auto

}



.page-about .box5 .send-email .form-group {

    position: relative

}



.page-about .box5 .send-email .form-group .form-control {

    background: #fff;

    border-radius: 52px;

    height: 50px;

    color: #7594b6;

    font-size: 16px;

    padding: 5px 160px 5px 20px

}



.page-about .box5 .send-email .form-group .form-control::-webkit-input-placeholder {

    color: #7594b6

}



.page-about .box5 .send-email .form-group .form-control:-moz-placeholder {

    color: #7594b6

}



.page-about .box5 .send-email .form-group .form-control::-moz-placeholder {

    color: #7594b6

}



.page-about .box5 .send-email .form-group .form-control:-ms-input-placeholder {

    color: #7594b6

}



.page-about .box5 .send-email .form-group .btn {

    position: absolute;

    right: 4px;

    top: 4px;

    background: #ff7b00;

    border-radius: 28px;

    font-weight: 500;

    font-size: 14px;

    height: 42px;

    padding: 0 40px;

    color: #fff

}



@media (max-width: 600px) {

    .page-about {

        margin: 0 -15px;

        margin-top: -80px

    }

}



@media (min-width: 1200px) {

    .container {

        max-width: 1230px

    }

}



.hidden-pc {

    display: none

}



@media (max-width: 1366px) {

    .mb80 {

        margin-bottom: 60px

    }



    .buid-top {

        max-height: 432px

    }

}



@media (max-width: 1200px) {

    .overflow {

        overflow: hidden

    }



    .title-cate {

        font-size: 26px

    }

}



@media (max-width: 991px) {

    .overlay {

        display: none

    }



    .box_stream {

        width: 100%;

        padding-right: 0

    }



    .title-cate {

        font-size: 24px;

        margin-bottom: 15px !important

    }



    .title-cate.mb40 {

        margin-bottom: 15px !important

    }



    .padding_40 {

        padding: 20px 0

    }



    .line-bottom.mb40 {

        margin-bottom: 20px !important

    }

}



@media (max-width: 576px) {

    body {

        background: #ebeff4

    }



    .hidden-mb {

        display: none

    }



    .hidden-pc {

        display: block

    }



    .btn-dk .txt_20 {

        width: 100%;

        margin: 0 auto 10px !important;

        text-align: center

    }



    .detail_tin .title-detail {

        font-size: 20px

    }



    .detail_tin .price-all .all {

        font-size: 24px

    }

}



@media (max-width: 375px) {

    .title-cate {

        font-size: 22px

    }

}



.content-detail a {

    color: #126c57 !important

}



.controler span {

    cursor: pointer

}



.popup {

    position: fixed;

    left: 50%

}



.popup.show {

    top: 50%;

    opacity: 1;

    pointer-events: auto;

    transform: translate(-50%, -50%) scale(1);

    transition: top 0 0 ease-in-out, opacity .2s 0 ease-in-out, transform .2s 0 ease-in-out

}



.popup {

    z-index: 99

}



.popup {

    border: 1px solid #ebedf9;

    background: #42006b;

    color: #fff;

    font-family: var(--font1);

    padding: 25px;

    border-radius: 15px;

    top: -150%;

    max-width: 380px;

    width: 100%;

    opacity: 0;

    pointer-events: none;

    box-shadow: 0 10px 15px rgb(0 0 0/10%);

    transform: translate(-50%, -50%) scale(1.2);

    transition: top 0 .2s ease-in-out, opacity .2s 0 ease-in-out, transform .2s 0 ease-in-out

}



.popup {

    z-index: 99

}



.popup.show {

    top: 50%;

    opacity: 1;

    pointer-events: auto;

    transform: translate(-50%, -50%) scale(1);

    transition: top 0 0 ease-in-out, opacity .2s 0 ease-in-out, transform .2s 0 ease-in-out

}



.popup header {

    padding-bottom: 15px;

    border-bottom: 1px solid #ebedf9

}



.popup :is(header,.icons,.field) {

    display: flex;

    align-items: center;

    justify-content: space-between

}



header span {

    font-size: 21px;

    font-weight: 600

}



.close {

    float: right;

    font-size: 1.5rem;

    font-weight: 700;

    line-height: 1;

    color: #000;

    text-shadow: 0 1px 0 #fff;

    opacity: .5

}



header .close, .icons a {

    display: flex;

    align-items: center;

    border-radius: 50%;

    justify-content: center;

    transition: all .3s ease-in-out

}



header .close {

    color: #fff;

    font-size: 17px;

    background: #879ba9;

    height: 33px;

    width: 33px;

    cursor: pointer

}



.popup .content {

    margin: 20px 0

}



.content p {

    font-size: 16px

}



.popup :is(header,.icons,.field) {

    display: flex;

    align-items: center;

    justify-content: space-between

}



.popup .icons {

    margin: 15px 0 20px

}



.popup .icons {

    padding: 0

}



header .close, .icons a {

    display: flex;

    align-items: center;

    border-radius: 50%;

    justify-content: center;

    transition: all .3s ease-in-out

}



.content .icons a {

    height: 50px;

    width: 50px;

    font-size: 20px;

    text-decoration: none;

    border: 1px solid transparent

}



.icons a:nth-child(1) {

    color: #1877f2;

    border-color: #b7d4fb

}



.icons a:nth-child(1):hover {

    background: #1877f2

}



.icons a:nth-child(2) {

    color: #46c1f6;

    border-color: #b6e7fc

}



.icons a:nth-child(2):hover {

    background: #46c1f6

}



.icons a:nth-child(3) {

    color: #25d366;

    border-color: #bef4d2

}



.icons a:nth-child(3):hover {

    background: #25d366

}



.icons a:nth-child(4) {

    color: #08c;

    border-color: #b3e6ff

}



.icons a:nth-child(4):hover {

    background: #08c

}



.icons a:hover {

    color: #fff;

    border-color: transparent

}



.icons a i {

    transition: transform .3s ease-in-out

}



.content .field {

    margin: 12px 0 -5px;

    height: 45px;

    border-radius: 4px;

    padding: 0 5px;

    border: 1px solid #e1e1e1

}



.field i {

    width: 50px;

    font-size: 18px;

    text-align: center

}



.field input {

    width: 100%;

    height: 100%;

    border: none;

    outline: none;

    font-size: 15px

}



[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {

    cursor: pointer

}



.field button {

    color: #fff;

    padding: 11px 15px;

    background: linear-gradient(45deg, #404451 0, #404451 100%);

    margin-right: -7px

}



span.count {

    position: absolute;

    right: -9px;

    top: -6px;

    background: #ff7b00;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    font-size: 12px;

    text-align: center;

    line-height: 18px;

    color: #fff

}



#recents_count {

    display: none

}



.slide-featured .swiper-controler {

    display: none

}



.slide-featured {

    display: none;

    background: #f6f9ff;

    padding: 16px;

    border-radius: 4px

}



.search-results .title {

    font-weight: 700;

    color: #0b0817;

    width: 68px;

    padding-right: 10px;

    font-size: 14px

}



.search-results .article-itemt {

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    background: #f6f9ff;

    border-radius: 4px;

    padding: 4px 10px 4px 4px;

    width: auto;

    white-space: nowrap;

    margin-right: 8px;

    margin-bottom: 0

}



.search-results .article-itemt .article-thumb {

    width: 23px

}



.search-results .article-itemt .thumb_img {

    border-radius: 4px

}



.search-results .article-itemt .article-content {

    width: calc(100% - 23px);

    padding-left: 8px

}



.search-results .article-itemt .article-content .title_new {

    margin-bottom: 0;

    font-weight: 400;

    font-size: 14px;

    margin-top: 2px

}



.search-results {

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    position: relative;

    margin-bottom: 30px

}



.content-detail .title h1 {

    font-size: 32px;

    font-weight: 700;

    color: #333

}



.item-comment .txt-name {

    max-width: 50px

}



.box-comment .box-area-input .flex span {

    width: 28px;

    height: 28px;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: #7594b6;

    margin-left: 10px;

    cursor: pointer

}



.form-default .error {

    color: #ff0e00;

    font-size: 13px;

    border: 1px solid #ff0e00 !important

}



span.disabled {

    background: grey !important

}



.box-300-flex__left {

    width: calc(100% - 160px)

}



.box-300-flex__right {

    width: 160px

}



#sort_text {

    text-transform: capitalize

}



@font-face {

    font-family: fnafsb;

    src: url(../fonts/fnafsb.eot?mtswob);

    src: url(../fonts/fnafsb.eot?mtswob#iefix) format("embedded-opentype"), url(../fonts/fnafsb.ttf?mtswob) format("truetype"), url(../fonts/fnafsb.woff?mtswob) format("woff"), url(../fonts/fnafsb.svg?mtswob#fnafsb) format("svg");

    font-weight: 400;

    font-style: normal;

    font-display: block

}



[class^=icon-], [class*=" icon-"] {

    font-family: fnafsb !important;

    speak: never;

    font-style: normal;

    font-weight: 400;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale

}



.icon-fnafsb:before {

    content: "\e900";

    font-size: 40px

}



.min-h-100 {

    min-height: 100vh

}



.thumb_img:hover .game-title {

    opacity: 1

}



.game-title {

    overflow: hidden;

    margin: 0;

    color: #fff;

    text-align: center;

    margin-bottom: 0;

    opacity: 0;

    font-weight: 700;

    position: absolute;

    width: 100%;

    bottom: 0;

    top: 0;

    left: 0;

    background: #0000009e;

    box-sizing: border-box;

    text-transform: capitalize;

    font-size: 14px;

    border-radius: 24px

}



.game-title span {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%)

}



.mw-1024 {

    max-width: 1024px

}



.logo-header {

    padding: 12px 32px

}



.logo-header img {

    height: 40px

}



.menu-header .menu-header-container {

    gap: 12px

}



.p-relative {

    position: relative

}



.text-overflow {

    display: -webkit-box;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis

}



.mySwiper .swiper-slide-thumb-active img {

    border: 2px solid #ffa303;

    -webkit-filter: grayscale(0%);

    filter: grayscale(0%);

    opacity: 1

}



.games-more {

    display: flex;

    justify-content: center;

    align-items: flex-start;

    gap: 24px

}



.game-home {

    width: 83%

}



.filter-games-more {

    width: 17%

}



.sort-by-game {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    flex-direction: column;

    gap: 8px

}



.sort-by-game .sort-item.active {

    background: linear-gradient(130.8deg, #42006b -7.98%, #000000 97.23%);

    box-shadow: 0 3px #eee;

    color: #fff

}



.buid-top__right .title-new {

    color: #0b0817;

    font-size: 24px;

    margin-bottom: 10px;

    font-weight: 700

}



.sort-by-game .sort-item {

    padding: 16px;

    font-size: 14px;

    width: 100%;

    background: #fff;

    border-radius: 8px;

    border: 0;

    text-decoration: none

}



#nav-icon {

    width: 32px;

    height: 32px;

    position: relative;

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

    -webkit-transition: .5s ease-in-out;

    -moz-transition: .5s ease-in-out;

    -o-transition: .5s ease-in-out;

    transition: .5s ease-in-out;

    cursor: pointer

}



#nav-icon span {

    display: block;

    position: absolute;

    height: 4px;

    width: 100%;

    background: #4d85b6;

    border-radius: 9px;

    opacity: 1;

    left: 0;

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

    -webkit-transition: .25s ease-in-out;

    -moz-transition: .25s ease-in-out;

    -o-transition: .25s ease-in-out;

    transition: .25s ease-in-out

}



nav-icon span:nth-child(1) {

    top: 0

}



#nav-icon span:nth-child(2) {

    top: 12px

}



#nav-icon span:nth-child(3) {

    top: 24px

}



#nav-icon.open span:nth-child(1) {

    top: 16px;

    -webkit-transform: rotate(135deg);

    -moz-transform: rotate(135deg);

    -o-transform: rotate(135deg);

    transform: rotate(135deg)

}



#nav-icon.open span:nth-child(2) {

    opacity: 0;

    left: -60px

}



#nav-icon.open span:nth-child(3) {

    top: 16px;

    -webkit-transform: rotate(-135deg);

    -moz-transform: rotate(-135deg);

    -o-transform: rotate(-135deg);

    transform: rotate(-135deg)

}



.scroll-bar-hot {

    /* max-height: 320px; */

    height: 100%;

    overflow-y: scroll;

    overflow-x: hidden;

    padding-right: 8px

}



.scroll-bar-hot::-webkit-scrollbar {

    width: 6px

}



.scroll-bar-hot::-webkit-scrollbar-thumb {

    border-radius: 10px;

    background-color: #42006b80

}



.scroll-bar-hot::-webkit-scrollbar-track {

    border-radius: 10px

}



.breadcrumbs {

    display: flex;

    align-items: center;

    white-space: nowrap;

    font-weight: 700;

    margin: 0 0 .625rem;

    max-width: 100%;

    overflow-x: auto

}



.breadcrumbs ul {

    display: flex;

    align-items: flex-start;

    flex-wrap: nowrap;

    justify-content: flex-start;

    margin: 0 0 .625rem

}



.breadcrumbs li {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px

}



.breadcrumbs li:not(.is-active):first-child a {

    margin-left: 0;

    padding-left: 0

}



.breadcrumbs a, .breadcrumb label {

    display: flex;

    margin: 0 1rem;

    color: #0d1923;

    text-transform: capitalize

}



@media screen and (min-width: 1024px) {

    a.has-hover {

        position: relative

    }

}



.breadcrumbs a, .breadcrumbs label {

    display: flex;

    margin: 0 1rem;

    color: #7594b6;

    text-transform: capitalize

}



.breadcrumbs a:hover {

    -webkit-transform: scale(1.01) translate(0px, -2px);

    -ms-transform: scale(1.01) translate(0px, -2px);

    transform: scale(1.01) translate(0px, -2px);

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    -webkit-transition-duration: .3s;

    transition-duration: .3s

}



.breadcrumbs a .icon {

    align-items: center;

    display: inline-flex;

    justify-content: center;

    height: 1.5rem;

    width: 1.5rem

}



.icon svg {

    fill: #5392e5

}



svg:not(:root).svg-inline--fa {

    overflow: visible

}



.icon svg {

    vertical-align: -.1rem

}



.svg-inline--fa.fa-w-10 {

    width: .625em

}



.breadcrumbs li > .icon {

    position: absolute;

    top: 0;

    left: -.7rem;

    font-size: .7rem;

    color: #7594b6;

    align-items: center;

    display: inline-flex;

    justify-content: center;

    height: 1.5rem;

    width: 1.5rem

}



.svg-inline--fa.fa-w-18 {

    width: 1.125em

}



.content-detail .jump-top {

    margin-bottom: 0

}



.slide-show .swiper-container-horizontal > .swiper-pagination-bullets {

    bottom: 16px;

    right: 16px;

    left: unset;

    width: auto

}



.btn-scroll-top.show {

    right: 1.25rem;

    opacity: 1

}



.btn-scroll-top {

    display: block;

    position: fixed;

    right: -4.125rem;

    bottom: 1.25rem;

    width: 2.75rem;

    height: 2.75rem;

    transition: right 400ms cubic-bezier(.68, -.55, .265, 1.55), opacity .3s, background-color .25s ease-in-out;

    border-radius: .75rem;

    background-color: #ff8d00;

    color: #fff;

    text-align: center;

    opacity: 0;

    z-index: 1025

}



.btn-scroll-top > .btn-scroll-top-icon {

    font-size: 1.125rem;

    font-weight: 700;

    line-height: 2.625rem

}



.list-tags {

    box-sizing: border-box;

    display: flex;

    flex-flow: row wrap;

    width: 100%;

    -webkit-box-pack: center;

    justify-content: center;

    margin-top: 16px;

    overflow: initial

}



.tags-item.full {

    box-sizing: border-box;

    margin: 0;

    -webkit-flex-direction: row;

    -ms-flex-direction: row;

    flex-direction: row

}



.tags-item.full a {

    text-decoration: none;

    color: #8667ff;

    font-weight: 700

}



.tags-item-root {

    box-shadow: 0 3px 5px -1px rgb(0 0 0/20%), 0 6px 10px 0 rgb(0 0 0/14%), 0 1px 18px 0 rgb(0 0 0/12%);

    background-image: linear-gradient(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.11));

    border-radius: 6px;

    position: relative;

    width: 178px;

    margin: 4px;

    height: 48px;

    background-color: #42006b;

    color: #fff;

    -webkit-transition: background-color .2s ease-in;

    transition: background-color .2s ease-in;

    font-weight: 700

}



.tags-item-container {

    box-sizing: border-box;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-flex-wrap: wrap;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    width: 100%;

    -webkit-flex-direction: row;

    -ms-flex-direction: row;

    flex-direction: row;

    height: 100%

}



.tags-item-thumb {

    box-sizing: border-box;

    margin: 0;

    -webkit-flex-direction: row;

    -ms-flex-direction: row;

    flex-direction: row;

    height: 100%

}



.tags-item-thumb img {

    height: 48px;

    width: 65px;

    object-fit: cover;

    border-top-left-radius: 5px;

    border-bottom-left-radius: 5px

}



.tags-item-content {

    box-sizing: border-box;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-flex-wrap: wrap;

    -webkit-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    width: 100%;

    margin: 0;

    -webkit-flex-direction: row;

    -ms-flex-direction: row;

    flex-direction: row;

    -webkit-align-items: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    width: 113px;

    text-align: center;

    padding: 4px

}



#infscr-loading {

    flex: 1

}



#infscr-loading img {

    vertical-align: middle;

    width: 80px

}



#infscr-loading div {

    color: #fff

}



.search-btn .suggest-search {

    right: 0;

    left: 0;

    width: 105%;

    border-radius: unset;

    padding: 32px;

    top: 42px

}



.headerletters {

    width: 100%;

    margin: 12px 0

}



.headerletters ul.browsebyletter {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    gap: 8px;

    flex-flow: row wrap

}



.headerletters ul.browsebyletter li a {

    background: #fff !important;

    color: #8f4baa !important;

    font-size: 14px;

    text-decoration: none;

    padding: 4px 8px;

    border-radius: 4px

}



.mb-24 {

    margin-bottom: 24px

}



@media (max-width: 768px) {

    .slide-show .swiper-container-horizontal > .swiper-pagination-bullets {

        bottom: 26px

    }



    .games-more {

        flex-direction: column

    }



    .filter-games-more {

        width: 100%

    }



    .sort-by-game {

        flex-direction: row

    }



    .game-home {

        width: 100%

    }



    .sort-by-game a.sort-item.active {

        box-shadow: unset

    }



    .slide-show .article-itemt .article-content .tag {

        gap: 6px

    }



    .article-itemt .article-content .tag a {

        white-space: nowrap

    }

}

#nav-icon-id{width:32px;height:32px;position:relative;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer}
#nav-icon-id span{display:block;position:absolute;height:4px;width:100%;background:#4d85b6;border-radius:9px;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out}
#nav-icon-id span:nth-child(1){top:0}
#nav-icon-id span:nth-child(2){top:12px}
#nav-icon-id span:nth-child(3){top:24px}
#nav-icon-id.open span:nth-child(1){top:16px;-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg)}
#nav-icon-id.open span:nth-child(2){opacity:0;left:-60px}
#nav-icon-id.open span:nth-child(3){top:16px;-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg)}