#rikvip-page {
  width: 100% !important;
  overflow: hidden;
}

.main-container {
  width: fit-content;
  transform-origin: top left;
  visibility: hidden;
}

/* screen - index */

.index {
  background-color: #13171c;
  height: 1080px;
  overflow: hidden;
  position: relative;
  width: 1920px;
}

.index .bg-3 {
  aspect-ratio: 1.78;
  height: 1080px;
  left: calc(50.00% - 959px);
  object-fit: cover;
  position: absolute;
  top: calc(50.00% - 540px);
  width: 1918px;
}

.index .text-1111 {
  align-items: center;
  display: inline-flex;
  gap: 10.74px;
  left: calc(50.00% + 123px);
  position: absolute;
  top: 975px;
}

.index .ci {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-m);
  font-weight: 600;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  width: 37.18px;
}

.index .text-1 {
  color: #ffd633;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-l);
  font-weight: 800;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -0.83px;
  position: relative;
  width: 63px;
}

.index .v-truy-cp-domain-chnh-hng-fo88com {
  color: transparent;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-m);
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  width: 470px;
}

.index .span0 {
  color: var(--white);
  font-weight: 600;
}

.index .span1 {
  color: #97fe4a;
  font-weight: 700;
}

.index .badgedangky {
  height: 599px;
  left: 994px;
  position: absolute;
  top: 318px;
  width: 770px;
}

.index .badge_dangky-1 {
  aspect-ratio: 1.36;
  height: 566px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 770px;
}

.index .input-field {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 42.78px;
  left: 120px;
  position: absolute;
  top: 136px;
  width: 530px;
}

.index .input {
  align-self: stretch;
  aspect-ratio: 7.21;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.index .input-field .field {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.index .input-field .field input {
  background: transparent;
  border: none;
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-m);
  font-weight: 300;
  height: 100%;
  left: 0;
  outline: none;
  padding-left: 93px;
  padding-right: 58px;
  position: absolute;
  top: 0;
  width: 94%;
}

.index .input-field .pass-toggle {
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  height: 34px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  z-index: 4;
}

.index .input-field .pass-toggle .vector {
  filter: grayscale(1) brightness(0.4);
  height: 100%;
  position: static;
  width: auto;
}

.index .input-field .pass-toggle.reveal .vector {
  filter: none;
}



.index .input-field .fmsg {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  left: 15px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  text-align: center;
  transition: opacity 0.3s;
  width: 499px;
}

.index .input-field .fmsg.show {
  opacity: 1;
}

.index .input-field .fmsg.success {
  color: #9eff6b;
}

.index .input-field #msg-user {
  top: 82px;
}

.index .input-field #msg-pass {
  top: 197px;
}

.index .input-field #msg-phone {
  top: 313px;
}

.index .cta-2 {
  animation: cta-zoom 1.6s ease-in-out infinite;
  aspect-ratio: 4.55;
  height: 110px;
  left: 135px;
  object-fit: cover;
  position: absolute;
  top: 489px;
  width: 499px;
}

