@keyframes ring {
      0% {
          transform: rotate(0);
      }

      10% {
          transform: rotate(15deg);
      }

      20% {
          transform: rotate(-15deg);
      }

      30% {
          transform: rotate(10deg);
      }

      40% {
          transform: rotate(-10deg);
      }

      50% {
          transform: rotate(5deg);
      }

      60% {
          transform: rotate(-5deg);
      }

      70% {
          transform: rotate(0);
      }

      100% {
          transform: rotate(0);
      }
  }

  .phone-ring i {
      animation: ring 1s infinite;
      transform-origin: center;
  }


  /* ===== HOTLINE BUTTON toa sang va rung 5s 1 lan ===== */
  .hotline {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 56px;
      height: 56px;
      background: #e53935;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      text-decoration: none;
      z-index: 9999;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
  }

  /* ripple effect */
  .hotline::before,
  .hotline::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: rgba(229, 57, 53, .5);
      animation: pulse 1.8s infinite;
  }

  .hotline::after {
      animation-delay: .9s;
  }

  /* icon shake */
  .hotline span {
      position: relative;
      z-index: 2;
      animation: shake 1.5s infinite;
      font-size: 24px;
  }

  /* pause when hover */
  .hotline:hover::before,
  .hotline:hover::after,
  .hotline:hover span {
      animation-play-state: paused;
  }

  /* ===== ANIMATION ===== */
  @keyframes pulse {
      0% {
          transform: scale(1);
          opacity: .6;
      }

      100% {
          transform: scale(2.2);
          opacity: 0;
      }
  }

  @keyframes shake {
      0% {
          transform: rotate(0);
      }

      10% {
          transform: rotate(15deg);
      }

      20% {
          transform: rotate(-15deg);
      }

      30% {
          transform: rotate(10deg);
      }

      40% {
          transform: rotate(-10deg);
      }

      50% {
          transform: rotate(0);
      }

      100% {
          transform: rotate(0);
      }
  }