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

html {
  scrollbar-width: none;
}

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

.hover-darken, .add-turn-modal__btn, #registerSuccessModal .register-success-modal__social__btn, #registerModal .register-form__btn-submit, #loginModal .login-form__btn-submit, #loginModal .login-form__social__btn, .base-modal__close, .sidebar__item, .sidebar__support, .feature .feature-prev, .feature .feature-next, .minigame__item, .minigame__item--gift, .minigame__item--action__claim, .minigame__footer-btn, .milestone__btn, .banner__btn--login, .banner__btn--logout {
  transition: filter 0.02s ease-in-out;
}
.hover-darken:hover, .add-turn-modal__btn:hover, #registerSuccessModal .register-success-modal__social__btn:hover, #registerModal .register-form__btn-submit:hover, #loginModal .login-form__btn-submit:hover, #loginModal .login-form__social__btn:hover, .base-modal__close:hover, .sidebar__item:hover, .sidebar__support:hover, .feature .feature-prev:hover, .feature .feature-next:hover, .minigame__item:hover, .minigame__item--gift:hover, .minigame__item--action__claim:hover, .minigame__footer-btn:hover, .milestone__btn:hover, .banner__btn--login:hover, .banner__btn--logout:hover {
  filter: brightness(0.8);
  cursor: pointer;
}

