/* screen - frame-2 */
body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
}
.frame-2 {
  background-color: #370000;
  min-height: 2585px;
  min-width: 1920px;
  position: relative;
  width: 100%;
}

.frame-2 .mask-group {
  height: 1075px;
  left: 0;
  position: absolute;
  top: 0;
  width: 1920px;
}

.frame-2 .mask-group-1 {
  height: 1844px;
  left: 0;
  position: absolute;
  top: 49px;
  width: 746px;
}

.frame-2 .mask-group-2 {
  height: 1741px;
  left: 1152px;
  position: absolute;
  top: 48px;
  width: 768px;
}

.frame-2 .frame-2147224111 {
  align-items: flex-start;
  background: linear-gradient(0deg, rgba(33, 8, 8, 1) 0%, rgba(145, 11, 2, 1) 100%);
  border: 1.33px solid;
  border-color: #ff0202;
  border-radius: 44.44px;
  box-shadow: 0px 3.56px 3.56px #380000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 421px;
  left: calc(50.00% - 375px);
  padding: 27px 67px 26px 65px;
  position: absolute;
  top: 436px;
  width: 751px;
}

.frame-2 .frame-2147224101 {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 34.3px;
  margin-bottom: -0.23px;
  position: relative;
  width: 618.8px;
}

.frame-2 .frame-8 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 21.2px;
  position: relative;
  width: 100%;
}

.frame-2 .frame {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--white);
  border: 1.7px solid;
  border-color: var(--red);
  border-radius: 39.03px;
  box-shadow: 0px 3.83px 6.5px -7.32px #000000;
  display: flex;
  flex-direction: column;
  gap: 8.13px;
  height: 74px;
  padding: 5.69px 14px 4.88px 7.62px;
  position: relative;
  width: 100%;
}

.frame-2 .frame-4 {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 12.2px;
  position: relative;
  width: 100%;
}

.frame-2 .image-25-vectorized {
  height: 62.09px;
  position: relative;
  width: 62.09px;
}

.frame-2 .vector {
  height: 87.88%;
  left: 6.06%;
  position: absolute;
  top: 6.06%;
  width: 87.88%;
}

