/* =========================================
   1. CẤU TRÚC GỐC (MOBILE FIRST)
   ========================================= */
.mobile-wrapper {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    /* Xóa bỏ hoàn toàn max-width và border để App tràn viền tự nhiên */
    background: var(--bg-app);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.app-header {
    background: var(--bg-card, #ffffff);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--card-border, #e2e8f0);
    z-index: 50;
    flex-shrink: 0;
}

.app-header h1 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary-color);
}

/* Khu vực nội dung cuộn */
.content-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    /* Đẩy nội dung lên để không bị khuất sau thanh điều hướng Mobile */
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

/* Menu điều hướng dưới đáy (Mobile) */
.bottom-nav {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70px;
    background: var(--bg-card, #ffffff);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid var(--card-border, #e2e8f0);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.03);
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    width: 20%;
    height: 100%;
}

.nav-item i {
    font-size: 1.3rem;
    transition: transform 0.2s;
}

.nav-item span {
    font-size: 0.75rem;
    font-weight: 700;
}

.nav-item.active {
    color: var(--primary-color);
}

/* =========================================
   2. RESPONSIVE: TABLET & DESKTOP (PC)
   ========================================= */
@media (min-width: 768px) {
    .mobile-wrapper {
        /* Chuyển sang mô hình Grid trải Full màn hình */
        display: grid;
        grid-template-columns: 220px 1fr; /* 220px cho Menu bên trái, còn lại là Nội dung */
        grid-template-rows: 70px 1fr; /* 70px cho Header, còn lại là Nội dung */
        grid-template-areas:
            "nav header"
            "nav main";
    }

    .app-header {
        grid-area: header;
        padding: 0 40px; /* Thêm không gian cho thoáng */
    }

    .app-header h1 {
        font-size: 1.6rem; /* Chữ to hơn trên PC */
    }

    .content-area {
        grid-area: main;
        padding: 40px;
        padding-bottom: 40px; /* PC không cần chừa chỗ cho Bottom Nav nữa */
    }

    /* CỰC KỲ QUAN TRỌNG: Giới hạn chiều rộng thẻ con bên trong để nó không bị banh chành trên màn hình to */
    .content-area > * {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    /* BIẾN MENU ĐÁY THÀNH SIDEBAR BÊN TRÁI ĐỨNG IM */
    .bottom-nav {
        grid-area: nav;
        position: relative;
        width: 100%;
        height: 100%;
        flex-direction: column; /* Xếp dọc xuống */
        justify-content: flex-start;
        padding-top: 30px;
        gap: 10px;
        border-top: none;
        border-right: 1px solid var(--card-border, #e2e8f0); /* Thêm gạch dọc phân cách */
    }

    /* Tinh chỉnh lại nút bấm Menu cho PC */
    .nav-item {
        width: 100%;
        height: 50px;
        flex-direction: row; /* Icon và chữ nằm ngang */
        justify-content: flex-start;
        padding-left: 30px;
        gap: 15px;
    }

    .nav-item i {
        font-size: 1.2rem;
    }

    .nav-item span {
        font-size: 0.95rem;
    }

    .nav-item.active {
        background: rgba(14, 165, 233, 0.1);
        border-right: 4px solid var(--primary-color);
        color: var(--primary-color);
    }

    .nav-item:hover:not(.active) {
        background: var(--bg-app);
        color: var(--primary-color);
    }
}