*{box-sizing:border-box}body{margin:0;font-family:Tahoma,"Noto Sans Thai",Arial,sans-serif;background:#eef4fb;color:#132238}.wrap{max-width:1180px;margin:auto;padding:18px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:12px 16px;margin-bottom:14px;box-shadow:0 6px 18px rgba(15,23,42,.07)}.topbar a{background:#ef4444;color:#fff;text-decoration:none;padding:8px 12px;border-radius:12px;font-weight:700}.hero{display:flex;gap:18px;align-items:center;background:linear-gradient(135deg,#0b57d0,#16a3ff);color:#fff;border-radius:28px;padding:26px;margin-bottom:18px;box-shadow:0 12px 32px rgba(11,87,208,.25)}.logo{width:76px;height:76px;border-radius:24px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:24px}.sub{font-weight:700;letter-spacing:.08em;opacity:.95}.sub a{color:#fff;text-decoration:none}h1{margin:6px 0;font-size:clamp(26px,4vw,44px)}p{margin:0;color:inherit;line-height:1.55}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:18px}.card{position:relative;display:block;background:#fff;color:#132238;text-decoration:none;border-radius:26px;padding:26px;min-height:245px;box-shadow:0 8px 24px rgba(15,23,42,.08);border:1px solid rgba(11,87,208,.08);transition:.2s}.card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(15,23,42,.14)}.badge{position:absolute;right:18px;top:18px;background:#eff6ff;color:#0b57d0;border-radius:99px;padding:6px 10px;font-size:12px;font-weight:700}.icon{font-size:58px;margin-top:10px}.card h2{font-size:23px;margin:14px 0 8px}.card p{color:#5b667a}.card span{position:absolute;bottom:24px;left:26px;color:#0b57d0;font-weight:700}footer{text-align:center;color:#65758b;padding:26px}.panel{background:#fff;border-radius:26px;padding:22px;margin-bottom:18px;box-shadow:0 8px 24px rgba(15,23,42,.08)}label{display:block;font-weight:700;margin:14px 0 8px}input[type=file],input[type=text],input[type=password]{width:100%;border:1px solid #dbe4f0;border-radius:16px;padding:14px;font-size:16px;background:#fbfdff}.hint{color:#64748b;margin-top:6px;line-height:1.55}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}button,.full-btn{border:0;border-radius:16px;padding:14px 20px;background:#0b57d0;color:#fff;font-size:16px;font-weight:700;cursor:pointer}.full-btn{width:100%;margin-top:18px}button:hover,.full-btn:hover{background:#0849b5}.alert{background:#fff1f2;color:#be123c;border-radius:16px;padding:14px;margin-bottom:14px}.warn{background:#fff7ed;color:#c2410c;border-radius:16px;padding:14px;margin:14px 0}.info{background:#eff6ff;color:#0b57d0;border-radius:16px;padding:14px;margin:14px 0}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:12px 0}.stats div{background:#f6f9ff;border-radius:18px;padding:16px}.stats b{display:block;font-size:32px;color:#0b57d0}.stats small{color:#64748b}.tablebox{overflow:auto;border:1px solid #e5e7eb;border-radius:18px}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:10px;border-bottom:1px solid #e5e7eb;text-align:left;white-space:nowrap}th{background:#f8fafc}.download-box{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#ecfdf5;border:1px solid #bbf7d0;border-radius:20px;padding:16px;margin:14px 0 18px}.download-box b{color:#047857;font-size:18px}.download-box p{margin:4px 0 0;color:#64748b}.download-btn{display:inline-block;text-decoration:none;background:#16a34a;color:#fff;border-radius:16px;padding:13px 18px;font-weight:700;white-space:nowrap}.download-btn:hover{background:#15803d}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px;background:linear-gradient(135deg,#dbeafe,#f8fbff)}.login-card{width:100%;max-width:430px;background:#fff;border-radius:28px;padding:28px;box-shadow:0 18px 44px rgba(15,23,42,.14)}.login-logo{width:76px;height:76px;border-radius:24px;background:linear-gradient(135deg,#0b57d0,#16a3ff);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:24px;margin-bottom:14px}.login-card h1{font-size:30px}.login-card p{color:#64748b;margin-bottom:16px}@media(max-width:640px){.hero{align-items:flex-start}.logo{width:60px;height:60px;border-radius:18px}.wrap{padding:10px}.card{min-height:225px}.download-box{display:block}.download-btn{margin-top:12px;width:100%;text-align:center}.topbar{display:block}.topbar a{display:inline-block;margin-top:10px}}