@charset "UTF-8";
:root {
  --color-black-070: rgba(0, 0, 0, 0.7);
}

body {
  min-width: 1500px;
}

.popup .popup-title {
  min-height: 52px;
  background: #666;
}
.popup .popup-title .btn-close {
  background: transparent;
}
.popup .popup-title .btn-close .icon-close {
  color: #ccc;
}
.popup .popup-title .btn-close:hover {
  background: transparent;
}
.popup .popup-title .btn-close:hover .icon-close {
  color: #aaa;
}
.popup .popup-content {
  background: #666;
}
.popup .popup-content .popup-text {
  color: #888;
}

.content-wrap {
  margin-left: 240px;
  transition: all 0.3s ease-in-out;
}
.content-wrap.fold {
  margin-left: 72px;
}

.container {
  max-width: 1216px;
  padding: 81px 0 50px 0;
  margin: 0 auto;
}

.page-content-default {
  margin: 0 0 0 240px;
  padding: 81px 0 50px 0;
  transition: all 0.3s ease-in-out;
}
.page-content-default .page-title {
  width: 1216px;
  margin: 0 auto;
}
.page-content-default .page-content-list {
  width: 1216px;
  margin: 0 auto;
}
.page-content-default .area-content {
  width: 1216px;
  margin: 0 auto;
  border-radius: 12px;
}
.page-content-default.fold {
  margin-left: 72px;
}

.pagination .btn {
  width: 24px;
  font-size: 0.75rem;
}

.page-tabs {
  width: fit-content;
  border-radius: 8px;
  gap: 0;
}
.page-tabs .btn-tabs {
  border-radius: 8px;
}
.page-tabs .btn-tabs .text {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 128px;
  height: 45px;
  padding: 0 0.75rem;
  font-size: 0.875rem;
}

.input-content {
  border-radius: 8px;
}
.input-content .btn-edit, .input-content .btn-select {
  border-radius: 6px;
}

#bonus-record-vip .content-title .item .btn-one-click, #bonus-record-cashback .content-title .item .btn-one-click, #bonus-record-offer .content-title .item .btn-one-click, #instant-rebate .content-title .item .btn-one-click, #bonus-all-agent .content-title .item .btn-one-click {
  border-radius: 8px;
}

#index-popup-news .btn-close, #index-welcome .btn-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
#index-popup-news .btn-close svg, #index-welcome .btn-close svg {
  width: 18px;
  height: 18px;
}

.ReactModal__Overlay {
  backdrop-filter: blur(1px);
}

#popup-container-ant-web {
  backdrop-filter: blur(1px);
  background: rgba(0, 0, 0, 0.4);
}

.float-btn {
  position: fixed;
  right: 0.6rem;
  bottom: 0.8rem;
  z-index: 101;
}
.float-btn.chatroom {
  bottom: 186px;
}

.float-btn-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}
.float-btn-item.zalo .float-btn-text.zalo {
  flex-direction: column;
  height: auto;
  bottom: 0;
  width: 107px;
  height: 120px;
  gap: 0.2rem;
}
.float-btn-item.zalo .float-btn-text.zalo:after {
  bottom: 20px;
}
.float-btn-item .float-btn-icon {
  position: relative;
  width: 32px;
  height: 32px;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;
}
.float-btn-item .float-btn-text {
  display: none;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 52px;
  padding: 0 0.6rem;
  height: 40px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
}
.float-btn-item .float-btn-text:after {
  content: "";
  display: block;
  position: absolute;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  right: -6px;
}
.float-btn-item .float-btn-app {
  position: absolute;
  display: none;
  flex-direction: column;
  align-items: center;
  width: 88px;
  border-radius: 8px;
  left: -96px;
  bottom: -2px;
  gap: 0.4rem;
  padding: 0.4rem 0;
}
.float-btn-item .float-btn-app .float-app-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  margin: 0;
}
.float-btn-item .float-btn-app .float-app-item .float-app-icon {
  width: 52px;
  height: 52px;
  background-position: center;
  background-repeat: no-repeat;
}
.float-btn-item .float-btn-app .float-app-item .float-app-text {
  display: none;
  position: absolute;
  align-items: center;
  justify-content: center;
  right: 98px;
  padding: 0 0.6rem;
  height: 40px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
}
.float-btn-item .float-btn-app .float-app-item .float-app-text:after {
  content: "";
  display: block;
  position: absolute;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  right: -6px;
}
.float-btn-item .float-btn-app .float-app-item .float-app-text.qrcode {
  width: 107px;
  height: 120px;
  flex-direction: column;
  gap: 0.2rem;
}
.float-btn-item .float-btn-app .float-app-item .float-app-text.qrcode img {
  border-radius: 4px;
}
.float-btn-item .float-btn-app .float-app-item:hover .float-app-text {
  display: flex;
}
.float-btn-item.show .float-btn-icon {
  background-position: left bottom;
}
.float-btn-item.show .float-btn-app {
  display: flex;
}
.float-btn-item:hover .float-btn-icon {
  background-position: bottom center;
}
.float-btn-item:hover.online-cs .float-btn-text.online-cs {
  display: flex;
}
.float-btn-item:hover.line .float-btn-text.line {
  display: flex;
}
.float-btn-item:hover.telegram .float-btn-text.telegram {
  display: flex;
}
.float-btn-item:hover.teams .float-btn-text.teams {
  display: flex;
}
.float-btn-item:hover.whatsapp .float-btn-text.whatsapp {
  display: flex;
}
.float-btn-item:hover.messenger .float-btn-text.messenger {
  display: flex;
}
.float-btn-item:hover.instagram .float-btn-text.instagram {
  display: flex;
}
.float-btn-item:hover.zalo .float-btn-text.zalo {
  display: flex;
}
.float-btn-item:hover.meiqia .float-btn-text.meiqia {
  display: flex;
}
.float-btn-item .float-btn-arrow {
  display: none;
}

