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

body {
  font-family: "Roboto", sans-serif;
  background: #fff;
  overflow-x: hidden;
}

/* Header */
/* .header-wrap {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 48px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      z-index: 20;
    }

    .header-logo {
      height: 100%;
      max-height: 48px;
      min-width: 100px;
      max-width: 150px;
    }

    .header-logo img {
      height: 100%;
      max-height: 100%;
      max-width: 100%;
    }

    .bar-icon {
      color: #00a3c6;
      font-size: 24px;
    }

    .app-download-btn {
      height: 30px;
    } */

.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 20;
  overflow: hidden;
}

.header-wrap .bar {
  color: #00a3c6;
}

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bar {
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
  z-index: 1;
}

.header-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.header-logo img {
  max-height: 48px;
  max-width: 150px;
  display: block;
}

.app-download-btn {
  z-index: 1;
}

.app-download-btn img {
  max-height: 30px;
}

/* Overlay */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 1000;
}

.menu-overlay.active {
  display: block;
}

.menu-overlay .backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.menu-overlay .menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 290px;
  height: 100%;
  background: #fff;
  overflow-y: auto;
  padding: 1rem;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.menu-overlay.active .menu {
  transform: translateX(0);
}

.menu .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.5rem;
  cursor: pointer;
}

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

.menu li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  height: 40px;
}

.menu li .icon {
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.menu li .icon img {
  height: 18px;
  width: auto;
}

.menu li a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  flex: 1;
}

/* News Bar */
.news-wrap {
  position: relative;
  width: 100%;
  height: 22px;
  padding: 0 10px 0 40px;
  color: #103667;
  font-size: 12px;
  line-height: 22px;
  background: #fff;
  z-index: 19;
}

.news-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 35px;
  color: #7bbfd4;
  text-align: center;
}

.marquee-content {
  white-space: nowrap;
  overflow: hidden;
}

