/* ========================================================= pinlock.css — Màn hình "Mật khẩu 6 số" để xem Phiếu lương ở Cổng nhân viên. Lấy gần như NGUYÊN VĂN CSS từ file mockup loginmobile.html người dùng cung cấp (chỉ đổi tên các class sang tiền tố `pinlock-` để không đụng tới class dùng chung của phần còn lại — vd `.container`, `.input-box` — và đổi từ style cho sang cho 1 overlay position:fixed phủ kín màn hình, vì đây là 1 màn trong Cổng nhân viên chứ không phải trang độc lập). ========================================================= */ .pinlock-overlay { display: none; position: fixed; inset: 0; z-index: 4000; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: #0f0c29; overflow: hidden; /* Trang này vốn là 1 file HTML độc lập không có line-height nào bị ăn thừa kế từ ngoài vào — nhưng khi nhúng vào đây, `html, body { line-height: 1.5 }` của style.css sẽ thấm xuống các input bên trong (line-height LÀ thuộc tính kế thừa), đẩy lệch chữ/con trỏ xuống dưới trong các ô số. Reset lại `normal` ngay từ gốc để mọi phần tử con (h1, p, input, button...) không bị ảnh hưởng, đúng như khi mở file mockup gốc một mình. */ line-height: normal; } .pinlock-overlay.open { display: flex; } .pinlock-overlay::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, #667eea 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, #f093fb 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, #4facfe 0%, transparent 50%), radial-gradient(ellipse at 30% 90%, #764ba2 0%, transparent 50%); filter: blur(40px); animation: pinlockLiquidMove 20s ease-in-out infinite; z-index: 0; will-change: transform; transform: translateZ(0); } @keyframes pinlockLiquidMove { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-3%, 3%) scale(1.05); } } @media (prefers-reduced-motion: reduce) { .pinlock-overlay::before { animation: none; } .pinlock-container { animation: none; } .pinlock-input-box.success { animation: none; } } .pinlock-container { position: relative; z-index: 1; background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-radius: 28px; padding: 36px 22px 28px; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); text-align: center; width: 100%; max-width: 400px; animation: pinlockSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } @keyframes pinlockSlideUp { from { opacity: 0; transform: translateY(30px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .pinlock-close-btn { position: absolute; top: -14px; left: -6px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; } .pinlock-close-btn:active { transform: scale(0.92); } .pinlock-icon-wrapper { width: 60px; height: 60px; margin: 0 auto 18px; background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .pinlock-icon-wrapper svg { width: 30px; height: 30px; fill: #fff; } .pinlock-container h1 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 6px; letter-spacing: -0.3px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .pinlock-subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-bottom: 26px; line-height: 1.5; } .pinlock-inputs { display: flex; gap: 8px; justify-content: center; margin-bottom: 22px; } .pinlock-input-wrapper { position: relative; flex: 1; max-width: 52px; } .pinlock-input-box { width: 100%; aspect-ratio: 1 / 1.15; height: auto; border: 1.5px solid rgba(255, 255, 255, 0.25); border-radius: 14px; background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-weight: 700; line-height: normal; color: #fff; text-align: center; outline: none; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; caret-color: #fff; padding: 0; font-size: max(16px, 24px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1); -webkit-appearance: none; appearance: none; touch-action: manipulation; } .pinlock-input-box:focus { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.1); } .pinlock-input-box.filled { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.14); } .pinlock-input-box.success { border-color: rgba(34, 197, 94, 0.7); background: rgba(34, 197, 94, 0.18); color: #4ade80; animation: pinlockSuccessPop 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 16px rgba(34, 197, 94, 0.3); } @keyframes pinlockSuccessPop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } } .pinlock-checkmark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 26px; height: 26px; opacity: 0; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; pointer-events: none; z-index: 2; filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.8)); } .pinlock-input-box.success + .pinlock-checkmark { transform: translate(-50%, -50%) scale(1); opacity: 1; } .pinlock-input-box.success { color: transparent; } .pinlock-checkmark path { stroke-dasharray: 30; stroke-dashoffset: 30; } .pinlock-input-box.success + .pinlock-checkmark path { animation: pinlockDrawCheck 0.4s 0.1s forwards cubic-bezier(0.16, 1, 0.3, 1); } @keyframes pinlockDrawCheck { to { stroke-dashoffset: 0; } } .pinlock-message { font-size: 13px; font-weight: 600; min-height: 18px; margin-bottom: 16px; transition: opacity 0.3s ease; opacity: 0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .pinlock-message.show { opacity: 1; } .pinlock-message.error { color: #fca5a5; } .pinlock-message.success-msg { color: #4ade80; } @keyframes pinlockShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } } .pinlock-inputs.error { animation: pinlockShake 0.35s ease; } .pinlock-inputs.error .pinlock-input-box { border-color: rgba(239, 68, 68, 0.6); background: rgba(239, 68, 68, 0.12); } .pinlock-btn-verify { width: 100%; padding: 15px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 14px; background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease, opacity 0.2s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 20px rgba(0, 0, 0, 0.15); letter-spacing: 0.3px; -webkit-appearance: none; appearance: none; touch-action: manipulation; min-height: 48px; } .pinlock-btn-verify:not(:disabled):active { transform: scale(0.97); background: rgba(255, 255, 255, 0.22); } .pinlock-btn-verify:disabled { opacity: 0.4; cursor: not-allowed; } .pinlock-btn-verify.verified { background: rgba(34, 197, 94, 0.25); border-color: rgba(34, 197, 94, 0.5); color: #4ade80; } .pinlock-resend { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, 0.6); } .pinlock-resend a { color: rgba(255, 255, 255, 0.95); font-weight: 600; text-decoration: none; cursor: pointer; padding: 8px 4px; display: inline-block; margin: -8px -4px; } .pinlock-resend a:active { opacity: 0.7; } .pinlock-resend a.disabled { color: rgba(255, 255, 255, 0.3); pointer-events: none; } @media (max-width: 375px) { .pinlock-container { padding: 28px 18px 24px; border-radius: 24px; } .pinlock-icon-wrapper { width: 52px; height: 52px; margin-bottom: 14px; } .pinlock-icon-wrapper svg { width: 26px; height: 26px; } .pinlock-container h1 { font-size: 18px; } .pinlock-subtitle { font-size: 12px; margin-bottom: 20px; } .pinlock-inputs { gap: 6px; margin-bottom: 18px; } .pinlock-input-box { border-radius: 12px; } .pinlock-btn-verify { padding: 14px; font-size: 15px; } } @media (max-height: 550px) { .pinlock-overlay { align-items: flex-start; padding-top: 16px; } .pinlock-container { padding: 20px 20px 18px; } .pinlock-icon-wrapper { display: none; } .pinlock-container h1 { margin-top: 4px; } .pinlock-subtitle { margin-bottom: 16px; } .pinlock-inputs { margin-bottom: 14px; } } @media (min-width: 480px) { .pinlock-inputs { gap: 10px; } .pinlock-input-wrapper { max-width: 56px; } .pinlock-container h1 { font-size: 22px; } }