.frame-2 .tn-ti-khon {
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.frame-2 .subtract {
  height: 89.06%;
  left: 14.02%;
  position: absolute;
  top: 5.86%;
  width: 71.96%;
}

.frame-2 .mt-khu {
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.frame-2 .image-27-vectorized {
  background-image: url(../img/subtract-1.svg);
  background-size: 100% 100%;
  height: 55px;
  left: calc(50.00% - 28px);
  position: relative;
  top: calc(50.00% - 28px);
  width: 55px;
}

.frame-2 .s-in-thoi {
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.frame-2 .frame-2147224099 {
  align-items: center;
  animation: zoomBtn 2s ease-in-out infinite;
  background: linear-gradient(90deg, rgba(255, 188, 0, 1) 0%, rgba(255, 255, 255, 1) 100%);
  border-radius: 39.81px;
  box-shadow: inset 0px 4px 4px #ffffff , 0px 6px 4px #00000040;
  display: inline-flex;
  gap: 12.25px;
  height: 69.82px;
  justify-content: center;
  padding: 19.6px 82.07px 18.37px 79.62px;
  position: relative;
}

.frame-2 .ng-k-ngay {
  color: var(--red);
  font-family: var(--font-family-roboto);
  font-size: 27.5px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.30px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.frame-2 .image-23 {
  aspect-ratio: 3;
  height: 261px;
  left: 567px;
  position: absolute;
  top: 164px;
  width: 782px;
}

.frame-2 .frame-2147224114 {
  align-items: center;
  background-color: var(--white);
  border: 1.3px solid;
  border-color: var(--red);
  border-radius: 21.41px;
  display: flex;
  flex-direction: column;
  gap: 3.24px;
  height: 111px;
  justify-content: center;
  left: calc(50.00% - 171px);
  padding: 14.27px 19.46px 13.95px 19.79px;
  position: absolute;
  top: 35px;
  width: 343px;
}

.frame-2 .frame-2147224112 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 12.33px;
  justify-content: center;
  position: relative;
}

.frame-2 .image-24 {
  aspect-ratio: 3;
  height: 68px;
  object-fit: cover;
  position: relative;
  width: 204.25px;
}

.frame-2 .rectangle-19 {
  background-color: var(--guardsman-red);
  height: 67.41px;
  position: relative;
  width: 2.47px;
}

.frame-2 .image-20 {
  aspect-ratio: 0.75;
  height: 68.4px;
  object-fit: cover;
  position: relative;
  width: 51.3px;
}

.frame-2 .frame-2147224119 {
  align-items: flex-end;
  display: inline-flex;
  gap: 41px;
  left: calc(50.00% - 501px);
  position: absolute;
  top: 928px;
}

.frame-2 .game-with-note {
  position: relative;
  width: 385.11px;
}

.frame-2 .game-with-note .game-cta-note-wrap {
  bottom: 100%;
  left: 0;
  margin: 0;
  padding-bottom: 12px;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 5;
}

.frame-2 .game-with-note .game-cta-note {
  color: #fff;
  display: block;
  font-family: var(--font-family-manrope, Inter, Roboto, sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.frame-2 .frame-2147224115 {
  background: linear-gradient(180deg, rgba(110, 0, 0, 1) 0%, rgba(195, 0, 0, 1) 100%);
  border: 1px solid;
  border-color: var(--red);
  border-radius: 31.38px;
  height: 768.44px;
  overflow: hidden;
  position: relative;
  width: 385.11px;
}

.frame-2 .frame-22 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 14.26px;
  left: 25px;
  position: absolute;
  top: 149px;
  width: 335px;
}

.frame-2 .frame-21 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4.64px;
  position: relative;
  width: 100%;
}

.frame-2 .frame-20 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.frame-2 .frame-18 {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 25.67px;
}

.frame-2 .im {
  align-items: center;
  align-self: stretch;
  display: flex;
  justify-content: center;
  letter-spacing: 0;
  line-height: 12.8px;
  margin-top: -0.24px;
  position: relative;
  text-align: center;
}

.frame-2 .number {
  align-items: center;
  align-self: stretch;
  display: flex;
  justify-content: center;
  letter-spacing: 0;
  line-height: 20.7px;
  position: relative;
  text-align: center;
}

.frame-2 .frame-19 {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 47.07px;
}

.frame-2 .thi-gian {
  align-items: center;
  align-self: stretch;
  display: flex;
  justify-content: center;
  letter-spacing: 0;
  line-height: 12.8px;
  margin-top: -0.24px;
  position: relative;
  text-align: center;
}

.frame-2 .x10s {
  align-items: center;
  align-self: stretch;
  display: flex;
  justify-content: center;
  letter-spacing: 0;
  line-height: 20.7px;
  position: relative;
  text-align: center;
}

.frame-2 .group-1 {
  background-color: #581a00;
  border-radius: 6.06px;
  height: 7.84px;
  position: relative;
  width: 330.2px;
}

.frame-2 .rectangle-7 {
  background-color: #febb15;
  border-radius: 6.06px;
  height: 8px;
  width: 272px;
}

.frame-2 .frame-13 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8.2px;
  position: relative;
  width: 100%;
}

.frame-2 .mask-group-3 {
  height: 482.46px;
  position: relative;
  width: 334.74px;
}

.frame-2 .frame-11 {
  align-self: stretch;
  background-color: #f9b23e;
  border-radius: 30.63px;
  height: 43.5px;
  position: relative;
  width: 100%;
}

.frame-2 .shoot-button-highlight {
  background-color: #ffe07394;
  border-radius: 9.64px;
  height: 12px;
  left: 8px;
  position: absolute;
  top: 6px;
  width: 319px;
}

.frame-2 .shoot-button-label {
  align-items: center;
  color: #101827;
  display: flex;
  font-family: var(--font-family-roboto);
  font-size: 20.4px;
  font-weight: 900;
  height: 56px;
  justify-content: center;
  left: -82px;
  letter-spacing: 0;
  line-height: 23.8px;
  position: absolute;
  text-align: center;
  top: -6px;
  width: 499px;
}

.frame-2 .chat-gpt-image-jul-1 {
  aspect-ratio: 2.52;
  height: 149px;
  left: 2px;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 375px;
}

.frame-2 .frame-2147224118 {
  height: 781px;
  position: relative;
  width: 576px;
}

.frame-2 .frame-2147224117 {
  background-color: var(--bright-red);
  border-radius: 30.07px;
  height: 769px;
  left: 0;
  position: absolute;
  top: 12px;
  width: 100%;
}

.frame-2 .rectangle-5 {
  background-color: var(--white);
  border: 4px solid;
  border-color: var(--bright-red);
  border-radius: 30.07px;
  height: 737px;
  left: 0;
  position: absolute;
  top: 32px;
  width: 576px;
}

.frame-2 .ti-ngay-1111 {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, rgba(232, 0, 0, 1) 0%, rgba(71, 0, 0, 1) 100%);
  background-clip: text;
  color: transparent;
  font-family: var(--font-family-roboto);
  font-size: 42.3px;
  font-weight: 900;
  left: 120px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-fill-color: transparent;
  top: 323px;
  white-space: nowrap;
}

.frame-2 .mask-group-4 {
  height: 244px;
  left: 98px;
  position: absolute;
  top: 89px;
  width: 379px;
}

.frame-2 .vt-ro-mi-nh-mn {
  color: transparent;
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-m);
  font-weight: 600;
  left: 22px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 385px;
  width: 532px;
}

