#preloader {
  background-color: white;
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 99999;
  background-size: 100%;
}



.name-container {
  display: flex;
  justify-content: center; /* Horizontally center content */
  align-items: center;     /* Vertically center content */
  height: 100vh;           /* Full height of the viewport */
  width: 100%;             /* Full width of the viewport */
  position: relative;

}

.logo-name {
  color: #057d80;
  font-size: 36px;
  letter-spacing: 12px;
  text-transform: uppercase;
  font-weight: bolder;
  margin-top: 150px;
  /* No need for absolute positioning */
  stroke-width: 16px;
  stroke-dasharray: 6000;
  animation: swipe-up 1.5s ease forwards;
}

#svg {
  height: 300px;
  width: 300px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  stroke: #057d80;
  fill-opacity: 1;
  stroke-width: 1px;
  stroke-dasharray: 6000;
  animation: draw 6s ease; /* Thêm animation rotate */
  transform-origin: center; /* Đảm bảo xoay quanh tâm của SVG */
  
}

@keyframes draw {
  from {
    stroke-dashoffset: 6000;
  }
  to {
    stroke-dashoffset: 0;
  }
}



@keyframes swipe-up {
  from {
    transform: translateY(100%); /* Start from off-screen (bottom) */
  }
  to {
    transform: translateY(-50%); /* End at the desired position */
  }
}

@media only screen and (max-width: 767px) {
  #preloader {
    background-size: 100%;
  }
  
  .logo-name {
    font-size: 18px;
  }
}
/* 
@media only screen and (min-width: 1920px) {
  .logo-name {
    left: 50%;
    transform: translateX(-50%);
  }
} */