/* ========================================================= * V74.1.34 - GHI CHÚ FULL CODE * --------------------------------------------------------- * File: assets/css/app-login-mobile.css * * Mục đích: * - Ghi chú rõ vai trò CSS để các trang sau giữ thống nhất giao diện. * - Không tự ý đổi màu/nút/bảng/form nếu yêu cầu chỉ là bổ sung ghi chú. * - CSS riêng từng trang chỉ dùng cho phần đặc thù, còn nút/bảng/form * nên ưu tiên class chung app-*. * ========================================================= */ /* ========================================================= ERP LOGIN V5 - MOBILE COMPACT FIX --------------------------------------------------------- Dán toàn bộ đoạn này vào CUỐI file: assets/css/app-login.css Mục đích: - Khi mở bằng điện thoại chỉ hiển thị form đăng nhập gọn. - Ẩn phần giới thiệu ERP bên trái. - Giảm kích thước logo, tiêu đề, input, nút đăng nhập. - Giảm khoảng trắng để không bị dài màn hình. - Tương thích PHP 5.3.4 vì đây chỉ là CSS. ========================================================= */ /* ========================================================= 1. MOBILE / TABLET NHỎ --------------------------------------------------------- Áp dụng cho màn hình nhỏ hơn 760px. Đây là kích thước thường gặp trên điện thoại. ========================================================= */ @media (max-width: 760px) { /* * Ẩn toàn bộ cột trái ERP Portal trên điện thoại. * Lý do: * - Trên mobile người dùng chỉ cần đăng nhập nhanh. * - Không cần hiển thị mô tả dài, module ERP, giới thiệu hệ thống. */ .app-erp-left { display: none !important; } /* * Khung tổng chỉ còn 1 cột là form đăng nhập. */ .app-erp-login-page { display: block !important; min-height: 100vh; } /* * Nền mobile sáng, nhẹ, giống dashboard. */ .app-erp-login-body { background: #eef3f8 !important; } /* * Khu vực chứa form. * Giảm padding để form không bị quá to. */ .app-erp-right { min-height: 100vh; padding: 14px !important; align-items: center !important; justify-content: center !important; } /* * Card login gọn hơn. */ .app-erp-login-card { max-width: 430px !important; border-radius: 22px !important; padding: 22px !important; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10) !important; } /* * Header form giảm khoảng cách. */ .app-erp-login-header { margin-bottom: 16px !important; } /* * Logo nhỏ lại. */ .app-erp-login-logo { width: 54px !important; height: 54px !important; border-radius: 16px !important; font-size: 24px !important; margin-bottom: 12px !important; box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18) !important; } /* * Ẩn chip "Secure ERP Login" để gọn hơn. */ .app-erp-login-chip { display: none !important; } /* * Tiêu đề nhỏ lại. */ .app-erp-login-header h2 { font-size: 28px !important; line-height: 1.15 !important; margin-bottom: 6px !important; } .app-erp-login-header h3 { font-size: 28px !important; line-height: 1.15 !important; margin-bottom: 6px !important; } /* * Mô tả dưới tiêu đề ngắn gọn. */ .app-erp-login-header p { font-size: 14px !important; line-height: 1.45 !important; margin-bottom: 0 !important; } /* * Giảm khoảng cách mỗi dòng form. */ .app-erp-form-group { margin-bottom: 14px !important; } .app-erp-form-group label { font-size: 14px !important; margin-bottom: 6px !important; } /* * Input thấp hơn, dễ bấm nhưng không quá to. */ .app-erp-input-box input { min-height: 48px !important; border-radius: 15px !important; font-size: 15px !important; padding-left: 44px !important; } /* * Icon trong input nhỏ lại. */ .app-erp-input-icon { left: 14px !important; font-size: 17px !important; } /* * Nút hiện mật khẩu nhỏ và gọn hơn. */ .app-erp-password-toggle { right: 7px !important; min-width: 58px !important; height: 34px !important; margin-top: -17px !important; border-radius: 11px !important; font-size: 14px !important; } /* * Chừa khoảng phải cho nút Hiện. */ .app-erp-input-box input[type="password"], .app-erp-input-box input[type="text"] { padding-right: 76px !important; } /* * Dòng bảo mật: chỉ giữ phần "Bảo mật đăng nhập nội bộ". * Ẩn dòng "PHP 5.3.4 compatible" trên mobile. */ .app-erp-login-meta { margin: 2px 0 16px 0 !important; font-size: 13px !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; } .app-erp-login-meta div:last-child { display: none !important; } /* * Nút đăng nhập gọn hơn. */ .app-erp-login-button { min-height: 50px !important; border-radius: 16px !important; font-size: 16px !important; box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18) !important; } /* * Footer nhỏ lại. */ .app-erp-login-note { margin-top: 14px !important; } .app-erp-login-note p { font-size: 12px !important; margin: 3px 0 !important; } /* * Ẩn dòng phân hệ ở footer để form gọn. */ .app-erp-login-note p:last-child { display: none !important; } } /* ========================================================= 2. MOBILE RẤT NHỎ --------------------------------------------------------- Áp dụng cho màn hình nhỏ hơn 420px. ========================================================= */ @media (max-width: 420px) { /* * Căn form sát hơn trên màn hình nhỏ. */ .app-erp-right { padding: 10px !important; } .app-erp-login-card { padding: 18px !important; border-radius: 20px !important; } .app-erp-login-logo { width: 48px !important; height: 48px !important; font-size: 22px !important; } .app-erp-login-header h2 { font-size: 25px !important; } .app-erp-login-header p { font-size: 13px !important; } .app-erp-input-box input { min-height: 46px !important; font-size: 14px !important; } .app-erp-login-button { min-height: 48px !important; font-size: 15px !important; } } /* ========================================================= 3. MÀN HÌNH THẤP --------------------------------------------------------- Dùng cho điện thoại có chiều cao thấp. Form sẽ nằm phía trên một chút để dễ thao tác. ========================================================= */ @media (max-height: 720px) and (max-width: 760px) { .app-erp-right { align-items: flex-start !important; padding-top: 14px !important; } .app-erp-login-card { margin-top: 0 !important; } .app-erp-login-note { display: none !important; } }