/**
 * Stylesheet Menu Ngang Cố Định Sát Đáy Trên Điện Thoại (Mobile Bottom Action Bar)
 */

/* Ẩn hoàn toàn trên màn hình PC / Tablet lớn */
@media (min-width: 768px) {
    .wg-smart-contact-mobile {
        display: none !important;
    }
}

/* Hiển thị trên màn hình Điện thoại (< 768px) */
@media (max-width: 767px) {
    /* Đẩy nội dung trang lên một khoảng bằng chiều cao thanh bar để không bị che khuất footer */
    body {
        padding-bottom: 62px !important;
    }

    /* ĐẨY WIDGET CHAT TAWK.TO LÊN TRÊN THANH MENU NGANG */
    #tawk-default-container,
    div[id^="tawk-"],
    div[id*="tawk"],
    iframe[title*="chat" i],
    iframe[title*="tawk" i],
    .tawk-min-container,
    .tawk-custom-color {
        bottom: 68px !important;
    }

    /* Thanh Menu Cố Định Sát Đáy Màn Hình */
    .wg-smart-contact-mobile {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 58px !important;
        z-index: 999999 !important;
        background: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        padding: 4px 4px !important;
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.08) !important;
        border-top: 1px solid #f1f5f9 !important;
    }

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

    /* Từng Nút Bấm Trên Thanh Ngang */
    .wg-mobile-item {
        flex: 1 1 0 !important;
        max-width: 25% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        padding: 4px 2px !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: transform 0.15s ease !important;
    }

    .wg-mobile-item:active {
        transform: scale(0.92) !important;
    }

    /* Vòng tròn Icon */
    .wg-mobile-icon-wrap {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 3px !important;
        transition: box-shadow 0.2s ease !important;
    }

    /* Chữ hiển thị thao tác */
    .wg-mobile-label {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #334155 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        letter-spacing: -0.2px !important;
    }

    /* 1. Nút Gọi Điện */
    .wg-icon-phone-wrap {
        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-mobile-phone .wg-mobile-icon-wrap svg {
        animation: tada 1.5s infinite !important;
        -webkit-animation: tada 1.5s infinite !important;
        transform-origin: center center !important;
    }

    .wg-mobile-phone .wg-mobile-label {
        color: #c31d1d !important;
        font-weight: 700 !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-icon-zalo-wrap {
        background: transparent !important;
        box-shadow: 0 2px 8px rgba(0, 104, 255, 0.35) !important;
    }

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

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

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