@keyframes cta-zoom {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.index .badgedangky .input-field .cta-2 {
  background: url(../img/cta-2.webp) center / 100% 100% no-repeat;
  border: none;
  cursor: pointer;
  left: 15px;
  padding: 0;
  top: 353px;
}

.index .badgedangky .input-field .cta-2:hover {
  filter: brightness(1.08);
}

.index .s-in-thoi {
  height: 4.68%;
  left: 27.67%;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 65.43%;
  width: 18.57%;
}

.index .mt-khu {
  height: 4.68%;
  left: 27.67%;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 45.86%;
  width: 12.99%;
}

.index .tn-ng-nhp {
  height: 4.68%;
  left: 27.67%;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 26.86%;
  width: 20.91%;
}

.index .s-in-thoi,
.index .mt-khu,
.index .tn-ng-nhp {
  pointer-events: none;
  z-index: 3;
}

.index .players-cartoon-1 {
  aspect-ratio: 1.12;
  height: 746px;
  left: 88px;
  object-fit: cover;
  position: absolute;
  top: 214px;
  width: 836px;
}

.index .badgectkm {
  align-items: center;
  display: inline-flex;
  gap: 18px;
  left: 127px;
  position: absolute;
  top: 863px;
}

.index .ctkm_1 {
  aspect-ratio: 1.91;
  background-image: url(../img/ctkm-1-1.webp);
  background-position: 50% 50%;
  background-size: cover;
  height: 137px;
  position: relative;
  width: 261.98px;
}

.index .ctkm_2 {
  aspect-ratio: 1.91;
  background-image: url(../img/ctkm-2-1.webp);
  background-position: 50% 50%;
  background-size: cover;
  height: 137px;
  position: relative;
  width: 261.98px;
}

.index .ctkm_3 {
  aspect-ratio: 1.91;
  background-image: url(../img/ctkm-3-1.webp);
  background-position: 50% 50%;
  background-size: cover;
  height: 137px;
  position: relative;
  width: 261.98px;
}

.index .logo {
  aspect-ratio: 4.67;
  background-image: url(../img/logo-1.webp);
  background-position: 50% 50%;
  background-size: cover;
  height: 109px;
  left: 283px;
  position: absolute;
  top: 90px;
  width: 509px;
}

.index .text-2 {
  aspect-ratio: 4.11;
  height: 168px;
  left: 1033px;
  object-fit: cover;
  position: absolute;
  top: 92px;
  width: 691px;
}
/* screen - ldpu47mobile */

.ldpu47mobile {
  background-color: #13171c;
  height: 929px;
  overflow: hidden;
  position: relative;
  width: 390px;
}

.ldpu47mobile .bg-3-1 {
  aspect-ratio: 1.78;
  height: 1080px;
  left: calc(50.00% - 194px);
  object-fit: cover;
  position: absolute;
  top: calc(50.00% - 464px);
  width: 1918px;
}

.ldpu47mobile .logo-1 {
  aspect-ratio: 4.67;
  background-image: url(../img/logo-1.webp);
  background-position: 50% 50%;
  background-size: cover;
  height: 51px;
  left: calc(50.00% - 120px);
  position: absolute;
  top: 47px;
  width: 239px;
}

.ldpu47mobile .tab {
  display: flex;
  height: 599px;
  left: 623px;
  position: absolute;
  top: 370px;
  width: 673px;
}

.ldpu47mobile .tabdangky {
  height: 599px;
  position: relative;
  width: 673px;
}

.ldpu47mobile .bg-2 {
  aspect-ratio: 1.35;
  height: 499px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 44px;
  width: 673px;
}

.ldpu47mobile .cta-1 {
  aspect-ratio: 5.31;
  height: 88px;
  left: 103px;
  object-fit: cover;
  position: absolute;
  top: 511px;
  width: 467px;
}

.ldpu47mobile .buttondangky {
  aspect-ratio: 7.39;
  height: 76px;
  left: 56px;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 562px;
}

.ldpu47mobile .input-fields {
  height: 321px;
  left: 56px;
  position: absolute;
  top: 131px;
  width: 565px;
}

.ldpu47mobile .phone {
  aspect-ratio: 6.88;
  height: 81px;
  left: 2px;
  object-fit: cover;
  position: absolute;
  top: 240px;
  width: 557px;
}

.ldpu47mobile .pass {
  aspect-ratio: 6.88;
  height: 81px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 120px;
  width: 557px;
}

.ldpu47mobile .login {
  aspect-ratio: 6.88;
  height: 81px;
  left: 2px;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 557px;
}

.ldpu47mobile .tn-ng-nhp-1 {
  left: 89px;
  top: 25px;
}

.ldpu47mobile .mt-khu-1 {
  left: 89px;
  top: 144px;
}

.ldpu47mobile .s-in-thoi-1 {
  left: 89px;
  top: 263px;
}

.ldpu47mobile .frame-2085663170 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  left: 35px;
  position: absolute;
  top: 134px;
  width: 319px;
}

.ldpu47mobile .text-2-1 {
  aspect-ratio: 4.11;
  height: 78px;
  margin-left: -0.96px;
  margin-right: -0.96px;
  object-fit: cover;
  position: relative;
  width: 321px;
}

.ldpu47mobile .badgedangky-1 {
  height: 248.05px;
  position: relative;
  width: 318.92px;
}

.ldpu47mobile .badge_dangky-1-1 {
  aspect-ratio: 1.36;
  height: 235px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 319px;
}

.ldpu47mobile .input-field-1 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 17.72px;
  left: 50px;
  position: absolute;
  top: 56px;
  width: 220px;
}

.ldpu47mobile .input-1 {
  align-self: stretch;
  aspect-ratio: 7.21;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.ldpu47mobile .input-field-1 .field {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ldpu47mobile .input-field-1 .field input {
  background: transparent;
  border: none;
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: 9.6px;
  font-weight: 300;
  height: 100%;
  left: 0;
  outline: none;
  padding-left: 38px;
  padding-right: 24px;
  position: absolute;
  top: 0;
  width: 94%;
}

.ldpu47mobile .input-field-1 .pass-toggle {
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  height: 15px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  z-index: 4;
}

.ldpu47mobile .input-field-1 .pass-toggle .vector-1 {
  filter: grayscale(1) brightness(0.4);
  height: 100%;
  position: static;
  width: auto;
}

.ldpu47mobile .input-field-1 .pass-toggle.reveal .vector-1 {
  filter: none;
}



.ldpu47mobile .input-field-1 .fmsg {
  color: #ff7b7b;
  font-size: 9.6px;
  font-weight: 600;
  left: 6px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  text-align: center;
  transition: opacity 0.3s;
  width: 207px;
}

.ldpu47mobile .input-field-1 .fmsg.show {
  opacity: 1;
}

.ldpu47mobile .input-field-1 .fmsg.success {
  color: #9eff6b;
}

.ldpu47mobile .input-field-1 #msg-user-mb {
  top: 37px;
}

.ldpu47mobile .input-field-1 #msg-pass-mb {
  top: 85px;
}