.discount-reminder-popup .reminder-content .reminder-btn {
  border-radius: 8px;
  border: 0;
}

.gotop {
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  z-index: 99;
  right: 0.6rem;
  bottom: 4.2rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.gotop.hide {
  right: -4rem;
}

.header {
  position: relative;
  z-index: 100;
}

.header-left {
  position: fixed;
  left: 0;
  top: 65px;
  width: 240px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 0 0 1rem;
}
.header-left:has(.fold) {
  width: 72px;
}

.menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  width: 208px;
  height: 100%;
}
.menu .menu-list, .menu .menu-unfold .menu-unfold-list {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 0.2rem 1rem;
  border-radius: 8px;
  min-height: 40px;
  text-align: left;
  cursor: pointer;
}
.menu .menu-list .menu-list-icon, .menu .menu-unfold .menu-unfold-list .menu-list-icon {
  min-width: 32px;
  height: 32px;
}
.menu .menu-list .menu-list-arrow, .menu .menu-unfold .menu-unfold-list .menu-list-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  margin-left: auto;
}
.menu .menu-list .menu-list-arrow svg, .menu .menu-unfold .menu-unfold-list .menu-list-arrow svg {
  transform: rotate(90deg);
  transition: all 0.3s ease-in-out;
}
.menu .menu-list.service svg, .menu .menu-unfold .service.menu-unfold-list svg, .menu .menu-list.language svg, .menu .menu-unfold .language.menu-unfold-list svg {
  transform: rotate(0);
}
.menu .menu-item {
  width: 100%;
  border-radius: 8px;
}
.menu .menu-item.unfold .menu-list-arrow svg {
  transform: rotate(-90deg);
}
.menu .menu-item.unfold .menu-unfold {
  height: 100%;
  padding: 0.25rem 0 0 0;
}
.menu .menu-unfold {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 0px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.menu .menu-float {
  position: relative;
  width: 100%;
}
.menu .menu-float-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: absolute;
  right: -190px;
  top: 0;
  padding: 0.4rem;
  border-radius: 8px;
}
.menu .menu-float-list .country {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
  width: 160px;
  height: 40px;
  padding: 0 1rem;
  border-radius: 8px;
  cursor: pointer;
}
.menu .menu-float-list .country.zh-TW .flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: url(/images/common/language-zh-TW.webp) no-repeat left center;
  background-size: cover;
}
.menu .menu-float-list .country.zh-CN .flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: url(/images/common/language-zh-CN.webp) no-repeat left center;
  background-size: cover;
}
.menu .menu-float-list .country.en-US .flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: url(/images/common/language-en-US.webp) no-repeat left center;
  background-size: cover;
}
.menu .menu-float-list .country.ja-JP .flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: url(/images/common/language-ja-JP.webp) no-repeat left center;
  background-size: cover;
}
.menu .menu-float-list .country.vi-VN .flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: url(/images/common/language-vi-VN.webp) no-repeat left center;
  background-size: cover;
}
.menu .menu-float-list .country.th-TH .flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: url(/images/common/language-th-TH.webp) no-repeat left center;
  background-size: cover;
}
.menu .menu-float-list .country.pt-BR .flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: url(/images/common/language-pt-BR.webp) no-repeat left center;
  background-size: cover;
}
.menu .menu-float-list .country .name {
  font-size: 0.9rem;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}
