@charset "UTF-8";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scrollbar-width: none;
}

body {
  font-family: "Bebas_Neue_Pro", sans-serif;
  -ms-overflow-style: none;
}

.hover-darken, #getOrbModal .get-orb-modal__close, #registerModal .register-form__btn-submit, .base-modal-other__close, .base-modal-auth__close {
  transition: filter 0.02s ease-in-out;
}
.hover-darken:hover, #getOrbModal .get-orb-modal__close:hover, #registerModal .register-form__btn-submit:hover, .base-modal-other__close:hover, .base-modal-auth__close:hover {
  filter: brightness(0.8);
  cursor: pointer;
}

.hover-brightness-up, #registerSuccessModal .register-success-modal__social__btn, #addTurnsModal .add-turns-modal__list--item button, #rulesModal .rules-modal__btn-get-code, #registerModal .register-form__social__btn, #loginModal .login-form__btn-submit, #loginModal .login-form__social__btn, .btn_support, .minigame__wheel-spin-btn, .minigame__button, .milestone__actions, .header__download, .header__btn-login, .header__btn-logout, .banner__download {
  transition: filter 0.02s ease-in-out;
}
.hover-brightness-up:hover, #registerSuccessModal .register-success-modal__social__btn:hover, #addTurnsModal .add-turns-modal__list--item button:hover, #rulesModal .rules-modal__btn-get-code:hover, #registerModal .register-form__social__btn:hover, #loginModal .login-form__btn-submit:hover, #loginModal .login-form__social__btn:hover, .btn_support:hover, .minigame__wheel-spin-btn:hover, .minigame__button:hover, .milestone__actions:hover, .header__download:hover, .header__btn-login:hover, .header__btn-logout:hover, .banner__download:hover {
  filter: brightness(1.2);
  cursor: pointer;
}

button {
  border: none;
  outline: none;
  box-shadow: none;
  background: inherit;
  cursor: pointer;
}

button:hover,
button:focus {
  outline: none;
  box-shadow: none;
}

@keyframes glow-pulse {
  0% {
    filter: brightness(1) drop-shadow(0 0 0px rgba(255, 204, 0, 0));
  }
  50% {
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 204, 0, 0.8));
  }
  100% {
    filter: brightness(1) drop-shadow(0 0 0px rgba(255, 204, 0, 0));
  }
}
.btn-highlight-pulse, .banner__btn--register-now {
  animation: glow-pulse 2s infinite ease-in-out;
  transition: all 0.3s ease;
}
.btn-highlight-pulse:hover, .banner__btn--register-now:hover {
  filter: brightness(1.4) drop-shadow(0 0 15px rgb(255, 204, 0)) !important;
  cursor: pointer;
}

/* ==========================================================================
   Bebas Neue Pro - Normal width
   ========================================================================== */
