/*
 * Lynh Agency - Nút liên hệ nhanh
 * Frontend isolated contact widget. Inspired by the compact contact-stack UX
 * supplied by the plugin user, without depending on theme styles or libraries.
 */
.laq-qc-widget,
.laq-qc-widget *,
.laq-qc-widget *::before,
.laq-qc-widget *::after {
  box-sizing: border-box !important;
}

.laq-qc-widget {
  --laq-qc-size: 50px;
  --laq-qc-launcher-size: 60px;
  --laq-qc-gap: 10px;
  --laq-qc-side: 20px;
  --laq-qc-bottom: 20px;
  --laq-qc-z: 99999;
  --laq-qc-launcher: #00ab55;
  position: fixed !important;
  z-index: var(--laq-qc-z) !important;
  bottom: calc(var(--laq-qc-bottom) + env(safe-area-inset-bottom, 0px)) !important;
  width: var(--laq-qc-launcher-size) !important;
  min-width: var(--laq-qc-launcher-size) !important;
  max-width: var(--laq-qc-launcher-size) !important;
  height: var(--laq-qc-launcher-size) !important;
  min-height: var(--laq-qc-launcher-size) !important;
  max-height: var(--laq-qc-launcher-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  text-align: initial !important;
  isolation: isolate;
  pointer-events: none !important;
}

.laq-qc-widget.is-right { right: var(--laq-qc-side) !important; left: auto !important; }
.laq-qc-widget.is-left { left: var(--laq-qc-side) !important; right: auto !important; }

.laq-qc-actions {
  position: absolute !important;
  /* Keep enough room inside the scrollport for hover scaling and shadows. */
  bottom: calc(var(--laq-qc-launcher-size) + 2px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--laq-qc-gap) !important;
  width: calc(var(--laq-qc-size) + 32px) !important;
  max-height: max(80px, calc(100vh - var(--laq-qc-launcher-size) - var(--laq-qc-bottom) - 52px)) !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 0 !important;
  background: transparent !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  transition: opacity .18s ease, visibility 0s linear .30s !important;
}

.laq-qc-widget.is-right .laq-qc-actions { right: -11px !important; left: auto !important; }
.laq-qc-widget.is-left .laq-qc-actions { left: -11px !important; right: auto !important; }
.laq-qc-actions::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
.laq-qc-widget.is-open .laq-qc-actions { opacity: 1; visibility: visible; pointer-events: auto !important; transition-delay: 0s !important; }

.laq-qc-action {
  --laq-qc-button: #111827;
  position: relative !important;
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--laq-qc-size) !important;
  min-width: var(--laq-qc-size) !important;
  max-width: var(--laq-qc-size) !important;
  height: var(--laq-qc-size) !important;
  min-height: var(--laq-qc-size) !important;
  max-height: var(--laq-qc-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(17, 24, 39, .06) !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--laq-qc-button) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12) !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  line-height: 1 !important;
  opacity: 0;
  transform: translateY(10px) scale(.92);
  transform-origin: 50% 100%;
  transition: opacity .20s ease var(--laq-qc-delay, 0ms), transform .30s cubic-bezier(.2, .8, .2, 1) var(--laq-qc-delay, 0ms), box-shadow .18s ease !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none !important;
}

.laq-qc-widget.is-open .laq-qc-action { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto !important; }
.laq-qc-action:hover,
.laq-qc-action:focus-visible { color: var(--laq-qc-button) !important; text-decoration: none !important; transform: scale(1.10) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .16) !important; transition-delay: 0ms !important; }
.laq-qc-action:focus-visible,
.laq-qc-toggle:focus-visible { outline: 3px solid rgba(0, 171, 85, .22) !important; outline-offset: 3px !important; }
.laq-qc-action::before,
.laq-qc-action::after { content: none !important; display: none !important; }

.laq-qc-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60% !important;
  height: 60% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  line-height: 1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.laq-qc-icon svg { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
.laq-qc-icon > i { display: block !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: calc(var(--laq-qc-size) * .36) !important; line-height: 1 !important; }
.laq-qc-icon .laq-icon-text { display: block !important; margin: 0 !important; padding: 0 !important; color: currentColor !important; font-family: Arial, sans-serif !important; font-size: 10.5px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -.04em !important; text-transform: none !important; white-space: nowrap !important; }
.laq-qc-icon .laq-icon-text-brand { font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.05em !important; }
.laq-qc-action img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; object-fit: contain !important; }

.laq-qc-toggle {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--laq-qc-launcher-size) !important;
  min-width: var(--laq-qc-launcher-size) !important;
  max-width: var(--laq-qc-launcher-size) !important;
  height: var(--laq-qc-launcher-size) !important;
  min-height: var(--laq-qc-launcher-size) !important;
  max-height: var(--laq-qc-launcher-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 8px solid #fff !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: #fff !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .16) !important;
  font: inherit !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
  overflow: visible !important;
  pointer-events: auto !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

.laq-qc-toggle::before { content: "" !important; position: absolute !important; inset: -8px !important; z-index: -1 !important; display: block !important; border-radius: 50% !important; pointer-events: none !important; }
.laq-qc-widget.has-launcher-pulse .laq-qc-toggle::before { animation: laqQcLauncherPulse 2s infinite !important; }
@keyframes laqQcLauncherPulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 171, 85, .22); }
  50% { box-shadow: 0 0 0 20px rgba(0, 171, 85, .18); }
  100% { box-shadow: 0 0 0 20px rgba(0, 171, 85, 0); }
}
.laq-qc-toggle:hover { transform: scale(1.04) !important; box-shadow: 0 5px 17px rgba(0, 0, 0, .19) !important; }

.laq-qc-toggle-open,
.laq-qc-toggle-close {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--laq-qc-launcher) !important;
  color: #fff !important;
  line-height: 1 !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .24s cubic-bezier(.2, .8, .2, 1) !important;
}

.laq-qc-toggle-open svg,
.laq-qc-toggle-close svg { display: block !important; width: 58% !important; height: 58% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; }
.laq-qc-toggle-open > i,
.laq-qc-toggle-close > i { display: block !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: calc(var(--laq-qc-launcher-size) * .34) !important; line-height: 1 !important; }
.laq-qc-toggle-close { opacity: 0; transform: rotate(-75deg) scale(.82); }
.laq-qc-widget.is-open .laq-qc-toggle-open { opacity: 0; transform: rotate(75deg) scale(.82); }
.laq-qc-widget.is-open .laq-qc-toggle-close { opacity: 1; transform: rotate(0) scale(1); }

.laq-qc-mobile-only { display: none !important; }
.laq-qc-desktop-only { display: block !important; }

@media (max-width: 767px) {
  .laq-qc-desktop-only { display: none !important; }
  .laq-qc-mobile-only { display: block !important; }
  .laq-qc-widget { bottom: calc(max(14px, min(var(--laq-qc-bottom), 40px)) + env(safe-area-inset-bottom, 0px)) !important; }
  .laq-qc-widget.is-right { right: max(14px, min(var(--laq-qc-side), 32px)) !important; }
  .laq-qc-widget.is-left { left: max(14px, min(var(--laq-qc-side), 32px)) !important; }
  .laq-qc-action:hover,
  .laq-qc-action:focus-visible,
  .laq-qc-toggle:hover { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .laq-qc-widget *,
  .laq-qc-widget *::before,
  .laq-qc-widget *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}