@font-face {
    font-family: "Open Sans";
    src: url("../webfonts/OpenSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #f4e6bf;
    overflow: hidden;
}

body * {
    box-sizing: border-box;
    font-family: "Open Sans", system-ui, -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

a {
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.page {
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 2;
    max-height: 980px;
    min-height: 980px;
}

.container {
    width: 100%;
    max-width: 1400px;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.container-full {
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1627px;
    justify-content: center;
}

.container-max {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1920px;
    justify-content: center;
    position: relative;
}

.container > .title {
    left: 50%;
    transform: translateX(-50%);
}

#slideHomeMobile {
    display: none;
}

#root.subpage{
    margin: auto;
}

.icon-reset-password {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(../imgs/icons/reset-password.png) no-repeat 0 0 / 100% 100%;
}

.icon-logout {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url(../imgs/icons/logout.png) no-repeat 0 0 / 100% 100%;
}

/*******************************************HEADER*******************************************/

.logo {
    top: 52px;
    left: -260px;
    z-index: 3;
}

.logo-18::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 48%;
    transform: translateX(-50%);
    background: url(../imgs/page-1/18+.webp);
    width: 199px;
    height: 47px;
}

header {
    position: absolute;
    height: 88px;
    z-index: 3;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

header .top-nav-mobile {
    display: none;
}

header .main-nav {
    gap: 16px;
    padding-right: 5px;
}

header .main-nav .nav-item {
    display: block;
    width: 217px;
    height: 62px;
    background: url(../imgs/page-1/menu.webp) no-repeat;
    background-size: 500% 200%;
    will-change: transform;
}

header .main-nav li:nth-child(1) .nav-item {
    background-position: left top;
}
header .main-nav li:nth-child(2) .nav-item {
    background-position: -217px top;
}
header .main-nav li:nth-child(3) .nav-item {
    background-position: -434px top;
}
header .main-nav li:nth-child(4) .nav-item {
    background-position: -651px top;
}
header .main-nav li:nth-child(5) .nav-item {
    background-position: right top;
}

header .main-nav .nav-item:hover,
header .login:hover {
    background-position-y: bottom !important;
}

header .container {
    flex-direction: row;
}

header .login {
    width: 217px;
    height: 62px;
    cursor: pointer;
    position: absolute;
    right: -106px;
    top: 50%;
    transform: translate(0, -50%);
}

header .login .wrap-login .wrapper-btn-login {
    width: 100%;
    height: 100%;
    display: block;
}

header .login .wrap-login .wrapper-btn-login .btn-login {
    display: block;
    background: url(../imgs/btn-login.png) no-repeat 0 0 / 100% 200%;
    will-change: transform;
}

header .login .wrap-login .wrapper-btn-login .btn-login:hover {
    background-position: bottom;
}

header .login .wrap-login .user-info .dropdown-menu {
    background: #40351e;
    padding: 0;
    width: 266px;
    left: 50% !important;
    top: 64px !important;
    transform: translateX(-50%) !important;
    border-radius: 10px;
    overflow: hidden;
}

header .login .wrap-login .user-info .dropdown-menu li {
    height: 44px;
}

header .login .wrap-login .user-info .dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid #000;
}

header .login .wrap-login .user-info .dropdown-menu li a {
    color: #ffefad;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

header .login .wrap-login .user-info .dropdown-menu li:hover {
    background-color: #746037;
}

header .login .wrap-login .user-info .dropdown-menu li i {
    margin-right: 12px;
    font-size: 22px;
}

header .login .wrap-login .user-info .dropdown-menu li span {
    font-size: 18px;
}

header .login .wrap-login .user-info .dropdown-menu li .payment-group {
    gap: 10px;
}

header .login .wrap-login .user-info .dropdown-menu li .btn-link-payment {
    width: 75px;
    height: 32px;
    line-height: 32px;
    background: #d74132;
    border-radius: 8px;
}

header .login .wrap-login .user-info .dropdown-menu .payment-unit {
    width: 30px;
    height: 28px;
    background: url(../imgs/icons/kim-phieu.png) no-repeat 0 0 / 100% 100%;
}

header .login .wrap-login .user-info button {
    background: url(../imgs/btn-user-info.png) no-repeat 0 0 / 100%;
    border: none;
    outline: none;
    color: #fff;
    padding: 0 14px;
}

header .login .wrap-login .user-info .display-name {
    display: block;
    width: 150px;
    max-width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*******************************************MAIN*******************************************/

.bg-main {
    z-index: -999;
}

.bg-main .bg-1 {
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    will-change: transform;
}

.bg-main .bg-2 {
    left: 50%;
    transform: translateX(-50%);
    top: 422px;
    z-index: -98;
    z-index: 3;
    will-change: transform;
}

#fullpage {
    position: relative;
    overflow: hidden;
}

.bg-main .than-cong-bao {
    top: 257px;
    left: -324px;
    width: 795px;
    height: 1019px;
    background: url(../imgs/thancongbao.webp) no-repeat 0 0 / 100% 100%;
    z-index: 2;
    --x1: -4px;
    --y1: -20px;
    --x2: 6px;
    --y2: 18px;
    animation-duration: 2s;
}

.bg-main .natra {
    top: -110px;
    right: -405px;
    width: 1226px;
    height: 1404px;
    background: url(../imgs/natra.webp) no-repeat 0 0 / 100% 100%;
    z-index: 4;
    --x1: -6px;
    --y1: 12px;
    --x2: 12px;
    --y2: -16px;
    animation-duration: 1.7s;
    animation-delay: -1.4s;
}

.bg-main .natra,
.bg-main .than-cong-bao {
    animation-name: champFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    will-change: transform;
    user-select: none;
}


@keyframes champFloat {
    0% {
        transform: translate(var(--x1), var(--y1));
    }

    100% {
        transform: translate(var(--x2), var(--y2));
    }
}

/*******************************************PAGE 1*******************************************/
.page-1 {
    max-height: 1080px;
    min-height: 1080px;
}

.page-1 .btn-play-video {
    width: 306px;
    height: 303px;
    background: url(../imgs/page-1/btn-play-video.webp) no-repeat 0 0 / 100% 100%;
    position: absolute;
    top: 155px;
    left: 290px;
    cursor: pointer;
    animation: softZoom 0.5s ease-in-out infinite;
    z-index: 4;
}

@keyframes softZoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.page-1 .btn-actions {
    bottom: 186px;
    left: 50%;
    transform: translateX(-50%);
    gap: 10px;
    will-change: transform;
}

.page-1 .btn-actions > a:nth-child(1),
.page-1 .btn-actions > a:nth-child(2),
.content-layout-subpage .btn-actions > a:nth-child(1),
.content-layout-subpage .btn-actions > a:nth-child(2) {
    display: block;
    width: 174px;
    height: 241px;
    background: url(../imgs/page-1/btn-action.webp) no-repeat 0 0 / 200% 200%;
}

.page-1 .btn-actions > a:nth-child(1),
.content-layout-subpage .btn-actions > a:nth-child(1) {
    background: url(../imgs/btn-play-game.webp) no-repeat 0 0 / 100% 200%;
    background-position: left top;
}

.page-1 .btn-actions > a:nth-child(2),
.content-layout-subpage .btn-actions > a:nth-child(2) {
    background-position: right top;
}

.page-1 .btn-actions > a:nth-child(1):hover,
.page-1 .btn-actions > a:nth-child(2):hover,
.content-layout-subpage .btn-actions > a:nth-child(1):hover,
.content-layout-subpage .btn-actions > a:nth-child(2):hover {
    background-position-y: bottom;
}

.page-1 .btn-actions .qr-code,
.content-layout-subpage .btn-actions .qr-code {
    width: 174px;
    height: 241px;
    background: url(../imgs/page-1/btn-action-qr.webp) no-repeat 0 0 / 100% 100%;
}
.qr-code img {
    width: 130px;
    margin-top: 32px;
    margin-left: 22px;
}

.page-1 .btn-actions .game-actions,
.content-layout-subpage .btn-actions .game-actions {
    padding-top: 10px;
    gap: 10px;
}

.page-1 .btn-actions .game-actions a,
.content-layout-subpage .btn-actions .game-actions a {
    display: block;
    width: 211px;
    height: 46px;
    background: url(../imgs/page-1/btn-action-2.webp) no-repeat;
    background-size: 200% 400%;
}

.page-1 .btn-actions .game-actions a.google-play,
.content-layout-subpage .btn-actions .game-actions a.google-play {
    background-position: left top;
}

.page-1 .btn-actions .game-actions a.app-store,
.content-layout-subpage .btn-actions .game-actions a.app-store {
    background-position: left -46px;
}

.page-1 .btn-actions .game-actions a.download,
.content-layout-subpage .btn-actions .game-actions a.download {
    background-position: left -92px;
}

.page-1 .btn-actions .game-actions a.gift-code,
.content-layout-subpage .btn-actions .game-actions a.gift-code {
    background: url(../imgs/btn-link-giftcode.webp) no-repeat 0 0 / 200% 100%;
    background-position: left;
}

.page-1 .btn-actions .game-actions a:hover,
.content-layout-subpage .btn-actions .game-actions a:hover {
    background-position-x: right !important;
}

.floating {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-1 .btn-actions > * {
    opacity: 0;
    transform: translateY(-40px);
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.page-1.fade-down .btn-actions > * {
    opacity: 1;
    transform: translateY(0);
}

.page-1.fade-down .btn-actions > :nth-child(2) {
    transition-delay: 0.2s;
}

.page-1.fade-down .btn-actions > :nth-child(3) {
    transition-delay: 0.4s;
}

.page-1.fade-down .btn-actions > :nth-child(4) {
    transition-delay: 0.6s;
}

/*******************************************PAGE 2*******************************************/

.page-2 .title {
    top: -17px;
}

.page-2 .container {
    padding: 57px 0 0 146px;
}

.page-2 .content {
    width: 1467px;
    height: 663px;
    background: url(../imgs/page-2/bg-content.webp) no-repeat 0 0 / 100% 100%;
}

#slideHome {
    min-width: 473px;
    max-width: 473px;
    padding: 60px 12px 73px 123px;
}

#slide-pc {
    background: url(../imgs/page-2/bg-slide.webp) no-repeat 0 0 / 100% 100%;
}

.page-2 .content .tabs-post {
    width: 740px;
    padding: 66px 0 84px 0;
}

.page-2 .content .tabs-post .nav-tabs {
    height: 40px;
    align-items: center;
}

.page-2 .content .tabs-post .nav-tabs .nav-link {
    width: 138px;
    height: 26px;
    background: url(../imgs/page-2/title-tab-content-2.webp) no-repeat;
    background-size: 400% 200%;
}

#nav-tin-tuc {
    background-position: -22px top;
    width: 102px;
    background-size: auto;
}

#nav-su-kien {
    width: 118px;
    background-position: -153px top;
    background-size: auto;
}