.menu .menu-float-list.service {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 50%;
  right: -100px;
  width: 88px;
  padding: 0.4rem;
  border-radius: 8px;
  transform: translateY(-50%);
}
.menu .menu-float-list.service .float-app-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  margin: 0;
  cursor: pointer;
}
.menu .menu-float-list.service .float-app-item .float-app-icon {
  width: 52px;
  height: 52px;
  background-position: center;
  background-repeat: no-repeat;
}
.menu .menu-float-list.service .float-app-item .float-app-text {
  display: none;
  position: absolute;
  align-items: center;
  justify-content: center;
  left: 98px;
  padding: 0 0.6rem;
  height: 40px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
}
.menu .menu-float-list.service .float-app-item .float-app-text:after {
  content: "";
  display: block;
  position: absolute;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  left: -6px;
}
.menu .menu-float-list.service .float-app-item .float-app-text.qrcode {
  width: 107px;
  height: 120px;
  flex-direction: column;
  gap: 0.2rem;
}
.menu .menu-float-list.service .float-app-item .float-app-text.qrcode img {
  border-radius: 4px;
}
.menu .menu-float-list.service .float-app-item:hover .float-app-text {
  display: flex;
}
.menu .menu-float-list.show {
  display: flex;
}
.menu.fold {
  width: 40px;
}
.menu.fold .menu-item.unfold .menu-unfold {
  overflow: inherit;
}
.menu.fold .menu-list, .menu.fold .menu-unfold-list {
  position: relative;
  width: 40px;
  padding: 0;
  justify-content: center;
}
.menu.fold .menu-list .menu-list-text, .menu.fold .menu-unfold-list .menu-list-text {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  left: 48px;
  padding: 0 0.6rem;
  height: 32px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
}
.menu.fold .menu-list .menu-list-text:after, .menu.fold .menu-unfold-list .menu-list-text:after {
  content: "";
  display: block;
  position: absolute;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  left: -6px;
}
.menu.fold .menu-list .menu-list-arrow, .menu.fold .menu-unfold-list .menu-list-arrow {
  display: none;
}
.menu.fold .menu-list:hover .menu-list-text, .menu.fold .menu-unfold-list:hover .menu-list-text {
  display: flex;
}

.header-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 65px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 1rem;
  min-width: 1400px;
  z-index: 1000;
}
.header-top.fold .header-top-left {
  width: 80px;
}
@media (max-width: 1600px) {
  .header-top.fold .header-top-right {
    width: 1048px;
  }
}

.header-top-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 240px;
  gap: 1.2rem;
  transition: all 0.3s ease-in-out;
}

.menu-btn {
  display: flex;
  min-width: 40px;
  height: 40px;
  border-radius: 8px;
}
.menu-btn.clicked {
  animation: clickMove 0.2s;
}

@keyframes clickMove {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.logo {
  display: flex;
  min-width: 128px;
  max-width: 128px;
  height: 100%;
  cursor: pointer;
}

.header-top-right {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 60px;
  width: 1216px;
  margin: 0 auto;
}

.news-marquee {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  max-width: 760px;
  min-width: 760px;
  height: 36px;
  border-radius: 18px;
  padding: 0 20px 0 40px;
  margin-right: auto;
  font-size: 0.9rem;
  cursor: pointer;
}
.news-marquee p {
  display: inline-block;
  margin-right: 0.4rem;
}

.list-function {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
}

.game-search {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
}

.user-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 4px 6px 4px 8px;
  border-radius: 10px;
  gap: 0.4rem;
}
.user-info .balance {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  padding: 0 0 0 22px;
}
.user-info .balance .icon-refresh {
  font-size: 0.9rem;
  transform: rotate(-90deg);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.user-info .balance .icon-refresh:hover {
  transform: rotate(90deg);
}
.user-info .user-deposit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 28px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 0 0.3rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.logout .user-info {
  display: none;
}

.function-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 8px;
}