.marquee-text {
  display: inline-block;
  animation: marquee 35s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.banner-swiper {
  width: 100%;
  max-width: 100%;
  margin-top: 50px;
}

.banner-swiper img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.banner-swiper .swiper-button-next,
.banner-swiper .swiper-button-prev,
.banner-swiper .swiper-pagination {
  display: none;
}

/* Login/Register Buttons */
.auth-buttons {
  display: flex;
  height: 33px;
  background: linear-gradient(to bottom, #7bbfd4, #2d7699);
}

.btn-login,
.btn-register {
  width: 50%;
  height: 100%;
  line-height: 33px;
  text-align: center;
  color: #fff;
  text-decoration: none;

  font-size: 15.5px;
  font-weight: 500;
  /* Gradient text */
  background: linear-gradient(to top, #fbcd2c 7%, #fffccc 89%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 
    .btn-login {
      background: #6cafc9;
      background-clip: padding-box;
    }

    .btn-register {
      background-image: linear-gradient(to right, #6cafc9, #347d9e);
      background-clip: padding-box;
    } */

/* Game Categories */
.section-category-wrap {
  position: relative;
  height: 72px;
  overflow: hidden;
  background: linear-gradient(325deg, #5fa9c1 11.6%, #347d9e 97.59%);
}

.category-swiper {
  width: 100%;
  height: 100%;
  padding: 0 3% !important
}

.category-swiper.no-arrow {
  padding: 0;
}

.entrance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
}

.entrance:hover,
.entrance.active {
  background: #6bb0c8;
}

.entrance i {
  margin-bottom: 3px;
}

.entrance img {
  height: 20px;
  width: 20px;
  object-fit: contain;
}

.entrance .title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95%;
  min-height: 22px;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  white-space: break-spaces;
  font-size: 9px;
}

/* Swiper Navigation Buttons */
.swiper-button-prev,
.swiper-button-next {
  position: absolute !important;
  top: 0 !important;
  width: 13px !important;
  height: 100% !important;
  margin-top: 0 !important;
  background: #2d7699;
  z-index: 2 !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

.swiper-button-prev i,
.swiper-button-next i {
  font-size: 12px;
  color: #fff;
}

.swiper-button-prev {
  left: 0 !important;
}

.swiper-button-next {
  right: 0 !important;
}

.swiper-button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Game Section */
.section-game {
  position: relative;
  background: #fff;
}

/* Banner Image */
.bgImg {
  display: block;
  margin: 0.65rem auto 0;
  padding: 0;
  margin-bottom: -20px;
}

.bgImg img {
  width: 100%;
  max-height: 100%;
  margin: 0 auto;
  display: block;
}

/* Game Grid - 3 columns */
.game-part {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 14px 10px 0;
  margin: 0;
  list-style: none;
  gap: 7px;
}

.game-part.active {
  display: flex;
}

.game-item {
  position: relative;
  /* 3 items per row with gap */
  margin: 0;
}

.game-part .game-item {
  width: calc((100% - 14px) / 3);
}

.game-item .circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  background: none;
  flex-direction: column;
  box-shadow: none;
}

.gameimg-wrapper {
  padding: 1px;
  background: linear-gradient(306deg,
      #357e9f 25%,
      #ffffff 50%,
      #357e9f 80%,
      #ffffff 100%);
  border-radius: 16px;
  width: 100%;
}

.gameimg-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: contain;
  background: linear-gradient(358deg, #cff3ff 5%, #ffffff 65%);
}

/* Remove name label */
.game-item .name {
  position: initial;
  width: 100%;
  height: 14px;
  line-height: 14px;
  margin-top: 2px;
  padding: 0 3px;
  transform: none;
  background: none;
  border-top: none;
  font-size: 9px;
  color: rgb(31 96 124);
  text-align: center;
}

/* Leaderboard */
.leaderboard {
  margin: 20px 10px;
  border-radius: 8px;
  background: #f2fdff;
  padding: 15px;
}

.leaderboard-title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #357e9f;
}

.leaderboard-header {
  display: grid;
  grid-template-columns: 25fr 27fr 23fr 25fr;
  background: linear-gradient(to bottom, #6ed7ed, #028fad);
  color: #fff;
  padding: 8px 0;
  font-size: 11px;
  text-align: center;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 25fr 27fr 23fr 25fr;
  padding: 8px 0;
  font-size: 10px;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.leaderboard-row:nth-child(even) {
  background: #fff;
}

/* Jackpot */
.jackpot-section {
  margin: 20px 10px;
  padding: 20px 10px;
  border-radius: 16px;
  border: 2px solid #357e9f;
  background: linear-gradient(0deg, #cff3ff 2%, #fff 69.62%);
}

.jackpot-numbers {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 20px 0;
}

.jackpot-number {
  width: 40px;
  height: 45px;
  background: url("https://a865c0.swuacktu.net/system-requirement/Web.MobileNew/UK254-01/9d371ae2f6/jackpot_number_bg.0e4c57f6dd31729f.png") center no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  color: #357e9f;
}

/* Footer Navigation */
.footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: linear-gradient(to bottom, #7bbfd4, #2d7699);
  z-index: 10;
  padding-bottom: env(safe-area-inset-bottom);
}

.footer-nav ul {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-left: 1px solid #2d7699;
}

.footer-nav li.active {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(45 118 153 / var(--tw-bg-opacity, 1));
}

.footer-nav li:first-child {
  border-left: none;
}

.footer-nav li i {
  font-size: 26px;
  margin-bottom: 5px;
}

.footer-nav li span {
  font-size: 9px;
  text-transform: uppercase;
}

/* Content Container */
.main-content {
  position: relative;
  padding-bottom: 65px;
}

/* JACKPOT WRAPPER */
.jackpot-wrapper {
  margin-top: 20px;
  padding: 10px;
}

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

.jackpot-border {
  padding: 2px;
  background: linear-gradient(306deg,
      #357e9f 25%,
      #ffffff 50%,
      #357e9f 80%,
      #ffffff 100%);
  border-radius: 16px;
}

.jackpot-bg {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 20px;
  background: linear-gradient(0deg, #cff3ff 2%, #fff 69.62%);
  border-radius: 16px;
}

.jackpot-title {
  padding: 5px;
  width: 40%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 8px;
}

.jackpot-title img {
  width: 100%;
  height: auto;
}

.gold {
  display: flex;
  width: 100%;
  justify-content: space-around;
  margin-top: 20px;
  padding: 3px 5px;
  list-style-type: none;
}

.gold li {
  padding: 1px;
  background-color: rgb(53 126 159);
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.gold li>div {
  color: rgb(53 126 159);
  font-size: 30px;
  font-weight: 500;
  line-height: 35px;
  padding: 0 5px;
  background: url("https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/9d371ae2f6/jackpot_number_bg.0e4c57f6dd31729f.png") center no-repeat;
  background-size: cover;
  border-radius: 6px;
}

/* Swiper phần Jackpot gợi ý game */
.recommendGames {
  width: 50%;
  max-width: 225px;
  margin-top: 5px;
}

.recommend-item {
  margin: 0 3px;
}

.recommend-item .img-wrapper img {
  max-width: 100%;
  max-height: 100%;
}

.recommend-item p {
  display: none;
  margin: 0;
  font-size: 8px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Jackpot footer */
.jackpot-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  overflow: hidden;
}

.jackpot-footer img {
  width: 100%;
  height: auto;
}

/* Optional: thêm animation hoặc hiệu ứng nếu bạn muốn */
.jackpot-wrapper .gold li>div {
  transition: transform 0.2s ease-in-out;
}

.jackpot-wrapper .gold li:hover>div {
  transform: scale(1.1);
}

.app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.75rem;
  background: url("https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/9d371ae2f6/app_bg.b83dbf3e8f93e1b3.png") no-repeat center / cover;
  border-radius: 12px;
  margin-top: 20px;
}

section.app {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.app>img {
  max-width: 50%;
}

.app .btns a {
  display: block;
  width: 146.7px;
  height: 35.2px;
  line-height: 35.2px;
  padding-left: 30px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  border-radius: 8px;
}

.app .btns a.ios {
  margin: 12px 0 0;
  background-image: url("https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/9d371ae2f6/ios.77a85a83c516ccaa.png");
}

.app .btns a.and {
  background-image: url("https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/9d371ae2f6/android.0fb1a60871e6892c.png");
}

.app .btns p {
  margin: 10px 0;
  color: #357e9f;
  text-align: center;
  text-decoration: underline;
  font-size: 13px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .app>img {
    max-width: 90%;
    margin-top: 10px;
  }
}

/* SIGN */
.sign {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 13px 0.75rem 0;
  color: rgb(31, 96, 125);
}

.sign p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.sign p.bold {
  font-size: 15px;
  font-weight: 700;
}

.sign img {
  max-width: 120px;
}

@media (max-width: 768px) {
  .app>img {
    max-width: 90%;
    margin-top: 10px;
  }

  .sign .sign-right {
    margin-top: 10px;
  }
}

/* BRAND */
.brand {
  margin-top: -7px;
  margin-bottom: 13px;
  padding: 0 1rem;
}

.brand-title {
  color: #357e9f;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-title img {
  width: 32px;
}

.brand-title img.news {
  display: inline-block;
  vertical-align: middle;
}

.brand-title .site-name {
  font-weight: 800;
  text-transform: uppercase;
  margin-right: 4px;
}

.brand-title .capitalize {
  text-transform: capitalize;
}

.brand-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-content img {
  width: 100%;
  border-radius: 10px;
}

.brand-content .show {
  position: absolute;
  left: 2%;
  bottom: 7%;
  width: 16%;
  height: 11%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.brand-content .show.expend {
  bottom: 5%;
  height: 7%;
  width: 14%;
}


.info p {
  font-size: 14px;
}

/* CSS cho phần info mới */
.info {
  padding-bottom: 26px;
  color: rgb(14, 116, 144);
}

.info section {
  display: flex;
  justify-content: space-between;
  padding: 0 0.75rem;
}

.info section>div:first-child {
  width: 43%;
  white-space: nowrap;
}

.info section>div {
  width: 50%;
}

.info section.payment {
  margin-bottom: 30px;
}

.payment p {
  margin-bottom: 8px;
}

.info section>div:last-child img,
.info section>div:last-child img {
  max-height: 58px;
  max-width: 70%;
}

.site p {
  margin-bottom: 12px;
}

.site>div>a {
  display: inline-block;
  width: 28px;
}

.site>div>a+a {
  margin-left: 11px;
}

.description {
  position: relative;
  color: rgb(45, 118, 153);
  font-family: Roboto, sans-serif;
  padding: 0 0.75rem 20px;
}

.description h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.description h4 {
  margin: 10px 0 5px;
  font-weight: 700;
}

.description p {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: justify;
}

.btn-toggle-bg {
  display: block;
  width: 90px;
  margin: 10px auto 0;
  background-color: rgb(123, 191, 212);
  border-radius: 5px 5px 0 0;
  padding: 5px;
  text-align: center;
}

.btn-toggle-bg img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

.app-download-btn img {
  height: 100%;
}

.hot-news .ticker-wrapper {
  position: relative;
  width: 100%;
}

.hot-news .ticker {
  display: inline-block;
  white-space: nowrap;
  position: absolute;
  will-change: transform;
}

/* Div trống với background */
#menuHeader {
  height: 200px;
  margin-top: 30px;
  background: url("https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/9d371ae2f6/menu.499487e4eb727336.png") center/100% 100%;
}

/* Close button */
#closeBtn {
  position: absolute;
  top: 5px;
  right: 15px;
  width: 24px;
  height: 24px;
  background-color: rgb(45, 118, 153);
  mask: url("https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/9d371ae2f6/arrow.8213172f7242ce9d.svg") center/contain no-repeat;
  -webkit-mask: url("https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/9d371ae2f6/arrow.8213172f7242ce9d.svg") center/contain no-repeat;
  cursor: pointer;
}

/* Overlay */
#backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 20;
}

#backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* Menu */
/* Side bar */
#side-bar-overlay {
  width: 100%;
  background-color: #00000080;
  z-index: 100;
  top: 0;
  left: 0;
}

#side-bar-overlay.active {
  position: fixed;
  height: 100%;
}

#menuOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 290px;
  height: 100%;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 30;
}

#menuOverlay.active {
  transform: translateX(0);
}

/* Div trống với background */
#menuHeader {
  height: 200px;
  margin-top: 30px;
  background: url("https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/9d371ae2f6/menu.499487e4eb727336.png") center/100% 100%;
}

/* Close button */
#closeBtn {
  position: absolute;
  top: 5px;
  right: 15px;
  width: 24px;
  height: 24px;
  background-color: rgb(45, 118, 153);
  mask: url("https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/9d371ae2f6/arrow.8213172f7242ce9d.svg") center/contain no-repeat;
  -webkit-mask: url("https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/9d371ae2f6/arrow.8213172f7242ce9d.svg") center/contain no-repeat;
  cursor: pointer;
}

/* Menu list */
#menuOverlay ul {
  list-style: none;
  padding: 0;
  margin: 0;
  height: calc(100% - 230px) !important;
  overflow: auto;
}

#menuOverlay li {
  display: flex;
  align-items: center;
  height: 40px;
  font-size: 14px;
  margin-bottom: 5px;
  padding-left: 10px;
}

