* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     --use-rem: 0;
 }

 :root {
     --default-color: #0a0f1e;
     --color-text: #00c853;
     --neutral400: #657381;

     --grid-gap: calc(2.1333333333 * 1rem * var(--use-rem) + 2.1333333333 * 1vw * (1 - var(--use-rem)));
     --side-gap: calc(4 * 1rem * var(--use-rem) + 4 * 1vw * (1 - var(--use-rem)));
     --header-height: calc(13.3333333333 * 1rem * var(--use-rem) + 13.3333333333 * 1vw * (1 - var(--use-rem)));
     --bottombar-height: calc(13.3333333333 * 1rem * var(--use-rem) + 13.3333333333 * 1vw * (1 - var(--use-rem)));
     --gametoolbar-height: calc(16 * 1rem * var(--use-rem) + 16 * 1vw * (1 - var(--use-rem)));
     --language-picker-width: calc(13.3333333333 * 1rem * var(--use-rem) + 13.3333333333 * 1vw * (1 - var(--use-rem)));
     --language-picker-height: calc(13.3333333333 * 1rem * var(--use-rem) + 13.3333333333 * 1vw * (1 - var(--use-rem)));
     --member-menu-item-height: calc(13.3333333333 * 1rem * var(--use-rem) + 13.3333333333 * 1vw * (1 - var(--use-rem)));
     --dialog-notify-max-width: calc(133.3333333333 * 1rem * var(--use-rem) + 133.3333333333 * 1vw * (1 - var(--use-rem)));
     --primary300: #27b488;
     --primary400: #219772;
     --primary500: #14805e;
     --primary600: #10654b;
     --secondary300: #fff199;
     --secondary400: #ffea66;
     --secondary500: #ffdf1a;
     --secondary600: #f0ce00;
     --neutral100: #ffffff;
     --neutral200: #e2e6e9;
     --neutral300: #8d9aa5;
     --neutral400: #657381;
     --neutral500: #576775;
     --neutral600: #454745;
     --neutral700: #303232;
     --neutral800: #222424;
     --neutral900: #141515;
     --neutral1000: #000000;
     --status-danger: #ff777c;
     --status-warning: #ffa05f;
     --status-pending: #d8a845;
     --status-success: #38ba9d;
     --status-info: #409fff;
     --header-logo-height: calc(4.8 * 1rem * var(--use-rem) + 4.8 * 1vw * (1 - var(--use-rem)));
     --gradient-neutral: linear-gradient(to bottom, #4e4e4e 0%, #353535 100%);
     --gradient-primary: linear-gradient(to right, #13805e 0%, #1d4738 100%);
     --gradient-primary-left: linear-gradient(to left, #13805e 0%, #1d4738 100%);
     --gradient-primary-right-opacity: linear-gradient(to right,
             color-mix(in srgb, var(--primary300), transparent 70%) 0%,
             transparent 120%);
     --radius-no: calc(0 * 1rem * var(--use-rem) + 0 * 1vw * (1 - var(--use-rem)));
     --radius-1: calc(0.2666666667 * 1rem * var(--use-rem) + 0.2666666667 * 1vw * (1 - var(--use-rem)));
     --radius-3: calc(0.8 * 1rem * var(--use-rem) + 0.8 * 1vw * (1 - var(--use-rem)));
     --radius-5: calc(1.3333333333 * 1rem * var(--use-rem) + 1.3333333333 * 1vw * (1 - var(--use-rem)));
     --radius-70: calc(18.6666666667 * 1rem * var(--use-rem) + 18.6666666667 * 1vw * (1 - var(--use-rem)));
     --fs-body-default: calc(4.2666666667 * 1rem * var(--use-rem) + 4.2666666667 * 1vw * (1 - var(--use-rem)));
     --fs-h1: calc(9.3333333333 * 1rem * var(--use-rem) + 9.3333333333 * 1vw * (1 - var(--use-rem)));
     --fs-h2: calc(6.4 * 1rem * var(--use-rem) + 6.4 * 1vw * (1 - var(--use-rem)));
     --fs-h3: calc(5.3333333333 * 1rem * var(--use-rem) + 5.3333333333 * 1vw * (1 - var(--use-rem)));
     --fs-h4: calc(4.8 * 1rem * var(--use-rem) + 4.8 * 1vw * (1 - var(--use-rem)));
     --fs-h5: var(--fs-body-default);
     --fs-larger: calc(3.7333333333 * 1rem * var(--use-rem) + 3.7333333333 * 1vw * (1 - var(--use-rem)));
     --fs-normal: calc(3.2 * 1rem * var(--use-rem) + 3.2 * 1vw * (1 - var(--use-rem)));
     --fs-small: calc(2.6666666667 * 1rem * var(--use-rem) + 2.6666666667 * 1vw * (1 - var(--use-rem)));
     --fs-mini: calc(2.1333333333 * 1rem * var(--use-rem) + 2.1333333333 * 1vw * (1 - var(--use-rem)));
     --header-fullview-logo-height: calc(8 * 1rem * var(--use-rem) + 8 * 1vw * (1 - var(--use-rem)));
 }


 html.is-desktop {
     --use-rem: 1;
 }

 span.marquee__icon {
     background: #ff8a14;
     width: 20px;
     height: 20px;
 }

 body {
     font-family: "Arial", sans-serif;
     background: #1a1a2e;
     min-height: 100vh;
     overflow: hidden;
 }

 .sidebar {
     border-right: 1px solid #303232;
     height: 100vh;
     background: var(--default-color);
     left: 0;
     top: 60px;
     transition: all 0.3s ease;
     z-index: 1000;
     overflow-y: auto;
     overflow-x: hidden;
     box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
     padding-bottom: 100px;
 }

 .sidebar.collapsed {
     width: (17.0666666667 * 1rem * var(--use-rem) + 17.0666666667 * 1vw * (1 - var(--use-rem)));
 }

 .sidebar-header {
     padding: 15px 10px;
     /* background: #2a2a2a; */
     border-bottom: 1px solid #444;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 15px;
 }

 .sidebar.collapsed .sidebar-header {
     justify-content: center;
     padding: 15px 10px;
 }

 .hamburger-menu {
     width: 40px;
     height: 40px;
     cursor: pointer;
     background: #303232;
     border-radius: 6px;
     padding: 10px;
     transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     flex-shrink: 0;
 }

 .hamburger-menu:hover {
     background: #555;
 }

 .hamburger-line {
     width: 100%;
     height: 2px;
     background: #D500F9;
     border-radius: 1px;
 }

 .logo {
     color: #D500F9;
     font-size: 20px;
     font-weight: bold;
     transition: all 0.3s ease;
     white-space: nowrap;
 }

 .sidebar.collapsed .logo {
     display: none;
 }

 .jeetbuzz-icon {
     display: none;
     width: 30px;
     height: 30px;
     fill: #00ff41;
 }

 .sidebar.collapsed .jeetbuzz-icon {
     display: block;
 }

 .menu-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .menu-item {
     margin: 0;
 }

 .menu-link {
     display: flex;
     align-items: center;
     padding: 15px 20px;
     color: #ccc;
     text-decoration: none;
     transition: all 0.3s ease;
     position: relative;
     white-space: nowrap;
     border-bottom: 1px solid #303232;
 }

 .sidebar.collapsed .menu-link {
     padding: 15px;
     justify-content: center;
 }

 .menu-link:hover {
     background: #333;
     color: #fff;
 }

 .menu-link.active {
     background: #444;
     color: #D500F9;
 }

 .menu-icon {
     width: 24px;
     height: 24px;
     margin-right: 15px;
     flex-shrink: 0;
 }

 .sidebar.collapsed .menu-icon {
     margin-right: 0;
 }

 .menu-text {
     font-size: 14px;
     font-weight: 500;
     transition: all 0.3s ease;
     flex: 1;
 }

 .sidebar.collapsed .menu-text {
     display: none;
 }

 .dropdown-arrow {
     width: 30px;
     height: 30px;
     transition: all 0.3s ease;
     fill: #ccc;
     margin-left: auto;
 }

 .menu-link.has-submenu.open .dropdown-arrow {
     transform: rotate(180deg);
 }

 .sidebar.collapsed .dropdown-arrow {
     display: none;
 }

 .badge {
     background: #D500F9;
     color: #000;
     padding: 2px 6px;
     border-radius: 10px;
     font-size: 10px;
     font-weight: bold;
     margin-left: 10px;
 }

 .sidebar.collapsed .badge {
     display: none;
 }

 .sidebar.collapsed .submenu {
     display: none;
 }


 .submenu {
     display: grid;
     grid-template-rows: 0fr;
     transition: grid-template-rows 0.4s ease;
     overflow: hidden;
     /* grid-template-columns: repeat(2, 1fr); */
     grid-gap: 15px;
 }

 .submenu.open {
     grid-template-rows: 1fr;

 }

 .submenu-item {
     overflow: hidden;
     display: grid;
     grid-template-columns: repeat(2, 140px);
     /* mỗi icon 140px */
     justify-content: center;
     /* căn giữa trong submenu */
     gap: 10px;
 }

 .submenu.open .submenu-item {
     padding: 10px;
 }

 .submenu-item-text.submenu-item {
     grid-template-columns: auto;
     display: block;
 }

 .submenu-item-text.submenu-item a {
     display: block;
     width: 100%;
     margin-bottom: 5px;
     margin-top: 5px;
     background-color: #222424;
 }

 .submenu-item-text.submenu-item a .main-nav-games-grid-cell {
     background-color: #222424;
     border-radius: 5px;
     align-items: center;
 }

 .submenu-item-text.submenu-item a .main-nav-games-grid-cell:hover {
     transform: translateY(-2px);
 }

 .submenu-item-text.submenu-item a .main-nav-games-grid-cell .main-nav-games-grid-cell__icon {
     padding-right: 20px
 }

 .submenu-item-text.submenu-item a .main-nav-games-grid-cell .main-nav-games-grid-cell__icon img {
     max-height: 30px;
     max-width: 30px;
     margin-bottom: 00px;
 }

 .submenu-item:hover {
     background: #333;
     color: #D500F9;
 }

 .submenu-item-text .side-menu-contactus-item {
     display: flex;
     align-items: center;
     padding: 8px 0;
     text-decoration: none;
     color: #ccc;
     /* màu chữ mặc định */
 }

 .submenu-item-text .side-menu-contactus-item:hover {
     color: #fff;
     /* đổi màu khi hover */
 }

 .side-menu-contactus-item__main {
     display: flex;
     align-items: center;
 }

 .side-menu-contactus-item__icon {
     width: 20px;
     height: 20px;
     margin-right: 8px;
     /* khoảng cách icon và chữ */
 }

 .side-menu-contactus-item__title {
     font-size: 14px;
 }


 a.side-menu-contactus__item.side-menu-contactus-item {
     background: none;
 }

 /* Live Chat Special Styling */
 .live-chat {
     background: #1a1a1a !important;
     /* border: 1px solid #333 !important; */
 }

 .live-chat .menu-text {
     color: #fff;
 }

 /* Tooltip */
 .tooltip {
     position: absolute;
     left: 70px;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(0, 0, 0, 0.9);
     color: white;
     padding: 8px 12px;
     border-radius: 6px;
     font-size: 12px;
     white-space: nowrap;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
     z-index: 1002;
     pointer-events: none;
 }

 .tooltip::before {
     content: "";
     position: absolute;
     left: -5px;
     top: 50%;
     transform: translateY(-50%);
     border: 5px solid transparent;
     border-right-color: rgba(0, 0, 0, 0.9);
 }

 .sidebar.collapsed .menu-link:hover .tooltip {
     opacity: 1;
     visibility: visible;
 }

 .main-content {
     transition: all 0.3s ease;
     overflow: hidden;
 }

 .main-content.collapsed {
     padding-left: 10px;
 }

 .content-card {
     background: var(--default-color);
     backdrop-filter: blur(10px);
     /* border-radius: 15px; */
     /* padding: 0px 30px 0px 30px; */
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     /* border: 1px solid rgba(255, 255, 255, 0.2); */
 }

 .content-title {
     color: #ffffff;
     font-size: 28px;
     margin-bottom: 20px;
 }

 .content-text {
     color: #b8c1ec;
     line-height: 1.6;
     font-size: 16px;
 }

 .header {
     display: flex;
     height: 60px;
     width: 100%;
     align-items: center;
     justify-content: space-between;
     background: var(--default-color);
     /* nền tối */
     padding: 8px 0px;
     border-bottom: 1px solid #303232;
     height: 60px;
 }

 .header-left {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .header-left {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .logo img {
     height: 50px;
     cursor: pointer;
     max-width: 100px;
 }

 html .logo img {
     /* height: var(
    --header-logo-height,
    calc(
      10.6666666667 * 1rem * var(--use-rem) + 10.6666666667 * 1vw *
        (1 - var(--use-rem))
    )
  ); */
     cursor: pointer;
 }

 .content-body {
     display: flex;
 }

 div#mainContent {
     flex: 1;
     overflow: auto;
     height: 100vh;
     /* padding-left: 10px; */
     background-color: #000000;
     padding-bottom: 100px;
     color: var(--neutral400);
 }

 .nav-links {
     display: flex;
     align-items: center;
     gap: 18px;
 }

 .nav-links a {
     display: flex;
     align-items: center;
     gap: 6px;
     color: #ccc;
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
     transition: color 0.2s;
 }

 .nav-links a:hover {
     color: #D500F9;
     /* màu cam hover */
 }

 .content-body {
     display: flex;
     /* overflow: hidden; */
     /* height: 100vh; */
 }

 .auth {
     display: flex;
     align-items: center;
     gap: 10px;
     padding-right: 50px;
 }

 .auth .btn-login,
 .auth .btn-signup {
     padding: 9px 24px;
     border-radius: 6px;
     font-size: 14px;
     font-weight: 600;
     border: none;
     cursor: pointer;
     text-decoration: none;
 }

 .auth .btn-login {
     background: #444;
     color: #fff;
 }

 .auth .btn-login:hover {
     background: #555;
 }

 .auth .btn-signup {
     background: #D500F9;
     color: #000;
 }

 .auth .btn-signup:hover {
     background: #e68a00;
 }

 .sidebar {
     scrollbar-width: none;
     /* Firefox */
 }

 .sidebar::-webkit-scrollbar {
     display: none;
     /* Chrome, Safari */
 }

 /* Firefox */
 #mainContent {
     scrollbar-width: thin;
     /* thanh mảnh */
     scrollbar-color: #555 #1a1a1a;
     /* thumb #555, track #1a1a1a */
 }

 /* Chrome, Edge, Safari */
 #mainContent::-webkit-scrollbar {
     width: 8px;
     /* độ rộng thanh */
 }

 #mainContent::-webkit-scrollbar-track {
     background: #1a1a1a;
     /* màu nền track */
 }

 #mainContent::-webkit-scrollbar-thumb {
     background-color: #555;
     /* màu thanh kéo */
     border-radius: 6px;
     /* bo tròn */
 }

 #mainContent::-webkit-scrollbar-thumb:hover {
     background-color: #666;
     /* hover sáng hơn */
 }

 .content-main {
     max-width: 1230px;
     margin: 0 auto;
     /* background-color: #282828; */
 }

 .banner-slider1 {
     max-width: 1920px;
     margin: 0 auto;
 }

 .icon-m1 {
     width: 33px;
     height: auto;
 }

 .language-picker img {
     width: 24px;
 }

 .language-picker {
     display: flex;
     align-items: center;
     padding-left: 30px;
 }

 /* Side nav */
 .side-nav {
     position: fixed;
     top: 0;
     left: -100%;
     width: 80%;
     height: 100%;
     background: #111;
     color: white;
     transition: 0.3s;
     padding: 20px;
 }

 .side-nav.open {
     left: 0;
 }

 .banner-slider .slick-prev,
 .banner-slider .slick-next {
     width: 40px;
     height: 40px;
     background: rgba(0, 0, 0, 0.6);
     /* nền đen mờ */
     border-radius: 6px;
     /* bo tròn nhẹ, chỉnh 50% nếu muốn tròn hẳn */
     z-index: 10;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.3s ease;
     background-color: #303232;
     /* position: absolute; */
     /* right: 20px; */
 }

 .banner-slider .slick-prev i,
 .banner-slider .slick-next i {
     color: white;
     font-size: 16px;
 }

 .banner-slider .slick-prev {
     position: absolute;
     left: 20%;
 }

 .banner-slider .slick-next {
     position: absolute;
     right: 20%;
 }

 .banner-slider {
     height: 210px;
 }

 .banner-slider .slick-prev:before,
 .banner-slider .slick-next:before {
     font-family: "Font Awesome 6 Free";
     font-weight: 900;
     font-size: 20px;
     color: #fff;
     opacity: 1;
     content: "";
 }

 .banner-slider {
     height: 210px;
 }
 .banner-slider .slick-slide img {
     height: 210px;
     object-fit: scale-down;
 }

 @keyframes slideToLeft {
     0% {
         transform: translate(0)
     }

     to {
         transform: translate(-100%)
     }
 }

 @keyframes slideToRight {
     0% {
         transform: translate(0)
     }

     to {
         transform: translate(100%)
     }
 }

 .marquee__content {
     --marquee-content-box-width: 703.1999999999999px;
     overflow: hidden;
 }

 .marquee__ul {
     position: relative;
     animation: slideToLeft 15s linear infinite;
     display: table-row;
     white-space: nowrap;
 }

 .marquee__li {
     display: table-cell;
     padding-left: var(--marquee-content-box-width);
     width: 100%;
     transform-origin: 50% 50%;
 }

 .marquee {
     display: grid;
     grid-template-columns: auto 1fr;
     grid-gap: var(--grid-gap);
     padding: var(--grid-gap) 0 var(--grid-gap) var(--side-gap);
     transform-origin: 50% 50%;
     padding-left: 0;
     padding-bottom: 20px;
 }

 .marquee__text {
     font-size: 16px;
     color: white;
     line-height: 1.5;
 }

 div#nav {
     display: flex;
     justify-content: space-between;
     /* gap: 5px; */
     /* chỉnh khoảng cách giữa các item */
     max-width: 2000px;
 }

 .main-nav__btn {
     cursor: pointer;
     background: #222424;
     width: 80px;
     height: 50px;
     display: flex;
     justify-content: center;
     align-items: self-end;
     /* position: relative; */
     border-radius: 3px;
     margin: auto 0;
     margin-bottom: 0;
 }

 .main-nav-btn__img.main-nav-btn__3d-img {
     position: absolute;
     top: 0;
     background-repeat: no-repeat;
     background-position: center;
     width: 50px;
     height: 50px;
     background-size: 800px;
     left: calc(50% - 27px);
 }

 .main-nav-btn__accessory-img {
     z-index: 3;
     top: calc(1.3333333333 * 1rem * var(--use-rem) + 1.3333333333 * 1vw * (1 - var(--use-rem)));
     position: absolute;
     background-position: 0 0;
 }

 .main-nav-btn__3d-img {
     transition: background-position 0.05s;
 }

 @keyframes sprint {
     0% {
         background-position: 0 0
     }

     100% {
         background-position: calc(-1 * calc(13.3333333333 * 1rem * var(--use-rem) + 13.3333333333 * 1vw * (1 - var(--use-rem))) * 14) 0
     }
 }

 @keyframes sprint-back {
     0% {
         background-position: calc(-1 * calc(13.3333333333 * 1rem * var(--use-rem) + 13.3333333333 * 1vw * (1 - var(--use-rem))) * 14) 0
     }

     100% {
         background-position: 0 0
     }
 }

 .main-nav-btn__text {
     color: #657381;
     padding-bottom: 5px;
     font-size: 15px;
 }

 .main-bd {
     display: flex !important;
     height: 80px;
     position: relative;
     /* gap: 42px !important; */
     margin: 0 5px;
     /* chỉnh khoảng cách trái/phải */
     /* border-radius: 26px; */
 }

 .main-bd .slick-active {}

 .main-bd.slick-slide.slick-current.slick-active .main-nav__btn {
     background: #D500F9;
 }

 .main-bd.slick-slide.slick-current.slick-active .main-nav__btn .main-nav-btn__text {
     color: white;
 }

 .main-bd.slick-slide.slick-current.slick-active .main-nav-btn__img.main-nav-btn__3d-img {
     background-size: 754px;
     background-position: right;
 }

 .main-nav-games-banner {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
     /* khoảng cách giữa các card */
     margin-top: 20px;
 }

 .main-nav-games-banner-cell {
     width: 143px;
     /* cố định chiều rộng */
     background: var(--default-color);
     border-radius: 8px;
     overflow: hidden;
     cursor: pointer;
     transition: transform 0.3s ease;
 }

 .main-nav-games-banner-cell:hover {
     transform: translateY(-5px);
     /* hover nổi lên */
 }

 .main-nav-games-banner-cell__icon img {
     display: block;
     width: 100%;
     height: auto;
     border-radius: 8px;
 }

 .main-nav-games-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     flex-wrap: wrap;
     gap: 8px;
     /* khoảng cách giữa các card */
     margin-top: 20px;
 }

 .main-nav-games-grid-cell {
     /* width: 143px; */
     /* cố định chiều rộng card */
     height: 50px;
     /* chiều cao đồng đều */
     background: var(--default-color);
     border-radius: 8px;
     padding: 10px;
     text-align: center;
     display: flex;
     /* flex-direction: column; */
     justify-content: flex-start;
     align-items: center;
     cursor: pointer;
     transition: transform 0.3s ease, background 0.3s ease;
 }

 .main-nav-games-grid-cell:hover {
     transform: translateY(-5px);
     background: #2a2a2a;
 }

 .main-nav-games-grid-cell__icon img {
     max-width: 50px;
     max-height: 50px;
     margin-bottom: 8px;
     padding-right: 10px;
 }

 .main-nav-games-grid-cell__text {
     font-size: 14px;
     color: #ddd;
 }

 .event-item,
 .featured-item {
     margin-right: 8px;
 }

 .event-no-slider {
     display: flex;
     justify-content: flex-start;
     text-align: left;
 }

 .open.content-btn-showmore {
     position: absolute;
     bottom: 0;
     background: linear-gradient(to top, var(--default-color) 20%, transparent 100%);
 }

 .content-btn-showmore {
     width: 100%;
 }

 #footerCollapseBtn:focus,
 #footerCollapseBtn:hover {
     background-color: #303232;
     color: #fff;
     text-decoration: none;
 }

 @media (max-width: 768px) {
     div#nav {
         display: flex;
         overflow-x: auto;
         /* Cho phép scroll ngang */
         gap: 8px;
         max-width: 100%;
         padding: 10px 0;

         /* Ẩn thanh scroll nhưng vẫn cuộn được */
         -ms-overflow-style: none;
         /* IE, Edge */
         scrollbar-width: none;
         /* Firefox */
     }

     div#nav::-webkit-scrollbar {
         display: none;
         /* Chrome, Safari */
     }

     .main-nav__btn {
         flex: 0 0 25%;
         /* mỗi item chiếm 25% => hiển thị đúng 4 item */
         min-width: 90px;
         /* đảm bảo icon không bị co quá nhỏ */
     }
 }


 .provider-item {
     /* flex: 0 0 auto; */
     /* background: #1f1f1f; */
     /* border-radius: 8px; */
     /* padding: 12px 8px; */
     /* text-align: center; */
     transition: background 0.3s;
 }



 .provider-item__inner {
     display: flex;
     /* flex-direction: column; */
     /* align-items: center; */
     background: #222424;
     margin: 0 10px;
     margin-left: 0px;
     justify-content: center;
     align-items: center;
     justify-content: center;
     display: flex;
     align-items: center;
     background-color: var(--neutral800);
     border-radius: 5px;
     -webkit-user-select: none;
     user-select: none;
     cursor: pointer;
 }

 .provider-item__img {
     width: 39.3%;
     /* margin: 0 auto 8px; */
     /* display: block; */
     /* margin-left: 0; */
 }

 .provider-item__text {
     font-size: 14px;
     font-weight: 500;
     color: #bbb;
     margin-left: 17px;
     text-align: left;
 }

 .provider-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 12px;
     margin-top: 20px;
 }

 .provider-header h3 {
     font-size: 16px;
     font-weight: 600;
     color: #fff;
     border-left: 3px solid #D500F9;
     padding-left: 8px;
 }

 .provider-nav button {
     background: #2d2d2d;
     border: none;
     color: #fff;
     width: 40px;
     height: 40px;
     margin-left: 6px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 18px;
     transition: background 0.3s;
 }

 .provider-nav {
     margin-right: 10px;
 }

 .provider-nav button:hover {
     background: #3a3a3a;
 }

 .footer {
     background: var(--default-color);
     padding: 40px 0;
     color: #fff;
     font-family: Arial, sans-serif;
     font-size: 14px;
 }

 .footer-container {
     display: flex;
     justify-content: space-between;
     /* max-width: 1100px; */
     margin: 0 auto;
 }

 .footer-col {
     flex: 1;
     margin: 0 15px;
     /* margin-left: 0; */
 }

 .footer-col h4 {
     font-size: 16px;
     margin-bottom: 15px;
     font-weight: bold;
 }

 .footer-col ul {
     list-style: none;
     padding: 0;
 }

 .footer-col ul li {
     margin-bottom: 8px;
 }

 .footer-col ul li a {
     text-decoration: none;
     color: var(--neutral400);
     /* xám xanh nhạt */
     transition: color 0.3s;
 }

 .footer-col ul li a:hover {
     color: #fff;
 }


 .featured-slider {
     padding-bottom: 20px;
 }

 .sponsor-section {
     background: var(--default-color);
     color: #fff;
     padding: 10px 0;
     font-family: Arial, sans-serif;
 }

 .sponsor-block {
     margin-bottom: 30px;
     border-top: 1px solid #333;
     padding-top: 10px;
 }

 .sponsor-block h4 {
     color: var(--status-pending);
     /* màu cam */
     font-size: 18px;
     margin-bottom: 15px;
     font-weight: bold;
 }

 .sponsor-item {
     display: flex;
     align-items: center;
     gap: 15px;
     color: var(--neutral400);
 }

 .sponsor-logo {
     width: 60px;
 }

 .ambassadors {
     display: flex;
     gap: 40px;
     color: var(--neutral400);
 }

 .ambassador {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .ambassador .sign {
     width: 50px;
     opacity: 0.7;
 }

 .sponsor-bottom {
     display: flex;
     justify-content: space-between;
     border-top: 1px solid #333;
     padding-top: 20px;
     margin-top: 20px;
 }

 .bottom-col {
     text-align: left;
     flex: 1;
 }

 .bottom-col h4 {
     color: var(--status-pending);
     margin-bottom: 15px;
     font-size: 16px;
 }

 .bottom-col img {
     height: 40px;
     margin: 0 8px;
     vertical-align: middle;
 }

 .footer-title .toggle-icon {
     display: none;
 }

 .social-media-list {
     text-align: left;
     /* margin: 20px 0; */
     border-top: 1px solid #333;
     padding-top: 20px;
 }

 .social-media-list__wrap {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
     gap: 15px;
 }

 .social-media-list__item a {
     display: inline-block;
     transition: transform 0.3s ease, opacity 0.3s ease;
 }

 .social-media-list__item img {
     width: 32px;
     height: 32px;
 }

 .social-media-list__item a:hover {
     transform: scale(1.1);
     opacity: 0.8;
 }

 .bottom-nav {
     display: none;
 }

 .footer-collapse {
     margin: 20px 0;
     position: relative;
     border-top: 1px solid #333;
     padding-top: 10px;
 }

 .footer-collapse__inner {
     max-height: 200px;
     /* Giới hạn ban đầu */
     overflow: hidden;
     transition: max-height 0.5s ease;
     color: var(--neutral400);
     /* position: absolute; */
     bottom: 0;
 }

 .footer-collapse__inner.open {
     max-height: 3000px;
     /* mở rộng toàn bộ */
 }

 .footer-btn {
     display: flex;
     justify-content: center;
     align-items: flex-end;
     width: 100%;
     height: auto;
     padding: 10px;
     border: 0;
     color: white;
     width: max-content;
     background: #303232;
     margin: 0 auto;
 }

 .footer-btn:hover {
     background: var(--status-pending);
 }

 .footer-license {
     background: var(--default-color);
     color: #ccc;
     font-size: 14px;
     padding: 30px 15px;
     line-height: 1.6;
     border-top: 1px solid #222;
 }

 .footer-license a {
     color: var(--status-pending);
     text-decoration: none;
 }

 .footer-license a:hover {
     text-decoration: underline;
 }

 .license-title {
     color: var(--status-pending);
     font-size: 16px;
     margin-bottom: 5px;
     font-weight: bold;
 }

 .license-copy {
     margin-bottom: 20px;
     color: #aaa;
     font-size: 13px;
 }

 .license-content p {
     margin: 10px 0;
 }

 /* ========== STYLE CHỈ ÁP DỤNG TRONG main-about-us ========== */

 .main-about-us {
     padding: 40px 30px;
     border-radius: 12px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
     color: #333;
     font-size: 16px;
     line-height: 1.65;
     padding: 16px 89px 0 89px;
 }

 /* Tiêu đề */
 .main-about-us h1 {
     font-size: 32px;
     font-weight: 800;
     margin-bottom: 15px;
     color: #111;
 }

 .main-about-us h2 {
     font-size: 24px;
     font-weight: 700;
     margin-top: 25px;
     padding-left: 12px;
     border-left: 5px solid var(--color-text);
     /* xanh nhấn */
     color: #222;
 }

 .main-about-us h3 {
     font-size: 20px;
     font-weight: 600;
     margin-top: 20px;
     color: #444;
 }

 /* Đoạn văn */
 .main-about-us p {
     margin: 12px 0;
     color: #444;
 }

 /* Meta info (Title / Meta Description / Meta Tags...) */
 .main-about-us p:first-child,
 .main-about-us p strong {
     color: #111;
 }

 .main-about-us p.meta,
 .main-about-us .meta {
     font-size: 14px;
     color: #666;
     background: #f5f5f5;
     padding: 8px 12px;
     border-radius: 6px;
     margin: 6px 0;
 }

 /* Danh sách */
 .main-about-us ul {
     margin: 12px 0 12px 20px;
 }

 .main-about-us ul li {
     margin: 6px 0;
     position: relative;
 }

 .main-about-us ul li::before {
     content: "•";
     position: absolute;
     left: -18px;
     color: var(--color-text);
     font-size: 20px;
 }

 /* Link */
 .main-about-us a {
     color: var(--color-text);
     text-decoration: none;
     border-bottom: 1px dashed rgba(0, 200, 83, .4);
 }

 .main-about-us a:hover {
     color: #009970;
     border-bottom-style: solid;
 }

 /* Blockquote */
 .main-about-us blockquote {
     margin: 16px 0;
     padding: 14px 18px;
     background: #f9f9f9;
     border-left: 4px solid var(--color-text);
     border-radius: 6px;
     font-style: italic;
     color: #555;
 }

 .main-about-us h3,
 .main-about-us h4,
 .main-about-us b,
 .main-about-us p,
 .main-about-us span {
     color: #ffffffc4;
     text-transform: math-auto;
     font-weight: 100;
 }

 .main-about-us {
     max-width: 1230px;
     /* khung nội dung bằng với footer */
     margin: 0 auto;
     /* canh giữa trong container chính */
     padding: 20px 0 0 15px;
     border-radius: 12px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
     color: #fff;
     font-size: 16px;
     line-height: 1.65;
 }

 @media(max-width: 768px) {
     .main-about-us {
         padding: 0 10px;
     }

     .main-about-us h3,
     .main-about-us h4,
     .main-about-us b,
     .main-about-us p,
     .main-about-us span {
         font-size: 16px;
     }
 }

 .main-about-us ol li::marker {
     color: var(--color-text);
 }

 .main-about-us h3,
 .main-about-us h4,
 .main-about-us b,
 .main-about-us p,
 .main-about-us span {
     color: #ffffffc4;
     text-transform: math-auto;
     font-weight: 100;
 }

 .main-about-us h1,
 .main-about-us h2,
 .main-about-us h4,
 .main-about-us h5,
 .main-about-us h6,
 .main-about-us h3 {
     color: var(--color-text);
     text-transform: math-auto;
     font-weight: 100;
 }

 .main-about-us h1 b,
 .main-about-us h2 b,
 .main-about-us h4 b,
 .main-about-us h5 b,
 .main-about-us h6 b,
 .main-about-us h3 b {
     color: var(--color-text);
     text-transform: math-auto;
     font-weight: 100;
 }

 .main-about-us b,
 .main-about-us p,
 .main-about-us span {
     color: white;
     text-transform: math-auto;
     font-weight: 100;
 }

.banner-slider{
   display:none;
}

/* Ẩn text mặc định trong button */
.banner-slider .slick-dots li {
    width: 9px;
    height: 9px;
}

.banner-slider .slick-list .slick-track .slick-slide {
    margin-right: 15px;
}

.banner-slider .slick-list .slick-track .slick-slide a img {
    border-radius: 10px;
}
.banner-slider .slick-list .slick-track .slick-slide {
  opacity: 0.5;
  transform: scale(0.8);
  transition: all 0.4s ease;
}

.banner-slider .slick-list .slick-track  .slick-center {
  opacity: 1 !important;
  transform: scale(1.2) !important; /* tăng size slide ở giữa */
  z-index: 10;
}

.banner-slider .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: white;
    /* màu xám mặc định */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* bỏ default pseudo element */
.banner-slider .slick-dots li button:before {
    display: none;
}

/* Khoảng cách giữa các dot */
.banner-slider .slick-dots li {
    margin: 0 5px;
}

/* Dot active = pill xanh */
.banner-slider .slick-dots li.slick-active button {
    width: 24px;
    /* rộng hơn */
    border-radius: 12px;
    /* bo tròn để thành viên capsule */
    background: #0094ff !important;
    /* xanh dương */
}

.banner-slider .slick-dots li.slick-active {
    margin-right: 20px;
}

 @media screen and (max-width: 768px) {
     .footer-title .toggle-icon {
         display: block;
     }

     .main-bd {
         margin: 0 10px;
     }

     .content-main {
         padding: 0 calc(var(--grid-gap) * 2);
     }

     .content-card {
         padding: 0;
     }

     .banner-slider {
         height: 135px;
     }

     .banner-slider .slick-slide img {
         height: auto;
     }
	 
	 .banner-slider .slick-list .slick-track .slick-slide {
	  opacity: 1;
	}

     .header {
         position: fixed;
         z-index: 10;
         padding-left: calc(var(--grid-gap) * 2);
         padding: calc(var(--grid-gap) * 3) calc(var(--grid-gap) * 3);
     }

     .icon-m1 {
         height: auto;
         width: calc(8 * 1rem * var(--use-rem) + 8 * 1vw * (1 - var(--use-rem)));
         -webkit-user-select: none;
         user-select: none;
     }

     .auth {
         padding-right: 0px;
         gap: 5px;
         margin-left: 5px;
     }

     .auth .btn-login,
     .auth .btn-signup {
         display: flex;
         height: calc(9.0666666667 * 1rem * var(--use-rem) + 9.0666666667 * 1vw * (1 - var(--use-rem)));
         min-width: auto;
         padding: 0 10px;
         width: calc(24 * 1rem * var(--use-rem) + 24 * 1vw * (1 - var(--use-rem)));
         font-size: var(--fs-larger);
         font-weight: 500;
         text-align: center;
         align-items: center;
         justify-content: center;
     }

     .language-picker {
         width: 49px;
         height: 49px;
         padding-left: 0px;
         font-size: 20px;
         gap: 0;
         /* justify-content: end; */
         /* padding-left: calc(var(--grid-gap) + -17px); */
         margin-left: calc(var(--grid-gap));
     }

     .language-picker {
         width: var(--language-picker-img-width,
                 calc(6.4 * 1rem * var(--use-rem) + 6.4 * 1vw * (1 - var(--use-rem))));
         height: var(--language-picker-img-height,
                 calc(6.4 * 1rem * var(--use-rem) + 6.4 * 1vw * (1 - var(--use-rem))));
     }

     .language-picker img {
         width: 100%;
     }

     body {
         overflow: unset;
     }

     .main-nav-games-grid-cell__icon {
         margin-right: 20px;
         margin-left: 5px;
     }

     .content-body {
         display: block;
         padding-top: 60px;
         overflow: hidden;
         height: 100%;
     }

     /* Header */
     .mobile-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         background: var(--default-color);
         padding: 10px;
         color: white;
     }

     /* Bottom nav */
     .bottom-nav {
         height: 55px;
         position: fixed;
         bottom: 0;
         right: 0;
         display: grid;
         justify-content: space-around;
         background: var(--default-color);
         padding: 8px 0;
         z-index: 10;
         grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
         align-items: center;
         background-color: #222424;
         /* top: 0; */
         z-index: 22222222222222222222222;
         width: 100%;
         z-index: 10000000;
     }

     .bottom-nav .nav-item p {
         margin-bottom: 0px;
         font-size: var(--fs-normal);
     }

     .bottom-nav .nav-item {
         text-align: center;
         font-size: 9px;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         height: 100%;
         transition: color 0.4s, border-color 0.4s;
         user-select: none;
         color: #8d9aa5;
     }

     .bottom-nav .nav-item img {
         display: block;
         width: calc(5.3333333333 * 1rem * var(--use-rem) + 5.3333333333 * 1vw * (1 - var(--use-rem)));
         height: calc(5.3333333333 * 1rem * var(--use-rem) + 5.3333333333 * 1vw * (1 - var(--use-rem)));
         animation: fadeIn 0.5s;
     }

     /* Side nav */
     .side-nav {
         position: fixed;
         top: 60px;
         left: 0;
         width: 100%;
         height: 100%;
         background: #111;
         color: #fff;
         padding: 20px;
         transform: translateX(-100%);
         /* Ban đầu ẩn bên trái */
         transition: transform 0.3s ease-in-out;
         z-index: 9;
         overflow: auto;
     }

     .live-chat-mobile {
         display: flex;
         justify-content: space-between;
     }

     .side-nav.open {
         z-index: 9;
         transform: translateX(0);
         /* Trượt vào màn hình */
         /* overflow: hidden; */
     }

     .side-nav.open .menu-list {
         overflow: auto;
         height: 100%;
         margin-bottom: 100px;
     }

     .side-menu li {
         padding: 12px 0;
         border-bottom: 1px solid #333;
     }

     .header-left {
         /* margin-right:10px; */
     }

     /* Bỏ mặc định của slick */
     .banner-slider .slick-dots {
         bottom: 24px;
         /* chỉnh vị trí theo ý */
         display: flex !important;
         justify-content: center;
         gap: 6px;
         /* khoảng cách giữa dot */
         width: 100%;
         padding: 0;
         margin: 0;
         list-style: none;
     }

     .banner-slider .slick-dots li {
         margin: 0;
         width: auto;
         height: auto;
     }

     .banner-slider .slick-dots li button {
         font-size: 0;
         line-height: 0;
         border: none;
         background: #333;
         /* màu xám cho dot thường */
         width: 20px;
         /* dot thường ngắn */
         height: 8px;
         border-radius: 4px;
         /* bo tròn */
         cursor: pointer;
         transition: all 0.3s;
         padding: 0;
     }

     .banner-slider .slick-dots li button:before {
         content: "";
     }

     .banner-slider .slick-dots li.slick-active button {
         background: #ff8c00;
         /* màu cam cho dot active */
         width: 35px;
         /* dài hơn khi active */
     }

     .main-nav-games-grid {
         grid-template-columns: repeat(3, 1fr);
     }

     .footer-container {
         flex-direction: column;
     }

     .footer-col {
         border-bottom: 1px solid #222;
         padding: 10px 0;
     }

     .footer-title {
         display: flex;
         justify-content: space-between;
         align-items: center;
         cursor: pointer;
         font-size: 16px;
         color: #fff;
     }

     .toggle-icon {
         font-size: 14px;
         transition: transform 0.3s;
     }

     .footer-title.active .toggle-icon {
         transform: rotate(180deg);
     }

     .footer-list {
         display: none;
         margin-top: 10px;
     }

     .footer-list.show {
         display: block;
     }

     .ambassadors {
         display: block;
     }

     .ambassadors .ambassador {
         padding-bottom: 10px;
     }

     .sponsor-bottom {
         display: block;
     }

     .sponsor-bottom .bottom-col {
         padding-bottom: 10px;
     }

     .sponsor-bottom .bottom-col img {
         width: 70px;

     }

 }

 @media screen and (max-width: 500px) {
     .main-nav-games-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }