/* ============================================================================
   KCThanhHoa MOBILE MENU V4 - 19/08/2026
   Mục tiêu:
   - Một cơ chế mở/đóng duy nhất cho menu mobile.
   - Hiển thị đầy đủ menu đa cấp từ tblZone (cha -> con -> cháu...).
   - Bấm TÊN chuyên mục vẫn đi tới trang; bấm MŨI TÊN mới mở submenu.
   - Chỉ override <= 860px, không thay bố cục menu desktop.
   ============================================================================ */
@media (max-width:860px){
  #mainNavigation{position:relative!important;z-index:80!important;}
  #mainNavigation .main-menu-shell{
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;
    justify-content:flex-start!important;gap:8px!important;min-height:50px!important;
    padding:7px 8px!important;
  }
  #mainNavigation .mobile-menu-toggle{
    display:inline-flex!important;flex:0 0 44px!important;width:44px!important;height:40px!important;
    border:1px solid rgba(255,255,255,.34)!important;border-radius:11px!important;
    background:rgba(255,255,255,.14)!important;color:#fff!important;
    transition:background .18s ease,transform .18s ease!important;
  }
  #mainNavigation .mobile-menu-toggle[aria-expanded="true"]{background:rgba(255,255,255,.24)!important;}
  #mainNavigation .mobile-menu-toggle:active{transform:scale(.97)!important;}
  #mainNavigation .menu-home-link{flex:1 1 auto!important;min-width:0!important;height:40px!important;border-radius:11px!important;}

  /* Hai class được đồng bộ trong JS để tương thích source cũ, nhưng V4 dùng is-open làm chuẩn. */
  #mainNavigation #primaryMenu{
    display:none!important;flex:0 0 100%!important;width:100%!important;max-width:100%!important;
    overflow:visible!important;margin:0!important;padding:0!important;
  }
  #mainNavigation #primaryMenu.is-open,
  #mainNavigation.menu-open #primaryMenu{display:block!important;}

  #mainNavigation #primaryMenu>.menu-root{
    display:block!important;width:100%!important;min-width:0!important;height:auto!important;
    margin:0!important;padding:7px 0 3px!important;list-style:none!important;
  }
  #mainNavigation #primaryMenu li{
    position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) 42px!important;
    width:100%!important;min-width:0!important;margin:0 0 5px!important;
    border:1px solid rgba(255,255,255,.10)!important;border-radius:12px!important;
    background:rgba(255,255,255,.075)!important;overflow:hidden!important;
  }
  #mainNavigation #primaryMenu li:not(.has-children){grid-template-columns:1fr!important;}
  #mainNavigation #primaryMenu .menu-node-link{
    grid-column:1!important;display:flex!important;align-items:center!important;width:100%!important;
    min-height:44px!important;height:auto!important;margin:0!important;padding:9px 10px!important;
    color:#fff!important;text-decoration:none!important;white-space:normal!important;line-height:1.28!important;
    border-radius:0!important;background:transparent!important;
  }
  #mainNavigation #primaryMenu .menu-link-inner{display:flex!important;align-items:center!important;gap:9px!important;min-width:0!important;}
  #mainNavigation #primaryMenu .menu-icon-badge{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    flex:0 0 29px!important;width:29px!important;height:29px!important;border-radius:9px!important;
    background:rgba(255,255,255,.13)!important;font-size:13px!important;
  }
  #mainNavigation #primaryMenu .menu-label{font-size:14px!important;font-weight:650!important;letter-spacing:.01em!important;overflow-wrap:anywhere!important;}

  #mainNavigation #primaryMenu .menu-submenu-toggle{
    grid-column:2!important;grid-row:1!important;display:flex!important;align-items:center!important;justify-content:center!important;
    width:42px!important;min-width:42px!important;height:44px!important;padding:0!important;margin:0!important;
    border:0!important;border-left:1px solid rgba(255,255,255,.12)!important;border-radius:0!important;
    background:rgba(0,0,0,.08)!important;color:#fff!important;
  }
  #mainNavigation #primaryMenu .menu-chevron{
    width:9px!important;height:9px!important;border-right:2px solid currentColor!important;border-bottom:2px solid currentColor!important;
    transform:rotate(45deg) translate(-1px,-1px)!important;transition:transform .2s ease!important;
  }
  #mainNavigation #primaryMenu li.open>.menu-submenu-toggle .menu-chevron{
    transform:rotate(225deg) translate(-1px,-1px)!important;
  }

  /* Override dứt điểm rule legacy "li ul { display:block !important }" trong theme-customizer.css. */
  #mainNavigation #primaryMenu li>.menu-sub{
    grid-column:1 / -1!important;position:static!important;display:none!important;
    width:100%!important;min-width:0!important;max-width:none!important;
    margin:0!important;padding:5px 5px 5px 12px!important;border:0!important;border-radius:0!important;
    box-shadow:none!important;background:rgba(5,24,55,.25)!important;
  }
  #mainNavigation #primaryMenu li.open>.menu-sub{display:block!important;}

  /* Cấp càng sâu càng có đường dẫn thị giác/indent nhẹ, không đẩy chữ quá hẹp. */
  #mainNavigation #primaryMenu .menu-level-1{padding-left:10px!important;}
  #mainNavigation #primaryMenu .menu-level-2{padding-left:15px!important;}
  #mainNavigation #primaryMenu .menu-level-3,
  #mainNavigation #primaryMenu .menu-level-4,
  #mainNavigation #primaryMenu .menu-level-5{padding-left:18px!important;}
  #mainNavigation #primaryMenu .menu-sub li{
    background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.09)!important;
  }
  #mainNavigation #primaryMenu .menu-sub .menu-label{font-size:13.5px!important;font-weight:600!important;}

  #mainNavigation #primaryMenu a:focus-visible,
  #mainNavigation #primaryMenu button:focus-visible,
  #mainNavigation .mobile-menu-toggle:focus-visible{
    outline:2px solid #fff!important;outline-offset:-3px!important;
  }
}