/** * leadhub.css — chỉ bổ sung những gì Sneat core chưa có. * Khi ghép vào bộ Sneat thật, giữ file này nạp SAU css của Sneat. * Biến màu bám theo hệ màu Sneat (primary #696cff). */ :root { --lh-primary: #696cff; --lh-bg: #f5f5f9; } body { font-family: "Public Sans", -apple-system, "Segoe UI", sans-serif; background: var(--lh-bg); color: #566a7f; } /* ── Logo khối ── */ .lh-logo { display: inline-grid; place-items: center; width: 46px; height: 46px; background: var(--lh-primary); color: #fff; border-radius: 12px; font-weight: 800; font-size: 22px; box-shadow: 0 4px 12px rgba(105, 108, 255, .35); } /* ── Trang đăng nhập ── */ .lh-auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: linear-gradient(135deg, #f5f5f9 0%, #eceafd 100%); } .lh-auth-card { width: 100%; max-width: 420px; border: none; border-radius: 16px; } /* ── Avatar (Sneat có sẵn nhưng đảm bảo kích thước đồng bộ khi chạy standalone) ── */ .avatar { width: 38px; height: 38px; position: relative; } .avatar .avatar-initial { width: 100%; height: 100%; display: grid; place-items: center; font-size: .9rem; font-weight: 600; } .avatar-sm { width: 30px; height: 30px; } .avatar-sm .avatar-initial { font-size: .75rem; } .avatar-xl { width: 72px; height: 72px; } .avatar-online::after { content: ""; position: absolute; bottom: 1px; right: 1px; width: 9px; height: 9px; background: #71dd37; border: 2px solid #fff; border-radius: 50%; } /* ── Badge nhãn mềm kiểu Sneat (nếu core chưa nạp) ── */ .bg-label-primary { background: #e7e7ff !important; color: #696cff !important; } .bg-label-success { background: #e0f8e9 !important; color: #71dd37 !important; } .bg-label-warning { background: #fff2d6 !important; color: #ffab00 !important; } .bg-label-danger { background: #ffe0db !important; color: #ff3e1d !important; } .bg-label-info { background: #d7f5fc !important; color: #03c3ec !important; } .bg-label-secondary { background: #e9e9ec !important; color: #8592a3 !important; } .bg-label-dark { background: #dcdcde !important; color: #233446 !important; } /* ── Toast animation ── */ @keyframes lhfade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } } /* ── Icon button ── */ .btn-icon { padding: .4rem .5rem; line-height: 1; } /* ══════════════════════════════════════════════════════════════ LAYOUT TỐI THIỂU — để sidebar + navbar chạy được KHI CHƯA ghép Sneat. Khi nạp CSS Sneat thật (sau file này), Sneat sẽ override phần lớn. Nếu bạn ghép vào Sneat, có thể xóa cả khối này. ══════════════════════════════════════════════════════════════ */ .layout-wrapper { display: flex; min-height: 100vh; } .layout-container { display: flex; width: 100%; } .layout-menu { width: 260px; flex-shrink: 0; background: #fff; border-right: 1px solid #e7e7ee; padding: 0; position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 1030; transition: transform .25s ease; } .layout-page { flex: 1; margin-left: 260px; display: flex; flex-direction: column; min-width: 0; } .app-brand { padding: 1.25rem 1.5rem; display: flex; align-items: center; } .app-brand-link { display: flex; align-items: center; text-decoration: none; color: inherit; } .app-brand-text { font-size: 1.25rem; color: #566a7f; } .menu-inner { list-style: none; padding: 0 1rem; margin: 0; } .menu-header { padding: .75rem .5rem .25rem; color: #a1acb8; font-size: .75rem; } .menu-item { margin-bottom: .25rem; } .menu-link { display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; border-radius: 8px; color: #697a8d; text-decoration: none; font-weight: 500; } .menu-link:hover { background: #f5f5f9; color: #696cff; } .menu-item.active > .menu-link { background: linear-gradient(90deg, rgba(105,108,255,.16), rgba(105,108,255,.04)); color: #696cff; } .menu-icon { font-size: 1.15rem; } .layout-navbar { background: #fff; border-radius: 12px; padding: .5rem 1rem; box-shadow: 0 2px 6px rgba(67,89,113,.08); display: flex; align-items: center; } .content-wrapper { flex: 1; display: flex; flex-direction: column; } .container-p-y { padding-top: 1.5rem; padding-bottom: 1.5rem; } .content-footer { margin-top: auto; } .layout-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1029; } /* mobile: sidebar trượt ra */ @media (max-width: 1199px) { .layout-menu { transform: translateX(-100%); } .layout-menu.show { transform: translateX(0); } .layout-page { margin-left: 0; } .layout-overlay.show { display: block; } } .hide-arrow::after { display: none !important; } .avatar-initial { text-decoration: none; } /* ── Bảng gọn hơn trên mobile ── */ @media (max-width: 768px) { .card-body { padding: 1rem; } h4 { font-size: 1.15rem; } } /* Logo nhỏ trong sidebar (Razor) */ .lh-logo-sm { display: inline-grid; place-items: center; width: 32px; height: 32px; background: #696cff; color: #fff; border-radius: 8px; font-weight: 800; } /* Chip lọc trạng thái bấm được (khu nhân viên) */ .lh-chip { cursor: pointer; user-select: none; padding: .4rem .8rem; } .lh-chip:hover { opacity: .85; } /* ── Panel chi tiết khách: khối nổi bật + ô lớn ── */ .avatar-lg { width: 48px; height: 48px; } .avatar-lg .avatar-initial { font-size: 1.1rem; } .lh-highlight { border-radius: 10px; padding: 12px 14px; margin-bottom: 1rem; } .lh-highlight-order { background: #e0f8e9; } .lh-highlight-msg { background: #f1eff9; } .lh-highlight-label { font-size: 12px; font-weight: 600; margin-bottom: 4px; } .lh-highlight-order .lh-highlight-label { color: #2f7d5b; } .lh-highlight-msg .lh-highlight-label { color: #5a4bce; } .lh-highlight-body { font-size: 14px; color: #384551; line-height: 1.5; } .lh-tile { background: #f7f5ef; border-radius: 8px; padding: 10px 12px; height: 100%; } .lh-tile-label { font-size: 11px; color: #8592a3; margin-bottom: 2px; } .lh-tile-value { font-size: 14px; font-weight: 500; display: block; text-decoration: none; word-break: break-word; } a.lh-tile-value:hover { text-decoration: underline; }