/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/


/*************** ADD CUSTOM CSS HERE.   ***************/
.tc-box-lienhetuvan {
	margin-top: -40px; /* Điều chỉnh số này (-30px, -50px, -70px...) cho vừa mắt */
    position: relative; /* Bắt buộc để z-index hoạt động */
    z-index: 10;
  	border: 3px double #b1154a;
}
	
/* ===== CTA FLOAT CHUẨN ===== */
.cta-fixed {
  position: fixed !important;
  right: 18px;
  bottom: 90px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 99999 !important;
}

/* Button Style */
.cta-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  font-size: 22px;
  text-decoration: none;
  overflow: visible;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
  transition: transform 0.25s ease;
}

/* Hover Scale */
.cta-btn:hover {
  transform: scale(1.15);
}

/* Colors */
.cta-btn.facebook { background: #1877f2; }
.cta-btn.zalo     { background: #5db2ff; }
.cta-btn.phone    { background: #d8b36a; }

/* Zalo icon sizing */
.cta-btn.zalo img { width: 26px; height: 26px; }

/* ===== PULSE BACKGROUND EFFECT ===== */
.cta-btn::before,
.cta-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.25;
  animation: pulse-ani 2.2s infinite ease-out;
  z-index: -1;
}

.cta-btn::after {
  animation-delay: 1.1s;
}

@keyframes pulse-ani {
  0% { transform: scale(1); opacity: 0.35; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ===== ICON RUNG ===== */
@keyframes shake-ani {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(10deg); }
  30% { transform: rotate(-10deg); }
  45% { transform: rotate(6deg); }
  60% { transform: rotate(-6deg); }
  100% { transform: rotate(0deg); }
}

.cta-btn i,
.cta-btn img {
  animation: shake-ani 1.3s infinite ease-in-out;
  transform-origin: center;
}

/* STOP EFFECT ON HOVER */
.cta-btn:hover::before,
.cta-btn:hover::after,
.cta-btn:hover i,
.cta-btn:hover img {
  animation: none !important;
}

/* MOBILE SAFE SPACE */
@media (max-width: 768px) {
  .cta-fixed { bottom: 80px; right: 12px; }
}


/* @media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/