#menuOverlay li img,
#menuOverlay li i {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  flex-shrink: 0;
}

#menuOverlay a {
  text-decoration: none;
  color: rgb(123 191 212);
  flex: 1;
}

#menuOverlay li {
  --tw-text-opacity: 1;
  color: rgba(123, 191, 212, var(--tw-text-opacity));
  display: flex;
  align-items: center;
  height: 40px;
  font-size: 14px;
  margin-bottom: 5px;
}

/* Các li lẻ có gradient nền */
#menuOverlay li:nth-child(odd) {
  background: linear-gradient(90deg,
      rgba(123, 191, 212, 0.376) 0%,
      transparent 80%);
}

.menu-time {
  position: absolute;
  top: 5px;
  left: 15px;
  font-size: 12px;
}

.member-info-bg {
  display: block;
  background: linear-gradient(to bottom, #2d7699 0%, #7bbfd4 100%);
  /* hoặc nếu muốn giống Angular dùng biến CSS: */
  /* background-image: linear-gradient(to bottom, var(--tw-gradient-from), var(--tw-gradient-to)); */
}

.section-account {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  font-size: 0;
}

.section-account>section {
  position: relative;
  z-index: 1;
}

.account-box.islogin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 34%;
  height: 100%;
  padding: 5px;
  color: #fff;
  font-size: 11px;
  text-align: center;
  overflow: hidden;
}

