@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;
}
.svn-agency-fb-bold {
  font-family: "svn-agency-fb-bold", sans-serif;
}

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

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

.navbar {
  position: fixed;
  width: 100vw;
  height: 5vw;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  background-color: #000;
}
.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;
  justify-content: space-between;
  align-items: center;
  justify-content: center;
  gap: 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 .your-ranking {
  position: absolute;
  right: 4.65vw;
  top: 1.4vw;
  background-image: url("../images/your-ranking-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 13.6vw;
  height: 2.25vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "svn-agency-fb-black";
  font-size: 1.0715vw;
  color: #ffd63b;
  padding-left: 1.5vw;
}
.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;
}
.navbar .avatar-wrapper:hover {
  cursor: pointer;
  scale: 1.05;
  transition: all 0.3s ease;
}
.navbar .avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.navbar .score-wrapper {
  position: absolute;
  left: 0.5vw;
  height: 100%;
  padding-top: 1.85vw;
  left: 2.9vw;
  color: white;
  font-family: "svn-agency-fb-black";
  font-size: 1.1vw;
  display: flex;
  gap: 0.7vw;
}
.navbar .score-wrapper .score-item-value {
  color: #ffd148;
}
.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.png) no-repeat center center;
  background-size: cover;
  width: 10.6vw;
  height: 7.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;
}
.navbar .profile-wrapper .profile-item:hover {
  cursor: pointer;
  scale: 1.05;
  transition: all 0.3s ease;
}

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

/* Thêm media query cho màn hình nhỏ hơn hoặc bằng 768px */
@media (max-width: 768px) {
  .navbar {
    display: block;
    height: 13.0208333333vw;
  }
  .navbar .navbar-container {
    display: none;
    position: absolute;
    flex-direction: column;
    align-items: flex-start;
    height: 80.078125vw;
    width: 100%;
    margin-top: 13.0208333333vw;
    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 .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;
  }
  .navbar .tiktok-btn-wrapper .tiktok-btn {
    display: block;
    margin-left: 1.3020833333vw;
    width: 31.3802083333vw;
    height: 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;
  }
  .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: 0.2604166667vw;
    top: 26.0416666667vw;
    width: 27.6041666667vw;
    height: 20.5729166667vw;
    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;
  }
  .navbar .score-wrapper {
    left: 0vw;
    height: 100%;
    width: 100vw;
    padding-top: 0;
    margin-top: 13.0208333333vw;
    font-size: 2.96875vw;
    height: 5.3385416667vw;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5.5989583333vw;
  }
}
.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-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-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;
}
.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;
}

.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-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-container {
    gap: 9.6354166667vw;
    flex-direction: column;
  }
  .popup.popup-video .submit-video-form {
    background: yellow;
  }
  .popup.popup-video .form-footer {
    margin-top: 4.296875vw;
  }
  .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;
  }
}
.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 {
  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 {
  opacity: 1;
}
.frame1 .frame-inner,
.frame1 .pc-logo,
.frame1 .login-card {
  position: relative;
  z-index: 2;
}
.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: 2;
}
.frame1 .frame-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.frame1 .pc-logo {
  position: absolute;
  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");
}
.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");
}
.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 .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 .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;
  }
  .mobile-level {
    width: 39.3229166667vw;
    height: 8.0729166667vw;
    position: absolute;
    top: 17.96875vw;
    right: 2.9947916667vw;
    background-image: url(../images/mobile-level-background.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffd63b;
    font-size: 2.7903645833vw;
  }
  .mobile-level .mobile-level-text {
    height: 100%;
    margin-left: 6.7708333333vw;
    width: 23.4375vw;
    justify-content: end;
    align-items: center;
    display: flex;
    font-family: "svn-agency-fb-black";
    font-size: 2.7903645833vw;
  }
  .mobile-level .mobile-level-avatar {
    position: absolute;
    right: 0;
    top: 0;
    width: 8.0729166667vw;
    height: 8.0729166667vw;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
    background: 0;
    border: 0.390625vw solid white;
  }
  .mobile-level .mobile-level-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.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: 20vw;
  height: 24.25vw;
  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 .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%;
}

@media (max-width: 768px) {
  .frame2 {
    height: 204.4270833333vw;
    padding-bottom: 5vw;
  }
  .frame2 .frame-2-level {
    padding-top: 40.3645833333vw;
    flex-wrap: wrap;
    gap: 0.78125vw 2.34375vw;
    justify-content: center;
  }
  .frame2 .frame-2-level-item {
    width: 45.703125vw;
    height: 55.5989583333vw;
    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 {
    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 .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-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;
}
.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-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 4.8177083333vw;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
  }
  .frame3 .rank-button-group .rank-button {
    width: 40.234375vw;
    height: 12.109375vw;
    margin: 0;
    font-size: 4.8177083333vw;
    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: 72.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 .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);
  }
}
.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;
}

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden !important;
}

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

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

@media (max-width: 768px) {
  .hidden-mobile {
    display: 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;
  }
}

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