/* ============================================================
   v1.6 — Thanh điều hướng dưới + Drawer menu (MOBILE)
   Chỉ kích hoạt trên mobile (max-width:720px). Trên desktop ẩn
   hoàn toàn, sidebar trái giữ nguyên dạng cột.
   ============================================================ */

/* Mặc định (desktop): ẩn bottom nav, backdrop & nút đóng drawer.
   Nút đóng (✕) do JS chèn sẵn vào sidebar nhưng chỉ dùng cho drawer mobile,
   nên trên laptop phải ẩn để không hiện cục ✕ lạc lõng. */
.ndn-bottom-nav{display:none}
.ndn-drawer-backdrop{display:none}
.ndn-drawer-close{display:none}

@media (max-width:720px){

  /* --- Bố cục: đưa cột giữa (tìm kiếm + đăng bài + feed) lên đầu --- */
  /* Sidebar trái chuyển thành drawer trượt từ trái, ra khỏi luồng grid
     để cột giữa hiển thị đầu tiên: ô tìm kiếm -> ô đăng bài -> feed. */
  #ndn-timeline-app{padding-bottom:76px}
  /* Lớp NGỐAI = nền drawer phủ FULL chiều cao (top:0 -> bottom:0).
     Không cuộn ở đây (overflow:hidden) — chỉ làm nền + hiệu ứng trượt. */
  #ndn-timeline-app .ndn-col-left.ndn-sidebar-left{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    height:100dvh;
    align-self:stretch;
    width:86vw;
    max-width:320px;
    margin:0;
    padding:0;
    background:#f0f2f5;
    box-shadow:2px 0 24px rgba(0,0,0,.18);
    border-right:1px solid #e4e6eb;
    overflow:hidden;
    z-index:2000000200;
    transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
    display:block;
  }
  /* Lớp TRONG = vùng cuộn nội dung, bắt đầu cách top 60px để KHÔNG bao giờ
     chợ dưới menu theme (kể cả khi cuộn). Bottom chừa chỗ cho thanh
     điều hướng dưới. (Bọc bằng JS: .ndn-drawer-scroll) */
  #ndn-timeline-app .ndn-col-left.ndn-sidebar-left .ndn-drawer-scroll{
    position:absolute;
    top:60px;
    left:0;
    right:0;
    bottom:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:14px 12px calc(80px + env(safe-area-inset-bottom,0));
  }
  body.ndn-drawer-open #ndn-timeline-app .ndn-col-left.ndn-sidebar-left{
    transform:translateX(0);
  }
  body.ndn-drawer-open{overflow:hidden}

  /* Backdrop khi mở drawer */
  .ndn-drawer-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:2000000150;
    opacity:0;
    transition:opacity .25s ease;
    pointer-events:none;
  }
  .ndn-drawer-backdrop[hidden]{display:block}
  body.ndn-drawer-open .ndn-drawer-backdrop{opacity:1;pointer-events:auto}

  /* Nút đóng drawer (chèn bằng JS) — chỉ hiện trên mobile */
  .ndn-drawer-close{
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:flex-end;
    width:36px;height:36px;
    border:none;border-radius:50%;
    background:#fff;color:#1c1e21;
    font-size:20px;line-height:1;cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,.12);
    flex:0 0 auto;
  }

  /* --- Thanh điều hướng dưới --- */
  .ndn-bottom-nav{
    display:flex;
    align-items:stretch;
    justify-content:space-around;
    position:fixed;
    left:0;right:0;bottom:0;
    height:60px;
    padding-bottom:env(safe-area-inset-bottom,0);
    background:#fff;
    border-top:1px solid #e4e6eb;
    box-shadow:0 -2px 12px rgba(0,0,0,.08);
    z-index:2000000100;
  }
  .ndn-bottom-nav .ndn-bn-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    border:none;
    background:none;
    color:#65676b;
    font-family:inherit;
    font-size:11px;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
    padding:6px 2px;
    position:relative;
    -webkit-tap-highlight-color:transparent;
  }
  .ndn-bottom-nav .ndn-bn-item svg{width:24px;height:24px;fill:currentColor;display:block}
  .ndn-bottom-nav .ndn-bn-item span{line-height:1.1;white-space:nowrap}
  .ndn-bottom-nav .ndn-bn-item.active{color:#1d4ed8}
  .ndn-bottom-nav .ndn-bn-item:active{transform:scale(.94)}

  /* Nút mờ (chưa khả dụng) */
  .ndn-bottom-nav .ndn-bn-item.is-disabled{
    color:#b0b3b8;
    opacity:.55;
    cursor:not-allowed;
    filter:grayscale(.4);
  }
  .ndn-bottom-nav .ndn-bn-item.is-disabled:active{transform:none}

  /* Nút đăng tin ở giữa (nổi) */
  .ndn-bottom-nav .ndn-bn-center{justify-content:flex-start;overflow:visible}
  .ndn-bn-post{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    border:none;
    background:none;
    color:#1d4ed8;
    font-family:inherit;
    font-size:11px;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
    margin-top:-18px;
  }
  .ndn-bn-post-circle{
    width:50px;height:50px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#1d4ed8,#7c3aed);
    box-shadow:0 6px 16px rgba(29,78,216,.45);
    border:3px solid #fff;
  }
  /* Tăng độ ưu tiên (thêm .ndn-bottom-nav) để thắng quy tắc
     `.ndn-bottom-nav .ndn-bn-item svg{fill:currentColor}` — nếu không icon
     sẽ bị tô màu xanh trùng với nền gradient và biến mất. */
  .ndn-bottom-nav .ndn-bn-post-circle svg{width:26px;height:26px;fill:#fff !important;display:block}
  .ndn-bn-post:active .ndn-bn-post-circle{transform:scale(.92)}
  .ndn-bn-post-label{color:#1d4ed8}

  /* Huy hiệu số chưa đọc trên nút hòm thư */
  .ndn-bn-badge{
    position:absolute;
    top:4px;
    right:50%;
    transform:translateX(18px);
    min-width:16px;height:16px;
    padding:0 4px;
    border-radius:9px;
    background:#e03131;
    color:#fff;
    font-size:10px;
    font-weight:700;
    line-height:16px;
    text-align:center;
  }

  /* Nâng các nút nổi (FAB / back-to-top) lên trên bottom nav, ẩn FAB
     đăng bài cũ vì đã có nút Đăng tin ở giữa thanh điều hướng. */
  .ndn-fab{display:none !important}
  .ndn-toolbox{bottom:calc(72px + env(safe-area-inset-bottom,0)) !important}
}