/* screen - index */

.index {
  background-color: transparent;
  min-height: 1080px;
  min-width: 1920px;
  position: relative;
  width: 100%;
}

.index .bg_pc-1 {
  aspect-ratio: 1.78;
  height: 1080px;
  left: calc(50.00% - 960px);
  object-fit: cover;
  position: absolute;
  top: calc(50.00% - 540px);
  width: 1920px;
}

.index .grok-video-2b78a735::before {
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  background: linear-gradient(0deg, rgba(224, 42, 253, 1) 0%, rgba(255, 255, 255, 1) 41%, rgba(224, 42, 253, 1) 70%, rgba(255, 255, 255, 1) 100%);
  border-radius: 14.23px;
  content: '';
  inset: 0;
  mask-composite: exclude;
  padding: 1.53px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.index .grok-video-2b78a735 {
  aspect-ratio: 1.78;
  border: none;
  border-radius: 14.23px;
  height: 366px;
  left: 353px;
  overflow: hidden;
  position: absolute;
  top: 347px;
  width: 651px;
}

.index .grok-video-2b78a735 .video-bg {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.index .frame-2147224161 {
  background-image: url(../img/image-41.webp);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  height: 726px;
  left: 1072px;
  position: absolute;
  top: 144px;
  width: 471px;
}

.index .logo-2 {
  aspect-ratio: 5.4;
  height: 73.79px;
  margin-left: 36.5px;
  margin-top: 67.7px;
  object-fit: cover;
  width: 398.71px;
}

.index .ng-k-nhanh-nhn-thng-ln {
  color: var(--white);
  flex: 1;
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xxxl);
  font-weight: 700;
  letter-spacing: 0;
  line-height: normal;
  margin-left: 36.2px;
  margin-right: 36.5px;
  margin-top: 34.8px;
  max-height: 24px;
  text-align: center;
}

.index .frame-2147224112 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 13.77px;
  height: 422.42px;
  margin-left: 36.2px;
  margin-top: 35.6px;
  position: relative;
  width: 398.71px;
}

.index .frame-6 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 21.5px;
  position: relative;
  width: 100%;
}

.index .frame-4::before {
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  background: linear-gradient(0deg, rgba(224, 42, 253, 1) 0%, rgba(255, 255, 255, 1) 41%, rgba(224, 42, 253, 1) 70%, rgba(45, 24, 58, 1) 100%);
  border-radius: 30.11px;
  content: '';
  inset: 0;
  mask-composite: exclude;
  padding: 2.32px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.index .frame-4 {
  align-items: center;
  align-self: stretch;
  background-color: #06000c;
  border: none;
  border-radius: 30.11px;
  box-shadow: inset 0px 4.65px 4.65px #0f001c , 0px 4.65px 4.65px #00000040;
  display: flex;
  flex-direction: column;
  gap: 11.62px;
  height: 73.08px;
  justify-content: center;
  padding: 6.97px 25.57px 6.97px 11.46px;
  position: relative;
  width: 100%;
}

.index .frame-3 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 12.79px;
  justify-content: flex-start;
  position: relative;
  width: 100%;
}

.index .component-1 {
  height: 46.51px;
  position: relative;
  width: 46.51px;
}

.index .nhp-tn-ng-nhp,
.index .nhp-mt-khu {
  background: transparent;
  border: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  color: #ffffff;
  flex: 1;
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xxl);
  font-weight: 600;
  letter-spacing: 0;
  line-height: normal;
  margin: 0;
  min-width: 0;
  outline: none;
  padding: 0;
  position: relative;
  width: 100%;
}

.index .nhp-tn-ng-nhp::placeholder,
.index .nhp-mt-khu::placeholder {
  color: var(--onyx);
  opacity: 1;
}