.ldpu47mobile .input-field-1 #msg-phone-mb {
  top: 133px;
}

.ldpu47mobile .cta-2-1 {
  animation: cta-zoom 1.6s ease-in-out infinite;
  aspect-ratio: 4.55;
  height: 45px;
  left: 56px;
  object-fit: cover;
  position: absolute;
  top: 203px;
  width: 207px;
}

.ldpu47mobile .badgedangky-1 .input-field-1 .cta-2-1 {
  background: url(../img/cta-2.webp) center / 100% 100% no-repeat;
  border: none;
  cursor: pointer;
  left: 6px;
  padding: 0;
  top: 147px;
}

.ldpu47mobile .badgedangky-1 .input-field-1 .cta-2-1:hover {
  filter: brightness(1.08);
}

.ldpu47mobile .s-in-thoi-2 {
  height: 4.84%;
  left: 27.67%;
  position: absolute;
  top: 65.43%;
  width: 18.50%;
}

.ldpu47mobile .mt-khu-2 {
  height: 4.84%;
  left: 27.67%;
  position: absolute;
  top: 45.86%;
  width: 13.17%;
}

.ldpu47mobile .tn-ng-nhp-2 {
  height: 4.84%;
  left: 27.67%;
  position: absolute;
  top: 26.86%;
  width: 21.01%;
}

.ldpu47mobile .s-in-thoi-2,
.ldpu47mobile .mt-khu-2,
.ldpu47mobile .tn-ng-nhp-2 {
  pointer-events: none;
  z-index: 3;
}

.ldpu47mobile .badgectkm-1 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6.97px;
  position: relative;
}

.ldpu47mobile .ctkm_1-1 {
  aspect-ratio: 1.91;
  background-image: url(../img/ctkm-1-1.webp);
  background-position: 50% 50%;
  background-size: cover;
  height: 53.07px;
  position: relative;
  width: 101.48px;
}

.ldpu47mobile .ctkm_2-1 {
  aspect-ratio: 1.91;
  background-image: url(../img/ctkm-2-1.webp);
  background-position: 50% 50%;
  background-size: cover;
  height: 53.07px;
  position: relative;
  width: 101.48px;
}

.ldpu47mobile .ctkm_3-1 {
  aspect-ratio: 1.91;
  background-image: url(../img/ctkm-3-1.webp);
  background-position: 50% 50%;
  background-size: cover;
  height: 53.07px;
  position: relative;
  width: 101.48px;
}

.ldpu47mobile .text-1111-1 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5.27px;
  position: relative;
}

.ldpu47mobile .ci-1 {
  color: var(--white);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  width: 18.24px;
}

.ldpu47mobile .text-2-2 {
  color: #ffdb49;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-s);
  font-weight: 800;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -0.41px;
  position: relative;
  width: 33px;
}

.ldpu47mobile .v-truy-cp-domain-chnh-hng-fo88com-1 {
  color: transparent;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  width: 227.61px;
}

.ldpu47mobile .span0-1 {
  color: var(--white);
}

.ldpu47mobile .span1-1 {
  color: #97fe4a;
}

.ldpu47mobile .players-cartoon-1-1 {
  aspect-ratio: 1.12;
  height: 307.9px;
  margin-left: -12.92px;
  margin-right: -12.91px;
  object-fit: cover;
  position: relative;
  width: 344.92px;
}

.ldpu47mobile .mt-khu {
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
}

.ldpu47mobile .s-in-thoi {
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
}

.ldpu47mobile .tn-ng-nhp {
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
}
@media screen and (orientation: portrait) {
  html,
  body {
    overflow-x: hidden;
  }
  .screen.index {
    display: none;
  }
  .screen.ldpu47mobile {
    display: block;
  }
}
@media screen and (orientation: landscape) {
  html,
  body {
    overflow-x: hidden;
  }
  #rikvip-page {
    background: url(../img/bg-3.webp) center / cover no-repeat;
  }
  .screen.index {
    background-color: transparent;
    display: block;
  }
  .screen.index .bg-3 {
    display: none;
  }
  .screen.ldpu47mobile {
    display: none;
  }
}