/* Standalone floating CTA component. Uses existing shared font variables. */
html body .mv-floating-contact {
  position: fixed;
  right: 24px;
  bottom: 20%;
  z-index: 1040;
  font-family: var(--mv-font-sans);
  font-size: 12px;
  line-height: 1.5;
}
html body .mv-contact-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
html body .mv-floating-contact .mv-contact-action {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  isolation: isolate;
  min-width: 48px;
  min-height: 48px;
  width: auto;
  height: 48px;
  margin: 0;
  padding: 12px;
  border: 1px solid #ffffff40;
  border-radius: 30px;
  box-shadow:
    0 6px 18px #0f172a30,
    inset 0 1px 0 #ffffff35;
  color: #fff;
  font-family: var(--mv-font-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
}
html body .mv-contact-action :is(svg, b) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: inherit;
}
html body .mv-contact-action .mv-contact-zalo-logo {
  display: block;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  max-width: none;
  object-fit: contain;
  border-radius: 9px;
  background: #fff;
}
html body .mv-contact-action > :is(svg, img, b, span) {
  position: relative;
  z-index: 1;
}
html body .mv-contact-action:before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill='white' d='m34 3 1.4 4.6L40 9l-4.6 1.4L34 15l-1.4-4.6L28 9l4.6-1.4ZM8 28l.9 3.1L12 32l-3.1.9L8 36l-.9-3.1L4 32l3.1-.9Z'/%3E%3C/svg%3E")
    right center/40px 40px no-repeat;
  opacity: 0;
  animation: mv-contact-sparkle 3.8s ease-in-out infinite;
}
html body .mv-contact-action:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
      115deg,
      transparent 38%,
      #ffffff08 42%,
      #ffffff75 49%,
      #ffffff08 56%,
      transparent 62%
    )
    150% 0/300% 100%;
  animation: mv-contact-shine 5.5s ease-in-out infinite;
}
html body .mv-contact-action:nth-child(2):before,
html body .mv-contact-action:nth-child(2):after {
  animation-delay: 0.6s;
}
html body .mv-contact-action:nth-child(3):before,
html body .mv-contact-action:nth-child(3):after {
  animation-delay: 1.2s;
}
html body .mv-contact-action:nth-child(4):before,
html body .mv-contact-action:nth-child(4):after {
  animation-delay: 1.8s;
}
@keyframes mv-contact-sparkle {
  0%,
  45%,
  100% {
    opacity: 0;
    transform: scale(0.85);
  }
  60%,
  75% {
    opacity: 0.85;
    transform: scale(1);
  }
  90% {
    opacity: 0;
    transform: scale(1.08);
  }
}
@keyframes mv-contact-shine {
  0%,
  60% {
    background-position: 150% 0;
  }
  88%,
  100% {
    background-position: -50% 0;
  }
}
html body .mv-contact-action > span {
  display: block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition:
    max-width 0.2s,
    opacity 0.2s;
}
html body .mv-contact-action:is(:hover, :focus-visible) > span,
html body .mv-contact-action[aria-expanded="true"] > span {
  max-width: 120px;
  margin-left: 9px;
  opacity: 1;
}
html body .mv-contact-action.mv-contact-call {
  background: linear-gradient(140deg, #f43f5e, #dc2626 65%, #b91c1c);
}
html body .mv-contact-action.mv-contact-zalo {
  padding: 9px;
  background: linear-gradient(140deg, #168bff, #0068ff 75%);
}
html body .mv-contact-action.mv-contact-messenger {
  background: linear-gradient(120deg, #2563eb, #4f46e5);
}
html body .mv-contact-action.mv-contact-showrooms {
  background: linear-gradient(140deg, #334155, #0f172a);
}
html body .mv-contact-action:hover {
  filter: brightness(1.08);
}
html body .mv-floating-contact :is(a, button):focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 4px;
}
html body .mv-floating-contact .mv-contact-panel {
  box-sizing: border-box;
  position: absolute;
  right: calc(100% + 12px);
  bottom: 0;
  width: 340px;
  max-width: calc(100vw - 100px);
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
  color: #111827;
  box-shadow: 0 15px 50px #0f172a33;
}
html body .mv-floating-contact .mv-contact-panel[hidden] {
  display: none !important;
}
html body .mv-contact-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}
html body .mv-floating-contact .mv-contact-panel-head h3 {
  margin: 0;
  padding: 0;
  color: #111827;
  font-family: var(--mv-font-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  text-transform: none;
  letter-spacing: 0;
}
html body .mv-floating-contact button.mv-contact-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  min-height: 30px;
  margin: 0;
  padding: 5px;
  border: 0;
  border-radius: 8px;
  background: #f1f5f9;
  color: #334155;
  line-height: 20px;
  cursor: pointer;
}
html body .mv-contact-showroom-list {
  display: grid;
  gap: 10px;
  max-height: min(440px, calc(100vh - 130px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
html body .mv-contact-showroom {
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}
html body .mv-floating-contact .mv-contact-showroom h4 {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: 0 0 7px;
  padding: 0;
  color: #111827;
  font-family: var(--mv-font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-transform: none;
  letter-spacing: 0;
}
html body .mv-contact-showroom h4 svg {
  flex: 0 0 15px;
  width: 15px;
  height: 20px;
  color: #dc2626;
}
html body .mv-floating-contact .mv-contact-showroom p,
html body .mv-contact-empty {
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--mv-font-sans);
  font-size: 12px;
  line-height: 19px;
  color: #111827;
  overflow-wrap: anywhere;
}
html body .mv-floating-contact .mv-contact-showroom a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #dc2626;
  font-family: var(--mv-font-price);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
html body .mv-contact-showroom a svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 549px) {
  html body .mv-floating-contact {
    right: 12px;
    bottom: 20%;
  }
  html body .mv-contact-actions {
    gap: 8px;
  }
  html body .mv-floating-contact .mv-contact-panel {
    position: fixed;
    right: 12px;
    bottom: calc(20% + 60px);
    width: 340px;
    max-width: calc(100vw - 24px);
  }
  html body .mv-contact-showroom-list {
    max-height: min(440px, calc(80vh - 175px));
    max-height: min(440px, calc(80dvh - 175px));
    min-height: 0;
  }
}
@media (hover: none) {
  html body .mv-contact-action > span {
    max-width: 120px;
    margin-left: 9px;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .mv-contact-action > span {
    transition: none;
  }
  html body .mv-contact-action:before,
  html body .mv-contact-action:after {
    animation: none;
    opacity: 0;
  }
}