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

body {
  background-color: #2a2a2a;
}

.custom-scrollbar {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.custom-scrollbar::-webkit-scrollbar {
  width: 0.5729166667vw;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #93d3aa;
  border-radius: 0.5208333333vw;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #3a8e7a;
  border-radius: 0.5208333333vw;
  background-clip: padding-box;
  border: 0.1041666667vw solid transparent;
  transition: background 0.2s ease;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #2d6f5f;
}
.custom-scrollbar::-webkit-scrollbar-thumb:active {
  background: #1f4d41;
}
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #3a8e7a #93d3aa;
}

@keyframes characterSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(31.25vw);
    opacity: 0;
  }
}
@keyframes characterSlideIn {
  0% {
    transform: translateX(31.25vw) scale(1.6);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}
@keyframes characterInfoSlideOut {
  from {
    opacity: 1;
    transform: translateX(14.7916666667vw) scale(1);
  }
  to {
    transform: translateX(-10.4166666667vw) scale(1.6);
    opacity: 0;
  }
}
@keyframes characterInfoSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10.4166666667vw);
  }
  to {
    transform: translateX(14.7916666667vw);
    opacity: 1;
  }
}
@keyframes starZoom {
  0% {
    opacity: 0;
    transform: scale(2);
  }
  30% {
    opacity: 1;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes characterImageMobileSlideIn {
  from {
    opacity: 0;
    top: -13.0208333333vw;
  }
  to {
    opacity: 1;
    top: 0;
  }
}
@keyframes characterImageMobileSlideOut {
  from {
    opacity: 1;
    top: 0;
  }
  to {
    opacity: 0;
    top: -13.0208333333vw;
  }
}
@keyframes characterInfoMobileSlideIn {
  from {
    opacity: 0;
    top: 91.1458333333vw;
  }
  to {
    opacity: 1;
    top: 73.9583333333vw;
  }
}
@keyframes characterInfoMobileSlideOut {
  from {
    opacity: 1;
    top: 73.9583333333vw;
  }
  to {
    opacity: 0;
    top: 91.1458333333vw;
  }
}
@keyframes tabImageFadeIn {
  0% {
    opacity: 0;
    transform: translateX(20.8333333333vw) scale(0.5);
  }
  80% {
    opacity: 0.5;
    transform: translateX(20.8333333333vw) scale(0.7);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes tabImageFadeOut {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-20.8333333333vw) scale(0.5);
  }
}
@keyframes tabTextFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tabTextFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes freeButtonShake {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  10% {
    transform: translateX(-50%) rotate(-1.5deg);
  }
  20% {
    transform: translateX(-50%) rotate(1.5deg);
  }
  30% {
    transform: translateX(-50%) rotate(-2deg);
  }
  40% {
    transform: translateX(-50%) rotate(2.5deg);
  }
  50% {
    transform: translateX(-50%) rotate(-3deg);
  }
  60% {
    transform: translateX(-50%) rotate(3deg);
  }
  70% {
    transform: translateX(-50%) rotate(-2.5deg);
  }
  80% {
    transform: translateX(-50%) rotate(2deg);
  }
  90% {
    transform: translateX(-50%) rotate(-1deg);
  }
  100% {
    transform: translateX(-50%) rotate(0deg);
  }
}
@font-face {
  font-family: "Cinzel Bold";
  src: url("../font/GS3 Cinzel-Bold.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../font/RobotoCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body {
  overflow-x: hidden;
  position: relative;
}

body.popup-open {
  overflow: hidden;
}

.text-center {
  text-align: center;
  justify-content: center;
}

.frame {
  width: 100%;
  height: 187.5520833333vw;
  background-image: url("../images/naraka-background.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.frame1 {
  position: relative;
  width: 100vw;
  height: 56.25vw;
  overflow: hidden;
  z-index: 1;
  background-image: url("../images/frame1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body:not(.portrait-orientation) .frame1 {
  height: 100vh;
}

.frame-background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  object-fit: cover;
}
.frame-background-video.loaded {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 769px) {
  body:not(.portrait-orientation) .frame-background-video {
    height: 100%;
    width: auto;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (min-width: 769px) {
  body.wide-screen:not(.portrait-orientation) .frame-background-video {
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden !important;
}

.hidden-desktop {
  display: none !important;
}

.margin-0 {
  margin: 0 !important;
}

.text-green {
  color: #27754f;
}

.naraka-logo {
  position: absolute;
  top: 1.3541666667vw;
  left: 1.9791666667vw;
  width: 11.9791666667vw;
  height: 4.4270833333vw;
  z-index: 1000;
  display: block;
}
.naraka-logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.logo-18plus {
  position: absolute;
  top: 7.1354166667vw;
  left: 1.09375vw;
  width: 13.9583333333vw;
  height: 5.2604166667vw;
  z-index: 1000;
  display: block;
}
.logo-18plus img {
  display: block;
  width: 100%;
  height: 100%;
}

.text-banner-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.text-banner {
  position: absolute;
  bottom: 4vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background-position: center;
  background-repeat: no-repeat;
}

body.download1 .text-banner {
  width: 51vw;
  height: 28.6875vw;
  background-image: url("../images/text-download1.webp");
  background-size: 100% 100%;
}

body.download2 .text-banner {
  width: 60vw;
  height: 33.75vw;
  background-image: url("../images/text-download2.webp");
  background-size: 100% 100%;
  bottom: 0vw;
}

.logo-footer {
  position: absolute;
  bottom: 10.270833vw;
  left: 50%;
  transform: translateX(-50%);
  width: 37.96875vw;
  height: 3.5416666667vw;
  background-image: url("../images/logo-footer.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 100;
}

.nhung-chien-binh-bat-bai {
  position: absolute;
  top: 61.1979166667vw;
  left: 10.15625vw;
  width: 40.0520833333vw;
  height: 4.1145833333vw;
  color: #efd483;
  font-family: "Cizel Black";
  font-size: 2.6041666667vw;
  background-image: url("../images/nhung-chien-binh-bat-bai.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 100;
}

.frame2 .nhung-chien-binh-bat-bai {
  top: 4.9479166667vw;
}

.tab-container {
  position: absolute;
  width: 100vw;
  height: 56.25vw;
  top: 56.25vw;
  left: 0;
  z-index: 100;
  background: #0b0d11;
}

.frame2 .tab-container {
  top: 0vw;
}

.tab-button-wrapper {
  position: absolute;
  left: 4.84375vw;
  top: 14.4791666667vw;
  display: flex;
  flex-direction: column;
  gap: 3.125vw;
  z-index: 10;
}
.tab-button-wrapper::after {
  content: "";
  position: absolute;
  right: -2.7604166667vw;
  top: 0;
  width: 1.6666666667vw;
  height: 23.125vw;
  background-image: url("../images/tab/tab-line.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 10;
}

.tab-button {
  width: 4.8958333333vw;
  height: 5.6770833333vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: background-image 0.3s ease;
}

.tab-button[data-tab="1"] {
  background-image: url("../images/tab/1.webp");
}
.tab-button[data-tab="1"]:hover, .tab-button[data-tab="1"].active {
  background-image: url("../images/tab/1-active.webp");
}

.tab-button[data-tab="2"] {
  background-image: url("../images/tab/2.webp");
}
.tab-button[data-tab="2"]:hover, .tab-button[data-tab="2"].active {
  background-image: url("../images/tab/2-active.webp");
}

.tab-button[data-tab="3"] {
  background-image: url("../images/tab/3.webp");
}
.tab-button[data-tab="3"]:hover, .tab-button[data-tab="3"].active {
  background-image: url("../images/tab/3-active.webp");
}

.tab-dots {
  position: absolute;
  left: 4.84375vw;
  width: 0.6770833333vw;
  height: 0.6770833333vw;
  background-image: url("../images/tab/dots.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  left: 6.953125vw;
  transform: translateY(-50%);
  z-index: 10;
}

.tab-dots-1 {
  top: 21.71875vw;
}

.tab-dots-2 {
  top: 30.5208333333vw;
}

.tab-image {
  position: relative;
  width: 100vw;
  height: 56.25vw;
  z-index: 0;
}

.tab-image-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.5);
  z-index: 1;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.tab-image-item.active {
  z-index: 2;
  animation: tabImageFadeIn 0.6s ease forwards;
}
.tab-image-item.fadeout {
  animation: tabImageFadeOut 0.3s ease forwards;
}

.tab-image-item[data-tab="1"] {
  background-image: url("../images/tab/1-image.webp");
}

.tab-image-item[data-tab="2"] {
  background-image: url("../images/tab/2-image.webp");
}

.tab-image-item[data-tab="3"] {
  background-image: url("../images/tab/3-image.webp");
}

.tab-text {
  position: absolute;
  top: 20.1041666667vw;
  left: 13.3333333333vw;
  pointer-events: none;
}

.tab-text-item {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 3;
}
.tab-text-item.active {
  animation: tabTextFadeIn 0.3s ease forwards;
}
.tab-text-item.fadeout {
  animation: tabTextFadeOut 0.3s ease forwards;
}
.tab-text-item-title {
  width: 19.7916666667vw;
  font-family: "Cinzel Bold";
  font-size: 1.5625vw;
  color: #efd483;
  text-transform: uppercase;
}
.tab-text-item-description {
  width: 21.875vw;
  font-family: "Roboto Condensed";
  font-size: 1.3020833333vw;
  color: white;
  padding: 0 0.5208333333vw;
  margin-top: 1.9270833333vw;
}
.tab-text-item-description p {
  line-height: 1.6;
}
.tab-text-item-description ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tab-text-item-description li {
  position: relative;
  padding-left: 1.5625vw;
  margin-top: 0.8333333333vw;
}
.tab-text-item-description li::before {
  content: "";
  position: absolute;
  left: 0.46875vw;
  top: 50%;
  transform: translateY(-50%);
  width: 0.625vw;
  height: 0.625vw;
  background-image: url("../images/tab/list-icon.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.floating-menu {
  position: fixed;
  top: 0.9375vw;
  right: 0.78125vw;
  display: flex;
  flex-direction: column;
  gap: 0.5208333333vw;
  z-index: 1000;
}

.floating-menu-item {
  display: block;
  transition: transform 0.2s ease;
}
.floating-menu-item:hover {
  transform: scale(1.1);
}
.floating-menu-item img {
  display: block;
  width: 100%;
  height: auto;
}

.floating-menu-website,
.floating-menu-facebook,
.floating-menu-youtube,
.floating-menu-discord,
.floating-menu-tiktok {
  width: 2.8645833333vw;
  height: 2.8645833333vw;
}

.floating-menu-huong-dan,
.floating-menu-taigame {
  width: 3.3854166667vw;
  height: 12.1354166667vw;
}

.free-button {
  position: absolute;
  bottom: 3.4375vw;
  left: 50%;
  transform: translateX(-50%);
  width: 23.4895833333vw;
  height: 6.7708333333vw;
  background-image: url("../images/free-button.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 100;
  transition: background-image 0.2s ease;
  animation: freeButtonShake 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.free-button:hover {
  background-image: url("../images/free-button-hover.webp");
}

.frame2 {
  position: relative;
  width: 100%;
  height: 127.2395833333vw;
  background-image: url("../images/frame2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.video-section {
  position: absolute;
  top: 116.09375vw;
  left: 50%;
  transform: translateX(-50%);
  width: 80.6770833333vw;
  height: 47.65625vw;
  z-index: 100;
}
.video-section .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5.3645833333vw;
  height: 5.3645833333vw;
  background-image: url("../images/play-button.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  cursor: pointer;
  z-index: 102;
}
.video-section .play-button:hover {
  opacity: 1;
}
.video-section .play-button.hidden {
  display: none;
}
.video-section iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 79.4270833333vw;
  height: 44.6875vw;
  border: none;
  display: none;
  z-index: 100;
  margin-top: 0.8333333333vw;
}
.video-section iframe.active {
  display: block;
}
.video-section .video-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/video-background.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 101;
  transition: background-image 0.2s ease;
}
.video-section .video-border.loaded {
  background-image: url("../images/video-border.webp");
}

.frame2 .video-section {
  top: 59.84375vw;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;
}
.popup.active {
  display: block;
}
.popup .popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.popup .popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
}
.popup .popup-close {
  position: absolute;
  top: 1.1979166667vw;
  right: 1.1979166667vw;
  width: 2.7083333333vw;
  height: 2.7083333333vw;
  background-image: url("../images/popup/close-button.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  background-color: transparent;
  cursor: pointer;
  z-index: 10002;
  padding: 0;
  transition: filter 0.2s ease;
}
.popup .popup-close:hover {
  filter: brightness(1.3);
}

.popup-huong-dan-tai .popup-content {
  width: 73.28125vw;
  height: 41.9791666667vw;
  background-image: url("../images/popup/popup-huong-dan-tai-bg.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.popup-huong-dan-tai .download-here {
  position: absolute;
  top: 33.3333333333vw;
  left: 50%;
  transform: translateX(-50%);
  width: 21.9791666667vw;
  height: 7.4479166667vw;
  background-image: url("../images/popup/download-here-button.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  transition: filter 0.2s ease;
}
.popup-huong-dan-tai .download-here:hover {
  filter: brightness(1.32);
}

.popup-ready-to-play .popup-content {
  width: 55.625vw;
  height: 25.3645833333vw;
  background-image: url("../images/popup/popup-ready-to-play-bg.webp");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.popup-ready-to-play .download-here-button,
.popup-ready-to-play .download-now-button {
  position: absolute;
  top: 13.5416666667vw;
  display: block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  transition: filter 0.2s ease;
}
.popup-ready-to-play .download-here-button:hover,
.popup-ready-to-play .download-now-button:hover {
  filter: brightness(1.32);
}
.popup-ready-to-play .download-here-button {
  left: 50%;
  transform: translateX(calc(-50% + 10.9895833333vw + 2.6041666667vw - 15px));
  width: 21.9791666667vw;
  height: 7.4479166667vw;
  background-image: url("../images/popup/download-here-button.webp");
}
.popup-ready-to-play.active .download-here-button {
  background-image: url("../images/popup/download-here-button-2.webp");
}
.popup-ready-to-play .download-now-button {
  left: 50%;
  transform: translateX(calc(-50% - 10.9895833333vw - 2.6041666667vw - 15px));
  width: 21.9791666667vw;
  height: 6.3020833333vw;
  background-image: url("../images/popup/download-now-button.webp");
}

@media (max-width: 768px) {
  .frame {
    width: 100%;
    height: 578.125vw;
    background-image: url("../images/naraka-background-mb.webp");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .frame1 {
    width: 100vw;
    height: 100vh;
    background-image: url("../images/frame1-mb.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .frame-background-video {
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    transform: none;
    object-fit: cover;
  }
  .frame2 {
    height: 324.609375vw;
    background-image: url("../images/frame2-mb.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .naraka-logo {
    top: 1.8229166667vw;
    left: 4.296875vw;
    width: 29.9479166667vw;
    height: 11.0677083333vw;
  }
  .logo-18plus {
    top: 16.2760416667vw;
    left: 2.0833333333vw;
    width: 34.8958333333vw;
    height: 13.1510416667vw;
  }
  .text-banner {
    position: absolute;
    top: auto;
    bottom: 35.15625vw;
  }
  body.download1 .text-banner {
    width: 95.0520833333vw;
    height: 53.3854166667vw;
    background-image: url("../images/text-download1-mb.webp");
  }
  body.download2 .text-banner {
    width: 95.0520833333vw;
    height: 53.3854166667vw;
    background-image: url("../images/text-download2-mb.webp");
    bottom: 31.25vw;
  }
  .nhung-chien-binh-bat-bai {
    top: 195.3125vw;
    left: 50%;
    transform: translateX(-50%);
    width: 81.9010416667vw;
    height: 8.7239583333vw;
    background-image: url("../images/nhung-chien-binh-bat-bai-mb.webp");
  }
  .frame2 .nhung-chien-binh-bat-bai {
    top: 13.0208333333vw;
  }
  .tab-container {
    width: 100vw;
    height: 143.2291666667vw;
  }
  .tab-button-wrapper {
    position: absolute;
    top: 81.25vw;
    left: 3.90625vw;
    display: flex;
    flex-direction: column;
    gap: 7.8125vw;
  }
  .tab-button-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: -6.9010416667vw;
    width: 4.1666666667vw;
    height: 57.8125vw;
    background-image: url("../images/tab/tab-line.webp");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .tab-button {
    width: 12.2395833333vw;
    height: 14.1927083333vw;
  }
  .tab-dots {
    width: 1.4322916667vw;
    height: 1.4322916667vw;
  }
  .tab-text {
    top: 95.0520833333vw;
    left: 24.7395833333vw;
  }
  .tab-text-item-title {
    width: 49.4791666667vw;
    font-size: 3.90625vw;
  }
  .tab-text-item-description {
    width: 54.6875vw;
    font-size: 3.2552083333vw;
    padding: 0 1.3020833333vw;
    margin-top: 4.8177083333vw;
  }
  .tab-text-item-description li {
    padding-left: 3.90625vw;
    margin-top: 2.0833333333vw;
  }
  .tab-text-item-description li::before {
    left: 1.171875vw;
    width: 1.5625vw;
    height: 1.5625vw;
  }
  .tab-image {
    width: 100vw;
    height: 143.2291666667vw;
  }
  .tab-image-item {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
  }
  .tab-image-item[data-tab="1"] {
    background-image: url("../images/tab/1-image-mb.webp");
  }
  .tab-image-item[data-tab="2"] {
    background-image: url("../images/tab/2-image-mb.webp");
  }
  .tab-image-item[data-tab="3"] {
    background-image: url("../images/tab/3-image-mb.webp");
  }
  .logo-footer {
    bottom: 28.796875vw;
    width: 72.0052083333vw;
    height: 6.7708333333vw;
    background-image: url("../images/logo-footer-mb.webp");
  }
  .floating-menu {
    top: 2.9947916667vw;
    right: 2.34375vw;
    gap: 1.3020833333vw;
  }
  .floating-menu-website,
  .floating-menu-facebook,
  .floating-menu-youtube,
  .floating-menu-discord,
  .floating-menu-tiktok {
    width: 7.1614583333vw;
    height: 7.1614583333vw;
  }
  .floating-menu-huong-dan,
  .floating-menu-taigame {
    width: 8.4635416667vw;
    height: 30.3385416667vw;
  }
  .free-button {
    position: absolute;
    top: auto;
    bottom: 31.25vw;
    width: 58.7239583333vw;
    height: 13.4114583333vw;
  }
  .video-section {
    top: 448.5677083333vw;
    width: 93.75vw;
    height: 56.3802083333vw;
  }
  .video-section .play-button {
    width: 9.375vw;
    height: 9.375vw;
  }
  .video-section iframe {
    width: 91.2760416667vw;
    height: 51.3020833333vw;
    margin-top: 1.171875vw;
  }
  .frame2 .video-section {
    top: 215.7552083333vw;
  }
  .popup .popup-close {
    top: 2.34375vw;
    right: 2.34375vw;
    width: 4.5572916667vw;
    height: 4.5572916667vw;
  }
  .popup-huong-dan-tai .popup-content {
    width: 95.1822916667vw;
    height: 136.5885416667vw;
    background-image: url("../images/popup/popup-huong-dan-tai-bg-mb.webp");
  }
  .popup-huong-dan-tai .download-here {
    top: 118.2291666667vw;
    width: 38.9322916667vw;
    height: 12.3697916667vw;
  }
  .popup-ready-to-play .popup-content {
    width: 97.7864583333vw;
    height: 44.53125vw;
    background-size: 100% 100%;
  }
  .popup-ready-to-play .download-here-button,
  .popup-ready-to-play .download-now-button {
    position: absolute;
    top: 23.828125vw;
    left: 50%;
    width: 38.9322916667vw;
    height: 11.4583333333vw;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    transition: filter 0.2s ease;
  }
  .popup-ready-to-play .download-here-button:hover,
  .popup-ready-to-play .download-now-button:hover {
    filter: brightness(1.32);
  }
  .popup-ready-to-play .download-now-button {
    transform: translateX(calc(-50% - 19.4661458333vw - 4.5572916667vw - 10px));
    background-image: url("../images/mobile/support-button.webp");
  }
  .popup-ready-to-play .download-here-button {
    transform: translateX(calc(-50% + 19.4661458333vw + 4.5572916667vw - 10px));
    background-image: url("../images/mobile/download-now-button.webp");
  }
}