:root{ --bg:#F7F6F2; --surface1:#FFFFFF; --surface2:#FCFBF9; --border:#E7E5DE; --text1:#1F1E1B; --text2:#5C5A54; --textmuted:#948F84; --accent:#3E72D4; --accent-100:#E4ECFB; --nav-active-text:#3E72D4; --progress-done:#0F6E56; --blue-50:#E6F1FB; --blue-800:#0C447C; --blue-300:#85B7EB; --amber-50:#FAEEDA; --amber-800:#7A4508; --amber-300:#C97A0E; --green-50:#EAF3DE; --green-800:#27500A; --green-300:#5E9C2E; --red-50:#FCEBEB; --red-800:#8A1F1F; --red-700:#A32D2D; --gray-50:#F1EFE8; --gray-800:#444441; --gray-400:#8C897E; --purple-100:#EEEDFE; --purple-800:#26215C; --chip-text-default:#1F1E1B; --font: -apple-system, "Segoe UI", Inter, Roboto, sans-serif; } [data-theme="dark"]{ --bg:#15140F; --surface1:#1D1C17; --surface2:#211F1A; --border:#33312A; --text1:#F2F0EA; --text2:#B8B5AC; --textmuted:#7C786F; --accent:#6FA0F0; --accent-100:#16233D; --nav-active-text:#8FB6F5; --progress-done:#22957A; --blue-50:#17324A; --blue-800:#8FC5F5; --blue-300:#4E88BD; --amber-50:#3D2A0C; --amber-800:#F0B65C; --amber-300:#E0993B; --green-50:#1D3510; --green-800:#9AD16C; --green-300:#7AB84A; --red-50:#3A1414; --red-800:#F0A0A0; --red-700:#E2685F; --gray-50:#2B2A26; --gray-800:#C9C6BC; --gray-400:#6E6B62; --purple-100:#241F42; --purple-800:#B9B2F2; --chip-text-default:#F2F0EA; } *{box-sizing:border-box} body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text1);font-size:14px} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} .app{display:flex;min-height:100vh} /* Sidebar — luôn tối (khác nền sáng/tối chung của trang, đổi bằng nút toggle) — thử theo yêu cầu người dùng. Ghi đè custom property NGAY TRÊN .sidebar: mọi rule con (.navlink, .nav-section-title, .sidebar-user...) đang dùng var(--surface1)/var(--text2)/var(--border)/... tự động nhận giá trị tối mới mà không cần sửa từng rule riêng lẻ. */ .sidebar{ --surface1:#1D1C17; --surface2:#211F1A; --border:#33312A; --text1:#F2F0EA; --text2:#B8B5AC; --textmuted:#7C786F; --accent-100:#1E4C91; --nav-active-text:#FFFFFF; } .sidebar{width:240px;flex-shrink:0;background:var(--surface1);border-right:1px solid var(--border);padding:16px 10px;display:flex;flex-direction:column;gap:2px;transition:width .12s ease-out;will-change:width} .sidebar .brand{display:flex;align-items:center;gap:8px;padding:0 8px;margin-bottom:18px} .sidebar .brand .logo{width:28px;height:28px;border-radius:8px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px} .sidebar .brand span{font-weight:600;font-size:14px} .brand-logo{max-width:100%;max-height:114px;width:auto;height:auto;object-fit:contain;display:block} /* button.sidebar-collapse-btn (không chỉ .sidebar-collapse-btn suông): cần độ đặc hiệu CAO HƠN .icon-btn{display:flex} (định nghĩa Ở SAU trong file, cùng độ đặc hiệu 1 class thì rule sau thắng bất kể phần tử có thêm class nào khác) — nếu không nút này sẽ LUÔN hiện kể cả dưới 861px, phá đúng yêu cầu "chỉ desktop/tablet". */ button.sidebar-collapse-btn{display:none;margin-left:auto;flex-shrink:0} /* Thu gọn menu (MỚI, theo yêu cầu người dùng) — CHỈ desktop/tablet, dưới 861px sidebar đã là off-canvas riêng qua hamburger (xem @media max-width:860px cuối file), 2 cơ chế không liên quan nên nút này ẩn hẳn dưới breakpoint đó, class .sidebar-collapsed (gắn lên , xem pm-theme-assets.blade.php) cũng chỉ có tác dụng trong khối @media này. */ @media (min-width:861px){ button.sidebar-collapse-btn{display:flex} html.sidebar-collapsed .sidebar{width:68px} /* Logo đầy đủ (wordmark, không có bản rút gọn icon-only riêng) không đủ chỗ hiển thị có nghĩa ở 68px — ẩn hẳn, chỉ còn nút thu gọn/mở rộng canh giữa hàng brand khi đã thu nhỏ. */ html.sidebar-collapsed .sidebar .brand{justify-content:center} html.sidebar-collapsed .sidebar .brand .brand-logo{display:none} html.sidebar-collapsed .navlink span, html.sidebar-collapsed .nav-section-title, html.sidebar-collapsed .nav-chevron, /* Submenu con (Cá nhân/Việc nhóm/Mua hàng, Báo hàng lỗi/Đăng ký gia công) không có chỗ hiện nhãn khi thu gọn — ẩn hẳn thay vì hiện icon-only khó đoán mục nào là mục nào; mở lại sidebar để vào. */ html.sidebar-collapsed .nav-subgroup{display:none} html.sidebar-collapsed .navlink{justify-content:center;padding-left:9px;padding-right:9px;border-left:none} html.sidebar-collapsed .navlink.active{border-left:none} /* Rê chuột mở rộng lại (MỚI 2026-08-29, theo yêu cầu người dùng — click menu nhóm lúc đang thu gọn bị giật, đề xuất "rê chuột vào mở rộng, click xong tự thu gọn lại"). `(hover:hover) and (pointer:fine)` loại thiết bị chạm/tablet không có hover thật — JS ở sidebar.blade.php (nav-group-toggle) tự phát hiện qua cùng media query để GIỮ NGUYÊN hành vi bấm-để-mở-rộng cũ cho các thiết bị đó, không đụng gì. CHỈ ĐỔI CHÍNH `.sidebar` (position:fixed, xem inline