.frame-2 .frame-2147224116 {
  align-items: center;
  background: linear-gradient(180deg, rgba(232, 0, 0, 1) 0%, rgba(71, 0, 0, 1) 100%);
  border-radius: 20px;
  display: flex;
  gap: 10px;
  height: 85px;
  justify-content: center;
  left: 64px;
  padding: 18px 27px 17px;
  position: absolute;
  top: 0;
  width: 450px;
}

.frame-2 .red88-chnh-hng {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: 42.3px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.frame-2 .frame-2147224136 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 13px;
  left: 296px;
  position: absolute;
  top: 1747px;
  width: 1341px;
}

.frame-2 .tha-h-cc-vi-tt {
  align-self: stretch;
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-l);
  font-weight: 900;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
  white-space: nowrap;
}

.frame-2 .rectangle-23 {
  background-color: var(--selective-yellow);
  border-radius: 35px;
  height: 9px;
  position: relative;
  width: 592px;
}

.frame-2 .frame-2147224138 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 13px;
  left: 296px;
  position: absolute;
  top: 2192px;
  width: 1341px;
}

.frame-2 .nhn-lc-trao-tay-v {
  align-self: stretch;
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-l);
  font-weight: 900;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  text-align: center;
}

.frame-2 .frame-2147224137 {
  align-items: center;
  background: linear-gradient(360deg, rgba(226, 0, 0, 1) 0%, rgba(125, 0, 0, 1) 100%);
  border-radius: 29px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 328px;
  justify-content: center;
  left: 290px;
  padding: 27px 36px 33px;
  position: absolute;
  top: 1840px;
  width: 1341px;
}

.frame-2 .frame-2147224149 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.slider-track {
  display: flex;
  align-items: center;
  height: 100%;
}

.slider-track.animating {
  animation: scrollLeft var(--duration, 8s) linear infinite;
}

@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--move-x)); }
}

.slider-track.paused {
  animation-play-state: paused;
}

@keyframes zoomBtn {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.slider-track img {
  width: calc((100% - 26.26px) / 3);
  flex-shrink: 0;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  margin-right: 13.13px;
}

.slider-track img:last-child {
  margin-right: 0;
}



.frame-2 .frame-214722413 {
  background-image: url(../img/mask-group-5@2x.webp);
  background-size: 100% 100%;
  height: 272.86px;
  position: relative;
  width: 414.32px;
}

.frame-2 .frame-2147224130 {
  align-items: center;
  background: linear-gradient(180deg, rgba(232, 0, 0, 1) 0%, rgba(71, 0, 0, 1) 100%);
  border-radius: 0px 0px 23.57px 23.57px;
  display: flex;
  gap: 9.43px;
  height: 46px;
  justify-content: center;
  left: 79px;
  padding: 9.43px 16.03px 10.37px;
  position: absolute;
  top: 1px;
  width: 256px;
}

.frame-2 .gii-asean-cup-2026 {
  letter-spacing: 0;
  line-height: normal;
  margin-left: -0.90px;
  margin-right: -0.90px;
  margin-top: -1.03px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.frame-2 .frame-2147224148 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6.33px;
  left: 53px;
  position: absolute;
  top: 83px;
  width: 309px;
}

.frame-2 .frame-2147224124 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 27.86px;
  position: relative;
  width: 100%;
}

.frame-2 .frame-214722412 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 9.95px;
  padding: 9.95px;
  position: relative;
}

.frame-2 .frame-2147224122 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 7.96px;
  position: relative;
  width: 95.72px;
}

.frame-2 .ellipse {
  height: 71.22px;
  object-fit: cover;
  position: relative;
  width: 70.06px;
}

.frame-2 .timor-leste {
  letter-spacing: 0;
  line-height: normal;
  margin-left: -15.74px;
  margin-right: -15.74px;
  position: relative;
  text-align: center;
  width: 127.2px;
}

