.social-btn-wrapper {
    /* ย้าย fixed positioning มาไว้ที่ wrapper (ตัวที่มี filter)
       เพราะ filter บน ancestor จะทำให้ position:fixed ของลูก
       เพี้ยนกลายเป็นเหมือน absolute เทียบกับ wrapper แทนที่จะ fixed กับจอ */
    position: fixed;
    bottom: 5%;
    right: 25px;
    margin: 1em;
    z-index: 9999;
  }

  @media (min-width: 769px) {
    /*.social-btn-wrapper {
      filter: url(#goo);
    }*/
  }

  .social-btn {
    position: relative;

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

  .social-btn span,
  .social-btn .button {
    position: absolute;
    --size: 55px;

    width: var(--size);
    height: var(--size);
    border-radius: 50%;

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

    background: #f36e20;
    cursor: pointer;
  }

  .social-btn a {
    color: #fff;
    font-size: 22px;
  }

  .social-btn .button i {
    font-size: 30px;
    color: #fff;
  }

  .social-btn.active .button {
    transform: rotate(360deg);
    transition: transform 1s ease-in-out;
  }

  .social-btn.active span:not(:last-child) {
    animation: show .5s ease forwards;
  }

  .social-btn.in-active span:not(:last-child) {
    animation: hide .5s ease forwards;
  }

  @keyframes show {
    to {
      transform: translateY(calc((var(--i) * -75px) - 20px));
      background: var(--bg);
      color: var(--clr);
    }
  }

  @keyframes hide {
    to {
      transform: translateY(0);
    }
  }

  .social-btn,
  .social-btn * {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  svg {
    width: 0;
    height: 0;
  }