/* Thin (100) */
@font-face {
  font-family: "Bebas_Neue_Pro";
  src: url("assets/landing/fonts/FONTSbebas/Bebas_Neue_Pro_Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}
/* Light (300) */
@font-face {
  font-family: "Bebas_Neue_Pro";
  src: url("assets/landing/fonts/FONTSbebas/Bebas_Neue_Pro_Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
/* Book (400) */
@font-face {
  font-family: "Bebas_Neue_Pro";
  src: url("assets/landing/fonts/FONTSbebas/Bebas_Neue_Pro_Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
/* Regular (500) */
@font-face {
  font-family: "Bebas_Neue_Pro";
  src: url("assets/landing/fonts/FONTSbebas/Bebas_Neue_Pro_Regular.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
/* Bold (700) */
@font-face {
  font-family: "Bebas_Neue_Pro";
  src: url("assets/landing/fonts/FONTSbebas/Bebas_Neue_Pro_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "DFSONGV2";
  src: url("assets/landing/fonts/DFSONGV2/DFSONGV2.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("assets/landing/fonts/INTER/Inter_Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("assets/landing/fonts/INTER/Inter_Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "TP_CROZZOE";
  src: url("assets/landing/fonts/TP_CROZZOE/TP_CROZZOE.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "BE_VIETNAM_PRO";
  src: url("assets/landing/fonts/BE_VIETNAM_PRO/BeVietnamPro-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "BE_VIETNAM_PRO";
  src: url("assets/landing/fonts/BE_VIETNAM_PRO/BeVietnamPro-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "LAC_LONG_QUAN";
  src: url("assets/landing/fonts/LAC_LONG_QUAN/uvn-lac-long-quan-bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "COPPERPLATE";
  src: url("assets/landing/fonts/COPPERPLATE/UTM_COPPERPLATEB.TTF") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "COPPERPLATE";
  src: url("assets/landing/fonts/COPPERPLATE/UTM_COPPERPLATE.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* ==========================================================================
   Montserrat
   ========================================================================== */
/* Thin (100) */
@font-face {
  font-family: "Montserrat";
  src: url("assets/landing/fonts/MONTSERRAT/Montserrat-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}
/* ExtraLight (200) */
@font-face {
  font-family: "Montserrat";
  src: url("assets/landing/fonts/MONTSERRAT/Montserrat-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
}
/* Light (300) */
@font-face {
  font-family: "Montserrat";
  src: url("assets/landing/fonts/MONTSERRAT/Montserrat-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
/* Regular (400) */
@font-face {
  font-family: "Montserrat";
  src: url("assets/landing/fonts/MONTSERRAT/Montserrat-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
/* Medium (500) */
@font-face {
  font-family: "Montserrat";
  src: url("assets/landing/fonts/MONTSERRAT/Montserrat-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}
/* SemiBold (600) */
@font-face {
  font-family: "Montserrat";
  src: url("assets/landing/fonts/MONTSERRAT/Montserrat-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
/* Bold (700) */
@font-face {
  font-family: "Montserrat";
  src: url("assets/landing/fonts/MONTSERRAT/Montserrat-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
/* ExtraBold (800) */
@font-face {
  font-family: "Montserrat";
  src: url("assets/landing/fonts/MONTSERRAT/Montserrat-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}
/* Black (900) */
@font-face {
  font-family: "Montserrat";
  src: url("assets/landing/fonts/MONTSERRAT/Montserrat-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}
:root {
  --desktop-vw: 1vw;
  --mobile-vw: calc(100vw / 393);
  --mobile-scale: calc(393 / 1920);
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

.main-layout {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.base-modal-auth {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
  font-family: "BE_VIETNAM_PRO";
}
.base-modal-auth__container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: 95vh;
  max-width: 95vw;
  animation: popupFadeIn 0.3s ease-out;
  border: calc(0 / 1920 * 100vw) solid transparent;
  border-image: url("assets/landing/images/bg_modal_base_auth.webp") 0 fill stretch;
}
.base-modal-auth__container[style*="--raw-width"] {
  width: calc(var(--raw-width) * 100vw / 1920);
}
.base-modal-auth__container[style*="--raw-height"] {
  height: calc(var(--raw-height) * 100vw / 1920);
}
@media screen and (max-width: 768px) {
  .base-modal-auth__container {
    border: calc(0 / 393 * 100vw) solid transparent;
    border-image: url("assets/landing/images/bg_modal_base_auth_mb.webp") 0 fill stretch;
  }
  .base-modal-auth__container[style*="--raw-width-mobile"] {
    width: calc(var(--raw-width-mobile) * 100vw / 393);
  }
  .base-modal-auth__container[style*="--raw-height-mobile"] {
    height: calc(var(--raw-height-mobile) * 100vw / 393);
  }
}
.base-modal-auth__items {
  position: absolute;
  top: calc(40 / 1920 * 100vw);
  width: calc(329 / 1920 * 100vw);
  height: calc(750 / 1920 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .base-modal-auth__items {
    top: calc(10 / 393 * 100vw);
    width: calc(90 / 393 * 100vw);
    height: calc(370 / 393 * 100vw);
    gap: calc(10 / 393 * 100vw);
  }
}
.base-modal-auth__item {
  position: relative;
  width: calc(165 / 1920 * 100vw);
  height: calc(165 / 1920 * 100vw);
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .base-modal-auth__item {
    width: calc(58 / 393 * 100vw);
    height: calc(58 / 393 * 100vw);
  }
}
.base-modal-auth__item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 125%;
  height: 125%;
  pointer-events: none;
  background: url("assets/landing/images/giftqua.gif") 50% 50%/cover no-repeat;
  mix-blend-mode: screen;
}
@media screen and (max-width: 768px) {
  .base-modal-auth__item::after {
    width: 115%;
    height: 115%;
  }
}
.base-modal-auth__item--1 {
  background-image: url("assets/landing/images/banner_item_1.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.base-modal-auth__item--2 {
  background-image: url("assets/landing/images/banner_item_2.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.base-modal-auth__item--3 {
  background-image: url("assets/landing/images/banner_item_3.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.base-modal-auth__item--4 {
  background-image: url("assets/landing/images/banner_item_4.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.base-modal-auth__item--5 {
  background-image: url("assets/landing/images/banner_item_5.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.base-modal-auth__content {
  position: absolute;
  z-index: 10;
  inset: calc(-1 * calc(0 / 1920 * 100vw));
}
@media screen and (max-width: 768px) {
  .base-modal-auth__content {
    inset: calc(-1 * calc(0 / 393 * 100vw));
  }
}
.base-modal-auth__title {
  pointer-events: none;
  position: absolute;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(915 / 1920 * 100vw);
  height: calc(80 / 1920 * 100vw);
  left: calc(-1 * calc(0 / 1920 * 100vw) + calc(300 / 1920 * 100vw));
  top: calc(-1 * calc(0 / 1920 * 100vw) + calc(80 / 1920 * 100vw));
  font-family: "COPPERPLATE";
}
@media screen and (max-width: 768px) {
  .base-modal-auth__title {
    top: calc(-1 * calc(0 / 393 * 100vw) + calc(30 / 393 * 100vw));
    left: calc(-1 * calc(0 / 393 * 100vw) + calc(80 / 393 * 100vw));
    width: calc(273 / 393 * 100vw);
    height: calc(30 / 393 * 100vw);
  }
}
.base-modal-auth__title__text {
  white-space: nowrap;
  text-align: center;
  font-size: calc(48 / 1920 * 100vw);
  font-weight: bold;
  text-transform: uppercase;
  background: linear-gradient(180deg, #FFF3D8 0%, #E89E00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
@media screen and (max-width: 768px) {
  .base-modal-auth__title__text {
    font-size: calc(20 / 393 * 100vw);
  }
}
.base-modal-auth__close {
  position: absolute;
  z-index: 20;
  height: calc(57 / 1920 * 100vw);
  width: calc(57 / 1920 * 100vw);
  transition: transform 0.2s;
  top: calc(-1 * calc(0 / 1920 * 100vw) + calc(70 / 1920 * 100vw));
  right: calc(-1 * calc(0 / 1920 * 100vw) + calc(85 / 1920 * 100vw));
  background-image: url("assets/landing/images/btn_close_auth.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .base-modal-auth__close {
    height: calc(17 / 393 * 100vw);
    width: calc(17 / 393 * 100vw);
    top: calc(-1 * calc(0 / 393 * 100vw) + calc(30 / 393 * 100vw));
    right: calc(-1 * calc(0 / 393 * 100vw) + calc(23 / 393 * 100vw));
  }
}
.base-modal-auth__close:hover {
  transform: scale(1.1);
}
.base-modal-auth__close img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.base-modal-other {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
  font-family: "BE_VIETNAM_PRO";
}
.base-modal-other__container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: 95vh;
  max-width: 95vw;
  animation: popupFadeIn 0.3s ease-out;
  border: calc(0 / 1920 * 100vw) solid transparent;
  border-image: url("assets/landing/images/bg_modal_base_other.webp") 0 fill stretch;
}
.base-modal-other__container[style*="--raw-width"] {
  width: calc(var(--raw-width) * 100vw / 1920);
}
.base-modal-other__container[style*="--raw-height"] {
  height: calc(var(--raw-height) * 100vw / 1920);
}
@media screen and (max-width: 768px) {
  .base-modal-other__container {
    border: calc(0 / 393 * 100vw) solid transparent;
    border-image: url("assets/landing/images/bg_modal_base_other_mb.webp") 0 fill stretch;
  }
  .base-modal-other__container[style*="--raw-width-mobile"] {
    width: calc(var(--raw-width-mobile) * 100vw / 393);
  }
  .base-modal-other__container[style*="--raw-height-mobile"] {
    height: calc(var(--raw-height-mobile) * 100vw / 393);
  }
}
.base-modal-other__content {
  position: absolute;
  z-index: 10;
  inset: calc(-1 * calc(0 / 1920 * 100vw));
}
@media screen and (max-width: 768px) {
  .base-modal-other__content {
    inset: calc(-1 * calc(0 / 393 * 100vw));
  }
}
.base-modal-other__title {
  pointer-events: none;
  position: absolute;
  top: calc(70 / 1920 * 100vw);
  z-index: 20;
  height: calc(80 / 1920 * 100vw);
  width: 100%;
  left: 50%;
  translate: -50% 0;
  font-family: "COPPERPLATE";
  text-align: center;
}
@media screen and (max-width: 768px) {
  .base-modal-other__title {
    top: calc(40 / 393 * 100vw);
    height: calc(40 / 393 * 100vw);
  }
}
.base-modal-other__title__text {
  text-align: center;
  font-size: calc(48 / 1920 * 100vw);
  font-weight: bold;
  text-transform: uppercase;
  background: linear-gradient(180deg, #E80C0C 0%, #620000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
@media screen and (max-width: 768px) {
  .base-modal-other__title__text {
    font-size: calc(14 / 393 * 100vw);
  }
}
.base-modal-other__close {
  position: absolute;
  z-index: 20;
  height: calc(57 / 1920 * 100vw);
  width: calc(57 / 1920 * 100vw);
  transition: transform 0.2s;
  top: calc(-1 * calc(0 / 1920 * 100vw) + calc(30 / 1920 * 100vw));
  right: calc(-1 * calc(0 / 1920 * 100vw) + calc(40 / 1920 * 100vw));
  background-image: url("assets/landing/images/btn_close_auth.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .base-modal-other__close {
    height: calc(26 / 393 * 100vw);
    width: calc(26 / 393 * 100vw);
    top: calc(-1 * calc(0 / 393 * 100vw) + calc(20 / 393 * 100vw));
    right: calc(-1 * calc(0 / 393 * 100vw) + calc(15 / 393 * 100vw));
  }
}
.base-modal-other__close:hover {
  transform: scale(1.1);
}
.base-modal-other__close img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.sidebar-wrapper {
  position: fixed;
  left: calc(10 / 1920 * 100vw);
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
}
@media screen and (max-width: 768px) {
  .sidebar-wrapper {
    left: 50%;
    top: calc(8 / 393 * 100vw);
    transform: translateX(-50%);
    width: calc(384 / 393 * 100vw);
  }
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(15 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .sidebar-menu {
    display: none;
  }
}

.sidebar-menu-mobile {
  display: none;
}
@media screen and (max-width: 768px) {
  .sidebar-menu-mobile {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0;
    margin: 0;
    gap: calc(15 / 393 * 100vw);
  }
  .sidebar-menu-mobile .menu-item {
    font-size: calc(45 / 393 * 100vw);
    color: #fff;
    text-transform: uppercase;
    font-family: "TP_CROZZOE";
  }
  .sidebar-menu-mobile .menu-item::after {
    content: "";
    display: block;
    width: 1px;
    height: calc(25 / 393 * 100vw);
    background-color: #fff;
    position: absolute;
    right: -17%;
    top: 50%;
    transform: translateY(-50%);
  }
  .sidebar-menu-mobile .menu-item:last-child::after {
    display: none;
  }
}

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}
.menu-item:hover, .menu-item.active {
  filter: grayscale(0);
  scale: 1.05;
}
@media screen and (max-width: 768px) {
  .menu-item:hover, .menu-item.active {
    scale: 1;
  }
}
.menu-item.active {
  transform: translateX(10px);
}
@media screen and (max-width: 768px) {
  .menu-item.active {
    transform: none;
  }
}
.menu-item.menu-item-pc:nth-child(1) {
  background-image: url("assets/landing/images/sidebar_item_homepage.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: calc(273 / 1920 * 100vw);
  height: calc(82 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .menu-item.menu-item-pc:nth-child(1) {
    width: calc(95 / 393 * 100vw);
    height: calc(26 / 393 * 100vw);
  }
}
.menu-item.menu-item-pc:nth-child(2) {
  background-image: url("assets/landing/images/sidebar_item_checkin.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: calc(273 / 1920 * 100vw);
  height: calc(92 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .menu-item.menu-item-pc:nth-child(2) {
    width: calc(95 / 393 * 100vw);
    height: calc(29 / 393 * 100vw);
  }
}
.menu-item.menu-item-pc:nth-child(3) {
  background-image: url("assets/landing/images/sidebar_item_flipcard.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: calc(266 / 1920 * 100vw);
  height: calc(82 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .menu-item.menu-item-pc:nth-child(3) {
    width: calc(95 / 393 * 100vw);
    height: calc(28 / 393 * 100vw);
  }
}
.menu-item.menu-item-pc:nth-child(4) {
  background-image: url("assets/landing/images/sidebar_item_feature.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: calc(263 / 1920 * 100vw);
  height: calc(79 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .menu-item.menu-item-pc:nth-child(4) {
    width: calc(95 / 393 * 100vw);
    height: calc(26 / 393 * 100vw);
  }
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: calc(119 / 1920 * 100vw);
  display: flex;
  justify-content: center;
  z-index: 10;
  background-color: #222222;
  color: white;
  font-size: calc(15 / 1920 * 100vw);
  font-family: "MONTSERRAT";
  padding-top: calc(20 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .footer {
    height: calc(94 / 393 * 100vw);
    font-size: calc(8 / 393 * 100vw);
    padding-top: calc(14 / 393 * 100vw);
  }
}
.footer span:nth-child(1) {
  font-weight: bold;
}
.footer span:nth-child(3) {
  font-weight: normal;
}

.banner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.7777777778dvh);
  height: max(100dvh, 56.25vw);
  transform: translate(-50%, -50%);
}
.banner::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url("assets/landing/images/bg_banner.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .banner {
    width: max(100vw, 102.8795811518dvh);
    height: max(100dvh, 97.2010178117vw);
  }
  .banner::before {
    background-image: url("assets/landing/images/bg_banner_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
}
.banner__download {
  position: absolute;
  top: 69.074%;
  left: 70.833%;
  width: 23.542%;
  z-index: 1;
}
.banner__download img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .banner__download {
    top: 57.068%;
    left: 50%;
    width: 44.275%;
    transform: translateX(-50%);
  }
}
.banner__btn--register-now {
  position: absolute;
  top: 80.556%;
  left: 70.833%;
  background-image: url("assets/landing/images/banner_btn_register_now.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: 23.542%;
  height: 9.259%;
}
@media screen and (max-width: 768px) {
  .banner__btn--register-now {
    background-image: url("assets/landing/images/banner_btn_register_now_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    width: 39.949%;
    height: 9.162%;
    left: 50%;
    transform: translateX(-50%);
    top: 88.743%;
  }
}
.banner__items {
  position: absolute;
  left: 18.646%;
  top: 66.111%;
  width: 53.802%;
  height: 18.056%;
  display: flex;
  align-items: center;
  gap: 0.781%;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .banner__items {
    top: 71.99%;
    width: 100%;
    height: 17.801%;
    gap: 0;
    left: 0;
  }
}
.banner__item {
  position: relative;
  width: 15.973%;
  aspect-ratio: 1;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .banner__item {
    width: 14.758%;
  }
}
.banner__item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 117%;
  height: 117%;
  pointer-events: none;
  background: url("assets/landing/images/giftqua.gif") 50% 50%/cover no-repeat;
  mix-blend-mode: screen;
}
.banner__item--1 {
  background-image: url("assets/landing/images/banner_item_1.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.banner__item--2 {
  background-image: url("assets/landing/images/banner_item_2.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.banner__item--3 {
  background-image: url("assets/landing/images/banner_item_3.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.banner__item--4 {
  background-image: url("assets/landing/images/banner_item_4.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.banner__item--5 {
  background-image: url("assets/landing/images/banner_item_5.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(197 / 1920 * 100vw);
  z-index: 1000;
  background-image: url("assets/landing/images/bg_header.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .header {
    height: calc(87 / 393 * 100vw);
  }
}
.header__hamburger {
  display: none;
}
@media screen and (max-width: 768px) {
  .header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    width: calc(36 / 393 * 100vw);
    height: calc(19 / 393 * 100vw);
    top: calc(14 / 393 * 100vw);
    left: calc(348 / 393 * 100vw);
    z-index: 1002;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
  }
  .header__hamburger span {
    display: block;
    width: 100%;
    height: calc(5 / 393 * 100vw);
    background: linear-gradient(90deg, #FFB617 0%, #FFFFFF 100%);
    border-radius: calc(4 / 393 * 100vw);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.3s ease;
    transform-origin: center center;
  }
  .header__hamburger.active span:nth-child(1) {
    transform: translateY(calc(7 / 393 * 100vw)) rotate(45deg);
  }
  .header__hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .header__hamburger.active span:nth-child(3) {
    transform: translateY(calc(-7 / 393 * 100vw)) rotate(-45deg);
  }
}
.header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: calc(29 / 1920 * 100vw);
  gap: calc(34 / 1920 * 100vw);
  position: absolute;
  left: calc(330 / 1920 * 100vw);
  top: calc(31 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .header__menu {
    display: none;
  }
  .header__menu.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: fixed;
    top: calc(87 / 393 * 100vw);
    left: 0;
    transform: none;
    width: 100%;
    height: auto;
    background: rgba(18, 18, 18, 0.95);
    border-bottom: 2px solid #FFCC00;
    padding: calc(20 / 393 * 100vw) 0;
    gap: calc(20 / 393 * 100vw);
    z-index: 1001;
    overflow: visible;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  }
  .header__menu.active .header__link {
    font-size: calc(16 / 393 * 100vw);
    opacity: 0;
    transform: translateY(-20px);
    animation: slideDownIn 0.3s ease forwards;
    padding: calc(10 / 393 * 100vw) 0;
    width: 100%;
    text-align: center;
  }
  .header__menu.active .header__link:nth-child(1) {
    animation-delay: 0.08s;
  }
  .header__menu.active .header__link:nth-child(2) {
    animation-delay: 0.16s;
  }
  .header__menu.active .header__link:nth-child(3) {
    animation-delay: 0.24s;
  }
  .header__menu.active .header__link:nth-child(4) {
    animation-delay: 0.32s;
  }
}
.header__link {
  font-family: "Inter", sans-serif;
  font-weight: bold;
  font-size: calc(24 / 1920 * 100vw);
  color: #FFFFFF;
  text-decoration: none;
  transition: all 0.25s ease;
  position: relative;
}
.header__link::after {
  content: "";
  position: absolute;
  bottom: calc(-10 / 1920 * 100vw);
  left: 50%;
  width: 0;
  height: calc(2 / 1920 * 100vw);
  background: #FFCC00;
  transition: all 0.25s ease;
  transform: translateX(-50%);
}
.header__link:hover, .header__link--active {
  color: #FFCC00;
}
.header__link:hover::after, .header__link--active::after {
  width: 80%;
}
@media screen and (max-width: 768px) {
  .header__link {
    font-size: calc(13 / 393 * 100vw);
  }
  .header__link::after {
    display: none;
  }
}
.header__download {
  position: absolute;
  top: calc(7 / 1920 * 100vw);
  left: calc(1147 / 1920 * 100vw);
  display: block;
  width: calc(282 / 1920 * 100vw);
  z-index: 2;
}
.header__download img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .header__download {
    top: calc(9 / 393 * 100vw);
    left: calc(106 / 393 * 100vw);
    width: calc(113 / 393 * 100vw);
  }
}
.header__btn-login {
  position: absolute;
  top: calc(13 / 1920 * 100vw);
  left: calc(1451 / 1920 * 100vw);
  width: calc(254 / 1920 * 100vw);
  height: calc(66 / 1920 * 100vw);
  background-image: url("assets/landing/images/btn_header_login.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .header__btn-login {
    width: calc(113 / 393 * 100vw);
    height: calc(29 / 393 * 100vw);
    left: calc(227 / 393 * 100vw);
    top: calc(9 / 393 * 100vw);
    background-image: url("assets/landing/images/btn_header_login_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.header__btn-logout {
  position: absolute;
  top: calc(13 / 1920 * 100vw);
  left: calc(1451 / 1920 * 100vw);
  width: calc(254 / 1920 * 100vw);
  height: calc(66 / 1920 * 100vw);
  background-image: url("assets/landing/images/btn_header_logout.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .header__btn-logout {
    width: calc(113 / 393 * 100vw);
    height: calc(29 / 393 * 100vw);
    left: calc(227 / 393 * 100vw);
    top: calc(9 / 393 * 100vw);
  }
}
.header__logo {
  position: absolute;
  top: calc(0 / 1920 * 100vw);
  left: calc(34 / 1920 * 100vw);
  background-image: url("assets/landing/images/banner_logo.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: calc(286 / 1920 * 100vw);
  height: calc(286 / 1920 * 100vw);
  cursor: pointer;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .header__logo {
    background-image: url("assets/landing/images/banner_logo_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    width: calc(116 / 393 * 100vw);
    height: calc(116 / 393 * 100vw);
    left: calc(5 / 393 * 100vw);
    top: calc(1 / 393 * 100vw);
  }
}
.header {
  /* Lớp phủ mờ nền khi mở menu trên mobile */
}
.header__overlay {
  display: none;
}
@media screen and (max-width: 768px) {
  .header__overlay.active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(5px);
    z-index: 999;
    pointer-events: auto;
  }
}

@keyframes slideDownIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.milestone {
  position: relative;
  width: 100%;
  height: calc(1200 / 1920 * 100vw);
  margin-top: calc(10 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .milestone {
    height: calc(405 / 393 * 100vw);
    margin-top: calc(0 / 393 * 100vw);
  }
}
.milestone__title {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(1003 / 1920 * 100vw);
  height: calc(253 / 1920 * 100vw);
  background-image: url("assets/landing/images/bg_title_milestone.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .milestone__title {
    background-image: url("assets/landing/images/bg_title_milestone_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: calc(86 / 393 * 100vw);
    width: calc(340 / 393 * 100vw);
  }
}
.milestone__subtitle {
  position: absolute;
  top: calc(200 / 1920 * 100vw);
  left: 50%;
  translate: -50% 0;
  width: calc(939 / 1920 * 100vw);
  height: calc(64 / 1920 * 100vw);
  background-image: url("assets/landing/images/bg_subtitle_milestone.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .milestone__subtitle {
    background-image: url("assets/landing/images/bg_subtitle_milestone_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: calc(26 / 393 * 100vw);
    width: calc(385 / 393 * 100vw);
    top: calc(70 / 393 * 100vw);
  }
}
.milestone__milestones {
  position: absolute;
  top: calc(290 / 1920 * 100vw);
  left: 50%;
  translate: -50% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(1200 / 1920 * 100vw);
  height: calc(600 / 1920 * 100vw);
  gap: calc(20 / 1920 * 100vw);
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .milestone__milestones {
    gap: calc(5 / 393 * 100vw);
    top: calc(110 / 393 * 100vw);
    width: 100%;
    height: calc(210 / 393 * 100vw);
  }
}
.milestone__milestone {
  width: calc(180 / 1920 * 100vw);
  height: 100%;
}
@media screen and (max-width: 768px) {
  .milestone__milestone {
    width: calc(65 / 393 * 100vw);
  }
}
.milestone__milestone--5k {
  background-image: url("assets/landing/images/milestone_5k.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.milestone__milestone--10k {
  background-image: url("assets/landing/images/milestone_10k.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.milestone__milestone--15k {
  background-image: url("assets/landing/images/milestone_15k.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.milestone__milestone--20k {
  background-image: url("assets/landing/images/milestone_20k.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.milestone__milestone--30k {
  background-image: url("assets/landing/images/milestone_30k.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.milestone__progress {
  position: absolute;
  top: calc(840 / 1920 * 100vw);
  left: 50%;
  translate: -50% 0;
  width: calc(850 / 1920 * 100vw);
  height: calc(15 / 1920 * 100vw);
  background-color: #4D0000;
}
@media screen and (max-width: 768px) {
  .milestone__progress {
    width: calc(283 / 393 * 100vw);
    height: calc(5 / 393 * 100vw);
    top: calc(303 / 393 * 100vw);
  }
}
.milestone__progress-fill {
  height: 100%;
  background: linear-gradient(0deg, #FFB617 0%, #FFFFFF 100%);
  border-radius: calc(6 / 1920 * 100vw);
  position: relative;
}
@media screen and (max-width: 768px) {
  .milestone__progress-fill {
    border-radius: calc(3 / 393 * 100vw);
  }
}
.milestone__actions {
  position: absolute;
  top: calc(920 / 1920 * 100vw);
  left: 50%;
  translate: -50% 0;
  width: calc(242 / 1920 * 100vw);
  height: calc(64 / 1920 * 100vw);
  background-image: url("assets/landing/images/btn_milestone_action.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .milestone__actions {
    width: calc(89 / 393 * 100vw);
    height: calc(24 / 393 * 100vw);
    top: calc(327 / 393 * 100vw);
    background-image: url("assets/landing/images/btn_milestone_action_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.milestone__info {
  position: absolute;
  top: calc(917 / 1920 * 100vw);
  left: calc(1107 / 1920 * 100vw);
  width: calc(266 / 1920 * 100vw);
  height: calc(71 / 1920 * 100vw);
  background-image: url("assets/landing/images/bg_info.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .milestone__info {
    width: calc(73 / 393 * 100vw);
    height: calc(19 / 393 * 100vw);
    top: calc(330 / 393 * 100vw);
    left: calc(249 / 393 * 100vw);
    background-image: url("assets/landing/images/bg_info_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.milestone__text {
  position: absolute;
  top: calc(1000 / 1920 * 100vw);
  left: 50%;
  translate: -50% 0;
  width: auto;
  height: calc(50 / 1920 * 100vw);
  font-family: "COPPERPLATE";
  font-size: calc(26 / 1920 * 100vw);
  color: #000000;
  text-align: center;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  .milestone__text {
    width: calc(568 / 393 * 100vw);
    height: calc(10 / 393 * 100vw);
    top: calc(357 / 393 * 100vw);
    font-size: calc(8.5 / 393 * 100vw);
  }
}
.milestone__stats {
  position: absolute;
  top: calc(1060 / 1920 * 100vw);
  left: 50%;
  translate: -50% 0;
  width: calc(892 / 1920 * 100vw);
  height: calc(66 / 1920 * 100vw);
  font-family: "COPPERPLATE";
  font-weight: normal;
  font-size: calc(24 / 1920 * 100vw);
  color: #FFFFFF;
  text-align: center;
  text-transform: uppercase;
  background-image: url("assets/landing/images/bg_milestone_stats.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .milestone__stats {
    width: 100%;
    height: calc(30 / 393 * 100vw);
    top: calc(380 / 393 * 100vw);
    font-size: calc(12 / 393 * 100vw);
  }
}
.milestone__stats span:nth-child(1) {
  margin-left: calc(150 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .milestone__stats span:nth-child(1) {
    margin-left: calc(60 / 393 * 100vw);
  }
}
.milestone__stats span:nth-child(2) {
  margin-left: calc(70 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .milestone__stats span:nth-child(2) {
    margin-left: calc(28 / 393 * 100vw);
  }
}

.minigame {
  position: relative;
  width: 100%;
  height: calc(950 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .minigame {
    height: calc(490 / 393 * 100vw);
  }
}
.minigame__title {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(1003 / 1920 * 100vw);
  height: calc(253 / 1920 * 100vw);
  background-image: url("assets/landing/images/bg_title_minigame.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__title {
    background-image: url("assets/landing/images/bg_title_minigame_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: calc(86 / 393 * 100vw);
    width: calc(340 / 393 * 100vw);
  }
}
.minigame__main {
  position: absolute;
  top: calc(190 / 1920 * 100vw);
  left: calc(330 / 1920 * 100vw);
  width: calc(800 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .minigame__main {
    top: calc(68 / 393 * 100vw);
    left: 50%;
    translate: -50% 0;
    width: 100%;
    height: auto;
  }
}
.minigame__wheel-container {
  position: relative;
  width: calc(512 / 1920 * 100vw);
  height: calc(676 / 1920 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("assets/landing/images/wheel_frame.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__wheel-container {
    width: calc(305 / 393 * 100vw);
    height: calc(403 / 393 * 100vw);
    background-image: url("assets/landing/images/wheel_frame_mb.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame {
  /* Đĩa xoay ở trong */
}
.minigame__wheel-plate {
  position: absolute;
  top: calc(120 / 1920 * 100vw);
  left: calc(50 / 1920 * 100vw);
  width: calc(400 / 1920 * 100vw);
  height: calc(400 / 1920 * 100vw);
  border-radius: 50%;
  z-index: 5;
  overflow: hidden;
  transition: transform 3s cubic-bezier(0.1, 0.8, 0.1, 1);
}
@media screen and (max-width: 768px) {
  .minigame__wheel-plate {
    height: calc(215 / 393 * 100vw);
    width: calc(215 / 393 * 100vw);
    top: calc(83 / 393 * 100vw);
    left: calc(40 / 393 * 100vw);
  }
}
.minigame__wheel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
}
.minigame__wheel-item--1 {
  transform: rotate(-5deg);
}
.minigame__wheel-item--2 {
  transform: rotate(43.43deg);
}
.minigame__wheel-item--3 {
  transform: rotate(97.86deg);
}
.minigame__wheel-item--4 {
  transform: rotate(153.29deg);
}
.minigame__wheel-item--5 {
  transform: rotate(204.71deg);
}
.minigame__wheel-item--6 {
  transform: rotate(257.14deg);
}
.minigame__wheel-item--7 {
  transform: rotate(303.57deg);
}
@media screen and (max-width: 768px) {
  .minigame__wheel-item--1 {
    transform: rotate(10deg);
  }
  .minigame__wheel-item--2 {
    transform: rotate(58deg);
  }
  .minigame__wheel-item--3 {
    transform: rotate(112deg);
  }
  .minigame__wheel-item--4 {
    transform: rotate(168deg);
  }
  .minigame__wheel-item--5 {
    transform: rotate(219deg);
  }
  .minigame__wheel-item--6 {
    transform: rotate(272deg);
  }
  .minigame__wheel-item--7 {
    transform: rotate(318deg);
  }
}
.minigame__orb-wrapper {
  position: absolute;
  top: calc(50 / 1920 * 100vw);
  left: calc(200 / 1920 * 100vw);
  width: calc(55 / 1920 * 100vw);
  height: calc(55 / 1920 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .minigame__orb-wrapper {
    top: calc(13 / 393 * 100vw);
    left: 50%;
    translate: -50% 0;
    width: calc(35 / 393 * 100vw);
    height: calc(35 / 393 * 100vw);
  }
}
.minigame__orb {
  width: 120%;
  height: 120%;
  object-fit: cover;
}
.minigame__wheel-spin-btn {
  position: absolute;
  top: calc(260 / 1920 * 100vw);
  left: calc(193 / 1920 * 100vw);
  width: calc(120 / 1920 * 100vw);
  height: calc(120 / 1920 * 100vw);
  z-index: 5;
  background-image: url("assets/landing/images/btn_spin.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__wheel-spin-btn {
    top: calc(154 / 393 * 100vw);
    left: calc(113 / 393 * 100vw);
    width: calc(73 / 393 * 100vw);
    height: calc(73 / 393 * 100vw);
    background-image: url("assets/landing/images/btn_spin_mb.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__turns-status {
  font-family: "BE_VIETNAM_PRO", sans-serif;
  font-size: calc(20 / 1920 * 100vw);
  color: #FFFFFF;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 29%, rgb(64, 64, 64) 73%, rgba(102, 102, 102, 0) 100%);
  z-index: 3;
  font-weight: normal;
  position: absolute;
  top: calc(615 / 1920 * 100vw);
  left: 50%;
  translate: -50% 0;
  height: calc(44 / 1920 * 100vw);
  min-width: calc(310 / 1920 * 100vw);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .minigame__turns-status {
    top: calc(370 / 393 * 100vw);
    font-size: calc(12 / 393 * 100vw);
    height: calc(25 / 393 * 100vw);
    width: calc(310 / 393 * 100vw);
  }
}
.minigame__turns-count {
  color: #FFB617;
}
.minigame__buttons {
  position: absolute;
  top: calc(670 / 1920 * 100vw);
  left: 50%;
  translate: -50% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(15 / 1920 * 100vw);
  width: 100%;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .minigame__buttons {
    gap: calc(8 / 393 * 100vw);
    top: calc(405 / 393 * 100vw);
  }
}
.minigame__button {
  width: calc(178 / 1920 * 100vw);
  height: calc(46 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .minigame__button {
    width: calc(85 / 393 * 100vw);
    height: calc(21 / 393 * 100vw);
  }
}
.minigame__button-history {
  background-image: url("assets/landing/images/btn_history_minigame.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__button-history {
    background-image: url("assets/landing/images/btn_history_minigame_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__button-rule {
  background-image: url("assets/landing/images/btn_rule_minigame.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__button-rule {
    background-image: url("assets/landing/images/btn_rule_minigame_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__button-add-turn {
  background-image: url("assets/landing/images/btn_add_turn_minigame.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__button-add-turn {
    background-image: url("assets/landing/images/btn_add_turn_minigame_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__button-giftcode {
  background-image: url("assets/landing/images/btn_giftcode_minigame.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__button-giftcode {
    background-image: url("assets/landing/images/btn_giftcode_minigame_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}

.section-slider {
  position: relative;
  width: 100%;
  height: calc(900 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .section-slider {
    margin-top: calc(5 / 393 * 100vw);
    gap: calc(20 / 393 * 100vw);
    height: calc(300 / 393 * 100vw);
  }
}
.section-slider__title {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(1003 / 1920 * 100vw);
  height: calc(253 / 1920 * 100vw);
  background-image: url("assets/landing/images/title_slider.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .section-slider__title {
    width: calc(340 / 393 * 100vw);
    height: calc(86 / 393 * 100vw);
    background-image: url("assets/landing/images/title_slider_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}

.slider-container {
  position: absolute;
  top: calc(200 / 1920 * 100vw);
  left: 50%;
  translate: -50% 0;
  width: calc(1467 / 1920 * 100vw);
  height: calc(611 / 1920 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: calc(20 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .slider-container {
    width: calc(387 / 393 * 100vw);
    height: calc(161 / 393 * 100vw);
    gap: calc(0 / 393 * 100vw);
    top: calc(65 / 393 * 100vw);
  }
}

.slider-wrapper {
  width: 100%;
  height: calc(593 / 1920 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .slider-wrapper {
    height: calc(156 / 393 * 100vw);
  }
}

.slider-item {
  position: absolute;
  width: calc(886 / 1920 * 100vw);
  height: calc(593 / 1920 * 100vw);
  transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), opacity 1s cubic-bezier(0.23, 1, 0.32, 1), filter 1s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform, opacity;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .slider-item {
    width: calc(233 / 393 * 100vw);
    height: calc(156 / 393 * 100vw);
  }
}
.slider-item.active {
  opacity: 1;
  z-index: 10;
  filter: brightness(1.1);
}
.slider-item.prev {
  opacity: 0.8;
  z-index: 5;
  transform: translateX(-40%) scale(0.85);
  filter: brightness(0.1);
}
@media screen and (max-width: 768px) {
  .slider-item.prev {
    transform: translateX(-40%) scale(0.8);
  }
}
.slider-item.next {
  opacity: 0.8;
  z-index: 5;
  transform: translateX(40%) scale(0.85);
  filter: brightness(0.1);
}
@media screen and (max-width: 768px) {
  .slider-item.next {
    transform: translateX(40%) scale(0.8);
  }
}
.slider-item.hidden {
  transform: scale(0.5);
  opacity: 0;
}
.slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(92 / 1920 * 100vw);
  height: calc(127 / 1920 * 100vw);
  z-index: 20;
}
@media screen and (max-width: 768px) {
  .slider-nav {
    width: calc(25 / 393 * 100vw);
    height: calc(34 / 393 * 100vw);
  }
}
.slider-nav--prev {
  left: calc(150 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .slider-nav--prev {
    left: calc(40 / 393 * 100vw);
  }
}
.slider-nav--next {
  right: calc(150 / 1920 * 100vw);
  transform: translateY(-50%) rotate(180deg);
}
@media screen and (max-width: 768px) {
  .slider-nav--next {
    right: calc(40 / 393 * 100vw);
  }
}
.slider-nav img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-pagination {
  display: flex;
  gap: calc(12 / 1920 * 100vw);
  z-index: 20;
}
@media screen and (max-width: 768px) {
  .slider-pagination {
    gap: calc(5 / 393 * 100vw);
  }
}
.slider-pagination .pagination-dot {
  width: calc(19 / 1920 * 100vw);
  height: calc(19 / 1920 * 100vw);
  border-radius: 50%;
  background: #A3A3A3;
  border: calc(2 / 1920 * 100vw) solid #ffffff;
  cursor: pointer;
  transition: all 0.3s;
}
@media screen and (max-width: 768px) {
  .slider-pagination .pagination-dot {
    width: calc(5 / 393 * 100vw);
    height: calc(5 / 393 * 100vw);
    border: calc(1 / 393 * 100vw) solid #ffffff;
  }
}
.slider-pagination .pagination-dot.active {
  background: #000000;
}

.btn_support {
  position: fixed;
  bottom: calc(10 / 1920 * 100vw);
  right: calc(10 / 1920 * 100vw);
  background-image: url("assets/landing/images/btn_support.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: calc(120 / 1920 * 100vw);
  height: calc(120 / 1920 * 100vw);
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .btn_support {
    display: none;
  }
}

#loginModal .login-form {
  width: 60%;
  height: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(190 / 1920 * 100vw);
  margin-left: calc(360 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #loginModal .login-form {
    margin-top: calc(80 / 393 * 100vw);
    margin-left: calc(90 / 393 * 100vw);
    width: 68%;
    height: 65%;
  }
}
#loginModal .login-form__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(20 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #loginModal .login-form__body {
    gap: calc(10 / 393 * 100vw);
  }
}
#loginModal .login-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#loginModal .login-form__label {
  color: #ffffff;
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 500;
  width: 30%;
  text-align: left;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  #loginModal .login-form__label {
    font-size: calc(10 / 393 * 100vw);
  }
}
#loginModal .login-form__input {
  width: 70%;
  height: calc(66 / 1920 * 100vw);
  background: #ffffff;
  border-radius: calc(13 / 1920 * 100vw);
  color: #333333;
  padding: 0 calc(15 / 1920 * 100vw);
  font-size: calc(24 / 1920 * 100vw);
  border: 1px solid #cccccc;
}
@media screen and (max-width: 768px) {
  #loginModal .login-form__input {
    font-size: calc(12 / 393 * 100vw);
    height: calc(30 / 393 * 100vw);
    width: 65%;
    border-radius: calc(8 / 393 * 100vw);
    padding: 0 calc(5 / 393 * 100vw);
  }
}
#loginModal .login-form__input::placeholder {
  color: #999999;
}
#loginModal .login-form__btn-submit {
  width: calc(452 / 1920 * 100vw);
  height: calc(100 / 1920 * 100vw);
  margin-top: calc(30 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #loginModal .login-form__btn-submit {
    width: calc(176 / 393 * 100vw);
    height: calc(39 / 393 * 100vw);
    margin-top: calc(20 / 393 * 100vw);
  }
}
#loginModal .login-form__btn-submit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#loginModal .login-form__social {
  margin-top: calc(30 / 1920 * 100vw);
  display: flex;
  gap: calc(20 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #loginModal .login-form__social {
    margin-top: calc(10 / 393 * 100vw);
  }
}
#loginModal .login-form__social__btn {
  width: calc(241 / 1920 * 100vw);
  height: calc(90 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #loginModal .login-form__social__btn {
    width: calc(103 / 393 * 100vw);
    height: calc(44 / 393 * 100vw);
  }
}
#loginModal .login-form__social__btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#loginModal .login-form__footer {
  margin-top: calc(20 / 1920 * 100vw);
  color: #ffffff;
  font-size: calc(18 / 1920 * 100vw);
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  #loginModal .login-form__footer {
    font-size: calc(10 / 393 * 100vw);
    margin-top: calc(10 / 393 * 100vw);
  }
}
#loginModal .login-form__footer a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}
#loginModal .login-form__footer a:hover {
  text-decoration: underline;
}

#registerModal .register-form {
  width: 60%;
  height: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(190 / 1920 * 100vw);
  margin-left: calc(360 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerModal .register-form {
    margin-top: calc(80 / 393 * 100vw);
    margin-left: calc(90 / 393 * 100vw);
    width: 68%;
    height: 65%;
  }
}
#registerModal .register-form__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(10 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerModal .register-form__body {
    gap: calc(10 / 393 * 100vw);
  }
}
#registerModal .register-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#registerModal .register-form__label {
  color: #ffffff;
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 500;
  width: 35%;
  text-align: left;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  #registerModal .register-form__label {
    font-size: calc(9 / 393 * 100vw);
    width: 37%;
  }
}
#registerModal .register-form__input {
  width: 60%;
  height: calc(66 / 1920 * 100vw);
  background: #ffffff;
  border-radius: calc(13 / 1920 * 100vw);
  color: #333333;
  padding: 0 calc(15 / 1920 * 100vw);
  font-size: calc(24 / 1920 * 100vw);
  border: 1px solid #cccccc;
}
@media screen and (max-width: 768px) {
  #registerModal .register-form__input {
    font-size: calc(12 / 393 * 100vw);
    height: calc(25 / 393 * 100vw);
    width: 60%;
    border-radius: calc(8 / 393 * 100vw);
    padding: 0 calc(5 / 393 * 100vw);
  }
}
#registerModal .register-form__input::placeholder {
  color: #999999;
}
#registerModal .register-form__footer {
  margin-top: calc(10 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerModal .register-form__footer {
    gap: calc(0 / 393 * 100vw);
    margin-top: calc(10 / 393 * 100vw);
  }
}
#registerModal .register-form__btn-submit {
  width: calc(387 / 1920 * 100vw);
  height: calc(86 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerModal .register-form__btn-submit {
    width: calc(176 / 393 * 100vw);
    height: calc(39 / 393 * 100vw);
  }
}
#registerModal .register-form__btn-submit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#registerModal .register-form__switch {
  color: #ffffff;
  font-size: calc(18 / 1920 * 100vw);
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  #registerModal .register-form__switch {
    font-size: calc(10 / 393 * 100vw);
    margin-top: calc(5 / 393 * 100vw);
  }
}
#registerModal .register-form__switch a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}
#registerModal .register-form__switch a:hover {
  text-decoration: underline;
}
#registerModal .register-form__social {
  margin-top: calc(10 / 1920 * 100vw);
  display: flex;
  gap: calc(20 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerModal .register-form__social {
    margin-top: calc(5 / 393 * 100vw);
  }
}
#registerModal .register-form__social__btn {
  width: calc(241 / 1920 * 100vw);
  height: calc(90 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerModal .register-form__social__btn {
    width: calc(103 / 393 * 100vw);
    height: calc(44 / 393 * 100vw);
  }
}
#registerModal .register-form__social__btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#rulesModal .rules-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
#rulesModal .rules-modal__body {
  width: 70%;
  margin: 0 auto;
  margin-top: calc(150 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  gap: calc(30 / 1920 * 100vw);
  color: #000000;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #rulesModal .rules-modal__body {
    margin-top: calc(60 / 393 * 100vw);
    gap: calc(10 / 393 * 100vw);
    width: 80%;
  }
}
#rulesModal .rules-modal__content {
  font-size: calc(32 / 1920 * 100vw);
  font-weight: bold;
  color: #1D1D1D;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #rulesModal .rules-modal__content {
    font-size: calc(11 / 393 * 100vw);
    line-height: calc(18 / 393 * 100vw);
  }
}
#rulesModal .rules-modal__items {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(10 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #rulesModal .rules-modal__items {
    gap: calc(5 / 393 * 100vw);
    flex-wrap: wrap;
  }
}
#rulesModal .rules-modal__item {
  width: calc(91 / 1920 * 100vw);
  height: calc(91 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #rulesModal .rules-modal__item {
    width: calc(35 / 393 * 100vw);
    height: calc(35 / 393 * 100vw);
  }
}
#rulesModal .rules-modal__item img {
  width: 100%;
  height: 100%;
}
#rulesModal .rules-modal__btn-get-code {
  width: calc(241 / 1920 * 100vw);
  height: calc(90 / 1920 * 100vw);
  background-image: url("assets/landing/images/btn_rules_getcode.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  #rulesModal .rules-modal__btn-get-code {
    background-image: url("assets/landing/images/btn_rules_getcode_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    width: calc(115 / 393 * 100vw);
    height: calc(32 / 393 * 100vw);
  }
}
#rulesModal .rules-modal__note {
  font-size: calc(24 / 1920 * 100vw);
  font-weight: bold;
  color: #940000;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #rulesModal .rules-modal__note {
    font-size: calc(11 / 393 * 100vw);
  }
}

/* Định dạng cho Modal danh sach Giftcode */
#giftcodeModal .giftcode-modal {
  width: 82%; /* Chiều rộng của bảng lịch sử trên desktop */
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 0 auto;
  margin-top: calc(160 / 1920 * 100vw); /* Khoảng cách từ đỉnh modal xuống bảng để tránh đè tiêu đề */
}
@media screen and (max-width: 768px) {
  #giftcodeModal .giftcode-modal {
    width: 86%; /* Chiều rộng trên mobile */
    margin-top: calc(70 / 393 * 100vw); /* Khoảng cách từ đỉnh modal xuống bảng trên mobile */
  }
}
#giftcodeModal .giftcode-modal {
  /* Tiêu đề bảng lịch sử */
}
#giftcodeModal .giftcode-modal__header {
  width: 100%;
  height: calc(52 / 1920 * 100vw);
  background: #590000; /* Màu nền đỏ đô/đỏ nâu đậm như trong ảnh thiết kế */
  display: flex;
  align-items: center;
  border: calc(1 / 1920 * 100vw) solid #e2d1b2; /* Đường viền màu vàng đất bao quanh header */
  border-bottom: none;
}
@media screen and (max-width: 768px) {
  #giftcodeModal .giftcode-modal__header {
    height: calc(24 / 393 * 100vw);
    border: calc(1 / 393 * 100vw) solid #e2d1b2;
    border-bottom: none;
  }
}
#giftcodeModal .giftcode-modal {
  /* Định dạng các cột trong bảng */
}
#giftcodeModal .giftcode-modal__col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* Căn giữa nội dung cột */
  color: #FFFFFF; /* Chữ màu trắng trên Header */
  font-size: calc(18 / 1920 * 100vw);
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #giftcodeModal .giftcode-modal__col {
    font-size: calc(9 / 393 * 100vw);
    font-weight: bold;
  }
}
#giftcodeModal .giftcode-modal__col {
  /* Tỷ lệ độ rộng của từng cột: STT (12%), Phần quà (38%), Mã Code (25%), Thời gian (25%) */
}
#giftcodeModal .giftcode-modal__col--stt {
  flex: 0 0 12%;
}
#giftcodeModal .giftcode-modal__col--gift {
  flex: 0 0 38%;
}
#giftcodeModal .giftcode-modal__col--code {
  flex: 0 0 25%;
}
#giftcodeModal .giftcode-modal__col--time {
  flex: 0 0 25%;
}
#giftcodeModal .giftcode-modal {
  /* Vạch dọc phân cách màu trắng cho các cột trên tiêu đề (Header) */
}
#giftcodeModal .giftcode-modal__header #giftcodeModal .giftcode-modal__col {
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}
#giftcodeModal .giftcode-modal__header #giftcodeModal .giftcode-modal__col:last-child {
  border-right: none; /* Cột cuối cùng không có vạch phân cách bên phải */
}
#giftcodeModal .giftcode-modal {
  /* Phần thân bảng chứa danh sách bản ghi có thể cuộn */
}
#giftcodeModal .giftcode-modal__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-height: calc(400 / 1920 * 100vw); /* Chiều cao tối đa trước khi xuất hiện thanh cuộn trên desktop */
  overflow-y: auto;
  background: #FFF1DA; /* Màu kem sáng mịn làm nền cho danh sách */
  border-left: calc(1 / 1920 * 100vw) solid #e2d1b2;
  border-right: calc(1 / 1920 * 100vw) solid #e2d1b2;
  border-bottom: calc(1 / 1920 * 100vw) solid #e2d1b2; /* Đường viền màu vàng đất bao quanh body */
}
@media screen and (max-width: 768px) {
  #giftcodeModal .giftcode-modal__body {
    max-height: calc(240 / 393 * 100vw); /* Chiều cao tối đa trên mobile */
    border-left: calc(1 / 393 * 100vw) solid #e2d1b2;
    border-right: calc(1 / 393 * 100vw) solid #e2d1b2;
    border-bottom: calc(1 / 393 * 100vw) solid #e2d1b2;
  }
}
#giftcodeModal .giftcode-modal__body {
  /* Tùy chỉnh thanh cuộn (Scrollbar) cho đẹp mắt */
}
#giftcodeModal .giftcode-modal__body::-webkit-scrollbar {
  width: calc(6 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #giftcodeModal .giftcode-modal__body::-webkit-scrollbar {
    width: calc(3 / 393 * 100vw);
  }
}
#giftcodeModal .giftcode-modal__body::-webkit-scrollbar-track {
  background: rgba(226, 209, 178, 0.2);
}
#giftcodeModal .giftcode-modal__body::-webkit-scrollbar-thumb {
  background: #c4a86b; /* Màu vàng kim cho nút cuộn */
  border-radius: 3px;
}
#giftcodeModal .giftcode-modal {
  /* Định dạng từng dòng (Row) trong danh sách */
}
#giftcodeModal .giftcode-modal__row {
  display: flex;
  width: 100%;
  height: calc(80 / 1920 * 100vw);
  background: #FFF1DA; /* Màu nền kem đồng nhất với body */
  border-bottom: 1px solid #ebd2af; /* Đường kẻ ngang phân cách giữa các hàng màu vàng đất nhạt */
  padding: calc(15 / 1920 * 100vw) 0;
}
#giftcodeModal .giftcode-modal__row:last-child {
  border-bottom: none; /* Dòng cuối cùng không có đường kẻ ngang dưới */
}
@media screen and (max-width: 768px) {
  #giftcodeModal .giftcode-modal__row {
    height: calc(28 / 393 * 100vw);
    border-bottom: 1px solid #ebd2af;
  }
}
#giftcodeModal .giftcode-modal__row {
  /* Định dạng chữ hiển thị của các cột trong hàng dữ liệu */
}
#giftcodeModal .giftcode-modal__row .giftcode-modal__col {
  color: #2D352E; /* Màu chữ xám đen dễ đọc */
  font-weight: 500;
  font-size: calc(20 / 1920 * 100vw);
  border-right: none; /* Không có vạch dọc ở phần thân bảng */
}
@media screen and (max-width: 768px) {
  #giftcodeModal .giftcode-modal__row .giftcode-modal__col {
    font-size: calc(8 / 393 * 100vw);
  }
}

#addTurnsModal .add-turns-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
#addTurnsModal .add-turns-modal__body {
  width: 65%;
  margin: 0 auto;
  margin-top: calc(160 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  gap: calc(30 / 1920 * 100vw);
  color: #1D1D1D;
  justify-content: flex-start;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  #addTurnsModal .add-turns-modal__body {
    width: 80%;
    margin-top: calc(70 / 393 * 100vw);
    gap: calc(10 / 393 * 100vw);
  }
}
#addTurnsModal .add-turns-modal__instruction {
  font-size: calc(26 / 1920 * 100vw);
  font-weight: 800;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  #addTurnsModal .add-turns-modal__instruction {
    font-size: calc(11 / 393 * 100vw);
  }
}
#addTurnsModal .add-turns-modal__list {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(0 / 1920 * 100vw);
  width: 100%;
}
@media screen and (max-width: 768px) {
  #addTurnsModal .add-turns-modal__list {
    gap: calc(10 / 393 * 100vw);
  }
}
#addTurnsModal .add-turns-modal__list--item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
#addTurnsModal .add-turns-modal__list--item .add-turns-modal__item-text {
  display: flex;
  align-items: center;
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 700;
  color: #1D1D1D;
}
@media screen and (max-width: 768px) {
  #addTurnsModal .add-turns-modal__list--item .add-turns-modal__item-text {
    font-size: calc(10 / 393 * 100vw);
  }
}
#addTurnsModal .add-turns-modal__list--item .add-turns-modal__item-text::before {
  content: "•";
  margin-right: calc(12 / 1920 * 100vw);
  font-size: calc(30 / 1920 * 100vw);
  line-height: 1;
}
@media screen and (max-width: 768px) {
  #addTurnsModal .add-turns-modal__list--item .add-turns-modal__item-text::before {
    margin-right: calc(6 / 393 * 100vw);
    font-size: calc(12 / 393 * 100vw);
  }
}
#addTurnsModal .add-turns-modal__list--item button {
  margin-left: calc(20 / 1920 * 100vw);
  width: calc(241 / 1920 * 100vw);
  height: calc(90 / 1920 * 100vw);
  background-image: url("assets/landing/images/btn_add_turns.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  #addTurnsModal .add-turns-modal__list--item button {
    width: calc(115 / 393 * 100vw);
    height: calc(35 / 393 * 100vw);
    margin-left: calc(10 / 393 * 100vw);
  }
}
#addTurnsModal .add-turns-modal__list--item button.is-completed {
  background-image: url("assets/landing/images/btn_add_turns_disable.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  cursor: not-allowed;
}

#registerSuccessModal .register-success-modal {
  width: 60%;
  height: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(190 / 1920 * 100vw);
  margin-left: calc(360 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal {
    margin-top: calc(80 / 393 * 100vw);
    margin-left: calc(90 / 393 * 100vw);
    width: 68%;
    height: 65%;
  }
}
#registerSuccessModal .register-success-modal__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(20 / 1920 * 100vw);
  text-align: center;
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal__body {
    gap: calc(10 / 393 * 100vw);
  }
}
#registerSuccessModal .register-success-modal__message {
  font-size: calc(32 / 1920 * 100vw);
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal__message {
    font-size: calc(10 / 393 * 100vw);
  }
}
#registerSuccessModal .register-success-modal__instruction {
  font-size: calc(32 / 1920 * 100vw);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: calc(20 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal__instruction {
    font-size: calc(10 / 393 * 100vw);
    margin-bottom: calc(0 / 393 * 100vw);
  }
}
#registerSuccessModal .register-success-modal__social {
  margin-top: calc(20 / 1920 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal__social {
    margin-top: calc(0 / 393 * 100vw);
  }
}
#registerSuccessModal .register-success-modal__social__btn {
  width: calc(241 / 1920 * 100vw);
  height: calc(90 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal__social__btn {
    width: calc(103 / 393 * 100vw);
    height: calc(44 / 393 * 100vw);
  }
}
#registerSuccessModal .register-success-modal__social__btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#registerSuccessModal .register-success-modal__gift-code-box {
  width: calc(718 / 1920 * 100vw);
  height: calc(116 / 1920 * 100vw);
  background: #ffffff;
  border-radius: calc(28 / 1920 * 100vw);
  color: #D00000;
  font-size: calc(55 / 1920 * 100vw);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal__gift-code-box {
    font-size: calc(16 / 393 * 100vw);
    height: calc(29 / 393 * 100vw);
    width: calc(219 / 393 * 100vw);
    border-radius: calc(4 / 393 * 100vw);
  }
}

.get-code-milestone-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.get-code-milestone-modal__body {
  width: 75%;
  margin: 0 auto;
  margin-top: calc(170 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(35 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .get-code-milestone-modal__body {
    width: 85%;
    margin-top: calc(75 / 393 * 100vw);
    gap: calc(15 / 393 * 100vw);
  }
}
.get-code-milestone-modal__message {
  text-align: center;
  font-size: calc(26 / 1920 * 100vw);
  color: #000000;
  font-weight: 800;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .get-code-milestone-modal__message {
    font-size: calc(12 / 393 * 100vw);
    line-height: 1.3;
  }
}
.get-code-milestone-modal__code-box {
  position: relative;
  width: calc(718 / 1920 * 100vw);
  height: calc(116 / 1920 * 100vw);
  background: #ffffff;
  border-radius: calc(28 / 1920 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .get-code-milestone-modal__code-box {
    width: calc(200 / 393 * 100vw);
    height: calc(37 / 393 * 100vw);
    border-radius: calc(28 / 393 * 100vw);
  }
}
.get-code-milestone-modal__code-text {
  font-size: calc(55 / 1920 * 100vw);
  color: #c00000;
  font-weight: bold;
  letter-spacing: calc(1 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .get-code-milestone-modal__code-text {
    font-size: calc(15 / 393 * 100vw);
    letter-spacing: calc(0.5 / 393 * 100vw);
  }
}

.get-code-minigame-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.get-code-minigame-modal__body {
  width: 75%;
  margin: 0 auto;
  margin-top: calc(170 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(35 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .get-code-minigame-modal__body {
    width: 85%;
    margin-top: calc(75 / 393 * 100vw);
    gap: calc(15 / 393 * 100vw);
  }
}
.get-code-minigame-modal__message {
  text-align: center;
  font-size: calc(26 / 1920 * 100vw);
  color: #000000;
  font-weight: 800;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .get-code-minigame-modal__message {
    font-size: calc(12 / 393 * 100vw);
    line-height: 1.3;
  }
}
.get-code-minigame-modal__code-box {
  position: relative;
  width: calc(718 / 1920 * 100vw);
  height: calc(116 / 1920 * 100vw);
  background: #ffffff;
  border-radius: calc(28 / 1920 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .get-code-minigame-modal__code-box {
    width: calc(200 / 393 * 100vw);
    height: calc(37 / 393 * 100vw);
    border-radius: calc(28 / 393 * 100vw);
  }
}
.get-code-minigame-modal__code-text {
  font-size: calc(64 / 1920 * 100vw);
  color: #c00000;
  font-weight: bold;
  letter-spacing: calc(1 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .get-code-minigame-modal__code-text {
    font-size: calc(15 / 393 * 100vw);
    letter-spacing: calc(0.5 / 393 * 100vw);
  }
}
.get-code-minigame-modal__note {
  text-align: center;
  font-size: calc(24 / 1920 * 100vw);
  color: #940000;
  font-weight: bold;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .get-code-minigame-modal__note {
    font-size: calc(10 / 393 * 100vw);
    line-height: 1.2;
  }
}

/* Định dạng cho Modal nhận ngọc Long Châu (Get Orb Modal) */
#getOrbModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
  font-family: "BE_VIETNAM_PRO";
}
#getOrbModal .get-orb-modal__container {
  position: relative;
  display: flex;
  flex-direction: column;
  background-image: url("assets/landing/images/bg_modal_get_orb.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: calc(672 / 1920 * 100vw);
  height: calc(716 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #getOrbModal .get-orb-modal__container {
    width: calc(300 / 393 * 100vw);
    height: calc(352 / 393 * 100vw);
  }
}
#getOrbModal .get-orb-modal__close {
  position: absolute;
  z-index: 20;
  height: calc(45 / 1920 * 100vw);
  width: calc(45 / 1920 * 100vw);
  transition: transform 0.2s;
  top: calc(40 / 1920 * 100vw);
  right: calc(25 / 1920 * 100vw);
  background-image: url("assets/landing/images/btn_close_auth.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  #getOrbModal .get-orb-modal__close {
    height: calc(22 / 393 * 100vw);
    width: calc(22 / 393 * 100vw);
    top: calc(20 / 393 * 100vw);
    right: calc(0 / 393 * 100vw);
  }
}
#getOrbModal .get-orb-modal__close:hover {
  transform: scale(1.1);
}
#getOrbModal .get-orb-modal__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(60 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #getOrbModal .get-orb-modal__content {
    padding-top: calc(30 / 393 * 100vw);
  }
}
#getOrbModal .get-orb-modal__message {
  text-align: center;
  font-size: calc(20 / 1920 * 100vw);
  color: #FFFFFF;
  font-weight: bold;
  line-height: 1.3;
  width: 60%;
}
@media screen and (max-width: 768px) {
  #getOrbModal .get-orb-modal__message {
    font-size: calc(10 / 393 * 100vw);
    line-height: 1.5;
  }
}
#getOrbModal .get-orb-modal__orb-display {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("assets/landing/images/bg_orb.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: calc(272 / 1920 * 100vw);
  height: calc(272 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #getOrbModal .get-orb-modal__orb-display {
    width: calc(120 / 393 * 100vw);
    height: calc(120 / 393 * 100vw);
  }
}
#getOrbModal .get-orb-modal__orb-img {
  width: 50%;
  height: 50%;
  object-fit: cover;
}