@font-face {
    font-family: 'SVN-Gilroy';
    src: url('/font/SVN-Gilroy/SVN-Gilroy-Bold.woff2') format('woff2');
    font-weight: 700;
}
@font-face {
    font-family: 'SVN-Gilroy';
    src: url('/font/SVN-Gilroy/SVN-Gilroy-SemiBold.woff2') format('woff2');
    font-weight: 600;
}
@font-face {
    font-family: 'SVN-Gilroy';
    src: url('/font/SVN-Gilroy/SVN-Gilroy-Medium.woff2') format('woff2');
    font-weight: 500;
}
html{
    scroll-behavior: smooth;
}

body{
    font-family: 'SVN-Gilroy', sans-serif;
}
.main-container{
    margin: 0 auto;
    padding: 0 15px;
}
#scrollTopBtn {
  opacity: 0;
  transition: opacity 0.3s ease;
}
#scrollTopBtn.show {
  opacity: 1;
}
@media (min-width: 768px) {
    .main-container{
        width: 96%;
    }
    
    .pulse-button{
        width: 50px;
        height: 50px;
    } 
    .pulse-button img{
        width: 35px;
        height: 35px;
    }
}
.pulse-button {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 20px 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    cursor: pointer;
    animation: pulse-ring 1.5s infinite;
  }

  /* Icon bên trong */
  .pulse-button img {
    width: 40px;
    height: 40px;
    z-index: 2;
    animation: ring-shake 1.2s infinite ease-in-out;
  }

  /* Hiệu ứng lan tỏa */
  @keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(0, 195, 255, 0.6); }
    70% { box-shadow: 0 0 0 25px rgba(0, 195, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 195, 255, 0); }
  }

  /* Hiệu ứng rung nhẹ giống chuông */
  @keyframes ring-shake {
    0% { transform: rotate(0deg) scale(1); }
    10% { transform: rotate(15deg) scale(1.05); }
    20% { transform: rotate(-10deg) scale(1.05); }
    30% { transform: rotate(8deg) scale(1.05); }
    40% { transform: rotate(-6deg) scale(1.05); }
    50% { transform: rotate(4deg) scale(1.05); }
    60% { transform: rotate(-3deg) scale(1.05); }
    70% { transform: rotate(2deg) scale(1.05); }
    80% { transform: rotate(-1deg) scale(1.05); }
    100% { transform: rotate(0deg) scale(1); }
  }
    /* Màu riêng cho từng nút */
  .zalo { animation: pulse-zalo 1.5s infinite; }
  .call { animation: pulse-call 1.5s infinite; }

  @keyframes pulse-zalo {
    0% { box-shadow: 0 0 0 0 rgba(0, 132, 255, 0.6); }
    70% { box-shadow: 0 0 0 25px rgba(0, 132, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 132, 255, 0); }
  }

  @keyframes pulse-call {
    0% { box-shadow: 0 0 0 0 rgba(0, 200, 0, 0.6); }
    70% { box-shadow: 0 0 0 25px rgba(0, 200, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 200, 0, 0); }
  }