.index .frame-5::before {
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  background: linear-gradient(0deg, rgba(224, 42, 253, 1) 0%, rgba(255, 255, 255, 1) 41%, rgba(224, 42, 253, 1) 70%, rgba(45, 24, 58, 1) 100%);
  border-radius: 30.11px;
  content: '';
  inset: 0;
  mask-composite: exclude;
  padding: 2.32px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.index .frame-5 {
  align-items: center;
  align-self: stretch;
  background-color: #07000c;
  border: none;
  border-radius: 30.11px;
  box-shadow: inset 0px 4.65px 4.65px #0f001c , 0px 4.65px 4.65px #00000040;
  display: flex;
  flex-direction: column;
  gap: 11.62px;
  height: 73.08px;
  justify-content: center;
  padding: 6.97px 25.57px 6.97px 11.46px;
  position: relative;
  width: 100%;
}

.index .component-1-1 {
  height: 46.51px;
  position: relative;
  width: 46.51px;
}

.index .nhp-mt-khu {
  background: transparent;
  border: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  color: #ffffff;
  flex: 1;
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xxl);
  font-weight: 600;
  letter-spacing: 0;
  line-height: normal;
  margin: 0;
  min-width: 0;
  outline: none;
  padding: 0;
  position: relative;
  width: 100%;
}

.index .nhp-mt-khu::placeholder {
  color: var(--onyx);
  opacity: 1;
}

.index .eye-toggle {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 33px;
  justify-content: center;
  margin-left: auto;
  position: relative;
  width: 33px;
}

.index .eye-toggle svg {
  display: block;
  height: 100%;
  width: 100%;
}

.index .image-39 {
  align-self: stretch;
  animation: cta-blink 1.2s ease-in-out infinite;
  aspect-ratio: 3.55;
  position: relative;
  width: 100%;
}

@keyframes cta-blink {
  0%,
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
  50% {
    filter: brightness(1.8);
    transform: scale(1.05);
  }
}

.index .frame-2147224104 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 42.99px;
  justify-content: center;
  position: relative;
}

.index .frame-214722410 {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 80.82px;
}

.index .image-38-vectorized {
  align-self: stretch;
  height: 80.82px;
  position: relative;
  width: 100%;
}

.index .bo-mt-tuyt-i {
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  text-align: center;
  width: fit-content;
}

.index .image-38-vectorized-1 {
  width: 80.82px;
}

.index .vector {
  height: 68.94%;
  left: 18.59%;
  position: absolute;
  top: 14.60%;
  width: 62.87%;
}

.index .h-tr-247 {
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  text-align: center;
  width: fit-content;
}

.index .image-38-vectorized-2 {
  align-self: stretch;
  width: 100%;
}

.index .subtract {
  height: 76.55%;
  left: 27.04%;
  position: absolute;
  top: 11.73%;
  width: 45.92%;
}

.index .np-rt-siu-tc {
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  text-align: center;
  width: fit-content;
}

.index .frame-2147224157 {
  align-items: center;
  display: flex;
  justify-content: space-between;
  left: 321px;
  position: absolute;
  top: 784px;
  width: 717px;
}

.index .frame-11 {
  align-items: flex-start;
  background-color: var(--black-2);
  border-radius: 17.96px;
  display: flex;
  gap: 9.51px;
  height: 35.93px;
  padding: 11.42px 13.32px 11.42px 10.46px;
  position: relative;
  width: 35.93px;
}

.index .frame-12 {
  align-items: flex-start;
  background-color: var(--black-2);
  border-radius: 17.96px;
  display: flex;
  gap: 9.51px;
  height: 35.93px;
  padding: 11.42px 13.32px 11.42px 10.46px;
  position: relative;
  transform: rotate(180deg);
  width: 35.93px;
}

.index .polygon-1-1 {
  height: 11.01px;
  position: relative;
  transform: rotate(-180deg);
  width: 10.04px;
}

.index .frame-2147224159 {
  background-color: #170237d9;
  border-radius: 29.76px;
  height: 60px;
  left: 649px;
  position: absolute;
  top: 500px;
  width: 60px;
}

.index .ellipse-7 {
  background-color: #220057a6;
  border-radius: 23.29px;
  height: 47px;
  left: 6px;
  position: absolute;
  top: 6px;
  width: 47px;
}

.index .polygon-1-2 {
  height: 17px;
  left: 23px;
  position: absolute;
  top: 21px;
  width: 15px;
}

