#submainleft.active {
    display: block;
    position: fixed;
    z-index: var(--overlay-z);
    inset: 0;
    height: 100vh;
    width: 100vw;
    overflow: auto;
    background: var(--overlay-bg);
    padding: var(--s-4);
    padding-top: calc(var(--s-4) + var(--header-h));
}
/* === FrameLayout_scale_0.2.css === */
/* A) Viewport hẹp hơn shellMax -> khung chạy full-width + tô màu debug */
@media (max-width: 100rem) {
    .page-shell {
        width: 100%;
        min-width:none;
    }
}

@container (inline-size < 65rem) {
    .page-shell {
        flex-direction: column;
        align-items: stretch;
        min-width: unset;
        margin:0;
    }

    #submainright {
        width: 100%;
        order: 2;
        align-self: stretch;
    }

    .header-toggle-left {
        display: inline-flex;
    }

    .card {
        border-radius: unset;
        border-inline: unset;
        margin: 0;
    }

    .panel {
        border-radius: unset;
        border-inline: unset;
        margin: 0;
    }

    #submainleft {
        display: none;
    }
}