#nav-huong-dan {
    background-position: -276px 2px;
}

#nav-dac-sac {
    background-position: right top;
}

.page-2 .content .tabs-post .nav-tabs .nav-link.active {
    background-position-y: bottom !important;
}

#nav-huong-dan.active {
    background-position-y: -24px !important;
}

.page-2 .content .tabs-post .nav-link {
    width: 138px;
    padding: 0;
    border: none !important;
    position: relative;
    font-size: 24px;
    text-transform: uppercase;
    color: #9b8765;
    background: transparent;
    font-weight: bold;
}

.page-2 .content .tabs-post .nav-link.active::before,
.subpage-container.post .listNews .action a.active::before {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translate(-50%, 100%);
    width: 92px;
    height: 10px;
    background: url(../imgs/page-2/active-title-tab-content.webp) no-repeat 0 0 / 100% 100%;
}

.page-2 .content .tabs-post .nav-link.btn-tin-tuc.active::before {
    left: 0;
    transform: translate(0, 100%);
}

.page-2 .content .tabs-post .nav-link.btn-su-kien.active::before {
    left: 46%;
}

#nav-tab {
    margin-bottom: 28px;
    padding-left: 12px;
    position: relative;
}

#nav-tab::before {
    content: "";
    position: absolute;
    width: 97%;
    height: 2%;
    background: #9b8765;
    left: 12px;
    bottom: 0;
    transform: translateY(100%);
}