.function-btn-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 40px;
  min-height: 40px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.function-btn-item.chatroom:after {
  content: "";
  display: flex;
  margin-left: auto;
  width: 1px;
  height: 25px;
}
.logout .function-btn-item.chatroom:after {
  display: none;
}
.logout .function-btn-item.mail {
  display: none;
}

.area-user {
  position: relative;
}
.logout .area-user {
  display: none;
}

.photo {
  width: 45px;
  min-height: 45px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}

.user-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 164px;
  border-radius: 8px;
  padding: 0.4rem;
  top: 52px;
  right: 0;
}
.user-menu .user-menu-list {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 0 0 2.6rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
}

.logout-btn {
  display: flex;
  flex-direction: row;
  gap: 0.2rem;
}
.logout-btn button {
  font-weight: bold;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.logout-btn button.reg-btn {
  min-width: 92px;
}
.logout-btn button.login-btn {
  min-width: 60px;
  padding: 0 0.8rem;
}
.login .logout-btn {
  display: none;
}

.dropdown-language {
  position: relative;
}
.dropdown-language .dropdown-btn, .dropdown-language #game-surface-popup-deposit .input-area .dropdown .list-option, #game-surface-popup-deposit .input-area .dropdown .dropdown-language .list-option {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
}
.dropdown-language .list-option {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: absolute;
  right: 0;
  top: 52px;
  min-width: 174px;
  padding: 0.4rem;
  border-radius: 8px;
}
.dropdown-language .list-option .country {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
  width: 160px;
  height: 40px;
  padding: 0 1rem;
  border-radius: 8px;
  cursor: pointer;
}
.dropdown-language .list-option .country.zh-TW .flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: url(/images/common/language-zh-TW.webp) no-repeat left center;
  background-size: cover;
}
.dropdown-language .list-option .country.zh-CN .flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: url(/images/common/language-zh-CN.webp) no-repeat left center;
  background-size: cover;
}
.dropdown-language .list-option .country.en-US .flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: url(/images/common/language-en-US.webp) no-repeat left center;
  background-size: cover;
}
.dropdown-language .list-option .country.ja-JP .flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: url(/images/common/language-ja-JP.webp) no-repeat left center;
  background-size: cover;
}
.dropdown-language .list-option .country.vi-VN .flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: url(/images/common/language-vi-VN.webp) no-repeat left center;
  background-size: cover;
}
.dropdown-language .list-option .country.th-TH .flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: url(/images/common/language-th-TH.webp) no-repeat left center;
  background-size: cover;
}
.dropdown-language .list-option .country.pt-BR .flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: url(/images/common/language-pt-BR.webp) no-repeat left center;
  background-size: cover;
}
.dropdown-language .list-option .country .name {
  font-size: 0.9rem;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}
.login .dropdown-language {
  display: none;
}

.music {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.music .off {
  display: none;
}
.music.off .on {
  display: none;
}
.music.off .off {
  display: flex;
}

.footer {
  padding: 0 0 0 240px;
  transition: all 0.3s ease-in-out;
}
.footer.fold {
  padding-left: 72px;
}

.footer-wrap {
  width: 1216px;
  margin: 0 auto;
  padding: 1.2rem 0 0 0;
}

.providers-list {
  width: 1216px;
  margin: 0 auto;
  padding: 1rem 0;
}

.providers-logo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-items: center;
  gap: 1rem 1.79rem;
}
.providers-logo .img-providers {
  width: 75px;
}

.license {
  padding: 2.4rem 0;
  width: 1216px;
  margin: 0 auto;
}

.license-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.license-list .license-item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
  justify-content: flex-start;
  width: 143px;
}
.license-list .license-item .license-title {
  font-size: 0.75rem;
  text-align: center;
}

.footer-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem 0;
  width: 1216px;
  margin: 0 auto;
}

.footer-link {
  display: flex;
  flex-direction: row;
  gap: 6.25rem;
}
.footer-link .link-item {
  display: flex;
  flex-direction: column;
  gap: 1.075rem;
  min-width: 64px;
}
.footer-link .link-item .link-title {
  font-weight: bold;
}
.footer-link .link-item .link-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.footer-link .link-item .link-list p {
  cursor: pointer;
}

