/* ==========================================================================
   Thanh điều hướng cho điện thoại — nút menu + ngăn kéo toàn màn hình.
   Thay cho cách nhồi 6 mục vào một hàng bằng chữ 7-8px (tràn ở màn 390px,
   dưới ngưỡng đọc được và dưới ngưỡng vùng chạm 44px).

   Nguyên tắc: mọi bộ chọn ở đây đều bắt đầu bằng `html.has-mobilenav` để
   thắng các @media viết sẵn trong từng trang (chúng chỉ có 1-2 lớp).
   Lớp `has-mobilenav` do js/mobile-nav.js gắn — không có JS thì trang rơi về
   trạng thái dự phòng ở cuối file: một hàng chữ 12px vuốt ngang được.
   ========================================================================== */

:root{--mnav-h:68px}

/* --- Nút menu: ẩn mặc định, chỉ hiện khi JS đã dựng xong ngăn kéo --- */
.mnav-toggle{display:none}

@media (max-width:860px){

  html.has-mobilenav .nav{
    height:var(--mnav-h);
    min-height:var(--mnav-h);   /* vài trang đặt min-height riêng, phải ghi đè cả hai */
    max-height:var(--mnav-h);
    padding:0 16px;
    gap:12px;
    /* Thanh nav phải nằm TRÊN ngăn kéo để nút đóng luôn bấm được.
       /lien-he đặt z-index:30, các trang khác 2147483600 — đều thấp hơn ngăn kéo. */
    z-index:2147483647;
  }

  /* lut-detail.html gói hàng ngang trong .nav-shell chứ không đặt thẳng trên .nav */
  html.has-mobilenav .nav .nav-shell{
    width:100%;height:100%;display:flex;align-items:center;gap:12px;
  }

  /* Logo: cố định, không co, cao vừa phải */
  html.has-mobilenav .nav .wordmark,
  html.has-mobilenav .nav .brand,
  html.has-mobilenav .nav .nav-wordmark{
    width:132px;height:40px;flex:0 0 auto;
  }
  html.has-mobilenav .nav .wordmark img,
  html.has-mobilenav .nav .brand img,
  html.has-mobilenav .nav .nav-wordmark img{
    width:100%;height:100%;              /* height:auto sẽ làm nav cao 269px */
    object-fit:contain;object-position:left center;display:block;
  }

  /* Hàng liên kết ngang và nút Zalo trên thanh: chuyển hết vào ngăn kéo.
     Nút Zalo vẫn luôn có mặt nhờ nút nổi góc phải dưới + mục đầu ngăn kéo. */
  /* Dùng bộ chọn hậu duệ, KHÔNG dùng `>`: lut-detail.html bọc nút Zalo trong
     .nav-shell nên `.nav > .nav-zalo` trượt, nút vẫn hiện chen với nút menu. */
  html.has-mobilenav .nav .nav-links,
  html.has-mobilenav .nav .nav-zalo{
    display:none !important;
  }

  /* --- Nút mở menu --- */
  html.has-mobilenav .nav .mnav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;margin-left:auto;
    width:46px;height:46px;padding:0;
    border:1px solid rgba(255,255,255,.28);border-radius:12px;
    background:transparent;color:#fff;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:border-color .2s,background .2s;
  }
  html.has-mobilenav .nav .mnav-toggle:active{background:rgba(255,255,255,.08)}
  html.has-mobilenav .nav .mnav-toggle[aria-expanded="true"]{
    border-color:var(--red,#d81820);background:var(--red,#d81820);
  }
  .mnav-bars{position:relative;display:block;width:20px;height:14px}
  .mnav-bars i{
    position:absolute;left:0;width:100%;height:2px;border-radius:2px;
    background:currentColor;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .16s;
  }
  .mnav-bars i:nth-child(1){top:0}
  .mnav-bars i:nth-child(2){top:6px}
  .mnav-bars i:nth-child(3){top:12px}
  .mnav-toggle[aria-expanded="true"] .mnav-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .mnav-toggle[aria-expanded="true"] .mnav-bars i:nth-child(2){opacity:0}
  .mnav-toggle[aria-expanded="true"] .mnav-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* --- Ngăn kéo --- */
  html.has-mobilenav .mnav-panel{
    position:fixed;z-index:2147483646;
    top:var(--mnav-h);right:0;bottom:0;left:0;
    display:flex;flex-direction:column;
    padding:14px 16px calc(28px + env(safe-area-inset-bottom));
    background:#0a0a0a;color:#fff;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .24s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s .28s;
  }
  html.has-mobilenav .mnav-panel.is-open{
    opacity:1;visibility:visible;transform:none;transition-delay:0s;
  }

  .mnav-panel a{
    display:flex;align-items:center;
    min-height:58px;padding:0 4px;
    border-bottom:1px solid rgba(255,255,255,.12);
    color:#f2f2f2;font-size:17px;font-weight:600;letter-spacing:-.01em;
    text-decoration:none;
  }
  .mnav-panel a[aria-current="page"]{
    color:var(--red,#d81820);padding-left:12px;
    box-shadow:inset 3px 0 0 var(--red,#d81820);
  }
  .mnav-panel a:active{background:rgba(255,255,255,.06)}
  .mnav-panel a:last-of-type{border-bottom:0}
  .mnav-panel a:nth-last-of-type(2){border-bottom:0}

  .mnav-cta{
    display:flex !important;align-items:center;justify-content:center;
    min-height:58px;margin-top:auto;   /* đẩy CTA xuống đáy ngăn kéo */
    border:0 !important;border-radius:999px;
    background:var(--red,#d81820);
    color:#fff !important;font-size:14px;font-weight:800;
    letter-spacing:.1em;text-transform:uppercase;
  }
  .mnav-cta:active{background:#ed1b24}

  html.mnav-locked,html.mnav-locked body{overflow:hidden}
}

@media (min-width:861px){
  html.has-mobilenav .mnav-panel{display:none}
}

/* --- Dự phòng khi JavaScript không chạy: hàng ngang vuốt được, chữ đọc được.
       Không có `has-mobilenav` nghĩa là JS chưa dựng ngăn kéo. --- */
@media (max-width:860px){
  html:not(.has-mobilenav) .nav .nav-links{
    gap:16px;margin-right:10px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  html:not(.has-mobilenav) .nav .nav-links::-webkit-scrollbar{display:none}
  html:not(.has-mobilenav) .nav .nav-links a{
    font-size:12px;padding:10px 0;
  }
  html:not(.has-mobilenav) .nav .nav-links a:nth-child(n){display:inline-flex}
}