.account-box.islogin>p {
  margin: 0;
}

.detail {
  color: #fff200;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
}

.detail i {
  color: #fff200;
  font-size: 12px;
}

.account-nav {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66%;
  height: 100%;
}

.account-nav::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 113%;
  height: 100%;
  background: linear-gradient(110deg, transparent 35px, #7bbfd4 0) left;
}

.account-nav ul {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: space-around;
  align-items: center;
}

.account-nav ul li {
  display: inline-block;
  position: relative;
  vertical-align: top;
}

.account-nav ul li img {
  height: 40px;
}

/* Button toggle chung */
section-game {
  position: relative;
}

/* Banner */
.bgImg {
  display: block;
  position: relative;
  z-index: 1;
}

.bgImg img {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

/* Button toggle */
.btn-toggle-bg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 98px;
  height: 14px;
  background: rgba(24, 128, 164, 0.5);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  /* cao hơn bgImg */
  border: none;
  cursor: pointer;
  margin-top: 0;
  padding: 3px;
}

.btn-toggle-bg img {
  max-height: 100%;
  display: block;
}

/* Button trên */
.btn-top {
  top: -11px;
  /* điều chỉnh vị trí trên cùng */
  border-radius: 0 0 5px 5px;
}

.btn-top.closed {
  top: -1px;
}

/* Button toggle */
.btn-toggle-bg-ft {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 98px;
  height: 14px;
  background: rgba(24, 128, 164, 0.5);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  /* cao hơn bgImg */
  border: none;
  cursor: pointer;
  margin-top: 0;
  padding: 3px;
}

.btn-toggle-bg-ft img {
  max-height: 100%;
  display: block;
}

.btn-top-ft {
  bottom: 64px;
  border-radius: 5px 5px 0px 0px;
}

/* .btn-top-ft.closed {
  top: -1px;
} */


/* Container chính */
#activityEntrance {
  position: fixed;
  z-index: 10;
  bottom: 100px;
  right: 0;
  width: 130px;
  height: 100px;
  font-size: 0;
}

/* Link bên trong container */
#activityEntrance a {
  display: block;
  height: 100px;
  text-align: center;
  text-decoration: none;
}

/* Hình ảnh */
#activityEntrance img {
  max-width: 105px;
  max-height: 81px;
  margin: 15px auto 0;
  display: block;
}

/* Close button */
#activityEntrance .close {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -1px;
  right: 0;
  width: 24px;
  height: 24px;
  color: #fff;
  font-size: 16px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.75);
  cursor: pointer;
  user-select: none;
}