.footer-responsible {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-responsible-logo {
  width: 127px;
}

.footer-responsible-text {
  font-size: 0.75rem;
  line-height: 1.25rem;
  padding: 0 0 0 64px;
}

.copyright {
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  font-size: 0.8rem;
  padding: 1.4rem;
  width: 1216px;
}

.slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
}
.slider img {
  border-radius: 12px;
}
.slider .slider-dot {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}
.slider .slider-dot .list-dot {
  width: 5px;
  height: 5px;
  margin-top: 0.7rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.slider .slider-dot .list-dot:hover, .slider .slider-dot .list-dot.active {
  width: 28px;
}
.slider .btn-chang-page {
  opacity: 0;
  position: absolute;
  width: 32px;
  height: 32px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 8px;
  font-size: 0.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  background-size: 100% 300%;
  cursor: pointer;
  z-index: 3;
  transition: all 0.3s ease-in-out;
}
.slider .btn-chang-page.left {
  left: 30px;
}
.slider .btn-chang-page.right {
  right: 30px;
}
.slider:before, .slider:after {
  content: "";
  display: block;
  position: absolute;
  width: 200px;
  height: calc(100% - 0.7rem - 5px);
  border-radius: 12px;
  opacity: 0;
  z-index: 2;
  transition: all 0.3s ease-in-out;
}
.slider:before {
  left: 0;
  background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.6));
}
.slider:after {
  right: 0;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.6));
}
.slider:hover .slider-dot, .slider:hover .btn-chang-page, .slider:hover:after, .slider:hover:before {
  opacity: 1;
}

.first-game-theme {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 252px;
  gap: 0.75rem;
  margin: 0.75rem 0 0;
}

.game-theme-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 355px;
  border-radius: 12px;
  padding: 1.25rem;
  cursor: pointer;
  overflow: hidden;
  transition: filter 0.3s ease-in-out;
}
.game-theme-list:after {
  content: "";
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.game-theme-right {
  display: grid;
  grid-template-columns: repeat(2, 2fr);
  gap: 0.8rem;
}
.game-theme-right .game-theme-list {
  width: 235px;
  padding: 0.75rem;
}

.game-theme-title {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 0 0 0 2.2rem;
}

.game-theme-text {
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.2rem;
}
.casino .game-theme-text {
  width: 185px;
}
.sports .game-theme-text {
  width: 210px;
}

.first-game {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 0 0 0;
  gap: 1.6rem;
}

.first-game-item {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
@media (max-width: 1900px) {
  .first-game-item {
    overflow-x: hidden;
  }
}

.game-item-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#game-list .game-item-top {
  margin: 1rem 0;
}

.game-item-title {
  display: flex;
  align-items: center;
  font-weight: bold;
}
#game-list .game-item-title {
  font-size: 1.5rem;
}

