@font-face {
    font-family: "ShopeeDisplay";
    src: url(../fonts/ShopeeDisplay-Regular.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "ShopeeDisplay";
    src: url(../fonts/ShopeeDisplay-Bold.ttf) format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Shopee2021";
    src: url(../fonts/shopee2021-bold.ttf) format("truetype");
    font-weight: bold;
    font-style: normal;
}

body {
    position: relative;
    margin: 0;
    width: 100%;
    min-width: 1200px;
}

.high-light:hover {
    filter: brightness(1.2);
}

a {
    text-decoration: none !important;
}

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

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #f6fbd2;
}

::-webkit-scrollbar-thumb:hover {
    background: #e9c683;
}

.wrap {
    position: relative;
    width: 100%;
    height: fit-content;
    max-width: 1920px;
    overflow: hidden;
    margin: 0 auto;
    background: url(/home_assets/statics/assets/home/main_wrapper_bg.jpg) top center no-repeat #3f0305;
}

.main-nav {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: visible;
}

.main-nav .navbar-nav {
    align-items: center;
    height: 100%;
}
.main-nav .navbar-nav .nav-item{
    padding: 16px 16px;
}
.main-nav .navbar-nav .nav-link {
    position: relative;
    color: #f6fbd2;
    font-size: 22px;
    font-family: ShopeeDisplay;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.main-nav .navbar-nav .nav-icon {
    font-size: 26px;
    color: #f6fbd2;
    margin-right: 5px;
}
.main-nav .navbar-nav .nav-link:hover,
.main-nav .navbar-nav .nav-item.active > .nav-link,
.main-nav .navbar-nav .nav-link:hover > .nav-icon,
.main-nav .navbar-nav .dropdown-menu .dropdown-item:hover {
    color: #e9c683;
}
/*.main-nav .navbar-nav .dropdown-menu .dropdown-item {*/
/*    color: #f6fbd2;*/
/*}*/
.main-nav .navbar-nav .dropdown-menu{
    top: unset;
}
.main-nav .navbar-nav .dropdown:hover > .dropdown-menu {
    display: block;
}
.main-nav .navbar-nav .dropdown-menu:hover {
    display: block;
}
.nav-right {
    position: fixed;
    top: 100px;
    right: 0;
    z-index: 99;
    width: 262px;
    height: 676px;
    background: url(/home_assets/statics/assets/home/bg-nav-right.png) top center no-repeat;
    padding: 202px 40px 0 60px;
    box-sizing: border-box;
    transform: translateX(216px);
    transition: all 0.3s ease-in-out;
}

.nav-right a img {
    display: block;
}

.nav-right .btn-toggle {
    cursor: pointer;
    display: block;
    position: absolute;
    top: 215px;
    left: 0px;
    width: 50px;
}

.nav-right .btn-open {
    display: block;
}

.nav-right ul {
    display: block;
    position: relative;
    list-style: none;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
}

.nav-right ul li {
    width: 162px;
    height: 47px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.nav-right ul li img {
    max-width: unset;
    width: 182px;
    height: 65px;
}

.nav-right .to-top {
    cursor: pointer;
    width: 40px;
    margin: 20px auto 0;
}

.nav-right.active {
    transform: translateX(0);
}

.nav-right.active .btn-open {
    display: none;
}

.section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.section-1 {
    height: 840px;
}
.section-1 .top-contents {
    width: 1410px;
    height: 432px;
    display: flex;
    position: absolute;
    left: 50%;
    margin-top: 400px;
    transform: translateX(-50%);
}

.section-1 .left-actions,
.section-2 .left-actions {
    width: 299px;
    position: relative;
}
.section-1 .top-contents .left-actions .btn-download{
    width: 299px;
    height: 147px;
    display: block;
    position: relative;
}

.section-1 .left-actions .actions,.section-2 .left-actions .actions{
    list-style-type: none;
    padding: 0;
}

.section-1 .top-contents .left-actions .actions .action-btn{
    width: 299px;
    height: 91px;
    position: relative;
}

.section-1 .top-contents .left-actions .actions .action-btn:hover{
    background-color: #fff;
}

.section-1 .top-contents .left-actions .actions .action-btn a{
    display: block;
    width: 100%;
    height: 100%;
}
/* Lớp mờ */
.section-1 .top-contents .left-actions a::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.3); /* lớp mờ đen */
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.section-1 .top-contents .left-actions a:hover::before {
  opacity: 1;
}
.section-1 .top-contents .left-actions .actions .action-topup{
    background: url(/home_assets/statics/assets/home/btn_topup.png) no-repeat;
}
.section-1 .top-contents .left-actions .actions .action-register{
    background: url(/home_assets/statics/assets/home/btn_register.png) no-repeat;
}
.section-1 .top-contents .left-actions .actions .action-support{
    background: url(/home_assets/statics/assets/home/btn_support.png) no-repeat;
}
.section-1 .top-contents .left-actions .actions li:not(:last-child)::after {
    content: "";
    display: block;
    width: 299px;
    height: 5px;
    background: url(/home_assets/statics/assets/home/link_bg.png) no-repeat center center;
    background-size: contain;
    z-index: 1;
    position: relative;
}
.section-1 .top-contents .ranking{
    width: 315px;
   background: url(/home_assets/statics/assets/home/rank_bg.png) no-repeat;
   height: 420px;
   position: relative;
}
.section-1 .events-slide-container {
    margin: 0 25px 0 25px;
    width: 734px;
    padding: 16px 65px 30px 65px;
    height: 432px;
    position: relative;
    background: url(/home_assets/statics/assets/home/top_slide_bg.png) no-repeat;
}
.section-1 .events-slide-container .carousel-control-prev-icon {
  background-image: url(/home_assets/statics/assets/home/back_arrow.png);
}
.section-1 .events-slide-container .carousel-control-next-icon {
  background-image: url(/home_assets/statics/assets/home/next_arrow.png);
}
.section-1 .events-slide-container .carousel-control-next
{
    right: -8px;
}
.section-1 .events-slide-container .carousel-control-prev
{
    left: -8px;
}

.section-1 .events-slide-container .carousel-indicators li {
  background-color: #4d060a;
}

.section-1 .events-slide-container .carousel-indicators .active {
  background-color: #460406;
}

.section-1 .events-slide-container .events-slide {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.section-1 .events-slide-container .events-slide li {
    width: 600px;
    height: 400px;
    visibility: hidden;
    margin: 0 auto 0 auto;
    opacity: 0;
    list-style-type: none;
    transition: all 0.6s ease-in-out;
}

.section-1 .events-slide-container .events-slide li.curr {
    visibility: visible;
    opacity: 1;
}

.section-1 .events-slide-container .events-slide li img {
    height: 100%;
    object-fit: fill;
}
.section-1 .top-contents .ranking::before {
    position: absolute;
    left: 30px;
    top: 78px;
    overflow: visible;
    content: "";
    display: block;
    background-color: #6a6147;
    background-size: 100% 100%;
    width: 255px;
    height: 2px;
    z-index: 1;
}
.section-1 .top-contents .ranking .results {
    width: 255px;
    height: 100px;
    padding: 0 20px 20px 20px;
    margin: 100px auto 0 auto;
}

.section-1 .top-contents .ranking .results .no-record {
    font-size: 24px;
    width: 100%;
    color: #460000;
    display: block;
    text-align: center;
}

.section-2 {
    height: 619px;
    padding-top: 20px;
}
.section-2 .section-2-content {
    width: 1410px;
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.section-2 .left-actions .actions .action-btn {
    margin-bottom: 10px;
}
.section-2 .left-actions .actions .action-btn a{
    width: 100%;
    height: 81px;
    display: block;
}
.section-2 .left-actions .actions .action-btn.extra a {
    height: 136px !important;
}
.section-2 .left-actions .actions .action-account{
    background: url(/home_assets/statics/assets/home/btn_account.png) no-repeat;
}
.section-2 .left-actions .actions .action-guide{
    background: url(/home_assets/statics/assets/home/btn_guide.png) no-repeat;
}
.section-2 .left-actions .actions .action-giftcode{
    background: url(/home_assets/statics/assets/home/btn_giftcode.png) no-repeat;
}
.section-2 .left-actions .actions .action-community{
    background: url(/home_assets/statics/assets/home/btn_community.png) no-repeat;
}
.section-2 .left-actions .actions .action-fanpage{
    background: url(/home_assets/statics/assets/home/btn_fanfage.png) no-repeat;
}

.section-2-content .content-box {
    width: 1041px;
    height: 530px;
    margin-top: 13px;
    border: 1px solid #f6fbd2;
    outline: 1px solid #f6fbd2;
    outline-offset: 13px;
    margin-left: 50px;
    display: flex;

}

.section-2-content .content-box .news-box {
    border-right: 1px solid #f6fbd2;
}
.section-2-content .content-box .box-header
{
    display: flex;
    justify-content: space-between;
    background: url(/home_assets/statics/assets/home/underline.png) center center no-repeat;
    background-size: 200px;
     align-items: center;
}

.section-2-content .content-box .box-header a {
    width: 100px;
    height: 30px;
    background: url(/home_assets/statics/assets/home/show_more.png) center center no-repeat;
}
.section-2 .news-list {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.section-2 .news-list li:not(:last-child) {
    width: 100%;
    margin-bottom: 24px;
}
.section-2 .news-list li::after {
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    background: url(/home_assets/statics/assets/home/underline.png) no-repeat;
    background-size: cover;
    z-index: 1;
    position: relative;
    margin-top: 10px;
}

.section-2 .news-list li a {
    position: relative;
    max-width: 470px;
    align-items: center;
    font-family: ShopeeDisplay;
    color: #f6fbd2 !important;
    font-size:24px;
    font-weight: bold;
    padding-right: 25px;
    display: inline-block;
    padding-left: 10px;
}

.section-2 .news-list li .news-item-title {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 35vw;
}

.section-2 .news-list li .news-item-date {
    width: 100px;
    text-align: right;
    margin-left: auto;
}

.section-2 .news-all {
    display: none;
}

.section-2 .search-group {
    margin-top: auto;
    height: 59px;
}

.section-2 .search-group input {
    border: 1px solid #ffe5ae;
    box-shadow: none;
    outline: none;
    padding: 0 26px;
}

.section-2 .search-group .btn {
    width: 59px;
    background: #ffa72a;
    color: #824c00;
    font-size: 28px;
}

.section-3 {
    height: 967px;
}

.section-3 .title {
    width: 1256px;
    padding-top: 70px;
    margin: 0 auto;
}

.section-3 .role-box {
    position: relative;
    width: 100%;
    height: 793px;
    margin: 0 auto;
    overflow: hidden;
}

.section-3 .role-tab {
    position: absolute;
    width: 1920px;
    height: 116px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0 170px;
    background: url(/home_assets/statics/assets/home/role/bg.jpg) no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    justify-content: center;
}

.section-3 .role-tab li {
    position: relative;
    width: 132px;
    height: 100%;
    opacity: 0.8;
    transition: opacity 0.7s 0s ease;
    -webkit-transition: opacity 0.7s 0s ease;
    -ms-transition: opacity 0.7s 0s ease;
    cursor: pointer;
}

.section-3 .role-tab li div {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.section-3 .role-tab li::before {
    position: absolute;
    left: -11px;
    bottom: 0;
    overflow: visible;
    content: "";
    display: block;
    background: url(/home_assets/statics/assets/home/role/role-split.png) no-repeat;
    background-size: 100% 100%;
    width: 22px;
    height: 114px;
    z-index: 1;
}

.section-3 .role-tab li:last-of-type::after {
    position: absolute;
    right: -11px;
    bottom: 0;
    overflow: visible;
    content: "";
    display: block;
    background: url(/home_assets/statics/assets/home/role/role-split.png) no-repeat;
    background-size: 100% 100%;
    width: 22px;
    height: 114px;
    z-index: 1;
}

.section-3 .role-tab li img {
    display: none;
}

.section-3 .role-tab li p {
    font-family: "ShopeeDisplay";
    font-weight: bold;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    margin: 0;
    padding: 0 25px;
    box-sizing: border-box;
    color: #fffeed;
    text-shadow: 0 0 10px #fd0013;
}

.section-3 .role-tab li.curr,
.section-3 .role-tab li:hover {
    opacity: 1;
}

.section-3 .role-tab li.curr div,
.section-3 .role-tab li:hover div {
    height: 209px;
    background: url(/home_assets/statics/assets/home/role/role-active.png) no-repeat;
    background-size: 100% 100%;
}

.section-3 .role-tab li.curr img,
.section-3 .role-tab li:hover img {
    display: block;
    width: 96px;
    height: auto;
}

.section-3 .role-list {
    position: relative;
    width: 1580px;
    height: 674px;
    overflow: visible;
    list-style: none;
    padding: 0;
    left: 50%;
    transform: translateX(-50%);
}

.section-3 .role-list li {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    height: 100%;
    transition: all 0.7s 0s ease;
    -webkit-transition: all 0.7s 0s ease;
    -ms-transition: all 0.7s 0s ease;
}

.section-3 .role-list li .role-img {
    position: absolute;
    top: 0;
    left: 681px;
    display: flex;
    width: 772px;
    height: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

.section-3 .role-list li .role-img img {
    max-height: 100%;
}

.section-3 .role-list li .role-info {
    width: 620px;
    height: 100%;
    padding: 0 0 0 50px;
    box-sizing: border-box;
}

.section-3 .role-list li .role-label {
    width: 100%;
    height: 56px;
    font-family: "ShopeeDisplay";
    font-weight: bold;
    font-size: 24px;
    line-height: 56px;
    box-sizing: border-box;
    text-align: center;
    margin: 18px auto 0;
}

.section-3 .role-list li .role-label span {
    display: block;
    background: -webkit-linear-gradient(#e2b26a,#fffeec);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-3 .role-list li .role-name {
    position: relative;
    text-align: center;
    height: 135px;
}

.section-3 .role-list li .role-name img {
    max-height: 100%;
}

.section-3 .role-list li .role-name::before {
    position: absolute;
    content: "";
    width: 78px;
    height: 94px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: url(/home_assets/statics/assets/home/role/left.png) no-repeat;
    background-size: 100% 100%;
}

.section-3 .role-list li .role-name::after {
    position: absolute;
    content: "";
    width: 78px;
    height: 94px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: url(/home_assets/statics/assets/home/role/right.png) no-repeat;
    background-size: 100% 100%;
}

.section-3 .role-list li .role-des {
    position: relative;
    margin-top: 30px;
    font-family: "ShopeeDisplay";
    font-size: 24px;
    line-height: 28px;
    color: #f5e5c1;
    padding-left: 36px;
    box-sizing: border-box;
}

.section-3 .role-list li .role-des::before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    width: 1px;
    height: 267px;
    background: linear-gradient(to bottom,#f5e5c1,transparent);
    background-size: 100% 100%;
}

.section-3 .role-list li .role-play {
    position: absolute;
    bottom: 110px;
    left: 86px;
    display: flex;
    align-items: center;
    gap: 17px;
    font-family: ShopeeDisplay;
    font-size: 23px;
    line-height: 29px;
    font-weight: bold;
    color: #f9eed0;
    text-transform: uppercase;
}

.section-3 .role-list li .role-play img {
    width: 95px;
}

.section-3 .role-list li.curr {
    visibility: visible;
    opacity: 1;
}

.section-4 {
    height: 980px;
}

.section-4 .title {
    width: 1256px;
    padding-top: 70px;
    margin: 0 auto;
}

.section-4 .slide-cont {
    width: 100%;
    height: 618px;
    margin-top: 52px;
}

.section-4 .slide-cont .slide-box {
    position: relative;
    height: 100%;
    width: 1080px;
    margin: 0 auto;
}

.section-4 .slide-cont .slide-box .slide-item {
    padding: 19px 23px;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-4 .slide-cont .slide-box .slide-item img {
    width: 100%;
}

.section-4 .slide-cont .slide-box .slide-item::before {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    content: "";
    width: 1080px;
    height: 618px;
    background: url(/home_assets/statics/assets/home/galery-mask.png) no-repeat center center;
    background-size: 100% 100%;
    z-index: 1;
}

.section-4 .slide-cont .slide-box .item-active {
    visibility: visible;
    opacity: 0.8;
}

.section-4 .slide-cont .slide-box .item-prev {
    transform: translateX(-90%) scale(1);
    -moz-transform: translateX(-90%) scale(1);
    -webkit-transform: translateX(-90%) scale(1);
    -o-transform: translateX(-90%) scale(1);
}

.section-4 .slide-cont .slide-box .item-next,
.section-4 .slide-cont .slide-box .item-prev {
    visibility: visible;
    z-index: 1;
    opacity: 0.3;
}

.section-4 .slide-cont .slide-box .item-next {
    transform: translateX(90%) scale(1);
    -moz-transform: translateX(90%) scale(1);
    -webkit-transform: translateX(90%) scale(1);
    -o-transform: translateX(90%) scale(1);
}

.section-4 .slide-cont .slide-box .item-center {
    transform: translate(0);
    -moz-transform: translate(0);
    -webkit-transform: translate(0);
    -o-transform: translate(0);
    z-index: 2;
    opacity: 1;
}

.section-4 .slide-cont .slide-box .item-center::before {
    visibility: visible;
    opacity: 0.8;
}

.section-4 .slide-cont .prev,
.section-4 .slide-cont .next {
    position: absolute;
    width: 104px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.section-4 .slide-cont .prev {
    left: -174px;
}

.section-4 .slide-cont .next {
    right: -174px;
}

.section-4 .slide-pagination {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.section-4 .slide-pagination li {
    display: block;
    width: 26px;
    height: 26px;
    background: #ffffff;
    border-radius: 13px;
    transition: all 0.6s ease-in-out;
    cursor: pointer;
}

.section-4 .slide-pagination li.active {
    width: 100px;
    background: #ffcf00;
}

.section-4 .slide-pagination li:hover {
    background: #ffcf00;
}

.footer {
    height: 255px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: #fdfae0;
}

.footer .logo {
    width: 200px;
}

.footer .footer-col {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.footer .group-link {
    display: flex;
    gap: 50px;
}

.footer .group-link a {
    font-family: "ShopeeDisplay";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #fdfae0;
}

.footer .text p {
    font-family: "ShopeeDisplay";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: left;
    margin: 0;
}

.footer .text p:first-of-type {
    margin: 26px 0;
}

/*Custom*/

.grecaptcha-badge {
    visibility: hidden;
}

/*Loadding*/
.overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #232121;
    -webkit-opacity: 0.6;
    -khtml-opacity: 0.6;
    -moz-opacity: 0.6;
    -ms-opacity: 0.6;
    -o-opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    opacity: 0.6;
}

body.loading {
    overflow: hidden;
}

body.loading .overlay {
    display: block;
}

.loader {
    position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    perspective: 800px;
}

.inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid #EFEFFA;
}

.inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid #EFEFFA;
}

.inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid #EFEFFA;
}

@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}
/*End custom*/

@media (max-width: 1200px) {
    body {
        min-width: unset;
    }

    .wrap {
        height: auto;
        /*background: url(/home_assets/statics/assets/home/bg-mb.jpg) top center no-repeat #f3ebde;*/
        /*background-size: 100% auto;*/
    }
    .section-1 {
        height: 920px;

    }
    .section-1 .top-contents {
        margin-top: 470px;
        width: 954px;
    }
    .section-1 .top-contents .ranking{display: none}
    .section-1 .events-slide-container {
        height: 378rem;
        width: 630px;
        background: none;
        padding: unset;
        margin-right: unset;
    }

    .section-1 .events-slide-container .events-slide li img {
        width: 100%;
    }

    .section-1 .events-slide-container .events-pagination {
        position: absolute;
        bottom: 42rem;
        gap: 30rem;
    }

    .section-2 {
        height: 1190px;
        padding-top: 40px;
        background: #6f1b1b;
    }
    .section-2 .section-2-content .left-actions{
        display: none;
    }

    .section-2 .section-2-content {
        width: 954px;
    }
    .section-2-content .content-box {
        width: 100%;
        margin: 40px 13px;
        display: block;
        height: auto;
        min-height: 926px;
    }
    .section-2-content .content-box .box-header{
        padding: 24px 24px 0 24px;
        background-size: 400px;
        background-origin: content-box;
    }
    .section-2-content .content-box .events-box,
    .section-2-content .content-box .news-box{
        border: unset;
        width: 100% !important;
        height: 50% !important;
    }

    .section-2-content .content-box .events-box {
        /*margin-top: 80px;*/
    }

    .section-2 .news-list {
        width: 100%;
        margin-bottom: 40px;
        padding-top: 40px;
    }

    .section-2 .news-list li {
        height: 50rem;
    }

    .section-2 .news-list li a {
        font-size: 22rem;
        padding: 0 14rem 0 25rem;
    }

    .section-2 .news-list li .news-item-title {
        flex-grow: 1;
        max-width: 80vw;
    }

    .section-2 .news-list li .news-item-date {
        width: 100rem;
    }

    .section-2 .news-all {
        display: block;
        width: 100%;
        height: 89rem;
        background: #00642b;
        color: #fff;
        font-family: ShopeeDisplay;
        font-size: 32rem;
        font-weight: bold;
        line-height: 89rem;
        text-align: center;
        margin-top: auto;
    }

    .section-2 .search-group {
        position: relative;
        top: 0;
        height: 95rem;
        margin-bottom: 80rem;
    }

    .section-2 .search-group input {
        padding: 0 26rem;
        border: 1rem solid #ffe5ae;
        font-size: 28rem;
    }

    .section-2 .search-group .btn {
        width: 95rem;
        font-size: 50rem;
    }

    .section-3 {
        height: 2016rem;
    }

    .section-3 .title {
        padding-top: 65rem;
        width: 100%;
        height: 100rem;
    }

    .section-3 .role-box {
        width: 100%;
        margin-top: 80rem;
        height: 1836rem;
    }

    .section-3 .role-tab {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 313rem;
        background: url(/home_assets/statics/assets/home/role/bg-mb.jpg) no-repeat;
        background-size: 100% 100%;
        padding: 0;
        gap: 0;
    }

    .section-3 .role-tab li {
        width: 180rem;
        height: 156rem;
    }

    .section-3 .role-tab li div {
        gap: 12rem;
        float: left;
    }

    .section-3 .role-tab li::before {
        left: -13rem;
        width: 26rem;
        height: 173rem;
    }

    .section-3 .role-tab li:last-of-type::after {
        position: absolute;
        right: -13rem;
        width: 26rem;
        height: 173rem;
    }

    .section-3 .role-tab li p {
        font-size: 31rem;
        line-height: 37rem;
        padding: 0 40rem;
    }

    .section-3 .role-tab li.curr div,
    .section-3 .role-tab li:hover div {
        height: 279rem;
    }

    .section-3 .role-tab li.curr img,
    .section-3 .role-tab li:hover img {
        width: 128rem;
    }

    .section-3 .role-list {
        width: 100%;
        height: 1521rem;
    }

    .section-3 .role-list li {
        width: 100%;
        height: 100%;
    }

    .section-3 .role-list li .role-img {
        position: absolute;
        top: 124rem;
        left: 50%;
        transform: translateX(-50%);
        height: 724rem;
    }

    .section-3 .role-list li .role-img img {
        max-height: 724rem;
    }

    .section-3 .role-list li .role-info {
        padding: 0 128rem;
        width: 100%;
        height: 100%;
    }

    .section-3 .role-list li .role-name {
        height: 103rem;
    }

    .section-3 .role-list li .role-name::before,
    .section-3 .role-list li .role-name::after {
        width: 78rem;
        height: 102rem;
    }

    .section-3 .role-list li .role-label {
        height: 72rem;
        font-size: 36rem;
        line-height: 72rem;
        margin-top: 745rem;
        padding: 0;
    }

    .section-3 .role-list li .role-des {
        padding: 0 37rem;
        margin: 186rem 0 0;
        font-size: 36rem;
        line-height: 43rem;
    }

    .section-3 .role-list li .role-des::before {
        width: 1rem;
        height: 267rem;
    }

    .section-3 .role-list li .role-play {
        bottom: 435rem;
        left: 50%;
        transform: translateX(-50%);
        gap: 18rem;
        font-family: ShopeeDisplay;
        font-size: 36rem;
        line-height: 42rem;
    }

    .section-3 .role-list li .role-play img {
        width: 117rem;
    }

    .section-4 {
        height: 968rem;
    }

    .section-4 .title {
        padding-top: 65rem;
        width: 100%;
        height: 100rem;
    }

    .section-4 .slide-cont {
        width: 100%;
        height: 552rem;
        margin-top: 130rem;
    }

    .section-4 .slide-cont .slide-box {
        width: 963rem;
    }

    .section-4 .slide-cont .slide-box .slide-item {
        padding: 20rem;
    }

    .section-4 .slide-cont .slide-box .slide-item::before {
        visibility: visible;
        opacity: 0.8;
        width: 963rem;
        height: 552rem;
        background-size: 100% 100%;
    }

    .section-4 .slide-cont .slide-box .item-prev {
        transform: translateX(-102%) scale(1);
        -moz-transform: translateX(-102%) scale(1);
        -webkit-transform: translateX(-102%) scale(1);
        -o-transform: translateX(-102%) scale(1);
    }

    .section-4 .slide-cont .slide-box .item-next {
        transform: translateX(102%) scale(1);
        -moz-transform: translateX(102%) scale(1);
        -webkit-transform: translateX(102%) scale(1);
        -o-transform: translateX(102%) scale(1);
    }

    .section-4 .slide-cont .prev,
    .section-4 .slide-cont .next {
        width: 93rem;
        height: 93rem;
    }

    .section-4 .slide-cont .prev {
        left: -25rem;
    }

    .section-4 .slide-cont .next {
        right: -25rem;
    }

    .section-4 .slide-pagination {
        gap: 30rem;
        margin: 60rem 0 0;
    }

    .section-4 .slide-pagination li {
        width: 24rem;
        height: 24rem;
        border-radius: 12rem;
    }

    .section-4 .slide-pagination li.active {
        width: 95rem;
    }

    .footer {
        height: 256rem;
    }

    .footer .logo {
        width: 396rem;
    }

    .footer .group-link {
        gap: 65rem;
    }

    .footer .group-link a {
        font-size: 20rem;
        line-height: 24rem;
    }

    .footer .text p {
        font-size: 20rem;
        line-height: 24rem;
    }

    .footer .text p:first-of-type {
        margin: 36rem 0;
    }
}

@media (max-width: 576px){
    .wrap {
        height: auto;
        background: url(/home_assets/statics/assets/home/bg-mb.jpg) top center no-repeat #f3ebde;
        background-size: 100% auto;
    }
    .main-nav{
        height: 48px;
        background: #530505;
    }

    .navbar-light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23e9c683' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        height: 32px;
        width: 32px;
    }
    .main-nav .navbar-collapse{
        background: #530505;
        z-index: 999;
    }
    .main-nav .nav-item{
        width: 100%;
    }
    .main-nav .dropdown-menu{
        font-size: 16px;
    }
    .main-nav .dropdown-menu li{
        padding: 8px 32px;
    }
    .main-nav .top-actions{
        width: 300px;
        height: 48px;
        display: flex !important;
        align-items: center;
        gap: 4px;
        justify-content: right;
        padding-right: 8px;
    }
    .main-nav .top-actions a{
        height: 40px;
        display: inline-block;
        width: 101px;
    }
    .main-nav .top-actions .btn-download{
        background: url(/home_assets/statics/assets/home/btn_download_top.png) top center no-repeat;
        background-size: cover;
    }

    .main-nav .top-actions .btn-charge{
        background: url(/home_assets/statics/assets/home/btn_charge.png) top center no-repeat;
        background-size: cover;
    }
    .wrap{
        height: auto;
    }
    .section-1 .ranking, .section-1 .left-actions{display: none}
    .section-1 {
        height: 575px;
    }
    .section-1 .top-contents{
        width: 100vw;
        height: auto;
    }
    .section-1 .events-slide-container{
        margin: unset;
        height: auto;
    }
    .section-1 .top-contents {
        margin-top: 290px;
    }

    .section-2 {
        height: 1340rem;
        padding: unset;
        min-height: unset;
        margin-top: 3px;
    }
    .section-2 .section-2-content {
        width: 100vw;
        padding: 18px 10px;
    }
    .section-2 .left-actions{display: none}
    .section-2 .content-box{
        width: 100%;
        margin: unset;
        outline-offset: 5px;
        min-height: 500px;
    }
    .section-2 .content-box .news-box,
    .section-2 .content-box .events-box{
        height: 50% !important;
    }
    .section-2-content .content-box .news-box,
    .section-2-content .content-box .events-box{
        width: 100% !important;
    }
    .section-2-content .content-box .box-header{
        background: unset;
        padding: 10px;
    }
    .section-2 .news-list{
        padding-top: 10px;
        margin-bottom: unset;
    }
    .section-2 .news-list li a{
        font-size: 16px;
        max-width: calc(100vw - 30px);
        border: unset;
    }
    .section-2 .news-list li:nth-child(n+4) {
        display: none;
    }
    .section-2 .news-list li:not(:last-child)
    {
        width: 100%;
        margin: 12px 0;
        height: auto;
    }
}