.frame-2 .frame-214722412-1 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 9.95px;
  margin-right: -0.63px;
  padding: 9.95px;
  position: relative;
}

.frame-2 .frame-2147224120 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 7.96px;
  position: relative;
  width: 88.81px;
}

.frame-2 .vit-nam {
  letter-spacing: 0;
  line-height: normal;
  margin-left: -5.17px;
  margin-right: -5.17px;
  position: relative;
  text-align: center;
  width: 99.16px;
}

.frame-2 .frame-2147224128 {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 9.75px;
  position: relative;
  width: 197.35px;
}

.frame-2 .frame-2147224127 {
  align-items: center;
  align-self: stretch;
  background: linear-gradient(90deg, rgba(249, 233, 96, 1) 0%, rgba(255, 186, 32, 1) 100%);
  border-radius: 19.51px;
  display: flex;
  gap: 9.75px;
  height: 39.34px;
  justify-content: center;
  padding: 9.75px 60.47px 9.75px 59.5px;
  position: relative;
  width: 100%;
}

.frame-2 .cc-ngay {
  letter-spacing: 0;
  line-height: normal;
  margin-left: -0.81px;
  margin-right: -0.81px;
  margin-top: -0.56px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.frame-2 .date {
  left: calc(50.00% - 61px);
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 56px;
  white-space: nowrap;
}

.frame-2 .ellipse-4 {
  height: 71.22px;
  position: relative;
  width: 70.06px;
}

.frame-2 .place {
  letter-spacing: 0;
  line-height: normal;
  margin-left: -15.74px;
  margin-right: -15.74px;
  position: relative;
  text-align: center;
  width: 127.2px;
}

.frame-2 .date-1 {
  left: calc(50.00% - 61px);
}

.frame-2 .date-2 {
  left: calc(50.00% - 62px);
}

.frame-2 .image-33 {
  aspect-ratio: 1.78;
  height: 246px;
  left: 290px;
  object-fit: cover;
  position: absolute;
  top: 2285px;
  width: 437px;
}

.frame-2 .image-34 {
  aspect-ratio: 1.78;
  height: 246px;
  left: 742px;
  object-fit: cover;
  position: absolute;
  top: 2285px;
  width: 437px;
}

.frame-2 .image-35 {
  aspect-ratio: 1.78;
  height: 246px;
  left: 1194px;
  object-fit: cover;
  position: absolute;
  top: 2285px;
  width: 437px;
}

.frame-2 .date-3 {
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 56px;
  white-space: nowrap;
}

.frame-2 .place-3 {
  letter-spacing: 0;
  line-height: normal;
  margin-left: -15.74px;
  margin-right: -15.74px;
  position: relative;
  text-align: center;
  width: 127.2px;
}

.frame-2 .vs-4 {
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}
/* screen - index */

.index {
  background-color: #370000;
  min-height: 3166px;
  min-width: 440px;
  position: relative;
  width: 100%;
  display: none;
}

.index .frame-2147224098 {
  background-color: var(--white);
  display: none;
  height: 51px;
  left: calc(50.00% - 220px);
  position: absolute;
  top: 0;
  width: 440px;
}

.index .text-1 {
  color: var(--black);
  font-family: var(--font-family-inter);
  font-size: 18px;
  font-weight: 600;
  height: 22px;
  letter-spacing: 0;
  line-height: normal;
  margin-left: 51px;
  margin-top: 15px;
  text-align: center;
  width: 53px;
}

.index .signal_strength_bars {
  height: 24px;
  margin-left: 212px;
  margin-top: 13px;
  width: 24px;
}

.index .ios-wifi-2-1 {
  height: 23px;
  margin-left: 5px;
  margin-top: 14px;
  position: relative;
  width: 23px;
}

.index .vector-1 {
  height: 25.42%;
  left: 6.24%;
  position: absolute;
  top: 18.75%;
  width: 87.56%;
}

.index .vector-2 {
  height: 40.00%;
  left: 21.64%;
  position: absolute;
  top: 41.25%;
  width: 56.69%;
}

.index .layer_1 {
  height: 15px;
  margin-left: 7px;
  margin-top: 18px;
  position: relative;
  width: 31px;
}

.index .vector-3 {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 90.13%;
}

.index .vector-4 {
  height: 31.64%;
  left: 92.58%;
  position: absolute;
  top: 34.25%;
  width: 7.42%;
}

.index .vector-5 {
  height: 76.43%;
  left: 6.08%;
  position: absolute;
  top: 11.79%;
  width: 77.96%;
}

.index .mask-group-5 {
  height: 498px;
  left: 0;
  position: absolute;
  top: 0;
  width: 440px;
}

.index .frame-2147224114-1 {
  align-items: center;
  background-color: var(--white);
  border: 1.04px solid;
  border-color: var(--red);
  border-radius: 17.16px;
  display: flex;
  flex-direction: column;
  gap: 2.6px;
  height: 89px;
  justify-content: center;
  left: calc(50.00% - 138px);
  padding: 11.44px 15.6px 11.18px 15.86px;
  position: absolute;
  top: 20px;
  width: 275px;
}

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

.index .image-24-1 {
  aspect-ratio: 3;
  height: 54.52px;
  object-fit: cover;
  position: relative;
  width: 163.77px;
}

.index .rectangle-19-1 {
  background-color: var(--guardsman-red);
  height: 54.05px;
  position: relative;
  width: 1.98px;
}

.index .image-20-1 {
  aspect-ratio: 0.75;
  height: 54.84px;
  object-fit: cover;
  position: relative;
  width: 41.13px;
}

.index .frame-2147224111-1 {
  align-items: center;
  background: linear-gradient(0deg, rgba(33, 8, 8, 1) 0%, rgba(145, 11, 2, 1) 100%);
  border: 1.02px solid;
  border-color: #ff0202;
  border-radius: 34.09px;
  box-shadow: 0px 2.73px 2.73px #380000;
  display: flex;
  flex-direction: column;
  gap: 7.67px;
  height: 323px;
  justify-content: center;
  left: calc(50.00% - 196px);
  padding: 20.71px 51.4px 19.95px 49.86px;
  position: absolute;
  top: 259px;
  width: 392px;
}

.index .frame-2147224101-1 {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 26.31px;
  margin-bottom: -0.19px;
  margin-left: -91.98px;
  margin-right: -91.98px;
  margin-top: -0.19px;
  position: relative;
  width: 474.69px;
}

.index .frame-8-1 {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16.27px;
  position: relative;
  width: 322.96px;
}

.index .frame-1 {
  align-items: flex-start;
  align-self: stretch;
  background-color: var(--white);
  border: 1.3px solid;
  border-color: var(--red);
  border-radius: 29.94px;
  box-shadow: 0px 2.93px 4.99px -5.61px #000000;
  display: flex;
  flex-direction: column;
  gap: 6.24px;
  height: 56.76px;
  padding: 4.37px 10px 3.74px 5.85px;
  position: relative;
  width: 100%;
}

.index .frame-4-1 {
  margin-right: 0;
}

.index .image-25-vectorized-1 {
  height: 47.63px;
  position: relative;
  width: 47.63px;
}

.index .vector-6 {
  height: 87.88%;
  left: 6.06%;
  position: absolute;
  top: 6.06%;
  width: 87.88%;
}

.index .tn-ti-khon-1 {
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index .frame-4-2 {
  margin-right: 0;
}

.index .subtract-1 {
  height: 89.06%;
  left: 14.02%;
  position: absolute;
  top: 5.86%;
  width: 71.96%;
}

.index .mt-khu-1 {
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index .frame-4-3 {
  margin-right: 0;
}

.index .image-27-vectorized-1 {
  background-image: url(../img/subtract-3.svg);
  background-size: 100% 100%;
  height: 42px;
  left: calc(50.00% - 21px);
  position: relative;
  top: calc(50.00% - 21px);
  width: 42px;
}

.index .s-in-thoi-1 {
  letter-spacing: 0;
  line-height: normal;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index .frame-2147224099-1 {
  align-items: center;
  animation: zoomBtn 2s ease-in-out infinite;
  background: linear-gradient(90deg, rgba(255, 188, 0, 1) 0%, rgba(255, 255, 255, 1) 100%);
  border-radius: 30.54px;
  box-shadow: inset 0px 3.07px 3.07px #ffffff , 0px 4.6px 3.07px #00000040;
  display: inline-flex;
  gap: 9.4px;
  height: 53.56px;
  justify-content: center;
  padding: 15.03px 62.95px 14.09px 61.07px;
  position: relative;
}

.index .ng-k-ngay-1 {
  color: var(--red);
  font-family: var(--font-family-roboto);
  font-size: 21.1px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.22px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index .frame-2147224139 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 7.33px;
  left: calc(50.00% - 191px);
  position: absolute;
  top: 122px;
  width: 382px;
}

.index .image-23-1 {
  align-self: stretch;
  aspect-ratio: 3;
  position: relative;
  width: 100%;
}

.index .game-with-note-mobile {
  left: calc(50.00% - 193px);
  position: absolute;
  top: 620px;
  width: 385px;
  z-index: 5;
}

.index .game-with-note-mobile .game-cta-note-wrap {
  bottom: 100%;
  left: 0;
  margin: 0;
  padding-bottom: 10px;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 5;
}

.index .game-with-note-mobile .game-cta-note {
  color: #fff;
  display: block;
  font-family: var(--font-family-manrope, Inter, Roboto, sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.index .frame-2147224115-1 {
  background: linear-gradient(180deg, rgba(110, 0, 0, 1) 0%, rgba(195, 0, 0, 1) 100%);
  border: 1px solid;
  border-color: var(--red);
  border-radius: 31.38px;
  display: flex;
  flex-direction: column;
  gap: 0.3px;
  height: 768px;
  overflow: hidden;
  position: relative;
  width: 385px;
}
.frame-2 .frame-2147224115 .dig1-asean-game {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

.index .frame-2147224115-1 .dig1-asean-game {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 2;
}

.index .chat-gpt-image-jul-1-1 {
  aspect-ratio: 2.52;
  height: 148.79px;
  margin-left: 2px;
  object-fit: cover;
  width: 375px;
}

.index .frame-22-1 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 14.26px;
  height: 594.91px;
  margin-left: 25.0px;
  position: relative;
  width: 334.83px;
}

.index .frame-21-1 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4.64px;
  position: relative;
  width: 100%;
}

.index .frame-20-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.index .frame-18-1 {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 25.67px;
}

.index .im-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  justify-content: center;
  letter-spacing: 0;
  line-height: 12.8px;
  margin-top: -0.24px;
  position: relative;
  text-align: center;
}

.index .number-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  justify-content: center;
  letter-spacing: 0;
  line-height: 20.7px;
  position: relative;
  text-align: center;
}

.index .frame-19-1 {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 47.07px;
}

.index .thi-gian-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  justify-content: center;
  letter-spacing: 0;
  line-height: 12.8px;
  margin-top: -0.24px;
  position: relative;
  text-align: center;
}

.index .x10s-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  justify-content: center;
  letter-spacing: 0;
  line-height: 20.7px;
  position: relative;
  text-align: center;
}

.index .group-1-1 {
  background-color: #581a00;
  border-radius: 6.06px;
  height: 7.84px;
  position: relative;
  width: 330.2px;
}

.index .rectangle-7-1 {
  background-color: #febb15;
  border-radius: 6.06px;
  height: 8px;
  width: 272px;
}

.index .frame-13-1 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8.2px;
  position: relative;
  width: 100%;
}

