/*
 * [Summary]: Thanh menu dưới trên mobile (#tvGlobalMobileBottomNav, base.html): nền trắng có khoét lõm hình cung dưới
 *   mục đang chọn, vòng tròn xanh TransViet nổi lên chứa icon của mục đó; đổi mục thì chỗ lõm + vòng tròn trượt sang
 *   (nảy nhẹ). 5 mục: Gọi điện · Nhắn tin · Trang chủ · Danh mục · Tìm kiếm.
 * [Notes]: Đơn vị px (trang co rem trên điện thoại). Vị trí mục chọn = biến --tv-bn-i (0..4) đặt trên #tvGlobalMobileBottomNav;
 *   không có mục chọn (trang khác) → class tv-bn-none ẩn chỗ lõm + vòng tròn. Chỉ hiện dưới 992px (d-lg-none).
 */
#tvGlobalMobileBottomNav {
    --tv-bn-i: 2;
    --tv-bn-h: 64px;
    --tv-bn-circle: 50px;
    --tv-bn-ease: cubic-bezier(0.22, 1.12, 0.36, 1);
    --tv-bn-dur: 460ms;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    height: calc(var(--tv-bn-h) + 22px + env(safe-area-inset-bottom));
    pointer-events: none;
}
/* Thanh nền: SVG trắng với mask khoét lõm; bóng đổ đi theo cả chỗ lõm (drop-shadow trên hình đã khoét). */
#tvGlobalMobileBottomNav .tv-bn-bar {
    position: absolute; left: 0; right: 0; bottom: 0;
    width: 100%; height: calc(var(--tv-bn-h) + env(safe-area-inset-bottom));
    filter: drop-shadow(0 -4px 10px rgba(0, 0, 0, 0.10));
}
#tvGlobalMobileBottomNav .tv-bn-notch {
    transform: translateX(calc((var(--tv-bn-i) + 0.5) * 20%));
    transform-box: view-box;
    transition: transform var(--tv-bn-dur) var(--tv-bn-ease);
}
/* Vòng tròn xanh nổi trên chỗ lõm. */
#tvGlobalMobileBottomNav .tv-bn-circle {
    position: absolute; bottom: calc(var(--tv-bn-h) - var(--tv-bn-circle) / 2 - 4px);
    left: calc((var(--tv-bn-i) + 0.5) * 20% - var(--tv-bn-circle) / 2);
    width: var(--tv-bn-circle); height: var(--tv-bn-circle); border-radius: 50%;
    background: #005792; box-shadow: 0 6px 14px rgba(0, 87, 146, 0.35);
    transition: left var(--tv-bn-dur) var(--tv-bn-ease), opacity 200ms ease;
}
#tvGlobalMobileBottomNav.tv-bn-none .tv-bn-notch { transform: translateX(-30%); }
#tvGlobalMobileBottomNav.tv-bn-none .tv-bn-circle { opacity: 0; }

/* 5 mục chia đều. */
#tvGlobalMobileBottomNav .tv-bn-items {
    position: absolute; left: 0; right: 0; bottom: env(safe-area-inset-bottom);
    height: var(--tv-bn-h); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
}
#tvGlobalMobileBottomNav .tv-bn-item {
    position: relative; pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; text-decoration: none; color: #5b7083; background: none; border: 0; padding: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#tvGlobalMobileBottomNav .tv-bn-icon {
    display: flex; width: 24px; height: 24px;
    transition: transform var(--tv-bn-dur) var(--tv-bn-ease), color var(--tv-bn-dur) var(--tv-bn-ease);
}
#tvGlobalMobileBottomNav .tv-bn-icon svg { width: 24px; height: 24px; }
#tvGlobalMobileBottomNav .tv-bn-label {
    font-size: 11px; line-height: 13px; font-weight: 500; white-space: nowrap;
    transition: opacity 160ms ease, transform 160ms ease;
}
/* Mục đang chọn: icon trắng bay lên vào vòng tròn, ẩn chữ. */
#tvGlobalMobileBottomNav .tv-bn-item.is-active .tv-bn-icon { transform: translateY(-21px); color: #fff; }
#tvGlobalMobileBottomNav .tv-bn-item.is-active .tv-bn-label { opacity: 0; transform: translateY(4px) scale(0.94); }
#tvGlobalMobileBottomNav .tv-bn-item:focus-visible { outline: 2px solid rgba(0, 87, 146, 0.5); outline-offset: -4px; border-radius: 10px; }
#tvGlobalMobileBottomNav .tv-bn-item:active .tv-bn-icon { transform: scale(0.9); }
#tvGlobalMobileBottomNav .tv-bn-item.is-active:active .tv-bn-icon { transform: translateY(-21px) scale(0.92); }

@media (prefers-reduced-motion: reduce) {
    #tvGlobalMobileBottomNav * { transition: none !important; }
}
@media (min-width: 992px) { #tvGlobalMobileBottomNav { display: none !important; } }