/* ============================================================
 * Cụm nút liên hệ nhanh — Mỹ Phẩm Tóc Dũng Bình
 * Cột nút tròn nổi bên phải (thay cho thanh .cta-mobile-bar cũ)
 * ============================================================ */

/* Ẩn cụm nút cũ (thanh ngang dưới cùng lưu trong DB) */
.cta-mobile-bar { display: none !important; }

.mptdb-contact {
    position: fixed;
    right: 14px;
    bottom: 16px;
    z-index: 99998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.mptdb-btn {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    transition: transform .16s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.mptdb-btn:hover,
.mptdb-btn:focus-visible { transform: translateY(-2px) scale(1.06); }
.mptdb-btn:focus-visible { outline: 3px solid rgba(198, 161, 91, .6); outline-offset: 2px; }
.mptdb-btn svg { width: 26px; height: 26px; fill: #fff; display: block; }

/* Nhãn hiện khi hover (desktop) */
.mptdb-lbl {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: #241f1c;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    padding: 7px 12px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    font-family: inherit;
}
.mptdb-lbl::after {
    content: "";
    position: absolute;
    right: -4px; top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 9px; height: 9px;
    background: #241f1c;
}
.mptdb-btn:hover .mptdb-lbl { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Màu từng thương hiệu */
.mptdb-zalo { background: #0068ff; }
.mptdb-mess { background: #0078ff; background: linear-gradient(135deg, #00b2ff, #006aff); }
.mptdb-call { background: #12a150; }

/* Nút lên đầu trang: ẩn tới khi cuộn */
.mptdb-top {
    background: #fff;
    color: #1f7a6d;
    border: 1px solid #e7e0d9;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}
.mptdb-top svg { fill: #1f7a6d; width: 22px; height: 22px; }
.mptdb-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* Hiệu ứng chuông rung ở nút gọi */
.mptdb-call::before,
.mptdb-call::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #12a150;
    animation: mptdb-pulse 2s infinite ease-out;
}
.mptdb-call::after { animation-delay: 1s; }
@keyframes mptdb-pulse {
    0%   { transform: scale(1);   opacity: .65; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* Icon gọi lắc nhẹ để hút mắt */
.mptdb-call svg { animation: mptdb-shake 1.6s infinite; transform-origin: 50% 50%; }
@keyframes mptdb-shake {
    0%, 50%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(-14deg); }
    20%, 40% { transform: rotate(14deg); }
}

/* Mobile: nút nhỏ gọn hơn, nhãn ẩn (đã có aria-label) */
@media (max-width: 700px) {
    .mptdb-contact { right: 10px; bottom: 12px; gap: 10px; }
    .mptdb-btn { width: 46px; height: 46px; }
    .mptdb-btn svg { width: 24px; height: 24px; }
    .mptdb-lbl { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mptdb-call::before, .mptdb-call::after { animation: none; display: none; }
    .mptdb-call svg { animation: none; }
    .mptdb-btn { transition: none; }
}