.index .mask-group-6 {
  height: 482.46px;
  position: relative;
  width: 334.74px;
}

.index .frame-11-1 {
  align-self: stretch;
  background-color: #f9b23e;
  border-radius: 30.63px;
  height: 43.5px;
  position: relative;
  width: 100%;
}

.index .shoot-button-highlight-1 {
  background-color: #ffe07394;
  border-radius: 9.64px;
  height: 12px;
  left: 8px;
  position: absolute;
  top: 6px;
  width: 319px;
}

.index .shoot-button-label-1 {
  align-items: center;
  color: #101827;
  display: flex;
  font-family: var(--font-family-roboto);
  font-size: 20.4px;
  font-weight: 900;
  height: 56px;
  justify-content: center;
  left: -82px;
  letter-spacing: 0;
  line-height: 23.8px;
  position: absolute;
  text-align: center;
  top: -6px;
  width: 499px;
}

.index .frame-2147224118-1 {
  height: 526px;
  left: 24px;
  position: absolute;
  top: 1406px;
  width: 388px;
}

.index .frame-2147224117-1 {
  background-color: var(--bright-red);
  border-radius: 20.25px;
  height: 518px;
  left: 1px;
  position: absolute;
  top: 8px;
  width: 100%;
}

.index .rectangle-5-1 {
  background-color: var(--white);
  border: 2.69px solid;
  border-color: var(--bright-red);
  border-radius: 20.25px;
  height: 496px;
  left: 1px;
  position: absolute;
  top: 22px;
  width: 388px;
}

