/* Container setup */
.button.has-animation {
    position: relative;
    overflow: hidden;
}

.button.has-animation .content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.button.has-animation .text-button {
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button.has-animation .icon-hover {
    position: absolute;
    opacity: 0;
}

/* Xử lý hướng Right (mặc định của Framer: exitX: -30, enterX: 30) */
.button.anim-dir-right .icon-hover {
    transform: translateX(30px);
}

.button.anim-dir-right:hover .icon-main {
    transform: translateX(-30px);
    opacity: 0;
}

.button.anim-dir-right:hover .icon-hover {
    transform: translateX(0);
    opacity: 1;
}

/* Xử lý hướng Left (Framer: exitX: 30, enterX: -30) */
.button.anim-dir-left .icon-hover {
    transform: translateX(-30px);
}

.button.anim-dir-left:hover .icon-main {
    transform: translateX(30px);
    opacity: 0;
}

.button.anim-dir-left:hover .icon-hover {
    transform: translateX(0);
    opacity: 1;
}

.button {
  position: relative;
  border-radius: 62.5rem;
  color: white;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.button .title-sub {
  position: absolute;
  left: 0;
  top: 0;
}

.button .content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
}

.button .content .text-button {
  position: absolute;
  inset: 0;
  line-height: 150%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Color variants */
.border-primary {
  border-color: rgba(163, 226, 255, 1);
}

.border-yellow {
  border-color: rgba(255, 220, 163, 1);
}

.border-blue {
  border-color: #F5F5F5;
}

.absolute-inset {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-width: 1.6px;
  border-style: solid;
  border-radius: 62.5rem;
}


@media (max-width: 640px) {
  .button {
    gap: 0.5rem;
  }
  .button .whitespace-nowrap {
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 1.3125rem */
  }
}