/* ========================================================= 
   CONTACT WIDGET 
========================================================= */

.contact-widget {
   position: fixed;
   right: 10px;
   bottom: 75px;
   z-index: 9999;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

/* Card xổ ra */
.contact-card {
   position: relative;
   background: #fff;
   border-radius: 16px;
   padding: 24px 26px 22px;
   min-width: 260px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
   text-align: center;
   margin-bottom: 16px;
   transform-origin: bottom right;
   transform: scale(0.4) translateY(20px);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition:
      transform 0.35s cubic-bezier(.34, 1.56, .64, 1),
      opacity 0.25s ease,
      visibility 0.25s ease;
}

.contact-widget.open .contact-card {
   transform: scale(1) translateY(0);
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}

/* Avatar toggle */
.contact-toggle {
   position: relative;
   width: 64px;
   height: 64px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: #fff;
   cursor: pointer;
   overflow: hidden;
   transition:
      transform 0.35s cubic-bezier(.34, 1.56, .64, 1),
      box-shadow 0.3s ease,
      opacity 0.25s ease,
      visibility 0.25s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   transform-origin: bottom right;
   text-decoration: none;
   bottom: 75px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18)!important;
}

.contact-widget.open .contact-toggle {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transform: scale(0.4);
}

.contact-toggle:hover {
   transform: scale(1.08);
   box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
   text-decoration: none;
}

.contact-toggle img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

/* Pulse ring quanh avatar */
.contact-toggle::before {
   content: "";
   position: absolute;
   inset: -4px;
   border-radius: 50%;
   border: 2px solid rgba(255, 45, 26, 0.35);
   animation: pulseRing 2s infinite;
   pointer-events: none;
}

@keyframes pulseRing {
   0% {
      transform: scale(1);
      opacity: 0.9;
   }

   70% {
      transform: scale(1.35);
      opacity: 0;
   }

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

.contact-card .card-avatar {
   width: 68px;
   height: 68px;
   border-radius: 50%;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: -58px auto 12px;
   overflow: hidden;
   border: 4px solid #fff;
   box-shadow: 0 6px 16px #a5939633;
}

.contact-card .card-avatar img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.contact-card .close-btn {
   position: absolute;
   top: 8px;
   right: 10px;
   width: 26px;
   height: 26px;
   border: 0;
   background: transparent;
   color: #6b7280;
   font-size: 18px;
   line-height: 1;
   cursor: pointer;
   padding: 0;
   border-radius: 50%;
   transition: background 0.2s ease, color 0.2s ease;
}

.contact-card .close-btn:hover {
   background: #f3f4f6;
   color: #111827;
}

.contact-card .card-title {
   font-size: 17px;
   font-weight: 700;
   color: #1f2937;
   margin: 0 0 16px;
}

.contact-card .card-cta {
   display: inline-block;
   background: #c4082a;
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   padding: 11px 22px;
   border-radius: 50px 0px 50px 50px;
   text-decoration: none;
   transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
   position: relative;
}

.contact-card .card-cta:hover {
   background: #c4082a;
   color: #fff;
   text-decoration: none;
}

.contact-card .card-cta:after {
    content: "";
    background: #fff;
    -webkit-transition: all 0.8s;
    -khtml-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
    position: absolute;
    height: 100%;
    width: 25px;
    opacity: 0.2;
    left: -35%;
    top: 0;
    -webkit-transform: rotate(0deg);
    -khtml-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.contact-card .card-cta:hover:after {
    left: 130%;
}

/* Mobile */
@media (max-width: 575.98px) {
   .contact-widget {
      right: 10px;
   }

   .contact-card {
      min-width: 240px;
      padding: 22px 20px 18px;
   }

   .contact-card .card-avatar {
      width: 60px;
      height: 60px;
      margin-top: -50px;
   }

   .contact-toggle {
      width: 56px;
      height: 56px;
      bottom: 45px;
   }
}

@media (prefers-reduced-motion: reduce) {

   .contact-card,
   .contact-toggle,
   .contact-toggle::before {
      transition: none !important;
      animation: none !important;
   }
}