/* Optional: hover hiệu ứng */
#activityEntrance .close:hover {
  background-color: rgba(0, 0, 0, 1);
}

#floatAdBottom {
  position: fixed;
  z-index: 20;
  bottom: 216px;
  left: 0;
  width: 85px;
  /* điều chỉnh theo ảnh */
  height: auto;
}

/* Wrapper */
#floatAdBottom .wrapper {
  position: relative;
}

/* Link */
#floatAdBottom a {
  display: block;
  text-align: center;
  text-decoration: none;
}

/* Hình ảnh */
#floatAdBottom img {
  width: 100%;
  height: auto;
  display: block;
}

/* Nút đóng */
#floatAdBottom .closed {
  position: absolute;
  top: -20px;
  left: 5px;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 16px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 2;
  user-select: none;
}

#floatAdBottom .closed:hover {
  background-color: rgba(0, 0, 0, 1);
}


/* Container chính */
#myFloatAd {
  position: fixed;
  z-index: 30;
  bottom: 216px;
  right: 0;
  width: 85px;
  height: auto;
  cursor: move;
}

/* Wrapper */
#myFloatAd .my-wrapper {
  position: relative;
}

/* Link */
#myFloatAd a {
  display: block;
  text-align: center;
  text-decoration: none;
}

/* Hình ảnh */
#myFloatAd img {
  width: 100%;
  height: auto;
  display: block;
}

/* Nút đóng */
#myFloatAd .my-closed {
  position: absolute;
  top: -20px;
  right: 0px;
  width: 24px;
  height: 24px;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 16px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 2;
  user-select: none;
}

#myFloatAd .my-closed:hover {
  background-color: rgba(0, 0, 0, 1);
}


/* Container chính */
#memberInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to bottom, #7bbfd4, #2d7699);
  /* giảm trắng, xanh đậm hơn */
  width: 100%;
  font-size: 0;
  position: relative;
}

/* Wrapper cho các nút */
#memberInfo .btns {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  width: 100%;
}

/* Các nút */
#memberInfo .btns a {
  width: 50%;
  height: 100%;
  line-height: 33px;
  text-align: center;
  text-decoration: none;
  position: relative;
  margin: 0;
  transition: all 0.3s;
}

/* Text gradient (giảm vàng chói) */
#memberInfo .btns a span {
  font-size: 15.5px;
  font-weight: 500;
  background: linear-gradient(to top, #f9d57d 0%, #eebf7d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Nút đăng nhập */
#memberInfo .btn-login {
  background-color: #6cabbd;
  /* xanh nhẹ hơn */
  color: #fff;
}

/* Nút đăng ký */
#memberInfo .btn-reg {
  background-image: linear-gradient(to right, #6cafc9, #347d9e);
  /* giảm trắng */
}

/* Icon nhỏ bên phải nút đăng ký */
#memberInfo .btn-reg::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 36px;
  height: 12px;
  background: url('https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/79b785512d/57k.daf8df9a2460f819.png') no-repeat center/contain;
  transform: translateY(-50%);
}

/* Hover hiệu ứng */
#memberInfo .btns a:hover {
  filter: brightness(1.1);
}