.game-item-arrow {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 0.3rem;
}
.game-item-arrow .btn-all-game {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 40px;
  height: 32px;
  border-radius: 8px;
  font-size: 0.85rem;
  padding: 0 12px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.game-item-arrow .btn-all-game.hidden {
  display: none;
}
.game-item-arrow .btn-all-game:after {
  font-family: "Font Awesome 6 Free";
  font-weight: bold;
  content: "\f105";
  display: flex;
  font-size: 0.75rem;
}
.game-item-arrow .btn-chang-game {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.game-item-arrow .btn-chang-game.hidden {
  opacity: 0.4;
  cursor: not-allowed;
}

.game-item-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.game-item-list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
}
.game-item-list:hover .list-game-info .providers-img {
  transform: scale(1.1);
}

.list-game-info {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 145px;
  height: 145px;
  border-radius: 12px;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  padding: 0.625rem 0 0 0;
}
.list-game-info .providers-img {
  width: 120px;
}
.list-game-info .providers-logo {
  position: absolute;
  bottom: -2px;
  width: 86px;
  height: 60px;
  object-fit: contain;
}
.list-game-info .providers-img {
  transition: all 0.3s ease-in-out;
}

.game-item-name {
  font-size: 0.8rem;
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 顯示兩行 */
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s ease-in-out;
}

.maintain {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  color: #fff;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  z-index: 3;
}

.page-title {
  gap: 0.8rem;
}
.page-title .page-back {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.25rem;
}
.page-title .page-back svg {
  width: 12px;
  height: 12px;
  border-radius: 8px;
  padding: 0.6rem;
}

/*-------------- 遊戲頁 --------------*/
.game-top-function {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0 0 0;
}

.function-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  height: 40px;
  border-radius: 8px;
  padding: 0 0.75rem;
  border: 1px solid transparent;
}
.function-search .search-clear {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.function-category {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.1rem;
  padding: 0.75rem 0 0 0;
}
.function-category .btn-category {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  gap: 0.4rem;
  height: 44px;
  border-radius: 8px;
  padding: 0 0.625rem;
  font-size: 0.875rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
.function-category .btn-category .category-icon {
  width: 24px;
  height: 24px;
  transition: background 0.3s ease-in-out;
}
.function-category .btn-category .category-text {
  transition: color 0.3s ease-in-out;
}

.game-lobby {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.2rem 0 0 0;
}
.game-lobby .game-item {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

#game .game-list-wrap, #game-list .game-list-wrap {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.8rem 0.4rem;
  padding: 40px 0;
}
#game-list .game-list-wrap {
  padding: 0 0 40px 0;
}
.game-list-wrap .game-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  width: 145px;
  border-radius: 10px;
  cursor: pointer;
}
@keyframes loading {
  to {
    background-position-x: -20%;
  }
}
.game-list-wrap .game-item:hover .game-pic img {
  transform: scale(1.1);
}
.game-list-wrap .game-item.jp .game-jp {
  display: block;
}
.game-list-wrap .game-item.new .game-new {
  display: block;
}
.game-list-wrap .game-item.recommend .game-recommend {
  display: block;
}
.game-list-wrap .game-item .game-pic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 145px;
  height: 145px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.game-list-wrap .game-item .game-pic img {
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}
.game-list-wrap .game-item .game-name {
  width: 145px;
  padding: 0.3rem 0;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.3s ease-in-out;
}
.game-list-wrap .game-item .game-jp {
  display: none;
  background: url(../../../images/common/jackpot/gameicon-jp-bg-1.webp) no-repeat center;
  background-size: cover;
  position: absolute;
  top: -44px;
  align-items: center;
  justify-content: center;
  width: 174px;
  height: 52px;
  animation-name: bg-jp;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  color: #fff;
  text-align: center;
  padding-top: 24px;
}
.game-list-wrap .game-item .game-new {
  display: none;
  background-size: cover;
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 0.1rem 0.8rem;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(#F20000, #820000);
  border: 1px solid #FF4D00;
  border-radius: 8px 0;
}
.game-list-wrap .game-item .game-new:before {
  content: "New";
  display: block;
}
.game-list-wrap .game-item .game-recommend {
  display: none;
  background: url(../images/common/icon-recommend.svg) no-repeat center #4E0000;
  border: 1px solid #FF8F4E;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 10px;
  top: 10px;
}
.game-list-wrap .game-item.default .game-pic img {
  width: 76px;
}

@keyframes bg-jp {
  0% {
    background-image: url(../../../images/common/jackpot/gameicon-jp-bg-1.webp);
  }
  50% {
    background-image: url(../../../images/common/jackpot/gameicon-jp-bg-2.webp);
  }
  100% {
    background-image: url(../../../images/common/jackpot/gameicon-jp-bg-3.webp);
  }
}
.game-container {
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
  padding: 1.2rem 0 0 0;
}

.game-item-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.8rem 0.4rem;
}

.game-item-filter {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  align-items: center;
}

.dropdown-list {
  position: relative;
  width: 288px;
}

.dropdown-btn, #game-surface-popup-deposit .input-area .dropdown .list-option {
  display: flex;
  flex-direction: row;
  gap: 0.2rem;
  align-items: center;
  width: 100%;
  height: 40px;
  font-size: 0.875rem;
  padding: 0 0.625rem;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.dropdown-btn .icon, #game-surface-popup-deposit .input-area .dropdown .list-option .icon {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  margin-left: auto;
  padding: 6px;
}

.dropdown-title {
  display: flex;
  flex-direction: row;
  gap: 0.2rem;
}
.dropdown-title:after {
  content: ":";
  display: flex;
}

.list-option {
  position: absolute;
  width: 100%;
  max-height: 200px;
  top: 46px;
  border-radius: 8px;
  z-index: 999;
  padding: 0.4rem;
  overflow-y: auto;
}
.list-option .option {
  justify-content: flex-start;
  padding: 0.6rem;
  border-radius: 6px;
  font-size: 0.875rem;
  text-align: left;
}
.list-option::-webkit-scrollbar {
  width: 4px;
}

