.cta__mobile {
  display: none;
}

.cta__pc {
  position: fixed;
  bottom: 3rem;
  right: 1.25rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out;
}

.cta__pc.active {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 640px) {
  body.page-template-page-checkout .cta__pc {
    bottom: 9rem;
  }
}

.cta__socials {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.cta__social {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.93719rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
  transition: all 0.5s ease-out;
}

.cta__social {
  position: absolute;
  right: 0;
}

.cta__social-text {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.5rem);

  transform: translateY(-50%) translateX(0.5rem);
  opacity: 0;

  white-space: nowrap;
  background: #fff;
  color: #161616;
  font-family: SVN-Gilroy;

  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;

  font-size: 0.875rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);

  transition: all 0.25s ease;
  pointer-events: none;
}

.cta__social:hover .cta__social-text {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.cta__social:hover {
  scale: 1.1;
}

.cta__social-text::after {
  content: "";
  position: absolute;
  right: -0.25rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);

  width: 0.5rem;
  height: 0.5rem;
  background: #fff;
}

.cta__social:first-child {
  z-index: 3;
}

.cta__social:nth-child(2) {
  z-index: 2;
}

.cta__social:nth-child(3) {
  z-index: 3;
}

.cta__socials.is-show-socials .cta__social:first-child {
  bottom: calc(3rem + 3rem + 3rem + 0.93719rem + 0.93719rem);
  opacity: 1;
}

.cta__socials.is-show-socials .cta__social:nth-child(2) {
  bottom: calc(3rem + 3rem + 0.93719rem);
  opacity: 1;
}

.cta__socials.is-show-socials .cta__social:nth-child(3) {
  bottom: calc(3rem);
  opacity: 1;
}

.cta__socials.is-show-socials .cta__social {
  visibility: visible;
  pointer-events: auto;
}

.cta__social-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.cta__socials.is-show-socials
  .cta__social:nth-child(3)
  .cta__social-img {
  width: 99%;
  height: 99%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
}

.cta__contact {
  position: absolute;
  right: 0;
  bottom: 4rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: white;
  z-index: 4;
  transition: transform 0.3s ease;
}

/* text */
.cta__text {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.5rem);

  transform: translateY(-50%) translateX(0.5rem);
  opacity: 0;

  white-space: nowrap;
  background: #fff;
  color: #161616;
  font-family: SVN-Gilroy;

  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;

  font-size: 0.875rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);

  transition: all 0.25s ease;
  pointer-events: none;
}

/* hover → hiện */
.cta__contact:hover .cta__text {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.cta__contact:hover {
  transform: scale(1.1);
}
.cta__text::after {
  content: "";
  position: absolute;
  right: -0.25rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);

  width: 0.5rem;
  height: 0.5rem;
  background: #fff;
}

.cta__contact.is-show-socials {
  transform: translateY(-11.81157rem);
  opacity: 0;
  visibility: hidden;
}

.cta__contact-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta__contact-icon {
  position: absolute;
  top: 0.4rem;
  right: 0.09rem;
  object-fit: cover;
  transition: all 0.3s ease-out;
}

.cta__contact-icon.zalo {
  opacity: 0;
  width: 1.375rem;
  height: 0.48981rem;
}

.cta__contact-icon.messenger {
  top: 0.5rem;
  right: 0.5rem;
  opacity: 0;
  width: 1rem;
  height: 1.00013rem;
}

.cta__contact-icon.zalo.active {
  opacity: 1;
}

.cta__contact-icon.messenger.active {
  opacity: 1;
}

.cta__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
  background: white;
  transition: all 0.5s ease-out;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  visibility: hidden;
}

.cta__socials.is-show-socials .cta__close {
  visibility: visible;
}

.cta__close-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta__go-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
  -webkit-filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
  border-radius: 50%;
  overflow: hidden;
  will-change: filter;
  transform: translateZ(0);
}

.cta__go-to-top svg {
  width: 100%;
  height: 100%;
}

.progress-circle {
  transition: stroke-dashoffset 0.1s linear;
}