.index .ti-ngay-1111-1 {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, rgba(232, 0, 0, 1) 0%, rgba(71, 0, 0, 1) 100%);
  background-clip: text;
  color: transparent;
  font-family: var(--font-family-roboto);
  font-size: 28.5px;
  font-weight: 900;
  left: 81px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-fill-color: transparent;
  top: 218px;
  white-space: nowrap;
}

.index .mask-group-7 {
  height: 164px;
  left: 66px;
  position: absolute;
  top: 60px;
  width: 255px;
}

.index .vt-ro-mi-nh-mn-1 {
  color: transparent;
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xxs);
  font-weight: 600;
  left: 15px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 259px;
  width: 358px;
}

.index .frame-2147224116-1 {
  align-items: center;
  background: linear-gradient(180deg, rgba(232, 0, 0, 1) 0%, rgba(71, 0, 0, 1) 100%);
  border-radius: 13.47px;
  display: flex;
  gap: 6.74px;
  height: 57px;
  justify-content: center;
  left: 43px;
  padding: 12.12px 18.19px 11.45px;
  position: absolute;
  top: 0;
  width: 303px;
}

.index .red88-chnh-hng-1 {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: 28.5px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: normal;
  margin-left: -0.12px;
  margin-right: -0.12px;
  margin-top: -0.33px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.index .frame-2147224136-1 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6.68px;
  left: 8px;
  position: absolute;
  top: 1956px;
  width: 424px;
}