.page-2 .tab-content ul {
    min-height: 390px;
    max-height: 390px;
    overflow-y: auto;
}

.page-2 .tab-content li.tab-item {
    height: 46px;
    padding: 0 12px 0 43px;
    position: relative;
    margin-bottom: 1px;
}

.page-2 .tab-content li.tab-item::after {
    content: "";
    width: 97%;
    height: 1px;
    position: absolute;
    left: 12px;
    background: #a79e97;
}

.page-2 .tab-content li.tab-item::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 23px;
    top: 50%;
    transform: translateY(-50%);
    left: 13px;
    background: url(../imgs/page-2/icon-list-item-2.webp) no-repeat 0 0 / 100% 100%;
}

.page-2 .tab-content li.tab-item a,
.page-2 .tab-content li.tab-item h6 {
    color: #59483c;
    font-size: 18px;
    margin: 0;
    font-weight: bold;
}

.page-2 .tab-content .tab-item.item-hot {
    color: #fff;
    background: url(../imgs/page-2/bg-post-item.webp) no-repeat 0 0 / 100% 200%;
}

.page-2 .tab-content .tab-item.item-hot h6,
.page-2 .tab-content .tab-item.item-hot a {
    color: #fff;
}

.page-2 .tab-content .tab-item:hover {
    background-color: #dbd6cc;
}

.page-2 .tab-content .search-lite {
    width: 407px;
    height: 53px;
    background: url(../imgs/page-2/bg-search-2.webp) no-repeat 0 0 / 100% 100%;
    margin-left: 14px;
}

.page-2 .tab-content .action-group .more {
    display: block;
    width: 200px;
    height: 53;
    background: url(../imgs/page-2/btn-more.webp) no-repeat 0 0 / 100% 200%;
    margin-left: 13px;
}

.page-2 .tab-content .action-group .more:hover {
    background-position: bottom;
}

.page-2 .tab-content .search-lite input {
    background: transparent;
    border: none !important;
    outline: none !important;
    width: 100%;
    height: 100%;
    font-size: 20px;
    line-height: 53px;
    padding-left: 58px;
    padding-top: 2px;
    color: #545454;
}

.page-2 .tab-content .search-lite input::placeholder {
    font-size: 20px;
    line-height: 53px;
    color: #545454;
}

.page-2 .tab-content .search-lite button {
    height: 100%;
    border: none !important;
    outline: none !important;
    left: 0;
    width: 52px;
    background: transparent;
}

#slide-pc .carousel-indicators button {
    width: 34px;
    height: 35px;
    background: url(../imgs/page-2/btn-carousel.webp) no-repeat;
    background-size: 100% 200%;
    box-sizing: border-box;
    border: none;
    outline: none;
    opacity: unset;
    background-position: bottom;
}

#slide-pc .carousel-indicators button:hover,
#slide-pc .carousel-indicators button.active {
    background-position: top;
}

#slide-pc .carousel-item a {
    padding: 16px;
    padding-left: 23px;
}

#slide-pc .carousel-item a span {
    width: 227px;
    height: 52px;
    background: url(../imgs/page-2/title-banner.webp) no-repeat 0 0 / 100% 100%;
}

#slide-pc .carousel-indicators {
    bottom: 10px;
}

.page-2 .container {
    opacity: 0;
    transform: translateY(-40px);
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.page-2.fade-down .container {
    opacity: 1;
    transition-delay: 0.2s;
    transform: unset;
}

/*******************************************PAGE 3*******************************************/

.page-3 .title {
    top: -35px;
}

#tab-touches {
    left: 49px;
    top: 193px;
    z-index: 3;
    opacity: 0;
    transform: translateX(-48px);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
    border: none;
}

#tab-touches .nav-item button {
    width: 85px;
    height: 84px;
    background: url(../imgs/page-3/btn-tab.webp) no-repeat;
    background-size: 200% 600%;
    cursor: pointer;
    border: none;
    outline: none;
    will-change: transform;
}

