/*==================== GOOGLE FONTS ====================*/
@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');
/*==================== BASE ====================*/
:focus {
    outline: none;
}
.form-control:focus {
    box-shadow: none;
}
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    scroll-behavior: smooth !important;
    background: #000000;
    font-family: "Reddit Sans", sans-serif;
    font-size: 15px;
}
ol,
ul,
.h1,
.h2,
.h3,
h1,
h2,
h3 {
    margin: 0;
    padding: 0;
}
h1,
h2,
h3,
h4 {
    color: hsl(255, 8%, 15%);
    font-weight: 600;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
    height: auto;
}
button {
    outline: none;
    border: none;
}
dl,
ol,
ul {
    margin-bottom: 0;
}
/*==================== ELEMENTS ====================*/
.clear {
    clear: both;
}
.homepage .wrapper {
    background: url(../images/bg/bg-default.jpg) no-repeat center top;
}
.homepage .wrapper.subpage {
    background: #f6f0e6 url(../images/bg/bg-subpage.jpg) no-repeat center top;
    height: auto;
    display: flex;
    flex-direction: column;
    background-attachment: fixed;
}
.wrapper-subpage {
    height: auto !important;
    /* padding-bottom: 50px; */
    flex: 1;
}
.wrapper {
    display: block;
    /* overflow: hidden; */
    transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}