.main-footer {
  background: url(https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/fb080c150e/footer-background.1007258d1c120ffd.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}


.wrapper-leaderboard {
  padding: 0;
  width: 100%;
  background: #fff;
}

.wrapper-leaderboard .bg {
  width: calc(100% - 18px);
  padding: 10px 0;
  margin: 16px auto;
  border-radius: 7.6px;
  box-shadow: inset 0 0 2.7px 2.5px #a4f1ff40, 0 1.3px 3.6px 3.5px #31498505;
  border: solid .6px #fff;
  background-color: #f2fdff;
}

/* --- TITLE (ảnh nền) --- */
.wrapper-leaderboard .title {
  height: 68px;
  font-size: 0;
  background: url("https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/fb080c150e/leaderboard_title.bcb1d9ff5ab45865.png") no-repeat center / contain;
  margin-top: 16px;
  background-color: #fff;
}

/* --- Nút chuyển chế độ --- */
.wrapper-leaderboard .mode-btn-container {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  justify-content: center;
  align-items: center;
}

.wrapper-leaderboard .mode-btn-container button {
  flex: 1;
  background: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  border: 1px solid rgb(216 243 255);
  color: rgb(58 81 119);
  font-weight: bold;
  padding: 7px 0;
  border-radius: 37.8px;
  cursor: pointer;
  transition: 0.3s;
  text-transform: uppercase;
  font-size: 10px;
  max-width: 165px;
  text-wrap: nowrap;
  margin-top: 10px;
}

/* .wrapper-leaderboard .mode-btn-container button:hover {
  background: #3c3c3c;
} */

.wrapper-leaderboard .mode-btn-container button.active {
  color: #fff;
  background-image: linear-gradient(to bottom, #6ed7ed, #028fad);
  border-color: rgb(216 243 255);
}

/* --- Bảng hiển thị --- */
.wrapper-leaderboard .board {
  /* background: #222; */
  overflow: hidden;
}

.wrapper-leaderboard .head {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 2fr;
  padding: 10px;
  text-align: center;
  color: #fff;
  font-size: 11px;
  background-image: linear-gradient(to bottom, #6ed7ed, #028fad);
}

.wrapper-leaderboard .board-wrapper {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.wrapper-leaderboard .marquee-list {
  list-style: none;
  padding: 0;
  margin: 0;
  animation: scroll 15s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(0);
  }
}

.wrapper-leaderboard .marquee-item {
  display: grid;
  grid-template-columns: 1.5fr 2fr 2fr 1fr;
  align-items: center;
  padding: 8px 12px;
  font-size: 10px;
}

.wrapper-leaderboard .marquee-item div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wrapper-leaderboard .circle img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}

.wrapper-leaderboard .win {
  background-color: #ddf4f8;
}

.wrapper-leaderboard .win span {
  color: #444;

}

.wrapper-leaderboard .loss span {
  color: #444;
}

/* Profile */
/* Nền phía trên */
.mc-bg {
  position: absolute;
  top: 3rem;
  left: 0;
  width: 100%;
  height: 91px;
  background: #0089a6;
}

/* Tiêu đề */
.mc-title {
  position: relative;
  height: 33px;
  margin-top: 48px;
  line-height: 33px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  background: #00a3c6;
}

.mc-title .mc-back {
  position: absolute;
  top: 9px;
  left: 1.25rem;
}

.mc-back-icon {
  display: block;
  width: 15px;
  height: 15px;
  background-color: #fff;
  -webkit-mask: url(https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/ad6afdb550/back.793356416a974ef4.svg) no-repeat center;
  mask: url(https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/ad6afdb550/back.793356416a974ef4.svg) no-repeat center;
}

/* VIP box */
.mc-vip {
  position: relative;
  margin: 22px 13px 0;
  border-radius: 9px;
  overflow: hidden;
  background: #0b2330;
  color: #fff;
  padding: 15px;
}

.mc-vip-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mc-username {
  font-weight: bold;
  font-size: 16px;
}

.mc-refresh i {
  margin-left: 6px;
  cursor: pointer;
}

.mc-vip-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.mc-vip-left {
  flex: 1;
}

.mc-vip-item {
  margin-bottom: 10px;
}

.mc-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.mc-progress {
  width: 100%;
  height: 6px;
  background: #073646;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 5px;
}

.mc-progress-bar {
  height: 100%;
  background: linear-gradient(to right, #6ed7ed, #028fad);
  width: 0%;
  transition: width 0.3s;
}

.mc-vip-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mc-vip-right img {
  width: 80px;
  height: auto;
}

.mc-grade {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}

.mc-grade img {
  height: 16px;
}

.mc-grade span {
  font-weight: bold;
}

/* Nút nạp/rút tiền */
.mc-action-btns {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.mc-action-btns span {
  font-size: 14px;
}

.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 123px;
  height: 28px;
  border-radius: 50px;
  color: #fff;
  font-weight: 800;
  background-image: linear-gradient(to top, #006695, #0c85b3);
  text-decoration: none;
}

.mc-btn i {
  display: inline-block;
  width: 25px;
  height: 20px;
  margin-right: 5px;
  background-size: cover;
}

.deposit i {
  background: url(https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/ad6afdb550/deposit.11fd762362fc1a18.png) no-repeat center/cover;
}


.withdraw i {
  background: url(https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/ad6afdb550/withdraw.ef071b8e26642af0.png) no-repeat center/cover;
}

.mc-menu {
  padding: 16px;
}

.mc-menu li {
  position: relative;
  vertical-align: top;
  padding: 0 0.75rem;
  margin-bottom: 12px;
  color: #818181;
  font-size: 0.875rem;
  line-height: 1.75rem;
  outline: none;
  list-style: none;
}

.mc-menu li::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 8px;
  width: 15px;
  height: 12px;
  -webkit-mask: url(https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/ad6afdb550/arrow.899326d413dfe63e.svg) no-repeat center/contain;
  mask: url(https://gwfd.katawee.net/system-requirement/Web.MobileNew/UK254-01/ad6afdb550/arrow.899326d413dfe63e.svg) no-repeat center/contain;
  background: #818181;
}

.mc-menu li>a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Icon chung */
.mc-menu li i {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: sub;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: #00a3c6;
}

/* Icon cụ thể từng loại */
.mc-menu li i.mail {
  -webkit-mask-image: url(/assets/images/mail.2cba45b2ad5385f7.svg);
  mask-image: url(/assets/images/mail.2cba45b2ad5385f7.svg);
}

.mc-menu li i.bet {
  -webkit-mask-image: url(/assets/images/bet.b98ebedf18d402c1.svg);
  mask-image: url(/assets/images/bet.b98ebedf18d402c1.svg);
}

.mc-menu li i.transaction {
  -webkit-mask-image: url(/assets/images/transaction.90835396f704c107.svg);
  mask-image: url(/assets/images/transaction.90835396f704c107.svg);
}

.mc-menu li i.activity {
  -webkit-mask-image: url(/assets/images/activity.641c82fde44a2b7a.svg);
  mask-image: url(/assets/images/activity.641c82fde44a2b7a.svg);
}

.mc-menu li i.favorite {
  -webkit-mask-image: url(/assets/images/favorite.dde562da9949d238.svg);
  mask-image: url(/assets/images/favorite.dde562da9949d238.svg);
}

.mc-menu li i.security {
  -webkit-mask-image: url(/assets/images/security.ff6951f1c9dbfb60.svg);
  mask-image: url(/assets/images/security.ff6951f1c9dbfb60.svg);
}

.mc-menu li i.announcement {
  -webkit-mask-image: url(/assets/images/announcement.1e3af4ed6b950e54.svg);
  mask-image: url(/assets/images/announcement.1e3af4ed6b950e54.svg);
}

.mc-menu li i.discount {
  -webkit-mask-image: url(/assets/images/discount.aaf0f14104bbfbf4.svg);
  mask-image: url(/assets/images/discount.aaf0f14104bbfbf4.svg);
}

.mc-menu li i.vip {
  -webkit-mask-image: url(/assets/images/vip.7a627acdf5da5d23.svg);
  mask-image: url(/assets/images/vip.7a627acdf5da5d23.svg);
}

.mc-menu li i.friend {
  -webkit-mask-image: url(/assets/images/friend.c1e0958b963c1f8d.svg);
  mask-image: url(/assets/images/friend.c1e0958b963c1f8d.svg);
}

.mc-menu li i.logout {
  -webkit-mask-image: url(/assets/images/logout.159f33ac956b7554.svg);
  mask-image: url(/assets/images/logout.159f33ac956b7554.svg);
}

.mc-wrapper {
  position: relative;
  margin: 22px 13px;
  display: block;
  height: 130px;
  padding: 12px 15px 14px;
  background-image: linear-gradient(to bottom, #f3fdff, #aaf0ff);
  border-radius: 8px;
  margin-bottom: 0;
  box-sizing: border-box;
}

/* Phần trên: tên + cấp độ VIP */
.mc-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 21px;
}

.mc-top p {
  margin: 0;
  font-size: 18px;
}

.mc-top p:first-child {
  color: #333;
}

.mc-top p:last-child {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 26px;
  color: red;
  font-family: Roboto, sans-serif;
}

.mc-top p:last-child i {
  margin-left: 0.5rem;
  font-size: 10px;
}

/* Phần dưới: thanh tiến trình + avatar */
.mc-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

/* Bên trái: điểm + tiền nạp */
.mc-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  height: 84px;
  padding-top: 16px;
  padding-bottom: 7px;
}

.mc-left.center {
  justify-content: center;
}

.mc-left .progress {
  position: relative;
  height: 8px;
  margin-bottom: 0;
  border-radius: 3px;
  background-color: #0089a6;
  overflow: hidden;
}

.mc-left .progress-bar {
  border-radius: 3px;
  height: 100%;
  transition: width 0.3s ease;
}

/* Thanh điểm */
.mc-left .point {
  position: relative;
  line-height: 15px;
}

.mc-left .point .current {
  color: #333;
}

.mc-left .point .progress-bar {
  /* background-color: #fbcd2c; */
}

/* Thanh nạp tiền */
.mc-left .deposits {
  position: relative;
  line-height: 15px;
  border-radius: 0 0 8px 8px;
}

.mc-left .deposits .current {
  color: #333;
}

.mc-left .deposits .progress-bar {
  /* background-color: #fbcd2c; */
}

/* Nhãn số */
.mc-left .num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
  font-size: 10px;
  color: #333;
}

/* Bên phải: avatar + huy hiệu VIP */
.mc-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 64px;
  padding-bottom: 2px;
  align-items: center;
}

.mc-right img {
  height: 62px;
  width: auto;
}

.mc-right .grade {
  position: relative;
  width: 64px;
  height: 20px;
}

.mc-right .grade img {
  max-width: 100%;
  max-height: 100%;
}

.mc-right .grade span {
  position: absolute;
  bottom: 0px;
  right: 5px;
  left: 23px;
  height: 16px;
  color: #000;
  font-family: Arial, sans-serif;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}


/* --------- */


.promotion-game-list[_ngcontent-serverApp-c115] {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  display: block;
  color: #fff;
  background-color: #2d7699;
  box-shadow: 0 -5px 30px -5px #000000d9;
  z-index: 10;
}


.promotion-game-list {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 64px;
  display: block;
  color: #fff;
  background-color: #2d7699;
  box-shadow: 0 -5px 30px -5px #000000d9;
  z-index: 10;
}

/* Nút thu lại */
.switch {
  position: absolute;
  top: -25px;
  height: 25px;
  right: 35px;
  padding: 0 5px;
  color: #fff;
  line-height: 25px;
  font-size: 14px;
  background-color: #2d7699;
  cursor: pointer;
  transition: color 0.5s ease, background-color 0.5s ease;
}

.switch:before {
  content: "";
  position: absolute;
  left: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 25px 10px;
  border-color: transparent transparent #2d7699 transparent;
}

.switch:after {
  content: "";
  position: absolute;
  right: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 0 10px;
  border-color: transparent transparent transparent #2d7699;
}

.switch i {
  color: #fff;
  /* icon màu trắng cố định */
}

.switch span {
  color: #fff;
  /* text màu trắng cố định */
}

/* Swiper vùng hiển thị */
.promotion-swiper {
  width: 100vw;
  max-height: 175px;
  /* chiều cao mặc định */
  overflow: hidden;
  transition: max-height 0.4s ease;
}

/* Item trong slider */
.promotion-game-item {
  color: #fff !important;
  padding-top: 20px;
  margin-bottom: 10px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promotion-game-item .text {
  font-size: 14px !important;
}

.promotion-game-item img {
  width: 62px;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.7));
  border-radius: 8px;
}

