#mobile-menu.open {
    max-height: 500px; /* đủ lớn cho toàn bộ menu */
    opacity: 1;
}

.bg-primary {
    background: linear-gradient(rgb(23, 234, 217) 0%, rgb(96, 120, 234) 100%);
}

.text-primary {
    color: #0097d7;
}

.violet-text {
    color: #5b247a; /* Màu gradient */
}

.gradient-primary-text {
    background: linear-gradient(rgb(91, 36, 122) 0%, rgb(27, 206, 223) 100%); /* Màu gradient */
    -webkit-background-clip: text; /* Áp dụng background vào phần text */
    -webkit-text-fill-color: transparent; /* Làm cho phần màu chữ trong suốt để lộ background */
  }

.gradient-primary-border {
    border: 2px solid transparent;
    border-radius: 0.5rem; /* tương ứng với rounded-lg */
    background-image: 
      linear-gradient(white, white), 
      linear-gradient(rgb(91, 36, 122), rgb(27, 206, 223));
    background-origin: border-box;
    background-clip: content-box, border-box;
}
/* Áp dụng cho toàn trang */
::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f0f0f0;
  }
  
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(rgb(23, 234, 217) 0%, rgb(96, 120, 234) 100%);
    border-radius: 4px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(rgb(23, 234, 217) 0%, rgb(96, 120, 234) 100%);
  }


  .package-basic:hover {
    border: 2px solid transparent;
    border-radius: 0.5rem; /* tương ứng với rounded-lg */
    background-image: 
      linear-gradient(white, white), 
      linear-gradient(rgb(91, 36, 122), rgb(27, 206, 223));
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.bg-package {
    background: linear-gradient(rgb(23, 234, 217) 50%, rgb(96, 120, 234) 100%);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  
  .animate-float {
    animation: float 2s ease-in-out infinite;
  }
  .section-working-process {
    background-image: url('/assets/images/working-process.png');
  }

  
@layer utilities {
    .animation-delay-0     { animation-delay: 0ms; }
    .animation-delay-100   { animation-delay: 100ms; }
    .animation-delay-200   { animation-delay: 200ms; }
    .animation-delay-300   { animation-delay: 300ms; }
    .animation-delay-400   { animation-delay: 400ms; }
    .animation-delay-500   { animation-delay: 500ms; }
    .animation-delay-600   { animation-delay: 600ms; }
    .animation-delay-700   { animation-delay: 700ms; }
    .animation-delay-800   { animation-delay: 800ms; }
    .animation-delay-900   { animation-delay: 900ms; }
    .animation-delay-1000  { animation-delay: 1000ms; }
  }
  

  @keyframes phonering-alo-circle-anim {
  0% {
    transform: scale(0.5);
    opacity: 0.4;
  }
  40% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

.phonering-alo-circle {
  position: absolute;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
  border: 2px solid transparent;
  background-image: 
      linear-gradient(white, white), 
      linear-gradient(rgb(91, 36, 122), rgb(27, 206, 223));
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.gradient-primary-border2 {
    border: 2px solid transparent;
    border-radius: 0.5rem; /* tương ứng với rounded-lg */
    background-image: 
      linear-gradient(white, white), 
      linear-gradient(rgb(23, 234, 217) 0%, rgb(96, 120, 234) 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}