@media screen and (max-width: 884px){

  /* =========================
     GLOBAL (no overflow / no weird zoom)
  ========================= */
  html,body{ overflow-x:hidden; }
  body{ padding:0 !important; min-width:0 !important; }
  .center{ width:100% !important; max-width:100% !important; margin:0 auto !important; padding:0 12px !important; }

  img, iframe, table{ max-width:100% !important; height:auto !important; }

  /* =========================
     HEADER (clean + logo visible)
  ========================= */
  header{
    background:#fff !important;
    margin:0 !important;
    position:relative !important;
  }

  /* top bar */
  header .topnav{
    background:#0F5C28 !important; /* ERI green deep */
  }
  header .topnav .center{
    padding:0px 0px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  /* language (no absolute mess) */
  .lang{
    position:static !important;
    height:auto !important;
    line-height:1 !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }
  .lang span{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    padding:6px 10px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.14) !important;
    color:#fff !important;
    cursor:pointer !important;
  }
  .lang span.active{
    background:rgba(255,255,255,.22) !important;
    font-weight:800 !important;
  }
  .lang img{ width:18px !important; height:auto !important; display:block !important; }

  /* logo row */
  header > .center{
    padding:10px 12px !important;
    background:#fff !important;
    height:auto !important;
  }
  .logo{
    display:block !important;
    position:relative !important;
    top:auto !important;
    margin:0 auto !important;            /* төвд */
    height:46px !important;
    width:190px !important;
    background:url("../p/mlogo") center center no-repeat !important;
    background-size:contain !important;
  }

  /* =========================
     MENU TOGGLE (☰ icon ONLY)
     Fix: "ЦЭС" text showing
  ========================= */
  header .menu-holder{ background:#fff !important; }
  header .menu{ position:relative !important; }
  header .menu .center{
    position:relative !important;
    padding:0 12px 10px !important;
    height:auto !important;
  }

  /* ✅ the button in your header: <b class="mnav-toggle"> */
  header .menu .mnav-toggle{
    display:block !important;
    position:absolute !important;
    left:12px !important;
    top:10px !important;
    width:44px !important;
    height:44px !important;
    z-index:10001 !important;

    border-radius:12px !important;
    background-color:rgba(15,92,40,.10) !important;
    background-image:url("../p/mbg") !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:22px 22px !important;

    cursor:pointer !important;

    /* ✅ kill any text */
    font-size:0 !important;
    line-height:0 !important;
    color:transparent !important;
    text-indent:-9999px !important;
    overflow:hidden !important;
  }
  header .menu .mnav-toggle:before,
  header .menu .mnav-toggle:after{
    content:none !important;
    display:none !important;
  }

  /* =========================
     SLIDE MENU PANEL
  ========================= */
  header .menu>ul{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    width:min(340px, 86vw) !important;
    height:100vh !important;

    padding:68px 0 18px !important; /* top space */
    margin:0 !important;

    background:#0B0F12 !important;
    z-index:10000 !important;

    transform:translateX(-105%) !important;
    transition:transform .30s ease !important;

    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    box-shadow:18px 0 40px rgba(0,0,0,.35) !important;
  }

  body.mshow header .menu>ul{ transform:translateX(0) !important; }

  header .menu>ul>li{ display:block !important; padding:0 !important; height:auto !important; }
  header .menu>ul>li>a{
    display:block !important;
    padding:12px 16px !important;
    color:#fff !important;
    text-decoration:none !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    height:auto !important;
    line-height:1.2 !important;
    font-size:15px !important;
  }

  header .menu>ul>li>span{ display:none !important; }

  /* submenu inside panel */
  header .menu>ul>li>ul{
    display:block !important;
    position:relative !important;
    padding:6px 0 10px 12px !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  header .menu>ul>li>ul>li>a{
    display:block !important;
    padding:10px 16px !important;
    color:rgba(255,255,255,.88) !important;
    text-decoration:none !important;
    font-size:14px !important;
    line-height:1.2 !important;
    border:0 !important;
  }

  /* overlay click area (you already have .overlay in template) */
  body.mshow .overlay{
    display:block !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  /* =========================
     HOME2: hide Latest News on mobile (as you wanted)
  ========================= */
  .home2 .h2-news{ display:none !important; }

  /* =========================
     FOOTER (keep clean)
  ========================= */
  footer{ margin:0 !important; padding:0 12px !important; }
}
/* =========================
   MOBILE MENU PATCH (FINAL)
   paste at VERY END of mobile.css
========================= */
@media screen and (max-width: 884px){

  /* ✅ Desktop menu bar-ыг mobile дээр хүчээр дарах */
  header .menu .center > ul{
    float:none !important;
    display:block !important;
  }

  /* ✅ MENU PANEL зөв selector: ul нь .center дотор байдаг */
  header .menu .center > ul{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    width:min(340px, 86vw) !important;
    height:100vh !important;

    margin:0 !important;
    padding:68px 0 18px !important;

    background:#0B0F12 !important;
    z-index:10000 !important;

    transform:translateX(-105%) !important;
    transition:transform .30s ease !important;

    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    box-shadow:18px 0 40px rgba(0,0,0,.35) !important;
  }

  /* ✅ Open state */
  body.mshow header .menu .center > ul{
    transform:translateX(0) !important;
  }

  /* ✅ burger дээрх давхцлыг болиулах: burger хамгийн дээр */
  header .menu .mnav-toggle{
    z-index:10001 !important;
  }

  /* ✅ Menu link styling */
  header .menu .center > ul > li{ display:block !important; }
  header .menu .center > ul > li > a{
    display:block !important;
    padding:12px 16px !important;
    color:#fff !important;
    text-decoration:none !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    font-size:15px !important;
    line-height:1.2 !important;
  }

  header .menu .center > ul > li > span{ display:none !important; }

  header .menu .center > ul > li > ul{
    display:block !important;
    position:relative !important;
    padding:6px 0 10px 12px !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  header .menu .center > ul > li > ul > li > a{
    display:block !important;
    padding:10px 16px !important;
    color:rgba(255,255,255,.88) !important;
    font-size:14px !important;
    text-decoration:none !important;
  }
}
/* =========================================================
   FIX: Burger menu opens, but "top row menu" still shows (duplicate)
   Paste at VERY END of mobile.css
========================================================= */
@media screen and (max-width: 884px){

  /* 1) MENU LIST-г зөв selector-оор нь барьж fixed panel болгоно
        (Танайд ихэнхдээ: header .menu .center > ul) */
  header .menu .center > ul{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(340px, 86vw) !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 72px 0 16px !important;

    background: #0b0b0b !important;
    z-index: 10000 !important;

    /* хаалттай үед */
    transform: translateX(-105%) !important;
    transition: transform .28s ease !important;

    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 18px 0 40px rgba(0,0,0,.35) !important;
  }

  /* Нээгдэх үед */
  body.mshow header .menu .center > ul{
    transform: translateX(0) !important;
  }

  /* 2) Desktop хэв маягийн "inline" мөрийг бүр мөсөн болиулна (зэрэгцэх шалтгаан) */
  header .menu .center > ul > li{
    display: block !important;
    float: none !important;
    width: 100% !important;
  }
  header .menu .center > ul > li > a{
    display: block !important;
    height: auto !important;
    line-height: 1.2 !important;
    padding: 12px 16px !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    white-space: normal !important;
  }

  /* 3) ☰ товч MENU ДЭЭР зэрэгцээд харагдахаас хамгаална:
        - menu нээгдсэн үед burger-ийг нуух (давхар харагдахгүй болгоно) */
  body.mshow header .mnav-toggle{
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Хэрвээ та "X" болгомоор байвал дээрх 3 мөрийг комментлоод,
     доорхийг ашиглана (☰ -> X) */
  /*
  body.mshow header .mnav-toggle{
    opacity: 1 !important;
    pointer-events: auto !important;
    background-image: none !important;
    background-color: rgba(255,255,255,.10) !important;
  }
  body.mshow header .mnav-toggle:before{
    content: "✕" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    text-indent: 0 !important;
  }
  */

  /* 4) submenu-ууд mobile дээр доошоо stack хэвээр */
  header .menu .center > ul > li > ul,
  header .menu .center > ul > li .mmore{
    position: static !important;
    transform: none !important;
    width: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 6px 0 10px 14px !important;
    margin: 0 !important;
    display: block !important;
  }

  /* 5) overlay дээр дарахад хаагдах үед (та JS-ээр хийсэн бол OK) */
  body.mshow .overlay{
    display:block !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
}
/* =========================================================
   FIX: On mobile, submenu should NOT open by default
   Paste at VERY END of mobile.css
========================================================= */
@media screen and (max-width: 884px){

  /* Submenu-ууд default-оор хаалттай */
  header .menu .center > ul > li > ul,
  header .menu .center > ul > li .mmore{
    display:none !important;
  }

  /* Нээгдсэн үед (JS нэмээд li.mopen class өгнө) */
  header .menu .center > ul > li.mopen > ul,
  header .menu .center > ul > li.mopen > .mmore{
    display:block !important;
  }

  /* Dropdown сум/товч (span) mobile дээр харагдах, дарж болдог болгоно */
  header .menu .center > ul > li > span{
    display:block !important;
    position:absolute !important;
    right:10px !important;
    top:8px !important;
    width:40px !important;
    height:40px !important;
    cursor:pointer !important;
    opacity:1 !important;
    z-index:2 !important;
  }

  /* span дээр жижиг caret дүрслэл */
  header .menu .center > ul > li > span:before{
    content:"▾" !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:100% !important;
    color:#fff !important;
    font-size:16px !important;
    font-weight:900 !important;
    opacity:.85 !important;
  }

  /* li relative байх хэрэгтэй (span зөв байрлахын тулд) */
  header .menu .center > ul > li{
    position:relative !important;
  }

  /* Нээгдсэн үед caret дээш харуулна */
  header .menu .center > ul > li.mopen > span:before{
    content:"▴" !important;
  }
}
/* =========================================================
   FIX: MOBILE LOGO RESTORE
   (Paste at VERY END of mobile.css)
========================================================= */

@media screen and (max-width:884px){

  /* logo container */
  header > .center{
    display:none;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    padding:10px 0 !important;
    background:#fff !important;
  }

  /* LOGO өөрөө */
  header .logo{
    display:block !important;

    width:180px !important;
    height:46px !important;

    background-image:url("../p/mlogo") !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:contain !important;

    margin:0 auto !important;
    position:relative !important;
    top:auto !important;
    left:auto !important;

    z-index:2 !important;
  }

}