/* kfbeta16 — footer: thanh điều hướng dưới + toast */

/* =====================================================================
   MOBILE / DOCK NAV
   ===================================================================== */
body { padding-bottom: calc(var(--mnav-h) + env(safe-area-inset-bottom)); }

#mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    display: flex;
    align-items: stretch;
    height: calc(var(--mnav-h) + env(safe-area-inset-bottom));
    padding: 0 6px env(safe-area-inset-bottom);
    background: var(--bg2);
    border-top: 1px solid var(--border);
}

.mnav-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 6px 2px;
    border-radius: var(--radius);
    color: var(--text3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--tr), background-color var(--tr);
    -webkit-tap-highlight-color: transparent;
}
.mnav-item:hover { color: var(--text1); background: var(--bg3); }
.mnav-item:active { background: var(--bg4); }

.mnav-item.active { color: var(--accent); }
.mnav-item.active::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 18px;
    height: 3px;
    margin-left: -9px;
    border-radius: 0 0 3px 3px;
    background: var(--accent);
}

.mnav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: transform var(--tr);
}
.mnav-icon svg { width: 20px; height: 20px; stroke: currentColor; }
.mnav-item .mnav-icon svg .icon-fill { fill: none; transition: fill var(--tr); }
.mnav-item:hover .mnav-icon { transform: translateY(-1px); }
.mnav-item.active .mnav-icon svg .icon-fill { fill: var(--accent-soft); }

/* Màn hình lớn: biến thành dock nổi ở giữa */
@media (min-width: 768px) {
    body { padding-bottom: calc(var(--mnav-h) + 28px); }

    #mobile-nav {
        left: 50%;
        right: auto;
        bottom: 14px;
        width: 420px;
        height: var(--mnav-h);
        padding: 0 6px;
        transform: translateX(-50%);
        border: 1px solid var(--border2);
        border-radius: var(--radius-lg);
    }
    .mnav-item.active::after { top: -7px; }
}

/* Khối đệm cuối trang (foot.html) */
#body > article[style] { height: 8px !important; }

/* =====================================================================
   TOAST
   ===================================================================== */
.toast-container {
    position: fixed;
    left: 50%;
    bottom: calc(var(--mnav-h) + 24px + env(safe-area-inset-bottom));
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 220px;
    max-width: calc(100% - 32px);
    padding: 12px 20px;
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-left: 4px solid var(--accent2);
    border-radius: var(--radius);
    color: var(--text1);
    font-size: var(--fs);
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 20px);
    transition: opacity .25s ease, transform .25s ease;
}
.toast-container.show {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.toast-icon { font-size: 1.15em; line-height: 1; }

.toast-success { border-left-color: var(--green); }
.toast-error   { border-left-color: var(--red); }
.toast-info    { border-left-color: var(--accent2); }
.toast-success .toast-icon { color: var(--green); }
.toast-error .toast-icon   { color: var(--red); }
.toast-info .toast-icon    { color: var(--accent2); }