.overlay__path {
  fill: #fff; /* trắng */
}


.menu-btn {
  width:32.8vw;
  height: 10vw;
  border: none;

  margin-top: 4vh;
  background: url('/img/BtnMenu.png') no-repeat center;
  background-size: 100% 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: #fff;
  font-weight: 1000;
  font-size: 2.4vw;
  line-height: 2.2;
  cursor: pointer;
  user-select: none;

  transition: transform 0.2s ease;
}

.menu-btn:disabled{
  opacity: 0.5;
}


.pink-glow {
  color: #fff;
  text-align: center;
  text-shadow:
          0 0 4px  rgba(255,95,162,0.6),
          0 0 10px rgba(255,95,162,0.6),
          0 0 20px rgba(255,95,162,0.6);
}


body {
  font-family: "SVN-Poppins-Bold", "SVN-Poppins-SemiBold", sans-serif;
  margin: 0;
  padding: 0;
  width: 100vw;
  min-height: 100vh;
  background-image: url("/img/BackgroundKV.png"); /* Replace with your image path */
  background-size: cover; /* Ensures the image fills the container */
  background-position: bottom center; /* Center the image */
  background-repeat: no-repeat; /* Prevent tiling */
  overflow: hidden; /* 🚫 disable scroll */
}

.view {
  width: 100vw;
  min-height: 100vh;
  position: absolute;
  top:0;
  grid-area: 1/1/2/2;
  place-items: center;
}

.view--1 {
  display: flex;
  justify-content: space-around;

  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.kv-action {
  touch-action: none;     /* chặn browser gesture */
  cursor: pointer;
}

.kv-1 {
  width: 100vw;
  height: 100vh;
  background-image: url("/img/KVPage_1.jpg"); /* 👈 ảnh KV */
  background-size: contain;        /* full màn hình */
  background-position: center;   /* căn giữa */
  background-repeat: no-repeat;
}
.kv-2 {
  width: 100vw;
  height: 100vh;
  background-image: url("/img/KVPage_2.jpg"); /* 👈 ảnh KV */
  background-size: contain;        /* full màn hình */
  background-position: center;   /* căn giữa */
  background-repeat: no-repeat;
}
.kv-3 {
  width: 100vw;
  height: 100vh;

}


#bg-video {
  position: fixed;
  top: 50%;
  left: 50%;

  min-width: 100vw;
  min-height: 100vh;


  width: 100vw;
  height: 100vh;

  transform: translate(-50%, -50%);
  object-fit: cover;

  z-index: -1; /* behind everything */
}

.view--1 p {
  text-align: left;
  margin-bottom: 30px;
}

.view--2 {
  pointer-events: none;
  opacity: 0;
}

.view.view--open {
  pointer-events: auto;
  opacity: 1;
}

.overlay {
  pointer-events: none;
  grid-area: 1/1/2/2;
  position: relative;
  z-index: 1000;
  width: 100vw;
  max-height: 100vh;
}

#rotate-warning {
  position: fixed;
  inset: 0;
  background-image: url("/img/AppBackgroundEmpty.png"); /* Replace with your image path */
  background-size: cover; /* Ensures the image fills the container */
  background-position: bottom center; /* Center the image */
  background-repeat: no-repeat; /* Prevent tiling */
  z-index: 99999;

  display: none;
  justify-content: center;
  align-items: center;
}

.rotate-content {
  text-align: center;
  color: white;
  animation: fadeIn 0.4s ease;
}

.rotate-icon {
  font-size: 15vw;
  animation: rotatePhone 1.5s ease-in-out infinite;
}

.rotate-text {
  margin-top: 16px;
  font-size: 4.5vw;
  font-weight: 600;
}

/* Animation */
@keyframes rotatePhone {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}




.menu-btn-kv-1 {

  background: url('/img/ButtonKV1.png') no-repeat center;
  background-size: 100% 100%;
  top: 19vh;
}
.menu-btn-kv-2 {

  background: url('/img/ButtonKV2.png') no-repeat center;
  background-size: 100% 100%;
  top: 34.5vh
}

.menu-btn-kv-3 {

  background: url('/img/ButtonKV3.png') no-repeat center;
  background-size: 100% 100%;
  top: 50vh
}


.menu-btn-kv {
  position: absolute;
  left: 50vw;
  transform: translateX(-50%);

  width: 48.2vh;
  height: 11.4vh;

  border: none;

  display: block;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.4vw;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;

  transition: transform 0.2s ease;
}

.logo-image {

  top: 74vh;

  position: absolute;
  left: 50vw;
  transform: translateX(-50%);

  width: 35.2vh;
  height: 12.8vh;

  border: none;

  display: block;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.4vw;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}

.bg-image {
  left: 50vw;
  top:0vh;
  transform: translateX(-50%);
  position: absolute;
  height: 100vh;
  max-height: 100vh;
  object-fit: contain;
  display: block;
}

.bg-sub-wave-left-image{
  left: -9vw;
  top: -27vh;
  transform: translateX(0%);
  position: absolute;
  max-height: 69.2vh;
  object-fit: contain;
}

.bg-sub-left-image{
  left: -4vw;
  bottom:4vh;
  transform: translateX(0%) translateY(0%);
  position: absolute;
  max-height: 52.4vh;
  object-fit: contain;
}

.bg-sub-wave-right-image{
  right: -10vw;
  bottom: -28.4vh;
  transform: translateX(0%) translateY(0%);

  position: absolute;
  max-height: 69.2vh;
  object-fit: contain;
}

.bg-sub-right-image{
  right: -6.2vw;
  top:5.5vh;
  transform: translateX(0%);
  position: absolute;
  max-height: 56.4vh;
  object-fit: contain;
}