/* ============================================================
   NAV MENU — Sidebar gọn 9 khối + Ghim (prefix nm-)
   Chỉ áp cho sidebar DESKTOP (mobile ≤860px sidebar display:none).
   Dùng lại biến brand của app (--navy/--gold/--gold-light/--warning…).
   ============================================================ */

/* Thanh công cụ: Mở/Thu tất cả · Sửa ghim */
.nm-tools{display:flex;gap:6px;padding:8px 12px 4px}
.nm-tools button{flex:1;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.6);font-family:var(--fd,'Roboto',sans-serif);font-size:11px;font-weight:600;padding:6px 4px;border-radius:7px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.nm-tools button:hover{background:rgba(255,255,255,.09);color:#fff}
.nm-tools button.nm-edit-on{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* Nhãn nhóm ⭐ Ghim */
.nm-grp-lb{padding:12px 16px 6px;font-size:10px;color:var(--gold-light);letter-spacing:1.8px;text-transform:uppercase;display:flex;align-items:center;gap:6px}

/* ===== Khối (accordion) ===== */
.nm-blk-h{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:2px 8px;cursor:pointer;border-radius:9px;color:rgba(255,255,255,.82);font-size:13.5px;font-weight:600;transition:background .15s;user-select:none}
.nm-blk-h:hover{background:rgba(255,255,255,.06)}
.nm-blk-h .nm-bi{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.nm-blk-h .nm-hn{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nm-blk-h .nm-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0;display:none}
.nm-blk-h .nm-dot.warn{background:var(--warning,#C8862F)}
.nm-blk.nm-hasalert.nm-collapsed .nm-blk-h .nm-dot{display:block}
.nm-blk-h .nm-cnt{font-size:11px;font-weight:600;color:rgba(255,255,255,.38);background:rgba(255,255,255,.06);border-radius:20px;padding:1px 8px;flex-shrink:0}
.nm-blk-h .nm-chev{width:13px;height:13px;transition:transform .18s;color:rgba(255,255,255,.4);flex-shrink:0}
.nm-blk.open .nm-blk-h .nm-chev{transform:rotate(90deg)}
.nm-blk-body{display:none;padding:2px 0 6px}
.nm-blk.open .nm-blk-body{display:block}

/* Mục menu THẬT nằm trong khối — thụt vào cho có cấp bậc */
.nm-blk-body .nav-item{padding:8px 14px 8px 30px}
/* Chế độ sửa ghim: ẩn chuông báo, hiện sao ghim */
.nm-editing .nm-blk-body .nav-item .nav-badge{display:none !important}
.nm-star{margin-left:auto;cursor:pointer;font-size:14px;line-height:1;color:rgba(255,255,255,.32);flex-shrink:0;padding-left:6px}
.nm-star:hover{color:var(--gold-light)}
.nm-star.on{color:var(--gold)}

/* ===== Nhóm Ghim (dòng nhân bản, KHÔNG phải .nav-item thật) ===== */
.nm-pin-row{display:flex;align-items:center;gap:10px;padding:9px 16px;margin:1px 8px;cursor:pointer;border-radius:8px;color:rgba(255,255,255,.6);font-size:13px;transition:background .13s,color .13s;text-decoration:none}
.nm-pin-row:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.9)}
.nm-pin-row.active{background:rgba(196,154,72,.22);color:var(--gold-light);font-weight:500;box-shadow:inset 3px 0 0 var(--gold)}
.nm-pin-row .nm-pi{font-size:14px;width:18px;text-align:center;flex-shrink:0}
.nm-pin-row .nm-pn{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nm-pin-row .nm-pb{font-size:10.5px;font-weight:700;background:var(--gold);color:var(--navy);border-radius:20px;padding:0 6px;min-width:17px;text-align:center;flex-shrink:0}
.nm-pin-row .nm-pb.warn{background:var(--warning,#C8862F);color:#fff}
.nm-pin-row .nm-prm{cursor:pointer;font-size:13px;color:rgba(255,255,255,.42);flex-shrink:0;padding-left:4px}
.nm-pin-row .nm-prm:hover{color:var(--danger,#C0392B)}
.nm-pin-empty{padding:4px 16px 8px;font-size:11.5px;color:rgba(255,255,255,.3);font-style:italic}
/* Dòng Mẹo (chỉ hiện khi CHƯA tự chỉnh ghim; tự ẩn sau khi đã cài) */
.nm-pin-hint{margin:0 8px 7px;padding:8px 11px;background:rgba(225,161,70,.1);border:1px dashed rgba(225,161,70,.4);border-radius:9px;font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.74)}
.nm-pin-hint b{color:var(--gold-light);font-weight:600}
.nm-addpin{display:flex;align-items:center;gap:8px;padding:8px 14px;margin:4px 8px 2px;border:1px dashed rgba(225,161,70,.4);border-radius:8px;color:var(--gold-light);font-size:12.5px;font-weight:600;cursor:pointer}
.nm-addpin:hover{background:rgba(225,161,70,.1)}

/* ===== Popup chọn ghim (Thêm lối tắt) ===== */
.nm-pick-ov{position:fixed;inset:0;background:rgba(13,27,51,.5);display:none;align-items:center;justify-content:center;padding:20px;z-index:20000}
.nm-pick-ov.show{display:flex}
.nm-pick{background:#fff;border-radius:16px;width:440px;max-width:100%;max-height:82vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.3);font-family:var(--fd,'Roboto',sans-serif)}
.nm-pick-h{padding:16px 20px;border-bottom:1px solid var(--ivory-dark,#ECE5D8);display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.nm-pick-h h3{margin:0;font-size:16px;font-weight:700;color:var(--navy,#0D1B33)}
.nm-pick-h p{margin:3px 0 0;font-size:11.5px;color:var(--charcoal-light,#8A8170)}
.nm-pick-h .nm-x{cursor:pointer;color:var(--charcoal-light,#8A8170);font-size:20px;line-height:1;flex-shrink:0}
.nm-pick-scroll{flex:1;overflow-y:auto;padding:8px 12px 16px}
.nm-pick-grp{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--gold-deep,#B8852F);padding:12px 8px 5px}
.nm-pick-row{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;cursor:pointer}
.nm-pick-row:hover{background:var(--ivory,#F7F3EC)}
.nm-pick-row .nm-ppi{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.nm-pick-row .nm-ppn{flex:1;font-size:13.5px;color:var(--text,#26221B)}
.nm-pick-row .nm-chk{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--ivory-dark,#ECE5D8);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;flex-shrink:0}
.nm-pick-row.on .nm-chk{background:var(--gold,#E1A146);border-color:var(--gold,#E1A146)}
.nm-pick-f{padding:12px 20px;border-top:1px solid var(--ivory-dark,#ECE5D8);text-align:right}
.nm-pick-f button{background:var(--navy,#0D1B33);color:#fff;border:none;font-family:var(--fd,'Roboto',sans-serif);font-size:13.5px;font-weight:600;padding:9px 20px;border-radius:9px;cursor:pointer}

/* ============================================================
   MOBILE — menu điện thoại kiểu folder (Ghim + 9 ô khối → mở ra)
   Dùng lại .fn-tile/.fn-grid/.fn-grp của app; thêm lớp nm-mb-*.
   ============================================================ */
.nm-mb-toolrow{display:flex;align-items:center;gap:8px;margin:8px 4px 2px}
.nm-mb-search{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ivory-dark);border-radius:12px;padding:9px 12px;min-width:0}
.nm-mb-search input{flex:1;min-width:0;border:none;outline:none;background:none;font-family:var(--fd,'Roboto',sans-serif);font-size:14px;color:var(--text)}
.nm-mb-search .nm-mb-qx{color:var(--charcoal-light);font-size:15px;cursor:pointer;display:none;flex-shrink:0}
.nm-mb-editbtn{flex-shrink:0;border:1px solid var(--line-gold);background:#fff;color:var(--gold-deep);font-family:var(--fd,'Roboto',sans-serif);font-size:12.5px;font-weight:700;padding:9px 13px;border-radius:12px;cursor:pointer;white-space:nowrap}
.nm-mb-editbtn.on{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* Ô khối (folder): dùng .fn-tile + emoji trong .fn-ico + số đếm navy */
.nm-mb-folder .fn-ico{font-size:25px}
.nm-mb-folder .nm-mb-cnt{position:absolute;top:7px;right:7px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--navy);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--sheet)}

/* Tile GENERATE lại (Ghim/kết quả tìm) → tắt animation cho khỏi nhấp nháy */
.nm-mb-flat .fn-tile{animation:none!important;opacity:1!important;transform:none!important}

/* Mở khối (drill) */
.nm-mb-drillhead{display:flex;align-items:center;gap:12px;margin:8px 2px 12px}
.nm-mb-back{display:flex;align-items:center;gap:6px;border:1px solid var(--ivory-dark);background:#fff;border-radius:20px;padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer}
.nm-mb-drilltitle{font-size:16px;font-weight:700;color:var(--navy)}

/* Sửa ghim: sao trên tile + ✕ trên tile Ghim + tile ＋ Thêm */
.nm-mb-star{position:absolute;top:5px;left:6px;font-size:17px;color:#c9c2b2;z-index:2}
.nm-mb-star.on{color:var(--gold)}
.nm-mb-rm{position:absolute;top:-6px;left:-6px;width:22px;height:22px;border-radius:50%;background:var(--danger,#C0392B);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.25);z-index:3}
.nm-mb-add{border:1.5px dashed var(--gold)!important}
.nm-mb-add .fn-ico{background:none!important;border:none!important;font-size:28px;color:var(--gold-deep)!important;box-shadow:none!important}
.nm-mb-empty{padding:16px 6px;color:var(--soft);font-size:13.5px;text-align:center}
.nm-mb-pinempty{padding:2px 6px 8px;color:var(--soft);font-size:12.5px;font-style:italic}
.nm-mb-pinhint{grid-column:1/-1;background:var(--gold-cream);border:1px dashed var(--line-gold);border-radius:11px;padding:10px 12px;font-size:12px;line-height:1.45;color:var(--text)}
.nm-mb-pinhint b{color:var(--gold-deep);font-weight:700}