.index .group-34-1 {
  aspect-ratio: 3.37;
  height: 193px;
  left: 353px;
  position: absolute;
  top: 146px;
  width: 649px;
}

.index .pc-slider {
  height: 144px;
  left: 370px;
  overflow: hidden;
  position: absolute;
  top: 730px;
  width: 621px;
}

.index .pc-slider-track {
  display: flex;
  gap: 11px;
  transition: transform 0.5s ease;
  width: max-content;
}

.index .image-42,
.index .image-43,
.index .image-44,
.index .image-45 {
  flex-shrink: 0;
  height: 144px;
  width: 147px;
}

.index .image-42 {
  aspect-ratio: 1.03;
  object-fit: cover;
  position: relative;
}

.index .image-43 {
  aspect-ratio: 1.03;
  object-fit: cover;
  position: relative;
}

.index .image-44 {
  aspect-ratio: 1.03;
  object-fit: cover;
  position: relative;
}

.index .image-45 {
  aspect-ratio: 1.03;
  object-fit: cover;
  position: relative;
}

.index .image-38-vectorized-3 {
  height: 80.82px;
  position: relative;
}
/* screen - iphone-16-u38-17-pro-max-1 */

.iphone-16-u38-17-pro-max-1 {
  background-color: var(--white);
  min-height: 1443px;
  min-width: 440px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.iphone-16-u38-17-pro-max-1 .bg_mb-1 {
  aspect-ratio: 0.56;
  height: 1462px;
  left: -191px;
  object-fit: cover;
  position: absolute;
  top: -3px;
  width: 822px;
}

.iphone-16-u38-17-pro-max-1 .logo-1 {
  aspect-ratio: 5.4;
  height: 73px;
  left: calc(50.00% - 198px);
  object-fit: cover;
  position: absolute;
  top: 80px;
  width: 396px;
}

.iphone-16-u38-17-pro-max-1 .frame-2147224163 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 26px;
  left: 22px;
  position: absolute;
  top: 979px;
  width: 396px;
}

