/**
 * Stylesheet Nút Liên Hệ Trên Máy Tính (PC / Desktop)
 */

/* Ẩn hoàn toàn trên di động và tablet nhỏ */
@media (max-width: 767px) {
    .wg-smart-contact-desktop {
        display: none !important;
    }
}

/* Khối Cột Dọc Trên PC */
@media (min-width: 768px) {
    .wg-smart-contact-desktop {
        position: fixed !important;
        right: 20px !important;
        bottom: 135px !important; /* Luôn nằm phía trên widget chat Tawk.to */
        z-index: 999999 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 14px !important;
        pointer-events: none !important; /* Chỉ nhận click trên từng nút */
    }

    .wg-smart-contact-desktop * {
        box-sizing: border-box !important;
    }

    .wg-pc-item {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        pointer-events: auto !important;
    }

    /* Định dạng chung cho nút tròn */
    .wg-pc-btn {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        text-decoration: none !important;
        cursor: pointer !important;
        border: none !important;
        padding: 0 !important;
        outline: none !important;
        transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease !important;
    }

    .wg-pc-btn:hover {
        transform: scale(1.1) !important;
    }

    .wg-btn-inner {
        width: 100% !important;
        height: 100% !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        z-index: 3 !important;
    }

    /* 1. Nút Hotline Điện Thoại (Hiệu ứng chuẩn Lê Văn Toản: zoom lan tỏa & tada lắc ống nghe) */
    .wg-btn-phone {
        background: #c31d1d !important;
        animation: zoom 1.5s infinite !important;
        -webkit-animation: zoom 1.5s infinite !important;
        box-shadow: 0 0 0 0 #c31d1d !important;
    }

    .wg-btn-phone .wg-btn-inner svg {
        fill: #ffffff !important;
        animation: tada 1.5s infinite !important;
        -webkit-animation: tada 1.5s infinite !important;
        transform-origin: center center !important;
    }

    @-webkit-keyframes zoom {
        0% {
            -webkit-transform: scale(.9);
            transform: scale(.9);
        }
        70% {
            -webkit-transform: scale(1);
            transform: scale(1);
            box-shadow: 0 0 0 15px transparent;
        }
        100% {
            -webkit-transform: scale(.9);
            transform: scale(.9);
            box-shadow: 0 0 0 0 transparent;
        }
    }

    @keyframes zoom {
        0% {
            transform: scale(.9);
        }
        70% {
            transform: scale(1);
            box-shadow: 0 0 0 15px transparent;
        }
        100% {
            transform: scale(.9);
            box-shadow: 0 0 0 0 transparent;
        }
    }

    @-webkit-keyframes tada {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        10%, 20% {
            -webkit-transform: scale(.9) rotate(-3deg);
            transform: scale(.9) rotate(-3deg);
        }
        30%, 50%, 70%, 90% {
            -webkit-transform: scale(1.1) rotate(3deg);
            transform: scale(1.1) rotate(3deg);
        }
        40%, 60%, 80% {
            -webkit-transform: scale(1.1) rotate(-3deg);
            transform: scale(1.1) rotate(-3deg);
        }
        100% {
            -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
        }
    }

    @keyframes tada {
        0% {
            transform: scale(1);
        }
        10%, 20% {
            transform: scale(.9) rotate(-3deg);
        }
        30%, 50%, 70%, 90% {
            transform: scale(1.1) rotate(3deg);
        }
        40%, 60%, 80% {
            transform: scale(1.1) rotate(-3deg);
        }
        100% {
            transform: scale(1) rotate(0);
        }
    }

    /* 2. Nút Zalo */
    .wg-btn-zalo {
        background: transparent !important;
        box-shadow: 0 4px 16px rgba(0, 104, 255, 0.4) !important;
    }

    .wg-icon-svg {
        width: 100% !important;
        height: 100% !important;
        max-width: 50px !important;
        max-height: 50px !important;
        object-fit: contain !important;
        display: block !important;
        border-radius: 50% !important;
    }

    /* 3. Nút Messenger */
    .wg-btn-messenger {
        background: linear-gradient(135deg, #00b2fe 0%, #006aff 50%, #a033ff 100%) !important;
        box-shadow: 0 4px 16px rgba(0, 106, 255, 0.4) !important;
    }

    /* 4. Nút Bản Đồ / Chỉ Đường */
    .wg-btn-map {
        background: linear-gradient(135deg, #ea4335, #c5221f) !important;
        box-shadow: 0 4px 16px rgba(234, 67, 53, 0.4) !important;
    }

    /* 5. Nút Lên Đầu Trang */
    .wg-btn-backtop {
        background: #475569 !important;
        box-shadow: 0 4px 14px rgba(71, 85, 105, 0.35) !important;
        opacity: 0.85;
        display: none; /* Sẽ hiện khi cuộn trang > 250px bằng JS */
    }

    .wg-btn-backtop:hover {
        opacity: 1;
        background: #1e293b !important;
    }

    /* Tooltip Bay Ra Từ Bên Trái Khi Hover */
    .wg-pc-tooltip {
        position: absolute !important;
        right: 62px !important;
        background: #ffffff !important;
        color: #1e293b !important;
        padding: 6px 14px !important;
        border-radius: 20px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateX(10px) !important;
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s !important;
        pointer-events: none !important;
        line-height: 1.3 !important;
        border: 1px solid #e2e8f0 !important;
    }

    .wg-pc-tooltip::after {
        content: "" !important;
        position: absolute !important;
        right: -6px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        border-width: 6px 0 6px 6px !important;
        border-style: solid !important;
        border-color: transparent transparent transparent #ffffff !important;
    }

    .wg-tooltip-phone {
        display: block !important;
        color: #ef4444 !important;
        font-weight: 700 !important;
        font-size: 14px !important;
    }

    .wg-pc-item:hover .wg-pc-tooltip {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }
}