/* PVS Mobile/Tablet Bottom Navigation v1.1.0
   - Chỉ dành cho mobile + tablet.
   - Thanh tự co theo số lượng icon, thêm nút sẽ tự dãn.
   - Nền trong suốt hơn, không ảnh hưởng desktop. */

.pvs-mobile-bottom-nav {
    display: none;
}

@media (max-width: 1199.98px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
    :root {
        --pvs-bottom-nav-height: 56px;
        --pvs-bottom-nav-bottom: max(10px, env(safe-area-inset-bottom));
    }

    body {
        padding-bottom: calc(var(--pvs-bottom-nav-height) + var(--pvs-bottom-nav-bottom) + 12px) !important;
    }

    .pvs-mobile-bottom-nav {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: var(--pvs-bottom-nav-bottom);
        z-index: 99990;
        display: block;
        width: auto;
        max-width: calc(100vw - 22px);
        transform: translateX(-50%);
        pointer-events: none;
        -webkit-tap-highlight-color: transparent;
    }

    .pvs-mobile-bottom-nav__inner {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: max-content;
        max-width: calc(100vw - 22px);
        gap: 6px;
        min-height: var(--pvs-bottom-nav-height);
        padding: 7px;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 999px;
        background: rgba(12, 16, 22, .58);
        box-shadow: 0 10px 28px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .10);
        backdrop-filter: blur(16px) saturate(135%);
        -webkit-backdrop-filter: blur(16px) saturate(135%);
        pointer-events: auto;
        overflow: hidden;
    }

    .pvs-mobile-bottom-nav__item {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        flex: 0 0 41px;
        width: 41px;
        height: 41px;
        min-width: 41px;
        border-radius: 999px;
        color: rgba(255, 255, 255, .82) !important;
        text-decoration: none !important;
        outline: none;
        transition: flex-basis .26s ease, width .26s ease, min-width .26s ease, background .24s ease, color .24s ease, box-shadow .24s ease, transform .2s ease;
        user-select: none;
        touch-action: manipulation;
    }

    .pvs-mobile-bottom-nav__item:active {
        transform: scale(.96);
    }

    .pvs-mobile-bottom-nav__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        font-size: 15px;
        line-height: 1;
        flex: 0 0 22px;
    }

    .pvs-mobile-bottom-nav__label {
        display: inline-block;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        transform: translateX(-4px);
        transition: max-width .26s ease, opacity .2s ease, transform .24s ease, margin-left .24s ease;
    }

    .pvs-mobile-bottom-nav__item.is-active,
    .pvs-mobile-bottom-nav__item.is-open {
        flex-basis: 106px;
        width: 106px;
        min-width: 106px;
        justify-content: flex-start;
        padding: 0 12px;
        gap: 7px;
        color: #fff !important;
        background: linear-gradient(135deg, rgba(21, 214, 95, .94), rgba(7, 155, 68, .94));
        box-shadow: 0 8px 20px rgba(18, 214, 95, .28), inset 0 1px 0 rgba(255,255,255,.22);
    }

    .pvs-mobile-bottom-nav__item.is-active .pvs-mobile-bottom-nav__label,
    .pvs-mobile-bottom-nav__item.is-open .pvs-mobile-bottom-nav__label {
        max-width: 74px;
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 575.98px) and (orientation: portrait) {
    .pvs-mobile-bottom-nav {
        max-width: calc(100vw - 18px);
    }

    .pvs-mobile-bottom-nav__inner {
        max-width: calc(100vw - 18px);
        gap: 5px;
        padding: 7px;
        background: rgba(12, 16, 22, .56);
    }

    .pvs-mobile-bottom-nav__item {
        flex-basis: 39px;
        width: 39px;
        min-width: 39px;
        height: 39px;
    }

    .pvs-mobile-bottom-nav__item.is-active,
    .pvs-mobile-bottom-nav__item.is-open {
        flex-basis: 102px;
        width: 102px;
        min-width: 102px;
        padding: 0 11px;
    }
}

@media (max-width: 991.98px) and (orientation: landscape) {
    :root {
        --pvs-bottom-nav-height: 48px;
    }

    .pvs-mobile-bottom-nav {
        bottom: max(8px, env(safe-area-inset-bottom));
        max-width: calc(100vw - 26px);
    }

    .pvs-mobile-bottom-nav__inner {
        max-width: calc(100vw - 26px);
        min-height: var(--pvs-bottom-nav-height);
        padding: 5px 7px;
        gap: 6px;
        background: rgba(12, 16, 22, .52);
    }

    .pvs-mobile-bottom-nav__item {
        flex-basis: 37px;
        width: 37px;
        min-width: 37px;
        height: 37px;
    }

    .pvs-mobile-bottom-nav__item.is-active,
    .pvs-mobile-bottom-nav__item.is-open {
        flex-basis: 98px;
        width: 98px;
        min-width: 98px;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px), (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1366px) {
    .pvs-mobile-bottom-nav {
        max-width: calc(100vw - 38px);
    }

    .pvs-mobile-bottom-nav__inner {
        max-width: calc(100vw - 38px);
        gap: 8px;
        padding: 8px;
        background: rgba(12, 16, 22, .54);
    }

    .pvs-mobile-bottom-nav__item {
        flex-basis: 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .pvs-mobile-bottom-nav__item.is-active,
    .pvs-mobile-bottom-nav__item.is-open {
        flex-basis: 116px;
        width: 116px;
        min-width: 116px;
    }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
    .pvs-mobile-bottom-nav {
        display: none !important;
    }
}