.iphone-16-u38-17-pro-max-1 .grok-video-2b78a735-1::before {
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  background: linear-gradient(0deg, rgba(224, 42, 253, 1) 0%, rgba(255, 255, 255, 1) 41%, rgba(224, 42, 253, 1) 70%, rgba(255, 255, 255, 1) 100%);
  border-radius: 8.67px;
  content: '';
  inset: 0;
  mask-composite: exclude;
  padding: 2px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.iphone-16-u38-17-pro-max-1 .grok-video-2b78a735-1 {
  align-self: stretch;
  aspect-ratio: 1.78;
  border: none;
  border-radius: 8.67px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.iphone-16-u38-17-pro-max-1 .grok-video-2b78a735-1 .video-bg {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.iphone-16-u38-17-pro-max-1 .mb-video-btn {
  align-items: center;
  background-color: #170237d9;
  border-radius: 24px;
  cursor: pointer;
  display: flex;
  height: 48px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  z-index: 2;
}

.iphone-16-u38-17-pro-max-1 .mb-video-btn .ellipse-7 {
  border-radius: 18px;
  height: 37px;
  left: 5px;
  position: absolute;
  top: 5px;
  width: 37px;
}

.iphone-16-u38-17-pro-max-1 .mb-video-btn .polygon-1-2 {
  height: 14px;
  left: 18px;
  position: absolute;
  top: 17px;
  width: 12px;
  z-index: 1;
}

.iphone-16-u38-17-pro-max-1 .frame-2147224162 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 14px;
  position: relative;
  width: 100%;
}

.iphone-16-u38-17-pro-max-1 .frame-2147224164 {
  height: 148px;
  overflow: hidden;
  position: relative;
  width: 396px;
}

.iphone-16-u38-17-pro-max-1 .mob-track {
  display: flex;
  gap: 11px;
  transition: transform 0.5s ease;
  width: max-content;
}

.iphone-16-u38-17-pro-max-1 .image-42-1,
.iphone-16-u38-17-pro-max-1 .image-43-1,
.iphone-16-u38-17-pro-max-1 .image-44-1 {
  flex-shrink: 0;
  height: 148px;
  width: 152px;
}

.iphone-16-u38-17-pro-max-1 .image-42-1 {
  aspect-ratio: 1.03;
  object-fit: cover;
  position: relative;
}

.iphone-16-u38-17-pro-max-1 .image-43-1 {
  aspect-ratio: 1.03;
  object-fit: cover;
  position: relative;
}

.iphone-16-u38-17-pro-max-1 .image-44-1 {
  aspect-ratio: 1.03;
  object-fit: cover;
  position: relative;
}

.iphone-16-u38-17-pro-max-1 .frame-2147224160 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 19px;
  position: relative;
}

.iphone-16-u38-17-pro-max-1 .frame-11-1 {
  align-items: flex-start;
  background-color: var(--black-2);
  border-radius: 17.96px;
  display: flex;
  gap: 9.51px;
  height: 35.93px;
  padding: 11.42px 13.32px 11.42px 10.46px;
  position: relative;
  width: 35.93px;
}

.iphone-16-u38-17-pro-max-1 .frame-12-1 {
  align-items: flex-start;
  background-color: var(--black-2);
  border-radius: 17.96px;
  display: flex;
  gap: 9.51px;
  height: 35.93px;
  padding: 11.42px 13.32px 11.42px 10.46px;
  position: relative;
  transform: rotate(180deg);
  width: 35.93px;
}

.iphone-16-u38-17-pro-max-1 .polygon-1-4 {
  transform: rotate(-180deg);
}

.iphone-16-u38-17-pro-max-1 .frame-2147224161-1 {
  background-image: url(../img/image-41-1.webp);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  height: 620px;
  left: 19px;
  position: absolute;
  top: 334px;
  width: 403px;
}

.iphone-16-u38-17-pro-max-1 .logo-2-1 {
  aspect-ratio: 5.4;
  height: 63.01px;
  margin-left: 31.2px;
  margin-top: 57.8px;
  object-fit: cover;
  width: 340.51px;
}

.iphone-16-u38-17-pro-max-1 .ng-k-nhanh-nhn-thng-ln-1 {
  color: var(--white);
  flex: 1;
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: 0;
  line-height: normal;
  margin-left: 31.0px;
  margin-right: 31.2px;
  margin-top: 29.7px;
  max-height: 21px;
  text-align: center;
}

.iphone-16-u38-17-pro-max-1 .frame-2147224112-1 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 11.76px;
  height: 359.72px;
  margin-left: 31.0px;
  margin-top: 29.9px;
  position: relative;
  width: 340.51px;
}

.iphone-16-u38-17-pro-max-1 .frame-6-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 18.36px;
  position: relative;
  width: 100%;
}

.iphone-16-u38-17-pro-max-1 .frame-4-1::before {
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  background: linear-gradient(0deg, rgba(224, 42, 253, 1) 0%, rgba(255, 255, 255, 1) 41%, rgba(224, 42, 253, 1) 70%, rgba(45, 24, 58, 1) 100%);
  border-radius: 25.71px;
  content: '';
  inset: 0;
  mask-composite: exclude;
  padding: 1.99px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.iphone-16-u38-17-pro-max-1 .frame-4-1 {
  align-items: center;
  align-self: stretch;
  background-color: #06000c;
  border: none;
  border-radius: 25.71px;
  box-shadow: inset 0px 3.97px 3.97px #0f001c , 0px 3.97px 3.97px #00000040;
  display: flex;
  flex-direction: column;
  gap: 9.93px;
  height: 62.42px;
  justify-content: center;
  padding: 5.96px 21.84px 5.96px 9.55px;
  position: relative;
  width: 100%;
}

.iphone-16-u38-17-pro-max-1 .frame-3-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 10.92px;
  justify-content: flex-start;
  position: relative;
  width: 100%;
}

.iphone-16-u38-17-pro-max-1 .component-1-2 {
  height: 39.72px;
  position: relative;
  width: 39.72px;
}

.iphone-16-u38-17-pro-max-1 .nhp-tn-ng-nhp-1,
.iphone-16-u38-17-pro-max-1 .nhp-mt-khu-1 {
  background: transparent;
  border: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  color: #ffffff;
  flex: 1;
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-l);
  font-weight: 600;
  letter-spacing: 0;
  line-height: normal;
  margin: 0;
  min-width: 0;
  outline: none;
  padding: 0;
  position: relative;
  width: 100%;
}

