/* Cỡ chữ toàn web co giãn theo font-size của (mặc định 16px, chỉnh qua nút A-/A/A+ ở sidebar — xem switchFontSize() trong app.js) — mọi font-size dưới đây dùng rem (quy đổi từ px gốc / 16) thay vì px tuyệt đối để tự động scale theo, áp dụng chung cho PC/tablet/mobile vì dùng chung 1 stylesheet, không cần media query riêng. */ body { background: #f0f2f7; font-size: 0.9375rem; margin: 0; padding: 0; } /* 100vh trên mobile (Safari iOS, Chrome Android) tính theo viewport cao nhất có thể (như khi thanh địa chỉ/toolbar đang ẩn), lớn hơn vùng thực sự nhìn thấy khi toolbar đang hiện — khiến phần cuối trang (đáy sidebar, bill cuối trong list, cuối danh sách nhân viên...) bị che khuất/không cuộn tới được. 100dvh tính đúng theo viewport thực tế đang hiển thị; khai báo height 2 lần (vh trước, dvh sau) để trình duyệt cũ không hiểu dvh vẫn dùng được vh, còn trình duyệt mới ghi đè bằng dvh (khai báo sau thắng khi cùng độ ưu tiên) — không cần @supports. */ .view { display: none; } .view.active { display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; background: #f0f2f7; z-index: 10; overflow-y: auto; } #viewLogin.active, #viewReset.active { display: flex; align-items: center; justify-content: center; } .btn-toggle-password { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #6c757d; padding: 4px 8px; cursor: pointer; font-size: 1.125rem; line-height: 1; } .btn-toggle-password:hover { color: #0d6efd; } .app-layout { display: grid; grid-template-columns: 260px 1fr; height: 100vh; height: 100dvh; overflow: hidden; } .sidebar { background: #fff; border-right: 1px solid #dee2e6; overflow-y: auto; height: 100vh; height: 100dvh; } .main-area { overflow-y: auto; height: 100vh; height: 100dvh; } .mobile-topbar { display: none; } .sidebar-backdrop { display: none; } /* Danh sách rating: bộ lọc đứng yên, chỉ danh sách bill cuộn bên trong (PC/tablet — trên mobile, bộ lọc cuộn theo luôn, xem media query bên dưới) */ #contentList { height: 100%; display: flex; flex-direction: column; } #contentList > .card, #contentList > .rating-summary-bar { flex-shrink: 0; } .rating-list-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; } /* Dòng tổng hợp (tổng bill/rate tốt/rate xấu) theo kết quả filter hiện tại, nằm ngay trên danh sách bill */ .rating-summary-bar { display: flex; gap: 20px; flex-wrap: wrap; } .rating-summary-bar strong { font-weight: 700; } .rating-summary-bar .rs-good { color: #0F6E56; } .rating-summary-bar .rs-bad { color: #A32D2D; } /* Header bảng bấm được để sort (danh sách nhân viên, quản lý CS) */ .sortable-th { cursor: pointer; user-select: none; white-space: nowrap; } .sortable-th:hover { background: #e9ecef; } .sort-icon { font-size: 0.7rem; vertical-align: 1px; } .sort-icon-idle { opacity: .35; } /* Bộ lọc danh sách rating — PC: tìm kiếm + 5 ô (chi nhánh/đánh giá/trạng thái/từ ngày/đến ngày) chia đều cột full width 1 dòng khi đủ chỗ; mỗi cột không nhỏ hơn 160px (đủ hiện chữ dropdown/label dài nhất) — hẹp hơn nữa thì auto-fit tự giảm số cột và rớt bớt ô xuống dòng dưới, tránh vỡ layout/che mất chữ. Nút lọc nằm trong ô tìm kiếm (input-group), không còn là 1 ô riêng nữa. */ .rating-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem .75rem; align-items: end; } /* ── Mobile (<768px): sidebar biến thành drawer trượt ra từ trái, mở/đóng qua nút hamburger trên topbar; main-area chiếm toàn bộ chiều rộng ───── */ @media (max-width: 768px) { .app-layout { display: block; } .mobile-topbar { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 12px; background: #fff; border-bottom: 1px solid #dee2e6; } .mobile-menu-btn { border: none; background: none; font-size: 1.375rem; color: #343a40; padding: 4px 8px; line-height: 1; } /* Logo nhỏ giữa nút hamburger và tên web — không tăng chiều cao topbar (52px cố định), logo cao 30px, giữ nguyên tỉ lệ ảnh gốc */ .mobile-topbar-logo { flex-shrink: 0; } img.mobile-topbar-logo { height: 30px; width: auto; object-fit: contain; } i.mobile-topbar-logo { font-size: 1.375rem; } .mobile-topbar-title { font-size: 0.9375rem; font-weight: 700; color: #343a40; } .sidebar { position: fixed; top: 0; left: 0; width: 260px; max-width: 80vw; z-index: 1050; transform: translateX(-100%); transition: transform .2s ease; } .sidebar.open { transform: translateX(0); box-shadow: 2px 0 16px rgba(0,0,0,.2); } .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1040; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .sidebar-backdrop.show { display: block; opacity: 1; pointer-events: auto; } .main-area { height: calc(100vh - 52px); height: calc(100dvh - 52px); } /* Danh sách rating: bộ lọc cuộn theo cùng danh sách bill, không đứng yên ở trên như bản PC nữa */ #contentList { display: block; height: auto; } .rating-list-scroll { flex: none; min-height: auto; overflow: visible; } /* Bộ lọc: tìm kiếm + chi nhánh cùng 1 dòng 50/50 (tìm kiếm đứng trước); đánh giá + trạng thái xử lý mỗi ô 50%; từ ngày + đến ngày mỗi ô 50% */ .rating-filter { grid-template-columns: repeat(2, 1fr); } .filter-search, .filter-rate, .filter-datefrom { grid-column: 1; } .filter-branch, .filter-result, .filter-dateto { grid-column: 2; } } .nav-tab { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; font-size: 0.8125rem; font-weight: 500; border: none; border-radius: 8px; background: transparent; color: #6c757d; cursor: pointer; text-align: left; transition: background .15s, color .15s; } .nav-tab:hover { background: #f0f4ff; color: #0d6efd; } .nav-tab.active { background: #e6f0ff; color: #0d47a1; } .nav-tab i { font-size: 0.9375rem; } /* Cụm font-size (A-/A/A+) và chuyển đổi ngôn ngữ (VN/EN/中文) trong sidebar: 3 nút chia đều width bằng nhau, không phụ thuộc độ dài chữ bên trong */ .sidebar-btn-equal .btn { flex: 1 1 0; } .rating-card { border-left: 4px solid #dee2e6; transition: box-shadow .2s; } .rating-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); } .rating-card.bad { background: #fdf1f1; border-left-color: #dc3545; } .rating-card.good { background: #f1faf4; border-left-color: #198754; } .rating-branch { font-size: 0.9375rem; font-weight: 700; color: #343a40; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } /* ── Table badge (số bàn) ─────────────────────────────────────────── */ .table-badge { font-size: 0.875rem; font-weight: 700; padding: 3px 10px; border-radius: 6px; display: inline-block; } .table-badge.dinein { background: #fff3cd; color: #7a5800; } .table-badge.takeout { background: #d9d9d9; color: #495057; } .rating-divider { border: none; border-top: 1px dashed rgba(0,0,0,.5); margin: 6px 0; } /* ── Nút sửa xử lý (icon-only) ────────────────────────────────────── */ .edit-result-btn { color: #0a3622; text-decoration: none; flex-shrink: 0; } .edit-result-btn:hover { color: #0d6efd; } .dash-pb { padding: 4px 12px; font-size: 0.75rem; border: 1px solid #dee2e6; border-radius: 20px; background: #fff; color: #6c757d; cursor: pointer; transition: all .15s; } .dash-pb:hover { border-color: #0d6efd; color: #0d6efd; } .dash-pb.active { background: #0d6efd; color: #fff; border-color: #0d6efd; } /* .form-control mặc định width:100% — trong hàng flex-wrap này sẽ kéo giãn chiếm hết chỗ còn lại nếu không ghim width:auto (giống cách #dashBranch/ #dashStaffStatus đã làm), khiến datepicker to bất thường và vỡ dòng xấu trên màn hình nhỏ. */ .dash-date-input { width: auto; } .dash-metrics { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-bottom: 12px; } @media (max-width: 1200px) { .dash-metrics { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { .dash-metrics { grid-template-columns: repeat(2, 1fr); } } .dm-card { background: #fff; border-radius: 10px; padding: 12px 14px; border: 1px solid #e9ecef; } .dm-label { font-size: 0.6875rem; color: #6c757d; margin-bottom: 4px; } .dm-val { font-size: 1.375rem; font-weight: 600; color: #212529; } .dm-sub { font-size: 0.6875rem; color: #adb5bd; margin-top: 2px; } .dm-card.good .dm-val { color: #0F6E56; } .dm-card.bad .dm-val { color: #A32D2D; } .dm-card.warning .dm-val { color: #856404; } .dash-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 1200px) { .dash-charts { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .dash-charts { grid-template-columns: 1fr; } } .dash-chart-card { background: #fff; border-radius: 10px; padding: 14px; border: 1px solid #e9ecef; min-width: 0; } .dash-chart-card.dash-full { grid-column: 1 / -1; } /* Phân bố theo chi nhánh + Thống kê nhân viên: cùng 1 hàng, chia đều 2 cột 50/50; xếp chồng khi màn hẹp. */ .dash-branch-staff-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .dash-branch-staff-row .dash-chart-card.dash-full { grid-column: auto; } @media (max-width: 900px) { .dash-branch-staff-row { grid-template-columns: 1fr; } } .dash-chart-title { font-size: 0.8125rem; font-weight: 500; color: #343a40; margin-bottom: 6px; } .dash-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.6875rem; color: #6c757d; margin-bottom: 8px; } .dl { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 3px; vertical-align: middle; }