/*==================== HEADER ====================*/
header {
    position: sticky;
    top: 0;
    z-index: 5;
    /* background: url('../images/bg-top-menu.png') no-repeat center top; */
}
header .container {
    position: relative;
    padding: 0;
}
header nav {
    display: -webkit-box;
    /* Safari cũ */
    display: -moz-box;
    /* Firefox cũ */
    display: -ms-flexbox;
    /* IE 10 */
    display: -webkit-flex;
    /* Chrome/Safari/Opera cũ */
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: unset;
    padding-left: 9px;
    /* padding-right: 5%; */
    width: 100%;
    height: 1px;
    display: flex;
    padding-top: 26px;
    margin-bottom: 100px;
    position: relative;
    z-index: 2;
    max-width: 1900px;
    margin: 0 auto;
}
header nav .nav-item {
    /* margin-right: 27px; */
}
.hide-logo {
    max-width: 0 !important;
    opacity: 0 !important;
    overflow: hidden;
    /* Giúp ẩn phần logo thừa đi khi bóp nhỏ */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
header nav .nav-item .logo {
    text-indent: -9999px;
    display: block;
    width: 258px;
    height: 155px;
    background: url(../images/logo.png) top center no-repeat;
    transition: max-width 0.3s ease, opacity 0.2s ease;
    /* Tạo hiệu ứng mượt */
    opacity: 1;
}
.logo-warning {
    display: none;
    background: url(../images/item-logo18.png) no-repeat;
    width: 235px;
    height: 236px;
    left: 21px;
    top: 151px;
    position: absolute;
}
header nav .navbar-nav {
    flex-direction: row;
    gap: 4px;
    margin-top: -5px;
    margin-left: auto;
}
header nav .nav-right .top-menu-icon-star {
    width: 218px;
    height: 19px;
    background: url(../images/top-menu/icon-star.png) no-repeat center top;
    top: -11px;
    left: 58px;
}
header nav .navbar-nav li {
    display: flex;
    width: 63px;
    height: 62px;
    text-indent: -9999px;
}
header nav .navbar-nav li:nth-child(1) {
    background: url(../images/top-menu/1.png) top center no-repeat;
}
header nav .navbar-nav li:nth-child(2) {
    background: url(../images/top-menu/2.png) top center no-repeat;
}
header nav .navbar-nav li:nth-child(3) {
    background: url(../images/top-menu/3.png) top center no-repeat;
}
header nav .navbar-nav li:nth-child(4) {
    background: url(../images/top-menu/4.png) top center no-repeat;
}
header nav .navbar-nav li:nth-child(5) {
    background: url(../images/top-menu/5.png) top center no-repeat;
}
header nav .navbar-nav li:nth-child(1).active,
header nav .navbar-nav li:nth-child(1):hover {
    background: url(../images/top-menu/1.png) bottom center no-repeat;
}
header nav .navbar-nav li:nth-child(2).active,
header nav .navbar-nav li:nth-child(2):hover {
    background: url(../images/top-menu/2.png) bottom center no-repeat;
}
header nav .navbar-nav li:nth-child(3).active,
header nav .navbar-nav li:nth-child(3):hover {
    background: url(../images/top-menu/3.png) bottom center no-repeat;
}
header nav .navbar-nav li:nth-child(4).active,
header nav .navbar-nav li:nth-child(4):hover {
    background: url(../images/top-menu/4.png) bottom center no-repeat;
}
header nav .navbar-nav li:nth-child(5).active,
header nav .navbar-nav li:nth-child(5):hover {
    background: url(../images/top-menu/5.png) bottom center no-repeat;
}
header nav .navbar-nav li a {
    display: flex !important;
    overflow: hidden;
    text-decoration: none;
    color: #985304;
    font-weight: bold;
    width: 100%;
    line-height: 15px;
    padding: 0 24px !important;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}
header nav .navbar-nav li a:hover {
    color: #4b2c0a;
}
.wrapper-btn-login .btn-login {
    text-indent: -9999px;
    display: block;
    width: 217px;
    height: 48px;
    background: url(../images/top-menu/btn-login.png) no-repeat;
}
.wrapper-btn-login .btn-login:hover {
    background: url(../images/top-menu/btn-login.png) bottom no-repeat;
}
header nav .nav-item .user-dropdown {
    color: #ffffff;
    margin-top: 3px;
    font-size: 15px;
    background: #eeb01b;
    border-radius: 4px;
    padding: 7px;
    font-weight: 500;
    position: relative;
    min-width: 170px;
    max-width: 170px;
    display: none;
}
header nav .nav-item .user-dropdown li {
    background-color: #150703;
    display: block;
    overflow: hidden;
}
header nav li a {
    background: transparent;
    text-indent: unset;
    color: #eacf73;
    font-size: 14px;
    height: 34px;
    line-height: 34px;
    font-weight: 400;
}
header nav .nav-right {
    margin-left: auto;
    margin-right: 32px;
    position: relative;
}
.wrapper-login .user-info .dropdown-menu {
    background: #4d0400;
    padding: 0;
    width: 100%;
    left: 50% !important;
    top: 49px !important;
    transform: translateX(-50%) !important;
    border-radius: 10px;
    overflow: hidden;
}
.wrapper-login .user-info .dropdown-menu li {
    height: 38px;
}
.wrapper-login .user-info .dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid #000;
}
.wrapper-login .user-info .dropdown-toggle {
    color: #ffefad;
}
.wrapper-login .user-info .dropdown-menu li a {
    color: #ffefad;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.wrapper-login .user-info .dropdown-menu li:hover {
    background-color: #746037;
}
.wrapper-login .user-info .dropdown-menu li i {
    margin-right: 12px;
    font-size: 17px;
}
.wrapper-login .user-info .dropdown-menu li span {
    font-size: 16px;
}
.wrapper-login .user-info .dropdown-menu li .payment-group {
    gap: 10px;
}
.wrapper-login .user-info .dropdown-menu li .btn-link-payment {
    width: 75px;
    height: 32px;
    line-height: 32px;
    background: #d74132;
    border-radius: 8px;
}
.wrapper-login .user-info .dropdown-menu .payment-unit {
    width: 30px;
    height: 28px;
    background: url(../imgs/icons/kim-phieu.png) no-repeat 0 0 / 100% 100%;
}
.wrapper-login .user-info {
    background: url(../images/top-menu/bg-user-info.png) no-repeat;
    background-size: 100%;
    width: 217px;
    height: 48px;
    padding: 0 14px;
    background-color: initial;
    position: relative;
}
.wrapper-login .user-info .txt-fullname {
    display: block;
    width: 150px;
    max-width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #ffd800;
    padding-left: 10px;
}
/* header .logo {
    top: 0;
    left: 500px;
}
header .logo img {
    max-width: 225px;
} */
/*==================== MAIN ====================*/
main {
    position: relative;
    margin-bottom: 70px;
    z-index: 3;
}
main .container {
    position: relative;
    /* max-width: 1149px; */
    margin-bottom: -35px;
}
/*==================== HEADER ANIMATION ICONS ====================*/
.header-animation-icon {
    /* justify-content: center; */
    margin-bottom: -110px;
}
.header-animation-icon .logo18 {
    background: url(../images/item-logo18.png) no-repeat;
    width: 235px;
    height: 236px;
    left: -642px;
    top: -30px;
}
.header-animation-icon .btn-video-trailer {
    background: url(../images/btn-video-trailer.png) top center no-repeat;
    width: 234px;
    height: 234px;
    top: 26px;
    left: 3px;
    z-index: 2;
    position: absolute;
}
.subpage .header-animation-icon .wrapper-trailer {
    display: none !important;
}
.header-animation-icon .wrapper-trailer {
    left: -83px;
    top: 45px;
    width: 234px;
    height: 234px;
    position: absolute !important;
    z-index: 3;
}
.header-animation-icon .trailer-cover {
    background: url(../images/btn-video-trailer-cover.png) no-repeat;
    width: 234px;
    height: 234px;
}
.header-animation-icon .btn-video-trailer:hover {
    background: url(../images/btn-video-trailer.png) bottom no-repeat;
}
.header-animation-icon .list-icon-gift {
    display: flex;
    z-index: 3;
    left: 281px;
    top: 3px;
}
.header-animation-icon .list-icon-gift li:nth-child(1) {
    background: url(../images/item-ngan-luong-vang.png) no-repeat;
    width: 114px;
    height: 112px;
    top: 340px;
    left: -584px;
    animation: floatBalloon 6s ease-in-out infinite;
}
.header-animation-icon .list-icon-gift li:nth-child(2) {
    background: url(../images/item-vip-10.png) no-repeat;
    width: 135px;
    height: 133px;
    top: 279px;
    left: -480px;
    animation: floatBalloon 6s ease-in-out infinite;
}
.header-animation-icon .list-icon-gift li:nth-child(3) {
    background: url(../images/item-role.png) no-repeat;
    width: 135px;
    height: 133px;
    top: 269px;
    right: -501px;
    animation: floatBalloon 6s ease-in-out infinite;
}
.header-animation-icon .list-icon-gift li:nth-child(4) {
    background: url(../images/item-ve-quay.png) no-repeat;
    width: 108px;
    height: 106px;
    top: 335px;
    right: -591px;
    animation: floatBalloon 6s ease-in-out infinite;
}
.header-animation-icon .text-trendy {
    position: relative;
    top: -68px;
    left: -6px;
}
.header-animation-icon .text-trendy .top-trendy-title {
    width: 725px;
    height: 247px;
    background: url(../images/title-top-trendy.png) no-repeat;
    top: 301px;
    left: -61px;
    z-index: 3;
}
.box-trieu-van {
    position: relative;
    width: 573px;
    height: 565px;
    background: url(../images/bg-than-trieu-van.png) no-repeat;
    background-size: 100%;
}
.header-animation-icon .text-trendy .than-trieu-van {
    width: 457px;
    height: 518px;
    background: url(../images/than-trieu-van.png) no-repeat;
    background-size: 100%;
    top: 37px;
    z-index: 2;
    left: 59px;
}
.header-animation-icon .text-trendy .than-trieu-van::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 457px;
    height: 518px;
    background-image: url(../images/than-trieu-van-close.png);
    /* Thay bằng đường dẫn ảnh nhắm mắt của bạn */
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 3;
    opacity: 0;
    /* Ban đầu ẩn ảnh nhắm mắt đi */
    /* Tổng chu kỳ là 2.5 giây (bao gồm cả thời gian mở mắt chờ và thời gian chớp mắt) */
    animation: blinkAnimation 2s linear infinite;
}
/*==================== WRAPPER NAVBAR DOWNLOAD ====================*/
.wrapper-header-top {
    z-index: 2;
    position: relative;
}
.wapper-nav-center {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 68px;
    margin-left: 5px;
}
.wapper-nav-center .logo-center {
    display: none;
}
.wapper-nav-center .header-download {
    display: flex;
    width: 810px;
    height: 233px;
    justify-content: center;
    background: url(../images/bg-header-download.png) no-repeat;
    align-items: center;
    gap: 17px;
    padding: 25px 0 0 0;
}
.wapper-nav-center .header-download a {
    text-indent: -9999px;
    display: block;
    width: 100%;
    height: 100%;
}
.wapper-nav-center .header-download .btn-app {
    background: url(../images/btn-app.png) top no-repeat;
    width: 167px;
    height: 167px;
    position: relative;
}
.wapper-nav-center .header-download .btn-payment {
    width: 132px;
    height: 167px;
    background: url(../images/btn-payment-2.png) top no-repeat;
    margin-left: 0;
    margin-top: 0;
}
.wapper-nav-center .header-download .btn-payment:hover {
    background: url(../images/btn-payment-2.png) bottom no-repeat;
}
.btn-download-tablet,
.btn-playnow-tablet {
    display: none !important;
}
.wapper-nav-center .header-download ul {
    /* margin-top: 35px; */
}
.wapper-nav-center .header-download ul li {
    width: 217px;
    height: 56px;
    background: url(../images/btn-download-games.png) no-repeat;
}
.wapper-nav-center .header-download ul li:nth-child(1) {
    background-position: top left;
}
.wapper-nav-center .header-download ul li:nth-child(1):hover {
    background-position: top right;
}
.wapper-nav-center .header-download ul li:nth-child(2) {
    background-position: center left;
}
.wapper-nav-center .header-download ul li:nth-child(2):hover {
    background-position: center right;
}
.wapper-nav-center .header-download ul li:nth-child(3) {
    background-position: bottom left;
}
.wapper-nav-center .header-download ul li:nth-child(3):hover {
    background-position: bottom right;
}
.wapper-nav-center .header-download .btn-play-now {
    width: 132px;
    height: 167px;
    background: url(../images/btn-play-now-2.png) top no-repeat;
    margin-top: 0;
    margin-left: 0;
}
.wapper-nav-center .header-download .btn-play-now:hover {
    background-position: bottom;
}
/*==================== TIN TUC ====================*/
.wrapper-news {
    margin-bottom: 30px;
}
main .wrapper-news-title {
    background: url(../images/title-news.png) no-repeat;
    width: 367px;
    height: 90px;
    margin-bottom: -136px;
    margin-left: -13px;
}
main .wrapper-news-content {
    display: flex;
    width: 1457px;
    height: 601px;
    margin-bottom: -6px;
    background: url(../images/bg-news-2.png) top center no-repeat;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 132px;
    margin-left: 11px;
}
main .wrapper-new-item:not(:first-child) {
    flex: unset;
}
main .wrapper-new-item:nth-child(1) {
    width: 100% !important;
}
main .wrapper-news-content .wrapper-slide.slide-pc {
    /* flex: 0 0 619px; */
    max-width: 638px;
    margin-right: 15px;
    margin-top: 11px;
    margin-left: -11px;
}
main .wrapper-news-content .wrapper-slide.slide-pc li {
    width: 638px;
    max-height: 638px;
    padding: 10px;
}
main .wrapper-news-content .wrapper-slide.slide-pc li a img {
    width: auto !important;
}
main .wrapper-news-content .wrapper-slide.slide-pc .owl-dots {
    position: absolute;
    bottom: 17px;
    right: 32px;
}
main .wrapper-news-content .wrapper-slide.slide-pc .owl-dots button {
    margin-left: 4px;
}
main .wrapper-news-content .wrapper-slide.slide-pc .owl-dots button:first-child {
    margin-left: 0;
}
main .wrapper-news-content .wrapper-slide.slide-pc .owl-dots button span {
    background: url(../images/icon/icon-dot-slide.png) top no-repeat;
    width: 18px;
    height: 17px;
    display: block;
    overflow: hidden;
}
main .wrapper-news-content .wrapper-slide.slide-pc .owl-dots button.active span {
    background: url(../images/icon/icon-dot-slide.png) bottom no-repeat;
    width: 18px;
    height: 17px;
}
main .wrapper-news-content .right {
    flex: 1;
    width: 619px;
    height: 356px;
    margin-left: 0;
    padding: 10px;
}
main .wrapper-news-content .wrapper-slide .owl-carousel {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    margin-left: -2px;
    padding-top: 40px;
}
main .wrapper-news-content ul {
    list-style: none;
    padding-left: 3px;
    margin-bottom: 20px;
}
main .wrapper-news-content .nav {
    display: flex;
    position: relative;
    overflow: hidden;
    margin-bottom: 0px;
    gap: 2px;
    flex-wrap: nowrap;
    width: auto;
    padding-top: 31px;
    margin-left: -3px;
}
main .wrapper-news-content .nav ul li {
    width: 128px;
    height: 35px;
    justify-content: center;
    display: flex;
}
main .wrapper-news-content .nav ul li:nth-child(1) {
    background: url(../images/slide/1.png) top no-repeat;
}
main .wrapper-news-content .nav ul li:nth-child(2) {
    background: url(../images/slide/2.png) top no-repeat;
}
main .wrapper-news-content .nav ul li:nth-child(3) {
    background: url(../images/slide/3.png) top no-repeat;
}
main .wrapper-news-content .nav ul li:nth-child(4) {
    background: url(../images/slide/4.png) top no-repeat;
}
main .wrapper-news-content .nav ul li:nth-child(1).active,
main .wrapper-news-content .nav ul li:nth-child(1):hover {
    background: url(../images/slide/1.png) bottom no-repeat;
    background-size: 100%;
}
main .wrapper-news-content .nav ul li:nth-child(2).active,
main .wrapper-news-content .nav ul li:nth-child(2):hover {
    background: url(../images/slide/2.png) bottom no-repeat;
    background-size: 100%;
}
main .wrapper-news-content .nav ul li:nth-child(3).active,
main .wrapper-news-content .nav ul li:nth-child(3):hover {
    background: url(../images/slide/3.png) bottom no-repeat;
    background-size: 100%;
}
main .wrapper-news-content .nav ul li:nth-child(4).active,
main .wrapper-news-content .nav ul li:nth-child(4):hover {
    background: url(../images/slide/4.png) bottom no-repeat;
    background-size: 100%;
}
main .wrapper-news-content .nav ul li a {
    display: block;
    text-indent: -9999px;
    width: 100%;
    height: 100%;
}
main .wrapper-news-content .news-content {
    display: flex;
}
/* item hot */
main .wrapper-news-content .right .item-hot a {
    width: 609px;
    height: 46px;
    background: url(../images/bg-news-hot.png) top no-repeat;
    margin-bottom: 2px;
    display: flex;
    justify-content: space-between;
    padding-left: 10px;
    align-items: center;
    text-decoration: none;
    position: relative;
    margin-left: -5px;
}
main .wrapper-news-content .right .item-hot a::before {
    content: "\A";
    width: 23px;
    height: 22px;
    border-radius: 50%;
    background: url(../images/icon/icon-hot-news.png) no-repeat;
    display: inline-block;
    position: absolute;
    margin-right: -140px;
}
main .wrapper-news-content .right .item-hot h3 {
    color: #fff661;
    font-size: 18px;
    vertical-align: middle;
    line-height: 37px;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 407px;
    margin-left: 29px;
}
main .wrapper-news-content .right .item-hot a:hover {
    background: url(../images/bg-news-hot.png) bottom no-repeat;
}
main .wrapper-news-content .right .item-hot span.time-short,
main .wrapper-news-content .right .item-hot span {
    color: #fff661;
    margin-right: 15px;
    font-size: 16px;
    font-weight: 500;
}
main .wrapper-news-content .right .item-hot span.time-short {
    display: none;
}
/* end item hot */
main .wrapper-news-content .right .list-news .list .item {
    border-bottom: 1px solid #a79e97;
    padding: 0;
}
main .wrapper-news-content .right .list-news .list .item a {
    display: flex;
    line-height: 37px;
    justify-content: space-between;
    padding: 4px 0;
    position: relative;
}
main .wrapper-news-content .right .list-news .list .item a:hover {
    text-decoration: none;
}
main .wrapper-news-content .right .list-news .list .item a::before {
    content: "\A";
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: url(../images/icon/icon-news.png) no-repeat;
    display: inline-block;
    position: absolute;
    top: 10px;
    margin-right: -46px;
}
main .wrapper-news-content .right .list-news .list .item a h3 {
    flex: 1;
    color: #59483c;
    vertical-align: middle;
    font-size: 18px;
    line-height: 37px;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 407px;
    margin-left: 29px;
}
main .wrapper-news-content .right .list-news .list .item a:hover span,
main .wrapper-news-content .right .list-news .list .item a:hover h3 {
    color: #c15314;
}
main .wrapper-news-content .right .list-news .list .item a span.time-short,
main .wrapper-news-content .right .list-news .list .item a span {
    margin-right: 10px;
    color: #5c5c5c;
    font-weight: 500;
    font-size: 16px;
}
main .wrapper-news-content .right .list-news .list .item a span.time-short {
    display: none;
}
.wrapper-news .right .list {
    height: auto;
}
.mCSB_inside>.mCSB_container {
    margin-right: 21px;
}
main .wrapper-news-content .right .container-more {
    display: flex;
    justify-content: space-around;
}
main .wrapper-news-content .right .more {
    width: 114px;
    height: 31px;
    background: url(../images/btn-xem-them.png) top no-repeat;
    display: block;
    text-indent: -9999px;
}
main .wrapper-news-content .right .more:hover {
    background: url(../images/btn-xem-them.png) bottom no-repeat;
}
main .wrapper-news-content .right .container-more .search-lite {
    flex: 0 0 467px;
    max-width: 467px;
    display: flex;
    outline: none;
    height: 31px;
    background: #fff;
    border: 1px solid #e4e3e3;
    /* border-radius: 10px; */
}
main .wrapper-news-content .right .container-more .search-lite input {
    flex: 1;
    background-color: transparent;
    color: #adadad;
    font-size: 18px;
    border: none;
    padding-left: 14px;
    font-size: 15px;
}
main .wrapper-news-content .right .container-more .search-lite input::placeholder {
    color: #929292;
}
main .wrapper-news-content .right .container-more .search-lite button {
    border: 0px;
    background: transparent;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding-right: 8px;
}
main .wrapper-news-content .right .container-more .search-lite button img {
    vertical-align: middle;
    width: 24px;
}
/*==================== WRAPPER SUPPORT ====================*/
.wrapper-support {
    margin-bottom: 91px;
}
.wrapper-support ul {
    display: flex;
    justify-content: center;
    gap: 31px;
}
.wrapper-support ul li a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}
.wrapper-support ul li:nth-child(1) {
    width: 169px;
    height: 245px;
    animation: moveUpmoveDown 4s ease-in-out infinite;
}
.wrapper-support ul li:nth-child(2) {
    width: 169px;
    height: 245px;
    animation: moveUpmoveDown 4s ease-in-out infinite;
}
.wrapper-support ul li:nth-child(3) {
    width: 169px;
    height: 245px;
    animation: moveUpmoveDown 4s ease-in-out infinite;
}
.wrapper-support ul li:nth-child(4) {
    width: 169px;
    height: 245px;
    animation: moveUpmoveDown 4s ease-in-out infinite;
}
.wrapper-support ul li:nth-child(1) a {
    background: url(../images/btn-cam-nang-tan-thu.png) top no-repeat;
}
.wrapper-support ul li:nth-child(1) a:hover {
    background-position: bottom;
}
.wrapper-support ul li:nth-child(2) a {
    background: url(../images/btn-uu-dai-nap-the.png) top no-repeat;
}
.wrapper-support ul li:nth-child(2) a:hover {
    background-position: bottom;
}
.wrapper-support ul li:nth-child(3) a {
    background: url(../images/btn-dac-quyen-vip.png) top no-repeat;
}
.wrapper-support ul li:nth-child(3) a:hover {
    background-position: bottom;
}
.wrapper-support ul li:nth-child(4) a {
    background: url(../images/btn-huong-dan-nhap-code.png) top no-repeat;
}
.wrapper-support ul li:nth-child(4) a:hover {
    background-position: bottom;
}
/*==================== WRAPPER HERO ====================*/
.wrapper-hero {
    margin-bottom: 249px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.wrapper-hero .container {
    max-width: 1149px;
}
.wrapper-hero h2 {
    width: 367px;
    height: 90px;
    background: url(../images/title-hero.png) no-repeat center center;
    margin-bottom: 10px;
}
.wrapper-hero .slide-hero {
    z-index: 3;
    margin-top: 50px;
    margin-left: 14px;
    width: 1092px;
    height: 533px;
    padding-top: 0;
}
.wrapper-hero .slide-hero .slide-hero-list {
    list-style: none;
    position: relative;
    margin-left: 90px;
}
.wrapper-hero .slide-hero .slide-hero-list .hero-item {
    display: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
}
.wrapper-hero .slide-hero .slide-hero-list .hero-item.active {
    display: flex;
    position: relative;
    z-index: 2;
}
.wrapper-hero .page-3-content {
    display: none;
}
.wrapper-hero .page-3-content.active {
    display: flex;
}
.wrapper-hero .list-class-hero {
    display: flex;
    flex-direction: column;
    top: 149px;
    left: 0;
    z-index: 4;
}
.wrapper-hero .list-class-hero li a {
    display: block;
    width: 100%;
    height: 100%;
    background-color: unset !important;
    border: unset !important;
    text-indent: -9999px;
}
.wrapper-hero .slide-hero .hero-content.active {
    display: flex;
}
.wrapper-hero .slide-hero .hero-content .wrap-img {
    position: absolute;
    left: 12px;
    transform: translateY(-201px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    top: 175px;
    background: url(../images/hero/bg.png) no-repeat;
    width: 1092px;
    height: 533px;
}
.wrapper-hero .slide-hero .hero-content .wrap-img img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}
.wrapper-hero .slide-hero .hero-content .wrap-img img.hero-mb {
    display: none;
}
.wrapper-hero .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;
}
.wrapper-hero .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;
}
.wrapper-hero .slide-hero .hero-content .description .type,
#popup-text .content .type {
    padding-right: 10px;
}
.wrapper-hero .slide-hero .hero-content .description hr,
#popup-text .content hr {
    width: 100%;
    background-color: #707070;
    margin: 12px;
}
.wrapper-hero .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;
}
.wrapper-hero .slide-hero .hero-content .description .skill,
#popup-text .content .skill {
    position: relative;
    padding-top: 50px;
}
.wrapper-hero .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);
}
.hero-tabs {
    top: 501px;
    left: 194px;
    gap: 12px;
    position: absolute;
}
.hero-tabs li {
    width: 259px;
    height: 118px;
    cursor: pointer;
    filter: grayscale(1);
    background: unset;
    padding: 0;
    top: 10px;
}
.hero-tabs li:hover,
.hero-tabs li.active {
    background-color: unset !important;
    filter: unset;
}
.hero-tabs .nav-control,
.hero-tabs button {
    width: 117px;
    height: 105px;
    outline: none;
    border: none;
    filter: unset;
}
.hero-tabs button.prev {
    background: url(../images/hero/button-slide-hero/arrow-prev.png) no-repeat;
    margin-left: 10px;
    margin-top: 37px;
}
.hero-tabs button.next {
    background: url(../images/hero/button-slide-hero/arrow-next.png) no-repeat;
    margin-left: -45px;
    margin-top: 37px;
}
.hero-tabs button:hover {
    filter: grayscale(1.1);
}
/*==================== WRAPPER SLIDE BOTTOM ====================*/
.wrapper-ranking-table {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wrapper-ranking-table .content-slide-bottom {
    width: 100%;
    height: 691px;
    margin-left: -213px;
}
.wrapper-ranking-table h1 {
    width: 367px;
    height: 90px;
    background: url(../images/title-ranking-table.png) no-repeat;
    margin-bottom: -5px;
}
.wrapper-ranking-table .character-tieu-kieu {
    z-index: 1;
    width: 1003px;
    height: 767px;
    background: url(../images/tieu-kieu-4.png) left no-repeat;
    left: 470px;
    top: -48px;
    position: relative;
    background-size: 200% 100%;
    /* Chiều rộng 100%, chiều cao gấp đôi để chứa 2 ảnh */
    background-position: top center;
    /* Mặc định hiển thị nửa trên (Mở mắt) */
    background-repeat: no-repeat;
    animation: blinkSprite 2.5s steps(1) infinite, moveUpmoveDownTieuKieu 4s ease-in-out infinite;
}
/* ĐỊNH NGHĨA NHỊP CHỚP MẮT THEO KIỂU PHÂN TẦNG (STEPS) */
@keyframes blinkSprite {
    0%,
    88% {
        background-position: left center;
    }
    /* Nửa trên: Mở mắt (chờ 2.2 giây) */
    92% {
        background-position: right center;
    }
    /* Nhảy xuống nửa dưới: Nhắm mắt (chớp thật nhanh) */
    96%,
    100% {
        background-position: left center;
    }
    /* Nhảy ngược lên nửa trên: Mở mắt ra lại */
}
.wrapper-ranking-table .wrapper-ranking-content {
    z-index: 2;
    width: 1146px;
    height: 691px;
    background: url(../images/bg-ranking-table.png) no-repeat;
    padding-top: 90px;
}
.wrapper-ranking-content ul {
    gap: 15px;
    margin-bottom: 13px;
}
.wrapper-ranking-content ul li {
    width: 215px;
    height: 60px;
}
.wrapper-ranking-content ul li:nth-child(1) a {
    background: url(../images/btn-ranking-all.png) top no-repeat;
    background-size: 100%;
}
.wrapper-ranking-content ul li:nth-child(2) a {
    background: url(../images/btn-ranking-group.png) top no-repeat;
    background-size: 100%;
}
.wrapper-ranking-content ul li:nth-child(1) a.active,
.wrapper-ranking-content ul li:nth-child(1) a:hover {
    background: url(../images/btn-ranking-all.png) bottom no-repeat;
    background-size: 100%;
}
.wrapper-ranking-content ul li:nth-child(2) a.active,
.wrapper-ranking-content ul li:nth-child(2) a:hover {
    background: url(../images/btn-ranking-group.png) bottom no-repeat;
    background-size: 100%;
}
.wrapper-ranking-content .nav-tabs .nav-item.show .nav-link,
.wrapper-ranking-content .nav-tabs .nav-link.active {
    color: unset;
    background-color: transparent;
    border-color: transparent;
}
.floating {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.floating-effect-fire {
    z-index: 1;
}
.floating * {
    pointer-events: all;
}
.floatMenu {
    position: absolute;
    top: 345px;
    left: 18px;
    display: flex;
    width: 254px;
    height: 750px;
    z-index: 2;
    flex-direction: column;
    align-items: center;
    padding-top: 4px;
    transition: all .25s linear;
    transform: translateX(0);
}
/* .floating .mainsite-float-right {
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: all;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: flex-start;
} */
.floatMenu.open {
    transform: translateX(100%);
}
.floatMenu ul {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.floatMenu ul li {
    width: 230px;
    height: 51px;
}
.floatMenu li a {
    height: 100%;
    display: block;
    text-indent: -9999px;
}
.floatMenu li:nth-child(1) {
    background: url(../images/btn-fixed-left-menu.png) top left no-repeat;
}
.floatMenu li:nth-child(2) {
    background: url(../images/btn-fixed-left-menu.png) no-repeat;
    background-position: left -52px;
}
.floatMenu li:nth-child(3) {
    background: url(../images/btn-fixed-left-menu.png) no-repeat;
    background-position: left -104px;
}
.floatMenu li:nth-child(4) {
    background: url(../images/btn-fixed-left-menu.png) no-repeat;
    background-position: left -155px;
}
.floatMenu li:nth-child(5) {
    background: url(../images/btn-fixed-left-menu.png) bottom left no-repeat;
}
/* hover */
.floatMenu li:nth-child(1) a.active,
.floatMenu li:nth-child(1):hover {
    background: url(../images/btn-fixed-left-menu.png) top right no-repeat;
}
.floatMenu li:nth-child(2) a.active,
.floatMenu li:nth-child(2):hover {
    background: url(../images/btn-fixed-left-menu.png) no-repeat;
    background-position: right -52px;
}
.floatMenu li:nth-child(3) a.active,
.floatMenu li:nth-child(3):hover {
    background: url(../images/btn-fixed-left-menu.png) no-repeat;
    background-position: right -104px;
}
.floatMenu li:nth-child(4) a.active,
.floatMenu li:nth-child(4):hover {
    background: url(../images/btn-fixed-left-menu.png) no-repeat;
    background-position: right -155px;
}
.floatMenu li:nth-child(5) a.active,
.floatMenu li:nth-child(5):hover {
    background: url(../images/btn-fixed-left-menu.png) bottom right no-repeat;
}
.floatMenu .top {
    width: 73px;
    height: 74px;
    display: block;
    overflow: hidden;
    background: url(../images/fixed-menu/btn-top.png) no-repeat;
    text-indent: -9999px;
}
.floatMenu .menu-open:hover,
.floatMenu .menu-control:hover,
.floatMenu .top:hover {
    filter: brightness(1.1);
}
.floatMenu .menu-control {
    position: absolute;
    width: 45px;
    height: 171px;
    background: url(../images/fixed-menu/btn-open.png) no-repeat;
    left: -13px;
    top: 53%;
    transform: translateY(-50%);
}
.floatMenu .menu-open {
    cursor: pointer;
    background: url(../images/fixed-menu/btn-close.png) no-repeat;
}
.floatMenu .menu-close {
    left: -35px;
}
/*==================== FOOTER ====================*/
.subpage footer {
    background: url(../images/bg-footer-subpage.png) no-repeat center -411px;
    margin-top: -250px;
}
footer {
    display: flex;
    height: auto;
    color: #959595;
    align-items: center;
    flex-direction: column;
    z-index: 3;
    position: relative;
    padding-top: 108px;
}
footer.footer-subpage {
    padding-top: 655px;
    background: url(../images/bg-footer-subpage.png) center bottom no-repeat;
}
footer.footer-subpage .policy {
    padding-top: 0;
}
.social {
    display: flex;
    gap: 40px;
    margin-bottom: -135px;
    justify-content: center;
    z-index: 3;
    position: relative;
}
.social li:nth-child(1) {
    width: 167px;
    height: 168px;
}
.social li:nth-child(2) {
    width: 167px;
    height: 168px;
}
.social li:nth-child(3) {
    width: 167px;
    height: 168px;
}
.social li:nth-child(4) {
    width: 167px;
    height: 168px;
}
.social li:nth-child(1) a {
    background: url(../images/btn-footer-social.png) left top no-repeat;
}
.social li:nth-child(1) a:hover {
    background: url(../images/btn-footer-social.png) left bottom no-repeat;
}
.social li:nth-child(2) a {
    background: url(../images/btn-footer-social.png) -214px top no-repeat;
}
.social li:nth-child(2) a:hover {
    background: url(../images/btn-footer-social.png) -214px -170px no-repeat;
}
.social li:nth-child(3) a {
    background: url(../images/btn-footer-social.png) -419px top no-repeat;
}
.social li:nth-child(3) a:hover {
    background: url(../images/btn-footer-social.png) -419px -170px no-repeat;
}
.social li:nth-child(4) a {
    background: url(../images/btn-footer-social.png) -618px top no-repeat;
}
.social li:nth-child(4) a:hover {
    background: url(../images/btn-footer-social.png) -618px -170px no-repeat;
}
.social li a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
}
footer .policy {
    display: flex;
    gap: 35px;
    position: relative;
    padding-top: 0;
    margin-bottom: -12px;
    font-size: 16px;
}
footer .policy li a {
    color: #a9a9a9;
}
footer .policy li:not(:last-child)::after {
    content: ' |';
    position: absolute;
    margin-left: 15px;
    color: #a9a9a9;
}
footer .content {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-left: -170px; */
    width: 100%;
}
footer .content address {
    color: #fff1d4;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 21px;
    font-size: 17px;
    width: 100%;
    text-align: center;
}
footer .content h4 {
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 400;
}
footer .logo {
    margin-bottom: 25px;
}
footer .content address .license {
    display: block;
    width: 100%;
    margin-top: 1rem;
}
header .swap-menu-id {
    display: none;
    background: url(../images/icon-hambuger.png) no-repeat;
    border: 0px;
    cursor: pointer;
    width: 90px;
    height: 90px;
    margin: 0;
    vertical-align: middle;
    transition: 0.3s;
}
header .swap-menu-id.show {
    background: url(../images/icon-hambuger-close.png) no-repeat;
    transform: rotate(360deg);
}
header .list-menu-mobi-1 {
    display: none;
}
header .topbar-button-login {
    display: block;
    overflow: hidden;
    width: 117px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    text-decoration: none;
    margin: 5px 15px 0 0;
    color: #fff;
    background: url("../images/bg-bg-topbar-button-login.png") center center no-repeat;
    position: relative;
    float: right;
}
header .topbar-button-login:hover {
    color: #eacf73;
}
header .topbar-button-logout {
    display: block;
    overflow: hidden;
    width: 117px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    text-decoration: none;
    margin: 5px 15px 0 0;
    color: #fff;
    background: url("../images/bg-bg-topbar-button-logout.png") center center no-repeat;
    position: relative;
    float: right;
}
header .topbar-button-logout:hover {
    color: #eacf73;
}
/*==================== SUBPAGE ====================*/
.wrapper-subpage .wapper-nav-center {
    margin-bottom: -12px;
}
.wrapper-subpage .wrapper-subpage-content {
    background: url(../images/bg/bg-subpage-content.png) center top no-repeat;
    /* margin-bottom: -245px; */
    min-height: 800px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}
.wrapper-subpage .wrapper-subpage-content .cover {
    background: url(../images/bg/bg-subpage-content-cover.png) center top no-repeat;
}
.wrapper-subpage .post-detail-content {
    width: 1300px;
    border: 2px solid #4e0b00;
    border-top: initial;
    padding: 0 89px 250px 80px;
    margin: 42px 5px 0 5px;
    background: linear-gradient(to bottom, transparent 450px, #fffad4 0%);
}
.post-detail-title {
    width: 221px;
    height: 57px;
    background: url(../images/post-detail-title.png) center top no-repeat;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
.post-detail-content {
    /* margin: 6px 27px -15px 29px;
    border: 6px solid #000;
    padding: 20px 50px 50px 50px;
    background: #fffad4;
    width: 1299px; */
}
.wrapper.subpage .header-animation-icon {
    margin-bottom: -353px;
}
.subpage .header-animation-icon .text-trendy .top-trendy-title {
    display: none;
}
.subpage .box-trieu-van {
    margin-top: -129px;
}
.subpage .header-animation-icon .text-trendy .than-trieu-van {
    top: 34px;
}
.subpage .header-animation-icon .btn-video-trailer {
    display: none !important;
}
.subpage .header-animation-icon .list-icon-gift li:nth-child(1) {
    top: 14px;
    left: -467px;
}
.subpage .header-animation-icon .list-icon-gift li:nth-child(2) {
    top: -60px;
    left: -363px;
}
.subpage .header-animation-icon .list-icon-gift li:nth-child(3) {
    top: -60px;
    right: -414px;
}
.subpage .header-animation-icon .list-icon-gift li:nth-child(4) {
    top: 14px;
    right: -500px;
}
@keyframes floatBalloon {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-10px) rotate(-2deg) scale(1.02);
    }
    50% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    75% {
        transform: translateY(-8px) rotate(2deg) scale(0.98);
    }
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
}
main .wrapper-post-detail .list-news .list-new-navbar {
    display: flex;
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
    padding-top: 12px;
    padding-left: 12px;
    justify-content: center;
}
main .wrapper-post-detail .list-news .list-new-navbar ul {
    display: flex;
    gap: 2px;
}
main .wrapper-post-detail .list-news .list-new-navbar ul li {
    width: 128px;
    height: 35px;
    background-size: 100% !important;
}
main .wrapper-post-detail .list-news .list-new-navbar ul li:nth-child(1) {
    background: url(../images/slide/1.png) top no-repeat;
}
main .wrapper-post-detail .list-news .list-new-navbar ul li:nth-child(2) {
    background: url(../images/slide/2.png) top no-repeat;
}
main .wrapper-post-detail .list-news .list-new-navbar ul li:nth-child(3) {
    background: url(../images/slide/3.png) top no-repeat;
}
main .wrapper-post-detail .list-news .list-new-navbar ul li:nth-child(4) {
    background: url(../images/slide/4.png) top no-repeat;
}
main .wrapper-post-detail .list-news .list-new-navbar ul li.active:nth-child(1),
main .wrapper-post-detail .list-news .list-new-navbar ul li:nth-child(1):hover {
    background: url(../images/slide/1.png) bottom no-repeat;
}
main .wrapper-post-detail .list-news .list-new-navbar ul li.active:nth-child(2),
main .wrapper-post-detail .list-news .list-new-navbar ul li:nth-child(2):hover {
    background: url(../images/slide/2.png) bottom no-repeat;
}
main .wrapper-post-detail .list-news .list-new-navbar ul li.active:nth-child(3),
main .wrapper-post-detail .list-news .list-new-navbar ul li:nth-child(3):hover {
    background: url(../images/slide/3.png) bottom no-repeat;
}
main .wrapper-post-detail .list-news .list-new-navbar ul li.active:nth-child(4),
main .wrapper-post-detail .list-news .list-new-navbar ul li:nth-child(4):hover {
    background: url(../images/slide/4.png) bottom no-repeat;
}
main .wrapper-post-detail .list-news .list-new-navbar ul li a {
    display: block;
    text-indent: -9999px;
    width: 100%;
    height: 100%;
}
/* end NAV */
/* main .wrapper-post-detail {
    margin-bottom: 20px;
    margin-bottom: 11px;
    margin-top: 30px;
} */
main .wrapper-post-detail .breadcrums {
    height: 82px;
    padding-top: 9px;
    display: none;
}
.view-post-detail .breadcrums {
    display: flex !important;
}
main .wrapper-post-detail .breadcrums h1 {
    color: #745d34;
}
main .wrapper-post-detail .breadcrums p {
    font-size: 18px;
    margin-bottom: 5px;
    margin-left: 27px;
}
main .wrapper-post-detail .breadcrums p span,
main .wrapper-post-detail .breadcrums p a {
    text-decoration: none;
    color: #323232;
    font-weight: bold;
    position: relative;
}
main .wrapper-post-detail .breadcrums p a:nth-child(1):before {
    content: "\A";
    width: 24px;
    height: 19px;
    background: url(../images/icon-home.png) no-repeat;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -27px;
}
main .wrapper-post-detail .list-news.search-result {
    padding: 0;
}
main .wrapper-post-detail .list-news {
    padding: 15px 0;
}
main .wrapper-post-detail .list-news .list-category {
    list-style: none;
    margin-bottom: 20px;
}
main .wrapper-post-detail .list-news .list-category li {
    /* border-bottom: 2px solid #c7a494; */
    padding: 8px;
}
main .wrapper-post-detail .list-news .list-category li a {
    text-decoration: none;
}
main .wrapper-post-detail .list-news .news-item {
    display: flex;
}
main .wrapper-post-detail .list-news .news-item .thumb {
    flex: 0 0 233px;
    max-width: 233px;
    margin-right: 20px;
}
main .wrapper-post-detail .list-news .news-item .name {
    flex: 1;
    /* justify-content: center; */
    display: flex;
    /* flex-direction: column; */
    overflow: hidden;
}
.label-category {
    background: url(../images/label-category.png) center no-repeat;
    background-size: 100%;
    flex: 0 0 79px;
    height: 32px;
    display: flex;
    justify-content: center;
    color: #fff1a5;
    margin-right: 5px;
    padding-top: 5px;
}
main .wrapper-post-detail .list-news .news-item .name h4 {
    color: #cb3e1d;
    font-size: 18px;
    margin-bottom: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    font-weight: bold;
    padding-top: 5px;
}
main .wrapper-post-detail .list-news .news-item .name p {
    color: #626262;
    font-weight: bold;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
main .wrapper-post-detail .list-news .news-item .name .desc p {
    font-weight: normal;
    white-space: inherit;
    margin: 5px 0 0 0;
}
main .wrapper-post-detail .list-news .news-item .time {
    flex: 0 0 105px;
    max-width: 105px;
    flex-direction: column;
    display: flex;
    /* justify-content: center; */
    text-align: right;
    color: #55272a;
    font-weight: 500;
    font-size: 18px;
}
main .relateNews {
    margin-bottom: 50px;
}
main .relateNews>h3 {
    background: #bb4b16;
    color: #fffffd;
    text-transform: uppercase;
    font-size: 20px;
    padding-left: 22px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
main .relateNews .list-news {
    background: url(../images/bg-post-detail-content.png);
    background-size: cover;
}
main .relateNews .list-news .item {
    border-bottom: 1px solid #b3aea4;
    height: 50px;
}
main .relateNews .list-news .item:last-child {
    border-bottom: none;
}
main .relateNews .list-news .list .item::after {
    content: "\A";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: url(../images/icon-title-news.png) no-repeat;
    display: inline-block;
    position: relative;
    top: -33px;
    left: 1px;
}
main .relateNews .list-news .item a {
    display: flex;
    overflow: hidden;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    padding: 0 10px;
    text-decoration: none;
}
main .relateNews .list-news .item a:hover span,
main .relateNews .list-news .item a:hover {
    color: #c15314;
}
main .relateNews .list-news .item a h3 {
    flex: 1;
    color: #55272a;
    vertical-align: middle;
    font-size: 16px;
    line-height: 44px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-left: 10px;
    text-transform: uppercase;
}
main .relateNews .list-news .item a:hover h3 {
    color: #c15314;
}
main .relateNews .list-news .item a span {
    flex: 0 0 100px;
    max-width: 100px;
    text-align: right;
    color: #55272a;
    font-weight: bold;
    vertical-align: middle;
}
.btn-success:not(:disabled):not(.disabled).active:focus,
.btn-success:not(:disabled):not(.disabled):active:focus,
.show>.btn-success.dropdown-toggle:focus {
    box-shadow: none;
}
.popupVideo {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index: 40;
}
.popupVideo .mask {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .9);
}
.popupVideo .wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 100%;
    max-width: 600px;
    height: 500px;
    z-index: 2;
}
#paging {
    display: block;
    overflow: hidden;
    width: 100%;
    padding: 10px 0;
}
#paging .paging-inner {
    text-align: center;
}
#paging ul {
    display: inline-block;
    margin: 0;
}
#paging ul li {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    border: 0;
}
#paging ul li:hover {
    background: transparent;
}
#paging ul li a {
    display: block;
    overflow: hidden;
    line-height: 25px;
    width: 39px;
    height: 37px;
    text-decoration: none;
    color: #fffad4;
    margin: 0 2px;
    background: #41321f;
    font-size: 14px;
    border-radius: 50%;
    padding-top: 6px;
}
#paging ul li.active a,
#paging ul li a.active,
#paging ul li a:hover {
    color: #fffad4;
    background: #cb3e1d;
    border-radius: 50%;
}
#paging ul li a.active:hover {
    color: #646464;
}
#paging ul li a.prev-page {
    width: 39px;
    height: 37px;
    background: url(../images/arrow-pagination.png) top no-repeat;
}
#paging ul li a.prev-page:hover {
    background: url(../images/arrow-pagination.png) bottom no-repeat;
}
#paging ul li a.next-page {
    height: 37px;
    width: 39px;
    background: url(../images/arrow-pagination.png) top no-repeat;
    transform: rotate(180deg);
}
#paging ul li a.next-page:hover {
    background: url(../images/arrow-pagination.png) bottom no-repeat;
    transform: rotate(180deg);
}
/*template-content*/
.template-content {
    line-height: 25px;
    margin-bottom: 18px;
}
.template-content .template-title {
    margin: 0;
    padding: 0;
    display: block;
    font-size: 20px;
    line-height: 30px;
    color: #b2340e;
    font-weight: bold
}
.template-content .template-time {
    padding-bottom: 5px;
    display: block;
    color: #7c6453;
    font-style: italic;
    border-bottom: 1px solid #b27b42
}
.template-content .template-main .top-title-post-detail {
    font-weight: bold;
    color: #745d34;
    line-height: 33px;
    margin-bottom: 15px;
    text-align: center;
    font-size: 30px;
    border-bottom: 1px solid #bebcb2;
    padding: 20px 0;
}
.template-content .template-main * {
    color: #626262;
}
.template-content .template-main strong {
    color: #993a14;
}
.template-content .template-main h1 {
    font-size: 24px;
    padding-left: 0;
    margin-left: 0;
    background: url(../images/heading-icon-h1.png) 0 2px no-repeat;
    font-weight: bold;
    color: #800000;
    line-height: 28px;
    margin: 0 0 8px;
}
.template-content .template-main h1 * {
    font-size: 24px;
}
.template-content .template-main h2 {
    font-size: 18px;
    padding-left: 0;
    margin-left: 0;
    background: url(../images/heading-icon-h2.png) 0 -1px no-repeat;
    font-weight: bold;
    color: #ff8c00;
    line-height: 34px;
    margin: 0 0 8px;
}
.template-content .template-main h2 * {
    font-size: 18px
}
.template-content .template-main h3,
.template-content .template-main h4,
.template-content .template-main h5,
.template-content .template-main h6 {
    font-size: 16px;
    padding-left: 30px;
    margin-left: 0;
    background: url(../images/heading-icon-h3.png) 26px 5px no-repeat;
    padding: 0 0 8px;
}
.template-content .template-main h3 *,
.template-content .template-main h4 *,
.template-content .template-main h5 *,
.template-content .template-main h6 * {
    font-size: 16px
}
.template-content img {
    max-width: 100%
}
.template-content .template-main h2 a {
    text-decoration: underline;
}
.template-content .template-main ul {
    padding: 0 0 8px 25px;
    margin-left: 0;
    list-style: square;
}
.template-content .template-main ul li ul {
    list-style: disc;
}
.template-content .template-main ul li ul li ul {
    list-style: circle;
}
.template-content .template-main ol {
    padding: 0 0 0 25px;
    margin-left: 0
}
.template-content .template-main p {
    padding: 0;
    margin: 0 0 8px;
}
.template-content .template-main div {
    padding: 0 0 0 30px;
    margin-left: 0
}
.template-content .template-main>img {
    padding-left: 30px;
    margin-left: 0
}
.template-content .template-main img {
    max-width: 100%;
    margin: 14px 0 8px 0;
}
.template-content .template-main table {
    margin-left: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    background: #ffe69a;
    background: rgb(249 249 249 / 50%);
    width: auto !important;
}
.template-content .template-main table thead {
    text-align: center;
    color: #364759;
    font-size: 17px;
    background: rgb(175 175 175 / 50%);
}
.template-content .template-main table tbody tr td {
    padding: 4px;
}
/* menu mobile */
.menu-mobile {
    background-color: rgba(0, 0, 0, .9);
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    overflow: hidden;
    overflow-y: auto;
    width: 50%;
    height: 100%;
    font-size: 24px;
    text-transform: capitalize;
    z-index: 100;
    padding-top: 120px;
    transform: translateY(-100%);
    transition: transform 0.2s, opacity 0.2s;
}
.menu-mobile.active {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    transform: translateY(0);
    text-align: center;
}
.menu-mobile .nav-item {
    width: 100%;
    height: 100%;
}
.menu-mobile li {
    width: 195px;
    height: 49px;
}
.menu-mobile li a {
    width: 100%;
    height: 100%;
}
.menu-mobile li:nth-child(1) {
    background: url(../images/btn-tin-tuc.png) top center no-repeat;
    background-size: 100%;
}
.menu-mobile li:nth-child(2) {
    background: url(../images/btn-hero.png) top no-repeat;
    background-size: 100%;
}
.menu-mobile li:nth-child(3) {
    background: url(../images/btn-bxh.png) top left no-repeat;
    background-size: 100%;
}
.menu-mobile li:nth-child(4) {
    background: url(../images/btn-support-mb.png) top left no-repeat;
    background-size: 100%;
}
.menu-mobile li:nth-child(1):hover {
    background-position: bottom;
}
.menu-mobile li:nth-child(2):hover {
    background-position: bottom;
}
.menu-mobile li:nth-child(3):hover {
    background-position: bottom;
}
.menu-mobile li:nth-child(4):hover {
    background-position: bottom;
}
#mobileMenu {
    width: 100%;
    height: 100%;
    right: 0;
    top: 138px;
    background-color: rgba(0, 0, 0, 0.90);
    z-index: 8;
    overflow-y: auto;
    position: fixed;
    gap: 0;
    padding-top: 19px;
    display: none;
    padding-right: 56px;
}
#mobileMenu.show {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
}
#mobileMenu li.nav-item {
    height: 62px;
    border-left: none;
    width: 796px;
    text-align: center;
    background: url(../imgs/bg-button-mb.png) top center no-repeat;
    text-transform: uppercase;
    background-size: 100%;
}
#mobileMenu li.active,
#mobileMenu li.nav-item:hover {
    background: url(../imgs/bg-button-mb.png) bottom center no-repeat;
    background-size: 100%;
}
#mobileMenu li.active a {
    color: #d5c173;
}
#mobileMenu li a {
    display: flex;
}
.play-mobile {
    height: 58px;
    margin: 0 13px 10px 13px;
    padding: 6px;
    background: #2a1e18 url("../images/bg-login-mobile.png") top right no-repeat;
    border: 3px solid #000;
}
.mobile-button-login {
    float: left;
    display: block;
    width: 109px;
    height: 40px;
    text-align: left;
    text-indent: -9999px;
    background: url("../images/bg-btn-login-mobile.png") top left no-repeat;
}
.mobile-button-login:hover,
.mobile-button-login:active {
    background-position: bottom left;
}
.mobile-button-payment {
    float: right;
    display: block;
    width: 88px;
    height: 34px;
    text-align: left;
    text-indent: -9999px;
    margin-top: 3px;
    margin-left: 3px;
    background: url("../images/bg-btn-play-mobile.png") top right no-repeat;
}
.mobile-button-payment:hover,
.mobile-button-payment:active {
    background-position: bottom right;
}
.mobile-button-play {
    float: right;
    display: block;
    width: 88px;
    height: 34px;
    text-align: left;
    text-indent: -9999px;
    margin-top: 3px;
    background: url("../images/bg-btn-play-mobile.png") top left no-repeat;
}
.mobile-button-play:hover,
.mobile-button-play:active {
    background-position: bottom left;
}
.user-info-mobile {
    float: left;
    color: #ec7f1a;
    line-height: 16px;
    font-size: 13px;
    margin-top: 2px;
}
.user-info-mobile .highlight {
    color: #32a2f7;
    font-size: 15px;
}
.user-info-mobile .logout {
    margin-left: 10px;
    color: #cd3227;
    text-decoration: underline;
}
main .wrapper-news-content .wrapper-slide.slide-tablet {
    display: none;
}
main .wrapper-news-content .concat-slide-mobile {
    display: none;
}
.nav-tabs {
    border-bottom: none;
}
.content-main {
    display: flex;
    margin: 0 auto 15px;
    width: 100%;
    max-width: 940px;
    position: relative;
}
.content-main .content-left {
    flex: 0 0 350px;
    max-width: 350px;
    display: block;
    margin-right: 15px;
    width: 100%;
}
.content-left .iframe-id {
    margin-top: 5px;
}
.iframe-id {
    position: relative;
    background: #120401;
}
.iframe-id .wrap-iframe {
    position: relative;
    padding: 10px;
}
#iframe-menu-top,
#iframe-menu-left,
#iframe-id {
    width: 100%;
}
.wrapper .content-main .content-center {
    flex: 1;
    display: block;
    overflow: hidden;
    margin: 5px 0 0 0;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: #fff;
}
.grecaptcha-badge {
    width: 1px !important;
    height: 1px !important;
}
/*==================== ID ====================*/
.user-info {
    color: #373737;
    font-weight: 500;
}
.user-info-title {
    width: 221px;
    height: 57px;
    background: url(../images/user-info-title.png) center top no-repeat;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 40px;
}
.sub-title {
    color: #642600;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 28px;
}
.page-title {
    color: #d04824;
    margin-bottom: 0;
}
.id-left-menu-nologin li,
.id-left-menu li {
    width: 217px;
    height: 48px;
    background-size: 100%;
    text-indent: -9999px;
}
li.phone-action-left-menu {
    background: url(../images/id/8.png) top no-repeat;
}
li.phone-action-left-menu:hover {
    background: url(../images/id/8.png) bottom no-repeat;
}
li.btn-forget-password {
    background: url(../images/id/7.png) top no-repeat !important;
}
li.btn-forget-password.active,
li.btn-forget-password:hover {
    background: url(../images/id/7.png) bottom no-repeat !important;
    background-size: 100% !important;
}
.id-left-menu li:nth-child(1) {
    background: url(../images/id/1.png) top no-repeat;
}
.id-left-menu li:nth-child(1).active,
.id-left-menu li:nth-child(1):hover {
    background-position: bottom;
}
.id-left-menu li:nth-child(2) {
    background: url(../images/id/2.png) top no-repeat;
}
.id-left-menu li:nth-child(2).active,
.id-left-menu li:nth-child(2):hover {
    background-position: bottom;
}
.id-left-menu li:nth-child(3) {
    background: url(../images/id/3.png) top no-repeat;
}
.id-left-menu li:nth-child(3).active,
.id-left-menu li:nth-child(3):hover {
    background-position: bottom;
}
.id-left-menu li.btn-logout-left-menu {
    background: url(../images/id/4.png) top no-repeat;
}
.id-left-menu li.btn-logout-left-menu.active,
.id-left-menu li.btn-logout-left-menu:hover {
    background-position: bottom;
}
.id-left-menu-nologin li:nth-child(1) {
    background: url(../images/id/5.png) top no-repeat;
}
.id-left-menu-nologin li:nth-child(1).active,
.id-left-menu-nologin li:nth-child(1):hover {
    background-position: bottom;
}
.id-left-menu-nologin li:nth-child(2) {
    background: url(../images/id/6.png) top no-repeat;
}
.id-left-menu-nologin li:nth-child(2).active,
.id-left-menu-nologin li:nth-child(2):hover {
    background-position: bottom;
}
.id-left-menu-nologin li:nth-child(3) {
    background: url(../images/id/4.png) top no-repeat;
}
.id-left-menu-nologin li:nth-child(3).active,
.id-left-menu-nologin li:nth-child(3):hover {
    background-position: bottom;
}
.btn-form-submit {
    border: initial;
    outline: initial;
    width: 107px;
    height: 41px;
    background: url(../images/id/btn-form-submit.png) top left no-repeat;
    text-indent: -9999px;
}
.btn-form-submit:hover {
    background-position: bottom;
}
.user-box input[type="text"],
.user-box input[type="password"],
.user-box input[type="email"],
.user-box input[type="number"],
.user-box select {
    height: 45px;
    border: 2px solid #c8c8c8;
    font-size: 16px;
}
.user-box input::placeholder {
    color: #c8c8c8;
    opacity: 1;
}
.user-box .form-label {
    color: #454545;
}
.user-table .row {
    border: 1px solid #aaaaaa;
    border-bottom: 1px solid #eee;
    padding: 27px 0;
    background: #fff;
}
.user-table {
    font-size: 20px;
    margin: 25px 15px 0;
    color: #6a6a6a;
}
.user-table .info-row {
    padding: 19px 0;
}
.user-table .info-row i {
    margin-right: 8px;
}
.user-table .info-row:last-child {
    border-bottom: 1px solid #aaaaaa;
}
.user-table .label-text {
    color: #6a6a6a;
    padding-left: 35px;
    font-weight: 600;
}
.user-table .value-text {
    color: #000000;
    padding-left: 40px;
}
.user-table .action-link {
    text-decoration: none;
    font-weight: 500;
    color: #ee7b00;
}
.user-table .action-link:hover {
    text-decoration: underline;
}
.wrapper-avatar {
    width: 81px;
    height: 81px;
    margin-left: 22px;
}
.user-table .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.user-table .txt-username,
.user-table .txt-userid {
    color: #000000;
}
.user-table .card {
    border-radius: 15px;
}
/*==================== FOOTER ====================*/
footer .company {
    display: none;
}
footer address .footer-list-logo {
    margin-left: -200px;
}
footer address .logo-verify {
    background: url(../images/logo-verify.png) no-repeat;
    width: 204px;
    height: 70px;
}
footer address .company-name {
    background: url(../images/company-name.png) no-repeat;
    width: 383px;
    height: 27px;
}
/*==================== RESPONSIVE ====================*/
@media screen and (max-width: 1220px) {
    main {
        height: 4072px;
    }
    /*==================== HEADER ====================*/
    header {
        background: none;
    }
    header .wrapper-header-top {
        background: #000000;
        height: 139px;
        text-align: right;
        padding: 0 45px;
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        position: fixed;
        z-index: 100;
    }
    header .logo {
        display: block;
        width: 220px;
        height: 136px;
        background: url(../images/logo.png) top center no-repeat;
        background-size: 100%;
    }
    header nav {
        justify-content: space-between;
        padding: 115px 53px;
        margin-bottom: 270px;
    }
    header nav .nav-right {
        flex-direction: column;
        justify-content: unset;
        gap: 10px;
        align-items: flex-end;
    }
    header nav.show .navbar-nav {
        display: block;
    }
    header nav .navbar-nav li:last-child {
        border-bottom: 0px solid #6a5730;
    }
    header nav .navbar-nav li a {
        background: transparent;
        text-indent: unset;
        color: #eacf73;
        font-size: 14px;
        height: 34px;
        line-height: 34px;
        font-weight: bold;
        padding: 0 0 0 25px !important;
    }
    header nav li.active a {
        color: #fff;
    }
    header .list-menu-mobi-1 {
        display: flex;
        justify-content: flex-end;
        gap: 29px;
        flex-grow: 1;
        margin-right: 29px;
    }
    header .list-menu-mobi-1 li a {
        display: block;
        width: 100%;
        height: 100%;
    }
    header .list-menu-mobi-1 li:nth-child(1),
    header .list-menu-mobi-1 li:nth-child(2) {
        width: 298px;
        height: 104px;
    }
    header .list-menu-mobi-1 li:nth-child(1) a {
        background: url(../images/btn-napthe.png) left top no-repeat;
    }
    header .list-menu-mobi-1 li:nth-child(1):hover a {
        background: url(../images/btn-napthe.png) left bottom no-repeat;
    }
    header .list-menu-mobi-1 li:nth-child(2) a {
        background: url(../images/btn-taigame.png) left top no-repeat;
    }
    header .list-menu-mobi-1 li:nth-child(2):hover a {
        background: url(../images/btn-taigame.png) left bottom no-repeat;
    }
    header nav {
        padding: 160px 18px 0;
        margin-bottom: 0;
    }
    header nav .nav-item .logo {
        display: none;
    }
    header nav .nav-item .logo-warning {
        display: block !important;
        width: 197px;
        height: 175px;
        background: url(../images/item-logo18.png) no-repeat;
        background-size: 100%;
        background-position: 0 -21px;
    }
    .floatMenu {
        display: none !important;
    }
    .download-main .download-option {
        flex-direction: column;
    }
    main .relateNews {
        margin-right: 41px;
        padding-bottom: 10px;
    }
    /*==================== WRAPPER NAVBAR DOWNLOAD ====================*/
    .header-animation-icon {
        margin-bottom: -53px;
    }
    .header-animation-icon .wrapper-trailer {
        left: 268px;
        top: 1057px;
        position: absolute !important;
    }
    .header-animation-icon .btn-video-trailer {
        background: url(../images/btn-video-trailer.png) top no-repeat;
        width: 234px;
        height: 234px;
        top: 0;
        left: 1px;
        z-index: 2;
    }
    .header-animation-icon .trailer-cover {
        top: 0;
    }
    .header-animation-icon .btn-video-trailer:hover {
        background: url(../images/btn-video-trailer.png) bottom no-repeat;
        background-size: 100%;
    }
    .header-animation-icon .list-icon-gift {
        display: flex;
        top: -157px;
    }
    .header-animation-icon .list-icon-gift li:nth-child(1) {
        background: url(../images/item-ngan-luong-vang.png) no-repeat;
        width: 114px;
        height: 112px;
        top: 679px;
        left: -311px;
    }
    .header-animation-icon .list-icon-gift li:nth-child(2) {
        background: url(../images/item-vip-10.png) no-repeat;
        width: 135px;
        height: 133px;
        top: 599px;
        left: -231px;
    }
    .header-animation-icon .list-icon-gift li:nth-child(3) {
        background: url(../images/item-role.png) no-repeat;
        width: 135px;
        height: 133px;
        top: 599px;
        right: -411px;
    }
    .header-animation-icon .list-icon-gift li:nth-child(4) {
        background: url(../images/item-ve-quay.png) no-repeat;
        width: 108px;
        height: 106px;
        top: 679px;
        right: -489px;
    }
    .header-animation-icon .text-trendy {
        top: -317px;
    }
    .subpage .header-animation-icon .text-trendy {
        top: -83px;
    }
    .header-animation-icon .text-trendy .top-trendy-title {
        width: 725px;
        height: 247px;
        background: url(../images/title-top-trendy.png) no-repeat;
        top: 825px;
        z-index: 3;
        background-size: 100%;
        left: 38px;
    }
    .subpage .box-trieu-van {
        margin-top: -360px;
    }
    .box-trieu-van {
        position: relative;
        width: 756px;
        height: 759px;
        background: url(../images/bg-than-trieu-van-tl.png) no-repeat;
        background-size: 100%;
        top: 299px;
        left: 16px;
    }
    .header-animation-icon .text-trendy .than-trieu-van {
        width: 635px;
        height: 790px;
        background: url(../images/than-trieu-van-tl.png) no-repeat;
        top: 38px;
        background-size: 100%;
    }
    .subpage .header-animation-icon .text-trendy .than-trieu-van {
        top: 34px;
    }
    .header-animation-icon .text-trendy .than-trieu-van::after {
        width: 635px;
        height: 790px;
        background-image: url(../images/than-trieu-van-tl-close.png);
    }
    .subpage .header-animation-icon .list-icon-gift {
        top: 138px;
    }
    .wapper-nav-center .header-download .btn-app {
        display: none;
    }
    .wapper-nav-center .header-download ul {
        display: none !important;
    }
    .wapper-nav-center {
        width: 100%;
        flex-direction: column;
        align-items: center;
        margin-bottom: 218px;
    }
    .clouds {
        top: 506px;
    }
    .wapper-nav-center .header-download {
        background: unset;
        margin-bottom: 304px;
    }
    .wapper-nav-center .header-download .btn-payment,
    .wapper-nav-center .header-download .btn-play-now {
        display: none;
    }
    /* .wapper-nav-center .header-download .btn-payment {
        width: 225px;
        height: 206px;
        background: url(../images/btn-payment-tablet.png) top no-repeat;
    }
    .wapper-nav-center .header-download .btn-payment:hover {
        background: url(../images/btn-payment-tablet.png) bottom no-repeat;
    } */
    .wapper-nav-center .header-download .btn-download-tablet {
        margin-top: 0;
        margin-left: 0;
        display: flex !important;
        width: 225px;
        height: 206px;
        background: url(../images/btn-download-tablet.png) top no-repeat;
    }
    .wapper-nav-center .header-download .btn-download-tablet:hover {
        background: url(../images/btn-download-tablet.png) bottom no-repeat;
    }
    .wapper-nav-center .header-download .btn-playnow-tablet {
        margin-top: 0;
        margin-left: 0;
        display: flex !important;
        width: 225px;
        height: 206px;
        background: url(../images/btn-payment-tablet.png) top no-repeat;
    }
    .wapper-nav-center .header-download .btn-playnow-tablet:hover {
        background: url(../images/btn-payment-tablet.png) bottom no-repeat;
    }
    .wrapper.subpage .header-animation-icon {
        margin-bottom: -25px;
    }
    .subpage .header-animation-icon .list-icon-gift li:nth-child(1) {
        top: 168px;
        left: -321px;
    }
    .subpage .header-animation-icon .list-icon-gift li:nth-child(2) {
        top: 100px;
        left: -232px;
    }
    .subpage .header-animation-icon .list-icon-gift li:nth-child(3) {
        top: 100px;
        right: -414px;
    }
    .subpage .header-animation-icon .list-icon-gift li:nth-child(4) {
        top: 168px;
        right: -500px;
    }
    .subpage .wapper-nav-center .header-download {
        background: unset;
        margin-bottom: 30px;
    }
    .wrapper-subpage .wrapper-subpage-content {
        background: url(../images/bg/bg-subpage-content-cover-tablet.png) center top no-repeat;
        background-size: 100%;
        margin-bottom: -245px;
        min-height: 1000px;
        display: flex;
        justify-content: center;
        padding-top: 8px;
        width: 790px;
    }
    .wrapper-subpage .post-detail-content {
        width: 754px;
        padding: 0 54px;
        padding: 0 63px;
        margin: 23px 0 0;
        background: linear-gradient(to bottom, transparent 450px, #fffad4 0%);
    }
    .view-post-detail .post-detail-content {
        background: linear-gradient(to bottom, transparent 320px, #fffad4 0%);
    }
    .id-content-wrapper {
        flex-direction: column;
    }
    .id-left-menu-nologin,
    .id-left-menu {
        width: 100%;
        flex-direction: row !important;
        margin-bottom: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .id-left-menu-nologin li,
    .id-left-menu li {
        width: 158px;
        height: 35px;
        background-size: 100% !important;
    }
    .user-table .info-row:nth-child(1) {
        flex-direction: row;
    }
    .user-info-text {
        width: auto;
    }
    .user-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .user-info-title {
        margin-bottom: 2px;
    }
    .wrapper-id-content .post-detail-content {
        display: flex;
        flex-direction: column;
    }
    .wrapper-login .user-info .dropdown-menu li a {
        padding: 0;
    }
    .user-table {
        font-size: 16px;
        margin: 0;
        width: 100%;
    }
    main .wrapper-news-content .nav {
        order: 2;
        padding-top: 5px;
        height: 50px;
        margin-bottom: -7px;
        margin-left: 6px;
    }
    main .wrapper-news-content .news-content {
        order: 3;
        width: 720px;
        padding: 0;
        margin-left: 22px;
    }
    main .wrapper-news-content .news-content .item-hot a {
        width: 100%;
        height: 34px;
        margin-bottom: 0;
        background-size: 100%;
    }
    main .wrapper-news-content .right .item-hot a:hover {
        background: #831300;
    }
    main .wrapper-news-content .news-content .item-hot h3 {
        flex-grow: 1;
        margin-left: 29px;
        padding-top: 4px;
        font-size: 15px;
    }
    main .wrapper-news-content .news-content .item-hot span {
        margin-right: 30px;
        display: none;
    }
    main .wrapper-news-content .news-content .item-hot span.time-short {
        display: flex;
        margin-right: 6px;
        font-size: 15px;
        padding-top: 4px;
    }
    main .wrapper-news-content .right .list-news .list .item a h3 {
        font-size: 15px;
    }
    main .wrapper-news-content .right .list-news .list .item a span {
        display: none;
    }
    main .wrapper-news-content .right .list-news .list .item a span.time-short {
        display: flex;
        font-size: 15px;
    }
    main .wrapper-news-content .right .list-news .list .item a::before {
        top: 3px;
    }
    #dropdown-select2-play .select2-container {
        width: auto;
    }
    main .container {
        max-width: unset;
        padding-top: 20px;
        margin-bottom: 210px;
    }
    .swap-menu-id {
        display: inline-block !important;
    }
    .homepage .wrapper {
        background: #000000 url(../images/bg/bg-tablet.jpg) center -74px no-repeat;
        overflow: hidden;
    }
    .homepage .wrapper.subpage {
        background: #000000 url(../images/bg/bg-subpage-tablet.jpg) top center no-repeat;
    }
    .homepage .wrapper.subpage .wrapper-post-detail .list-news .list-new-navbar ul {
        display: flex;
        gap: 4px;
    }
    .homepage .wrapper.subpage .wrapper-post-detail .list-news .news-item .thumb {
        flex: 0 0 190px;
        max-width: 190px;
        margin-right: 20px;
    }
    .homepage .wrapper.subpage .wrapper-post-detail .list-news .news-item .name h4 {
        font-size: 15px;
    }
    .homepage .wrapper.subpage .wrapper-post-detail .list-news .news-item .time {
        justify-content: initial;
        font-size: 15px;
    }
    .bg-static-effect {
        animation: unset !important;
        -webkit-animation: unset !important;
    }
    /*==================== TIN TUC ====================*/
    main .wrapper-news-content {
        width: 100%;
        background: unset;
        padding-top: 0;
        margin-bottom: -67px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        gap: 6px;
        height: 100%;
    }
    main .wrapper-news-content .list-news {
        margin: 0 0 -23px 0;
    }
    main .wrapper-news-content .right .list {
        height: 191px;
    }
    main .wrapper-news-content .right .container-more {
        background: none;
        margin: 0;
        justify-content: space-between;
        align-items: center;
    }
    main .wrapper-news-content .right .container-more:hover {
        background: unset;
    }
    main .wrapper-news-content .right .container-more .search-lite {
        width: 100%;
        flex: 0 0 574px;
        max-width: 574px;
        height: 30px;
    }
    main .wrapper-news-content .right .more {
        width: 113px;
        height: 31px;
        background-size: 100% !important;
    }
    main .wrapper-news-content .nav ul li:nth-child(1) {
        background: url(../images/slide/1.png) top no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li:nth-child(2) {
        background: url(../images/slide/2.png) top no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li:nth-child(3) {
        background: url(../images/slide/3.png) top no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li:nth-child(4) {
        background: url(../images/slide/4.png) top no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li:nth-child(1):hover {
        background: url(../images/slide/1.png) bottom no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li:nth-child(2):hover {
        background: url(../images/slide/2.png) bottom no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li:nth-child(3):hover {
        background: url(../images/slide/3.png) bottom no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li:nth-child(4):hover {
        background: url(../images/slide/4.png) bottom no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li {
        width: 89px;
        height: 24px;
    }
    main .wrapper-news-content .wrapper-slide {
        flex: 1;
        max-width: unset;
        padding: 0;
        margin: 0;
    }
    main .wrapper-news-content .right {
        flex: 1;
        width: auto;
        max-width: unset;
        margin-left: 0;
        margin-top: 2px;
        padding: 0;
        background: unset;
    }
    .wrapper-support {
        margin-bottom: 245px;
    }
    .wrapper-support ul {
        gap: 8px;
    }
    .wrapper-support ul li a {
        background-size: 100% !important;
    }
    .wrapper-support ul li:nth-child(1) {
        width: 166px;
        height: 242px;
    }
    .wrapper-support ul li:nth-child(2) {
        width: 166px;
        height: 242px;
    }
    .wrapper-support ul li:nth-child(3) {
        width: 166px;
        height: 242px;
    }
    .wrapper-support ul li:nth-child(4) {
        width: 166px;
        height: 242px;
    }
    .wrapper-hero {
        margin-bottom: 975px;
    }
    .wrapper-hero h2 {
        width: 320px;
        background: url(../images/title-hero.png) no-repeat center center;
        background-size: 100%;
        margin-bottom: 20px;
        height: 76px;
    }
    .wrapper-hero .list-class-hero {
        position: unset !important;
        flex-direction: row !important;
    }
    .wrapper-hero .list-class-hero li {
        position: unset !important;
    }
    .wrapper-hero .slide-hero {
        /* background: url(../images/hero/bg-tablet.png) center no-repeat; */
        width: 1078px;
        height: 582px;
        padding-top: 0;
        background-size: 100%;
        margin-top: -24px;
        align-items: center;
        margin-bottom: -67px;
        z-index: 1;
    }
    .hero-content.tab-pane.fade {
        position: absolute;
        top: 0;
        left: 0;
    }
    .hero-content.tab-pane.fade.active {
        position: inherit;
    }
    .hero-tabs {
        position: initial;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .wrapper-hero .slide-hero .hero-content .wrap-img {
        width: 663px;
        position: inherit;
        left: 0;
        transition: opacity 0.5s ease, transform 0.5s ease;
        top: 282px;
        background: url(../images/hero/bg-tablet.png) 0 83px no-repeat;
        width: 820px;
        height: 582px;
        background-size: 100%;
        margin-top: -125px;
    }
    .wrapper-hero .slide-hero .hero-content .wrap-img img {
        width: 615px;
        height: 100%;
        object-fit: contain;
    }
    .page-3 .slide-hero {
        justify-content: flex-start !important;
    }
    .wrapper-hero .page-3-content.active,
    .wrapper-hero .page-3-content {
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .hero-tabs li {
        width: 209px;
        height: 8px;
    }
    .hero-tabs button.prev {
        margin-top: -63px;
    }
    .hero-tabs button.next {
        margin-top: -63px;
    }
    .wrapper-hero .slide-hero .slide-hero-list {
        margin-left: 0;
    }
    .wrapper-hero .slide-hero .slide-hero-list .hero-item .hero-avatar {
        width: 575px;
        height: auto;
        background: url(../images/hero/bg-hero.png) 7px 56px no-repeat;
        background-size: 100%;
    }
    .wrapper-hero .slide-hero .slide-hero-list .hero-item .hero-avatar span {
        display: block;
        width: 600px;
        height: 600px;
    }
    .wrapper-hero .slide-hero .slide-hero-list .hero-item .hero-avatar span {
        background-size: 100% !important;
    }
    .wrapper-hero .slide-hero .slide-hero-list .hero-item .hero-name {
        width: 228px;
        right: -90px;
        top: -80px;
        background-size: 100% !important;
    }
    /*==================== RANKING TABLE ====================*/
    .wrapper-ranking-table .wrapper-ranking-content {
        width: 820px;
        height: 691px;
        background-size: 100%;
        padding-top: 61px;
        position: initial !important;
    }
    .wrapper-ranking-table .character-tieu-kieu {
        width: 820px;
        height: 790px;
        left: 342px;
        top: -72px;
        background-size: 100%;
        display: none;
    }
    .wrapper-ranking-content ul li {
        width: 120px;
        height: 34px;
    }
    .wrapper-ranking-content ul {
        gap: 6px;
    }
    .wrapper-ranking-table h1 {
        width: 320px;
        background-size: 100%;
        margin-bottom: -30px;
    }
    .wrapper-ranking-table .content-slide-bottom {
        max-width: 845px;
        height: auto;
        /* background: url(../images/bg-slide-bottom-tablet.png) center no-repeat; */
        align-items: initial !important;
        margin-left: 0;
    }
    .wrapper-ranking-table .slide-bottom {
        flex: 0 0 580px;
        max-width: 580px;
        margin-right: 0px;
        margin-top: 40px;
    }
    .wrapper-ranking-table .slide-bottom li {
        width: 580px;
        max-height: 588px;
        background: #fff;
    }
    .wrapper-ranking-table .slide-bottom .owl-carousel .nav-btn {
        width: 50px !important;
        height: 51px;
    }
    .wrapper-ranking-table .slide-bottom .owl-carousel .nav-btn.next-slide {
        top: 130px !important;
        right: -100px;
        background-size: 100%;
    }
    .wrapper-ranking-table .slide-bottom .owl-carousel .nav-btn.prev-slide {
        top: 130px;
        left: -95px;
        background-size: 100%;
    }
    .wrapper-ranking-table .slide-bottom .owl-carousel .nav-btn.next-slide:hover,
    .wrapper-ranking-table .slide-bottom .owl-carousel .nav-btn.prev-slide:hover {
        background-size: 100%;
    }
    .scroll-inner::-webkit-scrollbar {
        width: 5px;
    }
    .scroll-inner::-webkit-scrollbar:horizontal {
        height: 5px;
    }
    .scroll-inner::-webkit-scrollbar-track {
        background-color: rgba(204, 204, 204, 0.3);
    }
    .scroll-inner::-webkit-scrollbar-thumb {
        border-radius: 15px;
        background: rgba(204, 204, 204, 0.5);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }
    .wrapper-bottom {
        width: auto;
        height: 631px;
        background: url(../images/bg/bg-02-tablet.png) center center no-repeat;
        margin-left: 0;
        margin-bottom: 64px;
    }
    main .wrapper-news-title {
        margin-bottom: -72px;
        width: 320px;
        height: 77px;
        background-size: 100%;
    }
    main .wrapper-news-content .wrapper-slide.slide-pc {
        display: none;
    }
    main .wrapper-news-content .concat-slide {
        background: url(../images/slide/bg-slide-tablet.png) top no-repeat;
        width: 820px;
        height: 425px;
        /* margin: 0 auto; */
        background-size: 100%;
        display: flex;
        justify-content: center;
    }
    main .wrapper-news-content .wrapper-slide.slide-tablet {
        display: block;
        height: 0;
        padding-top: 112px;
        padding-left: 43px;
    }
    main .wrapper-news-content .wrapper-slide.slide-tablet ul {
        margin-bottom: 0;
        padding-left: 0;
        width: 732px;
    }
    main .wrapper-news-content .wrapper-slide .owl-carousel {
        margin-left: -1px;
        padding-top: 23px;
    }
    main .wrapper-news-content .wrapper-slide.slide-tablet li {
        width: auto;
        max-height: 284px;
        padding: 0;
    }
    main .wrapper-news-content .wrapper-slide.slide-tablet li a img {
        width: auto !important;
    }
    main .wrapper-news-content .wrapper-slide.slide-tablet .owl-dots {
        position: absolute;
        right: 10px;
        bottom: 5px;
    }
    main .wrapper-news-content .wrapper-slide.slide-tablet .owl-dots button {
        margin-left: 15px;
    }
    main .wrapper-news-content .wrapper-slide.slide-tablet .owl-dots button:first-child {
        margin-left: 0;
    }
    main .wrapper-news-content .wrapper-slide.slide-tablet .owl-dots button span {
        display: block;
        overflow: hidden;
        background-color: #828282;
        width: 11px;
        height: 11px;
        border: 1px solid #573b00;
    }
    main .wrapper-news-content .wrapper-slide.slide-tablet .owl-dots button.active span {
        background-color: #f60c00;
    }
    /*==================== POST LIST ====================*/
    .wrapper-news-right {
        background: url(../images/slide/bg-news-tablet.png) top no-repeat;
        background-size: 100%;
        width: 761px;
        height: 434px;
        padding-top: 10px;
    }
    main .wrapper-news-content .right .list-news .list .item a h3 {
        line-height: 31px;
        margin-left: 32px;
    }
    main .wrapper-news-content .right .list-news .item {
        padding: 0 !important;
    }
    main .wrapper-news-content .right .list-news .list .item a {
        line-height: 31px;
        padding: 0;
    }
    .template-content .template-main .top-title-post-detail {
        font-size: 23px;
        padding: 11px 0;
    }
    main .wrapper-post-detail .list-new-navbar ul li.active:nth-child(1) main .wrapper-post-detail .list-new-navbar ul li:nth-child(1) {
        background: url(../images/slide/1.png) top no-repeat !important;
        background-size: 100% !important;
    }
    main .wrapper-post-detail .list-new-navbar ul li.active:nth-child(2) main .wrapper-post-detail .list-new-navbar ul li:nth-child(2) {
        background: url(../images/slide/2.png) top no-repeat !important;
        background-size: 100% !important;
    }
    main .wrapper-post-detail .list-new-navbar ul li.active:nth-child(3) main .wrapper-post-detail .list-new-navbar ul li:nth-child(3) {
        background: url(../images/slide/3.png) top no-repeat !important;
        background-size: 100% !important;
    }
    main .wrapper-post-detail .list-new-navbar ul li.active:nth-child(4) main .wrapper-post-detail .list-new-navbar ul li:nth-child(4) {
        background: url(../images/slide/4.png) top no-repeat !important;
        background-size: 100% !important;
    }
    main .wrapper-post-detail .list-new-navbar ul li {
        width: 140px !important;
        height: 38px !important;
    }
    main .wrapper-post-detail .breadcrums {
        max-width: 818px;
        height: auto;
        margin: 0;
        padding-left: 8px;
    }
    main .wrapper-post-detail .breadcrums p {
        font-size: 16px;
        margin-left: 20px;
    }
    main .wrapper-post-detail .breadcrums p a:nth-child(1):before {
        width: 15px;
        height: 100%;
        top: 3px;
        left: -20px;
        background-size: 100%;
    }
    main .wrapper-post-detail {
        width: auto;
    }
    main .wrapper-post-detail .list-news {
        padding: 13px 0;
    }
    main .wrapper-post-detail .list-news .list-new-navbar {
        padding-top: 2px;
        padding-left: 0px;
    }
    /* main .wrapper-post-detail .post-detail-content {
        border: none;
    } */
    footer {
        height: 385px;
        padding-top: 40px;
    }
    footer address {
        padding: 0;
        margin: 0;
        text-align: center;
    }
    footer p {
        margin: 0;
    }
    footer .company-name {
        padding: 0 20px;
    }
    footer .policy {
        padding-top: 10px;
    }
    footer .logo {
        margin-bottom: 0;
    }
    footer .company {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    footer .company .name-mb {
        display: block;
        padding: 0;
        margin: 0;
        margin-left: 15px;
    }
    footer .company .company-logo {
        width: 75px;
    }
    footer .content address .license {
        margin-top: 0;
    }
    footer address .footer-list-logo {
        margin-left: -116px;
    }
    footer address .logo-verify {
        width: 145px;
        height: 50px;
        background-size: 100%;
    }
    footer.footer-subpage {
        padding-top: 80px;
        padding-bottom: 10px;
        height: auto;
    }
    footer.footer-subpage .policy {
        padding-top: 50px;
    }
    .social {
        margin-bottom: 30px;
        margin-top: 65px;
        gap: 15px;
    }
    .social li {
        width: 140px;
        height: 141px;
    }
    .social li:nth-child(1) a {
        background: url(../images/icon/facebook.png) no-repeat;
    }
    .social li:nth-child(1) a:hover {
        background: url(../images/icon/facebook-hover.png) no-repeat;
    }
    .social li:nth-child(2) a {
        background: url(../images/icon/fb-group.png) no-repeat;
    }
    .social li:nth-child(2) a:hover {
        background: url(../images/icon/fb-group-hover.png) no-repeat;
    }
    .social li:nth-child(3) a {
        background: url(../images/icon/tiktok.png) no-repeat;
    }
    .social li:nth-child(3) a:hover {
        background: url(../images/icon/tiktok-hover.png) no-repeat;
    }
    .social li:nth-child(4) a {
        background: url(../images/icon/youtube.png) no-repeat;
    }
    .social li:nth-child(4) a:hover {
        background: url(../images/icon/youtube-hover.png) no-repeat;
    }
    footer .content {
        margin-left: 0;
        max-width: 680px;
    }
    footer .content address {
        font-size: 14px;
    }
    .wrapper-subpage {
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 400px;
    }
}
@media screen and (max-width: 600px) {
    main {
        height: 3167px;
        margin-bottom: 20px;
    }
    .homepage .wrapper {
        background: #000000 url(../images/bg/bg-mobile.jpg) center -112px no-repeat;
        height: auto;
    }
    .homepage .wrapper.subpage {
        min-height: 2869px;
        background: #000000 url(../images/bg/bg-subpage-mb.jpg) center top no-repeat;
    }
    .bg-static-effect {
        animation: unset !important;
        -webkit-animation: unset !important;
    }
    header .logo {
        width: 112px;
        height: 72px;
    }
    header .wrapper-header-top {
        height: 75px;
        padding: 0 18px;
    }
    header .swap-menu-id {
        background-size: 100%;
        width: 45px;
        height: 46px;
    }
    header .swap-menu-id.show {
        background-size: 100%;
    }
    header .list-menu-mobi-1 {
        gap: 12px;
        margin-right: 12px;
    }
    header .list-menu-mobi-1 li:nth-child(1),
    header .list-menu-mobi-1 li:nth-child(2) {
        width: 151px;
        height: 53px;
    }
    header .list-menu-mobi-1 li:nth-child(1) a {
        background-size: 100%;
    }
    header .list-menu-mobi-1 li:nth-child(1):hover a {
        background-size: 100%;
    }
    header .list-menu-mobi-1 li:nth-child(2) a {
        background-size: 100%;
    }
    header .list-menu-mobi-1 li:nth-child(2):hover a {
        background-size: 100%;
    }
    header nav {
        padding: 99px 17px 0 17px;
        margin-bottom: 80px;
    }
    header nav .navbar-nav li {
        width: 48px;
        height: 48px;
        background-size: 100% !important;
    }
    header nav .nav-right .top-menu-icon-star {
        width: 157px;
        height: 19px;
        top: -13px;
        left: 42px;
        background-size: 100%;
    }
    header nav .nav-right {
        margin-right: 0;
    }
    header nav .navbar-nav {
        gap: 0px;
    }
    header nav .nav-item .logo {
        display: none;
    }
    header nav .nav-item .logo-warning {
        width: 114px;
        height: 122px;
        background-size: 100% !important;
        margin-top: -93px;
        margin-left: -18px;
        background: url(../images/item-logo18-mb.png) no-repeat;
        background-position: inherit;
    }
    header nav .nav-item .btn-login {
        width: 145px;
        height: 32px;
        background-size: 100%;
    }
    header nav .nav-item .btn-login:hover {
        background-size: 100%;
    }
    .box-trieu-van {
        width: 325px;
        height: 530px;
        background: url(../images/bg-than-trieu-van.png) top center no-repeat;
        top: -29px;
        left: 12px;
        background-size: 100%;
    }
    .subpage .box-trieu-van {
        margin-top: -135px;
    }
    .subpage .header-animation-icon .text-trendy .than-trieu-van {
        top: 2px;
    }
    .subpage .header-animation-icon .list-icon-gift {
        top: 47px;
    }
    .header-animation-icon .text-trendy .than-trieu-van {
        width: 308px;
        height: 518px;
        background: url(../images/than-trieu-van.png) no-repeat;
        background-size: 100%;
        top: 2px;
        z-index: 2;
        left: -4px;
    }
    .header-animation-icon .text-trendy .than-trieu-van::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 308px;
        height: 518px;
        background-image: url(../images/than-trieu-van-close.png);
        /* Thay bằng đường dẫn ảnh nhắm mắt của bạn */
        background-size: 100%;
        background-repeat: no-repeat;
        z-index: 3;
        opacity: 0;
        /* Ban đầu ẩn ảnh nhắm mắt đi */
        /* Tổng chu kỳ là 2.5 giây (bao gồm cả thời gian mở mắt chờ và thời gian chớp mắt) */
        animation: blinkAnimation 2s linear infinite;
    }
    .clouds {
        display: none;
    }
    .header-animation-icon .text-trendy {
        top: -73px;
    }
    .header-animation-icon .list-icon-gift {
        top: -76px;
        left: 177px;
    }
    .subpage .header-animation-icon .text-trendy {
        top: 32px;
    }
    .header-animation-icon .text-trendy .top-trendy-title {
        width: 373px;
        height: 127px;
        top: 189px;
        left: -21px;
    }
    .header-animation-icon .list-icon-gift li:nth-child(1) {
        width: 75px;
        height: 75px;
        top: 148px;
        left: -206px;
        z-index: 2;
        background-size: 100%;
    }
    .header-animation-icon .list-icon-gift li:nth-child(2) {
        width: 100px;
        height: 100px;
        top: 88px;
        left: -131px;
        z-index: 2;
        background-size: 100%;
    }
    .header-animation-icon .list-icon-gift li:nth-child(3) {
        width: 100px;
        height: 100px;
        top: 88px;
        right: -126px;
        background-size: 100%;
        z-index: 2;
    }
    .header-animation-icon .list-icon-gift li:nth-child(4) {
        width: 75px;
        height: 75px;
        top: 148px;
        right: -175px;
        z-index: 2;
        background-size: 100%;
    }
    .wrapper.subpage .header-animation-icon {
        margin-bottom: -175px;
    }
    .subpage .header-animation-icon .list-icon-gift li:nth-child(1) {
        width: 75px;
        height: 75px;
        top: 28px;
        left: -197px;
        z-index: 2;
        background-size: 100%;
    }
    .subpage .header-animation-icon .list-icon-gift li:nth-child(2) {
        width: 100px;
        height: 100px;
        top: -39px;
        left: -140px;
        z-index: 2;
        background-size: 100%;
    }
    .subpage .header-animation-icon .list-icon-gift li:nth-child(3) {
        width: 100px;
        height: 100px;
        top: -39px;
        right: -133px;
        background-size: 100%;
        z-index: 2;
    }
    .subpage .header-animation-icon .list-icon-gift li:nth-child(4) {
        width: 75px;
        height: 75px;
        top: 28px;
        right: -177px;
        z-index: 2;
        background-size: 100%;
    }
    .header-animation-icon {
        margin-bottom: -121px;
        height: 312px;
    }
    .header-animation-icon .wrapper-trailer {
        top: -110px;
        left: 105px;
    }
    .header-animation-icon .trailer-cover {
        width: 135px;
        height: 135px;
        top: 10px;
        left: -120px;
        background-size: 100%;
    }
    .header-animation-icon .btn-video-trailer {
        width: 135px;
        height: 135px;
        top: 10px;
        left: -120px;
        background-size: 100%;
    }
    .wapper-nav-center {
        margin-bottom: 0;
    }
    .subpage .wapper-nav-center {
        margin-bottom: -60px !important;
    }
    .wapper-nav-center .logo-center {
        width: 180px;
        height: 154px;
        background-size: 100%;
        margin-bottom: -48px;
    }
    /*==================== WRAPPER NAVBAR DOWNLOAD ====================*/
    .wapper-nav-center .header-download {
        transform: scale(0.6);
        margin-bottom: 26px;
    }
    .subpage .wapper-nav-center .header-download {
        background: unset;
        margin-bottom: 29px;
    }
    /*==================== TIN TUC ====================*/
    .subpage .wrapper-subpage .wrapper-subpage-content {
        background: url(../images/bg/bg-subpage-content-cover-mb.png) center top no-repeat;
        margin-bottom: -245px;
        min-height: 1000px;
        display: flex;
        justify-content: center;
        padding-top: 8px;
        background-size: 100%;
        width: 380px;
    }
    .subpage .wrapper-subpage .wrapper-subpage-content.view-id-detail {
        padding-top: 35px;
    }
    .id-left-menu-nologin li,
    .id-left-menu li {
        height: 35px;
    }
    .btn-forget-password {
        height: 35px;
    }
    .sub-title {
        text-align: center;
    }
    .page-title {
        text-align: center;
    }
    .id-form-description {
        text-align: center;
    }
    #mobileMenu {
        top: 74px;
    }
    .wrapper-login .user-info {
        width: 174px;
        height: 39px;
        padding: 0 9px;
    }
    .wrapper.subpage .wrapper-subpage .post-detail-content {
        width: 365px;
        padding: 0 54px;
        padding: 0 13px;
        margin: -18px 0 0;
        background: linear-gradient(to bottom, transparent 194px, #fffad4 0%);
    }
    .wrapper.subpage .user-info-title,
    .wrapper.subpage .post-detail-title {
        width: 120px;
        height: 38px;
        background-size: 100%;
    }
    main .wrapper-news {
        margin-bottom: 86px;
    }
    main .wrapper-news-content {
        /* background: url(../images/bg-news-mobile-3.png) top center no-repeat;
        height: auto;
        margin-bottom: 20px;
        background-size: 100% 100%;
        padding: 0% 4% 2%; */
        gap: 14px;
        margin-left: 0;
    }
    main .wrapper-news-content .concat-slide {
        display: none;
    }
    main .wrapper-news-content .concat-slide-mobile {
        background: url(../images/slide/bg-slide-mobile.png) top no-repeat;
        width: 400px;
        height: 348px;
        background-size: 100%;
        display: flex;
        justify-content: center;
    }
    main .wrapper-news-title {
        margin-bottom: -15px;
    }
    main .wrapper-news-content .wrapper-slide.slide-tablet {
        display: none;
    }
    main .wrapper-news-content .wrapper-slide.slide-mobile {
        display: block;
        height: 0;
        padding-top: 54px;
        padding-left: 11px;
    }
    main .wrapper-news-content .wrapper-slide.slide-mobile ul {
        margin-bottom: 0;
        padding-left: 0;
        width: 367px;
    }
    main .wrapper-news-content .wrapper-slide .owl-carousel {
        margin-left: 5px;
        padding-top: 0px;
    }
    main .wrapper-news-content .wrapper-slide.slide-mobile li {
        width: 367px;
        max-height: 417px;
        padding: 0;
    }
    main .wrapper-news-content .wrapper-slide.slide-mobile .owl-dots {
        position: absolute;
        bottom: 0;
        left: 45%;
    }
    main .wrapper-news-content .wrapper-slide.slide-mobile .owl-dots button {
        margin-left: 4px;
    }
    main .wrapper-news-content .wrapper-slide.slide-mobile .owl-dots button:first-child {
        margin-left: 0;
    }
    main .wrapper-news-content .wrapper-slide.slide-mobile .owl-dots button span {
        background: url(../images/icon/icon-dot-slide.png) top no-repeat;
        width: 18px;
        height: 17px;
        display: block;
        overflow: hidden;
    }
    main .wrapper-news-content .wrapper-slide.slide-mobile .owl-dots button.active span {
        background: url(../images/icon/icon-dot-slide.png) bottom no-repeat;
        width: 18px;
        height: 17px;
    }
    main .wrapper-news-right {
        background: url(../images/slide/bg-news-mobile.png) top no-repeat;
        background-size: 100%;
        width: 391px;
        height: 347px;
        padding-top: 10px;
    }
    main .wrapper-news-content .nav {
        height: 30px;
        padding-top: 4px;
        margin-bottom: 6px;
        gap: 9px;
        padding-left: 3px;
    }
    main .wrapper-news-content .nav ul li {
        width: 80px;
        height: 26px;
    }
    main .wrapper-news-content .news-content {
        width: 100%;
        margin-bottom: 9px;
        margin-left: 0;
        padding: 0 19px 0 29px;
    }
    main .wrapper-news-content .news-content .item-hot a {
        height: 32px;
        background: url(../images/bg-news-hot.png) top no-repeat;
    }
    main .wrapper-news-content .news-content .item-hot h3 {
        margin-left: 29px;
        font-size: 12px;
        max-width: 380px;
        /* line-height: 13px; */
        padding-top: 3px;
    }
    main .wrapper-news-content .news-content .item-hot span.time-short,
    main .wrapper-news-content .news-content .item-hot span {
        margin-right: 28px;
        font-size: 12px;
    }
    main .wrapper-news-content .right .list-news .list .item a {
        margin-left: 10px;
        padding: 0;
    }
    main .wrapper-news-content .list-news {
        margin-bottom: 10px;
        padding: 0;
    }
    main .wrapper-news-content .right {
        max-width: 100%;
        height: 334px;
    }
    main .wrapper-news-content .right .list-news .list .item a h3,
    main .wrapper-news-content .right .list-news .list .item a span {
        font-size: 12px;
        margin-left: 26px;
    }
    main .wrapper-news-content .right .list-news .list .item a::before {
        top: 4px;
        left: -6px;
    }
    main .wrapper-news-content .right .list-news .list .item a span {
        margin-right: 0;
    }
    main .wrapper-news-content .right .list-news .list .item a span.time-short {
        font-size: 12px;
    }
    main .wrapper-news-content .right .list {
        height: 157px;
    }
    main .wrapper-news-content .right .list-news .item {
        padding: 0 !important;
    }
    main .wrapper-news-content .right .container-more .search-lite {
        width: 100%;
        flex: 0 0 224px;
        max-width: 224px;
        height: 31px;
        margin-right: 0;
    }
    main .wrapper-news-content .right .container-more .search-lite input {
        font-size: 12px;
    }
    main .wrapper-news-content .right .container-more .search-lite button {
        justify-content: center;
        display: flex;
        align-items: center;
    }
    main .wrapper-news-content .right .container-more .search-lite button img {
        width: 15px;
    }
    main .wrapper-news-content .right .more {
        width: 104px;
        height: 28px;
    }
    main .wrapper-news-content .right .more:hover {
        background: url(../images/btn-xem-them-mb-hover.png) no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li:nth-child(1) li a {
        background: url(../images/slide/1.png) top no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li:nth-child(2) li a {
        background: url(../images/slide/2.png) top no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li:nth-child(3) li a {
        background: url(../images/slide/3.png) top no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li:nth-child(4) li a {
        background: url(../images/slide/4.png) top no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li:nth-child(1) li a:hover {
        background: url(../images/slide/1.png) bottom no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li:nth-child(2) li a:hover {
        background: url(../images/slide/2.png) bottom no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li:nth-child(3) li a:hover {
        background: url(../images/slide/3.png) bottom no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li:nth-child(4) li a:hover {
        background: url(../images/slide/4.png) bottom no-repeat;
        background-size: 100%;
    }
    main .wrapper-news-content .nav ul li {
        width: 82px;
        height: 22px;
    }
    .wrapper-support {
        margin-bottom: 100px;
        display: flex;
        justify-content: center;
    }
    .wrapper-support ul {
        gap: 14px;
        flex-wrap: wrap;
        max-width: 420px;
    }
    .wrapper-support ul li {
        background-size: 100% !important;
    }
    .wrapper-support ul li:nth-child(1) {
        width: 160px;
        height: 233px;
        background: url(../images/support-1.png) bottom no-repeat;
    }
    .wrapper-support ul li:nth-child(2) {
        width: 160px;
        height: 233px;
        background: url(../images/support-2.png) bottom no-repeat;
    }
    .wrapper-support ul li:nth-child(3) {
        width: 160px;
        height: 233px;
        background: url(../images/support-3.png) bottom no-repeat;
    }
    .wrapper-support ul li:nth-child(4) {
        width: 160px;
        height: 233px;
        background: url(../images/support-4.png) bottom no-repeat;
    }
    /**==================== HERO ====================*/
    .wrapper-hero .list-class-hero li {
        width: 63px;
        height: 34px;
        background-size: 100% !important;
    }
    .wrapper-hero {
        margin-bottom: 800px;
    }
    .wrapper-hero h2 {
        width: 260px;
        height: 44px;
        margin-bottom: 35px;
    }
    .wrapper-hero .slide-hero .hero-content.active {
        display: flex;
        justify-content: center;
    }
    .wrapper-hero .slide-hero .hero-content .wrap-img {
        width: 600px;
        position: initial;
        padding-top: 172px;
        background: url(../images/hero/bg-tablet.png) center 323px no-repeat;
        background-size: 100%;
        height: 643px;
    }
    .wrapper-hero .slide-hero .hero-content .wrap-img img {
        width: 198px;
        height: 100%;
        object-fit: scale-down;
    }
    .wrapper-hero .slide-hero .hero-content .wrap-img img.hero-pc {
        display: none;
    }
    .wrapper-hero .slide-hero .hero-content .wrap-img img.hero-mb {
        display: block;
    }
    .wrapper-hero .slide-hero {
        width: 576px;
        height: 609px;
        padding-top: 0;
        margin-top: 130px;
        margin-left: 0;
        margin-bottom: -272px;
    }
    .hero-tabs button.prev {
        margin-left: 10px;
        margin-top: 037px;
        background-size: 100%;
    }
    .hero-tabs li {
        width: 155px;
        height: 8px;
    }
    .hero-tabs .nav-control,
    .hero-tabs button {
        width: 66px;
        height: 66px;
        display: none !important;
    }
    .wrapper-hero .slide-hero .thumb {
        order: 2;
        margin-top: 0;
    }
    .wrapper-hero .slide-hero .thumb ul {
        flex-direction: row;
        gap: 30px;
    }
    .wrapper-hero .slide-hero .thumb ul li {
        width: 55px;
        height: 56px;
        background-size: 100% !important;
    }
    .wrapper-hero .slide-hero .thumb ul li:nth-child(1) {
        left: -22px;
    }
    .wrapper-hero .slide-hero .thumb ul li:nth-child(2) {
        top: 9px;
        left: 30px;
    }
    .wrapper-hero .slide-hero .thumb ul li:nth-child(3) {
        top: 30px;
        left: 97px;
    }
    .wrapper-hero .slide-hero .thumb ul li:nth-child(4) {
        top: 30px;
        left: 167px;
    }
    .wrapper-hero .slide-hero .thumb ul li:nth-child(5) {
        top: 9px;
        left: 234px;
    }
    .wrapper-hero .slide-hero .thumb ul li:nth-child(6) {
        top: -25px;
        left: 290px;
    }
    .wrapper-hero .slide-hero .slide-hero-list {
        margin-left: 0;
    }
    .wrapper-hero .slide-hero .slide-hero-list .hero-item .hero-avatar {
        width: 320px;
        background: url(../images/hero/bg-hero.png) 7px 23px no-repeat;
        background-size: 100%;
    }
    .wrapper-hero .slide-hero .slide-hero-list .hero-item .hero-avatar span {
        width: 320px;
        height: 320px;
    }
    .wrapper-hero .slide-hero .slide-hero-list .hero-item .hero-name {
        width: 87px;
        right: -18px;
        top: 0;
    }
    .wrapper-ranking-table h1 {
        width: 260px;
        height: 65px;
        margin-bottom: 10px;
    }
    .wrapper-ranking-table .wrapper-ranking-content {
        z-index: 2;
        width: 420px;
        height: 493px;
        background: url(../images/bg-ranking-table-mb.png) no-repeat;
        background-size: 100%;
        padding-top: 59px;
    }
    footer {
        background: url(../images/bg-footer-subpage.png) center center no-repeat !important;
        height: auto !important;
    }
    footer address .footer-list-logo {
        margin-left: 0;
        flex-direction: column !important;
        gap: 15px !important;
    }
    footer .logo {
        margin-bottom: 15px;
        width: 96px;
    }
    .social {
        margin-bottom: 20px;
        margin-top: 0;
        gap: 20px;
    }
    .social li {
        width: 70px !important;
        height: 71px !important;
    }
    .social li a {
        background-size: 100% !important;
    }
    footer .policy {
        margin-left: 0;
        padding-top: 0;
        gap: 16px;
        margin-bottom: 10px;
    }
    footer .policy li a {
        font-size: 12px;
        color: #fff;
    }
    footer .policy li:not(:last-child)::after {
        margin-left: 6px;
    }
    footer .content {
        margin-left: 10px;
        margin-right: 10px;
    }
    footer .content address {
        font-size: 10px;
        line-height: 20px;
        padding: 14px 5px;
    }
    footer .company-name {
        font-size: 16px;
        width: 320px !important;
        height: 24px !important;
        background-size: 100% !important;
    }
    footer .company .name-mb {
        margin-left: 8px;
    }
    footer .company .company-logo {
        width: 55px;
    }
    footer.footer-subpage .policy {
        padding-top: 0;
    }
    main .wrapper-post-detail {
        margin-top: 32px;
    }
    main .container {
        padding-top: 0;
        margin-bottom: 0;
    }
    main .wrapper-post-detail .breadcrums {
        padding-left: 0;
    }
    main .wrapper-post-detail .breadcrums h1 {
        font-size: 18px;
    }
    main .wrapper-post-detail .breadcrums p {
        font-size: 14px;
        margin-bottom: 15px;
    }
    main .wrapper-post-detail .breadcrums p a:nth-child(1):before {
        width: 14px;
        top: 2px;
    }
    main .wrapper-post-detail .list-news {
        padding: 0;
    }
    main .wrapper-post-detail .list-news .list-new-navbar {
        margin-bottom: 10px;
        padding-top: 3px;
        padding-left: 0;
    }
    main .wrapper-post-detail .list-news .list-new-navbar ul {
        gap: 3px;
    }
    main .wrapper-post-detail .list-new-navbar ul li {
        width: 70px !important;
        height: 23px !important;
    }
    main .wrapper-post-detail .list-news .list-category li {
        padding: 10px 0;
    }
    .homepage .wrapper.subpage .wrapper-post-detail .list-news .news-item .thumb {
        flex: 0 0 120px;
        max-width: 120px;
        margin-right: 10px;
    }
    .label-category {
        justify-content: center;
        padding-top: 5px;
        font-size: 11px;
        width: 63px;
        height: 26px;
    }
    main .wrapper-post-detail .list-news .news-item .name {
        flex-wrap: wrap;
    }
    .homepage .wrapper.subpage .wrapper-post-detail .list-new-navbar ul li {
        width: 70px !important;
        height: 19px !important;
    }
    /* main .wrapper-post-detail .list-news .news-item .thumb {
        display: none;
    } */
    main .relateNews .list-news .item a h3,
    main .relateNews .list-news .item a span,
    main .wrapper-post-detail .list-news .news-item .name h4,
    main .wrapper-post-detail .list-news .news-item .time {
        font-size: 14px !important;
    }
    .subpage .relateNews .list-news .item a h3,
    .subpage .relateNews .list-news .item a span,
    .subpage .wrapper-post-detail .list-news .news-item .name h4,
    .subpage .wrapper-post-detail .list-news .news-item .time {
        font-size: 12px !important;
    }
    .homepage .wrapper.subpage .wrapper-post-detail .list-news .news-item .time {
        display: none;
    }
    .template-content .template-main .top-title-post-detail {
        font-size: 18px;
    }
    main .relateNews {
        margin-right: 0;
        padding-bottom: 0;
    }
    main .relateNews>h3 {
        padding-left: 10px;
        font-size: 16px;
    }
    .template-content .template-main img {
        width: auto !important;
        height: auto !important;
    }
    #paging ul li a {
        font-size: 14px;
    }
    .menu-mobile {
        padding-top: 85px;
    }
    .menu-mobile .nav-item a {
        padding: 9px 0;
        font-size: 14px;
    }
    .id-left-menu-nologin, .id-left-menu {
        justify-content: initial;
    }
}
/*==================== EFFECTS ====================*/
.trans-x {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.trans-x:hover {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
}
.trans-y {
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}
.trans-y:hover {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
}
/* ĐỊNH NGHĨA NHỊP CHỚP MẮT (Tổng thời gian 2.5s) */
@keyframes blinkAnimation {
    0%,
    88% {
        opacity: 0;
    }
    /* Từ 0s đến 2.2s: Mắt luôn mở (ảnh nhắm mắt tàng hình) */
    92% {
        opacity: 1;
    }
    /* Giây thứ 2.3: Nhắm mắt lại thật nhanh trong tích tắc */
    96%,
    100% {
        opacity: 0;
    }
    /* Giây thứ 2.4 - 2.5: Mở mắt ra lại ngay lập tức và kết thúc vòng lặp */
}
@keyframes colorchange_tablet {
    0% {
        background-image: url('../images/bg/bg-tablet.jpg');
    }
    33% {
        background-image: url('../images/bg/bg-tablet.jpg');
    }
    66% {
        background-image: url('../images/bg/bg-tablet-hover.jpg');
    }
    100% {
        background-image: url('../images/bg/bg-tablet-hover.jpg');
    }
}
@-webkit-keyframes colorchange_tablet {
    0% {
        background-image: url('../images/bg/bg-tablet.jpg');
    }
    33% {
        background-image: url('../images/bg/bg-tablet.jpg');
    }
    66% {
        background-image: url('../images/bg/bg-tablet-hover.jpg');
    }
    100% {
        background-image: url('../images/bg/bg-tablet-hover.jpg');
    }
}
@keyframes colorchange_mobile {
    0% {
        background: url('../images/bg/bg-mobile.jpg') center top no-repeat;
    }
    33% {
        background: url('../images/bg/bg-mobile.jpg') center top no-repeat;
    }
    66% {
        background: url('../images/bg/bg-mobile-hover.jpg') center top no-repeat;
    }
    100% {
        background: url('../images/bg/bg-mobile-hover.jpg') center top no-repeat;
    }
}
@-webkit-keyframes colorchange_mobile {
    0% {
        background: url('../images/bg/bg-mobile.jpg') center top no-repeat;
    }
    33% {
        background: url('../images/bg/bg-mobile.jpg') center top no-repeat;
    }
    66% {
        background: url('../images/bg/bg-mobile-hover.jpg') center top no-repeat;
    }
    100% {
        background: url('../images/bg/bg-mobile-hover.jpg') center top no-repeat;
    }
}
/* ---- xoay tron ---- */
.spin-circle-effect {
    width: 100%;
    position: absolute;
    top: 26px;
    left: 3px;
    animation-name: spinright;
    animation-duration: 1500ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 1;
}
@keyframes spinright {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* ---- shine ---- */
.shine-effect {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 999;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    mask-size: cover;
    -webkit-mask-image: url(../images/btn-app.png);
    mask-image: url(../images/btn-app.png);
}
.shine-effect:before {
    content: "";
    z-index: 10;
    position: absolute;
    height: 200%;
    width: 200%;
    background: linear-gradient(transparent 0%,
            rgba(255, 255, 255, 0.1) 45%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0.1) 55%,
            transparent 100%);
    transition: all 1s;
    transform: rotate(45deg);
    animation: shine 2s infinite forwards;
}
@keyframes shine {
    0% {
        top: 0;
        left: -100%;
    }
    100% {
        top: -100%;
        left: 100%;
    }
}
/* ---- clouds container ---- */
@keyframes moveUpmoveDown {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(1deg);
    }
    /* Di chuyển lên trên 15px */
    100% {
        transform: translateY(0) rotate(0deg);
    }
    /* Trở về vị trí cũ */
}
@keyframes moveUpmoveDownTieuKieu {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) rotate(0deg);
    }
    /* Di chuyển lên trên 15px */
    100% {
        transform: translateY(0) rotate(0deg);
    }
    /* Trở về vị trí cũ */
}
/* ---- clouds container ---- */
.clouds {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    top: 259px;
    left: 0;
}
.cloud-item {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    will-change: transform;
    opacity: 0.7;
}
.cloud-item {
    background-image: url(../images/clouds.png);
}
/* ---- particles.js container ---- */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.fa-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    transition: transform 0.3s;
    margin-left: 36px;
}
.fa-caret.rotate {
    transform: rotate(180deg);
}
.arrow-down-icon {
    background-image: url('../images/icon/icon-down.png');
    background-size: 100%;
    height: 8px;
    transform: rotate(0);
    transition: transform 0.3s ease-in-out;
    position: absolute;
    top: 8px;
    right: 5px;
    width: 15px;
}
.user-dropdown__name:has(+ .user-dropdown__menu.active) .arrow-down-icon {
    transform: rotate(180deg);
}
/*==================== NOLOGIN ====================*/
.wrapper-required-login {
    margin-top: 30px;
    max-width: 640px;
}
.wrapper-required-login h1 {
    margin-bottom: 30px;
    font-size: 28px;
}
.wrapper-required-login h1 a {
    color: #745d34;
    text-decoration: underline;
}
.wrap-select .radio-label:first-child {
    margin: 0;
}
.wrap-select {
    gap: 50px;
    justify-content: space-between;
}
.wrap-select .radio-label {
    height: 230px;
    width: 230px;
}
.wrap-select .radio-label:first-child {
    background-image: url('../images/btn-atm.png');
    background-size: 100%;
}
.wrap-select .radio-label:last-child {
    background-image: url('../images/btn-momo.png');
    background-size: 100%;
}
.wrap-select .radio-label:first-child:hover {
    background-image: url('../images/btn-atm-hover.png');
    background-size: 100%;
}
.wrap-select .radio-label:last-child:hover {
    background-image: url('../images/btn-momo-hover.png');
    background-size: 100%;
}
@media (max-width: 1024px) and (min-width: 501px) {
    .cate-nologin {
        margin-top: 15px;
    }
    .wrap-select {
        margin-top: 55px;
    }
}
@media (max-width: 600px) {
    .wrapper-required-login {
        margin-top: 20px;
    }
    .wrapper-required-login h1 {
        font-size: 16px;
        margin-bottom: 20px;
    }
    .wrap-select .radio-label {
        height: 130px;
        width: 130px;
    }
    .wrap-select {
        gap: 12px;
    }
    .wrap-select .wrap-select {
        gap: 10px;
    }
}
/*==================== CC HERO ====================*/
:root {
    --stage-top: #c9924f;
    --stage-bottom: #7a4a24;
    --desc-bg: rgba(12, 22, 42, .88);
    --desc-border: #e8912f;
}
* {
    box-sizing: border-box;
}
.hero-section {
    display: flex;
    gap: 28px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
}
/* ---------- LEFT: faction nav (đổi toàn bộ nội dung bên phải) ---------- */
.faction-nav {
    display: flex;
    flex-direction: column;
    width: 120px;
    margin-left: -57px;
    padding-top: 0;
    z-index: 3;
    cursor: pointer;
    list-style: none;
    margin-top: 50px;
    margin-right: 13px;
}
.faction-btn a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.faction-btn {
    text-indent: -9999px;
    width: 90px;
    height: 49px;
    position: relative;
    transition: transform .2s;
}
.faction-btn:hover {
    background-position: bottom;
}
.faction-btn:nth-child(1) {
    top: -21px;
    left: 41px;
    background: url(../images/hero/icon/1.png) top no-repeat;
}
.faction-btn:nth-child(2) {
    top: -16px;
    left: 22px;
    background: url(../images/hero/icon/2.png) top no-repeat;
}
.faction-btn:nth-child(3) {
    top: -11px;
    left: 0px;
    background: url(../images/hero/icon/3.png) top no-repeat;
}
.faction-btn:nth-child(4) {
    top: -6px;
    left: -18px;
    background: url(../images/hero/icon/4.png) top no-repeat;
}
.faction-btn:nth-child(5) {
    top: -1px;
    left: -39px;
    background: url(../images/hero/icon/5.png) top no-repeat;
}
.faction-btn:nth-child(6) {
    top: 4px;
    left: -58px;
    background: url(../images/hero/icon/6.png) top no-repeat;
}
.faction-btn:nth-child(1):hover,
.faction-btn.active:nth-child(1) {
    background: url(../images/hero/icon/1.png) bottom no-repeat;
    background-size: 100%;
}
.faction-btn.active:nth-child(2),
.faction-btn:nth-child(2):hover {
    background: url(../images/hero/icon/2.png) bottom no-repeat;
    background-size: 100%;
}
.faction-btn.active:nth-child(3),
.faction-btn:nth-child(3):hover {
    background: url(../images/hero/icon/3.png) bottom no-repeat;
    background-size: 100%;
}
.faction-btn.active:nth-child(4),
.faction-btn:nth-child(4):hover {
    background: url(../images/hero/icon/4.png) bottom no-repeat;
    background-size: 100%;
}
.faction-btn.active:nth-child(5),
.faction-btn:nth-child(5):hover {
    background: url(../images/hero/icon/5.png) bottom no-repeat;
    background-size: 100%;
}
.faction-btn.active:nth-child(6),
.faction-btn:nth-child(6):hover {
    background: url(../images/hero/icon/6.png) bottom no-repeat;
    background-size: 100%;
}
/* ---------- RIGHT: stage (nền đứng yên) ---------- */
.hero-content {
    position: relative;
    flex: 1;
    min-height: 460px;
    width: 1092px;
    margin-left: -135px;
    margin-top: -14px;
}
/* nền của khu vực hero + skill: KHÔNG đổi khi chuyển tướng */
.stage-bg {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(180deg, var(--stage-top) 0%, var(--stage-bottom) 100%); */
    background: url(../images/hero/bg.png) center 0 no-repeat;
    background-size: 100%;
    border-radius: 28px;
    /* box-shadow: inset 0 0 50px rgba(0, 0, 0, .35); */
    z-index: 1;
    width: 1092px;
    height: 566px;
    background-position: 0 34px;
}
/* nền của block mô tả: KHÔNG đổi khi chuyển tướng, chỉ đổi text bên trong */
.desc-box {
    position: absolute;
    top: 61px;
    right: 123px;
    width: 222px;
    height: 238px;
    background: url(../images/hero/bg-desc.png) center 0 no-repeat;
    background-size: 100%;
    padding: 22px;
    z-index: 3;
    font-size: 13.5px;
    line-height: 1.55;
    color: #ffed74;
}
#modalDescText,
#descText {
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 191px;
    /* Cấu hình cho Firefox (Chỉ chỉnh được độ rộng và màu cơ bản) */
    scrollbar-width: thin;
    /* Làm thanh cuộn mỏng đi */
    scrollbar-color: transparent transparent;
    /* Màu con lăn + Màu nền thanh cuộn */
    transition: scrollbar-color 0.3s ease;
}
/* Khi hover vào box trên Firefox thì hiện cục cuộn */
#descText:hover,
#modalDescText:hover {
    scrollbar-color: #8e2507 transparent;
}
/* --- CẤU HÌNH CHO CHROME, SAFARI, EDGE --- */
#descText::-webkit-scrollbar,
#modalDescText::-webkit-scrollbar {
    width: 4px;
    /* Giữ cố định 4px để tạo khoảng không, tránh bị giật chữ */
}
/* Thanh nền luôn luôn trong suốt */
#descText::-webkit-scrollbar-track,
#modalDescText::-webkit-scrollbar-track {
    background: transparent;
}
/* Mặc định cục cuộn trong suốt (vô hình) */
#descText::-webkit-scrollbar-thumb,
#modalDescText::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    /* Tạo hiệu ứng đổi màu mượt mà, không bị hiện ra đột ngột */
    transition: background 0.3s ease;
}
/* Khi hover chuột vào #descText -> Hiện cục cuộn lên */
#descText:hover::-webkit-scrollbar-thumb,
#modalDescText:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    /* Hiện màu xám nhẹ tinh tế */
}
/* Khi hover trực tiếp vào chính cục cuộn -> Cục cuộn đậm hơn để dễ nhìn */
#descText::-webkit-scrollbar-thumb:hover,
#modalDescText::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5) !important;
}
/* ---------- Carousel: chỉ phần này thay đổi (hình hero + skill) ---------- */
#heroCarousel {
    position: relative;
    z-index: 2;
    padding: 0;
}
.hero-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-left: -7px;
    margin-top: 144px;
    height: 400px;
}
.info-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    margin-top: 52px;
    margin-left: -461px;
}
.top-info-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 142px;
}
.name-figure {
    width: 290px;
    height: 147px;
    position: absolute;
    margin-bottom: -40px;
}
.desc-class-figure {
    width: 230px;
    height: 50px;
    position: relative;
    top: 125px;
}
.hero-placeholder {
    width: 339px;
    height: 300px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* padding: 8px; */
    font-weight: 700;
    color: #fff;
    /* text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .4); */
    margin-bottom: 0;
    margin-left: 32px;
    position: absolute;
}
.bottom-info-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-left: -53px;
}
.skills-label {
    width: 145px;
    height: 32px;
    background: url(../images/hero/skill-label.png) center 0 no-repeat;
    background-size: 100%;
    margin-top: -37px;
    text-indent: -9999px;
}
.skills-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    width: 404px;
    height: 127px;
}
.skill-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 76px;
}
.skill-circle {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .55);
    margin-bottom: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}
.skill-level {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #222;
    border: 1px solid #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.skill-name {
    font-size: 10.5px;
    text-align: center;
    color: #fff;
    line-height: 1.25;
}
/* ---------- Controls: mũi tên + nút tên tướng. Cả 2 nằm bên trong
     #heroCarousel để Bootstrap tự đồng bộ trạng thái active. ---------- */
.hero-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 0 0;
    margin-left: 157px;
    position: absolute;
    margin-top: -41px;
}
.arrow-btn {
    width: 117px;
    height: 120px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    background-size: 100%;
    padding-top: 10px;
}
.arrow-btn[data-bs-slide="prev"] {
    background: url(..//images/hero/arrow-prev.png) no-repeat center;
    background-position: 16px 32px;
}
.arrow-btn[data-bs-slide="next"] {
    background: url(..//images/hero/arrow-next.png) no-repeat center;
    background-position: -14px 32px;
}
.arrow-btn:hover {
    filter: brightness(1.2);
}
/* Bootstrap indicators tái sử dụng làm nút tên tướng (button-hero-internal) */
.carousel-indicators {
    position: static;
    margin: 0;
    gap: 0;
}
.carousel-indicators [data-bs-target] {
    position: relative;
    width: auto;
    height: auto;
    text-indent: 0;
    opacity: 1;
    box-sizing: border-box;
    border: initial;
    outline: initial;
    width: 261px;
    height: 132px;
    filter: grayscale(1);
    text-indent: -9999px;
}
.carousel-indicators [data-bs-target]:hover,
.carousel-indicators [data-bs-target].active {
    filter: grayscale(0);
}
/* ============================================================
     RESPONSIVE
     - Tablet (≤ 991.98px): faction-nav chuyển thành hàng ngang ở
       trên cùng, nội dung bên phải giữ nguyên như desktop.
     - Mobile (≤ 767.98px): kế thừa layout tablet ở trên, cộng thêm:
       ẩn desc-box + skills-row, hiện nút "Xem thêm" mở modal chứa
       mô tả + skill; 2 mũi tên rớt xuống dòng dưới nút tên tướng.
     ============================================================ */
/* ---- Tablet: nav ngang, nằm trên cùng ---- */
@media (max-width: 1220px) {
    .hero-section {
        flex-direction: column;
    }
    .faction-nav {
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 43px;
        margin-left: 0;
    }
    .hero-content {
        margin-left: 0;
        margin-top: 100px;
        position: absolute;
    }
    .hero-figure {
        margin-left: -75px;
    }
    .hero-controls {
        margin-top: 527px;
        margin-left: 0;
    }
    .faction-btn {
        position: inherit !important;
    }
    .faction-btn.active {
        /* transform: translateY(-4px) scale(1.04); */
    }
    .desc-box {
        top: 45px;
        right: 179px;
    }
    .stage-bg {
        background: url(../images/hero/bg-tablet.png) center 0 no-repeat;
        background-size: 100%;
        border-radius: 28px;
        /* box-shadow: inset 0 0 50px rgba(0, 0, 0, .35); */
        z-index: 1;
        width: 1078px;
        height: 592px;
        background-position: 0;
    }
    #heroCarousel {
        display: flex;
        justify-content: center;
    }
}
/* ---- Nút "Xem thêm": chỉ hiện ở mobile, thay chỗ cho desc-box ---- */
.btn-see-more {
    display: none;
    position: absolute;
    top: 153px;
    right: 95px;
    z-index: 3;
    cursor: pointer;
    background: url(../images/hero/btn-more-info-hero.png) top no-repeat;
    width: 114px;
    height: 31px;
    text-indent: -9999px;
}
/* ---- Modal: mô tả + skill, dùng ở mobile khi bấm "Xem thêm" ---- */
.modal-content.hero-modal-content {
    background: rgb(8 10 16 / 76%);
    padding: 26px 20px 20px;
    position: relative;
    color: #ffd9a0;
}
.modal-close-x {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}
.modal-desc-text {
    margin: 0 auto;
    font-size: 13.5px;
    line-height: 1.6;
    text-align: center;
    background: url(../images/hero/bg-desc.png) center 0 no-repeat;
    width: 222px;
    height: 238px;
    padding: 14px 16px;
}
.modal-skills-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
/* ---- Mobile: ẩn mô tả/skill trong stage, dùng popup thay thế ---- */
@media (max-width: 767.98px) {
    .desc-box {
        display: none;
    }
    .btn-see-more {
        display: inline-block;
    }
    .skills-row {
        display: none;
    }
    /* indicators (nút tên tướng) chiếm trọn 1 dòng -> 2 mũi tên tự
       rớt xuống dòng kế tiếp, vẫn nằm chung trong #heroCarousel */
    .hero-controls {
        flex-wrap: wrap;
    }
    .hero-controls .carousel-indicators {
        order: 1;
        flex-basis: 100%;
        margin-bottom: -52px;
    }
    .hero-controls .arrow-btn {
        order: 2;
    }
    .faction-btn {
        position: inherit !important;
    }
}
@media (max-width: 640px) {
    .stage-bg {
        background: url(../images/hero/bg-mb.png) center 0 no-repeat;
        background-size: 100%;
        width: 576px;
        height: 610px;
    }
    .hero-section {
        gap: 14px;
    }
    .faction-btn {
        font-size: 12px;
        padding: 0;
        width: 61px;
        height: 33px;
        background-size: 100% !important;
    }
    .btn-see-more {
        font-size: 11px;
        padding: 6px 10px;
    }
    .hero-placeholder {
        position: relative;
        margin-left: 0;
    }
    .faction-nav {
        margin-top: 0;
        margin-right: 0;
    }
    .hero-content {
        margin-top: 43px;
        width: 576px;
        padding-top: 21px;
    }
    .bottom-info-figure {
        display: none;
    }
    .top-info-figure {
        flex-direction: column;
        margin-bottom: 0;
    }
    .info-figure {
        margin-left: 0;
        margin-bottom: 94px;
        margin-top: 35px;
    }
    .hero-figure {
        margin-top: 0;
        margin-left: 0;
        height: 600px;
    }
    .desc-class-figure {
        top: 452px;
    }
    .carousel-indicators [data-bs-target] {
        width: 160px;
        height: 126px;
        background-size: 100% !important;
    }
    .skills-row {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
        width: 360px;
        height: 119px;
        background-size: 100% !important;
    }
    .skills-label-mb {
        width: 145px;
        height: 32px;
        background: url(../images/hero/skill-label-mb.png) center 0 no-repeat;
        background-size: 100%;
        margin-top: 9px;
        text-indent: -9999px;
    }
    .modal-desc-text {
        text-align: left;
        padding: 23px 25px 20px 25px;
    }
    .modal-skills-row {
        gap: 6px;
    }
    .modal-close-x {
        position: absolute;
        top: 8px;
        right: 12px;
        cursor: pointer;
        padding: 4px;
        width: 35px;
        height: 32px;
        background: url(../images/hero/close-x.png) center 0 no-repeat;
        background-size: 100%;
        text-indent: -9999px;
    }
}
/* ---------------- Table (div-based) ---------------- */
.ranking-wrap {
    max-width: 820px;
    margin: 0 auto;
    border: 2px solid var(--wrap-border);
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
}
.ranking-scroll {
    max-height: 429px;
    overflow-y: auto;
}
.ranking-scroll::-webkit-scrollbar {
    width: 8px;
}
.ranking-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .25);
}
.ranking-scroll::-webkit-scrollbar-thumb {
    background: #8a5a2b;
    border-radius: 4px;
}
.ranking-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    background: #524141;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    min-height: 39px;
    border: 1px solid #000;
}
.ranking-row {
    display: flex;
    align-items: center;
    max-height: 39px;
    color: #fff;
    font-weight: 600;
    border: 1px solid #000;
    background: #a89c78;
    /* mặc định cho hạng 4+ */
}
.ranking-row:last-child {
    border-bottom: none;
}
.ranking-row.rank-1 {
    background: #d64545;
}
.ranking-row.rank-2 {
    background: #d2704a;
}
.ranking-row.rank-3 {
    background: #e3bd4a;
}
/* .ranking-row.rank-1 .col-rank,
.ranking-row.rank-2 .col-rank,
.ranking-row.rank-3 .col-rank {
    padding: 0;
} */
/* cột dùng chung cho cả header lẫn row để 2 bên luôn thẳng hàng */
.col-table-rank {
    padding: 13px 10px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.col-rank {
    flex: 0 0 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2px #fff;
    padding: 6px 0;
    position: relative;
}
.col-name {
    flex: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2px #fff;
    padding: 6px 0;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.col-server {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2px #fff;
    padding: 6px 0;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.col-power {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2px #fff;
    padding: 6px 0;
}
/* icon hạng 1-3: tạm vẽ hình tròn + màu nền, thay bằng hình sau */
.rank-badge {
    display: flex;
    align-items: center;
    justify-content: center;
}
.rank-badge-1 {
    width: 49px;
    height: 38px;
    background: url('../images/icon/rank-top-1.png') center 0 no-repeat;
    background-size: 100%;
    position: absolute;
}
.rank-badge-2 {
    width: 43px;
    height: 37px;
    background: url('../images/icon/rank-top-2.png') center 0 no-repeat;
    background-size: 100%;
    position: absolute;
}
.rank-badge-3 {
    width: 43px;
    height: 37px;
    background: url('../images/icon/rank-top-3.png') center 0 no-repeat;
    background-size: 100%;
    position: absolute;
}
/* ---------------- Responsive ---------------- */
@media (max-width: 1220px) {
    .ranking-wrap {
        max-width: 700px;
    }
    .col-table-rank {
        font-size: 14px;
        padding: 11px 8px;
    }
    .rank-badge {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}
@media (max-width: 578px) {
    .ranking-wrap {
        max-width: 100%;
    }
    .col-table-rank {
        font-size: 12px;
        padding: 9px 6px;
    }
    .rank-badge {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }
    .col-rank {
        flex: 0 0 56px;
    }
    .ranking-row {
        min-height: 40px;
    }
}
:root {
    --sparkle-color: #fff8e0;
    /* màu lõi tia sáng, hơi ngả vàng ấm cho hợp tông ảnh */
    --sparkle-glow: #ffd873;
    /* màu ánh sáng tỏa ra xung quanh */
}
.sparkle {
    position: absolute;
    width: var(--size, 26px);
    height: var(--size, 26px);
    pointer-events: none;
    transform-origin: 50% 50%;
    opacity: 0;
    animation-name: sparkle-flash;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.sparkle svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 0 6px var(--sparkle-glow)) drop-shadow(0 0 12px var(--sparkle-glow));
}
/* Vị trí + thời gian riêng cho từng đốm — chỉnh 3 khối này để đổi chỗ/nhịp lóe sáng */
.sparkle--1 {
    top: 9%;
    left: 50%;
    --size: 30px;
    animation-duration: 2.2s;
    animation-delay: 0s;
}
.sparkle--2 {
    top: 30%;
    left: 59%;
    --size: 20px;
    animation-duration: 1.6s;
    animation-delay: 1.1s;
}
.sparkle--3 {
    top: 65%;
    left: 51%;
    --size: 22px;
    animation-duration: 2.6s;
    animation-delay: 2s;
}
.sparkle--big1 {
    top: 15%;
    left: 22%;
    --size: 78px;
    animation-duration: 3.4s;
    animation-delay: 0.6s;
}
.sparkle--big2 {
    top: 44%;
    left: 88%;
    --size: 90px;
    animation-duration: 4s;
    animation-delay: 2.6s;
}
.sparkle--big3 {
    top: 56%;
    left: 17%;
    --size: 90px;
    animation-duration: 2.9s;
    animation-delay: 2.6s;
}
@keyframes sparkle-flash {
    0% {
        opacity: 0;
        transform: scale(0.2) rotate(0deg);
    }
    6% {
        opacity: 1;
        transform: scale(1.15) rotate(20deg);
    }
    9% {
        opacity: 1;
        transform: scale(0.9) rotate(30deg);
    }
    16% {
        opacity: 0;
        transform: scale(0.2) rotate(45deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.2) rotate(45deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .sparkle{
        opacity: 0;
    }
}

@media (max-width: 600px) {
    footer .policy li {
        max-width: 65px;
        text-align: center;
        line-height: 15px;
    }
    footer .policy li:nth-child(3) {
        max-width: 95px;
    }
    footer .policy {
        margin-left: 31px;
        gap: 30px;
    }
    footer .policy li:not(:last-child)::after {
        content: "";
    }
}