/* Thành Phát EV v0.0.124 — independent fixed Zalo and understated back-to-top. */
:root { --tpa-floating-clearance-v124: 0px; }
body .tpa-floating-zalo-v124 {
  box-sizing: border-box;
  position: fixed;
  z-index: 99940;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom) + var(--tpa-floating-clearance-v124));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: #fff;
  border: 1px solid rgba(0, 117, 208, .12);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(4, 75, 155, .20);
  isolation: isolate;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  animation: tpaZaloNudgeV124 4s ease-in-out infinite;
}
body .tpa-floating-zalo-v124 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
body .tpa-floating-zalo-v124::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -5px;
  border: 2px solid rgba(0, 135, 246, .45);
  border-radius: 21px;
  pointer-events: none;
  animation: tpaZaloRingV124 4s ease-out infinite;
}
body .tpa-floating-zalo-v124:hover { animation-play-state: paused; transform: translateY(-2px); }
body .tpa-floating-zalo-v124:focus-visible {
  outline: 3px solid rgba(0, 130, 245, .48);
  outline-offset: 4px;
}
/* The secondary arrow is deliberately pale and visually smaller than Zalo. */
body .tpa-back-to-top.ev-backtop-v019 {
  --tpa-backtop-clearance: var(--tpa-floating-clearance-v124);
  z-index: 99939;
  right: max(24px, calc(env(safe-area-inset-right) + 8px));
  bottom: calc(83px + env(safe-area-inset-bottom) + var(--tpa-floating-clearance-v124));
  width: 36px;
  height: 36px;
  background: rgba(246, 250, 253, .88);
  border-color: rgba(152, 174, 192, .37);
  color: #7996aa;
  box-shadow: 0 3px 12px rgba(21, 72, 110, .07);
  backdrop-filter: blur(6px);
}
body .tpa-back-to-top.ev-backtop-v019.is-visible { opacity: .68; }
body .tpa-back-to-top.ev-backtop-v019 .tpa-icon { width: 16px; height: 16px; stroke-width: 1.9; }
body .tpa-back-to-top.ev-backtop-v019:hover { opacity: .92; background: #fff; }
body.tpa-evx-lock .tpa-floating-zalo-v124,
body.tpa-evx-lock .tpa-back-to-top.ev-backtop-v019 {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (max-width: 800px) {
  body .tpa-floating-zalo-v124 {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom) + var(--tpa-floating-clearance-v124));
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }
  body .tpa-floating-zalo-v124 img { border-radius: 14px; }
  body .tpa-floating-zalo-v124::after { border-radius: 19px; }
  body .tpa-back-to-top.ev-backtop-v019 {
    right: max(20px, calc(env(safe-area-inset-right) + 8px));
    bottom: calc(76px + env(safe-area-inset-bottom) + var(--tpa-floating-clearance-v124));
    width: 36px;
    height: 36px;
  }
}
@keyframes tpaZaloNudgeV124 {
  0%, 8%, 24%, 100% { transform: scale(1); }
  12% { transform: scale(1.07); }
  18% { transform: scale(1); }
}
@keyframes tpaZaloRingV124 {
  0%, 8%, 25%, 100% { transform: scale(1); opacity: 0; }
  12% { opacity: .50; transform: scale(1.09); }
  23% { transform: scale(1.24); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body .tpa-floating-zalo-v124,
  body .tpa-floating-zalo-v124::after { animation: none; }
}