#tab-touches .nav-item:not(:first-child) {
    transform: translateY(-1px);
}

#tab-touches .nav-item:nth-child(1) button {
    background-position: left top;
    position: relative;
}

#tab-touches .nav-item:nth-child(1)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    background: url(../imgs/page-3/layer-menu.webp) no-repeat 0 0 / 100% 100%;
    width: 37px;
    height: 179px;
}

#tab-touches .nav-item:nth-child(2) button {
    background-position: left -84px;
}

#tab-touches .nav-item:nth-child(3) button {
    background-position: left -168px;
}

#tab-touches .nav-item:nth-child(4) button {
    background-position: left -252px;
}

#tab-touches .nav-item:nth-child(5) button {
    background-position: left -336px;
}

#tab-touches .nav-item:nth-child(6) button {
    background-position: left bottom;
    position: relative;
}

#tab-touches .nav-item:nth-child(6)::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%) scaleY(-1);
    background: url(../imgs/page-3/layer-menu.webp) no-repeat 0 0 / 100% 100%;
    width: 37px;
    height: 179px;
}

#tab-touches .nav-item:hover button,
#tab-touches .nav-item button.active {
    background-position-x: right !important;
}

#tab-touches .nav-item button::after {
    content: "";
    position: absolute;
    width: 109px;
    height: 30px;
    top: 50%;
    right: -10px;
    transform: translate(100%, -50%);
}

#tab-touches .nav-item:nth-child(1) button::after {
    background: url(../imgs/page-3/text-thuy.webp) no-repeat;
    background-size: 100% 200%;
}

#tab-touches .nav-item:nth-child(2) button::after {
    background: url(../imgs/page-3/text-hoa.webp) no-repeat;
    background-size: 100% 200%;
}

#tab-touches .nav-item:nth-child(3) button::after {
    background: url(../imgs/page-3/text-dia.webp) no-repeat;
    background-size: 100% 200%;
}

#tab-touches .nav-item:nth-child(4) button::after {
    background: url(../imgs/page-3/text-moc.webp) no-repeat;
    background-size: 100% 200%;
}

#tab-touches .nav-item:nth-child(5) button::after {
    background: url(../imgs/page-3/text-am.webp) no-repeat;
    background-size: 100% 200%;
}

#tab-touches .nav-item:nth-child(6) button::after {
    background: url(../imgs/page-3/text-duong.webp) no-repeat;
    background-size: 100% 200%;
}

#tab-touches .nav-item:hover button::after,
#tab-touches .nav-item button.active::after {
    background-position: bottom;
}

.page-3 .page-3-content {
    display: none;
}

.page-3 .page-3-content.active {
    display: block;
}

.page-3 .slide-hero {
    position: relative;
    will-change: transform;
}

.page-3 .slide-hero .hero-content {
    height: 100%;
    padding-top: 144px;
    display: none;
}

.page-3 .slide-hero .hero-content.active {
    display: flex;
}

.page-3 .slide-hero .hero-content .wrap-img {
    width: 932px;
    height: 791px;
    position: absolute;
    left: 134px;
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#tab-thuy.fade.show {
    opacity: 0;
    animation: heroFadeIn 1s ease forwards;
}
@keyframes heroFadeIn {
    to {
        opacity: 1;
    }
}
.page-3 .slide-hero .hero-content .wrap-img img {
}

.page-3 .slide-hero .hero-content .description {
    width: 447px;
    padding: 65px 20px 20px 15px;
    opacity: 0;
    transform: translateX(48px);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;

}

.page-3 .slide-hero .hero-content .description .title,
#popup-text .content .title {
    margin-bottom: 10px;
    padding-left: 10px;
}

#popup-text .content .title {
    display: flex;
    justify-content: center;
}

.page-3 .slide-hero .hero-content .description .type,
#popup-text .content .type {
    padding-right: 10px;
}

.page-3 .slide-hero .hero-content .description hr,
#popup-text .content hr {
    width: 100%;
    background-color: #707070;
    margin: 12px;
}

.page-3 .slide-hero .hero-content .description .content,
#popup-text .content .content {
    font-weight: 600;
    min-height: 140px;
    max-height: 140px;
    overflow-y: auto;
    margin-bottom: 28px;
}

.page-3 .slide-hero .hero-content .description .skill,
#popup-text .content .skill {
    position: relative;
    padding-top: 50px;
}

.page-3 .slide-hero .hero-content .description .skill .title,
#popup-text .content .skill .title {
    position: absolute;
    width: 181px;
    height: 29px;
    left: 46%;
    top: 0;
    transform: translateX(-50%);
    background: url(../imgs/page-3/skills-title.webp);
}

.page-3 .slide-hero .hero-tabs {
    bottom: 89px;
    left: 266px;
    gap: 12px;
}

.page-3 .slide-hero .hero-tabs li {
    width: 154px;
    height: 260px;
    cursor: pointer;
    filter: grayscale(1);
    background: unset;
    padding: 0;
}

.page-3 .slide-hero .hero-tabs li:hover,
.page-3 .slide-hero .hero-tabs li.active {
    filter: unset;
}

.page-3 .slide-hero .hero-tabs button {
    width: 148px;
    height: 142px;
    background: url(../imgs/page-3/btn-carousel.webp);
    outline: none;
    border: none;
}

.page-3 .slide-hero .hero-tabs button.next {
    transform: scaleX(-1);
}

