/* ===== LOGIN ONLY ===== */ /* Font (nếu bạn link Inter ở thì giữ như này) */ :root{ --bg-deep: #070707; --bg-deep2:#0b0706; --amber1:#ffb15a; --amber2:#ff7a18; --amber3:#ff3d2e; --amber4:#ffd08a; --card: rgba(14, 10, 9, 0.62); --line: rgba(255, 180, 120, 0.14); --text: #f5f5f5; --muted: rgba(245,245,245,0.72); --radius: 18px; } *{ box-sizing: border-box; } html, body{ height: 100%; } body.login-page{ margin:0; min-height:100vh; font-family:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:#fff; /* NỀN CAM RỰC - KHÔNG CÓ CONIC => KHÔNG CÒN ĐƯỜNG THẲNG */ background: radial-gradient(1400px 950px at 12% 10%, rgba(255, 214, 120, .82), transparent 58%), radial-gradient(1200px 900px at 92% 16%, rgba(255, 120, 0, .72), transparent 60%), radial-gradient(1100px 900px at 78% 90%, rgba(255, 45, 0, .52), transparent 62%), radial-gradient(1000px 850px at 18% 86%, rgba(255, 140, 0, .32), transparent 64%), /* lớp glow mềm tăng chiều sâu (không tạo seam) */ radial-gradient(900px 700px at 55% 45%, rgba(255, 190, 90, .18), transparent 60%), linear-gradient(135deg, #030303 0%, #0b0503 45%, #030303 100%); background-attachment: fixed; position: relative; overflow: hidden; display:flex; align-items:center; justify-content:center; } /* Grain + glow mịn (rực mà vẫn sang) */ body.login-page::before{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: /* hạt mịn */ repeating-linear-gradient( 0deg, rgba(255,255,255,.028) 0px, rgba(255,255,255,.028) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px ), /* glow mịn phủ toàn nền */ radial-gradient(circle at 50% 35%, rgba(255, 180, 70, .12), transparent 55%); mix-blend-mode: overlay; opacity: .55; } /* Vignette tối viền để card nổi */ body.login-page::after{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 62%, rgba(0,0,0,.78) 100% ); } /* đảm bảo card nổi lên */ .login-container{ position: relative; z-index: 1; } .login-card{ position: relative; z-index: 1; } .login-title{ text-align: center; width: 100%; margin: 10px 0 18px; font-size: 30px; font-weight: 800; letter-spacing: 0.4px; } .login-logo{ /* x10 so với 96px ≈ 960px (rất to). clamp giúp không vỡ giao diện */ width: clamp(240px, 1000vw, 50px); margin-bottom: 8px; height: auto; display:block; margin: 0 auto 14px; /* làm nét và nổi */ filter: drop-shadow(0 16px 30px rgba(0,0,0,.55)); } .login-card h1{ margin: 0 0 6px; font-size: 28px; font-weight: 700; letter-spacing: 0.2px; } .login-card .subtitle{ margin: 0 0 22px; font-size: 14px; color: var(--muted); } .form-group{ text-align:left; margin-bottom: 16px; } .form-group label{ display:block; font-size: 13px; margin-bottom: 6px; color: rgba(245,245,245,0.82); } .form-group input{ width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.28); color: #fff; outline: none; } .form-group input:focus{ border-color: rgba(255, 170, 80, 0.70); box-shadow: 0 0 0 3px rgba(255, 150, 50, 0.18); } .login-card button{ width:100%; margin-top: 6px; padding: 12px 0; border: none; border-radius: 12px; cursor: pointer; font-size: 15px; font-weight: 700; color: #2b1a0e; background: linear-gradient(135deg, rgba(255, 177, 90, .95), rgba(255, 122, 24, .95)); box-shadow: 0 12px 30px rgba(255, 140, 60, .20); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; } .login-card button:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 34px rgba(255, 140, 60, .28); }