/* Mobile Contact Bar 1.2 - icon lấy từ WordPress Media Library */
.mcbb-bar { display:none; }

@media (max-width:991px) {
    .mcbb-bar {
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:2147483000;
        height:72px;
        display:flex;
        align-items:flex-end;
        justify-content:space-around;
        padding:0 4px env(safe-area-inset-bottom);
        margin:0;
        background:#fff;
        border-top:1px solid #e5e5e5;
        box-shadow:0 -4px 16px rgba(0,0,0,.12);
        box-sizing:border-box;
        font-family:Arial,Helvetica,sans-serif;
    }

    .mcbb-item {
        width:20%;
        height:70px;
        min-width:0;
        padding:4px 2px 5px;
        margin:0;
        border:0;
        background:transparent;
        color:#333!important;
        text-decoration:none!important;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        box-sizing:border-box;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }

    .mcbb-image-icon {
        width:40px;
        height:40px;
        flex:0 0 40px;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
        border-radius:50%;
        box-sizing:border-box;
    }

    .mcbb-image-icon img {
        display:block!important;
        width:100%!important;
        height:100%!important;
        max-width:none!important;
        max-height:none!important;
        object-fit:contain!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
    }

    .mcbb-label {
        font-size:12px;
        line-height:15px;
        font-weight:500;
        white-space:nowrap;
        color:#333;
    }

    /* Nút gọi ở giữa nổi lên giống mẫu */
    .mcbb-call {
        position:relative;
        width:20%;
        height:92px;
        margin:0;
        padding:0;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        text-decoration:none!important;
        box-sizing:border-box;
        z-index:5;
        -webkit-tap-highlight-color:transparent;
    }

    .mcbb-call-circle {
        width:68px;
        height:68px;
        flex:0 0 68px;
        margin-top:-2px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        background:#d80058;
        border:3px solid #fff;
        box-shadow:0 3px 12px rgba(0,0,0,.25);
        overflow:hidden;
        box-sizing:border-box;
    }

    .mcbb-call-circle img {
        display:block!important;
        width:100%!important;
        height:100%!important;
        max-width:none!important;
        max-height:none!important;
        object-fit:contain!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
    }

    .mcbb-call-label {
        position:relative;
        z-index:2;
        margin-top:-1px;
        padding:3px 10px;
        border-radius:12px;
        background:#008bc4;
        color:#fff;
        font-size:12px;
        font-weight:700;
        line-height:17px;
        white-space:nowrap;
    }

    .mcbb-item:active,
    .mcbb-call:active {
        transform:scale(.95);
    }

    .mcbb-fallback-menu {
        position:fixed;
        inset:0;
        z-index:2147482999;
        display:none;
        background:rgba(0,0,0,.42);
    }

    .mcbb-fallback-menu.is-open { display:block; }

    .mcbb-fallback-panel {
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        width:min(86vw,360px);
        background:#fff;
        overflow:auto;
        box-shadow:8px 0 24px rgba(0,0,0,.2);
        padding:18px 0 calc(90px + env(safe-area-inset-bottom));
        box-sizing:border-box;
    }

    .mcbb-fallback-head {
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:8px 18px 16px;
        border-bottom:1px solid #eee;
    }

    .mcbb-fallback-title {
        font-size:20px;
        font-weight:700;
        color:#0648c8;
    }

    .mcbb-fallback-close {
        border:0;
        background:#f2f2f2;
        width:38px;
        height:38px;
        border-radius:50%;
        font-size:24px;
        line-height:1;
        cursor:pointer;
    }

    .mcbb-fallback-panel a {
        display:block;
        padding:14px 20px;
        border-bottom:1px solid #eee;
        color:#222!important;
        text-decoration:none!important;
        font-size:15px;
        font-weight:600;
    }

    .mcbb-fallback-panel a:hover {
        background:#f5f9ff;
        color:#0648c8!important;
    }
}

@media (max-width:380px) {
    .mcbb-bar { height:68px; }
    .mcbb-item { height:66px; }
    .mcbb-image-icon { width:36px; height:36px; flex-basis:36px; }
    .mcbb-label,.mcbb-call-label { font-size:11px; }
    .mcbb-call { height:86px; }
    .mcbb-call-circle { width:60px; height:60px; flex-basis:60px; }
}