.page-3 .slide-hero .hero-tabs button:hover {
    background-position: bottom;
}

.page-3 {
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.page-3.fade-down .slide-hero .hero-content .wrap-img {
    opacity: 1;
    transition-delay: 0.1s;
}

.page-3.fade-down .slide-hero .hero-content .description {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.25s;
}

.page-3.fade-down #tab-touches {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.35s;
}

.page-3.fade-down .slide-hero .hero-content .wrap-img {
    opacity: 1;
    transform: translateY(0);
}


.page-3 .mCustomScrollbar .mCSB_scrollTools {
    width: 4px;
}

.page-3 .mCustomScrollbar .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    width: 4px;
    background-color: #2a2316;
    border-radius: 4px;
}

.page-3 .mCustomScrollbar .mCSB_scrollTools .mCSB_draggerRail {
    width: 4px;
    background-color: #918f88;
}

/*******************************************PAGE 4*******************************************/

.page-4 .title {
    top: -25px;
}

.page-4 .page-4-carousel {
    width: 870px;
    height: 100%;
}

.page-4 .page-4-carousel .card-item {
    width: 346px;
    height: 619px;
    background: url(../imgs/page-4/bg-slide.webp) no-repeat 0 0 / 100% 100%;
    padding: 23px 36px 27px 47px;
    left: 50%;
    top: 50%;
    transform-origin: center center;
    transition:
        transform 0.45s cubic-bezier(.22,.61,.36,1),
        filter 0.35s ease,
        opacity 0.35s ease;

    will-change: transform;
}


.card-item-3 {
    transform: translate(-50%, -50%) scale(1);
    z-index: 3;
}

.card-item-2 {
    transform: translate(-100%, -50%) scale(0.9);
    z-index: 2;
}

.card-item-1 {
    transform: translate(-150%, -50%) scale(0.8);
    z-index: 1;
}

.card-item-4 {
    transform: translate(0, -50%) scale(0.9);
    z-index: 2;
}

.card-item-5 {
    transform: translate(50%, -50%) scale(0.8);
    z-index: 1;
}

.card-item-6 {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
    z-index: 1;
}

.page-4 .page-4-carousel .card-item:not(.center) {
    filter: brightness(0.45) contrast(1.05);
    cursor: pointer;
}

.page-4 .carousel-wrapper .btn-nav {
    width: 110px;
    height: 99px;
    background: url(../imgs/page-4/btn-control.webp) no-repeat;
    background-size: 100% 200%;
    border: none;
    outline: none;
}

.page-4 .carousel-wrapper .btn-nav.prev {
    left: 120px;
    transform: scaleX(-1);
}

.page-4 .carousel-wrapper .btn-nav.next {
    right: 120px;
}

.page-4 .carousel-wrapper .btn-nav:hover {
    background-position: bottom;
}

.page-4 .carousel-wrapper .carousel-button {
    bottom: 112px;
    gap: 20px;
}

.page-4 .carousel-wrapper .carousel-button li {
    width: fit-content;
    height: fit-content;
}

.page-4 .carousel-wrapper .carousel-button li button {
    width: 35px;
    height: 36px;
    background: url(../imgs/page-4/btn-carousel.webp) no-repeat 0 0 / 100% 200%;
    border: none !important;
    outline: none !important;
    position: relative;
    padding: 0;
}

.page-4 .carousel-wrapper .carousel-button li button:hover,
.page-4 .carousel-wrapper .carousel-button li button.active {
    background-position: bottom;
}

.page-4 .carousel-wrapper .carousel-button li:not(:last-child) button::before {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translate(100%, -50%);
    width: 7px;
    height: 7px;
    background-color: #fff;
    border-radius: 50%;
}

.page-4 .container {
    opacity: 0;
    transform: translateY(-40px);
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.page-4.fade-down .container {
    opacity: 1;
    transition-delay: 0.2s;
    transform: unset;
}

/*******************************************PAGE 5*******************************************/
footer.page {
    height: 460px;
    min-height: unset;
    position: relative;
}

footer::before {
    content: "";
    pointer-events: none;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background: url(../imgs/bg-footer.webp) no-repeat center top;
    width: 100%;
    height: 992px;
    z-index: -1;
}

footer .container {
    padding-top: 148px;
    padding-right: 60px;
}

footer .logo {
    margin-right: 50px;
    margin-top: 60px;
}

footer .logo-g1 {
    top: 150px;
    left: 25px;
}

footer .info-group {
    display: flex;
}

footer .police-menu a {
    color: #ffd800;
}

footer .police-menu {
    gap: 32px;
    margin-bottom: 22px;
    padding-right: 97px;
}

footer .police-menu li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translate(100%, -50%);
    width: 2px;
    height: 70%;
    background-color: #ffd800;
}

footer h2 {
    font-size: 24px;
    color: #fff;
    margin-bottom: 13px;
    padding-right: 100px;
}

footer p {
    color: #fff3bd;
}

