@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.button {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: filter 0.3s ease;
  border: none;
  background-color: transparent;
}
.button:hover {
  filter: brightness(1.2);
  cursor: pointer;
}
.button.blank-button-big {
  display: inline-block;
  width: 19.05vw;
  height: 5.7vw;
  background-image: url("../images/btn-bg-blank-big.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 2.073vw;
  color: #3448a9;
  font-family: "svn-agency-fb-bold";
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  font-weight: bold;
}
@media (max-width: 768px) {
  .button.blank-button-big {
    width: 33.203125vw;
    height: 9.765625vw;
    font-size: 3.984375vw;
  }
}
.button.super-blank-button-big {
  display: inline-block;
  width: 23.8vw;
  height: 7.05vw;
  background-image: url("../images/super-big-btn.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 2.55vw;
  color: #3448a9;
  font-family: "svn-agency-fb-bold";
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  font-weight: bold;
}
@media (max-width: 768px) {
  .button.super-blank-button-big {
    width: 61.9791666667vw;
    height: 18.359375vw;
    font-size: 6.640625vw;
  }
}
.button.blank-button {
  display: inline-block;
  width: 12.7vw;
  height: 3.8vw;
  background-image: url("../images/btn-bg-blank.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 1.53vw;
  color: #3448a9;
  font-family: "svn-agency-fb-bold";
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  font-weight: bold;
}
@media (max-width: 768px) {
  .button.blank-button {
    width: 33.203125vw;
    height: 9.765625vw;
    font-size: 3.984375vw;
  }
}

.card {
  position: relative;
  width: 13.05vw;
  height: 18.9vw;
  background-image: url(../images/card-background.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
}
.card.card-short {
  background-image: url(../images/card-background-short.png);
  width: 12.15vw;
  height: 18.1vw;
}
.card.card-short .top-user-image {
  margin-top: 4.1vw;
  width: 9.1vw;
  height: 9.1vw;
}
.card.card-short .card-footer-name {
  margin-top: 1.85vw;
  font-size: 1.779vw;
}
.card .top-user-image {
  margin-top: 4.1vw;
  width: 8.9vw;
  height: 8.9vw;
  border: 0.1vw solid #fff;
}
.card .top-user-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card.top-user-1 {
  display: flex;
  justify-content: center;
}
.card.top-user-1 .top-user-image {
  margin-top: 3vw;
  width: 8.9vw;
  height: 8.9vw;
  border: 0.1vw solid #fff;
}
.card.top-user-1 .number {
  position: absolute;
  top: 1.45vw;
  right: 1.4vw;
  width: 1.75vw;
  height: 4.2vw;
  color: #fff;
  background-image: url(../images/number-1.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card .card-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6.6vw;
  text-align: center;
}
.card .card-footer .card-footer-name {
  font-family: "svn-agency-fb-bold";
  font-size: 1.779vw;
  color: #ffd049;
  text-align: center;
  line-height: 1.2;
  height: 2.3vw;
  max-width: 75%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card .card-footer .card-footer-number {
  margin-top: 0.4vw;
  font-family: "svn-agency-fb-black";
  font-size: 1.5855vw;
  color: #ffffff;
  text-align: center;
  line-height: 1.5855vw;
}
.card .card-footer .card-footer-number .con-mat::after {
  right: -1.7vw;
  background-size: 1.25vw 0.65vw;
}

.con-mat {
  position: relative;
}
.con-mat::after {
  content: "";
  display: block;
  top: 0;
  width: 1.2vw;
  height: 100%;
  position: absolute;
  right: -55%;
  background-image: url(../images/con-mat-thay-ghet.png);
  background-size: 1.45vw 0.75vw;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .card {
    position: relative;
    width: 33.984375vw;
    height: 49.21875vw;
  }
  .card.card-short {
    background-image: url(../images/card-background-short-mb.png);
    width: 31.640625vw;
    height: 47.1354166667vw;
  }
  .card.card-short .top-user-image {
    margin-top: 10.6770833333vw;
    width: 23.6979166667vw;
    height: 23.6979166667vw;
  }
  .card.card-short .card-footer-name {
    margin-top: 4.8177083333vw;
    font-size: 4.6328125vw;
  }
  .card .card-footer {
    height: 17.1875vw;
  }
  .card .card-footer .card-footer-name {
    font-size: 4.6328125vw;
    line-height: 1.2;
    height: 6vw;
    max-width: 75%;
  }
  .card .card-footer .card-footer-number {
    margin-top: 0vw;
    font-size: 4.12890625vw;
    line-height: 4.12890625vw;
  }
  .card .card-footer .card-footer-number .con-mat::after {
    right: -4.8vw;
    background-size: cover;
    width: 3.4vw;
    height: 1.9vw;
    top: 1.6vw;
  }
}
@font-face {
  font-family: "svn-agency-fb-bold";
  src: url("/font/GS3 Agency FB Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "svn-agency-fb-black";
  src: url("/font/GS3 Agency FB Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gs3-antarctica-beta-thin";
  src: url("/font/GS3 ANTARCTICA BETA THIN.TTF") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gs3-antarctica-beta-extralight";
  src: url("/font/GS3 ANTARCTICA BETA EXTRALIGHT.TTF") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gs3-antarctica-beta-light";
  src: url("/font/GS3 ANTARCTICA BETA LIGHT.TTF") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gs3-antarctica-beta-regular";
  src: url("/font/GS3 ANTARCTICA BETA REGULAR.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gs3-antarctica-beta-medium";
  src: url("/font/GS3 ANTARCTICA BETA MEDIUM.TTF") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gs3-antarctica-beta-semibold";
  src: url("/font/GS3 ANTARCTICA BETA SEMIBOLD.TTF") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gs3-antarctica-beta-bold";
  src: url("/font/GS3 ANTARCTICA BETA BOLD.TTF") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gs3-antarctica-beta-extrabold";
  src: url("/font/GS3 ANTARCTICA BETA EXTRABOLD.TTF") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gs3-antarctica-beta-black";
  src: url("/font/GS3 ANTARCTICA BETA BLACK.TTF") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gs3-antarctica-beta-extrablack";
  src: url("/font/GS3 ANTARCTICA BETA EXTRABLACK.TTF") format("truetype");
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gs3-agency-fb-black-otf";
  src: url("/font/GS3 AGENCY FB BLACK.OTF") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gs3-agency-fb-bold-otf";
  src: url("/font/GS3 AGENCY FB BOLD.OTF") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "gs3-agency-fb-regular-otf";
  src: url("/font/GS3 AGENCY FB REGULAR.OTF") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.svn-agency-fb-bold {
  font-family: "svn-agency-fb-bold", sans-serif;
}

.svn-agency-fb-black {
  font-family: "svn-agency-fb-black", sans-serif;
}

.gs3-antarctica-beta-thin {
  font-family: "gs3-antarctica-beta-thin", sans-serif;
}

.gs3-antarctica-beta-extralight {
  font-family: "gs3-antarctica-beta-extralight", sans-serif;
}

.gs3-antarctica-beta-light {
  font-family: "gs3-antarctica-beta-light", sans-serif;
}

.gs3-antarctica-beta-regular {
  font-family: "gs3-antarctica-beta-regular", sans-serif;
}

.gs3-antarctica-beta-medium {
  font-family: "gs3-antarctica-beta-medium", sans-serif;
}

.gs3-antarctica-beta-semibold {
  font-family: "gs3-antarctica-beta-semibold", sans-serif;
}

.gs3-antarctica-beta-bold {
  font-family: "gs3-antarctica-beta-bold", sans-serif;
}

.gs3-antarctica-beta-extrabold {
  font-family: "gs3-antarctica-beta-extrabold", sans-serif;
}

.gs3-antarctica-beta-black {
  font-family: "gs3-antarctica-beta-black", sans-serif;
}

.gs3-antarctica-beta-extrablack {
  font-family: "gs3-antarctica-beta-extrablack", sans-serif;
}

.nav-fake {
  width: 100vw;
  height: 1.75vw;
  z-index: 1;
}

.nav-fake-full {
  width: 100vw;
  height: 5vw;
  z-index: 1;
}

@media (max-width: 768px) {
  .nav-fake-full {
    height: 13.0208333333vw;
  }
}
.navbar {
  position: fixed;
  width: 100vw;
  min-height: 5vw;
  height: auto;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  box-sizing: border-box;
}
.navbar .navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navbar .navbar-menu {
  flex: 1;
}
.navbar .navbar-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5vw;
}
.navbar .navbar-menu ul li a {
  color: white;
  text-decoration: none;
  font-size: 1.55vw;
  font-family: "svn-agency-fb-black";
  text-transform: uppercase;
}
.navbar .navbar-menu ul li a.active {
  color: #ffd049;
}
.navbar .tiktok-btn-wrapper {
  position: absolute;
  right: 0.5vw;
  height: 100%;
  padding-top: 0.55vw;
  right: 7.5vw;
}
.navbar .tiktok-btn-wrapper .tiktok-btn {
  display: block;
  width: 12.05vw;
  height: 3.35vw;
  background-image: url(../images/tiktok-btn.png);
  background-size: cover;
}
.navbar .tiktok-btn-wrapper .home-btn, .navbar .tiktok-btn-wrapper .burger-btn {
  display: none;
}
.navbar .nopbai-btn {
  position: absolute;
  left: 2.9vw;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 12.05vw;
  height: 3.35vw;
  background-image: url(../images/nopbai-btn.png);
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
}
.navbar .nopbai-btn:hover {
  cursor: pointer;
  scale: 1.05;
}
.navbar .avatar-wrapper {
  position: absolute;
  right: 3.35vw;
  top: 1vw;
  width: 3.1vw;
  height: 3.1vw;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  border: 0.15vw solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.navbar .avatar-wrapper:hover {
  scale: 1.05;
  transition: all 0.3s ease;
}
.navbar .avatar-wrapper img,
.navbar .avatar-wrapper .user-avatar-initial {
  width: 100%;
  height: 100%;
}
.navbar .avatar-wrapper img {
  object-fit: cover;
}
.navbar .avatar-wrapper .user-avatar-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6841a5;
  color: #ffd049;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.4vw;
  line-height: 1;
  user-select: none;
}
.navbar .profile-wrapper {
  position: absolute;
  right: 2.15vw;
  top: 4.25vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url(../images/profile-bg-2.png) no-repeat center center;
  background-size: cover;
  width: 10.6vw;
  height: 14.9vw;
  gap: 0.75vw;
  padding-top: 1.6vw;
}
.navbar .profile-wrapper .profile-item {
  height: 1.8vw;
  width: 8.1vw;
  font-size: 1.293vw;
  font-family: "svn-agency-fb-black";
  color: #342f86;
  text-align: center;
  background: white;
  border: 0.05vw solid #342f86;
  transition: all 0.3s ease;
}
.navbar .profile-wrapper .profile-item:hover {
  cursor: pointer;
  background: #784dd1;
  color: #ffd049;
}

.nav-link.active {
  color: #ffd049 !important;
}

.nav-bell {
  position: absolute;
  right: 7.5vw;
  top: 1.15vw;
  width: 2.7vw;
  height: 2.7vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
}
.nav-bell:hover {
  color: #ffd049;
  scale: 1.05;
}
.nav-bell .nav-bell__icon {
  display: inline-flex;
  width: 100%;
  height: 100%;
}
.nav-bell .nav-bell__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0.05vw 0.1vw rgba(0, 0, 0, 0.35));
}
.nav-bell .nav-bell__badge {
  position: absolute;
  top: -0.3vw;
  right: -0.4vw;
  min-width: 1.2vw;
  height: 1.2vw;
  padding: 0 0.25vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8253b;
  color: #fff;
  border-radius: 0.6vw;
  border: 0.1vw solid #000;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-size: 0.8vw;
  line-height: 1;
  white-space: nowrap;
}
.nav-bell .nav-bell__badge[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .nav-bell {
    position: relative;
    right: auto;
    top: auto;
    width: 7.03125vw;
    height: 7.03125vw;
    flex-shrink: 0;
    margin-top: 1.3671875vw;
    margin-right: 2.34375vw;
  }
  .nav-bell .nav-bell__icon svg {
    filter: drop-shadow(0 0.1302083333vw 0.2604166667vw rgba(0, 0, 0, 0.35));
  }
  .nav-bell .nav-bell__badge {
    top: -0.78125vw;
    right: -1.0416666667vw;
    min-width: 3.125vw;
    height: 3.125vw;
    padding: 0 0.6510416667vw;
    border-radius: 1.5625vw;
    border: 0.2604166667vw solid #000;
    font-size: 2.0833333333vw;
  }
}
@keyframes nav-sinh-nhat-gift-wobble {
  0%, 100% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-11deg);
  }
  30% {
    transform: rotate(9deg);
  }
  45% {
    transform: rotate(-7deg);
  }
  60% {
    transform: rotate(6deg);
  }
  75% {
    transform: rotate(-4deg);
  }
}
.nav-link--sinh-nhat-gift {
  display: inline-flex;
  align-items: center;
  gap: 0.4vw;
  vertical-align: middle;
}

.nav-sinh-nhat-gift-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.3vw;
  height: 1.5vw;
  transform-origin: 50% 85%;
  animation: nav-sinh-nhat-gift-wobble 2.4s ease-in-out infinite;
}
.nav-sinh-nhat-gift-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 0.05vw 0.1vw rgba(0, 0, 0, 0.35));
}

.nav-link--sinh-nhat-gift .nav-sinh-nhat-gift-text {
  display: inline-block;
}

/* Thêm media query cho màn hình nhỏ hơn hoặc bằng 768px */
@media (max-width: 768px) {
  .navbar {
    display: block;
    min-height: 13.0208333333vw;
    height: 13.0208333333vw;
  }
  .navbar .nopbai-btn {
    display: none;
  }
  .navbar .navbar-container {
    display: none;
    position: absolute;
    flex-direction: column;
    align-items: flex-start;
    left: 0;
    right: 0;
    height: auto;
    min-height: 0;
    width: 100%;
    margin-top: 13.0208333333vw;
    padding-bottom: 4.1666666667vw;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.903);
  }
  .navbar .navbar-menu {
    width: 100%;
  }
  .navbar .navbar-menu ul {
    flex-direction: column;
    gap: 0vw;
  }
  .navbar .navbar-menu ul li {
    padding: 3.90625vw;
  }
  .navbar .navbar-menu ul li a {
    font-size: 5.08203125vw;
    line-height: 1.5;
  }
  .navbar .navbar-menu ul .nav-link--sinh-nhat-gift {
    gap: 1.3020833333vw;
  }
  .navbar .navbar-menu ul .nav-sinh-nhat-gift-icon {
    width: 3.90625vw;
    height: 4.5572916667vw;
  }
  .navbar .navbar-menu ul .nav-sinh-nhat-gift-icon svg {
    filter: drop-shadow(0 0.1302083333vw 0.2604166667vw rgba(0, 0, 0, 0.35));
  }
  .navbar .nav-fake {
    height: 7.1614583333vw;
  }
  .navbar .tiktok-btn-wrapper {
    position: static;
    width: 100%;
    padding-top: 0;
    margin-top: 1.3020833333vw;
    display: flex;
    justify-content: flex-end;
  }
  .navbar .tiktok-btn-wrapper .home-btn {
    margin-left: 11.0677083333vw;
    display: block;
    width: 31.3802083333vw;
    height: 8.7239583333vw;
    background-image: url(../images/home-btn.png);
    background-size: cover;
    transform-origin: center center;
  }
  .navbar .tiktok-btn-wrapper .home-btn.btn-click-feedback {
    animation: frame-login-btn-click 0.26s ease-out forwards;
  }
  .navbar .tiktok-btn-wrapper .tiktok-btn {
    display: block;
    margin-left: 1.3020833333vw;
    width: 31.3802083333vw;
    height: 8.7239583333vw;
  }
  .navbar .tiktok-btn-wrapper .tiktok-btn.invisible {
    width: 8.7239583333vw;
  }
  .navbar .tiktok-btn-wrapper .burger-btn {
    transition: all 0.3s ease;
    display: block;
    width: 5.46875vw;
    height: 4.5572916667vw;
    margin: 2.34375vw 3.3854166667vw 0 2.6041666667vw;
    background-image: url(../images/burger-btn.png);
    background-size: cover;
  }
  .navbar .tiktok-btn-wrapper .burger-btn-close {
    background-image: url(../images/burger-btn-close.png);
  }
  .navbar .tiktok-btn-wrapper .burger-btn.burger-btn-next-avatar {
    margin: 2.6041666667vw 3.3854166667vw 2.6041666667vw 2.6041666667vw;
  }
  .navbar .tiktok-btn-wrapper .mobile-level {
    width: 8.0729166667vw;
    height: 8.0729166667vw;
    flex-shrink: 0;
    margin-top: 0.8463541667vw;
  }
  .navbar .tiktok-btn-wrapper .mobile-level .mobile-level-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
    border: 0.390625vw solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .navbar .tiktok-btn-wrapper .mobile-level .mobile-level-avatar img,
  .navbar .tiktok-btn-wrapper .mobile-level .mobile-level-avatar .user-avatar-initial {
    width: 100%;
    height: 100%;
  }
  .navbar .tiktok-btn-wrapper .mobile-level .mobile-level-avatar img {
    object-fit: cover;
  }
  .navbar .tiktok-btn-wrapper .mobile-level .mobile-level-avatar .user-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6841a5;
    color: #ffd049;
    font-family: "svn-agency-fb-bold", sans-serif;
    font-size: 3.6458333333vw;
    line-height: 1;
    user-select: none;
  }
  .navbar .tiktok-btn-wrapper .logo {
    display: block;
    width: 13.671875vw;
    height: 10.4166666667vw;
    margin-left: 2.6041666667vw;
    background-image: url(../images/logo.png);
    background-size: cover;
  }
  .navbar .avatar-wrapper {
    position: absolute;
    right: 3.3854166667vw;
    top: 2.6041666667vw;
    width: 8.0729166667vw;
    height: 8.0729166667vw;
    border: 0.390625vw solid white;
  }
  .navbar .profile-wrapper {
    position: absolute;
    right: 8.3333333333vw;
    top: 10.6770833333vw;
    width: 27.6041666667vw;
    height: 38.8020833333vw;
    gap: 1.953125vw;
    padding-top: 4.1666666667vw;
  }
  .navbar .profile-wrapper .profile-item {
    height: 4.6875vw;
    width: 21.09375vw;
    font-size: 3.3671875vw;
    border: 0.1302083333vw solid #342f86;
  }
}
.popup {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.popup.hidden {
  display: none;
}
.popup .loading-content {
  font-size: 1.8895vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  color: #ffffff;
}
.popup .small-text {
  font-size: 1.4vw;
  display: block;
  margin-top: 0.5vw;
}
.popup .hashtag-note {
  font-size: 1.3225vw;
}
.popup .hashtag-note span {
  font-size: 1.3225vw;
}
.popup .close-btn {
  position: absolute;
  top: 0.45vw;
  right: -1.6vw;
  width: 1.9vw;
  height: 1.7vw;
  background: url("/images/X.png") no-repeat center center;
  background-size: cover;
}
.popup .close-btn:hover {
  cursor: pointer;
  transform: scale(1.1);
  animation: rotate360 0.4s linear forwards;
}
.popup.popup-big .popup-container {
  position: relative;
  margin-top: -10vw;
  width: 71.1vw;
  height: 36.7vw;
  background: url("/images/popup-big.png") no-repeat center center;
  background-size: cover;
}
.popup.popup-big .popup-container .close-btn {
  position: absolute;
  top: 0.45vw;
  right: -1.6vw;
  width: 1.9vw;
  height: 1.7vw;
  background: url("/images/X.png") no-repeat center center;
  background-size: cover;
}
.popup.popup-big .popup-container .close-btn:hover {
  cursor: pointer;
  transform: scale(1.1);
  animation: rotate360 0.4s linear forwards;
}
.popup.popup-big.popup-no-title .popup-container {
  background: url("/images/popup-big-no-title.png") no-repeat center center;
  background-size: cover;
}
.popup.popup-small.popup-no-title .popup-container {
  background: url("/images/popup-small-no-title.png") no-repeat center center;
  background-size: cover;
}
.popup.popup-small.popup-no-title .popup-content {
  margin-top: 5.7vw;
}
.popup.popup-small.popup-no-title .popup-content span {
  font-size: 1.75vw;
  color: #3448a9;
  font-family: "svn-agency-fb-black";
  text-align: center;
  margin-top: 0.5vw;
}
.popup.popup-small.popup-no-title .form-footer {
  margin-top: 1.7vw;
}
.popup.popup-small.popup-small-2 .form-note {
  position: absolute;
  font-size: 0.9325vw;
  color: #342f86;
  font-family: "svn-agency-fb-black";
  margin-top: 3vw;
  left: 8.5vw;
}
.popup.popup-small.popup-small-2 .popup-title {
  margin-top: 5.5vw;
  font-size: 2vw;
  color: #342f86;
  font-family: "svn-agency-fb-black";
  -webkit-text-fill-color: #342f86;
  background: none;
}
.popup.popup-small.popup-small-2 .popup-container {
  background: url("/images/popup-small-2.png") no-repeat center center;
  background-size: cover;
  width: 38.4vw;
  height: 33.05vw;
}
.popup.popup-small.popup-small-2 .popup-content {
  width: 36.4vw;
  margin-top: 1.35vw;
  margin-left: 2vw;
  padding: 0 5vw;
}
.popup.popup-small.popup-small-2 .popup-content .form-grid.single-column {
  gap: 1.9vw;
}
.popup.popup-small.popup-small-2 .popup-content .form-grid.single-column .form-group input {
  width: 25.85vw;
}
.popup.popup-small.popup-small-2 .form-footer {
  margin-top: 1.1vw;
  width: 36.4vw;
  margin-left: 2vw;
}
.popup.popup-small.popup-small-2 .form-footer button {
  width: 12.45vw;
  height: 3.7vw;
  background-size: cover;
  font-size: 1.85vw;
}
.popup.popup-small .popup-container {
  position: relative;
  margin-top: -10vw;
  width: 53.45vw;
  height: 27.4vw;
  background: url("/images/popup-small.png") no-repeat center center;
  background-size: cover;
}
.popup.popup-small .popup-content {
  margin-top: 2.25vw;
  font-size: 2.3vw;
  color: #3448a9;
  font-family: "svn-agency-fb-black";
  text-align: center;
  padding: 0 5vw;
  background-size: cover;
}
.popup .popup-title {
  margin-top: 7.75vw;
  font-size: 3.737vw;
  font-family: "svn-agency-fb-bold";
  color: rgb(242, 249, 255);
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  z-index: 18;
  background: linear-gradient(to bottom, #203286, #985bf4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}
.popup .popup-content {
  font-family: "svn-agency-fb-black";
}
.popup .popup-content .form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5vw 2.4vw;
  margin-top: 1.5vw;
}
.popup .popup-content .form-grid .form-group input {
  border-radius: 0;
  font-family: "svn-agency-fb-black";
  width: 24.35vw;
  height: 2.5vw;
  border: 0.1vw solid #3448a9;
  color: #3448a9;
  font-size: 1.2265vw;
  padding: 0 1.35vw;
  background: transparent;
  outline: none;
  background-image: url("../images/input-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.popup .popup-content .form-grid .form-group input.input-long {
  width: 36.9vw;
}
.popup .popup-content .form-grid .form-group input::placeholder {
  color: #3448a9;
  font-size: 1.2265vw;
}
.popup .popup-content .form-grid .form-group input:focus {
  border-color: #985bf4;
}
.popup .popup-content .form-grid .form-group .group-label {
  display: block;
  color: #3448a9;
  font-size: 1.2265vw;
}
.popup .popup-content .form-grid .form-group .radio-group {
  display: flex;
  align-items: center;
  gap: 1.5vw;
  margin-top: 0.4vw;
}
.popup .popup-content .form-grid .form-group .radio-group .group-label {
  color: #3448a9;
  font-size: 1.2265vw;
  text-decoration: underline;
  white-space: nowrap;
}
.popup .popup-content .form-grid .form-group .radio-group .radio-label {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  cursor: pointer;
}
.popup .popup-content .form-grid .form-group .radio-group .radio-label input[type=radio] {
  width: 1vw;
  height: 1vw;
  margin: 0;
  accent-color: #3448a9;
}
.popup .popup-content .form-grid .form-group .radio-group .radio-label span {
  color: #3448a9;
  font-size: 1.2265vw;
}
.popup .popup-content .form-grid .form-group .custom-file-input {
  position: relative;
  width: 24.35vw;
  height: 2.5vw;
  cursor: pointer;
}
.popup .popup-content .form-grid .form-group .custom-file-input::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.35vw;
  transform: translateY(-50%);
  width: 1.15vw;
  height: 1.05vw;
  background: url("../images/upload-button.png") no-repeat center center;
  background-size: contain;
  pointer-events: none;
  z-index: 3;
}
.popup .popup-content .form-grid .form-group .custom-file-input .file-input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.popup .popup-content .form-grid .form-group .custom-file-input .file-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 1.35vw;
  padding-right: 2.5vw;
  border: 0.1vw solid #3448a9;
  color: #3448a9;
  font-size: 1.2265vw;
  background: transparent;
  background-image: url("../images/input-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popup .popup-content .form-grid .form-group .custom-file-input:hover .file-label {
  border-color: #985bf4;
}
.popup .popup-content .form-grid .form-group input.error {
  border-color: #ff0000 !important;
}
.popup .popup-content .form-grid .form-group .radio-group.error .radio-label span {
  color: #ff0000;
}
.popup .popup-content .form-grid.single-column {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 1vw;
}
.popup .popup-content .form-grid.single-column .form-group {
  width: 100%;
  display: flex;
  justify-content: center;
}
.popup .popup-content .form-grid.single-column .form-group input {
  width: 29.5vw;
  height: 3vw;
}
.popup .popup-content .form-grid.single-column .form-group input.input-long {
  width: 36.9vw;
}
.popup .popup-content .form-grid.single-column .form-group .custom-file-input {
  width: 29.5vw;
  height: 3vw;
}
.popup .popup-content .form-grid.single-column .form-group .custom-file-input.input-long {
  width: 36.9vw;
}
.popup .popup-content .form-grid.single-column .form-group .custom-file-input .file-label {
  height: 3vw;
}
.popup .form-footer {
  margin-top: 0.5vw;
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.popup.popup-register .detail-link {
  margin-top: 0.5vw;
}
.popup.popup-register .detail-link:hover {
  cursor: pointer;
}
.popup.popup-register .detail-link a {
  font-size: 1.2265vw;
  text-decoration: underline;
  color: #342f86;
}
.popup.popup-register .detail-link span, .popup.popup-register .detail-link p {
  font-size: 1.2265vw;
  color: #342f86;
}
.popup.popup-register .popup-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup.popup-register .popup-content .form-grid {
  width: 51.1vw;
  font-family: "svn-agency-fb-black";
  margin-top: 2vw;
}
.popup.popup-thong-tin-ca-nhan .popup-container {
  position: relative;
  margin-top: -2vw;
  width: 47.6vw;
  height: 36.15vw;
  background: url("/images/thongtincanhan/popup-thongincanhan-bakcground.png") no-repeat center center;
  background-size: 100% 100%;
}
.popup.popup-thong-tin-ca-nhan .popup-container .close-btn {
  position: absolute;
  top: -0.3vw;
  right: -2.4vw;
  width: 2vw;
  height: 1.8vw;
  background: url("/images/X.png") no-repeat center center;
  background-size: cover;
}
.popup.popup-thong-tin-ca-nhan .popup-container .close-btn:hover {
  cursor: pointer;
  transform: scale(1.1);
  animation: rotate360 0.4s linear forwards;
}
.popup.popup-thong-tin-ca-nhan.ttcn-proof-required .popup-container {
  height: 39.4vw;
}
.popup.popup-thong-tin-ca-nhan .popup-title {
  margin-top: 6.35vw;
  font-size: 2.755vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  text-transform: uppercase;
  background: linear-gradient(to bottom, #303793, #8956e6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.popup.popup-thong-tin-ca-nhan.popup-mandatory .close-btn {
  display: none;
}
.popup.popup-thong-tin-ca-nhan .detail-link {
  margin-top: 0;
}
.popup.popup-thong-tin-ca-nhan .detail-link:hover {
  cursor: pointer;
}
.popup.popup-thong-tin-ca-nhan .detail-link span, .popup.popup-thong-tin-ca-nhan .detail-link p {
  font-size: 1.2265vw;
  color: #342f86;
  text-decoration: underline;
}
.popup.popup-thong-tin-ca-nhan .popup-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.popup.popup-thong-tin-ca-nhan .popup-content .form-grid {
  width: 39vw;
  font-family: "svn-agency-fb-black";
  margin-top: 1.1vw;
}
.popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group.full-width {
  grid-column: 1/-1;
}
.popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group input {
  width: 100%;
}
.popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group .radio-group {
  flex-wrap: wrap;
}
.popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group .radio-group .radio-label span,
.popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group .radio-group .radio-label a {
  font-size: 1.2265vw;
}
.popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group .radio-group .radio-label a {
  color: #342f86;
  text-decoration: underline;
}
.popup.popup-thong-tin-ca-nhan .ttcn-proof-wrap {
  font-family: "svn-agency-fb-black";
  grid-column: 2;
  min-width: 0;
  width: 100%;
}
.popup.popup-thong-tin-ca-nhan .ttcn-proof-message {
  color: #d00000;
  font-size: 0.82vw;
  line-height: 1.16;
  margin-bottom: 0.32vw;
  max-width: 100%;
  text-align: left;
  overflow-wrap: anywhere;
  white-space: normal;
}
.popup.popup-thong-tin-ca-nhan .ttcn-proof-upload-row {
  display: flex;
  align-items: center;
  gap: 0.55vw;
  width: 100%;
  min-width: 0;
}
.popup.popup-thong-tin-ca-nhan .ttcn-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 4.35vw;
  height: 1.65vw;
  border: 0.1vw solid #3448a9;
  background: #3448a9;
  color: #fff;
  cursor: pointer;
  font-size: 0.95vw;
  line-height: 1;
  text-transform: uppercase;
}
.popup.popup-thong-tin-ca-nhan .ttcn-upload-btn:hover {
  background: #985bf4;
  border-color: #985bf4;
}
.popup.popup-thong-tin-ca-nhan .ttcn-upload-text {
  flex: 1 1 auto;
  min-width: 0;
  color: #342f86;
  font-size: 0.92vw;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.popup.popup-thong-tin-ca-nhan .ttcn-proof-file {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}
.popup.popup-thong-tin-ca-nhan .ttcn-proof-status {
  color: #342f86;
  font-size: 0.78vw;
  line-height: 1.12;
  margin-top: 0.18vw;
  min-height: 0.9vw;
  text-align: left;
  overflow-wrap: anywhere;
}
.popup.popup-thong-tin-ca-nhan .ttcn-error {
  min-height: 1.5vw;
  text-align: center;
  color: #ff0000;
  font-family: "svn-agency-fb-black";
  font-size: 1.1vw;
  margin-top: 0.4vw;
}
.popup.popup-thong-tin-ca-nhan .form-footer {
  margin-top: 0.4vw;
}
.popup.popup-thong-tin-ca-nhan .ttcn-logout {
  margin-top: 0.6vw;
  text-align: center;
}
.popup.popup-thong-tin-ca-nhan .ttcn-logout .ttcn-logout-link {
  font-family: "svn-agency-fb-black";
  font-size: 1.2265vw;
  color: #342f86;
  text-decoration: underline;
  cursor: pointer;
}
.popup.popup-thong-tin-ca-nhan .ttcn-logout .ttcn-logout-link:hover {
  opacity: 0.8;
}
.popup.popup-login .form-footer {
  margin-top: 1.25vw;
}
.popup.popup-login .popup-title {
  margin-top: 6.5vw;
}
.popup.popup-login.popup-small .popup-content {
  margin-top: 0.9vw;
}
.popup.popup-login.popup-small .popup-content .form-grid.single-column {
  gap: 0.65vw;
}
.popup.popup-login .forgot-password-container {
  display: flex;
  justify-content: center;
}
.popup.popup-login .forgot-password-container .forgot-password-button {
  font-size: 1.5vw;
  color: #342f86;
  font-family: "svn-agency-fb-black";
  text-decoration: underline;
  cursor: pointer;
  margin-top: 0.25vw;
}
.popup.popup-video .popup-title {
  line-height: 1.2;
}
.popup.popup-video .form-footer {
  margin-top: 1.5vw;
}
.popup.popup-video .submit-note-row {
  width: 36.9vw;
  max-width: 100%;
  text-align: center;
}
.popup.popup-video .submit-note-row.has-promo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2vw;
}
.popup.popup-video .submit-note-row.has-promo .promo-group {
  order: -1;
  width: auto;
  flex: 0 0 auto;
  justify-content: flex-start;
  margin-top: 0;
}
.popup.popup-video .submit-note-row.has-promo .hashtag-note {
  flex: 0 1 auto;
  text-align: right;
  margin: 0;
}
.popup.popup-video .promo-group {
  display: flex;
  justify-content: center;
  margin-top: 1vw;
}
.popup.popup-video .promo-group .promo-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.7vw;
  cursor: pointer;
  user-select: none;
}
.popup.popup-video .promo-group .promo-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.popup.popup-video .promo-group .promo-checkbox .promo-checkbox__box {
  width: 1.5vw;
  height: 1.5vw;
  border: 0.1vw solid #3448a9;
  border-radius: 0.3vw;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.popup.popup-video .promo-group .promo-checkbox input:checked + .promo-checkbox__box::after {
  content: "";
  position: absolute;
  left: 0.45vw;
  top: 0.15vw;
  width: 0.4vw;
  height: 0.8vw;
  border: solid #3448a9;
  border-width: 0 0.15vw 0.15vw 0;
  transform: rotate(45deg);
}
.popup.popup-video .promo-group .promo-checkbox .promo-checkbox__label {
  font-size: 1.4vw;
  color: #3448a9;
  line-height: 1;
}
.popup.popup-submission .popup-title {
  display: none;
}
.popup.popup-submission .popup-container {
  background: url("/images/popup-my-submission-bg.png") no-repeat center center;
  background-size: cover;
  width: 53.45vw;
  height: 24.7vw;
}
.popup.popup-submission .popup-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.15vw;
  margin-top: 16vw;
}
.popup.popup-submission .popup-content .button {
  width: 15.9vw;
  height: 4.65vw;
  font-size: 1.9vw;
  padding-bottom: 0.65vw;
  line-height: 1.6;
  background-size: cover;
  background-position: center;
}
.popup .hai-nut-popup-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8vw;
  flex-direction: column;
  position: relative;
}
.popup .hai-nut-popup-container .close-btn {
  position: absolute;
  top: -3.5vw;
  right: -3.5vw;
  width: 2vw;
  height: 1.8vw;
  background: url("/images/X.png") no-repeat center center;
  background-size: contain;
  cursor: pointer;
}
.popup .hai-nut-popup-container .close-btn:hover {
  transform: scale(1.1);
}
.popup.popup-profile .popup-container {
  position: relative;
  margin-top: -10vw;
  width: 71.1vw;
  height: 36.7vw;
  background: url("/images/popup-big.png") no-repeat center center;
  background-size: contain;
}
.popup.popup-profile .popup-content {
  display: grid;
  grid-template-columns: 18vw 53vw;
  gap: 1vw;
  padding: 1.3vw 2vw 2vw;
  margin-top: 5vw;
}
.popup.popup-profile .popup-content .column-1 {
  padding-left: 3vw;
  width: 18vw;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.popup.popup-profile .popup-content .column-2 {
  width: 48.3vw;
  padding-top: 1vw;
  box-sizing: border-box;
}
.popup.popup-profile .popup-content .column-2 .video-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1vw;
  width: 39.1vw;
  margin-left: 1.9vw;
}
.popup.popup-profile .popup-content .column-2 .video-list .video-thumbnail {
  position: relative;
  width: 12.3vw;
  height: 21.85vw;
  border: 0.1vw solid #FFFFFF;
  overflow: hidden;
  cursor: pointer;
}
.popup.popup-profile .popup-content .column-2 .video-list .video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.popup.popup-profile .popup-content .column-2 .video-list .video-thumbnail::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.1vw;
  height: 4.1vw;
  background: url("/images/play-button.png") no-repeat center center;
  background-size: contain;
  z-index: 2;
}
.popup.popup-profile .popup-content .column-2 .video-list .video-thumbnail:hover {
  border-color: #985bf4;
}
.popup.popup-profile .popup-content .column-2 .video-list .video-thumbnail:hover::before {
  transform: translate(-50%, -50%) scale(1.1);
  transition: transform 0.3s ease;
}
.popup.popup-profile .popup-content .column-2 .nav-video-list {
  display: flex;
  justify-content: center;
  gap: 2.65vw;
  margin-top: 2.3vw;
}
.popup.popup-profile .popup-content .column-2 .nav-video-list .nav-video-item {
  font-size: 2.05vw;
  font-family: "svn-agency-fb-black", sans-serif;
  color: #575757;
  cursor: pointer;
  transition: color 0.3s ease;
}
.popup.popup-profile .popup-content .column-2 .nav-video-list .nav-video-item:hover {
  color: #342f86;
}
.popup.popup-profile .popup-content .column-2 .nav-video-list .nav-video-item.active {
  color: #342f86;
}
.popup.popup-profile .profile-stat {
  display: flex;
  flex-direction: column;
  padding-left: 3vw;
  margin-bottom: 0.25vw;
}
.popup.popup-profile .profile-stat .stat-icon-con-mat {
  width: 1.95vw;
  height: 1.05vw;
  background: url("/images/con-mat-big.png") no-repeat center center;
  background-size: contain;
  margin-bottom: 0.4vw;
}
.popup.popup-profile .profile-stat .stat-number {
  display: flex;
  flex-direction: column;
}
.popup.popup-profile .profile-stat .stat-number.stat-follower span:first-child:before {
  width: 1.9vw;
  height: 1.05vw;
  background: url("/images/con-mat-big.png") no-repeat center center;
  background-size: contain;
}
.popup.popup-profile .profile-stat .stat-number span:first-child {
  position: relative;
  font-size: 2.588vw;
  font-family: "svn-agency-fb-black", sans-serif;
  color: #3448a9;
  line-height: 1.1;
}
.popup.popup-profile .profile-stat .stat-number span:first-child:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: -2.35vw;
  transform: translateY(-50%);
  width: 1.9vw;
  height: 1.6vw;
  background: url("/images/profile-icon.png") no-repeat center center;
  background-size: contain;
}
.popup.popup-profile .profile-stat .stat-number span:last-child {
  font-size: 1.4025vw;
  font-family: "svn-agency-fb-black", sans-serif;
  color: #3448a9;
  line-height: 1.1;
}
.popup.popup-ranking-by-level .popup-content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.25vw;
}
.popup.popup-ranking-by-level .popup-content .ranking-by-level-container {
  width: 65.7vw;
  height: 21.6vw;
  background: url("/images/rank-background.png") no-repeat center center;
  background-size: contain;
}
.popup.popup-ranking-by-level .popup-content .ranking-by-level-container .ranking-header, .popup.popup-ranking-by-level .popup-content .ranking-by-level-container .ranking-item {
  grid-template-columns: 1fr 1fr 2fr;
}
.popup.popup-ranking-by-level .popup-content .link {
  color: white;
}
.popup.popup-ranking-by-level .popup-content a {
  color: #342f86;
}
.popup.popup-ranking-by-level .popup-content .status-pending {
  color: #cfd6f4;
  padding: 0 0.75vw;
}
.popup.popup-ranking-by-level .popup-content .status-rejected {
  color: #aaaaaa;
}
.popup.popup-ranking-by-level .popup-content .status-approved {
  color: #00e410;
}
.popup.popup-ranking-by-level .ranking-by-level-container {
  padding: 1.4vw 2.5vw;
  border: 0.1vw solid white;
}
.popup.popup-ranking-by-level .delete-video-btn {
  background: url("/images/remove-link.png") no-repeat center center;
  background-size: contain;
  width: 1.75vw;
  height: 1.8vw;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.popup.popup-ranking-by-level .delete-video-btn:hover {
  cursor: pointer;
  scale: 1.01;
}
.popup.popup-my-video .popup-content .ranking-by-level-container .ranking-header, .popup.popup-my-livestream .popup-content .ranking-by-level-container .ranking-header {
  grid-template-columns: 1fr 2fr 2fr 2fr !important;
}
.popup.popup-my-video .popup-content .ranking-by-level-container .ranking-item, .popup.popup-my-livestream .popup-content .ranking-by-level-container .ranking-item {
  grid-template-columns: 1fr 2fr 2fr 2fr !important;
}
.popup.popup-login-or-register .close-btn {
  top: -0.2vw;
}
.popup.popup-login-or-register .popup-container {
  width: 53.45vw;
  height: 16.1vw;
  background: url("/images/popup-login-or-register.png") no-repeat center center;
  background-size: contain;
  position: relative;
}
.popup.popup-login-or-register .popup-container::before {
  content: "";
  position: absolute;
  top: -3.75vw;
  left: -2.5vw;
  width: 7.1vw;
  height: 9.75vw;
  background: url("/images/luu-dan-bay-mau.png") no-repeat center center;
  background-size: contain;
}
.popup.popup-login-or-register .popup-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4.05vw;
}
.popup.popup-login-or-register .popup-content .login-or-register-button {
  margin-top: 2.25vw;
  width: 20.55vw;
  height: 6.15vw;
  background-image: url("/images/login-big-button.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.popup.popup-login-or-register .popup-content .login-or-register-button:hover {
  cursor: pointer;
  filter: brightness(1.1);
  transition: all 0.3s ease;
}
.popup.popup-login-or-register .popup-content .login-or-register-button.register-button {
  background-image: url("/images/register-big-button.png");
}

.popup-ranking-by-level .ranking-by-level-container {
  padding: 2vw 3.5vw 2vw 2vw;
  display: flex;
  flex-direction: column;
  height: 30vw;
}
.popup-ranking-by-level .ranking-by-level-container .ranking-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1vw;
  padding: 1vw 0;
  font-size: 1.8895vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  color: #ffd049;
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: center;
}
.popup-ranking-by-level .ranking-by-level-container .ranking-content {
  overflow-y: auto;
  flex: 1;
}
.popup-ranking-by-level .ranking-by-level-container .ranking-content .ranking-item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1vw;
  padding: 1vw 0;
  font-size: 1.8895vw;
  font-family: "svn-agency-fb-black", sans-serif;
  color: white;
  position: relative;
  text-align: center;
}
.popup-ranking-by-level .ranking-by-level-container .ranking-content .ranking-item .con-mat::after {
  width: 2vw;
  position: absolute;
  right: -2.3vw;
}
.popup-ranking-by-level .ranking-by-level-container .ranking-content .ranking-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1vw;
  background: #371d73;
}
.popup-ranking-by-level .ranking-by-level-container .ranking-content .ranking-item:last-child::after {
  display: none;
}

.popup-benefit .popup-content {
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.8895vw;
  color: #342f86;
  padding: 2.25vw;
  overflow-y: scroll;
  height: 25vw;
  line-height: 1.5;
}
.popup-benefit .popup-content h3 {
  font-size: 1.8895vw;
  margin: 1.25vw 0 0.75vw;
  color: #3448a9;
}
.popup-benefit .popup-content h3:first-child {
  margin-top: 0;
}
.popup-benefit .popup-content h4 {
  font-size: 1.8895vw;
  margin: 1vw 0 0.75vw;
  color: #3448a9;
}
.popup-benefit .popup-content ul {
  list-style: none;
  padding-left: 1.5vw;
  margin: 0.75vw 0;
}
.popup-benefit .popup-content ul li {
  position: relative;
  margin-bottom: 0.6vw;
  font-size: 1.8895vw;
  line-height: 1.5;
  padding-left: 1vw;
}
.popup-benefit .popup-content ul li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #3448a9;
}
.popup-benefit .popup-content ul li:last-child {
  margin-bottom: 0;
}
.popup-benefit .popup-content p {
  font-size: 1.8895vw;
  line-height: 1.5;
  margin: 0.75vw 0;
}
.popup-benefit .popup-content p strong {
  font-family: "svn-agency-fb-bold", sans-serif;
  font-weight: bold;
}

.popup-sev-rule .popup-content,
.popup-sev-guide .popup-content {
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.8895vw;
  color: #342f86;
  padding: 2.25vw;
  overflow-y: scroll;
  height: 25vw;
  line-height: 1.5;
}
.popup-sev-rule .popup-content h3,
.popup-sev-guide .popup-content h3 {
  font-size: 1.8895vw;
  margin: 1.25vw 0 0.75vw;
  color: #3448a9;
}
.popup-sev-rule .popup-content h3:first-child,
.popup-sev-guide .popup-content h3:first-child {
  margin-top: 0;
}
.popup-sev-rule .popup-content h4,
.popup-sev-guide .popup-content h4 {
  font-size: 1.8895vw;
  margin: 1vw 0 0.75vw;
  color: #3448a9;
}
.popup-sev-rule .popup-content ul,
.popup-sev-guide .popup-content ul {
  list-style: none;
  padding-left: 1.5vw;
  margin: 0.75vw 0;
}
.popup-sev-rule .popup-content ul li,
.popup-sev-guide .popup-content ul li {
  position: relative;
  margin-bottom: 0.6vw;
  padding-left: 1vw;
  font-size: 1.8895vw;
  line-height: 1.5;
}
.popup-sev-rule .popup-content ul li:before,
.popup-sev-guide .popup-content ul li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #3448a9;
}
.popup-sev-rule .popup-content ul li:last-child,
.popup-sev-guide .popup-content ul li:last-child {
  margin-bottom: 0;
}
.popup-sev-rule .popup-content p,
.popup-sev-guide .popup-content p {
  margin: 0.75vw 0;
  font-size: 1.8895vw;
  line-height: 1.5;
}
.popup-sev-rule .popup-content p strong,
.popup-sev-guide .popup-content p strong {
  font-family: "svn-agency-fb-bold", sans-serif;
  font-weight: bold;
}

.custom-file-input.error input, .custom-file-input.error .file-label {
  border: 0.1vw solid #dc3545 !important;
}

.custom-file-input.error .custom-file-label {
  color: #dc3545;
}

@media (max-width: 768px) {
  .popup .loading-content {
    font-size: 4.9205729167vw;
  }
  .popup .small-text {
    font-size: 5vw !important;
  }
  .popup .close-btn {
    position: absolute;
    right: 0.1vw;
    top: -0.6510416667vw;
    width: 3.90625vw;
    height: 3.90625vw;
  }
  .popup .popup-title {
    margin-top: 15.5vw;
    font-size: 9.2447916667vw;
  }
  .popup .form-footer {
    margin-top: 0.9765625vw;
  }
  .popup .popup-content .form-grid.single-column {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2.6041666667vw;
  }
  .popup .popup-content .form-grid.single-column .form-group {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .popup .popup-content .form-grid.single-column .form-group input {
    width: 88.28125vw;
    height: 9.375vw;
    font-size: 4.4375vw;
    padding: 0 4.9479166667vw;
    border: 0.2604166667vw solid #3448a9;
  }
  .popup .popup-content .form-grid.single-column .form-group input::placeholder {
    font-size: 4.4375vw;
  }
  .popup .popup-content .form-grid.single-column .form-group input.input-long {
    width: 88.28125vw;
    height: 9.375vw;
    font-size: 4.4375vw;
    padding: 0 5.2083333333vw;
  }
  .popup .popup-content .form-grid.single-column .form-group input.input-long::placeholder {
    font-size: 4.4375vw;
  }
  .popup .popup-content .form-grid.single-column .form-group .custom-file-input.input-long {
    height: 9.375vw;
    width: 88.28125vw;
  }
  .popup .popup-content .form-grid.single-column .form-group .custom-file-input.input-long .file-input, .popup .popup-content .form-grid.single-column .form-group .custom-file-input.input-long .file-label {
    padding: 0 4.9479166667vw;
    font-size: 4.4375vw;
    height: 9.375vw;
    width: 88.28125vw;
    left: 0;
  }
  .popup .popup-content .form-grid.single-column .form-group .custom-file-input.input-long .file-input::placeholder, .popup .popup-content .form-grid.single-column .form-group .custom-file-input.input-long .file-label::placeholder {
    font-size: 3.7994791667vw;
  }
  .popup .popup-content .form-grid.single-column .form-group .custom-file-input::after {
    width: 3.2552083333vw;
    height: 3.125vw;
    right: 4.1666666667vw;
  }
  .popup .popup-content .form-grid.single-column .form-group .custom-file-input .file-label {
    border: 0.2604166667vw solid #3448a9;
  }
  .popup.popup-big.popup-no-title .popup-container {
    background: url("/images/popup-big-no-title-mb.png") no-repeat center center;
    background-size: cover;
  }
  .popup.popup-big .popup-container {
    position: relative;
    width: 94.4010416667vw;
    height: 137.109375vw;
    background: url("/images/popup-big-mb.png") no-repeat center center;
    background-size: cover;
  }
  .popup.popup-big .popup-container .close-btn {
    position: absolute;
    right: 0.1vw;
    top: -3vw;
    width: 3.90625vw;
    height: 3.90625vw;
  }
  .popup.popup-register-mb .form-footer {
    margin-top: 19.53125vw;
  }
  .popup.popup-register-mb .detail-link {
    margin-top: 0.5vw;
  }
  .popup.popup-register-mb .detail-link:hover {
    cursor: pointer;
  }
  .popup.popup-register-mb .detail-link a {
    font-size: 4.8020833333vw;
    text-decoration: underline;
    color: #342f86;
  }
  .popup.popup-register-mb .detail-link span, .popup.popup-register-mb .detail-link p {
    font-size: 4.8020833333vw;
    color: #342f86;
  }
  .popup.popup-register-mb .popup-content .form-grid {
    justify-content: center;
    width: 100vw;
    font-family: "svn-agency-fb-black";
    margin-top: 2vw;
    grid-template-columns: auto;
    gap: 1.5625vw;
  }
  .popup.popup-register-mb .popup-content .form-grid .form-group {
    height: 7.8125vw;
    width: 72.9166666667vw;
  }
  .popup.popup-register-mb .popup-content .form-grid .form-group input, .popup.popup-register-mb .popup-content .form-grid .form-group .custom-file-input, .popup.popup-register-mb .popup-content .form-grid .form-group .file-input, .popup.popup-register-mb .popup-content .form-grid .form-group .file-label {
    font-size: 3.7994791667vw;
    height: 7.8125vw;
    width: 72.9166666667vw;
    border: 0.2604166667vw solid #3448a9;
  }
  .popup.popup-register-mb .popup-content .form-grid .form-group input::placeholder, .popup.popup-register-mb .popup-content .form-grid .form-group .custom-file-input::placeholder, .popup.popup-register-mb .popup-content .form-grid .form-group .file-input::placeholder, .popup.popup-register-mb .popup-content .form-grid .form-group .file-label::placeholder {
    font-size: 3.7994791667vw;
  }
  .popup.popup-register-mb .popup-content .form-grid .form-group .file-label {
    border: 0.2604166667vw solid #3448a9;
  }
  .popup.popup-register-mb .popup-content .form-grid .form-group .file-input {
    border: none;
  }
  .popup.popup-register-mb .popup-content .form-grid .form-group .custom-file-input {
    border: none;
  }
  .popup.popup-register-mb .popup-content .form-grid .form-group .custom-file-input.error .file-label {
    border: 0.2604166667vw solid red !important;
  }
  .popup.popup-register-mb .popup-content .form-grid .form-group .custom-file-input::after {
    width: 3.2552083333vw;
    height: 3.125vw;
    right: 4.1666666667vw;
  }
  .popup.popup-register-mb .popup-content .form-group-2 {
    display: flex;
    justify-content: center;
    margin-top: 2.8645833333vw;
  }
  .popup.popup-register-mb .popup-content .form-group-2.form-group-3 {
    margin-top: 1.953125vw;
  }
  .popup.popup-register-mb .popup-content .form-group-2.no-margin-top {
    margin-top: 0 !important;
  }
  .popup.popup-register-mb .popup-content .form-group-2 .radio-group {
    font-size: 4.8020833333vw;
    color: #342f86;
    display: flex;
    gap: 7.1614583333vw;
    width: 82.8125vw;
  }
  .popup.popup-register-mb .popup-content .form-group-2 .radio-group.error span {
    color: red;
  }
  .popup.popup-benefit .popup-content {
    height: 68%;
    padding: 3.90625vw 4.9479166667vw;
  }
  .popup.popup-benefit .popup-content h3 {
    font-size: 5.859375vw;
    margin: 3.2552083333vw 0 1.953125vw;
    color: #3448a9;
  }
  .popup.popup-benefit .popup-content h3:first-child {
    margin-top: 0;
  }
  .popup.popup-benefit .popup-content h4 {
    font-size: 5.859375vw;
    margin: 2.6041666667vw 0 1.953125vw;
    color: #3448a9;
  }
  .popup.popup-benefit .popup-content ul {
    list-style: none;
    padding-left: 1.5vw;
    margin: 0.75vw 0;
  }
  .popup.popup-benefit .popup-content ul li {
    position: relative;
    margin-bottom: 1.5625vw;
    font-size: 5.859375vw;
    line-height: 1.5;
    padding-left: 2.6041666667vw;
  }
  .popup.popup-benefit .popup-content ul li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #3448a9;
  }
  .popup.popup-benefit .popup-content ul li:last-child {
    margin-bottom: 0;
  }
  .popup.popup-benefit .popup-content p {
    font-size: 5.859375vw;
    line-height: 1.5;
    margin: 1.953125vw 0;
  }
  .popup.popup-benefit .popup-content p strong {
    font-family: "svn-agency-fb-bold", sans-serif;
    font-weight: bold;
  }
  .popup.popup-sev-rule .popup-content, .popup.popup-sev-guide .popup-content {
    height: 68%;
    padding: 3.90625vw 4.9479166667vw;
  }
  .popup.popup-sev-rule .popup-content h3, .popup.popup-sev-guide .popup-content h3 {
    font-size: 5.859375vw;
    margin: 3.2552083333vw 0 1.953125vw;
    color: #3448a9;
  }
  .popup.popup-sev-rule .popup-content h3:first-child, .popup.popup-sev-guide .popup-content h3:first-child {
    margin-top: 0;
  }
  .popup.popup-sev-rule .popup-content h4, .popup.popup-sev-guide .popup-content h4 {
    font-size: 5.859375vw;
    margin: 2.6041666667vw 0 1.953125vw;
    color: #3448a9;
  }
  .popup.popup-sev-rule .popup-content ul, .popup.popup-sev-guide .popup-content ul {
    list-style: none;
    padding-left: 1.5vw;
    margin: 0.75vw 0;
  }
  .popup.popup-sev-rule .popup-content ul li, .popup.popup-sev-guide .popup-content ul li {
    position: relative;
    margin-bottom: 1.5625vw;
    padding-left: 2.6041666667vw;
    font-size: 5.859375vw;
    line-height: 1.5;
  }
  .popup.popup-sev-rule .popup-content ul li:before, .popup.popup-sev-guide .popup-content ul li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #3448a9;
  }
  .popup.popup-sev-rule .popup-content ul li:last-child, .popup.popup-sev-guide .popup-content ul li:last-child {
    margin-bottom: 0;
  }
  .popup.popup-sev-rule .popup-content p, .popup.popup-sev-guide .popup-content p {
    margin: 1.953125vw 0;
    font-size: 5.859375vw;
    line-height: 1.5;
  }
  .popup.popup-sev-rule .popup-content p strong, .popup.popup-sev-guide .popup-content p strong {
    font-family: "svn-agency-fb-bold", sans-serif;
    font-weight: bold;
  }
  .popup.popup-ranking-by-level .popup-content .ranking-by-level-container {
    padding: 1.953125vw;
    width: 90.3645833333vw;
    height: 107.421875vw;
    background: url("/images/rank-background-mb.png") no-repeat center center;
    background-size: cover;
    border: 0.2604166667vw solid white;
  }
  .popup.popup-ranking-by-level .popup-content .ranking-by-level-container .ranking-header {
    grid-template-columns: 1fr 2fr 2fr;
    font-size: 4.9205729167vw;
    padding: 0;
  }
  .popup.popup-ranking-by-level .popup-content .ranking-by-level-container .ranking-item {
    grid-template-columns: 1fr 2fr 2fr;
    font-size: 4.9205729167vw;
    padding: 1.953125vw 0;
  }
  .popup.popup-ranking-by-level .popup-content .ranking-by-level-container .ranking-item .con-mat::after {
    width: 3.7760416667vw;
    height: 2.0833333333vw;
    right: -6vw;
    top: 2vw;
    background-size: cover;
  }
  .popup.popup-login-or-register .popup-container {
    width: 94.4010416667vw;
    height: 52.0833333333vw;
    background: url("/images/popup-login-or-register-mb.png") no-repeat center center;
    background-size: contain;
    position: relative;
  }
  .popup.popup-login-or-register .popup-container::before {
    content: "";
    position: absolute;
    top: -7.8125vw;
    left: -5.2083333333vw;
    width: 15.625vw;
    height: 20.8333333333vw;
    background: url("/images/luu-dan-bay-mau.png") no-repeat center center;
    background-size: contain;
  }
  .popup.popup-login-or-register .popup-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.6041666667vw;
  }
  .popup.popup-login-or-register .popup-content .login-or-register-button {
    margin-top: 2.6041666667vw;
    width: 45.5729166667vw;
    height: 10.4166666667vw;
    background-image: url("/images/login-big-button.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .popup.popup-login-or-register .popup-content .login-or-register-button:hover {
    cursor: pointer;
    filter: brightness(1.1);
    transition: all 0.3s ease;
  }
  .popup.popup-login-or-register .popup-content .login-or-register-button.register-button {
    background-image: url("/images/register-big-button.png");
  }
  .popup.popup-profile .popup-content {
    display: block;
  }
  .popup.popup-profile .popup-content .column-1 {
    width: 100%;
    padding: 0;
  }
  .popup.popup-profile .popup-content .profile-info-top {
    display: flex;
    justify-content: center;
  }
  .popup.popup-profile .popup-content .profile-stat-container {
    margin-top: 2.6041666667vw;
    display: flex;
    justify-content: center;
    gap: 20.8333333333vw;
  }
  .popup.popup-profile .popup-content .profile-stat-container .profile-stat .stat-number span:first-child {
    font-size: 6.7395833333vw;
  }
  .popup.popup-profile .popup-content .profile-stat-container .profile-stat .stat-number span:first-child::before {
    left: -6.3vw;
    width: 4.1666666667vw;
    height: 3.7760416667vw;
  }
  .popup.popup-profile .popup-content .profile-stat-container .profile-stat .stat-number span:last-child {
    font-size: 3.65234375vw;
  }
  .popup.popup-profile .popup-content .column-2 {
    padding-top: 6.25vw;
    width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .popup.popup-profile .popup-content .column-2 .video-list {
    gap: 2.34375vw;
    margin: 0;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .popup.popup-profile .popup-content .column-2 .video-list .video-thumbnail {
    width: 24.609375vw;
    height: 43.4895833333vw;
  }
  .popup.popup-profile .popup-content .column-2 .video-list .video-thumbnail::before {
    width: 8.0729166667vw;
    height: 8.0729166667vw;
  }
  .popup.popup-profile .popup-content .column-2 .nav-video-list {
    display: flex;
    justify-content: center;
    margin-top: 6.5104166667vw;
    gap: 7.421875vw;
  }
  .popup.popup-profile .popup-content .column-2 .nav-video-list .nav-video-item {
    font-size: 5.859375vw;
  }
  .popup.popup-small .popup-title, .popup.popup-submission .popup-title {
    display: block;
  }
  .popup.popup-small.popup-no-title .popup-container, .popup.popup-submission.popup-no-title .popup-container {
    background: url("/images/popup-small-no-title-mb.png") no-repeat center center;
    background-size: cover;
  }
  .popup.popup-small.popup-small-2 .popup-title, .popup.popup-submission.popup-small-2 .popup-title {
    font-size: 6.5716145833vw;
  }
  .popup.popup-small.popup-small-2 .popup-container, .popup.popup-submission.popup-small-2 .popup-container {
    background: url("/images/popup-small-no-title-mb.png") no-repeat center center;
    background-size: cover;
    width: 94.2708333333vw;
    height: 104.1666666667vw;
  }
  .popup.popup-small.popup-small-2 .popup-container .popup-content, .popup.popup-submission.popup-small-2 .popup-container .popup-content {
    font-size: 7.1614583333vw;
    padding: 0;
  }
  .popup.popup-small.popup-small-2 .popup-container .popup-content span, .popup.popup-submission.popup-small-2 .popup-container .popup-content span {
    font-size: 5.9895833333vw;
  }
  .popup.popup-small .popup-container, .popup.popup-submission .popup-container {
    background: url("/images/popup-small-mb.png") no-repeat center center;
    background-size: cover;
    width: 94.2708333333vw;
    height: 104.1666666667vw;
  }
  .popup.popup-small .popup-container .popup-content, .popup.popup-submission .popup-container .popup-content {
    font-size: 7.1614583333vw;
    padding: 0;
  }
  .popup.popup-small .popup-container .popup-content span, .popup.popup-submission .popup-container .popup-content span {
    font-size: 5.9895833333vw;
  }
  .popup.popup-small .popup-container .popup-content .hashtag-note span, .popup.popup-submission .popup-container .popup-content .hashtag-note span {
    font-size: 4.0364583333vw;
  }
  .popup.popup-register-common .popup-content {
    margin-top: 14.25vw;
  }
  .popup.popup-login .popup-title {
    margin-top: 16.6666666667vw;
  }
  .popup.popup-login .popup-container .popup-content {
    margin-top: 6.1197916667vw;
  }
  .popup.popup-login .popup-container .popup-content .form-grid.single-column {
    gap: 2.6041666667vw;
  }
  .popup.popup-login .form-footer {
    margin-top: 7.8125vw;
  }
  .popup.popup-login .button.blank-button {
    width: 40.3645833333vw;
    height: 11.9791666667vw;
    font-size: 4.8177083333vw;
  }
  .popup.popup-login .forgot-password-container .forgot-password-button {
    font-size: 3.90625vw;
    margin-top: 2.8645833333vw;
  }
  .popup#hai-nut-popup .hai-nut-popup-container {
    gap: 9.6354166667vw;
    flex-direction: column;
  }
  .popup#hai-nut-popup .hai-nut-popup-container .close-btn {
    top: -9.1145833333vw;
    right: -9.1145833333vw;
    width: 5.2083333333vw;
    height: 4.6875vw;
  }
  .popup.popup-video .submit-video-form {
    background: yellow;
  }
  .popup.popup-video .form-footer {
    margin-top: 4.296875vw;
  }
  .popup.popup-video .submit-note-row {
    width: 88.28125vw;
    max-width: 100%;
  }
  .popup.popup-video .submit-note-row.has-promo {
    gap: 2.6041666667vw;
  }
  .popup.popup-video .promo-group {
    display: flex;
    justify-content: center;
    margin-top: 3.125vw;
  }
  .popup.popup-video .promo-group .promo-checkbox {
    gap: 2.0833333333vw;
  }
  .popup.popup-video .promo-group .promo-checkbox .promo-checkbox__box {
    width: 5.2083333333vw;
    height: 5.2083333333vw;
    border-width: 0.2604166667vw;
    border-radius: 1.0416666667vw;
  }
  .popup.popup-video .promo-group .promo-checkbox input:checked + .promo-checkbox__box::after {
    left: 1.5625vw;
    top: 0.5208333333vw;
    width: 1.4322916667vw;
    height: 2.734375vw;
    border-width: 0 0.5208333333vw 0.5208333333vw 0;
  }
  .popup.popup-video .promo-group .promo-checkbox .promo-checkbox__label {
    font-size: 4.4270833333vw;
  }
  .popup.popup-submit-livestream .popup-content {
    margin-top: 16.6666666667vw !important;
  }
  .popup.popup-submit-livestream .popup-content span {
    display: block;
    text-align: center;
  }
  .popup.popup-submit-livestream .popup-content .mobile-note {
    margin-bottom: 4.0364583333vw;
  }
  .popup.popup-submission .popup-container {
    background: url("/images/popup-my-submission-bg-mb.png") no-repeat center center;
    background-size: cover;
    width: 95.5729166667vw;
    height: 84.765625vw;
  }
  .popup.popup-submission .popup-title {
    margin-top: 18.2291666667vw;
  }
  .popup.popup-submission .popup-content {
    flex-direction: column;
    margin-top: 6.9010416667vw;
  }
  .popup.popup-submission .popup-content .button {
    width: 55.859375vw;
    height: 16.5364583333vw;
    font-size: 6.7096354167vw;
    gap: 6.9010416667vw;
  }
  .popup.popup-my-video .popup-content .ranking-by-level-container .ranking-header, .popup.popup-my-livestream .popup-content .ranking-by-level-container .ranking-header {
    font-size: 3.515625vw;
    grid-template-columns: 1fr 2fr 2fr 2fr;
  }
  .popup.popup-my-video .popup-content .ranking-by-level-container .ranking-item, .popup.popup-my-livestream .popup-content .ranking-by-level-container .ranking-item {
    grid-template-columns: 1fr 2fr 2fr 2fr;
    font-size: 3.90625vw;
    font-family: "svn-agency-fb-black";
  }
  .popup.popup-my-video .popup-content .ranking-by-level-container .ranking-item .delete-video-btn, .popup.popup-my-livestream .popup-content .ranking-by-level-container .ranking-item .delete-video-btn {
    width: 2.6041666667vw;
    height: 2.6041666667vw;
  }
  .popup.popup-forgot-password.popup-small.popup-small-2 .popup-title {
    margin-top: 11.9791666667vw;
  }
  .popup.popup-forgot-password.popup-small.popup-small-2 .popup-content {
    width: 100%;
    margin-left: 0;
    margin-top: 5.9895833333vw;
  }
  .popup.popup-forgot-password.popup-small.popup-small-2 .popup-content .form-note {
    font-size: 3.0651041667vw;
    margin-top: 9.1145833333vw;
    margin-left: 7vw;
  }
  .popup.popup-forgot-password.popup-small.popup-small-2 .popup-content .form-grid.single-column {
    gap: 6.25vw;
  }
  .popup.popup-forgot-password.popup-small.popup-small-2 .popup-content .form-grid.single-column input {
    width: 73.046875vw;
    height: 8.8541666667vw;
  }
  .popup.popup-forgot-password.popup-small.popup-small-2 .form-footer {
    width: 100%;
    margin-left: 0;
    margin-top: 6.5104166667vw;
  }
  .popup.popup-forgot-password.popup-small.popup-small-2 .form-footer button {
    width: 42.1875vw;
    height: 12.5vw;
    font-size: 6.2864583333vw;
  }
  .popup.popup-login-or-register .popup-container {
    width: 95.5729166667vw;
    height: 64.453125vw;
    background: url("/images/popup-login-or-register-mb.png") no-repeat center center;
    background-size: cover;
  }
  .popup.popup-login-or-register .popup-container::before {
    display: none;
  }
  .popup.popup-login-or-register .popup-content {
    padding-top: 5.859375vw;
  }
  .popup.popup-login-or-register .popup-content .login-or-register-button {
    width: 55.859375vw;
    height: 16.5364583333vw;
  }
  .popup.popup-thong-tin-ca-nhan .popup-container {
    margin-top: 0;
    width: 88.28125vw;
    height: 134.765625vw;
    background: url("/images/thongtincanhan/popup-thongincanhan-bakcground-mb.png") no-repeat center;
    background-size: 100% 100%;
    overflow: visible;
  }
  .popup.popup-thong-tin-ca-nhan .popup-container .close-btn {
    top: -0.6510416667vw;
    right: 0.1vw;
    width: 3.90625vw;
    height: 3.90625vw;
  }
  .popup.popup-thong-tin-ca-nhan.ttcn-proof-required .popup-container {
    height: 150vw;
  }
  .popup.popup-thong-tin-ca-nhan .popup-title {
    margin-top: 13.0208333333vw;
    padding: 0 3.125vw;
    font-size: 5.46875vw;
    line-height: 1.15;
  }
  .popup.popup-thong-tin-ca-nhan .popup-content .form-grid {
    width: 72.9166666667vw;
    margin-top: 3.125vw;
    grid-template-columns: 1fr;
    gap: 2.34375vw;
    justify-items: center;
  }
  .popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group {
    width: 100%;
  }
  .popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group.full-width {
    grid-column: 1;
  }
  .popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group input {
    width: 100%;
    height: 7.8125vw;
    font-size: 3.7994791667vw;
    padding: 0 3.515625vw;
    border: 0.2604166667vw solid #3448a9;
  }
  .popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group input::placeholder {
    font-size: 3.7994791667vw;
  }
  .popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group .radio-group {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5625vw;
    width: 100%;
  }
  .popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group .radio-group .group-label,
  .popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group .radio-group .radio-label span,
  .popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group .radio-group .radio-label a {
    font-size: 3.4375vw;
  }
  .popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group .radio-group .group-label:not(.detail-link) {
    flex: 0 0 100%;
    width: 100%;
  }
  .popup.popup-thong-tin-ca-nhan .popup-content .form-grid .form-group .radio-group .radio-label input[type=radio] {
    width: 2.6041666667vw;
    height: 2.6041666667vw;
  }
  .popup.popup-thong-tin-ca-nhan .detail-link span,
  .popup.popup-thong-tin-ca-nhan .detail-link p {
    font-size: 2.8645833333vw;
  }
  .popup.popup-thong-tin-ca-nhan .ttcn-proof-wrap {
    grid-column: 1;
  }
  .popup.popup-thong-tin-ca-nhan .ttcn-proof-message {
    font-size: 2.34375vw;
    margin-bottom: 0.78125vw;
  }
  .popup.popup-thong-tin-ca-nhan .ttcn-proof-upload-row {
    gap: 1.3020833333vw;
  }
  .popup.popup-thong-tin-ca-nhan .ttcn-upload-btn {
    width: 14.3229166667vw;
    height: 5.2083333333vw;
    border-width: 0.2604166667vw;
    font-size: 2.6041666667vw;
  }
  .popup.popup-thong-tin-ca-nhan .ttcn-upload-text {
    font-size: 2.6041666667vw;
    line-height: 1.12;
  }
  .popup.popup-thong-tin-ca-nhan .ttcn-proof-status {
    font-size: 2.0833333333vw;
    margin-top: 0.5208333333vw;
    min-height: 2.34375vw;
  }
  .popup.popup-thong-tin-ca-nhan .ttcn-error {
    font-size: 2.34375vw;
    margin-top: 1.0416666667vw;
    padding: 0 3.125vw;
  }
  .popup.popup-thong-tin-ca-nhan .form-footer {
    margin-top: 2.0833333333vw;
  }
  .popup.popup-thong-tin-ca-nhan .ttcn-logout {
    margin-top: 1.3020833333vw;
  }
  .popup.popup-thong-tin-ca-nhan .ttcn-logout .ttcn-logout-link {
    font-size: 3.4375vw;
  }
}
#login-popup.popup-vga-login {
  z-index: 1100;
  background-color: rgba(0, 0, 0, 0.85);
}
#login-popup.popup-vga-login .popup-container {
  position: relative;
  width: 47.5vw;
  height: 29.6vw;
  max-width: calc(100% - 1.6vw);
  background: url("/images/login/popup-login-background.png") center/100% 100% no-repeat;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 0;
  overflow: visible;
}
#login-popup.popup-vga-login .close-btn {
  position: absolute;
  top: 0.45vw;
  right: -1.6vw;
  width: 1.9vw;
  height: 1.7vw;
  z-index: 2;
  background: url("/images/X.png") no-repeat center center;
  background-size: cover;
}
#login-popup.popup-vga-login .close-btn:hover {
  cursor: pointer;
  transform: scale(1.1);
}
#login-popup.popup-vga-login .vga-login-popup__title-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#login-popup.popup-vga-login .vga-login-popup__channels {
  position: absolute;
  top: 10.2vw;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.6vw;
}
#login-popup.popup-vga-login .vga-login-popup__primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vw;
}
#login-popup.popup-vga-login .vga-login-popup__primary .vga-login-popup__btn {
  display: block;
  width: 21.45vw;
  height: 4.45vw;
  margin: 0;
  padding: 0;
  line-height: 0;
  filter: drop-shadow(0 0.2vw 0.5vw rgba(74, 42, 120, 0.32));
  transition: transform 0.3s ease, filter 0.3s ease;
}
#login-popup.popup-vga-login .vga-login-popup__primary .vga-login-popup__btn img {
  display: block;
  width: 21.45vw;
  height: 4.45vw;
}
#login-popup.popup-vga-login .vga-login-popup__primary .vga-login-popup__btn:hover {
  transform: translateY(-0.05vw);
  filter: drop-shadow(0 0.4vw 1vw rgba(74, 42, 120, 0.58));
}
#login-popup.popup-vga-login .vga-login-popup__primary .vga-login-popup__btn:active {
  transform: translateY(0);
  filter: drop-shadow(0 0.25vw 0.6vw rgba(74, 42, 120, 0.44));
}
#login-popup.popup-vga-login .vga-login-popup__social {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2.15vw;
}
#login-popup.popup-vga-login .vga-login-popup__social-item {
  display: block;
  line-height: 0;
  transition: transform 0.3s ease, filter 0.3s ease;
}
#login-popup.popup-vga-login .vga-login-popup__social-item img {
  display: block;
}
#login-popup.popup-vga-login .vga-login-popup__social-item[data-channel=facebook] img {
  width: 3.8vw;
  height: 3.8vw;
}
#login-popup.popup-vga-login .vga-login-popup__social-item[data-channel=google] img {
  width: 3.85vw;
  height: 3.8vw;
}
#login-popup.popup-vga-login .vga-login-popup__social-item[data-channel=apple] img {
  width: 3.85vw;
  height: 3.8vw;
}
#login-popup.popup-vga-login .vga-login-popup__social-item:hover {
  transform: translateY(-0.1vw);
  filter: drop-shadow(0 0.25vw 0.6vw rgba(74, 42, 120, 0.45));
}
#login-popup.popup-vga-login .vga-login-popup__social-item:active {
  transform: translateY(0);
}
#login-popup.popup-vga-login .vga-login-popup__error {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  margin: 0;
  color: #c53030;
  text-align: center;
  font-size: 0.7vw;
  font-family: "svn-agency-fb-bold", sans-serif;
}
@media (max-width: 767px) {
  #login-popup.popup-vga-login .popup-container {
    width: 123.6979166667vw;
    height: 77.0833333333vw;
    max-width: calc(100% - 6.25vw);
  }
  #login-popup.popup-vga-login .close-btn {
    top: 1.171875vw;
    right: -4.1666666667vw;
    width: 4.9479166667vw;
    height: 4.4270833333vw;
  }
  #login-popup.popup-vga-login .vga-login-popup__channels {
    top: 26.5625vw;
    gap: 9.375vw;
  }
  #login-popup.popup-vga-login .vga-login-popup__primary {
    gap: 2.6041666667vw;
  }
  #login-popup.popup-vga-login .vga-login-popup__primary .vga-login-popup__btn {
    width: 55.859375vw;
    height: 11.5885416667vw;
    filter: drop-shadow(0 0.78125vw 1.953125vw rgba(74, 42, 120, 0.32));
  }
  #login-popup.popup-vga-login .vga-login-popup__primary .vga-login-popup__btn img {
    width: 55.859375vw;
    height: 11.5885416667vw;
  }
  #login-popup.popup-vga-login .vga-login-popup__primary .vga-login-popup__btn:hover {
    transform: translateY(-0.1953125vw);
    filter: drop-shadow(0 1.5625vw 3.90625vw rgba(74, 42, 120, 0.58));
  }
  #login-popup.popup-vga-login .vga-login-popup__social {
    gap: 5.5989583333vw;
  }
  #login-popup.popup-vga-login .vga-login-popup__social-item[data-channel=facebook] img {
    width: 9.8958333333vw;
    height: 9.8958333333vw;
  }
  #login-popup.popup-vga-login .vga-login-popup__social-item[data-channel=google] img {
    width: 10.0260416667vw;
    height: 9.8958333333vw;
  }
  #login-popup.popup-vga-login .vga-login-popup__social-item[data-channel=apple] img {
    width: 10.0260416667vw;
    height: 9.8958333333vw;
  }
  #login-popup.popup-vga-login .vga-login-popup__social-item:hover {
    transform: translateY(-0.390625vw);
    filter: drop-shadow(0 0.9765625vw 2.34375vw rgba(74, 42, 120, 0.45));
  }
  #login-popup.popup-vga-login .vga-login-popup__error {
    font-size: 1.8229166667vw;
  }
}

.frame1 {
  position: relative;
  width: 100vw;
  height: 51.7vw;
  background-image: url("/images/frame1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.frame1 .social-group {
  position: absolute;
  top: 5vw;
  right: 1.45vw;
  width: 3.15vw;
  height: 9.55vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/images/social-group-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
  gap: 0.65vw;
  flex-direction: column;
}
.frame1 .social-group a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.frame1 .social-group a:hover {
  cursor: pointer;
}
.frame1 .social-group a:hover img {
  filter: brightness(1.2);
}
.frame1 .social-group a img {
  width: 2.3vw;
  height: 2.3vw;
}
.frame1 .store-download-group {
  position: absolute;
  bottom: 5.2vw;
  right: 1.45vw;
  width: 24.3vw;
  height: 4.7vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("/images/store-group-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
  gap: 0.5vw;
}
.frame1 .store-download-group a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.frame1 .store-download-group a:hover {
  cursor: pointer;
}
.frame1 .store-download-group a:hover img {
  filter: brightness(1.2);
}
.frame1 .store-download-group a img {
  width: 11.3vw;
  height: 3.35vw;
}
.frame1 .video-bg {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}
.frame1 .video-bg.video-hiden {
  display: none;
}
.frame1 .video-bg.loaded {
  display: block;
  opacity: 1;
}
.frame1 .frame-inner,
.frame1 .login-card {
  position: relative;
  z-index: 2;
}
.frame1 .frame1-overlay {
  position: absolute;
  inset: 0;
  background: url("/images/frame-1-overlay.jpg") no-repeat center/cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  z-index: 3;
}
.frame1 .frame1-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.frame1 .frame1-overlay .frame1-overlay-inner {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.frame1 .frame1-overlay .frame1-overlay-feature {
  display: none;
  width: 100%;
}
.frame1 .frame1-overlay .frame1-overlay-feature.is-active {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container {
  padding-top: 8.6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4vw;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .submission-tabs-nav {
  display: flex;
  gap: 1.95vw;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .submission-tab-btn {
  width: 19.4vw;
  height: 4.2vw;
  font-family: "svn-agency-fb-bold";
  font-size: 2.739vw;
  text-transform: uppercase;
  color: #d5bcff;
  border: 0.2vw solid #d5bcff;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .submission-tab-btn.is-active {
  color: #342f86;
  background: #ffd049;
  border-color: #ffd049;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .submission-tab-panels {
  width: 100%;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .submission-tab-panel {
  display: none;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .submission-tab-panel.is-active {
  display: block;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .submission-panel-placeholder {
  color: #d5bcff;
  text-align: center;
  font-family: "svn-agency-fb-bold";
  margin-top: 2vw;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid {
  width: 57.3vw;
  margin: 0 auto;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-row {
  display: flex;
  justify-content: space-between;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-box {
  width: 11.7vw;
  height: 14.95vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-box-total {
  background-image: url("/images/summary/tong-bai-da-nop.png");
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-box-approved {
  background-image: url("/images/summary/da-duyet.png");
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-box-pending {
  background-image: url("/images/summary/dang-xet-duyet.png");
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-box-rejected {
  background-image: url("/images/summary/tu-choi.png");
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-box-number {
  font-size: 7.5vw;
  color: #ffffff;
  line-height: 1;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-body {
  display: flex;
  flex-direction: column;
  gap: 1vw;
  width: 100%;
  margin-top: 2.4vw;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-body-row {
  width: 100%;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-filter-row {
  display: flex;
  justify-content: flex-start;
  gap: 0.9vw;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-filter-btn {
  width: 11.9vw;
  height: 2.5vw;
  padding: 0;
  border: 0.05vw solid #ffffff;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-filter-btn img {
  display: block;
  max-width: none;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-filter-btn[data-filter=video] img {
  width: 4.5vw;
  height: 1.35vw;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-filter-btn[data-filter=livestream] img {
  width: 8.15vw;
  height: 1.35vw;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-filter-btn.is-active {
  color: #ffffff;
  background: #ae82f9;
  border: none;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-field-select {
  position: relative;
  width: 100%;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-field-select .summary-field-select-trigger {
  width: 100%;
  height: 2.6vw;
  padding: 0 0.8vw;
  border: 0.05vw solid #8a65d7;
  background: #ffffff;
  color: #888888;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.7285vw;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6vw;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-field-select .summary-field-select-label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-field-select .summary-field-select-arrow {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 0.3vw solid transparent;
  border-right: 0.3vw solid transparent;
  border-top: 0.35vw solid #8a65d7;
  transition: transform 0.2s ease;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-field-select.is-open .summary-field-select-arrow {
  transform: rotate(180deg);
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-field-select .summary-field-select-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.2vw);
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #ffffff;
  border: 0.05vw solid #8a65d7;
  box-sizing: border-box;
  z-index: 10;
  max-height: 13vw;
  overflow-y: auto;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-field-select.is-open .summary-field-select-menu {
  display: block;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-field-select .summary-field-select-option {
  padding: 0.6vw 0.8vw;
  color: #888888;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.7285vw;
  cursor: pointer;
}
.frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-field-select .summary-field-select-option:hover, .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-field-select .summary-field-select-option.is-selected {
  background: #f3ecff;
}
.frame1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3.6vw;
  background: url("/images/frame-1-background-bottom.png") no-repeat center bottom;
  background-size: cover;
  z-index: 3;
  pointer-events: none;
}
.frame1 .frame-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.frame1 .pc-logo {
  position: absolute;
  z-index: 4;
  top: 4.35vw;
  left: 3.6vw;
  width: 8.15vw;
  height: 6.1vw;
  background-image: url("/images/logo.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.frame1 .login-card {
  position: absolute;
  width: 100%;
  margin-top: 40.25vw;
  text-align: center;
}
.frame1 .login-card .login-btn {
  width: 19.3vw;
  height: 5.75vw;
  background-image: url("/images/login-btn.png");
  transform-origin: center center;
}
.frame1 .login-card .login-btn.btn-click-feedback {
  animation: frame-login-btn-click 0.26s ease-out forwards;
}
.frame1 .login-card .logout-btn {
  margin-top: 0.5vw;
  width: 26.75vw;
  height: 2.2vw;
  background-image: url("/images/logout-btn.png");
}
.frame1 .login-card .register-btn {
  margin-top: 0.25vw;
  width: 26.75vw;
  height: 2.2vw;
  background-image: url("/images/register-btn.png");
  transform-origin: center center;
}
.frame1 .login-card .register-btn.btn-click-feedback {
  animation: frame-login-btn-click 0.26s ease-out forwards;
}
.frame1 .title-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.frame1 .title-tag {
  position: absolute;
  width: 19.35vw;
  height: 3.85vw;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.frame1 .title-tag.tag-row-1 {
  top: 15vw;
}
.frame1 .title-tag.tag-row-2 {
  top: 20.5vw;
}
.frame1 .title-tag.tag-col-1 {
  left: 6.5vw;
}
.frame1 .title-tag.tag-col-2 {
  left: 11vw;
}
.frame1 .title-tag.tag-col-3 {
  right: 11vw;
}
.frame1 .title-tag.tag-col-4 {
  right: 6.5vw;
}
.frame1 .title-tag.title-tag-1 {
  background-image: url("/images/title-1.png");
}
.frame1 .title-tag.title-tag-2 {
  background-image: url("/images/title-2.png");
}
.frame1 .title-tag.title-tag-3 {
  background-image: url("/images/title-4.png");
}
.frame1 .title-tag.title-tag-4 {
  background-image: url("/images/title-3.png");
}
.frame1 .title-tags .title-tag-1,
.frame1 .title-tags .title-tag-2,
.frame1 .title-tags .title-tag-3,
.frame1 .title-tags .title-tag-4 {
  opacity: 0;
  animation: fadeInUp 1s forwards;
}
.frame1 .title-tags .title-tag-1 {
  animation-delay: 1s;
}
.frame1 .title-tags .title-tag-2 {
  animation-delay: 3s;
}
.frame1 .title-tags .title-tag-3 {
  animation-delay: 4s;
}
.frame1 .title-tags .title-tag-4 {
  animation-delay: 2s;
}

@media (max-width: 768px) {
  .frame1 {
    background-image: url("/images/frame1-mb.jpg");
    height: 171.875vw;
  }
  .frame1::after {
    height: 3.90625vw;
    background: url("/images/frame-1-background-bottom-mb.png") no-repeat center bottom;
    background-size: cover;
  }
  .frame1:has(.frame1-overlay.is-open)::after {
    z-index: 2;
  }
  .frame1 .social-group {
    gap: 1.2vw;
    top: 46.875vw;
    width: 7.421875vw;
    height: 22.3958333333vw;
  }
  .frame1 .social-group a img {
    width: 5.3385416667vw;
    height: 5.3385416667vw;
  }
  .frame1 .store-download-group {
    position: absolute;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 43.6197916667vw;
    height: 8.0729166667vw;
    gap: 0.9114583333vw;
    bottom: 7.2916666667vw;
  }
  .frame1 .store-download-group a img {
    width: 20.1822916667vw;
    height: 6.1197916667vw;
  }
  .frame1 .title-tag {
    position: absolute;
    width: 38.671875vw;
    height: 7.8125vw;
  }
  .frame1 .title-tag.tag-row-1 {
    top: 75.78125vw;
  }
  .frame1 .title-tag.tag-row-2 {
    top: 86.328125vw;
  }
  .frame1 .title-tag.tag-col-1 {
    left: 1.5625vw;
  }
  .frame1 .title-tag.tag-col-2 {
    left: 10.6770833333vw;
  }
  .frame1 .title-tag.tag-col-3 {
    right: 10.6770833333vw;
  }
  .frame1 .title-tag.tag-col-4 {
    right: 1.5625vw;
  }
  .frame1 .frame1-overlay {
    background-image: url("/images/frame-1-overlay-mb.jpg");
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container {
    padding-top: 22.3958333333vw;
    gap: 6.25vw;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .submission-tabs-nav {
    gap: 5.078125vw;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .submission-tab-btn {
    width: 41.015625vw;
    height: 8.8796713918vw;
    border-width: 0.4228414948vw;
    font-size: 5.7908142719vw;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .submission-panel-placeholder {
    margin-top: 5.2083333333vw;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid {
    width: auto;
    margin: 0 auto;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-row {
    display: grid;
    grid-template-columns: repeat(2, 29.4270833333vw);
    column-gap: 8.7239583333vw;
    row-gap: 0;
    justify-content: center;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-box {
    width: 29.4270833333vw;
    height: 37.6302083333vw;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-box-number {
    font-size: 19.53125vw;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-body {
    gap: 0;
    margin-top: 5.859375vw;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-filter-row {
    justify-content: center;
    gap: 2.8645833333vw;
    margin-bottom: 2.2135416667vw;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-phase-row {
    margin-bottom: 1.4322916667vw;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-filter-btn {
    width: 37.7604166667vw;
    height: 7.8125vw;
    border-width: 0.1302083333vw;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-filter-btn[data-filter=video] img {
    width: 11.71875vw;
    height: 3.515625vw;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-filter-btn[data-filter=livestream] img {
    width: 21.2239583333vw;
    height: 3.515625vw;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-field-select {
    width: 91.1458333333vw;
    margin: 0 auto;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-field-select .summary-field-select-trigger {
    height: 7.2916666667vw;
    padding: 0 2.0833333333vw;
    border-width: 0.1302083333vw;
    gap: 1.5625vw;
    font-size: 3.90625vw;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-field-select .summary-field-select-arrow {
    border-left-width: 0.78125vw;
    border-right-width: 0.78125vw;
    border-top-width: 0.9114583333vw;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-field-select .summary-field-select-menu {
    top: calc(100% + 0.5208333333vw);
    border-width: 0.1302083333vw;
    max-height: 33.8541666667vw;
  }
  .frame1 .frame1-overlay .submission-progress-feature .submission-tabs-container .summary-grid .summary-field-select .summary-field-select-option {
    padding: 1.5625vw 2.0833333333vw;
    font-size: 3.90625vw;
  }
  .frame1 .login-card {
    margin-top: 139.1927083333vw;
  }
  .frame1 .login-card .login-btn {
    width: 32.6822916667vw;
    height: 9.5052083333vw;
    background-image: url("/images/login-btn.png");
  }
  .frame1 .login-card .blank-button-big {
    width: 50.2604166667vw;
    height: 14.9739583333vw;
    font-size: 5.2734375vw;
  }
  .frame1 .login-card .logout-btn {
    margin-top: 3vw;
    width: 69.6614583333vw;
    height: 5.7291666667vw;
    background-image: url("/images/logout-btn.png");
  }
  .frame1 .login-card .register-btn {
    margin-top: 1.5625vw;
    width: 35.6770833333vw;
    height: 3.515625vw;
    background-image: url("/images/register-btn-mb.png");
    background-size: contain;
    transform-origin: center center;
  }
  .frame1 .login-card .register-btn.btn-click-feedback {
    animation: frame-login-btn-click 0.26s ease-out forwards;
  }
  /* Ẩn logo PC ở frame1 trên mobile */
  .frame1 .pc-logo {
    display: none;
  }
}
.frame1 .tiendo-feature {
  width: 100%;
}
.frame1 .tiendo-feature .tiendo-container {
  width: 65.65vw;
  margin: 0 auto;
  box-sizing: border-box;
}
.frame1 .tiendo-feature .tiendo-chiso-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}
.frame1 .tiendo-feature .tiendo-chiso-col {
  position: relative;
  flex-shrink: 0;
  width: 17.1vw;
  height: 21.85vw;
  background: url("/images/tiendo/chiso-background.png") no-repeat center/contain;
  box-sizing: border-box;
}
.frame1 .tiendo-feature .tiendo-chiso-value {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4.5vw;
  box-sizing: border-box;
  padding: 0 0.4vw;
  font-size: 11.038vw;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
}
.frame1 .tiendo-feature .tiendo-chiso-value .tiendo-chiso-value-text {
  display: inline-block;
  color: #ffffff;
  text-shadow: 0 0.15vw 0 rgba(90, 49, 177, 0.65);
}
.frame1 .tiendo-feature .tiendo-chiso-value.tiendo-chiso-value--compact {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 11.038vw;
  font-size: 7vw;
}
.frame1 .tiendo-feature .tiendo-chiso-label {
  position: absolute;
  left: 0;
  bottom: 0.25vw;
  width: 100%;
  height: 3vw;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #ffffff;
  font-size: 1.8995vw;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
.frame1 .tiendo-feature .tiendo-phase-position {
  width: 100%;
  margin-top: 5vw;
}
.frame1 .tiendo-feature .tiendo-phase-position-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.8vw;
}
.frame1 .tiendo-feature .tiendo-phase-position-title {
  flex-shrink: 0;
  color: #ffffff;
  font-size: 1.8995vw;
  line-height: 1;
  text-transform: uppercase;
}
.frame1 .tiendo-feature .tiendo-phase-position-rank {
  flex-shrink: 0;
  color: #ffd049;
  font-size: 2.6vw;
  line-height: 1;
  text-transform: uppercase;
  text-align: right;
}
.frame1 .tiendo-feature .tiendo-phase-position-bar {
  position: relative;
  width: 100%;
  height: 1.8vw;
  margin-top: 0.8vw;
  background: #ffffff;
  box-sizing: border-box;
  overflow: hidden;
}
.frame1 .tiendo-feature .tiendo-phase-position-bar-inner {
  position: absolute;
  top: 0.18vw;
  right: 0.12vw;
  bottom: 0.18vw;
  left: 0.12vw;
  overflow: hidden;
}
.frame1 .tiendo-feature .tiendo-phase-position-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(180deg, #5428a1 0%, #774cd0 100%);
  clip-path: polygon(0 0, calc(100% - 0.35vw) 0, 100% 100%, 0 100%);
  transition: width 0.3s ease;
}
.frame1 .tiendo-feature .tiendo-phase-position-bar-fill.is-full {
  clip-path: none;
}
.frame1 .tiendo-feature .tiendo-phase-position-bar-fill.tiendo-submission-metric-bar-fill--video {
  background: #ffaf31;
}
.frame1 .tiendo-feature .tiendo-phase-position-bar-fill.tiendo-submission-metric-bar-fill--livestream {
  background: #98cf48;
}
.frame1 .tiendo-feature .tiendo-phase-position-bar-fill.tiendo-submission-metric-bar-fill--views {
  background: #4bb4e6;
}
.frame1 .tiendo-feature .tiendo-phase-position-hint {
  margin: 0.6vw 0 0;
  font-size: 1.8995vw;
  font-style: italic;
  line-height: 1;
  color: #bb9aff;
}
.frame1 .tiendo-feature .tiendo-phase-position-hint .tiendo-phase-position-hint-highlight {
  color: #ffd049;
}
.frame1 .tiendo-feature .tiendo-submission-progress-rows {
  display: flex;
  flex-direction: column;
  gap: 1.4vw;
  margin-top: 1.6vw;
}
.frame1 .tiendo-feature .tiendo-submission-progress-rows .tiendo-phase-position-hint {
  margin: 0;
  font-style: normal;
}
.frame1 .tiendo-feature .tiendo-submission-metric-row {
  display: flex;
  align-items: center;
  width: 100%;
}
.frame1 .tiendo-feature .tiendo-submission-metric-row .tiendo-phase-position-hint {
  flex: 1;
  min-width: 0;
}
.frame1 .tiendo-feature .tiendo-submission-metric-row .tiendo-submission-metric-bar-col {
  flex-shrink: 0;
  width: 52.25vw;
}
.frame1 .tiendo-feature .tiendo-submission-metric-row .tiendo-submission-metric-bar {
  width: 100%;
  margin-top: 0;
}
.frame1 .tiendo-feature .tiendo-submission-progress-row {
  margin: 0;
  font-size: 1.8995vw;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  color: #ffffff;
}
.frame1 .tiendo-feature .tiendo-submission-progress-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2vw;
}
.frame1 .tiendo-feature .tiendo-submission-progress-header .tiendo-submission-progress-row {
  margin: 0;
}
.frame1 .tiendo-feature .tiendo-submission-tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4vw 1.3vw;
  border-radius: 49.95vw;
  background: rgba(255, 208, 73, 0.18);
  border: 0.1vw solid #ffd049;
  color: #ffd049;
  font-size: 1.5vw;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.frame1 .tiendo-feature .tiendo-submission-tier-badge[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .frame1 .frame1-overlay .frame1-overlay-inner {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .frame1 .frame1-overlay .tiendo-feature.is-active {
    padding-top: 15.625vw;
    padding-bottom: 3.4722222222vw;
    box-sizing: border-box;
  }
  .frame1 .tiendo-feature .tiendo-container {
    width: 92.5925925926vw;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .frame1 .tiendo-feature .tiendo-chiso-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 0;
  }
  .frame1 .tiendo-feature .tiendo-chiso-col {
    position: relative;
    flex-shrink: 0;
    width: 27.2135416667vw;
    height: 34.7728587963vw;
    background: url("/images/tiendo/chiso-background.png") no-repeat center/contain;
    box-sizing: border-box;
  }
  .frame1 .tiendo-feature .tiendo-chiso-value {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7.1614583333vw;
    box-sizing: border-box;
    padding: 0 0.6365740741vw;
    font-size: 17.5662615741vw;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    z-index: 1;
  }
  .frame1 .tiendo-feature .tiendo-chiso-value .tiendo-chiso-value-text {
    display: inline-block;
    color: #ffffff;
    text-shadow: 0 0.2387152778vw 0 rgba(90, 49, 177, 0.65);
  }
  .frame1 .tiendo-feature .tiendo-chiso-value.tiendo-chiso-value--compact {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 17.5662615741vw;
    font-size: 11vw;
  }
  .frame1 .tiendo-feature .tiendo-chiso-label {
    position: absolute;
    left: 0;
    bottom: 0.3978587963vw;
    width: 100%;
    height: 4.7743055556vw;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 3.0229311343vw;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
  }
  .frame1 .tiendo-feature .tiendo-phase-position {
    width: 100%;
    margin-top: 13.0208333333vw;
  }
  .frame1 .tiendo-feature .tiendo-phase-position .tiendo-phase-position-title {
    font-size: 4.1221788194vw;
  }
  .frame1 .tiendo-feature .tiendo-phase-position .tiendo-phase-position-rank {
    font-size: 5.6423611111vw;
  }
  .frame1 .tiendo-feature .tiendo-phase-position .tiendo-phase-position-hint,
  .frame1 .tiendo-feature .tiendo-phase-position .tiendo-submission-progress-row {
    font-size: 4.1221788194vw;
  }
  .frame1 .tiendo-feature .tiendo-phase-position-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1.1574074074vw;
  }
  .frame1 .tiendo-feature .tiendo-phase-position-title {
    flex-shrink: 0;
    color: #ffffff;
    line-height: 1;
    text-transform: uppercase;
  }
  .frame1 .tiendo-feature .tiendo-phase-position-rank {
    flex-shrink: 0;
    color: #ffd049;
    line-height: 1;
    text-transform: uppercase;
    text-align: right;
  }
  .frame1 .tiendo-feature .tiendo-phase-position-bar {
    position: relative;
    width: 100%;
    height: 2.6041666667vw;
    margin-top: 2.1701388889vw;
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
  }
  .frame1 .tiendo-feature .tiendo-phase-position-bar-inner {
    position: absolute;
    top: 0.2604166667vw;
    right: 0.1736111111vw;
    bottom: 0.2604166667vw;
    left: 0.1736111111vw;
    overflow: hidden;
  }
  .frame1 .tiendo-feature .tiendo-phase-position-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(180deg, #5428a1 0%, #774cd0 100%);
    clip-path: polygon(0 0, calc(100% - 0.5063657407vw) 0, 100% 100%, 0 100%);
    transition: width 0.3s ease;
  }
  .frame1 .tiendo-feature .tiendo-phase-position-bar-fill.is-full {
    clip-path: none;
  }
  .frame1 .tiendo-feature .tiendo-phase-position-bar-fill.tiendo-submission-metric-bar-fill--video {
    background: #ffaf31;
  }
  .frame1 .tiendo-feature .tiendo-phase-position-bar-fill.tiendo-submission-metric-bar-fill--livestream {
    background: #98cf48;
  }
  .frame1 .tiendo-feature .tiendo-phase-position-bar-fill.tiendo-submission-metric-bar-fill--views {
    background: #4bb4e6;
  }
  .frame1 .tiendo-feature .tiendo-phase-position-hint {
    margin: 0.8680555556vw 0 0;
    font-style: italic;
    line-height: 1;
    color: #bb9aff;
  }
  .frame1 .tiendo-feature .tiendo-phase-position-hint .tiendo-phase-position-hint-highlight {
    color: #ffd049;
  }
  .frame1 .tiendo-feature .tiendo-submission-progress-rows {
    display: flex;
    flex-direction: column;
    gap: 1.4467592593vw;
    margin-top: 4.3402777778vw;
  }
  .frame1 .tiendo-feature .tiendo-submission-progress-rows .tiendo-phase-position-hint {
    margin: 0;
    font-style: normal;
  }
  .frame1 .tiendo-feature .tiendo-submission-progress-rows .tiendo-submission-metric-row + .tiendo-submission-metric-row {
    margin-top: 2.8935185185vw;
  }
  .frame1 .tiendo-feature .tiendo-submission-metric-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 1.3020833333vw;
  }
  .frame1 .tiendo-feature .tiendo-submission-metric-row .tiendo-phase-position-hint {
    flex: none;
    width: 100%;
  }
  .frame1 .tiendo-feature .tiendo-submission-metric-row .tiendo-submission-metric-bar-col {
    flex-shrink: 0;
    width: 100%;
  }
  .frame1 .tiendo-feature .tiendo-submission-metric-row .tiendo-submission-metric-bar {
    width: 100%;
    margin-top: 0;
  }
  .frame1 .tiendo-feature .tiendo-submission-progress-row {
    margin: 0;
    line-height: 1;
    text-align: left;
    text-transform: uppercase;
    color: #ffffff;
  }
  .frame1 .tiendo-feature .tiendo-submission-progress-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.1574074074vw;
  }
  .frame1 .tiendo-feature .tiendo-submission-progress-header .tiendo-submission-progress-row {
    margin: 0;
  }
  .frame1 .tiendo-feature .tiendo-submission-tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4340277778vw 1.5914351852vw;
    border-radius: 72.265625vw;
    background: rgba(255, 208, 73, 0.18);
    border: 0.1446759259vw solid #ffd049;
    color: #ffd049;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .frame1 .tiendo-feature .tiendo-submission-tier-badge[hidden] {
    display: none;
  }
}
.frame1 .submission-progress-feature .submission-tab-panel[data-panel=list-nop] {
  width: 100%;
  display: flex;
  justify-content: center;
}
.frame1 .submission-progress-feature .list-nop-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.frame1 .submission-progress-feature .list-nop-table {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 73.3vw;
  height: 29.65vw;
  background: url("/images/list-nop/table-background.png") no-repeat center/contain;
  box-sizing: border-box;
  padding: 1.6vw 2.25vw 2.25vw;
  overflow: hidden;
}
.frame1 .submission-progress-feature .list-nop-table.is-loading-initial .list-nop-table-body {
  visibility: hidden;
}
.frame1 .submission-progress-feature .list-nop-table.is-stale .list-nop-stale-overlay {
  display: block;
}
.frame1 .submission-progress-feature .list-nop-table-header,
.frame1 .submission-progress-feature .list-nop-row {
  display: grid;
  grid-template-columns: 0.33fr 1fr 20vw 1fr 1fr 1fr;
  align-items: center;
  gap: 0.4vw;
  padding: 0 0.6vw;
  box-sizing: border-box;
}
.frame1 .submission-progress-feature .list-nop-table-header {
  height: 5.17vw;
  color: #ffd049;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 2.107vw;
  text-transform: uppercase;
  text-align: center;
}
.frame1 .submission-progress-feature .list-nop-table-header .list-nop-col {
  text-align: center;
}
.frame1 .submission-progress-feature .list-nop-table-body {
  margin-top: 0;
  height: 20.68vw;
}
.frame1 .submission-progress-feature .list-nop-row {
  height: 5.17vw;
  color: #ffffff;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 2.107vw;
  border-radius: 0.2vw;
  cursor: default;
  transition: background 0.15s ease;
}
.frame1 .submission-progress-feature .list-nop-row:hover {
  background: rgba(174, 130, 249, 0.35);
}
.frame1 .submission-progress-feature .list-nop-row:active, .frame1 .submission-progress-feature .list-nop-row.is-pressed {
  background: rgba(174, 130, 249, 0.55);
}
.frame1 .submission-progress-feature .list-nop-row .list-nop-col {
  text-align: center;
}
.frame1 .submission-progress-feature .list-nop-row .list-nop-col-link {
  text-align: left;
  font-size: 1.617vw;
}
.frame1 .submission-progress-feature .list-nop-row .list-nop-col-link a {
  font-size: inherit;
}
.frame1 .submission-progress-feature .list-nop-row .list-nop-col-view {
  text-align: right;
}
.frame1 .submission-progress-feature .list-nop-col {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame1 .submission-progress-feature .list-nop-col-link {
  min-width: 0;
}
.frame1 .submission-progress-feature .list-nop-col-link a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffd049;
  text-decoration: none;
}
.frame1 .submission-progress-feature .list-nop-col-link a:hover {
  text-decoration: underline;
}
.frame1 .submission-progress-feature .list-nop-col-link a:focus {
  outline: 0.1vw solid #ffd049;
  outline-offset: 0.1vw;
}
.frame1 .submission-progress-feature .list-nop-col-view .list-nop-view-inner {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8vw;
  max-width: 100%;
}
.frame1 .submission-progress-feature .list-nop-col-view .list-nop-view-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame1 .submission-progress-feature .list-nop-col-view .list-nop-view-icon {
  width: 1.65vw;
  height: auto;
  flex-shrink: 0;
  display: block;
}
.frame1 .submission-progress-feature .list-nop-col-note {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  white-space: normal;
  cursor: default;
}
.frame1 .submission-progress-feature .list-nop-note-btn {
  width: 4.05vw;
  height: 1.75vw;
  padding: 0;
  border: none;
  background: #7147c7;
  color: #ffffff;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 2.107vw;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.frame1 .submission-progress-feature .list-nop-note-btn .list-nop-note-btn-label {
  display: block;
  line-height: 1;
  transform: translateY(-0.3vw);
}
.frame1 .submission-progress-feature .list-nop-status-approved {
  color: #00e410;
}
.frame1 .submission-progress-feature .list-nop-status-pending {
  color: #ffd149;
}
.frame1 .submission-progress-feature .list-nop-status-rejected {
  color: #e71923;
}
.frame1 .submission-progress-feature .list-nop-state {
  position: absolute;
  inset: 1.6vw 2.25vw 2.25vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8vw;
  text-align: center;
  z-index: 2;
}
.frame1 .submission-progress-feature .list-nop-state[hidden] {
  display: none !important;
}
.frame1 .submission-progress-feature .list-nop-spinner {
  width: 2.4vw;
  height: 2.4vw;
  border: 0.2vw solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffd049;
  border-radius: 50%;
  animation: list-nop-spin 0.8s linear infinite;
}
@keyframes list-nop-spin {
  to {
    transform: rotate(360deg);
  }
}
.frame1 .submission-progress-feature .list-nop-skeleton-rows {
  width: 100%;
  height: 20.68vw;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.frame1 .submission-progress-feature .list-nop-skeleton-row {
  flex: 1;
  min-height: 0;
  height: 5.17vw;
  border-radius: 0.2vw;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.08) 75%);
  background-size: 200% 100%;
  animation: list-nop-shimmer 1.2s ease-in-out infinite;
}
@keyframes list-nop-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.frame1 .submission-progress-feature .list-nop-empty-text,
.frame1 .submission-progress-feature .list-nop-error-text {
  color: #d5bcff;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.6vw;
  margin: 0;
}
.frame1 .submission-progress-feature .list-nop-retry-btn {
  padding: 0.5vw 1.4vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.4vw;
  color: #342f86;
  background: #ffd049;
  border: 0.1vw solid #ffd049;
  cursor: pointer;
}
.frame1 .submission-progress-feature .list-nop-stale-overlay {
  position: absolute;
  inset: 1.6vw 2.25vw 2.25vw;
  background: rgba(20, 10, 40, 0.45);
  z-index: 3;
  display: none;
  pointer-events: none;
}
.frame1 .submission-progress-feature .list-nop-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2vw;
  height: 3.8vw;
  flex-shrink: 0;
  margin-top: auto;
  border-top: 0.1vw solid #371d73;
  box-sizing: border-box;
}
.frame1 .submission-progress-feature .list-nop-page-btn {
  padding: 0;
  border: none;
  background: none;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.628vw;
  color: #8c8c8c;
  cursor: pointer;
}
.frame1 .submission-progress-feature .list-nop-page-btn.is-active, .frame1 .submission-progress-feature .list-nop-page-btn.list-nop-page-prev:not(:disabled), .frame1 .submission-progress-feature .list-nop-page-btn.list-nop-page-next:not(:disabled) {
  color: #ffffff;
}
.frame1 .submission-progress-feature .list-nop-page-btn:disabled {
  color: #8c8c8c;
  cursor: default;
}
.frame1 .submission-progress-feature .list-nop-page-ellipsis {
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.628vw;
  color: #8c8c8c;
  user-select: none;
}

.popup-submission-detail .popup-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 57.35vw;
  height: 37.65vw;
  background: url("/images/list-nop/detail-background.png") no-repeat center/contain;
  box-sizing: border-box;
  padding: 1.5vw;
  padding-top: 4.5vw;
  margin-top: 0;
  overflow: visible;
}
.popup-submission-detail .close-btn {
  position: absolute;
  top: 0.45vw;
  right: -1.6vw;
  width: 1.9vw;
  height: 1.7vw;
  z-index: 2;
  background: url("/images/X.png") no-repeat center center;
  background-size: cover;
}
.popup-submission-detail .close-btn:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.popup-submission-detail .list-nop-detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.popup-submission-detail .list-nop-detail-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.8vw;
  flex-shrink: 0;
  margin-top: auto;
}
.popup-submission-detail .list-nop-detail-action-btn {
  width: 9.9vw;
  height: 2.4vw;
  padding: 0;
  border: none;
  background: #7147c7;
  color: #ffffff;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.6vw;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  flex-shrink: 0;
}
.popup-submission-detail .list-nop-detail-title {
  margin: 0 0 2vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 2.926vw;
  line-height: 1.1;
  text-transform: uppercase;
  background: linear-gradient(180deg, #8952db 0%, #413593 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.popup-submission-detail .list-nop-detail-reject {
  width: 100%;
  max-height: 7.2vw;
  margin: 0 0 2vw;
  padding: 1.45vw 1vw;
  box-sizing: border-box;
  background: #ffffff;
  color: #e71923;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 2.1725vw;
  line-height: 1.2;
  overflow-y: auto;
  word-break: break-word;
}
.popup-submission-detail .list-nop-detail-reject .list-nop-detail-reject-label {
  font-family: "svn-agency-fb-bold", sans-serif;
}
.popup-submission-detail .list-nop-detail-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2vw;
  align-items: start;
}
.popup-submission-detail .list-nop-detail-fields .list-nop-detail-item:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.popup-submission-detail .list-nop-detail-fields .list-nop-detail-item:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}
.popup-submission-detail .list-nop-detail-fields .list-nop-detail-item:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
}
.popup-submission-detail .list-nop-detail-fields .list-nop-detail-item:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}
.popup-submission-detail .list-nop-detail-fields .list-nop-detail-item:nth-child(5) {
  grid-column: 1;
  grid-row: 3;
}
.popup-submission-detail .list-nop-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
  min-width: 0;
}
.popup-submission-detail .list-nop-detail-item-label {
  color: #000000;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.25vw;
  line-height: 1.2;
  text-transform: uppercase;
}
.popup-submission-detail .list-nop-detail-item-value {
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.7525vw;
  line-height: 1.2;
  background: linear-gradient(180deg, #8952db 0%, #413593 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popup-submission-detail .list-nop-detail-item-value--link {
  display: block;
  overflow: hidden;
  min-width: 0;
}
.popup-submission-detail .list-nop-detail-link {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: inherit;
  font-size: inherit;
  background: linear-gradient(180deg, #8952db 0%, #413593 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: none;
}
.popup-submission-detail .list-nop-detail-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .frame1 .submission-progress-feature .list-nop-wrap {
    gap: 0;
  }
  .frame1 .submission-progress-feature .list-nop-pagination {
    gap: 1.5134720327vw;
    height: 4.792661437vw;
    border-top-width: 0.1261226694vw;
  }
  .frame1 .submission-progress-feature .list-nop-page-btn {
    font-size: 2.0532770578vw;
  }
  .frame1 .submission-progress-feature .list-nop-page-ellipsis {
    font-size: 2.0532770578vw;
  }
  .frame1 .submission-progress-feature .list-nop-table {
    width: 92.4479166667vw;
    height: 37.3953714757vw;
    padding: 2.0179627103vw 2.8377600614vw 2.8377600614vw;
  }
  .frame1 .submission-progress-feature .list-nop-table-header,
  .frame1 .submission-progress-feature .list-nop-row {
    grid-template-columns: 0.33fr 1fr 25.224533879vw 1fr 1fr 1fr;
    gap: 0.5044906776vw;
    padding: 0 0.7567360164vw;
  }
  .frame1 .submission-progress-feature .list-nop-table-header {
    height: 6.5205420077vw;
    font-size: 2.6574046442vw;
    text-align: center;
  }
  .frame1 .submission-progress-feature .list-nop-table-body {
    margin-top: 0;
    height: 26.0821680309vw;
  }
  .frame1 .submission-progress-feature .list-nop-row {
    height: 6.5205420077vw;
    font-size: 2.6574046442vw;
    border-radius: 0.2522453388vw;
  }
  .frame1 .submission-progress-feature .list-nop-row .list-nop-col {
    text-align: center;
  }
  .frame1 .submission-progress-feature .list-nop-row .list-nop-col-link {
    text-align: left;
    font-size: 2.0394035641vw;
  }
  .frame1 .submission-progress-feature .list-nop-row .list-nop-col-view {
    text-align: right;
  }
  .frame1 .submission-progress-feature .list-nop-col-view .list-nop-view-inner {
    gap: 1.0089813552vw;
  }
  .frame1 .submission-progress-feature .list-nop-col-view .list-nop-view-icon {
    width: 2.081024045vw;
  }
  .frame1 .submission-progress-feature .list-nop-col-link a:focus {
    outline-width: 0.1261226694vw;
    outline-offset: 0.1261226694vw;
  }
  .frame1 .submission-progress-feature .list-nop-state {
    inset: 2.0179627103vw 2.8377600614vw 2.8377600614vw;
    gap: 1.0089813552vw;
  }
  .frame1 .submission-progress-feature .list-nop-spinner {
    width: 3.0269440655vw;
    height: 3.0269440655vw;
    border-width: 0.2522453388vw;
  }
  .frame1 .submission-progress-feature .list-nop-skeleton-rows {
    height: 26.0821680309vw;
    gap: 0;
  }
  .frame1 .submission-progress-feature .list-nop-skeleton-row {
    height: 6.5205420077vw;
    border-radius: 0.2522453388vw;
  }
  .frame1 .submission-progress-feature .list-nop-empty-text,
  .frame1 .submission-progress-feature .list-nop-error-text {
    font-size: 2.0179627103vw;
  }
  .frame1 .submission-progress-feature .list-nop-retry-btn {
    padding: 0.630613347vw 1.7657173715vw;
    font-size: 1.7657173715vw;
    border-width: 0.1261226694vw;
  }
  .frame1 .submission-progress-feature .list-nop-stale-overlay {
    inset: 2.0179627103vw 2.8377600614vw 2.8377600614vw;
  }
  .frame1 .submission-progress-feature .list-nop-note-btn {
    width: 5.1079681105vw;
    height: 2.2071467144vw;
    font-size: 2.6574046442vw;
  }
  .frame1 .submission-progress-feature .list-nop-note-btn .list-nop-note-btn-label {
    transform: translateY(-0.3783680082vw);
  }
}
@media (max-width: 768px) {
  .popup-submission-detail {
    align-items: center;
  }
  .popup-submission-detail .popup-container {
    width: 88.9322916667vw;
    height: 159.1145833333vw;
    max-height: 100dvh;
    background: url("/images/list-nop/detail-background-mb.png") no-repeat center top/100% 100%;
    padding: 2.3260407585vw;
    padding-top: 0;
    padding-bottom: 4.6875vw;
    overflow: visible;
  }
  .popup-submission-detail .close-btn {
    top: 1.171875vw;
    right: -4.1666666667vw;
    width: 4.9479166667vw;
    height: 4.4270833333vw;
    z-index: 2;
  }
  .popup-submission-detail .list-nop-detail-body {
    padding-top: 24.7395833333vw;
  }
  .popup-submission-detail .list-nop-detail-title {
    position: absolute;
    top: 8.0729166667vw;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    font-size: 12.1861979167vw;
    line-height: 1.1;
    text-align: center;
  }
  .popup-submission-detail .list-nop-detail-reject {
    max-height: 30.4282868526vw;
    margin-bottom: 8.4523019035vw;
    padding: 1.953125vw;
    font-size: 4.0885416667vw;
    text-align: center;
  }
  .popup-submission-detail .list-nop-detail-fields {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5.04296875vw;
  }
  .popup-submission-detail .list-nop-detail-fields .list-nop-detail-item {
    grid-column: auto;
    grid-row: auto;
  }
  .popup-submission-detail .list-nop-detail-item {
    align-items: center;
    width: 100%;
    gap: 1.3020833333vw;
  }
  .popup-submission-detail .list-nop-detail-item-label {
    width: 100%;
    font-size: 2.765625vw;
    text-align: center;
  }
  .popup-submission-detail .list-nop-detail-item-value {
    width: 100%;
    font-size: 5.04296875vw;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .popup-submission-detail .list-nop-detail-item-value--link {
    overflow: hidden;
  }
  .popup-submission-detail .list-nop-detail-link {
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
  }
  .popup-submission-detail .list-nop-detail-actions {
    gap: 1.2405550712vw;
    justify-content: center;
    padding-top: 5.0713811421vw;
  }
  .popup-submission-detail .list-nop-detail-action-btn {
    width: 26.0416666667vw;
    height: 6.25vw;
    font-size: 3.55859375vw;
  }
}
.frame1 .support-history-feature .support-history-wrap {
  padding-top: 8.6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4vw;
  width: 100%;
}
.frame1 .support-history-feature .support-history-header {
  width: 61.7vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.frame1 .support-history-feature .support-history-title {
  margin: 0;
  font-size: 3.737vw;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  background: linear-gradient(180deg, #fefdff 0%, #ba97fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.frame1 .support-history-feature .support-history-table {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 61.7vw;
  height: 29.65vw;
  background-image: url("/images/list-nop/table-background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 1.6vw 2.25vw 2.25vw;
  overflow: hidden;
}
.frame1 .support-history-feature .support-history-table-header {
  display: grid;
  grid-template-columns: 0.5fr 1fr 2fr 1fr;
  align-items: center;
  gap: 0.4vw;
  padding: 0 0.6vw;
  height: 5.17vw;
  color: #ffd049;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 2.107vw;
  text-transform: uppercase;
  text-align: center;
  box-sizing: border-box;
}
.frame1 .support-history-feature .support-history-table-body {
  height: 20.68vw;
  overflow: hidden;
  flex-shrink: 0;
}
.frame1 .support-history-feature .support-history-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2vw;
  height: 3.8vw;
  flex-shrink: 0;
  margin-top: auto;
  border-top: 0.1vw solid #371d73;
  box-sizing: border-box;
}
.frame1 .support-history-feature .support-history-page-btn {
  padding: 0;
  border: none;
  background: none;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.628vw;
  color: #8c8c8c;
  cursor: pointer;
}
.frame1 .support-history-feature .support-history-page-btn.is-active, .frame1 .support-history-feature .support-history-page-btn.support-history-page-prev:not(:disabled), .frame1 .support-history-feature .support-history-page-btn.support-history-page-next:not(:disabled) {
  color: #ffffff;
}
.frame1 .support-history-feature .support-history-page-btn:disabled {
  color: #8c8c8c;
  cursor: default;
}
.frame1 .support-history-feature .support-history-page-ellipsis {
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.628vw;
  color: #8c8c8c;
  user-select: none;
}
.frame1 .support-history-feature .support-history-row {
  display: grid;
  grid-template-columns: 0.5fr 1fr 2fr 1fr;
  align-items: center;
  gap: 0.4vw;
  padding: 0 0.6vw;
  height: 5.17vw;
  color: #ffffff;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.6vw;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
}
.frame1 .support-history-feature .support-history-row:hover {
  background: rgba(255, 255, 255, 0.08);
}
.frame1 .support-history-feature .support-history-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "svn-agency-fb-bold", sans-serif;
}
.frame1 .support-history-feature .support-history-status.is-pending {
  color: #ffd049;
}
.frame1 .support-history-feature .support-history-status.is-processed {
  color: #6ee7a8;
}
.frame1 .support-history-feature .support-history-placeholder.is-hidden {
  display: none;
}
.frame1 .support-history-feature .support-history-placeholder {
  position: absolute;
  inset: 1.6vw 2.25vw 2.25vw;
  top: 6.77vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2vw;
  text-align: center;
}
.frame1 .support-history-feature .support-history-placeholder-text {
  margin: 0;
  color: #d5bcff;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.6vw;
}
.frame1 .support-history-feature .support-history-submit-btn {
  width: 9.8vw;
  height: 2.05vw;
  padding: 0;
  border: none;
  background-color: #ffd049;
  background-image: none;
  color: #342f86;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.6vw;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  flex-shrink: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.2s ease, filter 0.2s ease;
}
.frame1 .support-history-feature .support-history-submit-btn:hover {
  background-color: #ffe27a;
  filter: none;
}

.popup-submit-ticket .popup-container {
  position: relative;
  width: 60.2vw;
  height: 50.2vw;
  background: url("/images/support/popup-background.png") no-repeat center;
  background-size: 100% 100%;
  margin-top: 0;
  box-sizing: border-box;
  overflow: visible;
}
.popup-submit-ticket #submit-ticket-form {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100%;
  box-sizing: border-box;
  overflow: visible;
}
.popup-submit-ticket .support-ticket-form-scroll {
  flex: 0 0 auto;
  width: 55.3vw;
  margin: 10vw auto 0;
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
}
.popup-submit-ticket .support-ticket-form {
  width: 100%;
  height: 38.55vw;
  background: #200d4b;
  border: 0.1vw solid #ffffff;
  border-radius: 0.4vw;
  padding: 1.45vw 3.1vw 3.7vw;
  box-sizing: border-box;
  overflow: visible;
  margin: 0 auto;
}
.popup-submit-ticket .support-ticket-form input,
.popup-submit-ticket .support-ticket-form textarea,
.popup-submit-ticket .support-ticket-form .support-ticket-select-trigger,
.popup-submit-ticket .support-ticket-form .support-ticket-select-label {
  font-family: "svn-agency-fb-black", sans-serif;
}
.popup-submit-ticket .support-ticket-form input::placeholder,
.popup-submit-ticket .support-ticket-form textarea::placeholder {
  font-family: "svn-agency-fb-black", sans-serif;
}
.popup-submit-ticket .support-ticket-row {
  display: grid;
  gap: 0.7vw;
}
.popup-submit-ticket .support-ticket-row--2col {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 0.7vw;
}
.popup-submit-ticket .support-ticket-row--2col .support-ticket-field {
  margin-bottom: 0;
}
.popup-submit-ticket .support-ticket-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0.9vw;
}
.popup-submit-ticket .support-ticket-field:last-child {
  margin-bottom: 0;
}
.popup-submit-ticket .support-ticket-field.is-error .support-ticket-input,
.popup-submit-ticket .support-ticket-field.is-error .support-ticket-textarea,
.popup-submit-ticket .support-ticket-field.is-error .support-ticket-select-trigger,
.popup-submit-ticket .support-ticket-field.is-error .support-ticket-dropzone {
  border-color: #e71923;
}
.popup-submit-ticket .support-ticket-label {
  color: #927dd0;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.4vw;
  line-height: 1.2;
  padding-left: 0.4vw;
  margin-bottom: 0.5vw;
  box-sizing: border-box;
}
.popup-submit-ticket .support-ticket-input,
.popup-submit-ticket .support-ticket-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 0.1vw solid #633eb1;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 1.7vw;
  outline: none;
}
.popup-submit-ticket .support-ticket-input::placeholder,
.popup-submit-ticket .support-ticket-textarea::placeholder {
  color: rgba(213, 188, 255, 0.55);
  font-size: 1.7vw;
}
.popup-submit-ticket .support-ticket-input:focus,
.popup-submit-ticket .support-ticket-textarea:focus {
  border-color: #633eb1;
  background: rgba(255, 255, 255, 0.1);
}
.popup-submit-ticket .support-ticket-input {
  height: 2.5vw;
  padding: 0.45vw;
  line-height: 1.2;
}
.popup-submit-ticket .support-ticket-textarea {
  height: 6.2vw;
  min-height: 6.2vw;
  padding: 0.45vw;
  resize: vertical;
}
.popup-submit-ticket .support-ticket-hint {
  margin: 0;
  padding: 0 0 0 0.4vw;
  color: #ffffff;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.05vw;
  line-height: 1.3;
}
.popup-submit-ticket .support-ticket-select {
  position: relative;
  width: 100%;
}
.popup-submit-ticket .support-ticket-select .support-ticket-select-trigger {
  width: 100%;
  height: 2.5vw;
  padding: 0.45vw;
  border: 0.1vw solid #633eb1;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 1.7vw;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6vw;
}
.popup-submit-ticket .support-ticket-select .support-ticket-select-label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.7vw;
}
.popup-submit-ticket .support-ticket-select .support-ticket-select-arrow {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 0.3vw solid transparent;
  border-right: 0.3vw solid transparent;
  border-top: 0.35vw solid #ba97fb;
  transition: transform 0.2s ease;
}
.popup-submit-ticket .support-ticket-select.is-open .support-ticket-select-arrow {
  transform: rotate(180deg);
}
.popup-submit-ticket .support-ticket-select .support-ticket-select-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.2vw);
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #2a1f5e;
  border: 0.05vw solid rgba(186, 151, 251, 0.55);
  border-radius: 0.2vw;
  box-sizing: border-box;
  z-index: 5;
  max-height: 11vw;
  overflow-y: auto;
}
.popup-submit-ticket .support-ticket-select.is-open .support-ticket-select-menu {
  display: block;
}
.popup-submit-ticket .support-ticket-select .support-ticket-select-option {
  padding: 0.5vw 0.8vw;
  color: #d5bcff;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1vw;
  cursor: pointer;
}
.popup-submit-ticket .support-ticket-select .support-ticket-select-option:hover, .popup-submit-ticket .support-ticket-select .support-ticket-select-option.is-selected {
  background: rgba(186, 151, 251, 0.25);
}
.popup-submit-ticket .support-ticket-dropzone {
  border: 0.05vw dashed rgba(186, 151, 251, 0.55);
  border-radius: 0.2vw;
  background: rgba(255, 255, 255, 0.04);
  padding: 1.2vw 0.8vw;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.popup-submit-ticket .support-ticket-dropzone:hover, .popup-submit-ticket .support-ticket-dropzone.is-dragover {
  border-color: #ba97fb;
  background: rgba(186, 151, 251, 0.12);
}
.popup-submit-ticket .support-ticket-dropzone-text {
  margin: 0 0 0.4vw;
  color: #d5bcff;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.1vw;
}
.popup-submit-ticket .support-ticket-upload-note {
  margin: 0;
  color: rgba(213, 188, 255, 0.65);
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 0.8vw;
  line-height: 1.4;
}
.popup-submit-ticket .support-ticket-upload-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6vw;
  margin-top: 0.8vw;
}
.popup-submit-ticket .support-ticket-upload-item {
  position: relative;
  width: 3.5vw;
  height: 3.5vw;
  border: 0.05vw solid rgba(186, 151, 251, 0.45);
  border-radius: 0.2vw;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  box-sizing: border-box;
}
.popup-submit-ticket .support-ticket-upload-item img,
.popup-submit-ticket .support-ticket-upload-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.popup-submit-ticket .support-ticket-upload-item-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.2vw 0.3vw;
  background: rgba(26, 18, 58, 0.85);
  color: #d5bcff;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 0.7vw;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popup-submit-ticket .support-ticket-upload-remove {
  position: absolute;
  top: 0.2vw;
  right: 0.2vw;
  width: 1vw;
  height: 1vw;
  border: none;
  border-radius: 50%;
  background: rgba(231, 25, 35, 0.9);
  color: #ffffff;
  font-size: 0.7vw;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.popup-submit-ticket .support-ticket-form-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.8vw;
  padding: 2.4vw 3.6vw 2.4vw;
  flex-shrink: 0;
}
.popup-submit-ticket .support-ticket-btn {
  min-width: 8vw;
  height: 2.2vw;
  padding: 0 1.2vw;
  border: none;
  border-radius: 0.2vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.2vw;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, filter 0.2s ease;
}
.popup-submit-ticket .support-ticket-btn-cancel,
.popup-submit-ticket .support-ticket-btn-submit {
  background-color: #7147c7;
  color: #ffd049;
}
.popup-submit-ticket .support-ticket-btn-cancel:hover,
.popup-submit-ticket .support-ticket-btn-submit:hover {
  background-color: #7147c7;
}

@media (max-width: 768px) {
  .frame1 .support-history-feature .support-history-wrap {
    padding-top: 22.3958333333vw;
    gap: 0;
  }
  .frame1 .support-history-feature .support-history-header {
    width: 94.2708333333vw;
    position: static;
    flex-direction: column;
    align-items: center;
  }
  .frame1 .support-history-feature .support-history-title {
    font-size: 9.7317708333vw;
    line-height: 1.5;
  }
  .frame1 .support-history-feature .support-history-table {
    width: 94.2708333333vw;
    height: 45.3019482712vw;
    background-size: 100% 100%;
    padding: 2.4446245273vw 3.4377532415vw 3.4377532415vw;
  }
  .frame1 .support-history-feature .support-history-table-header {
    grid-template-columns: 0.5fr 1fr 2fr 1fr;
    gap: 0.6111561318vw;
    padding: 0 0.9167341977vw;
    height: 7.8991930038vw;
    font-size: 3.2192649244vw;
  }
  .frame1 .support-history-feature .support-history-table-body {
    height: 31.5967720151vw;
    overflow: hidden;
  }
  .frame1 .support-history-feature .support-history-pagination {
    gap: 1.8334683955vw;
    height: 5.8059832523vw;
    border-top-width: 0.152789033vw;
  }
  .frame1 .support-history-feature .support-history-page-btn,
  .frame1 .support-history-feature .support-history-page-ellipsis {
    font-size: 2.4874054565vw;
  }
  .frame1 .support-history-feature .support-history-row {
    grid-template-columns: 0.5fr 1fr 2fr 1fr;
    gap: 0.6111561318vw;
    padding: 0 0.9167341977vw;
    height: 7.8991930038vw;
    font-size: 2.4446245273vw;
    cursor: pointer;
  }
  .frame1 .support-history-feature .support-history-placeholder {
    inset: 2.4446245273vw 3.4377532415vw 3.4377532415vw;
    top: 10.3438175311vw;
    gap: 1.8334683955vw;
  }
  .frame1 .support-history-feature .support-history-placeholder-text {
    font-size: 2.4446245273vw;
  }
  .frame1 .support-history-feature .support-history-submit-btn {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    width: 25.5208333333vw;
    height: 5.3385416667vw;
    margin-top: 0.6510416667vw;
    margin-bottom: 3.2552083333vw;
    font-size: 4.1666666667vw;
  }
  .popup-submit-ticket .popup-container {
    width: 88.1510416667vw;
    height: 136.328125vw;
    background-image: url("/images/support/popup-background-mb.png");
    overflow: visible;
  }
  .popup-submit-ticket #submit-ticket-form {
    position: relative;
  }
  .popup-submit-ticket .support-ticket-form-scroll {
    margin: 31.25vw auto 0;
    padding: 0;
    width: 83.4635416667vw;
  }
  .popup-submit-ticket .support-ticket-form {
    width: 100%;
    height: 99.7395833333vw;
    border: 0.2604166667vw solid #ffffff;
    border-radius: 1.0416666667vw;
    padding: 3.90625vw 4.5572916667vw 10.0260416667vw;
    box-sizing: border-box;
  }
  .popup-submit-ticket .support-ticket-row {
    gap: 1.8229166667vw;
  }
  .popup-submit-ticket .support-ticket-row--2col {
    grid-template-columns: 1fr;
    margin-bottom: 1.8229166667vw;
  }
  .popup-submit-ticket .support-ticket-row--2col .support-ticket-field {
    margin-bottom: 0;
  }
  .popup-submit-ticket .support-ticket-field {
    gap: 0;
    margin-bottom: 2.34375vw;
  }
  .popup-submit-ticket .support-ticket-label {
    font-size: 2.0833333333vw;
    padding-left: 1.0416666667vw;
    margin-bottom: 1.3020833333vw;
  }
  .popup-submit-ticket .support-ticket-input {
    height: 3.6458333333vw;
    padding: 1.171875vw;
    line-height: 1.2;
  }
  .popup-submit-ticket .support-ticket-input,
  .popup-submit-ticket .support-ticket-textarea {
    border: 0.2604166667vw solid #633eb1;
    border-radius: 0;
    font-size: 2.4739583333vw;
  }
  .popup-submit-ticket .support-ticket-input::placeholder,
  .popup-submit-ticket .support-ticket-textarea::placeholder {
    font-size: 2.4739583333vw;
  }
  .popup-submit-ticket .support-ticket-textarea {
    height: 9.1145833333vw;
    min-height: 9.1145833333vw;
    padding: 1.171875vw;
  }
  .popup-submit-ticket .support-ticket-hint {
    font-size: 1.5625vw;
  }
  .popup-submit-ticket .support-ticket-select .support-ticket-select-trigger {
    height: 5.9895833333vw;
    padding: 1.171875vw;
    border: 0.2604166667vw solid #633eb1;
    border-radius: 0;
    font-size: 2.4739583333vw;
  }
  .popup-submit-ticket .support-ticket-select .support-ticket-select-label {
    font-size: 2.4739583333vw;
  }
  .popup-submit-ticket .support-ticket-select .support-ticket-select-arrow {
    border-left-width: 0.78125vw;
    border-right-width: 0.78125vw;
    border-top-width: 0.9114583333vw;
  }
  .popup-submit-ticket .support-ticket-select .support-ticket-select-menu {
    border-width: 0.1302083333vw;
    border-radius: 0.5208333333vw;
    max-height: 17.05902201vw;
  }
  .popup-submit-ticket .support-ticket-select .support-ticket-select-option {
    padding: 0.7754100914vw 1.2406561462vw;
    font-size: 2.6041666667vw;
  }
  .popup-submit-ticket .support-ticket-dropzone {
    border-width: 0.1302083333vw;
    border-radius: 0.5208333333vw;
    padding: 1.8609842193vw 1.2406561462vw;
  }
  .popup-submit-ticket .support-ticket-dropzone-text {
    margin-bottom: 0.6203280731vw;
    font-size: 2.8645833333vw;
  }
  .popup-submit-ticket .support-ticket-upload-note {
    font-size: 2.0833333333vw;
  }
  .popup-submit-ticket .support-ticket-upload-grid {
    gap: 0.9304921096vw;
    margin-top: 1.2406561462vw;
  }
  .popup-submit-ticket .support-ticket-upload-item {
    width: 5.4278706395vw;
    height: 5.4278706395vw;
    border-width: 0.1302083333vw;
    border-radius: 0.5208333333vw;
  }
  .popup-submit-ticket .support-ticket-upload-item-label {
    padding: 0.5208333333vw 0.78125vw;
    font-size: 1.8229166667vw;
  }
  .popup-submit-ticket .support-ticket-upload-remove {
    top: 0.5208333333vw;
    right: 0.5208333333vw;
    width: 2.6041666667vw;
    height: 2.6041666667vw;
    font-size: 1.8229166667vw;
  }
  .popup-submit-ticket .support-ticket-form-footer {
    position: relative;
    z-index: 1;
    width: 83.4635416667vw;
    margin: -10.0260416667vw auto 0;
    padding: 0 4.5572916667vw;
    justify-content: center;
    gap: 3.2552083333vw;
    box-sizing: border-box;
  }
  .popup-submit-ticket .support-ticket-btn {
    width: 28.90625vw;
    min-width: 28.90625vw;
    height: 6.1197916667vw;
    padding: 0;
    border-radius: 0;
    font-size: 4.0364583333vw;
  }
  .popup-submit-ticket .support-ticket-btn-cancel,
  .popup-submit-ticket .support-ticket-btn-submit {
    background-color: #7147c7;
    color: #ffd049;
  }
  .popup-submit-ticket .support-ticket-btn-cancel:hover,
  .popup-submit-ticket .support-ticket-btn-submit:hover {
    background-color: #7147c7;
  }
}
.frame1 .personal-info-feature {
  width: 100%;
}
.frame1 .personal-info-feature .personal-info-wrap {
  width: 57.5vw;
  margin: 0 auto;
  padding-top: 5vw;
  box-sizing: border-box;
}
.frame1 .personal-info-feature .personal-info-header {
  display: flex;
  align-items: flex-start;
  gap: 1.6vw;
  margin-bottom: 2.4vw;
}
.frame1 .personal-info-feature .personal-info-avatar-wrap {
  flex-shrink: 0;
  width: 4.8vw;
  height: 4.8vw;
  border-radius: 50%;
  overflow: hidden;
  border: 0.25vw solid #ffffff;
  box-sizing: border-box;
  background: #2a1f5c;
}
.frame1 .personal-info-feature .personal-info-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-sizing: border-box;
}
.frame1 .personal-info-feature .personal-info-head-main {
  flex: 1;
  min-width: 0;
  height: 4.8vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.frame1 .personal-info-feature .personal-info-display-name {
  margin: 0;
  font-size: 1.79vw;
  line-height: 1.4;
  text-transform: uppercase;
  color: #ffd049;
}
.frame1 .personal-info-feature .personal-info-subtitle {
  margin: 0;
  font-family: "gs3-antarctica-beta-light", sans-serif;
  font-size: 0.905vw;
  line-height: 1.3;
  color: #d5bcff;
}
.frame1 .personal-info-feature .personal-info-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6vw;
  margin: 0;
}
.frame1 .personal-info-feature .personal-info-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 1.3vw;
  padding: 0.25vw 0.8vw;
  border-radius: 49.95vw;
  font-family: "gs3-antarctica-beta-medium", sans-serif;
  font-size: 0.7735vw;
  line-height: 1;
  white-space: nowrap;
  color: #c4c0e7;
  background: transparent;
  border: 0.05vw solid #c4c0e7;
}
.frame1 .personal-info-feature .personal-info-badge--level,
.frame1 .personal-info-feature .personal-info-badge--verify,
.frame1 .personal-info-feature .personal-info-badge--phase {
  color: #c4c0e7;
  background: transparent;
  border-color: #c4c0e7;
}
.frame1 .personal-info-feature .personal-info-badge--verify.is-unverified {
  color: #c4c0e7;
  background: transparent;
  border-color: #c4c0e7;
}
.frame1 .personal-info-feature .personal-info-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3vw;
  height: 1.55vw;
  padding: 0 0.5vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 0.7795vw;
  line-height: 1;
  color: #000000;
  background: #ffd049;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
}
.frame1 .personal-info-feature .personal-info-edit-btn .personal-info-edit-btn-icon {
  display: block;
  width: 0.7vw;
  height: 0.7vw;
  flex-shrink: 0;
  object-fit: contain;
}
.frame1 .personal-info-feature .personal-info-edit-btn .personal-info-edit-btn-icon.hidden {
  display: none;
}
.frame1 .personal-info-feature .personal-info-edit-btn .personal-info-edit-btn-text {
  display: block;
  line-height: 1;
}
.frame1 .personal-info-feature .personal-info-edit-btn:hover {
  filter: brightness(1.05);
}
.frame1 .personal-info-feature .personal-info-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.55vw;
  padding: 0 0.5vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 0.7795vw;
  line-height: 1;
  color: #c4c0e7;
  background: transparent;
  border: 0.05vw solid #c4c0e7;
  cursor: pointer;
  box-sizing: border-box;
}
.frame1 .personal-info-feature .personal-info-cancel-btn.hidden {
  display: none;
}
.frame1 .personal-info-feature .personal-info-cancel-btn:hover {
  filter: brightness(1.1);
}
.frame1 .personal-info-feature .personal-info-actions-mobile {
  display: none;
}
.frame1 .personal-info-feature .personal-info-grid {
  display: grid;
  grid-template-columns: 37vw minmax(0, 1fr);
  column-gap: 0;
  row-gap: 1.75vw;
  align-items: start;
}
.frame1 .personal-info-feature .personal-info-col {
  display: flex;
  flex-direction: column;
  gap: 1.75vw;
}
.frame1 .personal-info-feature .personal-info-field-row {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 37.25vw minmax(0, 1fr);
  column-gap: 0;
  row-gap: 1.75vw;
  align-items: start;
}
.frame1 .personal-info-feature .personal-info-field {
  display: flex;
  flex-direction: column;
  gap: 0vw;
}
.frame1 .personal-info-feature .personal-info-field--full {
  grid-column: 1/-1;
}
.frame1 .personal-info-feature .personal-info-label {
  font-family: "gs3-antarctica-beta-regular", sans-serif;
  font-size: 0.9895vw;
  color: #ffd049;
  line-height: 1.2;
}
.frame1 .personal-info-feature .personal-info-value {
  min-height: auto;
  padding: 0;
  background-color: transparent;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 2.095vw;
  line-height: 1.2;
  box-sizing: border-box;
  word-break: break-word;
  background-image: linear-gradient(180deg, #d5bdff 0%, #d1d2f5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-top: -0.25vw;
}
.frame1 .personal-info-feature .personal-info-input {
  display: none;
  width: 20.5vw;
  height: 2.3vw;
  min-height: 2.3vw;
  padding: 0 0.6vw;
  background: #ffffff;
  color: #7971ef;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.51vw;
  line-height: 1.2;
  border: 0.05vw solid #6841a5;
  box-sizing: border-box;
  resize: none;
}
.frame1 .personal-info-feature .personal-info-input.error {
  border-color: #ff4d4f;
}
.frame1 .personal-info-feature .personal-info-field--full .personal-info-input {
  width: 100%;
}
.frame1 .personal-info-feature .personal-info-form.is-editing .personal-info-field[data-editable=true] .personal-info-value {
  display: none;
}
.frame1 .personal-info-feature .personal-info-form.is-editing .personal-info-field[data-editable=true] .personal-info-input {
  display: block;
}
.frame1 .personal-info-feature .personal-info-error {
  margin-top: 0.8vw;
  color: #ff9b8a;
  font-size: 1.2vw;
  text-align: center;
}

@media (max-width: 768px) {
  .frame1 .personal-info-feature .personal-info-wrap {
    width: 100%;
    padding: 13.671875vw 6.5104166667vw 5.2083333333vw;
  }
  .frame1 .personal-info-feature .personal-info-header {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 2.6041666667vw;
    margin-bottom: 4.1666666667vw;
  }
  .frame1 .personal-info-feature .personal-info-avatar-wrap {
    flex-shrink: 0;
    width: 14.84375vw;
    height: 14.84375vw;
    border: 0.78125vw solid #ffffff;
    box-sizing: border-box;
  }
  .frame1 .personal-info-feature .personal-info-head-main {
    height: auto;
    justify-content: flex-start;
    gap: 1.0416666667vw;
  }
  .frame1 .personal-info-feature .personal-info-display-name {
    font-size: 6.3684895833vw;
  }
  .frame1 .personal-info-feature .personal-info-subtitle {
    font-size: 2.8255208333vw;
  }
  .frame1 .personal-info-feature .personal-info-badges {
    justify-content: flex-start;
    align-items: center;
    gap: 1.0416666667vw;
    margin: 0;
  }
  .frame1 .personal-info-feature .personal-info-badge {
    min-height: 3.3854166667vw;
    padding: 0.6510416667vw 2.0833333333vw;
    font-size: 2.4153645833vw;
    line-height: 1;
    border-width: 0.1302083333vw;
  }
  .frame1 .personal-info-feature .personal-info-edit-btn,
  .frame1 .personal-info-feature .personal-info-cancel-btn {
    display: none;
  }
  .frame1 .personal-info-feature .personal-info-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 4.5572916667vw;
    row-gap: 3.6458333333vw;
    align-items: start;
  }
  .frame1 .personal-info-feature .personal-info-col,
  .frame1 .personal-info-feature .personal-info-field-row {
    display: contents;
  }
  .frame1 .personal-info-feature .personal-info-field[data-field=real_name] {
    order: 1;
    grid-column: 1;
  }
  .frame1 .personal-info-feature .personal-info-field[data-field=dob] {
    order: 2;
    grid-column: 2;
  }
  .frame1 .personal-info-feature .personal-info-field[data-field=phone] {
    order: 3;
    grid-column: 1;
  }
  .frame1 .personal-info-feature .personal-info-field[data-field=email] {
    order: 4;
    grid-column: 2;
  }
  .frame1 .personal-info-feature .personal-info-field[data-field=address] {
    order: 5;
    grid-column: 1/-1;
  }
  .frame1 .personal-info-feature .personal-info-field[data-field=province] {
    order: 6;
    grid-column: 1;
  }
  .frame1 .personal-info-feature .personal-info-field[data-field=id_card] {
    order: 7;
    grid-column: 2;
  }
  .frame1 .personal-info-feature .personal-info-field[data-field=bank_account] {
    order: 8;
    grid-column: 1/-1;
  }
  .frame1 .personal-info-feature .personal-info-field[data-field=bank_name] {
    order: 9;
    grid-column: 1;
  }
  .frame1 .personal-info-feature .personal-info-field[data-field=bank_branch] {
    order: 10;
    grid-column: 2;
  }
  .frame1 .personal-info-feature .personal-info-field[data-field=bio] {
    order: 11;
    grid-column: 1/-1;
  }
  .frame1 .personal-info-feature .personal-info-field--full {
    grid-column: 1/-1;
  }
  .frame1 .personal-info-feature .personal-info-field {
    gap: 0;
  }
  .frame1 .personal-info-feature .personal-info-label {
    font-size: 2.4375vw;
  }
  .frame1 .personal-info-feature .personal-info-value {
    min-height: auto;
    padding: 0;
    margin-top: 0;
    font-size: 4.1302083333vw;
  }
  .frame1 .personal-info-feature .personal-info-input {
    width: 42.7083333333vw;
    max-width: 100%;
    height: 5.7291666667vw;
    min-height: 5.7291666667vw;
    padding: 0 2.2135416667vw;
    font-size: 3.9322916667vw;
    border-width: 0.1302083333vw;
  }
  .frame1 .personal-info-feature .personal-info-field--full .personal-info-input {
    width: 100%;
    height: 5.7291666667vw;
    min-height: 5.7291666667vw;
    padding: 0 2.2135416667vw;
  }
  .frame1 .personal-info-feature .personal-info-field[data-field=bio] .personal-info-input {
    width: 100%;
    height: 12.2395833333vw;
    min-height: 12.2395833333vw;
    padding: 1.3020833333vw 2.2135416667vw;
  }
  .frame1 .personal-info-feature .personal-info-actions-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5625vw;
    width: 100%;
    margin-top: 9.8958333333vw;
  }
  .frame1 .personal-info-feature .personal-info-edit-btn-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5625vw;
    flex: 1 1 0;
    min-width: 0;
    max-width: 42.7083333333vw;
    height: 8.4635416667vw;
    margin: 0;
    padding: 0 2.0833333333vw;
    font-family: "svn-agency-fb-bold", sans-serif;
    font-size: 4.0494791667vw;
    line-height: 1;
    color: #000000;
    background: #ffd049;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
  }
  .frame1 .personal-info-feature .personal-info-edit-btn-mobile .personal-info-edit-btn-mobile-icon {
    display: block;
    width: 5.2083333333vw;
    height: 5.2083333333vw;
    flex-shrink: 0;
    object-fit: contain;
  }
  .frame1 .personal-info-feature .personal-info-edit-btn-mobile .personal-info-edit-btn-mobile-icon.hidden {
    display: none;
  }
  .frame1 .personal-info-feature .personal-info-edit-btn-mobile .personal-info-edit-btn-mobile-text {
    display: block;
    line-height: 1;
  }
  .frame1 .personal-info-feature .personal-info-edit-btn-mobile:hover {
    filter: brightness(1.05);
  }
  .frame1 .personal-info-feature .personal-info-cancel-btn-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 42.7083333333vw;
    height: 8.4635416667vw;
    margin: 0;
    padding: 0 2.6041666667vw;
    font-family: "svn-agency-fb-bold", sans-serif;
    font-size: 3.125vw;
    line-height: 1;
    color: #c4c0e7;
    background: transparent;
    border: 0.1302083333vw solid #c4c0e7;
    cursor: pointer;
    box-sizing: border-box;
  }
  .frame1 .personal-info-feature .personal-info-cancel-btn-mobile:hover {
    filter: brightness(1.1);
  }
  .frame1 .personal-info-feature .personal-info-form.is-editing .personal-info-cancel-btn-mobile {
    display: flex;
  }
  .frame1 .personal-info-feature .personal-info-error {
    margin-top: 1.953125vw;
    font-family: "gs3-antarctica-beta-regular", sans-serif;
    font-size: 2.4375vw;
  }
}
.popup-support-detail .popup-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 57.35vw;
  height: 37.65vw;
  background: url("/images/list-nop/detail-background.png") no-repeat center/contain;
  box-sizing: border-box;
  padding: 1.5vw;
  padding-top: 4.5vw;
  margin-top: 0;
  overflow: visible;
}
.popup-support-detail .close-btn {
  position: absolute;
  top: 0.45vw;
  right: -1.6vw;
  width: 1.9vw;
  height: 1.7vw;
  z-index: 2;
  background: url("/images/X.png") no-repeat center center;
  background-size: cover;
}
.popup-support-detail .close-btn:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.popup-support-detail .support-detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.popup-support-detail .support-detail-panel {
  background: #200d4b;
  border: 0.1vw solid #ffffff;
  border-radius: 0.4vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.4vw;
  width: 100%;
  padding: 1.45vw 1.6vw 1.6vw;
}
.popup-support-detail .support-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 1vw;
}
.popup-support-detail .support-detail-id {
  flex-shrink: 0;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 3.6vw;
  line-height: 1;
  color: #ffd049;
}
.popup-support-detail .support-detail-head-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
}
.popup-support-detail .support-detail-title {
  margin: 0;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.8vw;
  line-height: 1.2;
  text-transform: uppercase;
  color: #ffffff;
  word-break: break-word;
}
.popup-support-detail .support-detail-meta {
  margin: 0;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.2vw;
  line-height: 1.2;
  color: #9b92c4;
}
.popup-support-detail .support-detail-sections {
  display: flex;
  flex-direction: column;
  gap: 1.4vw;
}
.popup-support-detail .support-detail-section {
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
}
.popup-support-detail .support-detail-section-label {
  margin: 0;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.8vw;
  line-height: 1.2;
  text-transform: uppercase;
  color: #ffffff;
}
.popup-support-detail .support-detail-section--feedback .support-detail-section-label {
  color: #ffffff;
}
.popup-support-detail .support-detail-problem-text {
  margin: 0;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.3vw;
  line-height: 1.35;
  color: #ffd049;
  word-break: break-word;
  white-space: pre-wrap;
}
.popup-support-detail .support-detail-problem-link {
  color: inherit;
  text-decoration: underline;
}
.popup-support-detail .support-detail-feedback-text {
  margin: 0;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.2vw;
  line-height: 1.35;
  font-style: italic;
  color: #8a7ec8;
  white-space: pre-wrap;
  word-break: break-word;
}
.popup-support-detail .support-detail-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8vw;
}
.popup-support-detail .support-detail-attachment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4vw;
  width: 4.4vw;
  text-decoration: none;
  flex-shrink: 0;
}
.popup-support-detail .support-detail-attachment img,
.popup-support-detail .support-detail-attachment video,
.popup-support-detail .support-detail-attachment .support-detail-attachment-placeholder {
  width: 4.4vw;
  height: 4.4vw;
  object-fit: cover;
  background: #c4c4c4;
  box-sizing: border-box;
}
.popup-support-detail .support-detail-attachment .support-detail-attachment-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #b8b8b8;
}
.popup-support-detail .support-detail-attachment span {
  width: 100%;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 0.9vw;
  line-height: 1.1;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .popup-support-detail {
    align-items: center;
  }
  .popup-support-detail .popup-container {
    width: 84.6354166667vw;
    height: 79.0364583333vw;
    max-height: 100dvh;
    background: url("/images/support/popup-detail-background-mb.png") no-repeat center top/100% 100%;
    padding: 2.0833333333vw 2.6041666667vw 2.6041666667vw;
    padding-top: 9.375vw;
    overflow: visible;
  }
  .popup-support-detail .close-btn {
    top: 1.171875vw;
    right: -4.1666666667vw;
    width: 4.9479166667vw;
    height: 4.4270833333vw;
    z-index: 2;
  }
  .popup-support-detail .support-detail-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .popup-support-detail .support-detail-panel {
    background: #200d4b;
    border: 0.2604166667vw solid #ffffff;
    border-radius: 1.0416666667vw;
    gap: 2.6041666667vw;
    padding: 2.6041666667vw 2.0833333333vw 2.0833333333vw;
  }
  .popup-support-detail .support-detail-header {
    gap: 1.5625vw;
  }
  .popup-support-detail .support-detail-id {
    font-size: 6.25vw;
  }
  .popup-support-detail .support-detail-head-main {
    gap: 0.78125vw;
  }
  .popup-support-detail .support-detail-title {
    font-size: 3.6458333333vw;
  }
  .popup-support-detail .support-detail-meta {
    font-size: 2.8645833333vw;
  }
  .popup-support-detail .support-detail-sections {
    gap: 2.6041666667vw;
  }
  .popup-support-detail .support-detail-section {
    gap: 1.3020833333vw;
  }
  .popup-support-detail .support-detail-section-label {
    font-size: 3.6458333333vw;
  }
  .popup-support-detail .support-detail-problem-text {
    font-size: 2.8645833333vw;
  }
  .popup-support-detail .support-detail-feedback-text {
    font-size: 2.8645833333vw;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .popup-support-detail .support-detail-attachments {
    flex-wrap: nowrap;
    gap: 1.5625vw;
    overflow-x: auto;
    padding-bottom: 0.5208333333vw;
  }
  .popup-support-detail .support-detail-attachment {
    gap: 0.78125vw;
    width: 9.375vw;
  }
  .popup-support-detail .support-detail-attachment img,
  .popup-support-detail .support-detail-attachment video,
  .popup-support-detail .support-detail-attachment .support-detail-attachment-placeholder {
    width: 9.375vw;
    height: 9.375vw;
  }
  .popup-support-detail .support-detail-attachment span {
    font-size: 2.0833333333vw;
  }
}
.frame2 {
  position: relative;
  width: 100vw;
  height: 68.25vw;
  background: rgba(190, 165, 165, 0.049);
}
.frame2 .frame-2-level {
  padding-top: 16.65vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3vw;
}
.frame2 .frame-2-level-item {
  width: 16vw;
  height: 19.4vw;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}
.frame2 .frame-2-level-item:hover {
  animation: shake 0.5s ease-in-out;
  transform: scale(1.02);
  filter: brightness(1.2);
  cursor: pointer;
}
.frame2 .frame-2-level-item.level-1 {
  background-image: url(../images/level-1.png);
}
.frame2 .frame-2-level-item.level-2 {
  background-image: url(../images/level-2.png);
}
.frame2 .frame-2-level-item.level-3 {
  background-image: url(../images/level-3.png);
}
.frame2 .frame-2-level-item.level-4 {
  background-image: url(../images/level-4.png);
}
.frame2 .frame-2-level-item.level-5 {
  background-image: url(../images/level-3.png);
}
.frame2 .button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 0.85vw;
}
.frame2 .timeline-container {
  margin-top: 4.65vw;
  width: 100%;
  height: 11.95vw;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.frame2 .timeline-container .timeline-background {
  position: relative;
  width: 90.05vw;
  height: 11.95vw;
  background-image: url(../images/timneline-background.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.frame2 .timeline-container .timeline-background .timeline-process-bar {
  position: absolute;
  left: 0.15vw;
  background-color: #ffeb65;
  width: 0;
  height: 1.1vw;
  border: 0.1vw solid #694bc7;
  box-sizing: border-box;
  top: 4.75vw;
  z-index: 1;
}
.frame2 .timeline-container .timeline-background .timeline-process-bar.timeline-process-bar-overlay {
  background-color: transparent;
  border: none;
  z-index: 3;
}
.frame2 .timeline-container .timeline-background .timeline-process-bar.timeline-process-bar-overlay::after {
  content: "";
  position: absolute;
  width: 3vw;
  height: 3.25vw;
  background-image: url(../images/mu-3.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 0;
  right: 0;
  transform: translate(50%, -38%);
}
.frame2 .timeline-container .timeline-background .breakpoint {
  position: absolute;
  width: 1.8vw;
  height: 1.8vw;
  background-image: url(../images/timeline-breakpoint.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 4.45vw;
  z-index: 2;
}
.frame2 .timeline-container .timeline-background .breakpoint-0 {
  left: -0.35vw;
}
.frame2 .timeline-container .timeline-background .breakpoint-1 {
  left: 33.33%;
}
.frame2 .timeline-container .timeline-background .breakpoint-2 {
  left: 67.2%;
}
.frame2 .quiz-wrap {
  position: relative;
}
.frame2 .quiz-wrap .quiz-start {
  position: relative;
}

@media (max-width: 768px) {
  .frame2 {
    height: 204.4270833333vw;
    padding-bottom: 5vw;
  }
  .frame2 .frame-2-level {
    padding-top: 49vw;
    flex-wrap: wrap;
    gap: 3.90625vw 3.90625vw;
    justify-content: center;
  }
  .frame2 .frame-2-level-item {
    width: 36.5885416667vw;
    height: 44.53125vw;
    margin: 0;
  }
  .frame2 .frame-2-level-item:hover {
    transform: none;
    filter: none;
    animation: none;
  }
  .frame2 .button-wrapper {
    margin-top: 3.90625vw;
  }
  .frame2 .button-wrapper .button {
    width: 49.609375vw;
    height: 14.84375vw;
  }
  .frame2 .timeline-container {
    display: none;
    margin-top: 8.8541666667vw;
    height: 21.484375vw;
    padding-left: 3vw;
  }
  .frame2 .timeline-container .timeline-background {
    width: 95.9635416667vw;
    height: 21.484375vw;
    background-image: url(../images/timneline-background-mb.png);
  }
  .frame2 .timeline-container .timeline-background .timeline-process-bar {
    width: 10%;
    height: 1.3020833333vw;
    border: 0.2604166667vw solid #694bc7;
    box-sizing: border-box;
    top: 6.1197916667vw;
    z-index: 1;
  }
  .frame2 .timeline-container .timeline-background .timeline-process-bar.timeline-process-bar-overlay {
    background-color: transparent;
    border: none;
    z-index: 3;
  }
  .frame2 .timeline-container .timeline-background .timeline-process-bar.timeline-process-bar-overlay::after {
    width: 4.8177083333vw;
    height: 5.3385416667vw;
  }
  .frame2 .timeline-container .timeline-background .breakpoint {
    position: absolute;
    width: 3.125vw;
    height: 3.125vw;
    top: 5.2083333333vw;
    z-index: 2;
  }
  .frame2 .timeline-container .timeline-background .breakpoint-0 {
    left: -0.9114583333vw;
  }
  .frame2 .timeline-container .timeline-background .breakpoint-1 {
    left: 31.5%;
  }
  .frame2 .timeline-container .timeline-background .breakpoint-2 {
    left: 68.5%;
  }
}
.frame3 {
  position: relative;
  width: 100vw;
  height: 53.75vw;
}
.frame3 .top-user-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame3 .top-user-1 {
  display: flex;
  justify-content: center;
}
.frame3 .top-user-1 .top-user-image {
  margin-top: 3vw;
  width: 8.9vw;
  height: 8.9vw;
  border: 0.1vw solid #fff;
}
.frame3 .top-user-1 .number {
  position: absolute;
  top: 1.45vw;
  right: 1.4vw;
  width: 1.75vw;
  height: 4.2vw;
  color: #fff;
  background-image: url(../images/number-1.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.frame3 .top-user-2,
.frame3 .top-user-3 {
  margin-top: 4vw;
  display: flex;
  justify-content: center;
  width: 11.6vw;
  height: 16.45vw;
}
.frame3 .top-user-2 .top-user-image,
.frame3 .top-user-3 .top-user-image {
  margin-top: 2.7vw;
  width: 7.5vw;
  height: 7.5vw;
  border: 0.1vw solid #fff;
}
.frame3 .top-user-2 .card-footer,
.frame3 .top-user-3 .card-footer {
  height: 5.9vw;
}
.frame3 .top-user-2 .card-footer .card-footer-name,
.frame3 .top-user-3 .card-footer .card-footer-name {
  font-size: 1.4991573035vw;
}
.frame3 .top-user-2 .card-footer .card-footer-number,
.frame3 .top-user-3 .card-footer .card-footer-number {
  margin-top: 0.3370786517vw;
  font-size: 1.3360955055vw;
  line-height: 1.3360955055vw;
}
.frame3 .top-user-2 .card-footer .card-footer-number .con-mat::after,
.frame3 .top-user-3 .card-footer .card-footer-number .con-mat::after {
  right: -1.6vw;
  background-size: 1vw 0.5vw;
}
.frame3 .top-user-2 .number {
  position: absolute;
  top: 1vw;
  right: 0.7vw;
  width: 3.2vw;
  height: 4.45vw;
  color: #fff;
  background-image: url(../images/number-2.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.frame3 .top-user-3 .number {
  position: absolute;
  top: 1vw;
  right: 0.7vw;
  width: 3.2vw;
  height: 4.45vw;
  color: #fff;
  background-image: url(../images/number-3.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.frame3 .top-3-container {
  width: 36vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 13vw;
  margin-left: 11.75vw;
}
.frame3 .top-3-container a.top-user.card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
}
.frame3 .rank-container {
  position: absolute;
  width: 37.5vw;
  height: 15vw;
  right: 12.75vw;
  top: 14vw;
}
.frame3 .rank-container .filter-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.frame3 .rank-container .filter-container .filter-item {
  width: 9vw;
  height: 2.45vw;
  box-sizing: border-box;
  border: 0.1vw solid #3448a9;
  font-family: "svn-agency-fb-black";
  font-size: 1.4vw;
  color: #3448a9;
  text-align: center;
  line-height: 1.5;
  transition: all 0.3s ease;
}
.frame3 .rank-container .filter-container .filter-item:hover {
  cursor: pointer;
  background-color: #3448a9;
  color: #fff;
}
.frame3 .rank-container .filter-container .filter-item.active {
  background-color: #3448a9;
  color: #fff;
}
.frame3 .rank-container .filter-container .phase-button {
  position: relative;
  cursor: pointer;
}
.frame3 .rank-container .filter-container .phase-button:hover {
  cursor: pointer;
  background-color: #fff;
  color: #3448a9;
}
.frame3 .rank-container .filter-container .phase-button::after {
  content: "";
  display: block;
  width: 0.8vw;
  height: 0.45vw;
  background-image: url(../images/phase-filter-arrow.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.75vw;
}
.frame3 .rank-container .filter-container .phase-button-active::after {
  transform: rotate(180deg) translateY(50%);
}
.frame3 .rank-container .filter-container .phase-button .phase-button-text {
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 2vw;
}
.frame3 .rank-container .filter-container .phase-popup {
  position: absolute;
  top: 2.45vw;
  left: 0;
  width: 100%;
  background-color: #f0f1fa;
  z-index: 2;
  display: none;
}
.frame3 .rank-container .filter-container .phase-popup.active {
  display: block;
}
.frame3 .rank-container .filter-container .phase-popup-item {
  width: 100%;
  height: 2.5vw;
  font-size: 1.4vw;
  color: #3448a9;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame3 .rank-container .filter-container .phase-popup-item:hover, .frame3 .rank-container .filter-container .phase-popup-item.active {
  background-image: url(../images/phaser-item-hover.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.frame3 .rank-container .rank-table {
  margin-top: 3vw;
  padding-left: 0.75vw;
  padding-right: 0.75vw;
}
.frame3 .rank-container .rank-table .rank-col {
  text-align: center;
}
.frame3 .rank-container .rank-table .rank-col:nth-child(1) {
  flex: 0.5;
}
.frame3 .rank-container .rank-table .rank-col:nth-child(2) {
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}
.frame3 .rank-container .rank-table .rank-col:nth-child(3) {
  flex: 1;
  text-align: right;
}
.frame3 .rank-container .rank-table .rank-col-number {
  position: relative;
  padding-right: 5vw;
}
.frame3 .rank-container .rank-table .rank-col-number .con-mat::after {
  right: -2.1vw;
  width: 1.4vw;
}
.frame3 .rank-container .rank-table .rank-row {
  font-family: "svn-agency-fb-black";
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6vw 0;
  color: white;
  font-size: 1.8895vw;
  text-decoration: none;
  transition: all 0.3s ease;
}
.frame3 .rank-container .rank-table .rank-row:hover {
  color: #a9a734;
  cursor: pointer;
}
.frame3 .rank-container .rank-table .rank-row.header {
  padding: 0;
}
.frame3 .rank-container .rank-table .rank-row.header::after {
  display: none;
}
.frame3 .rank-container .rank-table .rank-row::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.05vw;
  background-color: #677bd3;
  position: absolute;
  bottom: 0;
  left: 0;
}
.frame3 .rank-container .rank-table .header {
  padding-bottom: 0.5vw;
}
.frame3 .rank-container .rank-table .header .rank-col {
  color: #ffd049;
  font-family: "svn-agency-fb-bold";
}
.frame3 .rank-container .rank-table .header .rank-col:nth-child(3) {
  text-align: center;
}
.frame3 .rank-container .rank-table .rank-body {
  width: 100%;
  height: 17.5vw;
  overflow-y: scroll;
}
.frame3 .rank-container .rank-body_videos .rank-col:nth-child(3),
.frame3 .rank-container .rank-body_livestream .rank-col:nth-child(3),
.frame3 .rank-container .rank-body_created_at .rank-col:nth-child(3) {
  text-align: center;
}
.frame3 .rank-container .rank-body_videos .rank-col-number,
.frame3 .rank-container .rank-body_livestream .rank-col-number,
.frame3 .rank-container .rank-body_created_at .rank-col-number {
  padding-right: 1vw;
}
.frame3 .rank-container .rank-body_videos .rank-col-number.con-mat::after,
.frame3 .rank-container .rank-body_livestream .rank-col-number.con-mat::after,
.frame3 .rank-container .rank-body_created_at .rank-col-number.con-mat::after {
  right: -55%;
}
.frame3 .rank-container .rank-body_created_at .rank-col-number.con-mat::after {
  right: -24%;
  width: 38%;
}
.frame3 .rank-button-group {
  position: absolute;
  bottom: 5.7vw;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.8vw;
}
.frame3 .rank-button-group .rank-button {
  width: 15.4vw;
  height: 4.6vw;
  box-sizing: border-box;
  font-family: "svn-agency-fb-bold";
  background-image: url(../images/rank-level-button.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #3448a9;
  text-align: center;
  line-height: 2.1;
  font-size: 1.85vw;
  text-transform: uppercase;
  transform-origin: center center;
}
.frame3 .rank-button-group .rank-button.btn-click-feedback {
  animation: frame-login-btn-click 0.26s ease-out forwards;
}
.frame3 .update-time {
  color: white;
  font-size: 1.383vw;
  text-align: center;
  margin-top: 1.6vw;
  font-family: "svn-agency-fb-black";
}

@media (max-width: 768px) {
  .frame3 {
    height: 200.5208333333vw;
  }
  .frame3 .top-3-container {
    display: flex;
    gap: 1.3020833333vw;
    justify-content: center;
    margin: 0;
    width: 100%;
    padding-top: 24.7395833333vw;
  }
  .frame3 .top-3-container .top-user-1 .top-user-image {
    margin-top: 7.8125vw;
    width: 23.1770833333vw;
    height: 23.1770833333vw;
    border: 0.2604166667vw solid #fff;
  }
  .frame3 .top-3-container .top-user-1 .number {
    top: 3.7760416667vw;
    right: 3.6458333333vw;
    width: 4.5572916667vw;
    height: 10.9375vw;
  }
  .frame3 .top-3-container .top-user-2,
  .frame3 .top-3-container .top-user-3 {
    margin-top: 10.4166666667vw;
    display: flex;
    justify-content: center;
    width: 28.125vw;
    height: 41.2760416667vw;
  }
  .frame3 .top-3-container .top-user-2 .top-user-image,
  .frame3 .top-3-container .top-user-3 .top-user-image {
    margin-top: 7.03125vw;
    width: 19.53125vw;
    height: 19.53125vw;
    border: 0.2604166667vw solid #fff;
  }
  .frame3 .top-3-container .top-user-2 .card-footer,
  .frame3 .top-3-container .top-user-3 .card-footer {
    height: 14.5833333333vw;
  }
  .frame3 .top-3-container .top-user-2 .card-footer .card-footer-name,
  .frame3 .top-3-container .top-user-3 .card-footer .card-footer-name {
    font-size: 3.9040554779vw;
  }
  .frame3 .top-3-container .top-user-2 .card-footer .card-footer-number,
  .frame3 .top-3-container .top-user-3 .card-footer .card-footer-number {
    margin-top: -1vw;
    font-size: 3.4794153789vw;
    line-height: 3.4794153789vw;
  }
  .frame3 .top-3-container .top-user-2 .card-footer .card-footer-number .con-mat::after,
  .frame3 .top-3-container .top-user-3 .card-footer .card-footer-number .con-mat::after {
    right: -3.6vw;
    background-size: 2.6041666667vw 1.3020833333vw;
  }
  .frame3 .top-3-container .top-user-2 .number {
    position: absolute;
    top: 2.6041666667vw;
    right: 1.8229166667vw;
    width: 8.3333333333vw;
    height: 11.5885416667vw;
    color: #fff;
    background-image: url(../images/number-2.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .frame3 .top-3-container .top-user-3 .number {
    position: absolute;
    top: 2.6041666667vw;
    right: 1.8229166667vw;
    width: 8.3333333333vw;
    height: 11.5885416667vw;
    color: #fff;
    background-image: url(../images/number-3.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .frame3 .top-3-container .top-3-container {
    width: 93.75vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 44.2708333333vw;
    margin-left: 30.5989583333vw;
  }
  .frame3 .rank-container {
    margin-top: 11.0677083333vw;
    top: auto;
    right: auto;
    width: 100%;
  }
  .frame3 .rank-container .filter-container {
    padding: 0 2.2135416667vw;
  }
  .frame3 .rank-container .filter-container .filter-item {
    width: 22.7864583333vw;
    height: 6.1197916667vw;
    font-size: 4.5572916667vw;
    box-sizing: border-box;
    border: 0.2604166667vw solid #3448a9;
    line-height: 1.1;
  }
  .frame3 .rank-container .filter-container .phase-button::after {
    width: 2.0833333333vw;
    height: 1.171875vw;
    right: 1.953125vw;
  }
  .frame3 .rank-container .filter-container .phase-button .phase-button-text {
    display: block;
    max-width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 5.2083333333vw;
  }
  .frame3 .rank-container .filter-container .phase-popup {
    position: absolute;
    top: 6.3802083333vw;
    left: 0;
    width: 100%;
    background-color: #f0f1fa;
    z-index: 2;
    display: none;
  }
  .frame3 .rank-container .filter-container .phase-popup.active {
    display: block;
  }
  .frame3 .rank-container .filter-container .phase-popup-item {
    width: 100%;
    height: 6.5104166667vw;
    font-size: 3.6458333333vw;
  }
  .frame3 .rank-container .rank-table {
    margin-top: 8.7239583333vw;
    padding-left: 5.5989583333vw;
    padding-right: 5.5989583333vw;
  }
  .frame3 .rank-container .rank-table .rank-body {
    height: 39.0625vw;
  }
  .frame3 .rank-container .rank-table .rank-col-number {
    position: relative;
    padding-right: 0;
  }
  .frame3 .rank-container .rank-table .rank-col-number .con-mat::after {
    right: -5vw;
    top: 2vw;
    width: 3.5vw;
    height: 1.9vw;
    background-size: cover;
  }
  .frame3 .rank-container .rank-table .rank-row {
    padding: 1.953125vw 0;
    font-size: 4.8072916667vw;
  }
  .frame3 .rank-container .rank-table .rank-row::after {
    height: 0.1302083333vw;
  }
  .frame3 .rank-container .rank-table .rank-row:nth-child(1) {
    padding-bottom: 2vw;
  }
  .frame3 .rank-container .rank-table .header {
    padding-bottom: 0.65vw;
  }
  .frame3 .rank-container .rank-table .rank-body_view_count .rank-col-number {
    padding-right: 9vw;
  }
  .frame3 .rank-button-group {
    bottom: 8.59375vw;
    display: flex;
    flex-wrap: wrap;
    gap: 2.0833333333vw 2.6041666667vw;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
  }
  .frame3 .rank-button-group .rank-button {
    width: 30vw;
    height: 9.0299479167vw;
    margin: 0;
    font-size: 3.59375vw;
    line-height: 2.3;
  }
  .frame3 .update-time {
    color: white;
    font-size: 3.6015625vw;
    text-align: center;
    margin-top: 9.2447916667vw;
    font-family: "svn-agency-fb-black";
  }
}
.frame4 {
  position: relative;
  width: 100vw;
  height: 77.8vw;
  box-sizing: border-box;
  padding-top: 17.75vw;
}
.frame4 .frame4-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.frame4 .frame4-container .frame4-filter-container {
  text-align: right;
  padding: 0 14vw 0 15vw;
}
.frame4 .frame4-container .frame4-filter-input {
  position: relative;
  width: 17.5vw;
  height: 2.5vw;
  border: 0.1vw solid #677bd3;
  color: #677bd3;
  padding-left: 0.5vw;
  font-size: 1vw;
  font-family: "svn-agency-fb-black";
  font-size: 1.363vw;
  background-color: transparent;
  box-sizing: border-box;
}
.frame4 .frame4-container .frame4-filter-input::placeholder {
  color: #677bd3;
}
.frame4 .frame4-container .frame4-user-container {
  padding: 0 14vw;
  margin-top: 0.65vw;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5vw 1.65vw;
  justify-content: center;
  height: 38.3vw;
}
.frame4 .frame4-container .frame4-user-container .frame4-user-card {
  cursor: pointer;
}
.frame4 .frame4-container .nav-video-list {
  display: flex;
  justify-content: center;
  gap: 2.65vw;
  margin-top: 2.3vw;
}
.frame4 .frame4-container .nav-video-list .nav-video-item {
  font-size: 2.05vw;
  font-family: "svn-agency-fb-black", sans-serif;
  color: #575757;
  cursor: pointer;
  transition: color 0.3s ease;
}
.frame4 .frame4-container .nav-video-list .nav-video-item:hover {
  color: #342f86;
}
.frame4 .frame4-container .nav-video-list .nav-video-item.active {
  color: #342f86;
}
.frame4 .input-wrapper {
  position: relative;
  display: inline-block;
}
.frame4 .frame4-filter-input {
  width: 15vw;
  padding-right: 2vw;
  height: 2vw;
  font-size: 0.9vw;
  box-sizing: border-box;
}
.frame4 .search-btn {
  position: absolute;
  right: 1.35vw;
  top: 50%;
  transform: translateY(-50%);
  width: 0.85vw;
  height: 0.85vw;
  background: url("../images/search-icon.png") no-repeat center center;
  background-size: cover;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  z-index: 2;
}

@media (max-width: 768px) {
  .frame4 {
    height: 182.239583vw;
    padding-top: 41.796875vw;
  }
  .frame4 .frame4-container .frame4-filter-container {
    padding: 0;
    text-align: center;
  }
  .frame4 .frame4-container .frame4-filter-input {
    width: 45.9635416667vw;
    height: 6.3802083333vw;
    font-size: 4.5572916667vw;
    padding-left: 1.953125vw;
    border: 0.390625vw solid #677bd3;
    color: #342f86;
  }
  .frame4 .frame4-container .search-btn {
    right: 2.34375vw;
    width: 3.6458333333vw;
    height: 3.6458333333vw;
  }
  .frame4 .frame4-container .frame4-user-container {
    margin-top: 2.9947916667vw;
    height: 91.796875vw;
    gap: 1.5625vw 2.2135416667vw;
    overflow: hidden;
    padding: 0;
  }
  .frame4 .frame4-container .frame4-user-container .card {
    width: 30.2083333333vw;
    height: 44.7916666667vw;
  }
  .frame4 .frame4-container .frame4-user-container .card .top-user-image {
    margin-top: 5.859375vw;
    width: 22.1354166667vw;
    height: 22.1354166667vw;
    border: 0.2604166667vw solid #fff;
  }
  .frame4 .frame4-container .frame4-user-container .card .card-footer {
    height: 16.6666666667vw;
  }
  .frame4 .frame4-container .frame4-user-container .card .card-footer .card-footer-name {
    font-size: 4.3229166667vw;
    line-height: 1.2;
    height: 6vw;
    max-width: 75%;
  }
  .frame4 .frame4-container .frame4-user-container .card .card-footer .card-footer-number {
    font-size: 3.8528645833vw;
    line-height: 3.8528645833vw;
  }
  .frame4 .frame4-container .frame4-user-container .card .card-footer .card-footer-number .con-mat::after {
    right: -4.8vw;
    background-size: cover;
    width: 3.4vw;
    height: 1.9vw;
    top: 1.6vw;
  }
  .frame4 .frame4-container .nav-video-list {
    display: flex;
    justify-content: center;
    gap: 6.9010416667vw;
    margin-top: 5.9895833333vw;
  }
  .frame4 .frame4-container .nav-video-list .nav-video-item {
    font-size: 5.3385416667vw;
    font-family: "svn-agency-fb-black", sans-serif;
    color: #575757;
    cursor: pointer;
    transition: color 0.3s ease;
  }
  .frame4 .frame4-container .nav-video-list .nav-video-item:hover {
    color: #342f86;
  }
  .frame4 .frame4-container .nav-video-list .nav-video-item.active {
    color: #342f86;
  }
  .frame4 .frame4-container .button-wrapper {
    margin-top: 4.6875vw;
  }
  .frame4 .frame4-container .button-wrapper .register-now-btn {
    width: 49.4791666667vw;
    height: 14.7135416667vw;
  }
}
.frame5 {
  width: 100vw;
  height: 20.15vw;
  background-image: url("/images/footer.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.register-now-floating-button {
  position: fixed;
  top: 31vw;
  right: 1vw;
  width: 9.15vw;
  height: 9.9vw;
  background-image: url("/images/register-now-floating-button.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 3;
}
.register-now-floating-button:hover {
  cursor: pointer;
}
.register-now-floating-button:hover img {
  filter: brightness(1.2);
}
.register-now-floating-button img {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .frame5 {
    height: 75.1302083333vw;
    background-image: url("/images/footer-mb.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}
.frame6 {
  width: 100vw;
  height: 52.85vw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame6 .whatnews-carousel-wrapper {
  padding-top: 20.7vw;
  width: 60vw;
  height: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}
.frame6 .whatnews-carousel {
  width: 50.35vw;
  height: 25.7vw;
  position: relative;
  border-radius: 0.5vw;
  background: transparent;
}
.frame6 .carousel-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: transparent;
}
.frame6 .carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
  background: transparent;
}
.frame6 .carousel-item {
  flex: 0 0 50.35vw;
  width: 50.35vw;
  height: 25.7vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.frame6 .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  pointer-events: auto;
  background: transparent;
}
.frame6 .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  border-radius: 50%;
  width: 2.65vw;
  height: 4.95vw;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
  padding: 0;
  background: none;
}
.frame6 .carousel-btn:active {
  transform: translateY(-50%) scale(0.95);
}
.frame6 .carousel-btn img {
  width: 2.65vw;
  height: 4.95vw;
  object-fit: contain;
}
.frame6 .carousel-btn.carousel-btn-prev {
  left: -5vw;
}
.frame6 .carousel-btn.carousel-btn-next {
  right: -5vw;
}
.frame6 .carousel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.frame6 .carousel-btn:disabled:hover {
  transform: translateY(-50%);
}
.frame6 .carousel-dots {
  position: absolute;
  bottom: -2.55vw;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5vw;
  z-index: 10;
}
.frame6 .carousel-dot {
  width: 0.65vw;
  height: 0.65vw;
  border-radius: 50%;
  background: none;
  background-image: url("/images/dot.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.frame6 .carousel-dot:hover {
  transform: scale(1.2);
}
.frame6 .carousel-dot.active {
  background-image: url("/images/dot-active.png");
}

@media (max-width: 768px) {
  .frame6 {
    height: 139.84375vw;
    align-items: flex-start;
  }
  .frame6 .carousel-item {
    flex: 0 0 100%;
    width: 60.0260416667vw;
    height: auto;
  }
  .frame6 .carousel-item img {
    width: 60.0260416667vw;
    height: auto;
  }
  .frame6 .whatnews-carousel-wrapper {
    padding-top: 0;
    margin-top: 40.1041666667vw;
    height: 88.0208333333vw;
  }
  .frame6 .whatnews-carousel {
    width: 100%;
    max-width: 100vw;
    height: 88.0208333333vw;
    border-radius: 1.3020833333vw;
  }
  .frame6 .carousel-btn {
    width: 6.25vw;
    height: 11.71875vw;
  }
  .frame6 .carousel-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .frame6 .carousel-btn.carousel-btn-prev {
    left: -14.5833333333vw;
  }
  .frame6 .carousel-btn.carousel-btn-next {
    right: -14.5833333333vw;
  }
  .frame6 .carousel-dots {
    bottom: -2.9947916667vw;
    gap: 1.0416666667vw;
  }
  .frame6 .carousel-dot {
    width: 1.6927083333vw;
    height: 1.6927083333vw;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(2.5vw);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes shake {
  0% {
    filter: brightness(1);
    transform: translateX(0);
  }
  25% {
    transform: translateX(-0.15vw);
  }
  50% {
    transform: translateX(0.15vw);
  }
  75% {
    transform: translateX(-0.15vw);
  }
  100% {
    transform: translateX(0);
    filter: brightness(1.2);
  }
}
@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes frame-login-btn-click {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  45% {
    transform: scale(0.93);
    filter: brightness(1.12);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}
/* Top 3 + bài nổi bật + frame4 danh sách: phản hồi bấm trước khi mở link/popup */
a.card-link-click-feedback.top-user.card,
a.card-link-click-feedback.bd-highlight-video-card,
#new-users-grid .card.top-user-1.card-link-click-feedback {
  transform-origin: center center;
  animation: frame-login-btn-click 0.26s ease-out forwards;
}

@keyframes bd-quiz-start-btn-click {
  0% {
    transform: translateX(-50%) scale(1);
    filter: brightness(1);
  }
  45% {
    transform: translateX(-50%) scale(0.93);
    filter: brightness(1.1);
  }
  100% {
    transform: translateX(-50%) scale(1);
    filter: brightness(1);
  }
}
@keyframes bd-quiz-option-click {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  40% {
    transform: scale(0.9);
    filter: brightness(1.22) saturate(1.08);
  }
  100% {
    transform: scale(1.03);
    filter: brightness(1.1);
  }
}
/* Frame2 quiz: nút đáp án xuất hiện lần lượt, mượt hơn pop-in tức thì */
@keyframes bd-quiz-option-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 0.75vw, 0) scale(0.94);
    filter: brightness(0.9);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1);
  }
}
#quiz-options button {
  transform-origin: center center;
  transition: opacity 0.32s cubic-bezier(0.33, 1, 0.68, 1), transform 0.32s cubic-bezier(0.33, 1, 0.68, 1), filter 0.28s ease;
  animation: bd-quiz-option-enter 0.52s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

#quiz-options button:nth-child(1) {
  animation-delay: 0s;
}

#quiz-options button:nth-child(2) {
  animation-delay: 0.055s;
}

#quiz-options button:nth-child(3) {
  animation-delay: 0.11s;
}

#quiz-options button:nth-child(4) {
  animation-delay: 0.165s;
}

#quiz-options button:nth-child(5) {
  animation-delay: 0.22s;
}

#quiz-options button:nth-child(6) {
  animation-delay: 0.275s;
}

#quiz-options button:nth-child(7) {
  animation-delay: 0.33s;
}

#quiz-options button:nth-child(8) {
  animation-delay: 0.385s;
}

#quiz-options.quiz-options-has-choice button:not(.quiz-option-pressed) {
  opacity: 0.4;
  transform: scale(0.96);
  filter: brightness(0.82);
  pointer-events: none;
}

#quiz-options button.quiz-option-pressed {
  animation: bd-quiz-option-click 0.26s ease-out forwards;
  z-index: 1;
  position: relative;
  pointer-events: none;
}

#quiz-question-text.quiz-question-text-wrap {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}
#quiz-question-text.quiz-question-text-wrap > * {
  grid-area: 1/1;
}
#quiz-question-text.quiz-question-text-wrap .quiz-question-measure-line {
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

#quiz-question-content {
  opacity: 1;
  transition: opacity 0.22s ease;
}

#quiz-question-content.quiz-q-content-fade-out {
  opacity: 0;
}

/* Trang quiz độc lập: nút chỉ có id, không có .quiz-start-btn */
#quiz-start-btn.btn-click-feedback:not(.quiz-start-btn) {
  transform-origin: center center;
  animation: frame-login-btn-click 0.26s ease-out forwards;
}

.quiz-result-btn.btn-click-feedback {
  transform-origin: center center;
  animation: frame-login-btn-click 0.26s ease-out forwards;
}

/* Top 3 podium (#top3-container): biến mất → thay nội dung → xuất hiện (bd.js / user.js) */
@keyframes top3-refresh-leave {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
}
@keyframes top3-refresh-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
#top3-container.top3-refresh--leave {
  animation: top3-refresh-leave 0.32s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  pointer-events: none;
}
#top3-container.top3-refresh--enter {
  animation: top3-refresh-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .frame1 .login-card .login-btn.btn-click-feedback,
  .frame1 .login-card .register-btn.btn-click-feedback,
  .bd-frame-2 .quiz-start-btn.btn-click-feedback,
  #quiz-start-btn.btn-click-feedback:not(.quiz-start-btn),
  .quiz-result-btn.btn-click-feedback,
  .bd-frame-3-gen-card.btn-click-feedback,
  .frame3 .rank-button-group .rank-button.btn-click-feedback,
  .button-wrapper .register-now-btn.btn-click-feedback,
  .navbar-container .tiktok-btn-wrapper .home-btn.btn-click-feedback {
    animation: none !important;
  }
  #quiz-options button {
    animation: none !important;
    animation-delay: 0s !important;
  }
  #quiz-options button.quiz-option-pressed {
    animation: none !important;
  }
  #quiz-options.quiz-options-has-choice button:not(.quiz-option-pressed) {
    opacity: 1;
    transform: none;
    filter: none;
  }
  #quiz-question-content {
    transition: none !important;
  }
  #top3-container.top3-refresh--leave, #top3-container.top3-refresh--enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  a.card-link-click-feedback.top-user.card,
  a.card-link-click-feedback.bd-highlight-video-card,
  #new-users-grid .card.top-user-1.card-link-click-feedback {
    animation: none !important;
  }
}
.bd-frame-1 {
  background-image: url("/images/bd/bd-frame1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bd-frame-1 #bd-rule-button {
  width: 26.75vw;
  height: 2.2vw;
  background-image: url("/images/bd/rule-text-background.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .bd-frame-1 {
    background-image: url("/images/bd/bd-frame1-mb.jpg");
    background-size: cover;
    height: 164.9739583333vw;
    /* Video nền chỉ dành cho desktop — tránh tải/hiển thị trên mobile */
  }
  .bd-frame-1 .video-bg {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
  }
  .bd-frame-1 #bd-rule-button {
    width: 97.65625vw;
    max-width: 100%;
    aspect-ratio: 750/48;
    height: auto;
    background-image: url("/images/bd/rule-text-background-mb.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .bd-frame-1 .login-card {
    margin-top: 134.1145833333vw;
  }
  .bd-frame-1 .login-card #login-btn.login-btn,
  .bd-frame-1 .login-card .login-btn {
    width: 50.2604166667vw;
    height: 14.9739583333vw;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}
.bd-frame-2 {
  position: relative;
  height: 47.6vw;
}
.bd-frame-2 .quiz-wrap {
  height: 100%;
  position: relative;
  isolation: isolate;
}
.bd-frame-2 .quiz-wrap > .quiz-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.38s cubic-bezier(0.33, 1, 0.68, 1), visibility 0.38s step-end;
}
.bd-frame-2 .quiz-wrap > .quiz-panel.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  transition: opacity 0.42s cubic-bezier(0.33, 1, 0.68, 1), visibility 0s step-start;
}
@media (prefers-reduced-motion: reduce) {
  .bd-frame-2 .quiz-wrap > .quiz-panel,
  .bd-frame-2 .quiz-wrap > .quiz-panel.active {
    transition-duration: 0.01ms;
  }
}
.bd-frame-2 #quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 26.65vw);
  column-gap: 1.85vw;
  row-gap: 1.25vw;
  justify-content: center;
}
.bd-frame-2 #quiz-options button {
  width: 26.65vw;
  height: 6.65vw;
  max-width: none;
  margin: 0;
  padding: 0vw 1.5vw 0.6vw 1.5vw;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  background: url("/images/bd/answer-bg.png") no-repeat center;
  background-size: contain;
  color: #fff;
  font-family: "svn-agency-fb-black";
  font-size: 1.8025vw;
  line-height: 1;
  text-align: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-frame-2 #quiz-questions {
  position: absolute;
  top: 15.4vw;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 55.2vw;
  padding: 0 1vw;
  box-sizing: border-box;
  overflow: hidden;
}
.bd-frame-2 #quiz-question-text {
  color: #26175e;
  text-align: center;
  font-size: 1.8025vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  margin-bottom: 1.1vw;
  overflow: hidden;
}
.bd-frame-2 #quiz-start {
  height: 100%;
}
.bd-frame-2 .quiz-start-desc {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.bd-frame-2 .quiz-start-banner {
  position: absolute;
  top: 19.1vw;
  left: 50%;
  transform: translateX(-50%);
  width: 61.95vw;
  max-width: calc(100% - 2vw);
  aspect-ratio: 1239/364;
  height: auto;
  background: url("/images/bd/frame-2-banner.png") no-repeat center;
  background-size: contain;
  display: block;
  pointer-events: none;
}
.bd-frame-2 .quiz-start-btn {
  position: absolute;
  top: 38.5vw;
  left: 50%;
  transform: translateX(-50%);
  width: 19.3vw;
  height: 5.75vw;
  border: none;
  padding: 0;
  cursor: pointer;
  background: url("/images/bd/bat-dau-ngay-btn.png") no-repeat center;
  background-size: contain;
  color: transparent;
  font-size: 0;
  transform-origin: center center;
}
.bd-frame-2 .quiz-start-btn.btn-click-feedback {
  animation: bd-quiz-start-btn-click 0.26s ease-out forwards;
}

#quiz-result .quiz-result-frame {
  position: relative;
  width: 100%;
  max-width: 52.35vw;
  margin-left: auto;
  margin-right: auto;
  line-height: 0;
}
#quiz-result .quiz-result-frame .quiz-result-frame__bg {
  display: block;
  width: 52.35vw;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1047/584;
  box-sizing: border-box;
  vertical-align: top;
  position: relative;
  z-index: 2;
  object-fit: contain;
  object-position: center top;
}
#quiz-result .quiz-result-frame .quiz-result-frame__bg-mobile {
  display: none;
}
#quiz-result .quiz-result-frame .quiz-result-frame__mask-image {
  position: absolute;
  top: 0.55vw;
  left: 0.95vw;
  width: 50.6vw;
  height: 24.5vw;
  max-width: calc(100% - 0.95vw);
  box-sizing: border-box;
  display: block;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: url("/images/bd/mask-image.png");
  mask-image: url("/images/bd/mask-image.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 50.6vw 24.5vw;
  mask-size: 50.6vw 24.5vw;
  -webkit-mask-position: center;
  mask-position: center;
  z-index: 1;
  pointer-events: none;
}
#quiz-result .quiz-result-frame .quiz-result-meaning-wrap {
  position: absolute;
  bottom: 1vw;
  left: 0.8vw;
  width: 50.5vw;
  height: 4.2vw;
  max-width: calc(100% - 0.8vw);
  box-sizing: border-box;
  z-index: 3;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
#quiz-result .quiz-result-frame .quiz-result-meaning {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 2vw;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
#quiz-result .quiz-result-frame .quiz-result-meaning.quiz-result-meaning--small {
  font-size: 1.6vw;
}
#quiz-result .quiz-result-frame .quiz-result-user-meta {
  position: absolute;
  top: 1vw;
  right: 1vw;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4vw;
  width: 6vw;
  pointer-events: none;
}
#quiz-result .quiz-result-frame .quiz-result-user-avatar {
  width: 4.6vw;
  height: 4.6vw;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
}
#quiz-result .quiz-result-frame .quiz-result-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#quiz-result .quiz-result-frame .quiz-result-user-tiktok {
  margin: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.2vw;
  line-height: 1.1;
  text-shadow: 0 0.1vw 0.3vw rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bd-frame-2 #quiz-result {
  height: 100%;
  box-sizing: border-box;
}

#quiz-result .quiz-result-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bd-frame-2 .quiz-result-visual {
  position: absolute;
  top: 12.95vw;
  left: 50%;
  transform: translateX(-50%);
  width: 52.35vw;
  max-width: calc(100% - 1.6vw);
  z-index: 1;
}

.quiz-result-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 2.6vw;
  flex-shrink: 0;
}

.quiz-result-btn {
  width: 15.4vw;
  height: 4.6vw;
  flex-shrink: 0;
  box-sizing: border-box;
  border: none;
  padding: 0;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;
  color: transparent;
  font-size: 0;
}

.quiz-result-btn-save {
  background-image: url("/images/bd/save-btn.png");
}

.quiz-result-btn-share {
  background-image: url("/images/bd/share-btn.png");
}

.bd-frame-2-pagination {
  position: absolute;
  left: 0;
  right: 0;
  top: 36.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vw;
  z-index: 2;
}
.bd-frame-2-pagination--hidden {
  display: none !important;
}
.bd-frame-2-pagination .pagination-nav {
  position: relative;
  flex-shrink: 0;
  width: 0.8vw;
  height: 1.5vw;
  border: none;
  cursor: pointer;
  padding: 0;
  background: transparent;
}
.bd-frame-2-pagination .pagination-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/images/bd/pre-button.png") no-repeat center;
  background-size: 100% 100%;
  pointer-events: none;
}
.bd-frame-2-pagination .pagination-nav.next::before {
  transform: scaleX(-1);
}
.bd-frame-2-pagination .pagination-nav:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}
.bd-frame-2-pagination .pagination-numbers {
  display: flex;
  gap: 0.5vw;
  align-items: center;
}
.bd-frame-2-pagination .pagination-page {
  position: relative;
  z-index: 0;
  width: 1.95vw;
  height: 1.95vw;
  border: none;
  padding: 0;
  background: transparent;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.103vw;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-frame-2-pagination .pagination-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/images/bd/button-page-background.png") no-repeat center;
  background-size: 100% 100%;
  opacity: 0.6;
  pointer-events: none;
}
.bd-frame-2-pagination .pagination-page.active {
  font-weight: bold;
}
.bd-frame-2-pagination .pagination-page.active::before {
  opacity: 1;
}
.bd-frame-2-pagination .pagination-page:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.bd-frame-2-pagination .pagination-page:disabled::before {
  opacity: 0.25;
}

@media (max-width: 768px) {
  .bd-frame-2-pagination {
    gap: 2.6041666667vw;
    top: 130.2083333333vw;
  }
  .bd-frame-2-pagination .pagination-nav {
    width: 2.0833333333vw;
    height: 3.90625vw;
  }
  .bd-frame-2-pagination .pagination-numbers {
    gap: 1.3020833333vw;
  }
  .bd-frame-2-pagination .pagination-page {
    width: 5.078125vw;
    height: 5.078125vw;
    font-size: 2.8723958333vw;
  }
  #quiz-result .quiz-result-frame {
    max-width: 97.0052083333vw;
  }
  #quiz-result .quiz-result-frame .quiz-result-frame__bg {
    display: none;
  }
  /* result-background-mb.png gốc 745×493 (@768) */
  #quiz-result .quiz-result-frame .quiz-result-frame__bg-mobile {
    display: block;
    width: 97.0052083333vw;
    max-width: 100%;
    height: auto;
    aspect-ratio: 745/493;
    box-sizing: border-box;
    vertical-align: top;
    position: relative;
    z-index: 2;
    object-fit: contain;
    object-position: center top;
  }
  /* mask-image-mb.png — mask mobile; kích thước vẫn theo box banner (px-to-vw-mobile) */
  #quiz-result .quiz-result-frame .quiz-result-frame__mask-image {
    top: 1.3020833333vw;
    left: 2.0833333333vw;
    width: 92.8385416667vw;
    height: 54.296875vw;
    max-width: calc(100% - 4.1666666667vw);
    -webkit-mask-image: url("/images/bd/mask-image-mb.png");
    mask-image: url("/images/bd/mask-image-mb.png");
    -webkit-mask-size: 92.8385416667vw 54.296875vw;
    mask-size: 92.8385416667vw 54.296875vw;
  }
  #quiz-result .quiz-result-frame .quiz-result-meaning-wrap {
    bottom: 2.2135416667vw;
    left: 2.0833333333vw;
    width: 92.8385416667vw;
    height: 9.2447916667vw;
    max-width: calc(100% - 4.1666666667vw);
  }
  #quiz-result .quiz-result-frame .quiz-result-meaning {
    font-size: 5.2083333333vw;
  }
  #quiz-result .quiz-result-frame .quiz-result-meaning.quiz-result-meaning--small {
    font-size: 3.4vw;
    line-height: 1;
  }
  #quiz-result .quiz-result-frame .quiz-result-user-meta {
    top: 2.34375vw;
    right: 2.34375vw;
    gap: 1.0416666667vw;
    width: 15.625vw;
  }
  #quiz-result .quiz-result-frame .quiz-result-user-avatar {
    width: 11.9791666667vw;
    height: 11.9791666667vw;
    border-radius: 50%;
  }
  #quiz-result .quiz-result-frame .quiz-result-user-tiktok {
    font-size: 3.125vw;
    text-shadow: 0 0.2604166667vw 0.78125vw rgba(0, 0, 0, 0.35);
  }
  #quiz-result .quiz-result-actions {
    margin-top: 3.2552083333vw;
    gap: 7.6vw;
  }
  .quiz-result-btn {
    width: 40.1041666667vw;
    height: 11.9791666667vw;
  }
  .bd-frame-2 {
    height: 164.0625vw;
  }
  .bd-frame-2 .quiz-start-banner {
    top: 66.40625vw;
    /* frame-2-banner-mb.png gốc 720×204 */
    width: 93.75vw;
    max-width: calc(100% - 4.1666666667vw);
    aspect-ratio: 720/204;
    background-image: url("/images/bd/frame-2-banner-mb.png");
  }
  .bd-frame-2 #quiz-questions {
    top: 37.109375vw;
    max-width: 143.75vw;
    padding: 0 2.0833333333vw;
  }
  .bd-frame-2 #quiz-question-text {
    font-size: 4.6940104167vw;
    margin-bottom: 7.421875vw;
  }
  .bd-frame-2 #quiz-options {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1.8229166667vw;
    column-gap: 0;
    justify-content: center;
    justify-items: center;
  }
  .bd-frame-2 #quiz-options button {
    width: 68.6197916667vw;
    height: 17.1875vw;
    max-width: 100%;
    font-size: 4.6341145833vw;
    line-height: 1;
    padding: 1vw 1.5vw 0.6vw 3.5vw;
  }
  .bd-frame-2 .quiz-start-btn {
    top: 138.8020833333vw;
    width: 50.2604166667vw;
    height: 14.9739583333vw;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .bd-frame-2 .quiz-result-visual {
    top: 40.3645833333vw;
    width: 97.0052083333vw;
    max-width: calc(100% - 3.125vw);
  }
}
.bd-frame-3 {
  height: 54.65vw;
  padding-top: 10vw;
  box-sizing: border-box;
  color: white;
}
.bd-frame-3-title {
  font-size: 5.35vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  text-align: center;
  background: linear-gradient(180deg, #303792 0%, #8153de 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.bd-frame-3-gens {
  width: 79.8vw;
  max-width: 100%;
  margin-top: 2vw;
  margin-inline: auto;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 4.3vw;
  justify-content: center;
}
.bd-frame-3-gens--single-col {
  width: 37.75vw;
  gap: 0;
}

.bd-frame-3-gens__col {
  flex: 0 0 37.75vw;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
  box-sizing: border-box;
}

.bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card {
  background: none;
}
.bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  background: url("/images/bd/bd-frame-3-item-background.png") no-repeat center;
  background-size: 100% 100%;
  transform: scaleX(-1);
  transform-origin: center center;
  pointer-events: none;
  z-index: 0;
}
.bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card__inner,
.bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card__views,
.bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card__complete-label {
  z-index: 1;
}
.bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card__inner {
  flex-direction: row-reverse;
}
.bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card__cell--left {
  justify-content: flex-end;
}
.bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card__cell--right {
  justify-content: flex-start;
}
.bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card__views {
  left: 10.4vw;
  right: auto;
  text-align: right;
}
.bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card__complete-label {
  left: -0.5vw;
  right: auto;
}

.bd-frame-3-gen-card__complete-label {
  position: absolute;
  right: -0.5vw;
  bottom: -0.2vw;
  width: 10.7vw;
  height: 2.5vw;
  box-sizing: border-box;
  background: url("/images/bd/bg-complate-label.png") no-repeat center;
  background-size: 100% 100%;
  pointer-events: none;
}

.bd-frame-3-gen-card {
  position: relative;
  width: 37.75vw;
  height: 6.75vw;
  box-sizing: border-box;
  background: url("/images/bd/bd-frame-3-item-background.png") no-repeat center;
  background-size: 100% 100%;
  color: #fff;
  min-width: 0;
  transform-origin: center center;
}
.bd-frame-3-gen-card.btn-click-feedback {
  animation: frame-login-btn-click 0.26s ease-out forwards;
}

.bd-frame-3-gen-card__inner {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4vw;
  padding: 0 0.4vw 0 0.4vw;
}

.bd-frame-3-gen-card__cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
}
.bd-frame-3-gen-card__cell--left {
  justify-content: flex-start;
}
.bd-frame-3-gen-card__cell--right {
  justify-content: flex-end;
}

.bd-frame-3-gen-card__name-stack {
  position: relative;
  width: 9.1vw;
  height: 2.1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.bd-frame-3-gen-card__gen-icon {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 50%;
  transform: translateX(-50%);
  width: 8.2vw;
  height: 9.1vw;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-frame-3-gen-card__gen-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.bd-frame-3-gen-card__name {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding-bottom: 0.2vw;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("/images/bd/gen-name-background.png") no-repeat center;
  background-size: 100% 100%;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.3155vw;
  font-weight: bold;
  line-height: 1.2;
  color: rgb(255, 255, 255);
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0.1vw 0 rgba(90, 49, 177, 0.65);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.bd-frame-3-gen-card__reward {
  position: relative;
  width: 8.55vw;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.bd-frame-3-gen-card__lock {
  position: absolute;
  left: 50%;
  top: -0.23vw;
  transform: translateX(-50%);
  width: 2.05vw;
  height: 2.7vw;
  box-sizing: border-box;
  background: url("/images/bd/lock.png") no-repeat center;
  background-size: 100% 100%;
  pointer-events: none;
}

.bd-frame-3-gen-card__uc {
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 2.1vw;
  font-weight: normal;
  line-height: 1.1;
  color: #9d93f3;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding-bottom: 0.3vw;
}

.bd-frame-3-gen-card--finished .bd-frame-3-gen-card__uc {
  color: #fff;
}

.bd-frame-3-gen-card__mid {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 16.6vw;
}

.bd-frame-3-gen-card__views {
  position: absolute;
  right: 10.4vw;
  top: 1.25vw;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 0.8585vw;
  font-weight: normal;
  line-height: 1.2;
  color: #313893;
  text-align: left;
}

.bd-frame-3-gen-card__track {
  width: 16.6vw;
  height: 1.15vw;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
}

.bd-frame-3-gen-card__bar {
  height: 100%;
  max-width: 100%;
  background: url("/images/bd/processbar-background.png") no-repeat left center;
  background-size: 16.6vw 100%;
}

@media (max-width: 768px) {
  .bd-frame-3 {
    height: 211.71875vw;
    padding-top: 22.3vw;
  }
  .bd-frame-3-title {
    font-size: 11.4583333333vw;
  }
  .bd-frame-3-gens {
    width: 93.359375vw;
    max-width: 100%;
    margin-top: 6.9010416667vw;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 1.4838576159vw;
  }
  .bd-frame-3-gens--single-col {
    width: 93.359375vw;
    gap: 0;
  }
  .bd-frame-3-gens__col {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    gap: 1.4838576159vw;
  }
  .bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card {
    background: url("/images/bd/bd-frame-3-item-background.png") no-repeat center;
    background-size: 100% 100%;
  }
  .bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card::before {
    content: none;
  }
  .bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card__inner {
    flex-direction: row;
  }
  .bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card__cell--left {
    justify-content: flex-start;
  }
  .bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card__cell--right {
    justify-content: flex-end;
  }
  .bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card__views {
    left: auto;
    right: 25.7201986755vw;
    text-align: left;
  }
  .bd-frame-3-gens__col--mirrored .bd-frame-3-gen-card__complete-label {
    left: auto;
    right: -1.2365480132vw;
  }
  .bd-frame-3-gen-card {
    width: 100%;
    max-width: 100%;
    height: 16.6933981788vw;
  }
  .bd-frame-3-gen-card__complete-label {
    right: -1.2365480132vw;
    width: 26.4621274834vw;
    height: 6.1827400662vw;
  }
  .bd-frame-3-gen-card__inner {
    gap: 0.9892384106vw;
    padding: 0 0.9892384106vw;
  }
  .bd-frame-3-gen-card__name-stack {
    width: 22.5051738411vw;
    height: 5.1935016556vw;
  }
  .bd-frame-3-gen-card__gen-icon {
    width: 17.96875vw;
    height: 20.0520833333vw;
  }
  .bd-frame-3-gen-card__name {
    width: 22.5051738411vw;
    height: 5.1935016556vw;
    padding: 0 0 0.6510416667vw 0;
    font-size: 2.890625vw;
    text-shadow: 0 0.2473096026vw 0 rgba(90, 49, 177, 0.65);
  }
  .bd-frame-3-gen-card__reward {
    width: 21.1449710265vw;
  }
  .bd-frame-3-gen-card__lock {
    width: 5.0698468543vw;
    height: 6.6773592715vw;
  }
  .bd-frame-3-gen-card__uc {
    font-size: 5.1935016556vw;
  }
  .bd-frame-3-gen-card__mid {
    min-width: 41.0533940397vw;
  }
  .bd-frame-3-gen-card__views {
    right: 25.7201986755vw;
    top: 3.0913700331vw;
    gap: 3vw;
    font-size: 2.2356770833vw;
  }
  .bd-frame-3-gen-card__track {
    width: 41.0533940397vw;
    height: 2.8440604305vw;
  }
  .bd-frame-3-gen-card__bar {
    background-size: 41.0533940397vw 100%;
  }
}
.bd-frame-4 {
  height: 57.6vw;
  padding-top: 17.15vw;
}

.bd-frame-4-gifts {
  width: 63.1vw;
  max-width: 100%;
  height: 15.45vw;
  margin-inline: auto;
  margin-bottom: 0.7vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 1.3vw;
}

.bd-frame-4-gifts__item {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

.bd-frame-4-gifts__item img {
  max-width: 12.6vw;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5vw;
}

.bd-frame-4-links {
  width: 63.1vw;
  max-width: 100%;
  margin-inline: auto;
  margin-top: 1.3vw;
  margin-bottom: 0.7vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.8vw 1.6vw;
}

.bd-frame-4-links__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  max-width: min(100%, 19.7vw);
  height: auto;
  text-decoration: none;
  color: inherit;
  border-radius: 0.6vw;
}

.bd-frame-4-links__thumb {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.4vw;
}

.bd-frame-4-links__label {
  margin-top: 0.4vw;
  font-size: 0.7vw;
  font-weight: 600;
}

@media (max-width: 768px) {
  .bd-frame-4 {
    height: 178.6458333333vw;
    padding-top: 50vw;
  }
  .bd-frame-4-gifts {
    width: 73.5677083333vw;
    max-width: 100%;
    height: 54.8177083333vw;
    min-height: 0;
    box-sizing: border-box;
    margin-inline: auto;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
    gap: 7.9427083333vw 12.109375vw;
  }
  .bd-frame-4-gifts__item {
    flex: 0 0 calc((100% - 12.109375vw) / 2);
    width: calc((100% - 12.109375vw) / 2);
    max-width: calc((100% - 12.109375vw) / 2);
    box-sizing: border-box;
  }
  .bd-frame-4-gifts__item img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 245/180;
    object-fit: contain;
    display: block;
    border-radius: 1.3020833333vw;
  }
  .bd-frame-4-links {
    width: 96.3541666667vw;
    max-width: 100%;
    margin-top: 16vw;
    margin-bottom: 1.8229166667vw;
    row-gap: 2.0833333333vw;
    column-gap: 0;
    justify-content: space-between;
    align-items: flex-start;
  }
  .bd-frame-4-links__card {
    flex: 0 0 30.3385416667vw;
    width: 30.3385416667vw;
    max-width: 30.3385416667vw;
    height: 30.3385416667vw;
    overflow: hidden;
    border-radius: 1.5625vw;
  }
  .bd-frame-4-links__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1.0416666667vw;
  }
}
.bd-frame-5 {
  height: 69.7vw;
  /* Top 3: thẻ <a> thay div — giữ layout, bỏ gạch chân */
}
.bd-frame-5 .bd-frame-5-layout {
  width: 69.45vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 37.7vw 30.75vw;
  column-gap: 1vw;
}
.bd-frame-5 .bd-section-title {
  font-size: 3.75vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  text-align: center;
  background: linear-gradient(180deg, #303792 0%, #8153de 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.bd-frame-5 .bd-frame-5-col-right > .bd-section-title {
  margin-top: 4.25vw;
}
.bd-frame-5 .top-user.card {
  background-image: url("/images/bd/bd-card-background.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.bd-frame-5 #top3-container a.top-user.card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1), filter 0.28s ease, box-shadow 0.28s ease;
}
.bd-frame-5 #top3-container a.top-user.card:hover {
  transform: translateY(-0.2vw) scale(1.02);
  filter: brightness(1.06);
  box-shadow: 0 0.4vw 1.1vw rgba(48, 55, 146, 0.3);
  z-index: 2;
}
.bd-frame-5 #top3-container a.top-user.card:active {
  transform: translateY(-0.1vw) scale(1.01);
  transition-duration: 0.1s;
}
.bd-frame-5 a.bd-highlight-video-card.card {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1), filter 0.28s ease, box-shadow 0.28s ease;
}
.bd-frame-5 a.bd-highlight-video-card.card:hover {
  transform: translateY(-0.25vw) scale(1.025);
  filter: brightness(1.07) saturate(1.05);
  box-shadow: 0 0.3vw 1vw rgba(48, 55, 146, 0.35), 0 0.1vw 0.4vw rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.bd-frame-5 a.bd-highlight-video-card.card:active {
  transform: translateY(-0.1vw) scale(1.01);
  transition-duration: 0.1s;
}
.bd-frame-5 .highlight-video-container {
  display: grid;
  grid-template-columns: repeat(3, 9.45vw);
  column-gap: 1vw;
  row-gap: 0;
  width: 100%;
  justify-content: center;
  margin-top: 1.25vw;
  isolation: isolate;
}
.bd-frame-5 .bd-highlight-video-card.card {
  width: 9.45vw;
  height: 13.7vw;
  background-image: url("/images/bd/bd-card-background.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.bd-frame-5 .bd-highlight-video-card.card .bd-highlight-video-thumb.top-user-image {
  position: relative;
  margin-top: 2.1724137931vw;
  width: 6.4448275862vw;
  height: 6.4448275862vw;
  border: 0.0724137931vw solid #fff;
}
.bd-frame-5 .bd-highlight-video-card.card .bd-highlight-video-thumb.top-user-image img {
  position: relative;
  z-index: 0;
  display: block;
}
.bd-frame-5 .bd-highlight-video-card.card .bd-highlight-video-thumb.top-user-image::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2.6068965517vw;
  height: 2.6068965517vw;
  background: url("/images/play-button.png") no-repeat center;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0.1vw 0.2vw rgba(0, 0, 0, 0.45));
}
.bd-frame-5 .bd-highlight-video-card.card .card-footer {
  height: 4.7793103448vw;
}
.bd-frame-5 .bd-highlight-video-card.card .card-footer .card-footer-name {
  font-size: 1.2882413793vw;
  height: 1.6655172414vw;
}
.bd-frame-5 .bd-highlight-video-card.card .card-footer .card-footer-number {
  margin-top: 0.2896551724vw;
  font-size: 1.1481206897vw;
  line-height: 1.1481206897vw;
}
.bd-frame-5 .bd-highlight-video-card.card .card-footer .card-footer-number .con-mat::after {
  top: 50%;
  transform: translateY(-50%);
  right: -1.2310344828vw;
  width: 0.9051724138vw;
  height: 0.4706896552vw;
  background-size: 0.9051724138vw 0.4706896552vw;
  background-position: center;
  background-repeat: no-repeat;
}
.bd-frame-5 .top-user-2,
.bd-frame-5 .top-user-3 {
  width: 11vw;
}
.bd-frame-5 .top-user-2 .card-footer .card-footer-name,
.bd-frame-5 .top-user-3 .card-footer .card-footer-name {
  font-size: 1.5vw;
  line-height: 1.65vw;
}
.bd-frame-5 .top-user-2 .card-footer .card-footer-number,
.bd-frame-5 .top-user-3 .card-footer .card-footer-number {
  font-size: 1.3vw;
  line-height: 1.45vw;
  margin-top: 0;
}
.bd-frame-5 .bd-ranking-frame {
  position: relative;
  width: 100%;
  height: auto;
}
.bd-frame-5 .top-3-block {
  width: 100%;
  margin-left: 0;
  margin-top: 4.25vw;
}
.bd-frame-5 .top-3-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0;
  margin-left: 0;
  isolation: isolate;
}
.bd-frame-5 .rank-container {
  position: relative;
  width: 100%;
  height: auto;
  right: auto;
  top: auto;
  margin-top: 9.6vw;
}
.bd-frame-5 .rank-container .filter-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 0.5vw;
}
.bd-frame-5 .rank-container .filter-container .filter-item {
  width: 9vw;
  height: 2.45vw;
  flex-shrink: 0;
  box-sizing: border-box;
}
.bd-frame-5 .rank-container .rank-table {
  margin-top: 2.25vw;
  /* Đã login + có me: co rank-body đúng bằng chiều cao hàng me (hàng me nằm dưới body) */
  /* Hàng BXH (thẻ <a>): hover rõ trên trang sinh nhật */
  /* Hàng me: dưới rank-body, cùng typographic / hover với hàng trong body */
}
.bd-frame-5 .rank-container .rank-table.bd-rank-table--has-me .rank-body {
  height: calc(17.5vw - 0.45vw - 0.45vw - 0.05vw - 2.3vw);
}
.bd-frame-5 .rank-container .rank-table .header .rank-col {
  font-size: 1.9vw;
}
.bd-frame-5 .rank-container .rank-table .rank-body .rank-row {
  font-size: 1.9vw;
  padding: 0.45vw 0;
}
.bd-frame-5 .rank-container .rank-table .rank-body a.rank-row {
  border-radius: 0.5vw;
  transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
.bd-frame-5 .rank-container .rank-table .rank-body a.rank-row:hover {
  transform: translateX(0.2vw);
  background-color: rgba(103, 123, 211, 0.28);
  box-shadow: 0 0.2vw 0.7vw rgba(0, 0, 0, 0.18);
  color: #ffd049;
}
.bd-frame-5 .rank-container .rank-table .rank-body a.rank-row:active {
  transform: translateX(0.1vw);
  transition-duration: 0.1s;
}
.bd-frame-5 .rank-container .rank-table > a.rank-row.bd-my-rank-sticky {
  font-size: 1.9vw;
  padding: 0.45vw 0;
  color: #ffd049;
  border-radius: 0;
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(24, 30, 72, 0) 0%, rgba(24, 30, 72, 0.72) 28%, rgba(24, 30, 72, 0.96) 50%, rgba(24, 30, 72, 0.72) 72%, rgba(24, 30, 72, 0) 100%);
  transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}
.bd-frame-5 .rank-container .rank-table > a.rank-row.bd-my-rank-sticky:hover {
  transform: translateX(0.2vw);
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(24, 30, 72, 0) 0%, rgba(103, 123, 211, 0.22) 28%, rgba(103, 123, 211, 0.38) 50%, rgba(103, 123, 211, 0.22) 72%, rgba(24, 30, 72, 0) 100%);
  box-shadow: 0 0.2vw 0.7vw rgba(0, 0, 0, 0.18);
  color: #ffd049;
}
.bd-frame-5 .rank-container .rank-table > a.rank-row.bd-my-rank-sticky:active {
  transform: translateX(0.1vw);
  transition-duration: 0.1s;
}
.bd-frame-5 .update-time {
  display: none;
}

@media (max-width: 768px) {
  .bd-frame-5 {
    height: 280.7291666667vw;
  }
  .bd-frame-5 .bd-frame-5-layout {
    width: 100%;
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .bd-frame-5 .bd-ranking-frame {
    height: 154.9479166667vw;
  }
  .bd-frame-5 .top-3-block {
    width: 100%;
    margin: 0;
    padding-top: 13.671875vw;
  }
  .bd-frame-5 .bd-frame-5-col-right > .bd-section-title {
    margin-top: 0;
  }
  .bd-frame-5 .bd-section-title {
    font-size: 7.03125vw;
  }
  .bd-frame-5 .top-3-container {
    display: flex;
    gap: 1.3020833333vw;
    justify-content: center;
    margin: 0;
    width: 100%;
    padding-top: 1.6927083333vw;
    isolation: isolate;
  }
  .bd-frame-5 #top3-container a.top-user.card {
    transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1), filter 0.28s ease, box-shadow 0.28s ease;
  }
  .bd-frame-5 #top3-container a.top-user.card:hover {
    transform: translateY(-0.5208333333vw) scale(1.02);
    filter: brightness(1.06);
    box-shadow: 0 1.0416666667vw 2.8645833333vw rgba(48, 55, 146, 0.3);
    z-index: 2;
  }
  .bd-frame-5 #top3-container a.top-user.card:active {
    transform: translateY(-0.2604166667vw) scale(1.01);
    transition-duration: 0.1s;
  }
  .bd-frame-5 .frame3 .top-3-container .top-user-1.card {
    width: 29.6875vw;
    height: 42.7083333333vw;
  }
  .bd-frame-5 .frame3 .top-3-container .top-user-1.card .top-user-image {
    margin-top: 6.8247126437vw;
    width: 20.2466475096vw;
    height: 20.2466475096vw;
    border: 0.2274904215vw solid #fff;
  }
  .bd-frame-5 .frame3 .top-3-container .top-user-1.card .number {
    top: 3.2986111111vw;
    right: 3.1848659004vw;
    width: 3.9810823755vw;
    height: 9.5545977011vw;
  }
  .bd-frame-5 .frame3 .top-3-container .top-user-1.card .card-footer {
    height: 15.0143678161vw;
  }
  .bd-frame-5 .frame3 .top-3-container .top-user-1.card .card-footer .card-footer-name {
    font-size: 4.0470545977vw;
    line-height: 1.2;
    height: 5.2413793103vw;
  }
  .bd-frame-5 .frame3 .top-3-container .top-user-1.card .card-footer .card-footer-number {
    margin-top: 0.9099616858vw;
    font-size: 3.6068606322vw;
    line-height: 3.6068606322vw;
  }
  .bd-frame-5 .frame3 .top-3-container .top-user-1.card .card-footer .card-footer-number .con-mat::after {
    top: 50%;
    transform: translateY(-50%);
    right: -4.1931034483vw;
    width: 2.9701149425vw;
    height: 1.6597701149vw;
    background-size: 2.8436302682vw 1.4786877395vw;
    background-position: center;
    background-repeat: no-repeat;
  }
  .bd-frame-5 .frame3 .top-3-container .top-user-2,
  .bd-frame-5 .frame3 .top-3-container .top-user-3 {
    margin-top: 8.6206896552vw;
    width: 25vw;
    height: 35.4166666667vw;
  }
  .bd-frame-5 .frame3 .top-3-container .top-user-2 .top-user-image,
  .bd-frame-5 .frame3 .top-3-container .top-user-3 .top-user-image {
    margin-top: 5.8189655172vw;
    width: 16.1637931034vw;
    height: 16.1637931034vw;
    border: 0.2155172414vw solid #fff;
  }
  .bd-frame-5 .frame3 .top-3-container .top-user-2 .card-footer,
  .bd-frame-5 .frame3 .top-3-container .top-user-3 .card-footer {
    height: 12.7155172414vw;
  }
  .bd-frame-5 .frame3 .top-3-container .top-user-2 .card-footer .card-footer-name,
  .bd-frame-5 .frame3 .top-3-container .top-user-3 .card-footer .card-footer-name {
    font-size: 3.2309424644vw;
    line-height: 1.2;
    height: 4.9655172414vw;
  }
  .bd-frame-5 .frame3 .top-3-container .top-user-2 .card-footer .card-footer-number,
  .bd-frame-5 .frame3 .top-3-container .top-user-3 .card-footer .card-footer-number {
    margin-top: -0.8275862069vw;
    font-size: 2.8795161756vw;
    line-height: 2.8795161756vw;
  }
  .bd-frame-5 .frame3 .top-3-container .top-user-2 .card-footer .card-footer-number .con-mat::after,
  .bd-frame-5 .frame3 .top-3-container .top-user-3 .card-footer .card-footer-number .con-mat::after {
    top: 50%;
    transform: translateY(-50%);
    right: -3.9724137931vw;
    width: 2.8137931034vw;
    height: 1.5724137931vw;
    background-size: 2.6939655172vw 1.400862069vw;
    background-position: center;
    background-repeat: no-repeat;
  }
  .bd-frame-5 .frame3 .top-3-container .top-user-2 .number,
  .bd-frame-5 .frame3 .top-3-container .top-user-3 .number {
    top: 2.1551724138vw;
    right: 1.5086206897vw;
    width: 6.8965517241vw;
    height: 9.5905172414vw;
  }
  .bd-frame-5 .rank-container {
    margin-top: 14.0625vw;
    width: 100%;
  }
  .bd-frame-5 .rank-container .filter-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.0416666667vw;
    padding: 0 2.2135416667vw;
  }
  .bd-frame-5 .rank-container .filter-container .filter-item {
    width: 22.7864583333vw;
    height: 6.1197916667vw;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  .bd-frame-5 .rank-container .rank-table {
    margin-top: 7.1614583333vw;
  }
  .bd-frame-5 .rank-container .rank-table.bd-rank-table--has-me .rank-body {
    height: calc(39.0625vw - 1.3020833333vw - 0.1302083333vw - 5.7291666667vw);
  }
  .bd-frame-5 .rank-container .rank-table .header.rank-row {
    padding-top: 0;
    padding-bottom: 1.3020833333vw;
  }
  .bd-frame-5 .rank-container .rank-table .header.rank-row .rank-col {
    font-size: 4.8177083333vw;
  }
  .bd-frame-5 .rank-container .rank-table .rank-body .rank-row {
    padding: 0 0 1.3020833333vw;
  }
  .bd-frame-5 .rank-container .rank-table .rank-body .rank-row .rank-col {
    font-size: 4.6875vw;
  }
  .bd-frame-5 .rank-container .rank-table .rank-body a.rank-row {
    border-radius: 1.3020833333vw;
    transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
  }
  .bd-frame-5 .rank-container .rank-table .rank-body a.rank-row:hover {
    transform: translateX(0.5208333333vw);
    background-color: rgba(103, 123, 211, 0.28);
    box-shadow: 0 0.5208333333vw 1.8229166667vw rgba(0, 0, 0, 0.18);
    color: #ffd049;
  }
  .bd-frame-5 .rank-container .rank-table .rank-body a.rank-row:active {
    transform: translateX(0.2604166667vw);
    transition-duration: 0.1s;
  }
  .bd-frame-5 .rank-container .rank-table > a.rank-row.bd-my-rank-sticky {
    padding: 0 0 1.3020833333vw;
    color: #ffd049;
    border-radius: 0;
    background-color: transparent;
    background-image: linear-gradient(90deg, rgba(24, 30, 72, 0) 0%, rgba(24, 30, 72, 0.72) 28%, rgba(24, 30, 72, 0.96) 50%, rgba(24, 30, 72, 0.72) 72%, rgba(24, 30, 72, 0) 100%);
    transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
  }
  .bd-frame-5 .rank-container .rank-table > a.rank-row.bd-my-rank-sticky .rank-col {
    font-size: 4.6875vw;
  }
  .bd-frame-5 .rank-container .rank-table > a.rank-row.bd-my-rank-sticky:hover {
    transform: translateX(0.5208333333vw);
    background-color: transparent;
    background-image: linear-gradient(90deg, rgba(24, 30, 72, 0) 0%, rgba(103, 123, 211, 0.22) 28%, rgba(103, 123, 211, 0.38) 50%, rgba(103, 123, 211, 0.22) 72%, rgba(24, 30, 72, 0) 100%);
    box-shadow: 0 0.5208333333vw 1.8229166667vw rgba(0, 0, 0, 0.18);
    color: #ffd049;
  }
  .bd-frame-5 .rank-container .rank-table > a.rank-row.bd-my-rank-sticky:active {
    transform: translateX(0.2604166667vw);
    transition-duration: 0.1s;
  }
  .bd-frame-5 .update-time {
    font-size: 3.6015625vw;
    margin-top: 9.2447916667vw;
  }
  .bd-frame-5 .highlight-video-container {
    width: 96.3541666667vw;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3.2552083333vw;
    display: grid;
    grid-template-columns: repeat(3, 31.25vw);
    justify-content: space-between;
    row-gap: 2.6041666667vw;
    box-sizing: border-box;
    height: 98vw;
    overflow: auto;
  }
  .bd-frame-5 a.bd-highlight-video-card.card {
    width: 31.25vw;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 45.3125vw;
    transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1), filter 0.28s ease, box-shadow 0.28s ease;
  }
  .bd-frame-5 a.bd-highlight-video-card.card:hover {
    transform: translateY(-0.6510416667vw) scale(1.025);
    filter: brightness(1.07) saturate(1.05);
    box-shadow: 0 0.78125vw 2.6041666667vw rgba(48, 55, 146, 0.35), 0 0.2604166667vw 1.0416666667vw rgba(0, 0, 0, 0.2);
    z-index: 2;
  }
  .bd-frame-5 a.bd-highlight-video-card.card:active {
    transform: translateY(-0.2604166667vw) scale(1.01);
    transition-duration: 0.1s;
  }
  .bd-frame-5 a.bd-highlight-video-card.card .bd-highlight-video-thumb.top-user-image {
    position: relative;
    margin-top: 7.183908046vw;
    width: 21.3122605364vw;
    height: 21.3122605364vw;
    border: 0.2394636015vw solid #fff;
  }
  .bd-frame-5 a.bd-highlight-video-card.card .bd-highlight-video-thumb.top-user-image img {
    position: relative;
    z-index: 0;
    display: block;
  }
  .bd-frame-5 a.bd-highlight-video-card.card .bd-highlight-video-thumb.top-user-image::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8.6206896552vw;
    height: 8.6206896552vw;
    background: url("/images/play-button.png") no-repeat center;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 0.2604166667vw 0.5208333333vw rgba(0, 0, 0, 0.45));
  }
  .bd-frame-5 a.bd-highlight-video-card.card .card-footer {
    height: 15.8045977011vw;
  }
  .bd-frame-5 a.bd-highlight-video-card.card .card-footer .card-footer-name {
    font-size: 4.2600574713vw;
    height: 5.5172413793vw;
  }
  .bd-frame-5 a.bd-highlight-video-card.card .card-footer .card-footer-number {
    margin-top: 0.9578544061vw;
    font-size: 3.7966954023vw;
    line-height: 3.7966954023vw;
  }
  .bd-frame-5 a.bd-highlight-video-card.card .card-footer .card-footer-number .con-mat::after {
    top: 50%;
    transform: translateY(-50%);
    right: -4.4137931034vw;
    width: 3.1264367816vw;
    height: 1.7471264368vw;
    background-size: 2.9932950192vw 1.55651341vw;
    background-position: center;
    background-repeat: no-repeat;
  }
}
.popup-bd-gen-detail .popup-container {
  position: relative;
  width: 58.6vw;
  height: 33.1vw;
  background: url("/images/bd/popup/gen_detail.png") no-repeat center;
  background-size: 100% 100%;
  margin-top: 0;
}
.popup-bd-gen-detail .close-btn {
  position: absolute;
  top: 0.45vw;
  right: -1.6vw;
  width: 1.9vw;
  height: 1.7vw;
  background: url("/images/X.png") no-repeat center center;
  background-size: cover;
}
.popup-bd-gen-detail .close-btn:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.popup-bd-gen-detail .popup-content {
  position: absolute;
  inset: 0;
  padding: 15.4vw 3.4vw 0;
  text-align: left;
  font-family: "svn-agency-fb-black", sans-serif;
  text-transform: uppercase;
}
.popup-bd-gen-detail .popup-title {
  font-size: 5.35vw;
  font-family: "svn-agency-fb-black", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  background: linear-gradient(180deg, #303792 0%, #8254df 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.popup-bd-gen-detail .bd-gen-detail__mission {
  font-size: 2.569vw;
  color: #7e52db;
  font-weight: bold;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 1.2vw;
}
.popup-bd-gen-detail .bd-gen-detail__task {
  font-size: 2.569vw;
  color: #7e52db;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 0.65vw;
}
.popup-bd-gen-detail .bd-gen-detail__task + .bd-gen-detail__task {
  margin-left: 7vw;
}
.popup-bd-gen-detail .bd-gen-detail__value {
  color: #3448a9;
}
.popup-bd-gen-detail .gen-detail__gen-icon {
  position: absolute;
  bottom: 0;
  right: -8.9vw;
  height: 30.45vw;
  width: auto;
  display: flex;
  align-items: center;
}
.popup-bd-gen-detail .gen-detail__gen-icon img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 768px) {
  .popup-bd-gen-detail .popup-container {
    width: 93.359375vw;
    height: 52.7337084044vw;
  }
  .popup-bd-gen-detail .close-btn {
    top: 0.7169235282vw;
    right: -2.5490614334vw;
    width: 3.0270104522vw;
    height: 2.708377773vw;
  }
  .popup-bd-gen-detail .popup-content {
    padding: 24.5347162969vw 5.4167555461vw 0;
  }
  .popup-bd-gen-detail .popup-title {
    font-size: 8.5234241681vw;
  }
  .popup-bd-gen-detail .bd-gen-detail__mission {
    font-size: 4.0928367641vw;
    margin-bottom: 1.9117960751vw;
  }
  .popup-bd-gen-detail .bd-gen-detail__task {
    font-size: 4.0928367641vw;
    margin-bottom: 1.0355562073vw;
  }
  .popup-bd-gen-detail .bd-gen-detail__task + .bd-gen-detail__task {
    margin-left: 11.1521437713vw;
  }
  .popup-bd-gen-detail .gen-detail__gen-icon {
    height: 33.9582777837vw;
    right: 0;
  }
}

.popup-bd-gen-submit .popup-container {
  position: relative;
  width: 58.6vw;
  min-height: auto;
  background: none;
  margin-top: 0;
  box-sizing: border-box;
}
.popup-bd-gen-submit .close-btn {
  position: absolute;
  top: 0.45vw;
  right: 0;
  width: 1.9vw;
  height: 1.7vw;
  background: url("/images/X.png") no-repeat center center;
  background-size: cover;
}
.popup-bd-gen-submit .close-btn:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.popup-bd-gen-submit .popup-title,
.popup-bd-gen-submit .bd-gen-submit__title {
  font-size: 6vw;
  font-family: "svn-agency-fb-black", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  -webkit-text-fill-color: #fff;
  padding: 2.4vw 2vw 0.8vw;
  margin: 0;
}
.popup-bd-gen-submit .bd-gen-submit__body {
  padding: 0 2.4vw 2vw;
  min-height: 43.6vw;
  height: auto;
  max-height: min(90vh, 100vw);
  overflow-y: auto;
  box-sizing: border-box;
}
.popup-bd-gen-submit .bd-gen-submit__empty {
  text-align: center;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 2vw;
  color: #7e52db;
  margin: 1.2vw 0 0;
}
.popup-bd-gen-submit .bd-gen-submit__gens {
  width: 100%;
  margin-top: 0.6vw;
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
  justify-content: center;
  box-sizing: border-box;
}
.popup-bd-gen-submit .bd-gen-submit__gens--single-col {
  max-width: 37.75vw;
  margin-inline: auto;
}
.popup-bd-gen-submit .bd-gen-submit__col {
  flex: 1 1 24vw;
  max-width: 37.75vw;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vw;
}
.popup-bd-gen-submit .bd-gen-submit-option {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  margin: 0 auto;
  width: 9.1vw;
  height: 10.15vw;
  cursor: pointer;
  box-sizing: border-box;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: visible;
}
.popup-bd-gen-submit .bd-gen-submit-option:hover .bd-gen-submit-option__name {
  opacity: 0.92;
}
.popup-bd-gen-submit .bd-gen-submit-option:hover .bd-gen-submit-option__icon {
  transform: translateX(-50%) scale(1.03);
}
.popup-bd-gen-submit .bd-gen-submit-option:focus-visible {
  outline: 2px solid #8254df;
  outline-offset: 4px;
}
.popup-bd-gen-submit .bd-gen-submit-option__inner {
  position: relative;
  width: 9.1vw;
  height: 10.15vw;
  flex-shrink: 0;
  min-width: 0;
  overflow: visible;
}
.popup-bd-gen-submit .bd-gen-submit-option__stack {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 9.1vw;
  height: 2.1vw;
  min-width: 0;
}
.popup-bd-gen-submit .bd-gen-submit-option__name {
  position: relative;
  z-index: 1;
  width: 9.1vw;
  height: 2.1vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.4vw 0.2vw;
  background: url("/images/bd/gen-name-background.png") no-repeat center;
  background-size: 100% 100%;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.3155vw;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  text-shadow: 0 0.1vw 0 rgba(90, 49, 177, 0.65);
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
}
.popup-bd-gen-submit .bd-gen-submit-option__icon {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 50%;
  width: 8.2vw;
  height: 9.1vw;
  transform: translateX(-50%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
  pointer-events: none;
}
.popup-bd-gen-submit .bd-gen-submit-option__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
@media (max-width: 768px) {
  .popup-bd-gen-submit .popup-container {
    width: min(100%, 93.359375vw);
    min-height: auto;
  }
  .popup-bd-gen-submit .close-btn {
    top: 1.4338470563vw;
    right: 0;
    width: 6.0540209044vw;
    height: 5.4167555461vw;
  }
  .popup-bd-gen-submit .popup-title,
  .popup-bd-gen-submit .bd-gen-submit__title {
    padding: 5.0981228669vw 3.8235921502vw 1.9117960751vw;
  }
  .popup-bd-gen-submit .bd-gen-submit__body {
    padding: 0 3.8235921502vw 4.4608575085vw;
    min-height: 138.9238481229vw;
    height: auto;
    max-height: min(88vh, 318.6326791809vw);
  }
  .popup-bd-gen-submit .bd-gen-submit__empty {
    font-size: 6.3726535836vw;
    margin: 3.8235921502vw 0 0;
  }
  .popup-bd-gen-submit .bd-gen-submit__gens {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 6.3726535836vw;
    margin-top: 1.9117960751vw;
  }
  .popup-bd-gen-submit .bd-gen-submit__gens--single-col {
    max-width: 100%;
  }
  .popup-bd-gen-submit .bd-gen-submit__col {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(50% - 3.1863267918vw);
    align-items: center;
    gap: 3.1863267918vw;
  }
  .popup-bd-gen-submit .bd-gen-submit__gens--single-col .bd-gen-submit__col {
    max-width: 28.9955738055vw;
    flex: 0 0 auto;
  }
  .popup-bd-gen-submit .bd-gen-submit-option {
    width: 28.9955738055vw;
    height: 32.3412169369vw;
  }
  .popup-bd-gen-submit .bd-gen-submit-option__inner {
    width: 28.9955738055vw;
    height: 32.3412169369vw;
  }
  .popup-bd-gen-submit .bd-gen-submit-option__stack {
    width: 28.9955738055vw;
    height: 6.6912862628vw;
  }
  .popup-bd-gen-submit .bd-gen-submit-option__name {
    width: 28.9955738055vw;
    height: 6.6912862628vw;
    font-size: 4.1916128946vw;
    padding: 0 1.2745307167vw 0.6372653584vw;
    text-shadow: 0 0.3186326792vw 0 rgba(90, 49, 177, 0.65);
  }
  .popup-bd-gen-submit .bd-gen-submit-option__icon {
    width: 26.1278796928vw;
    height: 28.9955738055vw;
  }
  .popup-bd-gen-submit .bd-gen-submit-option:focus-visible {
    outline-offset: 0.6372653584vw;
  }
}

#bd-gen-submit-popup.bd-gen-submit-popup--picking .popup-title,
#bd-gen-submit-popup.bd-gen-submit-popup--picking .bd-gen-submit__title,
#bd-gen-submit-popup.bd-gen-submit-popup--picking .close-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#bd-gen-submit-popup.bd-gen-submit-popup--picking .bd-gen-submit__body {
  pointer-events: none;
}
#bd-gen-submit-popup.bd-gen-submit-popup--picking .bd-gen-submit-option:not(.bd-gen-submit-option--picked) {
  display: none !important;
}
#bd-gen-submit-popup.bd-gen-submit-popup--picking .bd-gen-submit-option--picked {
  pointer-events: none;
}

/* Hover / active — trang sinh nhật (.body-bd): nút, frame 3 Gen, frame 4 link card */
.body-bd .bd-frame-1 button.button:not(:disabled),
.body-bd .bd-frame-1 .bd-btn-nop-bai.button:not(:disabled) {
  transition: transform 0.22s ease, filter 0.22s ease;
  transform-origin: center center;
}
.body-bd .bd-frame-1 button.button:not(:disabled):hover,
.body-bd .bd-frame-1 .bd-btn-nop-bai.button:not(:disabled):hover {
  transform: scale(1.05);
  filter: brightness(1.12) saturate(1.05);
}
.body-bd .bd-frame-1 button.button:not(:disabled):active,
.body-bd .bd-frame-1 .bd-btn-nop-bai.button:not(:disabled):active {
  transform: scale(1.02);
  transition-duration: 0.1s;
}
.body-bd .bd-frame-2 .quiz-start-btn {
  transition: transform 0.22s ease, filter 0.22s ease;
  transform-origin: center center;
}
.body-bd .bd-frame-2 .quiz-start-btn:hover {
  transform: translateX(-50%) scale(1.045);
  filter: brightness(1.1) saturate(1.04);
}
.body-bd .bd-frame-2 .quiz-start-btn:active {
  transform: translateX(-50%) scale(1.02);
  transition-duration: 0.1s;
}
.body-bd .bd-frame-2 #quiz-options button:not(:disabled),
.body-bd .bd-frame-2 .quiz-result-btn,
.body-bd .bd-frame-2-pagination .pagination-nav:not(:disabled),
.body-bd .bd-frame-2-pagination .pagination-page:not(:disabled) {
  transition: transform 0.22s ease, filter 0.22s ease;
  transform-origin: center center;
}
.body-bd .bd-frame-2 #quiz-options button:not(:disabled):hover,
.body-bd .bd-frame-2 .quiz-result-btn:hover,
.body-bd .bd-frame-2-pagination .pagination-nav:not(:disabled):hover,
.body-bd .bd-frame-2-pagination .pagination-page:not(:disabled):hover {
  transform: scale(1.045);
  filter: brightness(1.1) saturate(1.04);
}
.body-bd .bd-frame-2 #quiz-options button:not(:disabled):active,
.body-bd .bd-frame-2 .quiz-result-btn:active,
.body-bd .bd-frame-2-pagination .pagination-nav:not(:disabled):active,
.body-bd .bd-frame-2-pagination .pagination-page:not(:disabled):active {
  transform: scale(1.02);
  transition-duration: 0.1s;
}
.body-bd .bd-frame-3-gen-card {
  transition: transform 0.24s cubic-bezier(0.34, 1.15, 0.64, 1), filter 0.24s ease;
}
.body-bd .bd-frame-3-gen-card:hover {
  transform: scale(1.02) translateY(-0.1vw);
  filter: brightness(1.08) saturate(1.06);
}
.body-bd .bd-frame-3-gen-card:active {
  transform: scale(1.01) translateY(0);
  transition-duration: 0.1s;
}
.body-bd .bd-frame-4-links__card {
  transition: transform 0.24s cubic-bezier(0.34, 1.15, 0.64, 1), filter 0.24s ease;
}
.body-bd .bd-frame-4-links__card:hover {
  transform: translateY(-0.2vw) scale(1.03);
  filter: brightness(1.1);
}
.body-bd .bd-frame-4-links__card:active {
  transform: translateY(-0.05vw) scale(1.015);
  transition-duration: 0.1s;
}
.body-bd .bd-frame-5 .rank-container .filter-item.sort-btn {
  transition: transform 0.2s ease, filter 0.2s ease;
}
.body-bd .bd-frame-5 .rank-container .filter-item.sort-btn:hover {
  transform: scale(1.06);
  filter: brightness(1.15);
}
.body-bd .bd-frame-5 .rank-container .filter-item.sort-btn:active {
  transform: scale(1.03);
  transition-duration: 0.1s;
}
.body-bd .popup .close-btn {
  transition: transform 0.2s ease, filter 0.2s ease;
}
.body-bd .popup .close-btn:hover {
  transform: scale(1.12);
  filter: brightness(1.2);
}
.body-bd .popup button.button:not(:disabled),
.body-bd .popup button.blank-button:not(:disabled),
.body-bd .popup .bd-gen-submit-option {
  transition: transform 0.22s ease, filter 0.22s ease;
  transform-origin: center center;
}
.body-bd .popup button.button:not(:disabled):hover,
.body-bd .popup button.blank-button:not(:disabled):hover,
.body-bd .popup .bd-gen-submit-option:hover {
  transform: scale(1.04);
  filter: brightness(1.1);
}
.body-bd .popup button.button:not(:disabled):active,
.body-bd .popup button.blank-button:not(:disabled):active,
.body-bd .popup .bd-gen-submit-option:active {
  transform: scale(1.02);
  transition-duration: 0.1s;
}
@media (max-width: 768px) {
  .body-bd .bd-frame-3-gen-card:hover {
    transform: scale(1.02) translateY(-0.2604166667vw);
  }
}

.event-bd-background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  margin-top: 53.2vw;
  width: 100%;
  height: 250vw;
  background: url("/images/bd/bd-background.jpg") no-repeat center;
  background-size: 100% 100%;
}

.event-bd {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .event-bd-background {
    margin-top: 177.734375vw;
    /* Landing-MB-background.jpg gốc 768×6983 */
    height: 909.2447916667vw;
    background: url("/images/bd/Landing-MB-background.jpg") no-repeat top center;
    background-size: 100% auto;
  }
  .body-bd .nav-fake {
    height: 12.7604166667vw;
  }
}
.body-special-event {
  position: relative;
}
.body-special-event .nav-fake {
  height: 5vw;
}
.body-special-event .sev-page-background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 249.45vw;
  margin-top: 50.2vw;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
.body-special-event:has(#frame1-overlay.is-open) .sev-page-background {
  margin-top: 56.7vw;
}

.special-event {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: transparent;
  z-index: 1;
}
.special-event__frame {
  position: relative;
  z-index: 1;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}
.special-event__frame[style*="--sev-bg-desktop"] {
  background-image: var(--sev-bg-desktop);
}
.special-event__frame--frame1 {
  position: relative;
  width: 100vw;
  height: 45.2vw;
  overflow: hidden;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.special-event__frame--frame1[style*="--sev-bg-desktop"] {
  background-image: var(--sev-bg-desktop);
}
.special-event__frame--frame1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3.6vw;
  background: url("/images/frame-1-background-bottom.png") no-repeat center bottom;
  background-size: cover;
  z-index: 3;
  pointer-events: none;
}
.special-event__video {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}
.special-event__frame--frame1 .special-event__video {
  display: block;
  opacity: 1;
}
.special-event__button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5vw;
  display: block;
  width: 19.3vw;
  max-width: none;
  height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
  transition: transform 0.22s ease, filter 0.22s ease;
  will-change: transform, filter;
}
.special-event__button:hover, .special-event__button:focus-visible {
  transform: translateX(-50%) translateY(-0.3vw) scale(1.035);
  filter: brightness(1.08) drop-shadow(0 0.5vw 0.9vw rgba(109, 229, 255, 0.35));
  outline: none;
}
.special-event__button:active {
  transform: translateX(-50%) translateY(-0.1vw) scale(0.98);
  filter: brightness(1.02);
}
.special-event__button-image {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.special-event__rule-button-container {
  position: absolute;
  left: 0;
  bottom: 2.1vw;
  z-index: 2;
  display: flex;
  justify-content: center;
  width: 100%;
  pointer-events: none;
}
.special-event__rule-button {
  width: 26.75vw;
  height: 2.2vw;
  padding: 0;
  background: url("/images/bd/rule-text-background.png") no-repeat center;
  background-size: contain;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.special-event__rule-button:hover, .special-event__rule-button:focus-visible {
  filter: brightness(1.08) drop-shadow(0 0.4vw 0.7vw rgba(109, 229, 255, 0.28));
  outline: none;
  transform: translateY(-0.15vw);
}
.special-event__rule-button:active {
  filter: brightness(1.02);
  transform: translateY(-0.05vw) scale(0.98);
}

.body-special-event .special-event__frame--frame1.frame1:has(.frame1-overlay.is-open) {
  height: 51.7vw;
  overflow: visible;
}

@keyframes sev-skeleton-pulse {
  0% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.35;
  }
}
@keyframes sev-glow-pulse {
  0% {
    box-shadow: 0 0 0.2vw rgba(244, 197, 66, 0.6);
  }
  50% {
    box-shadow: 0 0 0.8vw rgba(244, 197, 66, 0.95);
  }
  100% {
    box-shadow: 0 0 0.2vw rgba(244, 197, 66, 0.6);
  }
}
.sev-progress {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 2vw 6vw;
  box-sizing: border-box;
  color: #fff;
  background: rgba(5, 6, 15, 0.55);
  font-family: "Roboto", Arial, sans-serif;
}

.sev-skeleton {
  display: inline-block;
  width: 6vw;
  height: 1.2vw;
  border-radius: 0.2vw;
  background: rgba(255, 255, 255, 0.25);
  animation: sev-skeleton-pulse 1.2s ease-in-out infinite;
}

.sev-stats {
  display: flex;
  gap: 1.2vw;
  margin-bottom: 2vw;
}
.sev-stats__badge {
  display: flex;
  align-items: baseline;
  gap: 0.5vw;
  padding: 0.7vw 1.4vw;
  background: rgba(10, 14, 30, 0.72);
  border: 0.05vw solid rgba(244, 197, 66, 0.4);
  border-radius: 2vw;
}
.sev-stats__value {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 1.5vw;
  color: #fff;
  line-height: 1;
}
.sev-stats__label {
  font-size: 0.8vw;
  color: rgba(255, 255, 255, 0.7);
}

.sev-programs {
  margin-bottom: 2vw;
  text-align: center;
}
.sev-programs__heading {
  font-size: 1.4vw;
  color: #f4c542;
  letter-spacing: 0.1vw;
  margin: 0 0 1.2vw;
}
.sev-programs__list {
  display: flex;
  gap: 1.2vw;
  justify-content: center;
  align-items: stretch;
}
.sev-programs__reward {
  margin: 1vw 0 0;
  font-size: 1vw;
  font-weight: 700;
  color: #f4c542;
}

.sev-program {
  flex: 1 1 0;
  min-width: 0;
  max-width: 28vw;
  padding: 1.2vw;
  background: #1b2a6b;
  border: 0.1vw solid rgba(90, 123, 255, 0.6);
  border-radius: 0.6vw;
  text-align: left;
}
.sev-program__name {
  font-size: 1.1vw;
  font-weight: 800;
  color: #f4c542;
  margin-bottom: 0.8vw;
  text-align: center;
}
.sev-program__metrics {
  display: flex;
  flex-direction: column;
  gap: 0.7vw;
}
.sev-program__metric {
  display: flex;
  flex-direction: column;
  gap: 0.2vw;
  padding: 0.6vw 0.8vw;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 0.4vw;
}
.sev-program__metric-label {
  font-size: 0.8vw;
  font-weight: 700;
  color: #fff;
}
.sev-program__metric-target {
  font-size: 0.75vw;
  color: rgba(255, 255, 255, 0.8);
}
.sev-program__metric-reward {
  font-size: 0.75vw;
  font-weight: 700;
  color: #f4c542;
}

.sev-personal {
  margin-bottom: 1.6vw;
  text-align: center;
}
.sev-personal__heading {
  font-size: 1.4vw;
  color: #f4c542;
  letter-spacing: 0.1vw;
  margin: 0 0 0.4vw;
}
.sev-personal__subtitle {
  font-size: 1.1vw;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1.2vw;
}
.sev-personal__cards {
  display: flex;
  gap: 1.2vw;
  justify-content: center;
}

.sev-mission-card {
  flex: 1 1 0;
  max-width: 26vw;
  padding: 1.2vw;
  background: #1b2a6b;
  border: 0.1vw solid rgba(90, 123, 255, 0.6);
  border-radius: 0.6vw;
  text-align: left;
}
.sev-mission-card__title {
  font-size: 1vw;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.3vw;
}
.sev-mission-card__desc {
  font-size: 0.75vw;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.8vw;
}
.sev-mission-card__track {
  position: relative;
  width: 100%;
  height: 0.5vw;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0.3vw;
  overflow: hidden;
}
.sev-mission-card__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #3a5bd9, #5a7bff);
  border-radius: 0.3vw;
  transition: width 0.4s ease;
}
.sev-mission-card__meta {
  margin-top: 0.4vw;
  font-size: 0.7vw;
  color: rgba(255, 255, 255, 0.85);
  text-align: right;
}

.sev-reward {
  display: flex;
  align-items: center;
  gap: 1.2vw;
  justify-content: center;
  padding: 1vw 2vw;
  margin-bottom: 2.4vw;
  background: linear-gradient(90deg, rgba(58, 91, 217, 0.55), rgba(90, 123, 255, 0.25));
  border: 0.1vw solid rgba(244, 197, 66, 0.4);
  border-radius: 0.6vw;
}
.sev-reward__value {
  font-size: 2vw;
  font-weight: 800;
  color: #f4c542;
}
.sev-reward__desc {
  flex: 1;
  font-size: 0.8vw;
  color: rgba(255, 255, 255, 0.8);
}
.sev-reward__btn {
  padding: 0.8vw 2vw;
  font-size: 1vw;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #3a5bd9, #5a7bff);
  border: none;
  border-radius: 1.5vw;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.2s ease, box-shadow 0.2s ease;
}
.sev-reward__btn:disabled, .sev-reward__btn.is-locked {
  filter: grayscale(0.6) brightness(0.7);
  cursor: not-allowed;
}
.sev-reward__btn.is-active {
  filter: none;
  cursor: pointer;
}
.sev-reward__btn.is-glow {
  box-shadow: 0 0 0.7vw rgba(244, 197, 66, 0.8);
}
.sev-reward__btn.is-claimed {
  background: #3a3f52;
  filter: none;
}

.sev-global {
  text-align: center;
  margin-bottom: 2vw;
}
.sev-global__heading {
  font-size: 1.4vw;
  color: #f4c542;
  letter-spacing: 0.1vw;
  margin: 0 0 0.3vw;
}
.sev-global__subtitle {
  font-size: 0.8vw;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 1.2vw;
}
.sev-global__bars {
  display: flex;
  gap: 1.6vw;
}
.sev-global__bar {
  flex: 1;
  padding: 1vw 1.2vw;
  background: rgba(10, 14, 30, 0.72);
  border: 0.05vw solid rgba(90, 123, 255, 0.4);
  border-radius: 0.5vw;
  text-align: left;
}
.sev-global__bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6vw;
}
.sev-global__bar-label {
  font-size: 0.9vw;
  font-weight: 700;
  color: #fff;
}
.sev-global__bar-current {
  font-family: "Courier New", monospace;
  font-size: 1vw;
  color: #f4c542;
}
.sev-global__track {
  width: 100%;
  height: 0.7vw;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.4vw;
  overflow: hidden;
}
.sev-global__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #3a5bd9, #5a7bff);
  border-radius: 0.4vw;
  transition: width 0.4s ease;
}
.sev-global__next {
  display: block;
  margin-top: 0.4vw;
  font-size: 0.65vw;
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
}

.sev-timeline {
  position: relative;
  margin-bottom: 2vw;
}
.sev-timeline__bar {
  position: relative;
  height: 0.3vw;
  margin: 0 3vw 1.2vw;
  background: rgba(244, 197, 66, 0.25);
  border-radius: 0.2vw;
}
.sev-timeline__bar-fill {
  height: 100%;
  width: 0;
  background: #f4c542;
  border-radius: 0.2vw;
  transition: width 0.4s ease;
}
.sev-timeline__markers {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}
.sev-timeline__marker {
  width: 0.8vw;
  height: 0.8vw;
  border-radius: 50%;
  background: #3a3f52;
  border: 0.1vw solid rgba(244, 197, 66, 0.4);
}
.sev-timeline__marker.is-reached {
  background: #f4c542;
  box-shadow: 0 0 0.4vw rgba(244, 197, 66, 0.8);
}
.sev-timeline__cards {
  display: flex;
  gap: 1vw;
}

.sev-milestone {
  flex: 1 1 0;
  min-width: 0;
  padding: 1vw 0.8vw;
  background: #1b2a6b;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 0.1vw solid #f4c542;
  border-radius: 0.5vw;
  text-align: center;
}
.sev-milestone.has-bg-image {
  background-color: transparent;
}
.sev-milestone__index {
  font-size: 0.8vw;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.4vw;
}
.sev-milestone__reward {
  font-size: 1.2vw;
  font-weight: 800;
  color: #f4c542;
  margin-bottom: 0.3vw;
}
.sev-milestone__target {
  font-size: 0.65vw;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.5vw;
}
.sev-milestone__target-ugcs {
  color: #f4c542;
}
.sev-milestone__target-sep {
  color: rgba(255, 255, 255, 0.45);
}
.sev-milestone__status {
  font-size: 0.7vw;
  font-weight: 700;
  color: #fff;
}
.sev-milestone__claim {
  margin-top: 0.5vw;
  padding: 0.4vw 0.8vw;
  font-size: 0.7vw;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #3a5bd9, #5a7bff);
  border: none;
  border-radius: 1vw;
  cursor: pointer;
}
.sev-milestone__claim.is-glow {
  animation: sev-glow-pulse 1.6s ease-in-out infinite;
}
.sev-milestone__claim.is-claimed {
  background: #3a3f52;
  animation: none;
  cursor: not-allowed;
}
.sev-milestone.is-locked {
  border-color: rgba(255, 255, 255, 0.2);
  filter: grayscale(0.8) brightness(0.8);
}
.sev-milestone.is-locked:not(.has-bg-image) {
  background: #3a3f52;
}
.sev-milestone.is-locked .sev-milestone__reward {
  color: rgba(255, 255, 255, 0.6);
}
.sev-milestone.is-locked .sev-milestone__status {
  color: rgba(255, 255, 255, 0.6);
}
.sev-milestone.is-unlocked {
  box-shadow: 0 0 0.6vw rgba(244, 197, 66, 0.4);
}
.sev-milestone.is-claimed .sev-milestone__status {
  color: #f4c542;
}

.sev-toast {
  position: fixed;
  left: 50%;
  bottom: 2vw;
  transform: translateX(-50%) translateY(1vw);
  padding: 0.7vw 1.6vw;
  background: rgba(10, 14, 30, 0.95);
  border: 0.05vw solid #f4c542;
  border-radius: 1.5vw;
  color: #fff;
  font-size: 0.8vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
}
.sev-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.popup.popup-sev-award {
  z-index: 10000;
  background-color: rgba(4, 9, 45, 0.76);
}
.popup.popup-sev-award .sev-award-popup__panel {
  --sev-award-reward-bg: url("/images/special-event/text-background.png");
  --sev-award-panel-width: min(92vw, 658px);
  position: relative;
  width: var(--sev-award-panel-width);
  aspect-ratio: 658/728;
  background: url("/images/special-event/award-popup.png") no-repeat center;
  background-size: contain;
  filter: drop-shadow(0 0.9vw 1.7vw rgba(0, 0, 0, 0.36));
}
.popup.popup-sev-award .sev-award-popup__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.popup.popup-sev-award .sev-award-popup__confetti {
  position: absolute;
  left: 50%;
  top: max(var(--sev-award-panel-width) * -0.1337386, -88px);
  z-index: 2;
  display: block;
  width: calc(var(--sev-award-panel-width) * 1.6246201);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}
.popup.popup-sev-award .sev-award-popup__reward {
  position: absolute;
  left: 50%;
  top: 54.6703296703%;
  width: 86%;
  transform: translateX(-50%);
  font-family: "gs3-agency-fb-bold-otf", "svn-agency-fb-bold", sans-serif;
  font-size: min(var(--sev-award-panel-width) * 0.2401216, 158px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-fill-color: transparent;
  background-color: #fff;
  background-image: var(--sev-award-reward-bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.55);
  filter: drop-shadow(0 0.2vw 0 rgba(62, 36, 151, 0.35)) drop-shadow(0 0.5vw 0.9vw rgba(38, 17, 112, 0.24));
  pointer-events: none;
}
.popup.popup-sev-award .sev-award-popup__home {
  position: absolute;
  left: 17%;
  bottom: 0.5%;
  width: 66%;
  height: 15.8%;
  display: block;
  border-radius: 999px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.popup.popup-sev-award .sev-award-popup__home:hover, .popup.popup-sev-award .sev-award-popup__home:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.04);
  outline: none;
}
.popup.popup-sev-award .sev-award-popup__home:active {
  transform: translateY(0) scale(0.98);
}

@media (max-width: 768px) {
  .popup.popup-sev-award .sev-award-popup__panel {
    --sev-award-panel-width: min(75.5208333333vw, 580px);
  }
}
.sev-frame2 {
  position: relative;
  width: 100%;
  height: 49vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.sev-frame2__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9vw;
  margin: 4.25vw 0 0;
  text-align: center;
  text-transform: uppercase;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 4.25vw;
  line-height: 1.1;
  color: #4a3eae;
}
.sev-frame2__title-text {
  display: inline-block;
  background: linear-gradient(to bottom, #3e3c9f, #8a56e6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sev-frame2__title-icon {
  display: block;
  flex: 0 0 auto;
  width: 5.25vw;
  height: 5.15vw;
  object-fit: contain;
}
.sev-frame2__title-icon.is-hidden {
  display: none;
}
.sev-frame2__mobile-title {
  display: none;
}
.sev-frame2__mobile-title-texture {
  display: none;
}
.sev-frame2__guest {
  display: flex;
  justify-content: center;
  column-gap: 1.85vw;
  margin-top: 3vw;
}
.sev-frame2__item {
  position: relative;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 38.5vw;
  height: 24.1vw;
  padding-left: 0.95vw;
  padding-right: 0.95vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.sev-frame2__item--video {
  background-image: url("/images/special-event/frame2_video.png");
}
.sev-frame2__item--view {
  background-image: url("/images/special-event/frame2_view.png");
}
.sev-frame2__tiers {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.sev-frame2__value {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.2vw;
  height: auto;
  margin-bottom: 3.4vw;
  text-align: center;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.8895vw;
  color: #fff;
}
.sev-frame2__login-banner {
  position: absolute;
  left: 50%;
  bottom: 2.4vw;
  transform: translateX(-50%);
  width: 72.2vw;
  height: 10.05vw;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.sev-frame2__login-banner.is-hidden {
  display: none;
}
.sev-frame2__login-banner--mobile-only {
  display: block;
}
.sev-frame2__login-banner-hint {
  position: absolute;
  left: 23.3vw;
  top: 4.1vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 26.6vw;
  pointer-events: none;
  text-align: left;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.8vw;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 0.1135vw 0.1705vw rgba(54, 32, 122, 0.45);
  z-index: 1;
}
.sev-frame2__login-banner-hint.is-hidden {
  display: none;
}
.sev-frame2__login-banner-hint-line {
  display: block;
  white-space: nowrap;
}
.sev-frame2__login-banner picture,
.sev-frame2__login-banner img {
  display: block;
  width: 100%;
  height: 100%;
}
.sev-frame2__login-banner picture {
  pointer-events: none;
}
.sev-frame2__login-banner img {
  object-fit: contain;
}
.sev-frame2__login-banner-cta {
  position: absolute;
  left: 40.65vw;
  top: 2.05vw;
  display: block;
  width: 29.85vw;
  height: 5.85vw;
  pointer-events: none;
  z-index: 2;
}
.sev-frame2__login-banner-cta.is-logged-in {
  left: 43.8vw;
  top: 2vw;
  width: 21.8vw;
  height: 5.8vw;
}
.sev-frame2__login-banner-cta img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sev-frame2__missions {
  display: flex;
  justify-content: space-between;
  width: 85vw;
  margin-top: 3vw;
}
.sev-frame2__mission {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 27.75vw;
  width: 27.75vw;
  height: 23.9vw;
  padding: 1.95vw 1.6vw;
  overflow: hidden;
  background-image: url("/images/special-event/frame2_box_background_login.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: drop-shadow(0 0.4vw 0.4vw rgba(37, 42, 96, 0.42));
}
.sev-frame2__mission-head {
  display: flex;
  align-items: center;
  gap: 0.85vw;
  margin-top: 0;
}
.sev-frame2__mission-icon {
  flex: 0 0 4.95vw;
  width: 4.95vw;
  height: 5.2vw;
  object-fit: contain;
}
.sev-frame2__mission-copy {
  min-width: 0;
  padding-top: 0;
}
.sev-frame2__mission-title {
  margin: 0;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.8895vw;
  line-height: 1.05;
  color: #ffd049;
  text-transform: uppercase;
}
.sev-frame2__mission-desc {
  margin: 0.1vw 0 0;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.8895vw;
  line-height: 1.05;
  color: #fff;
  white-space: nowrap;
}
.sev-frame2__progress-block {
  position: absolute;
  left: 50%;
  top: 9.15vw;
  display: flex;
  flex-direction: column;
  width: 22.3vw;
  gap: 0;
  transform: translateX(-50%);
}
.sev-frame2__progress-block--view {
  top: 11.7vw;
}
.sev-frame2__progress-block--promo {
  top: 9.15vw;
}
.sev-frame2__progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6vw;
  margin-bottom: 0.7vw;
  line-height: 1;
  color: #fff;
}
.sev-frame2__progress-row span {
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.2vw;
  font-weight: 400;
}
.sev-frame2__progress-row strong {
  font-family: "gs3-agency-fb-regular-otf", sans-serif;
  font-size: 1.2vw;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}
.sev-frame2__progress {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 0.45vw;
  border: 0.05vw solid #fff;
  border-radius: 0.3vw;
  overflow: visible;
}
.sev-frame2__progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  width: 0;
  height: 0.65vw;
  background: #fff;
  border-radius: 0.3vw;
  box-shadow: 0 0 0.4vw rgba(255, 255, 255, 0.55);
  transition: width 0.4s ease;
  z-index: 1;
}
.sev-frame2__progress--cyan {
  border-color: #10f6ff;
}
.sev-frame2__progress--cyan .sev-frame2__progress-fill {
  background: #10f6ff;
  box-shadow: 0 0 0.5vw rgba(16, 246, 255, 0.68);
}
.sev-frame2__progress-note {
  margin: 0.25vw 0 0;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.2vw;
  line-height: 1.1;
  color: #fff;
}
.sev-frame2__progress-note--status {
  position: relative;
  padding-left: 0;
  color: #fff;
}
.sev-frame2__progress-note--status::before {
  content: "";
  position: absolute;
  display: none;
  left: 0;
  top: 50%;
  width: 1.25vw;
  height: 1.25vw;
  transform: translateY(-50%);
  background: url("/images/special-event/da_nop_icon.png") center/contain no-repeat;
}
.sev-frame2__progress-note--status::after {
  display: none;
}
.sev-frame2__progress-note--status:empty {
  display: none;
}
.sev-frame2__progress-note--status.is-complete {
  padding-left: 1.5vw;
  color: #10f6ff;
}
.sev-frame2__progress-note--status.is-complete::before {
  display: block;
}
.sev-frame2__progress-note--status.is-pending, .sev-frame2__progress-note--status.is-empty {
  padding-left: 0;
  color: #fff;
}
.sev-frame2__mission-action {
  position: absolute;
  left: 50%;
  bottom: 3.25vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22.15vw;
  height: 6.8vw;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateX(-50%);
  filter: drop-shadow(0 0.2vw 0.5vw rgba(14, 24, 80, 0.22));
  transition: transform 0.22s ease, filter 0.22s ease;
}
.sev-frame2__mission-action:hover {
  transform: translateX(-50%) translateY(-0.15vw);
  filter: brightness(1.06) drop-shadow(0 0.5vw 1vw rgba(24, 247, 255, 0.34)) drop-shadow(0 0.2vw 0.6vw rgba(14, 24, 80, 0.34));
}
.sev-frame2__mission-action-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.sev-frame2__mission.is-complete .sev-frame2__progress-row span,
.sev-frame2__mission.is-complete .sev-frame2__progress-row strong {
  color: #10f6ff;
}
.sev-frame2__mission.is-complete .sev-frame2__progress {
  border-color: #10f6ff;
}
.sev-frame2__mission.is-complete .sev-frame2__progress-fill {
  background: #10f6ff;
  box-shadow: 0 0 0.5vw rgba(16, 246, 255, 0.68);
}
.sev-frame2__mission.is-complete .sev-frame2__mission-action {
  display: none;
}
.sev-frame2__mission--video.is-pending .sev-frame2__mission-action {
  display: none;
}
.sev-frame2__mission--promo .sev-frame2__progress-row span,
.sev-frame2__mission--promo .sev-frame2__progress-row strong,
.sev-frame2__mission--promo .sev-frame2__progress-note {
  color: #fff;
}
.sev-frame2__mission--promo .sev-frame2__progress--cyan {
  border-color: #fff;
}
.sev-frame2__mission--promo .sev-frame2__progress--cyan .sev-frame2__progress-fill {
  background: #fff;
  box-shadow: 0 0 0.4vw rgba(255, 255, 255, 0.55);
}
.sev-frame2__mission--promo.is-submitted .sev-frame2__progress-block--promo {
  top: 11.7vw;
}
.sev-frame2__mission--promo.is-submitted .sev-frame2__mission-action {
  display: none;
}
.sev-frame2__mission--promo.is-complete .sev-frame2__progress-row span,
.sev-frame2__mission--promo.is-complete .sev-frame2__progress-row strong,
.sev-frame2__mission--promo.is-complete .sev-frame2__progress-note {
  color: #10f6ff;
}
.sev-frame2__mission--promo.is-complete .sev-frame2__progress--cyan {
  border-color: #10f6ff;
}
.sev-frame2__mission--promo.is-complete .sev-frame2__progress--cyan .sev-frame2__progress-fill {
  background: #10f6ff;
  box-shadow: 0 0 0.5vw rgba(16, 246, 255, 0.68);
}

.sev-frame3 {
  position: relative;
  width: 100%;
  min-height: 53.4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.sev-frame3__title {
  margin: 8.3vw 0 0;
  text-align: center;
  text-transform: uppercase;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 4.25vw;
  line-height: 1.1;
  background: linear-gradient(to bottom, #3e3c9f, #8a56e6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sev-frame3__stats {
  display: flex;
  justify-content: center;
  column-gap: 1.85vw;
  margin-top: 6.35vw;
}
.sev-frame3__item {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  width: 38.5vw;
  height: 17.25vw;
  padding-left: 0.95vw;
  padding-right: 0.95vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.sev-frame3__item--view {
  background-image: url("/images/special-event/frame3_total_view.png");
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  padding-left: 1.7vw;
  padding-right: 1.7vw;
}
.sev-frame3__item--ugcs {
  background-image: url("/images/special-event/frame3_total_ugcs.png");
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  padding-left: 1.7vw;
  padding-right: 1.7vw;
}
.sev-frame3__body {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 4.5vw;
}
.sev-frame3__progress-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7vw;
}
.sev-frame3__current-value {
  align-self: flex-end;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.2vw;
  line-height: 0.7vw;
  color: #fff;
  text-align: right;
  white-space: nowrap;
}
.sev-frame3__next-milestone {
  align-self: flex-end;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.2vw;
  line-height: 0.7vw;
  color: #fff;
  text-align: right;
  white-space: nowrap;
}
.sev-frame3__progress {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 0.45vw;
  border: 0.05vw solid #fff;
  border-radius: 0.3vw;
  overflow: visible;
}
.sev-frame3__progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  height: 0.65vw;
  width: 0;
  background: #fff;
  border-radius: 0.3vw;
  box-shadow: 0 0 0.4vw rgba(255, 255, 255, 0.55);
  transition: width 0.4s ease;
  z-index: 1;
}
.sev-frame3__value {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  margin-bottom: 3.4vw;
  text-align: center;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.8895vw;
  color: #fff;
}
.sev-frame3__milestones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45vw;
  width: 100%;
  margin-top: 1.1vw;
  padding: 0 1.85vw;
  box-sizing: border-box;
}
.sev-frame3__milestone {
  flex: 0 0 auto;
  position: relative;
  width: 16.05vw;
  height: 14.15vw;
  box-sizing: border-box;
  padding: 0.7vw 0.6vw 0.6vw;
  background: #1b2a6b;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.sev-frame3__milestone.has-bg-image {
  background-color: transparent;
}
.sev-frame3__milestone.is-locked:not(.has-bg-image) {
  background: #3a3f52;
  filter: grayscale(0.8) brightness(0.8);
}
.sev-frame3__milestone.is-unlocked {
  box-shadow: 0 0 0.6vw rgba(244, 197, 66, 0.35);
}
.sev-frame3__milestone-index {
  flex: 0 0 auto;
  width: 100%;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.4115vw;
  line-height: 1.1;
  color: #fff;
}
.sev-frame3__milestone-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.sev-frame3__milestone-reward {
  position: absolute;
  top: 6.75vw;
  left: 0;
  width: 100%;
  margin: 0;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 2.682vw;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0.15vw 0 #5941b4;
}
.sev-frame3__milestone.is-locked .sev-frame3__milestone-reward {
  text-shadow: 0 0.15vw 0 #6b6b6b;
}
.sev-frame3__milestone-target {
  position: absolute;
  top: 9.5vw;
  left: 0;
  width: 100%;
  margin: 0;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1vw;
  line-height: 1.2;
  color: #fff;
}
.sev-frame3__milestone-claim {
  pointer-events: auto;
  margin-top: 0.4vw;
  padding: 0.3vw 0.7vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 0.6vw;
  color: #fff;
  background: linear-gradient(90deg, #3a5bd9, #5a7bff);
  border: none;
  border-radius: 0.8vw;
  cursor: pointer;
}
.sev-frame3__milestone-claim.is-glow {
  animation: sev-glow-pulse 1.6s ease-in-out infinite;
}
.sev-frame3__milestone-claim.is-claimed {
  background: #3a3f52;
  animation: none;
  cursor: not-allowed;
}

.body-special-event .sev-progress .sev-timeline {
  display: none;
}

.sev-frame5 {
  position: relative;
  width: 100%;
  height: 70.7vw;
  box-sizing: border-box;
  z-index: 1;
}
.sev-frame5__layout {
  width: 73.75vw;
  margin-left: 10.35vw;
  display: grid;
  grid-template-columns: 38.6vw 31.6vw;
  column-gap: 0;
  justify-content: space-between;
}
.sev-frame5__col--featured {
  width: 31.6vw;
}
.sev-frame5__section-title {
  font-size: 3.75vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  text-align: center;
  background: linear-gradient(180deg, #303792 0%, #8153de 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.sev-frame5__col--featured > .sev-frame5__section-title {
  position: relative;
  width: fit-content;
  margin-top: 7.15vw;
  margin-left: auto;
  margin-right: auto;
  background: none;
  background-clip: border-box;
  color: #354aab;
  font-size: 3.405vw;
  overflow: visible;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: #354aab;
}
.sev-frame5__col--featured > .sev-frame5__section-title::before, .sev-frame5__col--featured > .sev-frame5__section-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 3vw;
  height: 3.2vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  transform: translateY(-50%);
}
.sev-frame5__col--featured > .sev-frame5__section-title::before {
  left: -3.6vw;
  background-image: url("/images/special-event/sao_trai.png");
}
.sev-frame5__col--featured > .sev-frame5__section-title::after {
  right: -3.6vw;
  background-image: url("/images/special-event/sao_phai.png");
}
.sev-frame5__ranking-panel {
  position: relative;
  width: 38.6vw;
  height: auto;
}
.sev-frame5__top-block {
  position: relative;
  width: 36vw;
  margin-left: 2.05vw;
  margin-top: 4.95vw;
}
.sev-frame5__top-block::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5.3vw;
  z-index: 2;
  width: 34.55vw;
  height: 1.3vw;
  transform: translateX(-50%);
  background: url("/images/special-event/texture_2.png") no-repeat center;
  background-size: 100% 100%;
  pointer-events: none;
}
.sev-frame5__top-list {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  padding-top: 0;
  margin-top: 2.5vw;
  margin-left: 0;
  isolation: isolate;
}
.sev-frame5__top-block > .sev-frame5__section-title {
  position: relative;
  z-index: 3;
}
.sev-frame5__top-card, .sev-frame5__feature-card {
  position: relative;
  display: flex;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-sizing: border-box;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1), filter 0.28s ease, box-shadow 0.28s ease;
}
.sev-frame5__feature-card {
  background-image: url("/images/special-event/card_rank_2,3.png");
}
.sev-frame5__top-card {
  flex: 0 0 auto;
}
.sev-frame5__top-card:hover {
  transform: translateY(-0.2vw) scale(1.02);
  filter: brightness(1.06);
  box-shadow: 0 0.4vw 1.1vw rgba(48, 55, 146, 0.3);
  z-index: 2;
}
.sev-frame5__top-card.is-placeholder {
  visibility: hidden;
  cursor: default;
  pointer-events: none;
}
.sev-frame5__top-card.is-placeholder:hover {
  transform: none;
  filter: none;
  box-shadow: none;
  z-index: auto;
}
.sev-frame5__top-card--rank-1 {
  flex: 0 0 12.15vw;
  width: 12.15vw;
  height: 18.15vw;
  background-image: url("/images/special-event/card_rank_1.png");
}
.sev-frame5__top-card--rank-1 .sev-frame5__top-thumb {
  margin-top: 2.5vw;
  width: 8.9vw;
  height: 8.9vw;
}
.sev-frame5__top-card--rank-1 .sev-frame5__rank-number {
  top: 1.45vw;
  right: 1.4vw;
  width: 1.75vw;
  height: 4.2vw;
  background-image: url("/images/number-1.png");
}
.sev-frame5__top-card--rank-2, .sev-frame5__top-card--rank-3 {
  flex: 0 0 10.85vw;
  margin-top: 2.4vw;
  width: 10.85vw;
  height: 15.75vw;
  background-image: url("/images/special-event/card_rank_2,3.png");
}
.sev-frame5__top-card--rank-2 .sev-frame5__top-thumb, .sev-frame5__top-card--rank-3 .sev-frame5__top-thumb {
  margin-top: 2.25vw;
  width: 7.5vw;
  height: 7.5vw;
}
.sev-frame5__top-card--rank-2 .sev-frame5__card-footer, .sev-frame5__top-card--rank-3 .sev-frame5__card-footer {
  height: 5.9vw;
}
.sev-frame5__top-card--rank-2 .sev-frame5__card-name, .sev-frame5__top-card--rank-3 .sev-frame5__card-name {
  font-size: 1.5vw;
  line-height: 1.65vw;
}
.sev-frame5__top-card--rank-2 .sev-frame5__card-number, .sev-frame5__top-card--rank-3 .sev-frame5__card-number {
  margin-top: 0;
  font-size: 1.3vw;
  line-height: 1.45vw;
}
.sev-frame5__top-card--rank-2 .sev-frame5__rank-number {
  background-image: url("/images/number-2.png");
}
.sev-frame5__top-card--rank-3 .sev-frame5__rank-number {
  background-image: url("/images/number-3.png");
}
.sev-frame5__top-card--rank-2 .sev-frame5__rank-number, .sev-frame5__top-card--rank-3 .sev-frame5__rank-number {
  top: 1vw;
  right: 0.7vw;
  width: 3.2vw;
  height: 4.45vw;
}
.sev-frame5__top-thumb, .sev-frame5__feature-thumb {
  border: 0.1vw solid #fff;
}
.sev-frame5__top-thumb img, .sev-frame5__feature-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sev-frame5__rank-number {
  position: absolute;
  color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sev-frame5__card-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6.6vw;
  text-align: center;
}
.sev-frame5__card-name {
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.779vw;
  color: #ffd049;
  text-align: center;
  line-height: 1.2;
  height: 2.3vw;
  max-width: 75%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sev-frame5__card-number {
  margin-top: 0.4vw;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.5855vw;
  color: #fff;
  text-align: center;
  line-height: 1.5855vw;
}
.sev-frame5__view-icon {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.sev-frame5__view-icon::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: calc(100% + 0.525vw);
  right: auto;
  width: 1.45vw;
  height: 0.75vw;
  transform: translateY(-50%);
  background-image: url("/images/con-mat-thay-ghet.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.sev-frame5__rank-wrap {
  position: relative;
  width: 100%;
  height: auto;
  margin-left: 0.5vw;
  margin-top: 9.2vw;
}
.sev-frame5__filters {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 0.5vw;
}
.sev-frame5__filter {
  width: 9vw;
  height: 2.45vw;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 0.1vw solid #3448a9;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 1.4vw;
  color: #3448a9;
  text-align: center;
  line-height: 1.5;
  background: transparent;
  transition: all 0.3s ease;
}
.sev-frame5__filter:hover, .sev-frame5__filter.is-active {
  cursor: pointer;
  background-color: #3448a9;
  color: #fff;
}
.sev-frame5__rank-table {
  width: 37.55vw;
  box-sizing: border-box;
  margin-top: 2.25vw;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
}
.sev-frame5__rank-row {
  font-family: "svn-agency-fb-black", sans-serif;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45vw 0;
  color: #fff;
  font-size: 1.9vw;
  text-decoration: none;
  transition: all 0.3s ease;
}
.sev-frame5__rank-row::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.05vw;
  background-color: #677bd3;
  position: absolute;
  bottom: 0;
  left: 0;
}
.sev-frame5__rank-row:hover {
  color: #ffd049;
  cursor: pointer;
  transform: translateX(0.2vw);
  background-color: rgba(103, 123, 211, 0.28);
  box-shadow: 0 0.2vw 0.7vw rgba(0, 0, 0, 0.18);
}
.sev-frame5__rank-head {
  padding: 0;
}
.sev-frame5__rank-head::after {
  display: none;
}
.sev-frame5__rank-head:hover {
  transform: none;
  background: transparent;
  box-shadow: none;
  cursor: default;
}
.sev-frame5__rank-head .sev-frame5__rank-col {
  color: #ffd049;
  font-family: "svn-agency-fb-bold", sans-serif;
}
.sev-frame5__rank-col {
  text-align: center;
}
.sev-frame5__rank-col:nth-child(1) {
  flex: 0.3;
}
.sev-frame5__rank-col:nth-child(2) {
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}
.sev-frame5__rank-col:nth-child(3) {
  flex: 1;
}
.sev-frame5__rank-value {
  position: relative;
  display: inline-block;
}
.sev-frame5__rank-value .sev-frame5__view-icon::after {
  left: calc(100% + 0.525vw);
  right: auto;
  top: 50%;
  width: 1.45vw;
  height: 0.75vw;
  transform: translateY(-50%);
  background-size: contain;
}
.sev-frame5__rank-body {
  width: 100%;
  height: 17.5vw;
  overflow-y: scroll;
}
.sev-frame5__update-time {
  display: none;
}
.sev-frame5__featured-list {
  display: grid;
  grid-template-columns: repeat(3, 9.45vw);
  column-gap: 1vw;
  row-gap: 0;
  width: 100%;
  justify-content: center;
  margin-top: 1.25vw;
  isolation: isolate;
}
.sev-frame5__feature-card {
  width: 9.45vw;
  height: 13.7vw;
}
.sev-frame5__feature-card:hover {
  transform: translateY(-0.25vw) scale(1.025);
  filter: brightness(1.07) saturate(1.05);
  box-shadow: 0 0.3vw 1vw rgba(48, 55, 146, 0.35), 0 0.1vw 0.4vw rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.sev-frame5__feature-thumb {
  position: relative;
  margin-top: 1.8105vw;
  width: 6.445vw;
  height: 6.445vw;
}
.sev-frame5__feature-thumb::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2.607vw;
  height: 2.607vw;
  background: url("/images/play-button.png") no-repeat center;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0.1vw 0.2vw rgba(0, 0, 0, 0.45));
}
.sev-frame5__feature-card .sev-frame5__card-footer {
  height: 4.779vw;
}
.sev-frame5__feature-card .sev-frame5__card-name {
  font-size: 1.2885vw;
  height: 1.6655172414vw;
}
.sev-frame5__feature-card .sev-frame5__card-number {
  margin-top: 0.15vw;
  font-size: 1.1485vw;
  line-height: 1.1485vw;
}
.sev-frame5__feature-card .sev-frame5__view-icon::after {
  width: 0.9665vw;
  height: 0.5vw;
}

@media (max-width: 768px) {
  .body-special-event .nav-fake {
    height: 13.0208333333vw;
  }
  .body-special-event .special-event__frame--frame1.frame1:has(.frame1-overlay.is-open) {
    height: 171.875vw;
    overflow: visible;
  }
  .body-special-event .sev-page-background {
    height: 896.2239583333vw;
    margin-top: 178.125vw;
  }
  .body-special-event:has(#frame1-overlay.is-open) .sev-page-background {
    margin-top: 184.8958333333vw;
  }
  .sev-frame2 {
    height: 164.5833333333vw;
  }
  .sev-frame2__title {
    display: none;
  }
  .sev-frame2__title-text {
    display: none;
  }
  .sev-frame2__mobile-title {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 23.9583333333vw;
    margin-top: 9.765625vw;
    padding: 0 3.125vw;
    column-gap: 3.125vw;
    text-align: left;
    text-transform: uppercase;
    font-family: "svn-agency-fb-bold", sans-serif;
  }
  .sev-frame2__mobile-title:not(.sev-frame2__mobile-title--program) {
    min-height: 0;
  }
  .sev-frame2__mobile-title:not(.sev-frame2__mobile-title--program) .sev-frame2__mobile-title-icon-box {
    display: none;
  }
  .sev-frame2__mobile-title--program {
    margin-top: 8.8541666667vw;
  }
  .sev-frame2__mobile-title-texture {
    position: absolute;
    left: 50%;
    top: 13.0208333333vw;
    display: block;
    width: 68.359375vw;
    height: 2.6041666667vw;
    margin-top: 0;
    background-image: url("/images/special-event/texture_2_mobile.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .sev-frame2__mobile-title--program .sev-frame2__mobile-title-texture {
    top: 17.9739583333vw;
    margin-top: 2.2135416667vw;
  }
  .sev-frame2__mobile-title-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26.0416666667vw;
    width: 26.0416666667vw;
    height: 21.3541666667vw;
  }
  .sev-frame2__mobile-title-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .sev-frame2__mobile-title-icon.is-hidden {
    display: none;
  }
  .sev-frame2__mobile-title-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .sev-frame2__mobile-title-program, .sev-frame2__mobile-title-progress {
    display: block;
    white-space: nowrap;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .sev-frame2__mobile-title-program {
    background-image: linear-gradient(to bottom, #313893, #5544b4);
    font-size: 9.90625vw;
    line-height: 1.2;
  }
  .sev-frame2__mobile-title-progress {
    background-image: linear-gradient(to bottom, #6349c1, #8a56e7);
    margin-top: 1.5625vw;
    font-size: 6.9010416667vw;
    line-height: 0.95;
  }
  .sev-frame2__mobile-title-progress.is-hidden {
    display: none;
  }
  .sev-frame2__guest {
    flex-direction: column;
    align-items: center;
    row-gap: 1vw;
    column-gap: 0;
    margin-top: 4.5572916667vw;
  }
  .sev-frame2__item {
    width: 87.5vw;
    height: 54.7721354167vw;
    padding-left: 2.1588541667vw;
    padding-right: 2.1588541667vw;
  }
  .sev-frame2__value {
    width: 27.7291666667vw;
    height: auto;
    margin-bottom: 7.7278645833vw;
    font-size: 4.29296875vw;
  }
  .sev-frame2__missions {
    flex-wrap: wrap;
    justify-content: center;
    width: 97.3958333333vw;
    max-width: 100%;
    column-gap: 3.125vw;
    row-gap: 4.296875vw;
    margin-top: 5.078125vw;
  }
  .sev-frame2__mission {
    flex-basis: 47.1354166667vw;
    width: 47.1354166667vw;
    height: 41.796875vw;
    padding: 3.41015625vw 2.7174479167vw;
    filter: drop-shadow(0 0.6796875vw 0.69921875vw rgba(37, 42, 96, 0.42));
  }
  .sev-frame2__mission-head {
    gap: 1.4440104167vw;
    margin-top: 0;
  }
  .sev-frame2__mission-icon {
    flex-basis: 8.4075520833vw;
    width: 8.4075520833vw;
    height: 9.09375vw;
  }
  .sev-frame2__mission-copy {
    padding-top: 0;
  }
  .sev-frame2__mission-title, .sev-frame2__mission-desc {
    font-size: 3.2096354167vw;
  }
  .sev-frame2__mission-desc {
    margin-top: 0.1744791667vw;
  }
  .sev-frame2__progress-block {
    left: 50%;
    top: 16.0013020833vw;
    width: 37.8776041667vw;
    gap: 0;
  }
  .sev-frame2__progress-block--view {
    top: 20.4609375vw;
  }
  .sev-frame2__progress-block--promo {
    top: 16.0013020833vw;
  }
  .sev-frame2__progress-row, .sev-frame2__progress-row strong, .sev-frame2__progress-row span, .sev-frame2__progress-note {
    font-size: 2.0377604167vw;
  }
  .sev-frame2__progress-note {
    margin-top: 0.4375vw;
  }
  .sev-frame2__progress-row {
    gap: 1.01953125vw;
    margin-bottom: 1.2239583333vw;
  }
  .sev-frame2__progress {
    height: 0.7864583333vw;
    border-width: 0.1302083333vw;
    border-radius: 0.5091145833vw;
  }
  .sev-frame2__progress-fill {
    height: 1.13671875vw;
    border-radius: 0.5091145833vw;
    box-shadow: 0 0 0.6796875vw rgba(255, 255, 255, 0.55);
  }
  .sev-frame2__progress--cyan .sev-frame2__progress-fill {
    box-shadow: 0 0 0.8489583333vw rgba(16, 246, 255, 0.68);
  }
  .sev-frame2__mission--promo .sev-frame2__progress--cyan .sev-frame2__progress-fill {
    background: #fff;
    box-shadow: 0 0 0.6796875vw rgba(255, 255, 255, 0.55);
  }
  .sev-frame2__progress-note--status.is-complete {
    padding-left: 2.5481770833vw;
  }
  .sev-frame2__progress-note--status.is-pending, .sev-frame2__progress-note--status.is-empty {
    padding-left: 0;
  }
  .sev-frame2__progress-note--status::before {
    width: 2.1236979167vw;
    height: 2.1861979167vw;
  }
  .sev-frame2__mission-action {
    left: 50%;
    bottom: 5.68359375vw;
    width: 37.6236979167vw;
    height: 11.8919270833vw;
    filter: drop-shadow(0 0.33984375vw 0.8489583333vw rgba(14, 24, 80, 0.22));
  }
  .sev-frame2__mission--promo.is-submitted .sev-frame2__progress-block--promo {
    top: 20.4609375vw;
  }
  .sev-frame2__mission--promo.is-complete .sev-frame2__progress--cyan .sev-frame2__progress-fill {
    background: #10f6ff;
    box-shadow: 0 0 0.8489583333vw rgba(16, 246, 255, 0.68);
  }
  .sev-frame2__login-banner {
    bottom: 8.59375vw;
    width: 88.4114583333vw;
    height: 23.046875vw;
  }
  .sev-frame2__login-banner.is-guest {
    bottom: 4.885417vw;
  }
  .sev-frame2__login-banner--mobile-only {
    display: block;
  }
  .sev-frame2__login-banner .sev-frame2__login-banner-hint {
    position: absolute;
    left: 45.9635416667vw;
    top: 6.3802083333vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 32.5520833333vw;
    pointer-events: none;
    text-align: left;
    font-family: "svn-agency-fb-black", sans-serif;
    font-size: 3.5963541667vw;
    line-height: 1.05;
    color: #fff;
    text-shadow: 0 0.2604166667vw 0.390625vw rgba(54, 32, 122, 0.45);
    z-index: 1;
  }
  .sev-frame2__login-banner .sev-frame2__login-banner-hint.is-hidden {
    display: none;
  }
  .sev-frame2__login-banner-hint-line {
    display: block;
    white-space: nowrap;
  }
  .sev-frame2__login-banner-cta {
    left: 50%;
    top: 15.8854166667vw;
    display: block;
    width: 47.265625vw;
    height: 9.2447916667vw;
    transform: translateX(-50%);
  }
  .sev-frame2__login-banner-cta.is-logged-in {
    left: 50%;
    top: 15.8854166667vw;
    width: 34.5052083333vw;
    height: 9.1145833333vw;
  }
  .sev-frame3 {
    height: 165.625vw;
    min-height: 165.625vw;
  }
  .sev-frame3__title {
    margin-top: 14.9739583333vw;
    font-size: 9.375vw;
    line-height: 1.2;
  }
  .sev-frame3__stats {
    flex-direction: column;
    align-items: center;
    row-gap: 1.3020833333vw;
    column-gap: 0;
    margin-top: 4.9479166667vw;
  }
  .sev-frame3__item {
    width: 88.28125vw;
    height: 39.5546875vw;
    padding-left: 2.1783854167vw;
    padding-right: 2.1783854167vw;
  }
  .sev-frame3__item--view {
    padding-left: 3.8984375vw;
    padding-right: 3.8984375vw;
  }
  .sev-frame3__item--ugcs {
    padding-left: 3.8984375vw;
    padding-right: 3.8984375vw;
  }
  .sev-frame3__body {
    margin-bottom: 10.3190104167vw;
  }
  .sev-frame3__progress-block {
    gap: 1.60546875vw;
  }
  .sev-frame3__current-value, .sev-frame3__next-milestone {
    font-size: 2.7513020833vw;
    line-height: 1.60546875vw;
  }
  .sev-frame3__progress {
    height: 1.03125vw;
    border-width: 0.1145833333vw;
    border-radius: 0.6875vw;
  }
  .sev-frame3__progress-fill {
    height: 1.4908854167vw;
    border-radius: 0.6875vw;
    box-shadow: 0 0 0.9166666667vw rgba(255, 255, 255, 0.55);
  }
  .sev-frame3__value {
    margin-bottom: 7.796875vw;
    font-size: 4.33203125vw;
  }
  .sev-frame3__milestones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 1.6927083333vw;
    row-gap: 1.3020833333vw;
    width: 83.0729166667vw;
    max-width: 100%;
    margin-top: 1.8229166667vw;
    padding: 0;
  }
  .sev-frame3__milestone {
    flex: 0 0 26.5625vw;
    width: 26.5625vw;
    height: 23.1770833333vw;
    padding: 1.1471354167vw 0.9934895833vw 0.9830729167vw;
  }
  .sev-frame3__milestone-index {
    font-size: 2.3359375vw;
  }
  .sev-frame3__milestone-reward {
    top: 11.0559895833vw;
    font-size: 4.4388020833vw;
    text-shadow: 0 0.24609375vw 0 #5941b4;
  }
  .sev-frame3__milestone.is-locked .sev-frame3__milestone-reward {
    text-shadow: 0 0.24609375vw 0 #6b6b6b;
  }
  .sev-frame3__milestone-target {
    top: 15.5611979167vw;
    font-size: 1.6549479167vw;
  }
  .sev-frame3__milestone-claim {
    margin-top: 0.6549479167vw;
    padding: 0.4908854167vw 1.1588541667vw;
    font-size: 0.9934895833vw;
    border-radius: 1.32421875vw;
  }
  .special-event__frame[style*="--sev-bg-mobile"] {
    background-image: var(--sev-bg-mobile);
  }
  .special-event__frame--frame1 {
    height: 165.1041666667vw;
    background-size: cover;
    background-position: center;
  }
  .special-event__frame--frame1[style*="--sev-bg-mobile"] {
    background-image: var(--sev-bg-mobile);
  }
  .special-event__frame--frame1::after {
    height: 3.90625vw;
    background: url("/images/frame-1-background-bottom-mb.png") no-repeat center bottom;
    background-size: cover;
  }
  .special-event__video {
    display: none;
  }
  .special-event__button {
    bottom: 13.0208333333vw;
    width: 42.3177083333vw;
    height: 11.1979166667vw;
    margin: 0;
  }
  .special-event__button:hover, .special-event__button:focus-visible {
    transform: translateX(-50%) translateY(-0.78125vw) scale(1.035);
    filter: brightness(1.08) drop-shadow(0 1.3020833333vw 2.34375vw rgba(109, 229, 255, 0.35));
  }
  .special-event__button:active {
    transform: translateX(-50%) translateY(-0.2604166667vw) scale(0.98);
  }
  .special-event__button-image {
    height: 100%;
    object-fit: contain;
  }
  .special-event__rule-button-container {
    bottom: 3.6458333333vw;
  }
  .special-event__rule-button {
    width: 97.65625vw;
    max-width: 100%;
    aspect-ratio: 750/48;
    height: auto;
    background-image: url("/images/bd/rule-text-background-mb.png");
  }
  .special-event__rule-button:hover, .special-event__rule-button:focus-visible {
    filter: brightness(1.08) drop-shadow(0 1.0416666667vw 1.8229166667vw rgba(109, 229, 255, 0.28));
    transform: translateY(-0.390625vw);
  }
  .special-event__rule-button:active {
    transform: translateY(-0.1302083333vw) scale(0.98);
  }
  .sev-progress {
    padding: 3.125vw 2.6041666667vw;
  }
  .sev-skeleton {
    width: 13.0208333333vw;
    height: 2.6041666667vw;
  }
  .sev-stats {
    flex-direction: column;
    gap: 1.5625vw;
    margin-bottom: 3.6458333333vw;
  }
  .sev-stats__badge {
    padding: 1.5625vw 2.6041666667vw;
    border-radius: 3.90625vw;
  }
  .sev-stats__value {
    font-size: 3.3854166667vw;
  }
  .sev-stats__label {
    font-size: 1.8229166667vw;
  }
  .sev-programs {
    margin-bottom: 3.6458333333vw;
  }
  .sev-programs__heading {
    font-size: 2.8645833333vw;
    margin-bottom: 2.0833333333vw;
  }
  .sev-programs__list {
    flex-direction: column;
    gap: 2.0833333333vw;
  }
  .sev-programs__reward {
    margin-top: 2.0833333333vw;
    font-size: 2.0833333333vw;
  }
  .sev-program {
    max-width: none;
    padding: 2.34375vw;
    border-radius: 1.3020833333vw;
  }
  .sev-program__name {
    font-size: 2.34375vw;
    margin-bottom: 1.5625vw;
  }
  .sev-program__metrics {
    gap: 1.3020833333vw;
  }
  .sev-program__metric {
    padding: 1.3020833333vw 1.5625vw;
    border-radius: 0.78125vw;
    gap: 0.390625vw;
  }
  .sev-program__metric-label {
    font-size: 1.8229166667vw;
  }
  .sev-program__metric-target {
    font-size: 1.6927083333vw;
  }
  .sev-program__metric-reward {
    font-size: 1.6927083333vw;
  }
  .sev-personal {
    margin-bottom: 3.125vw;
  }
  .sev-personal__heading {
    font-size: 2.8645833333vw;
  }
  .sev-personal__subtitle {
    font-size: 2.34375vw;
    margin-bottom: 2.0833333333vw;
  }
  .sev-personal__cards {
    flex-direction: column;
    gap: 2.0833333333vw;
  }
  .sev-mission-card {
    max-width: none;
    padding: 2.34375vw;
    border-radius: 1.3020833333vw;
  }
  .sev-mission-card__title {
    font-size: 2.34375vw;
  }
  .sev-mission-card__desc {
    font-size: 1.6927083333vw;
    margin-bottom: 1.5625vw;
  }
  .sev-mission-card__track {
    height: 1.171875vw;
  }
  .sev-mission-card__meta {
    font-size: 1.6927083333vw;
    margin-top: 0.78125vw;
  }
  .sev-reward {
    flex-direction: column;
    gap: 1.5625vw;
    padding: 2.34375vw;
    margin-bottom: 4.1666666667vw;
    text-align: center;
  }
  .sev-reward__value {
    font-size: 4.1666666667vw;
  }
  .sev-reward__desc {
    font-size: 1.8229166667vw;
  }
  .sev-reward__btn {
    padding: 1.8229166667vw 3.6458333333vw;
    font-size: 2.0833333333vw;
    border-radius: 3.3854166667vw;
  }
  .sev-global {
    margin-bottom: 3.6458333333vw;
  }
  .sev-global__heading {
    font-size: 2.8645833333vw;
  }
  .sev-global__subtitle {
    font-size: 1.8229166667vw;
    margin-bottom: 2.0833333333vw;
  }
  .sev-global__bars {
    flex-direction: column;
    gap: 2.0833333333vw;
  }
  .sev-global__bar {
    padding: 2.0833333333vw;
  }
  .sev-global__bar-label {
    font-size: 1.953125vw;
  }
  .sev-global__bar-current {
    font-size: 2.0833333333vw;
  }
  .sev-global__track {
    height: 1.5625vw;
  }
  .sev-global__next {
    font-size: 1.5625vw;
  }
  .sev-timeline {
    margin-bottom: 3.6458333333vw;
  }
  .sev-timeline__bar {
    margin: 0 3.125vw 2.0833333333vw;
    height: 0.6510416667vw;
  }
  .sev-timeline__marker {
    width: 1.5625vw;
    height: 1.5625vw;
  }
  .sev-timeline__cards {
    flex-wrap: nowrap;
    gap: 0.78125vw;
    overflow: visible;
  }
  .sev-milestone {
    padding: 1.0416666667vw 0.5208333333vw;
    border-width: 0.1302083333vw;
    border-radius: 1.0416666667vw;
  }
  .sev-milestone__image {
    margin-bottom: 0.5208333333vw;
  }
  .sev-milestone__image img {
    max-height: 5.2083333333vw;
  }
  .sev-milestone__index {
    font-size: 1.171875vw;
    margin-bottom: 0.5208333333vw;
  }
  .sev-milestone__reward {
    font-size: 1.5625vw;
    margin-bottom: 0.390625vw;
  }
  .sev-milestone__target {
    font-size: 1.0416666667vw;
    margin-bottom: 0.6510416667vw;
  }
  .sev-milestone__status {
    font-size: 1.171875vw;
  }
  .sev-milestone__claim {
    margin-top: 0.78125vw;
    padding: 0.6510416667vw 0.78125vw;
    font-size: 1.171875vw;
    border-radius: 1.8229166667vw;
  }
  .sev-frame5 {
    height: 421.875vw;
  }
  .sev-frame5__layout {
    width: 100%;
    margin: 0;
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .sev-frame5__col--featured {
    width: 100%;
    margin-top: 5.2083333333vw;
  }
  .sev-frame5__col--ranking {
    height: 161.1979166667vw;
  }
  .sev-frame5__ranking-panel {
    width: 100%;
    height: 154.9479166667vw;
  }
  .sev-frame5__top-block {
    width: 100%;
    margin: 0;
    padding-top: 11.0677083333vw;
  }
  .sev-frame5__top-block::after {
    top: 26.8229166667vw;
    width: 89.9739583333vw;
    max-width: calc(100% - 4.1666666667vw);
    height: 3.3854166667vw;
  }
  .sev-frame5__section-title {
    width: 100%;
    font-size: 10.3072916667vw;
  }
  .sev-frame5__col--featured > .sev-frame5__section-title {
    width: fit-content;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    font-size: 8.8671875vw;
  }
  .sev-frame5__col--featured > .sev-frame5__section-title::before, .sev-frame5__col--featured > .sev-frame5__section-title::after {
    width: 7.8125vw;
    height: 8.3333333333vw;
  }
  .sev-frame5__col--featured > .sev-frame5__section-title::before {
    left: -9.375vw;
  }
  .sev-frame5__col--featured > .sev-frame5__section-title::after {
    right: -9.375vw;
  }
  .sev-frame5__top-list {
    gap: 0;
    justify-content: space-between;
    margin: 0 auto;
    width: 87.7604166667vw;
    padding-top: 6.7708333333vw;
  }
  .sev-frame5__top-card--rank-1 {
    flex: 0 0 30.2083333333vw;
    width: 30.2083333333vw;
    height: 45.1263020833vw;
  }
  .sev-frame5__top-card--rank-1 .sev-frame5__top-thumb {
    margin-top: 6.1197916667vw;
    width: 22.1276041667vw;
    height: 22.1276041667vw;
  }
  .sev-frame5__top-card--rank-1 .sev-frame5__rank-number {
    top: 3.60546875vw;
    right: 3.48046875vw;
    width: 4.3515625vw;
    height: 10.4427083333vw;
  }
  .sev-frame5__top-card--rank-1 .sev-frame5__card-footer {
    height: 16.4088541667vw;
  }
  .sev-frame5__top-card--rank-1 .sev-frame5__card-name {
    font-size: 4.4231770833vw;
    line-height: 1.2;
    height: 5.71875vw;
  }
  .sev-frame5__top-card--rank-1 .sev-frame5__card-number {
    margin-top: 0.9947916667vw;
    font-size: 3.94140625vw;
    line-height: 3.94140625vw;
  }
  .sev-frame5__top-card--rank-2, .sev-frame5__top-card--rank-3 {
    flex: 0 0 26.3020833333vw;
    margin-top: 9.8958333333vw;
    width: 26.3020833333vw;
    height: 38.1809895833vw;
  }
  .sev-frame5__top-card--rank-2 .sev-frame5__top-thumb, .sev-frame5__top-card--rank-3 .sev-frame5__top-thumb {
    margin-top: 5.1276041667vw;
    width: 18.1809895833vw;
    height: 18.1809895833vw;
  }
  .sev-frame5__top-card--rank-2 .sev-frame5__rank-number, .sev-frame5__top-card--rank-3 .sev-frame5__rank-number {
    top: 2.4244791667vw;
    right: 1.6979166667vw;
    width: 7.7578125vw;
    height: 10.7877604167vw;
  }
  .sev-frame5__top-card--rank-2 .sev-frame5__card-footer, .sev-frame5__top-card--rank-3 .sev-frame5__card-footer {
    height: 14.3033854167vw;
  }
  .sev-frame5__top-card--rank-2 .sev-frame5__card-name, .sev-frame5__top-card--rank-3 .sev-frame5__card-name {
    font-size: 3.6354166667vw;
    line-height: 4vw;
    height: 5.5755208333vw;
  }
  .sev-frame5__top-card--rank-2 .sev-frame5__card-number, .sev-frame5__top-card--rank-3 .sev-frame5__card-number {
    margin-top: 0;
    font-size: 3.1510416667vw;
    line-height: 3.515625vw;
  }
  .sev-frame5__rank-wrap {
    margin-top: 14.3229166667vw;
    margin-left: 0;
    width: 100%;
  }
  .sev-frame5__filters {
    gap: 1.0416666667vw;
    padding: 0 2.2135416667vw 0 3.90625vw;
    box-sizing: border-box;
  }
  .sev-frame5__filter {
    width: 22.7864583333vw;
    height: 6.1197916667vw;
    font-size: 3.6458333333vw;
    border-width: 0.2604166667vw;
  }
  .sev-frame5__rank-table {
    width: 92.8385416667vw;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7.5520833333vw;
    padding-left: 1.8138020833vw;
    padding-right: 1.8138020833vw;
  }
  .sev-frame5__rank-head {
    padding-top: 0;
    padding-bottom: 1.2083333333vw;
  }
  .sev-frame5__rank-head .sev-frame5__rank-col {
    font-size: 4.47265625vw;
  }
  .sev-frame5__rank-row {
    padding: 0 0 1.2083333333vw;
    font-size: 4.3515625vw;
  }
  .sev-frame5__rank-row:hover {
    transform: translateX(0.4830729167vw);
    box-shadow: 0 0.4830729167vw 1.6927083333vw rgba(0, 0, 0, 0.18);
  }
  .sev-frame5__rank-body {
    height: 36.265625vw;
  }
  .sev-frame5__rank-value .sev-frame5__view-icon::after {
    left: calc(100% + 1.26953125vw);
    width: 3.5052083333vw;
    height: 1.8138020833vw;
  }
  .sev-frame5__featured-list {
    width: 82.2916666667vw;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3.2552083333vw;
    grid-template-columns: repeat(3, 26.0416666667vw);
    justify-content: center;
    column-gap: 4.1666666667vw;
    row-gap: 1.8229166667vw;
    box-sizing: border-box;
    height: auto;
    overflow: visible;
  }
  .sev-frame5__feature-card {
    width: 26.0416666667vw;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 37.7604166667vw;
  }
  .sev-frame5__feature-card:nth-child(n+10) {
    display: none;
  }
  .sev-frame5__feature-thumb {
    margin-top: 4.6744791667vw;
    width: 17.7955729167vw;
    height: 17.7955729167vw;
  }
  .sev-frame5__feature-thumb::after {
    width: 7.1627604167vw;
    height: 7.1627604167vw;
    filter: drop-shadow(0 0.21875vw 0.43359375vw rgba(0, 0, 0, 0.45));
  }
  .sev-frame5__feature-card .sev-frame5__card-footer {
    height: 13.12890625vw;
  }
  .sev-frame5__feature-card .sev-frame5__card-name {
    font-size: 3.5807291667vw;
    height: 4.59765625vw;
  }
  .sev-frame5__feature-card .sev-frame5__card-number {
    margin-top: 0;
    font-size: 3.1471354167vw;
    line-height: 3.1471354167vw;
  }
  .sev-frame5__view-icon::after {
    left: calc(100% + 1.3671875vw);
    right: auto;
    width: 3.7760416667vw;
    height: 1.953125vw;
    top: 50%;
    transform: translateY(-50%);
    background-size: contain;
  }
  .sev-frame5__feature-card .sev-frame5__view-icon::after {
    left: calc(100% + 1.1393229167vw);
    width: 2.09765625vw;
    height: 1.0846354167vw;
  }
  .sev-toast {
    bottom: 3.125vw;
    padding: 1.5625vw 3.125vw;
    font-size: 1.8229166667vw;
    border-radius: 3.3854166667vw;
  }
}
.sev-frame3-unlock {
  height: 54.65vw;
  padding-top: 10vw;
  box-sizing: border-box;
  color: white;
}

.sev-frame3-unlock__gens {
  width: 79.8vw;
  max-width: 100%;
  margin-top: 2vw;
  margin-inline: auto;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 4.3vw;
  justify-content: center;
}
.sev-frame3-unlock__gens--single-col {
  width: 37.75vw;
  gap: 0;
}

.sev-frame3-unlock__gens-col {
  flex: 0 0 37.75vw;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
  box-sizing: border-box;
}
.sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-card {
  background: none;
}
.sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-card::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  background: url("/images/bd/bd-frame-3-item-background.png") no-repeat center;
  background-size: 100% 100%;
  transform: scaleX(-1);
  transform-origin: center center;
  pointer-events: none;
  z-index: 0;
}
.sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-inner,
.sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-views,
.sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-complete-label {
  z-index: 1;
}
.sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-inner {
  flex-direction: row-reverse;
}
.sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-cell--left {
  justify-content: flex-end;
}
.sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-cell--right {
  justify-content: flex-start;
}
.sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-views {
  left: 10.4vw;
  right: auto;
  text-align: right;
}
.sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-complete-label {
  left: -0.5vw;
  right: auto;
}

.sev-frame3-unlock__gen-complete-label {
  position: absolute;
  right: -0.5vw;
  bottom: -0.2vw;
  width: 10.7vw;
  height: 2.5vw;
  box-sizing: border-box;
  background: url("/images/bd/bg-complate-label.png") no-repeat center;
  background-size: 100% 100%;
  pointer-events: none;
}

.sev-frame3-unlock__gen-card {
  position: relative;
  width: 37.75vw;
  height: 6.75vw;
  box-sizing: border-box;
  background: url("/images/bd/bd-frame-3-item-background.png") no-repeat center;
  background-size: 100% 100%;
  color: #fff;
  min-width: 0;
  transform-origin: center center;
}
.sev-frame3-unlock__gen-card.btn-click-feedback {
  animation: frame-login-btn-click 0.26s ease-out forwards;
}

.sev-frame3-unlock__gen-inner {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4vw;
  padding: 0 0.4vw 0 0.4vw;
}

.sev-frame3-unlock__gen-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
}
.sev-frame3-unlock__gen-cell--left {
  justify-content: flex-start;
}
.sev-frame3-unlock__gen-cell--right {
  justify-content: flex-end;
}

.sev-frame3-unlock__gen-name-stack {
  position: relative;
  width: 9.1vw;
  height: 2.1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.sev-frame3-unlock__gen-icon {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 50%;
  transform: translateX(-50%);
  width: 8.2vw;
  height: 9.1vw;
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sev-frame3-unlock__gen-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.sev-frame3-unlock__gen-name {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding-bottom: 0.2vw;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("/images/bd/gen-name-background.png") no-repeat center;
  background-size: 100% 100%;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.3155vw;
  font-weight: bold;
  line-height: 1.2;
  color: rgb(255, 255, 255);
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0.1vw 0 rgba(90, 49, 177, 0.65);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.sev-frame3-unlock__gen-reward {
  position: relative;
  width: 8.55vw;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.sev-frame3-unlock__gen-lock {
  position: absolute;
  left: 50%;
  top: -0.23vw;
  transform: translateX(-50%);
  width: 2.05vw;
  height: 2.7vw;
  box-sizing: border-box;
  background: url("/images/bd/lock.png") no-repeat center;
  background-size: 100% 100%;
  pointer-events: none;
}

.sev-frame3-unlock__gen-uc {
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 2.1vw;
  font-weight: normal;
  line-height: 1.1;
  color: #9d93f3;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding-bottom: 0.3vw;
}

.sev-frame3-unlock__gen-card--finished .sev-frame3-unlock__gen-uc {
  color: #fff;
}

.sev-frame3-unlock__gen-mid {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 16.6vw;
}

.sev-frame3-unlock__gen-views {
  position: absolute;
  right: 10.4vw;
  top: 1.25vw;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 0.8585vw;
  font-weight: normal;
  line-height: 1.2;
  color: #313893;
  text-align: left;
}

.sev-frame3-unlock__gen-track {
  width: 16.6vw;
  height: 1.15vw;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
}

.sev-frame3-unlock__gen-bar {
  height: 100%;
  max-width: 100%;
  background: url("/images/bd/processbar-background.png") no-repeat left center;
  background-size: 16.6vw 100%;
}

.body-special-event .sev-frame3-unlock__gen-card {
  transition: transform 0.24s cubic-bezier(0.34, 1.15, 0.64, 1), filter 0.24s ease;
}
.body-special-event .sev-frame3-unlock__gen-card:hover {
  transform: scale(1.02) translateY(-0.1vw);
  filter: brightness(1.08) saturate(1.06);
}
.body-special-event .sev-frame3-unlock__gen-card:active {
  transform: scale(1.01) translateY(0);
  transition-duration: 0.1s;
}

@media (max-width: 768px) {
  .sev-frame3-unlock {
    height: 211.71875vw;
    padding-top: 22.3vw;
  }
  .sev-frame3-unlock__gens {
    width: 93.359375vw;
    max-width: 100%;
    margin-top: 6.9010416667vw;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 1.4838576159vw;
  }
  .sev-frame3-unlock__gens--single-col {
    width: 93.359375vw;
    gap: 0;
  }
  .sev-frame3-unlock__gens-col {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    gap: 1.4838576159vw;
  }
  .sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-card {
    background: url("/images/bd/bd-frame-3-item-background.png") no-repeat center;
    background-size: 100% 100%;
  }
  .sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-card::before {
    content: none;
  }
  .sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-inner {
    flex-direction: row;
  }
  .sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-cell--left {
    justify-content: flex-start;
  }
  .sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-cell--right {
    justify-content: flex-end;
  }
  .sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-views {
    left: auto;
    right: 25.7201986755vw;
    text-align: left;
  }
  .sev-frame3-unlock__gens-col--mirrored .sev-frame3-unlock__gen-complete-label {
    left: auto;
    right: -1.2365480132vw;
  }
  .sev-frame3-unlock__gen-card {
    width: 100%;
    max-width: 100%;
    height: 16.6933981788vw;
  }
  .sev-frame3-unlock__gen-complete-label {
    right: -1.2365480132vw;
    width: 26.4621274834vw;
    height: 6.1827400662vw;
  }
  .sev-frame3-unlock__gen-inner {
    gap: 0.9892384106vw;
    padding: 0 0.9892384106vw;
  }
  .sev-frame3-unlock__gen-name-stack {
    width: 22.5051738411vw;
    height: 5.1935016556vw;
  }
  .sev-frame3-unlock__gen-icon {
    width: 17.96875vw;
    height: 20.0520833333vw;
  }
  .sev-frame3-unlock__gen-name {
    width: 22.5051738411vw;
    height: 5.1935016556vw;
    padding: 0 0 0.6510416667vw 0;
    font-size: 2.890625vw;
    text-shadow: 0 0.2473096026vw 0 rgba(90, 49, 177, 0.65);
  }
  .sev-frame3-unlock__gen-reward {
    width: 21.1449710265vw;
  }
  .sev-frame3-unlock__gen-lock {
    width: 5.0698468543vw;
    height: 6.6773592715vw;
  }
  .sev-frame3-unlock__gen-uc {
    font-size: 5.1935016556vw;
  }
  .sev-frame3-unlock__gen-mid {
    min-width: 41.0533940397vw;
  }
  .sev-frame3-unlock__gen-views {
    right: 25.7201986755vw;
    top: 3.0913700331vw;
    gap: 3vw;
    font-size: 2.2356770833vw;
  }
  .sev-frame3-unlock__gen-track {
    width: 41.0533940397vw;
    height: 2.8440604305vw;
  }
  .sev-frame3-unlock__gen-bar {
    background-size: 41.0533940397vw 100%;
  }
  .body-special-event .sev-frame3-unlock__gen-card:hover {
    transform: scale(1.02) translateY(-0.2604166667vw);
  }
}
.sev-frame-4 {
  height: 50.75vw;
  padding-top: 15vw;
  box-sizing: border-box;
}

.sev-frame-4-gifts {
  width: 63.1vw;
  max-width: 100%;
  height: 13.6vw;
  margin-inline: auto;
  margin-bottom: 0.7vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 1.35vw;
}

.sev-frame-4-gifts__item {
  flex: 0 0 10.9vw;
  width: 10.9vw;
  height: 10.95vw;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}
.sev-frame-4-gifts__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0.5vw;
}

.sev-frame-4-links {
  width: 63.1vw;
  max-width: 100%;
  margin-inline: auto;
  margin-top: 1.3vw;
  margin-bottom: 0.7vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0.8vw 1.5vw;
}

.sev-frame-4-links__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 0 0 18.6vw;
  min-width: 0;
  width: 18.6vw;
  max-width: 18.6vw;
  height: 18.65vw;
  text-decoration: none;
  color: inherit;
  border-radius: 0.6vw;
  overflow: visible;
}

.sev-frame-4-links__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0.4vw;
  box-shadow: 0 0.4vw 0.9vw rgba(28, 34, 119, 0.32);
}

.sev-frame-4-links__label {
  margin-top: 0.4vw;
  font-size: 0.7vw;
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .body-special-event .sev-frame-4-gifts__item,
  .body-special-event .sev-frame-4-links__card {
    transition: transform 0.26s cubic-bezier(0.34, 1.25, 0.64, 1), filter 0.26s ease, box-shadow 0.26s ease;
    will-change: transform;
  }
  .body-special-event .sev-frame-4-gifts__item:hover {
    transform: translateY(-0.4vw) scale(1.045);
    filter: brightness(1.08) drop-shadow(0 0.5vw 0.7vw rgba(255, 230, 128, 0.38));
  }
  .body-special-event .sev-frame-4-links__card:hover {
    transform: translateY(-0.3vw) scale(1.035);
    filter: brightness(1.09);
    box-shadow: 0 0.5vw 0.9vw rgba(0, 0, 0, 0.22);
  }
  .body-special-event .sev-frame-4-links__card:active {
    transform: translateY(-0.1vw) scale(1.015);
    transition-duration: 0.1s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .body-special-event .sev-frame-4-gifts__item,
  .body-special-event .sev-frame-4-links__card {
    transition: none;
  }
}
@media (max-width: 768px) {
  .sev-frame-4 {
    height: 144.140625vw;
    padding-top: 42.578125vw;
  }
  .sev-frame-4-gifts {
    width: 57.421875vw;
    max-width: 100%;
    height: 57.6822916667vw;
    min-height: 0;
    box-sizing: border-box;
    margin-inline: auto;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    gap: 3.515625vw;
  }
  .sev-frame-4-gifts__item {
    flex: 0 0 26.953125vw;
    width: 26.953125vw;
    max-width: 26.953125vw;
    height: 27.0833333333vw;
    box-sizing: border-box;
  }
  .sev-frame-4-gifts__item:nth-child(n+5) {
    display: none;
  }
  .sev-frame-4-gifts__item img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 1.2369791667vw;
  }
  .sev-frame-4-links {
    width: 100%;
    max-width: 100%;
    margin-top: 9.6354166667vw;
    margin-bottom: 1.8229166667vw;
    row-gap: 1.2161458333vw;
    column-gap: 2.4739583333vw;
    justify-content: center;
    align-items: flex-start;
  }
  .sev-frame-4-links__card {
    flex: 0 0 28.2552083333vw;
    width: 28.2552083333vw;
    max-width: 28.2552083333vw;
    height: 28.3854166667vw;
    overflow: hidden;
    border-radius: 0.9127604167vw;
  }
  .sev-frame-4-links__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.6080729167vw;
    box-shadow: 0 0.609375vw 1.3684895833vw rgba(28, 34, 119, 0.32);
  }
}
.page-thong-bao .nav-fake {
  display: none;
}

.notification-page {
  position: relative;
  width: 100%;
  height: 69.6vw;
  padding: 15vw 0 6vw;
  box-sizing: border-box;
  overflow: hidden;
}
.notification-page__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/images/notification-bacgkround.jpg") no-repeat top center;
  background-size: cover;
  pointer-events: none;
}
.notification-page__inner {
  position: relative;
  z-index: 1;
  width: 61.7vw;
  max-width: 92%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.4vw;
}
.notification-page__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.2vw;
  width: 100%;
}
.notification-page__mark-all {
  flex: 0 0 auto;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  font-family: "gs3-antarctica-beta-regular", sans-serif;
  font-size: 1.2vw;
  line-height: 1.3;
  color: #3448a9;
  text-decoration: underline;
  transition: opacity 0.15s ease;
}
.notification-page__mark-all:hover {
  opacity: 0.75;
}
.notification-page__mark-all:disabled {
  opacity: 0.5;
  cursor: default;
}
.notification-page__mark-all[hidden] {
  display: none;
}
.notification-page__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1vw;
}
.notification-page__pagination {
  display: flex;
  align-items: center;
  gap: 0.3vw;
}
.notification-page__pagination[hidden] {
  display: none;
}
.notification-page__page-btn {
  min-width: 2vw;
  height: 2vw;
  padding: 0 0.5vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  border: 0.05vw solid #3448a9;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.7);
  font-family: "gs3-antarctica-beta-regular", sans-serif;
  font-size: 1.1vw;
  line-height: 1;
  color: #3448a9;
  transition: background 0.15s ease, color 0.15s ease;
}
.notification-page__page-btn:hover:not(:disabled):not(.is-active) {
  background: rgba(255, 255, 255, 0.95);
}
.notification-page__page-btn.is-active {
  background: #3448a9;
  color: #fff;
  cursor: default;
}
.notification-page__page-btn:disabled:not(.is-active) {
  opacity: 0.4;
  cursor: default;
}
.notification-page__page-ellipsis {
  padding: 0 0.1vw;
  color: #3448a9;
  font-size: 1.1vw;
  line-height: 1;
}
.notification-page__title {
  margin: 0;
  font-family: "svn-agency-fb-black", sans-serif;
  font-size: 3.2vw;
  line-height: 1.2;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fefdff 0%, #ba97fb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.notification-page__summary {
  margin: 0;
  font-family: "gs3-antarctica-beta-regular", sans-serif;
  font-size: 1.2vw;
  line-height: 1.3;
  color: #3448a9;
}
.notification-page__list {
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
  width: 100%;
}
.notification-page__empty, .notification-page__loading, .notification-page__error {
  font-family: "gs3-antarctica-beta-regular", sans-serif;
  font-size: 1.2vw;
  color: #3448a9;
  padding: 1.2vw 0;
  text-align: center;
}
.notification-page__error {
  color: #ff8a8a;
}
.notification-page__guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vw;
  padding: 4vw 0;
  text-align: center;
}
.notification-page__guest-text {
  margin: 0;
  font-family: "gs3-antarctica-beta-regular", sans-serif;
  font-size: 1.4vw;
  color: #3448a9;
}
.notification-page__guest-btn {
  cursor: pointer;
  border: none;
  border-radius: 49.95vw;
  padding: 0.8vw 2.8vw;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.2vw;
  text-transform: uppercase;
  color: #2a1259;
  background: linear-gradient(180deg, #ffd049 0%, #f2a52c 100%);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.notification-page__guest-btn:hover {
  filter: brightness(1.05);
}
.notification-page__guest-btn:active {
  transform: scale(0.97);
}
.notification-page__guest-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.notification-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2vw;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  padding: 0.6vw 2vw 0.6vw 1.6vw;
  border-radius: 1vw;
  background: rgba(255, 255, 255, 0.82);
  border: 0.1vw solid #3448a9;
  overflow: hidden;
  transition: background-color 0.3s ease;
}
.notification-item.is-expanded:not(.is-expanding):not(.is-collapsing) {
  overflow: visible;
}
.notification-item:hover {
  background: rgba(255, 255, 255, 0.95);
}
.notification-item.is-unread::after {
  content: "";
  position: absolute;
  width: 0.7vw;
  height: 0.7vw;
  right: 0.8vw;
  top: 0.8vw;
  border-radius: 50%;
  background: #ff2d2d;
  pointer-events: none;
}
.notification-item__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4vw;
}
.notification-item__title {
  margin: 0;
  font-family: "svn-agency-fb-bold", sans-serif;
  font-size: 1.4vw;
  line-height: 1.2;
  color: #3448a9;
}
.notification-item__body {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-line;
  word-break: break-word;
  font-family: "gs3-antarctica-beta-regular", sans-serif;
  font-size: 1.1vw;
  line-height: 1.5;
  color: #3448a9;
  max-height: 3.2em;
  transition: max-height 0.35s ease;
}
.notification-item__body.is-measuring {
  display: block;
  -webkit-line-clamp: unset;
  max-height: none;
  overflow: visible;
}
.notification-item__body.is-animating-expand, .notification-item__body.is-animating-collapse {
  display: block;
  -webkit-line-clamp: unset;
  overflow: hidden;
}
.notification-item__body.is-expanded-text:not(.is-animating-expand):not(.is-animating-collapse) {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.notification-item__date {
  flex: 0 0 auto;
  align-self: flex-start;
  font-family: "gs3-antarctica-beta-light", sans-serif;
  font-size: 1vw;
  color: #3448a9;
  white-space: nowrap;
  margin-right: 1vw;
}

@media (max-width: 768px) {
  .notification-page {
    height: 208.7239583333vw;
    padding: 31.6041666667vw 0 11.71875vw;
  }
  .notification-page__background {
    background-image: url("/images/notification-bacgkround-mb.jpg");
  }
  .notification-page__inner {
    width: auto;
    max-width: none;
    margin: 0 3.125vw;
    gap: 2.6041666667vw;
  }
  .notification-page__title {
    font-size: 6.25vw;
  }
  .notification-page__summary {
    font-size: 2.8645833333vw;
  }
  .notification-page__header {
    gap: 2.0833333333vw;
    flex-wrap: wrap;
  }
  .notification-page__actions {
    gap: 1.5625vw;
    flex-wrap: wrap;
  }
  .notification-page__mark-all {
    font-size: 2.6041666667vw;
  }
  .notification-page__pagination {
    gap: 1.0416666667vw;
  }
  .notification-page__page-btn {
    min-width: 6.7708333333vw;
    height: 6.7708333333vw;
    padding: 0 1.5625vw;
    border-radius: 0;
    font-size: 3.3854166667vw;
  }
  .notification-page__page-ellipsis {
    font-size: 3.3854166667vw;
  }
  .notification-page__list {
    gap: 1.8229166667vw;
  }
  .notification-page__empty, .notification-page__loading, .notification-page__error {
    font-size: 2.8645833333vw;
    padding: 2.6041666667vw 0;
  }
  .notification-page__guest {
    gap: 2.6041666667vw;
    padding: 7.8125vw 0;
  }
  .notification-page__guest-text {
    font-size: 3.3854166667vw;
  }
  .notification-page__guest-btn {
    border-radius: 130.078125vw;
    padding: 1.8229166667vw 6.25vw;
    font-size: 3.125vw;
  }
  .notification-item {
    gap: 2.0833333333vw;
    padding: 1.3020833333vw 3.6458333333vw 1.3020833333vw 3.125vw;
    border-radius: 2.34375vw;
    border-width: 0.1302083333vw;
    flex-direction: column;
    align-items: stretch;
  }
  .notification-item.is-unread::after {
    width: 1.5625vw;
    height: 1.5625vw;
    right: 1.8229166667vw;
    top: 1.8229166667vw;
  }
  .notification-item__main {
    gap: 1.0416666667vw;
  }
  .notification-item__title {
    font-size: 3.6458333333vw;
    padding-right: 3.125vw;
  }
  .notification-item__body {
    font-size: 3.125vw;
  }
  .notification-item__date {
    align-self: flex-start;
    font-size: 2.6041666667vw;
    margin-right: 0;
  }
}
.text-center {
  text-align: center;
  justify-content: center;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 53.2vw;
  width: 100%;
  height: 253.6vw;
  background: url("/images/frame-2-background.jpg") no-repeat center;
  background-size: 100% 100%;
}

.button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2.35vw;
}
.button-wrapper .register-now-btn {
  width: 19.05vw;
  height: 5.7vw;
  background-image: url("../images/register-now-button.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
}
.button-wrapper .register-now-btn.btn-click-feedback {
  animation: frame-login-btn-click 0.26s ease-out forwards;
}

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden !important;
  pointer-events: none !important;
}

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

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

@media (max-width: 768px) {
  .hidden-mobile {
    display: none !important;
  }
  .invisible-mobile {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .hidden-desktop {
    display: block !important;
  }
  .background {
    margin-top: 169.2708333333vw;
    height: 732.03125vw;
    background: url("/images/frame-2-background-mb.jpg") no-repeat top center;
    background-size: 100% 100%;
  }
  .button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 3.125vw;
  }
  .button-wrapper .register-now-btn {
    width: 38.0208333333vw;
    height: 11.328125vw;
    background-image: url("../images/register-now-button.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: center center;
  }
  .button-wrapper .register-now-btn.btn-click-feedback {
    animation: frame-login-btn-click 0.26s ease-out forwards;
  }
}

/*# sourceMappingURL=user.css.map */