@media (max-width: 639.98px) {
  .cta__pc {
    right: 0.25rem;
    bottom: 7rem;
  }

  .cta__socials {
    display: none;
    margin-bottom: 0.75rem;
  }

  body.page-template-page-checkout .cta__socials,
  body.woocommerce-checkout .cta__socials,
  body.single-product .cta__socials,
  body.page-template-page-chinh-sach-thanh-toan .cta__socials,
  body.page-template-default .cta__socials,
  body.single-post .cta__socials {
    display: flex;
  }

  body.page-template-page-checkout .cta__social,
  body.page-template-page-checkout .cta__close,
  body.woocommerce-checkout .cta__social,
  body.woocommerce-checkout .cta__close,
  body.single-product .cta__social,
  body.single-product .cta__close,
  body.page-template-page-chinh-sach-thanh-toan .cta__social,
  body.page-template-page-chinh-sach-thanh-toan .cta__close,
  body.page-template-default .cta__social,
  body.page-template-default .cta__close,
  body.single-post .cta__social,
  body.single-post .cta__close {
    width: 3rem;
    height: 3rem;
  }

  .cta__social,
  .cta__close {
    width: 2.35713rem;
    height: 2.35713rem;
  }

  .cta__socials.is-show-socials .cta__social:first-child {
    bottom: calc(2.35713rem + 2.35713rem + 2.35713rem + 0.75rem + 0.75rem);
  }

  .cta__socials.is-show-socials .cta__social:nth-child(2) {
    bottom: calc(2.35713rem + 2.35713rem + 0.75rem);
  }

  .cta__socials.is-show-socials .cta__social:nth-child(3) {
    bottom: 2.35713rem;
  }

  body.page-template-page-checkout
    .cta__socials.is-show-socials
    .cta__social:first-child,
  body.woocommerce-checkout
    .cta__socials.is-show-socials
    .cta__social:first-child,
  body.single-product .cta__socials.is-show-socials .cta__social:first-child,
  body.page-template-page-chinh-sach-thanh-toan
    .cta__socials.is-show-socials
    .cta__social:first-child,
  body.page-template-default
    .cta__socials.is-show-socials
    .cta__social:first-child,
  body.single-post .cta__socials.is-show-socials .cta__social:first-child {
    bottom: calc(3rem + 3rem + 3rem + 0.75rem + 0.75rem);
  }

  body.page-template-page-checkout
    .cta__socials.is-show-socials
    .cta__social:nth-child(2),
  body.woocommerce-checkout
    .cta__socials.is-show-socials
    .cta__social:nth-child(2),
  body.single-product .cta__socials.is-show-socials .cta__social:nth-child(2),
  body.page-template-page-chinh-sach-thanh-toan
    .cta__socials.is-show-socials
    .cta__social:nth-child(2),
  body.page-template-default
    .cta__socials.is-show-socials
    .cta__social:nth-child(2),
  body.single-post .cta__socials.is-show-socials .cta__social:nth-child(2) {
    bottom: calc(3rem + 3rem + 0.75rem);
  }

  body.page-template-page-checkout
    .cta__socials.is-show-socials
    .cta__social:nth-child(3),
  body.woocommerce-checkout
    .cta__socials.is-show-socials
    .cta__social:nth-child(3),
  body.single-product .cta__socials.is-show-socials .cta__social:nth-child(3),
  body.page-template-page-chinh-sach-thanh-toan
    .cta__socials.is-show-socials
    .cta__social:nth-child(3),
  body.page-template-default
    .cta__socials.is-show-socials
    .cta__social:nth-child(3),
  body.single-post .cta__socials.is-show-socials .cta__social:nth-child(3) {
    bottom: 3rem;
  }

  .cta__contact {
    display: none;
    width: 2.35713rem;
    height: 2.35713rem;
  }

  body.page-template-page-checkout .cta__contact,
  body.woocommerce-checkout .cta__contact,
  body.single-product .cta__contact,
  body.page-template-page-chinh-sach-thanh-toan .cta__contact,
  body.page-template-default .cta__contact,
  body.single-post .cta__contact {
    display: block;
    width: 3rem;
    height: 3rem;
  }

  .cta__go-to-top {
    width: 2.35713rem;
    height: 2.35713rem;
    filter: drop-shadow(0 3.143px 9.429px rgba(0, 0, 0, 0.1));
  }

  body.page-template-page-checkout .cta__go-to-top,
  body.woocommerce-checkout .cta__go-to-top,
  body.single-product .cta__go-to-top,
  body.page-template-page-chinh-sach-thanh-toan .cta__go-to-top,
  body.page-template-default .cta__go-to-top,
  body.single-post .cta__go-to-top {
    width: 3rem;
    height: 3rem;
  }

  .cta__mobile {
    position: sticky;
    bottom: 0;
    right: 0;
    width: 100%;
    box-shadow: 0 -4px 12px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 50;
  }

  .cta__links {
    width: 100%;
    display: flex;
    align-items: stretch;
  }

  .cta__link {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    min-height: 3.25rem;
    padding: 0.75rem 0.375rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(25px);
    color: #fff;
    text-align: center;
    font-family: SVN-Gilroy;
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    border: none;
  }

  .cta__link:first-child:after {
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 0.03125rem;
    height: 2.25rem;
    background-image: url("/wp-content/uploads/2026/03/Line-3.svg");
    background-repeat: no-repeat;
    background-size: cover;
  }

  .cta__link:last-child {
    background: #09b8b3;
    backdrop-filter: blur(0);
  }

  .cta__link:last-child .cta__link-img {
    border: 1px solid white;
  }

  .cta__link span {
    min-width: 0;
    line-height: 1.2;
  }

  .cta__link-img {
    width: 1rem;
    border-radius: 50%;
    height: 1rem;
    object-fit: cover;
    flex-shrink: 0;
  }

  body.page-template-page-chinh-sach-thanh-toan .cta__mobile,
  body.page-template-default .cta__mobile,
  body.single-post .cta__mobile {
    display: none;
  }
}

.cta__contact-icon_zalo {
  width: 1.375rem;
  height: 0.48981rem;
  top: 0.9rem;
}