/* Desktop: giữ nguyên */
@media (min-width: 993px){
  #mm-btn, #mm-oc-overlay { display:none !important; }
}

/* Mobile */
@media (max-width: 992px){
  /* Nút 3 gạch đơn giản */
  #mm-btn{
    position:fixed; top:12px; left:12px; z-index:10050;
    width:44px; height:44px; border-radius:10px;
    border:1px solid #e5e7eb; background:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 18px rgba(0,0,0,.10);
  }
  #mm-btn i, #mm-btn i::before, #mm-btn i::after{
    content:""; display:block; width:20px; height:2px; background:#111; position:relative;
  }
  #mm-btn i::before{ position:absolute; top:-6px } 
  #mm-btn i::after { position:absolute; top: 6px }
  body.mm-oc-open #mm-btn i{ background:transparent }
  body.mm-oc-open #mm-btn i::before{ transform:rotate(45deg); top:0 }
  body.mm-oc-open #mm-btn i::after { transform:rotate(-45deg); top:0 }

  /* ẨN TẤT CẢ menu gốc trong header trên mobile (bất kể class gì) */
  header nav, header .menu, header .navbar, header .site-nav, header .top-nav,
  .site-header nav, .site-header .menu, .site-header .navbar, nav.primary,
  .header__nav, .main-nav, .nav, .nav-menu {
    display:none !important;
  }

  /* Overlay mờ */
  #mm-oc-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.35);
    z-index:10040; opacity:0; pointer-events:none; transition:opacity .2s;
  }
  body.mm-oc-open #mm-oc-overlay{ opacity:1; pointer-events:auto }

  /* PANEL OFF-CANVAS (menu gốc đã được DI CHUYỂN vào đây bởi JS) */
  .mm-oc{
    position:fixed; top:0; left:0; bottom:0; z-index:10045;
    width:82vw; max-width:380px; background:#fff;
    border-right:1px solid #eef0f2; box-shadow:8px 0 28px rgba(0,0,0,.15);
    transform:translateX(-100%); transition:transform .25s ease;
    padding-top:10px; overflow:auto; display:block !important;
  }
  body.mm-oc-open .mm-oc{ transform:translateX(0) }

  /* Header nhỏ với nút đóng */
  .mm-oc .mm-oc-close{ position:sticky; top:0; background:#fff; z-index:1;
    display:flex; justify-content:flex-end; padding:10px 12px }
  .mm-oc .mm-oc-close button{
    width:36px; height:36px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer;
  }

  /* Danh sách dọc, dễ bấm */
  .mm-oc ul, .mm-oc ol{ list-style:none; margin:0; padding:6px 0 }
  .mm-oc li{ border-bottom:1px solid #f3f4f6 }
  .mm-oc li:last-child{ border-bottom:none }
  .mm-oc a{ display:block; padding:14px 16px; text-decoration:none; color:#111 }
  .mm-oc a:hover{ background:#f9fafb }
}

/* === OVERRIDE: button & panel on the RIGHT === */
@media (max-width: 992px){
  /* Nút 3 gạch ở góc phải */
  #mm-btn{
    left: auto !important;
    right: 12px !important;
  }
  /* Panel trượt từ PHẢI */
  .mm-oc{
    left: auto !important;
    right: 0 !important;
    border-right: none !important;
    border-left: 1px solid #eef0f2 !important;
    transform: translateX(100%) !important;
  }
  body.mm-oc-open .mm-oc{
    transform: translateX(0) !important;
  }
}