.game-supplier-list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
  padding: 1.2rem 0;
}

.game-supplier-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 68px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.game-supplier-item img {
  width: 64px;
}

.game-list-top {
  display: flex;
  flex-direction: row;
  gap: 0.625rem;
  align-items: center;
}

.game-list-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.game-list-title {
  font-size: 1.25rem;
  font-weight: bold;
}

#game-surface .game-header .btn {
  border-radius: 8px;
}

#game-surface-popup-deposit .input-area .dropdown .dropdown-btn .option.bank-card .img, #game-surface-popup-deposit .input-area .dropdown .list-option .option.bank-card .img {
  background: url("../../../images/common/deposit-icon-bank-card.webp") no-repeat center;
  background-size: cover;
  min-width: 28px;
}
#game-surface-popup-deposit .input-area .dropdown .dropdown-btn .option.crypto .img, #game-surface-popup-deposit .input-area .dropdown .list-option .option.crypto .img {
  background: url("../../../images/common/deposit-icon-crypto.webp") no-repeat center;
  background-size: cover;
  min-width: 28px;
}
#game-surface-popup-deposit .input-area .dropdown .dropdown-btn .option.third-parties .img, #game-surface-popup-deposit .input-area .dropdown .list-option .option.third-parties .img {
  background: url("../../../images/common/deposit-icon-third-parties.webp") no-repeat center;
  background-size: cover;
  min-width: 28px;
}
#game-surface-popup-deposit .input-area .dropdown .list-option {
  flex-direction: column;
}

#index-popup-news .other .rule-gaming {
  background: url(../images/common/btn-rule-gaming.webp) no-repeat center;
  background-size: cover;
}
#index-popup-news .other .rule-service {
  background: url(../images/common/btn-rule-service.webp) no-repeat center;
  background-size: cover;
}
#index-popup-news .other .text {
  color: #fff;
}

#discount .page-title, #discount-detail .page-title {
  gap: 0.8rem;
}
#discount .page-title:before, #discount-detail .page-title:before {
  content: "";
  width: 6px;
  height: 32px;
  border-radius: 4px;
}
#discount .area-content .btn-back svg, #discount-detail .area-content .btn-back svg {
  width: 12px;
  height: 12px;
  border-radius: 8px;
  padding: 0.6rem;
}
#discount .area-content .discount-title .btn-apply, #discount-detail .area-content .discount-title .btn-apply {
  border-radius: 8px;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}
#discount .area-other .btn-more, #discount-detail .area-other .btn-more {
  min-width: 96px;
  height: 36px;
  border-radius: 8px;
  padding: 0.4rem 1rem;
}

#deposit .list-content .hr-vertical {
  display: none;
}

#game-surface-popup-deposit .list-content .hr-vertical {
  display: none;
}

#chatroom-under-member .page-content-list .area-page-content {
  width: 1000px;
}

#withdraw-popup-amount .btn-option {
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  border-radius: 10px;
}

#promote-overview .area-content .area-receive-award .btn-receive {
  border-radius: 8px;
}

#index-popup-check .popup-btn .btn-send {
  border-radius: 4px;
}

#support-404 .content .title-text, #support-error .content .title-text {
  align-items: center;
}
#support-404 .content .btn-back, #support-error .content .btn-back {
  display: flex;
  align-items: center;
  justify-content: center;
}

