/* ==== MOBILE MENU (Fullscreen Navigation + Accordion) — t294-m2 ==== */
/* Chỉ hiện ở breakpoint mobile; desktop giữ nguyên header hiện tại */
.mnav-overlay,.mnav{ display:none; }
@media (max-width:1299px){
  /* Khoá tràn ngang toàn site → nút menu góc phải KHÔNG bị vuốt ra khỏi màn hình */
  html, body{ overflow-x:hidden; max-width:100vw; }

  .mnav-overlay{
    display:block; position:fixed; inset:0; z-index:400;
    background:rgba(20,23,51,.35);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .mnav-overlay.is-open{ opacity:1; visibility:visible; pointer-events:auto; }

  .mnav{
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; bottom:0; z-index:401;
    width:min(92vw,380px); background:#ffffff;
    box-shadow:24px 0 60px -10px rgba(20,23,51,.18);
    transform:translateX(-100%);
    transition:transform .38s cubic-bezier(.32,0,.15,1);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    color:#141733;
  }
  .mnav.is-open{ transform:translateX(0); }

  .mnav-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px 14px;
    border-bottom:1px solid rgba(20,23,51,.06);
    flex:none; position:sticky; top:0; background:#fff; z-index:2;
  }
  .mnav-logo{ height:32px; display:block; }
  .mnav-close{
    width:44px; height:44px; border-radius:50%;
    border:1px solid rgba(20,23,51,.10); background:transparent;
    display:grid; place-items:center; cursor:pointer; color:#141733;
    transition:background .2s, transform .18s;
    -webkit-tap-highlight-color:transparent;
  }
  .mnav-close:hover{ background:rgba(20,23,51,.05); }
  .mnav-close:active{ transform:scale(.94); }
  .mnav-close svg{ width:16px; height:16px; }

  .mnav-list{ display:flex; flex-direction:column; padding:6px 0 8px; flex:1; }

  .mnav-item{ border-bottom:1px solid rgba(20,23,51,.05); }
  .mnav-item:last-child{ border-bottom:none; }

  .mnav-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:0 22px;
  }
  .mnav-link{
    flex:1; display:flex; align-items:center; gap:14px;
    padding:15px 0; color:#141733; font-weight:600; font-size:16.5px;
    text-decoration:none; letter-spacing:-.005em;
    transition:color .2s;
    -webkit-tap-highlight-color:transparent;
  }
  .mnav-tx{ flex:1; min-width:0; }

  /* Icon menu -> badge bo tròn nền xanh nhạt. Bọc .mnav-ic cho bản WordPress
     (icon admin không có class), còn <svg class="mi"> là bản export tĩnh. */
  .mnav-link .mnav-ic{
    width:38px; height:38px; flex:none; border-radius:11px;
    display:grid; place-items:center;
    background:rgba(19,126,232,.09); color:#137EE8;
    transition:background .22s var(--e,ease), color .22s var(--e,ease);
  }
  .mnav-link .mnav-ic svg{ width:21px; height:21px; }
  .mnav-link .mi{
    width:38px; height:38px; flex:none; padding:8.5px; box-sizing:border-box;
    border-radius:11px; background:rgba(19,126,232,.09); color:#137EE8;
    transition:background .22s ease, color .22s ease;
  }

  .mnav-link:hover,
  .mnav-item.is-open  > .mnav-row > .mnav-link,
  .mnav-item.is-current > .mnav-row > .mnav-link{ color:#137EE8; }

  /* Badge tô đậm khi hàng đang mở / là trang hiện tại / khi chạm */
  .mnav-item.is-open  > .mnav-row > .mnav-link .mnav-ic,
  .mnav-item.is-current > .mnav-row > .mnav-link .mnav-ic,
  .mnav-item.is-open  > .mnav-row > .mnav-link .mi,
  .mnav-item.is-current > .mnav-row > .mnav-link .mi,
  .mnav-link:active .mnav-ic,
  .mnav-link:active .mi{ background:#137EE8; color:#fff; }

  /* Dải nền nhẹ đánh dấu trang hiện tại */
  .mnav-item.is-current{ background:linear-gradient(90deg,rgba(19,126,232,.07),rgba(19,126,232,0)); }

  .mnav-toggle{
    width:44px; height:44px; border-radius:50%;
    border:1px solid rgba(20,23,51,.08); background:transparent;
    display:grid; place-items:center; cursor:pointer; color:#6b7280;
    flex:none; transition:background .2s, color .2s, border-color .2s;
    -webkit-tap-highlight-color:transparent; margin-left:12px;
  }
  .mnav-toggle:hover{ background:rgba(20,23,51,.05); color:#141733; }
  .mnav-toggle svg{ width:12px; height:12px; transition:transform .3s ease; }
  .mnav-item.is-open .mnav-toggle{ color:#137EE8; border-color:rgba(19,126,232,.25); background:rgba(19,126,232,.06); }
  .mnav-item.is-open .mnav-toggle svg{ transform:rotate(180deg); }

  .mnav-sub{
    max-height:0; overflow:hidden;
    transition:max-height .42s cubic-bezier(.4,0,.2,1);
    border-left:2px solid #eef1f6;
    margin:0 22px 0 60px;
  }
  .mnav-item.is-open .mnav-sub{ max-height:720px; }
  .mnav-sub-inner{ padding:2px 0 14px; display:flex; flex-direction:column; }
  .mnav-sub a{
    padding:12px 14px; color:#4b5470; font-size:14.5px; font-weight:500;
    text-decoration:none; border-radius:8px; margin:1px 0;
    transition:background .18s, color .18s;
    -webkit-tap-highlight-color:transparent;
  }
  .mnav-sub a:hover, .mnav-sub a:active{
    background:rgba(19,126,232,.07); color:#137EE8;
  }

  .mnav-cta{
    margin:14px 22px 26px; display:flex; align-items:center; justify-content:center; gap:10px;
    background:#137EE8; color:#fff; font-weight:700; font-size:15px;
    border-radius:14px; padding:16px 22px; text-decoration:none;
    box-shadow:0 10px 26px -10px rgba(19,126,232,.5);
    transition:background .2s, transform .15s, box-shadow .2s;
    -webkit-tap-highlight-color:transparent;
  }
  .mnav-cta:hover{ background:#0f6bcc; }
  .mnav-cta:active{ transform:scale(.98); }
  .mnav-cta svg{ width:20px; height:20px; }

  body.mnav-open{ overflow:hidden; }

  /* Ẩn cấu trúc drawer/mega mobile cũ để KHÔNG lộn xộn với menu mới */
  .m-drawer, .m-drawer-overlay{ display:none !important; }
  .menu.mobile-open{ display:none !important; }
}