:root{
    --mobi-menu-width: 80vw;           /* 2/3 màn hình */
    --mobi-menu-bg: url('../images/bg-mobile.jpg') ;         /* ĐỔI ảnh nền ở đây */
}
.mobi-backdrop{
    position:fixed; inset:0; z-index:1000;
    background:rgba(0,0,0,.45);
    opacity:0; visibility:hidden; transition:opacity .28s ease;
}

/* Panel menu trượt */
.mobi-sidenav{
    position:fixed; inset:0 auto 0 0; z-index:1002;
    width:var(--mobi-menu-width); max-width:480px; height:100vh;
    transform:translateX(-100%); transition:transform .32s cubic-bezier(.2,.8,.2,1);
    background:

            var(--mobi-menu-bg) bottom/cover no-repeat;
    color:#fff;
    display:flex; flex-direction:column;
    overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}
.mobi-sidenav .header-mobi{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.15)
}
.mobi-close{
    background:transparent; border:none; color:#fff; font-size:26px; cursor:pointer
}

.mobi-navlist{list-style:none; margin:0; padding:8px 0}
.mobi-navlist > li > a,
.mobi-toggle{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; padding:14px 18px; gap:12px;
    color:#fff; text-decoration:none; font-size:16px;
    background:transparent; border:none; cursor:pointer
}
.mobi-navlist > li + li{border-top:1px solid rgba(255,255,255,.1)}
.mobi-caret{transition:transform .25s ease}

/* Submenu (accordion) */
.mobi-submenu{
    max-height:0; overflow:hidden; transition:max-height .28s ease;
    background:rgba(0,0,0,.25)
}
.mobi-submenu a{display:block; padding:12px 24px; color:#fff; text-decoration:none; font-size:15px}
.mobi-submenu a + a{border-top:1px dashed rgba(255,255,255,.15)}

/* Trạng thái mở */
.mobi-open .mobi-sidenav{transform:translateX(0)}
.mobi-open .mobi-backdrop{opacity:1; visibility:visible}