.promotion-game-list.collapsed {
  max-height: 0;
  transition: max-height 0.4s ease;
  /* ẩn slider */
}

.promotion-swiper.collapsed {
  max-height: 0;
  transition: max-height 0.4s ease;
  /* ẩn slider */
}

.profile-layout.hidden {
  display: none;
}

.main-content.hidden {
  display: none;
}

.switch.temp-black i {
  color: #000 !important;
}

.switch.temp-black span {
  color: #000 !important;
}

.profile-layout-top {
  position: relative;
  max-height: 90vh;
  /* chiều cao tối đa so với viewport */
  overflow-y: auto;
  /* bật scroll khi nội dung vượt quá */
  -webkit-overflow-scrolling: touch;
  /* mượt trên iOS */
}




/* Promotion Layout */
.promotion-layout {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, .32);
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.3s ease;
}

.promotion-layout.show {
  opacity: 1;
  transform: translateY(0);
}

.promotion-layout.hidden {
  transform: translateY(100%);
}

.promotion-layout-top {
  position: relative;
  max-height: 94vh;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 100;
  top: 58px;
  background: white;
}

/* Promotion Title Bar - Override mc-title for promotion */
.promotion-title-bar {
  position: fixed;
  width: calc(100vw - 40px);
  height: 48px;
  margin: -24px 20px 0;
  line-height: 48px;
  text-align: center;
  z-index: 1000;
}