.hover-brightness-up {
  transition: filter 0.02s ease-in-out;
}
.hover-brightness-up: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));
    scale: 0.95;
  }
  50% {
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 204, 0, 0.8));
    scale: 1.05;
  }
  100% {
    filter: brightness(1) drop-shadow(0 0 0px rgba(255, 204, 0, 0));
    scale: 0.95;
  }
}
.btn-highlight-pulse, .banner__btn--register-now {
  animation: glow-pulse 2s infinite ease-in-out;
  transition: all 0.3s ease;
  transform-origin: center;
  cursor: pointer;
}
.btn-highlight-pulse:hover, .banner__btn--register-now:hover {
  filter: brightness(1.4) drop-shadow(0 0 15px rgb(255, 204, 0)) !important;
  scale: 1.1 !important;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/landing/fonts/Inter_Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/landing/fonts/Inter_Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BE_VIETNAM_PRO";
  src: url("/assets/landing/fonts/BeVietnamPro-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "BE_VIETNAM_PRO";
  src: url("/assets/landing/fonts/BeVietnamPro-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UTM_KHUCCAMTA";
  src: url("/assets/landing/fonts/UTM_KHUCCAMTA.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UTM_LAXANH";
  src: url("/assets/landing/fonts/UTM_LAXANH.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  --desktop-vw: 1vw;
  --mobile-vw: calc(100vw / 393);
  --mobile-scale: calc(393 / 1920);
}

.main-layout {
  position: relative;
  z-index: 1;
  width: calc(1920 / 1920 * 100vw);
  height: calc(3830 / 1920 * 100vw);
  background-attachment: scroll;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
  overflow: hidden;
}
.main-layout::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-image: url("/assets/landing/images/background.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .main-layout {
    width: calc(393 / 393 * 100vw);
    height: calc(1953 / 393 * 100vw);
  }
  .main-layout::before {
    background-image: url("/assets/landing/images/background_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}

.banner {
  position: relative;
  width: 100%;
  height: calc(1117 / 1920 * 100vw);
}
.banner::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url("/assets/landing/images/bg_banner.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .banner {
    height: calc(356 / 393 * 100vw);
  }
  .banner::before {
    background-image: url("/assets/landing/images/bg_banner_mb.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.banner__logo {
  position: absolute;
  top: calc(21 / 1920 * 100vw);
  left: calc(26 / 1920 * 100vw);
  background-image: url("/assets/landing/images/logo.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: calc(226 / 1920 * 100vw);
  height: calc(122 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .banner__logo {
    background-image: url("/assets/landing/images/logo_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    width: calc(89 / 393 * 100vw);
    height: calc(49 / 393 * 100vw);
    left: calc(7 / 393 * 100vw);
    top: calc(5 / 393 * 100vw);
  }
}
.banner__btn--login {
  position: absolute;
  top: calc(21 / 1920 * 100vw);
  left: calc(1702 / 1920 * 100vw);
  background-image: url("/assets/landing/images/banner_btn_login.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: calc(204 / 1920 * 100vw);
  height: calc(55 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .banner__btn--login {
    background-image: url("/assets/landing/images/banner_btn_login_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    width: calc(101 / 393 * 100vw);
    height: calc(45 / 393 * 100vw);
    left: calc(286 / 393 * 100vw);
    top: calc(1 / 393 * 100vw);
  }
}
.banner__btn--logout {
  position: absolute;
  top: calc(21 / 1920 * 100vw);
  left: calc(1702 / 1920 * 100vw);
  background-image: url("/assets/landing/images/banner_btn_logout.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: calc(204 / 1920 * 100vw);
  height: calc(55 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .banner__btn--logout {
    background-image: url("/assets/landing/images/banner_btn_logout_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    width: calc(101 / 393 * 100vw);
    height: calc(45 / 393 * 100vw);
    left: calc(286 / 393 * 100vw);
    top: calc(1 / 393 * 100vw);
  }
}
.banner__btn--register-now {
  position: absolute;
  top: calc(919 / 1920 * 100vw);
  left: 50%;
  translate: -50% 0;
  background-image: url("/assets/landing/images/banner_btn_register_now.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: calc(502 / 1920 * 100vw);
  height: calc(45 / 1920 * 100vw);
}
@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: calc(269 / 393 * 100vw);
    height: calc(40 / 393 * 100vw);
    top: calc(257 / 393 * 100vw);
  }
}

.milestone {
  position: relative;
  width: 100%;
  height: calc(710 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(10 / 1920 * 100vw);
  gap: calc(10 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .milestone {
    height: calc(685 / 393 * 100vw);
    margin-top: calc(-8 / 393 * 100vw);
    gap: calc(5 / 393 * 100vw);
  }
}
.milestone__header {
  width: calc(978 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(25 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .milestone__header {
    width: 100%;
    gap: calc(15 / 393 * 100vw);
  }
}
.milestone__title {
  width: calc(951 / 1920 * 100vw);
  height: calc(94 / 1920 * 100vw);
  background-image: url("/assets/landing/images/bg_title_thien_menh_anh_hung.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .milestone__title {
    background-image: url("/assets/landing/images/bg_title_thien_menh_anh_hung_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: calc(36 / 393 * 100vw);
    width: calc(365 / 393 * 100vw);
  }
}
.milestone__title--text {
  font-size: calc(48 / 1920 * 100vw);
  color: #0C530E;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  .milestone__title--text {
    font-size: calc(18 / 393 * 100vw);
  }
}
.milestone__subtitle {
  width: calc(978 / 1920 * 100vw);
  height: calc(44 / 1920 * 100vw);
  background: linear-gradient(90deg, rgba(19, 96, 21, 0) 0%, #0C530E 25%, #0C530E 70.19%, rgba(39, 198, 44, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .milestone__subtitle {
    height: calc(18 / 393 * 100vw);
    width: 100%;
  }
}
.milestone__subtitle--text {
  font-size: calc(24 / 1920 * 100vw);
  color: #FFFFFF;
}
@media screen and (max-width: 768px) {
  .milestone__subtitle--text {
    font-size: calc(10 / 393 * 100vw);
  }
}
.milestone__content {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: calc(5 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .milestone__content {
    gap: calc(5 / 393 * 100vw);
    flex-direction: column;
    align-items: center;
  }
}
.milestone__side {
  width: calc(513 / 1920 * 100vw);
  height: calc(472 / 1920 * 100vw);
  align-items: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .milestone__side {
    width: calc(321 / 393 * 100vw);
    height: calc(295 / 393 * 100vw);
  }
}
.milestone__side--melee {
  background-image: url("/assets/landing/images/bg_can_chien.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .milestone__side--melee {
    background-image: url("/assets/landing/images/bg_can_chien_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.milestone__side--melee.is-active {
  background-image: url("/assets/landing/images/bg_can_chien_active.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .milestone__side--melee.is-active {
    background-image: url("/assets/landing/images/bg_can_chien_mb_active.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.milestone__side--ranged {
  background-image: url("/assets/landing/images/bg_tam_xa.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .milestone__side--ranged {
    background-image: url("/assets/landing/images/bg_tam_xa_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.milestone__side--ranged.is-active {
  background-image: url("/assets/landing/images/bg_tam_xa_active.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .milestone__side--ranged.is-active {
    background-image: url("/assets/landing/images/bg_tam_xa_mb_active.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.milestone__side.is-active {
  filter: drop-shadow(0 0 20px rgba(255, 204, 0, 0.6));
  z-index: 2;
}
.milestone__side.is-disabled .milestone__actions {
  pointer-events: none;
  cursor: default;
}
.milestone__side.is-disabled .milestone__actions .milestone__btn {
  filter: grayscale(0.5);
  opacity: 0.6;
}
.milestone__stats {
  position: absolute;
  top: calc(360 / 1920 * 100vw);
  left: 50%;
  translate: -50% 0;
  font-size: calc(16 / 1920 * 100vw);
  width: calc(338 / 1920 * 100vw);
  height: calc(28 / 1920 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(90deg, rgba(19, 96, 21, 0) 0%, #0C530E 25%, #0C530E 70.19%, rgba(39, 198, 44, 0) 100%);
}
@media screen and (max-width: 768px) {
  .milestone__stats {
    width: calc(211 / 393 * 100vw);
    height: calc(18 / 393 * 100vw);
    top: calc(220 / 393 * 100vw);
    font-size: calc(9 / 393 * 100vw);
  }
}
.milestone__progress {
  position: absolute;
  top: calc(410 / 1920 * 100vw);
  left: 50%;
  translate: -50% 0;
  width: calc(439 / 1920 * 100vw);
  height: calc(49 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .milestone__progress {
    width: calc(274 / 393 * 100vw);
    height: calc(31 / 393 * 100vw);
    top: calc(247 / 393 * 100vw);
  }
}
.milestone__progress-bar {
  position: relative;
  width: calc(408 / 1920 * 100vw);
  height: calc(6.36 / 1920 * 100vw);
  background: #484848;
  border-radius: calc(6 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .milestone__progress-bar {
    width: calc(255 / 393 * 100vw);
    height: calc(4 / 393 * 100vw);
    border-radius: calc(3 / 393 * 100vw);
  }
}
.milestone__progress-fill {
  height: 100%;
  background: #E90000;
  border-radius: calc(6 / 1920 * 100vw);
  position: relative;
}
.milestone__progress-fill::after {
  content: "";
  position: absolute;
  right: calc(-5 / 1920 * 100vw);
  top: 50%;
  translate: 0 -50%;
  width: calc(10 / 1920 * 100vw);
  height: calc(10 / 1920 * 100vw);
  background: #FFAE0B;
  border-radius: 50%;
  border: calc(1 / 1920 * 100vw) solid #FF4823;
}
@media screen and (max-width: 768px) {
  .milestone__progress-fill {
    border-radius: calc(3 / 393 * 100vw);
  }
  .milestone__progress-fill::after {
    width: calc(6 / 393 * 100vw);
    height: calc(6 / 393 * 100vw);
    border: calc(0.67 / 393 * 100vw) solid #FF4823;
  }
}
.milestone__progress-chest {
  position: absolute;
  right: calc(-45 / 1920 * 100vw);
  top: 50%;
  translate: 0 -50%;
  width: calc(55 / 1920 * 100vw);
  height: calc(55 / 1920 * 100vw);
  background-image: url("/assets/landing/images/bg_chest.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .milestone__progress-chest {
    background-image: url("/assets/landing/images/bg_chest_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    width: calc(31 / 393 * 100vw);
    height: calc(31 / 393 * 100vw);
    right: calc(-25 / 393 * 100vw);
  }
}
.milestone__actions {
  position: absolute;
  bottom: calc(-15 / 1920 * 100vw);
  left: 50%;
  translate: -50% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .milestone__actions {
    bottom: calc(3 / 393 * 100vw);
  }
}
.milestone__btn {
  width: calc(235 / 1920 * 100vw);
  height: calc(39 / 1920 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("/assets/landing/images/bg_button.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  font-family: "UTM_KHUCCAMTA";
}
@media screen and (max-width: 768px) {
  .milestone__btn {
    background-image: url("/assets/landing/images/bg_button_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    width: calc(147 / 393 * 100vw);
    height: calc(25 / 393 * 100vw);
  }
}
.milestone__btn span {
  font-size: calc(20 / 1920 * 100vw);
  color: #ffffff;
}
@media screen and (max-width: 768px) {
  .milestone__btn span {
    font-size: calc(12 / 393 * 100vw);
  }
}

.minigame {
  position: relative;
  width: 100%;
  height: calc(1050 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .minigame {
    height: calc(500 / 393 * 100vw);
  }
}
.minigame__header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.minigame__title {
  width: calc(951 / 1920 * 100vw);
  height: calc(94 / 1920 * 100vw);
  background-image: url("/assets/landing/images/bg_title_minigame.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .minigame__title {
    background-image: url("/assets/landing/images/bg_title_thien_menh_anh_hung_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: calc(36 / 393 * 100vw);
    width: calc(365 / 393 * 100vw);
  }
}
.minigame__title--text {
  font-size: calc(48 / 1920 * 100vw);
  color: #0c530e;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  .minigame__title--text {
    font-size: calc(18 / 393 * 100vw);
  }
}
.minigame__greeting {
  width: calc(680 / 1920 * 100vw);
  height: calc(35 / 1920 * 100vw);
  background: linear-gradient(90deg, rgba(19, 96, 21, 0) 0%, #0C530E 25%, #0C530E 70.19%, rgba(39, 198, 44, 0) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .minigame__greeting {
    height: calc(19 / 393 * 100vw);
    width: 100%;
  }
}
.minigame__greeting--text {
  color: #ffffff;
  font-size: calc(20 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .minigame__greeting--text {
    font-size: calc(10.5 / 393 * 100vw);
  }
}
.minigame__greeting--text .highlight {
  color: #FFF1A1;
}
.minigame__main {
  position: absolute;
  top: calc(140 / 1920 * 100vw);
  left: calc(429 / 1920 * 100vw);
  width: calc(680 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(30 / 1920 * 100vw);
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .minigame__main {
    top: calc(55 / 393 * 100vw);
    left: 50%;
    translate: -50% 0;
    width: calc(367 / 393 * 100vw);
    height: calc(421 / 393 * 100vw);
    gap: calc(20 / 393 * 100vw);
  }
}
.minigame__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(5 / 1920 * 100vw);
  width: calc(552 / 1920 * 100vw);
  height: calc(638 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .minigame__grid {
    gap: calc(2 / 393 * 100vw);
    width: calc(298 / 393 * 100vw);
    height: calc(344 / 393 * 100vw);
  }
}
.minigame__item {
  width: calc(108 / 1920 * 100vw);
  height: calc(124 / 1920 * 100vw);
  background-image: url("/assets/landing/images/bg_card.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  display: flex;
  align-items: center;
  justify-content: center;
}
.minigame__item.is-opened {
  filter: brightness(0.7);
  cursor: default;
  pointer-events: none;
}
.minigame__item.is-opened img {
  display: none;
}
.minigame__item img {
  width: calc(30 / 1920 * 100vw);
  height: calc(60 / 1920 * 100vw);
  object-fit: cover;
  position: relative;
  left: calc(2 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .minigame__item img {
    width: calc(16 / 393 * 100vw);
    height: calc(32 / 393 * 100vw);
    left: calc(1.4 / 393 * 100vw);
  }
}
.minigame__item span {
  color: #86A959;
  font-size: calc(50 / 1920 * 100vw);
  font-family: "UTM_KHUCCAMTA";
  font-weight: bold;
  text-align: center;
  line-height: 1;
  position: relative;
  bottom: calc(0 / 1920 * 100vw);
  left: calc(1.5 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .minigame__item span {
    font-size: calc(30 / 393 * 100vw);
    left: calc(0.75 / 393 * 100vw);
  }
}
@media screen and (max-width: 768px) {
  .minigame__item {
    width: calc(58 / 393 * 100vw);
    height: calc(67 / 393 * 100vw);
    background-image: url("/assets/landing/images/bg_card_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__item--gift {
  width: calc(99 / 1920 * 100vw);
  height: calc(122 / 1920 * 100vw);
  background-image: url("/assets/landing/images/bg_card_gift.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  margin-left: calc(10 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .minigame__item--gift {
    width: calc(53 / 393 * 100vw);
    height: calc(66 / 393 * 100vw);
    margin-left: calc(3 / 393 * 100vw);
    background-image: url("/assets/landing/images/bg_card_gift_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__item--gift-1 {
  background-image: url("/assets/landing/images/minigame_item_1.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__item--gift-1 {
    background-image: url("/assets/landing/images/minigame_item_mb_1.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__item--gift-2 {
  background-image: url("/assets/landing/images/minigame_item_2.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__item--gift-2 {
    background-image: url("/assets/landing/images/minigame_item_mb_2.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__item--gift-3 {
  background-image: url("/assets/landing/images/minigame_item_3.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__item--gift-3 {
    background-image: url("/assets/landing/images/minigame_item_mb_3.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__item--gift-4 {
  background-image: url("/assets/landing/images/minigame_item_4.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__item--gift-4 {
    background-image: url("/assets/landing/images/minigame_item_mb_4.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__item--gift-5 {
  background-image: url("/assets/landing/images/minigame_item_5.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__item--gift-5 {
    background-image: url("/assets/landing/images/minigame_item_mb_5.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__item--gift-6 {
  background-image: url("/assets/landing/images/minigame_item_6.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__item--gift-6 {
    background-image: url("/assets/landing/images/minigame_item_mb_6.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__item--gift-7 {
  background-image: url("/assets/landing/images/minigame_item_7.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__item--gift-7 {
    background-image: url("/assets/landing/images/minigame_item_mb_7.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__item--gift-8 {
  background-image: url("/assets/landing/images/minigame_item_8.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__item--gift-8 {
    background-image: url("/assets/landing/images/minigame_item_mb_8.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__item--action {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: calc(119 / 1920 * 100vw);
  height: calc(119 / 1920 * 100vw);
  padding-bottom: calc(7 / 1920 * 100vw);
  background-image: url("/assets/landing/images/bg_card_action.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__item--action {
    width: calc(64 / 393 * 100vw);
    height: calc(64 / 393 * 100vw);
    padding-bottom: calc(2 / 393 * 100vw);
    background-image: url("/assets/landing/images/bg_card_action_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__item--action__claim {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(116 / 1920 * 100vw);
  height: calc(31 / 1920 * 100vw);
  background-image: url("/assets/landing/images/bg_card_action_claim.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .minigame__item--action__claim {
    width: calc(63 / 393 * 100vw);
    height: calc(17 / 393 * 100vw);
    padding-bottom: calc(1 / 393 * 100vw);
    background-image: url("/assets/landing/images/bg_card_action_claim_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__item--action__claim span {
  font-size: calc(16 / 1920 * 100vw);
  color: #07720A;
}
@media screen and (max-width: 768px) {
  .minigame__item--action__claim span {
    font-size: calc(8 / 393 * 100vw);
  }
}
.minigame__character {
  background-image: url("/assets/landing/images/bg_character.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: calc(1015 / 1920 * 100vw);
  height: calc(1015 / 1920 * 100vw);
  position: absolute;
  left: calc(776 / 1920 * 100vw);
  top: calc(30 / 1920 * 100vw);
  pointer-events: none;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .minigame__character {
    display: none;
  }
}
.minigame__footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .minigame__footer {
    gap: calc(5 / 393 * 100vw);
  }
}
.minigame__footer-btn {
  width: calc(200 / 1920 * 100vw);
  height: calc(44 / 1920 * 100vw);
  background-image: url("/assets/landing/images/btn_minigame_footer_action.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .minigame__footer-btn {
    height: calc(24 / 393 * 100vw);
    width: calc(108 / 393 * 100vw);
    background-image: url("/assets/landing/images/btn_minigame_footer_action_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.minigame__footer-btn span {
  color: #ffffff;
  font-size: calc(20 / 1920 * 100vw);
  font-family: "UTM_KHUCCAMTA";
}
@media screen and (max-width: 768px) {
  .minigame__footer-btn span {
    font-size: calc(12 / 393 * 100vw);
  }
}

.feature {
  position: relative;
  width: 100%;
  height: auto;
}
.feature__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(951 / 1920 * 100vw);
  height: calc(94 / 1920 * 100vw);
  margin: 0 auto;
  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) {
  .feature__header {
    background-image: url("/assets/landing/images/bg_title_thien_menh_anh_hung_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: calc(36 / 393 * 100vw);
    width: calc(365 / 393 * 100vw);
  }
}
.feature__header h2 {
  font-size: calc(48 / 1920 * 100vw);
  text-transform: uppercase;
  color: #0c530e;
}
@media screen and (max-width: 768px) {
  .feature__header h2 {
    font-size: calc(18 / 393 * 100vw);
  }
}
.feature__character {
  position: absolute;
  left: calc(-44 / 1920 * 100vw);
  top: calc(100 / 1920 * 100vw);
  width: calc(1268 / 1920 * 100vw);
  height: calc(715 / 1920 * 100vw);
  background-image: url("/assets/landing/images/bg_feature_character.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  z-index: 5;
  pointer-events: none;
}
@media screen and (max-width: 768px) {
  .feature__character {
    display: none;
  }
}
.feature__slider-box {
  position: absolute;
  left: calc(675 / 1920 * 100vw);
  top: calc(140 / 1920 * 100vw);
  width: calc(890 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 20;
}
@media screen and (max-width: 768px) {
  .feature__slider-box {
    left: 50%;
    translate: -50% 0;
    top: calc(220 / 1920 * 100vw);
    width: calc(364 / 393 * 100vw);
    height: calc(251 / 393 * 100vw);
  }
}
.feature__slider-frame {
  width: 100%;
  height: calc(519 / 1920 * 100vw);
  background-image: url("/assets/landing/images/feature_frame.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
}
@media screen and (max-width: 768px) {
  .feature__slider-frame {
    background-image: url("/assets/landing/images/feature_frame_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    height: calc(212 / 393 * 100vw);
  }
}
.feature__slider-frame .feature-swiper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(791 / 1920 * 100vw);
  height: calc(460 / 1920 * 100vw);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .feature__slider-frame .feature-swiper {
    width: calc(323 / 393 * 100vw);
    height: calc(188 / 393 * 100vw);
  }
}
.feature__slider-frame .feature-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature__caption {
  width: calc(760 / 1920 * 100vw);
  height: calc(142 / 1920 * 100vw);
  background-image: url("/assets/landing/images/feature_caption_bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  display: flex;
  justify-content: center;
  pointer-events: none;
  margin-top: calc(-50 / 1920 * 100vw);
  padding-top: calc(60 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .feature__caption {
    background-image: url("/assets/landing/images/feature_caption_bg_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    width: calc(311 / 393 * 100vw);
    height: calc(58 / 393 * 100vw);
    margin-top: calc(-10 / 393 * 100vw);
    padding-top: calc(24.5 / 393 * 100vw);
  }
}
.feature__caption-text {
  color: #ffffff;
  font-size: calc(24 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .feature__caption-text {
    font-size: calc(10 / 393 * 100vw);
  }
}
.feature .feature-prev {
  width: calc(51 / 1920 * 100vw);
  height: calc(71 / 1920 * 100vw);
  background-image: url("/assets/landing/images/feature_btn_slider_prev.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  position: absolute;
  top: calc(218 / 1920 * 100vw);
  left: calc(20 / 1920 * 100vw);
  z-index: 25;
}
@media screen and (max-width: 768px) {
  .feature .feature-prev {
    width: calc(21 / 393 * 100vw);
    height: calc(29 / 393 * 100vw);
    top: calc(97 / 393 * 100vw);
    left: calc(10 / 393 * 100vw);
    background-image: url("/assets/landing/images/feature_btn_slider_prev_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.feature .feature-prev::after {
  display: none;
}
.feature .feature-next {
  width: calc(51 / 1920 * 100vw);
  height: calc(71 / 1920 * 100vw);
  background-image: url("/assets/landing/images/feature_btn_slider_next.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  position: absolute;
  top: calc(218 / 1920 * 100vw);
  right: calc(20 / 1920 * 100vw);
  z-index: 25;
}
@media screen and (max-width: 768px) {
  .feature .feature-next {
    width: calc(21 / 393 * 100vw);
    height: calc(29 / 393 * 100vw);
    top: calc(97 / 393 * 100vw);
    right: calc(10 / 393 * 100vw);
    background-image: url("/assets/landing/images/feature_btn_slider_next_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
}
.feature .feature-next::after {
  display: none;
}

.footer {
  font-family: "Inter", sans-serif;
  position: absolute;
  width: 100%;
  height: calc(119 / 1920 * 100vw);
  z-index: 100;
  bottom: 0;
  background-color: #222222;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .footer {
    height: calc(121 / 393 * 100vw);
  }
}
.footer__content {
  width: calc(1088 / 1920 * 100vw);
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .footer__content {
    width: calc(325 / 393 * 100vw);
  }
}
.footer__text {
  color: #FFFFFF;
  font-size: calc(15 / 1920 * 100vw);
  line-height: calc(24 / 1920 * 100vw);
  font-weight: normal;
}
@media screen and (max-width: 768px) {
  .footer__text {
    font-size: calc(11 / 393 * 100vw);
    line-height: calc(14 / 393 * 100vw);
  }
}
.footer__text strong {
  font-weight: bold;
}

.sidebar {
  position: fixed;
  right: calc(30 / 1920 * 100vw);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(182 / 1920 * 100vw);
  pointer-events: auto;
  font-family: "UTM_KHUCCAMTA", sans-serif;
}
@media screen and (max-width: 768px) {
  .sidebar {
    display: none;
  }
}
.sidebar__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.sidebar__menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(160 / 1920 * 100vw);
  gap: calc(3 / 1920 * 100vw);
  width: calc(159 / 1920 * 100vw);
  height: calc(417 / 1920 * 100vw);
  z-index: 1;
  background-image: url("/assets/landing/images/bg_sidebar.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
.sidebar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(130 / 1920 * 100vw);
  height: calc(35 / 1920 * 100vw);
  text-decoration: none;
  color: #07720A;
  background-image: url("/assets/landing/images/bg_sidebar_item.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  font-size: calc(17 / 1920 * 100vw);
  padding-bottom: calc(3 / 1920 * 100vw);
}
.sidebar__item--backtop {
  width: calc(100 / 1920 * 100vw);
  height: calc(100 / 1920 * 100vw);
  background: none;
}
.sidebar__footer {
  z-index: 1;
}
.sidebar__support {
  background-image: url("/assets/landing/images/bg_sidebar_footer.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  width: calc(182 / 1920 * 100vw);
  height: calc(180 / 1920 * 100vw);
  display: flex;
  justify-content: center;
  text-decoration: none;
  padding-top: calc(57 / 1920 * 100vw);
}
.sidebar__support-text {
  font-size: calc(16 / 1920 * 100vw);
  color: #ffffff;
  text-transform: uppercase;
  text-align: center;
  width: calc(68 / 1920 * 100vw);
  height: calc(72 / 1920 * 100vw);
  line-height: calc(25 / 1920 * 100vw);
}

.base-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  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__container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: 95vh;
  max-width: 95vw;
  border: calc(220 / 1920 * 100vw) solid transparent;
  border-image: url("/assets/landing/images/bg_modal_base.webp") 220 fill stretch;
}
.base-modal__container[style*="--raw-width"] {
  width: calc(var(--raw-width) * 100vw / 1920);
}
.base-modal__container[style*="--raw-height"] {
  height: calc(var(--raw-height) * 100vw / 1920);
}
@media screen and (max-width: 768px) {
  .base-modal__container {
    border: calc(0 / 393 * 100vw) solid transparent;
    border-image: url("/assets/landing/images/bg_modal_base_mb.webp") 0 fill stretch;
  }
  .base-modal__container[style*="--raw-width-mobile"] {
    width: calc(var(--raw-width-mobile) * 100vw / 393);
  }
  .base-modal__container[style*="--raw-height-mobile"] {
    height: calc(var(--raw-height-mobile) * 100vw / 393);
  }
}
.base-modal__content {
  position: absolute;
  z-index: 10;
  inset: calc(-1 * calc(220 / 1920 * 100vw));
}
@media screen and (max-width: 768px) {
  .base-modal__content {
    inset: calc(-1 * calc(0 / 393 * 100vw));
  }
}
.base-modal__title {
  pointer-events: none;
  position: absolute;
  left: 50%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(68 / 1920 * 100vw);
  width: calc(683 / 1920 * 100vw);
  transform: translate(-50%, -50%);
  top: calc(-1 * calc(220 / 1920 * 100vw) + calc(100 / 1920 * 100vw));
  font-family: "UTM_KHUCCAMTA";
  background-image: url("/assets/landing/images/bg_modal_title.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .base-modal__title {
    background-image: url("/assets/landing/images/bg_modal_title_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    top: calc(-1 * calc(0 / 393 * 100vw) + calc(35 / 393 * 100vw));
    width: calc(242 / 393 * 100vw);
    height: calc(24 / 393 * 100vw);
  }
}
.base-modal__title__text {
  text-align: center;
  font-size: calc(36 / 1920 * 100vw);
  font-weight: normal;
  text-transform: uppercase;
  color: #0C530E;
}
@media screen and (max-width: 768px) {
  .base-modal__title__text {
    font-size: calc(12 / 393 * 100vw);
  }
}
.base-modal__subtitle {
  pointer-events: none;
  position: absolute;
  left: calc(-1 * calc(220 / 1920 * 100vw) + calc(15 / 1920 * 100vw));
  z-index: 20;
  height: calc(245 / 1920 * 100vw);
  width: calc(40 / 1920 * 100vw);
  top: calc(-1 * calc(220 / 1920 * 100vw) + calc(178 / 1920 * 100vw));
  font-family: "Inter";
  font-size: calc(13 / 1920 * 100vw);
  font-weight: bold;
  color: #0C530E;
  text-transform: uppercase;
  text-align: center;
  line-height: calc(35 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .base-modal__subtitle {
    top: calc(-1 * calc(0 / 393 * 100vw) + calc(65 / 393 * 100vw));
    left: calc(-1 * calc(0 / 393 * 100vw) + calc(5.2 / 393 * 100vw));
    font-size: calc(5 / 393 * 100vw);
    line-height: calc(12 / 393 * 100vw);
    height: calc(78 / 393 * 100vw);
    width: calc(13 / 393 * 100vw);
  }
}
.base-modal__close {
  position: absolute;
  z-index: 20;
  height: calc(103 / 1920 * 100vw);
  width: calc(103 / 1920 * 100vw);
  transition: transform 0.2s;
  top: calc(-1 * calc(220 / 1920 * 100vw) - calc(50 / 1920 * 100vw));
  right: calc(-1 * calc(220 / 1920 * 100vw) - calc(50 / 1920 * 100vw));
  background-image: url("/assets/landing/images/btn_close.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}
@media screen and (max-width: 768px) {
  .base-modal__close {
    height: calc(36 / 393 * 100vw);
    width: calc(36 / 393 * 100vw);
    right: calc(-1 * calc(0 / 393 * 100vw) - calc(20 / 393 * 100vw));
    top: calc(-1 * calc(0 / 393 * 100vw) - calc(15.2 / 393 * 100vw));
  }
}
.base-modal__close img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.base-modal.is-active {
  display: flex;
}

#loginModal .login-form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(180 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #loginModal .login-form {
    margin-top: calc(55 / 393 * 100vw);
  }
}
#loginModal .login-form__body {
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: calc(20 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #loginModal .login-form__body {
    gap: calc(5 / 393 * 100vw);
    width: 70%;
  }
}
#loginModal .login-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#loginModal .login-form__label {
  color: #000000;
  font-size: calc(20 / 1920 * 100vw);
  font-weight: 500;
  width: 30%;
  text-align: left;
}
@media screen and (max-width: 768px) {
  #loginModal .login-form__label {
    font-size: calc(8 / 393 * 100vw);
  }
}
#loginModal .login-form__input {
  width: 70%;
  height: calc(44 / 1920 * 100vw);
  background: #013F03;
  border-radius: calc(8 / 1920 * 100vw);
  color: #FFFFFF;
  padding: 0 calc(15 / 1920 * 100vw);
  font-size: calc(20 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #loginModal .login-form__input {
    font-size: calc(8 / 393 * 100vw);
    height: calc(18 / 393 * 100vw);
    border-radius: calc(3 / 393 * 100vw);
    padding: 0 calc(5 / 393 * 100vw);
  }
}
#loginModal .login-form__input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
#loginModal .login-form__btn-submit {
  width: calc(204 / 1920 * 100vw);
  height: calc(55 / 1920 * 100vw);
  margin-top: calc(30 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #loginModal .login-form__btn-submit {
    width: calc(72 / 393 * 100vw);
    height: calc(20 / 393 * 100vw);
    margin-top: calc(10 / 393 * 100vw);
  }
}
#loginModal .login-form__btn-submit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#loginModal .login-form__social {
  margin-top: calc(20 / 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(219 / 1920 * 100vw);
  height: calc(48 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #loginModal .login-form__social__btn {
    width: calc(77 / 393 * 100vw);
    height: calc(16 / 393 * 100vw);
  }
}
#loginModal .login-form__social__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#loginModal .login-form__footer {
  margin-top: calc(60 / 1920 * 100vw);
  color: #000000;
  font-size: calc(20 / 1920 * 100vw);
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  #loginModal .login-form__footer {
    font-size: calc(8 / 393 * 100vw);
    margin-top: calc(20 / 393 * 100vw);
  }
}
#loginModal .login-form__footer a {
  color: #B10000;
  text-decoration: none;
  font-weight: bold;
}
#loginModal .login-form__footer a:hover {
  text-decoration: underline;
}

#registerModal .register-form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(150 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerModal .register-form {
    margin-top: calc(53 / 393 * 100vw);
  }
}
#registerModal .register-form__body {
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: calc(10 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerModal .register-form__body {
    gap: calc(3 / 393 * 100vw);
    width: 70%;
  }
}
#registerModal .register-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#registerModal .register-form__label {
  color: #000000;
  font-size: calc(20 / 1920 * 100vw);
  font-weight: 500;
  width: 40%;
  text-align: left;
}
@media screen and (max-width: 768px) {
  #registerModal .register-form__label {
    font-size: calc(8 / 393 * 100vw);
  }
}
#registerModal .register-form__input {
  width: 70%;
  height: calc(44 / 1920 * 100vw);
  background: #013F03;
  border-radius: calc(8 / 1920 * 100vw);
  color: #FFFFFF;
  padding: 0 calc(15 / 1920 * 100vw);
  font-size: calc(20 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerModal .register-form__input {
    font-size: calc(8 / 393 * 100vw);
    border-radius: calc(3 / 393 * 100vw);
    padding: 0 calc(5 / 393 * 100vw);
    height: calc(16 / 393 * 100vw);
  }
}
#registerModal .register-form__input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
#registerModal .register-form__footer {
  margin-top: calc(30 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerModal .register-form__footer {
    gap: calc(5 / 393 * 100vw);
    margin-top: calc(8 / 393 * 100vw);
  }
}
#registerModal .register-form__btn-submit {
  width: calc(204 / 1920 * 100vw);
  height: calc(55 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerModal .register-form__btn-submit {
    width: calc(72 / 393 * 100vw);
    height: calc(20 / 393 * 100vw);
  }
}
#registerModal .register-form__btn-submit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#registerModal .register-form__switch {
  color: #000000;
  font-size: calc(20 / 1920 * 100vw);
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  #registerModal .register-form__switch {
    font-size: calc(8 / 393 * 100vw);
  }
}
#registerModal .register-form__switch a {
  color: #B10000;
  text-decoration: none;
  font-weight: bold;
}
#registerModal .register-form__switch a:hover {
  text-decoration: underline;
}

#registerSuccessModal .register-success-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(160 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal {
    margin-top: calc(50 / 393 * 100vw);
  }
}
#registerSuccessModal .register-success-modal__body {
  width: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#registerSuccessModal .register-success-modal__message {
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 400;
  color: #000000;
  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(24 / 1920 * 100vw);
  font-weight: 400;
  color: #1D1D1D;
  line-height: 1.4;
  margin: 0;
  max-width: 90%;
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal__instruction {
    font-size: calc(10 / 393 * 100vw);
  }
}
#registerSuccessModal .register-success-modal__social {
  margin-top: calc(15 / 1920 * 100vw);
  display: flex;
  gap: calc(30 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal__social {
    margin-top: calc(10 / 393 * 100vw);
    gap: calc(10 / 393 * 100vw);
  }
}
#registerSuccessModal .register-success-modal__social__btn {
  width: calc(219 / 1920 * 100vw);
  height: calc(48 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal__social__btn {
    width: calc(77 / 393 * 100vw);
    height: calc(17 / 393 * 100vw);
  }
}
#registerSuccessModal .register-success-modal__social__btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#registerSuccessModal .register-success-modal__giftcode {
  margin-top: calc(15 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(15 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal__giftcode {
    margin-top: calc(5 / 393 * 100vw);
    gap: calc(5 / 393 * 100vw);
  }
}
#registerSuccessModal .register-success-modal__giftcode p {
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 400;
  color: #000000;
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal__giftcode p {
    font-size: calc(10 / 393 * 100vw);
  }
}
#registerSuccessModal .register-success-modal__giftcode__number {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #5C9A87;
  font-size: calc(36 / 1920 * 100vw);
  font-weight: 700;
  color: #FFFFFF;
  width: calc(581 / 1920 * 100vw);
  height: calc(87 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal__giftcode__number {
    width: calc(206 / 393 * 100vw);
    height: calc(31 / 393 * 100vw);
    font-size: calc(15 / 393 * 100vw);
  }
}
#registerSuccessModal .register-success-modal__items {
  margin-top: calc(20 / 1920 * 100vw);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(15 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal__items {
    margin-top: calc(5 / 393 * 100vw);
    gap: calc(5 / 393 * 100vw);
  }
}
#registerSuccessModal .register-success-modal__item {
  width: calc(125 / 1920 * 100vw);
  height: calc(122 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #registerSuccessModal .register-success-modal__item {
    width: calc(43 / 393 * 100vw);
    height: calc(42 / 393 * 100vw);
  }
}
#registerSuccessModal .register-success-modal__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#rulesModal .rules-modal {
  width: calc(683 / 1920 * 100vw);
  height: calc(348 / 1920 * 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;
  margin: calc(150 / 1920 * 100vw) auto 0 auto;
}
@media screen and (max-width: 768px) {
  #rulesModal .rules-modal {
    width: calc(240 / 393 * 100vw);
    height: auto;
    margin: calc(55 / 393 * 100vw) auto 0 auto;
    gap: calc(10 / 393 * 100vw);
  }
}
#rulesModal .rules-modal__content {
  width: 100%;
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 400;
  color: #000000;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #rulesModal .rules-modal__content {
    font-size: calc(8 / 393 * 100vw);
  }
}
#rulesModal .rules-modal__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(15 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #rulesModal .rules-modal__items {
    gap: calc(5 / 393 * 100vw);
  }
}
#rulesModal .rules-modal__item {
  width: calc(125 / 1920 * 100vw);
  height: calc(122 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #rulesModal .rules-modal__item {
    width: calc(43 / 393 * 100vw);
    height: calc(42 / 393 * 100vw);
  }
}
#rulesModal .rules-modal__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#historyModal .history-modal {
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: calc(150 / 1920 * 100vw) auto 0 auto;
}
@media screen and (max-width: 768px) {
  #historyModal .history-modal {
    width: 74%;
    margin-top: calc(55 / 393 * 100vw);
  }
}
#historyModal .history-modal__header {
  width: 100%;
  height: calc(60 / 1920 * 100vw);
  background: #0C530E;
  display: flex;
  align-items: center;
  border: calc(1 / 1920 * 100vw) solid #FFF7E6;
  border-bottom: none;
}
@media screen and (max-width: 768px) {
  #historyModal .history-modal__header {
    width: 100%;
    height: calc(25 / 393 * 100vw);
    border: calc(1 / 393 * 100vw) solid #FFF7E6;
    border-bottom: none;
  }
}
#historyModal .history-modal__col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: calc(20 / 1920 * 100vw);
  font-weight: bold;
  border-right: 1px solid rgba(255, 247, 230, 0.3);
  text-align: center;
  padding: 0 calc(10 / 1920 * 100vw);
}
#historyModal .history-modal__col:last-child {
  border-right: none;
}
@media screen and (max-width: 768px) {
  #historyModal .history-modal__col {
    font-size: calc(8 / 393 * 100vw);
    padding: 0 calc(4 / 393 * 100vw);
  }
}
#historyModal .history-modal__col--stt {
  flex: 0 0 10%;
}
#historyModal .history-modal__col--gift {
  flex: 0 0 35%;
}
#historyModal .history-modal__col--code {
  flex: 0 0 30%;
}
#historyModal .history-modal__col--time {
  flex: 0 0 25%;
}
#historyModal .history-modal__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-height: calc(360 / 1920 * 100vw);
  overflow-y: auto;
  color: #000000;
  border: calc(1 / 1920 * 100vw) solid #FFF7E6;
}
@media screen and (max-width: 768px) {
  #historyModal .history-modal__body {
    max-height: calc(130 / 393 * 100vw);
    border: calc(1 / 393 * 100vw) solid #FFF7E6;
  }
}
#historyModal .history-modal__body::-webkit-scrollbar {
  width: calc(6 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #historyModal .history-modal__body::-webkit-scrollbar {
    width: calc(2 / 393 * 100vw);
  }
}
#historyModal .history-modal__body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}
#historyModal .history-modal__body::-webkit-scrollbar-thumb {
  background: #0C530E;
  border-radius: calc(3 / 1920 * 100vw);
}
#historyModal .history-modal__row {
  display: flex;
  width: 100%;
  min-height: calc(50 / 1920 * 100vw);
  background: #B3D0B1;
  border-bottom: 1px solid rgba(255, 247, 230, 0.5);
}
#historyModal .history-modal__row:nth-child(even) {
  background: #C4DCC2;
}
#historyModal .history-modal__row:last-child {
  border-bottom: none;
}
@media screen and (max-width: 768px) {
  #historyModal .history-modal__row {
    min-height: calc(25 / 393 * 100vw);
  }
}
#historyModal .history-modal__row .history-modal__col {
  color: #0C530E;
  font-weight: 500;
  font-size: calc(18 / 1920 * 100vw);
  border-right: 1px solid rgba(255, 247, 230, 0.3);
}
@media screen and (max-width: 768px) {
  #historyModal .history-modal__row .history-modal__col {
    font-size: calc(8 / 393 * 100vw);
  }
}
#historyModal .history-modal__row .history-modal__col--code {
  font-family: monospace;
  color: #E90000;
  font-weight: bold;
}

.add-turn-modal {
  padding: calc(160 / 1920 * 100vw) calc(150 / 1920 * 100vw) 0;
}
@media screen and (max-width: 768px) {
  .add-turn-modal {
    padding: calc(60 / 393 * 100vw) calc(50 / 393 * 100vw) 0;
  }
}
.add-turn-modal__desc {
  font-size: calc(24 / 1920 * 100vw);
  color: #000;
  font-weight: 500;
  margin-bottom: calc(30 / 1920 * 100vw);
  font-family: "BE_VIETNAM_PRO";
}
@media screen and (max-width: 768px) {
  .add-turn-modal__desc {
    font-size: calc(8 / 393 * 100vw);
    margin-bottom: calc(10 / 393 * 100vw);
  }
}
.add-turn-modal__list {
  display: flex;
  flex-direction: column;
  gap: calc(20 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  .add-turn-modal__list {
    gap: calc(0 / 393 * 100vw);
  }
}
.add-turn-modal__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .add-turn-modal__item {
    gap: calc(10 / 393 * 100vw);
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    padding-bottom: calc(10 / 393 * 100vw);
  }
  .add-turn-modal__item:last-child {
    border-bottom: none;
  }
}
.add-turn-modal__info {
  display: flex;
  align-items: center;
  gap: calc(15 / 1920 * 100vw);
  font-size: calc(22 / 1920 * 100vw);
  color: #000;
  font-weight: 500;
  font-family: "BE_VIETNAM_PRO";
}
@media screen and (max-width: 768px) {
  .add-turn-modal__info {
    font-size: calc(8 / 393 * 100vw);
    gap: calc(8 / 393 * 100vw);
    text-align: center;
  }
}
.add-turn-modal__dot {
  width: calc(6 / 1920 * 100vw);
  height: calc(6 / 1920 * 100vw);
  background-color: #000;
  border-radius: 50%;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .add-turn-modal__dot {
    width: calc(2 / 393 * 100vw);
    height: calc(2 / 393 * 100vw);
  }
}
.add-turn-modal__btn {
  width: calc(219 / 1920 * 100vw);
  height: calc(48 / 1920 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(24 / 1920 * 100vw);
  color: #fff;
  font-weight: 400;
  background-image: url("/assets/landing/images/btn_minigame_footer_action.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  font-family: "UTM_KHUCCAMTA";
}
@media screen and (max-width: 768px) {
  .add-turn-modal__btn {
    background-image: url("/assets/landing/images/btn_claim_turn_mb.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    width: calc(79 / 393 * 100vw);
    height: calc(16 / 393 * 100vw);
    font-size: calc(8 / 393 * 100vw);
  }
}

#giftMeleeModal .gift-melee-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Inter";
}
#giftMeleeModal .gift-melee-modal__body {
  width: 55%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(20 / 1920 * 100vw);
  margin-top: calc(20 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #giftMeleeModal .gift-melee-modal__body {
    width: 65%;
    gap: calc(10 / 393 * 100vw);
    margin-top: calc(20 / 393 * 100vw);
  }
}
#giftMeleeModal .gift-melee-modal__message {
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 500;
  color: #000000;
}
@media screen and (max-width: 768px) {
  #giftMeleeModal .gift-melee-modal__message {
    font-size: calc(10 / 393 * 100vw);
  }
}
#giftMeleeModal .gift-melee-modal__giftcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
}
#giftMeleeModal .gift-melee-modal__giftcode__number {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #5C9A87;
  font-size: calc(64 / 1920 * 100vw);
  font-weight: 700;
  color: #FFFFFF;
  width: calc(581 / 1920 * 100vw);
  height: calc(87 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #giftMeleeModal .gift-melee-modal__giftcode__number {
    width: calc(205 / 393 * 100vw);
    height: calc(31 / 393 * 100vw);
    font-size: calc(15 / 393 * 100vw);
  }
}
#giftMeleeModal .gift-melee-modal__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(15 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #giftMeleeModal .gift-melee-modal__items {
    gap: calc(5 / 393 * 100vw);
  }
}
#giftMeleeModal .gift-melee-modal__item {
  width: calc(125 / 1920 * 100vw);
  height: calc(122 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #giftMeleeModal .gift-melee-modal__item {
    width: calc(43 / 393 * 100vw);
    height: calc(42 / 393 * 100vw);
  }
}
#giftMeleeModal .gift-melee-modal__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#giftRangedModal .gift-ranged-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Inter";
}
#giftRangedModal .gift-ranged-modal__body {
  width: 55%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(20 / 1920 * 100vw);
  margin-top: calc(20 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #giftRangedModal .gift-ranged-modal__body {
    width: 65%;
    gap: calc(10 / 393 * 100vw);
    margin-top: calc(20 / 393 * 100vw);
  }
}
#giftRangedModal .gift-ranged-modal__message {
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 500;
  color: #000000;
}
@media screen and (max-width: 768px) {
  #giftRangedModal .gift-ranged-modal__message {
    font-size: calc(10 / 393 * 100vw);
  }
}
#giftRangedModal .gift-ranged-modal__giftcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
}
#giftRangedModal .gift-ranged-modal__giftcode__number {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #5C9A87;
  font-size: calc(64 / 1920 * 100vw);
  font-weight: 700;
  color: #FFFFFF;
  width: calc(581 / 1920 * 100vw);
  height: calc(87 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #giftRangedModal .gift-ranged-modal__giftcode__number {
    width: calc(205 / 393 * 100vw);
    height: calc(31 / 393 * 100vw);
    font-size: calc(15 / 393 * 100vw);
  }
}
#giftRangedModal .gift-ranged-modal__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(15 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #giftRangedModal .gift-ranged-modal__items {
    gap: calc(5 / 393 * 100vw);
  }
}
#giftRangedModal .gift-ranged-modal__item {
  width: calc(125 / 1920 * 100vw);
  height: calc(122 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #giftRangedModal .gift-ranged-modal__item {
    width: calc(43 / 393 * 100vw);
    height: calc(42 / 393 * 100vw);
  }
}
#giftRangedModal .gift-ranged-modal__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#giftMinigameModal .gift-minigame-modal {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Inter";
}
#giftMinigameModal .gift-minigame-modal__body {
  width: 55%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(40 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #giftMinigameModal .gift-minigame-modal__body {
    width: 65%;
    gap: calc(10 / 393 * 100vw);
  }
}
#giftMinigameModal .gift-minigame-modal__message {
  font-size: calc(24 / 1920 * 100vw);
  font-weight: 500;
  color: #000000;
}
@media screen and (max-width: 768px) {
  #giftMinigameModal .gift-minigame-modal__message {
    font-size: calc(10 / 393 * 100vw);
  }
}
#giftMinigameModal .gift-minigame-modal__giftcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
}
#giftMinigameModal .gift-minigame-modal__giftcode__number {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #5C9A87;
  font-size: calc(40 / 1920 * 100vw);
  font-weight: 700;
  color: #FFFFFF;
  width: calc(581 / 1920 * 100vw);
  height: calc(87 / 1920 * 100vw);
}
@media screen and (max-width: 768px) {
  #giftMinigameModal .gift-minigame-modal__giftcode__number {
    width: calc(205 / 393 * 100vw);
    height: calc(31 / 393 * 100vw);
    font-size: calc(15 / 393 * 100vw);
  }
}