.iphone-16-u38-17-pro-max-1 .nhp-tn-ng-nhp-1::placeholder,
.iphone-16-u38-17-pro-max-1 .nhp-mt-khu-1::placeholder {
  color: var(--onyx);
  opacity: 1;
}

.iphone-16-u38-17-pro-max-1 .frame-5-1::before {
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  background: linear-gradient(0deg, rgba(224, 42, 253, 1) 0%, rgba(255, 255, 255, 1) 41%, rgba(224, 42, 253, 1) 70%, rgba(45, 24, 58, 1) 100%);
  border-radius: 25.71px;
  content: '';
  inset: 0;
  mask-composite: exclude;
  padding: 1.99px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.iphone-16-u38-17-pro-max-1 .frame-5-1 {
  align-items: center;
  align-self: stretch;
  background-color: #07000c;
  border: none;
  border-radius: 25.71px;
  box-shadow: inset 0px 3.97px 3.97px #0f001c , 0px 3.97px 3.97px #00000040;
  display: flex;
  flex-direction: column;
  gap: 9.93px;
  height: 62.42px;
  justify-content: center;
  padding: 5.96px 21.84px 5.96px 9.55px;
  position: relative;
  width: 100%;
}

.iphone-16-u38-17-pro-max-1 .eye-toggle {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 27px;
  justify-content: center;
  margin-left: auto;
  position: relative;
  width: 27px;
}

.iphone-16-u38-17-pro-max-1 .eye-toggle svg {
  display: block;
  height: 100%;
  width: 100%;
}

.iphone-16-u38-17-pro-max-1 .image-39-1 {
  align-self: stretch;
  animation: cta-blink 1.2s ease-in-out infinite;
  aspect-ratio: 3.55;
  position: relative;
  width: 100%;
}

.iphone-16-u38-17-pro-max-1 .frame-2147224104-1 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 36.72px;
  justify-content: center;
  position: relative;
}

.iphone-16-u38-17-pro-max-1 .frame-214722410-1 {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 69.02px;
}

.iphone-16-u38-17-pro-max-1 .image-38-vectorized-3 {
  align-self: stretch;
  width: 100%;
}

.iphone-16-u38-17-pro-max-1 .bo-mt-tuyt-i-1 {
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  text-align: center;
  width: fit-content;
}

.iphone-16-u38-17-pro-max-1 .image-38-vectorized-4 {
  width: 69.02px;
}

.iphone-16-u38-17-pro-max-1 .vector-1 {
  height: 68.94%;
  left: 18.59%;
  position: absolute;
  top: 14.60%;
  width: 62.87%;
}

.iphone-16-u38-17-pro-max-1 .h-tr-247-1 {
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  text-align: center;
  width: fit-content;
}

.iphone-16-u38-17-pro-max-1 .subtract-1 {
  height: 76.55%;
  left: 27.04%;
  position: absolute;
  top: 11.73%;
  width: 45.92%;
}

.iphone-16-u38-17-pro-max-1 .np-rt-siu-tc-1 {
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  text-align: center;
  width: fit-content;
}

.iphone-16-u38-17-pro-max-1 .group-34-1-1 {
  aspect-ratio: 3.2;
  height: 129px;
  left: calc(50.00% - 206px);
  position: absolute;
  top: 184px;
  width: 413px;
}

.iphone-16-u38-17-pro-max-1 .image-38-vectorized {
  height: 69.02px;
  position: relative;
}
@media screen and (orientation: portrait) {
  .screen.index {
    display: none;
  }
  .screen.iphone-16-u38-17-pro-max-1 {
    display: block;
  }
}
@media screen and (orientation: landscape) {
  .screen.index {
    display: block;
  }
  .screen.iphone-16-u38-17-pro-max-1 {
    display: none;
  }
  .bg {
    display: block;
  }
}
@media screen and (min-width: 1025px) and (orientation: landscape) {
  html,
  body {
    overflow: hidden;
  }
}