.index .tha-h-cc-vi-tt-1 {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xxxs);
  font-weight: 900;
  letter-spacing: 0;
  line-height: normal;
  margin-left: -7.71px;
  margin-right: -7.71px;
  margin-top: -0.51px;
  position: relative;
  text-align: center;
  width: 439.42px;
}

.index .rectangle-23-1 {
  background-color: var(--selective-yellow);
  border-radius: 17.99px;
  height: 4.63px;
  position: relative;
  width: 304.25px;
}

.index .frame-2147224143 {
  display: flex;
  height: 783px;
  justify-content: center;
  left: calc(50.00% - 194px);
  position: absolute;
  top: 2032px;
  width: 388px;
}

.index .frame-2147224137-1 {
  background: linear-gradient(360deg, rgba(226, 0, 0, 1) 0%, rgba(125, 0, 0, 1) 100%);
  border-radius: 27.71px;
  height: 783px;
  position: relative;
  width: 388px;
}

.index .rectangle-31 {
  background-color: #700000;
  border-radius: 16.25px;
  height: 677px;
  left: 376px;
  position: absolute;
  top: 21px;
  width: 8px;
}

.index .frame-2147224150::-webkit-scrollbar {
  display: none;
  width: 0;
}

.index .frame-2147224150 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8.65px;
  height: 745px;
  left: calc(50.00% - 171px);
  overflow: hidden;
  overflow-y: scroll;
  position: absolute;
  top: 21px;
  width: 342px;
}

.index .slider-track-mobile {
  display: flex;
  flex-direction: column;
  gap: 8.65px;
  width: 100%;
}

.index .slider-track-mobile img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  flex-shrink: 0;
}



.index .frame-214722413-1 {
  align-self: stretch;
  background-image: url(../img/mask-group-12@2x.webp);
  background-size: 100% 100%;
  height: 224.76px;
  position: relative;
  width: 100%;
}

.index .frame-2147224130-1 {
  top: 0;
}

.index .gii-asean-cup-2026-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-left: -0.66px;
  margin-right: -0.66px;
  margin-top: -0.64px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index .frame-2147224148-1 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 5.22px;
  left: 43px;
  position: absolute;
  top: 69px;
  width: 255px;
}

.index .frame-2147224124-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 22.95px;
  position: relative;
  width: 100%;
}

.index .frame-2147224122-1 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6.56px;
  position: relative;
  width: 78.85px;
}

.index .ellipse-1 {
  height: 58.67px;
  object-fit: cover;
  position: relative;
  width: 57.71px;
}

.index .timor-leste-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-left: -12.97px;
  margin-right: -12.97px;
  position: relative;
  text-align: center;
  width: 104.78px;
}

.index .frame-214722412-3 {
  margin-right: -0.81px;
}

.index .frame-2147224120-1 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6.56px;
  position: relative;
  width: 73.16px;
}

.index .vit-nam-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-left: -4.26px;
  margin-right: -4.26px;
  position: relative;
  text-align: center;
  width: 81.68px;
}

.index .frame-2147224128-1 {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8.03px;
  position: relative;
  width: 162.56px;
}