.promotion-title-bar::before {
  content: "";
  position: absolute;
  top: 24px;
  left: -30px;
  width: 120%;
  height: 75%;
  background: #fff;
  border-radius: .375rem;
  z-index: -1;
}

.promotion-layout .mc-title-promotion {
  position: relative;
  height: 48px;
  margin-top: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: rgb(45 118 153);
  border-radius: .375rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ẩn nút back trong promotion layout */
.promotion-layout .mc-title .mc-back {
  display: none;
}

/* Title text trong promotion */
.promotion-layout .mc-title span {
  flex: 1;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Promotion Close Button */
.promotion-close {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.2s ease;
}

.promotion-close i {
  color: rgb(45 118 153);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}

.promotion-close:active {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Promotion Tabs */
.promotion-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 15px;
  background: #fff;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 45px;
}

.promotion-tab {
  width: 19%;
  padding: .25rem 0;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(123 191 212 / var(--tw-bg-opacity, 1));
  background-color: #00a3c6;
  border: none;
  font-size: 10px;
  white-space: nowrap;
  border-radius: .25rem;
  display: inline-block;
  line-height: 1rem;
}

.promotion-tab.active {
  background-color: #01667c;
}

.promotion-tab span {
  display: block;
}

/* Promotion Content */
.promotion-content {
  padding: 12px 15px;
}

.promotion-list {
  display: none;
  flex-direction: column;
}

.promotion-list.active {
  display: flex;
}

.promotion-layout .profile-layout-bottom {
  z-index: 100;
  position: relative;
}

.promotion-layout .promotion-game-list {
  bottom: 0 !important;
}

.fa-chevron-double-down:before {
  font-weight: 500 !important;
}




#global-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
}

.spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  animation: spin 1s linear infinite;
}

.spinner-text {
  display: block;
  text-align: center;
  margin-top: 8px;
  font-size: 16px;
  color: #fff;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}