/* ========================================================= * V74.1.34 - GHI CHÚ FULL CODE * --------------------------------------------------------- * File: assets/css/app-login.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 - CSS CO GHI CHU CHI TIET --------------------------------------------------------- File: assets/css/app-login.css Muc tieu: - Tao trang login theo huong ERP Portal - Dong bo phong cach dashboard hien dai - Dep tren desktop va mobile - Khong anh huong cac trang dashboard khac Cach dung trong login.php: ========================================================= */ /* ========================================================= 1. BODY CUA TRANG LOGIN ERP --------------------------------------------------------- Class nay chi dat trong login.php: ========================================================= */ .app-erp-login-body { margin: 0; min-height: 100vh; background: #eef3f8; color: #0f172a; } /* ========================================================= 2. KHUNG TONG --------------------------------------------------------- Desktop: - Chia 2 cot - Cot trai: ERP Portal - Cot phai: Form dang nhap Mobile: - Responsive se chuyen ve 1 cot ========================================================= */ .app-erp-login-page { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 0.85fr; } /* ========================================================= 3. COT TRAI - ERP PORTAL ========================================================= */ .app-erp-left { position: relative; overflow: hidden; color: #ffffff; /* * Nen xanh theo style dashboard ERP. */ background: linear-gradient(135deg, rgba(7, 26, 70, 0.98), rgba(30, 64, 175, 0.94)), #071a46; display: flex; align-items: center; justify-content: center; padding: 46px; } /* * Hinh tron trang tri nen. */ .app-erp-bg-circle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.07); } .circle-one { width: 260px; height: 260px; top: -90px; left: -90px; } .circle-two { width: 360px; height: 360px; right: -140px; bottom: -140px; } /* * Noi dung cot trai. */ .app-erp-left-inner { position: relative; z-index: 2; width: 100%; max-width: 720px; } /* ========================================================= 4. LOGO + THUONG HIEU ========================================================= */ .app-erp-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 46px; } .app-erp-brand-logo { width: 82px; height: 82px; border-radius: 24px; background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.20); display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 28px; font-weight: bold; letter-spacing: 1px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.20); } .app-erp-brand-text h1 { margin: 0; color: #ffffff; font-size: 40px; line-height: 1.1; } .app-erp-brand-text p { margin: 8px 0 0 0; color: #dbeafe; font-size: 16px; } /* ========================================================= 5. HERO TEXT ========================================================= */ .app-erp-hero { margin-bottom: 34px; } .app-erp-label { display: inline-block; margin-bottom: 18px; padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #dbeafe; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 13px; font-weight: bold; letter-spacing: 0.3px; } .app-erp-hero h2 { margin: 0 0 18px 0; color: #ffffff; font-size: 48px; line-height: 1.14; max-width: 690px; } .app-erp-hero p { margin: 0; color: #dbeafe; font-size: 18px; line-height: 1.75; max-width: 660px; } /* ========================================================= 6. MODULE GRID --------------------------------------------------------- Hien thi cac phan he ERP ngay tren trang login. ========================================================= */ .app-erp-module-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 14px; } .app-erp-module { padding: 16px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 16px 35px rgba(0, 0, 0, 0.08); } .app-erp-module span { display: block; font-size: 24px; margin-bottom: 10px; } .app-erp-module strong { display: block; color: #ffffff; font-size: 15px; } /* ========================================================= 7. FOOTER COT TRAI ========================================================= */ .app-erp-left-footer { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #dbeafe; font-size: 14px; } .app-erp-left-footer div { display: flex; align-items: center; gap: 8px; } .app-erp-status-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; display: inline-block; } /* ========================================================= 8. COT PHAI - LOGIN FORM ========================================================= */ .app-erp-right { display: flex; align-items: center; justify-content: center; padding: 38px; background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.10), transparent 30%), radial-gradient(circle at bottom left, rgba(37, 99, 235, 0.08), transparent 28%), #eef3f8; } /* ========================================================= 9. CARD LOGIN ========================================================= */ .app-erp-login-card { width: 100%; max-width: 500px; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 30px; padding: 34px; box-shadow: 0 30px 75px rgba(15, 23, 42, 0.12); } /* ========================================================= 10. HEADER CARD LOGIN ========================================================= */ .app-erp-login-header { margin-bottom: 24px; } .app-erp-login-logo { width: 74px; height: 74px; border-radius: 22px; background: linear-gradient(135deg, #1d4ed8, #2563eb); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: bold; box-shadow: 0 16px 32px rgba(37, 99, 235, 0.22); margin-bottom: 16px; } .app-erp-login-chip { display: inline-block; padding: 7px 12px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; font-size: 12px; font-weight: bold; margin-bottom: 14px; } .app-erp-login-header h2 { margin: 0 0 8px 0; color: #1d4ed8; font-size: 36px; line-height: 1.12; } .app-erp-login-header h3 { margin: 0 0 8px 0; color: #1d4ed8; font-size: 30px; line-height: 1.12; } .app-erp-login-header p { margin: 0; color: #64748b; font-size: 16px; line-height: 1.6; } /* ========================================================= 11. FORM GROUP ========================================================= */ .app-erp-form-group { margin-bottom: 18px; } .app-erp-form-group label { display: block; margin-bottom: 8px; color: #334155; font-weight: bold; font-size: 15px; } /* ========================================================= 12. INPUT BOX CO ICON ========================================================= */ .app-erp-input-box { position: relative; display: flex; align-items: center; } .app-erp-input-icon { position: absolute; left: 15px; top: 50%; margin-top: -10px; font-size: 18px; line-height: 20px; z-index: 2; } .app-erp-input-box input { width: 100%; min-height: 56px; border: 1px solid #cbd5e1; border-radius: 18px; padding: 0 16px 0 48px; background: #ffffff; color: #0f172a; font-size: 16px; outline: none; transition: all 0.2s ease; } .app-erp-input-box input:focus { border-color: #2563eb; box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.10); } /* * Tat ca input trong box co padding-right de tranh bi nut Hien che mat chu. */ .app-erp-input-box input[type="password"], .app-erp-input-box input[type="text"] { padding-right: 92px; } /* ========================================================= 13. NUT HIEN / AN MAT KHAU ========================================================= */ .app-erp-password-toggle { position: absolute; right: 8px; top: 50%; margin-top: -19px; min-width: 72px; height: 38px; border: none; border-radius: 12px; background: #e0f2fe; color: #075985; font-weight: bold; cursor: pointer; z-index: 3; } /* ========================================================= 14. META LOGIN ========================================================= */ .app-erp-login-meta { margin: 6px 0 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #64748b; font-size: 13px; } .app-erp-login-meta div { display: flex; align-items: center; gap: 7px; } .app-erp-secure-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; display: inline-block; } /* ========================================================= 15. NUT DANG NHAP ========================================================= */ .app-erp-login-button { width: 100%; min-height: 58px; border: none; border-radius: 18px; background: linear-gradient(135deg, #1d4ed8, #2563eb); color: #ffffff; font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 0 18px 32px rgba(37, 99, 235, 0.22); transition: all 0.2s ease; } .app-erp-login-button:hover { transform: translateY(-1px); filter: brightness(1.03); } /* ========================================================= 16. NOTE CUOI FORM ========================================================= */ .app-erp-login-note { margin-top: 22px; text-align: center; } .app-erp-login-note p { margin: 4px 0; color: #94a3b8; font-size: 13px; } /* ========================================================= 17. RESPONSIVE TABLET ========================================================= */ @media (max-width: 1180px) { .app-erp-login-page { grid-template-columns: 1fr; } .app-erp-left { padding: 36px 24px; } .app-erp-left-inner { max-width: 100%; } .app-erp-hero h2 { font-size: 38px; } .app-erp-module-grid { grid-template-columns: repeat(4, minmax(110px, 1fr)); } .app-erp-right { padding: 24px; } } /* ========================================================= 18. RESPONSIVE MOBILE ========================================================= */ @media (max-width: 760px) { .app-erp-left { padding: 30px 18px; } .app-erp-brand { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 30px; } .app-erp-brand-logo { width: 70px; height: 70px; font-size: 24px; border-radius: 20px; } .app-erp-brand-text h1 { font-size: 32px; } .app-erp-hero h2 { font-size: 29px; } .app-erp-hero p { font-size: 15px; line-height: 1.65; } .app-erp-module-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 12px; } .app-erp-left-footer { flex-direction: column; align-items: flex-start; } .app-erp-right { padding: 18px; } .app-erp-login-card { padding: 24px; border-radius: 24px; } .app-erp-login-header h2 { font-size: 30px; } .app-erp-input-box input { min-height: 54px; font-size: 15px; } .app-erp-login-meta { flex-direction: column; align-items: flex-start; } } /* ========================================================= 19. RESPONSIVE MOBILE NHO ========================================================= */ @media (max-width: 460px) { .app-erp-hero h2 { font-size: 25px; } .app-erp-module-grid { grid-template-columns: 1fr; } .app-erp-login-card { padding: 20px; border-radius: 22px; } .app-erp-login-logo { width: 64px; height: 64px; font-size: 26px; border-radius: 18px; } .app-erp-login-header h2 { font-size: 28px; } .app-erp-password-toggle { min-width: 66px; } .app-erp-login-button { min-height: 54px; font-size: 17px; } }