/* ==========================================
   HTCONS — NHÓM LIÊN HỆ NHANH
   Dùng chung cho Tools và Tài khoản
   ========================================== */

#htcPageTop {
    height: 0;
    scroll-margin-top: 120px;
}

.htc-quick-contact {
    position: fixed;
    z-index: 100;
    right: 18px;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

    .htc-quick-contact > a {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        flex: 0 0 auto;
        width: 48px;
        height: 48px;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 50%;
        background: #2874bc;
        color: #ffffff;
        text-decoration: none;
        line-height: 1;
        box-shadow: 0 5px 18px rgba(16, 54, 92, 0.2);
        transition: background 180ms ease, transform 180ms ease;
    }

        .htc-quick-contact > a:hover {
            background: #185895;
            color: #ffffff;
            transform: translateY(-2px);
        }

        .htc-quick-contact > a:focus-visible {
            outline: 3px solid #ef8a32;
            outline-offset: 4px;
        }

        .htc-quick-contact > a > svg {
            display: block;
            width: 22px;
            height: 22px;
            flex: 0 0 auto;
        }

        .htc-quick-contact > a.htc-quick-zalo {
            background: #0068ff;
            color: #ffffff;
            font-family: Arial, sans-serif;
            font-size: 12px;
            font-weight: 800;
        }

            .htc-quick-contact > a.htc-quick-zalo:hover {
                background: #0052cc;
            }

/* Điện thoại: nút nhỏ gọn */
@media (max-width: 760px) {
    .htc-quick-contact {
        right: 8px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
    }

        .htc-quick-contact > a {
            width: 38px;
            height: 38px;
        }

            .htc-quick-contact > a > svg {
                width: 18px;
                height: 18px;
            }

            .htc-quick-contact > a.htc-quick-zalo {
                font-size: 10px;
            }
}

@media (prefers-reduced-motion: reduce) {
    .htc-quick-contact > a {
        transition: none;
    }

        .htc-quick-contact > a:hover {
            transform: none;
        }
}