/* ===== QLSV Mobile Overlay — Clean, No-Blur, Scoped (không ảnh hưởng màu toàn site) ===== */
@media (max-width:1024px){

  /* Anti-blur: chỉ bỏ mờ khi overlay mở, không đụng màu chữ site */
  html.mfp-open #wrapper, html.mfp-open .ux-main,
  html.ux-overlay-active #wrapper, html.ux-overlay-active .ux-main,
  html.off-canvas-open #wrapper, html.off-canvas-open .ux-main{
    filter:none !important; -webkit-filter:none !important; opacity:1 !important;
  }
  .mfp-wrap.off-canvas, .mfp-wrap.off-canvas *{
    filter:none !important; -webkit-filter:none !important; opacity:1 !important;
    text-shadow:none !important;
  }

  /* Lớp nền tối phía sau: không blur + không chặn thao tác */
  .mfp-bg{
    background:rgba(0,0,0,.55) !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    filter:none !important; opacity:1 !important;
    z-index:100000 !important; pointer-events:none !important;
  }

  /* Khung popup ở trên, nhận tương tác */
  .mfp-wrap.off-canvas{ z-index:100002 !important; pointer-events:auto !important; }

  /* Popup giữa màn hình, hơi cao để thoáng */
  .mfp-wrap.off-canvas .mfp-content{
    position:fixed !important;
    top:40% !important; left:50% !important; transform:translate(-50%,-50%) !important;
    width:85vw !important; max-width:360px !important; max-height:82vh !important;
    background:#dd3333 !important; color:#fff !important;
    border-radius:20px !important; padding:16px 16px 12px !important;
    display:flex !important; flex-direction:column !important; align-items:center !important;
    box-shadow:none !important; overflow:hidden !important; pointer-events:auto !important;
  }

  /* Tiêu đề MENU (chỉ hiện trong popup) */
  .mfp-wrap.off-canvas .mfp-content::before{
    content:"MENU"; display:block !important; text-align:center;
    font-size:18px; font-weight:700; color:#fff; letter-spacing:1px; margin-bottom:10px;
  }

  /* Vùng CUỘN: gom đủ biến thể container của Flatsome */
  .mfp-wrap.off-canvas .mfp-content :is(.sidebar-menu,.off-canvas-center,.sidebar-menu-inner,.off-canvas-content,.nav-sidebar){
    overflow-y:auto !important; -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important; overscroll-behavior:contain !important;
    max-height:72vh !important; width:100% !important; padding:0 !important; padding-bottom:30px !important;
    position:relative !important; pointer-events:auto !important;
  }

  /* ==== STYLE CHỈ ÁP DỤNG TRONG POPUP (không ảnh hưởng site) ==== */
  .mfp-wrap.off-canvas .nav-vertical{ margin:0 !important; padding:0 !important; list-style:none !important; }
  .mfp-wrap.off-canvas .nav-vertical > li{ margin:0 !important; display:block !important; }

  /* Nút mặc định: TRẮNG/ĐỎ (size nhỏ, căn giữa) */
  .mfp-wrap.off-canvas .nav-vertical > li > a{
    display:flex !important; justify-content:center !important; align-items:center !important;
    background:#fff !important; color:#dd3333 !important;
    padding:10px 14px !important; margin:6px auto !important;
    font-size:14px !important; font-weight:600 !important; min-height:36px !important;
    border-radius:14px !important; border:none !important; text-align:center !important;
    width:90% !important; max-width:280px !important; box-shadow:none !important;
    transition:filter .15s ease, transform .15s ease;
  }
  .mfp-wrap.off-canvas .nav-vertical > li > a:hover{ filter:brightness(1.04); transform:translateY(-1px); }
  .mfp-wrap.off-canvas .nav-vertical > li > a i,
  .mfp-wrap.off-canvas .nav-vertical > li > a svg{ color:#dd3333 !important; fill:#dd3333 !important; font-size:16px; margin-right:6px; }

  /* CHỈ 1 gạch trắng trước NHÓM 4 MỤC CUỐI */
  .mfp-wrap.off-canvas .nav-vertical > li::before{ content:none !important; }
  .mfp-wrap.off-canvas .nav-vertical > li:nth-last-child(4)::before{
    content:""; display:block; height:1px; width:70%;
    background:rgba(255,255,255,.35); margin:10px auto 6px; border-radius:1px;
  }

  /* 4 nút cuối: nền đỏ #dd3333, viền trắng, chữ trắng (scoped trong popup) */
  .mfp-wrap.off-canvas .nav-vertical > li:nth-last-child(-n+4) > a{
    background:#dd3333 !important; color:#fff !important; border:1.5px solid #fff !important;
  }
  .mfp-wrap.off-canvas .nav-vertical > li:nth-last-child(-n+4) > a i,
  .mfp-wrap.off-canvas .nav-vertical > li:nth-last-child(-n+4) > a svg{
    color:#fff !important; fill:#fff !important;
  }

  /* Nút đóng (×): luôn bấm được, ở trên cùng, SCOPED trong popup */
  .mfp-wrap.off-canvas .mfp-close{
    position:absolute !important; top:8px !important; right:10px !important;
    width:32px !important; height:32px !important; line-height:28px !important;
    font-size:22px !important; background:rgba(255,255,255,.25) !important;
    color:#fff !important; border-radius:50% !important; box-shadow:none !important;
    pointer-events:auto !important; z-index:100005 !important;
  }

  /* Nút mở menu (hamburger) – chỉ style trong mobile, không ảnh hưởng site */
  .mobile-menu a.icon-menu,
  .mobile-nav .menu-toggle,
  .header-mobile .off-canvas-toggle,
  a.icon-menu{
    background:#fff !important; color:#dd3333 !important;
    border:1px solid #dd3333 !important; border-radius:9999px !important;
    padding:6px 12px !important; font-size:13px !important; box-shadow:none !important;
  }
}