.nlhn-floating-contact {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: var(--nlhn-gap, 18px);
    z-index: var(--nlhn-z, 99999);
    pointer-events: none;
}
.nlhn-floating-contact.nlhn-side-right { right: var(--nlhn-x, 24px); }
.nlhn-floating-contact.nlhn-side-left { left: var(--nlhn-x, 24px); }
.nlhn-floating-contact.nlhn-anchor-bottom { bottom: var(--nlhn-y, 120px); }
.nlhn-floating-contact.nlhn-anchor-top { top: var(--nlhn-y, 120px); }
.nlhn-item { position: relative; width: var(--nlhn-size, 58px); height: var(--nlhn-size, 58px); pointer-events: auto; }
.nlhn-link {
    --nlhn-bg: #333;
    --nlhn-icon: #fff;
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--nlhn-bg);
    color: var(--nlhn-icon);
    text-decoration: none !important;
    box-shadow: 0 5px 18px rgba(0,0,0,.18);
    isolation: isolate;
    transition: transform .2s ease, box-shadow .2s ease;
}
.nlhn-link:hover,
.nlhn-link:focus-visible {
    color: var(--nlhn-icon);
    transform: translateY(-2px);
    box-shadow: 0 7px 22px rgba(0,0,0,.24);
    outline: none;
}
.nlhn-link:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px color-mix(in srgb, var(--nlhn-bg) 65%, #000 35%); }
.nlhn-icon { width: 52%; height: 52%; display: grid; place-items: center; position: relative; z-index: 2; line-height: 1; }
.nlhn-icon svg, .nlhn-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nlhn-icon svg { overflow: visible; }
.nlhn-tooltip {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: rgba(24,24,27,.92);
    color: #fff;
    font: 500 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    padding: 7px 9px;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
    pointer-events: none;
    box-shadow: 0 3px 12px rgba(0,0,0,.14);
}
.nlhn-side-right .nlhn-tooltip { right: calc(100% + 12px); transform: translate(5px, -50%); }
.nlhn-side-left .nlhn-tooltip { left: calc(100% + 12px); transform: translate(-5px, -50%); }
.nlhn-has-tooltip .nlhn-link:hover .nlhn-tooltip,
.nlhn-has-tooltip .nlhn-link:focus-visible .nlhn-tooltip { opacity: 1; visibility: visible; transform: translate(0, -50%); }

/* Ring tự động + Ring chọn riêng ở từng nút. */
.nlhn-anim-ring .nlhn-link::before,
.nlhn-anim-ring .nlhn-link::after,
.nlhn-ring-target .nlhn-link::before,
.nlhn-ring-target .nlhn-link::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: var(--nlhn-bg);
    opacity: .42;
    z-index: -1;
    animation: nlhn-ring 1.8s ease-out infinite;
}
.nlhn-anim-ring .nlhn-link::after,
.nlhn-ring-target .nlhn-link::after { animation-delay: .6s; }
.nlhn-anim-pulse .nlhn-link { animation: nlhn-pulse 1.65s ease-in-out infinite; }
.nlhn-anim-shake .nlhn-link { animation: nlhn-shake 2.4s ease-in-out infinite; }
.nlhn-anim-bounce .nlhn-link { animation: nlhn-bounce 2s ease-in-out infinite; }
.nlhn-anim-swing .nlhn-link { transform-origin: 50% 10%; animation: nlhn-swing 2.3s ease-in-out infinite; }
.nlhn-anim-zoom .nlhn-link { animation: nlhn-zoom 1.8s ease-in-out infinite; }
.nlhn-anim-glow .nlhn-link { animation: nlhn-glow 1.7s ease-in-out infinite alternate; }

