.floating-contact {
    position: fixed;
    z-index: 880;
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(92px + env(safe-area-inset-bottom));
    display: grid;
    justify-items: end;
    font-family: inherit;
}

.floating-contact__toggle {
    display: inline-flex;
    min-width: 54px;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: 999px;
    color: #fff;
    background: #078f50;
    box-shadow: 0 10px 28px rgb(0 82 46 / 28%);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.floating-contact__toggle svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.floating-contact__toggle:focus-visible {
    outline: 3px solid rgb(15 158 216 / 38%);
    outline-offset: 3px;
}

.floating-contact__toggle[aria-expanded="true"] {
    background: #12653e;
}

.floating-contact__panel {
    width: min(284px, calc(100vw - 24px));
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid #cfe4d9;
    border-radius: 19px;
    background: rgb(255 255 255 / 98%);
    box-shadow: 0 18px 48px rgb(15 55 36 / 22%);
    backdrop-filter: blur(14px);
}

.floating-contact__panel[hidden] { display: none; }
.floating-contact__panel header { padding: 15px 16px 12px; border-bottom: 1px solid #e1ece6; background: #f3faf6; }
.floating-contact__panel header strong,
.floating-contact__panel header small { display: block; }
.floating-contact__panel header strong { color: #153e2c; font-size: 14px; }
.floating-contact__panel header small { margin-top: 3px; color: #64786e; font-size: 11px; }
.floating-contact__panel > a { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 11px; min-height: 58px; padding: 9px 14px; color: #1d4131; text-decoration: none; }
.floating-contact__panel > a + a { border-top: 1px solid #edf3f0; }
.floating-contact__panel > a:hover,
.floating-contact__panel > a:focus-visible { background: #f3faf6; outline: 0; }
.floating-contact__panel > a > span:last-child,
.floating-contact__panel > a strong,
.floating-contact__panel > a small { display: block; min-width: 0; }
.floating-contact__panel > a strong { font-size: 13px; }
.floating-contact__panel > a small { margin-top: 2px; overflow-wrap: anywhere; color: #687d73; font-size: 11px; }
.floating-contact__channel { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; font-size: 17px; font-weight: 900; }
.floating-contact__channel--phone { background: #079653; }
.floating-contact__channel--zalo { background: #087fea; }
.floating-contact__channel--facebook { background: #1877f2; font-family: Arial, sans-serif; font-size: 21px; }

/* The product choice bar occupies the space above mobile navigation. */
body:has(.product-choice-bar) .floating-contact { bottom: calc(164px + env(safe-area-inset-bottom)); }

@media (min-width: 900px) {
    .floating-contact {
        right: max(24px, calc((100vw - 1360px) / 2));
        bottom: max(24px, env(safe-area-inset-bottom));
    }
    body:has(.product-choice-bar) .floating-contact { bottom: max(24px, env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
    .floating-contact__toggle { width: 54px; padding: 0; }
    .floating-contact__toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    .floating-contact, .floating-contact * { scroll-behavior: auto; transition: none !important; }
}