footer .wrap-content {
    opacity: 0;
    transform: translateY(-40px);
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

footer.fade-down .wrap-content {
    opacity: 1;
    transition-delay: 0.2s;
    transform: unset;
}

footer p br {
    display: none;
}

.clouds-canvas {
    width: 35%;
    height: 100vh;
    top: 0;
    overflow: hidden;
}

.clouds-canvas.right {
    right: 0;
}

.clouds-canvas .cloud {
    background: url(../imgs/smoke.webp) no-repeat 0 0 / 100% 100%;
    z-index: 2;
}

.wrap-menu-fixed {
    z-index: 3;
    height: unset;
}

.menu-fixed {
    position: fixed;
    width: 182px;
    height: 629px;
    background: url(../imgs/page-2/bg-social.webp) no-repeat 0 0 / 100%;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding-top: 70px;
    padding-left: 58px;
}

.menu-fixed ul {
    width: fit-content;
}

.menu-fixed li {
    width: 95px;
    height: 107px;
    background: url(../imgs/page-2/btn-social.webp) no-repeat;
    background-size: 400% 200%;
}

.menu-fixed li.facebook {
    background-position: 0 0;
}

.menu-fixed li.youtube {
    background-position: -95px 0;
}

.menu-fixed li.group {
    background-position: -190px 0;
}

.menu-fixed li.discord {
    background-position: right top;
}

.menu-fixed li.support {
    width: 151px;
    height: 163px;
    background: url(../imgs/page-2/btn-social-2.webp) no-repeat 0 0 / 100% 200%;
    transform: translateX(-22px);
}

.menu-fixed li:hover {
    background-position-y: bottom !important;
}

#popup-text {
    z-index: 999;
    display: none;
}

#popup-text .wrap-content {
    width: 815px;
    height: 748px;
    background: url(../imgs/popup.webp) no-repeat 0 0 / 100% 100%;
    padding: 95px 185px 153px 210px
}

#popup-text .popup-close {
    right: 55px;
    top: 42px;
    width: 80px;
    height: 80px;
    background: transparent;
    border: none;
    outline: none;
}

#popup-text .open-detail-champ-info {
    display: none;
}

.open-detail-champ-info {
    width: 159px;
    height: 38px;
    background: url(../imgs/page-3/btn-detail.webp) no-repeat 0 0 / 100% 200%;
    border: none;
    outline: none;
    margin-top: 15px;
    transform: translateX(-26px);
    display: none;
}

.open-detail-champ-info:hover {
    background-position: bottom;
}

/*----------------SUBPAGE-----------------*/

.content-layout-subpage {
    height: 602px;
    margin-bottom: 20px;
}

.content-layout-subpage .btn-actions {
    bottom: 18px;
    left: 76px;
    gap: 10px;
}

.subpage-container {
    background-color: #ffedca;
}


.bg-layout-subpage {
    width: 100%;
    left: 0;

}

.bg-layout-subpage.bg-layout-1 {
    background: url(../imgs/bg-subpage-layer-1.webp) no-repeat center top;
    height: 257px;
    z-index: 2;
    top: 607px;
}

.bg-layout-subpage.bg-layout-2 {
    background: url(../imgs/bg-subpage-layer-2.webp) no-repeat center top;
    height: 33px;
    z-index: 1;
    top: 603px;
}

.subpage-container > .container {
    background-color: #fff7e8;
    padding-top: 68px;
    padding-bottom: 265px;
}

#root {
    overflow: hidden;
}

#root.subpage .bg-main .wrap-bg .container {
    height: unset;
}

#root.subpage .bg-main .natra {
    top: -200px;
    right: -164px;
}

.subpage-container.post .subpage-title {
    width: 932px;
    height: 214px;
    background: url(../imgs/title-subpage.webp) no-repeat;
    background-size: 100% 400%;
    background-position-x: center;
    z-index: 2;
}

.subpage-container.post .subpage-title.tin-tuc {
    background-position-y: top;
}

.subpage-container.post .subpage-title.su-kien {
    background-position-y: -214px;
}

.subpage-container.post .subpage-title.huong-dan {
    background-position-y: -428px;
}

.subpage-container.post .subpage-title.dac-sac {
    background-position-y: bottom;
}

.subpage-container.post .listNews {
    margin-top: 34px;
    padding-left: 60px;
}

.subpage-container.post .listNews .btn-group {
    border-bottom: 2px solid #9b8765;
    border-radius: unset;
    padding-bottom: 18px;
}

.subpage-container.post .listNews .action a {
    text-indent: -9999999px;
    display: block;
    width: 160px;
    height: 30px;
    background: url(../imgs/post-btn-tab.webp) no-repeat;
    background-size: 400% 200%;
    position: relative;
}

.subpage-container.post .listNews .action a.tin-tuc {
    background-position: -26px 0;
    width: 110px;
    background-size: auto;
}

.subpage-container.post .listNews .action a.su-kien {
    background-position: -170px 0;
    width: 120px;
    background-size: auto;
}

.subpage-container.post .listNews .action a.huong-dan {
    background-position: -320px 0;
}

.subpage-container.post .listNews .action a.dac-sac {
    background-position: right 0;
}

.subpage-container.post .listNews .action a.active {
    background-position-y: bottom !important;
}

.subpage-container.post .listNews .action a.active::before {
    bottom: -10px;
    left: 46%;
}

.subpage-container.post .listNews .action a.tin-tuc::before {
    left: 0;
    transform: translate(0, 100%);
}

.subpage-container.post .listNews .posts-content {
    margin-top: 28px;
}
.subpage-container.post .listNews .posts-content .thumbnail img {
    width: 315px;
    height: 177px;
    display: block;
    object-fit: cover;
}
.subpage-container.post .listNews .posts-content li {
    margin: 12px 0;
    max-width: 1276px;
    transition: transform 0.2s ease-in-out;
}

.subpage-container.post .listNews .posts-content li:hover {
    transform: translateX(10px);
}

