` của thanh phân trang/nhóm pill không nên bị ép xuống 1 cột) để mỗi field xuống đúng 1 hàng, rộng bằng nhau. */ form[style*="display: flex"] > * { flex: 1 1 100% !important; max-width: 100% !important; } /* Lớp loại trừ cho các khối flex nội tuyến không nên bóp méo/giãn chiều rộng con. Định nghĩa thêm biến thể `form.qq-skkn-no-wrap-mobile` cùng độ ưu tiên CSS (loại + lớp) với rule `form[style*="display: flex"] > *` ở trên để thắng được đúng theo thứ tự khai báo sau — dùng cho form hành động gọn trong 1 hàng bảng (VD nhan-rong.php) không nên bị ép xuống 1 cột như form bộ lọc đầu trang. */ .qq-skkn-no-wrap-mobile { flex-wrap: nowrap !important; } .qq-skkn-no-wrap-mobile > *, form.qq-skkn-no-wrap-mobile > * { flex: initial !important; max-width: none !important; } } /* Phân trang (Layout::renderPagination()) — căn giữa, 2 phiên bản chuyển đổi theo độ rộng màn hình: đầy đủ số trang trên desktop/tablet, rút gọn còn Trước/Sau + "Trang X / Y" trên mobile (liệt kê nhiều số trang trên màn hình hẹp dễ vỡ layout và khó bấm trúng bằng ngón tay — khuyến nghị UX phổ biến cho pagination mobile). */ .qq-skkn-pagination { display: flex; justify-content: center; margin-top: 20px; } .qq-skkn-pagination-numbers { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; } .qq-skkn-pagination-compact { display: none; justify-content: center; align-items: center; gap: 12px; } @media (max-width: 768px) { .qq-skkn-pagination-numbers { display: none; } .qq-skkn-pagination-compact { display: flex; } } /* Reduced Motion Override */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Utilities for TASK-24 */ .qq-skkn-form-group { margin-bottom: 16px; } .qq-skkn-form-label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--color-heading); } .qq-skkn-alert { padding: 12px 16px; margin-bottom: 20px; border-radius: var(--radius-card-inner); border: 1px solid; } .qq-skkn-alert-success { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-text); } .qq-skkn-alert-danger { background: var(--color-danger-bg); color: var(--color-danger-text); border-color: var(--color-danger-text); } .qq-skkn-alert-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-text); } .qq-skkn-alert-info { background: var(--color-info-bg); color: var(--color-info-text); border-color: var(--color-info-text); } /* Popup cảnh báo giữa màn hình cho thông báo nhất thời sau submit (xem script cuối renderFooter() trong Layout.php — bắt các khối [qq-skkn-alert-flash], ẩn khung cũ, hiện popup này thay thế). */ .qq-skkn-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; } .qq-skkn-modal-box { background: var(--color-bg-primary); border-radius: var(--radius-card); max-width: 440px; width: 100%; padding: 28px 24px 24px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); text-align: center; animation: qqSkknModalIn 0.18s ease-out; } @keyframes qqSkknModalIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } .qq-skkn-modal-icon { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; } .qq-skkn-modal-icon.success { background: var(--color-success-bg); color: var(--color-success-text); } .qq-skkn-modal-icon.danger { background: var(--color-danger-bg); color: var(--color-danger-text); } .qq-skkn-modal-icon.warning { background: var(--color-warning-bg); color: var(--color-warning-text); } .qq-skkn-modal-icon.info { background: var(--color-info-bg); color: var(--color-info-text); } .qq-skkn-modal-message { color: var(--color-text-primary); font-size: 15px; line-height: 1.6; white-space: pre-line; margin-bottom: 20px; } .qq-skkn-modal-btn { padding: 10px 32px; } .qq-skkn-import-box { border: 2px dashed var(--color-border); border-radius: var(--radius-card-inner); padding: 30px; text-align: center; background: var(--color-bg-secondary); } /* Utilities for Printing (van-ban.php) */ /* Lề theo đúng Nghị định 30/2020/NĐ-CP (thể thức văn bản hành chính): trên/dưới 20-25mm, trái 30-35mm (chừa chỗ đóng dấu/lưu hồ sơ), phải 15-20mm — trước đây 20mm đều 4 cạnh, lề trái thiếu so với mức tối thiểu quy định. */ .qq-skkn-print-container { width: 210mm; min-height: 297mm; margin: 0 auto; background: var(--color-bg-primary); padding: 20mm 20mm 20mm 30mm; box-shadow: var(--shadow-card); box-sizing: border-box; font-family: "Times New Roman", Times, serif; font-size: 14pt; line-height: 1.5; color: var(--color-text-primary); } @media print { /* Văn bản in ra giấy LUÔN nền trắng/chữ đen bất kể theme sáng/tối đang bật trên màn hình — dùng màu cứng có chủ đích ở đây (không phải vi phạm quy tắc token), vì giấy in vật lý không có khái niệm "theme". */ body { background: #fff; padding: 0; } .qq-skkn-print-container { background: #fff; color: #000; box-shadow: none; margin: 0; padding: 0; width: 100%; min-height: auto; } .qq-skkn-print-title-danger { color: #000 !important; } .qq-skkn-print-hide { display: none !important; } } /* XEM (chưa in) trên màn hình hẹp hơn khổ A4 (~794px) — width:210mm cố định phía trên tràn ngang toàn trang trên điện thoại/tablet nhỏ (rà soát responsive phát hiện: viền khung 375px bị đẩy tràn hẳn ra ngoài, chữ đầu dòng bị cắt cụt). Co container về 100% + giảm lề (20-30mm quá lớn so với màn 375px, ăn gần nửa chiều rộng) — CHỈ áp dụng khi XEM trên màn hình, giữ nguyên @media print phía trên cho đúng khổ giấy A4 thật khi in ra. Dùng chung breakpoint 768px với rule [style*="display: flex"] bên dưới (khối Quốc hiệu 2 cột tự wrap dọc đúng lúc container co lại, không lệch nhau giữa 2 rule) — không cần sửa từng file văn bản in riêng lẻ. */ @media screen and (max-width: 768px) { .qq-skkn-print-container { width: 100%; min-height: auto; padding: 16px; } } /* Thông báo (Chuông) */ .qq-skkn-notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--color-danger-text); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } .qq-skkn-notif-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 420px; max-height: 400px; overflow-y: auto; background: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-card-inner); box-shadow: var(--shadow-card); z-index: 1100; } .qq-skkn-notif-dropdown.show { display: block; } /* Thanh công cụ trên cùng — "Xem tất cả" trái, "Đánh dấu tất cả đã đọc" phải, cùng 1 hàng. */ .qq-skkn-notif-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--color-border); background: var(--color-bg-secondary); } .qq-skkn-notif-view-all { background: none; border: none; padding: 0; color: var(--color-primary-fg); font-size: 12.5px; font-weight: 600; text-decoration: none; } .qq-skkn-notif-view-all:hover { text-decoration: underline; } .qq-skkn-notif-mark-all { background: none; border: none; padding: 0; color: var(--color-primary-fg); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; } .qq-skkn-notif-mark-all:hover { text-decoration: underline; } /* "Xoá tất cả" — hàng riêng NGAY DƯỚI thanh công cụ, tách biệt rõ bằng màu danger vì đây là thao tác phá huỷ dữ liệu (khác 2 nút phía trên không mất dữ liệu gì). */ .qq-skkn-notif-clear-all { display: block; width: 100%; text-align: center; padding: 8px 16px; border: none; border-bottom: 1px solid var(--color-border); background: var(--color-danger-bg); color: var(--color-danger-text); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; } .qq-skkn-notif-clear-all:hover { text-decoration: underline; } /* "Hiển thị thêm" — cuối danh sách item, chỉ xuất hiện khi còn thông báo cũ hơn chưa tải (xem qqSkknRenderShowMoreBtn() trong Layout.php). Nhạt hơn 2 nút hành động phía trên (không viền dưới đậm, nền trong suốt) vì đây chỉ là điều hướng tải thêm, không phải hành động dữ liệu. */ .qq-skkn-notif-show-more { display: block; width: 100%; text-align: center; padding: 10px 16px; border: none; background: none; color: var(--color-primary-fg); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; } .qq-skkn-notif-show-more:hover { background: var(--color-bg-secondary); text-decoration: underline; } .qq-skkn-notif-show-more:disabled { cursor: default; opacity: 0.6; text-decoration: none; } .qq-skkn-notif-item { display: block; padding: 12px 16px; text-decoration: none; border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); font-size: 14px; } .qq-skkn-notif-item:last-child { border-bottom: none; } .qq-skkn-notif-item:hover { background: var(--color-bg-secondary); } .qq-skkn-notif-item.unread { font-weight: 700; background: var(--color-info-bg); } .qq-skkn-notif-empty { padding: 24px 16px; text-align: center; color: var(--color-text-muted); font-size: 14px; } /* Nội dung đầy đủ email thay thế khi SMTP tự động đang TẮT (xem QqSkkn\Core\Notifier) — luôn thường (không đậm) kể cả khi thông báo chưa đọc, để phân biệt rõ với tiêu đề. */ .qq-skkn-notif-body { font-weight: 400; font-size: 12.5px; color: var(--color-text-muted); margin-top: 6px; white-space: pre-line; line-height: 1.5; } /* Trang /thong-bao "Xem tất cả" — mỗi dòng dùng lại đúng tông màu unread của dropdown chuông. */ .qq-skkn-notif-page-item:hover { background: var(--color-bg-secondary) !important; } /* "Xem thêm/Thu gọn" cho khối text dài (4 trường Mô tả bản chất Sáng kiến ở các trang chi tiết read-only) — cắt theo max-height ~6 dòng (line-height ép 1.5, max-height = 9em nên tự thích ứng theo font-size từng nơi, không phải số px cố định), JS ở Layout.php (qqSkknInitCollapsible) chỉ hiện nút khi nội dung thực sự tràn quá khung, nội dung ngắn không có nút thừa. KHÔNG dùng -webkit-line-clamp: nội dung ở đây đi qua HtmlSanitizer::clean() có thể chứa thẻ
(xuống dòng), mà line-clamp tính sai layout dòng cuối khi có phần tử khối/br bên trong, gây lỗi CHỮ CHỒNG LÊN NHAU ở dòng bị cắt (đã xác nhận qua ảnh chụp thật của người dùng) — max-height + overflow:hidden đơn thuần không có lỗi này vì chỉ cắt thô theo chiều cao, không tính lại dòng. */ .qq-skkn-collapsible-content { max-height: 9em; line-height: 1.5; overflow: hidden; position: relative; } .qq-skkn-collapsible-content:not(.qq-skkn-collapsible-expanded)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6em; background: linear-gradient(to bottom, transparent, var(--color-bg-secondary)); pointer-events: none; } .qq-skkn-collapsible-content.qq-skkn-collapsible-expanded { max-height: none; overflow: visible; } .qq-skkn-collapsible-toggle { display: none; margin-top: 8px; padding: 0; border: none; background: none; color: var(--color-primary-fg); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; } .qq-skkn-collapsible-toggle:hover { text-decoration: underline; } /* Thanh tiến trình dạng stepper (Quy trình xét duyệt hồ sơ ở HoSo/Views/detail.php, Tiến trình hoạt động của Đợt ở Dot/Views/detail.php) — gộp về 1 định nghĩa DUY NHẤT ở đây, trước đây mỗi View tự viết 1 bản CSS gần giống nhau trong thẻ