body.auth-page,body.home-page{min-height:100vh;background:var(--bg-home);color:var(--fg-home);font-family:Inter,sans-serif;display:flex;align-items:center;justify-content:center;padding:40px 20px;position:relative;overflow-x:hidden;overflow-y:auto}.shape{position:fixed;filter:blur(90px);z-index:-1;opacity:.7;animation:float 12s ease-in-out infinite}@keyframes float{0%{transform:translate(0) scale(1)}33%{transform:translate(40px,-60px) scale(1.1)}66%{transform:translate(-30px,30px) scale(.9)}to{transform:translate(0) scale(1)}}.shape-1{top:-5%;left:-10%;width:600px;height:600px;background:#c7d2fe;border-radius:50%}body.dark-mode .shape{opacity:.12;filter:blur(110px)}body.dark-mode .shape-1{background:#4338ca}body.dark-mode .shape-2{background:#9d174d}body.dark-mode .shape-3{background:#075985}.shape-2{bottom:-10%;right:-5%;width:500px;height:500px;background:#fbcfe8;border-radius:50%;animation-delay:-6s}.shape-3{top:35%;left:35%;width:450px;height:450px;background:#bae6fd;border-radius:50%;animation-delay:-3s}.homepage{text-align:center;width:100%;max-width:1200px;padding:50px 40px;background:var(--card-home-glass);border:1px solid var(--border-home);border-top:1px solid rgba(255,255,255,.4);border-left:1px solid rgba(255,255,255,.4);border-radius:30px;box-shadow:0 30px 60px -15px #00000014,0 0 0 1px #ffffff1a inset;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);animation:fadeInUp .8s cubic-bezier(.2,.8,.2,1);position:relative;z-index:10;transition:background .4s ease,border-color .4s ease,box-shadow .4s ease}body.dark-mode .homepage{border-color:#6366f126;border-top-color:#ffffff0d;border-left-color:#ffffff0d;box-shadow:0 30px 60px -15px #0006,0 0 0 1px #6366f114 inset,0 0 80px -20px #6366f11f}@keyframes fadeInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.logo{max-width:120px;height:auto;margin-bottom:20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.05))}h1{font-size:2.2rem;margin-bottom:10px;font-weight:700;color:var(--fg-home);letter-spacing:-.5px;text-shadow:0 2px 10px rgba(0,0,0,.1)}body.dark-mode h1{color:#f1f5f9;text-shadow:0 0 40px rgba(99,102,241,.3),0 2px 8px rgba(0,0,0,.3)}.subtitle{font-size:1rem;color:#64748b;margin-bottom:50px;font-weight:400;transition:color .3s}body.dark-mode .subtitle{color:#94a3b8}.homepage-section{margin-bottom:40px;text-align:left}.homepage-section h2{font-size:1.3rem;color:#334155;margin-bottom:20px;padding-bottom:10px;border-bottom:2px dashed #cbd5e1;display:flex;align-items:center;gap:10px;transition:color .3s,border-color .3s}body.dark-mode .homepage-section h2{color:#e2e8f0;border-bottom-color:#6366f140}.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.dashboard-card{background:var(--card-home-glass);border:1px solid var(--border-home);border-radius:20px;padding:30px 20px;transition:all .35s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;box-shadow:0 4px 10px #00000008;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.dashboard-card:before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:skew(-20deg);transition:left .6s ease;pointer-events:none}.dashboard-card:hover:before{left:150%}body.dark-mode .dashboard-card{background:#131f34e6;border-color:#334b7380;box-shadow:0 4px 20px #0003}.dashboard-card:hover{transform:translateY(-8px);background:#fffffff5;border-color:#fff;box-shadow:0 20px 40px -10px #0000001f,0 0 20px #fffc inset}body.dark-mode .dashboard-card:hover{background:#1e3050f2;border-color:#6366f166;box-shadow:0 20px 50px -10px #0006,0 0 0 1px #6366f133 inset,0 0 30px -5px #6366f126;transform:translateY(-8px)}.dashboard-card:hover .card-icon{transform:scale(1.1) rotate(5deg)}.card-icon{font-size:3rem;margin-bottom:20px;transition:transform .4s cubic-bezier(.34,1.56,.64,1);color:var(--accent);background-clip:text;-webkit-background-clip:text;display:inline-block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.1))}.i-sukien,.i-phunu,.i-mtt,.i-ads,.i-compare,.i-ai,.i-ttcc{-webkit-text-fill-color:transparent}.i-sukien{background-image:linear-gradient(135deg,#ef4444,#dc2626)}.i-sukien-lam{background-image:linear-gradient(135deg,#f97316,#ea580c)}.i-phunu{background-image:linear-gradient(135deg,#d946ef,#c026d3)}.i-mtt{background-image:linear-gradient(135deg,#3b82f6,#2563eb)}.i-ads{background-image:linear-gradient(135deg,#eab308,#ca8a04)}.i-compare{background-image:linear-gradient(135deg,#22c55e,#16a34a)}.i-ai{background-image:linear-gradient(135deg,#a855f7,#7e22ce)}.i-ttcc{background-image:linear-gradient(135deg,#14b8a6,#0d9488)}body.dark-mode .card-title{color:#e2e8f0;font-weight:700}body.dark-mode .card-description{color:#94a3b8}.card-title{font-size:1.1rem;font-weight:600;color:#1e293b;margin-bottom:8px;transition:color .3s}.card-description{color:#64748b;font-size:.85rem;line-height:1.5;transition:color .3s}.card-content{text-align:center}footer{margin-top:50px;color:#94a3b8;font-size:.85rem;border-top:1px solid #e2e8f0;padding-top:20px;transition:color .3s,border-color .3s}body.dark-mode footer{color:#64748b;border-top-color:#6366f126}.float-btn{position:fixed;z-index:100;padding:12px 24px;width:auto;border-radius:50px;font-weight:600;font-size:.9rem;cursor:pointer;border:1px solid rgba(255,255,255,.8);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:8px;box-shadow:0 4px 15px #0000000d;background:#ffffffbf;color:#475569}body.dark-mode .float-btn{background:#162032d9;border-color:#334b7399;color:#94a3b8;box-shadow:0 4px 15px #00000040}#logoutBtn{top:30px;right:30px}#logoutBtn:hover{background:#fee2e2;color:#dc2626;border-color:#fca5a5;transform:translateY(-2px);box-shadow:0 8px 20px #dc262626}#adminBtn{bottom:30px;right:30px;background:linear-gradient(135deg,#4f46e5,#3b82f6);color:#fff;border:none;padding:14px 28px;box-shadow:0 10px 20px -5px #4f46e559}#adminBtn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 15px 25px -5px #4f46e573;filter:brightness(1.05)}.login-container{position:relative;z-index:10;width:100%;max-width:440px;background:var(--card-home-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-home);border-top:1px solid rgba(255,255,255,.4);border-left:1px solid rgba(255,255,255,.4);border-radius:24px;padding:50px 40px;box-shadow:0 25px 50px -12px #0000000d,0 0 0 1px #ffffff1a inset,0 10px 15px -3px #00000005;margin:20px;transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1)}.login-container:hover{transform:translateY(-5px);box-shadow:0 35px 60px -15px #00000014,0 0 0 1px #ffffff80 inset,0 20px 25px -5px #0000000a}.header-section{text-align:center;margin-bottom:40px}.logo-wrapper{width:80px;height:80px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;background:#fffc;border-radius:20px;box-shadow:0 10px 25px -5px #0000000d;border:1px solid rgba(255,255,255,1)}.logo-wrapper img{max-width:50px;height:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.05));transition:transform .3s ease}.login-container:hover .logo-wrapper img{transform:scale(1.05) rotate(5deg)}.form-group{position:relative;margin-bottom:25px}.form-group label{display:block;color:#334155;font-size:13px;margin-bottom:8px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}.input-wrapper{position:relative}.input-wrapper i.icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#94a3b8;transition:.3s;font-size:15px}input{width:100%;padding:15px 15px 15px 50px;background:var(--card);border:1px solid var(--border);border-radius:14px;color:var(--fg);font-size:15px;font-weight:500;transition:all .3s ease;box-shadow:0 2px 4px #00000003 inset}input::placeholder{color:var(--muted);font-weight:400}input:focus{outline:none;border-color:#6366f1;background:#fff;box-shadow:0 0 0 4px #6366f126,0 2px 4px #00000003 inset}input:focus+i.icon{color:#6366f1}.toggle-password{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:#94a3b8;cursor:pointer;font-size:14px;transition:.3s}.toggle-password:hover{color:#334155}button{width:100%;padding:16px;background:linear-gradient(135deg,#4f46e5,#3b82f6);color:#fff;border:none;border-radius:14px;font-size:16px;font-weight:600;letter-spacing:.5px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 20px -5px #4f46e559;margin-top:15px;position:relative;overflow:hidden}button:after{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(to right,#fff0,#ffffff4d,#fff0);transform:skew(-20deg);transition:all .7s ease}button:hover:after{left:150%}button:hover{transform:translateY(-3px);box-shadow:0 15px 25px -5px #4f46e573;filter:brightness(1.05)}button:active{transform:translateY(0);box-shadow:0 5px 10px -5px #4f46e54d}button:disabled{background:#cbd5e1;box-shadow:none;cursor:not-allowed;transform:none;color:#f1f5f9}.message{margin-top:20px;padding:12px;border-radius:8px;text-align:center;font-size:13px;display:none;animation:fadeIn .3s ease}.message.error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626}.message.success{background:#f0fdf4;border:1px solid #bbf7d0;color:#16a34a}.footer-text{text-align:center;margin-top:25px;color:#64748b;font-size:13px}.footer-text a{color:#3b82f6;text-decoration:none;font-weight:600;transition:.3s}.footer-text a:hover{color:#1d4ed8;text-decoration:underline}@media (max-width: 992px){.dashboard-grid{grid-template-columns:repeat(2,1fr)}.homepage{padding:40px 30px}}@media (max-width: 600px){.dashboard-grid{grid-template-columns:1fr}.homepage{padding:30px 20px;margin-top:60px}.dashboard-card{flex-direction:row;justify-content:flex-start;text-align:left;gap:20px;padding:20px;min-height:auto}.card-icon{margin-bottom:0;font-size:2.5rem}.card-content{display:flex;flex-direction:column;text-align:left}.login-container{padding:30px 25px}}