.subpage-container.post .listNews .posts-content li .post-item-content {
    margin-left: 35px;
    width: 926px;
}

.subpage-container.post .listNews .posts-content li .post-item-title {
    gap: 10px;
}

.subpage-container.post .listNews .posts-content li .cat-name {
    display: block;
    width: fit-content;
    height: 34px;
    font-size: 20px;
    line-height: 34px;
    border-radius: 20px;
    padding: 0 15px;
    background: #000;
    color: #fff;
    text-align: center;
}

.subpage-container.post .listNews .posts-content li .post-item-title p {
    color: #be4800;
    font-weight: bold;
    font-size: 20px;
    line-height: 34px;
    margin-bottom: 0;
}

.subpage-container.post .listNews .posts-content li .time {
    font-size: 20px;
    color: #5c5c5c;
}

.subpage-container.post .listNews .posts-content li .text-content {
    padding-left: 12px;
    line-height: 24px;
    font-size: 20px;
    position: relative;
    max-width: 926px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 15px;
    color: #5c5c5c;
}

.subpage-container.post .listNews .posts-content li .text-content::before {
    content: "";
    position: absolute;
    height: 21px;
    width: 4px;
    left: 0;
    background-color: #ff8150;
}


.paging li {
    background-color: #ff6600;
    width: 25px;
    height: 25px;
    text-align: center;
    color: #fff;
}

.paging li.active a,
.paging li a.active {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #566d97;
}

.paging li span {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #0f82e4;
}

.paging li.prev span,
.paging li.next span {
    background-color: #ff8534;
}

.paging li a {
    color: #fff;
}

.paging li.next img {
    transform: scaleX(-1);
}

#root.subpage footer {
    margin-top: -62px;
}

#root.subpage footer .wrap-content {
    opacity: unset;
    transform: unset;
}

/*=========================POST DETAIL=========================*/
.subpage-container.post-detail {

}

.subpage-container.post-detail .breadcrums dl {
    display: flex;
    gap: 40px;
    font-size: 20px;
}

.subpage-container.post-detail .breadcrums dl dt:empty {
    display: none;
}

.subpage-container.post-detail .breadcrums dl dt {
    position: relative;
}

.subpage-container.post-detail .breadcrums dl dt:nth-child(1) a {
    color: #5c5c5c;
}

.subpage-container.post-detail .breadcrums dl dt:nth-child(3) a {
    position: relative;
    color: #8f2500;
}
.subpage-container.post-detail .breadcrums dl dt:nth-child(5) {
    position: relative;
    color: #e37e1f;
}
.subpage-container.post-detail .post-content h1 {
    position: relative;
    color: #8f2500;
}
.subpage-container.post-detail .post-content h2 {
    position: relative;
    color: #5d5d5d;
}
.subpage-container.post-detail .post-content h3 {
    color: #2e2e2e;
}
.subpage-container.post-detail .post-content img {
    max-width: 100% !important;
    height: auto !important;
}