.index .frame-2147224127-1 {
  align-items: center;
  align-self: stretch;
  background: linear-gradient(90deg, rgba(249, 233, 96, 1) 0%, rgba(255, 186, 32, 1) 100%);
  border-radius: 16.07px;
  display: flex;
  gap: 8.03px;
  height: 32.4px;
  justify-content: center;
  padding: 8.03px 49.81px 8.03px 49.01px;
  position: relative;
  width: 100%;
}

.index .cc-ngay-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-left: -0.63px;
  margin-right: -0.63px;
  margin-top: -0.64px;
  position: relative;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.index .date-3 {
  left: calc(50.00% - 50px);
}

.index .frame-2147224130-2 {
  top: 1px;
}

.index .ellipse-4-1 {
  height: 58.67px;
  position: relative;
  width: 57.71px;
}

.index .date-4 {
  left: calc(50.00% - 50px);
  text-align: center;
}

.index .frame-2147224138-1 {
  align-self: stretch;
  background-image: url(../img/mask-group-14@2x.webp);
  background-size: 100% 100%;
  height: 224.76px;
  position: relative;
  width: 100%;
}

.index .date-5 {
  left: calc(50.00% - 51px);
  text-align: center;
}

.index .frame-2147224147 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 19px;
  left: 8px;
  position: absolute;
  top: 2843px;
  width: 424px;
}

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

.index .nhn-lc-trao-tay-v-1 {
  color: var(--white);
  font-family: var(--font-family-roboto);
  font-size: var(--font-size-xxxs);
  font-weight: 900;
  letter-spacing: 0;
  line-height: normal;
  margin-left: -7.71px;
  margin-right: -7.71px;
  margin-top: -0.51px;
  position: relative;
  text-align: center;
  width: 439.42px;
}

.index .frame-2147224145 {
  overflow: hidden;
  position: relative;
  width: 388px;
}

.slider-container-mobile2 {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.slider-track-mobile2 {
  display: flex;
  align-items: center;
}

.slider-track-mobile2.animating {
  animation: scrollLeftMobile2 var(--duration, 15s) linear infinite;
}

@keyframes scrollLeftMobile2 {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--move-x)); }
}

.slider-track-mobile2.paused {
  animation-play-state: paused;
}

.slider-track-mobile2 img {
  width: 370.59px;
  flex-shrink: 0;
  height: 208.57px;
  object-fit: cover;
  border-radius: 12px;
  margin-right: 4.78px;
}

.slider-track-mobile2 img:last-child {
  margin-right: 0;
}

.index .date {
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 47px;
  white-space: nowrap;
}

.index .frame-214722412 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8.2px;
  padding: 8.2px;
  position: relative;
}

.index .frame-2147224130 {
  align-items: center;
  background: linear-gradient(180deg, rgba(232, 0, 0, 1) 0%, rgba(71, 0, 0, 1) 100%);
  border-radius: 0px 0px 19.42px 19.42px;
  display: flex;
  gap: 7.77px;
  height: 38px;
  justify-content: center;
  left: 65px;
  padding: 7.77px 13.2px 8.54px;
  position: absolute;
  width: 211px;
}

.index .frame-4 {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 9.36px;
  position: relative;
  width: 100%;
}

.index .place {
  letter-spacing: 0;
  line-height: normal;
  margin-left: -12.97px;
  margin-right: -12.97px;
  position: relative;
  text-align: center;
  width: 104.78px;
}
/* Login form input fields */
.frame-2 .frame input,
.index .frame-1 input {
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  color: #370000;
  font-family: inherit;
  font-size: inherit;
  caret-color: #370000;
  flex: 1;
  min-width: 0;
  width: auto;
  height: auto;
}
.frame-2 .frame input {
  font-size: 29.4px;
  font-weight: 400;
  opacity: 0.7;
}
.index .frame-1 input {
  font-size: 22.6px;
  font-weight: 400;
  opacity: 0.7;
}
.frame-2 .frame input::placeholder,
.index .frame-1 input::placeholder {
  color: #999;
  opacity: 1;
}

/* Eye toggle button */
.frame-2 .eye-toggle-pc {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  width: 28.54px;
  height: 28.54px;
}
.index .eye-toggle-mb {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  width: 19.23px;
  height: 19.23px;
}
.frame-2 .eye-toggle-pc svg,
.index .eye-toggle-mb svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media screen and (orientation: portrait) {
  .screen.PC { 
    display: none;
   }
  .screen.mobile { 
    display: block;
   }
}
@media screen and (orientation: landscape) {
  .screen.PC { 
    display: block;
   }
  .screen.mobile { 
    display: none;
   }
}