@keyframes nlhn-ring {
    0% { transform: scale(.92); opacity: .5; }
    70%,100% { transform: scale(1.42); opacity: 0; }
}
@keyframes nlhn-pulse {
    0%,100% { transform: scale(1); box-shadow: 0 5px 18px rgba(0,0,0,.18); }
    50% { transform: scale(1.08); box-shadow: 0 7px 24px color-mix(in srgb, var(--nlhn-bg) 42%, transparent); }
}
@keyframes nlhn-shake {
    0%,74%,100% { transform: rotate(0); }
    78% { transform: rotate(-11deg); }
    82% { transform: rotate(11deg); }
    86% { transform: rotate(-8deg); }
    90% { transform: rotate(8deg); }
    94% { transform: rotate(-4deg); }
    98% { transform: rotate(4deg); }
}
@keyframes nlhn-bounce {
    0%,70%,100% { transform: translateY(0); }
    80% { transform: translateY(-10px); }
    90% { transform: translateY(-4px); }
}
@keyframes nlhn-swing {
    0%,70%,100% { transform: rotate(0); }
    78% { transform: rotate(9deg); }
    86% { transform: rotate(-7deg); }
    94% { transform: rotate(4deg); }
}
@keyframes nlhn-zoom {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
@keyframes nlhn-glow {
    from { box-shadow: 0 5px 16px rgba(0,0,0,.18), 0 0 0 0 color-mix(in srgb, var(--nlhn-bg) 20%, transparent); }
    to { box-shadow: 0 5px 20px rgba(0,0,0,.2), 0 0 20px 7px color-mix(in srgb, var(--nlhn-bg) 42%, transparent); }
}

/* Thanh điều hướng cố định ở đáy màn hình mobile. Breakpoint được chèn động từ PHP. */
.nlhn-mobile-bottom {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--nlhn-bottom-height, 64px) + env(safe-area-inset-bottom, 0px));
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    margin: 0;
    align-items: stretch;
    background: var(--nlhn-bottom-bg, #fff);
    border-top: 1px solid var(--nlhn-bottom-border, #e5e7eb);
    box-shadow: 0 -4px 18px rgba(15, 23, 42, .08);
    z-index: var(--nlhn-bottom-z, 99998);
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.nlhn-mobile-bottom *,
.nlhn-mobile-bottom *::before,
.nlhn-mobile-bottom *::after { box-sizing: border-box; }
.nlhn-bottom-link {
    flex: 1 1 0;
    min-width: 0;
    height: var(--nlhn-bottom-height, 64px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px 5px;
    color: var(--nlhn-bottom-color, #52617a);
    text-decoration: none !important;
    background: transparent;
    border: 0;
    -webkit-tap-highlight-color: transparent;
    transition: color .16s ease, background-color .16s ease;
}
.nlhn-bottom-link:hover,
.nlhn-bottom-link:focus,
.nlhn-bottom-link:active {
    color: var(--nlhn-bottom-active, #0b1e3b);
    text-decoration: none !important;
    outline: none;
}
.nlhn-bottom-link:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--nlhn-bottom-active, #0b1e3b) 36%, transparent);
}
.nlhn-bottom-link.is-active {
    color: var(--nlhn-bottom-active, #0b1e3b);
    font-weight: 700;
}
.nlhn-bottom-icon {
    width: var(--nlhn-bottom-icon-size, 22px);
    height: var(--nlhn-bottom-icon-size, 22px);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    line-height: 1;
}
.nlhn-bottom-icon svg,
.nlhn-bottom-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.nlhn-bottom-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--nlhn-bottom-font-size, 12px);
    line-height: 1.15;
    text-align: center;
}

@media (max-width: 767px) {
    .nlhn-item { width: var(--nlhn-mobile-size, 52px); height: var(--nlhn-mobile-size, 52px); }
    .nlhn-hide-mobile { display: none !important; }
    .nlhn-tooltip { display: none; }
}
@media (min-width: 768px) {
    .nlhn-hide-desktop { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .nlhn-item .nlhn-link,
    .nlhn-item .nlhn-link::before,
    .nlhn-item .nlhn-link::after,
    .nlhn-bottom-link { animation: none !important; transition: none !important; }
}