.subpage-container.post-detail .breadcrums dl dt:nth-child(3) a::before,
.subpage-container.post-detail .breadcrums dl dt:nth-child(5)::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translate(-100%, -50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.subpage-container.post-detail .breadcrums dl dt:nth-child(3) a::before {
    background-color: #8f2500;
}

.subpage-container.post-detail .breadcrums dl dt:nth-child(5)::before {
    background-color: #e37e1f;
}

.subpage-container.post-detail .post-title h1 {
    color: #8f2500;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 32px;
}
.subpage-container.post-detail .post-title .time {
    color: #5d5d5d;
    font-weight: 600;
}
.subpage-container.post-detail .post-content ul {
    margin: 10px 0 10px 40px;
}

.subpage-container.post-detail .post-content ul li {
    list-style: disc;
}
.subpage-container.post-detail .post-data {
    width: 900px;
    max-width: 900px;
    overflow: hidden;
}

.subpage-container.post-detail .hot-news-wrapper {
    width: 400px;
    max-width: 400px;
    overflow: hidden;
    margin-top: 83px;
    margin-left: 36px;
}

.subpage-container.post-detail .hot-news-wrapper h1 {
    width: 367px;
    height: 62px;
    background: url(../imgs/title-hot-news.webp);
    margin-bottom: 30px;
}

.subpage-container.post-detail .hot-news-wrapper .hot-news-box {
    width: 367px;
    height: 290px;
    margin-bottom: 20px;
}

.subpage-container.post-detail .hot-news-wrapper .hot-news-box > a {
    background: #973800;
    height: 220px;
    width: 367px;
}

.subpage-container.post-detail .hot-news-wrapper .hot-news-box > a img {
    width: 367px;
    height: 220px;
    display: block;
    object-fit: cover;
}

.subpage-container.post-detail .hot-news-wrapper .hot-news-box .title {
    background: #662600;
    padding-left: 15px;
}

.subpage-container.post-detail .hot-news-wrapper .hot-news-box .title a {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    max-width: 335px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*==============================ERROR PAGE==============================*/

.error-page {
    height: 90vh;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 100px;
    background: #fff8e8;
}

.error-page h1 {
    font-size: 150px;
    font-weight: bold;
}

.error-page span {
    font-size: 30px;
    font-weight: bold;
}

.error-page .back-to-home {
    display: block;
    width: 211px;
    height: 46px;
    background: url(../imgs/btn-go-to-home.webp) no-repeat 0 0 / 100% 200%;
    margin: 40px 0;
}

.error-page .back-to-home:hover {
    background-position: bottom;
}

.subpage-container.search-result > .container > h1 {
    margin-top: 126px;
}

.subpage-container.search-result > .container .search-wrap-content {
    z-index: 2;
}

#root footer .wrap-content {
    opacity: unset;
    transform: unset;
    max-width: 960px;
    align-items: unset;
}

/*******************************************PAGE ID*******************************************/

.wrapper-id .subpage-title {
    width: 932px;
    height: 214px;
    background: url(../imgs/title-subpage-id.webp) no-repeat;
    background-size: 100% 100%;
    z-index: 4;
}

.wrapper-id .row.content {
    margin-top: 82px;
    width: 100%;
    padding-left: 25px;
    padding-right: 35px;
}

.wrapper-id .left-side {
    font-size: 20px;
    min-width: 276px;
}

.wrapper-id .left-side li:hover,
.wrapper-id .left-side li.active {
    background-color: #e8c277;
}

.wrapper-id .left-side li {
    width: fit-content;
}

.wrapper-id .left-side li a {
    display: block;
    padding: 15px 0 15px 24px;
    height: 56px;
    width: 270px;
    font-size: 20px;
    font-weight: 600;
    color: #373737;
}

.wrapper-id .user-box .breadcrumb h2 {
    font-weight: bold;
}

.wrapper-id .user-box .breadcrumb .sub-title {
    font-weight: bold;
    color: #373737;
    font-size: 34px;
}
.wrapper-id .user-box .breadcrumb p {
    color: #373737;
    font-weight: 600;
}

.wrapper-id .user-box .breadcrumb h4:not(.sub-title) {
    font-size: 20px;
    color: #d18b00;
    margin-top: 8px;
    font-weight: 600;
}

.wrapper-id .user-table .row {
    border: 1px solid #aaaaaa;
    border-bottom: 1px solid #eee;
    padding: 27px 0;
    background: #fff;
}

.wrapper-id .user-table {
    font-size: 20px;
    margin: 25px 15px 0;
}

.wrapper-id .user-table .info-row {
    padding: 19px 0;
}

.wrapper-id .user-table .info-row i {
    font-size: 19px;
    margin-right: 8px;
    width: 24px;
}

.wrapper-id .user-table .info-row:last-child {
    border-bottom: 1px solid #aaaaaa;
}

.wrapper-id .user-table .label-text {
    color: #6a6a6a;
    padding-left: 35px;
    font-weight: 600;
}

.wrapper-id .user-table .value-text {
    color: #000000;
    padding-left: 40px;
}

.wrapper-id .user-table .action-link {
    text-decoration: none;
    font-weight: 600;
    color: #ee7b00;
}

.wrapper-id .user-table .action-link:hover {
    text-decoration: underline;
}

.wrapper-id .user-table .avatar-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #dee2e6;
}

.wrapper-id .user-table .card {
    border-radius: 15px;
}

.wrapper-id form .submit {
    width: auto;
    height: 60px;
    color: #fff;
    background-color: #896628;
}

.wrapper-id form .submit:hover {
    background-color: #ac7f31;
}

.iframe-id {
    position: relative;
    background: #120401;
}
.iframe-id .wrap-iframe {
    position: relative;
    padding: 10px;
}
#iframe-menu-top, #iframe-menu-left, #iframe-id {
    width: 100%;
}
#iframe-id{
    min-height: 500px;
}

/* ============================================================
   Register Full Form - .form-register-full
   ============================================================ */
.wrapper-id .form-register-full .input-with-icon {
    position: relative;
}

.wrapper-id .form-register-full .input-with-icon .form-control,
.wrapper-id .form-register-full .input-with-icon .form-select {
    padding-right: 40px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    height: 46px;
}

.wrapper-id .form-register-full .input-with-icon .form-control:focus,
.wrapper-id .form-register-full .input-with-icon .form-select:focus {
    outline: none;
    box-shadow: none;
    border-color: #896628;
}

.wrapper-id .form-register-full .input-with-icon > i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
}

.wrapper-id .form-register-full .input-with-icon.input-hidden {
    display: none;
}

.wrapper-id .form-register-full .btn-submit-login {
    font-size: 18px;
}

.wrapper-id .form-register-full .form-control.is-invalid,
.wrapper-id .form-register-full .form-select.is-invalid {
    border-color: #dc3545;
}

.wrapper-id .form-register-full .daterangepicker {
    background-color: #1a0d02;
    border-color: #896628;
    color: #e8d9b0;
}

#mouse-icon {
    position: absolute;
    bottom: 180px;
    left: 50%;
    transform: translate(-50%, -100%);
    cursor: pointer;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    pointer-events: none;
}

#mouse-icon span,
#mouse-icon span::before,
#mouse-icon span::after {
    display: block;
    width: 20px;
    height: 20px;
    border-right: 2px solid #bb394a;
    border-bottom: 2px solid #bb394a;
    transform: rotate(45deg);
    opacity: 0;
    animation: arrow-scroll 1.4s infinite ease-in-out;
    position: relative;
    animation-delay: 0.5s;
}

#mouse-icon span::before,
#mouse-icon span::after {
    content: "";
    position: absolute;
    left: 50%;
}

#mouse-icon span::before{
    top: -10px;
    transform: translate(-16px, 3px);
    animation-delay: 0s;
}

#mouse-icon span::after {
    bottom: -10px;
    transform: translate(-2px, -1px);
    animation-delay: 1s;
}

@keyframes arrow-scroll {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}