#roadmap .roadmap-top, #roadmap .roadmap-content {
  width: 1216px;
  margin: 0 auto;
}
#roadmap .user-photo {
  border-radius: 28px;
  border: 2px solid transparent;
}
#roadmap .user-vip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
  border-radius: 4px;
  padding: 0.1em 0.8rem 0.1rem 1.4rem;
  transform: skewX(-15deg);
  width: fit-content;
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 0.6rem;
}
#roadmap .user-vip:before {
  content: "";
  display: block;
  position: absolute;
  min-width: 26px;
  height: 26px;
  left: -10px;
  top: 50%;
  transform: translateY(-50%) skewX(15deg);
}
#roadmap .user-account {
  font-size: 1.2rem;
  font-weight: bold;
}
#roadmap .user-amount {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold;
  gap: 0.4rem;
  padding: 0 0 0 22px;
}
#roadmap .acc-function-bar {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  width: 100%;
  gap: 1rem;
  padding: 0.4rem 1rem;
  border-radius: 8px;
}
#roadmap .acc-function-bar .bar-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.4rem;
}
#roadmap .acc-function-bar .bar-item .bar-title {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  font-size: 0.8rem;
}
#roadmap .acc-function-bar .bar-item .bar-title .bar-text {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
}
#roadmap .acc-function-bar .bar-item .bar-title .bar-text:after {
  content: ":";
  display: block;
}
#roadmap .acc-function-bar .bar-item .bar-percent {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  height: 14px;
  border-radius: 16px;
  border: 1px solid transparent;
  padding: 0 0.2rem;
}
#roadmap .acc-function-bar .bar-item .bar-percent .bar-bg {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 8px;
  border-radius: 16px;
}
#roadmap .acc-function-bar .bar-item .bar-percent .bar-bg .bar-number {
  position: relative;
  font-size: 0.675rem;
  font-weight: bold;
  right: -3.2rem;
}
#roadmap .acc-function-bar .bar-item .bar-percent .bar-bg.inside .bar-number {
  right: 0.6rem;
}
#roadmap .function-link .function-link-item {
  border-radius: 14px;
  transition: all 0.3s ease-in-out;
}
#roadmap .function-link .function-link-item .link-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background-repeat: no-repeat;
  background-position: center;
}
#roadmap .function-link .function-link-item .link-text {
  font-weight: bold;
}
#roadmap .roadmap-link-item {
  border-radius: 12px;
  gap: 0.75rem;
  padding: 0.45rem 0.5rem !important;
}
#roadmap .roadmap-link-item .link-title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-weight: bold;
  padding: 0 0 0 0.2rem;
}
#roadmap .roadmap-link-item .link-content {
  gap: 0.4rem;
}
#roadmap .roadmap-link-item .link-content .link-list {
  width: 50%;
  gap: 0.5rem;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item {
  position: relative;
  min-height: 40px;
  border-radius: 8px;
  padding-left: 2.6rem !important;
  padding-right: 0.6rem !important;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.no-data .verify-text.no-data {
  display: flex;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.review .verify-text.review {
  display: flex;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.success .verify-text.success {
  display: flex;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item.reject .verify-text.reject {
  display: flex;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item .link-item-text {
  font-size: 0.875rem;
}
#roadmap .roadmap-link-item .link-content .link-list .link-item .link-item-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  min-width: 24px;
  height: 24px;
  border-radius: 8px;
}

#my-info-member .area-content .vip-card {
  position: relative;
  background-repeat: no-repeat;
  background-position: left top;
  width: 320px;
  min-width: 320px;
  height: 130px;
  border: 1px solid transparent;
  overflow: initial;
}
#my-info-member .area-content .vip-card .level-text {
  width: 190px;
  padding: 1rem 0 0 1.6rem;
  font-size: 1.6rem;
  font-weight: bold;
  -webkit-text-stroke-width: 6px;
  paint-order: stroke fill;
}
#my-info-member .area-content .vip-card.now {
  min-width: 320px;
  max-height: 130px;
}
#my-info-member .area-content .vip-card:after {
  position: absolute;
  right: 20px;
  top: -40px;
  content: "";
  width: 140px;
  min-height: 140px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#my-info-member .area-content .vip-card:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/common/vip-card-bg.webp");
  pointer-events: none;
  opacity: 0.14;
}
#my-info-member .area-content .vip-card .tag {
  font-size: 0.875rem;
  font-weight: normal;
}
#my-info-member .area-content .info-content .info-bar-area .info-bar-item .info-bar-percent {
  padding: 0 0.2rem;
  border: 1px solid transparent;
}
#my-info-member .area-content .info-content .info-bar-area .info-bar-item .info-bar-percent .info-bar-bg {
  height: 8px;
}
#my-info-member .area-content .info-content .info-bar-area .info-bar-item .info-bar-percent .info-bar-bg .info-bar-number {
  font-size: 0.675rem;
  font-weight: bold;
}
#my-info-member .area-vip-now .content .info-content {
  gap: 0.3em;
}
#my-info-member .area-vip-now .content .info-content .list-total {
  height: 41px;
}
@media (max-width: 1280px) {
  #my-info-member .area-vip-now .content .vip-card {
    align-self: center;
  }
}
#my-info-member .area-vip-info .area-list .list {
  padding-top: 1.4rem;
}

#my-info-basic .item-field .field-title .btn-edit {
  border-radius: 8px;
}/*# sourceMappingURL=style.css.map */